I can’t format the recalled email of the user. That is, I can’t display it on the top left

const container = document.querySelector(".seats-container");
const seats = document.querySelectorAll(".row .seat:not(.sold)");
const count = document.getElementById("count");
const total = document.getElementById("total");
const movieSelect = document.getElementById("movie");

populateUI();

let ticketPrice = +movieSelect.value;

// Save selected movie index and price
function setMovieData(movieIndex, moviePrice) {
  localStorage.setItem("selectedMovieIndex", movieIndex);
  localStorage.setItem("selectedMoviePrice", moviePrice);
}

// Update total and count
function updateSelectedCount() {
  const selectedSeats = document.querySelectorAll(".row .seat.selected");

  const seatsIndex = [...selectedSeats].map((seat) => [...seats].indexOf(seat));

  localStorage.setItem("selectedSeats", JSON.stringify(seatsIndex));

  const selectedSeatsCount = selectedSeats.length;

  count.innerText = selectedSeatsCount;
  total.innerText = selectedSeatsCount * ticketPrice;

  setMovieData(movieSelect.selectedIndex, movieSelect.value);
}

// Get data from localStorage and populate UI
function populateUI() {
  const selectedSeats = JSON.parse(localStorage.getItem("selectedSeats"));

  if (selectedSeats !== null && selectedSeats.length > 0) {
    seats.forEach((seat, index) => {
      if (selectedSeats.indexOf(index) > -1) {
        seat.classList.add("selected");
      }
    });
  }

  const selectedMovieIndex = localStorage.getItem("selectedMovieIndex");

  if (selectedMovieIndex !== null) {
    movieSelect.selectedIndex = selectedMovieIndex;
  }
}

// Movie select event
movieSelect.addEventListener("change", (e) => {
  ticketPrice = +e.target.value;
  setMovieData(e.target.selectedIndex, e.target.value);
  updateSelectedCount();
});

// Seat click event
container.addEventListener("click", (e) => {
  if (
    e.target.classList.contains("seat") &&
    !e.target.classList.contains("sold")
  ) {
    e.target.classList.toggle("selected");
    updateSelectedCount();
  }
});

// Initial count and total set
updateSelectedCount();

@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Ensure body has a relative position */
body {
  position: relative; /* Ensures that absolutely positioned elements are positioned relative to the body */
  font-family: 'Roboto', sans-serif;
  background-color: #1e293b; /* Deep navy background for a clean, modern look */
  color: #e2e8f0; /* Soft white for text to enhance readability */
  display: block;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  text-align: center;
}

header {
  background-color: #334155; /* Medium navy for subtle contrast */
  color: #e2e8f0; /* Soft white text */
  padding: 20px;
  width: 100%;
}

h1 {
  font-size: 35px;
  margin-bottom: 10px;
  color: #37a3d1; /* Light teal for a vibrant header */
}

p {
  font-size: 17px;
  color: #94a3b8; /* Light gray for secondary text */
}

.movie-container {
  margin: 25px;
}

select {
  padding: 3px;
  margin-top: 5px;
  background-color: #116691;
  color: #ffffff; /* White text for contrast */
  border: none;
  font-size: 16px;
  cursor: pointer;
  border-radius: 8px;
}

select:focus {
  outline: none;
  box-shadow: 0 0 5px rgba(56, 189, 248, 0.6); /* Light teal glow */
}

.theatre {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}

.screen {
  background-color: #64748b; /* Cool gray for a neutral screen color */
  height: 60px;
  width: 80%;
  margin: 30px 0;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.seats-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.row {
  display: flex;
  justify-content: center;
}

.seat {
  width: 40px;
  height: 40px;
  margin: 5px;
  background-color: #475569; /* Slate gray for default seats */
  border-radius: 6px;
  transition: background-color 0.3s, transform 0.3s;
}

.seat.selected {
  background-color: #0ea5e9; /* Bright blue for selected seats */
}

.seat.sold {
  background-color: #333e5dd5; /* Light gray for sold seats */
  border: 2px solid #7b8a94; /* Medium gray border for clearer distinction */
  opacity: 1; /* Ensure full opacity for visibility */
  position: relative;
}

.seat:hover:not(.sold) {
  background-color: #1e40af; /* Dark blue hover effect */
  cursor: pointer;
  transform: scale(1.1);
}

.summary {
  margin-top: 20px;
  font-size: 1.2em;
  color: #38bdf8; /* Light teal for the summary header */
}

#count, #total {
  font-weight: bold;
  color: #facc15; /* Bright yellow to highlight the count and total price */
}

/* Position the email at the upper left */
.user {
  position: fixed; /* This keeps the email fixed on the page even when scrolling */
  top: 20px; /* Adjust this value to place it where you want */
  left: 20px; /* Adjust this value to place it where you want */
  font-size: 20px; /* Set a reasonable font size */
  color: white; /* White text to make it visible against dark background */
  font-weight: bold;
  z-index: 10; /* Ensures that the email stays above other content */
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Final Project</title>
  </head>

  <body>
    <!-- Email at the top left -->
    <div class="user" id="user">
      Holabels
      <?php 
        include './authentication/connect.php';  // Correct the path to your connect.php file
        session_start(); // Ensure the session is started

        if (isset($_SESSION['email'])) {
          $email = $_SESSION['email'];

          // Ensure the connection was successful
          if ($conn) {
            $query = mysqli_query($conn, "SELECT email FROM `users` WHERE email='$email'");

            if ($query) {
              $row = mysqli_fetch_array($query);
              echo htmlspecialchars($row['email']); // Sanitize output to avoid XSS
            } else {
              echo "Error retrieving email.";  // Error message if query fails
            }
          }
        }
      ?>
    </div>

    <div class="header">
      <h1>Movie Reservation</h1>
      <p>Alay & Cabo</p>
    </div>

    <div class="movie-container">
      <label for="movie">Please choose a movie</label>
      <div>
        <select id="movie">
          <option value="143">Her (143₱)</option>
          <option value="300">Call me by your name (300₱)</option>
          <option value="400">Isang daang tula para kay (400₱)</option>
          <option value="300">Ta Kape (300₱)</option>
        </select>
      </div>
    </div>

    <div class="theatre">
      <div class="screen"></div>
      <div class="seats-container">
        <div class="row">
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
        </div>
        <div class="row">
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat sold"></div>
          <div class="seat sold"></div>
          <div class="seat"></div>
        </div>
        <div class="row">
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat sold"></div>
          <div class="seat sold"></div>
          <div class="seat"></div>
        </div>
        <div class="row">
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
        </div>
      </div>
    </div>

    <div class="summary">
      <p>
        You have selected <span id="count">0</span> seat(s) for a total of ₱<span id="total">0</span>
      </p>
      <a href="/DBMS-Project/authentication/logout.php">Logout</a>
    </div>

    <script src="script.js"></script>
  </body>
</html>