| <!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 = "corner-cafe-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>Corner Cafe | 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> |
|
|
