Spaces:

Nuzwa
/

_Veo3_JSON_Prompt_Generator_Pro_

Running

App Files Files Community

Nuzwa commited on Aug 25, 2025

Commit

e1add90

verified ·

1 Parent(s): 111575a

Update index.html

Browse files

Files changed (1) hide show

index.html +181 -88

index.html CHANGED Viewed

@@ -1,24 +1,30 @@
 <!DOCTYPE html>
-<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Veo3 JSON Prompt Generator Pro</title>
-  <!-- Fonts & Styles -->
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
   <style>
     :root {
       --primary-color-start: #4F46E5; /* Indigo */
       --primary-color-end: #8B5CF6;   /* Violet */
-      --background-color: #f8f9fc;
       --container-bg: #ffffff;
       --text-color: #1f2937;
       --label-color: #374151;
-      --border-color: #d1d5db;
-      --shadow-color: rgba(0, 0, 0, 0.08);
     }
     body {
@@ -26,65 +32,76 @@
       background-color: var(--background-color);
       color: var(--text-color);
       margin: 0;
-      padding: 1rem;
       display: flex;
       justify-content: center;
       align-items: flex-start;
       min-height: 100vh;
     }
     .container {
       width: 100%;
-      max-width: 760px;
       background-color: var(--container-bg);
-      padding: 2rem;
-      border-radius: 16px;
-      box-shadow: 0 10px 30px var(--shadow-color);
       border: 1px solid #e5e7eb;
-      box-sizing: border-box;
-    }
-    @media (max-width: 600px) {
-      .container { padding: 1.25rem; }
     }
     h1 {
-      font-size: 2rem;
       font-weight: 700;
-      margin: 0 0 1.25rem 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: 0.9rem;
       color: #6b7280;
-      margin-bottom: 1.25rem;
     }
     label {
       font-weight: 600;
       display: block;
-      margin-top: 1rem;
-      margin-bottom: 0.5rem;
       color: var(--label-color);
-      font-size: 0.95rem;
     }
     select, textarea, input[type="text"] {
       width: 100%;
-      padding: 0.8rem 1rem;
-      margin-top: 0.2rem;
       border-radius: 10px;
       border: 1px solid var(--border-color);
       font-size: 1rem;
       font-family: 'Poppins', sans-serif;
-      box-sizing: border-box;
-      background-color: #f9fafb;
       transition: all 0.2s ease-in-out;
     }
     select:focus, textarea:focus, input[type="text"]:focus {
@@ -94,66 +111,128 @@
       background-color: #fff;
     }
     .row {
       display: grid;
       grid-template-columns: 1fr 1fr;
-      gap: 0.75rem 1rem;
     }
-    .row > div { width: 100%; }
     .actions {
       display: grid;
       grid-template-columns: 1fr 1fr;
-      gap: 0.75rem;
-      margin-top: 1.25rem;
     }
     button {
-      background-image: linear-gradient(90deg, var(--primary-color-start), var(--primary-color-end));
       color: #fff;
       border: none;
       padding: 0.9rem 1.2rem;
       font-size: 1.05rem;
-      font-weight: 700;
       font-family: 'Poppins', sans-serif;
       border-radius: 10px;
       cursor: pointer;
       width: 100%;
-      transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
-      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.10);
     }
-    button:hover { transform: translateY(-2px); box-shadow: 0 7px 20px rgba(0, 0, 0, 0.15); }
-    button:active { transform: translateY(0); }
     .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: 0.92rem;
-      line-height: 1.6;
-      border: 1px solid #1f2937;
     }
-    .note { font-size: 0.8rem; color: #6b7280; margin-top: 0.25rem; }
     .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: 0.9rem; z-index: 1000;
     }
-    .toast.show { opacity: 1; transform: translateY(0); }
   </style>
 </head>
 <body>
@@ -194,13 +273,12 @@
       </div>
     </div>
-    <!-- Character Look Preset (new) -->
-    <div id="lookPresetBlock" style="margin-top:0.5rem;">
-      <label style="display:flex; align-items:center; gap:8px; font-weight:600;">
-        <input type="checkbox" id="useLookPreset" checked />
         Enable Character Look Preset
       </label>
-      <div id="lookPresetFields" class="row" style="margin-top:0.5rem;">
         <div>
           <label for="skinTone">🧑🏽‍ Skin Tone</label>
           <select id="skinTone">
@@ -223,10 +301,11 @@
           </select>
         </div>
       </div>
-      <div class="note">These presets add culturally-accurate wardrobe, hair, makeup, and accessories to the JSON.</div>
     </div>
-    $0📆 Scene Title / Task Focus</label>
       <select id="taskFocus">
         <option>Lesson Planning</option>
         <option>Quiz Generator</option>
@@ -243,7 +322,7 @@
         <option>Time-Saver Workflow</option>
         <option value="custom">🛠️ Custom</option>
       </select>
-      <div id="customTaskWrapper" style="display:none; margin-top:0.5rem;">
         <input type="text" id="customTask" placeholder="Enter your custom task focus" />
       </div>
     </div>
@@ -273,7 +352,7 @@
         <label for="aspectRatio">🖼️ Aspect Ratio</label>
         <select id="aspectRatio">
           <option>16:9</option>
-          <option>9:16</option>
           <option>1:1</option>
         </select>
       </div>
@@ -401,13 +480,12 @@
       </div>
     </div>
-    <!-- Voiceover Block (new) -->
-    <div id="voiceoverBlock" style="margin-top:0.5rem;">
-      <label style="display:flex; align-items:center; gap:8px; font-weight:600;">
-        <input type="checkbox" id="useVoiceover" checked />
         Enable Voiceover
       </label>
-      <div id="voFields" class="row" style="margin-top:0.5rem;">
         <div>
           <label for="voLanguage">🎙 Language</label>
           <select id="voLanguage">
@@ -447,8 +525,10 @@
           </select>
         </div>
       </div>
-      <label for="voScript" style="margin-top:0.5rem;">📝 Voiceover Script (optional)</label>
-      <textarea id="voScript" rows="3" placeholder="Write your VO script here... or leave empty to generate later"></textarea>
     </div>
     <div class="row">
@@ -498,7 +578,7 @@
       </div>
     </div>
-    <div>
       <label for="negativePrompt">🚫 Negative Prompt (Exclude Things)</label>
       <textarea id="negativePrompt" rows="3" placeholder="e.g., no logos, no text overlays, no watermark, no extra limbs"></textarea>
       <div class="note">Tip: Keep negatives short and specific for best results.</div>
@@ -619,15 +699,23 @@
       };
     }
-    $1
     function updateVoUiVisibility(){
       const enabled = $("useVoiceover")?.checked;
       if($("voFields")) $("voFields").style.display = enabled ? "grid" : "none";
-      if($("voScript") && $("voScript").parentElement) $("voScript").parentElement.style.display = enabled ? "block" : "none";
     }
-}
     function handleTaskFocusChange() {
       const selected = $("taskFocus").value;
       $("customTaskWrapper").style.display = selected === "custom" ? "block" : "none";
@@ -703,7 +791,7 @@
         voice: $("voGender")?.value,
         tone: $("voTone")?.value,
         pace: $("voPace")?.value,
-        script: $("voScript")?.value
       };
       const prompt = {
@@ -741,7 +829,7 @@
     async function copyToClipboard() {
       const text = $("output").textContent || "";
-      if (!text.trim()) { showToast("Nothing to copy yet"); return; }
       try {
         await navigator.clipboard.writeText(text);
         showToast("✅ Prompt copied to clipboard!");
@@ -758,19 +846,24 @@
     function showToast(msg) {
       const t = $("toast");
       t.textContent = msg; t.classList.add('show');
-      setTimeout(() => t.classList.remove('show'), 1600);
-    }
-    // initialize
-    $("taskFocus").addEventListener('change', handleTaskFocusChange);
-    handleTaskFocusChange();
-    if($("characterType")){ $("characterType").addEventListener('change', updateLookUiVisibility); }
-    if($("useLookPreset")){ $("useLookPreset").addEventListener('change', updateLookUiVisibility); }
-    if($("useVoiceover")){ $("useVoiceover").addEventListener('change', updateVoUiVisibility); }
-    updateLookUiVisibility();
-    updateVoUiVisibility();
-    // generate a starter prompt so output area isn't empty
-    generatePrompt();
   </script>
 </body>
-</html>

 <!DOCTYPE html>
+<html lang="ur">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Veo3 JSON Prompt Generator Pro</title>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
   <style>
     :root {
       --primary-color-start: #4F46E5; /* Indigo */
       --primary-color-end: #8B5CF6;   /* Violet */
+      --background-color: #f4f4f9; /* Lighter, softer background */
       --container-bg: #ffffff;
       --text-color: #1f2937;
       --label-color: #374151;
+      --border-color: #ddd6fe; /* Light violet for borders */
+      --shadow-color: rgba(79, 70, 229, 0.1);
+      --input-bg: #fafaff;
+      --dark-bg: #0f172a;
+    }
+    /* --- General Setup --- */
+    *, *::before, *::after {
+      box-sizing: border-box;
     }
     body {
       background-color: var(--background-color);
       color: var(--text-color);
       margin: 0;
+      padding: 2rem 1rem;
       display: flex;
       justify-content: center;
       align-items: flex-start;
       min-height: 100vh;
     }
+    /* --- Main Container --- */
     .container {
       width: 100%;
+      max-width: 800px;
       background-color: var(--container-bg);
+      padding: 2.5rem;
+      border-radius: 20px;
+      box-shadow: 0 12px 35px var(--shadow-color);
       border: 1px solid #e5e7eb;
     }
+    /* --- Typography --- */
     h1 {
+      font-size: 2.25rem;
       font-weight: 700;
+      margin: 0 0 0.5rem 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;
+      line-height: 1.2;
     }
     .subtitle {
       text-align: center;
+      font-size: 0.95rem;
       color: #6b7280;
+      margin-bottom: 2rem;
     }
     label {
       font-weight: 600;
       display: block;
+      margin-bottom: 0.6rem;
       color: var(--label-color);
+      font-size: 0.9rem;
     }
+    .note {
+      font-size: 0.85rem;
+      color: #6b7280;
+      margin-top: 0.5rem;
+    }
+    /* --- Form Elements --- */
     select, textarea, input[type="text"] {
       width: 100%;
+      padding: 0.8rem 1.1rem;
       border-radius: 10px;
       border: 1px solid var(--border-color);
       font-size: 1rem;
       font-family: 'Poppins', sans-serif;
+      background-color: var(--input-bg);
       transition: all 0.2s ease-in-out;
+      appearance: none; /* For custom select arrow */
+    }
+    select {
+      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+      background-position: right 0.7rem center;
+      background-repeat: no-repeat;
+      background-size: 1.5em 1.5em;
+      padding-right: 2.5rem;
     }
     select:focus, textarea:focus, input[type="text"]:focus {
       background-color: #fff;
     }
+    /* --- Layout & Grouping --- */
+    .form-section {
+      margin-top: 1.5rem;
+    }
     .row {
       display: grid;
       grid-template-columns: 1fr 1fr;
+      gap: 1.5rem;
+      margin-top: 1.5rem;
     }
+    .row > div {
+      width: 100%;
+    }
+    /* Special sections for better visual grouping */
+    #lookPresetBlock, #voiceoverBlock {
+        background-color: #f9f8ff;
+        padding: 1rem 1.5rem;
+        border-radius: 12px;
+        margin-top: 1.5rem;
+        border: 1px solid var(--border-color);
+    }
+    #lookPresetBlock > label, #voiceoverBlock > label {
+      font-size: 1rem;
+      color: var(--primary-color-start);
+    }
+    /* --- Buttons & Actions --- */
     .actions {
       display: grid;
       grid-template-columns: 1fr 1fr;
+      gap: 1rem;
+      margin-top: 2rem;
     }
     button {
+      background-image: linear-gradient(95deg, var(--primary-color-start), var(--primary-color-end));
       color: #fff;
       border: none;
       padding: 0.9rem 1.2rem;
       font-size: 1.05rem;
+      font-weight: 600;
       font-family: 'Poppins', sans-serif;
       border-radius: 10px;
       cursor: pointer;
       width: 100%;
+      transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
+      box-shadow: 0 4px 15px rgba(79, 70, 229, 0.2);
+    }
+    button:hover {
+      transform: translateY(-3px);
+      box-shadow: 0 7px 20px rgba(79, 70, 229, 0.25);
     }
+    button:active {
+      transform: translateY(0);
+      opacity: 0.9;
+    }
     .secondary {
+      background: #374151;
+      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
+    }
+    .secondary:hover {
+        background: #1f2937;
+        box-shadow: 0 7px 20px rgba(0, 0, 0, 0.2);
     }
+    /* --- Output & Toast --- */
     pre {
+      background: var(--dark-bg);
       color: #e5e7eb;
+      padding: 1.25rem;
       white-space: pre-wrap;
       word-break: break-word;
       border-radius: 12px;
+      margin-top: 2rem;
+      font-family: 'SF Mono', 'Consolas', 'Menlo', monospace;
+      font-size: 0.9rem;
+      line-height: 1.7;
+      border: 1px solid #374151;
     }
     .toast {
+      position: fixed;
+      right: 20px;
+      bottom: 20px;
+      background: linear-gradient(95deg, var(--primary-color-start), var(--primary-color-end));
+      color: #fff;
+      padding: 12px 18px;
+      border-radius: 10px;
+      opacity: 0;
+      transform: translateY(15px);
+      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
+      transition: opacity .2s ease, transform .2s ease;
+      font-size: 0.95rem;
+      font-weight: 500;
+      z-index: 1000;
     }
+    .toast.show {
+      opacity: 1;
+      transform: translateY(0);
+    }
+    /* --- Responsive (Mobile-Friendly) Design --- */
+    @media (max-width: 768px) {
+      body { padding: 1rem 0.5rem; }
+      .container { padding: 1.5rem; }
+      h1 { font-size: 1.75rem; }
+      .row, .actions {
+        grid-template-columns: 1fr;
+        gap: 1.25rem;
+      }
+      .form-section, .row, #lookPresetBlock, #voiceoverBlock {
+        margin-top: 1.25rem;
+      }
+    }
   </style>
 </head>
 <body>
       </div>
     </div>
