Update index.html

index.html

@@ -119,7 +119,6 @@
     <h1>🎬 Veo3 JSON Prompt Generator <span style="font-size: 1rem; font-weight: 400;">(Pro)</span></h1>
     <div class="subtitle">Slect Options  • Smart Mode • Copy‑ready JSON Prompt</div>
 
-    <!-- Toolbar (Quality only) -->
     <div class="toolbar">
       <div class="group">
         <label for="qualityPreset" style="margin:0">Quality</label>
@@ -131,7 +130,6 @@
       </div>
     </div>
 
-    <!-- Core choices: minimal inputs -->
     <div class="row">
       <div>
         <label for="domain">🎯 Select Domain</label>
@@ -162,6 +160,9 @@
           </optgroup>
           <option value="custom">🛠️ Custom Character or Product</option>
         </select>
+        <div id="customCharacterTypeWrapper" style="display:none; margin-top:.5rem;">
+            <input type="text" id="customCharacterType" placeholder="Enter custom character or product" />
+        </div>
       </div>
     </div>
 
@@ -208,6 +209,9 @@
           <option value="comedy-sketch">🤣 Comedy Sketch</option>
           <option value="custom">✍️ Custom Variant</option>
         </select>
+         <div id="customVariantWrapper" style="display:none; margin-top:.5rem;">
+            <input type="text" id="customVariant" placeholder="Enter custom video type" />
+        </div>
       </div>
       <div>
         <label for="aspectRatio">🖼️ Aspect Ratio</label>
@@ -372,7 +376,6 @@
       </div>
     </div>
 
-    <!-- Voiceover Block -->
     <div id="voiceoverBlock" style="margin-top:.5rem;">
       <label style="display:flex; align-items:center; gap:8px; font-weight:600;">
         <input type="checkbox" id="useVoiceover" checked /> Enable Voiceover
@@ -643,17 +646,17 @@
 
       const qp = QUALITY_PRESET[qualEl.value] || QUALITY_PRESET.pro;
 
-      const variant = el("variant")?.value || "cinematic";
-      const ar      = el("aspectRatio")?.value || "16:9";
-      const domain  = el("domain")?.value || "advertisement";
-      const scene   = (el("taskFocus")?.value === "custom" ? el("customTask")?.value : el("taskFocus")?.value) || "Product Reveal";
+      const variant = (el("variant")?.value === "custom" ? el("customVariant")?.value : el("variant")?.value) || "cinematic";
+      const ar       = el("aspectRatio")?.value || "16:9";
+      const domain   = el("domain")?.value || "advertisement";
+      const scene    = (el("taskFocus")?.value === "custom" ? el("customTask")?.value : el("taskFocus")?.value) || "Product Reveal";
 
-      const lookOn  = el("useLookPreset")?.checked;
-      const voOn    = el("useVoiceover")?.checked;
+      const lookOn   = el("useLookPreset")?.checked;
+      const voOn     = el("useVoiceover")?.checked;
 
       let subjectLook = null;
       if (lookOn) {
-        const type = el("characterType")?.value;
+        const type = (el("characterType")?.value === "custom" ? el("customCharacterType")?.value : el("characterType")?.value);
         const tone = el("skinTone")?.value;
         const hc   = el("headCover")?.value;
         subjectLook = { type, skin_tone: tone, head_cover: hc };
@@ -722,15 +725,29 @@
 
     // Events
     aspectEl?.addEventListener("change", syncPlatformsFromAspect);
-    varEl?.addEventListener("change", ()=>{ autoFromVariantAndDomain(); });
     domEl?.addEventListener("change", ()=>{ autoFromVariantAndDomain(); });
 
+    // Task Focus Custom Input
     const taskFocus = el('taskFocus');
     const customTaskWrap = el('customTaskWrapper');
     taskFocus?.addEventListener('change', ()=>{
       customTaskWrap.style.display = taskFocus.value === 'custom' ? 'block' : 'none';
     });
 
+    // Character/Product Custom Input
+    const characterType = el('characterType');
+    const customCharacterWrap = el('customCharacterTypeWrapper');
+    characterType?.addEventListener('change', () => {
+        customCharacterWrap.style.display = characterType.value === 'custom' ? 'block' : 'none';
+    });
+    
+    // Variant Custom Input & Auto-preset trigger
+    const customVariantWrap = el('customVariantWrapper');
+    varEl?.addEventListener("change", ()=>{
+        autoFromVariantAndDomain();
+        customVariantWrap.style.display = varEl.value === 'custom' ? 'block' : 'none';
+    });
+
     document.addEventListener("DOMContentLoaded", ()=>{
       autoFromVariantAndDomain();
       syncPlatformsFromAspect();
@@ -738,4 +755,4 @@
     });
   </script>
 </body>
-</html>
+</html>