feat: web UI zone mode selector with preset dropdown

templates/index.html

@@ -270,6 +270,59 @@
     font-size: var(--text-sm);
   }
 
+  /* Zone mode section */
+  .zone-section { margin-top: var(--space-8); }
+  .zone-section h3 {
+    font-size: var(--text-lg);
+    font-weight: var(--font-semibold);
+    margin-bottom: var(--space-4);
+  }
+  .zone-radio-group {
+    display: flex;
+    gap: var(--space-4);
+    margin-bottom: var(--space-4);
+  }
+  .zone-radio-group label {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    font-size: var(--text-sm);
+    color: var(--color-neutral-700);
+    cursor: pointer;
+  }
+  .zone-radio-group input[type="radio"] {
+    accent-color: var(--color-primary);
+  }
+  .zone-fixed-config {
+    display: none;
+    padding: var(--space-4);
+    background: var(--color-neutral-50);
+    border: 1px solid var(--color-neutral-200);
+    border-radius: var(--radius-md);
+  }
+  .zone-fixed-config.visible { display: block; }
+  .zone-preset-row {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+  }
+  .zone-preset-row label {
+    font-size: var(--text-sm);
+    font-weight: var(--font-medium);
+    color: var(--color-neutral-600);
+    white-space: nowrap;
+  }
+  .zone-preset-row select {
+    flex: 1;
+    max-width: 320px;
+    padding: var(--space-2) var(--space-3);
+    font-size: var(--text-sm);
+    border: 1px solid var(--color-neutral-300);
+    border-radius: var(--radius-sm);
+    background: white;
+    color: var(--color-neutral-700);
+  }
+
   /* Video delete button */
   .video-delete-btn {
     flex-shrink: 0;
@@ -341,6 +394,29 @@
     <div class="video-list" id="video-list"></div>
   </div>
 
+  {# --- Counting Zone --- #}
+  <div class="zone-section" id="zone-section" style="display:none">
+    <h3>Counting Zone</h3>
+    <div class="zone-radio-group">
+      <label>
+        <input type="radio" name="zone_mode" value="dynamic" checked>
+        Auto-detect Truck
+      </label>
+      <label>
+        <input type="radio" name="zone_mode" value="fixed">
+        Fixed Zone
+      </label>
+    </div>
+    <div class="zone-fixed-config" id="zone-fixed-config">
+      <div class="zone-preset-row">
+        <label for="zone-preset-select">Preset:</label>
+        <select name="zone_preset" id="zone-preset-select">
+          <option value="">Loading presets...</option>
+        </select>
+      </div>
+    </div>
+  </div>
+
   {# --- Model Selection --- #}
   <div class="model-section">
     <div class="model-section-header">