+    <div id="lookPresetBlock">
+      <label>
+        <input type="checkbox" id="useLookPreset" checked style="margin-right: 8px; vertical-align: middle;">
         Enable Character Look Preset
       </label>
+      <div id="lookPresetFields" class="row" style="margin-top:1rem;">
         <div>
           <label for="skinTone">🧑🏽‍ Skin Tone</label>
           <select id="skinTone">
           </select>
         </div>
       </div>
+      <div class="note">These presets add culturally-accurate wardrobe, hair, makeup, and accessories.</div>
     </div>
+    <div class="form-section">
+      <label for="taskFocus">📆 Scene Title / Task Focus</label>
       <select id="taskFocus">
         <option>Lesson Planning</option>
         <option>Quiz Generator</option>
         <option>Time-Saver Workflow</option>
         <option value="custom">🛠️ Custom</option>
       </select>
+      <div id="customTaskWrapper" style="display:none; margin-top:0.75rem;">
         <input type="text" id="customTask" placeholder="Enter your custom task focus" />
       </div>
     </div>
         <label for="aspectRatio">🖼️ Aspect Ratio</label>
         <select id="aspectRatio">
           <option>16:9</option>
+          <option selected>9:16</option>
           <option>1:1</option>
         </select>
       </div>
       </div>
     </div>
+    <div id="voiceoverBlock">
+      <label>
+        <input type="checkbox" id="useVoiceover" checked style="margin-right: 8px; vertical-align: middle;">
         Enable Voiceover
       </label>
+      <div id="voFields" class="row" style="margin-top:1rem;">
         <div>
           <label for="voLanguage">🎙 Language</label>
           <select id="voLanguage">
           </select>
         </div>
       </div>
+      <div class="form-section">
+        <label for="voScript">📝 Voiceover Script (optional)</label>
+        <textarea id="voScript" rows="3" placeholder="Write your VO script here... or leave empty to generate later"></textarea>
+      </div>
     </div>
     <div class="row">
       </div>
     </div>
+    <div class="form-section">
       <label for="negativePrompt">🚫 Negative Prompt (Exclude Things)</label>
       <textarea id="negativePrompt" rows="3" placeholder="e.g., no logos, no text overlays, no watermark, no extra limbs"></textarea>
       <div class="note">Tip: Keep negatives short and specific for best results.</div>
       };
     }
+    function updateLookUiVisibility() {
+      const type = $("characterType")?.value;
+      const usePreset = $("useLookPreset")?.checked;
+      const showBlock = usePreset && !isProduct(type);
+      const showHeadCover = showBlock && isFemaleChar(type);
+      if ($("lookPresetFields")) $("lookPresetFields").style.display = showBlock ? "grid" : "none";
+      if ($("headCoverWrap")) $("headCoverWrap").style.display = showHeadCover ? "block" : "none";
+    }
     function updateVoUiVisibility(){
       const enabled = $("useVoiceover")?.checked;
       if($("voFields")) $("voFields").style.display = enabled ? "grid" : "none";
+      const voScriptParent = $("voScript")?.parentElement;
+      if(voScriptParent) voScriptParent.style.display = enabled ? "block" : "none";
     }
     function handleTaskFocusChange() {
       const selected = $("taskFocus").value;
       $("customTaskWrapper").style.display = selected === "custom" ? "block" : "none";
         voice: $("voGender")?.value,
         tone: $("voTone")?.value,
         pace: $("voPace")?.value,
+        script: ($("voScript")?.value || "").trim()
       };
       const prompt = {
     async function copyToClipboard() {
       const text = $("output").textContent || "";
+      if (!text.trim() || text.trim() === "{}") { showToast("Nothing to copy yet"); return; }
       try {
         await navigator.clipboard.writeText(text);
         showToast("✅ Prompt copied to clipboard!");
     function showToast(msg) {
       const t = $("toast");
       t.textContent = msg; t.classList.add('show');
+      setTimeout(() => t.classList.remove('show'), 2000);
+    }
+    // --- Initialize & Attach Listeners ---
+    document.addEventListener('DOMContentLoaded', () => {
+        $("taskFocus").addEventListener('change', handleTaskFocusChange);
+        $("characterType").addEventListener('change', updateLookUiVisibility);
+        $("useLookPreset").addEventListener('change', updateLookUiVisibility);
+        $("useVoiceover").addEventListener('change', updateVoUiVisibility);
+        // Initial UI setup
+        handleTaskFocusChange();
+        updateLookUiVisibility();
+        updateVoUiVisibility();
+        // Generate a starter prompt on page load
+        generatePrompt();
+    });
   </script>
 </body>
+</html>