File size: 8,203 Bytes
f31e5e8 ddd5681 f31e5e8 ddd5681 f31e5e8 ddd5681 f31e5e8 ddd5681 f31e5e8 ddd5681 f31e5e8 ddd5681 f31e5e8 ddd5681 f31e5e8 ddd5681 f31e5e8 ddd5681 f31e5e8 ddd5681 f31e5e8 ddd5681 f31e5e8 | 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 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 | <!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 | Checkout</title>
<link rel="icon" type="image/svg+xml" href="assets/logo-c.svg">
<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=13">
</head>
<body>
<div class="app-shell">
<header class="app-header">
<a class="app-back" data-back-order href="order.html">← Back to order</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" data-checkout>
<div class="app-hero">
<p class="app-hero__eyebrow"><span data-order-service>Order</span> · Checkout</p>
<h1 class="app-hero__title">Checkout</h1>
<p class="app-hero__lead" data-checkout-lead>Complete your order details below.</p>
</div>
<section class="checkout-block" data-checkout-hide-on-done>
<h2 class="checkout-heading">Order summary</h2>
<ul class="checkout-lines" data-checkout-lines></ul>
<p class="checkout-total">Total <strong data-checkout-total>£0.00</strong></p>
<p class="checkout-ref">Order ID <strong data-checkout-ref>—</strong></p>
</section>
<section class="checkout-block" data-checkout-pay data-checkout-hide-on-done>
<h2 class="checkout-heading" data-checkout-pay-title>Payment</h2>
<p class="checkout-intro" data-checkout-pay-intro hidden></p>
<div class="pay-options" data-pay-options role="radiogroup" aria-label="Payment method"></div>
<div class="pay-detail" data-pay-detail hidden></div>
</section>
<section class="checkout-block" data-checkout-details data-checkout-hide-on-done>
<h2 class="checkout-heading">Your details</h2>
<form class="checkout-form" data-checkout-form>
<label class="checkout-field">
<span>Name</span>
<input type="text" name="name" required autocomplete="name">
</label>
<fieldset class="res-confirm-via" data-confirm-via>
<legend>Order confirmation <em class="field-optional">(optional)</em></legend>
<label class="pay-option">
<input type="radio" name="confirm_via" value="none" checked data-confirm-via-opt>
<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-confirm-via-opt>
<span class="pay-option__body">
<span class="pay-option__name">Email</span>
<input type="email" name="email" autocomplete="email" data-confirm-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-confirm-via-opt>
<span class="pay-option__body">
<span class="pay-option__name">Phone</span>
<input type="tel" name="phone" autocomplete="tel" data-confirm-phone placeholder="Mobile number" aria-label="Phone number" hidden disabled>
</span>
</label>
</fieldset>
<label class="checkout-field checkout-field--check">
<input type="checkbox" name="want_receipt" value="1" data-want-receipt>
<span>Send me a receipt after payment</span>
</label>
<p class="pay-hint" data-receipt-contact-hint hidden>Choose Email or Phone above and enter your details so we can send the receipt.</p>
<div class="checkout-field" data-field-address hidden>
<span>Delivery address</span>
<div class="addr-lookup" data-addr-lookup>
<div class="addr-lookup__row">
<input
type="text"
class="addr-lookup__postcode"
data-addr-postcode
placeholder="Postcode"
autocomplete="postal-code"
inputmode="text"
spellcheck="false"
aria-label="Postcode">
<button type="button" class="addr-lookup__find" data-addr-find>Find address</button>
</div>
<p class="pay-hint" data-addr-status hidden></p>
<ul class="addr-lookup__list" data-addr-list hidden role="listbox" aria-label="Addresses"></ul>
<textarea
name="address"
rows="3"
data-addr-value
autocomplete="street-address"
placeholder="Select an address from the list, or type it here"
hidden></textarea>
<button type="button" class="addr-lookup__manual" data-addr-manual hidden>Enter address manually</button>
</div>
</div>
<label class="checkout-field" data-field-table hidden>
<span>Table ID</span>
<select name="table_id">
<option value="">Select table…</option>
</select>
</label>
<label class="checkout-field">
<span>Notes (optional)</span>
<textarea name="notes" rows="2" placeholder="Allergies, doorbell, special requests…"></textarea>
</label>
<button type="submit" class="checkout-submit" data-place-order disabled>Place order</button>
<p class="checkout-gate-hint" data-place-hint hidden></p>
</form>
</section>
<section class="checkout-done" data-checkout-done hidden>
<h2 class="checkout-heading">Order placed</h2>
<p class="checkout-done__lead" data-done-lead></p>
<div class="pay-detail pay-detail--done" data-done-pay></div>
<div class="checkout-receipt-actions" data-done-receipt hidden>
<button type="button" class="checkout-submit" data-download-receipt>Download / print receipt</button>
<p class="pay-hint" data-receipt-send-note hidden></p>
</div>
<a class="checkout-submit checkout-submit--link" href="./">Back to start</a>
</section>
</main>
</div>
<script src="admin-config.js?v=1" defer></script>
<script src="smos-api.js?v=6" defer></script>
<script src="reservation-config.js?v=4" defer></script>
<script src="receipt.js?v=1" defer></script>
<script src="payments-config.js?v=11" defer></script>
<script src="app.js?v=24" defer></script>
</body>
</html>
|