| <!DOCTYPE html> |
| <html lang="fr"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>MorphoWeb 3D - Architecte Créatif</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <style> |
| .creative-card { |
| transition: all 0.3s ease; |
| border-left: 4px solid transparent; |
| } |
| .creative-card:hover { |
| transform: translateY(-5px); |
| border-left-color: #8b5cf6; |
| } |
| .inspiration-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); |
| gap: 1rem; |
| } |
| .inspiration-item { |
| aspect-ratio: 1; |
| background-size: cover; |
| background-position: center; |
| transition: all 0.3s ease; |
| } |
| .inspiration-item:hover { |
| transform: scale(1.05); |
| } |
| </style> |
| </head> |
| <body class="bg-indigo-50"> |
| <div class="container mx-auto px-4 py-12"> |
| <header class="mb-12 text-center"> |
| <div class="flex items-center justify-center mb-4"> |
| <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mr-4"> |
| <i data-feather="pen-tool" class="text-purple-600 w-8 h-8"></i> |
| </div> |
| <h1 class="text-4xl font-bold text-gray-800">Architecte Créatif</h1> |
| </div> |
| <div class="inline-flex items-center text-sm bg-purple-100 text-purple-800 px-4 py-2 rounded-full"> |
| <i data-feather="star" class="w-4 h-4 mr-2"></i> |
| <span>Niveau 1 - IA Créative 🎨</span> |
| </div> |
| <p class="mt-4 text-xl text-gray-600 max-w-2xl mx-auto">Créez des designs uniques et innovants avec votre IA qui comprend votre style artistique</p> |
| </header> |
|
|
| <section class="mb-16"> |
| <div class="bg-white rounded-xl shadow-md p-8"> |
| <div class="flex flex-col md:flex-row gap-8"> |
| <div class="md:w-1/2"> |
| <h2 class="text-2xl font-bold text-gray-800 mb-6">Vos Inspirations</h2> |
| <div class="inspiration-grid"> |
| <div class="inspiration-item rounded-lg" style="background-image: url('http://static.photos/abstract/320x240/1')"></div> |
| <div class="inspiration-item rounded-lg" style="background-image: url('http://static.photos/minimal/320x240/2')"></div> |
| <div class="inspiration-item rounded-lg" style="background-image: url('http://static.photos/gradient/320x240/3')"></div> |
| <div class="inspiration-item rounded-lg" style="background-image: url('http://static.photos/technology/320x240/4')"></div> |
| </div> |
| </div> |
| <div class="md:w-1/2"> |
| <h2 class="text-2xl font-bold text-gray-800 mb-6">Assistant Créatif</h2> |
| <div class="bg-purple-50 rounded-lg p-6"> |
| <div id="creative-chat" class="h-64 overflow-y-auto mb-4 space-y-3"> |
| <div class="chat-message ai-message"> |
| <p>Bonjour ! Je suis votre IA Créative 🎨. Je peux vous aider à :</p> |
| <ul class="list-disc pl-5 mt-2"> |
| <li>Générer des designs uniques</li> |
| <li>Proposer des palettes de couleurs</li> |
| <li>Créer des animations innovantes</li> |
| <li>Adapter à votre style personnel</li> |
| </ul> |
| </div> |
| </div> |
| <div class="flex"> |
| <input type="text" placeholder="Ex: 'Portfolio moderne avec effets 3D'" |
| class="flex-1 border border-gray-300 rounded-l-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500"> |
| <button class="bg-purple-600 text-white px-4 py-2 rounded-r-lg hover:bg-purple-700"> |
| <i data-feather="send" class="w-5 h-5"></i> |
| </button> |
| </div> |
| <div class="flex flex-wrap gap-2 mt-3"> |
| <button class="text-xs bg-pink-100 text-pink-800 px-3 py-1 rounded-full" data-prompt="Palette de couleurs moderne"> |
| Couleurs |
| </button> |
| <button class="text-xs bg-blue-100 text-blue-800 px-3 py-1 rounded-full" data-prompt="Animation scroll créative"> |
| Animations |
| </button> |
| <button class="text-xs bg-green-100 text-green-800 px-3 py-1 rounded-full" data-prompt="Layout innovant"> |
| Layout |
| </button> |
| <button class="text-xs bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full" data-prompt="Effets 3D uniques"> |
| 3D |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <section class="mb-16"> |
| <h2 class="text-2xl font-bold text-gray-800 mb-6">Vos Projets Créatifs</h2> |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
| <div class="creative-card bg-white p-6 rounded-lg shadow-sm flex"> |
| <div class="mr-4"> |
| <div class="w-16 h-16 bg-pink-100 rounded-lg flex items-center justify-center"> |
| <i data-feather="palette" class="text-pink-600 w-8 h-8"></i> |
| </div> |
| </div> |
| <div> |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Portfolio Artistique</h3> |
| <p class="text-gray-600 mb-3">Design moderne avec animations fluides</p> |
| <div class="flex"> |
| <span class="text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded">Modern</span> |
| <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded ml-2">3D</span> |
| </div> |
| </div> |
| </div> |
| <div class="creative-card bg-white p-6 rounded-lg shadow-sm flex"> |
| <div class="mr-4"> |
| <div class="w-16 h-16 bg-blue-100 rounded-lg flex items-center justify-center"> |
| <i data-feather="music" class="text-blue-600 w-8 h-8"></i> |
| </div> |
| </div> |
| <div> |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Site Musical</h3> |
| <p class="text-gray-600 mb-3">Visuels synchronisés avec le son</p> |
| <div class="flex"> |
| <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">Audio</span> |
| <span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded ml-2">Interactive</span> |
| </div> |
| </div> |
| </div> |
| <div class="creative-card bg-white p-6 rounded-lg shadow-sm flex"> |
| <div class="mr-4"> |
| <div class="w-16 h-16 bg-yellow-100 rounded-lg flex items-center justify-center"> |
| <i data-feather="shopping-bag" class="text-yellow-600 w-8 h-8"></i> |
| </div> |
| </div> |
| <div> |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Boutique Artistique</h3> |
| <p class="text-gray-600 mb-3">Galerie produit avec vue 360°</p> |
| <div class="flex"> |
| <span class="text-xs bg-red-100 text-red-800 px-2 py-1 rounded">E-commerce</span> |
| <span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded ml-2">3D</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <section class="bg-white rounded-xl shadow-md p-8"> |
| <h2 class="text-2xl font-bold text-gray-800 mb-6">Votre Style</h2> |
| <div class="flex flex-wrap gap-4"> |
| <div class="flex-1 min-w-[200px] bg-gray-50 p-4 rounded-lg"> |
| <h3 class="font-medium mb-2 flex items-center"> |
| <i data-feather="droplet" class="w-4 h-4 mr-2 text-purple-600"></i> |
| Palette Favorite |
| </h3> |
| <div class="flex h-8 rounded overflow-hidden"> |
| <div class="w-1/5 bg-purple-500"></div> |
| <div class="w-1/5 bg-indigo-500"></div> |
| <div class="w-1/5 bg-pink-500"></div> |
| <div class="w-1/5 bg-blue-500"></div> |
| <div class="w-1/5 bg-teal-500"></div> |
| </div> |
| </div> |
| <div class="flex-1 min-w-[200px] bg-gray-50 p-4 rounded-lg"> |
| <h3 class="font-medium mb-2 flex items-center"> |
| <i data-feather="trending-up" class="w-4 h-4 mr-2 text-blue-600"></i> |
| Tendance |
| </h3> |
| <p class="text-sm">Modern Minimal (85% match)</p> |
| </div> |
| <div class="flex-1 min-w-[200px] bg-gray-50 p-4 rounded-lg"> |
| <h3 class="font-medium mb-2 flex items-center"> |
| <i data-feather="zap" class="w-4 h-4 mr-2 text-yellow-600"></i> |
| Éléments Préférés |
| </h3> |
| <p class="text-sm">Animations fluides, Micro-interactions</p> |
| </div> |
| </div> |
| </section> |
| </div> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', () => { |
| feather.replace(); |
| |
| |
| const creativeChat = document.getElementById('creative-chat'); |
| const creativeInput = document.querySelector('#creative-chat + div input'); |
| const creativeButton = document.querySelector('#creative-chat + div button'); |
| |
| creativeButton.addEventListener('click', () => { |
| const message = creativeInput.value.trim(); |
| if (message) { |
| |
| const userMessage = document.createElement('div'); |
| userMessage.className = 'chat-message user-message'; |
| userMessage.innerHTML = `<p>${message}</p>`; |
| creativeChat.appendChild(userMessage); |
| |
| |
| creativeInput.value = ''; |
| |
| |
| setTimeout(() => { |
| const responses = [ |
| "J'ai généré un concept de design moderne avec des éléments 3D subtils et une palette violette/bleue comme vous aimez.", |
| "Voici une animation scroll innovante qui met en valeur votre contenu de manière unique.", |
| "J'ai créé une palette de couleurs harmonieuse basée sur vos projets précédents.", |
| "Proposition de layout asymétrique avec espaces négatifs pour un look contemporain." |
| ]; |
| |
| const aiMessage = document.createElement('div'); |
| aiMessage.className = 'chat-message ai-message'; |
| aiMessage.innerHTML = `<p>${responses[Math.floor(Math.random() * responses.length)]}</p>`; |
| creativeChat.appendChild(aiMessage); |
| creativeChat.scrollTop = creativeChat.scrollHeight; |
| }, 1000); |
| } |
| }); |
| |
| |
| document.querySelectorAll('[data-prompt]').forEach(btn => { |
| btn.addEventListener('click', () => { |
| creativeInput.value = btn.dataset.prompt; |
| creativeButton.click(); |
| }); |
| }); |
| }); |
| </script> |
| </body> |
| </html> |
