Hugging Face's logo

Spaces:
kenax69
/
premier-test
Running

App Files Community
premier-test / index.html
kenax69's picture
kenax69
Génère le Dashboard utilisateur - Initial Deployment
150ea8e verified
Raw
History Blame Contribute Delete
37.2 kB
<!DOCTYPE html>
<html lang="fr">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>ViralTikTok Generator | Transform YouTube Videos in One Click</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">
 <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
 <script>
 tailwind.config = {
 theme: {
 extend: {
 colors: {
 primary: '#FF0052',
 secondary: '#6F5AFF',
 dark: '#121212',
 light: '#F8FAFF'
 },
 fontFamily: {
 'sans': ['Poppins', 'sans-serif']
 }
 }
 }
 }
 </script>
 <style>
 body {
 background-color: #0A0A12;
 background-image: radial-gradient(circle at 10% 20%, rgba(48, 46, 77, 0.15) 0%, transparent 40%), radial-gradient(circle at 90% 80%, rgba(111, 90, 255, 0.1) 0%, transparent 40%);
 color: #F0F0F0;
 overflow-x: hidden;
 }
.card-gradient {
 background: linear-gradient(145deg, rgba(26, 26, 39, 0.8) 0%, rgba(18, 18, 28, 0.9) 100%);
 backdrop-filter: blur(10px);
 border: 1px solid rgba(255, 255, 255, 0.08);
 }
.input-gradient {
 background: rgba(30, 30, 45, 0.7);
 border: 1px solid rgba(111, 90, 255, 0.2);
 }
.pulse {
 animation: pulse 2s infinite;
 }
@keyframes pulse {
 0% { box-shadow: 0 0 0 0 rgba(255, 0, 82, 0.7); }
 70% { box-shadow: 0 0 0 12px rgba(255, 0, 82, 0); }
 100% { box-shadow: 0 0 0 0 rgba(255, 0, 82, 0); }
 }
.glow-text {
 text-shadow: 0 0 10px rgba(255, 0, 82, 0.5);
 }
