Spaces:
Runtime error
Runtime error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ChefCode - Workflow Simulation</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <!-- ChefCode API Layer --> | |
| <script src="config.js"></script> | |
| <script src="utils.js"></script> | |
| <script src="api.js"></script> | |
| <script> | |
| // Configure API authentication for web version | |
| document.addEventListener('DOMContentLoaded', function() { | |
| if (typeof ChefCodeAPI !== 'undefined' && typeof CHEFCODE_CONFIG !== 'undefined') { | |
| const api = new ChefCodeAPI(CHEFCODE_CONFIG.API_URL); | |
| api.setApiKey(CHEFCODE_CONFIG.API_KEY); | |
| window.chefCodeAPI = api; // Make available globally | |
| console.log('✅ ChefCode API configured with authentication'); | |
| } | |
| }); | |
| </script> | |
| <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> | |
| </head> | |
| <body> | |
| <header class="header"> | |
| <div class="header-left"> | |
| <button class="home-button" id="chefcode-logo-btn"> | |
| <i class="fas fa-home"></i> | |
| </button> | |
| </div> | |
| <div class="header-center"> | |
| <h1 class="logo">ChefCode</h1> | |
| </div> | |
| <div class="header-right"> | |
| <div class="account-menu"> | |
| <button class="account-button">Account <span class="arrow-down">▼</span></button> | |
| <div class="dropdown-content"> | |
| <a href="#">Profile</a> | |
| <a href="#">Settings</a> | |
| <a href="#">Logout</a> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <main class="main-container"> | |
| <!-- ...existing code... --> | |
| <section id="step-selection-page" class="page-section active"> | |
| <div class="step-buttons-grid"> | |
| <button class="big-step-button" data-step="goods-in"> | |
| <i class="fas fa-box-open"></i> | |
| <span>GOODS IN</span> | |
| </button> | |
| <button class="big-step-button" data-step="recipe-selection"> | |
| <i class="fas fa-utensils"></i> | |
| <span>RECIPES</span> | |
| </button> | |
| <button class="big-step-button" data-step="production"> | |
| <i class="fas fa-industry"></i> | |
| <span>PRODUCTION</span> | |
| </button> | |
| <button class="big-step-button" data-step="sales"> | |
| <i class="fas fa-cash-register"></i> | |
| <span>SALES</span> | |
| </button> | |
| <button class="big-step-button" data-step="end-of-day"> | |
| <i class="fas fa-shopping-basket"></i> | |
| <span>SHOPPING LIST</span> | |
| </button> | |
| <button class="big-step-button" data-step="dashboard-selection"> | |
| <i class="fas fa-chart-line"></i> | |
| <span>DASHBOARD</span> | |
| </button> | |
| <button class="big-step-button" data-step="inventory-page"> | |
| <i class="fas fa-clipboard-check"></i> | |
| <span>INVENTORY</span> | |
| </button> | |
| <button class="big-step-button" data-step="add-module"> | |
| <i class="fas fa-plus"></i> | |
| <span>ADD MODULE</span> | |
| </button> | |
| </div> | |
| </section> | |
| <section id="input-detail-page" class="page-section"> | |
| <div id="input-pages-container"> | |
| <div id="goods-in-content" class="input-page"> | |
| <div class="page-header-with-back"><button class="back-button" data-back-target="step-selection-page"><i class="fas fa-arrow-left"></i> Back</button><h3>GOODS IN</h3></div> | |
| <div class="goods-in-buttons-grid"> | |
| <button class="big-step-button" data-action="invoice-photo"><i class="fas fa-camera"></i><span>INVOICE PHOTO (OCR)</span></button> | |
| <button class="big-step-button" data-action="voice-input" style="display:none;"><i class="fas fa-microphone"></i><span>VOICE INPUT</span></button> | |
| <button class="big-step-button" data-action="manual-input"><i class="fas fa-keyboard"></i><span>MANUAL INPUT</span></button> | |
| </div> | |
| </div> | |
| <div id="manual-input-content" class="input-page"> | |
| <div class="page-header-with-back"><button class="back-button" data-back-target="goods-in-content"><i class="fas fa-arrow-left"></i> Back</button><h3>MANUAL INPUT</h3></div> | |
| <form id="manual-entry-form" class="manual-form"> | |
| <div class="form-group full-width"><label for="item-name">Item Name</label><input type="text" id="item-name" name="item-name" placeholder="e.g., San Marzano Tomatoes" required></div> | |
| <div class="form-group"><label for="item-quantity">Quantity</label><input type="number" id="item-quantity" name="item-quantity" placeholder="e.g., 25" step="0.01" required></div> | |
| <div class="form-group"><label for="item-unit">Unit</label><input type="text" id="item-unit" name="item-unit" placeholder="e.g., kg" required></div> | |
| <div class="form-group"><label for="item-category">Category</label><input type="text" id="item-category" name="item-category" placeholder="e.g., Vegetables" required></div> | |
| <div class="form-group"><label for="item-price">Unit Price (€)</label><input type="number" id="item-price" name="item-price" placeholder="e.g., 2.50" step="0.01" required></div> | |
| <!-- HACCP Traceability Fields --> | |
| <div class="form-group"><label for="item-lot-number">Lot Number <span style="color:#888;">(optional)</span></label><input type="text" id="item-lot-number" name="item-lot-number" placeholder="e.g., LOT2024-001"></div> | |
| <div class="form-group"><label for="item-expiry-date">Expiry Date <span style="color:#888;">(optional)</span></label><input type="date" id="item-expiry-date" name="item-expiry-date"></div> | |
| <div style="text-align:center; margin-top:16px;"> | |
| <button type="submit" class="submit-btn"><i class="fas fa-save"></i> Add to Inventory</button> | |
| </div> | |
| </form> | |
| </div> | |
| <div id="dashboard-selection-content" class="input-page"> | |
| <div class="page-header-with-back"><button class="back-button" data-back-target="step-selection-page"><i class="fas fa-arrow-left"></i> Back</button><h3>Select Dashboard</h3></div> | |
| <div class="step-buttons-grid"> | |
| <button class="big-step-button" data-step="kitchen-dashboard"><i class="fas fa-utensils"></i><span>KITCHEN DASHBOARD</span></button> | |
| <button class="big-step-button" data-step="management-dashboard"><i class="fas fa-chart-bar"></i><span>MANAGEMENT DASHBOARD</span></button> | |
| </div> | |
| </div> | |
| <div id="kitchen-dashboard-content" class="input-page"> | |
| <div class="page-header-with-back"><button class="back-button" data-back-target="dashboard-selection-content"><i class="fas fa-arrow-left"></i> Back</button><h3>Chef's Operational Dashboard</h3></div> | |
| <div class="new-dashboard-grid kitchen-dash"><div class="new-dash-card"><h5 class="new-card-title">Today's Work Plan (Mise en Place)</h5><table class="prep-list-table"><thead><tr><th>Priority</th><th>Task</th><th>Status</th></tr></thead><tbody><tr><td><span class="priority high">High</span></td><td>Prepare Amatriciana Sauce (5L)</td><td><span class="status done">Done</span></td></tr><tr><td><span class="priority high">High</span></td><td>Clean Mussels and Clams</td><td><span class="status done">Done</span></td></tr><tr><td><span class="priority medium">Medium</span></td><td>Cut Vegetables for Soffritto</td><td><span class="status pending">To Do</span></td></tr><tr><td><span class="priority medium">Medium</span></td><td>Fillet Sea Bass (10 pcs)</td><td><span class="status pending">To Do</span></td></tr></tbody></table></div><div class="new-dash-card"><h5 class="new-card-title">Today's "Hot" Items</h5><table class="hot-items-table"><thead><tr><th>Dish</th><th>Qty</th><th>Margin</th></tr></thead><tbody><tr><td>Spaghetti Carbonara</td><td>18</td><td><span class="margin good">€ 10.90</span></td></tr><tr><td>Frittura di Calamari</td><td>12</td><td><span class="margin ok">€ 9.90</span></td></tr><tr><td>Tagliata di Manzo</td><td>9</td><td><span class="margin good">€ 14.30</span></td></tr><tr><td>Tonnarelli Cacio e Pepe</td><td>7</td><td><span class="margin good">€ 9.80</span></td></tr></tbody></table></div><div class="new-dash-card"><h5 class="new-card-title">Critical Stock</h5><ul class="dash-list"><li>Guanciale (under 1 kg)</li><li>Pecorino Romano</li><li>White Wine for cooking</li></ul></div><div class="new-dash-card"><h5 class="new-card-title">Use Soon (Anti-Waste)</h5><ul class="dash-list"><li>Fresh Porcini Mushrooms</li><li>Buffalo Mozzarella</li><li>Fresh Basil</li></ul></div><div class="new-dash-card full-width"><h5 class="new-card-title">Menu Engineering Analysis</h5><div class="menu-engineering-grid"><div class="quadrant puzzle"><h6>PUZZLES ❓</h6><small>High profit, low popularity. Needs promotion.</small><p>Filetto al Pepe Verde</p></div><div class="quadrant star"><h6>STARS ⭐</h6><small>High profit, high popularity. Our champions!</small><p>Tagliata di Manzo</p><p>Spaghetti Carbonara</p></div><div class="quadrant dog"><h6>DOGS 🐶</h6><small>Low profit, low popularity. Consider removing.</small><p>Insalatona "Chef"</p></div><div class="quadrant plow-horse"><h6>PLOW-HORSES 🐴</h6><small>Low profit, high popularity. Optimize cost.</small><p>Frittura di Calamari</p></div></div></div></div> | |
| </div> | |
| <div id="management-dashboard-content" class="input-page"> | |
| <div class="page-header-with-back"><button class="back-button" data-back-target="dashboard-selection-content"><i class="fas fa-arrow-left"></i> Back</button><h3>Management Dashboard</h3></div> | |
| <div class="new-dashboard-grid"><div class="new-dash-card kpi-card"><h5 class="kpi-title">REVENUE</h5><p class="kpi-amount">$895,430</p></div><div class="new-dash-card kpi-card"><h5 class="kpi-title">AVERAGE TRANSACTION</h5><p class="kpi-amount">$34.49</p><small class="kpi-change up"><i class="fas fa-caret-up"></i> 3,1%</small></div><div class="new-dash-card kpi-card"><h5 class="kpi-title">ORDERS</h5><p class="kpi-amount">25,959</p><small class="kpi-change down"><i class="fas fa-caret-down"></i> 2,5%</small></div><div class="new-dash-card tall"><h5 class="new-card-title">SALES BY MONTH</h5><div class="bar-chart-v"><div class="bar-wrapper"><div class="bar" style="height: 20%;"></div><span class="bar-label-month">Jan</span></div><div class="bar-wrapper"><div class="bar" style="height: 30%;"></div><span class="bar-label-month">Feb</span></div><div class="bar-wrapper"><div class="bar" style="height: 45%;"></div><span class="bar-label-month">Mar</span></div><div class="bar-wrapper"><div class="bar" style="height: 60%;"></div><span class="bar-label-month">Apr</span></div><div class="bar-wrapper"><div class="bar" style="height: 55%;"></div><span class="bar-label-month">May</span></div><div class="bar-wrapper"><div class="bar" style="height: 70%;"></div><span class="bar-label-month">Jun</span></div><div class="bar-wrapper"><div class="bar" style="height: 85%;"></div><span class="bar-label-month">Jul</span></div><div class="bar-wrapper"><div class="bar" style="height: 95%;"></div><span class="bar-label-month">Aug</span></div></div></div><div class="new-dash-card tall"><h5 class="new-card-title">SALES BY CHANNEL</h5><div class="chart-with-legend"><div class="pie-chart"></div><div class="channel-list"><div class="channel-item"><i class="fas fa-circle channel-icon dine-in"></i><span class="channel-label">Dine-in</span><span class="channel-perc">70%</span></div><div class="channel-item"><i class="fas fa-circle channel-icon takeaway"></i><span class="channel-label">Takeaway</span><span class="channel-perc">15%</span></div><div class="channel-item"><i class="fas fa-circle channel-icon delivery"></i><span class="channel-label">Delivery</span><span class="channel-perc">15%</span></div></div></div></div><div class="new-dash-card tall"><h5 class="new-card-title">SALES BY CATEGORY</h5><div class="bar-chart-h"><div class="bar-item"><span class="bar-label">Food</span><div class="bar-bg"><div class="bar-fg food" style="width: 62%;"></div></div><span class="bar-perc">62%</span></div><div class="bar-item"><span class="bar-label">Beverage</span><div class="bar-bg"><div class="bar-fg beverage" style="width: 21%;"></div></div><span class="bar-perc">21%</span></div><div class="bar-item"><span class="bar-label">Dessert</span><div class="bar-bg"><div class="bar-fg dessert" style="width: 11%;"></div></div><span class="bar-perc">11%</span></div><div class="bar-item"><span class="bar-label">Other</span><div class="bar-bg"><div class="bar-fg other" style="width: 6%;"></div></div><span class="bar-perc">6%</span></div></div></div></div> | |
| </div> | |
| <div id="inventory-page-content" class="input-page"> | |
| <div class="page-header-with-back"><button class="back-button" data-back-target="step-selection-page"><i class="fas fa-arrow-left"></i> Back</button><h3>FOOD INVENTORY</h3></div> | |
| <div class="inventory-controls"> | |
| <input type="search" id="inventory-search" placeholder="Search by name..."><select id="inventory-category-filter"><option value="all">All Categories</option><option value="Vegetables">Vegetables</option><option value="Dry Goods">Dry Goods</option><option value="Dairy">Dairy</option><option value="Meat">Meat</option><option value="Oils">Oils</option><option value="Herbs">Herbs</option><option value="Pasta">Pasta</option><option value="Fish">Fish</option><option value="Legumes">Legumes</option><option value="Bakery">Bakery</option><option value="Beverages">Beverages</option><option value="Sweets">Sweets</option><option value="Condiments">Condiments</option><option value="Nuts">Nuts</option></select> | |
| <button id="expand-table-btn" class="icon-btn" title="Collapse to Summary"><i class="fas fa-chevron-up"></i></button> | |
| </div> | |
| <div class="inventory-table-container"> | |
| <table> | |
| <thead><tr><th>Item</th><th>Unit Price</th><th>Unit</th><th>Quantity</th><th>Category</th><th>Lot #</th><th>Expiry</th><th>Total Value</th><th>Action</th></tr></thead> | |
| <tbody id="inventory-table-body"> | |
| <!-- Inventory items will be loaded dynamically --> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="inventory-summary"><h4>Total Inventory Value: <span id="inventory-total-value">€2,362.90</span></h4></div> | |
| </div> | |
| <div id="camera-simulation-page" class="input-page"> | |
| <div class="page-header-with-back"><button class="back-button" data-back-target="goods-in-content"><i class="fas fa-arrow-left"></i> Back</button><h3>TAKE INVOICE PHOTO</h3></div> | |
| <div class="camera-preview-container"><div class="camera-viewfinder"><i class="fas fa-camera-retro"></i><p>Place invoice here</p></div></div> | |
| <div class="camera-controls"> | |
| <button id="take-photo-btn" class="input-btn"><i class="fas fa-circle"></i><span>Take Photo</span></button> | |
| <button id="retake-photo-btn" class="input-btn" style="display: none;"><i class="fas fa-redo"></i><span>Retake Photo</span></button> | |
| <button id="confirm-photo-btn" class="input-btn" style="display: none;"><i class="fas fa-check"></i><span>Confirm Photo & OCR</span></button> | |
| </div> | |
| <div class="output-section camera-output" style="display: none;"> | |
| <h4>OCR Result Simulation</h4> | |
| <ul><li>Invoice #: INV2025-07-001</li><li>Date: 03/07/2025</li><li>Supplier: Global Foods S.p.A.</li><li>Items detected: 5</li><li>Total Amount: €150.00</li></ul> | |
| </div> | |
| </div> | |
| <div id="voice-input-page-content" class="input-page"> | |
| <div class="page-header-with-back"><button class="back-button" data-back-target="goods-in-content"><i class="fas fa-arrow-left"></i> Back</button><h3>VOICE INPUT</h3></div> | |
| <div class="voice-input-container"> | |
| <p id="voice-status">Press the microphone to start speaking...</p> | |
| <div class="voice-mic-container"><button id="microphone-btn"><i class="fas fa-microphone"></i></button><span id="mic-label">Start Recording</span></div> | |
| <div id="voice-recognized-text" class="output-section" style="display: none;"> | |
| <h4>Recognized Text</h4><p id="recognized-text-content"></p> | |
| <button id="process-voice-btn" class="input-btn"><i class="fas fa-check"></i><span>Process Input</span></button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recipe Selection Page --> | |
| <div id="recipe-selection-content" class="input-page"> | |
| <div class="page-header-with-back"><button class="back-button" data-back-target="step-selection-page"><i class="fas fa-arrow-left"></i> Back</button><h3>RECIPE MANAGEMENT</h3></div> | |
| <div class="step-buttons-grid"> | |
| <button class="big-step-button" data-step="add-recipe"> | |
| <i class="fas fa-plus-circle"></i> | |
| <span>ADD RECIPE</span> | |
| </button> | |
| <button class="big-step-button" id="search-web-recipe-btn"> | |
| <i class="fas fa-globe"></i> | |
| <span>SEARCH RECIPE FROM WEB</span> | |
| </button> | |
| <button class="big-step-button" data-step="recipe-catalogue"> | |
| <i class="fas fa-book"></i> | |
| <span>RECIPE CATALOGUE</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Add Recipe (existing setup) --> | |
| <div id="add-recipe-content" class="input-page"> | |
| <div class="page-header-with-back"><button class="back-button" data-back-target="recipe-selection-content"><i class="fas fa-arrow-left"></i> Back</button><h3>ADD RECIPE</h3></div> | |
| <form id="recipe-form"> | |
| <div class="form-group full-width"><label for="recipe-name">Recipe Name</label><input type="text" id="recipe-name" required placeholder="e.g., Spaghetti alla Carbonara"></div> | |
| <div class="form-group full-width"><label for="recipe-instructions">Instructions</label><textarea id="recipe-instructions" rows="4" placeholder="Describe the preparation steps..."></textarea></div> | |
| </form> | |
| <!-- === RECIPE YIELD (quanto prodotto fa 1 batch) === --> | |
| <div class="form-group full-width"> | |
| <label for="recipe-yield-qty">Recipe yield (product obtained per batch)</label> | |
| <div class="yield-row"> | |
| <div style="display:flex; gap:10px; align-items:center;"> | |
| <input type="number" id="recipe-yield-qty" placeholder="es. 10" step="0.01" style="width:100px;"> | |
| <select id="recipe-yield-unit" style="width:80px;"> | |
| <option value="pz">pz</option> | |
| <option value="kg">kg</option> | |
| <option value="g">g</option> | |
| <option value="lt">lt</option> | |
| <option value="ml">ml</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="add-ingredient-section"> | |
| <div class="form-group"><label for="ingredient-select">Select Ingredient</label><select id="ingredient-select"><option value="" disabled selected>-- Choose an ingredient --</option></select></div> | |
| <div class="form-group"><label for="ingredient-qty">Quantity</label><input type="number" id="ingredient-qty" placeholder="e.g., 150"></div> | |
| <div class="form-group"><label for="ingredient-unit">Unit</label><select id="ingredient-unit"><option>g</option><option>kg</option><option>ml</option><option>l</option><option>pz</option></select></div> | |
| <button id="add-ingredient-btn" class="icon-btn"><i class="fas fa-plus"></i></button> | |
| </div> | |
| <div class="ingredients-list-container"> | |
| <ul id="recipe-ingredients-list"></ul> | |
| </div> | |
| <button id="save-recipe-btn" class="submit-btn"><i class="fas fa-save"></i> Save Recipe</button> | |
| </div> | |
| <!-- Recipe Catalogue Page --> | |
| <div id="recipe-catalogue-content" class="input-page"> | |
| <div class="page-header-with-back"> | |
| <button class="back-button" data-back-target="recipe-selection-content"><i class="fas fa-arrow-left"></i> Back</button> | |
| <h3>RECIPE CATALOGUE</h3> | |
| </div> | |
| <div class="recipe-catalogue-container"> | |
| <!-- Modern Search Bar --> | |
| <div class="recipe-search-wrapper"> | |
| <i class="fas fa-search search-icon"></i> | |
| <input type="search" id="recipe-search" class="recipe-search-input" placeholder="Search recipes by name..."> | |
| </div> | |
| <!-- Recipe Cards Grid --> | |
| <div id="recipe-catalogue-body" class="recipe-cards-grid"> | |
| <!-- Recipe cards will be populated here by JavaScript --> | |
| </div> | |
| <!-- Empty State --> | |
| <div id="recipe-catalogue-empty" class="recipe-empty-state" style="display:none;"> | |
| <i class="fas fa-book-open"></i> | |
| <h3>No Recipes Yet</h3> | |
| <p>Start building your recipe collection!</p> | |
| <button class="empty-state-btn" onclick="document.querySelector('[data-step=add-recipe]')?.click()"> | |
| <i class="fas fa-plus"></i> Add Your First Recipe | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="production-content" class="input-page"> | |
| <div class="page-header-with-back"><button class="back-button" data-back-target="step-selection-page"><i class="fas fa-arrow-left"></i> Back</button><h3>PRODUCTION</h3></div> | |
| <div class="add-production-task-section"> | |
| <!-- Recipe --> | |
| <div class="form-group"> | |
| <label for="recipe-select-prod">Recipe to Prepare</label> | |
| <select id="recipe-select-prod"> | |
| <option value="" disabled selected>-- Choose a recipe --</option> | |
| </select> | |
| </div> | |
| <!-- Quantity --> | |
| <div class="form-group"> | |
| <label for="production-qty">Quantity to Produce</label> | |
| <input type="text" id="production-qty" placeholder="Insert Quantity"> | |
| </div> | |
| <!-- Unità di misura (resta com’era) --> | |
| <div class="form-group"> | |
| <label for="production-unit">Unit</label> | |
| <select id="production-unit"> | |
| <option value="kg">kg</option> | |
| <option value="g">g</option> | |
| <option value="lt">lt</option> | |
| <option value="ml">ml</option> | |
| <option value="pz">pz</option> | |
| </select> | |
| </div> | |
| <!-- Assign to --> | |
| <div class="form-group"> | |
| <label for="assign-to">Assign to</label> | |
| <select id="assign-to"> | |
| <option>Luca</option> | |
| <option>Sofia</option> | |
| <option>Marco</option> | |
| <option>Tutti</option> | |
| </select> | |
| </div> | |
| <!-- Initial Status (nuovo) --> | |
| <div class="form-group"> | |
| <label for="initial-status">Initial Status</label> | |
| <select id="initial-status"> | |
| <option value="todo" selected>To Do</option> | |
| <option value="completed">Completed Task</option> | |
| </select> | |
| </div> | |
| <button id="add-task-btn" class="submit-btn small-btn"> | |
| <i class="fas fa-plus"></i> Add to List | |
| </button> | |
| <!-- RIMOSSI I TAB BUTTON, SOLO DUE COLONNE VISIBILI --> | |
| <div class="production-tasks-tabbed"> | |
| <div id="todo-tasks" class="task-list prod-tab-panel active"></div> | |
| <div id="completed-tasks-list" class="task-list prod-tab-panel"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="sales-content" class="input-page"> | |
| <div class="page-header-with-back"><button class="back-button" data-back-target="step-selection-page"><i class="fas fa-arrow-left"></i> Back</button><h3>SALES</h3></div><p>Record sales and update stock.</p> | |
| </div> | |
| <div id="end-of-day-content" class="input-page"> | |
| <div class="page-header-with-back"><button class="back-button" data-back-target="step-selection-page"><i class="fas fa-arrow-left"></i> Back</button><h3>SHOPPING LIST</h3></div><p>Generate and manage your daily shopping list.</p> | |
| </div> | |
| <div id="add-module-content" class="input-page"> | |
| <div class="page-header-with-back"><button class="back-button" data-back-target="step-selection-page"><i class="fas fa-arrow-left"></i> Back</button><h3>Add New Module</h3></div> | |
| <p>Module creation/selection interface will be here...</p> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- AI Toolbar Footer --> | |
| <footer class="ai-toolbar-footer"> | |
| <div class="ai-toolbar-container"> | |
| <input | |
| type="text" | |
| class="ai-command-input" | |
| placeholder="Type or speak a command..." | |
| id="ai-command-input" | |
| /> | |
| <button class="ai-toolbar-btn ai-send-btn" id="ai-send-btn" title="Send Command"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| <button class="ai-toolbar-btn ai-voice-btn" id="ai-voice-btn" title="Voice Input"> | |
| <i class="fas fa-microphone"></i> | |
| </button> | |
| <button class="ai-toolbar-btn ai-upload-btn" id="ai-upload-btn" title="Upload"> | |
| <i class="fas fa-plus"></i> | |
| </button> | |
| </div> | |
| </footer> | |
| <!-- OCR Modal --> | |
| <div id="ocr-modal" class="ocr-modal-overlay" style="display: none;"> | |
| <div class="ocr-modal-content"> | |
| <!-- Modal Header --> | |
| <div class="ocr-modal-header"> | |
| <h2 class="ocr-modal-title">Scan or Upload Invoice</h2> | |
| <p class="ocr-modal-subtitle">Choose how to import your supplier invoice. ChefCode will extract item details automatically.</p> | |
| <button class="ocr-modal-close" id="ocr-modal-close-btn"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <!-- Modal Body --> | |
| <div class="ocr-modal-body"> | |
| <!-- Initial Selection Screen --> | |
| <div id="ocr-selection-screen" class="ocr-screen"> | |
| <div class="ocr-option-grid"> | |
| <div class="ocr-option-card" id="camera-option"> | |
| <div class="ocr-option-icon"> | |
| <i class="fas fa-camera"></i> | |
| </div> | |
| <h3>📸 Take Photo</h3> | |
| <p>Capture invoice with your camera</p> | |
| </div> | |
| <div class="ocr-option-card" id="upload-option"> | |
| <div class="ocr-option-icon"> | |
| <i class="fas fa-upload"></i> | |
| </div> | |
| <h3>🗂️ Upload File</h3> | |
| <p>Select image or PDF file</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Camera Screen --> | |
| <div id="ocr-camera-screen" class="ocr-screen" style="display: none;"> | |
| <div class="ocr-camera-container"> | |
| <video id="ocr-camera-preview" autoplay muted playsinline></video> | |
| <div class="ocr-camera-overlay"> | |
| <div class="ocr-camera-guides"> | |
| <div class="ocr-guide-line"></div> | |
| <div class="ocr-guide-line"></div> | |
| <div class="ocr-guide-line"></div> | |
| <div class="ocr-guide-line"></div> | |
| </div> | |
| </div> | |
| <div class="ocr-camera-controls"> | |
| <button class="ocr-camera-btn secondary" id="ocr-camera-back"> | |
| <i class="fas fa-arrow-left"></i> | |
| </button> | |
| <button class="ocr-camera-btn primary" id="ocr-camera-capture"> | |
| <i class="fas fa-camera"></i> | |
| </button> | |
| <button class="ocr-camera-btn secondary" id="ocr-camera-switch"> | |
| <i class="fas fa-sync-alt"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Preview Screen --> | |
| <div id="ocr-preview-screen" class="ocr-screen" style="display: none;"> | |
| <div class="ocr-preview-container"> | |
| <img id="ocr-preview-image" alt="Invoice Preview" /> | |
| <div class="ocr-preview-controls"> | |
| <button class="ocr-preview-btn secondary" id="ocr-preview-back"> | |
| <i class="fas fa-arrow-left"></i> Back | |
| </button> | |
| <button class="ocr-preview-btn primary" id="ocr-preview-process"> | |
| <i class="fas fa-magic"></i> Process Invoice | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Processing Screen --> | |
| <div id="ocr-processing-screen" class="ocr-screen" style="display: none;"> | |
| <div class="ocr-processing-container"> | |
| <div class="ocr-spinner"></div> | |
| <h3>Analyzing invoice...</h3> | |
| <p>ChefCode is extracting item details from your invoice</p> | |
| </div> | |
| </div> | |
| <!-- Results Screen --> | |
| <div id="ocr-results-screen" class="ocr-screen" style="display: none;"> | |
| <div class="ocr-results-container"> | |
| <div class="ocr-results-header"> | |
| <h3>Invoice Analysis Complete</h3> | |
| <div class="ocr-results-meta"> | |
| <span id="ocr-supplier-name">Supplier: Unknown</span> | |
| <span id="ocr-invoice-date">Date: Unknown</span> | |
| </div> | |
| <p style="font-size: 0.9em; color: #7f8c8d; margin-top: 12px; text-align: center;"> | |
| ✏️ <strong>Edit any field</strong> to correct OCR results. Add expiry dates for HACCP compliance. | |
| </p> | |
| </div> | |
| <div class="ocr-results-table-container"> | |
| <table class="ocr-results-table"> | |
| <thead> | |
| <tr> | |
| <th>Item</th> | |
| <th>Qty</th> | |
| <th>Unit</th> | |
| <th>Price</th> | |
| <th>Lot #</th> | |
| <th>Expiry</th> | |
| </tr> | |
| </thead> | |
| <tbody id="ocr-results-tbody"> | |
| <!-- Results will be populated here --> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="ocr-results-actions"> | |
| <button class="ocr-results-btn secondary" id="ocr-results-back"> | |
| <i class="fas fa-arrow-left"></i> Back | |
| </button> | |
| <button class="ocr-results-btn primary" id="ocr-results-confirm"> | |
| <i class="fas fa-check"></i> Add to Inventory | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Success Screen --> | |
| <div id="ocr-success-screen" class="ocr-screen" style="display: none;"> | |
| <div class="ocr-success-container"> | |
| <div class="ocr-success-icon"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| <h3>✅ Items Added Successfully</h3> | |
| <p>Your invoice items have been added to the inventory</p> | |
| <button class="ocr-success-btn primary" id="ocr-success-close"> | |
| <i class="fas fa-check"></i> Done | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quick Add Popup --> | |
| <div id="quick-add-popup" class="quick-add-popup" style="display: none;"> | |
| <div class="quick-add-popup-option" id="quick-add-upload"> | |
| <i class="fas fa-upload"></i> | |
| <span>📂 Upload File</span> | |
| </div> | |
| <div class="quick-add-popup-option" id="quick-add-camera"> | |
| <i class="fas fa-camera"></i> | |
| <span>📸 Take a Picture</span> | |
| </div> | |
| </div> | |
| <!-- Web Recipe Search Modal --> | |
| <div id="web-recipe-modal" class="web-recipe-modal-overlay" style="display: none;"> | |
| <div class="web-recipe-modal-content"> | |
| <!-- Modal Header --> | |
| <div class="web-recipe-modal-header"> | |
| <div> | |
| <h2 class="web-recipe-modal-title"> | |
| <span style="display: flex; align-items: center; gap: 8px;"> | |
| 🔍 Search Recipe from Web | |
| </span> | |
| <span class="web-recipe-modal-subtitle">Discover recipes from the web to add to your collection</span> | |
| </h2> | |
| </div> | |
| <button class="web-recipe-modal-close" id="web-recipe-close-btn"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <!-- Modal Body --> | |
| <div class="web-recipe-modal-body"> | |
| <!-- Search Screen --> | |
| <div id="web-recipe-search-screen" class="web-recipe-screen"> | |
| <div class="web-recipe-search-container"> | |
| <div class="web-recipe-search-box"> | |
| <input | |
| type="text" | |
| id="web-recipe-search-input" | |
| class="web-recipe-search-input" | |
| placeholder="Find a quick Italian pasta recipe without cheese..." | |
| /> | |
| <button id="web-recipe-search-btn" class="web-recipe-search-button"> | |
| <i class="fas fa-search"></i> Search | |
| </button> | |
| </div> | |
| <p style="text-align: center; color: #94a3b8; font-size: 0.85em; margin: 8px 0 0 0; font-style: italic;"> | |
| Powered by TheMealDB | |
| </p> | |
| <div class="web-recipe-filters" style="display: none;"> | |
| <select id="web-recipe-cuisine-filter" class="web-recipe-filter-select"> | |
| <option value="">All Cuisines</option> | |
| <option value="Italian">Italian</option> | |
| <option value="Chinese">Chinese</option> | |
| <option value="Mexican">Mexican</option> | |
| <option value="Indian">Indian</option> | |
| <option value="Japanese">Japanese</option> | |
| <option value="French">French</option> | |
| <option value="Thai">Thai</option> | |
| <option value="American">American</option> | |
| </select> | |
| </div> | |
| </div> | |
| <!-- Loading State --> | |
| <div id="web-recipe-loading" class="web-recipe-loading" style="display: none;"> | |
| <div class="web-recipe-spinner"></div> | |
| <p>Searching for recipes...</p> | |
| </div> | |
| <!-- Results Grid --> | |
| <div id="web-recipe-results-container" class="web-recipe-results-grid" style="display: none;"> | |
| <!-- Recipe cards will be populated here --> | |
| </div> | |
| <!-- Empty State --> | |
| <div id="web-recipe-empty" class="web-recipe-empty-state" style="display: none;"> | |
| <i class="fas fa-search"></i> | |
| <h3>No Recipes Found</h3> | |
| <p>Try a different search term or cuisine</p> | |
| </div> | |
| </div> | |
| <!-- Recipe Detail Screen --> | |
| <div id="web-recipe-detail-screen" class="web-recipe-screen"> | |
| <div class="web-recipe-detail-container"> | |
| <button class="web-recipe-back-btn" id="web-recipe-detail-back"> | |
| <i class="fas fa-arrow-left"></i> Back to Results | |
| </button> | |
| <div id="web-recipe-detail-content"> | |
| <!-- Recipe details will be populated here --> | |
| </div> | |
| <div class="web-recipe-detail-actions"> | |
| <button class="web-recipe-btn primary" id="web-recipe-import-btn"> | |
| <i class="fas fa-download"></i> Import Recipe | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Ingredient Mapping Screen --> | |
| <div id="web-recipe-mapping-screen" class="web-recipe-screen"> | |
| <div class="web-recipe-mapping-container"> | |
| <button class="web-recipe-back-btn" id="web-recipe-mapping-back"> | |
| <i class="fas fa-arrow-left"></i> Back | |
| </button> | |
| <h3>Ingredient Mapping</h3> | |
| <p class="web-recipe-mapping-subtitle"> | |
| AI is matching recipe ingredients to your inventory... | |
| </p> | |
| <!-- Loading State --> | |
| <div id="web-recipe-mapping-loading" class="web-recipe-loading"> | |
| <div class="web-recipe-spinner"></div> | |
| <p>Analyzing ingredients...</p> | |
| </div> | |
| <!-- Mapping Results --> | |
| <div id="web-recipe-mapping-results" class="web-recipe-mapping-results" style="display: none;"> | |
| <div class="web-recipe-mapping-legend"> | |
| <span class="mapping-legend-item"> | |
| <span class="mapping-badge exact"></span> Exact Match | |
| </span> | |
| <span class="mapping-legend-item"> | |
| <span class="mapping-badge substitute"></span> Substitute | |
| </span> | |
| <span class="mapping-legend-item"> | |
| <span class="mapping-badge missing"></span> Missing | |
| </span> | |
| </div> | |
| <div id="web-recipe-mapping-list" class="web-recipe-mapping-list"> | |
| <!-- Mapping items will be populated here --> | |
| </div> | |
| <div class="web-recipe-mapping-actions"> | |
| <button class="web-recipe-btn secondary" id="web-recipe-mapping-cancel"> | |
| Cancel | |
| </button> | |
| <button class="web-recipe-btn primary" id="web-recipe-mapping-confirm"> | |
| <i class="fas fa-check"></i> Save Recipe | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Success Screen --> | |
| <div id="web-recipe-success-screen" class="web-recipe-screen"> | |
| <div class="web-recipe-success-container"> | |
| <div class="web-recipe-success-icon"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| <h3>✅ Recipe Saved Successfully!</h3> | |
| <p>The recipe has been added to your catalogue</p> | |
| <button class="web-recipe-btn primary" id="web-recipe-success-close"> | |
| <i class="fas fa-check"></i> Done | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="script.js"></script> | |
| <script src="web-recipe-search.js"></script> | |
| <script src="ai-assistant.js"></script> | |
| </body> | |
| </html> |