Spaces:

docto41
/

code-master

Running

App Files Files Community

docto41 commited on May 6, 2025

Commit

bbcacec

verified ·

1 Parent(s): 472efb7

Add 2 files

Browse files

Files changed (2) hide show

index.html +865 -402
prompts.txt +8 -1

index.html CHANGED Viewed

@@ -3,459 +3,922 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>CodeMaster - Correcteur de Code Puissant</title>
     <script src="https://cdn.tailwindcss.com"></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-dark.min.css">
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/javascript.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/css.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/xml.min.js"></script>
     <style>
-        .editor-container {
-            position: relative;
-            height: 500px;
         }
-        .editor {
-            position: absolute;
-            top: 0;
-            right: 0;
-            bottom: 0;
-            left: 0;
-            font-family: 'Fira Code', monospace;
-            font-size: 14px;
-            line-height: 1.5;
-            tab-size: 2;
         }
-        .error-marker {
-            position: absolute;
-            background-color: rgba(255, 0, 0, 0.2);
         }
-        .warning-marker {
-            position: absolute;
-            background-color: rgba(255, 165, 0, 0.2);
         }
-        .suggestion-marker {
-            position: absolute;
-            background-color: rgba(100, 149, 237, 0.2);
         }
-        .hljs {
-            background: transparent !important;
         }
-        .custom-scrollbar::-webkit-scrollbar {
-            width: 8px;
-            height: 8px;
         }
-        .custom-scrollbar::-webkit-scrollbar-track {
-            background: #2d3748;
         }
-        .custom-scrollbar::-webkit-scrollbar-thumb {
-            background: #4a5568;
-            border-radius: 4px;
         }
-        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
-            background: #718096;
         }
     </style>
 </head>
-<body class="bg-gray-900 text-gray-100 min-h-screen">
-    <div class="container mx-auto px-4 py-8">
-        <header class="mb-8">
-            <div class="flex items-center justify-between">
-                <div class="flex items-center space-x-4">
-                    <div class="w-10 h-10 bg-indigo-600 rounded-lg flex items-center justify-center">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
-                        </svg>
-                    </div>
-                    <h1 class="text-3xl font-bold bg-gradient-to-r from-indigo-400 to-purple-600 bg-clip-text text-transparent">CodeMaster</h1>
                 </div>
-                <div class="flex items-center space-x-4">
-                    <button id="run-btn" class="px-4 py-2 bg-green-600 hover:bg-green-700 rounded-lg font-medium flex items-center space-x-2 transition-colors">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
-                        </svg>
-                        <span>Exécuter</span>
                     </button>
                 </div>
             </div>
-            <p class="mt-2 text-gray-400">Correcteur de code intelligent avec analyse en temps réel</p>
-        </header>
-        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
-            <div class="space-y-6">
-                <div class="bg-gray-800 rounded-xl overflow-hidden shadow-lg">
-                    <div class="px-4 py-3 bg-gray-700 flex items-center justify-between">
-                        <div class="flex items-center space-x-2">
-                            <div class="w-3 h-3 rounded-full bg-red-500"></div>
-                            <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
-                            <div class="w-3 h-3 rounded-full bg-green-500"></div>
-                        </div>
-                        <div class="flex items-center space-x-4">
-                            <select id="language-select" class="bg-gray-800 text-gray-300 text-sm rounded px-2 py-1 focus:outline-none">
-                                <option value="javascript">JavaScript</option>
-                                <option value="html">HTML</option>
-                                <option value="css">CSS</option>
-                                <option value="python">Python</option>
-                                <option value="php">PHP</option>
-                            </select>
                         </div>
                     </div>
-                    <div class="editor-container">
-                        <pre id="editor" class="editor">function example() {
-  // Votre code ici
-  let x = 10;
-  if (x == "10") {
-    console.log("Égalité faible");
-  }
-  const unusedVar = "Je ne suis pas utilisé";
-  return x * 2;
-}</pre>
-                    </div>
                 </div>
-                <div class="bg-gray-800 rounded-xl overflow-hidden shadow-lg">
-                    <div class="px-4 py-3 bg-gray-700">
-                        <h3 class="font-medium">Analyse du code</h3>
-                    </div>
-                    <div id="analysis-results" class="p-4 max-h-64 overflow-y-auto custom-scrollbar">
-                        <div class="text-gray-400 italic">Le code sera analysé automatiquement...</div>
-                    </div>
                 </div>
             </div>
-            <div class="bg-gray-800 rounded-xl overflow-hidden shadow-lg">
-                <div class="px-4 py-3 bg-gray-700 flex items-center justify-between">
-                    <h3 class="font-medium">Résultat / Sortie</h3>
-                    <div class="flex items-center space-x-2">
-                        <button id="clear-output" class="text-gray-400 hover:text-white transition-colors">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-                                <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
-                            </svg>
-                        </button>
-                    </div>
                 </div>
-                <div id="output" class="p-4 h-full min-h-96 overflow-y-auto custom-scrollbar">
-                    <div class="text-gray-400 italic">La sortie s'affichera ici...</div>
                 </div>
             </div>
         </div>
-        <div class="mt-8 bg-gray-800 rounded-xl overflow-hidden shadow-lg">
-            <div class="px-4 py-3 bg-gray-700">
-                <h3 class="font-medium">Suggestions d'amélioration</h3>
             </div>
-            <div id="suggestions" class="p-4">
-                <div class="text-gray-400 italic">Les suggestions apparaîtront après l'analyse...</div>
             </div>
         </div>