.bg-neon {
 background: linear-gradient(45deg, #FF0052, #6F5AFF);
 }
.feature-card:hover {
 transform: translateY(-8px);
 box-shadow: 0 20px 30px -10px rgba(111, 90, 255, 0.2);
 }
.video-preview {
 aspect-ratio: 9/16;
 background: linear-gradient(-45deg, #181824, #1d1d32);
 border-radius: 24px;
 overflow: hidden;
 position: relative;
 }
.progress-bar {
 height: 4px;
 background: linear-gradient(to right, #FF0052, #6F5AFF);
 animation: progress 3s linear infinite;
 }
@keyframes progress {
 0% { width: 0%; }
 50% { width: 60%; }
 100% { width: 100%; }
 }
.social-proof {
 background: rgba(111, 90, 255, 0.08);
 border: 1px solid rgba(111, 90, 255, 0.15);
 backdrop-filter: blur(5px);
 }
 </style>
</head>
<body class="font-sans antialiased">
 <!-- Navigation -->
 <nav class="flex justify-between items-center py-6 px-4 md:px-12">
 <div class="flex items-center space-x-2">
 <div class="w-10 h-10 rounded-lg bg-gradient-to-r from-primary to-secondary flex items-center justify-center">
 <i class="fas fa-bolt text-white"></i>
 </div>
 <span class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-secondary">ViralTikTok</span>
 </div>
 <div class="hidden md:flex space-x-8">
 <a href="#" class="text-gray-300 hover:text-white transition">Accueil</a>
 <a href="#" class="text-gray-300 hover:text-white transition">Fonctionnalités</a>
 <a href="#" class="text-gray-300 hover:text-white transition">Tarification</a>
 <a href="#" class="text-gray-300 hover:text-white transition">Exemples</a>
 </div>
 <div class="flex items-center space-x-4">
 <button class="hidden md:block px-4 py-2 rounded-lg bg-gray-800 text-gray-300 hover:bg-gray-700 transition">Connexion</button>
 <button class="px-4 py-2 rounded-lg bg-gradient-to-r from-primary to-secondary text-white font-medium">S'inscrire</button>
 </div>
 </nav>
<!-- Hero Section -->
 <section class="max-w-7xl mx-auto px-4 md:px-8 pt-16 pb-24">
 <div class="flex flex-col md:flex-row items-center justify-between">
 <div class="md:w-1/2 mb-16 md:mb-0">
 <h1 class="text-4xl md:text-6xl font-bold mb-6">
 <span class="block">Transformez n'importe quelle</span>
 <span class="block bg-clip-text text-transparent bg-gradient-to-r from-primary to-secondary">vidéo YouTube en contenu TikTok viral</span>
 </h1>
 <p class="text-lg text-gray-300 mb-8">
 En un seul clic, générez des vidéos TikTok captivantes de 60 à 90 secondes qui feront exploser votre audience.
 </p>
<div class="max-w-xl">
 <div class="flex space-x-4 mb-8">
 <div class="bg-primary/10 rounded-lg px-4 py-3 flex items-center">
 <i class="fas fa-bolt text-primary mr-2"></i>
 <span class="text-white font-medium">Algorithme d'IA optimisé</span>
 </div>
 <div class="bg-secondary/10 rounded-lg px-4 py-3 flex items-center">
 <i class="fas fa-rocket text-secondary mr-2"></i>
 <span class="text-white font-medium">Moins de 30 secondes</span>
 </div>
 </div>
<div class="card-gradient rounded-2xl p-6">
 <div class="flex">
 <div class="flex-1">
 <label class="text-gray-400 text-sm mb-2 block">Coller un lien YouTube</label>
 <div class="relative">
 <input id="youtubeUrl" type="text" class="input-gradient w-full rounded-xl px-5 py-4 text-white focus:outline-none focus:ring-2 focus:ring-primary placeholder-gray-500" placeholder="https://www.youtube.com/watch?v=...">
 <div class="absolute right-2 top-1/2 transform -translate-y-1/2">
 <button id="generateBtn" class="bg-gradient-to-r from-primary to-secondary text-white px-5 py-2.5 rounded-xl font-medium hover:opacity-90 transition">
 <i class="fas fa-magic mr-2"></i> Générer
 </button>
 </div>
 </div>
 </div>
 </div>
 </div>
<div class="mt-4 flex space-x-2 items-center">
 <div class="flex-shrink-0 flex items-center justify-center w-6 h-6 rounded-full bg-green-500/20 text-green-400">
 <i class="fas fa-check text-xs"></i>
 </div>
 <p class="text-sm text-gray-400">Votre vidéo sera optimisée pour l'algorithme TikTok et formattée verticalement</p>
 </div>
 </div>
 </div>
<div class="md:w-1/2 flex justify-center relative">
 <div class="video-preview w-full max-w-[320px] z-10 relative">
 <div class="absolute inset-0 flex items-center justify-center" id="previewPlaceholder">
 <div class="text-center p-6">
 <div class="w-16 h-16 mx-auto rounded-full bg-primary/10 flex items-center justify-center mb-4">
 <i class="fas fa-play text-primary text-2xl"></i>
 </div>
 <h3 class="text-lg font-semibold mb-2">Votre TikTok viral</h3>
 <p class="text-gray-400 text-sm">Apparaîtra ici après génération</p>
 </div>
 </div>
 </div>
 <div class="absolute -top-20 -right-20 w-96 h-96 bg-gradient-to-r from-primary/10 to-secondary/10 rounded-full filter blur-3xl opacity-40 animate-pulse"></div>
 </div>
 </div>
 </section>
<!-- Features Section -->
 <section class="py-16 bg-gradient-to-b from-transparent to-[#0d0d1a]">
 <div class="max-w-7xl mx-auto px-4 md:px-8">
 <div class="text-center mb-16">
 <h2 class="text-3xl md:text-4xl font-bold mb-4">Fonctionnalités Avancées</h2>
 <p class="max-w-2xl mx-auto text-gray-400">Découvrez notre technologie exclusive qui fait la différence</p>
 </div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-24">
 <div class="card-gradient rounded-2xl p-8 flex flex-col md:flex-row items-start">
 <div class="w-16 h-16 rounded-xl bg-primary/10 flex items-center justify-center mb-6 md:mb-0 md:mr-6">
 <i class="fas fa-robot text-primary text-2xl"></i>
 </div>
 <div>
 <h3 class="text-xl font-bold mb-3">Analyse IA des tendances</h3>
 <p class="text-gray-400">Notre algorithme analyse en temps réel les tendances TikTok pour optimiser vos vidéos selon ce qui fonctionne actuellement.</p>
 </div>
 </div>
<div class="card-gradient rounded-2xl p-8 flex flex-col md:flex-row items-start">
 <div class="w-16 h-16 rounded-xl bg-secondary/10 flex items-center justify-center mb-6 md:mb-0 md:mr-6">
 <i class="fas fa-closed-captioning text-secondary text-2xl"></i>
 </div>
 <div>
 <h3 class="text-xl font-bold mb-3">Sous-titres automatiques</h3>
 <p class="text-gray-400">Génération de sous-titres stylisés et animés pour maximiser l'engagement, même sans son.</p>
 </div>
 </div>
<div class="card-gradient rounded-2xl p-8 flex flex-col md:flex-row items-start">
 <div class="w-16 h-16 rounded-xl bg-primary/10 flex items-center justify-center mb-6 md:mb-0 md:mr-6">
 <i class="fas fa-music text-primary text-2xl"></i>
 </div>
 <div>
 <h3 class="text-xl font-bold mb-3">Bibliothèque musicale</h3>
 <p class="text-gray-400">Accès à des milliers de musiques libres de droits et tendances TikTok pour habiller vos vidéos.</p>
 </div>
 </div>
<div class="card-gradient rounded-2xl p-8 flex flex-col md:flex-row items-start">
 <div class="w-16 h-16 rounded-xl bg-secondary/10 flex items-center justify-center mb-6 md:mb-0 md:mr-6">
 <i class="fas fa-chart-line text-secondary text-2xl"></i>
 </div>
 <div>
 <h3 class="text-xl font-bold mb-3">Analyse de performance</h3>
 <p class="text-gray-400">Statistiques détaillées et conseils pour améliorer vos futures créations.</p>
 </div>
 </div>
 </div>
 </div>
<div class="max-w-7xl mx-auto px-4 md:px-8">
 <div class="max-w-7xl mx-auto px-4 md:px-8">
 <div class="text-center mb-16">
 <h2 class="text-3xl md:text-4xl font-bold mb-4">Comment ça marche ?</h2>
 <p class="max-w-2xl mx-auto text-gray-400">Transformez n'importe quelle vidéo YouTube en contenu TikTok viral grâce à notre technologie d'IA exclusive</p>
 </div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
 <div class="card-gradient feature-card rounded-2xl p-6 transition-all duration-300 ease-out">
 <div class="w-14 h-14 rounded-xl bg-primary/10 flex items-center justify-center mb-6">
 <span class="text-2xl text-primary">1</span>
 </div>
 <h3 class="text-xl font-bold mb-3">Coller l'URL YouTube</h3>
 <p class="text-gray-400 mb-4">Sélectionnez la vidéo YouTube que vous souhaitez transformer en viral TikTok</p>
 <div class="flex justify-center py-4">
 <div class="bg-gray-800 w-16 h-16 rounded-xl flex items-center justify-center">
 <i class="fab fa-youtube text-red-500 text-2xl"></i>
 </div>
 </div>
 </div>
<div class="card-gradient feature-card rounded-2xl p-6 transition-all duration-300 ease-out">
 <div class="w-14 h-14 rounded-xl bg-secondary/10 flex items-center justify-center mb-6">
 <span class="text-2xl text-secondary">2</span>
 </div>
 <h3 class="text-xl font-bold mb-3">IA optimise le contenu</h3>
 <p class="text-gray-400 mb-4">Notre technologie extrait les moments clés pour créer une vidéo de 60 à 90 secondes parfaite pour TikTok</p>
 <div class="flex justify-center py-4">
 <div class="bg-gray-800 w-16 h-16 rounded-xl flex items-center justify-center">
 <i class="fas fa-brain text-secondary text-2xl"></i>
 </div>
 </div>
 </div>
<div class="card-gradient feature-card rounded-2xl p-6 transition-all duration-300 ease-out">
 <div class="w-14 h-14 rounded-xl bg-primary/10 flex items-center justify-center mb-6">
 <span class="text-2xl text-primary">3</span>
 </div>
 <h3 class="text-xl font-bold mb-3">Téléchargez & viralisez</h3>
 <p class="text-gray-400 mb-4">Téléchargez votre vidéo formatée verticalement avec sous-titres et effets optimisés pour TikTok</p>
 <div class="flex justify-center py-4">
 <div class="bg-gray-800 w-16 h-16 rounded-xl flex items-center justify-center">
 <i class="fab fa-tiktok text-white text-2xl"></i>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
</div>
 </section>
<!-- CTA Section -->
 <section class="py-24">
 <div class="max-w-5xl mx-auto px-4 md:px-8">
 <div class="bg-gradient-to-br from-[#1a0f2d] to-[#0d0d1a] rounded-3xl p-8 md:p-12 relative overflow-hidden">
 <div class="absolute -top-32 -left-32 w-80 h-80 bg-primary/10 rounded-full filter blur-3xl opacity-40"></div>
 <div class="absolute -bottom-40 -right-40 w-96 h-96 bg-secondary/10 rounded-full filter blur-3xl opacity-30"></div>
<div class="relative z-10">
 <h2 class="text-3xl md:text-4xl font-bold mb-6 text-center">Prêt à créer votre premier TikTok viral ?</h2>
 <p class="text-xl text-gray-400 mb-10 text-center max-w-2xl mx-auto">
 Commencez à transformer votre contenu YouTube aujourd'hui
 </p>
<div class="max-w-2xl mx-auto">
 <div class="flex flex-col sm:flex-row gap-4">
 <input type="text" class="input-gradient flex-1 rounded-xl px-5 py-4 text-white focus:outline-none focus:ring-2 focus:ring-primary placeholder-gray-500" placeholder="Collez votre URL YouTube">
 <button class="px-6 py-4 rounded-xl bg-gradient-to-r from-primary to-secondary text-white font-medium whitespace-nowrap hover:opacity-90 transition">
 Générer maintenant
 <i class="fas fa-arrow-right ml-2"></i>
 </button>
 </div>
 </div>
<div class="mt-8 flex flex-wrap justify-center gap-6">
 <div class="social-proof rounded-xl px-5 py-3 flex items-center">
 <div class="mr-3 text-yellow-400">
 <i class="fas fa-star"></i>
 <i class="fas fa-star"></i>
 <i class="fas fa-star"></i>
 <i class="fas fa-star"></i>
 <i class="fas fa-star"></i>
 </div>
 <span>4.9/5 sur 2.4K utilisateurs</span>
 </div>
 <div class="social-proof rounded-xl px-5 py-3 flex items-center">
 <i class="fas fa-bolt text-yellow-400 mr-2"></i>
 <span>13.8M vidéos générées</span>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- User Dashboard Section -->
 <section class="py-16 bg-gradient-to-b from-[#0d0d1a] to-[#0A0A12]">
 <div class="max-w-7xl mx-auto px-4 md:px-8">
 <div class="card-gradient rounded-3xl p-8 md:p-12">
 <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-12">
 <div>
 <h2 class="text-3xl md:text-4xl font-bold mb-2">Tableau de bord</h2>
 <p class="text-gray-400">Gérez vos vidéos générées et vos statistiques</p>
 </div>
 <div class="mt-4 md:mt-0">
 <button class="px-6 py-3 rounded-xl bg-gradient-to-r from-primary to-secondary text-white font-medium hover:opacity-90 transition">
 <i class="fas fa-plus mr-2"></i> Nouvelle vidéo
 </button>
 </div>
 </div>
<!-- Stats Cards -->
 <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-12">
 <div class="card-gradient rounded-2xl p-6">
 <div class="flex items-center justify-between">
 <div>
 <p class="text-gray-400 text-sm">Vidéos générées</p>
 <h3 class="text-2xl font-bold mt-1">24</h3>
 </div>
 <div class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center">
 <i class="fas fa-video text-primary"></i>
 </div>
 </div>
 </div>
<div class="card-gradient rounded-2xl p-6">
 <div class="flex items-center justify-between">
 <div>
 <p class="text-gray-400 text-sm">Vues totales</p>
 <h3 class="text-2xl font-bold mt-1">1.2M</h3>
 </div>
 <div class="w-12 h-12 rounded-lg bg-secondary/10 flex items-center justify-center">
 <i class="fas fa-eye text-secondary"></i>
 </div>
 </div>
 </div>
<div class="card-gradient rounded-2xl p-6">
 <div class="flex items-center justify-between">
 <div>
 <p class="text-gray-400 text-sm">Taux viral moyen</p>
 <h3 class="text-2xl font-bold mt-1">87%</h3>
 </div>
 <div class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center">
 <i class="fas fa-chart-line text-primary"></i>
 </div>
 </div>
 </div>
<div class="card-gradient rounded-2xl p-6">
 <div class="flex items-center justify-between">
 <div>
 <p class="text-gray-400 text-sm">Abonnés gagnés</p>
 <h3 class="text-2xl font-bold mt-1">8,421</h3>
 </div>
 <div class="w-12 h-12 rounded-lg bg-secondary/10 flex items-center justify-center">
 <i class="fas fa-users text-secondary"></i>
 </div>
 </div>
 </div>
 </div>
<!-- Videos Table -->
 <div class="overflow-x-auto">
 <table class="min-w-full">
 <thead>
 <tr class="text-left text-gray-400 border-b border-gray-800">
 <th class="pb-4 font-medium">Vidéo</th>
 <th class="pb-4 font-medium">Vues</th>
 <th class="pb-4 font-medium">Engagement</th>
 <th class="pb-4 font-medium">Date</th>
 <th class="pb-4 font-medium text-right">Actions</th>
 </tr>
 </thead>
 <tbody class="divide-y divide-gray-800">
 <tr>
 <td class="py-4">
 <div class="flex items-center">
 <div class="w-16 h-16 rounded-lg bg-gray-800 overflow-hidden mr-4">
 <img src="https://via.placeholder.com/150" alt="Miniature vidéo" class="w-full h-full object-cover">
 </div>
 <div>
 <h4 class="font-medium">Tutoriel IA viral</h4>
 <p class="text-sm text-gray-400">1:24</p>
 </div>
 </div>
 </td>
 <td class="py-4">524K</td>
 <td class="py-4">
 <div class="flex items-center">
 <span class="text-green-500 mr-2">92%</span>
 <div class="w-16 bg-gray-700 rounded-full h-2">
 <div class="bg-green-500 h-2 rounded-full" style="width: 92%"></div>
 </div>
 </div>
 </td>
 <td class="py-4">12/05/2023</td>
 <td class="py-4 text-right">
 <button class="text-gray-400 hover:text-white mr-4">
 <i class="fas fa-chart-simple"></i>
 </button>
 <button class="text-gray-400 hover:text-white mr-4">
 <i class="fas fa-download"></i>
 </button>
 <button class="text-gray-400 hover:text-white">
 <i class="fas fa-trash"></i>
 </button>
 </td>
 </tr>
 <!-- More rows... -->
 </tbody>
 </table>
 </div>
<div class="mt-8 flex justify-center">
 <button class="px-6 py-3 rounded-xl bg-gray-800 text-white font-medium hover:bg-gray-700 transition">
 Voir plus de vidéos
 </button>
 </div>
 </div>
 </div>
 </section>
<!-- Footer -->
 <footer class="pt-16 pb-8 px-4 md:px-8">
 <div class="max-w-7xl mx-auto">
 <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
 <div>
 <div class="flex items-center space-x-2 mb-4">
 <div class="w-10 h-10 rounded-lg bg-gradient-to-r from-primary to-secondary flex items-center justify-center">
 <i class="fas fa-bolt text-white"></i>
 </div>
 <span class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-secondary">ViralTikTok</span>
 </div>
 <p class="text-gray-400 mb-6">Transformez votre contenu YouTube en vidéos TikTok virales en un seul clic.</p>
 <div class="flex space-x-4">
 <a href="#" class="text-gray-400 hover:text-primary transition"><i class="fab fa-twitter"></i></a>
 <a href="#" class="text-gray-400 hover:text-primary transition"><i class="fab fa-facebook"></i></a>
 <a href="#" class="text-gray-400 hover:text-primary transition"><i class="fab fa-instagram"></i></a>
 <a href="#" class="text-gray-400 hover:text-primary transition"><i class="fab fa-tiktok"></i></a>
 </div>
 </div>
<div>
 <h3 class="text-lg font-semibold mb-4">Fonctionnalités</h3>
 <ul class="space-y-3">
 <li><a href="#" class="text-gray-400 hover:text-white transition">Extraction YouTube</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition">AI Viral Optimizer</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition">Format TikTok 9:16</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition">Génération de sous-titres</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition">Bibliothèque de musiques</a></li>
 </ul>
 </div>
<div>
 <h3 class="text-lg font-semibold mb-4">Ressources</h3>
 <ul class="space-y-3">
 <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition">Documentation</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition">Centre d'aide</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition">Exemples de succès</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition">Conditions d'utilisation</a></li>
 </ul>
 </div>
<div>
 <h3 class="text-lg font-semibold mb-4">Entreprise</h3>
 <ul class="space-y-3">
 <li><a href="#" class="text-gray-400 hover:text-white transition">À propos</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition">Carrières</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition">Tarifs</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition">Partenaires</a></li>
 </ul>
 </div>
 </div>
<div class="pt-8 border-t border-gray-800 text-center text-gray-500 text-sm">
 <p>&copy; 2023 ViralTikTok Generator. Tous droits réservés.</p>
 </div>
 </div>
 </footer>
<!-- Processing Modal -->
 <div id="processingModal" class="fixed inset-0 z-50 bg-black bg-opacity-70 hidden items-center justify-center">
 <div class="card-gradient rounded-3xl p-8 max-w-md w-full mx-4">
 <h3 class="text-2xl font-bold mb-6 text-center">Création de votre TikTok viral</h3>
 <div class="mb-6 flex justify-center">
 <div class="w-24 h-24 rounded-full border-4 border-secondary border-t-primary animate-spin flex items-center justify-center">
 <i class="fas fa-magic text-2xl text-primary"></i>
 </div>
 </div>
<div class="space-y-4">
 <div class="flex items-center">
 <div class="text-primary mr-3"><i class="fas fa-check-circle"></i></div>
 <span>Analyse de la vidéo YouTube...</span>
 <span class="ml-auto"><i class="fas fa-spinner animate-spin"></i></span>
 </div>
 <div class="flex items-center">
 <div class="text-primary mr-3"><i class="fas fa-check-circle"></i></div>
 <span>Extraction des moments clés...</span>
 <span class="ml-auto"><i class="fas fa-spinner animate-spin"></i></span>
 </div>
 <div class="flex items-center opacity-50">
 <div class="text-gray-500 mr-3"><i class="far fa-clock"></i></div>
 <span>Formatage vertical...</span>
 </div>
 <div class="flex items-center opacity-50">
 <div class="text-gray-500 mr-3"><i class="far fa-clock"></i></div>
 <span>Ajout des sous-titres...</span>
 </div>
 </div>
<div class="mt-8">
 <div class="progress-bar mb-2 w-64 mx-auto rounded-full"></div>
 <p class="text-center text-gray-400">60-90 secondes parfaites en préparation...</p>
 </div>
 </div>
 </div>
<!-- Success Modal -->
 <div id="successModal" class="fixed inset-0 z-50 bg-black bg-opacity-70 hidden items-center justify-center">
 <div class="card-gradient rounded-3xl p-8 max-w-md w-full mx-4">
 <h3 class="text-2xl font-bold mb-6 text-center">Votre TikTok est prêt !</h3>
<div class="w-32 h-32 rounded-full bg-green-500/10 flex items-center justify-center mx-auto mb-6">
 <i class="fas fa-check text-green-500 text-5xl"></i>
 </div>
<div class="space-y-4 mb-8">
 <div class="flex items-center justify-between bg-gray-800 p-4 rounded-xl">
 <span>Durée finale:</span>
 <span class="font-medium">1:18</span>
 </div>
 <div class="flex items-center justify-between bg-gray-800 p-4 rounded-xl">
 <span>Points forts identifiés:</span>
 <span class="font-medium">18</span>
 </div>
 <div class="flex items-center justify-between bg-gray-800 p-4 rounded-xl">
 <span>Format:</span>
 <span class="font-medium">Vertical 9:16</span>
 </div>
 </div>
<div class="flex space-x-3">
 <button class="flex-1 bg-gray-800 hover:bg-gray-700 transition text-white rounded-xl py-4">
 <i class="fas fa-redo mr-2"></i> Régénérer
 </button>
 <button class="flex-1 bg-gradient-to-r from-primary to-secondary hover:opacity-90 transition text-white rounded-xl py-4">
 <i class="fas fa-download mr-2"></i> Télécharger
 </button>
 </div>
<p class="text-center mt-6 text-gray-400">
 Prédiction virale: <span class="text-primary">97%</span>
 </p>
 </div>
 </div>
<script>
 document.addEventListener('DOMContentLoaded', function() {
 const generateBtn = document.getElementById('generateBtn');
 const processingModal = document.getElementById('processingModal');
 const successModal = document.getElementById('successModal');
 const youtubeInput = document.getElementById('youtubeUrl');
 const previewPlaceholder = document.getElementById('previewPlaceholder');
generateBtn.addEventListener('click', function(e) {
 e.preventDefault();
 const youtubeUrl = youtubeInput.value.trim();
// Validation de l'URL YouTube
 const youtubeRegex = /^(https?:\/\/)?(www\.)?(youtube\.com|youtu\.?be)\/.+$/;
 if (!youtubeRegex.test(youtubeUrl)) {
 alert('Veuillez entrer une URL YouTube valide (ex: https://www.youtube.com/watch?v=...)');
 youtubeInput.focus();
 return false;
 }
// Afficher le modal de traitement
 processingModal.style.display = 'flex';
// Simulation du traitement (remplacer par un appel API réel)
 setTimeout(function() {
 if (!processingModal) return;
 processingModal.style.display = 'none';
 successModal.style.display = 'flex';
// Update preview
 previewPlaceholder.innerHTML = `
 <div class="w-full h-full flex flex-col">
 <div class="h-3/4 bg-gradient-to-r from-primary/10 to-secondary/10"></div>
 <div class="h-1/4 bg-gray-900 p-4">
 <div class="h-4 bg-gray-700 rounded w-3/4 mb-3"></div>
 <div class="h-4 bg-gray-700 rounded w-1/2"></div>
 <div class="flex items-center mt-4">
 <div class="w-8 h-8 bg-primary rounded-full mr-2"></div>
 <div class="w-24 h-4 bg-gray-700 rounded"></div>
 <div class="ml-auto flex items-center text-gray-400">
 <i class="fas fa-heart mr-2"></i>
 <span>12.4K</span>
 </div>
 </div>
 </div>
 <div class="absolute top-4 right-4 w-12 h-12 rounded-full bg-black/30 flex items-center justify-center">
 <i class="fab fa-tiktok text-white"></i>
 </div>
 </div>
 `;
 }, 4000);
 });
// Close modals when clicking outside
 [processingModal, successModal].forEach(modal => {
 modal.addEventListener('click', function(e) {
 if(e.target === modal) {
 modal.style.display = 'none';
 }
 });
 });
// Example of automatic clipping for input on load
 youtubeInput.value = 'https://www.youtube.com/watch?v=dQw4w9WgXcQ';
 });
 </script>
<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=kenax69/premier-test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>