| <!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>
|
|
|
