Spaces:

THEZYZSTUDIO
/

Z_cam

Paused

App Files Files Community

THEZYZSTUDIO commited on 17 days ago

Commit

aa6d98d

verified ·

1 Parent(s): 18f55d6

Delete index.html

Browse files

Files changed (1) hide show

index.html +0 -1385

index.html DELETED Viewed

@@ -1,1385 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-<title>THE Z CAM</title>
-<style>
-  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;900&display=swap');
-  :root {
-    --bg: #000000;
-    --surface: rgba(255,255,255,0.06);
-    --surface2: rgba(255,255,255,0.10);
-    --border: rgba(255,255,255,0.10);
-    --text: #FFFFFF;
-    --text-dim: rgba(255,255,255,0.45);
-    --accent: #00CFFF;
-    --accent2: #BF5FFF;
-    --accent-glow: rgba(0,207,255,0.25);
-    --red: #FF3B3B;
-    --red-glow: rgba(255,59,59,0.35);
-    --yellow: #FFD60A;
-    --green: #30D158;
-    --radius: 18px;
-    --radius-sm: 10px;
-  }
-  * { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; user-select:none; }
-  html, body {
-    width:100%; height:100%; background:#000; overflow:hidden;
-    font-family:'Inter', sans-serif; color:var(--text);
-  }
-  /* ══════════════════════════════════════
-     SPLASH SCREEN
-  ══════════════════════════════════════ */
-  #splash {
-    position:fixed; inset:0; background:#000;
-    display:flex; flex-direction:column; align-items:center; justify-content:center;
-    z-index:1000; transition:opacity 0.6s ease;
-  }
-  #splash.hide { opacity:0; pointer-events:none; }
-  .splash-logo {
-    display:flex; flex-direction:column; align-items:center; gap:8px;
-    animation: splashIn 0.8s cubic-bezier(0.16,1,0.3,1) both;
-  }
-  .splash-icon {
-    width:80px; height:80px; background:linear-gradient(135deg, var(--accent), var(--accent2));
-    border-radius:22px; display:flex; align-items:center; justify-content:center;
-    box-shadow:0 0 40px var(--accent-glow), 0 0 80px rgba(191,95,255,0.15);
-    font-size:36px;
-  }
-  .splash-title {
-    font-size:28px; font-weight:900; letter-spacing:3px;
-    background:linear-gradient(90deg, var(--accent), var(--accent2));
-    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
-  }
-  .splash-sub {
-    font-size:10px; font-weight:500; letter-spacing:4px; color:var(--text-dim);
-    text-transform:uppercase; margin-top:-4px;
-  }
-  .splash-bar {
-    width:120px; height:2px; background:var(--border);
-    border-radius:2px; margin-top:32px; overflow:hidden;
-  }
-  .splash-bar-fill {
-    height:100%; background:linear-gradient(90deg, var(--accent), var(--accent2));
-    border-radius:2px; width:0; animation:loadBar 1.4s ease forwards 0.3s;
-  }
-  @keyframes splashIn {
-    from { opacity:0; transform:scale(0.85) translateY(20px); }
-    to { opacity:1; transform:scale(1) translateY(0); }
-  }
-  @keyframes loadBar {
-    to { width:100%; }
-  }
-  /* ══════════════════════════════════════
-     MAIN APP
-  ══════════════════════════════════════ */
-  #app {
-    position:fixed; inset:0; display:flex; flex-direction:column;
-    background:#000; opacity:0; transition:opacity 0.5s ease;
-  }
-  #app.visible { opacity:1; }
-  /* ══════════════════════════════════════
-     VIEWFINDER
-  ══════════════════════════════════════ */
-  #viewfinder {
-    position:absolute; inset:0; overflow:hidden; background:#0a0a0a;
-  }
-  #video-main {
-    position:absolute; inset:0; width:100%; height:100%;
-    object-fit:cover; transform-origin:center center;
-    transition:transform 0.05s ease;
-  }
-  /* Portrait mode pip */
-  #video-pip {
-    position:absolute; top:110px; right:16px;
-    width:90px; height:130px; border-radius:14px;
-    overflow:hidden; display:none; border:2px solid rgba(255,255,255,0.3);
-    box-shadow:0 8px 24px rgba(0,0,0,0.5);
-    background:#111;
-  }
-  #video-pip video {
-    width:100%; height:100%; object-fit:cover;
-  }
-  #video-pip.show { display:block; animation:pipIn 0.3s ease; }
-  @keyframes pipIn {
-    from { opacity:0; transform:scale(0.8); }
-    to { opacity:1; transform:scale(1); }
-  }
-  /* Grid overlay */
-  #grid-overlay {
-    position:absolute; inset:0; pointer-events:none; display:none;
-  }
-  #grid-overlay.show { display:block; }
-  #grid-overlay svg { width:100%; height:100%; }
-  /* Focus ring */
-  #focus-ring {
-    position:absolute; width:60px; height:60px;
-    border:2px solid var(--accent); border-radius:50%;
-    transform:translate(-50%, -50%) scale(1.5);
-    opacity:0; pointer-events:none;
-    box-shadow:0 0 12px var(--accent-glow);
-    transition:all 0.3s cubic-bezier(0.16,1,0.3,1);
-  }
-  #focus-ring.active {
-    opacity:1; transform:translate(-50%, -50%) scale(1);
-  }
-  #focus-ring.locking {
-    opacity:0; transform:translate(-50%, -50%) scale(0.8);
-  }
-  /* Exposure slider */
-  #exposure-drag {
-    position:absolute; right:20px; top:50%; transform:translateY(-50%);
-    height:160px; width:32px; display:none; flex-direction:column;
-    align-items:center; gap:4px; opacity:0;
-    transition:opacity 0.3s ease;
-  }
-  #exposure-drag.show { display:flex; opacity:1; }
-  .exp-track {
-    flex:1; width:3px; background:rgba(255,255,255,0.2);
-    border-radius:2px; position:relative; cursor:pointer;
-  }
-  .exp-fill {
-    position:absolute; bottom:0; width:100%;
-    background:linear-gradient(to top, var(--yellow), rgba(255,214,10,0.5));
-    border-radius:2px; height:50%; transition:height 0.1s;
-  }
-  .exp-thumb {
-    position:absolute; left:50%; transform:translateX(-50%);
-    width:14px; height:14px; border-radius:50%;
-    background:var(--yellow); box-shadow:0 0 8px rgba(255,214,10,0.5);
-    bottom:50%; margin-bottom:-7px;
-  }
-  .exp-icon { font-size:13px; }
-  /* ══════════════════════════════════════
-     TOP BAR
-  ══════════════════════════════════════ */
-  #top-bar {
-    position:absolute; top:0; left:0; right:0;
-    padding:16px 20px 12px;
-    background:linear-gradient(to bottom, rgba(0,0,0,0.75) 0%, transparent 100%);
-    display:flex; align-items:center; justify-content:space-between;
-    z-index:10;
-  }
-  .top-left, .top-right {
-    display:flex; align-items:center; gap:10px;
-  }
-  .brand-badge {
-    display:flex; align-items:center; gap:6px;
-  }
-  .brand-dot {
-    width:6px; height:6px; border-radius:50%;
-    background:linear-gradient(135deg, var(--accent), var(--accent2));
-    box-shadow:0 0 8px var(--accent-glow);
-    animation:pulse 2s ease infinite;
-  }
-  @keyframes pulse {
-    0%,100% { box-shadow:0 0 8px var(--accent-glow); }
-    50% { box-shadow:0 0 16px var(--accent-glow), 0 0 24px var(--accent-glow); }
-  }
-  .brand-name {
-    font-size:11px; font-weight:700; letter-spacing:2px;
-    background:linear-gradient(90deg, var(--accent), var(--accent2));
-    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
-  }
-  .top-btn {
-    width:36px; height:36px; border-radius:50%;
-    background:rgba(0,0,0,0.45); backdrop-filter:blur(12px);
-    border:1px solid var(--border); display:flex; align-items:center;
-    justify-content:center; cursor:pointer; font-size:16px;
-    transition:all 0.2s ease; position:relative;
-  }
-  .top-btn:active { transform:scale(0.88); }
-  .top-btn.active { background:rgba(0,207,255,0.2); border-color:var(--accent); }
-  .top-btn .badge {
-    position:absolute; top:-2px; right:-2px;
-    width:8px; height:8px; border-radius:50%;
-    background:var(--accent); border:1.5px solid #000;
-    display:none;
-  }
-  .top-btn.active .badge { display:block; }
-  /* Flash modes */
-  #flash-btn { font-size:18px; }
-  /* ══════════════════════════════════════
-     ZOOM HUD
-  ══════════════════════════════════════ */
-  #zoom-hud {
-    position:absolute; top:50%; left:50%;
-    transform:translate(-50%, -50%);
-    pointer-events:none; z-index:5;
-    display:flex; flex-direction:column; align-items:center; gap:6px;
-    opacity:0; transition:opacity 0.3s ease;
-  }
-  #zoom-hud.show { opacity:1; }
-  .zoom-value-big {
-    font-size:52px; font-weight:900; letter-spacing:-2px;
-    background:linear-gradient(135deg, #fff 60%, var(--accent));
-    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
-    text-shadow:none; line-height:1;
-  }
-  .zoom-value-big span {
-    font-size:22px; font-weight:500; letter-spacing:0;
-    -webkit-text-fill-color:rgba(255,255,255,0.7);
-  }
-  .zoom-ai-badge {
-    font-size:10px; font-weight:600; letter-spacing:2px;
-    background:linear-gradient(90deg, var(--accent), var(--accent2));
-    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
-    opacity:0; transition:opacity 0.3s;
-  }
-  .zoom-ai-badge.show { opacity:1; }
-  /* ══════════════════════════════════════
-     ZOOM BAR (bottom area)
-  ══════════════════════════════════════ */
-  #zoom-bar {
-    position:absolute; bottom:190px; left:0; right:0;
-    display:flex; flex-direction:column; align-items:center; gap:10px;
-    z-index:10; pointer-events:auto;
-  }
-  /* Quick zoom presets */
-  .zoom-presets {
-    display:flex; gap:6px; align-items:center;
-  }
-  .zoom-preset {
-    min-width:44px; height:32px; border-radius:16px;
-    background:rgba(0,0,0,0.5); backdrop-filter:blur(16px);
-    border:1px solid rgba(255,255,255,0.15);
-    display:flex; align-items:center; justify-content:center;
-    font-size:12px; font-weight:600; color:rgba(255,255,255,0.7);
-    cursor:pointer; padding:0 10px;
-    transition:all 0.2s cubic-bezier(0.16,1,0.3,1);
-  }
-  .zoom-preset:active { transform:scale(0.9); }
-  .zoom-preset.active {
-    background:rgba(0,207,255,0.2); border-color:var(--accent);
-    color:var(--accent); box-shadow:0 0 12px rgba(0,207,255,0.2);
-  }
-  /* Main zoom slider */
-  .zoom-slider-wrap {
-    display:flex; align-items:center; gap:10px; width:90%; max-width:340px;
-  }
-  .zoom-icon { font-size:14px; opacity:0.5; }
-  .zoom-track {
-    flex:1; height:4px; background:rgba(255,255,255,0.15);
-    border-radius:2px; position:relative; cursor:pointer;
-  }
-  .zoom-fill {
-    position:absolute; left:0; top:0; height:100%;
-    background:linear-gradient(90deg, var(--accent), var(--accent2));
-    border-radius:2px; transition:width 0.05s;
-  }
-  .zoom-thumb {
-    position:absolute; top:50%; transform:translate(-50%, -50%);
-    width:18px; height:18px; border-radius:50%;
-    background:#fff; box-shadow:0 2px 8px rgba(0,0,0,0.4), 0 0 0 3px rgba(0,207,255,0.3);
-    cursor:grab; transition:left 0.05s;
-  }
-  .zoom-thumb:active { cursor:grabbing; transform:translate(-50%,-50%) scale(1.15); }
-  /* ══════════════════════════════════════
-     BOTTOM CONTROLS
-  ══════════════════════════════════════ */
-  #bottom-controls {
-    position:absolute; bottom:0; left:0; right:0;
-    padding:0 20px 40px;
-    background:linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);
-    z-index:10;
-  }
-  /* Mode tabs */
-  .mode-tabs {
-    display:flex; align-items:center; justify-content:center;
-    gap:0; margin-bottom:20px; overflow-x:auto;
-    scrollbar-width:none;
-  }
-  .mode-tabs::-webkit-scrollbar { display:none; }
-  .mode-tab {
-    padding:6px 14px; font-size:11px; font-weight:600; letter-spacing:1.5px;
-    color:var(--text-dim); cursor:pointer; white-space:nowrap;
-    transition:all 0.2s; text-transform:uppercase; border-radius:20px;
-    border:1px solid transparent;
-  }
-  .mode-tab:active { transform:scale(0.92); }
-  .mode-tab.active {
-    color:var(--yellow); border-color:rgba(255,214,10,0.3);
-    background:rgba(255,214,10,0.08);
-  }
-  /* Main shutter row */
-  .shutter-row {
-    display:flex; align-items:center; justify-content:space-between;
-  }
-  /* Gallery thumb */
-  .gallery-thumb {
-    width:56px; height:56px; border-radius:12px;
-    background:var(--surface); border:2px solid rgba(255,255,255,0.15);
-    overflow:hidden; cursor:pointer; position:relative;
-    transition:all 0.2s ease;
-  }
-  .gallery-thumb:active { transform:scale(0.88); }
-  .gallery-thumb img {
-    width:100%; height:100%; object-fit:cover; display:none;
-  }
-  .gallery-thumb .empty-icon {
-    position:absolute; inset:0; display:flex; align-items:center;
-    justify-content:center; font-size:22px; opacity:0.3;
-  }
-  .gallery-count {
-    position:absolute; top:-4px; right:-4px;
-    min-width:18px; height:18px; border-radius:9px;
-    background:var(--accent); font-size:9px; font-weight:700;
-    display:flex; align-items:center; justify-content:center;
-    border:1.5px solid #000; padding:0 3px; display:none;
-  }
-  /* Shutter button */
-  .shutter-btn {
-    width:76px; height:76px; border-radius:50%;
-    background:#fff; border:none; cursor:pointer; position:relative;
-    transition:transform 0.15s ease, box-shadow 0.15s ease;
-    box-shadow:0 0 0 4px rgba(255,255,255,0.15);
-  }
-  .shutter-btn::after {
-    content:''; position:absolute; inset:4px; border-radius:50%;
-    background:#fff; transition:all 0.15s;
-  }
-  .shutter-btn:active { transform:scale(0.88); }
-  .shutter-btn.recording {
-    background:var(--red);
-    box-shadow:0 0 0 4px rgba(255,59,59,0.25), 0 0 24px var(--red-glow);
-    animation:recordPulse 1.5s ease infinite;
-  }
-  .shutter-btn.recording::after {
-    inset:20px; border-radius:6px; background:var(--red);
-  }
-  @keyframes recordPulse {
-    0%,100% { box-shadow:0 0 0 4px rgba(255,59,59,0.25), 0 0 24px var(--red-glow); }
-    50% { box-shadow:0 0 0 8px rgba(255,59,59,0.15), 0 0 40px var(--red-glow); }
-  }
-  /* Video shutter outer ring animation */
-  .shutter-ring {
-    position:absolute; inset:-5px; border-radius:50%;
-    border:2px solid transparent; pointer-events:none;
-  }
-  .shutter-btn.recording .shutter-ring {
-    border-color:var(--red); animation:rotateSlow 3s linear infinite;
-  }
-  @keyframes rotateSlow { to { transform:rotate(360deg); } }
-  /* Flip camera */
-  .flip-btn {
-    width:56px; height:56px; border-radius:50%;
-    background:rgba(0,0,0,0.4); backdrop-filter:blur(16px);
-    border:1px solid var(--border);
-    display:flex; align-items:center; justify-content:center;
-    font-size:22px; cursor:pointer;
-    transition:all 0.2s ease;
-  }
-  .flip-btn:active { transform:scale(0.85) rotate(180deg); }
-  /* ════════════════════════════���═════════
-     RECORD TIMER
-  ══════════════════════════════════════ */
-  #rec-timer {
-    position:absolute; top:70px; left:50%; transform:translateX(-50%);
-    display:none; align-items:center; gap:8px;
-    background:rgba(0,0,0,0.55); backdrop-filter:blur(10px);
-    border:1px solid rgba(255,59,59,0.3); border-radius:20px;
-    padding:6px 14px; z-index:10;
-  }
-  #rec-timer.show { display:flex; }
-  .rec-dot {
-    width:8px; height:8px; border-radius:50%; background:var(--red);
-    animation:blink 1s step-end infinite;
-  }
-  @keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0;} }
-  .rec-time { font-size:13px; font-weight:600; letter-spacing:1px; font-variant-numeric:tabular-nums; }
-  /* ══════════════════════════════════════
-     RESOLUTION / SETTINGS PANEL
-  ══════════════════════════════════════ */
-  #settings-panel {
-    position:absolute; top:70px; left:0; right:0;
-    background:rgba(0,0,0,0.85); backdrop-filter:blur(24px);
-    border-bottom:1px solid var(--border);
-    padding:16px 20px; z-index:20;
-    transform:translateY(-120%); transition:transform 0.4s cubic-bezier(0.16,1,0.3,1);
-  }
-  #settings-panel.open { transform:translateY(0); }
-  .settings-title {
-    font-size:11px; font-weight:700; letter-spacing:3px; color:var(--text-dim);
-    text-transform:uppercase; margin-bottom:14px;
-  }
-  .settings-row {
-    display:flex; align-items:center; justify-content:space-between;
-    padding:10px 0; border-bottom:1px solid var(--border);
-  }
-  .settings-row:last-child { border-bottom:none; }
-  .settings-label {
-    font-size:13px; font-weight:500; display:flex; align-items:center; gap:8px;
-  }
-  .settings-label span { font-size:16px; }
-  .settings-chips { display:flex; gap:6px; }
-  .chip {
-    padding:5px 12px; border-radius:20px; font-size:11px; font-weight:600;
-    background:rgba(255,255,255,0.08); border:1px solid var(--border);
-    cursor:pointer; transition:all 0.15s; color:var(--text-dim);
-  }
-  .chip.active {
-    background:rgba(0,207,255,0.15); border-color:var(--accent); color:var(--accent);
-  }
-  .chip:active { transform:scale(0.92); }
-  /* ══════════════════════════════════════
-     FLASH OVERLAY
-  ══════════════════════════════════════ */
-  #flash-overlay {
-    position:absolute; inset:0; background:#fff;
-    opacity:0; pointer-events:none; z-index:100;
-    transition:opacity 0.08s;
-  }
-  #flash-overlay.flash { opacity:1; }
-  /* ══════════════════════════════════════
-     CAPTURE FEEDBACK
-  ══════════════════════════════════════ */
-  #capture-feedback {
-    position:absolute; inset:0; border:3px solid #fff;
-    opacity:0; pointer-events:none; z-index:99;
-    border-radius:0; transition:opacity 0.1s;
-  }
-  #capture-feedback.flash { opacity:0.7; }
-  /* ══════════════════════════════════════
-     NO CAMERA MESSAGE
-  ══════════════════════════════════════ */
-  #no-camera {
-    position:absolute; inset:0; display:none;
-    flex-direction:column; align-items:center; justify-content:center;
-    gap:16px; z-index:50; text-align:center; padding:32px;
-    background:rgba(0,0,0,0.92);
-  }
-  #no-camera.show { display:flex; }
-  .no-cam-icon { font-size:56px; }
-  .no-cam-title { font-size:20px; font-weight:800; letter-spacing:0.5px; }
-  .no-cam-sub { font-size:13px; opacity:0.5; line-height:1.7; max-width:280px; }
-  .open-tab-btn {
-    margin-top:8px;
-    padding:14px 32px; border-radius:30px;
-    background:linear-gradient(135deg, var(--accent), var(--accent2));
-    color:#fff; font-size:14px; font-weight:700; letter-spacing:1px;
-    cursor:pointer; border:none;
-    box-shadow:0 0 24px var(--accent-glow), 0 4px 20px rgba(0,0,0,0.4);
-    transition:transform 0.15s, box-shadow 0.15s;
-    text-decoration:none; display:inline-flex; align-items:center; gap:8px;
-  }
-  .open-tab-btn:active { transform:scale(0.94); }
-  .iframe-note {
-    font-size:11px; color:rgba(255,255,255,0.3); line-height:1.6; max-width:260px;
-    border:1px solid rgba(255,255,255,0.08); border-radius:10px; padding:10px 14px;
-  }
-  /* ══════════════════════════════════════
-     LEVEL INDICATOR
-  ══════════════════════════════════════ */
-  #level-indicator {
-    position:absolute; bottom:190px; left:50%; transform:translateX(-50%);
-    display:flex; align-items:center; gap:3px; opacity:0;
-    transition:opacity 0.3s; z-index:5; pointer-events:none;
-  }
-  #level-indicator.show { opacity:1; }
-  .level-line {
-    height:2px; background:var(--yellow); border-radius:1px; transition:width 0.1s;
-  }
-  .level-dot {
-    width:6px; height:6px; border-radius:50%;
-    background:var(--yellow); box-shadow:0 0 6px rgba(255,214,10,0.6);
-  }
-  /* ══════════════════════════════════════
-     PINCH HINT
-  ══════════════════════════════════════ */
-  #pinch-hint {
-    position:absolute; top:40%; left:50%; transform:translate(-50%, -50%);
-    background:rgba(0,0,0,0.6); backdrop-filter:blur(10px);
-    border:1px solid var(--border); border-radius:12px;
-    padding:10px 16px; font-size:12px; color:var(--text-dim);
-    pointer-events:none; opacity:0; z-index:20;
-    transition:opacity 0.3s;
-  }
-  #pinch-hint.show { opacity:1; }
-  /* ══════════════════════════════════════
-     RESPONSIVE
-  ══════════════════════════════════════ */
-  @media (max-width:380px) {
-    .zoom-preset { min-width:36px; padding:0 8px; font-size:11px; }
-    .shutter-btn { width:68px; height:68px; }
-    .gallery-thumb, .flip-btn { width:48px; height:48px; }
-  }
-</style>
-</head>
-<body>
-<!-- SPLASH -->
-<div id="splash">
-  <div class="splash-logo">
-    <div class="splash-icon">📷</div>
-    <div class="splash-title">THE Z CAM</div>
-    <div class="splash-sub">by THE ZYZ STUDIO</div>
-    <div class="splash-bar"><div class="splash-bar-fill"></div></div>
-  </div>
-</div>
-<!-- MAIN APP -->
-<div id="app">
-  <!-- VIEWFINDER -->
-  <div id="viewfinder">
-    <video id="video-main" autoplay playsinline muted></video>
-    <!-- PiP (dual camera feel) -->
-    <div id="video-pip">
-      <video id="video-secondary" autoplay playsinline muted></video>
-    </div>
-    <!-- Grid overlay -->
-    <div id="grid-overlay">
-      <svg viewBox="0 0 100 100" preserveAspectRatio="none">
-        <line x1="33.3" y1="0" x2="33.3" y2="100" stroke="rgba(255,255,255,0.2)" stroke-width="0.3"/>
-        <line x1="66.6" y1="0" x2="66.6" y2="100" stroke="rgba(255,255,255,0.2)" stroke-width="0.3"/>
-        <line x1="0" y1="33.3" x2="100" y2="33.3" stroke="rgba(255,255,255,0.2)" stroke-width="0.3"/>
-        <line x1="0" y1="66.6" x2="100" y2="66.6" stroke="rgba(255,255,255,0.2)" stroke-width="0.3"/>
-      </svg>
-    </div>
-    <!-- Focus ring -->
-    <div id="focus-ring"></div>
-    <!-- Flash overlay -->
-    <div id="flash-overlay"></div>
-    <div id="capture-feedback"></div>
-    <!-- No camera -->
-    <div id="no-camera">
-      <div class="no-cam-icon">📵</div>
-      <div class="no-cam-title">Camera Access Needed</div>
-      <div class="no-cam-sub">Please tap Allow when your browser asks for camera permission.</div>
-      <button class="open-tab-btn" onclick="startCamera()" style="margin-top:8px;">
-        <span>🔄</span> Try Again
-      </button>
-    </div>
-    <!-- Zoom HUD (shown during active zoom) -->
-    <div id="zoom-hud">
-      <div class="zoom-value-big" id="zoom-display">1<span>×</span></div>
-      <div class="zoom-ai-badge" id="zoom-ai-badge">⚡ AI ENHANCED ZOOM</div>
-    </div>
-    <!-- Pinch hint -->
-    <div id="pinch-hint">👌 Pinch to zoom</div>
-    <!-- Exposure drag -->
-    <div id="exposure-drag">
-      <span class="exp-icon">☀️</span>
-      <div class="exp-track" id="exp-track">
-        <div class="exp-fill" id="exp-fill"></div>
-        <div class="exp-thumb" id="exp-thumb"></div>
-      </div>
-      <span class="exp-icon">🌑</span>
-    </div>
-    <!-- Level indicator -->
-    <div id="level-indicator">
-      <div class="level-line" style="width:30px;"></div>
-      <div class="level-dot"></div>
-      <div class="level-line" style="width:30px;"></div>
-    </div>
-  </div>
-  <!-- TOP BAR -->
-  <div id="top-bar">
-    <div class="top-left">
-      <div class="brand-badge">
-        <div class="brand-dot"></div>
-        <div class="brand-name">Z CAM</div>
-      </div>
-    </div>
-    <div class="top-right">
-      <div class="top-btn" id="grid-btn" title="Grid" onclick="toggleGrid()">⊞</div>
-      <div class="top-btn" id="flash-btn" onclick="cycleFlash()">⚡</div>
-      <div class="top-btn" id="settings-btn" onclick="toggleSettings()">⚙️</div>
-    </div>
-  </div>
-  <!-- SETTINGS PANEL -->
-  <div id="settings-panel">
-    <div class="settings-title">⚙ Camera Settings</div>
-    <div class="settings-row">
-      <div class="settings-label"><span>📐</span> Resolution</div>
-      <div class="settings-chips">
-        <div class="chip" onclick="setRes(this,'4K')">4K</div>
-        <div class="chip active" onclick="setRes(this,'1080p')">1080p</div>
-        <div class="chip" onclick="setRes(this,'720p')">720p</div>
-      </div>
-    </div>
-    <div class="settings-row">
-      <div class="settings-label"><span>🌙</span> Night Mode</div>
-      <div class="settings-chips">
-        <div class="chip active" id="night-chip" onclick="toggleNight(this)">Auto</div>
-        <div class="chip" id="night-on" onclick="setNightOn(this)">ON</div>
-        <div class="chip" id="night-off" onclick="setNightOff(this)">OFF</div>
-      </div>
-    </div>
-    <div class="settings-row">
-      <div class="settings-label"><span>🎨</span> Color Profile</div>
-      <div class="settings-chips">
-        <div class="chip active" onclick="setColor(this,'vivid')">Vivid</div>
-        <div class="chip" onclick="setColor(this,'natural')">Natural</div>
-        <div class="chip" onclick="setColor(this,'flat')">Flat</div>
-      </div>
-    </div>
-    <div class="settings-row">
-      <div class="settings-label"><span>🖼️</span> Aspect Ratio</div>
-      <div class="settings-chips">
-        <div class="chip active" onclick="setAspect(this,'9:16')">9:16</div>
-        <div class="chip" onclick="setAspect(this,'4:3')">4:3</div>
-        <div class="chip" onclick="setAspect(this,'1:1')">1:1</div>
-      </div>
-    </div>
-    <div class="settings-row">
-      <div class="settings-label"><span>📱</span> Dual View</div>
-      <div class="settings-chips">
-        <div class="chip" id="dual-chip" onclick="toggleDual(this)">Enable</div>
-      </div>
-    </div>
-  </div>
-  <!-- REC TIMER -->
-  <div id="rec-timer">
-    <div class="rec-dot"></div>
-    <div class="rec-time" id="rec-time-txt">00:00</div>
-  </div>
-  <!-- BOTTOM CONTROLS -->
-  <div id="bottom-controls">
-    <!-- Mode tabs -->
-    <div class="mode-tabs">
-      <div class="mode-tab" onclick="setMode(this,'SLOW-MO')">Slow-Mo</div>
-      <div class="mode-tab" onclick="setMode(this,'VIDEO')">Video</div>
-      <div class="mode-tab active" id="tab-PHOTO" onclick="setMode(this,'PHOTO')">Photo</div>
-      <div class="mode-tab" onclick="setMode(this,'PORTRAIT')">Portrait</div>
-      <div class="mode-tab" onclick="setMode(this,'NIGHT')">Night</div>
-    </div>
-    <!-- Zoom presets -->
-    <div id="zoom-bar">
-      <div class="zoom-presets">
-        <div class="zoom-preset" onclick="setZoomPreset(this,0.6)">0.6×</div>
-        <div class="zoom-preset active" id="preset-1x" onclick="setZoomPreset(this,1)">1×</div>
-        <div class="zoom-preset" onclick="setZoomPreset(this,2)">2×</div>
-        <div class="zoom-preset" onclick="setZoomPreset(this,5)">5×</div>
-        <div class="zoom-preset" onclick="setZoomPreset(this,10)">10×</div>
-        <div class="zoom-preset" onclick="setZoomPreset(this,30)">30×</div>
-        <div class="zoom-preset" onclick="setZoomPreset(this,100)">100×</div>
-      </div>
-      <div class="zoom-slider-wrap">
-        <span class="zoom-icon">🔭</span>
-        <div class="zoom-track" id="zoom-track">
-          <div class="zoom-fill" id="zoom-fill"></div>
-          <div class="zoom-thumb" id="zoom-thumb"></div>
-        </div>
-        <span class="zoom-icon" style="font-size:18px;">🔭</span>
-      </div>
-    </div>
-    <!-- Shutter row -->
-    <div class="shutter-row">
-      <div class="gallery-thumb" id="gallery-thumb" onclick="openGallery()">
-        <div class="empty-icon">🖼️</div>
-        <img id="last-photo" src="" alt="">
-        <div class="gallery-count" id="gallery-count">0</div>
-      </div>
-      <button class="shutter-btn" id="shutter-btn" onclick="handleShutter()">
-        <div class="shutter-ring"></div>
-      </button>
-      <div class="flip-btn" onclick="flipCamera()">🔄</div>
-    </div>
-  </div>
-</div>
-<!-- HIDDEN CANVAS FOR CAPTURE -->
-<canvas id="capture-canvas" style="display:none;"></canvas>
-<script>
-/* ═══════════════════════════════════════════════════════════
-   THE Z CAM — Core Engine
-═══════════════════════════════════════════════════════════ */
-const state = {
-  stream: null,
-  secondaryStream: null,
-  facingMode: 'environment',
-  mode: 'PHOTO',
-  zoom: 1,
-  maxZoom: 100,
-  nativeMaxZoom: 1,
-  flashMode: 'auto',   // off, auto, on, torch
-  gridOn: false,
-  nightMode: 'auto',
-  colorProfile: 'vivid',
-  recording: false,
-  recorder: null,
-  recSeconds: 0,
-  recInterval: null,
-  photos: [],
-  dualMode: false,
-  pinching: false,
-  pinchStartDist: 0,
-  pinchStartZoom: 1,
-  settingsOpen: false,
-  cameraReady: false,
-  hintShown: false,
-};
-/* ──────────────────────────────────────
-   INIT
-─────────────────────────────────────── */
-window.addEventListener('load', () => {
-  setTimeout(() => {
-    document.getElementById('splash').classList.add('hide');
-    document.getElementById('app').classList.add('visible');
-    startCamera();
-    initZoomSlider();
-    initPinchZoom();
-    initFocusTap();
-    setTimeout(() => {
-      if (!state.hintShown) {
-        document.getElementById('pinch-hint').classList.add('show');
-        state.hintShown = true;
-        setTimeout(() => document.getElementById('pinch-hint').classList.remove('show'), 2500);
-      }
-    }, 1800);
-  }, 1700);
-});
-/* ──────────────────────────────────────
-   CAMERA START
-─────────────────────────────────────── */
-async function startCamera() {
-  if (state.stream) {
-    state.stream.getTracks().forEach(t => t.stop());
-    state.stream = null;
-  }
-  const constraints = {
-    video: {
-      facingMode: state.facingMode,
-      width: { ideal: 1920 },
-      height: { ideal: 1080 },
-    },
-    audio: false
-  };
-  try {
-    const s = await navigator.mediaDevices.getUserMedia(constraints);
-    state.stream = s;
-    const videoEl = document.getElementById('video-main');
-    videoEl.srcObject = s;
-    // Get native zoom capability
-    const track = s.getVideoTracks()[0];
-    if (track) {
-      const caps = track.getCapabilities ? track.getCapabilities() : {};
-      if (caps.zoom) {
-        state.nativeMaxZoom = caps.zoom.max || 1;
-      } else {
-        state.nativeMaxZoom = 1;
-      }
-    }
-    document.getElementById('no-camera').classList.remove('show');
-    state.cameraReady = true;
-    applyZoom(state.zoom);
-  } catch(e) {
-    document.getElementById('no-camera').classList.add('show');
-    state.cameraReady = false;
-    console.warn('Camera error:', e);
-  }
-}
-/* ──────────────────────────────────────
-   ZOOM ENGINE
-   Native zoom via constraints OR CSS transform fallback
-   Max visual zoom: 100× (AI-enhanced range shown)
-─────────────────────────────────────── */
-function applyZoom(z) {
-  z = Math.max(0.5, Math.min(z, state.maxZoom));
-  state.zoom = z;
-  const videoEl = document.getElementById('video-main');
-  const track = state.stream && state.stream.getVideoTracks()[0];
-  // Try native zoom (only works on mobile with real camera)
-  if (track && track.getCapabilities) {
-    const caps = track.getCapabilities();
-    if (caps.zoom) {
-      const nativeZ = Math.min(z, caps.zoom.max);
-      track.applyConstraints({ advanced: [{ zoom: nativeZ }] }).catch(()=>{});
-    }
-  }
-  // CSS scale for beyond-native and desktop
-  const scale = z;
-  videoEl.style.transform = `scale(${Math.min(scale, 12)})`;
-  // Update display
-  updateZoomUI(z);
-}
-function updateZoomUI(z) {
-  // Display
-  const disp = document.getElementById('zoom-display');
-  if (z < 10) {
-    disp.innerHTML = z.toFixed(1).replace('.0','') + '<span>×</span>';
-  } else {
-    disp.innerHTML = Math.round(z) + '<span>×</span>';
-  }
-  // AI badge for high zoom
-  const badge = document.getElementById('zoom-ai-badge');
-  if (z >= 10) {
-    badge.classList.add('show');
-  } else {
-    badge.classList.remove('show');
-  }
-  // Slider position
-  const pct = zoomToPct(z);
-  document.getElementById('zoom-fill').style.width = pct + '%';
-  document.getElementById('zoom-thumb').style.left = pct + '%';
-  // Presets highlight
-  document.querySelectorAll('.zoom-preset').forEach(p => {
-    const pv = parseFloat(p.dataset.zoom);
-    p.classList.toggle('active', Math.abs(pv - z) < 0.05 * pv);
-  });
-  // HUD visibility
-  const hud = document.getElementById('zoom-hud');
-  if (z === 1) {
-    hud.classList.remove('show');
-    clearTimeout(window._zoomHudTimer);
-  } else {
-    hud.classList.add('show');
-    clearTimeout(window._zoomHudTimer);
-    window._zoomHudTimer = setTimeout(() => hud.classList.remove('show'), 2000);
-  }
-}
-// Logarithmic scale for better zoom feel
-function zoomToPct(z) {
-  const logMin = Math.log(0.5);
-  const logMax = Math.log(state.maxZoom);
-  return ((Math.log(z) - logMin) / (logMax - logMin)) * 100;
-}
-function pctToZoom(pct) {
-  const logMin = Math.log(0.5);
-  const logMax = Math.log(state.maxZoom);
-  return Math.exp(logMin + (pct / 100) * (logMax - logMin));
-}
-/* ──────────────────────────────────────
-   ZOOM SLIDER
-─────────────────────────────────────── */
-function initZoomSlider() {
-  const track = document.getElementById('zoom-track');
-  const thumb = document.getElementById('zoom-thumb');
-  let dragging = false;
-  function getZoomFromEvent(e) {
-    const rect = track.getBoundingClientRect();
-    const clientX = e.touches ? e.touches[0].clientX : e.clientX;
-    const pct = Math.max(0, Math.min(100, ((clientX - rect.left) / rect.width) * 100));
-    return pctToZoom(pct);
-  }
-  function startDrag(e) {
-    dragging = true;
-    e.preventDefault();
-    applyZoom(getZoomFromEvent(e));
-  }
-  function onDrag(e) {
-    if (!dragging) return;
-    e.preventDefault();
-    applyZoom(getZoomFromEvent(e));
-  }
-  function endDrag() { dragging = false; }
-  track.addEventListener('mousedown', startDrag);
-  track.addEventListener('touchstart', startDrag, { passive: false });
-  document.addEventListener('mousemove', onDrag);
-  document.addEventListener('touchmove', onDrag, { passive: false });
-  document.addEventListener('mouseup', endDrag);
-  document.addEventListener('touchend', endDrag);
-  // Init fill
-  updateZoomUI(1);
-}
-/* ──────────────────────────────────────
-   PINCH TO ZOOM
-─────────────────────────────────────── */
-function initPinchZoom() {
-  const vf = document.getElementById('viewfinder');
-  vf.addEventListener('touchstart', (e) => {
-    if (e.touches.length === 2) {
-      state.pinching = true;
-      state.pinchStartDist = getPinchDist(e);
-      state.pinchStartZoom = state.zoom;
-    }
-  }, { passive: true });
-  vf.addEventListener('touchmove', (e) => {
-    if (e.touches.length === 2 && state.pinching) {
-      const dist = getPinchDist(e);
-      const scale = dist / state.pinchStartDist;
-      applyZoom(state.pinchStartZoom * scale);
-    }
-  }, { passive: true });
-  vf.addEventListener('touchend', () => {
-    state.pinching = false;
-  });
-}
-function getPinchDist(e) {
-  const dx = e.touches[0].clientX - e.touches[1].clientX;
-  const dy = e.touches[0].clientY - e.touches[1].clientY;
-  return Math.sqrt(dx*dx + dy*dy);
-}
-/* ──────────────────────────────────────
-   ZOOM PRESETS
-─────────────────────────────────────── */
-function setZoomPreset(el, z) {
-  applyZoom(z);
-  animatePreset(el);
-}
-function animatePreset(el) {
-  el.style.transform = 'scale(0.85)';
-  setTimeout(() => el.style.transform = '', 150);
-}
-/* ──────────────────────────────────────
-   TAP TO FOCUS
-─────────────────────────────────────── */
-function initFocusTap() {
-  const vf = document.getElementById('viewfinder');
-  vf.addEventListener('click', (e) => {
-    if (state.pinching) return;
-    if (e.target.closest('#bottom-controls, #top-bar, #settings-panel, #zoom-bar')) return;
-    showFocusRing(e.clientX, e.clientY);
-  });
-}
-function showFocusRing(x, y) {
-  const ring = document.getElementById('focus-ring');
-  ring.style.left = x + 'px';
-  ring.style.top = y + 'px';
-  ring.classList.remove('active', 'locking');
-  requestAnimationFrame(() => {
-    ring.classList.add('active');
-    setTimeout(() => ring.classList.add('locking'), 700);
-    setTimeout(() => ring.classList.remove('active','locking'), 1100);
-  });
-  // Show exposure control near tap
-  const expDrag = document.getElementById('exposure-drag');
-  expDrag.classList.add('show');
-  clearTimeout(window._expTimer);
-  window._expTimer = setTimeout(() => expDrag.classList.remove('show'), 3500);
-}
-/* ──────────────────────────────────────
-   SHUTTER (Photo / Video)
-─────────────────────────────────────── */
-function handleShutter() {
-  if (state.mode === 'VIDEO' || state.mode === 'SLOW-MO') {
-    toggleRecord();
-  } else {
-    capturePhoto();
-  }
-}
-function capturePhoto() {
-  const video = document.getElementById('video-main');
-  const canvas = document.getElementById('capture-canvas');
-  const ctx = canvas.getContext('2d');
-  canvas.width = video.videoWidth || 1280;
-  canvas.height = video.videoHeight || 720;
-  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-  // Apply color profile filter
-  if (state.colorProfile === 'vivid') {
-    ctx.filter = 'saturate(1.3) contrast(1.05)';
-    ctx.drawImage(canvas, 0, 0);
-  } else if (state.colorProfile === 'flat') {
-    ctx.filter = 'saturate(0.7) contrast(0.9)';
-    ctx.drawImage(canvas, 0, 0);
-  }
-  const dataUrl = canvas.toDataURL('image/jpeg', 0.92);
-  // Save to photos array
-  state.photos.unshift({
-    dataUrl,
-    timestamp: Date.now(),
-    zoom: state.zoom,
-    mode: state.mode,
-  });
-  // Update gallery thumb
-  const img = document.getElementById('last-photo');
-  img.src = dataUrl;
-  img.style.display = 'block';
-  document.querySelector('.empty-icon').style.display = 'none';
-  const cnt = document.getElementById('gallery-count');
-  cnt.textContent = state.photos.length;
-  cnt.style.display = 'flex';
-  // Flash animation
-  const fl = document.getElementById('flash-overlay');
-  const cf = document.getElementById('capture-feedback');
-  fl.classList.add('flash');
-  cf.classList.add('flash');
-  setTimeout(() => { fl.classList.remove('flash'); cf.classList.remove('flash'); }, 120);
-  // Haptic
-  if (navigator.vibrate) navigator.vibrate(20);
-}
-/* ──────────────────────────────────────
-   VIDEO RECORDING
-─────────────────────────────────────── */
-function toggleRecord() {
-  if (!state.recording) {
-    startRecording();
-  } else {
-    stopRecording();
-  }
-}
-function startRecording() {
-  if (!state.stream) return;
-  try {
-    const rec = new MediaRecorder(state.stream, { mimeType: 'video/webm;codecs=vp9' });
-    const chunks = [];
-    rec.ondataavailable = (e) => chunks.push(e.data);
-    rec.onstop = () => {
-      const blob = new Blob(chunks, { type: 'video/webm' });
-      const url = URL.createObjectURL(blob);
-      state.photos.unshift({ dataUrl: null, videoUrl: url, isVideo: true, timestamp: Date.now(), duration: state.recSeconds });
-      updateGalleryCount();
-      if (navigator.vibrate) navigator.vibrate([30, 20, 30]);
-    };
-    rec.start();
-    state.recorder = rec;
-    state.recording = true;
-    state.recSeconds = 0;
-    document.getElementById('shutter-btn').classList.add('recording');
-    document.getElementById('rec-timer').classList.add('show');
-    state.recInterval = setInterval(tickRec, 1000);
-    if (navigator.vibrate) navigator.vibrate(40);
-  } catch(e) {
-    // Fallback for browsers without webm/vp9
-    try {
-      const rec = new MediaRecorder(state.stream);
-      const chunks = [];
-      rec.ondataavailable = (e) => chunks.push(e.data);
-      rec.onstop = () => {
-        const blob = new Blob(chunks);
-        const url = URL.createObjectURL(blob);
-        state.photos.unshift({ dataUrl: null, videoUrl: url, isVideo: true, timestamp: Date.now(), duration: state.recSeconds });
-        updateGalleryCount();
-      };
-      rec.start();
-      state.recorder = rec;
-      state.recording = true;
-      state.recSeconds = 0;
-      document.getElementById('shutter-btn').classList.add('recording');
-      document.getElementById('rec-timer').classList.add('show');
-      state.recInterval = setInterval(tickRec, 1000);
-    } catch(e2) {
-      console.warn('Recording not supported:', e2);
-    }
-  }
-}
-function stopRecording() {
-  if (state.recorder) {
-    state.recorder.stop();
-    state.recorder = null;
-  }
-  state.recording = false;
-  document.getElementById('shutter-btn').classList.remove('recording');
-  document.getElementById('rec-timer').classList.remove('show');
-  clearInterval(state.recInterval);
-}
-function tickRec() {
-  state.recSeconds++;
-  const m = String(Math.floor(state.recSeconds / 60)).padStart(2, '0');
-  const s = String(state.recSeconds % 60).padStart(2, '0');
-  document.getElementById('rec-time-txt').textContent = m + ':' + s;
-}
-function updateGalleryCount() {
-  const cnt = document.getElementById('gallery-count');
-  cnt.textContent = state.photos.length;
-  cnt.style.display = 'flex';
-}
-/* ──────────────────────────────────────
-   CAMERA FLIP
-─────────────────────────────────────── */
-function flipCamera() {
-  state.facingMode = state.facingMode === 'environment' ? 'user' : 'environment';
-  if (navigator.vibrate) navigator.vibrate(15);
-  startCamera();
-  // Flip animation
-  const vid = document.getElementById('video-main');
-  vid.style.transition = 'transform 0.3s ease';
-  vid.style.transform = 'scaleX(0)';
-  setTimeout(() => {
-    vid.style.scaleX = '';
-    vid.style.transform = `scale(${state.zoom})`;
-    vid.style.transition = '';
-  }, 300);
-}
-/* ──────────────────────────────────────
-   MODE SWITCH
-─────────────────────────────────────── */
-function setMode(el, mode) {
-  document.querySelectorAll('.mode-tab').forEach(t => t.classList.remove('active'));
-  el.classList.add('active');
-  state.mode = mode;
-  // Stop recording if switching away from video
-  if (mode !== 'VIDEO' && mode !== 'SLOW-MO' && state.recording) {
-    stopRecording();
-  }
-  // Portrait mode shows pip
-  if (mode === 'PORTRAIT' && state.dualMode) {
-    document.getElementById('video-pip').classList.add('show');
-  } else {
-    document.getElementById('video-pip').classList.remove('show');
-  }
-  // Night mode highlights
-  if (mode === 'NIGHT') {
-    setNightOn(document.getElementById('night-on'));
-  }
-  if (navigator.vibrate) navigator.vibrate(10);
-}
-/* ──────────��───────────────────────────
-   FLASH
-─────────────────────────────────────── */
-const flashModes = ['auto', 'on', 'off', 'torch'];
-const flashIcons = { auto: '⚡', on: '🔦', off: '🚫', torch: '🔆' };
-function cycleFlash() {
-  const idx = flashModes.indexOf(state.flashMode);
-  state.flashMode = flashModes[(idx + 1) % flashModes.length];
-  document.getElementById('flash-btn').textContent = flashIcons[state.flashMode];
-  // Torch: use torch constraint
-  if (state.stream) {
-    const track = state.stream.getVideoTracks()[0];
-    if (track && track.applyConstraints) {
-      if (state.flashMode === 'torch') {
-        track.applyConstraints({ advanced: [{ torch: true }] }).catch(()=>{});
-      } else {
-        track.applyConstraints({ advanced: [{ torch: false }] }).catch(()=>{});
-      }
-    }
-  }
-}
-/* ──────────────────────────────────────
-   GRID
-─────────────────────────────────────── */
-function toggleGrid() {
-  state.gridOn = !state.gridOn;
-  document.getElementById('grid-overlay').classList.toggle('show', state.gridOn);
-  document.getElementById('grid-btn').classList.toggle('active', state.gridOn);
-}
-/* ──────────────────────────────────────
-   SETTINGS PANEL
-─────────────────────────────────────── */
-function toggleSettings() {
-  state.settingsOpen = !state.settingsOpen;
-  document.getElementById('settings-panel').classList.toggle('open', state.settingsOpen);
-  document.getElementById('settings-btn').classList.toggle('active', state.settingsOpen);
-}
-function setRes(el, res) {
-  el.closest('.settings-chips').querySelectorAll('.chip').forEach(c => c.classList.remove('active'));
-  el.classList.add('active');
-}
-function setColor(el, profile) {
-  el.closest('.settings-chips').querySelectorAll('.chip').forEach(c => c.classList.remove('active'));
-  el.classList.add('active');
-  state.colorProfile = profile;
-}
-function setAspect(el, ratio) {
-  el.closest('.settings-chips').querySelectorAll('.chip').forEach(c => c.classList.remove('active'));
-  el.classList.add('active');
-}
-function toggleNight(el) {
-  el.closest('.settings-chips').querySelectorAll('.chip').forEach(c => c.classList.remove('active'));
-  el.classList.add('active');
-  state.nightMode = 'auto';
-}
-function setNightOn(el) {
-  el.closest('.settings-chips').querySelectorAll('.chip').forEach(c => c.classList.remove('active'));
-  el.classList.add('active');
-  state.nightMode = 'on';
-}
-function setNightOff(el) {
-  el.closest('.settings-chips').querySelectorAll('.chip').forEach(c => c.classList.remove('active'));
-  el.classList.add('active');
-  state.nightMode = 'off';
-}
-function toggleDual(el) {
-  state.dualMode = !state.dualMode;
-  el.textContent = state.dualMode ? 'Enabled ✓' : 'Enable';
-  el.classList.toggle('active', state.dualMode);
-  if (state.dualMode) {
-    // Try to show pip from front camera while main is back
-    navigator.mediaDevices.getUserMedia({ video: { facingMode: 'user' }, audio: false })
-      .then(s => {
-        state.secondaryStream = s;
-        const pipVid = document.getElementById('video-secondary');
-        pipVid.srcObject = s;
-        document.getElementById('video-pip').classList.add('show');
-      }).catch(() => {
-        state.dualMode = false;
-        el.textContent = 'Not Available';
-        el.classList.remove('active');
-      });
-  } else {
-    if (state.secondaryStream) {
-      state.secondaryStream.getTracks().forEach(t => t.stop());
-      state.secondaryStream = null;
-    }
-    document.getElementById('video-pip').classList.remove('show');
-  }
-}
-/* ──────────────────────────────────────
-   GALLERY PLACEHOLDER
-─────────────────────────────────────── */
-function openGallery() {
-  if (state.photos.length === 0) return;
-  // Gallery will be implemented in next phase
-  if (navigator.vibrate) navigator.vibrate(10);
-  // Simple preview for now: flash the last photo
-  const lastPhoto = state.photos[0];
-  if (lastPhoto && lastPhoto.dataUrl) {
-    const prev = document.createElement('div');
-    prev.style.cssText = `
-      position:fixed; inset:0; background:rgba(0,0,0,0.95); z-index:200;
-      display:flex; align-items:center; justify-content:center; flex-direction:column; gap:16px;
-    `;
-    const img = document.createElement('img');
-    img.src = lastPhoto.dataUrl;
-    img.style.cssText = 'max-width:90%; max-height:75vh; border-radius:12px; object-fit:contain;';
-    const info = document.createElement('div');
-    info.style.cssText = 'color:rgba(255,255,255,0.5); font-size:12px; letter-spacing:1px;';
-    info.textContent = `📷 ${state.photos.length} photo${state.photos.length > 1 ? 's' : ''} — Zoom ${lastPhoto.zoom.toFixed(1)}×`;
-    const closeBtn = document.createElement('div');
-    closeBtn.style.cssText = `
-      padding:12px 28px; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2);
-      border-radius:24px; color:#fff; font-size:13px; font-weight:600; cursor:pointer; letter-spacing:1px;
-    `;
-    closeBtn.textContent = '✕ Close';
-    closeBtn.onclick = () => document.body.removeChild(prev);
-    prev.appendChild(img);
-    prev.appendChild(info);
-    prev.appendChild(closeBtn);
-    prev.onclick = (e) => { if (e.target === prev) document.body.removeChild(prev); };
-    document.body.appendChild(prev);
-  }
-}
-/* ──────────────────────────────────────
-   ZOOM PRESET DATA ATTRS
-─────────────────────────────────────── */
-document.querySelectorAll('.zoom-preset').forEach(p => {
-  const z = parseFloat(p.textContent);
-  p.dataset.zoom = z;
-});
-/* ──────────────────────────────────────
-   CLOSE SETTINGS ON VIEWFINDER TAP
-─────────────────────────────────────── */
-document.getElementById('viewfinder').addEventListener('click', (e) => {
-  if (state.settingsOpen && !e.target.closest('#settings-panel, #settings-btn')) {
-    toggleSettings();
-  }
-});
-</script>
-</body>
-</html>