modules/SmOS_CC/order.html

<!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 | Order</title>
  <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=12">
</head>
<body>
  <div class="app-shell">
    <header class="app-header">
      <a class="app-back" data-back-path href="./">← Change service</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">
      <div class="app-hero">
        <p class="app-hero__eyebrow"><span data-order-service>Order</span></p>
        <h1 class="app-hero__title" data-order-heading>Menu</h1>
        <p class="app-hero__lead" data-order-lead>Add dishes to your basket. Change quantities anytime.</p>
      </div>

      <p class="app-note" data-section-hours hidden></p>

      <section class="order-panel" data-panel-menu>
        <div class="menu-filters" data-menu-filters role="tablist" aria-label="Menu sections"></div>
        <div class="menu-list" data-menu-list></div>
      </section>

      <aside class="cart-bar" data-cart-bar hidden>
        <div class="cart-bar__copy">
          <strong data-cart-count>0 items</strong>
          <span data-cart-total>£0.00</span>
        </div>
        <div class="cart-bar__actions">
          <button type="button" class="cart-bar__btn cart-bar__btn--ghost" data-cart-review>View basket</button>
          <button type="button" class="cart-bar__btn" data-cart-checkout>Continue to checkout</button>
        </div>
      </aside>

      <dialog class="cart-dialog" data-cart-dialog>
        <form method="dialog" class="cart-dialog__inner">
          <h2 class="cart-dialog__title">Your basket</h2>
          <ul class="cart-lines" data-cart-lines></ul>
          <p class="cart-dialog__total">Total <strong data-cart-dialog-total>£0.00</strong></p>
          <div class="cart-dialog__actions">
            <button type="submit" class="cart-dialog__close" value="close">Close</button>
            <button type="button" class="cart-dialog__clear" data-cart-clear>Clear basket</button>
            <button type="button" class="cart-dialog__checkout" data-cart-checkout>Continue to checkout</button>
          </div>
        </form>
      </dialog>
    </main>
  </div>
  <script src="hours-config.js?v=2" defer></script>
  <script src="menu-data.js?v=2" defer></script>
  <script src="app.js?v=20" defer></script>
</body>
</html>