diff options
Diffstat (limited to 'static/index.html')
| -rw-r--r-- | static/index.html | 35 |
1 files changed, 33 insertions, 2 deletions
diff --git a/static/index.html b/static/index.html index a9ae018..d0e0243 100644 --- a/static/index.html +++ b/static/index.html @@ -5,6 +5,7 @@ <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Commis</title> <link rel="stylesheet" href="style.css"> + <link rel="icon" href="favicon.svg" type="image/svg+xml"> </head> <body> <header> @@ -17,6 +18,7 @@ <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> + <button class="tab-btn" data-tab="chat">Chat</button> </nav> <main> @@ -96,12 +98,14 @@ <div class="tab-header"> <h2>This Week's Menu</h2> <div class="header-actions"> + <textarea id="menu-user-notes" class="ai-notes-input" placeholder="Any preferences or instructions for the AI (e.g. vegetarian, 2 people, quick breakfasts)..." rows="2"></textarea> <button class="btn btn-primary" id="btn-generate-menu">✨ Generate Menu</button> + <button class="btn btn-danger hidden" id="btn-clear-menu">Clear</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="recipe-list" class="recipe-list"></div> <div id="menu-empty" class="empty-state hidden">No menu generated yet. Click "Generate Menu" to create one.</div> </div> @@ -110,17 +114,44 @@ <div class="tab-header"> <h2>Grocery List</h2> <div class="header-actions"> + <textarea id="grocery-user-notes" class="ai-notes-input" placeholder="Any preferences or instructions for the AI (e.g. budget $50, no red meat, stock up on breakfast items)..." rows="2"></textarea> <button class="btn btn-primary" id="btn-generate-grocery">✨ Generate List</button> + <button class="btn btn-danger hidden" id="btn-clear-grocery">Clear</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-notes" class="info-banner hidden"></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 id="grocery-empty" class="empty-state hidden">No grocery list yet. Click "Generate List" to create one.</div> + </div> + + <!-- Chat Tab --> + <div id="tab-chat" class="tab-content hidden"> + <div class="chat-container"> + <div id="chat-messages" class="chat-messages"></div> + <div class="chat-input-area"> + <textarea id="chat-input" class="chat-input" placeholder="Ask Commis anything about your kitchen..." rows="2"></textarea> + <button class="btn btn-primary" id="btn-send-chat">Send</button> + </div> + </div> </div> </main> + <!-- Swap Recipe Modal --> + <div id="swap-modal-overlay" class="modal-overlay hidden" onclick="cancelSwap()"> + <div class="modal" onclick="event.stopPropagation()"> + <div class="modal-title">Swap Recipe</div> + <div id="swap-modal-subtitle" class="modal-subtitle"></div> + <textarea id="swap-notes" class="ai-notes-input" placeholder="Any preferences? e.g. vegetarian, something with chicken, quick and easy... (optional)" rows="3"></textarea> + <div class="modal-actions"> + <button class="btn btn-secondary" onclick="cancelSwap()">Cancel</button> + <button class="btn btn-primary" onclick="confirmSwap()">Find Replacement</button> + </div> + </div> + </div> + <div id="toast-container"></div> <script src="app.js"></script> </body> |