-    </div>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            // Initialisation de Highlight.js
-            hljs.highlightAll();
-            const editor = document.getElementById('editor');
-            const languageSelect = document.getElementById('language-select');
-            const runBtn = document.getElementById('run-btn');
-            const clearOutput = document.getElementById('clear-output');
-            const output = document.getElementById('output');
-            const analysisResults = document.getElementById('analysis-results');
-            const suggestions = document.getElementById('suggestions');
-            let markers = [];
-            // Détection automatique des erreurs
-            editor.addEventListener('input', debounce(analyzeCode, 500));
-            // Changement de langage
-            languageSelect.addEventListener('change', function() {
-                analyzeCode();
-            });
-            // Exécution du code
-            runBtn.addEventListener('click', executeCode);
-            // Effacer la sortie
-            clearOutput.addEventListener('click', function() {
-                output.innerHTML = '<div class="text-gray-400 italic">La sortie s\'affichera ici...</div>';
-            });
-            // Analyse du code
-            function analyzeCode() {
-                // Effacer les marqueurs précédents
-                clearMarkers();
-                const code = editor.textContent;
-                const language = languageSelect.value;
-                let errors = [];
-                let warnings = [];
-                let suggestionsList = [];
-                // Analyse basique (simulée)
-                if (language === 'javascript') {
-                    // Détection d'égalité faible
-                    const weakEqualRegex = /==/g;
-                    let match;
-                    while ((match = weakEqualRegex.exec(code)) !== null) {
-                        warnings.push({
-                            message: "Utilisation d'égalité faible (==). Préférez l'égalité stricte (===).",
-                            line: getLineNumber(code, match.index),
-                            column: match.index - getLineStartIndex(code, getLineNumber(code, match.index)) + 1,
-                            index: match.index,
-                            length: match[0].length
-                        });
-                    }
-                    // Détection de variables non utilisées
-                    const unusedVarRegex = /(const|let|var)\s+([a-zA-Z_$][0-9a-zA-Z_$]*)(?![^(]*\))(?!\s*=[^=])[^;]*?(?=;|$)/g;
-                    while ((match = unusedVarRegex.exec(code)) !== null) {
-                        const varName = match[2];
-                        const varRegex = new RegExp(`\\b${varName}\\b(?!\\s*=[^=])`, 'g');
-                        const usageCount = (code.match(varRegex) || []).length;
-                        if (usageCount <= 1) {
-                            warnings.push({
-                                message: `Variable '${varName}' déclarée mais jamais utilisée.`,
-                                line: getLineNumber(code, match.index),
-                                column: match.index - getLineStartIndex(code, getLineNumber(code, match.index)) + 1,
-                                index: match.index,
-                                length: match[0].length
-                            });
-                        }
-                    }
-                    // Détection de return sans valeur
-                    const emptyReturnRegex = /return\s*;(?!\s*$)/g;
-                    while ((match = emptyReturnRegex.exec(code)) !== null) {
-                        errors.push({
-                            message: "Return sans valeur spécifiée.",
-                            line: getLineNumber(code, match.index),
-                            column: match.index - getLineStartIndex(code, getLineNumber(code, match.index)) + 1,
-                            index: match.index,
-                            length: match[0].length
-                        });
-                    }
-                    // Suggestions d'amélioration
-                    if (code.includes('console.log')) {
-                        suggestionsList.push({
-                            message: "Pour un meilleur suivi, envisagez d'utiliser des librairies de logging comme Winston ou Pino en production.",
-                            category: "Best Practice"
-                        });
-                    }
-                    if (code.includes('function') && !code.includes('arrow function')) {
-                        suggestionsList.push({
-                            message: "Pour un code plus concis, envisagez d'utiliser les fonctions fléchées (=>) lorsque c'est approprié.",
-                            category: "Modern Syntax"
-                        });
-                    }
-                }
-                // Mise à jour de l'interface
-                updateMarkers([...errors, ...warnings]);
-                updateAnalysisResults(errors, warnings);
-                updateSuggestions(suggestionsList);
-                // Re-highlight le code
-                hljs.highlightElement(editor);
-            }
-            // Exécution du code
-            function executeCode() {
-                const code = editor.textContent;
-                const language = languageSelect.value;
-                output.innerHTML = '';
-                try {
-                    if (language === 'javascript') {
-                        // Crée un contexte sécurisé pour l'exécution
-                        const originalConsoleLog = console.log;
-                        let logs = [];
-                        console.log = function() {
-                            logs.push(Array.from(arguments).join(' '));
-                            originalConsoleLog.apply(console, arguments);
-                        };
-                        // Exécute le code dans un contexte sécurisé
-                        const result = new Function(code)();
-                        // Restaure la console originale
-                        console.log = originalConsoleLog;
-                        // Affiche les logs
-                        if (logs.length > 0) {
-                            const logsDiv = document.createElement('div');
-                            logsDiv.className = 'mb-4';
-                            logsDiv.innerHTML = `<div class="text-gray-400 mb-1">Sortie console:</div>
-                                                <div class="bg-gray-700 p-3 rounded-lg font-mono text-sm">${logs.join('<br>')}</div>`;
-                            output.appendChild(logsDiv);
-                        }
-                        // Affiche le résultat
-                        if (result !== undefined) {
-                            const resultDiv = document.createElement('div');
-                            resultDiv.className = 'mb-4';
-                            resultDiv.innerHTML = `<div class="text-gray-400 mb-1">Résultat retourné:</div>
-                                                  <div class="bg-gray-700 p-3 rounded-lg font-mono text-sm">${JSON.stringify(result)}</div>`;
-                            output.appendChild(resultDiv);
-                        }
-                    } else {
-                        output.innerHTML = '<div class="text-yellow-400">L\'exécution directe n\'est disponible que pour JavaScript.</div>';
-                    }
-                } catch (error) {
-                    output.innerHTML = `<div class="text-red-400 font-mono">Erreur d'exécution: ${error.message}</div>`;
-                }
-            }
-            // Fonctions utilitaires
-            function getLineNumber(text, index) {
-                return text.substring(0, index).split('\n').length;
-            }
-            function getLineStartIndex(text, lineNumber) {
-                const lines = text.split('\n');
-                if (lineNumber < 1 || lineNumber > lines.length) return 0;
-                let index = 0;
-                for (let i = 0; i < lineNumber - 1; i++) {
-                    index += lines[i].length + 1; // +1 pour le saut de ligne
-                }
-                return index;
-            }
-            function updateMarkers(issues) {
-                clearMarkers();
-                const editorRect = editor.getBoundingClientRect();
-                const lineHeight = parseInt(getComputedStyle(editor).lineHeight);
-                const charWidth = 8; // Approximation de la largeur d'un caractère
-                issues.forEach(issue => {
-                    const lineNumber = issue.line;
-                    const column = issue.column;
-                    // Crée un marqueur visuel
-                    const marker = document.createElement('div');
-                    marker.className = issue.message.includes('Utilisation') || issue.message.includes('Variable') ?
-                                        'warning-marker' : 'error-marker';
-                    // Positionne le marqueur
-                    const top = (lineNumber - 1) * lineHeight;
-                    const left = (column - 1) * charWidth;
-                    marker.style.top = `${top}px`;
-                    marker.style.left = `${left}px`;
-                    marker.style.width = `${issue.length * charWidth}px`;
-                    marker.style.height = `${lineHeight}px`;
-                    // Ajoute un tooltip
-                    marker.title = issue.message;
-                    // Ajoute le marqueur à l'éditeur
-                    editor.parentNode.appendChild(marker);
-                    markers.push(marker);
-                });
-            }
-            function clearMarkers() {
-                markers.forEach(marker => marker.remove());
-                markers = [];
-            }
-            function updateAnalysisResults(errors, warnings) {
-                if (errors.length === 0 && warnings.length === 0) {
-                    analysisResults.innerHTML = '<div class="text-green-400">Aucun problème détecté. Code propre!</div>';
-                    return;
-                }
-                let html = '';
-                if (errors.length > 0) {
-                    html += '<div class="mb-4">';
-                    html += '<div class="text-red-400 font-medium mb-2">Erreurs:</div>';
-                    html += '<ul class="space-y-2">';
-                    errors.forEach(error => {
-                        html += `<li class="flex items-start">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-red-500 mt-0.5 mr-2 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
-                                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
-                                    </svg>
-                                    <div>
-                                        <span class="font-mono">Ligne ${error.line}:${error.column}</span> - ${error.message}
-                                    </div>
-                                </li>`;
-                    });
-                    html += '</ul>';
-                    html += '</div>';
-                }
-                if (warnings.length > 0) {
-                    html += '<div>';
-                    html += '<div class="text-yellow-400 font-medium mb-2">Avertissements:</div>';
-                    html += '<ul class="space-y-2">';
-                    warnings.forEach(warning => {
-                        html += `<li class="flex items-start">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-yellow-500 mt-0.5 mr-2 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
-                                        <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
-                                    </svg>
-                                    <div>
-                                        <span class="font-mono">Ligne ${warning.line}:${warning.column}</span> - ${warning.message}
-                                    </div>
-                                </li>`;
-                    });
-                    html += '</ul>';
-                    html += '</div>';
-                }
-                analysisResults.innerHTML = html;
-            }
-            function updateSuggestions(suggestionsList) {
-                if (suggestionsList.length === 0) {
-                    suggestions.innerHTML = '<div class="text-gray-400 italic">Aucune suggestion pour le moment. Continuez votre bon travail!</div>';
-                    return;
-                }
-                let html = '<div class="grid grid-cols-1 gap-4">';
-                suggestionsList.forEach(suggestion => {
-                    html += `<div class="bg-gray-700 p-4 rounded-lg">
-                                <div class="flex items-start">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-400 mt-0.5 mr-2 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
-                                        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
-                                    </svg>
-                                    <div>
-                                        <div class="text-blue-400 text-sm font-medium mb-1">${suggestion.category}</div>
-                                        <div>${suggestion.message}</div>
-                                    </div>
-                                </div>
-                            </div>`;
-                });
-                html += '</div>';
-                suggestions.innerHTML = html;
-            }
-            function debounce(func, wait) {
-                let timeout;
-                return function() {
-                    const context = this;
-                    const args = arguments;
-                    clearTimeout(timeout);
-                    timeout = setTimeout(() => {
-                        func.apply(context, args);
-                    }, wait);
-                };
-            }
-            // Analyse initiale
-            analyzeCode();
-        });
-    </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/code-master" 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>MegaFlix - 6,524,111 films en streaming automatique</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>
+        @keyframes float {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(-10px); }
         }
+        .floating {
+            animation: float 6s ease-in-out infinite;
         }
+        .gradient-text {
+            background: linear-gradient(90deg, #ff4d4d, #f9cb28, #42ff75, #4d79ff, #c04dff);
+            background-size: 400% 400%;
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+            animation: gradient 15s ease infinite;
         }
+        @keyframes gradient {
+            0% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
         }
+        .stats-counter {
+            font-family: 'Courier New', monospace;
         }
+        .film-card:hover .film-overlay {
+            opacity: 1;
         }
+        .scroll-container {
+            scrollbar-width: none;
         }
+        .scroll-container::-webkit-scrollbar {
+            display: none;
         }
+        .ai-grid {
+            background-image:
+                radial-gradient(circle at 10% 20%, rgba(255, 0, 128, 0.1) 0%, transparent 20%),
+                radial-gradient(circle at 90% 30%, rgba(0, 200, 255, 0.1) 0%, transparent 25%),
+                radial-gradient(circle at 50% 80%, rgba(162, 0, 255, 0.1) 0%, transparent 30%);
         }
+        .film-poster {
+            transition: transform 0.3s ease;
+        }
+        .film-card:hover .film-poster {
+            transform: scale(1.05);
         }
     </style>
 </head>
+<body class="bg-black text-white min-h-screen">
+    <!-- Barre de navigation -->
+    <nav class="bg-gray-900/80 backdrop-blur-md fixed w-full z-50 border-b border-gray-800">
+        <div class="container mx-auto px-6 py-4 flex justify-between items-center">
+            <div class="flex items-center space-x-4">
+                <div class="w-12 h-12 bg-gradient-to-r from-red-600 to-purple-600 rounded-lg flex items-center justify-center">
+                    <i class="fas fa-film text-2xl"></i>
                 </div>
+                <h1 class="text-3xl font-bold gradient-text">MegaFlix</h1>
+            </div>
+            <div class="hidden md:flex items-center space-x-8">
+                <a href="#" class="hover:text-red-500 transition">Accueil</a>
+                <a href="#films" class="hover:text-red-500 transition">Films</a>
+                <a href="#series" class="hover:text-red-500 transition">Séries</a>
+                <a href="#categories" class="hover:text-red-500 transition">Catégories</a>
+                <a href="#nouveautes" class="hover:text-red-500 transition">Nouveautés</a>
+            </div>
+            <div class="flex items-center space-x-4">
+                <button class="px-4 py-2 bg-gradient-to-r from-red-600 to-purple-600 rounded-full font-medium hover:opacity-90 transition" onclick="openIADashboard()">
+                    <i class="fas fa-robot mr-2"></i> IA Dashboard
+                </button>
+                <button class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-gray-700 transition" onclick="openLogin()">
+                    <i class="fas fa-user"></i>
+                </button>
+            </div>
+        </div>
+    </nav>
+    <!-- Hero Section -->
+    <section class="pt-32 pb-20 px-6 ai-grid">
+        <div class="container mx-auto flex flex-col md:flex-row items-center">
+            <div class="md:w-1/2 mb-12 md:mb-0">
+                <h2 class="text-5xl md:text-6xl font-bold mb-6 leading-tight">
+                    <span class="gradient-text">6,524,111 films</span> <br>
+                    gérés par <span class="text-red-500">142,521 IA</span>
+                </h2>
+                <p class="text-xl text-gray-400 mb-8">
+                    Le plus grand système de streaming automatisé au monde. Découvrez des films en français 24h/24 grâce à notre armée d'intelligences artificielles.
+                </p>
+                <div class="flex flex-wrap gap-4">
+                    <button class="px-8 py-4 bg-gradient-to-r from-red-600 to-purple-600 rounded-full font-bold text-lg hover:opacity-90 transition flex items-center" onclick="openRandomMovie()">
+                        <i class="fas fa-play mr-3"></i> Regarder maintenant
+                    </button>
+                    <button class="px-8 py-4 bg-gray-800 rounded-full font-bold text-lg hover:bg-gray-700 transition flex items-center" onclick="scrollToFilms()">
+                        <i class="fas fa-info-circle mr-3"></i> En savoir plus
                     </button>
                 </div>
             </div>
+            <div class="md:w-1/2 relative floating">
+                <div class="relative">
+                    <div class="absolute -inset-4 bg-gradient-to-r from-red-600 to-purple-600 rounded-3xl blur-lg opacity-30"></div>
+                    <div class="relative bg-gray-900 rounded-2xl overflow-hidden border border-gray-800">
+                        <img src="https://image.tmdb.org/t/p/original/8Vt6mWEReuy4Of61Lnj5Xj704m8.jpg"
+                             alt="Système IA MegaFlix" class="w-full h-auto">
+                        <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-transparent flex items-end p-6">
+                            <div>
+                                <div class="text-sm text-gray-400 mb-2">Recommandé par l'IA</div>
+                                <h3 class="text-2xl font-bold mb-2">Dune: Partie 2</h3>
+                                <div class="flex items-center space-x-4 text-sm">
+                                    <span class="text-green-500">97% Match IA</span>
+                                    <span>2024</span>
+                                    <span>2h46m</span>
+                                </div>
+                                <button class="mt-4 px-6 py-2 bg-red-600 rounded-lg font-medium hover:bg-red-700 transition" onclick="openMoviePlayer('Dune: Partie 2', 'https://www.youtube.com/embed/WarMeLeeswQ')">
+                                    <i class="fas fa-play mr-2"></i> Regarder
+                                </button>
+                            </div>
                         </div>
                     </div>
                 </div>
+            </div>
+        </div>
+    </section>
+    <!-- Statistiques en direct -->
+    <section class="py-12 bg-gradient-to-b from-gray-900/50 to-black">
+        <div class="container mx-auto px-6">
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
+                <div class="bg-gray-900/50 rounded-xl p-6 border border-gray-800">
+                    <div class="text-4xl md:text-5xl font-bold text-red-500 stats-counter" data-count="6524111">6,524,111</div>
+                    <div class="text-gray-400 mt-2">Films disponibles</div>
+                </div>
+                <div class="bg-gray-900/50 rounded-xl p-6 border border-gray-800">
+                    <div class="text-4xl md:text-5xl font-bold text-purple-500 stats-counter" data-count="142521">142,521</div>
+                    <div class="text-gray-400 mt-2">IA actives</div>
+                </div>
+                <div class="bg-gray-900/50 rounded-xl p-6 border border-gray-800">
+                    <div class="text-4xl md:text-5xl font-bold text-blue-500 stats-counter" data-count="12784">12,784</div>
+                    <div class="text-gray-400 mt-2">Nouveaux films/jour</div>
+                </div>
+                <div class="bg-gray-900/50 rounded-xl p-6 border border-gray-800">
+                    <div class="text-4xl md:text-5xl font-bold text-green-500 stats-counter" data-count="99">99.9</div>
+                    <div class="text-gray-400 mt-2">% Disponibilité</div>
                 </div>
             </div>
+        </div>
+    </section>
+    <!-- Films recommandés -->
+    <section id="films" class="py-16 px-6 bg-gradient-to-b from-black to-gray-900/50">
+        <div class="container mx-auto">
+            <div class="flex justify-between items-center mb-10">
+                <h2 class="text-3xl font-bold">Films Populaires</h2>
+                <div class="flex space-x-4">
+                    <button class="w-12 h-12 rounded-full bg-gray-800 flex items-center justify-center hover:bg-gray-700 transition" onclick="scrollFilmsLeft('popular')">
+                        <i class="fas fa-chevron-left"></i>
+                    </button>
+                    <button class="w-12 h-12 rounded-full bg-gray-800 flex items-center justify-center hover:bg-gray-700 transition" onclick="scrollFilmsRight('popular')">
+                        <i class="fas fa-chevron-right"></i>
+                    </button>
                 </div>
+            </div>
+            <div class="relative">
+                <div id="popular-films" class="scroll-container overflow-x-auto pb-6 -mx-2">
+                    <div class="flex space-x-6 px-2" style="width: max-content;">
+                        <!-- Film 1 -->
+                        <div class="flex-shrink-0 w-64 film-card">
+                            <div class="relative rounded-xl overflow-hidden">
+                                <img src="https://image.tmdb.org/t/p/w500/1pdfLvkbY9ohJlCjQH2CZjjYVvJ.jpg"
+                                     alt="Oppenheimer" class="w-full h-80 object-cover film-poster">
+                                <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent film-overlay opacity-0 transition flex flex-col justify-end p-4">
+                                    <h3 class="text-xl font-bold mb-1">Oppenheimer</h3>
+                                    <div class="flex items-center space-x-4 text-sm mb-3">
+                                        <span class="text-green-500">95% Match</span>
+                                        <span>2023</span>
+                                        <span>3h00m</span>
+                                    </div>
+                                    <p class="text-sm text-gray-300 line-clamp-2">L'histoire du physicien J. Robert Oppenheimer et son rôle dans le développement de la bombe atomique.</p>
+                                    <button class="mt-4 w-full py-2 bg-red-600 rounded-lg font-medium hover:bg-red-700 transition" onclick="openMoviePlayer('Oppenheimer', 'https://www.youtube.com/embed/uYPbbksJxIg')">
+                                        <i class="fas fa-play mr-2"></i> Regarder
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                        <!-- Film 2 -->
+                        <div class="flex-shrink-0 w-64 film-card">
+                            <div class="relative rounded-xl overflow-hidden">
+                                <img src="https://image.tmdb.org/t/p/w500/8Vt6mWEReuy4Of61Lnj5Xj704m8.jpg"
+                                     alt="Dune: Partie 2" class="w-full h-80 object-cover film-poster">
+                                <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent film-overlay opacity-0 transition flex flex-col justify-end p-4">
+                                    <h3 class="text-xl font-bold mb-1">Dune: Partie 2</h3>
+                                    <div class="flex items-center space-x-4 text-sm mb-3">
+                                        <span class="text-green-500">97% Match</span>
+                                        <span>2024</span>
+                                        <span>2h46m</span>
+                                    </div>
+                                    <p class="text-sm text-gray-300 line-clamp-2">Paul Atreides s'unit avec les Fremen pour se venger des conspirateurs qui ont détruit sa famille.</p>
+                                    <button class="mt-4 w-full py-2 bg-red-600 rounded-lg font-medium hover:bg-red-700 transition" onclick="openMoviePlayer('Dune: Partie 2', 'https://www.youtube.com/embed/WarMeLeeswQ')">
+                                        <i class="fas fa-play mr-2"></i> Regarder
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                        <!-- Film 3 -->
+                        <div class="flex-shrink-0 w-64 film-card">
+                            <div class="relative rounded-xl overflow-hidden">
+                                <img src="https://image.tmdb.org/t/p/w500/kDp1vUBnMpe8ak4rjgl3cLELqjU.jpg"
+                                     alt="The Batman" class="w-full h-80 object-cover film-poster">
+                                <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent film-overlay opacity-0 transition flex flex-col justify-end p-4">
+                                    <h3 class="text-xl font-bold mb-1">The Batman</h3>
+                                    <div class="flex items-center space-x-4 text-sm mb-3">
+                                        <span class="text-green-500">93% Match</span>
+                                        <span>2022</span>
+                                        <span>2h56m</span>
+                                    </div>
+                                    <p class="text-sm text-gray-300 line-clamp-2">Batman enquête sur la corruption à Gotham et affronte le Riddler, un tueur en série ciblant l'élite.</p>
+                                    <button class="mt-4 w-full py-2 bg-red-600 rounded-lg font-medium hover:bg-red-700 transition" onclick="openMoviePlayer('The Batman', 'https://www.youtube.com/embed/mqqft2x_Aa4')">
+                                        <i class="fas fa-play mr-2"></i> Regarder
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                        <!-- Film 4 -->
+                        <div class="flex-shrink-0 w-64 film-card">
+                            <div class="relative rounded-xl overflow-hidden">
+                                <img src="https://image.tmdb.org/t/p/w500/8Gxv8gSFCU0XGDNyEG9ZIQW3dCw.jpg"
+                                     alt="Avatar 2" class="w-full h-80 object-cover film-poster">
+                                <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent film-overlay opacity-0 transition flex flex-col justify-end p-4">
+                                    <h3 class="text-xl font-bold mb-1">Avatar 2</h3>
+                                    <div class="flex items-center space-x-4 text-sm mb-3">
+                                        <span class="text-green-500">91% Match</span>
+                                        <span>2022</span>
+                                        <span>3h12m</span>
+                                    </div>
+                                    <p class="text-sm text-gray-300 line-clamp-2">Jake Sully et Ney'tiri forment une famille et font tout pour rester ensemble face à une nouvelle menace.</p>
+                                    <button class="mt-4 w-full py-2 bg-red-600 rounded-lg font-medium hover:bg-red-700 transition" onclick="openMoviePlayer('Avatar 2', 'https://www.youtube.com/embed/d9MyW72ELq0')">
+                                        <i class="fas fa-play mr-2"></i> Regarder
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                        <!-- Film 5 -->
+                        <div class="flex-shrink-0 w-64 film-card">
+                            <div class="relative rounded-xl overflow-hidden">
+                                <img src="https://image.tmdb.org/t/p/w500/1X7vow16X7CnCi9kOALzgUNW39M.jpg"
+                                     alt="Top Gun: Maverick" class="w-full h-80 object-cover film-poster">
+                                <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent film-overlay opacity-0 transition flex flex-col justify-end p-4">
+                                    <h3 class="text-xl font-bold mb-1">Top Gun: Maverick</h3>
+                                    <div class="flex items-center space-x-4 text-sm mb-3">
+                                        <span class="text-green-500">96% Match</span>
+                                        <span>2022</span>
+                                        <span>2h11m</span>
+                                    </div>
+                                    <p class="text-sm text-gray-300 line-clamp-2">Maverick affronte son passé tout en formant un groupe de jeunes pilotes pour une mission périlleuse.</p>
+                                    <button class="mt-4 w-full py-2 bg-red-600 rounded-lg font-medium hover:bg-red-700 transition" onclick="openMoviePlayer('Top Gun: Maverick', 'https://www.youtube.com/embed/giXco2jaZ_4')">
+                                        <i class="fas fa-play mr-2"></i> Regarder
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                        <!-- Film 6 -->
+                        <div class="flex-shrink-0 w-64 film-card">
+                            <div class="relative rounded-xl overflow-hidden">
+                                <img src="https://image.tmdb.org/t/p/w500/9dKCd55IuTT5QRs989m9Qlb7d2B.jpg"
+                                     alt="Interstellar" class="w-full h-80 object-cover film-poster">
+                                <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent film-overlay opacity-0 transition flex flex-col justify-end p-4">
+                                    <h3 class="text-xl font-bold mb-1">Interstellar</h3>
+                                    <div class="flex items-center space-x-4 text-sm mb-3">
+                                        <span class="text-green-500">94% Match</span>
+                                        <span>2014</span>
+                                        <span>2h49m</span>
+                                    </div>
+                                    <p class="text-sm text-gray-300 line-clamp-2">Une équipe d'explorateurs voyage à travers un trou de ver dans l'espace pour sauver l'humanité.</p>
+                                    <button class="mt-4 w-full py-2 bg-red-600 rounded-lg font-medium hover:bg-red-700 transition" onclick="openMoviePlayer('Interstellar', 'https://www.youtube.com/embed/zSWdZVtXT7E')">
+                                        <i class="fas fa-play mr-2"></i> Regarder
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                        <!-- Film 7 -->
+                        <div class="flex-shrink-0 w-64 film-card">
+                            <div class="relative rounded-xl overflow-hidden">
+                                <img src="https://image.tmdb.org/t/p/w500/8UlWHLMpgZm9bx6QYh0NFoq67TZ.jpg"
+                                     alt="The Dark Knight" class="w-full h-80 object-cover film-poster">
+                                <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent film-overlay opacity-0 transition flex flex-col justify-end p-4">
+                                    <h3 class="text-xl font-bold mb-1">The Dark Knight</h3>
+                                    <div class="flex items-center space-x-4 text-sm mb-3">
+                                        <span class="text-green-500">98% Match</span>
+                                        <span>2008</span>
+                                        <span>2h32m</span>
+                                    </div>
+                                    <p class="text-sm text-gray-300 line-clamp-2">Batman, Gordon et Harvey Dent s'unissent contre le chaos orchestré par le Joker à Gotham.</p>
+                                    <button class="mt-4 w-full py-2 bg-red-600 rounded-lg font-medium hover:bg-red-700 transition" onclick="openMoviePlayer('The Dark Knight', 'https://www.youtube.com/embed/EXeTwQWrcwY')">
+                                        <i class="fas fa-play mr-2"></i> Regarder
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                        <!-- Film 8 -->
+                        <div class="flex-shrink-0 w-64 film-card">
+                            <div class="relative rounded-xl overflow-hidden">
+                                <img src="https://image.tmdb.org/t/p/w500/7WsyChQLEftFiDOVTGkv3hFpyyt.jpg"
+                                     alt="Avengers: Endgame" class="w-full h-80 object-cover film-poster">
+                                <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent film-overlay opacity-0 transition flex flex-col justify-end p-4">
+                                    <h3 class="text-xl font-bold mb-1">Avengers: Endgame</h3>
+                                    <div class="flex items-center space-x-4 text-sm mb-3">
+                                        <span class="text-green-500">95% Match</span>
+                                        <span>2019</span>
+                                        <span>3h01m</span>
+                                    </div>
+                                    <p class="text-sm text-gray-300 line-clamp-2">Les Avengers tentent de restaurer l'univers après les événements dévastateurs de Infinity War.</p>
+                                    <button class="mt-4 w-full py-2 bg-red-600 rounded-lg font-medium hover:bg-red-700 transition" onclick="openMoviePlayer('Avengers: Endgame', 'https://www.youtube.com/embed/TcMBFSGVi1c')">
+                                        <i class="fas fa-play mr-2"></i> Regarder
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
+    </section>
+    <!-- Nouveautés -->
+    <section id="nouveautes" class="py-16 px-6 bg-black">
+        <div class="container mx-auto">
+            <div class="flex justify-between items-center mb-10">
+                <h2 class="text-3xl font-bold">Nouveautés</h2>
+                <div class="flex space-x-4">
+                    <button class="w-12 h-12 rounded-full bg-gray-800 flex items-center justify-center hover:bg-gray-700 transition" onclick="scrollFilmsLeft('new')">
+                        <i class="fas fa-chevron-left"></i>
+                    </button>
+                    <button class="w-12 h-12 rounded-full bg-gray-800 flex items-center justify-center hover:bg-gray-700 transition" onclick="scrollFilmsRight('new')">
+                        <i class="fas fa-chevron-right"></i>
+                    </button>
+                </div>
             </div>
+            <div class="relative">
+                <div id="new-films" class="scroll-container overflow-x-auto pb-6 -mx-2">
+                    <div class="flex space-x-6 px-2" style="width: max-content;">
+                        <!-- Film 1 -->
+                        <div class="flex-shrink-0 w-64 film-card">
+                            <div class="relative rounded-xl overflow-hidden">
+                                <img src="https://image.tmdb.org/t/p/w500/1XDDXPXGiI8id7MrUxK36ke7gkX.jpg"
+                                     alt="Furiosa" class="w-full h-80 object-cover film-poster">
+                                <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent film-overlay opacity-0 transition flex flexocol justify-end p-4">
+                                    <h3 class="text-xl font-bold mb-1">Furiosa</h3>
+                                    <div class="flex items-center space-x-4 text-sm mb-3">
+                                        <span class="text-green-500">92% Match</span>
+                                        <span>2024</span>
+                                        <span>2h28m</span>
+                                    </div>
+                                    <p class="text-sm text-gray-300 line-clamp-2">L'histoire de la jeune Furiosa avant sa rencontre avec Max dans Fury Road.</p>
+                                    <button class="mt-4 w-full py-2 bg-red-600 rounded-lg font-medium hover:bg-red-700 transition" onclick="openMoviePlayer('Furiosa', 'https://www.youtube.com/embed/XJMuhwVlca4')">
+                                        <i class="fas fa-play mr-2"></i> Regarder
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                        <!-- Film 2 -->
+                        <div class="flex-shrink-0 w-64 film-card">
+                            <div class="relative rounded-xl overflow-hidden">
+                                <img src="https://image.tmdb.org/t/p/w500/4MCKNAc6AbWjEsM2h9Xc29owo4z.jpg"
+                                     alt="Deadpool & Wolverine" class="w-full h-80 object-cover film-poster">
+                                <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent film-overlay opacity-0 transition flex flex-col justify-end p-4">
+                                    <h3 class="text-xl font-bold mb-1">Deadpool & Wolverine</h3>
+                                    <div class="flex items-center space-x-4 text-sm mb-3">
+                                        <span class="text-green-500">96% Match</span>
+                                        <span>2024</span>
+                                        <span>2h07m</span>
+                                    </div>
+                                    <p class="text-sm text-gray-300 line-clamp-2">Deadpool rejoint les Marvel Studios avec Wolverine dans un voyage qui changera l'histoire du MCU.</p>
+                                    <button class="mt-4 w-full py-2 bg-red-600 rounded-lg font-medium hover:bg-red-700 transition" onclick="openMoviePlayer('Deadpool & Wolverine', 'https://www.youtube.com/embed/avb5TqS4KdA')">
+                                        <i class="fas fa-play mr-2"></i> Regarder
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                        <!-- Film 3 -->
+                        <div class="flex-shrink-0 w-64 film-card">
+                            <div class="relative rounded-xl overflow-hidden">
+                                <img src="https://image.tmdb.org/t/p/w500/5cCfqeUH2f5Gnu7Lh2xspY5dHGV.jpg"
+                                     alt="Kingdom of the Planet of the Apes" class="w-full h-80 object-cover film-poster">
+                                <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent film-overlay opacity-0 transition flex flex-col justify-end p-4">
+                                    <h3 class="text-xl font-bold mb-1">Le Planète des Singes : Le Nouveau Royaume</h3>
+                                    <div class="flex items-center space-x-4 text-sm mb-3">
+                                        <span class="text-green-500">90% Match</span>
+                                        <span>2024</span>
+                                        <span>2h25m</span>
+                                    </div>
+                                    <p class="text-sm text-gray-300 line-clamp-2">Des générations après le règne de César, un jeune singe entreprend un voyage qui le mènera à remettre en question tout ce qu'il sait sur le passé.</p>
+                                    <button class="mt-4 w-full py-2 bg-red-600 rounded-lg font-medium hover:bg-red-700 transition" onclick="openMoviePlayer('Le Planète des Singes : Le Nouveau Royaume', 'https://www.youtube.com/embed/3FGHB2qT0Xk')">
+                                        <i class="fas fa-play mr-2"></i> Regarder
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                        <!-- Film 4 -->
+                        <div class="flex-shrink-0 w-64 film-card">
+                            <div class="relative rounded-xl overflow-hidden">
+                                <img src="https://image.tmdb.org/t/p/w500/4LrL40XecjGLRpX5I2gzMTUt04l.jpg"
+                                     alt="Godzilla x Kong: The New Empire" class="w-full h-80 object-cover film-poster">
+                                <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent film-overlay opacity-0 transition flex flex-col justify-end p-4">
+                                    <h3 class="text-xl font-bold mb-1">Godzilla x Kong: The New Empire</h3>
+                                    <div class="flex items-center space-x-4 text-sm mb-3">
+                                        <span class="text-green-500">88% Match</span>
+                                        <span>2024</span>
+                                        <span>1h55m</span>
+                                    </div>
+                                    <p class="text-sm text-gray-300 line-clamp-2">Godzilla et Kong s'unissent contre une menace colossale enfouie dans notre monde, mettant en péril leur existence et la nôtre.</p>
+                                    <button class="mt-4 w-full py-2 bg-red-600 rounded-lg font-medium hover:bg-red-700 transition" onclick="openMoviePlayer('Godzilla x Kong: The New Empire', 'https://www.youtube.com/embed/lV1OOlGwExM')">
+                                        <i class="fas fa-play mr-2"></i> Regarder
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                        <!-- Film 5 -->
+                        <div class="flex-shrink-0 w-64 film-card">
+                            <div class="relative rounded-xl overflow-hidden">
+                                <img src="https://image.tmdb.org/t/p/w500/1NpIg06HIA3bGHVQCBnOFh8VGOq.jpg"
+                                     alt="The Fall Guy" class="w-full h-80 object-cover film-poster">
+                                <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent film-overlay opacity-0 transition flex flex-col justify-end p-4">
+                                    <h3 class="text-xl font-bold mb-1">The Fall Guy</h3>
+                                    <div class="flex items-center space-x-4 text-sm mb-3">
+                                        <span class="text-green-500">89% Match</span>
+                                        <span>2024</span>
+                                        <span>2h06m</span>
+                                    </div>
+                                    <p class="text-sm text-gray-300 line-clamp-2">Un cascadeur retourne au travail pour retrouver une star disparue, résoudre un complot et reconquérir son ex.</p>
+                                    <button class="mt-4 w-full py-2 bg-red-600 rounded-lg font-medium hover:bg-red-700 transition" onclick="openMoviePlayer('The Fall Guy', 'https://www.youtube.com/embed/5z2FTTBlDLU')">
+                                        <i class="fas fa-play mr-2"></i> Regarder
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                        <!-- Film 6 -->
+                        <div class="flex-shrink-0 w-64 film-card">
+                            <div class="relative rounded-xl overflow-hidden">
+                                <img src="https://image.tmdb.org/t/p/w500/1X4h40fcB4WWUmIBK0auT4zRBAV.jpg"
+                                     alt="Civil War" class="w-full h-80 object-cover film-poster">
+                                <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent film-overlay opacity-0 transition flex flex-col justify-end p-4">
+                                    <h3 class="text-xl font-bold mb-1">Civil War</h3>
+                                    <div class="flex items-center space-x-4 text-sm mb-3">
+                                        <span class="text-green-500">93% Match</span>
+                                        <span>2024</span>
+                                        <span>1h49m</span>
+                                    </div>
+                                    <p class="text-sm text-gray-300 line-clamp-2">Un groupe de journalistes voyage à travers une Amérique déchirée par la guerre alors que le gouvernement attaque ses propres citoyens.</p>
+                                    <button class="mt-4 w-full py-2 bg-red-600 rounded-lg font-medium hover:bg-red-700 transition" onclick="openMoviePlayer('Civil War', 'https://www.youtube.com/embed/aDyQxtg0V2w')">
+                                        <i class="fas fa-play mr-2"></i> Regarder
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                        <!-- Film 7 -->
+                        <div class="flex-shrink-0 w-64 film-card">
+                            <div class="relative rounded-xl overflow-hidden">
+                                <img src="https://image.tmdb.org/t/p/w500/2KGxQFV9Wp1MshPBf8BuqWUgVAX.jpg"
+                                     alt="Challengers" class="w-full h-80 object-cover film-poster">
+                                <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent film-overlay opacity-0 transition flex flex-col justify-end p-4">
+                                    <h3 class="text-xl font-bold mb-1">Challengers</h3>
+                                    <div class="flex items-center space-x-4 text-sm mb-3">
+                                        <span class="text-green-500">91% Match</span>
+                                        <span>2024</span>
+                                        <span>2h11m</span>
+                                    </div>
+                                    <p class="text-sm text-gray-300 line-clamp-2">Tashi, ancienne prodige du tennis, entraîne son mari pour affronter son ex-petit ami dans un tournoi.</p>
+                                    <button class="mt-4 w-full py-2 bg-red-600 rounded-lg font-medium hover:bg-red-700 transition" onclick="openMoviePlayer('Challengers', 'https://www.youtube.com/embed/bYq2zZUnX8A')">
+                                        <i class="fas fa-play mr-2"></i> Regarder
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                        <!-- Film 8 -->
+                        <div class="flex-shrink-0 w-64 film-card">
+                            <div class="relative rounded-xl overflow-hidden">
+                                <img src="https://image.tmdb.org/t/p/w500/5Eip60UDiPLASyKjmHPMruggTc4.jpg"
+                                     alt="The First Omen" class="w-full h-80 object-cover film-poster">
+                                <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent film-overlay opacity-0 transition flex flex-col justify-end p-4">
+                                    <h3 class="text-xl font-bold mb-1">The First Omen</h3>
+                                    <div class="flex items-center space-x-4 text-sm mb-3">
+                                        <span class="text-green-500">87% Match</span>
+                                        <span>2024</span>
+                                        <span>1h59m</span>
+                                    </div>
+                                    <p class="text-sm text-gray-300 line-clamp-2">Une jeune femme envoyée à Rome découvre une conspiration terrifiante qui la pousse à affronter ses croyances.</p>
+                                    <button class="mt-4 w-full py-2 bg-red-600 rounded-lg font-medium hover:bg-red-700 transition" onclick="openMoviePlayer('The First Omen', 'https://www.youtube.com/embed/6FgUUO9Ztd0')">
+                                        <i class="fas fa-play mr-2"></i> Regarder
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
+    </section>
+    <!-- Catégories -->
+    <section id="categories" class="py-16 px-6 bg-gradient-to-b from-gray-900/50 to-black">
+        <div class="container mx-auto">
+            <h2 class="text-3xl font-bold text-center mb-12">Catégories Populaires</h2>
+            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-6">
+                <a href="#" class="bg-gray-900/50 rounded-xl p-6 border border-gray-800 hover:border-red-500 transition flex flex-col items-center" onclick="openCategory('Action')">
+                    <i class="fas fa-explosion text-3xl text-red-500 mb-3"></i>
+                    <span class="font-medium">Action</span>
+                </a>
+                <a href="#" class="bg-gray-900/50 rounded-xl p-6 border border-gray-800 hover:border-purple-500 transition flex flex-col items-center" onclick="openCategory('Science-Fiction')">
+                    <i class="fas fa-rocket text-3xl text-purple-500 mb-3"></i>
+                    <span class="font-medium">Science-Fiction</span>
+                </a>
+                <a href="#" class="bg-gray-900/50 rounded-xl p-6 border border-gray-800 hover:border-blue-500 transition flex flex-col items-center" onclick="openCategory('Aventure')">
+                    <i class="fas fa-mountain text-3xl text-blue-500 mb-3"></i>
+                    <span class="font-medium">Aventure</span>
+                </a>
+                <a href="#" class="bg-gray-900/50 rounded-xl p-6 border border-gray-800 hover:border-green-500 transition flex flexocol items-center" onclick="openCategory('Comédie')">
+                    <i class="fas fa-laugh-squint text-3xl text-green-500 mb-3"></i>
+                    <span class="font-medium">Comédie</span>
+                </a>
+                <a href="#" class="bg-gray-900/50 rounded-xl p-6 border border-gray-800 hover:border-yellow-500 transition flex flex-col items-center" onclick="openCategory('Drame')">
+                    <i class="fas fa-theater-masks text-3xl text-yellow-500 mb-3"></i>
+                    <span class="font-medium">Drame</span>
+                </a>
+                <a href="#" class="bg-gray-900/50 rounded-xl p-6 border border-gray-800 hover:border-pink-500 transition flex flex-col items-center" onclick="openCategory('Horreur')">
+                    <i class="fas fa-ghost text-3xl text-pink-500 mb-3"></i>
+                    <span class="font-medium">Horreur</span>
+                </a>
+                <a href="#" class="bg-gray-900/50 rounded-xl p-6 border border-gray-800 hover:border-indigo-500 transition flex flex-col items-center" onclick="openCategory('Thriller')">
+                    <i class="fas fa-user-secret text-3xl text-indigo-500 mb-3"></i>
+                    <span class="font-medium">Thriller</span>
+                </a>
+                <a href="#" class="bg-gray-900/50 rounded-xl p-6 border border-gray-800 hover:border-red-400 transition flex flex-col items-center" onclick="openCategory('Romance')">
+                    <i class="fas fa-heart text-3xl text-red-400 mb-3"></i>
+                    <span class="font-medium">Romance</span>
+                </a>
+                <a href="#" class="bg-gray-900/50 rounded-xl p-6 border border-gray-800 hover:border-teal-500 transition flex flex-col items-center" onclick="openCategory('Animation')">
+                    <i class="fas fa-dragon text-3xl text-teal-500 mb-3"></i>
+                    <span class="font-medium">Animation</span>
+                </a>
+                <a href="#" class="bg-gray-900/50 rounded-xl p-6 border border-gray-800 hover:border-orange-500 transition flex flex-col items-center" onclick="openCategory('Fantasy')">
+                    <i class="fas fa-hat-wizard text-3xl text-orange-500 mb-3"></i>
+                    <span class="font-medium">Fantasy</span>
+                </a>
+                <a href="#" class="bg-gray-900/50 rounded-xl p-6 border border-gray-800 hover:border-gray-400 transition flex flex-col items-center" onclick="openCategory('Documentaire')">
+                    <i class="fas fa-video text-3xl text-gray-400 mb-3"></i>
+                    <span class="font-medium">Documentaire</span>
+                </a>
+                <a href="#" class="bg-gray-900/50 rounded-xl p-6 border border-gray-800 hover:border-blue-400 transition flex flex-col items-center" onclick="openCategory('Familial')">
+                    <i class="fas fa-home text-3xl text-blue-400 mb-3"></i>
+                    <span class="font-medium">Familial</span>
+                </a>
+            </div>
+        </div>
+    </section>
+    <!-- Système IA -->
+    <section class="py-20 px-6 bg-black">
+        <div class="container mx-auto">
+            <h2 class="text-4xl font-bold text-center mb-16 gradient-text">Notre Armée d'Intelligences Artificielles</h2>
+            <div class="grid md:grid-cols-2 gap-12 items-center">
+                <div>
+                    <div class="relative rounded-3xl overflow-hidden border border-gray-800">
+                        <img src="https://images.unsplash.com/photo-1677442135136-760c813a743d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80"
+                             alt="Système IA MegaFlix" class="w-full h-auto">
+                        <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-transparent flex items-end p-8">
+                            <div>
+                                <h3 class="text-2xl font-bold mb-2">Centre de Contrôle IA</h3>
+                                <p class="text-gray-300">142,521 intelligences artificielles travaillant en harmonie pour vous offrir le meilleur contenu.</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div>
+                    <div class="space-y-8">
+                        <div class="flex items-start">
+                            <div class="w-14 h-14 bg-red-900/20 rounded-xl flex items-center justify-center mr-6">
+                                <i class="fas fa-brain text-2xl text-red-500"></i>
+                            </div>
+                            <div>
+                                <h3 class="text-xl font-bold mb-2">Réseau Neuronal Global</h3>
+                                <p class="text-gray-400">
+                                    Notre réseau de 50,000 IA d'apprentissage profond analyse en permanence les tendances pour anticiper vos désirs.
+                                </p>
+                            </div>
+                        </div>
+                        <div class="flex items-start">
+                            <div class="w-14 h-14 bg-purple-900/20 rounded-xl flex items-center justify-center mr-6">
+                                <i class="fas fa-language text-2xl text-purple-500"></i>
+                            </div>
+                            <div>
+                                <h3 class="text-xl font-bold mb-2">Traduction Automatique</h3>
+                                <p class="text-gray-400">
+                                    30,000 IA de traduction garantissent des sous-titres et doublages parfaits en français et 48 autres langues.
+                                </p>
+                            </div>
+                        </div>
+                        <div class="flex items-start">
+                            <div class="w-14 h-14 bg-blue-900/20 rounded-xl flex items-center justify-center mr-6">
+                                <i class="fas fa-bolt text-2xl text-blue-500"></i>
+                            </div>
+                            <div>
+                                <h3 class="text-xl font-bold mb-2">Optimisation en Temps Réel</h3>
+                                <p class="text-gray-400">
+                                    62,521 IA d'optimisation ajustent la qualité vidéo en fonction de votre connexion pour un streaming parfait.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Abonnement -->
+    <section class="py-20 px-6 bg-gradient-to-b from-gray-900/50 to-black">
+        <div class="container mx-auto max-w-4xl">
+            <h2 class="text-4xl font-bold text-center mb-4 gradient-text">Accès Illimité</h2>
+            <p class="text-xl text-center text-gray-400 mb-16">Choisissez l'abonnement qui vous convient</p>
+            <div class="grid md:grid-cols-2 gap-8">
+                <div class="bg-gray-900/50 rounded-2xl p-8 border border-gray-800 hover:border-red-500 transition group">
+                    <h3 class="text-2xl font-bold mb-2">Standard</h3>
+                    <p class="text-gray-400 mb-6">Accès à 3,000,000 films et séries</p>
+                    <div class="text-5xl font-bold mb-6">9,99€ <span class="text-sm font-normal text-gray-400">/mois</span></div>
+                    <ul class="space-y-3 mb-8">
+                        <li class="flex items-center">
+                            <i class="fas fa-check text-green-500 mr-3"></i>
+                            <span>3 écrans simultanés</span>
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-check text-green-500 mr-3"></i>
+                            <span>Qualité Full HD</span>
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-check text-green-500 mr-3"></i>
+                            <span>Recommandations basiques</span>
+                        </li>
+                    </ul>
+                    <button class="w-full py-4 bg-gray-800 rounded-xl font-bold hover:bg-gray-700 transition" onclick="openSubscription('Standard')">
+                        Choisir cet abonnement
+                    </button>
+                </div>
+                <div class="bg-gradient-to-br from-gray-900 to-red-900/20 rounded-2xl p-8 border border-red-500 relative overflow-hidden">
+                    <div class="absolute top-4 right-4 bg-red-600 text-xs font-bold px-3 py-1 rounded-full">
+                        POPULAIRE
+                    </div>
+                    <h3 class="text-2xl font-bold mb-2">Premium IA</h3>
+                    <p class="text-gray-400 mb-6">Accès à TOUS les 6,524,111 films et séries</p>
+                    <div class="text-5xl font-bold mb-6">19,99€ <span class="text-sm font-normal text-gray-400">/mois</span></div>
+                    <ul class="space-y-3 mb-8">
+                        <li class="flex items-center">
+                            <i class="fas fa-check text-green-500 mr-3"></i>
+                            <span>10 écrans simultanés</span>
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-check text-green-500 mr-3"></i>
+                            <span>Qualité 4K HDR</span>
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-check text-green-500 mr-3"></i>
+                            <span>Recommandations IA avancées</span>
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-check text-green-500 mr-3"></i>
+                            <span>Accès prioritaire aux nouveaux films</span>
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-check text-green-500 mr-3"></i>
+                            <span>Films personnalisés générés par IA</span>
+                        </li>
+                    </ul>
+                    <button class="w-full py-4 bg-gradient-to-r from-red-600 to-purple-600 rounded-xl font-bold hover:opacity-90 transition" onclick="openSubscription('Premium IA')">
+                        Choisir cet abonnement
+                    </button>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="bg-black py-12 px-6 border-t border-gray-900">
+        <div class="container mx-auto">
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-12 mb-12">
+                <div>
+                    <h3 class="text-lg font-bold mb-4">MegaFlix</h3>
+                    <ul class="space-y-3 text-gray-400">
+                        <li><a href="#" class="hover:text-white transition">À propos</a></li>
+                        <li><a href="#" class="hover:text-white transition">Carrières</a></li>
+                        <li><a href="#" class="hover:text-white transition">Technologie IA</a></li>
+                        <li><a href="#" class="hover:text-white transition">Contact</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h3 class="text-lg font-bold mb-4">Légal</h3>
+                    <ul class="space-y-3 text-gray-400">
+                        <li><a href="#" class="hover:text-white transition">Conditions d'utilisation</a></li>
+                        <li><a href="#" class="hover:text-white transition">Confidentialité</a></li>
+                        <li><a href="#" class="hover:text-white transition">Cookies</a></li>
+                        <li><a href="#" class="hover:text-white transition">Droits d'auteur</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h3 class="text-lg font-bold mb-4">Aide</h3>
+                    <ul class="space-y-3 text-gray-400">
+                        <li><a href="#" class="hover:text-white transition">Centre d'aide</a></li>
+                        <li><a href="#" class="hover:text-white transition">FAQ IA</a></li>
+                        <li><a href="#" class="hover:text-white transition">Statut du service</a></li>
+                        <li><a href="#" class="hover:text-white transition">Accessibilité</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h3 class="text-lg font-bold mb-4">Réseaux</h3>
+                    <div class="flex space-x-4 mb-6">
+                        <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-gray-700 transition">
+                            <i class="fab fa-facebook-f"></i>
+                        </a>
+                        <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-gray-700 transition">
+                            <i class="fab fa-twitter"></i>
+                        </a>
+                        <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-gray-700 transition">
+                            <i class="fab fa-instagram"></i>
+                        </a>
+                        <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-gray-700 transition">
+                            <i class="fab fa-youtube"></i>
+                        </a>
+                    </div>
+                    <p class="text-gray-400">
+                        Téléchargez notre application mobile pour une expérience optimisée par IA.
+                    </p>
+                </div>
+            </div>
+            <div class="pt-8 border-t border-gray-900 flex flex-col md:flex-row justify-between items-center">
+                <div class="text-gray-500 text-sm mb-4 md:mb-0">
+                    © 2023 MegaFlix Systems. Tous droits réservés.
+                </div>
+                <div class="flex items-center space-x-6">
+                    <span class="text-gray-500 text-sm flex items-center">
+                        <i class="fas fa-globe mr-2"></i> Français
+                    </span>
+                    <span class="text-gray-500 text-sm flex items-center">
+                        <i class="fas fa-server mr-2"></i> Serveur IA #142,521
+                    </span>
+                </div>
+            </div>
+        </div>
+    </footer>
+    <!-- Scripts -->
+    <script>
+        // Animation des compteurs
+        function animateCounters() {
+            const counters = document.querySelectorAll('.stats-counter');
+            const speed = 200;
+            counters.forEach(counter => {
+                const target = +counter.getAttribute('data-count');
+                const count = +counter.innerText.replace(/,/g, '');
+                const increment = target / speed;
+                if (count < target) {
+                    counter.innerText = Math.ceil(count + increment).toLocaleString();
+                    setTimeout(animateCounters, 1);
+                } else {
+                    counter.innerText = target.toLocaleString();
+                }
+            });
+        }
+        // Démarrer l'animation après le chargement
+        window.addEventListener('load', animateCounters);
+        // Simulation de l'activité IA
+        setInterval(() => {
+            const iaCounter = document.querySelector('.stats-counter[data-count="142521"]');
+            const current = +iaCounter.getAttribute('data-count');
+            const fluctuation = Math.floor(Math.random() * 21) - 10; // -10 à +10
+            const newCount = Math.max(142000, Math.min(143000, current + fluctuation));
+            iaCounter.setAttribute('data-count', newCount);
+            iaCounter.innerText = newCount.toLocaleString();
+        }, 3000);
+        // Simulation de nouveaux films ajoutés
+        setInterval(() => {
+            const filmCounter = document.querySelector('.stats-counter[data-count="6524111"]');
+            const current = +filmCounter.getAttribute('data-count');
+            const newFilms = Math.floor(Math.random() * 100) + 50; // 50 à 150 nouveaux films
+            const newCount = current + newFilms;
+            filmCounter.setAttribute('data-count', newCount);
+            filmCounter.innerText = newCount.toLocaleString();
+        }, 5000);
+        // Fonction pour ouvrir un lecteur de film dans une nouvelle fenêtre
+        function openMoviePlayer(title, videoUrl) {
+            const width = 1000;
+            const height = 600;
+            const left = (screen.width - width) / 2;
+            const top = (screen.height - height) / 2;
+            const features = `width=${width},height=${height},left=${left},top=${top},resizable=yes,scrollbars=yes,toolbar=no,location=no`;
+            const playerWindow = window.open('', `MegaFlix - ${title}`, features);
+            // HTML pour la fenêtre de lecture
+            playerWindow.document.write(`
+                <!DOCTYPE html>
+                <html lang="fr">
+                <head>
+                    <meta charset="UTF-8">
+                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+                    <title>${title} - MegaFlix</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>
+                        body {
+                            background-color: #000;
+                            color: #fff;
+                            font-family: Arial, sans-serif;
+                            overflow: hidden;
+                        }
+                        .player-container {
+                            position: relative;
+                            padding-bottom: 56.25%;
+                            height: 0;
+                            overflow: hidden;
+                        }
+                        .player-container iframe {
+                            position: absolute;
+                            top: 0;
+                            left: 0;
+                            width: 100%;
+                            height: 100%;
+                        }
+                        .controls {
+                            background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, transparent 100%);
+                        }
+                    </style>
+                </head>
+                <body class="bg-black text-white h-screen flex flex-col">
+                    <div class="flex justify-between items-center p-4 bg-gray-900">
+                        <h1 class="text-xl font-bold">${title}</h1>
+                        <button onclick="window.close()" class="bg-red-600 px-4 py-1 rounded hover:bg-red-700 transition">
+                            <i class="fas fa-times mr-1"></i> Fermer
+                        </button>
+                    </div>
+                    <div class="flex-1 relative">
+                        <div class="player-container">
+                            <iframe src="${videoUrl}?autoplay=1&controls=1&modestbranding=1&rel=0" frameborder="0" allowfullscreen allow="autoplay; fullscreen"></iframe>
+                        </div>
+                        <div class="absolute bottom-0 left-0 right-0 p-4 controls">
+                            <div class="flex items-center space-x-4">
+                                <button onclick="window.location.reload()" class="bg-gray-800 hover:bg-gray-700 p-2 rounded-full">
+                                    <i class="fas fa-redo"></i>
+                                </button>
+                                <button onclick="toggleFullscreen()" class="bg-gray-800 hover:bg-gray-700 p-2 rounded-full">
+                                    <i class="fas fa-expand"></i>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="p-4 bg-gray-900">
+                        <h2 class="text-lg font-bold mb-2">${title}</h2>
+                        <p class="text-gray-300">Regardez en plein écran pour une meilleure expérience.</p>
+                    </div>
+                    <script>
+                        function toggleFullscreen() {
+                            if (!document.fullscreenElement) {
+                                document.documentElement.requestFullscreen().catch(err => {
+                                    console.error('Erreur Fullscreen:', err);
+                                });
+                            } else {
+                                if (document.exitFullscreen) {
+                                    document.exitFullscreen();
+                                }
+                            }
+                        }
+                    </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/code-master" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+                </html>

prompts.txt CHANGED Viewed

	@@ -1 +1,8 @@
1	- je veux un puissant correcteur de code, script etc

+je veux un puissant correcteur de code, script etc
+ ajouter code html
+aucun bouton fonctionne
+ je veux quil corrige et modifie  les codes et exporter les fichier  une fois terminer
+Référencement Global Instantané Indexation immédiate sur tous les navigateurs mondiaux
+creer le plus gigantesque plateforme de plus de 6524111  de site de film streaning , de film complet et en francais le tout en automatic par une armées de 142521 inteligences artificiel sur syteme robotise gére tout en automatique
+afficher toutes les images des film et faire fonctionner les film complet a regarder complet , toutes les bouton ne fonctionne pas , ouvrer les films en automatic dans une nouvel fenetre
+les bouton des film ne se pas cliquable ouvrer les film dans une nouvel page pour regarder le film complet en entier