| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>MorphoWeb 3D - Architecte Digital</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> |
| <style> |
| .gradient-bg { |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| } |
| .card-hover { |
| transition: all 0.3s ease; |
| } |
| .card-hover:hover { |
| transform: translateY(-5px) scale(1.02); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| } |
| #preview-canvas { |
| width: 100%; |
| height: 400px; |
| background: #f0f4f8; |
| border-radius: 1rem; |
| margin: 2rem 0; |
| } |
| </style> |
| </head> |
| <body class="gradient-bg min-h-screen text-white"> |
| |
| <nav class="flex justify-between items-center p-6"> |
| <div class="flex items-center space-x-2"> |
| <i data-feather="box" class="text-yellow-300"></i> |
| <h1 class="text-2xl font-bold">MorphoWeb 3D</h1> |
| </div> |
| <div class="hidden md:flex space-x-6"> |
| <a href="marketplace.html" class="hover:text-yellow-300">Marketplace</a> |
| <a href="collaborate.html" class="hover:text-yellow-300">Collaboration</a> |
| <a href="vr-ar.html" class="hover:text-yellow-300">VR/AR</a> |
| <a href="templates.html" class="hover:text-yellow-300">Templates</a> |
| <a href="kids.html" class="hover:text-yellow-300">Kids</a> |
| <a href="seniors.html" class="hover:text-yellow-300">Seniors</a> |
| <a href="school.html" class="hover:text-yellow-300">School/Université</a> |
| <a href="culture.html" class="hover:text-yellow-300">Culture</a> |
| </div> |
| <button class="bg-yellow-400 hover:bg-yellow-500 text-gray-900 px-4 py-2 rounded-full font-semibold transition duration-300 flex items-center"> |
| <i data-feather="rocket" class="mr-2"></i> Get Started |
| </button> |
| </nav> |
|
|
| |
| <section class="container mx-auto px-6 py-16 text-center"> |
| <h1 class="text-5xl md:text-6xl font-bold mb-6 leading-tight"> |
| Bâtissez votre Univers Digital <br> <span class="text-yellow-300">Brique par Brique</span> |
| </h1> |
| <p class="text-xl md:text-2xl mb-12 max-w-3xl mx-auto opacity-90"> |
| Du glisser-déposer intuitif à l'édition de code avancée - concrétisez vos idées avec notre éditeur 3D intelligent assisté par IA. |
| </p> |
| <div class="flex flex-col md:flex-row justify-center gap-6 mb-16"> |
| <div class="card-hover bg-white bg-opacity-10 p-8 rounded-xl backdrop-filter backdrop-blur-lg border border-white border-opacity-20 max-w-md"> |
| <i data-feather="compass" class="text-yellow-300 w-12 h-12 mb-4"></i> |
| <h3 class="text-2xl font-bold mb-3">Architecte Visuel</h3> |
| <p class="opacity-80">Interface glisser-déposer avec assistance IA et grille magnétique</p> |
| <div class="mt-4"> |
| <span class="inline-block bg-blue-900 bg-opacity-50 rounded-full px-3 py-1 text-sm font-semibold mr-2 mb-2">HTML</span> |
| <span class="inline-block bg-blue-900 bg-opacity-50 rounded-full px-3 py-1 text-sm font-semibold mr-2 mb-2">CSS</span> |
| </div> |
| </div> |
| <div class="card-hover bg-white bg-opacity-10 p-8 rounded-xl backdrop-filter backdrop-blur-lg border border-white border-opacity-20 max-w-md"> |
| <i data-feather="layers" class="text-yellow-300 w-12 h-12 mb-4"></i> |
| <h3 class="text-2xl font-bold mb-3">Ingénieur Hybride</h3> |
| <p class="opacity-80">Éditeur visuel avec accès au code et composants avancés</p> |
| <div class="mt-4"> |
| <span class="inline-block bg-purple-900 bg-opacity-50 rounded-full px-3 py-1 text-sm font-semibold mr-2 mb-2">JavaScript</span> |
| <span class="inline-block bg-purple-900 bg-opacity-50 rounded-full px-3 py-1 text-sm font-semibold mr-2 mb-2">PHP</span> |
| <span class="inline-block bg-purple-900 bg-opacity-50 rounded-full px-3 py-1 text-sm font-semibold mr-2 mb-2">Python</span> |
| </div> |
| </div> |
| <div class="card-hover bg-white bg-opacity-10 p-8 rounded-xl backdrop-filter backdrop-blur-lg border border-white border-opacity-20 max-w-md"> |
| <i data-feather="terminal" class="text-yellow-300 w-12 h-12 mb-4"></i> |
| <h3 class="text-2xl font-bold mb-3">Maître du Code</h3> |
| <p class="opacity-80">Environnement complet avec visualisation 3D en temps réel</p> |
| <div class="mt-4"> |
| <span class="inline-block bg-green-900 bg-opacity-50 rounded-full px-3 py-1 text-sm font-semibold mr-2 mb-2">Flash</span> |
| <span class="inline-block bg-green-900 bg-opacity-50 rounded-full px-3 py-1 text-sm font-semibold mr-2 mb-2">SQL</span> |
| <span class="inline-block bg-green-900 bg-opacity-50 rounded-full px-3 py-1 text-sm font-semibold mr-2 mb-2">React</span> |
| <span class="inline-block bg-green-900 bg-opacity-50 rounded-full px-3 py-1 text-sm font-semibold mr-2 mb-2">Node.js</span> |
| </div> |
| </div> |
| </div> |
| |
| <div id="preview-canvas"></div> |
| <button id="start-building" class="bg-yellow-400 hover:bg-yellow-500 text-gray-900 px-8 py-4 rounded-full font-bold text-lg transition duration-300 shadow-lg hover:shadow-xl"> |
| Commencer la Création |
| </button> |
| </section> |
|
|
| |
| <div id="mode-selector" class="fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center z-50 hidden"> |
| <div class="bg-gray-900 rounded-2xl p-8 max-w-2xl w-full border border-gray-700"> |
| <div class="flex justify-between items-center mb-6"> |
| <h2 class="text-2xl font-bold">Choose Your Experience Level</h2> |
| <button id="close-modal" class="text-gray-400 hover:text-white"> |
| <i data-feather="x"></i> |
| </button> |
| </div> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
| <div class="mode-option bg-gray-800 hover:bg-gray-700 p-6 rounded-xl cursor-pointer transition" data-mode="beginner"> |
| <i data-feather="compass" class="text-blue-400 w-10 h-10 mb-4"></i> |
| <h3 class="text-xl font-bold mb-2">Beginner</h3> |
| <p class="text-gray-400 mb-3">Drag-and-drop interface with guided building and AI assistance</p> |
| <div class="flex flex-wrap"> |
| <span class="text-xs bg-blue-900 bg-opacity-50 rounded-full px-2 py-1 mr-1 mb-1">HTML</span> |
| <span class="text-xs bg-blue-900 bg-opacity-50 rounded-full px-2 py-1 mr-1 mb-1">CSS</span> |
| </div> |
| </div> |
| <div class="mode-option bg-gray-800 hover:bg-gray-700 p-6 rounded-xl cursor-pointer transition" data-mode="pro"> |
| <i data-feather="layers" class="text-purple-400 w-10 h-10 mb-4"></i> |
| <h3 class="text-xl font-bold mb-2">Professional</h3> |
| <p class="text-gray-400 mb-3">Visual building with code access and advanced components</p> |
| <div class="flex flex-wrap"> |
| <span class="text-xs bg-purple-900 bg-opacity-50 rounded-full px-2 py-1 mr-1 mb-1">JS</span> |
| <span class="text-xs bg-purple-900 bg-opacity-50 rounded-full px-2 py-1 mr-1 mb-1">PHP</span> |
| <span class="text-xs bg-purple-900 bg-opacity-50 rounded-full px-2 py-1 mr-1 mb-1">Python</span> |
| </div> |
| </div> |
| <div class="mode-option bg-gray-800 hover:bg-gray-700 p-6 rounded-xl cursor-pointer transition" data-mode="expert"> |
| <i data-feather="terminal" class="text-green-400 w-10 h-10 mb-4"></i> |
| <h3 class="text-xl font-bold mb-2">Expert</h3> |
| <p class="text-gray-400 mb-3">Full code editor with live 3D preview and AI optimization</p> |
| <div class="flex flex-wrap"> |
| <span class="text-xs bg-green-900 bg-opacity-50 rounded-full px-2 py-1 mr-1 mb-1">Flash</span> |
| <span class="text-xs bg-green-900 bg-opacity-50 rounded-full px-2 py-1 mr-1 mb-1">SQL</span> |
| <span class="text-xs bg-green-900 bg-opacity-50 rounded-full px-2 py-1 mr-1 mb-1">React</span> |
| <span class="text-xs bg-green-900 bg-opacity-50 rounded-full px-2 py-1 mr-1 mb-1">Node.js</span> |
| </div> |
| </div> |
| </div> |
| <div class="mt-8 pt-6 border-t border-gray-700 flex justify-end"> |
| <button id="confirm-mode" class="bg-blue-600 hover:bg-blue-700 px-6 py-2 rounded-lg font-medium"> |
| Confirm & Continue |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| const initPreview = () => { |
| const canvas = document.getElementById('preview-canvas'); |
| const scene = new THREE.Scene(); |
| const camera = new THREE.PerspectiveCamera(75, canvas.clientWidth / canvas.clientHeight, 0.1, 1000); |
| const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); |
| |
| renderer.setSize(canvas.clientWidth, canvas.clientHeight); |
| renderer.setClearColor(0x000000, 0); |
| canvas.appendChild(renderer.domElement); |
| |
| |
| const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); |
| scene.add(ambientLight); |
| |
| const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8); |
| directionalLight.position.set(1, 1, 1); |
| scene.add(directionalLight); |
| |
| |
| const createStructure = () => { |
| const group = new THREE.Group(); |
| |
| |
| const planeGeometry = new THREE.PlaneGeometry(5, 3); |
| const planeMaterial = new THREE.MeshBasicMaterial({ |
| color: 0x334155, |
| side: THREE.DoubleSide, |
| transparent: true, |
| opacity: 0.8 |
| }); |
| const plane = new THREE.Mesh(planeGeometry, planeMaterial); |
| plane.rotation.x = -Math.PI / 2; |
| group.add(plane); |
| |
| |
| const elements = [ |
| { type: 'header', color: 0x4f46e5, size: [3, 0.2, 0.1], position: [0, 0.1, 1.3] }, |
| { type: 'image', color: 0x10b981, size: [1.5, 1, 0.1], position: [-1.2, 0.1, 0] }, |
| { type: 'text', color: 0xf59e0b, size: [1.2, 0.6, 0.1], position: [1, 0.1, 0.2] }, |
| { type: 'button', color: 0xef4444, size: [0.8, 0.3, 0.1], position: [0, 0.1, -1] } |
| ]; |
| |
| elements.forEach(el => { |
| const geometry = new THREE.BoxGeometry(...el.size); |
| const material = new THREE.MeshPhongMaterial({ |
| color: el.color, |
| transparent: true, |
| opacity: 0.9, |
| shininess: 100 |
| }); |
| const cube = new THREE.Mesh(geometry, material); |
| cube.position.set(...el.position); |
| group.add(cube); |
| }); |
| |
| return group; |
| }; |
| |
| const website = createStructure(); |
| scene.add(website); |
| |
| camera.position.z = 5; |
| |
| |
| const animate = () => { |
| requestAnimationFrame(animate); |
| website.rotation.y += 0.005; |
| renderer.render(scene, camera); |
| }; |
| |
| animate(); |
| |
| |
| window.addEventListener('resize', () => { |
| camera.aspect = canvas.clientWidth / canvas.clientHeight; |
| camera.updateProjectionMatrix(); |
| renderer.setSize(canvas.clientWidth, canvas.clientHeight); |
| }); |
| }; |
| |
| |
| const initModal = () => { |
| const startBtn = document.getElementById('start-building'); |
| const modal = document.getElementById('mode-selector'); |
| const closeBtn = document.getElementById('close-modal'); |
| const confirmBtn = document.getElementById('confirm-mode'); |
| const modeOptions = document.querySelectorAll('.mode-option'); |
| |
| let selectedMode = null; |
| |
| startBtn.addEventListener('click', () => { |
| modal.classList.remove('hidden'); |
| document.body.style.overflow = 'hidden'; |
| }); |
| |
| closeBtn.addEventListener('click', () => { |
| modal.classList.add('hidden'); |
| document.body.style.overflow = 'auto'; |
| }); |
| |
| modeOptions.forEach(option => { |
| option.addEventListener('click', () => { |
| modeOptions.forEach(opt => opt.classList.remove('ring-2', 'ring-yellow-400')); |
| option.classList.add('ring-2', 'ring-yellow-400'); |
| selectedMode = option.dataset.mode; |
| }); |
| }); |
| |
| confirmBtn.addEventListener('click', () => { |
| if (selectedMode) { |
| window.location.href = `${selectedMode}.html`; |
| } else { |
| alert('Please select an experience level'); |
| } |
| }); |
| }; |
| |
| |
| document.addEventListener('DOMContentLoaded', () => { |
| feather.replace(); |
| initPreview(); |
| initModal(); |
| }); |
| </script> |
| </body> |
| </html> |
|
|
