Car parking webserver code html,css

String html = "<html><head>";

html += "<style>";

html += "body { background: #201f1f; color: #FFF8E0; font-family: Arial, sans-serif; margin: 0; padding: 0; height: 100vh; display: flex; justify-content: center; align-items: center; text-align: center; }";

html += ".card { background: rgb(0, 0, 0); backdrop-filter: blur(10px); border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.2); padding: 30px; width: 800px; height: 400px; box-shadow: 0 20px 32px rgba(255, 255, 255, 0.441); display: flex; align-items: center; justify-content: space-between; }";

html += ".content { flex: 1; text-align: left; }";

html += "h1 { font-size: 2.5em; color: #FFC300; margin-bottom: 20px; margin-top: -20px; }";

html += "p { font-size: 1.2em; margin: 10px 0; }";

html += "#ip { margin-top: -15px; font-size: 0.7em; color: rgb(121, 120, 120); margin-bottom: 20px; }";

html += "#avSlots { font-size: 1.6em; margin-bottom: 10px; font-weight: bold; }";

html += "button { background-color: #FFC300; color: #000814; width: 150px; height: 45px; font-size: 1em; font-weight: bold; border: none; border-radius: 20px; cursor: pointer; transition: background-color 0.3s ease, transform 0.2s ease; margin-top: 25px; margin-left: 2px; }";

html += "#slotBtn { background-color: transparent; border: #FFC300 solid 2px; color: #fcce37; margin-right: 10px; }";

html += "button:hover { background-color: #e0ac00; transform: scale(1.05); }";

html += "img { width: 350px; height: auto; border-radius: 10px; }";

html += "ul { list-style-type: none; padding: 0; margin: 0; }";

html += "li { font-size: 1.2em; margin-bottom: 10px; padding-left: 0; margin-left: 0; }";

html += "@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }";

html += "@keyframes slideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } }";

html += "</style>";

html += "</head><body>";

html += "<div class='card'>";

html += "<img src='https://assurancecreative.com/wp-content/uploads/2023/09/Car-Photo-Mirror-Effect-After.jpg' alt='Smart Parking'>";

html += "<div class='content'>";

html += "<h1>Smart Parking System</h1>";

html += "<p id='ip'>IP Address: " + WiFi.localIP().toString() + "</p>";

html += "<p id='avSlots'>Available Slots: " + String(availableSlots) + "</p>";

for (int i = 0; i < 4; i++) {

html += "<p>Slot " + String(i + 1) + ": " + parkingStatus[i] + "</p>";

}

html += "<div>";

html += "<a href='/status'><button id='slotBtn'>Slot Status</button></a>";

html += "<a href='/bill'><button id='billBtn'>View Bill</button></a>";

html += "</div>";

html += "</body></html>";

server.send(200, "text/html", html);

}

void handleStatus() {

String html = "<html><body>";

html += "<h1>Slot Status</h1>";

for (int i = 0; i < 4; i++) {

html += "<p>Slot " + String(i + 1) + ": " + parkingStatus[i] + "</p>";

}

html += "<a href='/'><button>Back</button></a>";

html += "</body></html>";

server.send(200, "text/html", html);

Car parking webserver code html,css