Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ReelGen AI - Automatic Short Video Generator</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| .animate-pulse-custom { | |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| .video-placeholder { | |
| background: linear-gradient(45deg, #f3f4f6 25%, #e5e7eb 25%, #e5e7eb 50%, #f3f4f6 50%, #f3f4f6 75%, #e5e7eb 75%, #e5e7eb 100%); | |
| background-size: 20px 20px; | |
| } | |
| .video-container { | |
| aspect-ratio: 9/16; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="min-h-screen flex flex-col"> | |
| <!-- Header --> | |
| <header class="glass-effect sticky top-0 z-10"> | |
| <div class="container flex justify-between items-center py-4"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-9 h-9 rounded-full bg-gradient-to-r from-indigo-500 to-purple-500 flex items-center justify-center text-white font-bold text-sm">RG</div> | |
| <h1 class="text-xl font-semibold">ReelGen AI</h1> | |
| </div> | |
| <div class="flex items-center gap-3"> | |
| <button class="p-2 rounded-full hover:bg-surface-2"> | |
| <i class="fas fa-bell text-text-secondary"></i> | |
| </button> | |
| <div class="w-8 h-8 rounded-full bg-surface-3 flex items-center justify-center"> | |
| <i class="fas fa-user text-text-tertiary"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="flex-grow"> | |
| <div class="container py-8"> | |
| <!-- Dashboard Header --> | |
| <div class="mb-8"> | |
| <h2 class="text-2xl font-bold mb-2">Daily Reel Generator</h2> | |
| <p class="text-text-secondary">Automatically creates 3-15 second Instagram Reels by remixing existing content</p> | |
| </div> | |
| <!-- Generator Controls --> | |
| <div class="card mb-8"> | |
| <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4"> | |
| <div> | |
| <h3 class="font-medium text-lg mb-1">Auto-Generation Settings</h3> | |
| <p class="text-sm text-gray-500">Configure how your daily Reels are created</p> | |
| </div> | |
| <div class="flex flex-col sm:flex-row gap-3"> | |
| <button class="px-4 py-2 bg-gradient-to-r from-purple-500 to-pink-500 text-white rounded-lg font-medium hover:opacity-90 transition flex items-center justify-center gap-2"> | |
| <i class="fas fa-cog"></i> Settings | |
| </button> | |
| <button class="px-4 py-2 bg-white border border-gray-300 rounded-lg font-medium hover:bg-gray-50 transition flex items-center justify-center gap-2"> | |
| <i class="fas fa-history"></i> Generation History | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <!-- Source Selection --> | |
| <div class="border rounded-lg p-4"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 mr-2"> | |
| <i class="fas fa-database"></i> | |
| </div> | |
| <h4 class="font-medium">Content Sources</h4> | |
| </div> | |
| <div class="space-y-2"> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="your-archive" class="mr-2" checked> | |
| <label for="your-archive">Your past Reels</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="saved-content" class="mr-2" checked> | |
| <label for="saved-content">Saved content</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="trending" class="mr-2"> | |
| <label for="trending">Trending templates</label> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Editing Style --> | |
| <div class="border rounded-lg p-4"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-2"> | |
| <i class="fas fa-sliders-h"></i> | |
| </div> | |
| <h4 class="font-medium">Editing Style</h4> | |
| </div> | |
| <select class="w-full p-2 border rounded-md text-sm"> | |
| <option>Subtle remix (minor changes)</option> | |
| <option>Creative remix (more transformations)</option> | |
| <option>Trend-focused (add trending elements)</option> | |
| </select> | |
| <div class="mt-2 flex items-center text-sm text-gray-500"> | |
| <i class="fas fa-info-circle mr-1"></i> | |
| <span>Applies filters, cuts, and effects</span> | |
| </div> | |
| </div> | |
| <!-- Schedule --> | |
| <div class="border rounded-lg p-4"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center text-green-600 mr-2"> | |
| <i class="fas fa-clock"></i> | |
| </div> | |
| <h4 class="font-medium">Posting Schedule</h4> | |
| </div> | |
| <div class="flex items-center"> | |
| <select class="flex-grow p-2 border rounded-md text-sm mr-2"> | |
| <option>Every day</option> | |
| <option>Weekdays only</option> | |
| <option>3 times/week</option> | |
| </select> | |
| <select class="flex-grow p-2 border rounded-md text-sm"> | |
| <option>9:00 AM</option> | |
| <option>12:00 PM</option> | |
| <option>5:00 PM</option> | |
| <option>8:00 PM</option> | |
| </select> | |
| </div> | |
| <div class="mt-2 text-sm text-gray-500"> | |
| Next generation: Today, 9:00 AM | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 pt-6 border-t flex justify-end"> | |
| <button class="px-6 py-2 bg-gradient-to-r from-purple-500 to-pink-500 text-white rounded-lg font-medium hover:opacity-90 transition flex items-center gap-2"> | |
| <i class="fas fa-magic"></i> Generate Preview Now | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Today's Generated Reel --> | |
| <div class="mb-8"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-medium">Today's Generated Reel</h3> | |
| <div class="text-sm text-text-secondary"> | |
| <i class="fas fa-circle text-success mr-1 text-xs"></i> Ready to post | |
| </div> | |
| </div> | |
| <div class="card overflow-hidden p-0"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-0"> | |
| <!-- Video Preview --> | |
| <div class="md:col-span-2 p-4"> | |
| <div class="video-container bg-black rounded-lg overflow-hidden relative"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <div class="video-placeholder w-full h-full flex items-center justify-center"> | |
| <div class="text-center"> | |
| <i class="fas fa-play text-white text-4xl mb-2"></i> | |
| <p class="text-white font-medium">Generated Reel Preview</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-4 left-4 text-white"> | |
| <span class="bg-black bg-opacity-50 px-2 py-1 rounded text-xs">0:07</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Reel Details --> | |
| <div class="p-4 border-l md:border-l-0 md:border-t border-gray-200"> | |
| <div class="mb-4"> | |
| <h4 class="font-medium mb-2">Generated Description</h4> | |
| <div class="bg-gray-50 p-3 rounded-lg"> | |
| <p class="text-sm">"Throwback with a twist! 🔄 We took one of your old clips and gave it fresh energy. The sunset transition at the end is everything! 🌅 #Remix #ThrowbackThursday"</p> | |
| </div> | |
| <div class="mt-2 flex justify-end"> | |
| <button class="text-sm text-purple-600 hover:text-purple-800 flex items-center"> | |
| <i class="fas fa-redo mr-1"></i> Regenerate | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <h4 class="font-medium mb-2">Original Source</h4> | |
| <div class="flex items-center space-x-2 p-2 bg-gray-50 rounded-lg"> | |
| <div class="w-10 h-10 rounded bg-gray-300 flex items-center justify-center"> | |
| <i class="fas fa-video text-gray-500"></i> | |
| </div> | |
| <div class="text-sm"> | |
| <p class="font-medium">Beach sunset clip</p> | |
| <p class="text-gray-500 text-xs">Posted 3 months ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <h4 class="font-medium mb-2">Applied Modifications</h4> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">Speed change</span> | |
| <span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">New transition</span> | |
| <span class="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs rounded-full">Text overlay</span> | |
| <span class="px-2 py-1 bg-purple-100 text-purple-800 text-xs rounded-full">Filter applied</span> | |
| </div> | |
| </div> | |
| <div class="flex flex-col sm:flex-row gap-2 mt-6"> | |
| <button class="flex-grow px-4 py-2 bg-white border border-gray-300 rounded-lg font-medium hover:bg-gray-50 transition flex items-center justify-center gap-2"> | |
| <i class="fas fa-edit"></i> Edit | |
| </button> | |
| <button class="flex-grow px-4 py-2 bg-gradient-to-r from-purple-500 to-pink-500 text-white rounded-lg font-medium hover:opacity-90 transition flex items-center justify-center gap-2"> | |
| <i class="fab fa-instagram"></i> Post to Instagram | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Upcoming Schedule --> | |
| <div class="mb-8"> | |
| <h3 class="text-lg font-medium mb-4">Upcoming Schedule</h3> | |
| <div class="bg-white rounded-xl shadow-sm overflow-hidden"> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Source Material</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Duration</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm font-medium text-gray-900">Tomorrow</div> | |
| <div class="text-sm text-gray-500">9:00 AM</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">Pending</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">Your cooking video (2/15/23)</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <div class="flex items-center"> | |
| <div class="h-2 w-16 bg-gray-200 rounded-full mr-2"> | |
| <div class="h-2 bg-purple-500 rounded-full" style="width: 60%"></div> | |
| </div> | |
| <span>~9s</span> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <button class="text-purple-600 hover:text-purple-900 mr-3">Preview</button> | |
| <button class="text-gray-600 hover:text-gray-900">Skip</button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm font-medium text-gray-900">Mar 15, 2023</div> | |
| <div class="text-sm text-gray-500">9:00 AM</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800">Processing</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="animate-pulse-custom h-4 w-4 bg-yellow-400 rounded-full mr-2"></div> | |
| <div class="text-sm text-gray-900">Selecting source...</div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <div class="flex items-center"> | |
| <div class="h-2 w-16 bg-gray-200 rounded-full mr-2"> | |
| <div class="h-2 bg-gray-300 rounded-full animate-pulse-custom" style="width: 30%"></div> | |
| </div> | |
| <span>...</span> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <button class="text-gray-400 cursor-not-allowed mr-3">Preview</button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm font-medium text-gray-900">Mar 16, 2023</div> | |
| <div class="text-sm text-gray-500">9:00 AM</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 py-1 text-xs font-semibold rounded-full bg-gray-100 text-gray-800">Scheduled</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-500">Not selected yet</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| - | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <button class="text-gray-400 cursor-not-allowed mr-3">Preview</button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="border-t border-surface-3 py-6"> | |
| <div class="container"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center gap-2 mb-4 md:mb-0"> | |
| <div class="w-5 h-5 rounded-full bg-gradient-to-r from-indigo-500 to-purple-500"></div> | |
| <span class="font-medium">ReelGen AI</span> | |
| </div> | |
| <div class="flex gap-6"> | |
| <a href="#" class="text-text-secondary hover:text-text-primary">Privacy</a> | |
| <a href="#" class="text-text-secondary hover:text-text-primary">Terms</a> | |
| <a href="#" class="text-text-secondary hover:text-text-primary">Help</a> | |
| </div> | |
| </div> | |
| <div class="mt-4 text-center md:text-left text-sm text-text-tertiary"> | |
| © 2023 ReelGen AI. Automatically remixing your content for daily Reels. | |
| </div> | |
| </div> | |
| </footer> | |
| </div> | |
| <script> | |
| // Simple script to simulate generation process | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Simulate generating a new description | |
| const regenerateDescBtn = document.querySelector('button:has(.fa-redo)'); | |
| if (regenerateDescBtn) { | |
| regenerateDescBtn.addEventListener('click', function() { | |
| const descriptions = [ | |
| '"New life to an old moment! ✨ We refreshed this clip with smooth transitions and a trendy filter. Which part is your favorite? #ReelRemix"', | |
| '"You\'ve seen this before... but not like this! 🔄 Our AI gave your old video a fresh makeover. The timing on the beat drop is perfect! 🎶 #RemixMagic"', | |
| '"Classic clip, new vibes! 🌟 We took your original and added some spice. That zoom effect at 0:05 though! #ReelRefresh"' | |
| ]; | |
| const randomDesc = descriptions[Math.floor(Math.random() * descriptions.length)]; | |
| document.querySelector('.bg-gray-50 p-3').textContent = randomDesc; | |
| }); | |
| } | |
| // Simulate generating a preview | |
| const generatePreviewBtn = document.querySelector('button:has(.fa-magic)'); | |
| if (generatePreviewBtn) { | |
| generatePreviewBtn.addEventListener('click', function() { | |
| // Show loading state | |
| generatePreviewBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Generating...'; | |
| generatePreviewBtn.disabled = true; | |
| // Simulate API call delay | |
| setTimeout(() => { | |
| // Update UI with "new" generated content | |
| document.querySelector('.video-placeholder').innerHTML = ` | |
| <div class="text-center"> | |
| <i class="fas fa-check-circle text-green-500 text-4xl mb-2"></i> | |
| <p class="text-white font-medium">New Reel Generated!</p> | |
| <p class="text-white text-xs mt-1">Duration: 0:06</p> | |
| </div> | |
| `; | |
| // Update status | |
| document.querySelector('.text-green-500').nextSibling.textContent = ' Ready to post (new)'; | |
| // Reset button | |
| generatePreviewBtn.innerHTML = '<i class="fas fa-magic"></i> Generate Preview Now'; | |
| generatePreviewBtn.disabled = false; | |
| // Show notification | |
| alert('New Reel generated successfully! Check the preview.'); | |
| }, 2000); | |
| }); | |
| } | |
| }); | |
| </script> | |
| <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=smartestdaddy/generator-web" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |