Házme una página para descargar música de Tik tok con un link

README.md

@@ -1,10 +1,13 @@
 ---
-title: Tunetok Takedown
-emoji: 🏢
-colorFrom: green
-colorTo: blue
+title: TuneTok Takedown 🎵
+colorFrom: pink
+colorTo: yellow
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js

@@ -0,0 +1,84 @@
+class CustomFooter extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    width: 100%;
+                }
+                footer {
+                    background: linear-gradient(135deg, #0c4a6e 0%, #701a75 100%);
+                }
+                .footer-link {
+                    transition: color 0.3s ease;
+                }
+                .footer-link:hover {
+                    color: #7dd3fc;
+                }
+            </style>
+            <footer class="text-white">
+                <div class="container mx-auto px-4 py-8">
+                    <div class="grid md:grid-cols-4 gap-8">
+                        <!-- Brand -->
+                        <div class="col-span-2 md:col-span-1">
+                            <div class="flex items-center space-x-2 mb-4">
+                                <i data-feather="music" class="text-primary-300"></i>
+                                <span class="text-xl font-bold">TuneTok Takedown</span>
+                            </div>
+                            <p class="text-primary-200 text-sm">
+                                Tu herramienta confiable para descargar música de TikTok
+                            </p>
+                        </div>
+
+                        <!-- Quick Links -->
+                        <div>
+                            <h4 class="font-semibold mb-4">Enlaces Rápidos</h4>
+                            <div class="space-y-2">
+                                <a href="#" class="block footer-link text-primary-200 text-sm">Inicio</a>
+                                <a href="#how-it-works" class="block footer-link text-primary-200 text-sm">Cómo funciona</a>
+                                <a href="#" class="block footer-link text-primary-200 text-sm">FAQ</a>
+                                <a href="#" class="block footer-link text-primary-200 text-sm">Contacto</a>
+                            </div>
+                        </div>
+
+                        <!-- Legal -->
+                        <div>
+                            <h4 class="font-semibold mb-4">Legal</h4>
+                            <div class="space-y-2">
+                                <a href="#" class="block footer-link text-primary-200 text-sm">Términos de Servicio</a>
+                                <a href="#" class="block footer-link text-primary-200 text-sm">Política de Privacidad</a>
+                                <a href="#" class="block footer-link text-primary-200 text-sm">Cookies</a>
+                            </div>
+                        </div>
+
+                        <!-- Social -->
+                        <div>
+                            <h4 class="font-semibold mb-4">Síguenos</h4>
+                            <div class="flex space-x-4">
+                                <a href="#" class="footer-link">
+                                    <i data-feather="twitter"></i>
+                                </a>
+                                <a href="#" class="footer-link">
+                                    <i data-feather="instagram"></i>
+                                </a>
+                                <a href="#" class="footer-link">
+                                    <i data-feather="github"></i>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Bottom -->
+                    <div class="border-t border-primary-700 mt-8 pt-8 text-center">
+                        <p class="text-primary-200 text-sm">
+                            © 2024 TuneTok Takedown. Todos los derechos reservados.
+                        </p>
+                    </div>
+                </div>
+            </footer>
+        `;
+    }
+}
+
+customElements.define('custom-footer', CustomFooter);

components/navbar.js

@@ -0,0 +1,97 @@
+class CustomNavbar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    width: 100%;
+                }
+                nav {
+                    background: rgba(255, 255, 255, 0.8);
+                    backdrop-filter: blur(10px);
+                    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+                }
+                .nav-link {
+                    transition: all 0.3s ease;
+                    position: relative;
+                }
+                .nav-link:hover {
+                    color: #0ea5e9;
+                }
+                .nav-link::after {
+                    content: '';
+                    position: absolute;
+                    width: 0;
+                    height: 2px;
+                    bottom: -2px;
+                    left: 0;
+                    background: linear-gradient(135deg, #0ea5e9 0%, #d946ef 100%);
+                    transition: width 0.3s ease;
+                }
+                .nav-link:hover::after {
+                    width: 100%;
+                }
+            </style>
+            <nav class="sticky top-0 z-50">
+                <div class="container mx-auto px-4 py-4">
+                    <div class="flex items-center justify-between">
+                        <!-- Logo -->
+                        <div class="flex items-center space-x-2">
+                            <i data-feather="music" class="text-primary-600"></i>
+                            <span class="text-xl font-bold bg-gradient-to-r from-primary-600 to-secondary-600 bg-clip-text text-transparent">
+                                TuneTok Takedown
+                            </span>
+                        </div>
+
+                        <!-- Navigation Links -->
+                        <div class="hidden md:flex items-center space-x-8">
+                            <a href="#" class="nav-link text-gray-700 font-medium">Inicio</a>
+                            <a href="#how-it-works" class="nav-link text-gray-700 font-medium">Cómo funciona</a>
+                            <a href="#" class="nav-link text-gray-700 font-medium">FAQ</a>
+                        </div>
+
+                        <!-- Mobile menu button -->
+                        <button id="mobileMenuButton" class="md:hidden text-gray-700">
+                            <i data-feather="menu"></i>
+                        </button>
+                    </div>
+
+                    <!-- Mobile Menu -->
+                    <div id="mobileMenu" class="hidden md:hidden mt-4 space-y-4">
+                            <a href="#" class="block nav-link text-gray-700 font-medium">Inicio</a>
+                            <a href="#how-it-works" class="block nav-link text-gray-700 font-medium">Cómo funciona</a>
+                            <a href="#" class="block nav-link text-gray-700 font-medium">FAQ</a>
+                    </div>
+                </div>
+            </nav>
+        `;
+
+        // Add mobile menu functionality
+        const mobileMenuButton = this.shadowRoot.getElementById('mobileMenuButton');
+        const mobileMenu = this.shadowRoot.getElementById('mobileMenu');
+
+        mobileMenuButton.addEventListener('click', () => {
+            const isHidden = mobileMenu.classList.contains('hidden');
+            if (isHidden) {
+                mobileMenu.classList.remove('hidden');
+                mobileMenuButton.innerHTML = '<i data-feather="x"></i>';
+            } else {
+                mobileMenu.classList.add('hidden');
+                mobileMenuButton.innerHTML = '<i data-feather="menu"></i>';
+            }
+            feather.replace();
+        });
+
+        // Close mobile menu when clicking outside
+        document.addEventListener('click', (event) => {
+            if (!this.contains(event.target) && !mobileMenu.classList.contains('hidden')) {
+                mobileMenu.classList.add('hidden');
+                mobileMenuButton.innerHTML = '<i data-feather="menu"></i>';
+                feather.replace();
+            }
+        });
+    }
+}
+
+customElements.define('custom-navbar', CustomNavbar);

index.html

@@ -1,19 +1,178 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="es" class="h-full">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>TuneTok Takedown - Descarga Música de TikTok</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+        tailwind.config = {
+            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: '#fdf4ff',
+                            100: '#fae8ff',
+                            200: '#f5d0fe',
+                            300: '#f0abfc',
+                            400: '#e879f9',
+                            500: '#d946ef',
+                            600: '#c026d3',
+                            700: '#a21caf',
+                            800: '#86198f',
+                            900: '#701a75',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="min-h-screen bg-gradient-to-br from-primary-50 to-secondary-50">
+    <custom-navbar></custom-navbar>
+    
+    <main class="container mx-auto px-4 py-8">
+        <!-- Hero Section -->
+        <section class="text-center mb-16">
+            <div class="max-w-4xl mx-auto">
+                <h1 class="text-5xl md:text-6xl font-bold text-gray-900 mb-6">
+                    Descarga Música de 
+                    <span class="bg-gradient-to-r from-primary-600 to-secondary-600 bg-clip-text text-transparent">
+                        TikTok
+                    </span>
+                </h1>
+                <p class="text-xl text-gray-600 mb-8">
+                    Extrae el audio de cualquier video de TikTok en segundos. 
+                    Fácil, rápido y completamente gratis.
+                </p>
+                
+                <!-- Download Form -->
+                <div class="bg-white rounded-2xl shadow-xl p-8 max-w-2xl mx-auto">
+                    <div class="flex flex-col sm:flex-row gap-4">
+                        <input 
+                            type="text" 
+                            id="tiktokUrl"
+                            placeholder="Pega el enlace de TikTok aquí..."
+                            class="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
+                        >
+                        <button 
+                            id="downloadBtn"
+                            class="px-8 py-3 bg-gradient-to-r from-primary-600 to-secondary-600 text-white rounded-lg font-semibold hover:from-primary-700 hover:to-secondary-700 transition-all duration-300 flex items-center justify-center gap-2"
+                        >
+                            <i data-feather="download"></i>
+                            Descargar
+                        </button>
+                    </div>
+                    <div id="errorMessage" class="mt-4 text-red-500 text-sm hidden"></div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Features Section -->
+        <section class="mb-16">
+            <h2 class="text-3xl font-bold text-center text-gray-900 mb-12">
+                ¿Por qué elegirnos?
+            </h2>
+            <div class="grid md:grid-cols-3 gap-8">
+                <div class="text-center p-6">
+                    <div class="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                        <i data-feather="zap" class="text-primary-600"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-2">Super Rápido</h3>
+                    <p class="text-gray-600">Descargas instantáneas sin esperas ni límites</p>
+                </div>
+                <div class="text-center p-6">
+                    <div class="w-16 h-16 bg-secondary-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                        <i data-feather="shield" class="text-secondary-600"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-2">100% Seguro</h3>
+                    <p class="text-gray-600">Sin registro, sin virus, totalmente confiable</p>
+                </div>
+                <div class="text-center p-6">
+                    <div class="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                        <i data-feather="music" class="text-primary-600"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-2">Alta Calidad</h3>
+                    <p class="text-gray-600">Audio en la mejor calidad disponible</p>
+                </div>
+            </div>
+        </section>
+
+        <!-- How it Works -->
+        <section class="bg-white rounded-2xl shadow-xl p-8 mb-16">
+            <h2 class="text-3xl font-bold text-center text-gray-900 mb-12">
+                Cómo funciona
+            </h2>
+            <div class="grid md:grid-cols-3 gap-8">
+                <div class="text-center">
+                    <div class="w-12 h-12 bg-primary-500 text-white rounded-full flex items-center justify-center mx-auto mb-4 font-bold text-lg">
+                        1
+                    </div>
+                    <h3 class="text-lg font-semibold mb-2">Copia el enlace</h3>
+                    <p class="text-gray-600">Abre TikTok y copia el enlace del video</p>
+                </div>
+                <div class="text-center">
+                    <div class="w-12 h-12 bg-primary-500 text-white rounded-full flex items-center justify-center mx-auto mb-4 font-bold text-lg">
+                        2
+                    </div>
+                    <h3 class="text-lg font-semibold mb-2">Pega aquí</h3>
+                    <p class="text-gray-600">Pega el enlace en nuestro campo de texto</p>
+                </div>
+                <div class="text-center">
+                    <div class="w-12 h-12 bg-primary-500 text-white rounded-full flex items-center justify-center mx-auto mb-4 font-bold text-lg">
+                        3
+                    </div>
+                    <h3 class="text-lg font-semibold mb-2">¡Descarga!</h3>
+                    <p class="text-gray-600">Haz clic y obtén tu música al instante</p>
+                </div>
+            </div>
+        </section>
+
+        <!-- Results Section -->
+        <section id="resultsSection" class="hidden">
+            <div class="bg-white rounded-2xl shadow-xl p-8 max-w-2xl mx-auto">
+                <h3 class="text-2xl font-bold text-center text-gray-900 mb-6">
+                    ¡Listo para descargar!
+                </h3>
+                <div id="audioPreview" class="mb-6"></div>
+                <div class="flex gap-4 justify-center">
+                    <button id="downloadAudio" class="px-6 py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 transition-colors flex items-center gap-2">
+                        <i data-feather="download"></i>
+                        Descargar MP3
+                    </button>
+                    <button id="newDownload" class="px-6 py-3 bg-gray-200 text-gray-700 rounded-lg font-semibold hover:bg-gray-300 transition-colors flex items-center gap-2">
+                        <i data-feather="refresh-cw"></i>
+                        Nuevo Enlace
+                    </button>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <custom-footer></custom-footer>
+
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,132 @@
+// Main JavaScript for TuneTok Takedown
+
+document.addEventListener('DOMContentLoaded', function() {
+    const downloadBtn = document.getElementById('downloadBtn');
+    const tiktokUrlInput = document.getElementById('tiktokUrl');
+    const errorMessage = document.getElementById('errorMessage');
+    const resultsSection = document.getElementById('resultsSection');
+    const audioPreview = document.getElementById('audioPreview');
+    const downloadAudioBtn = document.getElementById('downloadAudio');
+    const newDownloadBtn = document.getElementById('newDownload');
+
+    // Validate TikTok URL
+    function isValidTikTokUrl(url) {
+        const tiktokPattern = /^https?:\/\/(www\.)?tiktok\.com\/.+/;
+        return tiktokPattern.test(url);
+    }
+
+    // Show error message
+    function showError(message) {
+        errorMessage.textContent = message;
+        errorMessage.classList.remove('hidden');
+        setTimeout(() => {
+            errorMessage.classList.add('hidden');
+        }, 5000);
+    }
+
+    // Simulate download process (in a real app, this would call an API)
+    function processDownload(url) {
+        return new Promise((resolve, reject) => {
+            setTimeout(() => {
+                if (isValidTikTokUrl(url)) {
+                    resolve({
+                        title: 'TikTok Audio',
+                        url: url,
+                        downloadUrl: `https://api.example.com/download?url=${encodeURIComponent(url)}`,
+                        audioUrl: 'https://example.com/audio.mp3'
+                    });
+                } else {
+                    reject('Enlace de TikTok no válido');
+                }
+            }, 2000);
+        });
+    }
+
+    // Create audio preview
+    function createAudioPreview(audioUrl) {
+        return `
+            <div class="bg-gray-50 rounded-lg p-4">
+                <audio controls class="w-full">
+                    <source src="${audioUrl}" type="audio/mpeg">
+                    Tu navegador no soporta el elemento de audio.
+                </audio>
+                <p class="text-sm text-gray-600 mt-2 text-center">
+                    Previsualiza el audio antes de descargar
+                </p>
+            </div>
+        `;
+    }
+
+    // Handle download button click
+    downloadBtn.addEventListener('click', async function() {
+        const url = tiktokUrlInput.value.trim();
+        
+        if (!url) {
+            showError('Por favor, pega un enlace de TikTok');
+            return;
+        }
+
+        if (!isValidTikTokUrl(url)) {
+            showError('Por favor, ingresa un enlace válido de TikTok');
+            return;
+        }
+
+        // Show loading state
+        const originalText = downloadBtn.innerHTML;
+        downloadBtn.innerHTML = '<div class="spinner"></div> Procesando...';
+        downloadBtn.disabled = true;
+
+        try {
+            const result = await processDownload(url);
+            
+            // Show results section
+            audioPreview.innerHTML = createAudioPreview(result.audioUrl);
+            resultsSection.classList.remove('hidden');
+            
+            // Set download link
+            downloadAudioBtn.onclick = function() {
+                window.open(result.downloadUrl, '_blank');
+            };
+
+            // Scroll to results
+            resultsSection.scrollIntoView({ behavior: 'smooth' });
+            
+        } catch (error) {
+            showError(error);
+        } finally {
+            // Reset button
+            downloadBtn.innerHTML = originalText;
+            downloadBtn.disabled = false;
+            feather.replace();
+        }
+    });
+
+    // Handle new download button
+    newDownloadBtn.addEventListener('click', function() {
+        resultsSection.classList.add('hidden');
+        tiktokUrlInput.value = '';
+        tiktokUrlInput.focus();
+    });
+
+    // Allow Enter key to trigger download
+    tiktokUrlInput.addEventListener('keypress', function(e) {
+        if (e.key === 'Enter') {
+            downloadBtn.click();
+        }
+    });
+
+    // Add some interactive effects
+    const featureCards = document.querySelectorAll('.text-center.p-6');
+    featureCards.forEach(card => {
+        card.addEventListener('mouseenter', function() {
+            this.style.transform = 'translateY(-5px)';
+            this.style.transition = 'transform 0.3s ease';
+        this.style.boxShadow = '0 10px 25px rgba(0, 0, 0, 0.1)';
+        });
+
+        card.addEventListener('mouseleave', function() {
+            this.style.transform = 'translateY(0)';
+            this.style.boxShadow = 'none';
+        });
+    });
+});

style.css

@@ -1,28 +1,74 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+/* Custom styles for TuneTok Takedown */
+
+/* Smooth scrolling */
+html {
+    scroll-behavior: smooth;
+}
+
+/* Custom animations */
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.fade-in-up {
+    animation: fadeInUp 0.6s ease-out;
+}
+
+/* Loading spinner */
+.spinner {
+    border: 2px solid #f3f3f3;
+    border-top: 2px solid #0ea5e9;
+    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+    animation: spin 1s linear infinite;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+/* Custom button hover effects */
+.btn-gradient {
+    background: linear-gradient(135deg, #0ea5e9 0%, #d946ef 100%);
+    transition: all 0.3s ease;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.btn-gradient:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 25px rgba(14, 165, 233, 0.3);
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+/* Glass morphism effect */
+.glass {
+    background: rgba(255, 255, 255, 0.25);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.18);
 }
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: linear-gradient(135deg, #0ea5e9 0%, #d946ef 100%);
+    border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(135deg, #0284c7 0%, #c026d3 100%);
+}