Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ShortForge AI – Générateur</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| </head> | |
| <body class="bg-gray-900 text-gray-100"> | |
| <custom-navbar></custom-navbar> | |
| <main class="container mx-auto px-4 py-8 grid md:grid-cols-2 gap-6"> | |
| <!-- Left: Editor --> | |
| <section class="bg-gray-800 rounded-xl p-6 space-y-6"> | |
| <h2 class="text-2xl font-bold">Éditeur</h2> | |
| <!-- Input --> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Texte ou URL Reddit</label> | |
| <textarea id="scriptInput" rows="5" placeholder="Copiez votre script ici…" class="w-full px-3 py-2 bg-gray-900 border border-gray-700 rounded-lg text-gray-100"></textarea> | |
| <div class="mt-2 flex gap-2"> | |
| <button id="loadTxt" class="text-xs px-3 py-1 bg-gray-700 rounded hover:bg-gray-600">Importer .txt</button> | |
| <button id="loadReddit" class="text-xs px-3 py-1 bg-gray-700 rounded hover:bg-gray-600">Coller URL Reddit</button> | |
| </div> | |
| </div> | |
| <!-- Voice --> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Voix</label> | |
| <select id="voiceSelect" class="w-full px-3 py-2 bg-gray-900 border border-gray-700 rounded-lg"> | |
| <option value="fr-lea">Lea – Français</option> | |
| <option value="fr-remy">Rémy – Français</option> | |
| <option value="en-bella">Bella – US Female</option> | |
| <option value="en-mat">Mat – US Male</option> | |
| </select> | |
| <div id="voiceDesc" class="mt-2 text-xs text-gray-400"></div> | |
| </div> | |
| <!-- Template --> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Template</label> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <button class="template-btn active" data-template="narration">Narration</button> | |
| <button class="template-btn" data-template="reddit">Reddit Story</button> | |
| <button class="template-btn" data-template="educatif">Educatif</button> | |
| <button class="template-btn" data-template="top5">Top 5</button> | |
| </div> | |
| <div id="templateDesc" class="mt-2 text-xs text-gray-400"></div> | |
| </div> | |
| <!-- Background --> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Fond</label> | |
| <select id="bgSelect" class="w-full px-3 py-2 bg-gray-900 border border-gray-700 rounded-lg"> | |
| <option value="gameplay1">Gameplay 1</option> | |
| <option value="gameplay2">Gameplay 2</option> | |
| <option value="abstract1">Abstract 1</option> | |
| <option value="abstract2">Abstract 2</option> | |
| <option value="upload">➕ Upload</option> | |
| </select> | |
| <input type="file" id="bgUpload" accept="image/*,video/*" class="hidden"> | |
| </div> | |
| <!-- Music --> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Musique</label> | |
| <select id="musicSelect" class="w-full px-3 py-2 bg-gray-900 border border-gray-700 rounded-lg"> | |
| <option value="none">Aucune</option> | |
| <option value="lofi1">Lo-Fi Chill</option> | |
| <option value="upbeat1">Upbeat Pop</option> | |
| <option value="ambient1">Ambient</option> | |
| </select> | |
| </div> | |
| <!-- Generate --> | |
| <button id="generateBtn" class="w-full py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-lg hover:from-blue-600 hover:to-purple-700 transition-all"> | |
| Générer la vidéo | |
| </button> | |
| <!-- Quick History --> | |
| <div id="quickHistory" class="hidden"> | |
| <label class="block text-sm font-medium mb-2">Historique rapide</label> | |
| <div id="historyList" class="space-y-2 max-h-32 overflow-auto"></div> | |
| </div> | |
| </section> | |
| <!-- Right: Preview --> | |
| <section class="bg-gray-800 rounded-xl p-6 flex flex-col items-center justify-center"> | |
| <h2 class="text-2xl font-bold mb-4">Aperçu</h2> | |
| <div id="previewPlayer" class="w-full max-w-xs aspect-[9/16] bg-black rounded-xl overflow-hidden hidden"> | |
| <video id="previewVideo" class="w-full h-full object-cover" controls></video> | |
| </div> | |
| <div id="previewPlaceholder" class="text-gray-400 text-center"> | |
| <i data-feather="video" class="w-16 h-16 mx-auto mb-2"></i> | |
| <p>Aperçu en attente</p> | |
| </div> | |
| <a id="downloadBtn" class="mt-6 hidden px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-all"> | |
| Télécharger MP4 | |
| </a> | |
| </section> | |
| </main> | |
| <custom-footer></custom-footer> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="app.js"></script> | |
| <script>feather.replace();</script> | |
| </body> | |
| </html> |