Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Hyper Interface AI Website Builder</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Roboto:wght@300;400;500&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --primary: #6d28d9; | |
| --secondary: #10b981; | |
| --accent: #3b82f6; | |
| --dark: #1e293b; | |
| --light: #f8fafc; | |
| } | |
| body { | |
| font-family: 'Roboto', sans-serif; | |
| background-color: #0f172a; | |
| color: var(--light); | |
| overflow: hidden; | |
| } | |
| .cyber-font { | |
| font-family: 'Orbitron', sans-serif; | |
| } | |
| .glow { | |
| animation: glow 2s ease-in-out infinite alternate; | |
| } | |
| @keyframes glow { | |
| from { | |
| text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px var(--primary), 0 0 20px var(--primary); | |
| } | |
| to { | |
| text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px var(--primary), 0 0 40px var(--primary); | |
| } | |
| } | |
| .neon-border { | |
| position: relative; | |
| box-shadow: 0 0 10px var(--primary), inset 0 0 10px var(--primary); | |
| animation: border-pulse 3s infinite; | |
| } | |
| @keyframes border-pulse { | |
| 0% { box-shadow: 0 0 10px var(--primary), inset 0 0 10px var(--primary); } | |
| 50% { box-shadow: 0 0 20px var(--primary), inset 0 0 20px var(--primary); } | |
| 100% { box-shadow: 0 0 10px var(--primary), inset 0 0 10px var(--primary); } | |
| } | |
| .holographic-bg { | |
| background: linear-gradient(135deg, rgba(13,17,23,0.9) 0%, rgba(30,41,59,0.9) 50%, rgba(13,17,23,0.9) 100%); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .holographic-bg::before { | |
| content: ""; | |
| position: absolute; | |
| top: -50%; | |
| left: -50%; | |
| width: 200%; | |
| height: 200%; | |
| background: linear-gradient( | |
| to bottom right, | |
| rgba(59, 130, 246, 0.1), | |
| rgba(16, 185, 129, 0.1), | |
| rgba(109, 40, 217, 0.1) | |
| ); | |
| transform: rotate(30deg); | |
| animation: hologram 15s linear infinite; | |
| } | |
| @keyframes hologram { | |
| 0% { transform: rotate(0deg) translateX(0); } | |
| 100% { transform: rotate(360deg) translateX(0); } | |
| } | |
| .particles { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| overflow: hidden; | |
| z-index: 0; | |
| } | |
| .particle { | |
| position: absolute; | |
| background-color: rgba(59, 130, 246, 0.6); | |
| border-radius: 50%; | |
| animation: float linear infinite; | |
| } | |
| @keyframes float { | |
| 0% { | |
| transform: translateY(0) translateX(0); | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: translateY(-1000px) translateX(1000px); | |
| opacity: 0; | |
| } | |
| } | |
| .cyber-card { | |
| background: rgba(30, 41, 59, 0.7); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(59, 130, 246, 0.3); | |
| transition: all 0.3s ease; | |
| } | |
| .cyber-card:hover { | |
| transform: translateY(-5px) scale(1.02); | |
| box-shadow: 0 10px 20px rgba(59, 130, 246, 0.3); | |
| border-color: var(--accent); | |
| } | |
| .code-line { | |
| position: relative; | |
| padding-left: 1.5rem; | |
| } | |
| .code-line::before { | |
| content: attr(data-line); | |
| position: absolute; | |
| left: 0; | |
| color: #64748b; | |
| font-size: 0.8em; | |
| } | |
| .typing-cursor { | |
| display: inline-block; | |
| width: 10px; | |
| height: 1.2em; | |
| background-color: var(--accent); | |
| animation: blink 1s step-end infinite; | |
| } | |
| @keyframes blink { | |
| from, to { opacity: 1; } | |
| 50% { opacity: 0; } | |
| } | |
| .ai-assistant { | |
| position: fixed; | |
| bottom: 2rem; | |
| right: 2rem; | |
| width: 60px; | |
| height: 60px; | |
| background: linear-gradient(135deg, var(--primary), var(--accent)); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| box-shadow: 0 0 20px rgba(59, 130, 246, 0.5); | |
| z-index: 100; | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); } | |
| 70% { transform: scale(1.05); box-shadow: 0 0 0 15px rgba(59, 130, 246, 0); } | |
| 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); } | |
| } | |
| .drag-ghost { | |
| opacity: 0.8; | |
| transform: rotate(5deg); | |
| box-shadow: 0 0 20px rgba(59, 130, 246, 0.7); | |
| } | |
| .grid-lines { | |
| background-image: | |
| linear-gradient(rgba(59, 130, 246, 0.1) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(59, 130, 246, 0.1) 1px, transparent 1px); | |
| background-size: 20px 20px; | |
| } | |
| /* Ajout pour les notifications */ | |
| .notification { | |
| position: fixed; | |
| bottom: 6rem; | |
| right: 2rem; | |
| background: rgba(30, 41, 59, 0.9); | |
| border: 1px solid var(--accent); | |
| padding: 1rem; | |
| border-radius: 0.5rem; | |
| box-shadow: 0 0 20px rgba(59, 130, 246, 0.3); | |
| transform: translateY(20px); | |
| opacity: 0; | |
| transition: all 0.3s ease; | |
| z-index: 1000; | |
| } | |
| .notification.show { | |
| transform: translateY(0); | |
| opacity: 1; | |
| } | |
| </style> | |
| </head> | |
| <body class="h-screen flex overflow-hidden"> | |
| <!-- Particles Background --> | |
| <div class="particles" id="particles"></div> | |
| <!-- Notification --> | |
| <div class="notification hidden" id="notification"></div> | |
| <!-- AI Assistant Floating Button --> | |
| <div class="ai-assistant" id="aiAssistant"> | |
| <i class="fas fa-robot text-white text-2xl"></i> | |
| </div> | |
| <!-- Sidebar --> | |
| <div class="w-80 h-full bg-gray-900 border-r border-gray-800 flex flex-col z-10 transition-all duration-300 transform hover:shadow-xl hover:shadow-purple-500/20"> | |
| <div class="p-6 border-b border-gray-800"> | |
| <h1 class="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-blue-500 cyber-font"> | |
| <span class="glow">AI</span> Website <span class="text-green-400">PRO</span> | |
| </h1> | |
| <p class="text-sm text-gray-400 mt-1">Hyper Interface - Créateur de Sites Professionnels</p> | |
| </div> | |
| <div class="flex-1 overflow-y-auto overflow-x-hidden scrollbar-hide"> | |
| <!-- Project Section --> | |
| <div class="p-4"> | |
| <button id="newProject" class="w-full bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 text-white py-3 px-4 rounded-lg flex items-center justify-center mb-4 transition-all duration-300 hover:shadow-lg hover:shadow-purple-500/30"> | |
| <i class="fas fa-plus mr-2"></i> Nouveau Projet | |
| </button> | |
| <div class="mb-6"> | |
| <h3 class="text-xs uppercase tracking-wider text-gray-500 mb-3">Mes Projets</h3> | |
| <div class="space-y-2"> | |
| <div class="cyber-card p-3 rounded-lg cursor-pointer flex items-center hover:border-blue-400 project-item" data-project="ecommerce"> | |
| <div class="w-8 h-8 rounded-full bg-purple-900 flex items-center justify-center mr-3"> | |
| <i class="fas fa-shopping-cart text-purple-400"></i> | |
| </div> | |
| <div> | |
| <div class="font-medium">E-commerce VIP</div> | |
| <div class="text-xs text-gray-400">Modifié il y a 2h</div> | |
| </div> | |
| <div class="ml-auto text-xs px-2 py-1 bg-gray-800 rounded text-green-400">1,248 LOC</div> | |
| </div> | |
| <div class="cyber-card p-3 rounded-lg cursor-pointer flex items-center hover:border-green-400 project-item" data-project="corporate"> | |
| <div class="w-8 h-8 rounded-full bg-blue-900 flex items-center justify-center mr-3"> | |
| <i class="fas fa-building text-blue-400"></i> | |
| </div> | |
| <div> | |
| <div class="font-medium">Corporate Elite</div> | |
| <div class="text-xs text-gray-400">Modifié hier</div> | |
| </div> | |
| <div class="ml-auto text-xs px-2 py-1 bg-gray-800 rounded text-blue-400">2,156 LOC</div> | |
| </div> | |
| <div class="cyber-card p-3 rounded-lg cursor-pointer flex items-center hover:border-pink-400 project-item" data-project="portfolio"> | |
| <div class="w-8 h-8 rounded-full bg-pink-900 flex items-center justify-center mr-3"> | |
| <i class="fas fa-user-tie text-pink-400"></i> | |
| </div> | |
| <div> | |
| <div class="font-medium">Portfolio Pro</div> | |
| <div class="text-xs text-gray-400">Modifié il y a 3j</div> | |
| </div> | |
| <div class="ml-auto text-xs px-2 py-1 bg-gray-800 rounded text-yellow-400">876 LOC</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Components Library --> | |
| <div class="mb-6"> | |
| <h3 class="text-xs uppercase tracking-wider text-gray-500 mb-3">Bibliothèque de Composants</h3> | |
| <div class="grid grid-cols-2 gap-2"> | |
| <div class="cyber-card p-3 rounded-lg cursor-move draggable-component" draggable="true" data-type="header"> | |
| <div class="w-10 h-10 mx-auto mb-2 bg-blue-900 rounded-full flex items-center justify-center text-blue-400"> | |
| <i class="fas fa-header"></i> | |
| </div> | |
| <div class="text-center text-sm">En-tête</div> | |
| </div> | |
| <div class="cyber-card p-3 rounded-lg cursor-move draggable-component" draggable="true" data-type="hero"> | |
| <div class="w-10 h-10 mx-auto mb-2 bg-purple-900 rounded-full flex items-center justify-center text-purple-400"> | |
| <i class="fas fa-image"></i> | |
| </div> | |
| <div class="text-center text-sm">Hero</div> | |
| </div> | |
| <div class="cyber-card p-3 rounded-lg cursor-move draggable-component" draggable="true" data-type="features"> | |
| <div class="w-10 h-10 mx-auto mb-2 bg-green-900 rounded-full flex items-center justify-center text-green-400"> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| <div class="text-center text-sm">Fonctionnalités</div> | |
| </div> | |
| <div class="cyber-card p-3 rounded-lg cursor-move draggable-component" draggable="true" data-type="pricing"> | |
| <div class="w-10 h-10 mx-auto mb-2 bg-yellow-900 rounded-full flex items-center justify-center text-yellow-400"> | |
| <i class="fas fa-tags"></i> | |
| </div> | |
| <div class="text-center text-sm">Tarifs</div> | |
| </div> | |
| <div class="cyber-card p-3 rounded-lg cursor-move draggable-component" draggable="true" data-type="testimonials"> | |
| <div class="w-10 h-10 mx-auto mb-2 bg-pink-900 rounded-full flex items-center justify-center text-pink-400"> | |
| <i class="fas fa-quote-left"></i> | |
| </div> | |
| <div class="text-center text-sm">Témoignages</div> | |
| </div> | |
| <div class="cyber-card p-3 rounded-lg cursor-move draggable-component" draggable="true" data-type="contact"> | |
| <div class="w-10 h-10 mx-auto mb-2 bg-indigo-900 rounded-full flex items-center justify-center text-indigo-400"> | |
| <i class="fas fa-envelope"></i> | |
| </div> | |
| <div class="text-center text-sm">Contact</div> | |
| </div> | |
| <div class="cyber-card p-3 rounded-lg cursor-move draggable-component" draggable="true" data-type="footer"> | |
| <div class="w-10 h-10 mx-auto mb-2 bg-gray-700 rounded-full flex items-center justify-center text-gray-400"> | |
| <i class="fas fa-shoe-prints"></i> | |
| </div> | |
| <div class="text-center text-sm">Pied de page</div> | |
| </div> | |
| <div class="cyber-card p-3 rounded-lg cursor-move draggable-component" draggable="true" data-type="custom"> | |
| <div class="w-10 h-10 mx-auto mb-2 bg-orange-900 rounded-full flex items-center justify-center text-orange-400"> | |
| <i class="fas fa-code"></i> | |
| </div> | |
| <div class="text-center text-sm">Personnalisé</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- AI Templates --> | |
| <div class="mb-6"> | |
| <h3 class="text-xs uppercase tracking-wider text-gray-500 mb-3">Modèles Professionnels</h3> | |
| <div class="space-y-3"> | |
| <div class="cyber-card p-0 overflow-hidden cursor-pointer template-card" data-template="ecommerce"> | |
| <div class="h-24 bg-gradient-to-r from-purple-900 to-blue-900 flex items-center justify-center"> | |
| <i class="fas fa-shopping-bag text-4xl text-white opacity-30"></i> | |
| </div> | |
| <div class="p-3"> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-medium">E-commerce Pro</span> | |
| <span class="text-xs bg-gray-800 text-green-400 px-2 py-1 rounded">1,500+ LOC</span> | |
| </div> | |
| <div class="text-xs text-gray-400 mt-1">Panier, Paiement, Produits</div> | |
| </div> | |
| </div> | |
| <div class="cyber-card p-0 overflow-hidden cursor-pointer template-card" data-template="corporate"> | |
| <div class="h-24 bg-gradient-to-r from-blue-900 to-green-900 flex items-center justify-center"> | |
| <i class="fas fa-building text-4xl text-white opacity-30"></i> | |
| </div> | |
| <div class="p-3"> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-medium">Corporate Elite</span> | |
| <span class="text-xs bg-gray-800 text-blue-400 px-2 py-1 rounded">2,300+ LOC</span> | |
| </div> | |
| <div class="text-xs text-gray-400 mt-1">Services, Équipe, Clients</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t border-gray-800"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-r from-purple-600 to-blue-600 flex items-center justify-center"> | |
| <i class="fas fa-user-astronaut text-white"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <div class="text-sm font-medium">Compte Entreprise</div> | |
| <div class="text-xs text-gray-400">Version Premium</div> | |
| </div> | |
| <button id="settingsBtn" class="ml-auto text-gray-400 hover:text-white"> | |
| <i class="fas fa-cog"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 flex flex-col h-full overflow-hidden"> | |
| <!-- Top Bar --> | |
| <div class="bg-gray-900 border-b border-gray-800 p-4 flex items-center justify-between"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-folder-open text-blue-400"></i> | |
| <span class="font-medium" id="currentProject">Mon_Site_Pro</span> | |
| <span class="text-xs bg-gray-800 text-green-400 px-2 py-1 rounded ml-2">1,248 LOC</span> | |
| </div> | |
| <div class="flex space-x-1"> | |
| <button class="px-3 py-1 bg-gray-800 hover:bg-gray-700 text-gray-300 rounded-md text-sm flex items-center transition-colors"> | |
| <i class="fas fa-code-branch mr-2"></i> Branche: main | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-3"> | |
| <div class="flex space-x-1 bg-gray-800 rounded-md p-1"> | |
| <button class="px-3 py-1 rounded-md text-sm flex items-center text-gray-300 hover:bg-gray-700 view-mode" data-mode="mobile"> | |
| <i class="fas fa-mobile-alt mr-2"></i> | |
| </button> | |
| <button class="px-3 py-1 rounded-md text-sm flex items-center text-gray-300 hover:bg-gray-700 view-mode" data-mode="tablet"> | |
| <i class="fas fa-tablet-alt mr-2"></i> | |
| </button> | |
| <button class="px-3 py-1 bg-blue-900 text-blue-300 rounded-md text-sm flex items-center view-mode active" data-mode="desktop"> | |
| <i class="fas fa-desktop mr-2"></i> | |
| </button> | |
| </div> | |
| <div class="w-px h-6 bg-gray-700 mx-2"></div> | |
| <button id="previewBtn" class="px-4 py-2 bg-gradient-to-r from-green-600 to-teal-600 hover:from-green-700 hover:to-teal-700 text-white rounded-md flex items-center transition-all hover:shadow-lg hover:shadow-green-500/20"> | |
| <i class="fas fa-eye mr-2"></i> Prévisualiser | |
| </button> | |
| <button id="publishBtn" class="px-4 py-2 bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 text-white rounded-md flex items-center transition-all hover:shadow-lg hover:shadow-purple-500/20"> | |
| <i class="fas fa-rocket mr-2"></i> Publier | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Editor and Preview --> | |
| <div class="flex-1 flex overflow-hidden grid-lines"> | |
| <!-- Code Editor --> | |
| <div class="w-1/2 border-r border-gray-800 flex flex-col"> | |
| <div class="bg-gray-900 p-2 border-b border-gray-800 flex justify-between items-center"> | |
| <div class="flex space-x-1"> | |
| <button class="px-3 py-1 bg-blue-900 text-blue-300 rounded-md text-sm editor-tab active" data-tab="html">HTML</button> | |
| <button class="px-3 py-1 bg-gray-800 text-gray-300 hover:bg-gray-700 rounded-md text-sm editor-tab" data-tab="css">CSS</button> | |
| <button class="px-3 py-1 bg-gray-800 text-gray-300 hover:bg-gray-700 rounded-md text-sm editor-tab" data-tab="js">JS</button> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button id="copyBtn" class="p-1 text-gray-400 hover:text-white"> | |
| <i class="fas fa-copy"></i> | |
| </button> | |
| <button id="saveBtn" class="p-1 text-gray-400 hover:text-white"> | |
| <i class="fas fa-save"></i> | |
| </button> | |
| <button id="expandBtn" class="p-1 text-gray-400 hover:text-white"> | |
| <i class="fas fa-expand"></i> | |
| </button> | |
| <button id="aiEnhanceBtn" class="p-1 text-gray-400 hover:text-white"> | |
| <i class="fas fa-magic"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex-1 overflow-auto bg-gray-900"> | |
| <div class="code-editor p-4 font-mono text-sm text-gray-300" id="htmlEditor"> | |
| <div class="code-line" data-line="1"><span class="text-purple-400"><!DOCTYPE html></span></div> | |
| <div class="code-line" data-line="2"><span class="text-purple-400"><html</span> <span class="text-blue-400">lang=</span><span class="text-green-400">"fr"</span><span class="text-purple-400">></span></div> | |
| <div class="code-line" data-line="3"><span class="text-purple-400"><head></span></div> | |
| <div class="code-line" data-line="4"> <span class="text-purple-400"><meta</span> <span class="text-blue-400">charset=</span><span class="text-green-400">"UTF-8"</span><span class="text-purple-400">></span></div> | |
| <div class="code-line" data-line="5"> <span class="text-purple-400"><meta</span> <span class="text-blue-400">name=</span><span class="text-green-400">"viewport"</span> <span class="text-blue-400">content=</span><span class="text-green-400">"width=device-width, initial-scale=1.0"</span><span class="text-purple-400">></span></div> | |
| <div class="code-line" data-line="6"> <span class="text-purple-400"><title></span><span class="text-gray-200">Mon Site Professionnel</span><span class="text-purple-400"></title></span></div> | |
| <div class="code-line" data-line="7"> <span class="text-purple-400"><link</span> <span class="text-blue-400">href=</span><span class="text-green-400">"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"</span> <span class="text-blue-400">rel=</span><span class="text-green-400">"stylesheet"</span><span class="text-purple-400">></span></div> | |
| <div class="code-line" data-line="8"> <span class="text-purple-400"><link</span> <span class="text-blue-400">rel=</span><span class="text-green-400">"stylesheet"</span> <span class="text-blue-400">href=</span><span class="text-green-400">"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"</span><span class="text-purple-400">></span></div> | |
| <div class="code-line" data-line="9"><span class="text-purple-400"></head></span></div> | |
| <div class="code-line" data-line="10"><span class="text-purple-400"><body</span> <span class="text-blue-400">class=</span><span class="text-green-400">"font-sans bg-gray-50"</span><span class="text-purple-400">></span></div> | |
| <div class="code-line" data-line="11"> <span class="text-gray-500"><!-- Header --></span></div> | |
| <div class="code-line" data-line="12"> <span class="text-purple-400"><header</span> <span class="text-blue-400">class=</span><span class="text-green-400">"bg-white shadow-sm"</span><span class="text-purple-400">></span></div> | |
| <div class="code-line" data-line="13"> <span class="text-purple-400"><div</span> <span class="text-blue-400">class=</span><span class="text-green-400">"container mx-auto px-6 py-4"</span><span class="text-purple-400">></span></div> | |
| <div class="code-line" data-line="14"> <span class="text-purple-400"><div</span> <span class="text-blue-400">class=</span><span class="text-green-400">"flex items-center justify-between"</span><span class="text-purple-400">></span></div> | |
| <div class="code-line" data-line="15"> <span class="text-purple-400"><div</span> <span class="text-blue-400">class=</span><span class="text-green-400">"flex items-center"</span><span class="text-purple-400">></span></div> | |
| <div class="code-line" data-line="16"> <span class="text-purple-400"><a</span> <span class="text-blue-400">href=</span><span class="text-green-400">"#"</span> <span class="text-blue-400">class=</span><span class="text-green-400">"text-2xl font-bold text-blue-600"</span><span class="text-purple-400">></span><span class="text-gray-200">Logo</span><span class="text-purple-400"></a></span></div> | |
| <div class="code-line" data-line="17"> <span class="text-purple-400"></div></span></div> | |
| <div class="code-line" data-line="18"> <span class="text-purple-400"><nav</span> <span class="text-blue-400">class=</span><span class="text-green-400">"hidden md:flex space-x-8"</span><span class="text-purple-400">></span></div> | |
| <div class="code-line" data-line="19"> <span class="text-purple-400"><a</span> <span class="text-blue-400">href=</span><span class="text-green-400">"#"</span> <span class="text-blue-400">class=</span><span class="text-green-400">"text-gray-700 hover:text-blue-600"</span><span class="text-purple-400">></span><span class="text-gray-200">Accueil</span><span class="text-purple-400"></a></span></div> | |
| <div class="code-line" data-line="20"> <span class="text-purple-400"><a</span> <span class="text-blue-400">href=</span><span class="text-green-400">"#"</span> <span class="text-blue-400">class=</span><span class="text-green-400">"text-gray-700 hover:text-blue-600"</span><span class="text-purple-400">></span><span class="text-gray-200">Services</span><span class="text-purple-400"></a></span></div> | |
| <div class="code-line" data-line="21"> <span class="text-purple-400"><a</span> <span class="text-blue-400">href=</span><span class="text-green-400">"#"</span> <span class="text-blue-400">class=</span><span class="text-green-400">"text-gray-700 hover:text-blue-600"</span><span class="text-purple-400">></span><span class="text-gray-200">À propos</span><span class="text-purple-400"></a></span></div> | |
| <div class="code-line" data-line="22"> <span class="text-purple-400"><a</span> <span class="text-blue-400">href=</span><span class="text-green-400">"#"</span> <span class="text-blue-400">class=</span><span class="text-green-400">"text-gray-700 hover:text-blue-600"</span><span class="text-purple-400">></span><span class="text-gray-200">Portfolio</span><span class="text-purple-400"></a></span></div> | |
| <div class="code-line" data-line="23"> <span class="text-purple-400"><a</span> <span class="text-blue-400">href=</span><span class="text-green-400">"#"</span> <span class="text-blue-400">class=</span><span class="text-green-400">"text-gray-700 hover:text-blue-600"</span><span class="text-purple-400">></span><span class="text-gray-200">Contact</span><span class="text-purple-400"></a></span></div> | |
| <div class="code-line" data-line="24"> <span class="text-purple-400"></nav></span></div> | |
| <div class="code-line" data-line="25"> <span class="text-purple-400"><button</span> <span class="text-blue-400">class=</span><span class="text-green-400">"md:hidden text-gray-700"</span><span class="text-purple-400">></span></div> | |
| <div class="code-line" data-line="26"> <span class="text-purple-400"><i</span> <span class="text-blue-400">class=</span><span class="text-green-400">"fas fa-bars text-xl"</span><span class="text-purple-400">></span><span class="text-purple-400"></i></span></div> | |
| <div class="code-line" data-line="27"> <span class="text-purple-400"></button></span></div> | |
| <div class="code-line" data-line="28"> <span class="text-purple-400"></div></span></div> | |
| <div class="code-line" data-line="29"> <span class="text-purple-400"></div></span></div> | |
| <div class="code-line" data-line="30"> <span class="text-purple-400"></header></span></div> | |
| <div class="code-line" data-line="31"></div> | |
| <div class="code-line" data-line="32"> <span class="text-gray-500"><!-- Hero Section --></span></div> | |
| <div class="code-line" data-line="33"> <span class="text-purple-400"><section</span> <span class="text-blue-400">class=</span><span class="text-green-400">"bg-gradient-to-r from-blue-600 to-indigo-7 00 text-white py-20"</span><span class="text-purple-400">></span></div> | |
| <div class="code-line" data-line="34"> <span class="text-purple-400"><div</span> <span class="text-blue-400">class=</span><span class="text-green-400">"container mx-auto px-6 text-center"</span><span class="text-purple-400">></span></div> | |
| <div class="code-line" data-line="35"> <span class="text-purple-400"><h1</span> <span class="text-blue-400">class=</span><span class="text-green-400">"text-4xl md:text-5xl font-bold mb-6"</span><span class="text-purple-400">></span><span class="text-gray-200">Créez votre présence en ligne professionnelle</span><span class="text-purple-400"></h1></span></div> | |
| <div class="code-line" data-line="36"> <span class="text-purple-400"><p</span> <span class="text-blue-400">class=</span><span class="text-green-400">"text-xl mb-8 max-w-2xl mx-auto"</span><span class="text-purple-400">></span><span class="text-gray-200">Notre plateforme AI vous permet de concevoir des sites web haut de gamme avec des fonctionnalités avancées en quelques clics.</span><span class="text-purple-400"></p></span></div> | |
| <div class="code-line" data-line="37"> <span class="text-purple-400"><div</span> <span class="text-blue-400">class=</span><span class="text-green-400">"flex justify-center space-x-4"</span><span class="text-purple-400">></span></div> | |
| <div class="code-line" data-line="38"> <span class="text-purple-400"><button</span> <span class="text-blue-400">class=</span><span class="text-green-400">"bg-white text-blue-600 px-6 py-3 rounded-lg font-medium hover:bg-gray-100 transition duration-300"</span><span class="text-purple-400">></span><span class="text-gray-200">Commencer</span><span class="text-purple-400"></button></span></div> | |
| <div class="code-line" data-line="39"> <span class="text-purple-400"><button</span> <span class="text-blue-400">class=</span><span class="text-green-400">"border border-white text-white px-6 py-3 rounded-lg font-medium hover:bg-white hover:text-blue-600 transition duration-300"</span><span class="text-purple-400">></span><span class="text-gray-200">Voir la démo</span><span class="text-purple-400"></button></span></div> | |
| <div class="code-line" data-line="40"> <span class="text-purple-400"></div></span></div> | |
| <div class="code-line" data-line="41"> <span class="text-purple-400"></div></span></div> | |
| <div class="code-line" data-line="42"> <span class="text-purple-400"></section></span></div> | |
| <div class="code-line" data-line="43"></div> | |
| <div class="code-line" data-line="44"> <span class="text-gray-500"><!-- More content will be generated by AI... --></span></div> | |
| <div class="code-line" data-line="45"><span class="text-purple-400"></body></span></div> | |
| <div class="code-line" data-line="46"><span class="text-purple-400"></html></span></div> | |
| <div class="code-line" data-line="47"><span class="typing-cursor"></span></div> | |
| </div> | |
| <!-- CSS Editor (hidden by default) --> | |
| <div class="code-editor p-4 font-mono text-sm text-gray-300 hidden" id="cssEditor"> | |
| <div class="code-line" data-line="1"><span class="text-blue-400">body</span> <span class="text-purple-400">{</span></div> | |
| <div class="code-line" data-line="2"> <span class="text-blue-400">font-family</span><span class="text-purple-400">:</span> <span class="text-green-400">'Roboto'</span><span class="text-purple-400">,</span> <span class="text-green-400">sans-serif</span><span class="text-purple-400">;</span></div> | |
| <div class="code-line" data-line="3"> <span class="text-blue-400">background-color</span><span class="text-purple-400">:</span> <span class="text-green-400">#f8fafc</span><span class="text-purple-400">;</span></div> | |
| <div class="code-line" data-line="4"> <span class="text-blue-400">color</span><span class="text-purple-400">:</span> <span class="text-green-400">#1e293b</span><span class="text-purple-400">;</span></div> | |
| <div class="code-line" data-line="5"><span class="text-purple-400">}</span></div> | |
| <div class="code-line" data-line="6"></div> | |
| <div class="code-line" data-line="7"><span class="text-blue-400">.header</span> <span class="text-purple-400">{</span></div> | |
| <div class="code-line" data-line="8"> <span class="text-blue-400">background-color</span><span class="text-purple-400">:</span> <span class="text-green-400">#ffffff</span><span class="text-purple-400">;</span></div> | |
| <div class="code-line" data-line="9"> <span class="text-blue-400">box-shadow</span><span class="text-purple-400">:</span> <span class="text-green-400">0 1px 3px rgba(0,0,0,0.1)</span><span class="text-purple-400">;</span></div> | |
| <div class="code-line" data-line="10"><span class="text-purple-400">}</span></div> | |
| <div class="code-line" data-line="11"><span class="typing-cursor"></span></div> | |
| </div> | |
| <!-- JS Editor (hidden by default) --> | |
| <div class="code-editor p-4 font-mono text-sm text-gray-300 hidden" id="jsEditor"> | |
| <div class="code-line" data-line="1"><span class="text-blue-400">document</span><span class="text-purple-400">.</span><span class="text-yellow-400">addEventListener</span><span class="text-purple-400">(</span><span class="text-green-400">'DOMContentLoaded'</span><span class="text-purple-400">,</span> <span class="text-blue-400">function</span><span class="text-purple-400">()</span> <span class="text-purple-400">{</span></div> | |
| <div class="code-line" data-line="2"> <span class="text-gray-500">// Mobile menu toggle</span></div> | |
| <div class="code-line" data-line="3"> <span class="text-blue-400">const</span> <span class="text-yellow-400">menuButton</span> <span class="text-purple-400">=</span> <span class="text-blue-400">document</span><span class="text-purple-400">.</span><span class="text-yellow-400">querySelector</span><span class="text-purple-400">(</span><span class="text-green-400">'.mobile-menu-button'</span><span class="text-purple-400">);</span></div> | |
| <div class="code-line" data-line="4"> <span class="text-blue-400">const</span> <span class="text-yellow-400">menu</span> <span class="text-purple-400">=</span> <span class="text-blue-400">document</span><span class="text-purple-400">.</span><span class="text-yellow-400">querySelector</span><span class="text-purple-400">(</span><span class="text-green-400">'.mobile-menu'</span><span class="text-purple-400">);</span></div> | |
| <div class="code-line" data-line="5"></div> | |
| <div class="code-line" data-line="6"> <span class="text-yellow-400">menuButton</span><span class="text-purple-400">.</span><span class="text-yellow-400">addEventListener</span><span class="text-purple-400">(</span><span class="text-green-400">'click'</span><span class="text-purple-400">,</span> <span class="text-blue-400">function</span><span class="text-purple-400">()</span> <span class="text-purple-400">{</span></div> | |
| <div class="code-line" data-line="7"> <span class="text-yellow-400">menu</span><span class="text-purple-400">.</span><span class="text-yellow-400">classList</span><span class="text-purple-400">.</span><span class="text-yellow-400">toggle</span><span class="text-purple-400">(</span><span class="text-green-400">'hidden'</span><span class="text-purple-400">);</span></div> | |
| <div class="code-line" data-line="8"> <span class="text-purple-400">});</span></div> | |
| <div class="code-line" data-line="9"><span class="text-purple-400">});</span></div> | |
| <div class="code-line" data-line="10"><span class="typing-cursor"></span></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Live Preview --> | |
| <div class="w-1/2 flex flex-col"> | |
| <div class="bg-gray-900 p-2 border-b border-gray-800 flex justify-between items-center"> | |
| <div class="text-sm text-gray-400"> | |
| Aperçu en direct - <span class="text-blue-400" id="viewModeText">Desktop</span> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button id="refreshPreviewBtn" class="p-1 text-gray-400 hover:text-white"> | |
| <i class="fas fa-sync-alt"></i> | |
| </button> | |
| <button id="fullscreenPreviewBtn" class="p-1 text-gray-400 hover:text-white"> | |
| <i class="fas fa | |
| </html> |