static/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
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 &amp; 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>