Fix header preview to show full image with contain sizing

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

portal/index.html

@@ -38,7 +38,7 @@
           </svg>
           <span>Orders</span>
         </a>
-        <a href="#menu" class="nav-item" data-page="menu">
+        <a href="menu-builder.html" class="nav-item">
           <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <path d="M3 6h18M3 12h18M3 18h18"/>
           </svg>
@@ -66,6 +66,13 @@
           </svg>
           <span>Beacons</span>
         </a>
+        <a href="#services" class="nav-item" data-page="services">
+          <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9"/>
+            <path d="M13.73 21a2 2 0 01-3.46 0"/>
+          </svg>
+          <span>Services</span>
+        </a>
         <a href="#settings" class="nav-item" data-page="settings">
           <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <circle cx="12" cy="12" r="3"/>
@@ -393,6 +400,22 @@
           </div>
         </section>
 
+        <!-- Services Page (Task Types) -->
+        <section class="page" id="page-services">
+          <div class="card">
+            <div class="card-header" style="display:flex;justify-content:space-between;align-items:center;">
+              <h3>Bell Menu Services</h3>
+              <button class="btn btn-sm btn-primary" onclick="Portal.showAddServiceModal()">+ Add Service</button>
+            </div>
+            <div class="card-body">
+              <p style="color:#666;margin-bottom:16px;">These service options appear when customers tap the bell icon in the app. Customize the names, descriptions, and icons to match your business.</p>
+              <div class="list-group" id="servicesList">
+                <div class="empty-state">Loading...</div>
+              </div>
+            </div>
+          </div>
+        </section>
+
         <!-- Settings Page -->
         <section class="page" id="page-settings">
           <div class="settings-grid">
@@ -452,6 +475,37 @@
               </div>
             </div>
 
+            <div class="card">
+              <div class="card-header">
+                <h3>Branding</h3>
+              </div>
+              <div class="card-body">
+                <div style="display: flex; flex-direction: column; gap: 16px;">
+                  <div>
+                    <label style="display: block; margin-bottom: 8px; font-weight: 500;">Header Image</label>
+                    <p style="color: #666; font-size: 13px; margin-bottom: 8px;">Displayed at the top of your menu. Recommended: 1200x400px</p>
+                    <div id="headerPreview" style="width: 100%; height: 120px; background: #333; border-radius: 8px; margin-bottom: 8px; background-size: contain; background-position: center; background-repeat: no-repeat;"></div>
+                    <button class="btn btn-secondary" onclick="Portal.uploadHeader()" style="width: 100%;">
+                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 8px;">
+                        <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M17 8l-5-5-5 5M12 3v12"/>
+                      </svg>
+                      Upload Header
+                    </button>
+                  </div>
+                  <div>
+                    <label style="display: block; margin-bottom: 8px; font-weight: 500;">Brand Color</label>
+                    <p style="color: #666; font-size: 13px; margin-bottom: 8px;">Used for accents and fallback backgrounds</p>
+                    <div style="display: flex; gap: 12px; align-items: center;">
+                      <span id="brandColorSwatch" style="width: 40px; height: 40px; border-radius: 8px; background: #1B4D3E; border: 2px solid rgba(255,255,255,0.2); cursor: pointer;" onclick="Portal.showBrandColorPicker()"></span>
+                      <button class="btn btn-secondary" onclick="Portal.showBrandColorPicker()" style="flex: 1;">
+                        Change Color
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
             <div class="card">
               <div class="card-header">
                 <h3>Payment Settings</h3>