页面 簡單
Hotel Contact & Location
A full contact and location page for Aurelia Hotels featuring a two-column layout with a CSS map placeholder, address/hours panel, a validated contact form with success state, a copy-address button, and an FAQ accordion.
在 Lab 開啟
MCP
html css vanilla-js
目標: JS HTML
程式碼
/* ── Design tokens ───────────────────────────────────────────────────────────── */
:root {
--navy: #1a2b4a;
--navy-d: #0f1d36;
--navy-2: #2d4570;
--cream: #f7f3eb;
--cream-2: #ece5d4;
--bone: #fbf8f2;
--gold: #c9a649;
--gold-light: #e0c378;
--gold-d: #a88a2e;
--ink: #161e2c;
--ink-2: #2e3a52;
--warm-gray: #6c7280;
--line: rgba(22, 30, 44, 0.1);
--line-strong: rgba(22, 30, 44, 0.18);
--success: #4a7752;
--danger: #b34232;
--warning: #d99020;
--info: #4a6da0;
--font-display: "Cormorant Garamond", Georgia, serif;
--font-body: "Inter", system-ui, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, monospace;
--r-sm: 6px;
--r-md: 10px;
--r-lg: 16px;
--shadow-1: 0 1px 2px rgba(22, 30, 44, 0.06), 0 2px 8px rgba(22, 30, 44, 0.06);
--shadow-2: 0 12px 36px rgba(15, 29, 54, 0.16);
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: var(--font-body);
background: var(--cream);
color: var(--ink);
-webkit-font-smoothing: antialiased;
}
/* ── Nav ── */
.nav {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 10;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 20px 40px;
}
.brand {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
color: var(--bone);
}
.brand-mark {
width: 40px;
height: 40px;
display: grid;
place-items: center;
border-radius: var(--r-md);
background: var(--gold);
color: var(--navy-d);
font-family: var(--font-display);
font-weight: 700;
font-size: 1.4rem;
}
.brand-name {
font-family: var(--font-display);
font-size: 1.3rem;
font-weight: 700;
letter-spacing: 0.01em;
}
.brand-name em {
font-style: normal;
color: var(--gold-light);
}
.nav-links {
display: flex;
gap: 26px;
margin-left: auto;
}
.nav-links a {
color: rgba(251, 248, 242, 0.8);
text-decoration: none;
font-size: 0.9rem;
font-weight: 500;
}
.nav-links a:hover,
.nav-links a.active {
color: var(--gold-light);
}
.nav-actions {
display: flex;
align-items: center;
gap: 18px;
}
.nav-link {
color: rgba(251, 248, 242, 0.8);
text-decoration: none;
font-size: 0.9rem;
font-weight: 500;
}
.nav-link:hover {
color: var(--bone);
}
.nav-cta {
background: rgba(251, 248, 242, 0.12);
border: 1px solid rgba(251, 248, 242, 0.3);
color: var(--bone);
font-family: inherit;
font-size: 0.86rem;
font-weight: 600;
padding: 9px 16px;
border-radius: 999px;
cursor: pointer;
}
.nav-cta:hover {
background: rgba(251, 248, 242, 0.2);
}
/* ── Page header ── */
.page-head {
position: relative;
min-height: 320px;
padding: 130px 40px 60px;
display: flex;
align-items: flex-end;
background: linear-gradient(135deg, var(--navy-d) 0%, var(--navy) 55%, var(--navy-2) 100%);
overflow: hidden;
}
.page-head::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(100% 80% at 90% 5%, rgba(201, 166, 73, 0.2), transparent 50%),
radial-gradient(60% 60% at 0% 100%, rgba(45, 69, 112, 0.5), transparent 60%);
pointer-events: none;
}
.page-head-inner {
position: relative;
max-width: 1100px;
width: 100%;
margin: 0 auto;
color: var(--bone);
}
.eyebrow {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--gold-light);
font-weight: 600;
}
.page-head h1 {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(2.2rem, 5vw, 3.6rem);
line-height: 1.06;
letter-spacing: -0.01em;
margin: 8px 0 12px;
}
.lede {
font-size: 0.98rem;
line-height: 1.65;
color: rgba(251, 248, 242, 0.78);
max-width: 560px;
}
/* ── Main two-column grid ── */
.main-grid {
max-width: 1100px;
margin: 0 auto;
padding: 56px 40px 80px;
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: 40px;
align-items: start;
}
/* ── Location column ── */
.location-col {
display: flex;
flex-direction: column;
gap: 22px;
}
/* CSS map */
.map-box {
border-radius: var(--r-lg);
overflow: hidden;
height: 260px;
position: relative;
border: 1px solid var(--line);
box-shadow: var(--shadow-1);
}
.map-bg {
width: 100%;
height: 100%;
background: #e8e0d0;
position: relative;
overflow: hidden;
}
.map-grid {
position: absolute;
inset: 0;
background-image: linear-gradient(rgba(180, 170, 150, 0.4) 1px, transparent 1px),
linear-gradient(90deg, rgba(180, 170, 150, 0.4) 1px, transparent 1px);
background-size: 40px 40px;
}
.map-road {
position: absolute;
background: #fff;
}
.map-road-h {
left: 0;
right: 0;
height: 10px;
transform: translateY(-50%);
}
.map-road-v {
top: 0;
bottom: 0;
width: 10px;
transform: translateX(-50%);
}
.map-block {
position: absolute;
background: rgba(160, 148, 120, 0.35);
border-radius: 3px;
}
.map-park {
background: rgba(100, 150, 90, 0.3);
}
.map-pin {
position: absolute;
transform: translate(-50%, -100%);
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
z-index: 2;
}
.pin-dot {
width: 20px;
height: 20px;
border-radius: 50% 50% 50% 0;
transform: rotate(-45deg);
background: var(--gold);
border: 2px solid var(--navy-d);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.pin-label {
background: var(--navy-d);
color: var(--gold-light);
font-size: 0.68rem;
font-weight: 700;
padding: 3px 8px;
border-radius: var(--r-sm);
white-space: nowrap;
letter-spacing: 0.04em;
}
/* Info panel */
.info-panel {
background: var(--bone);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 24px 24px 20px;
box-shadow: var(--shadow-1);
display: flex;
flex-direction: column;
gap: 16px;
}
.info-block {
display: flex;
align-items: flex-start;
gap: 14px;
}
.info-ic {
width: 36px;
height: 36px;
flex-shrink: 0;
border-radius: var(--r-md);
background: rgba(201, 166, 73, 0.14);
color: var(--gold-d);
display: grid;
place-items: center;
font-size: 1rem;
}
.info-block strong {
display: block;
font-size: 0.74rem;
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 700;
color: var(--warm-gray);
margin-bottom: 3px;
}
.info-block p,
.info-block a {
font-size: 0.9rem;
color: var(--ink-2);
text-decoration: none;
line-height: 1.5;
}
.info-block a:hover {
color: var(--gold-d);
text-decoration: underline;
}
.copy-btn {
display: flex;
align-items: center;
gap: 8px;
background: var(--cream-2);
border: 1px solid var(--line-strong);
color: var(--ink-2);
font-family: inherit;
font-size: 0.82rem;
font-weight: 600;
padding: 9px 16px;
border-radius: var(--r-md);
cursor: pointer;
align-self: flex-start;
transition: all 0.15s;
}
.copy-btn:hover {
background: var(--cream);
border-color: var(--gold);
color: var(--gold-d);
}
/* Hours table */
.hours-panel {
background: var(--bone);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 22px 24px;
box-shadow: var(--shadow-1);
}
.hours-panel h3 {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.3rem;
color: var(--navy-d);
margin-bottom: 14px;
}
.hours-table {
width: 100%;
border-collapse: collapse;
font-size: 0.86rem;
}
.hours-table td {
padding: 8px 0;
border-bottom: 1px solid var(--line);
color: var(--ink-2);
}
.hours-table tr:last-child td {
border-bottom: none;
}
.hours-val {
text-align: right;
font-family: var(--font-mono);
font-weight: 700;
font-size: 0.8rem;
color: var(--navy-d);
font-variant-numeric: tabular-nums;
}
/* ── Form column ── */
.form-col {
display: flex;
flex-direction: column;
gap: 30px;
}
/* Form card */
.form-card {
background: var(--bone);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 32px 34px;
box-shadow: var(--shadow-1);
position: relative;
}
.form-header {
margin-bottom: 26px;
}
.form-header h2 {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.9rem;
color: var(--navy-d);
}
.form-header p {
font-size: 0.86rem;
color: var(--warm-gray);
margin-top: 5px;
}
/* Form rows and field groups */
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
.field-group {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 20px;
}
.field-group label {
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--ink-2);
}
.req {
color: var(--gold-d);
}
.field-group input,
.field-group select,
.field-group textarea {
font-family: inherit;
font-size: 0.92rem;
color: var(--ink);
background: var(--cream);
border: 1px solid var(--line-strong);
border-radius: var(--r-md);
padding: 11px 14px;
outline: none;
transition: border-color 0.15s, box-shadow 0.15s;
width: 100%;
}
.field-group textarea {
resize: vertical;
min-height: 120px;
}
.field-group input:focus,
.field-group select:focus,
.field-group textarea:focus {
border-color: var(--navy-2);
box-shadow: 0 0 0 3px rgba(45, 69, 112, 0.1);
}
.field-group.has-error input,
.field-group.has-error select,
.field-group.has-error textarea {
border-color: var(--danger);
}
.field-err {
font-size: 0.76rem;
color: var(--danger);
font-weight: 600;
min-height: 1em;
}
.char-count {
text-align: right;
font-size: 0.74rem;
font-family: var(--font-mono);
color: var(--warm-gray);
font-variant-numeric: tabular-nums;
}
.char-count.over {
color: var(--danger);
font-weight: 700;
}
/* Form footer */
.form-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: 4px;
}
.form-note {
font-size: 0.76rem;
color: var(--warm-gray);
}
.btn-submit {
background: var(--navy);
color: var(--bone);
border: none;
font-family: inherit;
font-size: 0.9rem;
font-weight: 700;
padding: 12px 28px;
border-radius: var(--r-md);
cursor: pointer;
transition: background 0.15s;
}
.btn-submit:hover {
background: var(--navy-2);
}
.btn-submit:disabled {
opacity: 0.5;
cursor: default;
}
/* Success state */
.success-state {
text-align: center;
padding: 40px 20px;
}
.success-ic {
width: 64px;
height: 64px;
border-radius: 50%;
background: rgba(74, 119, 82, 0.14);
color: var(--success);
font-size: 1.8rem;
display: grid;
place-items: center;
margin: 0 auto 20px;
border: 2px solid rgba(74, 119, 82, 0.3);
}
.success-state h3 {
font-family: var(--font-display);
font-weight: 700;
font-size: 2rem;
color: var(--navy-d);
margin-bottom: 10px;
}
.success-state p {
font-size: 0.9rem;
color: var(--ink-2);
line-height: 1.6;
max-width: 380px;
margin: 0 auto 24px;
}
.btn-reset {
background: var(--cream-2);
border: 1px solid var(--line-strong);
color: var(--ink-2);
font-family: inherit;
font-size: 0.86rem;
font-weight: 600;
padding: 10px 22px;
border-radius: var(--r-md);
cursor: pointer;
transition: all 0.15s;
}
.btn-reset:hover {
background: var(--cream);
border-color: var(--navy);
color: var(--navy-d);
}
/* ── FAQ accordion ── */
.faq-section {
background: var(--bone);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 28px 30px;
box-shadow: var(--shadow-1);
}
.faq-title {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.7rem;
color: var(--navy-d);
margin-bottom: 20px;
}
.acc-item {
border-bottom: 1px solid var(--line);
}
.acc-item:last-child {
border-bottom: none;
}
.acc-trigger {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
background: transparent;
border: none;
padding: 16px 0;
cursor: pointer;
text-align: left;
font-family: inherit;
font-size: 0.92rem;
font-weight: 600;
color: var(--ink);
transition: color 0.15s;
}
.acc-trigger:hover {
color: var(--navy-2);
}
.acc-trigger[aria-expanded="true"] {
color: var(--navy-d);
}
.acc-ic {
font-size: 1.3rem;
color: var(--gold-d);
flex-shrink: 0;
line-height: 1;
transition: transform 0.2s;
font-weight: 400;
}
.acc-trigger[aria-expanded="true"] .acc-ic {
transform: rotate(45deg);
}
.acc-body {
overflow: hidden;
max-height: 0;
transition: max-height 0.28s ease;
}
.acc-body p {
padding: 0 0 16px;
font-size: 0.88rem;
color: var(--ink-2);
line-height: 1.7;
}
/* ── Footer ── */
.foot {
background: var(--navy-d);
color: rgba(251, 248, 242, 0.5);
text-align: center;
padding: 22px 40px;
font-size: 0.8rem;
}
.foot a {
color: rgba(251, 248, 242, 0.6);
text-decoration: none;
}
.foot a:hover {
color: var(--gold-light);
}
/* ── Toast ── */
.toast {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
background: var(--navy-d);
color: var(--bone);
padding: 12px 24px;
border-radius: 999px;
font-size: 0.88rem;
font-weight: 600;
box-shadow: var(--shadow-2);
z-index: 50;
white-space: nowrap;
}
/* ── Responsive ── */
@media (max-width: 960px) {
.main-grid {
grid-template-columns: 1fr;
gap: 30px;
}
}
@media (max-width: 720px) {
.nav-links {
display: none;
}
.nav {
padding: 16px 20px;
}
.page-head {
padding: 120px 20px 50px;
min-height: 260px;
}
.main-grid {
padding: 36px 20px 60px;
}
.form-card {
padding: 24px 20px;
}
.faq-section {
padding: 22px 20px;
}
}
@media (max-width: 560px) {
.form-row {
grid-template-columns: 1fr;
gap: 0;
}
.form-actions {
flex-direction: column;
align-items: stretch;
}
.btn-submit {
text-align: center;
}
}// ── Toast helper ─────────────────────────────────────────────────────────────
const toast = document.getElementById("toast");
function showToast(msg) {
toast.textContent = msg;
toast.hidden = false;
clearTimeout(showToast._t);
showToast._t = setTimeout(() => (toast.hidden = true), 2200);
}
// ── Copy address ──────────────────────────────────────────────────────────────
document.getElementById("copyAddress").addEventListener("click", () => {
const addr = document.getElementById("hotelAddress").textContent;
navigator.clipboard
.writeText(addr)
.then(() => {
showToast("Address copied to clipboard!");
})
.catch(() => {
// Fallback for restricted clipboard contexts
showToast("Address: " + addr);
});
});
// ── Character counter ─────────────────────────────────────────────────────────
const messageArea = document.getElementById("message");
const charCount = document.getElementById("charCount");
const MAX_CHARS = 500;
messageArea.addEventListener("input", () => {
const len = messageArea.value.length;
charCount.textContent = len;
charCount.parentElement.classList.toggle("over", len > MAX_CHARS);
});
// ── Contact form validation ───────────────────────────────────────────────────
const form = document.getElementById("contactForm");
function setError(fieldId, msg) {
const fg = document.getElementById("fg-" + fieldId);
const err = document.getElementById("err-" + fieldId);
fg.classList.toggle("has-error", !!msg);
err.textContent = msg || "";
}
function clearErrors() {
["name", "email", "subject", "message"].forEach((id) => setError(id, ""));
}
function validateEmail(val) {
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val);
}
function runValidation() {
let valid = true;
const nameVal = document.getElementById("guestName").value.trim();
if (!nameVal) {
setError("name", "Please enter your full name.");
valid = false;
} else if (nameVal.length < 2) {
setError("name", "Name must be at least 2 characters.");
valid = false;
} else {
setError("name", "");
}
const emailVal = document.getElementById("guestEmail").value.trim();
if (!emailVal) {
setError("email", "Please enter your email address.");
valid = false;
} else if (!validateEmail(emailVal)) {
setError("email", "Please enter a valid email address.");
valid = false;
} else {
setError("email", "");
}
const subjectVal = document.getElementById("subject").value;
if (!subjectVal) {
setError("subject", "Please select a subject.");
valid = false;
} else {
setError("subject", "");
}
const msgVal = document.getElementById("message").value.trim();
if (!msgVal) {
setError("message", "Please enter your message.");
valid = false;
} else if (msgVal.length < 10) {
setError("message", "Message must be at least 10 characters.");
valid = false;
} else if (msgVal.length > MAX_CHARS) {
setError("message", `Message must be ${MAX_CHARS} characters or fewer.`);
valid = false;
} else {
setError("message", "");
}
return valid;
}
// Clear individual field errors on input
["guestName", "guestEmail", "subject", "message"].forEach((id) => {
const el = document.getElementById(id);
el.addEventListener("input", () => {
const fieldId = id === "guestName" ? "name" : id === "guestEmail" ? "email" : id;
setError(fieldId, "");
el.closest(".field-group").classList.remove("has-error");
});
});
form.addEventListener("submit", (e) => {
e.preventDefault();
clearErrors();
if (!runValidation()) {
showToast("Please fix the errors before sending.");
return;
}
const name = document.getElementById("guestName").value.trim();
const email = document.getElementById("guestEmail").value.trim();
// Show success state
document.getElementById("contactForm").hidden = true;
document.querySelector(".form-header").hidden = true;
document.getElementById("successName").textContent = name;
document.getElementById("successEmail").textContent = email;
document.getElementById("successState").hidden = false;
showToast("Message sent — we'll be in touch soon!");
});
// Reset back to form
document.getElementById("btnReset").addEventListener("click", () => {
form.reset();
charCount.textContent = "0";
clearErrors();
document.getElementById("contactForm").hidden = false;
document.querySelector(".form-header").hidden = false;
document.getElementById("successState").hidden = true;
});
// ── FAQ accordion ─────────────────────────────────────────────────────────────
document.querySelectorAll(".acc-trigger").forEach((trigger) => {
trigger.addEventListener("click", () => {
const item = trigger.closest(".acc-item");
const body = item.querySelector(".acc-body");
const isOpen = trigger.getAttribute("aria-expanded") === "true";
// Close all others
document.querySelectorAll(".acc-item").forEach((el) => {
el.querySelector(".acc-trigger").setAttribute("aria-expanded", "false");
el.querySelector(".acc-body").style.maxHeight = "0";
});
// Toggle this one
if (!isOpen) {
trigger.setAttribute("aria-expanded", "true");
body.style.maxHeight = body.scrollHeight + "px";
}
});
});<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap"
/>
<link rel="stylesheet" href="style.css" />
<title>Contact & Location · Aurelia Hotels</title>
</head>
<body>
<!-- ── Nav ── -->
<header class="nav">
<a class="brand" href="#">
<span class="brand-mark">A</span>
<span class="brand-name">Aurelia <em>Hotels</em></span>
</a>
<nav class="nav-links">
<a href="#">Rooms</a>
<a href="#">Amenities</a>
<a href="#">Offers</a>
<a href="#" class="active">Contact</a>
</nav>
<div class="nav-actions">
<a class="nav-link" href="#">Sign in</a>
<button class="nav-cta">My booking</button>
</div>
</header>
<!-- ── Page header ── -->
<section class="page-head">
<div class="page-head-inner">
<p class="eyebrow">Aurelia · Madrid</p>
<h1>Contact & Location</h1>
<p class="lede">Our concierge team is available 24 hours a day to assist with reservations, directions, and any special requests.</p>
</div>
</section>
<!-- ── Main two-column layout ── -->
<main class="main-grid">
<!-- Left: map + info panel -->
<div class="location-col">
<!-- CSS map placeholder -->
<div class="map-box" aria-label="Hotel location map placeholder">
<div class="map-bg">
<div class="map-grid"></div>
<!-- Street lines drawn with CSS -->
<div class="map-road map-road-h" style="top:35%"></div>
<div class="map-road map-road-h" style="top:55%"></div>
<div class="map-road map-road-h" style="top:72%"></div>
<div class="map-road map-road-v" style="left:28%"></div>
<div class="map-road map-road-v" style="left:50%"></div>
<div class="map-road map-road-v" style="left:72%"></div>
<!-- Park block -->
<div class="map-block map-park" style="top:12%;left:56%;width:22%;height:18%"></div>
<!-- Building blocks -->
<div class="map-block" style="top:10%;left:10%;width:14%;height:20%"></div>
<div class="map-block" style="top:10%;left:30%;width:18%;height:20%"></div>
<div class="map-block" style="top:60%;left:10%;width:12%;height:16%"></div>
<div class="map-block" style="top:60%;left:56%;width:12%;height:16%"></div>
<div class="map-block" style="top:60%;left:74%;width:14%;height:16%"></div>
<!-- Hotel pin -->
<div class="map-pin" style="top:34%;left:49%">
<div class="pin-dot"></div>
<div class="pin-label">Aurelia Madrid</div>
</div>
</div>
</div>
<!-- Address & info block -->
<div class="info-panel">
<div class="info-block">
<span class="info-ic">◈</span>
<div>
<strong>Address</strong>
<p id="hotelAddress">Calle de Alcalá 14, 28014 Madrid, Spain</p>
</div>
</div>
<div class="info-block">
<span class="info-ic">✆</span>
<div>
<strong>Phone</strong>
<p><a href="tel:+34912345678">+34 91 234 5678</a></p>
</div>
</div>
<div class="info-block">
<span class="info-ic">✉</span>
<div>
<strong>Email</strong>
<p><a href="mailto:[email protected]">[email protected]</a></p>
</div>
</div>
<div class="info-block">
<span class="info-ic">⟳</span>
<div>
<strong>Directions</strong>
<p>Metro: Banco de España (L2) · 3-min walk<br />Airport: 25 min via A-2 / Cercanías C-1</p>
</div>
</div>
<button class="copy-btn" id="copyAddress" aria-label="Copy hotel address to clipboard">
<span>⎘</span> Copy address
</button>
</div>
<!-- Opening hours -->
<div class="hours-panel">
<h3>Opening Hours</h3>
<table class="hours-table">
<tbody>
<tr><td>Front Desk</td><td class="hours-val">24 / 7</td></tr>
<tr><td>Concierge</td><td class="hours-val">07:00 – 23:00</td></tr>
<tr><td>Oria Restaurant</td><td class="hours-val">07:00 – 23:00</td></tr>
<tr><td>Aurelia Spa</td><td class="hours-val">09:00 – 21:00</td></tr>
<tr><td>Pool & Gym</td><td class="hours-val">06:30 – 22:00</td></tr>
<tr><td>Valet Parking</td><td class="hours-val">24 / 7</td></tr>
</tbody>
</table>
</div>
</div><!-- /location-col -->
<!-- Right: contact form + FAQ -->
<div class="form-col">
<!-- Contact form -->
<div class="form-card" id="formCard">
<div class="form-header">
<h2>Send us a message</h2>
<p>We aim to respond within 4 business hours.</p>
</div>
<form class="contact-form" id="contactForm" novalidate autocomplete="off">
<div class="form-row">
<div class="field-group" id="fg-name">
<label for="guestName">Full name <span class="req">*</span></label>
<input type="text" id="guestName" name="name" placeholder="e.g. Sophie Martínez" autocomplete="name" />
<span class="field-err" id="err-name"></span>
</div>
<div class="field-group" id="fg-email">
<label for="guestEmail">Email address <span class="req">*</span></label>
<input type="email" id="guestEmail" name="email" placeholder="[email protected]" autocomplete="email" />
<span class="field-err" id="err-email"></span>
</div>
</div>
<div class="field-group" id="fg-subject">
<label for="subject">Subject <span class="req">*</span></label>
<select id="subject" name="subject">
<option value="">— Select a subject —</option>
<option value="reservation">Reservation enquiry</option>
<option value="spa">Spa & wellness booking</option>
<option value="events">Events & private dining</option>
<option value="feedback">Guest feedback</option>
<option value="other">Other</option>
</select>
<span class="field-err" id="err-subject"></span>
</div>
<div class="field-group" id="fg-message">
<label for="message">Message <span class="req">*</span></label>
<textarea id="message" name="message" rows="5" placeholder="How can we help you? Please include your arrival date if relevant."></textarea>
<div class="char-count"><span id="charCount">0</span> / 500</div>
<span class="field-err" id="err-message"></span>
</div>
<div class="form-actions">
<p class="form-note"><span class="req">*</span> Required fields</p>
<button type="submit" class="btn-submit" id="btnSubmit">Send message</button>
</div>
</form>
<!-- Success state (hidden until submit) -->
<div class="success-state" id="successState" hidden>
<div class="success-ic">✓</div>
<h3>Message received</h3>
<p>Thank you, <strong id="successName"></strong>. Our team will reply to <strong id="successEmail"></strong> within 4 hours.</p>
<button class="btn-reset" id="btnReset">Send another message</button>
</div>
</div>
<!-- FAQ accordion -->
<div class="faq-section">
<h2 class="faq-title">Frequently Asked Questions</h2>
<div class="accordion" id="faq">
<div class="acc-item">
<button class="acc-trigger" aria-expanded="false">
<span>What are the check-in and check-out times?</span>
<span class="acc-ic">+</span>
</button>
<div class="acc-body">
<p>Standard check-in is from 15:00 and check-out is by 12:00. Early check-in (from 12:00) and late check-out (until 14:00) are complimentary for Aurelia Signature members, and available on request for all guests subject to availability.</p>
</div>
</div>
<div class="acc-item">
<button class="acc-trigger" aria-expanded="false">
<span>Is breakfast included in my stay?</span>
<span class="acc-ic">+</span>
</button>
<div class="acc-body">
<p>Breakfast inclusion depends on your rate. Bed & breakfast rates include a full buffet at Oria Restaurant (07:00–11:00). Room-only guests can add breakfast for €28 per person — contact us to arrange. Spa Escape and Family Stay packages include breakfast as standard.</p>
</div>
</div>
<div class="acc-item">
<button class="acc-trigger" aria-expanded="false">
<span>Do you offer airport transfers?</span>
<span class="acc-ic">+</span>
</button>
<div class="acc-body">
<p>Yes. Private airport transfers are available from Adolfo Suárez Madrid–Barajas Airport (MAD). Prices start from €65 for a standard sedan. Please book at least 24 hours in advance via this form or by calling +34 91 234 5678.</p>
</div>
</div>
<div class="acc-item">
<button class="acc-trigger" aria-expanded="false">
<span>Is parking available at the hotel?</span>
<span class="acc-ic">+</span>
</button>
<div class="acc-body">
<p>Covered valet parking is available 24/7 at €42 per day. Self-parking in the adjacent public garage is available at €28 per day. Please inform us of your vehicle in advance so we can prepare your space.</p>
</div>
</div>
<div class="acc-item">
<button class="acc-trigger" aria-expanded="false">
<span>Are pets allowed?</span>
<span class="acc-ic">+</span>
</button>
<div class="acc-body">
<p>We welcome well-behaved dogs under 10 kg in our Deluxe rooms (ground floor). A pet supplement of €30 per night applies. Please notify us at the time of booking. Cats and other animals are not permitted in-room but we can recommend nearby pet-care facilities.</p>
</div>
</div>
</div><!-- /accordion -->
</div>
</div><!-- /form-col -->
</main>
<!-- ── Footer strip ── -->
<footer class="foot">
<p>© 2026 Aurelia Hotels Group · <a href="#">Terms</a> · <a href="#">Privacy</a></p>
</footer>
<div class="toast" id="toast" hidden role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>Contact & Location
A full-screen contact and location page for Aurelia Hotels Madrid. The two-column layout places a CSS-drawn map placeholder with address pin, full address, phone, email, directions summary, and front-desk / restaurant opening hours on the left, and a contact form (name, email, subject select, message textarea) with inline validation and a success state on the right. A “Copy address” button writes the address to the clipboard with toast confirmation. Below the form a compact FAQ accordion covers the most common guest questions, with smooth open/close transitions.