Spaces:

Nuzwa
/

_Veo3_JSON_Prompt_Generator_Pro_

Running

App Files Files Community

Nuzwa commited on Aug 25, 2025

Commit

e466d93

verified ·

1 Parent(s): 25c540a

Update index.html

Browse files

Files changed (1) hide show

index.html +183 -121

index.html CHANGED Viewed

@@ -1,139 +1,201 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>CoachProAI - Cinematic Prompt Generator (Pro)</title>
     <style>
-      body {
-        font-family: 'Segoe UI', sans-serif;
-        background: #f9f9fb;
-        color: #111;
-        margin: 0;
-        padding: 0;
-      }
-      .container {
-        max-width: 840px;
-        margin: 0 auto;
-        padding: 2rem;
-      }
-      h1 {
-        font-size: 2rem;
-        font-weight: bold;
-        margin-bottom: 1.5rem;
-      }
-      label {
-        font-weight: 600;
-        display: block;
-        margin-top: 1.2rem;
-      }
-      select, textarea, input {
-        width: 100%;
-        padding: 0.6rem;
-        margin-top: 0.3rem;
-        border-radius: 4px;
-        border: 1px solid #ccc;
-        font-size: 1rem;
-        box-sizing: border-box;
-      }
-      button {
-        background: #2D60E3;
-        color: #fff;
-        border: none;
-        padding: 0.75rem 1.5rem;
-        margin-top: 1.5rem;
-        font-size: 1rem;
-        border-radius: 5px;
-        cursor: pointer;
-      }
-      pre {
-        background: #f0f0f0;
-        padding: 1rem;
-        white-space: pre-wrap;
-        border-radius: 6px;
-        margin-top: 2rem;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="root">
-      <div class="container">
-        <h1>🎬 CoachProAI Prompt Generator <span style="font-size: 0.9rem; font-weight: 400;">(Cinematic Pro Mode)</span></h1>
-        <label>🎯 Select Domain:</label>
-        <select id="domain">
-          <option value="education">Education</option>
-          <option value="ads">Advertisement</option>
-          <option value="product">Product Demo</option>
-          <option value="creator">Creator POV</option>
-        </select>
-        <label>📆 Scene Title / Task Focus:</label>
-        <input id="task" placeholder="e.g., Lesson Planning, Feedback Automation" />
-        <label>👤 Character Type:</label>
-        <select id="character">
-          <option value="Pakistani Male Teacher">Pakistani Male Teacher</option>
-          <option value="Pakistani Female Teacher">Pakistani Female Teacher</option>
-          <option value="South Asian Coach">South Asian Coach</option>
-          <option value="Young Creator (Female)">Young Creator (Female)</option>
-          <option value="Young Creator (Male)">Young Creator (Male)</option>
-        </select>
-        <label>🎥 Shot & Camera Composition:</label>
-        <input id="camera" placeholder="e.g., Medium shot, 35mm lens, dolly-in" />
-        <label>📹 Visual Scene Description:</label>
-        <textarea id="scene" rows="3" placeholder="e.g., teacher walks into bright classroom with sun flares"></textarea>
-        <label>💡 Lighting & Mood:</label>
-        <input id="lighting" placeholder="e.g., warm morning → neutral daylight with rim light" />
-        <label>🎞️ Props & Visual Details:</label>
-        <textarea id="props" rows="2" placeholder="e.g., chalkboard, sticky notes, glowing GPT orb"></textarea>
-        <label>🎵 Background Soundscape / Music:</label>
-        <input id="audio" placeholder="e.g., soft piano with ticking clock SFX, chill synth layer" />
-        <label>🔍 Visual Color Theme:</label>
-        <input id="colors" placeholder="e.g., cobalt, soft amber, charcoal accents" />
-        <label>🎙️ Voiceover (English):</label>
-        <textarea id="voEnglish" rows="3" placeholder="e.g., What if lesson prep only took 30 seconds?"></textarea>
-        <label>🌞 Voiceover (Roman Urdu):</label>
-        <textarea id="voRoman" rows="3" placeholder="e.g., Sochiye agar lesson planning sirf 30 seconds mein ho jaye?"></textarea>
-        <button onclick="generatePrompt()">🚀 Generate Prompt</button>
-        <pre id="output"></pre>
-      </div>
-    </div>
-    <script>
-      function generatePrompt() {
-        const prompt = {
-          title: document.getElementById("task").value + " Cinematic Video",
-          brand: "CoachProAI",
-          aspect_ratio: "16:9",
-          style: "cinematic",
-          domain: document.getElementById("domain").value,
-          character: document.getElementById("character").value,
-          camera: document.getElementById("camera").value,
-          scene: document.getElementById("scene").value,
-          lighting: document.getElementById("lighting").value,
-          props: document.getElementById("props").value,
-          audio: document.getElementById("audio").value,
-          colors: document.getElementById("colors").value,
-          voiceover: {
-            english: document.getElementById("voEnglish").value,
-            roman_urdu: document.getElementById("voRoman").value
-          },
-          keywords: ["cinematic", "coachproai", "consistent character", "16:9"]
-        };
-        document.getElementById("output").textContent = JSON.stringify(prompt, null, 2);
-      }
-    </script>
-  </body>
-</html>

 <!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>
+    <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 {
+            font-family: 'Poppins', sans-serif;
+            background-color: var(--background-color);
+            color: var(--text-color);
+            margin: 0;
+            padding: 1rem;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+        }
+        .container {
+            width: 100%;
+            max-width: 700px;
+            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.5rem;
+            }
+        }
+        h1 {
+            font-size: 2rem;
+            font-weight: 700;
+            margin-bottom: 2rem;
+            text-align: center;
+            background: linear-gradient(90deg, var(--primary-color-start), var(--primary-color-end));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        label {
+            font-weight: 600;
+            display: block;
+            margin-top: 1.5rem;
+            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: 8px;
+            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 {
+            outline: none;
+            border-color: var(--primary-color-start);
+            box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
+            background-color: #fff;
+        }
+        button {
+            background-image: linear-gradient(90deg, var(--primary-color-start), var(--primary-color-end));
+            color: #fff;
+            border: none;
+            padding: 0.9rem 1.5rem;
+            margin-top: 2.5rem;
+            font-size: 1.1rem;
+            font-weight: 600;
+            font-family: 'Poppins', sans-serif;
+            border-radius: 8px;
+            cursor: pointer;
+            width: 100%;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+        }
+        button:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 7px 20px rgba(0, 0, 0, 0.15);
+        }
+        pre {
+            background: #282c34;
+            color: #abb2bf;
+            padding: 1.5rem;
+            white-space: pre-wrap;
+            word-wrap: break-word;
+            border-radius: 8px;
+            margin-top: 2rem;
+            font-family: 'Courier New', Courier, monospace;
+            font-size: 0.95rem;
+            line-height: 1.6;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>🎬 Veo3 JSON Prompt Generator <span style="font-size: 1rem; font-weight: 400;">(Pro)</span></h1>
+        <label for="domain">🎯 Select Domain:</label>
+        <select id="domain">
+            <option value="education">Education</option>
+            <option value="advertisement">Advertisement</option>
+            <option value="product_demo">Product Demo</option>
+            <option value="creator_pov">Creator POV</option>
+        </select>
+        <label for="characterType">🎭 Character / Product:</label>
+        <select id="characterType">
+            <optgroup label="Characters">
+                <option value="Pakistani Male">Pakistani Male</option>
+                <option value="Pakistani Female">Pakistani Female</option>
+                <option value="Arab Male">Arab Male</option>
+                <option value="Arab Female">Arab Female</option>
+                <option value="South Asian Coach">South Asian Coach</option>
+                <option value="Young Creator (Female)">Young Creator (Female)</option>
+                <option value="Young Creator (Male)">Young Creator (Male)</option>
+            </optgroup>
+            <optgroup label="Products">
+                <option value="Smartphone">Smartphone</option>
+                <option value="Perfume">Perfume</option>
+                <option value="Luxury Car">Luxury Car</option>
+                <option value="Skincare Product">Skincare Product</option>
+            </optgroup>
+            <option value="custom">🛠️ Custom Character or Product</option>
+        </select>
+        <label for="taskFocus">📆 Scene Title / Task Focus:</label>
+        <select id="taskFocus" onchange="handleTaskFocusChange()">
+            <option value="Lesson Planning">Lesson Planning</option>
+            <option value="Quiz Generator">Quiz Generator</option>
+            <option value="Feedback Automation">Feedback Automation</option>
+            <option value="Product Reveal">Product Reveal</option>
+            <option value="How It Works">How It Works</option>
+            <option value="From Chaos to Clarity">From Chaos to Clarity</option>
+            <option value="Before vs. After">Before vs. After</option>
+            <option value="Transformation Moment">Transformation Moment</option>
+            <option value="A Day in the Life">A Day in the Life</option>
+            <option value="Problem → Solution">Problem → Solution</option>
+            <option value="Behind the Scenes">Behind the Scenes</option>
+            <option value="AI to the Rescue">AI to the Rescue</option>
+            <option value="Time-Saver Workflow">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>
+        <label for="variant">🎞️ Video Type / Variant:</label>
+        <select id="variant">
+            <option value="cinematic">🎬 Cinematic</option>
+            <option value="POV">📸 POV</option>
+            <option value="meme">😂 Meme</option>
+            <option value="teaser">🎯 Teaser</option>
+            <option value="tutorial">📚 Tutorial</option>
+            <option value="BTS/documentary">🎥 Behind the Scenes</option>
+            <option value="montage">🌀 Montage</option>
+            <option value="product-hero">💡 Product Hero</option>
+            <option value="ASMR">🔊 ASMR</option>
+            <option value="drone-flythrough">🚁 Drone Flythrough</option>
+            <option value="timelapse">⏳ Timelapse</option>
+            <option value="kinetic-typography">🔠 Kinetic Typography</option>
+            <option value="stop-motion">🎞️ Stop Motion</option>
+            <option value="comedy-sketch">🤣 Comedy Sketch</option>
+            <option value="custom">✍️ Custom Variant</option>
+        </select>
+        <label for="aspectRatio">🖼️ Aspect Ratio:</label>
+        <select id="aspectRatio">
+            <option value="16:9">16:9 (Landscape)</option>
+            <option value="9:16">9:16 (Vertical)</option>
+            <option value="1:1">1:1 (Square