<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Appointment Test</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
padding: 20px;
max-width: 720px;
}
h1 { margin-bottom: 10px; }
label {
display: block;
margin-top: 14px;
font-weight: 700;
}
select, input, button {
width: 100%;
padding: 12px;
margin-top: 8px;
font-size: 16px;
}
button {
margin-top: 18px;
cursor: pointer;
}
.card {
border: 1px solid #ddd;
border-radius: 12px;
padding: 16px;
}
.note {
margin-top: 14px;
color: #666;
font-size: 14px;
}
.success {
border: 1px solid #cfe9cf;
background: #f3fff3;
border-radius: 12px;
padding: 16px;
}
.muted { color: #666; }
</style>
</head>
<body>
<h1>Register for an Appointment</h1>
<div class="card" id="formCard">
<label for="location">Choose location</label>
<select id="location"></select>
<label for="slot">Choose time</label>
<select id="slot"></select>
<label for="name">Name</label>
<input id="name" placeholder="First + last name" />
<label for="email">Email</label>
<input id="email" placeholder="name@email.com" />
<button id="submitBtn" type="button">Request Appointment</button>
<div class="note">
This is a UI test only. “Request received” does not mean confirmed.
</div>
</div>
<div id="successCard" class="success" style="display:none;">
<h2>Request received</h2>
<p class="muted" id="summary"></p>
<button id="backBtn" type="button">Back</button>
</div>
<script>
// UI-only slot data (edit freely)
const SLOT_DATA = {
"Manhattan": [
"11:00 – 11:15",
"11:15 – 11:30",
"11:30 – 11:45",
"11:45 – 12:00"
],
"Brooklyn": [
"10:00 – 10:15",
"10:15 – 10:30",
"10:30 – 10:45"
],
"Miami": [
"12:00 – 12:15",
"12:15 – 12:30",
"12:30 – 12:45"
],
"Chicago": [
"11:00 – 11:15",
"11:15 – 11:30",
"11:30 – 11:45"
],
"Los Angeles": [
"11:00 – 11:15",
"11:15 – 11:30",
"11:30 – 11:45",
"11:45 – 12:00"
],
"DSM NY": [
"09:00 – 09:15",
"09:15 – 09:30",
"09:30 – 09:45"
],
"DSM LA": [
"09:00 – 09:15",
"09:15 – 09:30",
"09:30 – 09:45"
]
};
const locationEl = document.getElementById("location");
const slotEl = document.getElementById("slot");
const submitBtn = document.getElementById("submitBtn");
const formCard = document.getElementById("formCard");
const successCard = document.getElementById("successCard");
const summary = document.getElementById("summary");
const backBtn = document.getElementById("backBtn");
function fillLocations() {
const locations = Object.keys(SLOT_DATA);
locationEl.innerHTML = locations
.map(l => `<option value="${l}">${l}</option>`)
.join("");
}
function fillSlotsForLocation(loc) {
const slots = SLOT_DATA[loc] || [];
slotEl.innerHTML = slots
.map(s => `<option value="${s}">${s}</option>`)
.join("");
}
locationEl.addEventListener("change", () => {
fillSlotsForLocation(locationEl.value);
});
submitBtn.addEventListener("click", () => {
const loc = locationEl.value;
const slot = slotEl.value;
const name = document.getElementById("name").value.trim() || "(name not entered)";
const email = document.getElementById("email").value.trim() || "(email not entered)";
summary.textContent = `${name} • ${email} • ${loc} • ${slot}`;
formCard.style.display = "none";
successCard.style.display = "block";
});
backBtn.addEventListener("click", () => {
successCard.style.display = "none";
formCard.style.display = "block";
});
// Initialize
fillLocations();
fillSlotsForLocation(Object.keys(SLOT_DATA)[0]);
</script>
</body>
</html>