Spaces:
Running
Running
| <html lang="en" class="h-full"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Editor - EditCraft Pro</title> | |
| <link rel="icon" type="image/x-icon" href="/assets/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> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| } | |
| #preview-container { | |
| background-image: url('data:image/svg+xml;utf8,<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg"><rect width="10" height="10" fill="%23e5e7eb"/><rect x="10" y="10" width="10" height="10" fill="%23e5e7eb"/></svg>'); | |
| } | |
| .timeline-track:hover .timeline-track-controls { | |
| opacity: 1; | |
| } | |
| .tool-button.active { | |
| @apply bg-indigo-100 text-indigo-700; | |
| } | |
| .resizer { | |
| width: 10px; | |
| background: rgba(156, 163, 175, 0.2); | |
| cursor: col-resize; | |
| transition: background 0.2s; | |
| } | |
| .resizer:hover { | |
| background: rgba(156, 163, 175, 0.4); | |
| } | |
| </style> | |
| </head> | |
| <body class="h-full flex flex-col bg-gray-100"> | |
| <!-- Top Navigation --> | |
| <header class="bg-white border-b border-gray-200"> | |
| <div class="flex items-center justify-between px-4 py-2"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex items-center"> | |
| <i data-feather="edit-3" class="h-6 w-6 text-indigo-600"></i> | |
| <span class="ml-2 font-semibold">EditCraft<span class="text-indigo-600">Pro</span></span> | |
| </div> | |
| <div class="hidden md:flex space-x-1"> | |
| <button class="px-3 py-2 text-sm rounded-md hover:bg-gray-100">File</button> | |
| <button class="px-3 py-2 text-sm rounded-md hover:bg-gray-100">Edit</button> | |
| <button class="px-3 py-2 text-sm rounded-md hover:bg-gray-100">View</button> | |
| <button class="px-3 py-2 text-sm rounded-md hover:bg-gray-100">Help</button> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <button class="p-2 rounded-full hover:bg-gray-100"> | |
| <i data-feather="cloud" class="h-5 w-5"></i> | |
| </button> | |
| <button class="p-2 rounded-full hover:bg-gray-100"> | |
| <i data-feather="share-2" class="h-5 w-5"></i> | |
| </button> | |
| <button class="px-3 py-1.5 bg-indigo-600 text-white text-sm rounded-md hover:bg-indigo-700 flex items-center"> | |
| <i data-feather="download" class="h-4 w-4 mr-1"></i> | |
| <span>Export</span> | |
| </button> | |
| <div class="ml-2 relative"> | |
| <button class="flex items-center space-x-1 p-1 rounded-full hover:bg-gray-100"> | |
| <div class="h-8 w-8 rounded-full bg-indigo-100 flex items-center justify-center"> | |
| <i data-feather="user" class="h-4 w-4 text-indigo-600"></i> | |
| </div> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <div class="flex flex-1 overflow-hidden"> | |
| <!-- Left Sidebar - Tools --> | |
| <div class="w-16 bg-white border-r border-gray-200 flex flex-col items-center py-4 space-y-4"> | |
| <button class="tool-button active p-2 rounded-lg" title="Select"> | |
| <i data-feather="mouse-pointer" class="h-6 w-6"></i> | |
| </button> | |
| <button class="tool-button p-2 rounded-lg" title="Crop"> | |
| <i data-feather="crop" class="h-6 w-6"></i> | |
| </button> | |
| <button class="tool-button p-2 rounded-lg" title="Text"> | |
| <i data-feather="type" class="h-6 w-6"></i> | |
| </button> | |
| <button class="tool-button p-2 rounded-lg" title="Brush"> | |
| <i data-feather="edit-3" class="h-6 w-6"></i> | |
| </button> | |
| <button class="tool-button p-2 rounded-lg" title="Shapes"> | |
| <i data-feather="square" class="h-6 w-6"></i> | |
| </button> | |
| <button class="tool-button p-2 rounded-lg" title="Filters"> | |
| <i data-feather="sliders" class="h-6 w-6"></i> | |
| </button> | |
| <button class="tool-button p-2 rounded-lg" title="AI Tools"> | |
| <i data-feather="cpu" class="h-6 w-6"></i> | |
| </button> | |
| <button class="tool-button p-2 rounded-lg" title="Audio"> | |
| <i data-feather="music" class="h-6 w-6"></i> | |
| </button> | |
| <button class="tool-button p-2 rounded-lg" title="Effects"> | |
| <i data-feather="zap" class="h-6 w-6"></i> | |
| </button> | |
| </div> | |
| <!-- Main Content Area --> | |
| <div class="flex-1 flex flex-col overflow-hidden"> | |
| <!-- Preview Area --> | |
| <div class="flex-1 flex items-center justify-center p-4 overflow-auto"> | |
| <div id="preview-container" class="w-full h-full max-w-4xl max-h-[70vh] bg-white shadow-lg rounded-lg overflow-hidden relative"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <div class="text-center"> | |
| <i data-feather="image" class="h-12 w-12 text-gray-300 mx-auto"></i> | |
| <p class="mt-2 text-gray-500">Drag media here or click to browse</p> | |
| <button class="mt-4 px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700"> | |
| Import Media | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Timeline Area --> | |
| <div class="bg-gray-800 text-gray-200 border-t border-gray-700"> | |
| <div class="px-4 py-2 flex justify-between items-center"> | |
| <div class="flex items-center space-x-4"> | |
| <button class="p-1 rounded hover:bg-gray-700"> | |
| <i data-feather="play" class="h-4 w-4"></i> | |
| </button> | |
| <div class="text-sm"> | |
| <span class="font-mono">00:00:00:00</span> | |
| <span class="mx-1">/</span> | |
| <span class="font-mono text-gray-400">00:01:30:00</span> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <button class="p-1 rounded hover:bg-gray-700"> | |
| <i data-feather="zoom-in" class="h-4 w-4"></i> | |
| </button> | |
| <button class="p-1 rounded hover:bg-gray-700"> | |
| <i data-feather="zoom-out" class="h-4 w-4"></i> | |
| </button> | |
| <button class="p-1 rounded hover:bg-gray-700"> | |
| <i data-feather="settings" class="h-4 w-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="h-40 bg-gray-900 overflow-auto px-2 pt-2"> | |
| <div class="timeline-track bg-gray-700 rounded mb-2 h-12 relative"> | |
| <div class="absolute left-0 top-0 bottom-0 w-24 bg-gray-600 rounded-l flex items-center px-2"> | |
| <span class="text-xs truncate">Video Track 1</span> | |
| </div> | |
| <div class="absolute left-24 right-0 top-0 bottom-0"> | |
| <div class="h-full flex items-center px-1"> | |
| <div class="bg-indigo-500 h-8 rounded" style="width: 200px;"></div> | |
| </div> | |
| </div> | |
| <div class="timeline-track-controls absolute right-2 top-1/2 transform -translate-y-1/2 flex space-x-1 opacity-0 transition-opacity"> | |
| <button class="p-1 bg-gray-600 rounded hover:bg-gray-500"> | |
| <i data-feather="eye" class="h-3 w-3"></i> | |
| </button> | |
| <button class="p-1 bg-gray-600 rounded hover:bg-gray-500"> | |
| <i data-feather="lock" class="h-3 w-3"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="timeline-track bg-gray-700 rounded mb-2 h-12 relative"> | |
| <div class="absolute left-0 top-0 bottom-0 w-24 bg-gray-600 rounded-l flex items-center px-2"> | |
| <span class="text-xs truncate">Audio Track 1</span> | |
| </div> | |
| <div class="absolute left-24 right-0 top-0 bottom-0"> | |
| <div class="h-full flex items-center px-1"> | |
| <div class="bg-green-500 h-6 rounded" style="width: 200px;"></div> | |
| </div> | |
| </div> | |
| <div class="timeline-track-controls absolute right-2 top-1/2 transform -translate-y-1/2 flex space-x-1 opacity-0 transition-opacity"> | |
| <button class="p-1 bg-gray-600 rounded hover:bg-gray-500"> | |
| <i data-feather="eye" class="h-3 w-3"></i> | |
| </button> | |
| <button class="p-1 bg-gray-600 rounded hover:bg-gray-500"> | |
| <i data-feather="lock" class="h-3 w-3"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="timeline-track bg-gray-700 rounded h-12 relative"> | |
| <div class="absolute left-0 top-0 bottom-0 w-24 bg-gray-600 rounded-l flex items-center px-2"> | |
| <span class="text-xs truncate">Effects</span> | |
| </div> | |
| <div class="absolute left-24 right-0 top-0 bottom-0"> | |
| <div class="h-full flex items-center px-1"> | |
| <div class="bg-purple-500 h-4 rounded" style="width: 200px;"></div> | |
| </div> | |
| </div> | |
| <div class="timeline-track-controls absolute right-2 top-1/2 transform -translate-y-1/2 flex space-x-1 opacity-0 transition-opacity"> | |
| <button class="p-1 bg-gray-600 rounded hover:bg-gray-500"> | |
| <i data-feather="eye" class="h-3 w-3"></i> | |
| </button> | |
| <button class="p-1 bg-gray-600 rounded hover:bg-gray-500"> | |
| <i data-feather="lock" class="h-3 w-3"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Sidebar - Properties --> | |
| <div class="w-64 bg-white border-l border-gray-200 flex flex-col"> | |
| <div class="border-b border-gray-200 px-4 py-3"> | |
| <h3 class="text-sm font-medium text-gray-900">Properties</h3> | |
| </div> | |
| <div class="flex-1 overflow-y-auto p-4 space-y-6"> | |
| <div> | |
| <h4 class="text-xs font-medium text-gray-500 uppercase tracking-wider mb-2">Transform</h4> | |
| <div class="space-y-3"> | |
| <div> | |
| <label class="block text-xs text-gray-500 mb-1">Position</label> | |
| <div class="grid grid-cols-2 gap-2"> | |
| <input type="number" class="text-sm border border-gray-300 rounded px-2 py-1 w-full" placeholder="X"> | |
| <input type="number" class="text-sm border border-gray-300 rounded px-2 py-1 w-full" placeholder="Y"> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-xs text-gray-500 mb-1">Scale</label> | |
| <input type="range" class="w-full" min="0" max="200" value="100"> | |
| <div class="flex justify-between text-xs text-gray-500"> | |
| <span>0%</span> | |
| <span>100%</span> | |
| <span>200%</span> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-xs text-gray-500 mb-1">Rotation</label> | |
| <input type="range" class="w-full" min="0" max="360" value="0"> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-xs font-medium text-gray-500 uppercase tracking-wider mb-2">Effects</h4> | |
| <div class="space-y-3"> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-sm">Brightness</span> | |
| <input type="range" class="w-24" min="0" max="200" value="100"> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-sm">Contrast</span> | |
| <input type="range" class="w-24" min="0" max="200" value="100"> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-sm">Saturation</span> | |
| <input type="range" class="w-24" min="0" max="200" value="100"> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-xs font-medium text-gray-500 uppercase tracking-wider mb-2">AI Enhance</h4> | |
| <button class="w-full bg-indigo-50 text-indigo-700 text-sm py-2 rounded-md hover:bg-indigo-100 flex items-center justify-center"> | |
| <i data-feather="zap" class="h-4 w-4 mr-2"></i> | |
| Auto-Enhance | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| feather.replace(); | |
| // Handle tool selection | |
| document.querySelectorAll('.tool-button').forEach(button => { | |
| button.addEventListener('click', function() { | |
| document.querySelectorAll('.tool-button').forEach(btn => btn.classList.remove('active')); | |
| this.classList.add('active'); | |
| }); | |
| }); | |
| // Simple drag and drop for preview area | |
| const previewContainer = document.getElementById('preview-container'); | |
| previewContainer.addEventListener('dragover', (e) => { | |
| e.preventDefault(); | |
| previewContainer.classList.add('border-2', 'border-dashed', 'border-indigo-400'); | |
| }); | |
| previewContainer.addEventListener('dragleave', () => { | |
| previewContainer.classList.remove('border-2', 'border-dashed', 'border-indigo-400'); | |
| }); | |
| previewContainer.addEventListener('drop', (e) => { | |
| e.preventDefault(); | |
| previewContainer.classList.remove('border-2', 'border-dashed', 'border-indigo-400'); | |
| // Handle file drop | |
| console.log('Files dropped:', e.dataTransfer.files); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |