Я не могу отформатировать отозванное электронное письмо пользователя. То есть я не могу отобразить его слева вверху ⇐ CSS

[Anonymous]

Я перепробовал все — от чата до Gemini и второго пилота, — но письмо по-прежнему центрировано. Мне нужно, чтобы оно отображалось слева. Я в полном отчаянии. Это финальный проект нашего курса.
Когда я меняю файл php на html, стиль работает. Однако при вставке php-кода стиль не работает. Пожалуйста, помогите!

Код: Выделить всё

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 */
}

Код: Выделить всё

Final Project





Holabels


Movie Reservation
Alay &  Cabo

Please choose a movie


Her (143₱)
Call me by your name (300₱)
Isang daang tula para kay (400₱)
Ta Kape (300₱)

























You have selected 0 seat(s) for a total of ₱0

[url=/DBMS-Project/authentication/logout.php]Logout[/url]

[img]https://i .sstatic.net/wiHbMR6Y.png[/img]


Подробнее здесь: https://stackoverflow.com/questions/793 ... y-it-on-th