Spaces:
Running
Running
| <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CapCut Flow Wizard</title> | |
| <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎬</text></svg>"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 50: '#eef2ff', | |
| 100: '#e0e7ff', | |
| 200: '#c7d2fe', | |
| 300: '#a5b4fc', | |
| 400: '#818cf8', | |
| 500: '#6366f1', // Indigo-500 (Primary) | |
| 600: '#4f46e5', | |
| 700: '#4338ca', | |
| 800: '#3730a3', | |
| 900: '#312e81', | |
| }, | |
| secondary: { | |
| 50: '#fdf2f8', | |
| 100: '#fce7f3', | |
| 200: '#fbcfe8', | |
| 300: '#f9a8d4', | |
| 400: '#f472b6', | |
| 500: '#ec4899', // Pink-500 (Secondary) | |
| 600: '#db2777', | |
| 700: '#be185d', | |
| 800: '#9d174d', | |
| 900: '#831843', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=JetBrains+Mono:wght@400;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #0f172a; /* Slate 900 */ | |
| color: #f8fafc; /* Slate 50 */ | |
| } | |
| .mono-font { | |
| font-family: 'JetBrains Mono', monospace; | |
| } | |
| /* Custom Scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #1e293b; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #475569; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #6366f1; | |
| } | |
| .glass-panel { | |
| background: rgba(30, 41, 59, 0.7); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| border: 1px solid rgba(255, 255, 255, 0.05); | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen flex flex-col"> | |
| <!-- Navbar Component --> | |
| <custom-navbar></custom-navbar> | |
| <!-- Main Content --> | |
| <main class="flex-grow container mx-auto px-4 py-8"> | |
| <header class="mb-8 text-center"> | |
| <h1 class="text-4xl md:text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary-400 to-secondary-400 mb-4"> | |
| Script Alignment Specialist | |
| </h1> | |
| <p class="text-slate-400 max-w-2xl mx-auto text-lg"> | |
| Transform your raw scripts or audio files into "breathable" SRT blocks optimized for CapCut. | |
| Zero-error line breaks, strict character limits, and natural rhythm. | |
| </p> | |
| </header> | |
| <!-- Mode Toggle --> | |
| <div class="flex justify-center mb-8"> | |
| <div class="glass-panel p-1 rounded-xl inline-flex"> | |
| <button id="mode-text" class="px-6 py-2 rounded-lg text-sm font-semibold transition-all bg-slate-700 text-white shadow-md"> | |
| Text Input | |
| </button> | |
| <button id="mode-audio" class="px-6 py-2 rounded-lg text-sm font-semibold transition-all text-slate-400 hover:text-white"> | |
| Audio Transcribe | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Audio Input Section (Hidden by default) --> | |
| <section id="audio-section" class="hidden mb-8 glass-panel rounded-2xl p-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label class="block text-sm font-medium text-slate-300 mb-2">OpenAI API Key</label> | |
| <input type="password" id="api-key" placeholder="sk-..." | |
| class="w-full bg-slate-900 border border-slate-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-primary-500 transition-colors"> | |
| <p class="text-xs text-slate-500 mt-2">Required for Whisper transcription. Your key is used locally and not stored.</p> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-slate-300 mb-2">Upload Audio/Video</label> | |
| <div class="relative border-2 border-dashed border-slate-700 rounded-lg p-4 hover:border-primary-500 transition-colors cursor-pointer bg-slate-900/50"> | |
| <input type="file" id="audio-file" accept="audio/*,video/*" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer"> | |
| <div class="text-center"> | |
| <i data-feather="mic" class="w-8 h-8 mx-auto text-slate-500 mb-2"></i> | |
| <p class="text-sm text-slate-400" id="file-label">Click or drag audio file here</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-end"> | |
| <button id="transcribe-btn" class="bg-primary-600 hover:bg-primary-500 text-white px-8 py-3 rounded-xl font-semibold shadow-lg flex items-center gap-2 transition-all disabled:opacity-50 disabled:cursor-not-allowed"> | |
| <i data-feather="zap" class="w-5 h-5"></i> Transcribe & Process | |
| </button> | |
| </div> | |
| <div id="transcribing-status" class="hidden mt-4"> | |
| <div class="flex items-center gap-3 text-primary-400"> | |
| <i data-feather="loader" class="animate-spin w-5 h-5"></i> | |
| <span class="text-sm">Transcribing audio... this may take a moment.</span> | |
| </div> | |
| </div> | |
| </section> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 h-full"> | |
| <!-- Input Section --> | |
| <section class="flex flex-col gap-4"> | |
| <div class="flex justify-between items-center glass-panel p-4 rounded-t-xl border-b-2 border-primary-500"> | |
| <div class="flex items-center gap-2"> | |
| <i data-feather="file-text" class="text-primary-400"></i> | |
| <h2 class="font-semibold text-lg">Raw Script</h2> | |
| </div> | |
| <button id="clear-btn" class="text-xs text-slate-400 hover:text-white transition-colors flex items-center gap-1"> | |
| <i data-feather="trash-2" class="w-3 h-3"></i> Clear | |
| </button> | |
| </div> | |
| <div class="glass-panel rounded-b-xl p-1 flex-grow relative group"> | |
| <textarea id="input-text" | |
| class="w-full h-96 lg:h-[500px] bg-slate-900/50 text-slate-200 p-4 rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-primary-500 mono-font text-sm leading-relaxed" | |
| placeholder="Paste your script here (PT-BR, EN, ES)..."></textarea> | |
| <div class="absolute bottom-4 right-4 text-xs text-slate-500 pointer-events-none group-hover:text-slate-400 transition-colors"> | |
| Support: PT, EN, ES | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Controls --> | |
| <div class="hidden lg:flex flex-col justify-center items-center gap-4"> | |
| <button id="process-btn" class="w-16 h-16 rounded-full bg-gradient-to-br from-primary-500 to-secondary-600 hover:scale-110 active:scale-95 transition-all shadow-[0_0_20px_rgba(99,102,241,0.5)] flex items-center justify-center text-white group"> | |
| <i data-feather="arrow-right" class="w-8 h-8 group-hover:translate-x-1 transition-transform"></i> | |
| </button> | |
| <span class="text-xs uppercase tracking-widest text-primary-400 font-semibold">Process</span> | |
| </div> | |
| <!-- Mobile Process Button --> | |
| <div class="lg:hidden flex justify-center mb-4"> | |
| <button id="process-btn-mobile" class="w-full py-4 rounded-xl bg-gradient-to-r from-primary-600 to-secondary-600 hover:from-primary-500 hover:to-secondary-500 text-white font-bold shadow-lg flex items-center justify-center gap-2"> | |
| <i data-feather="zap"></i> Process Script | |
| </button> | |
| </div> | |
| <!-- Output Section --> | |
| <section class="flex flex-col gap-4"> | |
| <div class="flex justify-between items-center glass-panel p-4 rounded-t-xl border-b-2 border-secondary-500"> | |
| <div class="flex items-center gap-2"> | |
| <i data-feather="check-circle" class="text-secondary-400"></i> | |
| <h2 class="font-semibold text-lg">Aligned Result</h2> | |
| </div> | |
| <div class="flex gap-2"> | |
| <button id="copy-btn" class="text-xs bg-slate-800 hover:bg-slate-700 text-white px-3 py-1 rounded flex items-center gap-1 transition-colors"> | |
| <i data-feather="copy" class="w-3 h-3"></i> Copy | |
| </button> | |
| <button id="download-srt-btn" class="hidden text-xs bg-primary-600 hover:bg-primary-500 text-white px-3 py-1 rounded flex items-center gap-1 transition-colors"> | |
| <i data-feather="download" class="w-3 h-3"></i> .SRT | |
| </button> | |
| </div> | |
| </div> | |
| <div class="glass-panel rounded-b-xl p-1 flex-grow relative"> | |
| <textarea id="output-text" readonly | |
| class="w-full h-96 lg:h-[500px] bg-slate-900/50 text-primary-200 p-4 rounded-lg resize-none focus:outline-none mono-font text-sm leading-relaxed" | |
| placeholder="Processed blocks will appear here..."></textarea> | |
| <!-- Stats Overlay --> | |
| <div class="absolute bottom-4 left-4 flex gap-4 text-xs"> | |
| <div class="bg-slate-800/80 px-3 py-1 rounded-full text-slate-300 backdrop-blur-sm"> | |
| Blocks: <span id="block-count" class="text-white font-bold">0</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| <!-- Rules Reference --> | |
| <div class="mt-12 glass-panel rounded-xl p-6"> | |
| <h3 class="text-lg font-semibold mb-4 flex items-center gap-2 text-slate-200"> | |
| <i data-feather="info" class="w-5 h-5 text-primary-400"></i> Logic Applied | |
| </h3> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-sm text-slate-400"> | |
| <div> | |
| <strong class="text-white block mb-1">1. Character Limits</strong> | |
| Max 11 chars per block (excluding spaces). Single words are exempt from the 11-char limit but subject to other rules. | |
| </div> | |
| <div> | |
| <strong class="text-white block mb-1">2. Anti-Weakening</strong> | |
| Blocks never end with short words (≤3 letters) or "Tabu" words (articles, prepositions like 'de', 'the', 'el'). | |
| </div> | |
| <div> | |
| <strong class="text-white block mb-1">3. Punctuation & Flow</strong> | |
| Commas become exclamation marks (!). Splits happen at !, ?, .. Connectives (E, QUE, AND) start new lines. | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer Component --> | |
| <custom-footer></custom-footer> | |
| <!-- Scripts --> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="script.js"></script> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |