Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>2D Design Studio | ArchiTech AI</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <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/fabric.js/5.3.1/fabric.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;700&family=Space+Grotesk:wght@400;600;700&display=swap'); | |
| body { | |
| font-family: 'Archivo', sans-serif; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #3b82f6, #8b5cf6); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .design-canvas-container { | |
| border: 1px solid #e5e7eb; | |
| border-radius: 0.5rem; | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); | |
| } | |
| .tool-btn { | |
| transition: all 0.2s ease; | |
| } | |
| .tool-btn.active { | |
| background-color: #3b82f6; | |
| color: white; | |
| } | |
| .command-history-item { | |
| border-left: 3px solid #3b82f6; | |
| transition: all 0.2s ease; | |
| } | |
| .command-history-item:hover { | |
| background-color: #f8fafc; | |
| } | |
| .grid-pattern { | |
| background-image: | |
| linear-gradient(to right, #e5e7eb 1px, transparent 1px), | |
| linear-gradient(to bottom, #e5e7eb 1px, transparent 1px); | |
| background-size: 20px 20px; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16 items-center"> | |
| <div class="flex items-center"> | |
| <i data-feather="pen-tool" class="text-indigo-600 mr-2"></i> | |
| <span class="text-xl font-bold text-gray-800">Archi<span class="gradient-text">Tech</span> AI</span> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="index.html" class="text-gray-700 hover:text-indigo-600 font-medium">Home</a> | |
| <a href="design2d.html" class="text-indigo-600 font-medium">2D Design</a> | |
| <a href="design3d.html" class="text-gray-700 hover:text-indigo-600 font-medium">3D Systems</a> | |
| <a href="#" class="text-gray-700 hover:text-indigo-600 font-medium">AI Tools</a> | |
| <a href="#" class="text-gray-700 hover:text-indigo-600 font-medium">Smart Pens</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="hidden md:flex items-center text-gray-700 hover:text-indigo-600"> | |
| <i data-feather="user" class="mr-1"></i> | |
| <span>Account</span> | |
| </button> | |
| <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg font-medium flex items-center"> | |
| <i data-feather="save" class="mr-2"></i> Save | |
| </button> | |
| </div> | |
| <button class="md:hidden"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> | |
| <div class="grid grid-cols-1 lg:grid-cols-4 gap-6"> | |
| <!-- Tools Panel --> | |
| <div class="lg:col-span-1 bg-white rounded-lg shadow-sm p-4 border border-gray-200"> | |
| <h3 class="font-bold text-lg text-gray-800 mb-4 flex items-center"> | |
| <i data-feather="tool" class="mr-2"></i> Design Tools | |
| </h3> | |
| <div class="grid grid-cols-3 gap-2 mb-6"> | |
| <button class="tool-btn p-2 rounded-md border border-gray-200 flex flex-col items-center"> | |
| <i data-feather="move" class="mb-1"></i> | |
| <span class="text-xs">Select</span> | |
| </button> | |
| <button class="tool-btn active p-2 rounded-md border border-gray-200 flex flex-col items-center"> | |
| <i data-feather="pen-tool" class="mb-1"></i> | |
| <span class="text-xs">Pen</span> | |
| </button> | |
| <button class="tool-btn p-2 rounded-md border border-gray-200 flex flex-col items-center"> | |
| <i data-feather="square" class="mb-1"></i> | |
| <span class="text-xs">Rectangle</span> | |
| </button> | |
| <button class="tool-btn p-2 rounded-md border border-gray-200 flex flex-col items-center"> | |
| <i data-feather="circle" class="mb-1"></i> | |
| <span class="text-xs">Circle</span> | |
| </button> | |
| <button class="tool-btn p-2 rounded-md border border-gray-200 flex flex-col items-center"> | |
| <i data-feather="type" class="mb-1"></i> | |
| <span class="text-xs">Text</span> | |
| </button> | |
| <button class="tool-btn p-2 rounded-md border border-gray-200 flex flex-col items-center"> | |
| <i data-feather="image" class="mb-1"></i> | |
| <span class="text-xs">Image</span> | |
| </button> | |
| </div> | |
| <h4 class="font-semibold text-gray-700 mb-2">Architectural Elements</h4> | |
| <div class="grid grid-cols-2 gap-2 mb-6"> | |
| <button class="tool-btn p-2 rounded-md border border-gray-200 flex flex-col items-center"> | |
| <i data-feather="layout" class="mb-1"></i> | |
| <span class="text-xs">Wall</span> | |
| </button> | |
| <button class="tool-btn p-2 rounded-md border border-gray-200 flex flex-col items-center"> | |
| <i data-feather="door-open" class="mb-1"></i> | |
| <span class="text-xs">Door</span> | |
| </button> | |
| <button class="tool-btn p-2 rounded-md border border-gray-200 flex flex-col items-center"> | |
| <i data-feather="window" class="mb-1"></i> | |
| <span class="text-xs">Window</span> | |
| </button> | |
| <button class="tool-btn p-2 rounded-md border border-gray-200 flex flex-col items-center"> | |
| <i data-feather="columns" class="mb-1"></i> | |
| <span class="text-xs">Column</span> | |
| </button> | |
| <button class="tool-btn p-2 rounded-md border border-gray-200 flex flex-col items-center"> | |
| <i data-feather="trending-up" class="mb-1"></i> | |
| <span class="text-xs">Stairs</span> | |
| </button> | |
| <button class="tool-btn p-2 rounded-md border border-gray-200 flex flex-col items-center"> | |
| <i data-feather="box" class="mb-1"></i> | |
| <span class="text-xs">Furniture</span> | |
| </button> | |
| </div> | |
| <h4 class="font-semibold text-gray-700 mb-2">Properties</h4> | |
| <div class="space-y-3"> | |
| <div> | |
| <label class="block text-sm text-gray-600 mb-1">Line Weight</label> | |
| <select class="w-full p-2 border border-gray-300 rounded-md text-sm"> | |
| <option>0.5pt</option> | |
| <option selected>1pt</option> | |
| <option>2pt</option> | |
| <option>3pt</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-gray-600 mb-1">Color</label> | |
| <div class="flex space-x-2"> | |
| <div class="w-6 h-6 rounded-full bg-black border border-gray-300"></div> | |
| <div class="w-6 h-6 rounded-full bg-gray-500 border border-gray-300"></div> | |
| <div class="w-6 h-6 rounded-full bg-red-500 border border-gray-300"></div> | |
| <div class="w-6 h-6 rounded-full bg-blue-500 border border-gray-300"></div> | |
| <div class="w-6 h-6 rounded-full bg-green-500 border border-gray-300"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-gray-600 mb-1">Scale</label> | |
| <select class="w-full p-2 border border-gray-300 rounded-md text-sm"> | |
| <option>1:50</option> | |
| <option selected>1:100</option> | |
| <option>1:200</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Canvas Area --> | |
| <div class="lg:col-span-2"> | |
| <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden"> | |
| <div class="flex justify-between items-center p-3 border-b border-gray-200"> | |
| <div class="flex items-center space-x-2"> | |
| <button class="p-1 rounded hover:bg-gray-100"> | |
| <i data-feather="zoom-in"></i> | |
| </button> | |
| <button class="p-1 rounded hover:bg-gray-100"> | |
| <i data-feather="zoom-out"></i> | |
| </button> | |
| <span class="text-sm text-gray-500">Zoom: 100%</span> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <button class="p-1 rounded hover:bg-gray-100"> | |
| <i data-feather="grid"></i> | |
| </button> | |
| <button class="p-1 rounded hover:bg-gray-100"> | |
| <i data-feather="ruler"></i> | |
| </button> | |
| <button class="p-1 rounded hover:bg-gray-100"> | |
| <i data-feather="layers"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="design-canvas-container"> | |
| <canvas id="designCanvas" width="800" height="600" class="w-full h-full grid-pattern"></canvas> | |
| </div> | |
| </div> | |
| <!-- AI Command Bar --> | |
| <div class="mt-4 bg-white rounded-lg shadow-sm p-4 border border-gray-200"> | |
| <div class="flex items-center bg-indigo-50 rounded-lg p-3"> | |
| <i data-feather="mic" class="text-indigo-600 mr-3"></i> | |
| <input type="text" placeholder="Try saying: 'Draw a straight wall 5m long here'" | |
| class="bg-transparent w-full focus:outline-none" id="aiCommandInput"> | |
| <button class="ml-2 bg-indigo-600 text-white p-2 rounded-full" id="executeCommand"> | |
| <i data-feather="send" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| <div class="mt-2 text-sm text-gray-500 flex items-center"> | |
| <i data-feather="info" class="mr-1 w-4 h-4"></i> | |
| <span>Press Space to speak or type your command</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Command History & AI Suggestions --> | |
| <div class="lg:col-span-1 space-y-6"> | |
| <div class="bg-white rounded-lg shadow-sm p-4 border border-gray-200"> | |
| <h3 class="font-bold text-lg text-gray-800 mb-3 flex items-center"> | |
| <i data-feather="clock" class="mr-2"></i> Command History | |
| </h3> | |
| <div class="space-y-2 max-h-60 overflow-y-auto" id="commandHistory"> | |
| <div class="command-history-item bg-indigo-50 p-2 rounded text-sm"> | |
| <div class="font-medium text-indigo-700">"Draw 5m wall here"</div> | |
| <div class="text-gray-500 text-xs">2 minutes ago</div> | |
| </div> | |
| <div class="command-history-item p-2 rounded text-sm"> | |
| <div class="font-medium">"Add window 1.2m wide"</div> | |
| <div class="text-gray-500 text-xs">5 minutes ago</div> | |
| </div> | |
| <div class="command-history-item p-2 rounded text-sm"> | |
| <div class="font-medium">"Create door at this point"</div> | |
| <div class="text-gray-500 text-xs">8 minutes ago</div> | |
| </div> | |
| <div class="command-history-item p-2 rounded text-sm"> | |
| <div class="font-medium">"Make line straight"</div> | |
| <div class="text-gray-500 text-xs">12 minutes ago</div> | |
| </div> | |
| <div class="command-history-item p-2 rounded text-sm"> | |
| <div class="font-medium">"Set scale to 1:100"</div> | |
| <div class="text-gray-500 text-xs">15 minutes ago</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-sm p-4 border border-gray-200"> | |
| <h3 class="font-bold text-lg text-gray-800 mb-3 flex items-center"> | |
| <i data-feather="zap" class="mr-2"></i> AI Suggestions | |
| </h3> | |
| <div class="space-y-3"> | |
| <button class="w-full text-left p-2 rounded-md border border-gray-200 hover:bg-indigo-50 hover:border-indigo-200 text-sm"> | |
| "Add standard bathroom layout" | |
| </button> | |
| <button class="w-full text-left p-2 rounded-md border border-gray-200 hover:bg-indigo-50 hover:border-indigo-200 text-sm"> | |
| "Generate kitchen with island" | |
| </button> | |
| <button class="w-full text-left p-2 rounded-md border border-gray-200 hover:bg-indigo-50 hover:border-indigo-200 text-sm"> | |
| "Create bedroom with closet" | |
| </button> | |
| <button class="w-full text-left p-2 rounded-md border border-gray-200 hover:bg-indigo-50 hover:border-indigo-200 text-sm"> | |
| "Add dimensions to all walls" | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-sm p-4 border border-gray-200"> | |
| <h3 class="font-bold text-lg text-gray-800 mb-3 flex items-center"> | |
| <i data-feather="bluetooth" class="mr-2"></i> Smart Pen | |
| </h3> | |
| <div class="flex items-center justify-between p-3 bg-indigo-50 rounded-lg"> | |
| <div class="flex items-center"> | |
| <i data-feather="battery" class="text-indigo-600 mr-2"></i> | |
| <span class="text-sm">Connected (87%)</span> | |
| </div> | |
| <button class="text-indigo-600 hover:text-indigo-800 text-sm font-medium"> | |
| Settings | |
| </button> | |
| </div> | |
| <div class="mt-3 text-sm text-gray-600"> | |
| <p class="mb-2">Position your pen and speak commands:</p> | |
| <ul class="list-disc list-inside space-y-1"> | |
| <li>"Draw wall 5m long here"</li> | |
| <li>"Add window at this point"</li> | |
| <li>"Make line straight"</li> | |
| <li>"Create door 0.9m wide"</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Initialize fabric.js canvas | |
| const canvas = new fabric.Canvas('designCanvas', { | |
| backgroundColor: '#ffffff', | |
| preserveObjectStacking: true | |
| }); | |
| // Add grid lines | |
| function drawGrid() { | |
| const gridSize = 20; | |
| const width = canvas.width; | |
| const height = canvas.height; | |
| // Remove existing grid if it exists | |
| canvas.forEachObject(function(obj) { | |
| if (obj.gridLine) canvas.remove(obj); | |
| }); | |
| // Vertical lines | |
| for (let i = 0; i < width / gridSize; i++) { | |
| const line = new fabric.Line( | |
| [i * gridSize, 0, i * gridSize, height], { | |
| stroke: '#e5e7eb', | |
| strokeWidth: 1, | |
| selectable: false, | |
| evented: false, | |
| gridLine: true | |
| } | |
| ); | |
| canvas.add(line); | |
| } | |
| // Horizontal lines | |
| for (let i = 0; i < height / gridSize; i++) { | |
| const line = new fabric.Line( | |
| [0, i * gridSize, width, i * gridSize], { | |
| stroke: '#e5e7eb', | |
| strokeWidth: 1, | |
| selectable: false, | |
| evented: false, | |
| gridLine: true | |
| } | |
| ); | |
| canvas.add(line); | |
| } | |
| // Send grid to back | |
| canvas.sendToBack(canvas.item(canvas.size() - 1)); | |
| } | |
| // Initial grid setup | |
| drawGrid(); | |
| // Demo wall on load | |
| const wall = new fabric.Line( | |
| [100, 300, 300, 300], { | |
| stroke: 'black', | |
| strokeWidth: 2, | |
| selectable: true, | |
| objectCaching: false, | |
| name: 'Wall', | |
| length: 200, | |
| lockRotation: true | |
| } | |
| ); | |
| canvas.add(wall); | |
| // Window | |
| const windowObj = new fabric.Rect({ | |
| left: 200, | |
| top: 280, | |
| width: 60, | |
| height: 40, | |
| fill: 'white', | |
| stroke: 'black', | |
| strokeWidth: 1, | |
| selectable: true, | |
| name: 'Window' | |
| }); | |
| canvas.add(windowObj); | |
| // Door | |
| const door = new fabric.Rect({ | |
| left: 150, | |
| top: 280, | |
| width: 30, | |
| height: 50, | |
| fill: 'white', | |
| stroke: 'black', | |
| strokeWidth: 1, | |
| selectable: true, | |
| name: 'Door' | |
| }); | |
| canvas.add(door); | |
| // Initialize feather icons | |
| feather.replace(); | |
| // Tool buttons functionality | |
| document.querySelectorAll('.tool-btn').forEach(button => { | |
| button.addEventListener('click', function() { | |
| document.querySelectorAll('.tool-btn').forEach(btn => { | |
| btn.classList.remove('active'); | |
| }); | |
| this.classList.add('active'); | |
| }); | |
| }); | |
| // AI Command functionality | |
| document.getElementById('executeCommand').addEventListener('click', function() { | |
| const command = document.getElementById('aiCommandInput').value; | |
| if (command.trim() === '') return; | |
| // Simulate AI processing | |
| const historyItem = document.createElement('div'); | |
| historyItem.className = 'command-history-item p-2 rounded text-sm'; | |
| historyItem.innerHTML = ` | |
| <div class="font-medium">"${command}"</div> | |
| <div class="text-gray-500 text-xs">Just now</div> | |
| `; | |
| // Add to top of history | |
| const historyContainer = document.getElementById('commandHistory'); | |
| historyContainer.insertBefore(historyItem, historyContainer.firstChild); | |
| // Clear input | |
| document.getElementById('aiCommandInput').value = ''; | |
| // Simulate adding elements based on command | |
| if (command.toLowerCase().includes('wall')) { | |
| const lengthMatch = command.match(/(\d+)m/); | |
| const length = lengthMatch ? parseInt(lengthMatch[1]) * 20 : 100; | |
| const newWall = new fabric.Line( | |
| [400, 200, 400 + length, 200], { | |
| stroke: 'black', | |
| strokeWidth: 2, | |
| selectable: true, | |
| objectCaching: false, | |
| name: 'Wall', | |
| length: length | |
| } | |
| ); | |
| canvas.add(newWall); | |
| } | |
| else if (command.toLowerCase().includes('window')) { | |
| const newWindow = new fabric.Rect({ | |
| left: 350, | |
| top: 180, | |
| width: 60, | |
| height: 40, | |
| fill: 'white', | |
| stroke: 'black', | |
| strokeWidth: 1, | |
| selectable: true, | |
| name: 'Window' | |
| }); | |
| canvas.add(newWindow); | |
| } | |
| else if (command.toLowerCase().includes('door')) { | |
| const newDoor = new fabric.Rect({ | |
| left: 250, | |
| top: 180, | |
| width: 30, | |
| height: 50, | |
| fill: 'white', | |
| stroke: 'black', | |
| strokeWidth: 1, | |
| selectable: true, | |
| name: 'Door' | |
| }); | |
| canvas.add(newDoor); | |
| } | |
| // Scroll canvas to show new elements | |
| canvas.renderAll(); | |
| }); | |
| // Allow pressing Enter to execute command | |
| document.getElementById('aiCommandInput').addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') { | |
| document.getElementById('executeCommand').click(); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |