| <!DOCTYPE html>
|
| <html lang="en">
|
|
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>SustainaBite | Food Waste Assistant</title>
|
| <link rel="stylesheet" href="style.css">
|
|
|
| <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
|
| <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
|
| </head>
|
|
|
| <body>
|
| <div class="app-container">
|
|
|
| <header>
|
| <div class="logo">
|
| <ion-icon name="leaf"></ion-icon>
|
| Sustaina<span>Bite</span>
|
| </div>
|
| <nav>
|
| <ul>
|
| <li><button class="active" onclick="showSection('dashboard')">Dashboard</button></li>
|
| <li><button onclick="showSection('inventory')">Inventory</button></li>
|
| <li><button onclick="showSection('recipes')">Recipes</button></li>
|
| <li><button onclick="showSection('settings')"><ion-icon name="settings-outline"></ion-icon></button>
|
| </li>
|
| </ul>
|
| </nav>
|
| </header>
|
|
|
|
|
|
|
| <main id="dashboard-section">
|
| <div class="stats-container">
|
| <div class="card stat-card">
|
| <span class="stat-label">Items Tracked</span>
|
| <div class="stat-value" id="total-items">0</div>
|
| </div>
|
| <div class="card stat-card">
|
| <span class="stat-label">Expiring Soon</span>
|
| <div class="stat-value" id="expiring-soon">0</div>
|
| </div>
|
| <div class="card stat-card">
|
| <span class="stat-label">Waste Avoided</span>
|
| <div class="stat-value" id="waste-avoided">0kg</div>
|
| </div>
|
| <div class="card stat-card">
|
| <span class="stat-label">Money Saved</span>
|
| <div class="stat-value" id="money-saved">$0</div>
|
| </div>
|
| </div>
|
|
|
| <div class="card action-section">
|
| <h3 class="mb-4">Recent Alerts</h3>
|
| <div id="alerts-container">
|
|
|
| <p class="text-muted">No urgent alerts.</p>
|
| </div>
|
| </div>
|
|
|
| <div class="card list-section">
|
| <h3 class="mb-4">Quick Add Item</h3>
|
| <form id="quick-add-form">
|
| <div class="input-group">
|
| <label>Item Name</label>
|
| <input type="text" id="quick-name" placeholder="e.g. Milk" required>
|
| </div>
|
| <div class="input-group">
|
| <label>Expiry Date</label>
|
| <input type="date" id="quick-date" required>
|
| </div>
|
| <button type="submit" class="primary-btn">
|
| <ion-icon name="add-circle-outline"></ion-icon> Add Item
|
| </button>
|
| <p id="quick-msg" style="margin-top:10px; font-size: 0.9rem;"></p>
|
| </form>
|
| </div>
|
| </main>
|
|
|
|
|
| <main id="inventory-section" class="hidden">
|
| <div class="card action-section">
|
| <h3 class="mb-4">Log Grocery Item</h3>
|
| <form id="add-item-form">
|
| <div class="input-group">
|
| <label>Item Name</label>
|
| <input type="text" name="name" placeholder="Avocados" required>
|
| </div>
|
| <div class="input-group">
|
| <label>Category</label>
|
| <select name="category">
|
| <option value="Vegetables">Vegetables</option>
|
| <option value="Fruits">Fruits</option>
|
| <option value="Dairy">Dairy</option>
|
| <option value="Meat">Meat</option>
|
| <option value="Grains">Grains</option>
|
| <option value="Other">Other</option>
|
| </select>
|
| </div>
|
| <div class="input-group">
|
| <label>Quantity</label>
|
| <input type="text" name="quantity" placeholder="e.g. 2 pcs or 500g">
|
| </div>
|
| <div class="input-group">
|
| <label>Expiry Date (Optional - AI will predict)</label>
|
| <input type="date" name="expiryDate">
|
| </div>
|
| <button type="submit" class="primary-btn">
|
| <span>Add to Inventory</span>
|
| </button>
|
| </form>
|
| </div>
|
|
|
| <div class="card list-section">
|
| <h3 class="mb-4">Current Inventory</h3>
|
| <div class="tools mb-4" style="display: flex; gap: 10px;">
|
| <input type="text" placeholder="Search items..." id="search-inventory">
|
| <button class="primary-btn" style="width: auto;" onclick="refreshInventory()">
|
| <ion-icon name="refresh"></ion-icon>
|
| </button>
|
| </div>
|
| <ul class="inventory-list" id="inventory-list-ul">
|
|
|
| </ul>
|
| </div>
|
| </main>
|
|
|
|
|
| <main id="recipes-section" class="hidden">
|
| <div class="card action-section">
|
| <h3 class="mb-4">Cook Assistant</h3>
|
| <p class="mb-4 text-muted">Generate recipes based on ingredients that are expiring soon.</p>
|
| <button class="primary-btn" onclick="getRecipeSuggestions()">
|
| <ion-icon name="restaurant"></ion-icon> Suggest Recipes
|
| </button>
|
| </div>
|
|
|
| <div class="card list-section">
|
| <h3 class="mb-4">Suggested For You</h3>
|
| <div id="recipes-container" class="recipes-grid">
|
|
|
| <p class="text-muted">Click "Suggest Recipes" to see ideas.</p>
|
| </div>
|
| </div>
|
| </main>
|
|
|
|
|
| <main id="settings-section" class="hidden">
|
| <div class="card" style="grid-column: span 12; max-width: 600px; margin: 0 auto;">
|
| <h3 class="mb-4">Settings</h3>
|
| <p class="mb-4">Configure your N8N Webhook URLs below to connect the backend.</p>
|
|
|
| <div class="input-group">
|
| <label>Base N8N Webhook URL</label>
|
| <input type="text" id="config-webhook-url" placeholder="https://your-n8n-instance.com/webhook/...">
|
| </div>
|
|
|
| <div style="display: flex; gap: 10px; margin-bottom: 20px;">
|
| <button class="primary-btn" onclick="saveSettings()">Save Configuration</button>
|
| <button class="primary-btn" style="background: var(--secondary);" onclick="testConnection()">Test
|
| Connection</button>
|
| </div>
|
|
|
| <div id="connection-log"
|
| style="font-family: monospace; font-size: 0.85rem; padding: 10px; background: rgba(0,0,0,0.3); border-radius: 8px; display: none;">
|
| </div>
|
| </div>
|
| </main>
|
|
|
| </div>
|
|
|
|
|
| <script src="config.js"></script>
|
| <script src="app.js"></script>
|
| </body>
|
|
|
| </html> |
