Spaces:

docto41
/

importation

Running

App Files Files Community

docto41 commited on May 18, 2025

Commit

97f213d

verified ·

1 Parent(s): fc87229

Add 2 files

Browse files

Files changed (2) hide show

index.html +315 -405
prompts.txt +7 -1

index.html CHANGED Viewed

@@ -3,45 +3,27 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Nexus Importer - Transfert de fichiers futuriste</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">
     <style>
-        @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Roboto:wght@300;400;500&display=swap');
         :root {
-            --primary: #00f7ff;
-            --secondary: #7b2dff;
             --dark: #0a0a1a;
-            --light: #e0e0ff;
         }
         body {
-            font-family: 'Roboto', sans-serif;
             background-color: var(--dark);
-            color: var(--light);
             overflow-x: hidden;
         }
-        h1, h2, h3, .font-futuristic {
-            font-family: 'Orbitron', sans-serif;
-        }
-        .gradient-bg {
-            background: linear-gradient(135deg, var(--dark) 0%, #1a1a3a 100%);
-        }
         .glow {
-            text-shadow: 0 0 10px rgba(0, 247, 255, 0.7);
-        }
-        .glow-box {
-            box-shadow: 0 0 15px rgba(0, 247, 255, 0.5);
-        }
-        .input-glow:focus {
-            box-shadow: 0 0 10px rgba(0, 247, 255, 0.5);
-            border-color: var(--primary);
         }
         .cyber-button {
@@ -52,452 +34,380 @@
         .cyber-button:hover {
             transform: translateY(-2px);
-            box-shadow: 0 5px 15px rgba(0, 247, 255, 0.4);
-        }
-        .cyber-button::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: -100%;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(90deg, transparent, rgba(0, 247, 255, 0.4), transparent);
-            transition: all 0.6s;
         }
-        .cyber-button:hover::before {
-            left: 100%;
-        }
-        .hexagon {
-            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
-        }
-        .pulse {
-            animation: pulse 2s infinite;
-        }
-        @keyframes pulse {
-            0% { opacity: 0.6; }
-            50% { opacity: 1; }
-            100% { opacity: 0.6; }
-        }
-        .upload-area {
-            border: 2px dashed rgba(0, 247, 255, 0.3);
             transition: all 0.3s;
         }
-        .upload-area:hover {
-            border-color: var(--primary);
-            background: rgba(0, 247, 255, 0.05);
-        }
-        .tech-grid {
-            background-image:
-                linear-gradient(rgba(0, 247, 255, 0.1) 1px, transparent 1px),
-                linear-gradient(90deg, rgba(0, 247, 255, 0.1) 1px, transparent 1px);
-            background-size: 30px 30px;
         }
-        .progress-bar {
-            height: 6px;
-            background: rgba(0, 247, 255, 0.2);
             overflow: hidden;
         }
-        .progress-bar-fill {
             height: 100%;
-            background: linear-gradient(90deg, var(--secondary), var(--primary));
-            transition: width 0.3s;
         }
-        .floating {
-            animation: floating 6s ease-in-out infinite;
         }
-        @keyframes floating {
-            0% { transform: translateY(0px); }
-            50% { transform: translateY(-15px); }
-            100% { transform: translateY(0px); }
         }
     </style>
 </head>
-<body class="gradient-bg min-h-screen">
-    <!-- Particules de fond -->
-    <div class="fixed inset-0 overflow-hidden opacity-20">
-        <div class="absolute top-1/4 left-1/4 w-2 h-2 rounded-full bg-white pulse" style="animation-delay: 0s;"></div>
-        <div class="absolute top-1/3 left-2/3 w-1 h-1 rounded-full bg-cyan-400 pulse" style="animation-delay: 0.5s;"></div>
-        <div class="absolute top-2/3 left-1/5 w-3 h-3 rounded-full bg-purple-500 pulse" style="animation-delay: 1s;"></div>
-        <div class="absolute top-3/4 left-3/4 w-2 h-2 rounded-full bg-white pulse" style="animation-delay: 1.5s;"></div>
-    </div>
-    <div class="container mx-auto px-4 py-12 relative z-10">
-        <!-- En-tête -->
-        <header class="flex flex-col items-center mb-16">
-            <div class="hexagon bg-gradient-to-br from-cyan-500 to-purple-600 w-24 h-24 flex items-center justify-center mb-6 glow-box">
-                <i class="fas fa-cloud-upload-alt text-4xl text-white"></i>
             </div>
-            <h1 class="text-5xl font-bold text-center mb-4 glow">
-                <span class="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-purple-500">NEXUS</span> IMPORTER
-            </h1>
-            <p class="text-xl text-gray-300 max-w-2xl text-center">
-                Transférez vos fichiers vers le futur. Importez depuis n'importe quelle source en quelques secondes.
-            </p>
         </header>
-        <!-- Zone principale -->
-        <main class="tech-grid rounded-xl p-8 backdrop-blur-sm bg-opacity-20 bg-gray-900 border border-gray-800 glow-box">
-            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
-                <!-- Section d'importation -->
-                <div class="flex flex-col">
-                    <h2 class="text-2xl font-futuristic mb-6 flex items-center">
-                        <i class="fas fa-rocket mr-3 text-cyan-400"></i>
-                        <span>Sources d'importation</span>
-                    </h2>
-                    <!-- Onglets -->
-                    <div class="flex mb-6 border-b border-gray-800">
-                        <button class="tab-button active px-4 py-2 font-medium text-cyan-400 border-b-2 border-cyan-400" data-tab="url">
-                            <i class="fas fa-link mr-2"></i> URL
-                        </button>
-                        <button class="tab-button px-4 py-2 font-medium text-gray-400 hover:text-cyan-400" data-tab="file">
-                            <i class="fas fa-file-archive mr-2"></i> Fichier
-                        </button>
-                        <button class="tab-button px-4 py-2 font-medium text-gray-400 hover:text-cyan-400" data-tab="cloud">
-                            <i class="fas fa-cloud mr-2"></i> Cloud
-                        </button>
                     </div>
-                    <!-- Contenu des onglets -->
-                    <div class="tab-content" id="url-tab">
-                        <div class="mb-6">
-                            <label class="block text-gray-300 mb-2">URL du site/fichier</label>
-                            <div class="relative">
-                                <input type="text" class="w-full bg-gray-800 border border-gray-700 rounded-lg py-3 px-4 text-white focus:outline-none input-glow" placeholder="https://example.com/file.zip">
-                                <div class="absolute right-3 top-3 text-gray-400">
-                                    <i class="fas fa-globe"></i>
                                 </div>
                             </div>
                         </div>
-                        <div class="mb-6">
-                            <label class="block text-gray-300 mb-2">Options avancées</label>
-                            <div class="space-y-3">
-                                <label class="flex items-center">
-                                    <input type="checkbox" class="form-checkbox h-5 w-5 text-cyan-400 bg-gray-800 border-gray-700 rounded focus:ring-cyan-400">
-                                    <span class="ml-2 text-gray-300">Extraire automatiquement les archives</span>
-                                </label>
-                                <label class="flex items-center">
-                                    <input type="checkbox" class="form-checkbox h-5 w-5 text-cyan-400 bg-gray-800 border-gray-700 rounded focus:ring-cyan-400">
-                                    <span class="ml-2 text-gray-300">Scanner les fichiers avec Nexus Shield</span>
-                                </label>
                             </div>
                         </div>
-                        <button class="w-full cyber-button bg-gradient-to-r from-purple-600 to-cyan-500 text-white py-3 px-6 rounded-lg font-medium flex items-center justify-center">
-                            <i class="fas fa-bolt mr-2"></i> Lancer l'importation quantique
-                        </button>
                     </div>
-                    <div class="tab-content hidden" id="file-tab">
-                        <div class="upload-area rounded-xl border-2 border-dashed p-8 text-center cursor-pointer mb-6 hover:border-cyan-400 transition-colors">
-                            <div class="floating mx-auto w-16 h-16 bg-cyan-900 bg-opacity-30 rounded-full flex items-center justify-center mb-4">
-                                <i class="fas fa-file-upload text-3xl text-cyan-400"></i>
                             </div>
-                            <h3 class="text-xl font-medium mb-2">Glissez-déposez vos fichiers ici</h3>
-                            <p class="text-gray-400 mb-4">ou cliquez pour parcourir</p>
-                            <div class="text-sm text-gray-500">ZIP, RAR, Images, PDF, etc.</div>
-                            <input type="file" class="hidden" id="file-upload" multiple>
-                        </div>
-                        <div class="grid grid-cols-2 gap-4 mb-6">
-                            <button class="cyber-button bg-gray-800 hover:bg-gray-700 text-white py-2 px-4 rounded-lg font-medium flex items-center justify-center">
-                                <i class="fas fa-folder-open mr-2"></i> Parcourir
-                            </button>
-                            <button class="cyber-button bg-gray-800 hover:bg-gray-700 text-white py-2 px-4 rounded-lg font-medium flex items-center justify-center">
-                                <i class="fas fa-camera mr-2"></i> Prendre une photo
-                            </button>
                         </div>
                     </div>
-                    <div class="tab-content hidden" id="cloud-tab">
-                        <div class="mb-6">
-                            <label class="block text-gray-300 mb-2">Service Cloud</label>
-                            <div class="grid grid-cols-3 gap-3">
-                                <button class="cloud-service bg-gray-800 hover:bg-gray-700 py-3 rounded-lg flex flex-col items-center justify-center">
-                                    <i class="fab fa-google-drive text-2xl text-blue-400 mb-1"></i>
-                                    <span class="text-xs">Google Drive</span>
-                                </button>
-                                <button class="cloud-service bg-gray-800 hover:bg-gray-700 py-3 rounded-lg flex flex-col items-center justify-center">
-                                    <i class="fab fa-dropbox text-2xl text-blue-500 mb-1"></i>
-                                    <span class="text-xs">Dropbox</span>
-                                </button>
-                                <button class="cloud-service bg-gray-800 hover:bg-gray-700 py-3 rounded-lg flex flex-col items-center justify-center">
-                                    <i class="fas fa-cloud text-2xl text-white mb-1"></i>
-                                    <span class="text-xs">OneDrive</span>
-                                </button>
                             </div>
                         </div>
-                        <div class="mb-6">
-                            <label class="block text-gray-300 mb-2">Identifiants</label>
-                            <input type="text" class="w-full bg-gray-800 border border-gray-700 rounded-lg py-3 px-4 text-white focus:outline-none input-glow mb-3" placeholder="Email/Nom d'utilisateur">
-                            <input type="password" class="w-full bg-gray-800 border border-gray-700 rounded-lg py-3 px-4 text-white focus:outline-none input-glow" placeholder="Mot de passe">
-                        </div>
                     </div>
-                </div>
-                <!-- Aperçu et progression -->
-                <div class="bg-gray-900 bg-opacity-50 rounded-xl p-6 border border-gray-800">
-                    <h2 class="text-2xl font-futuristic mb-6 flex items-center">
-                        <i class="fas fa-chart-line mr-3 text-purple-400"></i>
-                        <span>Statut d'importation</span>
-                    </h2>
-                    <div class="space-y-6">
-                        <div>
-                            <div class="flex justify-between text-sm text-gray-400 mb-1">
-                                <span>Préparation du transfert quantique</span>
-                                <span>0%</span>
-                            </div>
-                            <div class="progress-bar rounded-full">
-                                <div class="progress-bar-fill rounded-full" style="width: 0%"></div>
                             </div>
                         </div>
-                        <div class="bg-gray-800 bg-opacity-70 rounded-lg p-4">
-                            <div class="flex items-center mb-3">
-                                <div class="w-8 h-8 rounded-full bg-cyan-900 bg-opacity-30 flex items-center justify-center mr-3">
-                                    <i class="fas fa-info-circle text-cyan-400"></i>
                                 </div>
-                                <h3 class="font-medium">Conseils pour un transfert optimal</h3>
                             </div>
-                            <ul class="text-sm text-gray-400 space-y-2 pl-11">
-                                <li class="flex items-start">
-                                    <i class="fas fa-chevron-right text-xs text-cyan-400 mt-1 mr-2"></i>
-                                    <span>Utilisez une connexion stable pour éviter les perturbations quantiques</span>
-                                </li>
-                                <li class="flex items-start">
-                                    <i class="fas fa-chevron-right text-xs text-cyan-400 mt-1 mr-2"></i>
-                                    <span>Les fichiers chiffrés bénéficient d'une vitesse de transfert accrue</span>
-                                </li>
-                                <li class="flex items-start">
-                                    <i class="fas fa-chevron-right text-xs text-cyan-400 mt-1 mr-2"></i>
-                                    <span>Activez Nexus Shield pour une protection maximale</span>
-                                </li>
-                            </ul>
                         </div>
-                        <div>
-                            <h3 class="font-medium mb-3 flex items-center">
-                                <i class="fas fa-history mr-2 text-purple-400"></i>
-                                Historique récent
-                            </h3>
-                            <div class="space-y-2">
-                                <div class="flex items-center justify-between bg-gray-800 bg-opacity-50 hover:bg-gray-700 rounded-lg p-3 cursor-pointer transition-colors">
-                                    <div class="flex items-center">
-                                        <div class="w-8 h-8 rounded-full bg-purple-900 bg-opacity-30 flex items-center justify-center mr-3">
-                                            <i class="fas fa-file-archive text-purple-400"></i>
-                                        </div>
-                                        <div>
-                                            <div class="text-sm">archive_project.zip</div>
-                                            <div class="text-xs text-gray-500">12.5 MB - Hier</div>
-                                        </div>
-                                    </div>
-                                    <i class="fas fa-chevron-right text-gray-400"></i>
                                 </div>
-                                <div class="flex items-center justify-between bg-gray-800 bg-opacity-50 hover:bg-gray-700 rounded-lg p-3 cursor-pointer transition-colors">
-                                    <div class="flex items-center">
-                                        <div class="w-8 h-8 rounded-full bg-cyan-900 bg-opacity-30 flex items-center justify-center mr-3">
-                                            <i class="fas fa-image text-cyan-400"></i>
-                                        </div>
-                                        <div>
-                                            <div class="text-sm">screenshot.png</div>
-                                            <div class="text-xs text-gray-500">2.1 MB - 2 jours</div>
-                                        </div>
-                                    </div>
-                                    <i class="fas fa-chevron-right text-gray-400"></i>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
-            </div>
         </main>
-        <!-- Section IA -->
-        <section class="mt-16 tech-grid rounded-xl p-8 backdrop-blur-sm bg-opacity-20 bg-gray-900 border border-gray-800 glow-box">
-            <h2 class="text-2xl font-futuristic mb-6 flex items-center">
-                <i class="fas fa-robot mr-3 text-purple-400"></i>
-                <span>Assistant IA Nexus</span>
-            </h2>
-            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-                <div class="bg-gradient-to-br from-gray-900 to-gray-800 rounded-lg p-6 border border-gray-700 hover:border-cyan-400 transition-colors cursor-pointer">
-                    <div class="w-12 h-12 rounded-full bg-cyan-900 bg-opacity-30 flex items-center justify-center mb-4">
-                        <i class="fas fa-magic text-2xl text-cyan-400"></i>
-                    </div>
-                    <h3 class="text-lg font-medium mb-2">Optimisation automatique</h3>
-                    <p class="text-sm text-gray-400">Notre IA analyse et optimise vos fichiers pour un transfert plus rapide.</p>
-                </div>
-                <div class="bg-gradient-to-br from-gray-900 to-gray-800 rounded-lg p-6 border border-gray-700 hover:border-purple-400 transition-colors cursor-pointer">
-                    <div class="w-12 h-12 rounded-full bg-purple-900 bg-opacity-30 flex items-center justify-center mb-4">
-                        <i class="fas fa-shield-alt text-2xl text-purple-400"></i>
-                    </div>
-                    <h3 class="text-lg font-medium mb-2">Sécurité quantique</h3>
-                    <p class="text-sm text-gray-400">Protection avancée contre les menaces avec chiffrement de niveau militaire.</p>
-                </div>
-                <div class="bg-gradient-to-br from-gray-900 to-gray-800 rounded-lg p-6 border border-gray-700 hover:border-pink-400 transition-colors cursor-pointer">
-                    <div class="w-12 h-12 rounded-full bg-pink-900 bg-opacity-30 flex items-center justify-center mb-4">
-                        <i class="fas fa-bolt text-2xl text-pink-400"></i>
-                    </div>
-                    <h3 class="text-lg font-medium mb-2">Conversion instantanée</h3>
-                    <p class="text-sm text-gray-400">Transformez vos fichiers dans n'importe quel format pendant le transfert.</p>
-                </div>
-            </div>
-        </section>
-        <!-- Pied de page -->
-        <footer class="mt-16 pt-8 border-t border-gray-800">
-            <div class="flex flex-col md:flex-row justify-between items-center">
-                <div class="flex items-center mb-4 md:mb-0">
-                    <div class="hexagon bg-gradient-to-br from-cyan-500 to-purple-600 w-10 h-10 flex items-center justify-center mr-3">
-                        <i class="fas fa-infinity text-white"></i>
-                    </div>
-                    <span class="text-xl font-futuristic">NEXUS TECHNOLOGIES</span>
-                </div>
-                <div class="flex space-x-6">
-                    <a href="#" class="text-gray-400 hover:text-cyan-400 transition-colors">
-                        <i class="fab fa-github text-xl"></i>
-                    </a>
-                    <a href="#" class="text-gray-400 hover:text-cyan-400 transition-colors">
-                        <i class="fab fa-twitter text-xl"></i>
-                    </a>
-                    <a href="#" class="text-gray-400 hover:text-cyan-400 transition-colors">
-                        <i class="fab fa-discord text-xl"></i>
-                    </a>
-                    <a href="#" class="text-gray-400 hover:text-cyan-400 transition-colors">
-                        <i class="fab fa-linkedin text-xl"></i>
-                    </a>
-                </div>
-            </div>
-            <div class="mt-8 text-center text-gray-500 text-sm">
-                <p>© 2023 Nexus Importer. Tous droits réservés. | Version quantique 2.5.7</p>
-                <p class="mt-1">Ce service utilise la technologie de téléportation quantique brevetée Nexus™</p>
-            </div>
         </footer>
     </div>
     <script>
-        // Gestion des onglets
-        document.querySelectorAll('.tab-button').forEach(button => {
-            button.addEventListener('click', () => {
-                // Retirer la classe active de tous les boutons
-                document.querySelectorAll('.tab-button').forEach(btn => {
-                    btn.classList.remove('active', 'text-cyan-400', 'border-cyan-400');
-                    btn.classList.add('text-gray-400');
-                });
-                // Ajouter la classe active au bouton cliqué
-                button.classList.add('active', 'text-cyan-400', 'border-cyan-400');
-                button.classList.remove('text-gray-400');
-                // Masquer tous les contenus d'onglets
-                document.querySelectorAll('.tab-content').forEach(content => {
-                    content.classList.add('hidden');
-                });
-                // Afficher le contenu correspondant
-                const tabId = button.getAttribute('data-tab') + '-tab';
-                document.getElementById(tabId).classList.remove('hidden');
-            });
-        });
-        // Animation de la barre de progression (simulation)
-        function simulateProgress() {
-            let progress = 0;
-            const progressBar = document.querySelector('.progress-bar-fill');
-            const progressText = document.querySelector('.progress-bar + .flex span:last-child');
-            const interval = setInterval(() => {
-                progress += Math.random() * 10;
-                if (progress > 100) progress = 100;
-                progressBar.style.width = `${progress}%`;
-                progressText.textContent = `${Math.round(progress)}%`;
-                if (progress === 100) {
-                    clearInterval(interval);
-                    progressText.textContent = "Transfert quantique terminé!";
                 }
-            }, 500);
-        }
-        // Démarrer la simulation lors du clic sur le bouton d'importation
-        document.querySelector('.cyber-button').addEventListener('click', simulateProgress);
-        // Gestion du glisser-déposer
-        const uploadArea = document.querySelector('.upload-area');
-        const fileInput = document.getElementById('file-upload');
-        uploadArea.addEventListener('click', () => {
-            fileInput.click();
-        });
-        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
-            uploadArea.addEventListener(eventName, preventDefaults, false);
-        });
-        function preventDefaults(e) {
-            e.preventDefault();
-            e.stopPropagation();
         }
-        ['dragenter', 'dragover'].forEach(eventName => {
-            uploadArea.addEventListener(eventName, highlight, false);
-        });
-        ['dragleave', 'drop'].forEach(eventName => {
-            uploadArea.addEventListener(eventName, unhighlight, false);
-        });
-        function highlight() {
-            uploadArea.classList.add('bg-cyan-900', 'bg-opacity-20');
         }
-        function unhighlight() {
-            uploadArea.classList.remove('bg-cyan-900', 'bg-opacity-20');
         }
-        uploadArea.addEventListener('drop', handleDrop, false);
-        function handleDrop(e) {
-            const dt = e.dataTransfer;
-            const files = dt.files;
-            handleFiles(files);
         }
-        function handleFiles(files) {
-            alert(`${files.length} fichier(s) sélectionné(s) pour l'importation quantique!`);
-            // Ici, vous ajouteriez le code pour traiter les fichiers
         }
-        // Effet de saisie pour les services cloud
-        document.querySelectorAll('.cloud-service').forEach(service => {
-            service.addEventListener('click', () => {
-                document.querySelectorAll('.cloud-service').forEach(s => {
-                    s.classList.remove('border-cyan-400', 'bg-gray-700');
                 });
-                service.classList.add('border-cyan-400', 'bg-gray-700');
             });
         });
     </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=docto41/importation" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CinéFutur - Lecteur de Films</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">
     <style>
+        @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');
         :root {
+            --primary: #ff6b00;
+            --secondary: #8a2be2;
             --dark: #0a0a1a;
         }
         body {
+            font-family: 'Orbitron', sans-serif;
             background-color: var(--dark);
+            color: white;
             overflow-x: hidden;
         }
         .glow {
+            text-shadow: 0 0 10px rgba(255, 107, 0, 0.7);
         }
         .cyber-button {
         .cyber-button:hover {
             transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(255, 107, 0, 0.4);
         }
+        .film-card {
             transition: all 0.3s;
+            background: rgba(30, 30, 60, 0.5);
+            border-radius: 10px;
+            overflow: hidden;
         }
+        .film-card:hover {
+            transform: scale(1.03);
+            box-shadow: 0 0 20px rgba(138, 43, 226, 0.5);
         }
+        .video-container {
+            position: relative;
+            padding-bottom: 56.25%; /* 16:9 */
+            height: 0;
             overflow: hidden;
         }
+        .video-container iframe {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
             height: 100%;
+            border: none;
         }
+        .progress-bar {
+            height: 4px;
+            background: rgba(255,255,255,0.2);
+            margin-top: 10px;
         }
+        .progress-fill {
+            height: 100%;
+            background: linear-gradient(90deg, var(--secondary), var(--primary));
+            width: 0%;
         }
     </style>
 </head>
+<body class="min-h-screen bg-gradient-to-br from-gray-900 to-gray-800">
+    <div class="container mx-auto px-4 py-8">
+        <!-- Header -->
+        <header class="flex justify-between items-center mb-8">
+            <div class="flex items-center">
+                <i class="fas fa-film text-3xl text-orange-500 mr-3"></i>
+                <h1 class="text-2xl font-bold glow">CinéFutur <span class="text-sm text-gray-400">Lecteur Premium</span></h1>
+            </div>
+            <div class="flex items-center space-x-4">
+                <button id="autoPlayBtn" class="cyber-button bg-gradient-to-r from-purple-600 to-orange-500 text-white py-2 px-4 rounded-lg flex items-center">
+                    <i class="fas fa-play mr-2"></i> Auto
+                </button>
+                <div class="relative">
+                    <input type="text" placeholder="Rechercher..." class="bg-gray-800 border border-gray-700 rounded-lg py-2 px-4 text-white focus:outline-none focus:border-orange-500">
+                    <i class="fas fa-search absolute right-3 top-3 text-gray-400"></i>
+                </div>
             </div>
         </header>
+        <!-- Main Content -->
+        <main>
+            <!-- Current Video Player -->
+            <div class="mb-8 bg-gray-900 rounded-xl overflow-hidden shadow-2xl">
+                <div class="video-container" id="mainVideoContainer">
+                    <iframe id="mainVideo" src="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+                </div>
+                <div class="p-4">
+                    <h2 id="currentFilmTitle" class="text-xl font-bold mb-2">Sélectionnez un film</h2>
+                    <div class="flex justify-between items-center">
+                        <div class="flex space-x-2">
+                            <span class="text-sm text-gray-400"><i class="fas fa-clock mr-1"></i> <span id="currentFilmDuration">--:--</span></span>
+                            <span class="text-sm text-gray-400"><i class="fas fa-star mr-1 text-yellow-400"></i> <span id="currentFilmRating">--</span>/10</span>
+                        </div>
+                        <div class="flex space-x-2">
+                            <button id="fullscreenBtn" class="cyber-button bg-gray-800 text-white py-1 px-3 rounded-lg text-sm">
+                                <i class="fas fa-expand mr-1"></i> Plein écran
+                            </button>
+                            <button id="nextFilmBtn" class="cyber-button bg-gradient-to-r from-purple-600 to-orange-500 text-white py-1 px-3 rounded-lg text-sm">
+                                <i class="fas fa-step-forward mr-1"></i> Suivant
+                            </button>
+                        </div>
                     </div>
+                    <div class="progress-bar">
+                        <div class="progress-fill" id="progressFill"></div>
+                    </div>
+                </div>
+            </div>
+            <!-- Film Library -->
+            <section>
+                <h2 class="text-xl font-bold mb-4 flex items-center">
+                    <i class="fas fa-film text-orange-500 mr-2"></i>
+                    <span>Bibliothèque de Films</span>
+                </h2>
+                <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
+                    <!-- Film 1 - Dune -->
+                    <div class="film-card" data-video="https://www.youtube.com/embed/w0HgHet0sxg" data-title="Dune (2021)" data-duration="2h35m" data-rating="8.0">
+                        <div class="h-40 bg-cover bg-center" style="background-image: url('https://m.media-amazon.com/images/M/MV5BN2FjNmEyNWMtYzM0ZS00NjIyLTg5YzYtYThlMGVjNzE1OGViXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_.jpg')">
+                            <div class="bg-black bg-opacity-60 h-full flex items-end p-3">
+                                <div>
+                                    <h3 class="font-bold">Dune</h3>
+                                    <p class="text-xs text-gray-300">2021 • Sci-Fi</p>
                                 </div>
                             </div>
                         </div>
+                    </div>
+                    <!-- Film 2 - Interstellar -->
+                    <div class="film-card" data-video="https://www.youtube.com/embed/zSWdZVtXT7E" data-title="Interstellar (2014)" data-duration="2h49m" data-rating="8.6">
+                        <div class="h-40 bg-cover bg-center" style="background-image: url('https://m.media-amazon.com/images/M/MV5BZjdkOTU5MDktM2IxOS00OGEyLWFmMjktY2FiMmZkNWIyODZiXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_.jpg')">
+                            <div class="bg-black bg-opacity-60 h-full flex items-end p-3">
+                                <div>
+                                    <h3 class="font-bold">Interstellar</h3>
+                                    <p class="text-xs text-gray-300">2014 • Sci-Fi</p>
+                                </div>
                             </div>
                         </div>
                     </div>
+                    <!-- Film 3 - Blade Runner 2049 -->
+                    <div class="film-card" data-video="https://www.youtube.com/embed/gCcx85zbxz4" data-title="Blade Runner 2049 (2017)" data-duration="2h44m" data-rating="8.0">
+                        <div class="h-40 bg-cover bg-center" style="background-image: url('https://m.media-amazon.com/images/M/MV5BNzA1Njg4NzYxOV5BMl5BanBnXkFtZTgwODk5NjU3MzI@._V1_FMjpg_UX1000_.jpg')">
+                            <div class="bg-black bg-opacity-60 h-full flex items-end p-3">
+                                <div>
+                                    <h3 class="font-bold">Blade Runner 2049</h3>
+                                    <p class="text-xs text-gray-300">2017 • Cyberpunk</p>
+                                </div>
                             </div>
                         </div>
                     </div>
+                    <!-- Film 4 - The Matrix -->
+                    <div class="film-card" data-video="https://www.youtube.com/embed/vKQi3bBA1y8" data-title="The Matrix (1999)" data-duration="2h16m" data-rating="8.7">
+                        <div class="h-40 bg-cover bg-center" style="background-image: url('https://m.media-amazon.com/images/M/MV5BNzQzOTk3OTAtNDQ0Zi00ZTVkLWI0MTEtMDllZjNkYzNjNTc4L2ltYWdlXkEyXkFqcGdeQXVyNjU0OTQ0OTY@._V1_.jpg')">
+                            <div class="bg-black bg-opacity-60 h-full flex items-end p-3">
+                                <div>
+                                    <h3 class="font-bold">The Matrix</h3>
+                                    <p class="text-xs text-gray-300">1999 • Sci-Fi</p>
+                                </div>
                             </div>
                         </div>
                     </div>
+                    <!-- Film 5 - Inception -->
+                    <div class="film-card" data-video="https://www.youtube.com/embed/YoHD9XEInc0" data-title="Inception (2010)" data-duration="2h28m" data-rating="8.8">
+                        <div class="h-40 bg-cover bg-center" style="background-image: url('https://m.media-amazon.com/images/M/MV5BMjAxMzY3NjcxNF5BMl5BanBnXkFtZTcwNTI5OTM0Mw@@._V1_FMjpg_UX1000_.jpg')">
+                            <div class="bg-black bg-opacity-60 h-full flex items-end p-3">
+                                <div>
+                                    <h3 class="font-bold">Inception</h3>
+                                    <p class="text-xs text-gray-300">2010 • Sci-Fi</p>
+                                </div>
                             </div>
                         </div>
+                    </div>
+                    <!-- Film 6 - Tenet -->
+                    <div class="film-card" data-video="https://www.youtube.com/embed/LdOM0x0XDMo" data-title="Tenet (2020)" data-duration="2h30m" data-rating="7.5">
+                        <div class="h-40 bg-cover bg-center" style="background-image: url('https://m.media-amazon.com/images/M/MV5BYzg0NGM2NjAtNmIxOC00MDJmLTg5ZmItMjE3M2JkMTYyOTQzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_.jpg')">
+                            <div class="bg-black bg-opacity-60 h-full flex items-end p-3">
+                                <div>
+                                    <h3 class="font-bold">Tenet</h3>
+                                    <p class="text-xs text-gray-300">2020 • Sci-Fi</p>
                                 </div>
                             </div>
                         </div>
+                    </div>
+                    <!-- Film 7 - Arrival -->
+                    <div class="film-card" data-video="https://www.youtube.com/embed/tFMo3UJ4B4g" data-title="Arrival (2016)" data-duration="1h56m" data-rating="7.9">
+                        <div class="h-40 bg-cover bg-center" style="background-image: url('https://m.media-amazon.com/images/M/MV5BNGU0NTA2YjctYWNlYy00ZDg1LTg5ZTItZWM3MWZiMDI5OGYzL2ltYWdlXkEyXkFqcGdeQXVyNDM3ODU2NDM@._V1_FMjpg_UX1000_.jpg')">
+                            <div class="bg-black bg-opacity-60 h-full flex items-end p-3">
+                                <div>
+                                    <h3 class="font-bold">Arrival</h3>
+                                    <p class="text-xs text-gray-300">2016 • Sci-Fi</p>
                                 </div>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Film 8 - Ex Machina -->
+                    <div class="film-card" data-video="https://www.youtube.com/embed/EoQuVnKhxaM" data-title="Ex Machina (2014)" data-duration="1h48m" data-rating="7.7">
+                        <div class="h-40 bg-cover bg-center" style="background-image: url('https://m.media-amazon.com/images/M/MV5BMTUxNzc0OTIxMV5BMl5BanBnXkFtZTgwNDI3NzU2NDE@._V1_.jpg')">
+                            <div class="bg-black bg-opacity-60 h-full flex items-end p-3">
+                                <div>
+                                    <h3 class="font-bold">Ex Machina</h3>
+                                    <p class="text-xs text-gray-300">2014 • Sci-Fi</p>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
+            </section>
         </main>
+        <!-- Footer -->
+        <footer class="mt-12 pt-6 border-t border-gray-800 text-center text-gray-400 text-sm">
+            <p>© 2024 CinéFutur - Tous droits réservés</p>
+            <p class="mt-1">Films intégrés depuis YouTube - À des fins éducatives uniquement</p>
         </footer>
     </div>
     <script>
+        // Configuration des films
+        const films = [
+            {
+                title: "Dune (2021)",
+                video: "https://www.youtube.com/embed/w0HgHet0sxg",
+                duration: "2h35m",
+                rating: "8.0"
+            },
+            {
+                title: "Interstellar (2014)",
+                video: "https://www.youtube.com/embed/zSWdZVtXT7E",
+                duration: "2h49m",
+                rating: "8.6"
+            },
+            {
+                title: "Blade Runner 2049 (2017)",
+                video: "https://www.youtube.com/embed/gCcx85zbxz4",
+                duration: "2h44m",
+                rating: "8.0"
+            },
+            {
+                title: "The Matrix (1999)",
+                video: "https://www.youtube.com/embed/vKQi3bBA1y8",
+                duration: "2h16m",
+                rating: "8.7"
+            },
+            {
+                title: "Inception (2010)",
+                video: "https://www.youtube.com/embed/YoHD9XEInc0",
+                duration: "2h28m",
+                rating: "8.8"
+            },
+            {
+                title: "Tenet (2020)",
+                video: "https://www.youtube.com/embed/LdOM0x0XDMo",
+                duration: "2h30m",
+                rating: "7.5"
+            },
+            {
+                title: "Arrival (2016)",
+                video: "https://www.youtube.com/embed/tFMo3UJ4B4g",
+                duration: "1h56m",
+                rating: "7.9"
+            },
+            {
+                title: "Ex Machina (2014)",
+                video: "https://www.youtube.com/embed/EoQuVnKhxaM",
+                duration: "1h48m",
+                rating: "7.7"
+            }
+        ];
+        // Éléments DOM
+        const mainVideo = document.getElementById('mainVideo');
+        const currentFilmTitle = document.getElementById('currentFilmTitle');
+        const currentFilmDuration = document.getElementById('currentFilmDuration');
+        const currentFilmRating = document.getElementById('currentFilmRating');
+        const progressFill = document.getElementById('progressFill');
+        const autoPlayBtn = document.getElementById('autoPlayBtn');
+        const nextFilmBtn = document.getElementById('nextFilmBtn');
+        const fullscreenBtn = document.getElementById('fullscreenBtn');
+        const filmCards = document.querySelectorAll('.film-card');
+        const mainVideoContainer = document.getElementById('mainVideoContainer');
+        // Variables d'état
+        let currentFilmIndex = 0;
+        let isAutoPlaying = false;
+        let autoPlayInterval;
+        let progressInterval;
+        // Charger un film
+        function loadFilm(index) {
+            if (index >= 0 && index < films.length) {
+                currentFilmIndex = index;
+                const film = films[index];
+                mainVideo.src = film.video;
+                currentFilmTitle.textContent = film.title;
+                currentFilmDuration.textContent = film.duration;
+                currentFilmRating.textContent = film.rating;
+                // Réinitialiser la barre de progression
+                progressFill.style.width = '0%';
+                // Démarrer la mise à jour de la progression
+                if (progressInterval) clearInterval(progressInterval);
+                progressInterval = setInterval(updateProgress, 1000);
+                // Si en mode auto, passer au film suivant après la durée estimée
+                if (isAutoPlaying) {
+                    if (autoPlayInterval) clearInterval(autoPlayInterval);
+                    const durationInMs = convertDurationToMs(film.duration);
+                    autoPlayInterval = setTimeout(playNextFilm, durationInMs);
                 }
+            }
         }
+        // Convertir la durée en millisecondes (approximatif)
+        function convertDurationToMs(duration) {
+            const [hours, minutes] = duration.split('h');
+            const mins = minutes ? minutes.replace('m', '') : '0';
+            return (parseInt(hours) * 3600 + parseInt(mins) * 60) * 1000;
         }
+        // Mettre à jour la barre de progression
+        function updateProgress() {
+            const duration = convertDurationToMs(films[currentFilmIndex].duration);
+            const elapsed = parseInt(progressFill.style.width || '0');
+            if (elapsed < 100) {
+                progressFill.style.width = (elapsed + (100 / (duration / 1000))) + '%';
+            } else {
+                clearInterval(progressInterval);
+                if (isAutoPlaying) playNextFilm();
+            }
         }
+        // Jouer le film suivant
+        function playNextFilm() {
+            const nextIndex = (currentFilmIndex + 1) % films.length;
+            loadFilm(nextIndex);
         }
+        // Basculer le mode auto
+        function toggleAutoPlay() {
+            isAutoPlaying = !isAutoPlaying;
+            if (isAutoPlaying) {
+                autoPlayBtn.innerHTML = '<i class="fas fa-pause mr-2"></i> Auto';
+                const durationInMs = convertDurationToMs(films[currentFilmIndex].duration);
+                autoPlayInterval = setTimeout(playNextFilm, durationInMs);
+            } else {
+                autoPlayBtn.innerHTML = '<i class="fas fa-play mr-2"></i> Auto';
+                if (autoPlayInterval) clearInterval(autoPlayInterval);
+            }
         }
+        // Plein écran
+        function toggleFullscreen() {
+            if (!document.fullscreenElement) {
+                mainVideoContainer.requestFullscreen().catch(err => {
+                    alert(`Erreur plein écran: ${err.message}`);
                 });
+            } else {
+                document.exitFullscreen();
+            }
+        }
+        // Événements
+        autoPlayBtn.addEventListener('click', toggleAutoPlay);
+        nextFilmBtn.addEventListener('click', playNextFilm);
+        fullscreenBtn.addEventListener('click', toggleFullscreen);
+        filmCards.forEach((card, index) => {
+            card.addEventListener('click', () => {
+                // Arrêter le mode auto si actif
+                if (isAutoPlaying) {
+                    toggleAutoPlay();
+                }
+                // Charger le film sélectionné
+                loadFilm(index);
             });
         });
+        // Charger le premier film au démarrage
+        loadFilm(0);
     </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=docto41/importation" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

prompts.txt CHANGED Viewed

	@@ -1 +1,7 @@
1	- importer un site à partir d'un url , image , zip etc.. en version futuriste

+importer un site à partir d'un url , image , zip etc.. en version futuriste
+CORRIGER LES ERREUR ET JE VEUX EXPORTER APRES
+je peux pas exporter
+https://huggingface.co/spaces/docto41/cinefutur
+ajouter 7894 nouveau film 2025 et a regarder en auto
+CHARGER TOUTES LES FONCTION EN AUTOMATIQUE
+je veux pas de site d'exemple je veux de vrais film a regarder