diff options
Diffstat (limited to 'static/index.html')
| -rw-r--r-- | static/index.html | 127 |
1 files changed, 127 insertions, 0 deletions
diff --git a/static/index.html b/static/index.html new file mode 100644 index 0000000..a9ae018 --- /dev/null +++ b/static/index.html @@ -0,0 +1,127 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Commis</title> + <link rel="stylesheet" href="style.css"> +</head> +<body> + <header> + <div class="header-title">🔪 Commis</div> + <div id="ollama-status" class="status-badge">Checking...</div> + </header> + + <nav class="tab-nav"> + <button class="tab-btn active" data-tab="pantry">Pantry</button> + <button class="tab-btn" data-tab="meals">Meals</button> + <button class="tab-btn" data-tab="menu">This Week's Menu</button> + <button class="tab-btn" data-tab="grocery">Grocery List</button> + </nav> + + <main> + <!-- Pantry Tab --> + <div id="tab-pantry" class="tab-content active"> + <div class="tab-header"> + <h2>Pantry</h2> + <button class="btn btn-primary" id="btn-add-ingredient">+ Add Ingredient</button> + </div> + <!-- Add form (hidden by default) --> + <div id="add-ingredient-form" class="form-card hidden"> + <h3>Add Ingredient</h3> + <div class="form-row"> + <div class="form-group"><label>Name</label><input type="text" id="ing-name" placeholder="e.g. Chicken Breast"></div> + <div class="form-group"><label>Quantity</label><input type="number" id="ing-qty" step="0.1" placeholder="500"></div> + <div class="form-group"><label>Unit</label><input type="text" id="ing-unit" placeholder="grams"></div> + <div class="form-group"><label>Category</label> + <select id="ing-category"> + <option value="">None</option> + <option value="produce">Produce</option> + <option value="protein">Protein</option> + <option value="dairy">Dairy</option> + <option value="pantry">Pantry</option> + <option value="frozen">Frozen</option> + <option value="bakery">Bakery</option> + </select> + </div> + <div class="form-group"><label>Expiry Date</label><input type="date" id="ing-expiry"></div> + </div> + <div class="form-actions"> + <button class="btn btn-primary" id="btn-save-ingredient">Save</button> + <button class="btn" id="btn-cancel-ingredient">Cancel</button> + </div> + </div> + <div id="expiry-warning-banner" class="hidden"></div> + <table id="pantry-table"> + <thead><tr><th>Name</th><th>Quantity</th><th>Unit</th><th>Category</th><th>Expires</th><th>Actions</th></tr></thead> + <tbody id="pantry-tbody"></tbody> + </table> + <div id="pantry-empty" class="empty-state hidden">No ingredients yet. Add some to get started.</div> + </div> + + <!-- Meals Tab --> + <div id="tab-meals" class="tab-content hidden"> + <div class="tab-header"> + <h2>Meal Log</h2> + <button class="btn btn-primary" id="btn-log-meal">+ Log Meal</button> + </div> + <div id="log-meal-form" class="form-card hidden"> + <h3>Log a Meal</h3> + <div class="form-row"> + <div class="form-group"><label>Meal Name</label><input type="text" id="meal-name" placeholder="e.g. Chicken Stir Fry"></div> + <div class="form-group"><label>Type</label> + <select id="meal-type"> + <option value="breakfast">Breakfast</option> + <option value="lunch">Lunch</option> + <option value="dinner" selected>Dinner</option> + <option value="snack">Snack</option> + </select> + </div> + <div class="form-group"><label>Date & Time</label><input type="datetime-local" id="meal-datetime"></div> + <div class="form-group"><label>Servings</label><input type="number" id="meal-servings" value="1" min="1"></div> + <div class="form-group full-width"><label>Notes</label><input type="text" id="meal-notes" placeholder="Optional notes"></div> + </div> + <div class="form-actions"> + <button class="btn btn-primary" id="btn-save-meal">Save</button> + <button class="btn" id="btn-cancel-meal">Cancel</button> + </div> + </div> + <div id="meals-stats" class="stats-section"></div> + <div id="meals-timeline"></div> + <div id="meals-empty" class="empty-state hidden">No meals logged yet.</div> + </div> + + <!-- Menu Tab --> + <div id="tab-menu" class="tab-content hidden"> + <div class="tab-header"> + <h2>This Week's Menu</h2> + <div class="header-actions"> + <button class="btn btn-primary" id="btn-generate-menu">✨ Generate Menu</button> + <div id="menu-spinner" class="spinner hidden"></div> + </div> + </div> + <div id="menu-notes" class="info-banner hidden"></div> + <div id="menu-grid" class="menu-grid"></div> + <div id="menu-empty" class="empty-state hidden">No menu generated yet. Click "Generate Menu" to create one.</div> + </div> + + <!-- Grocery Tab --> + <div id="tab-grocery" class="tab-content hidden"> + <div class="tab-header"> + <h2>Grocery List</h2> + <div class="header-actions"> + <button class="btn btn-primary" id="btn-generate-grocery">✨ Generate List</button> + <button class="btn btn-success hidden" id="btn-mark-purchased">✓ Mark All Purchased</button> + <div id="grocery-spinner" class="spinner hidden"></div> + </div> + </div> + <div id="grocery-total" class="hidden"></div> + <div id="grocery-sections"></div> + <div id="grocery-empty" class="empty-state hidden">No grocery list yet. Generate a menu first, then generate the grocery list.</div> + </div> + </main> + + <div id="toast-container"></div> + <script src="app.js"></script> +</body> +</html> |