Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ScriptForge - TikTok Script Writer</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .step-indicator { | |
| width: 30px; | |
| height: 30px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 50%; | |
| font-weight: bold; | |
| transition: all 0.3s ease; | |
| } | |
| .step-active { | |
| background-color: #6366f1; | |
| color: white; | |
| } | |
| .step-completed { | |
| background-color: #10b981; | |
| color: white; | |
| } | |
| .step-inactive { | |
| background-color: #e5e7eb; | |
| color: #6b7280; | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.5s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .textarea-autosize { | |
| min-height: 100px; | |
| resize: none; | |
| overflow-y: hidden; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <div class="min-h-screen flex flex-col"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm py-4"> | |
| <div class="container mx-auto px-4 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-film text-indigo-600 text-2xl mr-3"></i> | |
| <h1 class="text-xl font-bold text-gray-800">ScriptForge</h1> | |
| </div> | |
| <button id="exportBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md hidden"> | |
| <i class="fas fa-download mr-2"></i>Export Script | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="flex-grow container mx-auto px-4 py-8"> | |
| <div class="max-w-3xl mx-auto bg-white rounded-xl shadow-md overflow-hidden"> | |
| <!-- Progress Steps --> | |
| <div class="p-6 border-b"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <div class="flex items-center"> | |
| <div id="step1" class="step-indicator step-active">1</div> | |
| <div class="h-1 w-16 mx-2 bg-indigo-200"></div> | |
| <div id="step2" class="step-indicator step-inactive">2</div> | |
| <div class="h-1 w-16 mx-2 bg-gray-200"></div> | |
| <div id="step3" class="step-indicator step-inactive">3</div> | |
| <div class="h-1 w-16 mx-2 bg-gray-200"></div> | |
| <div id="step4" class="step-indicator step-inactive">4</div> | |
| <div class="h-1 w-16 mx-2 bg-gray-200"></div> | |
| <div id="step5" class="step-indicator step-inactive">5</div> | |
| </div> | |
| <span id="stepTitle" class="text-sm font-medium text-indigo-600">Define Purpose & Audience</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div id="progressBar" class="bg-indigo-600 h-2 rounded-full" style="width: 20%"></div> | |
| </div> | |
| </div> | |
| <!-- Step Content --> | |
| <div class="p-6"> | |
| <!-- Step 1: Define Purpose & Audience --> | |
| <div id="step1Content" class="fade-in"> | |
| <h2 class="text-xl font-bold text-gray-800 mb-4">What's your video about?</h2> | |
| <p class="text-gray-600 mb-6">Start by defining your video's purpose and target audience. This will help craft a script that resonates.</p> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 font-medium mb-2">Video Purpose</label> | |
| <select id="purposeSelect" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500"> | |
| <option value="">Select a purpose</option> | |
| <option value="educate">Educate/Teach</option> | |
| <option value="entertain">Entertain</option> | |
| <option value="inspire">Inspire/Motivate</option> | |
| <option value="sell">Sell Product/Service</option> | |
| <option value="story">Tell a Story</option> | |
| <option value="trend">Participate in Trend</option> | |
| </select> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 font-medium mb-2">Target Audience</label> | |
| <input id="audienceInput" type="text" placeholder="e.g., Teenagers interested in fashion, Young professionals learning to cook" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500"> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 font-medium mb-2">Key Message (What should viewers remember?)</label> | |
| <textarea id="messageInput" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500 textarea-autosize" placeholder="The one thing you want viewers to take away..."></textarea> | |
| </div> | |
| <div class="flex justify-end"> | |
| <button id="nextStep1" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-md"> | |
| Next <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Step 2: Create a Hook --> | |
| <div id="step2Content" class=" | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=lachieandmitch/scriptforge" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |