Spaces:
Running
Running
Now I cannot increase the size from anywhere it's only dragging but that's only from the middle make sure that's working OK why are you doing like this make sure that's working I want see I'm clarifying once again if I wanna increase the size of the element only from the border OK any border so if I are placing on the right border I can extend to right if I'm keeping the upside border I can extend to upside if I am keeping bottom down side bottom right left side corner I can extend aside understood so if my mouse point inside that element we cannot extend the size of it only we can drag - Follow Up Deployment
17f6c25
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>EVA UI Builder | AI-Powered Interface Designer</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"> | |
| <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> | |
| <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| dark: { | |
| 900: '#0A0A0F', | |
| 800: '#121218', | |
| 700: '#1A1A25', | |
| 600: '#232331', | |
| }, | |
| accent: { | |
| blue: '#00D4FF', | |
| purple: '#7A00FF', | |
| pink: '#FF00C8', | |
| } | |
| }, | |
| boxShadow: { | |
| 'glow': '0 0 15px rgba(0, 212, 255, 0.5)', | |
| 'glow-purple': '0 0 15px rgba(122, 0, 255, 0.5)', | |
| 'glow-pink': '0 0 15px rgba(255, 0, 200, 0.5)', | |
| }, | |
| animation: { | |
| 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite', | |
| 'float': 'float 6s ease-in-out infinite', | |
| }, | |
| keyframes: { | |
| float: { | |
| '0%, 100%': { transform: 'translateY(0)' }, | |
| '50%': { transform: 'translateY(-10px)' }, | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <script> | |
| $(document).ready(function() { | |
| // Current tool state | |
| let currentTool = 'select'; // 'select', 'hand', 'text', 'rectangle', 'circle', 'line' | |
| let isPanning = false; | |
| let panStart = { x: 0, y: 0 }; | |
| let canvasStart = { x: 0, y: 0 }; | |
| // Make component cards draggable (clone mode) | |
| $('.element-card').draggable({ | |
| helper: 'clone', | |
| cursor: 'move', | |
| zIndex: 1000, | |
| revert: 'invalid', | |
| start: function(event, ui) { | |
| // Improve visual feedback during drag | |
| ui.helper.addClass('opacity-75'); | |
| } | |
| }); | |
| // Make canvas a drop zone | |
| $('#dropZone').droppable({ | |
| accept: '.element-card', | |
| tolerance: 'pointer', | |
| activeClass: 'border-2 border-dashed border-accent-blue', | |
| drop: function(event, ui) { | |
| const elementType = ui.draggable.data('element'); | |
| const position = { | |
| x: event.clientX - event.target.getBoundingClientRect().left, | |
| y: event.clientY - event.target.getBoundingClientRect().top | |
| }; | |
| addElementToCanvas(elementType, position); | |
| } | |
| }); | |
| // Function to add element to canvas with position | |
| function addElementToCanvas(type, position) { | |
| const elementId = 'element-' + Date.now(); | |
| let elementHTML = ''; | |
| // Position element at drop point | |
| const adjustedPosition = { | |
| x: position.x - 50, | |
| y: position.y - 25 | |
| }; | |
| switch(type) { | |
| case 'button': | |
| elementHTML = ` | |
| <div class="canvas-element glass-panel p-2 rounded flex items-center justify-center absolute" | |
| style="width: 120px; height: 40px; top: ${adjustedPosition.y}px; left: ${adjustedPosition.x}px;" | |
| id="${elementId}"> | |
| <span class="text-sm">Button</span> | |
| </div> | |
| `; | |
| break; | |
| case 'input': | |
| elementHTML = ` | |
| <div class="canvas-element glass-panel p-2 rounded absolute" | |
| style="width: 200px; height: 40px; top: ${adjustedPosition.y}px; left: ${adjustedPosition.x}px;" | |
| id="${elementId}"> | |
| <input type="text" placeholder="Input field" class="w-full h-full bg-transparent border border-gray-600 rounded px-2 text-sm"> | |
| </div> | |
| `; | |
| break; | |
| case 'card': | |
| elementHTML = ` | |
| <div class="canvas-element glass-panel p-4 rounded absolute" | |
| style="width: 250px; height: 150px; top: ${adjustedPosition.y}px; left: ${adjustedPosition.x}px;" | |
| id="${elementId}"> | |
| <h3 class="font-semibold mb-2">Card Title</h3> | |
| <p class="text-xs">Card content goes here...</p> | |
| </div> | |
| `; | |
| break; | |
| case 'image': | |
| elementHTML = ` | |
| <div class="canvas-element glass-panel rounded absolute flex items-center justify-center" | |
| style="width: 200px; height: 150px; top: ${adjustedPosition.y}px; left: ${adjustedPosition.x}px;" | |
| id="${elementId}"> | |
| <i class="fas fa-image text-4xl text-gray-500"></i> | |
| </div> | |
| `; | |
| break; | |
| case 'container': | |
| elementHTML = ` | |
| <div class="canvas-element glass-panel p-4 rounded absolute" | |
| style="width: 300px; height: 200px; top: ${adjustedPosition.y}px; left: ${adjustedPosition.x}px;" | |
| id="${elementId}"> | |
| <div class="w-full h-full border-2 border-dashed border-gray-600 rounded flex items-center justify-center"> | |
| <span class="text-gray-500">Container</span> | |
| </div> | |
| </div> | |
| `; | |
| break; | |
| case 'section': | |
| elementHTML = ` | |
| <div class="canvas-element glass-panel p-4 rounded absolute" | |
| style="width: 400px; height: 300px; top: ${adjustedPosition.y}px; left: ${adjustedPosition.x}px;" | |
| id="${elementId}"> | |
| <div class="w-full h-full border border-gray-600 rounded flex items-center justify-center"> | |
| <span class="text-gray-500">Section</span> | |
| </div> | |
| </div> | |
| `; | |
| break; | |
| default: | |
| elementHTML = ` | |
| <div class="canvas-element glass-panel p-2 rounded absolute" | |
| style="width: 150px; height: 50px; top: ${adjustedPosition.y}px; left: ${adjustedPosition.x}px;" | |
| id="${elementId}"> | |
| <span class="text-sm">${type.charAt(0).toUpperCase() + type.slice(1)}</span> | |
| </div> | |
| `; | |
| } | |
| $('#dropZone').append(elementHTML); | |
| // Make the new element selectable | |
| $(`#${elementId}`).click(function(e) { | |
| e.stopPropagation(); | |
| if (currentTool === 'select') { | |
| $('.canvas-element').removeClass('selected'); | |
| $(this).addClass('selected'); | |
| updatePropertyPanel($(this)); | |
| } | |
| }); | |
| // Make the new element draggable | |
| makeElementDraggable(`#${elementId}`); | |
| // Make the new element resizable and rotatable | |
| makeElementResizableRotatable(`#${elementId}`); | |
| // Select the newly added element | |
| if (currentTool === 'select') { | |
| $('.canvas-element').removeClass('selected'); | |
| $(`#${elementId}`).addClass('selected'); | |
| updatePropertyPanel($(`#${elementId}`)); | |
| } | |
| } | |
| // Make canvas elements draggable with better containment | |
| function makeElementDraggable(selector) { | |
| $(selector).draggable({ | |
| containment: 'parent', | |
| cursor: 'move', | |
| handle: ':not(.resizer):not(.rotator)', | |
| start: function() { | |
| $(this).addClass('dragging'); | |
| }, | |
| drag: function(event, ui) { | |
| // Smooth dragging without visual artifacts | |
| ui.helper.removeClass('bg-dark-700'); | |
| }, | |
| stop: function() { | |
| $(this).removeClass('dragging'); | |
| } | |
| }); | |
| } | |
| // Make elements resizable and rotatable | |
| function makeElementResizableRotatable(selector) { | |
| interact(selector) | |
| .draggable({ | |
| inertia: true, | |
| modifiers: [ | |
| interact.modifiers.restrictRect({ | |
| restriction: 'parent' | |
| }) | |
| ], | |
| autoScroll: true, | |
| listeners: { | |
| move: dragMoveListener | |
| } | |
| }) | |
| .resizable({ | |
| edges: { | |
| left: '.resize-left', | |
| right: '.resize-right', | |
| top: '.resize-top', | |
| bottom: '.resize-bottom' | |
| }, | |
| modifiers: [ | |
| interact.modifiers.restrictEdges({ | |
| outer: 'parent' | |
| }) | |
| ], | |
| inertia: true | |
| }) | |
| .on('resizestart', function (event) { | |
| event.target.classList.add('resizing'); | |
| }) | |
| .on('resizemove', function (event) { | |
| var target = event.target; | |
| var x = (parseFloat(target.getAttribute('data-x')) || 0); | |
| var y = (parseFloat(target.getAttribute('data-y')) || 0); | |
| target.style.width = event.rect.width + 'px'; | |
| target.style.height = event.rect.height + 'px'; | |
| x += event.deltaRect.left; | |
| y += event.deltaRect.top; | |
| target.style.transform = 'translate(' + x + 'px,' + y + 'px)'; | |
| target.setAttribute('data-x', x); | |
| target.setAttribute('data-y', y); | |
| }) | |
| .on('resizeend', function (event) { | |
| event.target.classList.remove('resizing'); | |
| // Reset resize classes | |
| event.target.classList.remove('resize-left', 'resize-right', 'resize-top', 'resize-bottom'); | |
| }); | |
| } | |
| // Drag move listener for positioning elements | |
| function dragMoveListener (event) { | |
| var target = event.target; | |
| var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx; | |
| var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy; | |
| target.style.transform = 'translate(' + x + 'px,' + y + 'px)'; | |
| target.setAttribute('data-x', x); | |
| target.setAttribute('data-y', y); | |
| } | |
| // Update cursor and resize state based on mouse position relative to element edges | |
| $(document).on('mousemove', '.canvas-element', function(e) { | |
| const element = $(this); | |
| const offset = element.offset(); | |
| const width = element.outerWidth(); | |
| const height = element.outerHeight(); | |
| const x = e.pageX - offset.left; | |
| const y = e.pageY - offset.top; | |
| const edgeThreshold = 8; | |
| // Check if mouse is near any edge | |
| const nearLeft = x < edgeThreshold; | |
| const nearRight = x > width - edgeThreshold; | |
| const nearTop = y < edgeThreshold; | |
| const nearBottom = y > height - edgeThreshold; | |
| const nearAnyEdge = nearLeft || nearRight || nearTop || nearBottom; | |
| // Set appropriate cursor | |
| if ((nearLeft && nearTop) || (nearRight && nearBottom)) { | |
| element.css('cursor', 'nwse-resize'); | |
| } else if ((nearRight && nearTop) || (nearLeft && nearBottom)) { | |
| element.css('cursor', 'nesw-resize'); | |
| } else if (nearLeft || nearRight) { | |
| element.css('cursor', 'ew-resize'); | |
| } else if (nearTop || nearBottom) { | |
| element.css('cursor', 'ns-resize'); | |
| } else { | |
| element.css('cursor', 'move'); | |
| } | |
| // Add resize classes for interact.js | |
| element.removeClass('resize-left resize-right resize-top resize-bottom'); | |
| if (nearLeft) element.addClass('resize-left'); | |
| if (nearRight) element.addClass('resize-right'); | |
| if (nearTop) element.addClass('resize-top'); | |
| if (nearBottom) element.addClass('resize-bottom'); | |
| }); | |
| // Reset cursor and resize state when mouse leaves element | |
| $(document).on('mouseleave', '.canvas-element', function() { | |
| $(this).css('cursor', 'default') | |
| .removeClass('resize-left resize-right resize-top resize-bottom'); | |
| }); | |
| // Select canvas elements | |
| $(document).on('click', '.canvas-element', function(e) { | |
| e.stopPropagation(); | |
| if (currentTool === 'select') { | |
| $('.canvas-element').removeClass('selected'); | |
| $(this).addClass('selected'); | |
| updatePropertyPanel($(this)); | |
| } | |
| }); | |
| // Add hover effect for bounding box visualization | |
| $(document).on('mouseenter', '.canvas-element', function() { | |
| $(this).addClass('hovered'); | |
| }).on('mouseleave', '.canvas-element', function() { | |
| $(this).removeClass('hovered'); | |
| }); | |
| // Deselect when clicking on canvas | |
| $('#dropZone').click(function(e) { | |
| if (e.target.id === 'dropZone' && currentTool === 'select') { | |
| $('.canvas-element').removeClass('selected'); | |
| updatePropertyPanel(null); | |
| } | |
| }); | |
| // Initialize any existing elements | |
| $('.canvas-element').each(function() { | |
| makeElementDraggable(this); | |
| makeElementResizableRotatable(this); | |
| }); | |
| // Tool selection | |
| $('.tool-btn').click(function() { | |
| $('.tool-btn').removeClass('bg-dark-700'); | |
| $(this).addClass('bg-dark-700'); | |
| currentTool = $(this).data('tool'); | |
| // Update cursor based on tool | |
| updateCanvasCursor(); | |
| }); | |
| // Update cursor based on current tool | |
| function updateCanvasCursor() { | |
| const canvas = $('#canvas'); | |
| canvas.removeClass('cursor-move cursor-crosshair cursor-text'); | |
| switch(currentTool) { | |
| case 'hand': | |
| canvas.addClass('cursor-move'); | |
| break; | |
| case 'rectangle': | |
| case 'circle': | |
| case 'line': | |
| canvas.addClass('cursor-crosshair'); | |
| break; | |
| case 'text': | |
| canvas.addClass('cursor-text'); | |
| break; | |
| default: | |
| canvas.css('cursor', 'default'); | |
| } | |
| } | |
| // Spacebar panning functionality | |
| $(document).keydown(function(e) { | |
| if (e.keyCode === 32 && !isPanning) { // Spacebar | |
| e.preventDefault(); | |
| isPanning = true; | |
| $('#canvas').addClass('cursor-grab'); | |
| } | |
| }); | |
| $(document).keyup(function(e) { | |
| if (e.keyCode === 32 && isPanning) { | |
| isPanning = false; | |
| $('#canvas').removeClass('cursor-grab cursor-grabbing'); | |
| } | |
| }); | |
| // Panning implementation | |
| $('#canvas').mousedown(function(e) { | |
| if (isPanning) { | |
| e.preventDefault(); | |
| panStart = { x: e.clientX, y: e.clientY }; | |
| canvasStart = { | |
| x: parseInt($('#dropZone').css('left')) || 0, | |
| y: parseInt($('#dropZone').css('top')) || 0 | |
| }; | |
| $('#canvas').addClass('cursor-grabbing').removeClass('cursor-grab'); | |
| $(document).on('mousemove.pan', function(e) { | |
| const dx = e.clientX - panStart.x; | |
| const dy = e.clientY - panStart.y; | |
| $('#dropZone').css({ | |
| left: canvasStart.x + dx, | |
| top: canvasStart.y + dy | |
| }); | |
| }); | |
| } | |
| }); | |
| $(document).mouseup(function(e) { | |
| if (isPanning) { | |
| $('#canvas').addClass('cursor-grab').removeClass('cursor-grabbing'); | |
| $(document).off('mousemove.pan'); | |
| } | |
| }); | |
| // Update property panel based on selected element | |
| function updatePropertyPanel(element) { | |
| if (element) { | |
| const elementType = element.data('element') || 'element'; | |
| $('#selectedElementName').text(elementType.charAt(0).toUpperCase() + elementType.slice(1) + ' selected'); | |
| // Show/hide text customization based on element content | |
| if (element.find('span, h3, p, input').length > 0) { | |
| $('#textCustomization').show(); | |
| } else { | |
| $('#textCustomization').hide(); | |
| } | |
| } else { | |
| $('#selectedElementName').text('No element selected'); | |
| $('#textCustomization').hide(); | |
| } | |
| } | |
| }); | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background: linear-gradient(135deg, #0A0A0F 0%, #121218 100%); | |
| color: #E2E8F0; | |
| overflow: hidden; | |
| } | |
| .glass { | |
| background: rgba(26, 26, 37, 0.6); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| } | |
| .glass-panel { | |
| background: rgba(18, 18, 24, 0.7); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .glow-border { | |
| box-shadow: 0 0 10px rgba(0, 212, 255, 0.3); | |
| } | |
| .glow-border-purple { | |
| box-shadow: 0 0 10px rgba(122, 0, 255, 0.3); | |
| } | |
| .glow-border-pink { | |
| box-shadow: 0 0 10px rgba(255, 0, 200, 0.3); | |
| } | |
| .element-card { | |
| transition: all 0.3s ease; | |
| padding: 0.15rem; | |
| } | |
| .element-card:hover { | |
| transform: translateY(-1px); | |
| box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); | |
| } | |
| .tiny-text { | |
| font-size: 0.65rem; | |
| line-height: 0.75rem; | |
| } | |
| .tiny-input { | |
| padding: 0.1rem 0.25rem; | |
| font-size: 0.65rem; | |
| } | |
| .tiny-button { | |
| padding: 0.15rem 0.4rem; | |
| font-size: 0.65rem; | |
| } | |
| .tiny-icon { | |
| font-size: 0.7rem; | |
| } | |
| .canvas-grid { | |
| background-image: | |
| linear-gradient(rgba(100, 100, 150, 0.1) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(100, 100, 150, 0.1) 1px, transparent 1px); | |
| background-size: 20px 20px; | |
| } | |
| .canvas-element { | |
| position: absolute; | |
| cursor: move; | |
| user-select: none; | |
| } | |
| .canvas-element.selected { | |
| box-shadow: 0 0 0 2px #00D4FF, 0 0 15px rgba(0, 212, 255, 0.5); | |
| } | |
| .canvas-element.hovered { | |
| box-shadow: 0 0 0 1px #00D4FF, 0 0 10px rgba(0, 212, 255, 0.3); | |
| } | |
| .dragging { | |
| opacity: 0.7; | |
| z-index: 1000; | |
| } | |
| .drop-zone { | |
| position: relative; | |
| width: 100%; | |
| height: 100%; | |
| transition: border-color 0.2s ease; | |
| } | |
| .property-slider::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| width: 16px; | |
| height: 16px; | |
| border-radius: 50%; | |
| background: #00D4FF; | |
| cursor: pointer; | |
| box-shadow: 0 0 5px rgba(0, 212, 255, 0.8); | |
| } | |
| .property-slider::-moz-range-thumb { | |
| width: 16px; | |
| height: 16px; | |
| border-radius: 50%; | |
| background: #00D4FF; | |
| cursor: pointer; | |
| border: none; | |
| box-shadow: 0 0 5px rgba(0, 212, 255, 0.8); | |
| } | |
| .glow-button { | |
| background: linear-gradient(90deg, #7A00FF, #00D4FF); | |
| transition: all 0.3s ease; | |
| } | |
| .glow-button:hover { | |
| box-shadow: 0 0 15px rgba(122, 0, 255, 0.7); | |
| transform: translateY(-2px); | |
| } | |
| .glow-input { | |
| background: rgba(26, 26, 37, 0.6); | |
| border: 1px solid rgba(100, 100, 150, 0.3); | |
| transition: all 0.3s ease; | |
| } | |
| .glow-input:focus { | |
| border-color: #00D4FF; | |
| box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.2); | |
| } | |
| .glow-select { | |
| background: rgba(26, 26, 37, 0.6); | |
| border: 1px solid rgba(100, 100, 150, 0.3); | |
| transition: all 0.3s ease; | |
| } | |
| .glow-select:focus { | |
| border-color: #00D4FF; | |
| box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.2); | |
| } | |
| .glow-tab { | |
| border-bottom: 2px solid transparent; | |
| transition: all 0.3s ease; | |
| } | |
| .glow-tab.active { | |
| border-bottom: 2px solid #00D4FF; | |
| color: #00D4FF; | |
| } | |
| .glow-tab:hover { | |
| color: #00D4FF; | |
| } | |
| .tool-btn { | |
| transition: all 0.2s ease; | |
| } | |
| .tool-btn:hover { | |
| background: rgba(100, 100, 150, 0.1); | |
| } | |
| .layer-item { | |
| transition: all 0.2s ease; | |
| } | |
| .layer-item:hover { | |
| background: rgba(100, 100, 150, 0.1); | |
| } | |
| .layer-item.selected { | |
| background: rgba(0, 212, 255, 0.1); | |
| border-left: 2px solid #00D4FF; | |
| } | |
| /* Responsive adjustments */ | |
| @media (max-width: 768px) { | |
| .sidebar { | |
| width: 60px; | |
| } | |
| .sidebar-content { | |
| display: none; | |
| } | |
| .sidebar:hover { | |
| width: 256px; | |
| } | |
| .sidebar:hover .sidebar-content { | |
| display: block; | |
| } | |
| .main-content { | |
| margin-left: 60px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="h-screen flex flex-col overflow-hidden"> | |
| <!-- Top Bar --> | |
| <div class="glass h-16 flex items-center justify-between px-6 border-b border-gray-800"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-accent-blue to-accent-purple flex items-center justify-center animate-pulse-slow"> | |
| <i class="fas fa-brain text-white"></i> | |
| </div> | |
| <h1 class="text-xl font-bold ml-2 bg-clip-text text-transparent bg-gradient-to-r from-accent-blue to-accent-purple"> | |
| EVA UI Builder | |
| </h1> | |
| </div> | |
| <div class="text-sm text-gray-400">Project: New Design</div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="px-4 py-2 rounded-lg text-sm font-medium hover:bg-dark-700 transition">Undo</button> | |
| <button class="px-4 py-2 rounded-lg text-sm font-medium hover:bg-dark-700 transition">Redo</button> | |
| <button class="px-4 py-2 rounded-lg text-sm font-medium hover:bg-dark-700 transition">Preview</button> | |
| <button class="glow-button px-6 py-2 rounded-lg text-sm font-medium text-white">Export</button> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex flex-1 overflow-hidden"> | |
| <!-- Left Sidebar --> | |
| <div class="w-64 glass-panel flex flex-col border-r border-gray-800 sidebar"> | |
| <div class="p-2 sidebar-content"> | |
| <h2 class="text-xs font-semibold mb-2">Components</h2> | |
| <div class="grid grid-cols-3 gap-1"> | |
| <div class="element-card glass p-1 rounded flex flex-col items-center justify-center cursor-pointer" data-element="button"> | |
| <i class="fas fa-square tiny-icon mb-1 text-accent-blue"></i> | |
| <span class="tiny-text">Button</span> | |
| </div> | |
| <div class="element-card glass p-1 rounded flex flex-col items-center justify-center cursor-pointer" data-element="input"> | |
| <i class="fas fa-i-cursor tiny-icon mb-1 text-accent-blue"></i> | |
| <span class="tiny-text">Input</span> | |
| </div> | |
| <div class="element-card glass p-1 rounded flex flex-col items-center justify-center cursor-pointer" data-element="card"> | |
| <i class="fas fa-square tiny-icon mb-1 text-accent-blue"></i> | |
| <span class="tiny-text">Card</span> | |
| </div> | |
| <div class="element-card glass p-1 rounded flex flex-col items-center justify-center cursor-pointer" data-element="image"> | |
| <i class="fas fa-image tiny-icon mb-1 text-accent-blue"></i> | |
| <span class="tiny-text">Image</span> | |
| </div> | |
| <div class="element-card glass p-1 rounded flex flex-col items-center justify-center cursor-pointer" data-element="container"> | |
| <i class="fas fa-columns tiny-icon mb-1 text-accent-blue"></i> | |
| <span class="tiny-text">Container</span> | |
| </div> | |
| <div class="element-card glass p-1 rounded flex flex-col items-center justify-center cursor-pointer" data-element="section"> | |
| <i class="fas fa-border-all tiny-icon mb-1 text-accent-blue"></i> | |
| <span class="tiny-text">Section</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-2 border-t border-gray-800 sidebar-content"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <h2 class="text-xs font-semibold">Custom Elements</h2> | |
| <button class="text-accent-blue hover:text-accent-purple text-xs"> | |
| <i class="fas fa-folder-plus tiny-icon"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-1"> | |
| <div class="element-card glass p-1 rounded flex items-center cursor-pointer" data-element="hero"> | |
| <i class="fas fa-file-code tiny-icon mr-1 text-accent-purple"></i> | |
| <span class="tiny-text">Hero Section</span> | |
| <button class="ml-auto text-xs text-accent-blue"> | |
| <i class="fas fa-plus tiny-icon"></i> | |
| </button> | |
| </div> | |
| <div class="element-card glass p-1 rounded flex items-center cursor-pointer" data-element="feature"> | |
| <i class="fas fa-file-code tiny-icon mr-1 text-accent-purple"></i> | |
| <span class="tiny-text">Feature Card</span> | |
| <button class="ml-auto text-xs text-accent-blue"> | |
| <i class="fas fa-plus tiny-icon"></i> | |
| </button> | |
| </div> | |
| <div class="element-card glass p-1 rounded flex items-center cursor-pointer" data-element="pricing"> | |
| <i class="fas fa-file-code tiny-icon mr-1 text-accent-purple"></i> | |
| <span class="tiny-text">Pricing Table</span> | |
| <button class="ml-auto text-xs text-accent-blue"> | |
| <i class="fas fa-plus tiny-icon"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-2 border-t border-gray-800 mt-auto sidebar-content"> | |
| <h2 class="text-xs font-semibold mb-2">Layers</h2> | |
| <div class="space-y-1"> | |
| <div class="layer-item p-1 rounded flex items-center cursor-pointer selected"> | |
| <i class="fas fa-square tiny-icon mr-1 text-accent-blue"></i> | |
| <span class="tiny-text">Primary Button</span> | |
| </div> | |
| <div class="layer-item p-1 rounded flex items-center cursor-pointer"> | |
| <i class="fas fa-heading tiny-icon mr-1 text-accent-purple"></i> | |
| <span class="tiny-text">Welcome Text</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Center Canvas --> | |
| <div class="flex-1 flex flex-col overflow-hidden relative"> | |
| <!-- Canvas Header Controls --> | |
| <div class="glass h-12 flex items-center justify-between px-4 border-b border-gray-800"> | |
| <div class="flex space-x-2"> | |
| <button class="glow-tab px-3 py-1 text-sm active">Desktop</button> | |
| <button class="glow-tab px-3 py-1 text-sm">Tablet</button> | |
| <button class="glow-tab px-3 py-1 text-sm">Mobile</button> | |
| </div> | |
| <div class="flex items-center space-x-3"> | |
| <button class="text-gray-400 hover:text-white"> | |
| <i class="fas fa-grid-2"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-white"> | |
| <i class="fas fa-sun"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-white"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Canvas Area --> | |
| <div class="flex-1 overflow-auto relative canvas-grid" id="canvas"> | |
| <div class="drop-zone absolute" id="dropZone" style="width: 200%; height: 200%; left: -50%; top: -50%;"> | |
| <!-- Canvas is now clean - ready for elements to be added --> | |
| </div> | |
| </div> | |
| <!-- Bottom Toolbar --> | |
| <div class="glass h-10 flex items-center justify-center border-t border-gray-800"> | |
| <div class="flex space-x-1"> | |
| <button class="tool-btn w-8 h-8 rounded flex items-center justify-center bg-dark-700" data-tool="select" title="Selection Tool (V)"> | |
| <i class="fas fa-mouse-pointer text-xs"></i> | |
| </button> | |
| <button class="tool-btn w-8 h-8 rounded flex items-center justify-center" data-tool="hand" title="Hand Tool (H)"> | |
| <i class="fas fa-hand-paper text-xs"></i> | |
| </button> | |
| <button class="tool-btn w-8 h-8 rounded flex items-center justify-center" data-tool="rectangle" title="Rectangle Tool (R)"> | |
| <i class="fas fa-square text-xs"></i> | |
| </button> | |
| <button class="tool-btn w-8 h-8 rounded flex items-center justify-center" data-tool="circle" title="Ellipse Tool (O)"> | |
| <i class="fas fa-circle text-xs"></i> | |
| </button> | |
| <button class="tool-btn w-8 h-8 rounded flex items-center justify-center" data-tool="line" title="Line Tool (L)"> | |
| <i class="fas fa-minus text-xs"></i> | |
| </button> | |
| <button class="tool-btn w-8 h-8 rounded flex items-center justify-center" data-tool="text" title="Text Tool (T)"> | |
| <i class="fas fa-font text-xs"></i> | |
| </button> | |
| <div class="w-px h-6 bg-gray-700 mx-1"></div> | |
| <button class="tool-btn w-8 h-8 rounded flex items-center justify-center" data-tool="eyedropper" title="Eyedropper Tool (I)"> | |
| <i class="fas fa-eye-dropper text-xs"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Customization Panel --> | |
| <div class="w-48 glass-panel flex flex-col border-l border-gray-800"> | |
| <div class="p-2 border-b border-gray-800"> | |
| <h2 class="text-xs font-semibold">Properties</h2> | |
| <p class="tiny-text text-gray-400" id="selectedElementName">No element selected</p> | |
| </div> | |
| <div class="flex-1 overflow-y-auto p-2"> | |
| <div class="mb-2"> | |
| <h3 class="font-medium tiny-text mb-1">Dimensions</h3> | |
| <div class="grid grid-cols-2 gap-1"> | |
| <div> | |
| <label class="tiny-text text-gray-400">Width</label> | |
| <input type="text" value="200px" class="w-full mt-1 tiny-input rounded-md glow-input"> | |
| </div> | |
| <div> | |
| <label class="tiny-text text-gray-400">Height</label> | |
| <input type="text" value="50px" class="w-full mt-1 tiny-input rounded-md glow-input"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-2"> | |
| <h3 class="font-medium tiny-text mb-1">Position</h3> | |
| <div class="grid grid-cols-2 gap-1"> | |
| <div> | |
| <label class="tiny-text text-gray-400">X</label> | |
| <input type="text" value="300px" class="w-full mt-1 tiny-input rounded-md glow-input"> | |
| </div> | |
| <div> | |
| <label class="tiny-text text-gray-400">Y</label> | |
| <input type="text" value="200px" class="w-full mt-1 tiny-input rounded-md glow-input"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-2"> | |
| <h3 class="font-medium tiny-text mb-1">Appearance</h3> | |
| <div class="space-y-2"> | |
| <div> | |
| <label class="tiny-text text-gray-400">Background</label> | |
| <div class="flex items-center mt-1"> | |
| <div class="w-4 h-4 rounded-md bg-gradient-to-r from-accent-blue to-accent-purple mr-1"></div> | |
| <input type="text" value="Gradient" class="flex-1 tiny-input rounded-md glow-input"> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="tiny-text text-gray-400">Border Radius</label> | |
| <input type="range" min="0" max="50" value="8" class="w-full mt-1 property-slider"> | |
| </div> | |
| <div> | |
| <label class="tiny-text text-gray-400">Opacity</label> | |
| <input type="range" min="0" max="100" value="100" class="w-full mt-1 property-slider"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-2" id="textCustomization"> | |
| <h3 class="font-medium tiny-text mb-1">Text</h3> | |
| <div class="space-y-2"> | |
| <div> | |
| <label class="tiny-text text-gray-400">Content</label> | |
| <input type="text" value="Primary Button" class="w-full mt-1 tiny-input rounded-md glow-input" id="textContent"> | |
| </div> | |
| <div> | |
| <label class="tiny-text text-gray-400">Font Size</label> | |
| <select class="w-full mt-1 tiny-input rounded-md glow-select"> | |
| <option>12px</option> | |
| <option selected>14px</option> | |
| <option>16px</option> | |
| <option>18px</option> | |
| <option>20px</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="tiny-text text-gray-400">Color</label> | |
| <div class="flex items-center mt-1"> | |
| <div class="w-4 h-4 rounded-md bg-white mr-1"></div> | |
| <input type="text" value="#FFFFFF" class="flex-1 tiny-input rounded-md glow-input"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-2"> | |
| <h3 class="font-medium tiny-text mb-1">Effects</h3> | |
| <div class="space-y-2"> | |
| <div> | |
| <label class="tiny-text text-gray-400">Shadow</label> | |
| <select class="w-full mt-1 tiny-input rounded-md glow-select"> | |
| <option>None</option> | |
| <option selected>Soft Glow</option> | |
| <option>Medium Shadow</option> | |
| <option>Strong Shadow</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="tiny-text text-gray-400">Animation</label> | |
| <select class="w-full mt-1 tiny-input rounded-md glow-select"> | |
| <option>None</option> | |
| <option>Fade In</option> | |
| <option selected>Pulse</option> | |
| <option>Slide Up</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-2 border-t border-gray-800"> | |
| <button class="w-full tiny-button rounded-md bg-gradient-to-r from-accent-blue to-accent-purple font-medium glow-border"> | |
| Apply Changes | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Orb Decorations --> | |
| <div class="fixed top-1/4 left-1/4 w-64 h-64 rounded-full bg-gradient-to-r from-accent-blue to-accent-purple opacity-10 blur-3xl -z-10 animate-float"></div> | |
| <div class="fixed bottom-1/3 right-1/4 w-48 h-48 rounded-full bg-gradient-to-r from-accent-purple to-accent-pink opacity-10 blur-3xl -z-10 animate-float" style="animation-delay: 1s;"></div> | |
| <div class="fixed top-1/3 right-1/3 w-32 h-32 rounded-full bg-gradient-to-r from-accent-pink to-accent-blue opacity-10 blur-3xl -z-10 animate-float" style="animation-delay: 2s;"></div> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=basheer1414/builder" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |