Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>MegaSite AI Pro - Créateur Professionnel de Sites Web</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 pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.7; } | |
| } | |
| .pulse-animation { | |
| animation: pulse 2s infinite; | |
| } | |
| .ai-gradient { | |
| background: linear-gradient(135deg, #000428 0%, #004e92 100%); | |
| } | |
| .ai-panel { | |
| background: rgba(5, 25, 55, 0.8); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(0, 180, 255, 0.3); | |
| box-shadow: 0 8px 32px rgba(0, 100, 255, 0.3); | |
| } | |
| .code-editor { | |
| font-family: 'Courier New', monospace; | |
| background-color: #001f3f; | |
| color: #b3e0ff; | |
| } | |
| .preview-window { | |
| border: 2px solid rgba(0, 180, 255, 0.5); | |
| box-shadow: 0 0 30px rgba(0, 150, 255, 0.2); | |
| display: none; | |
| } | |
| .ai-assistant-bubble { | |
| background: rgba(0, 100, 200, 0.7); | |
| border-radius: 18px; | |
| max-width: 80%; | |
| } | |
| .user-bubble { | |
| background: rgba(0, 150, 255, 0.5); | |
| border-radius: 18px; | |
| max-width: 80%; | |
| } | |
| .progress-bar { | |
| height: 8px; | |
| background: rgba(255, 255, 255, 0.1); | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| background: linear-gradient(90deg, #00ffff, #0066ff); | |
| } | |
| .component-card { | |
| transition: all 0.3s ease; | |
| border: 1px solid rgba(0, 150, 255, 0.2); | |
| } | |
| .component-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0, 150, 255, 0.3); | |
| border-color: rgba(0, 200, 255, 0.5); | |
| } | |
| .grid-pattern { | |
| background-image: | |
| linear-gradient(rgba(0, 120, 255, 0.1) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(0, 120, 255, 0.1) 1px, transparent 1px); | |
| background-size: 20px 20px; | |
| } | |
| #codeLines { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| padding: 1rem; | |
| text-align: right; | |
| color: rgba(179, 224, 255, 0.5); | |
| font-family: 'Courier New', monospace; | |
| pointer-events: none; | |
| user-select: none; | |
| } | |
| </style> | |
| </head> | |
| <body class="ai-gradient text-gray-100 min-h-screen"> | |
| <!-- Interface Principale --> | |
| <div class="grid grid-cols-1 lg:grid-cols-4 h-screen overflow-hidden"> | |
| <!-- Panneau de Contrôle AI --> | |
| <div class="ai-panel p-4 border-r border-blue-900 overflow-y-auto"> | |
| <div class="flex items-center mb-8"> | |
| <div class="w-12 h-12 rounded-full bg-blue-700 flex items-center justify-center mr-3"> | |
| <i class="fas fa-robot text-2xl text-cyan-300"></i> | |
| </div> | |
| <h1 class="text-xl font-bold"> | |
| <span class="text-cyan-300">Mega</span>Site AI Pro | |
| </h1> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="text-sm uppercase text-blue-300 mb-3">Projets</h3> | |
| <div class="space-y-2"> | |
| <button id="newProject" class="w-full text-left px-4 py-3 bg-blue-900 rounded-lg flex items-center"> | |
| <i class="fas fa-project-diagram text-cyan-300 mr-3"></i> Nouveau Projet | |
| </button> | |
| <button class="w-full text-left px-4 py-3 hover:bg-blue-900 rounded-lg flex items-center"> | |
| <i class="fas fa-folder-open text-blue-300 mr-3"></i> Mes Projets | |
| </button> | |
| <button class="w-full text-left px-4 py-3 hover:bg-blue-900 rounded-lg flex items-center"> | |
| <i class="fas fa-server text-purple-300 mr-3"></i> Projets Enterprise | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="text-sm uppercase text-blue-300 mb-3">Modules AI</h3> | |
| <div class="grid grid-cols-2 gap-2"> | |
| <button class="component-card p-3 bg-blue-900 bg-opacity-50 rounded-lg text-center"> | |
| <i class="fas fa-shopping-cart text-green-300 text-2xl mb-1"></i> | |
| <div class="text-xs">E-commerce</div> | |
| </button> | |
| <button class="component-card p-3 bg-blue-900 bg-opacity-50 rounded-lg text-center"> | |
| <i class="fas fa-newspaper text-yellow-300 text-2xl mb-1"></i> | |
| <div class="text-xs">CMS</div> | |
| </button> | |
| <button class="component-card p-3 bg-blue-900 bg-opacity-50 rounded-lg text-center"> | |
| <i class="fas fa-chart-line text-red-300 text-2xl mb-1"></i> | |
| <div class="text-xs">Analytics</div> | |
| </button> | |
| <button class="component-card p-3 bg-blue-900 bg-opacity-50 rounded-lg text-center"> | |
| <i class="fas fa-users text-pink-300 text-2xl mb-1"></i> | |
| <div class="text-xs">Réseaux</div> | |
| </button> | |
| <button class="component-card p-3 bg-blue-900 bg-opacity-50 rounded-lg text-center"> | |
| <i class="fas fa-database text-cyan-300 text-2xl mb-1"></i> | |
| <div class="text-xs">Base de Données</div> | |
| </button> | |
| <button class="component-card p-3 bg-blue-900 bg-opacity-50 rounded-lg text-center"> | |
| <i class="fas fa-lock text-purple-300 text-2xl mb-1"></i> | |
| <div class="text-xs">Sécurité</div> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="text-sm uppercase text-blue-300 mb-3">Statistiques</h3> | |
| <div class="p-3 bg-blue-900 bg-opacity-30 rounded-lg"> | |
| <div class="flex justify-between text-xs mb-1"> | |
| <span>Complexité du Projet</span> | |
| <span>Expert</span> | |
| </div> | |
| <div class="progress-bar rounded-full mb-3"> | |
| <div class="progress-fill rounded-full" style="width: 92%"></div> | |
| </div> | |
| <div class="flex justify-between text-xs mb-1"> | |
| <span>Lignes de Code</span> | |
| <span id="lineCount">1,250+</span> | |
| </div> | |
| <div class="text-xs mb-1">Composants: 28/50</div> | |
| <div class="text-xs">API Intégrées: 12</div> | |
| </div> | |
| </div> | |
| <div class="p-3 bg-blue-900 bg-opacity-30 rounded-lg"> | |
| <h4 class="text-sm font-medium mb-2">Assistant AI</h4> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-8 h-8 rounded-full bg-cyan-600 flex items-center justify-center"> | |
| <i class="fas fa-bolt text-xs"></i> | |
| </div> | |
| <span class="text-sm">Mode: Expert Professionnel</span> | |
| </div> | |
| <button id="optimizeBtn" class="w-full mt-3 py-2 bg-cyan-600 hover:bg-cyan-700 rounded-lg text-sm"> | |
| <i class="fas fa-rocket mr-2"></i> Optimiser le Site | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Éditeur de Code --> | |
| <div class="ai-panel col-span-2 p-4 border-r border-blue-900 overflow-hidden flex flex-col"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-file-code text-blue-300 mr-2"></i> | |
| <h3 class="font-medium">index.html</h3> | |
| <span id="liveLineCount" class="ml-2 text-xs text-blue-300">1,250 lignes</span> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button id="previewBtn" class="px-3 py-1 bg-blue-900 hover:bg-blue-800 rounded text-sm"> | |
| <i class="fas fa-eye mr-1"></i> Prévisualiser | |
| </button> | |
| <button id="executeBtn" class="px-3 py-1 bg-cyan-600 hover:bg-cyan-700 rounded text-sm"> | |
| <i class="fas fa-bolt mr-1"></i> Exécuter | |
| </button> | |
| </div> | |
| </div> | |
| <div class="code-editor flex-1 rounded-lg overflow-hidden relative"> | |
| <div id="codeLines"></div> | |
| <textarea id="codeEditor" class="w-full h-full p-4 pl-16 bg-transparent outline-none resize-none" spellcheck="false"> | |
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Site Professionnel Enterprise</title> | |
| <link href="https://cdn.tailwindcss.com" rel="stylesheet"> | |
| <!-- Intégration AI MegaSite --> | |
| <script src="/js/megasite-ai.js"></script> | |
| <style> | |
| .enterprise-hero { | |
| background: linear-gradient(135deg, #000428 0%, #004e92 100%); | |
| min-height: 80vh; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .enterprise-feature-card { | |
| transition: all 0.3s ease; | |
| border: 1px solid rgba(0, 150, 255, 0.2); | |
| } | |
| .enterprise-feature-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0, 150, 255, 0.3); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-white"> | |
| <!-- Navigation AI --> | |
| <nav class="bg-gray-800 py-4 shadow-lg"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex items-center justify-between"> | |
| <div class="text-2xl font-bold"> | |
| <span class="text-cyan-400">Enterprise</span>Pro | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#" class="hover:text-cyan-300 transition">Accueil</a> | |
| <a href="#" class="hover:text-cyan-300 transition">Services</a> | |
| <a href="#" class="hover:text-cyan-300 transition">Solutions</a> | |
| <a href="#" class="hover:text-cyan-300 transition">Clients</a> | |
| <a href="#" class="hover:text-cyan-300 transition">Contact</a> | |
| </div> | |
| <button class="md:hidden text-xl"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="enterprise-hero"> | |
| <div class="container mx-auto px-6 py-20 text-center"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6"> | |
| Solutions <span class="text-cyan-400">Professionnelles</span> pour Enterprise | |
| </h1> | |
| <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto"> | |
| Notre plateforme AI crée des sites web enterprise avec plus de 1000 lignes de code optimisé. | |
| </p> | |
| <div class="flex flex-col md:flex-row justify-center space-y-4 md:space-y-0 md:space-x-6"> | |
| <button class="px-8 py-4 bg-cyan-600 hover:bg-cyan-700 rounded-lg font-bold transition"> | |
| Démarrer un Projet | |
| </button> | |
| <button class="px-8 py-4 border border-cyan-400 text-cyan-400 hover:bg-cyan-900 rounded-lg font-bold transition"> | |
| Voir les Solutions | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="py-20 bg-gray-800"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl font-bold text-center mb-16">Nos Solutions Enterprise</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="enterprise-feature-card bg-gray-700 p-8 rounded-lg"> | |
| <div class="text-cyan-400 text-4xl mb-4"> | |
| <i class="fas fa-server"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Infrastructure Cloud</h3> | |
| <p class="text-gray-300">Solutions cloud évolutives pour entreprises avec haute disponibilité.</p> | |
| </div> | |
| <div class="enterprise-feature-card bg-gray-700 p-8 rounded-lg"> | |
| <div class="text-cyan-400 text-4xl mb-4"> | |
| <i class="fas fa-shield-alt"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Sécurité Avancée</h3> | |
| <p class="text-gray-300">Protection des données avec chiffrement de niveau militaire.</p> | |
| </div> | |
| <div class="enterprise-feature-card bg-gray-700 p-8 rounded-lg"> | |
| <div class="text-cyan-400 text-4xl mb-4"> | |
| <i class="fas fa-brain"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Intelligence Artificielle</h3> | |
| <p class="text-gray-300">Intégration d'IA pour automatisation et analyse prédictive.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Plus de sections... --> | |
| <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/hyperspeed" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |