une ia editeur de site web du style des meilleur editeur de page web elle inclue tous les language de programation pour faire des site web en incluant egalement le flash , je veux que l'editeur soit du style on prend un element et on le depose sur notre page web comme si on construisait une maison , donc une page d'accueil ou il y a un explication des ce que l'on peux faire de debutant a expert puis un bouton commencer ca nous demande le niveau de demarrage : debutant , professionnel ou expert puis apres on arive sur l'editeur : niveau debutant l'editeur represente notre page web vierge et l'on deplace les element du menu sur la page et on les depose ou l'on veux la page est cadrillé pour faciliter le posisionnement des element . le mode pro a plus de fonction avec la possibilité de modifier le code de la page qu'il est entraint de faire et le mode expert laprogrammation ce fait tout en ligne de code avec une visualisation du resultat . pour chaque mode je veux un chat en bas de page pour une interaction avec l'ia qui pourra nous donner des conseil ou verifier notre code pour voir s'il n'y a pas d'erreur et je veux aussi une section ou c'est l'ia qui nous fait le site automatiquement en suivant nos directive . le tout en 3d
03dd8f5 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>MorphoWeb 3D - Expert Mode</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> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.js"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.css"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/xml/xml.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/javascript/javascript.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/css/css.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/htmlmixed/htmlmixed.min.js"></script> | |
| <style> | |
| .CodeMirror { | |
| height: 100% ; | |
| font-size: 14px; | |
| border-radius: 0.5rem; | |
| border: 1px solid #d1d5db; | |
| } | |
| #preview-3d { | |
| width: 100%; | |
| height: 100%; | |
| background: #f0f4f8; | |
| border-radius: 0.5rem; | |
| } | |
| .chat-message { | |
| max-width: 80%; | |
| border-radius: 1rem; | |
| padding: 0.75rem 1rem; | |
| margin-bottom: 0.5rem; | |
| } | |
| .user-message { | |
| background-color: #6366f1; | |
| color: white; | |
| margin-left: auto; | |
| border-bottom-right-radius: 0.25rem; | |
| } | |
| .ai-message { | |
| background-color: #e5e7eb; | |
| color: #111827; | |
| margin-right: auto; | |
| border-bottom-left-radius: 0.25rem; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100"> | |
| <div class="flex h-screen"> | |
| <!-- Sidebar --> | |
| <div class="w-64 bg-gray-800 text-white p-4 overflow-y-auto"> | |
| <div class="flex items-center mb-6"> | |
| <i data-feather="terminal" class="text-green-400 mr-2"></i> | |
| <h2 class="text-xl font-bold">Developer Tools</h2> | |
| </div> | |
| <div class="mb-8"> | |
| <h3 class="font-medium mb-3">Code Templates</h3> | |
| <div class="space-y-2"> | |
| <button class="w-full text-left px-3 py-2 bg-gray-700 rounded-md text-sm hover:bg-gray-600">Flash Animation</button> | |
| <button class="w-full text-left px-3 py-2 bg-gray-700 rounded-md text-sm hover:bg-gray-600">React Component</button> | |
| <button class="w-full text-left px-3 py-2 bg-gray-700 rounded-md text-sm hover:bg-gray-600">Node.js API</button> | |
| <button class="w-full text-left px-3 py-2 bg-gray-700 rounded-md text-sm hover:bg-gray-600">SQL Database</button> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="font-medium mb-3">AI Tools</h3> | |
| <div class="space-y-2"> | |
| <button class="w-full text-left px-3 py-2 bg-gray-700 rounded-md text-sm hover:bg-gray-600">Optimize Code</button> | |
| <button class="w-full text-left px-3 py-2 bg-gray-700 rounded-md text-sm hover:bg-gray-600">Debug Assistant</button> | |
| <button class="w-full text-left px-3 py-2 bg-gray-700 rounded-md text-sm hover:bg-gray-600">Security Check</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 flex flex-col"> | |
| <!-- Toolbar --> | |
| <div class="bg-gray-900 text-white p-3 flex items-center justify-between"> | |
| <div class="flex items-center space-x-4"> | |
| <h1 class="font-bold text-lg">Expert Mode</h1> | |
| <div class="flex items-center text-sm bg-green-700 text-green-100 px-3 py-1 rounded-full"> | |
| <i data-feather="code" class="w-4 h-4 mr-1"></i> | |
| <span>Full Development Environment</span> | |
| </div> | |
| </div> | |
| <div class="flex space-x-3"> | |
| <button class="flex items-center px-3 py-1 bg-gray-700 rounded-md text-sm hover:bg-gray-600"> | |
| <i data-feather="refresh-cw" class="w-4 h-4 mr-1"></i> | |
| Refresh Preview | |
| </button> | |
| <button class="flex items-center px-3 py-1 bg-green-600 text-white rounded-md text-sm hover:bg-green-700"> | |
| <i data-feather="download" class="w-4 h-4 mr-1"></i> | |
| Export Project | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Code Editors --> | |
| <div class="flex-1 grid grid-cols-1 lg:grid-cols-3 gap-4 p-4"> | |
| <!-- HTML Editor --> | |
| <div class="bg-white rounded-lg shadow-sm p-4 h-full flex flex-col"> | |
| <h3 class="font-medium mb-2">HTML</h3> | |
| <div class="flex-1"> | |
| <textarea id="html-editor" class="hidden"><!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>My 3D Website</title> | |
| </head> | |
| <body> | |
| <!-- Your code here --> | |
| </body> | |
| </html></textarea> | |
| </div> | |
| </div> | |
| <!-- CSS Editor --> | |
| <div class="bg-white rounded-lg shadow-sm p-4 h-full flex flex-col"> | |
| <h3 class="font-medium mb-2">CSS</h3> | |
| <div class="flex-1"> | |
| <textarea id="css-editor" class="hidden">body { | |
| margin: 0; | |
| font-family: Arial, sans-serif; | |
| }</textarea> | |
| </div> | |
| </div> | |
| <!-- JavaScript Editor --> | |
| <div class="bg-white rounded-lg shadow-sm p-4 h-full flex flex-col"> | |
| <h3 class="font-medium mb-2">JavaScript</h3> | |
| <div class="flex-1"> | |
| <textarea id="js-editor" class="hidden">// JavaScript code goes here</textarea> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Preview Area --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 p-4"> | |
| <!-- 3D Preview --> | |
| <div class="bg-white rounded-lg shadow-sm p-4 h-64"> | |
| <h3 class="font-medium mb-2">3D Structure Preview</h3> | |
| <div id="preview-3d"></div> | |
| </div> | |
| <!-- Live Preview --> | |
| <div class="bg-white rounded-lg shadow-sm p-4 h-64"> | |
| <h3 class="font-medium mb-2">Live Rendering</h3> | |
| <iframe id="live-preview" class="w-full h-full border rounded-md"></iframe> | |
| </div> | |
| </div> | |
| <!-- AI Assistant Chat --> | |
| <div class="bg-gray-800 text-white border-t border-gray-700 h-64 flex flex-col"> | |
| <div class="p-3 border-b border-gray-700 flex items-center bg-gray-900"> | |
| <div class="w-8 h-8 rounded-full bg-green-700 flex items-center justify-center mr-2"> | |
| <i data-feather="cpu" class="text-green-300 w-4 h-4"></i> | |
| </div> | |
| <h3 class="font-medium">Advanced AI Assistant</h3> | |
| </div> | |
| <div id="chat-messages" class="flex-1 p-4 overflow-y-auto"> | |
| <div class="chat-message ai-message"> | |
| <p>Welcome to Expert Mode! You have full control here. I can help with code optimization, debugging Flash elements, and ensuring cross-browser compatibility.</p> | |
| </div> | |
| </div> | |
| <div class="p-3 border-t border-gray-700 flex"> | |
| <input type="text" placeholder="Ask about Flash implementation, React components..." class="flex-1 bg-gray-700 text-white border border-gray-600 rounded-l-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-green-500"> | |
| <button class="bg-green-600 text-white px-4 py-2 rounded-r-lg hover:bg-green-700"> | |
| <i data-feather="send" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', () => { | |
| feather.replace(); | |
| // Initialize code editors | |
| const htmlEditor = CodeMirror.fromTextArea(document.getElementById('html-editor'), { | |
| mode: 'htmlmixed', | |
| lineNumbers: true, | |
| theme: 'default', | |
| lineWrapping: true | |
| }); | |
| const cssEditor = CodeMirror.fromTextArea(document.getElementById('css-editor'), { | |
| mode: 'css', | |
| lineNumbers: true, | |
| theme: 'default', | |
| lineWrapping: true | |
| }); | |
| const jsEditor = CodeMirror.fromTextArea(document.getElementById('js-editor'), { | |
| mode: 'javascript', | |
| lineNumbers: true, | |
| theme: 'default', | |
| lineWrapping: true | |
| }); | |
| // Initialize 3D preview | |
| const init3DPreview = () => { | |
| const container = document.getElementById('preview-3d'); | |
| const scene = new THREE.Scene(); | |
| const camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000); | |
| const renderer = new THREE.WebGLRenderer({ antialias: true }); | |
| renderer.setSize(container.clientWidth, container.clientHeight); | |
| container.appendChild(renderer.domElement); | |
| // Add lights | |
| const ambientLight = new THREE.AmbientLight(0x404040); | |
| scene.add(ambientLight); | |
| const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8); | |
| directionalLight.position.set(1, 1, 1); | |
| scene.add(directionalLight); | |
| // Create website structure | |
| const createStructure = () => { | |
| const group = new THREE.Group(); | |
| // Base plane | |
| 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); | |
| // Example elements | |
| const elements = [ | |
| { type: 'header', color: 0x4f46e5, size: [3, 0.2, 0.1], position: [0, 0.1, 1.3] }, | |
| { type: 'flash', color: 0xffcc00, size: [1.5, 1, 0.1], position: [-1.2, 0.1, 0] }, | |
| { type: 'content', 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; | |
| // Animation | |
| const animate = () => { | |
| requestAnimationFrame(animate); | |
| website.rotation.y += 0.005; | |
| renderer.render(scene, camera); | |
| }; | |
| animate(); | |
| // Handle window resize | |
| window.addEventListener('resize', () => { | |
| camera.aspect = container.clientWidth / container.clientHeight; | |
| camera.updateProjectionMatrix(); | |
| renderer.setSize(container.clientWidth, container.clientHeight); | |
| }); | |
| }; | |
| init3DPreview(); | |
| // Chat functionality | |
| const chatInput = document.querySelector('#chat-messages + div input'); | |
| const chatButton = document.querySelector('#chat-messages + div button'); | |
| chatButton.addEventListener('click', () => { | |
| const message = chatInput.value.trim(); | |
| if (message) { | |
| // Add user message | |
| const chat = document.getElementById('chat-messages'); | |
| const userMessage = document.createElement('div'); | |
| userMessage.className = 'chat-message user-message'; | |
| userMessage.innerHTML = `<p>${message}</p>`; | |
| chat.appendChild(userMessage); | |
| // Clear input | |
| chatInput.value = ''; | |
| // Simulate AI response | |
| setTimeout(() => { | |
| const responses = [ | |
| "For Flash compatibility, I recommend using Ruffle or similar polyfills.", | |
| "Your React component could be optimized with useMemo in this case.", | |
| "Let me analyze your Node.js code for potential security issues...", | |
| "That SQL query could be vulnerable to injection. Let me help secure it." | |
| ]; | |
| const aiMessage = document.createElement('div'); | |
| aiMessage.className = 'chat-message ai-message'; | |
| aiMessage.innerHTML = `<p>${responses[Math.floor(Math.random() * responses.length)]}</p>`; | |
| chat.appendChild(aiMessage); | |
| chat.scrollTop = chat.scrollHeight; | |
| }, 1000); | |
| } | |
| }); | |
| chatInput.addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter') { | |
| chatButton.click(); | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |