Download index.html from jrl224/test: direct link, hf CLI and curl.
- Browser
- Download file 27.4 kB
-
https://huggingface.co/spaces/jrl224/test/resolve/main/index.html
- Command line
-
hf download hf://spaces/jrl224/test/index.html
-
curl -L -o index.html https://huggingface.co/spaces/jrl224/test/resolve/main/index.html
27.4 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Video2Guide - Convert YouTube Videos to Step-by-Step Guides</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, #667eea 0%, #764ba2 100%); | |
| } | |
| .guide-step { | |
| transition: all 0.3s ease; | |
| } | |
| .guide-step:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .highlight-area { | |
| position: absolute; | |
| border: 2px solid rgba(255, 255, 0, 0.7); | |
| background-color: rgba(255, 255, 0, 0.2); | |
| border-radius: 50%; | |
| pointer-events: none; | |
| } | |
| .tooltip { | |
| position: absolute; | |
| background: white; | |
| padding: 5px 10px; | |
| border-radius: 5px; | |
| box-shadow: 0 2px 10px rgba(0,0,0,0.1); | |
| z-index: 100; | |
| font-size: 0.8rem; | |
| max-width: 200px; | |
| } | |
| .chat-container { | |
| transition: all 0.3s ease; | |
| height: 500px; | |
| } | |
| .chat-container.collapsed { | |
| height: 60px; | |
| } | |
| .progress-steps li.completed { | |
| color: #10b981; | |
| } | |
| .progress-steps li.completed:after { | |
| background-color: #10b981; | |
| } | |
| .progress-steps li.active { | |
| color: #3b82f6; | |
| font-weight: bold; | |
| } | |
| .progress-steps li.active:after { | |
| background-color: #3b82f6; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-gray-50 min-h-screen"> | |
| <!-- Header/Navigation --> | |
| <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-book-open text-2xl"></i> | |
| <h1 class="text-2xl font-bold">Video2Guide</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-6"> | |
| <a href="#" class="hover:text-gray-200 transition">Home</a> | |
| <a href="#" class="hover:text-gray-200 transition">Examples</a> | |
| <a href="#" class="hover:text-gray-200 transition">Pricing</a> | |
| <a href="#" class="hover:text-gray-200 transition">FAQ</a> | |
| </nav> | |
| <button class="md:hidden text-xl"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-8"> | |
| <!-- Hero Section --> | |
| <section class="text-center mb-16"> | |
| <h2 class="text-4xl md:text-5xl font-bold text-gray-800 mb-6">Convert YouTube Videos to Step-by-Step Guides</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto mb-8"> | |
| Transform any instructional video into a detailed, easy-to-follow visual guide with screenshots and clear instructions. | |
| </p> | |
| <!-- URL Input Form --> | |
| <div class="max-w-2xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6"> | |
| <div class="flex flex-col md:flex-row gap-4"> | |
| <input | |
| type="url" | |
| id="youtubeUrl" | |
| placeholder="Paste YouTube video URL here..." | |
| class="flex-grow px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition" | |
| > | |
| <button | |
| id="generateBtn" | |
| class="bg-blue-600 hover:bg-blue-700 text-white font-semibold px-6 py-3 rounded-lg transition flex items-center justify-center" | |
| > | |
| <i class="fas fa-magic mr-2"></i> Generate Guide | |
| </button> | |
| </div> | |
| <p class="text-sm text-gray-500 mt-3 text-left"> | |
| Example: https://www.youtube.com/watch?v=dQw4w9WgXcQ | |
| </p> | |
| </div> | |
| </section> | |
| <!-- Loading State (Hidden by default) --> | |
| <section id="loadingSection" class="hidden max-w-3xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-8 mb-8"> | |
| <div class="text-center"> | |
| <div class="animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-blue-500 mx-auto mb-6"></div> | |
| <h3 class="text-2xl font-semibold text-gray-800 mb-4">Creating Your Guide...</h3> | |
| <!-- Progress Steps --> | |
| <ul class="progress-steps relative max-w-md mx-auto mb-8"> | |
| <li class="completed mb-10 pl-6 relative"> | |
| <span>Processing YouTube URL</span> | |
| <span class="absolute left-0 top-0 w-4 h-4 rounded-full bg-green-500 -ml-2"></span> | |
| </li> | |
| <li class="active mb-10 pl-6 relative"> | |
| <span>Extracting video transcript</span> | |
| <span class="absolute left-0 top-0 w-4 h-4 rounded-full bg-blue-500 -ml-2"></span> | |
| <span class="absolute left-0 top-0 w-1 h-10 bg-gray-200 -ml-1 -mt-10"></span> | |
| </li> | |
| <li class="mb-10 pl-6 relative"> | |
| <span>Generating instructions</span> | |
| <span class="absolute left-0 top-0 w-4 h-4 rounded-full bg-gray-200 -ml-2"></span> | |
| <span class="absolute left-0 top-0 w-1 h-10 bg-gray-200 -ml-1 -mt-10"></span> | |
| </li> | |
| <li class="pl-6 relative"> | |
| <span>Capturing screenshots</span> | |
| <span class="absolute left-0 top-0 w-4 h-4 rounded-full bg-gray-200 -ml-2"></span> | |
| <span class="absolute left-0 top-0 w-1 h-10 bg-gray-200 -ml-1 -mt-10"></span> | |
| </li> | |
| </ul> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5 mb-4"> | |
| <div class="bg-blue-600 h-2.5 rounded-full" style="width: 45%"></div> | |
| </div> | |
| <p class="text-gray-600">Estimated time remaining: 1-2 minutes</p> | |
| </div> | |
| </section> | |
| <!-- Results Section (Hidden by default) --> | |
| <section id="resultsSection" class="hidden"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h2 class="text-3xl font-bold text-gray-800">Your Step-by-Step Guide</h2> | |
| <div class="flex space-x-4"> | |
| <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-lg flex items-center transition"> | |
| <i class="fas fa-print mr-2"></i> Print | |
| </button> | |
| <button id="exportPdfBtn" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg flex items-center transition"> | |
| <i class="fas fa-file-pdf mr-2"></i> Export PDF | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden mb-8"> | |
| <!-- Video Info --> | |
| <div class="p-6 border-b"> | |
| <div class="flex flex-col md:flex-row gap-6"> | |
| <div class="w-full md:w-1/3"> | |
| <img src="https://img.youtube.com/vi/dQw4w9WgXcQ/maxresdefault.jpg" alt="Video thumbnail" class="rounded-lg w-full"> | |
| </div> | |
| <div class="w-full md:w-2/3"> | |
| <h3 class="text-2xl font-bold text-gray-800 mb-2">How to Make Perfect Pancakes Every Time</h3> | |
| <p class="text-gray-600 mb-4">By Cooking Master • 12:34 duration</p> | |
| <p class="text-gray-700">This guide will walk you through the exact steps demonstrated in the video to make perfect, fluffy pancakes every time with professional results.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Guide Steps --> | |
| <div id="guideSteps" class="divide-y divide-gray-200"> | |
| <!-- Step 1 --> | |
| <div class="guide-step p-6 hover:bg-gray-50"> | |
| <div class="flex flex-col md:flex-row gap-6"> | |
| <div class="w-full md:w-1/3 relative"> | |
| <img src="https://images.unsplash.com/photo-1567620905732-2d1ec7ab7445?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Step 1" class="rounded-lg w-full cursor-pointer" id="stepImage1"> | |
| <div class="highlight-area" style="width: 60px; height: 60px; top: 30%; left: 40%;"></div> | |
| <div class="tooltip" style="top: 20%; left: 45%;">Mix until smooth</div> | |
| </div> | |
| <div class="w-full md:w-2/3"> | |
| <div class="flex items-center mb-2"> | |
| <span class="bg-blue-100 text-blue-800 text-sm font-semibold px-3 py-1 rounded-full mr-3">Step 1</span> | |
| <span class="text-sm text-gray-500">00:32 - 01:15</span> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">Prepare the Dry Ingredients</h3> | |
| <p class="text-gray-700 mb-4">In a large mixing bowl, combine 2 cups of all-purpose flour, 2 tablespoons of sugar, 1 tablespoon of baking powder, and 1/2 teaspoon of salt. Whisk these dry ingredients together thoroughly to ensure even distribution of the leavening agents.</p> | |
| <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4"> | |
| <p class="text-yellow-700"><strong>Pro Tip:</strong> Sifting the dry ingredients will make your pancakes even fluffier.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 2 --> | |
| <div class="guide-step p-6 hover:bg-gray-50"> | |
| <div class="flex flex-col md:flex-row gap-6"> | |
| <div class="w-full md:w-1/3 relative"> | |
| <img src="https://images.unsplash.com/photo-1550583724-b2692b85b150?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Step 2" class="rounded-lg w-full cursor-pointer" id="stepImage2"> | |
| <div class="highlight-area" style="width: 80px; height: 40px; top: 50%; left: 30%;"></div> | |
| <div class="tooltip" style="top: 40%; left: 35%;">Medium heat is ideal</div> | |
| </div> | |
| <div class="w-full md:w-2/3"> | |
| <div class="flex items-center mb-2"> | |
| <span class="bg-blue-100 text-blue-800 text-sm font-semibold px-3 py-1 rounded-full mr-3">Step 2</span> | |
| <span class="text-sm text-gray-500">01:16 - 02:30</span> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">Mix Wet Ingredients Separately</h3> | |
| <p class="text-gray-700 mb-4">In another bowl, beat 2 large eggs, then add 1 3/4 cups of milk, 1/4 cup of melted butter, and 1 teaspoon of vanilla extract. Whisk until fully combined. The video emphasizes not to overmix at this stage to prevent gluten development.</p> | |
| <div class="bg-blue-50 border-l-4 border-blue-400 p-4"> | |
| <p class="text-blue-700"><strong>Note:</strong> The butter should be cooled slightly before adding to prevent cooking the eggs.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- More steps would appear here in a real implementation --> | |
| </div> | |
| </div> | |
| <!-- Materials/Ingredients Section --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden mb-8"> | |
| <div class="p-6 border-b"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-4">Materials & Ingredients</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <h4 class="font-medium text-gray-700 mb-2">Ingredients</h4> | |
| <ul class="list-disc pl-5 text-gray-600 space-y-1"> | |
| <li>2 cups all-purpose flour</li> | |
| <li>2 tbsp sugar</li> | |
| <li>1 tbsp baking powder</li> | |
| <li>1/2 tsp salt</li> | |
| <li>2 large eggs</li> | |
| <li>1 3/4 cups milk</li> | |
| <li>1/4 cup melted butter</li> | |
| <li>1 tsp vanilla extract</li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-700 mb-2">Equipment</h4> | |
| <ul class="list-disc pl-5 text-gray-600 space-y-1"> | |
| <li>Large mixing bowls (2)</li> | |
| <li>Whisk</li> | |
| <li>Measuring cups/spoons</li> | |
| <li>Non-stick skillet or griddle</li> | |
| <li>Spatula</li> | |
| <li>Ladle or measuring cup</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="my-16"> | |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">How It Works</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-6 rounded-xl shadow-md text-center"> | |
| <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-link text-blue-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">1. Paste YouTube URL</h3> | |
| <p class="text-gray-600">Simply copy and paste the link to any instructional YouTube video you want to convert into a guide.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md text-center"> | |
| <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-cogs text-purple-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">2. AI Processes Content</h3> | |
| <p class="text-gray-600">Our system analyzes the video, extracts key moments, and generates clear step-by-step instructions.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md text-center"> | |
| <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-file-alt text-green-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">3. Get Your Guide</h3> | |
| <p class="text-gray-600">Receive a comprehensive visual guide with screenshots, timestamps, and detailed instructions.</p> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Floating Chat Button --> | |
| <div class="fixed bottom-6 right-6 z-50"> | |
| <button id="chatToggle" class="bg-blue-600 text-white w-14 h-14 rounded-full shadow-lg flex items-center justify-center transition hover:bg-blue-700"> | |
| <i class="fas fa-comment-dots text-2xl"></i> | |
| </button> | |
| </div> | |
| <!-- Chat Container --> | |
| <div id="chatContainer" class="fixed bottom-24 right-6 w-80 bg-white rounded-t-xl shadow-xl overflow-hidden chat-container collapsed"> | |
| <div class="bg-blue-600 text-white p-4 flex justify-between items-center cursor-pointer" id="chatHeader"> | |
| <h3 class="font-semibold">Guide Assistant</h3> | |
| <div> | |
| <button id="minimizeChat" class="text-white mr-2"> | |
| <i class="fas fa-minus"></i> | |
| </button> | |
| <button id="closeChat" class="text-white"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4 h-80 overflow-y-auto bg-gray-50" id="chatMessages"> | |
| <div class="mb-4"> | |
| <div class="bg-blue-100 text-gray-800 p-3 rounded-lg max-w-xs float-right"> | |
| Hello! I'm your guide assistant. How can I help you with this tutorial? | |
| </div> | |
| <div class="clear-both"></div> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="bg-white text-gray-800 p-3 rounded-lg max-w-xs shadow float-left"> | |
| Can you explain step 3 in more detail? | |
| </div> | |
| <div class="clear-both"></div> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="bg-blue-100 text-gray-800 p-3 rounded-lg max-w-xs float-right"> | |
| Certainly! Step 3 covers the mixing technique. The key is to fold the wet ingredients into the dry ingredients gently, stopping as soon as the flour is moistened. Lumps are okay - overmixing makes pancakes tough. | |
| </div> | |
| <div class="clear-both"></div> | |
| </div> | |
| </div> | |
| <div class="p-3 border-t border-gray-200 bg-white"> | |
| <div class="flex"> | |
| <input | |
| type="text" | |
| placeholder="Type your question..." | |
| class="flex-grow px-3 py-2 border border-gray-300 rounded-l-lg focus:outline-none focus:ring-1 focus:ring-blue-500" | |
| > | |
| <button class="bg-blue-600 text-white px-4 py-2 rounded-r-lg hover:bg-blue-700 transition"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Video2Guide</h3> | |
| <p class="text-gray-400">Transforming video tutorials into actionable step-by-step guides using AI technology.</p> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Quick Links</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Home</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">Pricing</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Legal</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Cookie Policy</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Connect</h3> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter text-xl"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook text-xl"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram text-xl"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-linkedin text-xl"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400"> | |
| <p>© 2023 Video2Guide. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- JavaScript --> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // DOM Elements | |
| const generateBtn = document.getElementById('generateBtn'); | |
| const youtubeUrl = document.getElementById('youtubeUrl'); | |
| const loadingSection = document.getElementById('loadingSection'); | |
| const resultsSection = document.getElementById('resultsSection'); | |
| const chatToggle = document.getElementById('chatToggle'); | |
| const chatContainer = document.getElementById('chatContainer'); | |
| const minimizeChat = document.getElementById('minimizeChat'); | |
| const closeChat = document.getElementById('closeChat'); | |
| const chatHeader = document.getElementById('chatHeader'); | |
| // Generate Guide Button Click | |
| generateBtn.addEventListener('click', function() { | |
| const url = youtubeUrl.value.trim(); | |
| if (!url) { | |
| alert('Please enter a YouTube URL'); | |
| return; | |
| } | |
| // Simple URL validation | |
| if (!url.includes('youtube.com') && !url.includes('youtu.be')) { | |
| alert('Please enter a valid YouTube URL'); | |
| return; | |
| } | |
| // Show loading state | |
| loadingSection.classList.remove('hidden'); | |
| // Hide results if they were shown | |
| resultsSection.classList.add('hidden'); | |
| // Simulate processing (in a real app, this would be API calls) | |
| setTimeout(function() { | |
| loadingSection.classList.add('hidden'); | |
| resultsSection.classList.remove('hidden'); | |
| // Scroll to results | |
| resultsSection.scrollIntoView({ behavior: 'smooth' }); | |
| }, 3000); | |
| }); | |
| // Chat Toggle | |
| chatToggle.addEventListener('click', function() { | |
| chatContainer.classList.toggle('collapsed'); | |
| }); | |
| // Minimize Chat | |
| minimizeChat.addEventListener('click', function(e) { | |
| e.stopPropagation(); | |
| chatContainer.classList.add('collapsed'); | |
| }); | |
| // Close Chat | |
| closeChat.addEventListener('click', function(e) { | |
| e.stopPropagation(); | |
| chatContainer.classList.add('hidden'); | |
| }); | |
| // Chat Header Click (to expand) | |
| chatHeader.addEventListener('click', function() { | |
| chatContainer.classList.remove('collapsed'); | |
| }); | |
| // Image click for highlighting (simulated) | |
| document.querySelectorAll('[id^="stepImage"]').forEach(img => { | |
| img.addEventListener('click', function(e) { | |
| const rect = this.getBoundingClientRect(); | |
| const x = e.clientX - rect.left; | |
| const y = e.clientY - rect.top; | |
| // Create or move highlight | |
| let highlight = this.nextElementSibling; | |
| if (!highlight || !highlight.classList.contains('highlight-area')) { | |
| highlight = document.createElement('div'); | |
| highlight.className = 'highlight-area'; | |
| this.parentNode.insertBefore(highlight, this.nextSibling); | |
| } | |
| highlight.style.width = '80px'; | |
| highlight.style.height = '80px'; | |
| highlight.style.top = (y - 40) + 'px'; | |
| highlight.style.left = (x - 40) + 'px'; | |
| // Show tooltip | |
| let tooltip = highlight.nextElementSibling; | |
| if (!tooltip || !tooltip.classList.contains('tooltip')) { | |
| tooltip = document.createElement('div'); | |
| tooltip.className = 'tooltip'; | |
| tooltip.textContent = 'Important detail'; | |
| this.parentNode.insertBefore(tooltip, highlight.nextSibling); | |
| } | |
| tooltip.style.top = (y - 60) + 'px'; | |
| tooltip.style.left = (x - 30) + 'px'; | |
| }); | |
| }); | |
| // Export PDF Button | |
| document.getElementById('exportPdfBtn').addEventListener('click', function() { | |
| alert('In a real implementation, this would generate a PDF with jsPDF or similar library'); | |
| }); | |
| }); | |
| </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=jrl224/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |