public/admin.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Admin — Cafe Hidden Garden</title>
  <link href="https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400;1,6..72,500&family=Figtree:wght@400;500;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="/css/admin.css">
</head>
<body>

  <!-- Login Screen -->
  <div id="loginScreen" class="login-screen">
    <div class="login-card">
      <p class="login-overline">Admin</p>
      <h1>Cafe Hidden Garden</h1>
      <p>Enter your password to manage the menu.</p>
      <form id="loginForm">
        <input type="password" id="password" placeholder="Password" required autofocus>
        <p class="login-error" id="loginError"></p>
        <button type="submit" class="btn">Sign in</button>
      </form>
    </div>
  </div>

  <!-- Dashboard -->
  <div id="dashboard" class="dashboard" style="display: none;">

    <!-- Top bar -->
    <header class="topbar">
      <div class="topbar-inner">
        <div class="topbar-brand">
          <a href="/" class="topbar-logo" target="_blank">Cafe Hidden Garden</a>
          <span class="topbar-badge">Admin</span>
        </div>
        <nav class="topbar-nav" id="topbarNav">
          <button class="tb-nav-item active" data-section="menu">Menu</button>
          <button class="tb-nav-item" data-section="categories">Categories</button>
          <button class="tb-nav-item" data-section="info">Cafe Info</button>
          <button class="tb-nav-item" data-section="tables">Tables & Orders</button>
          <button class="tb-nav-item" data-section="settings">Settings</button>
        </nav>
        <div class="topbar-actions">
          <a href="/" class="topbar-link" target="_blank">View site ↗</a>
          <button id="logoutBtn" class="topbar-link" style="color: var(--cherry);">Logout</button>
        </div>
      </div>
    </header>

    <!-- Main content area -->
    <main class="main">

      <!-- Menu Section -->
      <section id="menuSection" class="panel">
        <div class="panel-head">
          <h2>Menu items</h2>
          <button id="addItemBtn" class="btn">+ Add item</button>
        </div>
        <div class="table-wrap">
          <table class="table">
            <thead>
              <tr>
                <th>Item</th>
                <th>Category</th>
                <th>Price</th>
                <th>Status</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody id="menuTableBody"></tbody>
          </table>
          <div class="empty" id="menuEmpty" style="display:none;">No menu items yet. Add your first one.</div>
        </div>
      </section>

      <!-- Categories Section -->
      <section id="categoriesSection" class="panel" style="display: none;">
        <div class="panel-head">
          <h2>Categories</h2>
        </div>
        <div class="form-block">
          <p class="form-hint">Categories organize your menu. The first category is treated as "All" and won't appear as a filter.</p>
          <div class="cat-editor" id="categoriesEditor"></div>
          <button id="addCategoryBtn" class="btn btn-ghost">+ Add category</button>
          <div style="margin-top: 20px;">
            <button id="saveCategoriesBtn" class="btn">Save categories</button>
          </div>
        </div>
      </section>

      <!-- Cafe Info Section -->
      <section id="infoSection" class="panel" style="display: none;">
        <div class="panel-head">
          <h2>Cafe information</h2>
        </div>
        <form id="infoForm" class="form-block">
          <div class="field">
            <label for="infoName">Cafe name</label>
            <input type="text" id="infoName" placeholder="Cafe Hidden Garden">
          </div>
          <div class="field">
            <label for="infoTagline">Tagline</label>
            <input type="text" id="infoTagline" placeholder="Crafted with care, served with warmth">
          </div>
          <div class="field-row">
            <div class="field">
              <label for="infoAddress">Address</label>
              <input type="text" id="infoAddress" placeholder="New Balaji Colony, Tirupati, OR">
            </div>
            <div class="field">
              <label for="infoPhone">Phone</label>
              <input type="text" id="infoPhone" placeholder="(503) 555-0192">
            </div>
          </div>
          <div class="field">
            <label for="infoEmail">Email</label>
            <input type="email" id="infoEmail" placeholder="hello@cafehiddengarden.com">
          </div>

          <h3 class="form-subhead">Hours</h3>
          <div id="hoursEditor"></div>
          <button type="button" id="addHoursBtn" class="btn btn-ghost">+ Add day range</button>

          <div style="margin-top: 28px;">
            <button type="submit" class="btn">Save changes</button>
          </div>
        </form>
      </section>

      <!-- Tables & Orders Section -->
      <section id="tablesSection" class="panel" style="display: none;">
        <!-- Table count -->
        <div class="panel-head">
          <h2>Tables & QR Codes</h2>
        </div>
        <div class="form-block" style="margin-bottom: 28px;">
          <div class="field" style="max-width: 200px;">
            <label for="tableCount">Number of tables</label>
            <input type="number" id="tableCount" min="0" max="100" placeholder="8">
          </div>
          <button type="button" id="saveTablesBtn" class="btn">Save</button>
          <button type="button" id="loadQrBtn" class="btn btn-ghost" style="margin-left:8px;">Generate QR codes</button>
        </div>

        <!-- QR Code Grid -->
        <div class="qr-grid" id="qrGrid">
          <p style="color:var(--parchment);font-size:0.82rem;padding:32px;">Set the number of tables above, then click "Generate QR codes" to generate printable QR codes for each table.</p>
        </div>

        <!-- Orders -->
        <div class="panel-head" style="margin-top: 44px;">
          <h2>Active orders</h2>
          <button id="refreshOrdersBtn" class="btn btn-ghost" style="font-size:0.75rem;">Refresh</button>
        </div>
        <div id="ordersContainer">
          <p style="color:var(--parchment);font-size:0.82rem;">No orders yet.</p>
        </div>
      </section>

      <!-- Settings Section -->
      <section id="settingsSection" class="panel" style="display: none;">
        <div class="panel-head">
          <h2>Change password</h2>
        </div>
        <form id="passwordForm" class="form-block" style="max-width: 380px;">
          <div class="field">
            <label for="currentPassword">Current password</label>
            <input type="password" id="currentPassword" required>
          </div>
          <div class="field">
            <label for="newPassword">New password</label>
            <input type="password" id="newPassword" required minlength="6">
          </div>
          <div class="field">
            <label for="confirmPassword">Confirm new password</label>
            <input type="password" id="confirmPassword" required minlength="6">
          </div>
          <p class="form-error" id="passwordError"></p>
          <p class="form-success" id="passwordSuccess"></p>
          <button type="submit" class="btn">Update password</button>
        </form>
      </section>

    </main>
  </div>

  <!-- Item Modal -->
  <div id="itemModal" class="modal">
    <div class="modal-card">
      <div class="modal-head">
        <h2 id="modalTitle">Add item</h2>
        <button class="modal-close" id="modalClose">&times;</button>
      </div>
      <form id="itemForm">
        <input type="hidden" id="itemId">
        <div class="field">
          <label for="itemName">Name</label>
          <input type="text" id="itemName" required placeholder="Cappuccino">
        </div>
        <div class="field-row">
          <div class="field">
            <label for="itemPrice">Price (₹)</label>
            <input type="number" id="itemPrice" required min="0" step="0.01" placeholder="4.50">
          </div>
          <div class="field">
            <label for="itemCategory">Category</label>
            <select id="itemCategory" required></select>
          </div>
        </div>
        <div class="field">
          <label for="itemDescription">Description</label>
          <textarea id="itemDescription" rows="3" placeholder="Rich espresso with velvety micro-foam"></textarea>
        </div>
        <div class="field">
          <label for="itemImage">Photo URL</label>
          <input type="text" id="itemImage" placeholder="https://images.unsplash.com/photo-...">
          <span style="font-size:0.72rem;color:var(--parchment);display:block;margin-top:4px;">Unsplash or any square image URL. Leave empty for category icon.</span>
        </div>
        <div class="field-checks">
          <label class="check">
            <input type="checkbox" id="itemAvailable" checked>
            <span>Available</span>
          </label>
          <label class="check">
            <input type="checkbox" id="itemFeatured">
            <span>Featured</span>
          </label>
        </div>
        <div class="modal-actions">
          <button type="button" class="btn btn-ghost" id="modalCancel">Cancel</button>
          <button type="submit" class="btn" id="modalSave">Save</button>
        </div>
      </form>
    </div>
  </div>

  <!-- Toast -->
  <div id="toastContainer"></div>

  <script src="/js/admin.js"></script>
</body>
</html>