Spaces:
Build error
Build error
Sami
Refactor Dockerfile and remove unused React app files; update TypeScript configuration for better compatibility
48530ea
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>VideoGen Pro - Enhanced Video Generator</title> | |
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet"> | |
| <!-- Add React and other dependencies --> | |
| <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script> | |
| <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script> | |
| <!-- Lucide Icons --> | |
| <script src="https://unpkg.com/lucide@latest"></script> | |
| <style> | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| background-color: #0f172a; | |
| color: white; | |
| font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; | |
| } | |
| .editor-container { | |
| display: flex; | |
| flex-direction: column; | |
| height: 100vh; | |
| overflow: hidden; | |
| } | |
| .header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 0.75rem 1rem; | |
| background-color: #1e293b; | |
| border-bottom: 1px solid #334155; | |
| } | |
| .logo-container { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .logo-icon { | |
| color: #3b82f6; | |
| } | |
| .main-area { | |
| display: flex; | |
| flex: 1; | |
| overflow: hidden; | |
| } | |
| .sidebar { | |
| width: 16rem; | |
| background-color: #1e293b; | |
| border-right: 1px solid #334155; | |
| overflow-y: auto; | |
| } | |
| .content-area { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| } | |
| .preview-area { | |
| flex: 1; | |
| background-color: #0f172a; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 1rem; | |
| } | |
| .preview-container { | |
| width: 100%; | |
| max-height: 100%; | |
| aspect-ratio: 16/9; | |
| position: relative; | |
| background: linear-gradient(120deg, #1e3c72, #2a5298); | |
| border-radius: 0.375rem; | |
| overflow: hidden; | |
| } | |
| .controls { | |
| height: 3rem; | |
| background-color: #1e293b; | |
| border-top: 1px solid #334155; | |
| display: flex; | |
| align-items: center; | |
| padding: 0 1rem; | |
| } | |
| .timeline { | |
| height: 6rem; | |
| background-color: #1e293b; | |
| border-top: 1px solid #334155; | |
| overflow-x: auto; | |
| position: relative; | |
| } | |
| .btn { | |
| background-color: transparent; | |
| color: white; | |
| border: none; | |
| border-radius: 0.25rem; | |
| padding: 0.5rem; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .btn:hover { | |
| background-color: rgba(255, 255, 255, 0.1); | |
| } | |
| .btn-icon { | |
| width: 1.25rem; | |
| height: 1.25rem; | |
| } | |
| .timeline-track { | |
| position: absolute; | |
| top: 1.25rem; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| } | |
| .scene-block { | |
| position: absolute; | |
| height: 4rem; | |
| border-radius: 0.25rem; | |
| top: 0; | |
| cursor: pointer; | |
| } | |
| .scene-active { | |
| outline: 2px solid #3b82f6; | |
| } | |
| .playhead { | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| width: 2px; | |
| background-color: #ef4444; | |
| z-index: 10; | |
| } | |
| .playhead-handle { | |
| width: 0.75rem; | |
| height: 0.75rem; | |
| background-color: #ef4444; | |
| border-radius: 9999px; | |
| position: absolute; | |
| top: -0.375rem; | |
| left: -0.375rem; | |
| } | |
| .time-markers { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 1.25rem; | |
| display: flex; | |
| } | |
| .time-marker { | |
| position: absolute; | |
| height: 100%; | |
| border-left: 1px solid #475569; | |
| display: flex; | |
| align-items: center; | |
| font-size: 0.75rem; | |
| color: #94a3b8; | |
| padding-left: 0.25rem; | |
| } | |
| .timeline-zoom-controls { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| margin-left: auto; | |
| } | |
| .template-card { | |
| background-color: #334155; | |
| border-radius: 0.375rem; | |
| overflow: hidden; | |
| margin-bottom: 0.75rem; | |
| cursor: pointer; | |
| transition: transform 0.2s; | |
| } | |
| .template-card:hover { | |
| transform: translateY(-2px); | |
| } | |
| .template-thumbnail { | |
| aspect-ratio: 16/9; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .template-info { | |
| padding: 0.5rem; | |
| } | |
| .template-title { | |
| font-weight: 500; | |
| font-size: 0.875rem; | |
| } | |
| .template-duration { | |
| font-size: 0.75rem; | |
| color: #94a3b8; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="editor-container"> | |
| <!-- Header --> | |
| <div class="header"> | |
| <div class="logo-container"> | |
| <div class="logo-icon"> | |
| <i data-lucide="video"></i> | |
| </div> | |
| <h1 class="text-lg font-bold">VideoGen Pro</h1> | |
| <input type="text" value="Vocabulary Project" class="ml-4 bg-slate-700 border border-slate-600 rounded px-2 py-1 text-sm"> | |
| </div> | |
| <div class="flex gap-2"> | |
| <button class="btn"> | |
| <i data-lucide="file-text"></i> | |
| <span class="ml-1">Project</span> | |
| </button> | |
| <button class="btn"> | |
| <i data-lucide="download"></i> | |
| <span class="ml-1">Export</span> | |
| </button> | |
| <button class="btn"> | |
| <i data-lucide="settings"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Main Area --> | |
| <div class="main-area"> | |
| <!-- Left Sidebar - Templates --> | |
| <div class="sidebar p-3"> | |
| <h2 class="font-medium mb-3 border-b border-slate-700 pb-2">Scene Templates</h2> | |
| <div class="space-y-3"> | |
| <!-- Template 1 --> | |
| <div class="template-card"> | |
| <div class="template-thumbnail" style="background: linear-gradient(120deg, #1e3c72, #2a5298);"> | |
| <i data-lucide="plus" class="text-white opacity-50"></i> | |
| </div> | |
| <div class="template-info"> | |
| <div class="template-title">Title Scene</div> | |
| <div class="template-duration">5s</div> | |
| </div> | |
| </div> | |
| <!-- Template 2 --> | |
| <div class="template-card"> | |
| <div class="template-thumbnail" style="background: linear-gradient(120deg, #4776E6, #8E54E9);"> | |
| <i data-lucide="plus" class="text-white opacity-50"></i> | |
| </div> | |
| <div class="template-info"> | |
| <div class="template-title">Vocabulary Word</div> | |
| <div class="template-duration">8s</div> | |
| </div> | |
| </div> | |
| <!-- Template 3 --> | |
| <div class="template-card"> | |
| <div class="template-thumbnail" style="background: linear-gradient(120deg, #11998e, #38ef7d);"> | |
| <i data-lucide="plus" class="text-white opacity-50"></i> | |
| </div> | |
| <div class="template-info"> | |
| <div class="template-title">Split Screen</div> | |
| <div class="template-duration">6s</div> | |
| </div> | |
| </div> | |
| <!-- Template 4 --> | |
| <div class="template-card"> | |
| <div class="template-thumbnail" style="background: linear-gradient(120deg, #333, #666);"> | |
| <i data-lucide="plus" class="text-white opacity-50"></i> | |
| </div> | |
| <div class="template-info"> | |
| <div class="template-title">Blank Scene</div> | |
| <div class="template-duration">5s</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content Area --> | |
| <div class="content-area"> | |
| <!-- Preview Area --> | |
| <div class="preview-area"> | |
| <div class="preview-container"> | |
| <!-- Scene Preview - Word --> | |
| <div class="absolute inset-0 flex flex-col items-center justify-center text-white"> | |
| <h2 class="text-xl mb-1">New Word</h2> | |
| <h1 class="text-5xl font-bold mb-2">médico</h1> | |
| <p class="text-2xl mb-6 opacity-80">doctor</p> | |
| <div class="bg-white/20 p-4 rounded-lg text-xl"> | |
| "quiere ser médico" | |
| </div> | |
| </div> | |
| <!-- Scene Info Overlay --> | |
| <div class="absolute top-2 left-2 bg-black/50 text-white text-xs px-2 py-1 rounded"> | |
| Word 1 (00:05 - 00:13) | |
| </div> | |
| <!-- Playback Controls Overlay --> | |
| <div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex space-x-2 bg-black/70 rounded-full p-2"> | |
| <button class="text-white p-1"> | |
| <i data-lucide="chevron-left" class="w-4 h-4"></i> | |
| </button> | |
| <button class="text-white p-1"> | |
| <i data-lucide="play" class="w-5 h-5"></i> | |
| </button> | |
| <button class="text-white p-1"> | |
| <i data-lucide="chevron-right" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Playback Controls --> | |
| <div class="controls"> | |
| <button class="btn mr-1"> | |
| <i data-lucide="chevron-left"></i> | |
| </button> | |
| <button class="btn mr-1"> | |
| <i data-lucide="play"></i> | |
| </button> | |
| <button class="btn mr-3"> | |
| <i data-lucide="chevron-right"></i> | |
| </button> | |
| <div class="text-sm flex items-center space-x-2 text-gray-300"> | |
| <span>00:05</span> | |
| <span>/</span> | |
| <span>00:26</span> | |
| </div> | |
| <div class="timeline-zoom-controls"> | |
| <button class="btn"> | |
| <i data-lucide="zoom-out"></i> | |
| </button> | |
| <span class="text-xs">100%</span> | |
| <button class="btn"> | |
| <i data-lucide="zoom-in"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Timeline --> | |
| <div class="timeline"> | |
| <!-- Time Markers --> | |
| <div class="time-markers"> | |
| <div class="time-marker" style="left: 0%">00:00</div> | |
| <div class="time-marker" style="left: 20%">00:05</div> | |
| <div class="time-marker" style="left: 40%">00:10</div> | |
| <div class="time-marker" style="left: 60%">00:15</div> | |
| <div class="time-marker" style="left: 80%">00:20</div> | |
| <div class="time-marker" style="left: 100%">00:25</div> | |
| </div> | |
| <!-- Scene Blocks --> | |
| <div class="timeline-track"> | |
| <!-- Scene 1: Introduction --> | |
| <div class="scene-block" style="left: 0%; width: 19.2%; background: linear-gradient(120deg, #1e3c72, #2a5298);"> | |
| <div class="p-1 text-xs text-white">Introduction</div> | |
| <div class="absolute bottom-1 right-1 text-xs bg-black/50 px-1 rounded">5s</div> | |
| </div> | |
| <!-- Scene 2: Word 1 (Active) --> | |
| <div class="scene-block scene-active" style="left: 19.2%; width: 30.8%; background: linear-gradient(120deg, #2a5298, #4776E6);"> | |
| <div class="p-1 text-xs text-white">Word 1</div> | |
| <div class="absolute bottom-1 right-1 text-xs bg-black/50 px-1 rounded">8s</div> | |
| </div> | |
| <!-- Scene 3: Word 2 --> | |
| <div class="scene-block" style="left: 50%; width: 30.8%; background: linear-gradient(120deg, #4776E6, #8E54E9);"> | |
| <div class="p-1 text-xs text-white">Word 2</div> | |
| <div class="absolute bottom-1 right-1 text-xs bg-black/50 px-1 rounded">8s</div> | |
| </div> | |
| <!-- Scene 4: Conclusion --> | |
| <div class="scene-block" style="left: 80.8%; width: 19.2%; background: linear-gradient(120deg, #8E54E9, #1e3c72);"> | |
| <div class="p-1 text-xs text-white">Conclusion</div> | |
| <div class="absolute bottom-1 right-1 text-xs bg-black/50 px-1 rounded">5s</div> | |
| </div> | |
| </div> | |
| <!-- Playhead --> | |
| <div class="playhead" style="left: 25%;"> | |
| <div class="playhead-handle"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Initialize Lucide icons | |
| lucide.createIcons(); | |
| // Add some basic interactivity | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const playBtn = document.querySelector('[data-lucide="play"]'); | |
| let isPlaying = false; | |
| // Toggle play/pause | |
| document.querySelectorAll('[data-lucide="play"]').forEach(btn => { | |
| btn.closest('button').addEventListener('click', function() { | |
| isPlaying = !isPlaying; | |
| document.querySelectorAll('[data-lucide="play"]').forEach(icon => { | |
| icon.closest('button').innerHTML = ''; | |
| const newIcon = document.createElement('i'); | |
| newIcon.setAttribute('data-lucide', isPlaying ? 'pause' : 'play'); | |
| icon.closest('button').appendChild(newIcon); | |
| }); | |
| lucide.createIcons(); | |
| }); | |
| }); | |
| // Scene template cards | |
| document.querySelectorAll('.template-card').forEach(card => { | |
| card.addEventListener('click', function() { | |
| alert('Added new scene to timeline'); | |
| }); | |
| }); | |
| // Scene blocks in timeline | |
| document.querySelectorAll('.scene-block').forEach(block => { | |
| block.addEventListener('click', function() { | |
| document.querySelectorAll('.scene-block').forEach(b => { | |
| b.classList.remove('scene-active'); | |
| }); | |
| block.classList.add('scene-active'); | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |