Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Atomic Magic Viral - AI Content Engine</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> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%); | |
| } | |
| .content-card { | |
| backdrop-filter: blur(10px); | |
| background-color: rgba(255, 255, 255, 0.1); | |
| } | |
| .typewriter { | |
| overflow: hidden; | |
| border-right: .15em solid #a777e3; | |
| white-space: nowrap; | |
| margin: 0 auto; | |
| letter-spacing: .15em; | |
| animation: | |
| typing 3.5s steps(40, end), | |
| blink-caret .75s step-end infinite; | |
| } | |
| @keyframes typing { | |
| from { width: 0 } | |
| to { width: 100% } | |
| } | |
| @keyframes blink-caret { | |
| from, to { border-color: transparent } | |
| 50% { border-color: #a777e3; } | |
| } | |
| .floating { | |
| animation: floating 3s ease-in-out infinite; | |
| } | |
| @keyframes floating { | |
| 0% { transform: translate(0, 0px); } | |
| 50% { transform: translate(0, 15px); } | |
| 100% { transform: translate(0, -0px); } | |
| } | |
| .progress-bar { | |
| height: 8px; | |
| border-radius: 4px; | |
| background-color: rgba(255,255,255,0.2); | |
| overflow: hidden; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| border-radius: 4px; | |
| background: linear-gradient(90deg, #a777e3, #6e8efb); | |
| transition: width 0.5s ease; | |
| } | |
| .niche-tag { | |
| transition: all 0.3s ease; | |
| } | |
| .niche-tag:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 4px 6px rgba(0,0,0,0.1); | |
| } | |
| .calendar-day { | |
| transition: all 0.2s ease; | |
| } | |
| .calendar-day:hover { | |
| transform: scale(1.05); | |
| background-color: rgba(167, 119, 227, 0.3); | |
| } | |
| .calendar-day.active { | |
| background-color: rgba(167, 119, 227, 0.5); | |
| border: 2px solid white; | |
| } | |
| </style> | |
| </head> | |
| <body class="gradient-bg min-h-screen text-white"> | |
| <div class="container mx-auto px-4 py-12"> | |
| <!-- Header --> | |
| <header class="text-center mb-16"> | |
| <div class="flex justify-center mb-6"> | |
| <div class="floating"> | |
| <i class="fas fa-robot text-6xl text-yellow-300"></i> | |
| </div> | |
| </div> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-4"> | |
| <span class="typewriter">Atomic Magic Viral</span> | |
| </h1> | |
| <p class="text-xl md:text-2xl opacity-90 max-w-3xl mx-auto"> | |
| Your AI-powered content strategist for viral YouTube & TikTok videos | |
| </p> | |
| </header> | |
| <!-- Main Content --> | |
| <main> | |
| <!-- Daily Upload System --> | |
| <section class="mb-16"> | |
| <div class="content-card rounded-2xl p-8 shadow-2xl"> | |
| <div class="flex items-center mb-6"> | |
| <div class="bg-purple-600 p-3 rounded-full mr-4"> | |
| <i class="fas fa-calendar-alt text-xl"></i> | |
| </div> | |
| <h2 class="text-2xl md:text-3xl font-bold">Daily Upload System</h2> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Schedule Settings --> | |
| <div class="bg-gray-800 rounded-xl p-6"> | |
| <h3 class="text-xl font-bold mb-4 flex items-center"> | |
| <i class="fas fa-clock mr-2"></i> Upload Schedule | |
| </h3> | |
| <div class="mb-6"> | |
| <label class="block mb-2">Upload Frequency</label> | |
| <select class="w-full bg-gray-700 rounded-lg p-2 focus:outline-none focus:ring-2 focus:ring-purple-500"> | |
| <option>Daily</option> | |
| <option>Every 2 Days</option> | |
| <option>Weekly</option> | |
| <option>Custom</option> | |
| </select> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block mb-2">Preferred Upload Time</label> | |
| <input type="time" class="w-full bg-gray-700 rounded-lg p-2 focus:outline-none focus:ring-2 focus:ring-purple-500" value="17:00"> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block mb-2">Platforms</label> | |
| <div class="space-y-2"> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="form-checkbox h-5 w-5 text-purple-600" checked> | |
| <span class="ml-2">YouTube</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="form-checkbox h-5 w-5 text-purple-600" checked> | |
| <span class="ml-2">TikTok</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="form-checkbox h-5 w-5 text-purple-600"> | |
| <span class="ml-2">Instagram</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="form-checkbox h-5 w-5 text-purple-600"> | |
| <span class="ml-2">Facebook</span> | |
| </label> | |
| </div> | |
| </div> | |
| <button class="bg-purple-600 hover:bg-purple-700 w-full py-3 rounded-lg font-medium"> | |
| <i class="fas fa-save mr-2"></i> Save Schedule | |
| </button> | |
| </div> | |
| <!-- Niche Rotation --> | |
| <div class="bg-gray-800 rounded-xl p-6"> | |
| <h3 class="text-xl font-bold mb-4 flex items-center"> | |
| <i class="fas fa-random mr-2"></i> Niche Rotation | |
| </h3> | |
| <div class="mb-4"> | |
| <label class="block mb-2">Active Niches</label> | |
| <div class="flex flex-wrap gap-2 mb-3"> | |
| <span class="niche-tag bg-blue-500 px-3 py-1 rounded-full text-sm">Tech Gadgets</span> | |
| <span class="niche-tag bg-green-500 px-3 py-1 rounded-full text-sm">Life Hacks</span> | |
| <span class="niche-tag bg-yellow-500 px-3 py-1 rounded-full text-sm">DIY Projects</span> | |
| <span class="niche-tag bg-red-500 px-3 py-1 rounded-full text-sm">Cooking Tips</span> | |
| <span class="niche-tag bg-purple-500 px-3 py-1 rounded-full text-sm">Product Reviews</span> | |
| </div> | |
| <input type="text" placeholder="Add new niche" class="w-full bg-gray-700 rounded-lg p-2 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500"> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block mb-2">Rotation Strategy</label> | |
| <select class="w-full bg-gray-700 rounded-lg p-2 focus:outline-none focus:ring-2 focus:ring-purple-500"> | |
| <option>Sequential (A→B→C→A)</option> | |
| <option>Random</option> | |
| <option>Trend-Based</option> | |
| <option>Performance-Based</option> | |
| </select> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block mb-2">Niche Weighting</label> | |
| <div class="text-xs mb-1 flex justify-between"> | |
| <span>Tech Gadgets: 30%</span> | |
| <span>Life Hacks: 25%</span> | |
| <span>DIY Projects: 20%</span> | |
| <span>Cooking Tips: 15%</span> | |
| <span>Product Reviews: 10%</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: 100%"></div> | |
| </div> | |
| </div> | |
| <button class="bg-purple-600 hover:bg-purple-700 w-full py-3 rounded-lg font-medium"> | |
| <i class="fas fa-sync-alt mr-2"></i> Update Rotation | |
| </button> | |
| </div> | |
| <!-- Calendar Preview --> | |
| <div class="bg-gray-800 rounded-xl p-6"> | |
| <h3 class="text-xl font-bold mb-4 flex items-center"> | |
| <i class="fas fa-calendar-week mr-2"></i> Upcoming Schedule | |
| </h3> | |
| <div class="grid grid-cols-7 gap-1 text-center mb-2"> | |
| <div class="text-xs font-bold">S</div> | |
| <div class="text-xs font-bold">M</div> | |
| <div class="text-xs font-bold">T</div> | |
| <div class="text-xs font-bold">W</div> | |
| <div class="text-xs font-bold">T</div> | |
| <div class="text-xs font-bold">F</div> | |
| <div class="text-xs font-bold">S</div> | |
| </div> | |
| <div class="grid grid-cols-7 gap-1"> | |
| <!-- Calendar days --> | |
| <div class="calendar-day p-2 rounded-lg text-center text-sm opacity-50">28</div> | |
| <div class="calendar-day p-2 rounded-lg text-center text-sm opacity-50">29</div> | |
| <div class="calendar-day p-2 rounded-lg text-center text-sm opacity-50">30</div> | |
| <div class="calendar-day p-2 rounded-lg text-center text-sm opacity-50">31</div> | |
| <div class="calendar-day p-2 rounded-lg text-center text-sm">1</div> | |
| <div class="calendar-day p-2 rounded-lg text-center text-sm">2</div> | |
| <div class="calendar-day p-2 rounded-lg text-center text-sm">3</div> | |
| <div class="calendar-day p-2 rounded-lg text-center text-sm">4</div> | |
| <div class="calendar-day p-2 rounded-lg text-center text-sm">5</div> | |
| <div class="calendar-day active p-2 rounded-lg text-center text-sm">6 | |
| <div class="text-xs mt-1">Tech Gadgets</div> | |
| </div> | |
| <div class="calendar-day p-2 rounded-lg text-center text-sm">7 | |
| <div class="text-xs mt-1">Life Hacks</div> | |
| </div> | |
| <div class="calendar-day p-2 rounded-lg text-center text-sm">8 | |
| <div class="text-xs mt-1">DIY Projects</div> | |
| </div> | |
| <div class="calendar-day p-2 rounded-lg text-center text-sm">9 | |
| <div class="text-xs mt-1">Cooking Tips</div> | |
| </div> | |
| <div class="calendar-day p-2 rounded-lg text-center text-sm">10 | |
| <div class="text-xs mt-1">Product Reviews</div> | |
| </div> | |
| <div class="calendar-day p-2 rounded-lg text-center text-sm">11 | |
| <div class="text-xs mt-1">Tech Gadgets</div> | |
| </div> | |
| <div class="calendar-day p-2 rounded-lg text-center text-sm">12 | |
| <div class="text-xs mt-1">Life Hacks</div> | |
| </div> | |
| <div class="calendar-day p-2 rounded-lg text-center text-sm">13 | |
| <div class="text-xs mt-1">DIY Projects</div> | |
| </div> | |
| <div class="calendar-day p-2 rounded-lg text-center text-sm">14 | |
| <div class="text-xs mt-1">Cooking Tips</div> | |
| </div> | |
| <div class="calendar-day p-2 rounded-lg text-center text-sm">15 | |
| <div class="text-xs mt-1">Product Reviews</div> | |
| </div> | |
| <div class="calendar-day p-2 rounded-lg text-center text-sm">16 | |
| <div class="text-xs mt-1">Tech Gadgets</div> | |
| </div> | |
| <div class="calendar-day p-2 rounded-lg text-center text-sm">17 | |
| <div class="text-xs mt-1">Life Hacks</div> | |
| </div> | |
| </div> | |
| <div class="mt-4 text-sm"> | |
| <div class="flex items-center mb-1"> | |
| <div class="w-3 h-3 rounded-full bg-purple-500 mr-2"></div> | |
| <span>Today's Upload</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-blue-500 mr-2"></div> | |
| <span>Scheduled Upload</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 bg-gray-800 rounded-xl p-6"> | |
| <h3 class="text-xl font-bold mb-4 flex items-center"> | |
| <i class="fas fa-bolt mr-2"></i> Today's Auto-Generated Content | |
| </h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <!-- Generated Content 1 --> | |
| <div class="bg-gray-700 rounded-lg p-4"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <div> | |
| <span class="bg-blue-500 text-xs px-2 py-1 rounded-full">Tech Gadgets</span> | |
| <span class="bg-yellow-500 text-xs px-2 py-1 rounded-full ml-1">YouTube</span> | |
| </div> | |
| <button class="text-xs bg-purple-600 hover:bg-purple-700 px-2 py-1 rounded"> | |
| <i class="fas fa-edit mr-1"></i> Edit | |
| </button> | |
| </div> | |
| <h4 class="font-bold mb-2">5 Must-Have Tech Gadgets Under $50 in 2023</h4> | |
| <p class="text-sm opacity-80 mb-3">Discover these affordable tech gadgets that will upgrade your daily routine without breaking the bank...</p> | |
| <div class="flex justify-between items-center text-xs"> | |
| <span><i class="fas fa-clock mr-1"></i> 1:20 duration</span> | |
| <span><i class="fas fa-upload mr-1"></i> Scheduled: Today 5:00 PM</span> | |
| </div> | |
| </div> | |
| <!-- Generated Content 2 --> | |
| <div class="bg-gray-700 rounded-lg p-4"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <div> | |
| <span class="bg-blue-500 text-xs px-2 py-1 rounded-full">Tech Gadgets</span> | |
| <span class="bg-pink-500 text-xs px-2 py-1 rounded-full ml-1">TikTok</span> | |
| </div> | |
| <button class="text-xs bg-purple-600 hover:bg-purple-700 px-2 py-1 rounded"> | |
| <i class="fas fa-edit mr-1"></i> Edit | |
| </button> | |
| </div> | |
| <h4 class="font-bold mb-2">This $20 Gadget Will Change Your Phone Forever</h4> | |
| <p class="text-sm opacity-80 mb-3">You won't believe what this little device can do! Perfect for travelers and busy professionals...</p> | |
| <div class="flex justify-between items-center text-xs"> | |
| <span><i class="fas fa-clock mr-1"></i> 0:45 duration</span> | |
| <span><i class="fas fa-upload mr-1"></i> Scheduled: Today 5:30 PM</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex flex-wrap gap-3"> | |
| <button class="bg-green-600 hover:bg-green-700 px-4 py-2 rounded-lg font-medium"> | |
| <i class="fas fa-check-circle mr-2"></i> Approve All | |
| </button> | |
| <button class="bg-yellow-600 hover:bg-yellow-700 px-4 py-2 rounded-lg font-medium"> | |
| <i class="fas fa-redo mr-2"></i> Regenerate | |
| </button> | |
| <button class="bg-red-600 hover:bg-red-700 px-4 py-2 rounded-lg font-medium"> | |
| <i class="fas fa-times-circle mr-2"></i> Reject All | |
| </button> | |
| <button class="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded-lg font-medium"> | |
| <i class="fas fa-cloud-upload-alt mr-2"></i> Upload Now | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- AI Prompt Section --> | |
| <section class="mb-16"> | |
| <div class="content-card rounded-2xl p-8 shadow-2xl mb-8"> | |
| <div class="flex items-center mb-6"> | |
| <div class="bg-purple-600 p-3 rounded-full mr-4"> | |
| <i class="fas fa-magic text-xl"></i> | |
| </div> | |
| <h2 class="text-2xl md:text-3xl font-bold">AI Agent Prompt Template</h2> | |
| </div> | |
| <div class="bg-gray-800 rounded-xl p-6 mb-6 relative"> | |
| <div class="absolute top-4 right-4 flex space-x-2"> | |
| <span class="h-3 w-3 bg-red-500 rounded-full"></span> | |
| <span class="h-3 w-3 bg-yellow-500 rounded-full"></span> | |
| <span class="h-3 w-3 bg-green-500 rounded-full"></span> | |
| </div> | |
| <pre class="text-sm md:text-base overflow-x-auto font-mono text-gray-300"><code>You are "Atomic Magic Viral", the ultimate AI-powered content strategist, scriptwriter, and growth hacker for YouTube and TikTok. You specialize in creating viral faceless video content across multiple niches, managing multi-channel publishing, optimizing for AdSense revenue, and integrating affiliate marketing seamlessly. | |
| Your mission is to: | |
| - Research trending topics and keywords using Google Trends, TubeBuddy, and social media. | |
| - Write engaging, fast-paced scripts optimized for virality and platform algorithms. | |
| - Generate SEO-friendly titles, descriptions, and tags for each video. | |
| - Suggest profitable affiliate products based on niche and audience intent. | |
| - Analyze performance data and suggest improvements weekly. | |
| - Repurpose top-performing content across platforms (YouTube Shorts → TikTok). | |
| - Always think like a content creator, marketer, and monetization expert combined. | |
| When given a niche or topic, respond with: | |
| 1. A compelling video script (60–90 seconds) | |
| 2. Suggested title & description with tags | |
| 3. Thumbnail idea | |
| 4. Affiliate product suggestion (with link if available) | |
| 5. Publishing recommendations (platform, time, hashtags) | |
| Example Input: "Create a tech tips video about under $20 gadgets." | |
| You reply with: [Script] [Title] [Description + Tags] [Thumbnail Idea] [Affiliate Product] [Publishing Notes]</code></pre> | |
| </div> | |
| <div class="flex flex-wrap gap-4"> | |
| <button class="bg-purple-600 hover:bg-purple-700 px-6 py-3 rounded-full font-medium flex items-center"> | |
| <i class="fas fa-copy mr-2"></i> Copy Prompt | |
| </button> | |
| <button class="bg-yellow-500 hover:bg-yellow-600 text-gray-900 px-6 py-3 rounded-full font-medium flex items-center"> | |
| <i class="fas fa-play mr-2"></i> Test in ChatGPT | |
| </button> | |
| <button class="bg-green-500 hover:bg-green-600 px-6 py-3 rounded-full font-medium flex items-center"> | |
| <i class="fas fa-download mr-2"></i> Download as JSON | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Grid --> | |
| <section class="mb-16"> | |
| <h2 class="text-2xl md:text-3xl font-bold mb-8 text-center">AI-Powered Content Engine</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Feature 1 --> | |
| <div class="content-card rounded-2xl p-6 shadow-lg"> | |
| <div class="bg-blue-500 p-3 rounded-full inline-block mb-4"> | |
| <i class="fas fa-chart-line text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Trend Analysis</h3> | |
| <p class="opacity-80">Real-time trend detection across platforms with predictive virality scoring.</p> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="content-card rounded-2xl p-6 shadow-lg"> | |
| <div class="bg-purple-500 p-3 rounded-full inline-block mb-4"> | |
| <i class="fas fa-scroll text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Script Generation</h3> | |
| <p class="opacity-80">Engaging scripts optimized for retention and platform algorithms.</p> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="content-card rounded-2xl p-6 shadow-lg"> | |
| <div class="bg-green-500 p-3 rounded-full inline-block mb-4"> | |
| <i class="fas fa-search-dollar text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">SEO Optimization</h3> | |
| <p class="opacity-80">Title, description and tag generation with keyword clustering.</p> | |
| </div> | |
| <!-- Feature 4 --> | |
| <div class="content-card rounded-2xl p-6 shadow-lg"> | |
| <div class="bg-yellow-500 p-3 rounded-full inline-block mb-4"> | |
| <i class="fas fa-link text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Affiliate Integration</h3> | |
| <p class="opacity-80">Contextual product recommendations with conversion tracking.</p> | |
| </div> | |
| <!-- Feature 5 --> | |
| <div class="content-card rounded-2xl p-6 shadow-lg"> | |
| <div class="bg-red-500 p-3 rounded-full inline-block mb-4"> | |
| <i class="fas fa-sync-alt text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Content Repurposing</h3> | |
| <p class="opacity-80">Automatic format adaptation for multi-platform distribution.</p> | |
| </div> | |
| <!-- Feature 6 --> | |
| <div class="content-card rounded-2xl p-6 shadow-lg"> | |
| <div class="bg-pink-500 p-3 rounded-full inline-block mb-4"> | |
| <i class="fas fa-chart-pie text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Performance Analytics</h3> | |
| <p class="opacity-80">AI-driven insights with actionable improvement recommendations.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Try It Out Section --> | |
| <section> | |
| <div class="content-card rounded-2xl p-8 shadow-2xl"> | |
| <h2 class="text-2xl md:text-3xl font-bold mb-6">Generate Viral Content Now</h2> | |
| <div class="mb-6"> | |
| <label class="block text-lg mb-2">Enter your niche or topic:</label> | |
| <input type="text" placeholder="e.g. 'under $20 kitchen gadgets'" | |
| class="w-full bg-gray-800 rounded-xl p-4 text-white focus:outline-none focus:ring-2 focus:ring-purple-500"> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-lg mb-2">Content type:</label> | |
| <div class="flex flex-wrap gap-3"> | |
| <button class="bg-purple-600 px-4 py-2 rounded-full">YouTube Video</button> | |
| <button class="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded-full">TikTok</button> | |
| <button class="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded-full">Instagram Reel</button> | |
| <button class="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded-full">Facebook Video</button> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-lg mb-2">Additional options:</label> | |
| <div class="flex flex-wrap gap-4"> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="form-checkbox h-5 w-5 text-purple-600"> | |
| <span class="ml-2">Include Affiliate Products</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="form-checkbox h-5 w-5 text-purple-600" checked> | |
| <span class="ml-2">SEO Optimization</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="form-checkbox h-5 w-5 text-purple-600"> | |
| <span class="ml-2">Multi-Platform Adaptation</span> | |
| </label> | |
| </div> | |
| </div> | |
| <button class="gradient-bg hover:opacity-90 px-8 py-4 rounded-full font-bold text-lg w-full md:w-auto"> | |
| <i class="fas fa-bolt mr-2"></i> Generate Viral Content | |
| </button> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="mt-20 text-center opacity-80 text-sm"> | |
| <p>© 2023 Atomic Magic Viral - AI Content Engine</p> | |
| <div class="flex justify-center space-x-4 mt-4"> | |
| <a href="#" class="hover:text-purple-300"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="hover:text-purple-300"><i class="fab fa-youtube"></i></a> | |
| <a href="#" class="hover:text-purple-300"><i class="fab fa-tiktok"></i></a> | |
| <a href="#" class="hover:text-purple-300"><i class="fab fa-discord"></i></a> | |
| </div> | |
| </footer> | |
| </div> | |
| <script> | |
| // Copy prompt functionality | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const copyButton = document.querySelector('button:has(.fa-copy)'); | |
| if (copyButton) { | |
| copyButton.addEventListener('click', function() { | |
| const promptText = document.querySelector('pre code').textContent; | |
| navigator.clipboard.writeText(promptText).then(() => { | |
| const originalText = copyButton.innerHTML; | |
| copyButton.innerHTML = '<i class="fas fa-check mr-2"></i> Copied!'; | |
| setTimeout(() => { | |
| copyButton.innerHTML = originalText; | |
| }, 2000); | |
| }); | |
| }); | |
| } | |
| // Typewriter effect restart | |
| setInterval(() => { | |
| const typewriter = document.querySelector('.typewriter'); | |
| if (typewriter) { | |
| typewriter.style.animation = 'none'; | |
| void typewriter.offsetWidth; // Trigger reflow | |
| typewriter.style.animation = 'typing 3.5s steps(40, end), blink-caret .75s step-end infinite'; | |
| } | |
| }, 3500); | |
| // Calendar day selection | |
| const calendarDays = document.querySelectorAll('.calendar-day'); | |
| calendarDays.forEach(day => { | |
| day.addEventListener('click', function() { | |
| calendarDays.forEach(d => d.classList.remove('active')); | |
| this.classList.add('active'); | |
| }); | |
| }); | |
| // Niche tag removal | |
| const nicheTags = document.querySelectorAll('.niche-tag'); | |
| nicheTags.forEach(tag => { | |
| tag.addEventListener('click', function() { | |
| this.remove(); | |
| }); | |
| }); | |
| }); | |
| </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=Oyetunji333/atomic" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |