Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ViralityPilot - Transform Ideas into Viral Content</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"> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 50: '#f0f9ff', | |
| 100: '#e0f2fe', | |
| 200: '#bae6fd', | |
| 300: '#7dd3fc', | |
| 400: '#38bdf8', | |
| 500: '#0ea5e9', | |
| 600: '#0284c7', | |
| 700: '#0369a1', | |
| 800: '#075985', | |
| 900: '#0c4a6e', | |
| }, | |
| secondary: { | |
| 50: '#f5f3ff', | |
| 100: '#ede9fe', | |
| 200: '#ddd6fe', | |
| 300: '#c4b5fd', | |
| 400: '#a78bfa', | |
| 500: '#8b5cf6', | |
| 600: '#7c3aed', | |
| 700: '#6d28d9', | |
| 800: '#5b21b6', | |
| 900: '#4c1d95', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .content-preview { | |
| transition: all 0.3s ease; | |
| } | |
| .content-preview:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); | |
| } | |
| .video-container { | |
| aspect-ratio: 9/16; | |
| } | |
| .dark .gradient-bg { | |
| background: linear-gradient(135deg, #1e3a8a 0%, #0c4a6e 100%); | |
| } | |
| .light .gradient-bg { | |
| background: linear-gradient(135deg, #3b82f6 0%, #0ea5e9 100%); | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.5s ease-in; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 dark:bg-gray-900 transition-colors duration-200"> | |
| <div class="min-h-screen flex flex-col"> | |
| <!-- Header --> | |
| <header class="gradient-bg text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-6"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-rocket text-2xl"></i> | |
| <h1 class="text-2xl font-bold">ViralityPilot</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button id="theme-toggle" class="p-2 rounded-full hover:bg-white/10"> | |
| <i class="fas fa-moon dark:hidden"></i> | |
| <i class="fas fa-sun hidden dark:inline"></i> | |
| </button> | |
| <button class="px-4 py-2 bg-white/10 hover:bg-white/20 rounded-lg font-medium transition"> | |
| Sign In | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-8 text-center"> | |
| <h2 class="text-4xl font-bold mb-4"><font color="black">Transform Your Raw Ideas Into Viral Content</font></h2> | |
| <p class="text-xl max-w-2xl mx-auto">Upload text, audio, or video and get optimized content for LinkedIn, TikTok, YouTube Shorts with AI-generated videos.</p> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="flex-grow container mx-auto px-4 py-8"> | |
| <div class="flex flex-col lg:flex-row gap-8"> | |
| <!-- Sidebar --> | |
| <aside class="w-full lg:w-1/4 bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 h-fit sticky top-8"> | |
| <h3 class="text-lg font-semibold mb-4 flex items-center"> | |
| <i class="fas fa-magic mr-2 text-primary-500"></i> Content Creation | |
| </h3> | |
| <ul class="space-y-2"> | |
| <li> | |
| <button id="input-tab" class="w-full text-left px-4 py-2 rounded-lg bg-primary-100 dark:bg-gray-700 font-medium flex items-center"> | |
| <i class="fas fa-upload mr-2"></i> Input Idea | |
| </button> | |
| </li> | |
| <li> | |
| <button id="scripts-tab" class="w-full text-left px-4 py-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center"> | |
| <i class="fas fa-file-alt mr-2"></i> Generated Scripts | |
| </button> | |
| </li> | |
| <li> | |
| <button id="video-tab" class="w-full text-left px-4 py-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center"> | |
| <i class="fas fa-video mr-2"></i> Video Preview | |
| </button> | |
| </li> | |
| <li> | |
| <button id="viral-tab" class="w-full text-left px-4 py-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center"> | |
| <i class="fas fa-fire mr-2"></i> Virality Score | |
| </button> | |
| </li> | |
| <li> | |
| <button id="export-tab" class="w-full text-left px-4 py-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center"> | |
| <i class="fas fa-download mr-2"></i> Export & Publish | |
| </button> | |
| </li> | |
| </ul> | |
| <div class="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700"> | |
| <h3 class="text-lg font-semibold mb-4 flex items-center"> | |
| <i class="fas fa-bolt mr-2 text-secondary-500"></i> Quick Actions | |
| </h3> | |
| <button class="w-full mb-3 px-4 py-2 bg-secondary-500 hover:bg-secondary-600 text-white rounded-lg font-medium transition flex items-center justify-center"> | |
| <i class="fas fa-wand-magic-sparkles mr-2"></i> Generate All | |
| </button> | |
| <button class="w-full px-4 py-2 border border-secondary-500 text-secondary-500 hover:bg-secondary-50 dark:hover:bg-gray-700 rounded-lg font-medium transition flex items-center justify-center"> | |
| <i class="fas fa-rotate mr-2"></i> Regenerate | |
| </button> | |
| </div> | |
| </aside> | |
| <!-- Main Panel --> | |
| <div class="w-full lg:w-3/4"> | |
| <!-- Input Panel --> | |
| <section id="input-panel" class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 mb-8 fade-in"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold flex items-center"> | |
| <i class="fas fa-upload mr-3 text-primary-500"></i> Input Your Idea | |
| </h2> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 text-sm bg-gray-100 dark:bg-gray-700 rounded-lg"> | |
| <i class="fas fa-keyboard mr-1"></i> Text | |
| </button> | |
| <button class="px-3 py-1 text-sm bg-gray-100 dark:bg-gray-700 rounded-lg"> | |
| <i class="fas fa-microphone mr-1"></i> Audio | |
| </button> | |
| <button class="px-3 py-1 text-sm bg-gray-100 dark:bg-gray-700 rounded-lg"> | |
| <i class="fas fa-video mr-1"></i> Video | |
| </button> | |
| <button class="px-3 py-1 text-sm bg-gray-100 dark:bg-gray-700 rounded-lg"> | |
| <i class="fas fa-link mr-1"></i> URL | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <textarea class="w-full h-64 p-4 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:text-white" placeholder="Paste your raw idea, meeting notes, or any content you want to transform into viral material..."></textarea> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> | |
| <div class="border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg p-8 text-center cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 transition"> | |
| <i class="fas fa-microphone text-4xl mb-3 text-gray-400"></i> | |
| <p class="font-medium">Upload Audio</p> | |
| <p class="text-sm text-gray-500">MP3, WAV, etc.</p> | |
| </div> | |
| <div class="border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg p-8 text-center cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 transition"> | |
| <i class="fas fa-video text-4xl mb-3 text-gray-400"></i> | |
| <p class="font-medium">Upload Video</p> | |
| <p class="text-sm text-gray-500">MP4, MOV, etc.</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="demo-mode" class="mr-2 h-4 w-4"> | |
| <label for="demo-mode" class="text-sm">Demo Mode (3 free generations)</label> | |
| </div> | |
| <button class="px-6 py-3 bg-primary-500 hover:bg-primary-600 text-white rounded-lg font-medium transition flex items-center"> | |
| <i class="fas fa-wand-magic-sparkles mr-2"></i> Generate Content | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Scripts Panel (hidden by default) --> | |
| <section id="scripts-panel" class="hidden bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 mb-8 fade-in"> | |
| <h2 class="text-2xl font-bold mb-6 flex items-center"> | |
| <i class="fas fa-file-alt mr-3 text-primary-500"></i> Generated Scripts | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <!-- LinkedIn Post --> | |
| <div class="content-preview bg-gray-50 dark:bg-gray-700 rounded-xl p-5 border border-gray-200 dark:border-gray-600"> | |
| <div class="flex justify-between items-start mb-3"> | |
| <h3 class="font-bold text-lg flex items-center"> | |
| <i class="fab fa-linkedin mr-2 text-blue-600"></i> LinkedIn Post | |
| </h3> | |
| <div class="flex space-x-2"> | |
| <button class="p-1 text-gray-500 hover:text-primary-500"> | |
| <i class="fas fa-copy"></i> | |
| </button> | |
| <button class="p-1 text-gray-500 hover:text-primary-500"> | |
| <i class="fas fa-redo"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="prose dark:prose-invert max-w-none"> | |
| <h4>The Hidden Productivity Killer No One Talks About</h4> | |
| <p>Last week, I discovered something shocking about my work habits...</p> | |
| <p>After tracking my time for 30 days, I realized I was losing 2 hours daily to "quick checks" that weren't quick at all.</p> | |
| <p>Here's what I learned and how I fixed it:</p> | |
| <ul> | |
| <li>The psychology behind task switching</li> | |
| <li>3 simple changes that saved me 10+ hours/week</li> | |
| <li>How to measure your own "attention tax"</li> | |
| </ul> | |
| <p>This isn't about working harder—it's about working smarter. What's your biggest productivity leak?</p> | |
| <p>#Productivity #TimeManagement #WorkSmarter</p> | |
| </div> | |
| </div> | |
| <!-- TikTok Script --> | |
| <div class="content-preview bg-gray-50 dark:bg-gray-700 rounded-xl p-5 border border-gray-200 dark:border-gray-600"> | |
| <div class="flex justify-between items-start mb-3"> | |
| <h3 class="font-bold text-lg flex items-center"> | |
| <i class="fab fa-tiktok mr-2 text-black dark:text-white"></i> TikTok Script | |
| </h3> | |
| <div class="flex space-x-2"> | |
| <button class="p-1 text-gray-500 hover:text-primary-500"> | |
| <i class="fas fa-copy"></i> | |
| </button> | |
| <button class="p-1 text-gray-500 hover:text-primary-500"> | |
| <i class="fas fa-redo"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="prose dark:prose-invert max-w-none"> | |
| <p>[Opening shot: You looking shocked at your phone]</p> | |
| <p>"I just wasted 2 HOURS of my day without realizing it!"</p> | |
| <p>[Cut to time tracking app showing scattered activity]</p> | |
| <p>"These 'quick checks' add up FAST. Here's what I did:"</p> | |
| <p>[3 quick cuts showing solutions]</p> | |
| <p>1. Batch checking (show calendar blocks)<br> | |
| 2. Airplane mode deep work<br> | |
| 3. The 5-minute rule</p> | |
| <p>[Final shot: You looking at watch smiling] "Saved 10+ hours this week! Try it!"</p> | |
| </div> | |
| </div> | |
| <!-- Twitter Thread --> | |
| <div class="content-preview bg-gray-50 dark:bg-gray-700 rounded-xl p-5 border border-gray-200 dark:border-gray-600"> | |
| <div class="flex justify-between items-start mb-3"> | |
| <h3 class="font-bold text-lg flex items-center"> | |
| <i class="fab fa-twitter mr-2 text-blue-400"></i> Twitter Thread | |
| </h3> | |
| <div class="flex space-x-2"> | |
| <button class="p-1 text-gray-500 hover:text-primary-500"> | |
| <i class="fas fa-copy"></i> | |
| </button> | |
| <button class="p-1 text-gray-500 hover:text-primary-500"> | |
| <i class="fas fa-redo"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="prose dark:prose-invert max-w-none"> | |
| <p>1/ I tracked my work habits for 30 days and discovered a silent productivity killer stealing 2 hours of my day.</p> | |
| <p>Here's how I fixed it ↓</p> | |
| <p>2/ The culprit? "Quick checks" that weren't quick:</p> | |
| <p>- Email peek = 12 min avg<br> | |
| - Slack "just seeing" = 8 min<br> | |
| - Social scroll = 15 min</p> | |
| <p>3/ The fix? Batch processing:</p> | |
| <p>- 3 designated check times/day<br> | |
| - Phone in another room<br> | |
| - 5-min rule for small tasks</p> | |
| <p>4/ Results? 10+ hours/week back!</p> | |
| </div> | |
| </div> | |
| <!-- YouTube Shorts --> | |
| <div class="content-preview bg-gray-50 dark:bg-gray-700 rounded-xl p-5 border border-gray-200 dark:border-gray-600"> | |
| <div class="flex justify-between items-start mb-3"> | |
| <h3 class="font-bold text-lg flex items-center"> | |
| <i class="fab fa-youtube mr-2 text-red-600"></i> YouTube Shorts | |
| </h3> | |
| <div class="flex space-x-2"> | |
| <button class="p-1 text-gray-500 hover:text-primary-500"> | |
| <i class="fas fa-copy"></i> | |
| </button> | |
| <button class="p-1 text-gray-500 hover:text-primary-500"> | |
| <i class="fas fa-redo"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="prose dark:prose-invert max-w-none"> | |
| <p>[Opening: Timer counting up to 2:00 hours]</p> | |
| <p>"This is how much time I was losing EVERY DAY to 'quick checks'"</p> | |
| <p>[Cut to you frustrated at desk]</p> | |
| <p>"Here's the 3-step system that gave me 10+ hours back this week:"</p> | |
| <p>[Step 1: Show batching on calendar]<br> | |
| [Step 2: Show phone in drawer]<br> | |
| [Step 3: Show 5-min rule in action]</p> | |
| <p>[Final: Side-by-side before/after productivity stats]</p> | |
| <p>"Which tip will you try first? Comment below!"</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Video Panel (hidden by default) --> | |
| <section id="video-panel" class="hidden bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 mb-8 fade-in"> | |
| <h2 class="text-2xl font-bold mb-6 flex items-center"> | |
| <i class="fas fa-video mr-3 text-primary-500"></i> AI-Generated Video Preview | |
| </h2> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <div class="lg:col-span-2"> | |
| <div class="video-container bg-black rounded-xl overflow-hidden relative"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <i class="fas fa-play text-4xl text-white opacity-70"></i> | |
| </div> | |
| <img src="https://images.unsplash.com/photo-1611162616475-465b1b775a0a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1074&q=80" alt="Video thumbnail" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <div> | |
| <h3 class="font-medium">Productivity Hacks Video</h3> | |
| <p class="text-sm text-gray-500">Generated 2 minutes ago</p> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="p-2 bg-gray-100 dark:bg-gray-700 rounded-full"> | |
| <i class="fas fa-volume-up"></i> | |
| </button> | |
| <button class="p-2 bg-gray-100 dark:bg-gray-700 rounded-full"> | |
| <i class="fas fa-captioning"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="font-bold mb-3">Video Customization</h3> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium mb-1">Avatar Style</label> | |
| <select class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700"> | |
| <option>Professional (Suit)</option> | |
| <option>Casual (T-shirt)</option> | |
| <option>Animated Character</option> | |
| <option>No Avatar (B-roll only)</option> | |
| </select> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium mb-1">Voice Style</label> | |
| <select class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700"> | |
| <option>Male - Warm & Authoritative</option> | |
| <option>Female - Energetic & Friendly</option> | |
| <option>Male - Deep & Serious</option> | |
| <option>Female - Calm & Professional</option> | |
| </select> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium mb-1">Background Music</label> | |
| <select class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700"> | |
| <option>Upbeat Corporate</option> | |
| <option>Chill Lo-fi</option> | |
| <option>No Music</option> | |
| <option>Custom Upload</option> | |
| </select> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium mb-1">Video Length</label> | |
| <div class="flex items-center space-x-2"> | |
| <input type="range" min="15" max="60" value="30" class="w-full"> | |
| <span class="text-sm w-10">30s</span> | |
| </div> | |
| </div> | |
| <button class="w-full px-4 py-2 bg-primary-500 hover:bg-primary-600 text-white rounded-lg font-medium transition"> | |
| <i class="fas fa-sync-alt mr-2"></i> Regenerate Video | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Virality Panel (hidden by default) --> | |
| <section id="viral-panel" class="hidden bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 mb-8 fade-in"> | |
| <h2 class="text-2xl font-bold mb-6 flex items-center"> | |
| <i class="fas fa-fire mr-3 text-primary-500"></i> Virality Score | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> | |
| <!-- Overall Score --> | |
| <div class="bg-gradient-to-br from-primary-500 to-primary-700 text-white rounded-xl p-6 text-center"> | |
| <div class="text-sm mb-1">Overall Virality Score</div> | |
| <div class="text-5xl font-bold mb-2">87/100</div> | |
| <div class="h-2 bg-white/20 rounded-full mb-3"> | |
| <div class="h-2 bg-white rounded-full" style="width: 87%"></div> | |
| </div> | |
| <div class="text-sm">Top 15% of content we've analyzed</div> | |
| </div> | |
| <!-- Platform Scores --> | |
| <div class="bg-gray-50 dark:bg-gray-700 rounded-xl p-6"> | |
| <h3 class="font-bold mb-4">Platform Scores</h3> | |
| <div class="space-y-3"> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>LinkedIn</span> | |
| <span>92/100</span> | |
| </div> | |
| <div class="h-2 bg-gray-200 dark:bg-gray-600 rounded-full"> | |
| <div class="h-2 bg-green-500 rounded-full" style="width: 92%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>TikTok</span> | |
| <span>85/100</span> | |
| </div> | |
| <div class="h-2 bg-gray-200 dark:bg-gray-600 rounded-full"> | |
| <div class="h-2 bg-blue-500 rounded-full" style="width: 85%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>YouTube Shorts</span> | |
| <span>81/100</span> | |
| </div> | |
| <div class="h-2 bg-gray-200 dark:bg-gray-600 rounded-full"> | |
| <div class="h-2 bg-red-500 rounded-full" style="width: 81%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Strengths --> | |
| <div class="bg-gray-50 dark:bg-gray-700 rounded-xl p-6"> | |
| <h3 class="font-bold mb-4">Content Strengths</h3> | |
| <div class="space-y-3"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center mr-3"> | |
| <i class="fas fa-check text-green-500"></i> | |
| </div> | |
| <span>Strong Hook (4.8/5)</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center mr-3"> | |
| <i class="fas fa-check text-green-500"></i> | |
| </div> | |
| <span>Emotional Appeal (4.6/5)</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center mr-3"> | |
| <i class="fas fa-check text-green-500"></i> | |
| </div> | |
| <span>Clear CTA (4.5/5)</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-yellow-100 dark:bg-yellow-900 flex items-center justify-center mr-3"> | |
| <i class="fas fa-info-circle text-yellow-500"></i> | |
| </div> | |
| <span>Could use more data points</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 dark:bg-gray-700 rounded-xl p-6"> | |
| <h3 class="font-bold mb-4">AI Recommendations to Improve Virality</h3> | |
| <div class="prose dark:prose-invert max-w-none"> | |
| <ul> | |
| <li><strong>Add a surprising statistic:</strong> "Did you know the average knowledge worker loses 2.1 hours daily to task switching?"</li> | |
| <li><strong>Make the hook more personal:</strong> Start with "I was shocked when I discovered..." instead of "Last week I found..."</li> | |
| <li><strong>Strengthen the CTA:</strong> Instead of "What's your biggest productivity leak?" try "Comment 'HACKS' below and I'll DM you my free time tracking template!"</li> | |
| <li><strong>Add a visual metaphor:</strong> Show a leaky bucket animation for the "productivity leaks" concept</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Export Panel (hidden by default) --> | |
| <section id="export-panel" class="hidden bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 mb-8 fade-in"> | |
| <h2 class="text-2xl font-bold mb-6 flex items-center"> | |
| <i class="fas fa-download mr-3 text-primary-500"></i> Export & Publish | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"> | |
| <!-- Export Options --> | |
| <div class="bg-gray-50 dark:bg-gray-700 rounded-xl p-6"> | |
| <h3 class="font-bold mb-4">Export Options</h3> | |
| <div class="space-y-3"> | |
| <label class="flex items-center p-3 border border-gray-200 dark:border-gray-600 rounded-lg cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600"> | |
| <input type="checkbox" class="mr-3 h-4 w-4"> | |
| <div> | |
| <div class="font-medium">Video File (.mp4)</div> | |
| <div class="text-sm text-gray-500">1080p with watermark</div> | |
| </div> | |
| </label> | |
| <label class="flex items-center p-3 border border-gray-200 dark:border-gray-600 rounded-lg cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600"> | |
| <input type="checkbox" class="mr-3 h-4 w-4"> | |
| <div> | |
| <div class="font-medium">All Scripts (.zip)</div> | |
| <div class="text-sm text-gray-500">LinkedIn, TikTok, Twitter, YouTube</div> | |
| </div> | |
| </label> | |
| <label class="flex items-center p-3 border border-gray-200 dark:border-gray-600 rounded-lg cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600"> | |
| <input type="checkbox" class="mr-3 h-4 w-4"> | |
| <div> | |
| <div class="font-medium">Subtitles (.srt)</div> | |
| <div class="text-sm text-gray-500">For video editing</div> | |
| </div> | |
| </label> | |
| <label class="flex items-center p-3 border border-gray-200 dark:border-gray-600 rounded-lg cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600"> | |
| <input type="checkbox" class="mr-3 h-4 w-4"> | |
| <div> | |
| <div class="font-medium">Brand Kit</div> | |
| <div class="text-sm text-gray-500">Your logo, colors, and fonts</div> | |
| </div> | |
| </label> | |
| </div> | |
| <button class="w-full mt-4 px-4 py-3 bg-primary-500 hover:bg-primary-600 text-white rounded-lg font-medium transition flex items-center justify-center"> | |
| <i class="fas fa-file-export mr-2"></i> Export Selected | |
| </button> | |
| </div> | |
| <!-- Publish Options --> | |
| <div class="bg-gray-50 dark:bg-gray-700 rounded-xl p-6"> | |
| <h3 class="font-bold mb-4">Publish Directly</h3> | |
| <div class="space-y-3"> | |
| <button class="w-full flex items-center p-3 border border-gray-200 dark:border-gray-600 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600"> | |
| <div class="w-8 h-8 rounded-full bg-blue-600 text-white flex items-center justify-center mr-3"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </div> | |
| <div> | |
| <div class="font-medium">Post to LinkedIn</div> | |
| <div class="text-sm text-gray-500">With generated image</div> | |
| </div> | |
| </button> | |
| <button class="w-full flex items-center p-3 border border-gray-200 dark:border-gray-600 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600"> | |
| <div class="w-8 h-8 rounded-full bg-black dark:bg-white text-white dark:text-black flex items-center justify-center mr-3"> | |
| <i class="fab fa-tiktok"></i> | |
| </div> | |
| <div> | |
| <div class="font-medium">Upload to TikTok</div> | |
| <div class="text-sm text-gray-500">With trending hashtags</div> | |
| </div> | |
| </button> | |
| <button class="w-full flex items-center p-3 border border-gray-200 dark:border-gray-600 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600"> | |
| <div class="w-8 h-8 rounded-full bg-red-600 text-white flex items-center justify-center mr-3"> | |
| <i class="fab fa-youtube"></i> | |
| </div> | |
| <div> | |
| <div class="font-medium">Upload to YouTube Shorts</div> | |
| <div class="text-sm text-gray-500">Optimized description</div> | |
| </div> | |
| </button> | |
| <button class="w-full flex items-center p-3 border border-gray-200 dark:border-gray-600 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600"> | |
| <div class="w-8 h-8 rounded-full bg-blue-400 text-white flex items-center justify-center mr-3"> | |
| <i class="fab fa-twitter"></i> | |
| </div> | |
| <div> | |
| <div class="font-medium">Post Twitter Thread</div> | |
| <div class="text-sm text-gray-500">With auto-threading</div> | |
| </div> | |
| </button> | |
| </div> | |
| <div class="mt-4 p-3 bg-yellow-50 dark:bg-yellow-900 rounded-lg text-sm"> | |
| <i class="fas fa-exclamation-triangle text-yellow-500 mr-2"></i> | |
| Demo mode limited to 3 exports. <a href="#" class="text-primary-500 hover:underline">Upgrade to remove limits</a>. | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 dark:bg-gray-700 rounded-xl p-6"> | |
| <h3 class="font-bold mb-4">Schedule Posts</h3> | |
| <div class="flex flex-col md:flex-row gap-4"> | |
| <div class="flex-grow"> | |
| <label class="block text-sm font-medium mb-1">Select Platforms</label> | |
| <select multiple class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg h-32 dark:bg-gray-700"> | |
| <option>LinkedIn Post</option> | |
| <option>TikTok Video</option> | |
| <option>YouTube Shorts</option> | |
| <option>Twitter Thread</option> | |
| <option>Instagram Reels</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Date & Time</label> | |
| <input type="datetime-local" class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700"> | |
| </div> | |
| <div class="flex items-end"> | |
| <button class="px-4 py-2 bg-primary-500 hover:bg-primary-600 text-white rounded-lg font-medium transition h-10"> | |
| Schedule | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-100 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center space-x-2 mb-4 md:mb-0"> | |
| <i class="fas fa-rocket text-xl"></i> | |
| <span class="font-bold">ViralityPilot</span> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="hover:text-primary-500">Pricing</a> | |
| <a href="#" class="hover:text-primary-500">API</a> | |
| <a href="#" class="hover:text-primary-500">Blog</a> | |
| <a href="#" class="hover:text-primary-500">Contact</a> | |
| </div> | |
| </div> | |
| <div class="mt-8 pt-8 border-t border-gray-200 dark:border-gray-700 text-center text-sm text-gray-500"> | |
| <p>© 2025 ViralityPilot. All rights reserved. Demo mode limited to 3 generations.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| </div> | |
| <script> | |
| // Theme toggle | |
| const themeToggle = document.getElementById('theme-toggle'); | |
| const html = document.documentElement; | |
| if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) { | |
| html.classList.add('dark'); | |
| } else { | |
| html.classList.remove('dark'); | |
| } | |
| themeToggle.addEventListener('click', () => { | |
| html.classList.toggle('dark'); | |
| localStorage.setItem('theme', html.classList.contains('dark') ? 'dark' : 'light'); | |
| }); | |
| // Tab switching | |
| const tabs = ['input', 'scripts', 'video', 'viral', 'export']; | |
| tabs.forEach(tab => { | |
| const tabBtn = document.getElementById(`${tab}-tab`); | |
| const panel = document.getElementById(`${tab}-panel`); | |
| tabBtn.addEventListener('click', () => { | |
| // Hide all panels | |
| tabs.forEach(t => { | |
| document.getElementById(`${t}-panel`).classList.add('hidden'); | |
| document.getElementById(`${t}-tab`).classList.remove('bg-primary-100', 'dark:bg-gray-700'); | |
| document.getElementById(`${t}-tab`).classList.add('hover:bg-gray-100', 'dark:hover:bg-gray-700'); | |
| }); | |
| // Show selected panel | |
| panel.classList.remove('hidden'); | |
| tabBtn.classList.add('bg-primary-100', 'dark:bg-gray-700'); | |
| tabBtn.classList.remove('hover:bg-gray-100', 'dark:hover:bg-gray-700'); | |
| }); | |
| }); | |
| // Initialize with input panel visible | |
| document.getElementById('input-panel').classList.remove('hidden'); | |
| document.getElementById('input-tab').classList.add('bg-primary-100', 'dark:bg-gray-700'); | |
| document.getElementById('input-tab').classList.remove('hover:bg-gray-100', 'dark:hover:bg-gray-700'); | |
| // Demo content generation | |
| document.querySelector('textarea').value = `I've been tracking my work habits for the past month and discovered that I'm losing about 2 hours every day to what I thought were "quick checks" - glancing at email, Slack, social media, etc. These micro-distractions add up to a huge productivity drain. I implemented three simple changes that gave me back over 10 hours per week: 1) Batch processing communications instead of constant checking, 2) Putting my phone in another room during focus time, and 3) The 5-minute rule for small tasks. The results have been transformative - I'm getting more done in less time with less stress.`; | |
| </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=mathurinacheisoft/viralitypilot" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |