| <!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> |
|
|
| |
| <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> |
|
|
| |
| <div id="dashboard" class="dashboard" style="display: none;"> |
|
|
| |
| <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 class="main"> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <section id="tablesSection" class="panel" style="display: none;"> |
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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">×</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> |
|
|
| |
| <div id="toastContainer"></div> |
|
|
| <script src="/js/admin.js"></script> |
| </body> |
| </html> |
|
|
