Update index.html

index.html

@@ -18,7 +18,9 @@
       --border-color: #d1d5db;
       --shadow-color: rgba(0, 0, 0, 0.08);
     }
+
     * { box-sizing: border-box; }
+
     body {
       font-family: 'Poppins', sans-serif;
       background-color: var(--background-color);
@@ -30,6 +32,7 @@
       align-items: flex-start;
       min-height: 100vh;
     }
+
     .container {
       width: 100%;
       max-width: 820px;
@@ -39,61 +42,74 @@
       box-shadow: 0 10px 30px var(--shadow-color);
       border: 1px solid #e5e7eb;
     }
+
     @media (max-width: 600px) { .container { padding: 1.25rem; } }
+
     h1 {
       font-size: 2rem; font-weight: 700; margin: 0 0 .75rem 0; text-align: center;
       background: linear-gradient(90deg, var(--primary-color-start), var(--primary-color-end));
       -webkit-background-clip: text; -webkit-text-fill-color: transparent;
     }
+
     .subtitle { text-align:center; font-size:.9rem; color:#6b7280; margin-bottom: .75rem; }
+
     label { font-weight: 600; display:block; margin-top: 1rem; margin-bottom: .4rem; color: var(--label-color); font-size:.95rem; }
+
     select, textarea, input[type="text"] {
       width: 100%; padding: .8rem 1rem; border-radius: 10px; border: 1px solid var(--border-color);
       font-size: 1rem; font-family: 'Poppins', sans-serif; background: #f9fafb; transition: all .2s ease-in-out;
     }
-    select:focus, textarea:focus, input[type="text"]  
+
+    /* Focus states for inputs */
+    select:focus,
+    textarea:focus,
+    input[type="text"]:focus {
+      outline: none;
+      border-color: var(--primary-color-start);
+      box-shadow: 0 0 0 3px rgba(79,70,229,.15);
+      background: #fff;
+    }
+
     /* === Unified dropdown styling for all <select> === */
     select {
-  /* سارے براؤزرز میں نیٹو اَرو ہٹا دیں */
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-
-  /* اَرو کے لئے اندر اسپیس */
-  padding-right: 2.25rem; /* تھا: 1rem */
-
-  /* کستم chevron (برینڈ کلر #4F46E5 میں) */
-  background-image: url('data:image/svg+xml;utf8,\
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none">\
-<path d="M6 8l4 4 4-4" stroke="%234F46E5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
-  background-repeat: no-repeat;
-  background-position: right .75rem center; /* کنارے سے ہٹا کر اندر */
-  background-size: 14px;
-}
-
-/* پرانے Edge/IE کا نیٹو اَرو */
-select::-ms-expand { display: none; }
-
-/* ڈسایبلڈ ڈراپ ڈاؤن بھی ایک جیسا لگے */
-    select:disabled {
-  opacity: .6;
-  cursor: not-allowed;
-}
-:focus { outline:none; border-color: var(--primary-color-start); box-shadow: 0 0 0 3px rgba(79,70,229,.15); background:#fff; }
+      -webkit-appearance: none; /* iOS/Safari */
+      -moz-appearance: none;
+      appearance: none;
+      padding-right: 2.25rem; /* space for chevron */
+      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none"><path d="M6 8l4 4 4-4" stroke="%234F46E5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
+      background-repeat: no-repeat;
+      background-position: right .75rem center;
+      background-size: 14px;
+    }
+
+    /* old Edge/IE arrow */
+    select::-ms-expand { display: none; }
+
+    /* disabled look */
+    select:disabled { opacity: .6; cursor: not-allowed; }
+
     .row { display:grid; grid-template-columns: 1fr 1fr; gap: .75rem 1rem; }
     .row > div { width:100%; }
+
+    /* Toolbar layout */
+    .toolbar { display:flex; gap:1rem; align-items:center; justify-content:center; flex-wrap: wrap; margin:.35rem 0 1rem; }
+    .toolbar .group { display:flex; gap:.5rem; align-items:center; }
+    .toolbar select { width: auto; min-width: 12ch; }
+
     .actions { display:grid; grid-template-columns: 1fr 1fr; gap:.75rem; margin-top:1.25rem; }
+
     button {
       background-image: linear-gradient(90deg, var(--primary-color-start), var(--primary-color-end)); color:#fff; border:none; padding:.9rem 1.2rem; font-size:1.05rem; font-weight:700; border-radius:10px; cursor:pointer; width:100%;
       transition: transform .18s ease, box-shadow .18s ease; box-shadow: 0 4px 15px rgba(0,0,0,.10);
     }
     button:hover { transform: translateY(-2px); box-shadow: 0 7px 20px rgba(0,0,0,.15); }
     button.secondary { background:#111827; }
+
     pre { background:#0f172a; color:#e5e7eb; padding:1rem 1.25rem; white-space:pre-wrap; word-break:break-word; border-radius:12px; margin-top:1rem; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:.92rem; line-height:1.6; border:1px solid #1f2937; }
+
     .note { font-size:.8rem; color:#6b7280; margin-top:.25rem; }
-    .toolbar { display:flex; gap:1rem; align-items:center; justify-content:center; flex-wrap: wrap; margin:.35rem 0 1rem; }
-    .toolbar .group { display:flex; gap:.5rem; align-items:center; }
     .dimmed { opacity:.55; }
+
     .toast { position: fixed; right: 16px; bottom: 16px; background: #111827; color: #fff; padding: 10px 12px; border-radius: 10px; opacity: 0; transform: translateY(10px); box-shadow: 0 8px 20px rgba(0,0,0,0.2); transition: opacity .2s ease, transform .2s ease; font-size: .9rem; z-index:1000; }
     .toast.show { opacity:1; transform: translateY(0); }
   </style>
@@ -103,16 +119,11 @@ select::-ms-expand { display: none; }
     <h1>🎬 Veo3 JSON Prompt Generator <span style="font-size: 1rem; font-weight: 400;">(Pro)</span></h1>
     <div class="subtitle">Single‑file HTML • Smart Mode • Copy‑ready JSON</div>
 
-    <!-- Smart / Pro toolbar -->
+    <!-- Toolbar (Quality only) -->
     <div class="toolbar">
       <div class="group">
-        <label style="display:flex;gap:.5rem;align-items:center;margin:0">
-          <input type="checkbox" id="proModeToggle"> Advanced / Pro
-        </label>
-      </div>
-      <div class="group">
-        <label for="qualityPreset" style="margin:0">🎚 Quality:</label>
-        <select id="qualityPreset">
+        <label for="qualityPreset" style="margin:0">Quality</label>
+        <select id="qualityPreset" aria-label="Quality Preset">
           <option value="pro" selected>Pro (default)</option>
           <option value="draft">Draft / Fast</option>
           <option value="cinematic">Cinematic</option>
@@ -468,7 +479,7 @@ select::-ms-expand { display: none; }
       <button class="secondary" id="copyBtn" onclick="copyToClipboard()">📋 Copy Prompt</button>
     </div>
 
-    <pre id="output">{ /* Your JSON prompt will appear here */ }</pre>
+    <pre id="output" aria-live="polite">{ /* Your JSON prompt will appear here */ }</pre>
   </div>
 
   <div id="toast" class="toast" role="status" aria-live="polite">Copied!</div>
@@ -481,8 +492,22 @@ select::-ms-expand { display: none; }
       const t = $("toast"); if(!t) return; t.textContent = msg; t.classList.add("show"); setTimeout(()=>t.classList.remove("show"), 1200);
     }
 
+    let _lastJSON = "";
+    let _typeTimer = null;
+
+    function typewriter(el, text, speed = 8){
+      if (!el) return;
+      if (_typeTimer) { clearInterval(_typeTimer); _typeTimer = null; }
+      el.textContent = "";
+      let i = 0;
+      _typeTimer = setInterval(()=>{
+        el.textContent += text[i++] || "";
+        if (i >= text.length) { clearInterval(_typeTimer); _typeTimer = null; }
+      }, speed);
+    }
+
     function copyToClipboard(){
-      const text = $("output").textContent || "";
+      const text = _lastJSON || $("output").textContent || "";
       navigator.clipboard.writeText(text).then(()=>showToast("Copied!"));
     }
 
@@ -519,22 +544,22 @@ select::-ms-expand { display: none; }
         camera: ["handheld","rack-focus"],
         lighting: "Soft Wrap Key",
         bg: "lab",
-        music: "Educational",
-        sfx: "Click / Tap"
+        music: "Cinematic Pulses",
+        sfx: "Metallic Clinks"
       },
       "BTS/documentary": {
         camera: ["handheld"],
         lighting: "Neutral Daylight",
         bg: "warehouse",
-        music: "Natural Documentary",
-        sfx: "Ambient Room"
+        music: "Cinematic Pulses",
+        sfx: "Whoosh / Riser"
       },
       meme: {
         camera: ["smash-zoom","whip-pan"],
         lighting: "High-Key Clean",
         bg: "auto",
         music: "Trap",
-        sfx: "Smash-Zoom Gag"
+        sfx: "Whoosh / Riser"
       }
     };
 
@@ -557,7 +582,6 @@ select::-ms-expand { display: none; }
     const platEl     = el("platform");
     const varEl      = el("variant");
     const domEl      = el("domain");
-    const proToggle  = el("proModeToggle");
     const qualEl     = el("qualityPreset") || { value:"pro" };
 
     function syncPlatformsFromAspect() {
@@ -565,13 +589,9 @@ select::-ms-expand { display: none; }
       const ar = aspectEl.value;
       const rec = AR_TO_PLATFORMS[ar] || [];
       platEl.dataset.recommended = JSON.stringify(rec);
-      const pro = proToggle?.checked;
-      if (!pro) {
-        platEl.value = rec[0] || "tiktok";
-        platEl.disabled = true;
-        platEl.title = `Auto: ${rec.join(", ")}`;
-      } else {
-        platEl.disabled = false; platEl.title = "";
+      // set a sensible default if empty
+      if (!platEl.value || !rec.includes(platEl.value)) {
+        platEl.value = rec[0] || platEl.value || "tiktok";
       }
     }
 
@@ -603,22 +623,6 @@ select::-ms-expand { display: none; }
       setIfAuto(sfxEl, vAuto.sfx || "Whoosh / Riser");
     }
 
-    function syncProLocking(){
-      const pro = proToggle?.checked;
-      const advancedIds = [
-        "platform","camera","background","lightingMood","audioTrack","sfx",
-        "colorPalette","hook","finale","keywords","negativePrompt",
-        "skinTone","headCover","voLanguage","voGender","voTone","voPace"
-      ];
-      advancedIds.forEach(id=>{
-        const node = el(id);
-        if (!node) return;
-        node.disabled = !pro;
-        node.closest("div")?.classList?.toggle("dimmed", !pro);
-      });
-      syncPlatformsFromAspect();
-    }
-
     function cleanObj(obj){
       const isArr = Array.isArray(obj);
       const acc = isArr ? [] : {};
@@ -673,10 +677,9 @@ select::-ms-expand { display: none; }
       const sfx      = el("sfx")?.value;
 
       let platforms = [];
-      if (platEl?.dataset?.recommended && !platEl.disabled){
-        platforms = [platEl.value];
-      } else if (platEl?.dataset?.recommended){
-        platforms = JSON.parse(platEl.dataset.recommended);
+      if (platEl?.dataset?.recommended){
+        const rec = JSON.parse(platEl.dataset.recommended);
+        platforms = platEl.value ? [platEl.value] : rec;
       }
 
       const negatives = (el("negativePrompt")?.value || "no logos, no text overlays, no watermark").trim();
@@ -711,7 +714,8 @@ select::-ms-expand { display: none; }
       });
 
       const pretty = JSON.stringify(out, null, 2);
-      document.getElementById("output").textContent = pretty;
+      _lastJSON = pretty;
+      typewriter(document.getElementById("output"), pretty, 6); // typewriting effect
 
       if (typeof _oldGenerate === "function") { try { _oldGenerate(); } catch(e){} }
     };
@@ -727,11 +731,10 @@ select::-ms-expand { display: none; }
       customTaskWrap.style.display = taskFocus.value === 'custom' ? 'block' : 'none';
     });
 
-    proToggle?.addEventListener("change", ()=>{ syncProLocking(); });
     document.addEventListener("DOMContentLoaded", ()=>{
-      syncProLocking();
       autoFromVariantAndDomain();
       syncPlatformsFromAspect();
+      generatePrompt(); // prefill output with typing
     });
   </script>
 </body>