"Build a complete, fully functional web application that automatically turns long-form videos (up to 4GB) into short-form viral content with the following capabilities:" 📁 CORE FEATURES Video Upload Support uploading video files up to 4GB in size. Accept formats like MP4, MOV, and AVI. Show upload progress and basic validation. AI-Powered Auto Clipping Automatically extract 30–45 second highlights from the video. Use AI to detect the most engaging moments based on: Volume and speech energy Emotional tone Keyword hooks (e.g. “bro”, “insane”, “no way”) Visual cues like scene changes or facial reactions Generate 3–10 clips per video depending on content density. Auto-Captioning Transcribe spoken content using accurate AI transcription. Auto-generate captions synced with each clip. Provide both burned-in captions and downloadable subtitle files (SRT/VTT). Allow caption styling (font, color, size, keyword emphasis). Format for Social Media Output clips in 3 common aspect ratios: 9:16 (TikTok/Reels/Shorts) 1:1 (Instagram) 16:9 (YouTube) Automatically center the subject or speaker using AI tracking. Apply platform-safe margins to preserve captions and overlays. Branding & Overlays Let users optionally add: Their profile handle or watermark CTA text (e.g. “Subscribe @Wasa ”) Auto-generated titles using AI (based on video transcript) Optional animated captions and zoom/pan effects for visual interest. Clip Management & Download After processing, display all clips in a preview carousel. Let users: Watch clips directly on the site View clip duration (should always be 30–45s) Download individual clips or batch as a ZIP (includes video + captions) All download links must work correctly in modern browsers. Performance & Storage Ensure videos are encoded and served in a way that allows: Instant browser playback (preview thumbnails must work) Direct file downloads Store all processed files temporarily (e.g. 24 hours) before automatic cleanup. 🌐 USER INTERFACE REQUIREMENTS Clean, modern interface with: Upload panel Processing status indicator Clip preview area (with playback and download) Fully mobile responsive Use intuitive layout for creators and non-technical users ⚙️ TECHNICAL REQUIREMENTS Use a single language stack throughout the backend and frontend. All video previews must be playable in-browser. All download buttons must work without JavaScript hacks. The system must be optimized for large file handling, AI video analysis, and real-time media previews. No unnecessary dependencies or plugins; focus on performance, reliability, and UX. Build the full system as described above from scratch. Handle all backend logic, video processing, transcription, clip generation, formatting, and UI rendering. Ensure all core features are functioning at launch.” - Follow Up Deployment
5936121 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Viral Clip Generator | Auto-Create Short Videos</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"> | |
| <style> | |
| .dropzone { | |
| border: 2px dashed #60a5fa; | |
| transition: all 0.3s ease; | |
| } | |
| .dropzone:hover { | |
| border-color: #3b82f6; | |
| background-color: rgba(59, 130, 246, 0.05); | |
| } | |
| .dropzone.dragover { | |
| border-color: #2563eb; | |
| background-color: rgba(37, 99, 235, 0.1); | |
| } | |
| .active-tab { | |
| border-bottom: 3px solid #3b82f6; | |
| color: #3b82f6; | |
| } | |
| .clip-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); | |
| } | |
| .waveform { | |
| background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 50%, #93c5fd 100%); | |
| height: 50px; | |
| border-radius: 25px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .waveform-inner { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: repeating-linear-gradient( | |
| 90deg, | |
| rgba(255, 255, 255, 0.2) 0%, | |
| rgba(255, 255, 255, 0.2) 10%, | |
| transparent 10%, | |
| transparent 20% | |
| ); | |
| background-size: 20px 100%; | |
| animation: waveform-animation 1.5s linear infinite; | |
| } | |
| @keyframes waveform-animation { | |
| from { background-position-x: 0; } | |
| to { background-position-x: 20px; } | |
| } | |
| .progress-bar { | |
| height: 6px; | |
| background-color: #e5e7eb; | |
| border-radius: 3px; | |
| overflow: hidden; | |
| } | |
| .progress-bar-fill { | |
| height: 100%; | |
| background-color: #3b82f6; | |
| transition: width 0.3s ease; | |
| } | |
| .video-placeholder { | |
| background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%); | |
| } | |
| /* Custom video player controls */ | |
| .custom-video-controls { | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| } | |
| .video-container:hover .custom-video-controls { | |
| opacity: 1; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <header class="bg-white shadow-sm"> | |
| <div class="container mx-auto px-4 py-4 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-film text-blue-500 text-2xl"></i> | |
| <h1 class="text-xl font-bold text-gray-800">ViralClip<span class="text-blue-500">AI</span></h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-6"> | |
| <a href="#" class="text-gray-600 hover:text-blue-500 transition">Home</a> | |
| <a href="#" class="text-gray-600 hover:text-blue-500 transition">Features</a> | |
| <a href="#" class="text-gray-600 hover:text-blue-500 transition">Pricing</a> | |
| <a href="#" class="text-gray-600 hover:text-blue-500 transition">FAQ</a> | |
| </nav> | |
| <div class="flex items-center space-x-3"> | |
| <button class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition"> | |
| Sign In | |
| </button> | |
| <button class="md:hidden text-gray-600"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <main class="container mx-auto px-4 py-8"> | |
| <!-- Upload Section --> | |
| <section class="mb-12"> | |
| <div class="text-center mb-8"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-2">Transform Long Videos to Viral Clips</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Upload your video and let our AI automatically create engaging short-form content optimized for social media</p> | |
| </div> | |
| <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="p-1 bg-gradient-to-r from-blue-400 to-purple-500"> | |
| <div class="bg-white p-6"> | |
| <div id="upload-container" class="dropzone rounded-lg p-8 text-center cursor-pointer transition"> | |
| <div id="upload-content"> | |
| <i class="fas fa-cloud-upload-alt text-blue-500 text-5xl mb-4"></i> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-2">Drag & Drop Your Video</h3> | |
| <p class="text-gray-600 mb-4">MP4, MOV or AVI files up to 4GB</p> | |
| <button id="select-file-btn" class="px-6 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition"> | |
| Or Select File | |
| </button> | |
| <input type="file" id="file-input" accept="video/mp4,video/quicktime,video/x-msvideo" class="hidden"> | |
| </div> | |
| <div id="upload-progress" class="hidden"> | |
| <div class="mb-4"> | |
| <div class="text-sm font-medium text-gray-700 mb-1"> | |
| <span id="filename">Video.mp4</span> | |
| <span id="filesize" class="text-gray-500 ml-2">(3.2GB)</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div id="progress-fill" class="progress-bar-fill" style="width: 0%"></div> | |
| </div> | |
| <div class="flex justify-between text-xs text-gray-500 mt-1"> | |
| <span id="progress-percent">0%</span> | |
| <span id="upload-speed">0 MB/s</span> | |
| </div> | |
| </div> | |
| <button id="cancel-upload-btn" class="px-4 py-1.5 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition"> | |
| Cancel | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Processing Section (Initially Hidden) --> | |
| <section id="processing-section" class="hidden mb-12"> | |
| <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-6">Analyzing Your Video</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> | |
| <!-- Processing Steps --> | |
| <div class="bg-gray-50 p-4 rounded-lg border border-gray-200"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-video text-blue-500"></i> | |
| </div> | |
| <h4 class="font-medium">Video Analysis</h4> | |
| </div> | |
| <p class="text-sm text-gray-600">Scanning for key moments, faces, and scene changes</p> | |
| <div class="mt-3"> | |
| <div class="waveform"> | |
| <div class="waveform-inner"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg border border-gray-200"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-comment-alt text-blue-500"></i> | |
| </div> | |
| <h4 class="font-medium">Transcription</h4> | |
| </div> | |
| <p class="text-sm text-gray-600">Generating captions from speech with 98% accuracy</p> | |
| <div class="mt-3"> | |
| <div class="h-2 bg-gray-200 rounded-full overflow-hidden"> | |
| <div class="h-full bg-blue-500 animate-pulse" style="width: 100%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg border border-gray-200"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-magic text-blue-500"></i> | |
| </div> | |
| <h4 class="font-medium">Clip Generation</h4> | |
| </div> | |
| <p class="text-sm text-gray-600">Creating optimized viral clips based on AI analysis</p> | |
| <div class="mt-3"> | |
| <div class="flex space-x-1"> | |
| <div class="w-3 h-3 bg-blue-500 rounded-full animate-bounce" style="animation-delay: 0s"></div> | |
| <div class="w-3 h-3 bg-blue-500 rounded-full animate-bounce" style="animation-delay: 0.2s"></div> | |
| <div class="w-3 h-3 bg-blue-500 rounded-full animate-bounce" style="animation-delay: 0.4s"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <h4 class="font-medium text-gray-800 mb-1">Estimated Completion</h4> | |
| <p class="text-sm text-gray-600" id="time-remaining">About 2 minutes remaining</p> | |
| </div> | |
| <div class="text-right"> | |
| <div class="text-2xl font-bold text-blue-500" id="progress-text">72%</div> | |
| <div class="text-xs text-gray-500">Processing progress</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Results Section (Initially Hidden) --> | |
| <section id="results-section" class="hidden"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold text-gray-800">Your Viral Clips</h2> | |
| <div class="flex space-x-2"> | |
| <div class="relative group"> | |
| <button id="download-all-btn" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition flex items-center"> | |
| <i class="fas fa-download mr-2"></i> Download All | |
| </button> | |
| <div class="absolute right-0 mt-1 w-48 bg-white rounded-md shadow-lg py-1 z-10 hidden group-hover:block"> | |
| <div class="px-3 py-2 text-sm border-b">Download Options</div> | |
| <button class="block w-full text-left px-3 py-2 text-sm hover:bg-gray-100">ZIP (All formats)</button> | |
| <button class="block w-full text-left px-3 py-2 text-sm hover:bg-gray-100">9:16 Only</button> | |
| <button class="block w-full text-left px-3 py-2 text-sm hover:bg-gray-100">16:9 Only</button> | |
| <button class="block w-full text-left px-3 py-2 text-sm hover:bg-gray-100">1:1 Only</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex overflow-x-auto pb-4 mb-6 scrollbar-hide"> | |
| <div class="flex space-x-4"> | |
| <button class="tab-btn px-4 py-2 font-medium text-gray-700 hover:text-blue-500 transition active-tab" data-tab="all">All Clips (8)</button> | |
| <button class="tab-btn px-4 py-2 font-medium text-gray-700 hover:text-blue-500 transition" data-tab="tiktok">TikTok (5)</button> | |
| <button class="tab-btn px-4 py-2 font-medium text-gray-700 hover:text-blue-500 transition" data-tab="instagram">Instagram (5)</button> | |
| <button class="tab-btn px-4 py-2 font-medium text-gray-700 hover:text-blue-500 transition" data-tab="youtube">YouTube (5)</button> | |
| </div> | |
| </div> | |
| <div id="clip-filters" class="mb-6 flex flex-wrap gap-3"> | |
| <div class="flex items-center"> | |
| <label class="text-sm text-gray-600 mr-2">Sort by:</label> | |
| <select class="text-sm border rounded px-2 py-1 bg-white"> | |
| <option>Most Engaging</option> | |
| <option>Shortest First</option> | |
| <option>Longest First</option> | |
| <option>Most Emotional</option> | |
| </select> | |
| </div> | |
| <div class="flex items-center"> | |
| <label class="text-sm text-gray-600 mr-2">Duration:</label> | |
| <select class="text-sm border rounded px-2 py-1 bg-white"> | |
| <option>All Lengths</option> | |
| <option>30-35s</option> | |
| <option>36-40s</option> | |
| <option>41-45s</option> | |
| </select> | |
| </div> | |
| <div class="flex items-center"> | |
| <label class="text-sm text-gray-600 mr-2">Tone:</label> | |
| <select class="text-sm border rounded px-2 py-1 bg-white"> | |
| <option>All</option> | |
| <option>Exciting</option> | |
| <option>Funny</option> | |
| <option>Emotional</option> | |
| <option>Informative</option> | |
| </select> | |
| </div> | |
| <button class="ml-auto text-sm flex items-center text-blue-500 hover:text-blue-600"> | |
| <i class="fas fa-sliders-h mr-1"></i> Advanced Filters | |
| </button> | |
| </div> | |
| <!-- Clip Grid --> | |
| <div id="clip-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Clip 1 --> | |
| <div class="clip-card bg-white rounded-xl shadow-md overflow-hidden transition hover:shadow-lg"> | |
| <div class="video-container relative"> | |
| <div class="video-placeholder w-full h-48 flex items-center justify-center bg-gray-100"> | |
| <i class="fas fa-play text-4xl text-gray-400"></i> | |
| </div> | |
| <div class="custom-video-controls absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-3"> | |
| <div class="flex items-center space-x-2"> | |
| <button class="text-white hover:text-blue-300"> | |
| <i class="fas fa-play text-lg"></i> | |
| </button> | |
| <input type="range" min="0" max="100" value="0" class="flex-1 h-1 rounded-full accent-blue-500"> | |
| <span class="text-white text-xs font-mono">0:35</span> | |
| </div> | |
| </div> | |
| <div class="absolute top-2 right-2 flex space-x-1"> | |
| <span class="px-2 py-1 bg-black/70 text-white text-xs rounded">9:16</span> | |
| <span class="px-2 py-1 bg-blue-500 text-white text-xs rounded">Best</span> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-medium text-gray-800 line-clamp-1">When I tried this crazy hack...</h3> | |
| <span class="text-xs text-gray-500 bg-gray-100 px-2 py-0.5 rounded">35s</span> | |
| </div> | |
| <div class="mb-3"> | |
| <div class="text-xs text-gray-600 mb-1">Engagement Score: 92/100</div> | |
| <div class="w-full bg-gray-200 rounded-full h-1.5"> | |
| <div class="bg-green-500 h-1.5 rounded-full" style="width: 92%"></div> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between mt-4"> | |
| <div class="flex space-x-1"> | |
| <span class="px-2 py-0.5 bg-purple-100 text-purple-700 text-xs rounded">Exciting</span> | |
| <span class="px-2 py-0.5 bg-blue-100 text-blue-700 text-xs rounded">Emotional</span> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="text-gray-400 hover:text-blue-500 transition" title="Like"> | |
| <i class="far fa-heart"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-blue-500 transition" title="Download"> | |
| <i class="fas fa-download"></i> | |
| </button> | |
| <div class="relative group"> | |
| <button class="text-gray-400 hover:text-blue-500 transition" title="More options"> | |
| <i class="fas fa-ellipsis-h"></i> | |
| </button> | |
| <div class="absolute right-0 mt-1 w-40 bg-white rounded-md shadow-lg py-1 z-10 hidden group-hover:block"> | |
| <button class="block w-full text-left px-3 py-2 text-sm hover:bg-gray-100">Edit Captions</button> | |
| <button class="block w-full text-left px-3 py-2 text-sm hover:bg-gray-100">Change Aspect Ratio</button> | |
| <button class="block w-full text-left px-3 py-2 text-sm hover:bg-gray-100">Add Watermark</button> | |
| <button class="block w-full text-left px-3 py-2 text-sm hover:bg-gray-100 text-red-500">Delete</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Clip 2 --> | |
| <div class="clip-card bg-white rounded-xl shadow-md overflow-hidden transition hover:shadow-lg"> | |
| <div class="video-container relative"> | |
| <div class="video-placeholder w-full h-48 flex items-center justify-center bg-gray-100"> | |
| <i class="fas fa-play text-4xl text-gray-400"></i> | |
| </div> | |
| <div class="custom-video-controls absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-3"> | |
| <div class="flex items-center space-x-2"> | |
| <button class="text-white hover:text-blue-300"> | |
| <i class="fas fa-play text-lg"></i> | |
| </button> | |
| <input type="range" min="0" max="100" value="0" class="flex-1 h-1 rounded-full accent-blue-500"> | |
| <span class="text-white text-xs font-mono">0:42</span> | |
| </div> | |
| </div> | |
| <div class="absolute top-2 right-2 flex space-x-1"> | |
| <span class="px-2 py-1 bg-black/70 text-white text-xs rounded">1:1</span> | |
| <span class="px-2 py-1 bg-yellow-500 text-white text-xs rounded">High</span> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-medium text-gray-800 line-clamp-1">The moment everything changed...</h3> | |
| <span class="text-xs text-gray-500 bg-gray-100 px-2 py-0.5 rounded">42s</span> | |
| </div> | |
| <div class="mb-3"> | |
| <div class="text-xs text-gray-600 mb-1">Engagement Score: 84/100</div> | |
| <div class="w-full bg-gray-200 rounded-full h-1.5"> | |
| <div class="bg-green-500 h-1.5 rounded-full" style="width: 84%"></div> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between mt-4"> | |
| <div class="flex space-x-1"> | |
| <span class="px-2 py-0.5 bg-blue-100 text-blue-700 text-xs rounded">Emotional</span> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="text-gray-400 hover:text-blue-500 transition"> | |
| <i class="far fa-heart"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-blue-500 transition"> | |
| <i class="fas fa-download"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-blue-500 transition"> | |
| <i class="fas fa-ellipsis-h"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Clip 3 --> | |
| <div class="clip-card bg-white rounded-xl shadow-md overflow-hidden transition hover:shadow-lg"> | |
| <div class="video-container relative"> | |
| <div class="video-placeholder w-full h-48 flex items-center justify-center bg-gray-100"> | |
| <i class="fas fa-play text-4xl text-gray-400"></i> | |
| </div> | |
| <div class="custom-video-controls absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-3"> | |
| <div class="flex items-center space-x-2"> | |
| <button class="text-white hover:text-blue-300"> | |
| <i class="fas fa-play text-lg"></i> | |
| </button> | |
| <input type="range" min="0" max="100" value="0" class="flex-1 h-1 rounded-full accent-blue-500"> | |
| <span class="text-white text-xs font-mono">0:38</span> | |
| </div> | |
| </div> | |
| <div class="absolute top-2 right-2 flex space-x-1"> | |
| <span class="px-2 py-1 bg-black/70 text-white text-xs rounded">16:9</span> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-medium text-gray-800 line-clamp-1">You won't believe what happened next</h3> | |
| <span class="text-xs text-gray-500 bg-gray-100 px-2 py-0.5 rounded">38s</span> | |
| </div> | |
| <div class="mb-3"> | |
| <div class="text-xs text-gray-600 mb-1">Engagement Score: 89/100</div> | |
| <div class="w-full bg-gray-200 rounded-full h-1.5"> | |
| <div class="bg-green-500 h-1.5 rounded-full" style="width: 89%"></div> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between mt-4"> | |
| <div class="flex space-x-1"> | |
| <span class="px-2 py-0.5 bg-pink-100 text-pink-700 text-xs rounded">Funny</span> | |
| <span class="px-2 py-0.5 bg-purple-100 text-purple-700 text-xs rounded">Exciting</span> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="text-gray-400 hover:text-blue-500 transition"> | |
| <i class="far fa-heart"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-blue-500 transition"> | |
| <i class="fas fa-download"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-blue-500 transition"> | |
| <i class="fas fa-ellipsis-h"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- More clips would go here --> | |
| </div> | |
| <div class="mt-8 text-center"> | |
| <button id="create-more-btn" class="px-6 py-3 bg-blue-50 text-blue-500 rounded-lg hover:bg-blue-100 transition font-medium"> | |
| <i class="fas fa-plus mr-2"></i> Create More Clips from This Video | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="py-12 bg-gradient-to-r from-blue-50 to-purple-50 rounded-2xl mt-16"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">How Our AI Creates Viral Content</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition"> | |
| <div class="w-12 h-12 rounded-lg bg-blue-100 flex items-center justify-center mb-4"> | |
| <i class="fas fa-brain text-blue-500 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Smart Highlight Detection</h3> | |
| <p class="text-gray-600">Our AI analyzes visual and audio cues to identify the most engaging moments, including reactions, emotional peaks, and scene changes.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition"> | |
| <div class="w-12 h-12 rounded-lg bg-purple-100 flex items-center justify-center mb-4"> | |
| <i class="fas fa-closed-captioning text-purple-500 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Auto-Captioning with Style</h3> | |
| <p class="text-gray-600">Get perfectly synced captions for each clip. Customize fonts, colors, and emphasis on key viral words that boost engagement.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition"> | |
| <div class="w-12 h-12 rounded-lg bg-green-100 flex items-center justify-center mb-4"> | |
| <i class="fas fa-mobile-alt text-green-500 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Platform Optimization</h3> | |
| <p class="text-gray-600">Each clip is automatically formatted for TikTok (9:16), Instagram (1:1 and 9:16), and YouTube (16:9) with safe margins and centered subjects.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <footer class="bg-gray-800 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4 flex items-center"> | |
| <i class="fas fa-film text-blue-400 mr-2"></i> ViralClipAI | |
| </h3> | |
| <p class="text-gray-400">Transform your long videos into viral short-form content with powerful AI.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Product</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Features</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Pricing</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Examples</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">API</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Resources</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Guides</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Help Center</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Community</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Company</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">About Us</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Careers</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Press</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 text-sm mb-4 md:mb-0">© 2023 ViralClipAI. All rights reserved.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-tiktok"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-youtube"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Tab functionality | |
| const tabButtons = document.querySelectorAll('.tab-btn'); | |
| tabButtons.forEach(button => { | |
| button.addEventListener('click', function() { | |
| tabButtons.forEach(btn => btn.classList.remove('active-tab')); | |
| this.classList.add('active-tab'); | |
| // In a real app, this would filter the clips | |
| }); | |
| }); | |
| // File upload and drag & drop | |
| const dropzone = document.getElementById('upload-container'); | |
| const fileInput = document.getElementById('file-input'); | |
| const selectFileBtn = document.getElementById('select-file-btn'); | |
| const uploadContent = document.getElementById('upload-content'); | |
| const uploadProgress = document.getElementById('upload-progress'); | |
| const cancelUploadBtn = document.getElementById('cancel-upload-btn'); | |
| const filename = document.getElementById('filename'); | |
| const filesize = document.getElementById('filesize'); | |
| const progressFill = document.getElementById('progress-fill'); | |
| const progressPercent = document.getElementById('progress-percent'); | |
| const uploadSpeed = document.getElementById('upload-speed'); | |
| const processingSection = document.getElementById('processing-section'); | |
| const resultsSection = document.getElementById('results-section'); | |
| const createMoreBtn = document.getElementById('create-more-btn'); | |
| // Helper function to format file size | |
| function formatFileSize(bytes) { | |
| if (bytes === 0) return '0 Bytes'; | |
| const k = 1024; | |
| const sizes = ['Bytes', 'KB', 'MB', 'GB']; | |
| const i = Math.floor(Math.log(bytes) / Math.log(k)); | |
| return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]; | |
| } | |
| // Select file button | |
| selectFileBtn.addEventListener('click', function() { | |
| fileInput.click(); | |
| }); | |
| // File input change | |
| fileInput.addEventListener('change', function(e) { | |
| if (e.target.files.length) { | |
| handleFileUpload(e.target.files[0]); | |
| } | |
| }); | |
| // Drag and drop events | |
| ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { | |
| dropzone.addEventListener(eventName, preventDefaults, false); | |
| }); | |
| function preventDefaults(e) { | |
| e.preventDefault(); | |
| e.stopPropagation(); | |
| } | |
| ['dragenter', 'dragover'].forEach(eventName => { | |
| dropzone.addEventListener(eventName, highlight, false); | |
| }); | |
| ['dragleave', 'drop'].forEach(eventName => { | |
| dropzone.addEventListener(eventName, unhighlight, false); | |
| }); | |
| function highlight() { | |
| dropzone.classList.add('dragover'); | |
| } | |
| function unhighlight() { | |
| dropzone.classList.remove('dragover'); | |
| } | |
| // Handle dropped files | |
| dropzone.addEventListener('drop', function(e) { | |
| const dt = e.dataTransfer; | |
| const files = dt.files; | |
| if (files.length) { | |
| handleFileUpload(files[0]); | |
| } | |
| }); | |
| // Cancel upload | |
| cancelUploadBtn.addEventListener('click', function() { | |
| // In a real app, this would cancel the AJAX request | |
| resetUploadForm(); | |
| }); | |
| // Simulate upload and processing | |
| function handleFileUpload(file) { | |
| // Validate file | |
| const validTypes = ['video/mp4', 'video/quicktime', 'video/x-msvideo']; | |
| if (!validTypes.includes(file.type)) { | |
| alert('Please upload a valid video file (MP4, MOV, or AVI).'); | |
| return; | |
| } | |
| // Update UI for upload | |
| filename.textContent = file.name; | |
| filesize.textContent = `(${formatFileSize(file.size)})`; | |
| uploadContent.classList.add('hidden'); | |
| uploadProgress.classList.remove('hidden'); | |
| // Simulate upload progress | |
| let progress = 0; | |
| const uploadInterval = setInterval(() => { | |
| progress += Math.random() * 10; | |
| if (progress > 100) progress = 100; | |
| progressFill.style.width = `${progress}%`; | |
| progressPercent.textContent = `${Math.round(progress)}%`; | |
| // Simulate upload speed | |
| const speed = Math.round(Math.random() * 5) + 1; | |
| uploadSpeed.textContent = `${speed} MB/s`; | |
| if (progress === 100) { | |
| clearInterval(uploadInterval); | |
| uploadComplete(); | |
| } | |
| }, 300); | |
| } | |
| function uploadComplete() { | |
| // Hide upload section, show processing | |
| document.querySelector('section.mb-12').classList.add('hidden'); | |
| processingSection.classList.remove('hidden'); | |
| // Simulate processing | |
| const processingSteps = ['Video Analysis', 'Audio Processing', 'Transcription', 'Highlight Detection', 'Clip Generation', 'Formatting']; | |
| let currentStep = 0; | |
| let processingPercent = 0; | |
| const processingInterval = setInterval(() => { | |
| processingPercent += Math.random() * 5; | |
| if (processingPercent > 100) processingPercent = 100; | |
| document.getElementById('progress-text').textContent = `${Math.round(processingPercent)}%`; | |
| // Update time remaining | |
| const remaining = Math.round((100 - processingPercent) / 5); | |
| document.getElementById('time-remaining').textContent = `About ${remaining} ${remaining === 1 ? 'minute' : 'minutes'} remaining`; | |
| if (processingPercent === 100) { | |
| clearInterval(processingInterval); | |
| processingComplete(); | |
| } | |
| }, 800); | |
| } | |
| function processingComplete() { | |
| // Hide processing, show results | |
| processingSection.classList.add('hidden'); | |
| resultsSection.classList.remove('hidden'); | |
| // Scroll to results | |
| resultsSection.scrollIntoView({ behavior: 'smooth' }); | |
| } | |
| function resetUploadForm() { | |
| uploadContent.classList.remove('hidden'); | |
| uploadProgress.classList.add('hidden'); | |
| progressFill.style.width = '0%'; | |
| progressPercent.textContent = '0%'; | |
| fileInput.value = ''; | |
| } | |
| // Create more clips button | |
| createMoreBtn.addEventListener('click', function() { | |
| processingSection.classList.remove('hidden'); | |
| resultsSection.classList.add('hidden'); | |
| document.getElementById('progress-text').textContent = '0%'; | |
| uploadComplete(); | |
| }); | |
| // Video player hover controls (just UI example - would need real video element implementation) | |
| const videoContainers = document.querySelectorAll('.video-container'); | |
| videoContainers.forEach(container => { | |
| const placeholder = container.querySelector('.video-placeholder'); | |
| const playButton = container.querySelector('.custom-video-controls .fa-play'); | |
| playButton.addEventListener('click', function() { | |
| // In a real app, this would play the video | |
| placeholder.innerHTML = '<div class="w-full h-full flex items-center justify-center bg-black"><i class="fas fa-pause text-4xl text-white"></i></div>'; | |
| }); | |
| }); | |
| // Download buttons (just UI example) | |
| document.querySelectorAll('.fa-download').forEach(btn => { | |
| btn.addEventListener('click', function(e) { | |
| e.stopPropagation(); | |
| alert('In a real app, this would download the clip'); | |
| }); | |
| }); | |
| }); | |
| </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=WasaD13/wasa-test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |