Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Advanced Slide-Show Maker</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| /* Custom Scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #1f2937; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #4b5563; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #6b7280; | |
| } | |
| @keyframes roll { | |
| 0% { transform: rotate(0deg) scale(0.5); opacity: 0; } | |
| 100% { transform: rotate(360deg) scale(1); opacity: 1; } | |
| } | |
| @keyframes shake { | |
| 0%, 100% { transform: translateX(0); } | |
| 10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); } | |
| 20%, 40%, 60%, 80% { transform: translateX(10px); } | |
| } | |
| @keyframes congrats { | |
| 0% { transform: scale(0) rotate(0deg); opacity: 0; } | |
| 50% { transform: scale(1.2) rotate(10deg); opacity: 1; } | |
| 100% { transform: scale(1) rotate(0deg); opacity: 1; } | |
| } | |
| @keyframes smoke { | |
| 0% { opacity: 0; transform: translateY(0) scale(0.5); } | |
| 50% { opacity: 1; transform: translateY(-20px) scale(1); } | |
| 100% { opacity: 0; transform: translateY(-40px) scale(1.5); } | |
| } | |
| @keyframes shape { | |
| 0% { clip-path: circle(0% at 50% 50%); } | |
| 100% { clip-path: circle(100% at 50% 50%); } | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0) rotate(0deg); } | |
| 50% { transform: translateY(-20px) rotate(10deg); } | |
| 100% { transform: translateY(0) rotate(0deg); } | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .roll-animation { animation: roll 1s ease-out forwards; } | |
| .shake-animation { animation: shake 0.5s ease-in-out; } | |
| .congrats-animation { animation: congrats 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; } | |
| .smoke-animation { animation: smoke 2s ease-out forwards; } | |
| .shape-animation { animation: shape 1s ease-out forwards; } | |
| .pulse-animation { animation: pulse 2s infinite; } | |
| .fade-in-up { animation: fadeIn 0.5s ease-out forwards; } | |
| .filter-bw { filter: grayscale(100%); } | |
| .filter-vintage { filter: sepia(0.5) contrast(1.2) brightness(0.9); } | |
| .filter-mono { filter: hue-rotate(90deg); } | |
| .filter-blur { filter: blur(2px); } | |
| .filter-glow { filter: drop-shadow(0 0 10px rgba(255,255,255,0.5)); } | |
| .balloon { | |
| position: absolute; | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50% 50% 50% 0; | |
| background: linear-gradient(45deg, #ff6b6b, #feca57); | |
| transform: rotate(-45deg); | |
| animation: float 4s infinite ease-in-out; | |
| z-index: 1000; | |
| box-shadow: 2px 2px 5px rgba(0,0,0,0.2); | |
| } | |
| .transition-item { | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .transition-item:hover { | |
| transform: translateY(-5px) scale(1.02); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); | |
| } | |
| .gallery-item { | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .gallery-item:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px rgba(0, 0, 0, 0.3); | |
| } | |
| .modal { | |
| transition: opacity 0.3s ease, visibility 0.3s ease; | |
| } | |
| .slide-container { | |
| min-height: 500px; | |
| max-height: 70vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| position: relative; | |
| overflow: hidden; | |
| border-radius: 0.75rem; | |
| background: #111827; | |
| } | |
| .slide-image { | |
| max-width: 100%; | |
| max-height: 100%; | |
| object-fit: contain; | |
| transition: all 0.5s ease; | |
| } | |
| .overlay-element { | |
| position: absolute; | |
| pointer-events: none; | |
| } | |
| .video-preview { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: contain; | |
| } | |
| .audio-player { | |
| width: 100%; | |
| margin-top: 10px; | |
| } | |
| .tool-panel { | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| transform-origin: top; | |
| } | |
| .tool-panel.collapsed { | |
| transform: scaleY(0); | |
| opacity: 0; | |
| height: 0; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| .tab-content { | |
| transition: all 0.3s ease; | |
| opacity: 0; | |
| transform: translateY(10px); | |
| pointer-events: none; | |
| display: none; | |
| } | |
| .tab-content.active { | |
| opacity: 1; | |
| transform: translateY(0); | |
| pointer-events: all; | |
| display: block; | |
| } | |
| .slider-container { | |
| position: relative; | |
| } | |
| .slider-value { | |
| position: absolute; | |
| top: -25px; | |
| right: 0; | |
| background: #3b82f6; | |
| color: white; | |
| padding: 2px 8px; | |
| border-radius: 9999px; | |
| font-size: 12px; | |
| font-weight: 600; | |
| min-width: 40px; | |
| text-align: center; | |
| box-shadow: 0 2px 4px rgba(0,0,0,0.2); | |
| } | |
| .shape-tool { | |
| transition: all 0.2s ease; | |
| } | |
| .shape-tool:hover { | |
| transform: scale(1.1); | |
| background: #374151 ; | |
| } | |
| .processing-overlay { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0, 0, 0, 0.85); | |
| backdrop-filter: blur(8px); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| z-index: 1000; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: opacity 0.3s ease; | |
| } | |
| .processing-overlay.active { | |
| opacity: 1; | |
| pointer-events: all; | |
| } | |
| .spinner { | |
| width: 60px; | |
| height: 60px; | |
| border: 6px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 50%; | |
| border-top-color: #fbbf24; | |
| animation: spin 1s linear infinite; | |
| box-shadow: 0 0 20px rgba(251, 191, 36, 0.2); | |
| } | |
| /* Range Input Styling */ | |
| input[type=range] { | |
| -webkit-appearance: none; | |
| background: transparent; | |
| } | |
| input[type=range]::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| height: 16px; | |
| width: 16px; | |
| border-radius: 50%; | |
| background: #fbbf24; | |
| cursor: pointer; | |
| margin-top: -6px; | |
| box-shadow: 0 0 5px rgba(0,0,0,0.5); | |
| } | |
| input[type=range]::-webkit-slider-runnable-track { | |
| width: 100%; | |
| height: 4px; | |
| cursor: pointer; | |
| background: #4b5563; | |
| border-radius: 2px; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| .glass-effect { | |
| background: rgba(31, 41, 55, 0.7); | |
| backdrop-filter: blur(10px); | |
| -webkit-backdrop-filter: blur(10px); | |
| } | |
| /* Dynamic slide background container */ | |
| .slide-bg { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-size: cover; | |
| background-position: center; | |
| transition: opacity 0.7s ease-in-out, transform 0.7s ease-in-out; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 min-h-screen text-white font-sans selection:bg-yellow-500 selection:text-gray-900"> | |
| <!-- Top Navigation --> | |
| <nav class="bg-gray-800/80 backdrop-blur-md border-b border-gray-700 sticky top-0 z-50"> | |
| <div class="container mx-auto px-4 py-3"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-3 group cursor-pointer"> | |
| <div class="bg-gradient-to-br from-yellow-400 to-orange-500 p-2 rounded-lg shadow-lg shadow-orange-500/20 transition-transform group-hover:scale-110"> | |
| <i class="fas fa-sliders-h text-gray-900 text-lg"></i> | |
| </div> | |
| <div> | |
| <h1 class="text-xl font-bold text-white tracking-tight">Advanced Slide-Show Maker</h1> | |
| <p class="text-xs text-gray-400">Create stunning visuals</p> | |
| </div> | |
| </div> | |
| <div class="hidden md:flex space-x-3"> | |
| <button id="tabsBtn" class="px-4 py-2 bg-gray-700/50 hover:bg-gray-700 border border-gray-600 rounded-lg text-sm font-medium transition-all flex items-center"> | |
| <i class="fas fa-tools mr-2 text-gray-300"></i>Tools | |
| </button> | |
| <button id="saveBtn" class="px-4 py-2 bg-blue-600/80 hover:bg-blue-600 border border-blue-500 rounded-lg text-sm font-medium transition-all flex items-center shadow-lg shadow-blue-500/20"> | |
| <i class="fas fa-save mr-2"></i>Save Project | |
| </button> | |
| <button id="generateBtn" class="px-4 py-2 bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-400 hover:to-emerald-500 border border-green-400 rounded-lg text-sm font-medium transition-all flex items-center shadow-lg shadow-green-500/20"> | |
| <i class="fas fa-film mr-2"></i>Generate MP4 | |
| </button> | |
| </div> | |
| <!-- Mobile Menu Button (if needed, sticking to desktop style for now as requested) --> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Processing Overlay --> | |
| <div id="processingOverlay" class="processing-overlay"> | |
| <div class="text-center relative z-10"> | |
| <div class="spinner mb-6 mx-auto"></div> | |
| <h2 class="text-2xl font-bold text-white mb-2">Generating Masterpiece</h2> | |
| <p class="text-gray-400 mt-2 animate-pulse">Processing frames and applying effects...</p> | |
| </div> | |
| </div> | |
| <!-- Tabs Container --> | |
| <div id="toolsPanel" class="bg-gray-800/50 backdrop-blur-sm border-b border-gray-700 tool-panel"> | |
| <div class="container mx-auto px-4 py-4"> | |
| <div class="flex flex-wrap gap-2 justify-center md:justify-start"> | |
| <button data-tab="slides" class="tab-btn px-5 py-2 bg-gray-700 hover:bg-gray-600 rounded-full text-sm font-medium transition-all border border-gray-600 active bg-gray-600"> | |
| <i class="fas fa-images mr-2 opacity-70"></i>Slides | |
| </button> | |
| <button data-tab="transitions" class="tab-btn px-5 py-2 bg-gray-800 hover:bg-gray-700 rounded-full text-sm font-medium transition-all border border-gray-700 text-gray-400 hover:text-white"> | |
| <i class="fas fa-random mr-2"></i>Transitions | |
| </button> | |
| <button data-tab="effects" class="tab-btn px-5 py-2 bg-gray-800 hover:bg-gray-700 rounded-full text-sm font-medium transition-all border border-gray-700 text-gray-400 hover:text-white"> | |
| <i class="fas fa-magic mr-2"></i>Effects | |
| </button> | |
| <button data-tab="audio" class="tab-btn px-5 py-2 bg-gray-800 hover:bg-gray-700 rounded-full text-sm font-medium transition-all border border-gray-700 text-gray-400 hover:text-white"> | |
| <i class="fas fa-music mr-2"></i>Audio | |
| </button> | |
| <button data-tab="overlays" class="tab-btn px-5 py-2 bg-gray-800 hover:bg-gray-700 rounded-full text-sm font-medium transition-all border border-gray-700 text-gray-400 hover:text-white"> | |
| <i class="fas fa-layer-group mr-2"></i>Overlays | |
| </button> | |
| <button data-tab="settings" class="tab-btn px-5 py-2 bg-gray-800 hover:bg-gray-700 rounded-full text-sm font-medium transition-all border border-gray-700 text-gray-400 hover:text-white"> | |
| <i class="fas fa-cog mr-2"></i>Settings | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-8"> | |
| <!-- Editor Section --> | |
| <div class="bg-gray-800 rounded-2xl shadow-2xl p-1 md:p-6 mb-8 border border-gray-700 ring-1 ring-gray-700"> | |
| <!-- Upload Section --> | |
| <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-6 p-4 bg-gray-800 rounded-xl border border-gray-700"> | |
| <div class="flex-1 w-full"> | |
| <label class="block text-xs font-bold uppercase tracking-wider text-gray-400 mb-2">Input Media</label> | |
| <div class="flex items-center space-x-4"> | |
| <input type="file" id="fileInput" accept="image/*" multiple class="hidden"> | |
| <button id="uploadBtn" class="group relative px-6 py-3 bg-gray-700 hover:bg-gray-600 border border-gray-600 rounded-xl text-sm font-semibold transition-all overflow-hidden"> | |
| <span class="absolute inset-0 w-full h-full bg-gradient-to-r from-transparent via-white/10 to-transparent -translate-x-full group-hover:animate-[shimmer_1.5s_infinite]"></span> | |
| <i class="fas fa-cloud-upload-alt mr-2 text-blue-400"></i>Choose Images | |
| </button> | |
| <div class="flex flex-col"> | |
| <span id="fileCount" class="text-gray-300 text-sm font-medium">No files selected</span> | |
| <span class="text-xs text-gray-500">Supports JPG, PNG, WEBP</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex space-x-3 w-full md:w-auto"> | |
| <button id="startBtn" class="flex-1 md:flex-none px-6 py-3 bg-green-600/20 hover:bg-green-600/30 text-green-400 border border-green-500/50 rounded-xl transition-all disabled:opacity-30 disabled:cursor-not-allowed font-semibold flex justify-center items-center"> | |
| <i class="fas fa-play mr-2"></i>Start | |
| </button> | |
| <button id="stopBtn" class="flex-1 md:flex-none px-6 py-3 bg-red-600/20 hover:bg-red-600/30 text-red-400 border border-red-500/50 rounded-xl transition-all disabled:opacity-30 disabled:cursor-not-allowed font-semibold flex justify-center items-center"> | |
| <i class="fas fa-stop mr-2"></i>Stop | |
| </button> | |
| <button id="resetBtn" class="flex-1 md:flex-none px-6 py-3 bg-gray-700 hover:bg-gray-600 text-gray-300 border border-gray-600 rounded-xl transition-all font-semibold flex justify-center items-center"> | |
| <i class="fas fa-redo-alt mr-2"></i>Reset | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Main Workspace Grid --> | |
| <div class="grid grid-cols-1 lg:grid-cols-12 gap-6"> | |
| <!-- Preview Area --> | |
| <div class="lg:col-span-8"> | |
| <div class="bg-black rounded-lg overflow-hidden slide-container relative shadow-inner border border-gray-700"> | |
| <div id="slideContainer" class="w-full h-full bg-gradient-to-br from-gray-900 to-gray-800 flex items-center justify-center relative"> | |
| <!-- Placeholder Content --> | |
| <div class="text-center text-gray-500 p-6 transition-all duration-300" id="emptyState"> | |
| <div class="w-20 h-20 bg-gray-800 rounded-full flex items-center justify-center mx-auto mb-4 ring-1 ring-gray-700"> | |
| <i class="fas fa-photo-video text-3xl text-gray-600"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-300 mb-2">Workspace Empty</h3> | |
| <p class="text-sm max-w-xs mx-auto">Upload images above to begin creating your slideshow masterpiece.</p> | |
| </div> | |
| </div> | |
| <!-- Overlay Elements Container --> | |
| <div id="overlaysContainer" class="absolute inset-0 pointer-events-none z-10"></div> | |
| <!-- Progress Indicator --> | |
| <div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 bg-black/60 backdrop-blur-sm px-4 py-1 rounded-full border border-white/10 flex items-center space-x-3"> | |
| <span class="text-xs text-gray-400 font-mono">SLIDE</span> | |
| <span id="slideNumber" class="text-yellow-400 font-bold font-mono text-sm">0 / 0</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Sidebar Controls --> | |
| <div class="lg:col-span-4 space-y-4"> | |
| <!-- Controls Panel --> | |
| <div class="bg-gray-700/30 rounded-xl p-4 border border-gray-700 backdrop-blur-sm"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="font-semibold text-gray-200 flex items-center"> | |
| <i class="fas fa-sliders-h mr-2 text-blue-400"></i>Playback | |
| </h3> | |
| <div class="h-px flex-1 bg-gray-600 ml-4"></div> | |
| </div> | |
| <div class="space-y-5"> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <label class="text-xs text-gray-400 font-medium uppercase tracking-wider">Transition Speed</label> | |
| </div> | |
| <div class="flex items-center space-x-3 slider-container"> | |
| <i class="fas fa-tachometer-alt text-gray-500 text-xs"></i> | |
| <input type="range" min="1000" max="10000" value="3000" step="500" id="speedControl" class="w-full"> | |
| <i class="fas fa-bolt text-gray-500 text-xs"></i> | |
| <div class="slider-value" id="speedValue">3s</div> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-xs text-gray-400 font-medium uppercase tracking-wider mb-2">Transition Effect</label> | |
| <div class="relative"> | |
| <select id="transitionSelect" class="w-full p-2.5 pl-3 bg-gray-800 border border-gray-600 rounded-lg focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500 outline-none text-white text-sm appearance-none cursor-pointer"> | |
| <option value="random">✨ Random Transitions</option> | |
| <option value="fade">🌫️ Smooth Fade</option> | |
| <option value="slide">➡️ Slide In/Out</option> | |
| <option value="zoom">🔍 Zoom In/Out</option> | |
| <option value="roll">🔄 Rolling Spin</option> | |
| <option value="shake">⚡ Shake It</option> | |
| <option value="congrats">🎉 Congratulations</option> | |
| <option value="smoke">💨 Smoke FX</option> | |
| <option value="shape">🔷 Shape Morph</option> | |
| <option value="pulse">💗 Pulse Beat</option> | |
| </select> | |
| <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-400"> | |
| <i class="fas fa-chevron-down text-xs"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-xs text-gray-400 font-medium uppercase tracking-wider mb-2">Image Filter</label> | |
| <div class="relative"> | |
| <select id="filterSelect" class="w-full p-2.5 pl-3 bg-gray-800 border border-gray-600 rounded-lg focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500 outline-none text-white text-sm appearance-none cursor-pointer"> | |
| <option value="none">🚫 No Filter</option> | |
| <option value="bw">⚫ Black & White</option> | |
| <option value="vintage">📷 Vintage Film</option> | |
| <option value="mono">🔵 Mono Blue</option> | |
| <option value="blur">☁️ Soft Blur</option> | |
| <option value="glow">✨ Dreamy Glow</option> | |
| </select> | |
| <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-400"> | |
| <i class="fas fa-chevron-down text-xs"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Statistics Panel --> | |
| <div class="bg-gradient-to-br from-gray-800 to-gray-800/50 rounded-xl p-4 border border-gray-700 shadow-lg"> | |
| <h3 class="font-semibold text-gray-200 mb-3 flex items-center"> | |
| <i class="fas fa-chart-pie mr-2 text-purple-400"></i>Statistics | |
| </h3> | |
| <div class="space-y-3"> | |
| <div class="flex justify-between items-center bg-gray-900/50 p-2 rounded-lg"> | |
| <span class="text-gray-400 text-sm">Images Loaded</span> | |
| <span id="imageCount" class="font-mono text-yellow-400 font-bold">0</span> | |
| </div> | |
| <div class="flex justify-between items-center bg-gray-900/50 p-2 rounded-lg"> | |
| <span class="text-gray-400 text-sm">Current Slide</span> | |
| <span id="currentSlide" class="font-mono text-blue-400 font-bold">0</span> | |
| </div> | |
| <div class="flex justify-between items-center bg-gray-900/50 p-2 rounded-lg"> | |
| <span class="text-gray-400 text-sm">Status</span> | |
| <span id="status" class="text-xs font-bold px-2 py-0.5 rounded-full bg-green-500/20 text-green-400 border border-green-500/30">READY</span> | |
| </div> | |
| <div class="flex justify-between items-center bg-gray-900/50 p-2 rounded-lg"> | |
| <span class="text-gray-400 text-sm">Audio Track</span> | |
| <span id="audioStatus" class="text-xs font-bold text-gray-300 truncate max-w-[100px]">None</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Action Buttons --> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <button id="exportBtn" class="bg-gray-700 hover:bg-gray-600 border border-gray-600 text-white py-2 rounded-lg transition text-sm font-medium flex items-center justify-center"> | |
| <i class="fas fa-file-export mr-2 text-blue-400"></i>Export | |
| </button> | |
| <button id="addOverlayBtn" class="bg-gray-700 hover:bg-gray-600 border border-gray-600 text-white py-2 rounded-lg transition text-sm font-medium flex items-center justify-center"> | |
| <i class="fas fa-sticky-note mr-2 text-yellow-400"></i>Add Text | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tab Content Sections --> | |
| <div class="bg-gray-800 rounded-xl shadow-lg p-6 border border-gray-700 mb-8"> | |
| <!-- Slides Tab --> | |
| <div id="slidesTab" class="tab-content active"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-semibold text-gray-200">Slide Management</h2> | |
| <span class="text-xs bg-gray-700 px-2 py-1 rounded text-gray-400">Drag & Drop Coming Soon</span> | |
| </div> | |
| <div id="slidesListContainer" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4"> | |
| <!-- Slide thumbnails will be injected here --> | |
| <div class="aspect-video bg-gray-700/50 rounded-lg border-2 border-dashed border-gray-600 flex flex-col items-center justify-center text-gray-500 p-4 text-center hover:border-yellow-500 hover:text-yellow-500 transition cursor-pointer" id="addSlideBtn"> | |
| <i class="fas fa-plus-circle text-2xl mb-2"></i> | |
| <span class="text-xs">Add Slide</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Transitions Tab --> | |
| <div id="transitionsTab" class="tab-content"> | |
| <h2 class="text-xl font-semibold text-gray-200 mb-6">Transition Effects Library</h2> | |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-4"> | |
| <div class="border border-gray-600 bg-gray-700/30 rounded-lg p-4 text-center transition-item cursor-pointer hover:border-blue-400 group"> | |
| <div class="w-12 h-12 bg-gray-800 rounded-full flex items-center justify-center mx-auto mb-3 group-hover:scale-110 transition-transform"> | |
| <i class="fas fa-search-plus text-xl text-blue-400"></i> | |
| </div> | |
| <h3 class="text-sm font-medium text-gray-200">Zoom In</h3> | |
| </div> | |
| <div class="border border-gray-600 bg-gray-700/30 rounded-lg p-4 text-center transition-item cursor-pointer hover:border-blue-400 group"> | |
| <div class="w-12 h-12 bg-gray-800 rounded-full flex items-center justify-center mx-auto mb-3 group-hover:scale-110 transition-transform"> | |
| <i class="fas fa-search-minus text-xl text-blue-400"></i> | |
| </div> | |
| <h3 class="text-sm font-medium text-gray-200">Zoom Out</h3> | |
| </div> | |
| <div class="border border-gray-600 bg-gray-700/30 rounded-lg p-4 text-center transition-item cursor-pointer hover:border-purple-400 group"> | |
| <div class="w-12 h-12 bg-gray-800 rounded-full flex items-center justify-center mx-auto mb-3 group-hover:scale-110 transition-transform"> | |
| <i class="fas fa-clone text-xl text-purple-400"></i> | |
| </div> | |
| <h3 class="text-sm font-medium text-gray-200">Fade In/Out</h3> | |
| </div> | |
| <div class="border border-gray-600 bg-gray-700/30 rounded-lg p-4 text-center transition-item cursor-pointer hover:border-green-400 group"> | |
| <div class="w-12 h-12 bg-gray-800 rounded-full flex items-center justify-center mx-auto mb-3 group-hover:scale-110 transition-transform"> | |
| <i class="fas fa-exchange-alt text-xl text-green-400"></i> | |
| </div> | |
| <h3 class="text-sm font-medium text-gray-200">Slide Left/Right</h3> | |
| </div> | |
| <div class="border border-gray-600 bg-gray-700/30 rounded-lg p-4 text-center transition-item cursor-pointer hover:border-yellow-400 group"> | |
| <div class="w-12 h-12 bg-gray-800 rounded-full flex items-center justify-center mx-auto mb-3 group-hover:scale-110 transition-transform"> | |
| <i class="fas fa-sync-alt text-xl text-yellow-400"></i> | |
| </div> | |
| <h3 class="text-sm font-medium text-gray-200">Roll</h3> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Effects Tab --> | |
| <div id="effectsTab" class="tab-content"> | |
| <h2 class="text-xl font-semibold text-gray-200 mb-6">Image Filters & Corrections</h2> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6"> | |
| <div class="bg-gray-700/30 p-4 rounded-lg border border-gray-600 flex items-center space-x-4 hover:bg-gray-700/50 transition"> | |
| <div class="w-16 h-16 bg-gray-900 rounded overflow-hidden relative"> | |
| <div class="w-full h-full filter-bw bg-gradient-to-br from-blue-500 to-purple-500"></div> | |
| </div> | |
| <div> | |
| <h3 class="font-medium text-gray-200">Black & White</h3> | |
| <p class="text-xs text-gray-400">Classic monochrome look</p> | |
| </div> | |
| </div> | |
| <div class="bg-gray-700/30 p-4 rounded-lg border border-gray-600 flex items-center space-x-4 hover:bg-gray-700/50 transition"> | |
| <div class="w-16 h-16 bg-gray-900 rounded overflow-hidden relative"> | |
| <div class="w-full h-full filter-vintage bg-gradient-to-br from-orange-400 to-red-500"></div> | |
| </div> | |
| <div> | |
| <h3 class="font-medium text-gray-200">Vintage</h3> | |
| <p class="text-xs text-gray-400">Retro sepia tones</p> | |
| </div> | |
| </div> | |
| <div class="bg-gray-700/30 p-4 rounded-lg border border-gray-600 flex items-center space-x-4 hover:bg-gray-700/50 transition"> | |
| <div class="w-16 h-16 bg-gray-900 rounded overflow-hidden relative"> | |
| <div class="w-full h-full filter-blur bg-gradient-to-br from-cyan-400 to-blue-500"></div> | |
| </div> | |
| <div> | |
| <h3 class="font-medium text-gray-200">Soft Blur</h3> | |
| <p class="text-xs text-gray-400">Depth of field effect</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Audio Tab --> | |
| <div id="audioTab" class="tab-content"> | |
| <h2 class="text-xl font-semibold text-gray-200 mb-4">Audio Settings</h2> | |
| <div class="bg-gray-700/30 rounded-xl p-6 border border-gray-600"> | |
| <div class="flex flex-col md:flex-row gap-6 items-start"> | |
| <div class="flex-1 w-full"> | |
| <label class="block text-sm text-gray-400 mb-2 font-medium">Background Music</label> | |
| <div class="flex items-center gap-3"> | |
| <input type="file" id="audioInput" accept="audio/*" class="hidden"> | |
| <button id="audioUploadBtn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition duration-300 flex items-center font-medium shadow-lg shadow-blue-600/20"> | |
| <i class="fas fa-upload mr-2"></i>Upload Audio | |
| </button> | |
| <span id="audioFileName" class="text-gray-300 text-sm truncate max-w-[200px]">No file chosen</span> | |
| </div> | |
| </div> | |
| <div class="flex-1 w-full grid grid-cols-1 gap-4"> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <label class="text-xs text-gray-400 font-medium uppercase">Volume Level</label> | |
| <span id="volumeValue" class="text-xs text-blue-400 font-mono">80%</span> | |
| </div> | |
| <input type="range" min="0" max="100" value="80" id="volumeControl" class="w-full"> | |
| </div> | |
| <div class="flex items-center p-3 bg-gray-800/50 rounded-lg border border-gray-600"> | |
| <input type="checkbox" id="beatSyncToggle" class="mr-3 w-4 h-4 text-blue-600 rounded focus:ring-blue-500 bg-gray-700 border-gray-600"> | |
| <label for="beatSyncToggle" class="text-sm text-gray-300 cursor-pointer">Enable Beat Synchronization</label> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Overlays Tab --> | |
| <div id="overlaysTab" class="tab-content"> | |
| <h2 class="text-xl font-semibold text-gray-200 mb-4">Overlays & Elements</h2> | |
| <div class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-4 mb-6"> | |
| <button class="shape-tool bg-gray-700 hover:bg-gray-600 rounded-lg p-4 transition flex flex-col items-center border border-gray-600"> | |
| <i class="fas fa-circle text-xl mb-2 text-red-400"></i> | |
| <p class="text-xs">Circle</p> | |
| </button> | |
| <button class="shape-tool bg-gray-700 hover:bg-gray-600 rounded-lg p-4 transition flex flex-col items-center border border-gray-600"> | |
| <i class="fas fa-square text-xl mb-2 text-blue-400"></i> | |
| <p class="text-xs">Square</p> | |
| </button> | |
| <button class="shape-tool bg-gray-700 hover:bg-gray-600 rounded-lg p-4 transition flex flex-col items-center border border-gray-600"> | |
| <i class="fas fa-star text-xl mb-2 text-yellow-400"></i> | |
| <p class="text-xs">Star</p> | |
| </button> | |
| <button class="shape-tool bg-gray-700 hover:bg-gray-600 rounded-lg p-4 transition flex flex-col items-center border border-gray-600"> | |
| <i class="fas fa-heart text-xl mb-2 text-pink-500"></i> | |
| <p class="text-xs">Heart</p> | |
| </button> | |
| <button class="shape-tool bg-gray-700 hover:bg-gray-600 rounded-lg p-4 transition flex flex-col items-center border border-gray-600"> | |
| <i class="fas fa-font text-xl mb-2 text-white"></i> | |
| <p class="text-xs">Text</p> | |
| </button> | |
| <button class="shape-tool bg-gray-700 hover:bg-gray-600 rounded-lg p-4 transition flex flex-col items-center border border-gray-600"> | |
| <i class="fas fa-cloud text-xl mb-2 text-gray-300"></i> | |
| <p class="text-xs">Cloud</p> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Settings Tab --> | |
| <div id="settingsTab" class="tab-content"> | |
| <h2 class="text-xl font-semibold text-gray-200 mb-4">Project Configuration</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="bg-gray-700/30 rounded-xl p-5 border border-gray-600"> | |
| <h3 class="font-semibold text-gray-200 mb-4 flex items-center"><i class="fas fa-video mr-2 text-blue-400"></i>Video Output</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-xs text-gray-400 mb-1">Resolution</label> | |
| <select class="w-full p-2 bg-gray-800 border border-gray-600 rounded-md focus:ring-2 focus:ring-yellow-500 focus:outline-none text-white text-sm"> | |
| <option>1920x1080 (Full HD)</option> | |
| <option>1280x720 (HD)</option> | |
| <option>3840x2160 (4K UHD)</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-xs text-gray-400 mb-1">Format</label> | |
| <select class="w-full p-2 bg-gray-800 border border-gray-600 rounded-md focus:ring-2 focus:ring-yellow-500 focus:outline-none text-white text-sm"> | |
| <option>MP4 (H.264) - Best Compatibility</option> | |
| <option>WebM (VP9) - Web Optimized</option> | |
| <option>MOV (ProRes) - High Quality</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-700/30 rounded-xl p-5 border border-gray-600"> | |
| <h3 class="font-semibold text-gray-200 mb-4 flex items-center"><i class="fas fa-clock mr-2 text-green-400"></i>Timeline</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-xs text-gray-400 mb-1">Default Slide Duration</label> | |
| <div class="flex items-center space-x-2"> | |
| <input type="number" min="1" max="60" value="5" class="w-20 p-2 bg-gray-800 border border-gray-600 rounded-md text-white text-sm"> | |
| <span class="text-sm text-gray-400">seconds</span> | |
| </div> | |
| </div> | |
| <div class="flex items-center p-3 bg-gray-800/ |