| <!DOCTYPE html> |
| <html lang="fr" class="dark"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>VoxiAI</title> |
| <link rel="icon" type="image/png" href="/static/logo.png"> |
| <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"> |
| <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=Syne:wght@700;800&display=swap" rel="stylesheet"> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { brand: '#f59e0b', dark: '#050505' }, |
| fontFamily: { sans: ['Plus Jakarta Sans', 'sans-serif'], display: ['Syne', 'sans-serif'] } |
| } |
| } |
| } |
| </script> |
| <style> |
| body { background-color: #050505; color: #e5e5e5; min-height: 100vh; } |
| .glass { background: rgba(15, 15, 15, 0.7); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.08); } |
| |
| |
| @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } |
| .spinner { animation: spin 1s linear infinite; } |
| |
| |
| .step-item { transition: all 0.5s ease; } |
| .step-pending { opacity: 0.3; filter: grayscale(1); } |
| .step-active { opacity: 1; transform: scale(1.02); } |
| .step-done { opacity: 1; color: #f59e0b; } |
| |
| .bg-mesh { |
| position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; |
| background: radial-gradient(circle at 50% -20%, #2b1d03 0%, #050505 60%); |
| } |
| |
| .fade-in { animation: fadeIn 0.5s ease-out forwards; } |
| @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } |
| |
| @keyframes glow { |
| 0%, 100% { text-shadow: 0 0 5px rgba(245, 158, 11, 0.3); } |
| 50% { text-shadow: 0 0 15px rgba(245, 158, 11, 0.6); } |
| } |
| .name-glow { animation: glow 3s infinite; } |
| </style> |
| </head> |
| <body class="min-h-screen flex flex-col items-center justify-center p-6 font-sans"> |
| <div class="bg-mesh"></div> |
|
|
| <header class="mb-8 md:mb-12 text-center fade-in"> |
| <div class="flex items-center justify-center gap-3 mb-4"> |
| <div class="w-12 h-12 overflow-hidden rounded-xl shadow-lg shadow-brand/20"> |
| <img src="/static/logo.png" alt="VoxiAI Logo" class="w-full h-full object-cover"> |
| </div> |
| <h1 class="font-display text-3xl tracking-tight">Voxi<span class="text-brand">AI</span></h1> |
| </div><br> |
| <p class="text-gray-400 text-sm md:text-base max-w-xs mx-auto leading-relaxed"> |
| Transformez vos vidéos en contenus viraux avec des sous-titres <span class="text-brand font-semibold">dynamiques</span>. |
| </p><br> |
| </header> |
|
|
| <main class="w-full max-w-lg relative"> |
| |
| <div id="feedback-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center p-6 bg-black/80 backdrop-blur-sm"> |
| <div class="glass max-w-md w-full rounded-[2.5rem] p-8 md:p-10 fade-in relative"> |
| <button onclick="closeFeedback()" class="absolute top-6 right-6 text-gray-500 hover:text-white transition-colors"> |
| <i class="fas fa-times text-xl"></i> |
| </button> |
| <div class="text-center mb-8"> |
| <div class="w-16 h-16 bg-brand/20 rounded-2xl flex items-center justify-center mx-auto mb-4"> |
| <i class="fas fa-comment-dots text-2xl text-brand"></i> |
| </div> |
| <h2 class="text-2xl font-bold mb-2">Votre avis compte !</h2> |
| <p class="text-gray-400 text-sm">C'est un outil de test, vos retours nous aident à nous améliorer.</p> |
| </div> |
|
|
| <div class="space-y-6"> |
| <div> |
| <p class="text-center mb-4 font-semibold">Appréciez-vous l'outil ?</p> |
| <div class="flex justify-center gap-4"> |
| <button onclick="setRating(event, 'Oui')" class="rating-btn flex-1 py-3 rounded-xl border border-white/10 hover:border-brand/50 transition-all flex items-center justify-center gap-2"> |
| <i class="fas fa-thumbs-up text-green-500"></i> Oui |
| </button> |
| <button onclick="setRating(event, 'Non')" class="rating-btn flex-1 py-3 rounded-xl border border-white/10 hover:border-brand/50 transition-all flex items-center justify-center gap-2"> |
| <i class="fas fa-thumbs-down text-red-500"></i> Non |
| </button> |
| </div> |
| </div> |
|
|
| <div class="space-y-2"> |
| <label class="text-xs uppercase tracking-widest text-gray-500 font-bold">Feedback détaillé</label> |
| <textarea id="feedback-text" rows="3" class="w-full bg-white/5 border border-white/10 rounded-2xl p-4 focus:outline-none focus:border-brand/50 transition-all text-sm" placeholder="Dites-nous ce qu'on peut améliorer..."></textarea> |
| </div> |
|
|
| <button id="submit-feedback" onclick="sendFeedback()" class="w-full bg-brand text-black font-bold py-4 rounded-2xl shadow-xl shadow-brand/10 transition-all hover:scale-[1.02]"> |
| Envoyer le feedback |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="upload-state" class="glass rounded-[2rem] md:rounded-[2.5rem] p-8 md:p-12 text-center transition-all group"> |
| <div id="drop-zone" class="cursor-pointer"> |
| <div class="w-16 h-16 md:w-20 md:h-20 bg-brand/10 rounded-2xl md:rounded-3xl flex items-center justify-center mx-auto mb-6 md:mb-8 group-hover:scale-110 transition-transform duration-500"> |
| <i class="fas fa-cloud-upload-alt text-2xl md:text-3xl text-brand"></i> |
| </div> |
| <h2 class="text-xl md:text-2xl font-bold mb-2 md:mb-3 italic">Démarrez le projet</h2> |
| <p class="text-sm md:text-base text-gray-400 mb-8 md:mb-10 leading-relaxed">Sélectionner votre vidéo pour lancer le moteur VoxiAI.</p> |
| <input type="file" id="file-input" class="hidden" accept="video/*"> |
| <button onclick="document.getElementById('file-input').click()" class="w-full sm:w-auto bg-brand hover:bg-brand-600 text-black font-bold py-4 px-12 rounded-2xl transition-all shadow-xl shadow-brand/10"> |
| Sélectionner |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div id="loading-state" class="hidden glass rounded-[2rem] md:rounded-[2.5rem] p-6 md:p-10 space-y-6 md:space-y-8 fade-in"> |
| <h2 class="text-center font-display text-lg md:text-xl mb-4 md:mb-6">Traitement en cours...</h2> |
|
|
| <div class="space-y-6"> |
| |
| <div id="step-1" class="step-item flex items-center justify-between p-4 rounded-2xl bg-white/5 border border-white/5"> |
| <div class="flex items-center gap-4"> |
| <div class="status-icon w-10 h-10 flex items-center justify-center"> |
| <i class="fas fa-circle-notch spinner text-brand text-xl"></i> |
| </div> |
| <div> |
| <p class="font-bold text-sm">Transfert Sécurisé</p> |
| <p class="text-[10px] text-gray-500 uppercase tracking-widest">Étape 1/3</p> |
| </div> |
| </div> |
| <span class="step-percent font-display text-brand">0%</span> |
| </div> |
|
|
| |
| <div id="step-2" class="step-item step-pending flex items-center justify-between p-4 rounded-2xl bg-white/5 border border-white/5"> |
| <div class="flex items-center gap-4"> |
| <div class="status-icon w-10 h-10 flex items-center justify-center text-gray-600"> |
| <i class="fas fa-brain text-xl"></i> |
| </div> |
| <div> |
| <p class="font-bold text-sm italic">Analyse & Correction IA</p> |
| <p class="text-[10px] text-gray-500 uppercase tracking-widest">Étape 2/3</p> |
| </div> |
| </div> |
| <span class="step-percent font-display">0%</span> |
| </div> |
|
|
| |
| <div id="step-3" class="step-item step-pending flex items-center justify-between p-4 rounded-2xl bg-white/5 border border-white/5"> |
| <div class="flex items-center gap-4"> |
| <div class="status-icon w-10 h-10 flex items-center justify-center text-gray-600"> |
| <i class="fas fa-film text-xl"></i> |
| </div> |
| <div> |
| <p class="font-bold text-sm">Finalisation du Rendu</p> |
| <p class="text-[10px] text-gray-500 uppercase tracking-widest">Étape 3/3</p> |
| </div> |
| </div> |
| <span class="step-percent font-display">0%</span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="result-state" class="hidden space-y-4 md:space-y-6 fade-in"> |
| <div class="glass rounded-[2rem] md:rounded-[2.5rem] p-2 md:p-4 border-brand/20"> |
| <video id="final-video" controls class="w-full rounded-[1.5rem] md:rounded-[1.8rem] bg-black shadow-2xl max-h-[70vh] object-contain"></video> |
| </div> |
| <div class="flex flex-col sm:flex-row gap-4"> |
| <a id="download-btn" href="#" download class="flex-1 bg-brand hover:bg-brand-600 text-black font-bold py-5 rounded-2xl text-center shadow-lg transition-all flex items-center justify-center gap-3"> |
| <i class="fas fa-download"></i> Télécharger |
| </a> |
| <button onclick="window.location.reload()" class="px-8 py-5 rounded-2xl glass hover:bg-white/5 transition-all font-semibold flex items-center justify-center gap-3"> |
| <i class="fas fa-plus"></i> Nouveau |
| </button> |
| </div> |
| </div> |
| </main> |
|
|
| <script src="/static/script.js"></script> |
| |
| <button onclick="openFeedback()" class="fixed bottom-6 right-6 w-14 h-14 bg-brand text-black rounded-full shadow-2xl flex items-center justify-center hover:scale-110 transition-all z-40 group"> |
| <i class="fas fa-comment-alt text-xl"></i> |
| <span class="absolute right-full mr-4 px-4 py-2 bg-black/80 backdrop-blur glass rounded-xl text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">Un retour ?</span> |
| </button><br><br> |
|
|
| <footer class="mt-auto py-8 text-center text-gray-500 text-sm"> |
| Ce site a été fait par <a href="https://www.linkedin.com/in/bessanh-shadrak-744049287/" target="_blank" class="text-brand font-semibold hover:underline name-glow">Shadrak BESSANH</a> |
| </footer> |
| </body> |
| </html> |
|
|
