File size: 7,118 Bytes
ddd5681 2c541ca ddd5681 2c541ca ddd5681 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<meta id="meta-theme-color" name="theme-color" content="#070707">
<script>
(function () {
try {
var k = "hah-restaurant-theme";
var t = localStorage.getItem(k);
var th = t === "light" ? "light" : "dark";
document.documentElement.setAttribute("data-theme", th);
var meta = document.getElementById("meta-theme-color");
if (meta) meta.setAttribute("content", th === "light" ? "#f6f3ee" : "#070707");
} catch (e) {
document.documentElement.setAttribute("data-theme", "dark");
}
})();
</script>
<title>HAH restaurant | Reserve a table</title>
<meta name="description" content="Smart table reservation — pick your seat on the floor plan or get merged table suggestions.">
<link rel="icon" type="image/svg+xml" href="assets/logo-c.svg?v=1.17">
<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=Manrope:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap">
<link rel="stylesheet" href="styles.css?v=11">
</head>
<body>
<div class="app-shell">
<header class="app-header">
<a class="app-back" href="./">← Back</a>
<button type="button" class="theme-toggle" data-theme-toggle aria-label="Switch theme" title="Theme">
<svg class="theme-icon theme-icon-sun" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<circle cx="12" cy="12" r="4"/>
<path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/>
</svg>
<svg class="theme-icon theme-icon-moon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
</svg>
</button>
</header>
<main class="app-main app-main--wide" data-reservation>
<div class="app-hero app-hero--compact" data-res-hide-on-done>
<h1 class="app-hero__title">Reserve a table</h1>
<p class="app-hero__lead">Hold a table free — no payment until you come in. Cafe daytime and Indian cuisine evenings (5:00pm–10:00pm).</p>
</div>
<div class="res-toolbar" data-res-hide-on-done>
<div class="res-toolbar__group">
<span class="res-toolbar__label">Guests</span>
<div class="res-party-stepper" role="group" aria-label="Party size">
<button type="button" class="res-party-btn" data-res-party-down aria-label="Fewer guests">−</button>
<span class="res-party-val" data-res-party aria-live="polite">2</span>
<button type="button" class="res-party-btn" data-res-party-up aria-label="More guests">+</button>
</div>
</div>
<label class="res-toolbar__group res-toolbar__field">
<span class="res-toolbar__label">Date</span>
<input type="date" data-res-date required>
</label>
<label class="res-toolbar__group res-toolbar__field res-toolbar__field--wide">
<span class="res-toolbar__label">Expected arrival</span>
<select data-res-arrival required aria-label="Expected arrival window"></select>
</label>
</div>
<div class="res-mode-tabs" role="tablist" data-res-hide-on-done>
<button type="button" class="res-mode-tab is-active" data-res-mode="map" role="tab" aria-selected="true">Pick on floor plan</button>
<button type="button" class="res-mode-tab" data-res-mode="suggest" role="tab" aria-selected="false">Smart suggestions</button>
</div>
<div data-res-panel-map data-res-hide-on-done>
<div data-res-map class="res-map-wrap"></div>
<div class="res-map-actions">
<button type="button" class="res-link-btn" data-res-suggest-btn>Auto-pick best table</button>
<button type="button" class="res-link-btn" data-res-clear>Clear selection</button>
</div>
</div>
<div data-res-panel-suggest hidden data-res-hide-on-done>
<div data-res-suggestions class="res-suggestions-wrap"></div>
</div>
<div data-res-selection class="res-selection" hidden data-res-hide-on-done></div>
<form class="res-form checkout-block" data-res-form data-res-hide-on-done>
<h2 class="checkout-block__title">Your details</h2>
<label class="checkout-field">
<span>Name</span>
<input type="text" name="name" required autocomplete="name">
</label>
<fieldset class="res-confirm-via">
<legend>Reservation confirmation <em class="field-optional">(optional)</em></legend>
<label class="pay-option">
<input type="radio" name="confirm_via" value="none" checked data-res-confirm-via>
<span class="pay-option__body">
<span class="pay-option__name">No confirmation</span>
</span>
</label>
<label class="pay-option">
<input type="radio" name="confirm_via" value="email" data-res-confirm-via>
<span class="pay-option__body">
<span class="pay-option__name">Email</span>
<input type="email" name="email" autocomplete="email" data-res-email placeholder="you@example.com" aria-label="Email address" hidden disabled>
</span>
</label>
<label class="pay-option">
<input type="radio" name="confirm_via" value="phone" data-res-confirm-via>
<span class="pay-option__body">
<span class="pay-option__name">Phone</span>
<input type="tel" name="phone" autocomplete="tel" data-res-phone placeholder="Mobile number" aria-label="Phone number" hidden disabled>
</span>
</label>
</fieldset>
<label class="checkout-field">
<span>Notes (optional)</span>
<textarea name="notes" rows="2" placeholder="High chair, wheelchair access, celebration…"></textarea>
</label>
<p class="res-form-error" data-res-form-error hidden role="alert"></p>
<button type="submit" class="checkout-submit">Confirm reservation</button>
</form>
<div class="checkout-done" data-res-done hidden>
<h2 class="checkout-block__title">Reservation confirmed</h2>
<p class="checkout-done__lead" data-res-done-lead></p>
<div data-res-done-detail></div>
</div>
</main>
</div>
<script src="app.js?v=20" defer></script>
<script src="admin-config.js?v=1" defer></script>
<script src="smos-api.js?v=4" defer></script>
<script src="reservation-config.js?v=4" defer></script>
<script src="reservation.js?v=8" defer></script>
</body>
</html>
|