Spaces:

eubottura
/

anycoder-841add5e

Running

App Files Files Community

eubottura commited on Dec 20, 2025

Commit

9f2e600

verified ·

1 Parent(s): f19a86d

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +910 -741

index.html CHANGED Viewed

@@ -1,811 +1,980 @@
 <!DOCTYPE html>
 <html lang="pt-BR">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Douyin Video Extractor - Userscript</title>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <style>
-        :root {
-            --primary: #fe2c55;
-            --secondary: #25f4ee;
-            --bg-dark: #161823;
-            --bg-card: #1f1f2e;
-            --bg-hover: #2a2a3e;
-            --text-primary: #ffffff;
-            --text-secondary: #a0a0b0;
-            --border: #2a2a3e;
-            --success: #00ff88;
-            --warning: #ffaa00;
-            --error: #ff3366;
-            --gradient: linear-gradient(135deg, #fe2c55 0%, #25f4ee 100%);
-        }
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-            background: linear-gradient(135deg, #0f0f1e 0%, #1a1a2e 100%);
-            color: var(--text-primary);
-            min-height: 100vh;
-            display: flex;
-            flex-direction: column;
-        }
-        .container {
-            max-width: 1400px;
-            margin: 0 auto;
-            padding: 20px;
-            flex: 1;
-            width: 100%;
-        }
-        header {
-            background: rgba(31, 31, 46, 0.8);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border);
-            padding: 20px 0;
-            position: sticky;
-            top: 0;
-            z-index: 100;
-            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-        }
-        .header-content {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            max-width: 1400px;
-            margin: 0 auto;
-            padding: 0 20px;
-        }
-        .logo {
-            display: flex;
-            align-items: center;
-            gap: 15px;
-        }
-        .logo-icon {
-            width: 50px;
-            height: 50px;
-            background: var(--gradient);
-            border-radius: 12px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 24px;
-            animation: pulse 2s infinite;
-        }
-        @keyframes pulse {
-            0%, 100% { transform: scale(1); }
-            50% { transform: scale(1.05); }
-        }
-        h1 {
-            font-size: 1.8rem;
-            font-weight: 700;
-            background: var(--gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-        }
-        .built-with {
-            color: var(--text-secondary);
-            text-decoration: none;
-            font-size: 0.9rem;
-            transition: color 0.3s;
-        }
-        .built-with:hover {
-            color: var(--secondary);
-        }
-        .tabs {
-            display: flex;
-            gap: 10px;
-            margin: 30px 0;
-            background: var(--bg-card);
-            padding: 8px;
-            border-radius: 12px;
-            width: fit-content;
-        }
-        .tab {
-            padding: 12px 24px;
-            background: transparent;
-            border: none;
-            color: var(--text-secondary);
-            cursor: pointer;
-            border-radius: 8px;
-            font-size: 1rem;
-            font-weight: 500;
-            transition: all 0.3s;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        .tab.active {
-            background: var(--gradient);
-            color: white;
-        }
-        .tab:hover:not(.active) {
-            background: var(--bg-hover);
-            color: var(--text-primary);
-        }
-        .content-area {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 30px;
-            margin-bottom: 30px;
-        }
-        .card {
-            background: rgba(31, 31, 46, 0.6);
-            backdrop-filter: blur(10px);
-            border: 1px solid var(--border);
-            border-radius: 20px;
-            padding: 30px;
-            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
-            transition: transform 0.3s, box-shadow 0.3s;
-        }
-        .card:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 15px 50px rgba(254, 44, 85, 0.2);
-        }
-        .card-header {
-            display: flex;
-            align-items: center;
-            gap: 15px;
-            margin-bottom: 25px;
-        }
-        .card-icon {
-            width: 45px;
-            height: 45px;
-            background: var(--gradient);
-            border-radius: 10px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 20px;
-        }
-        .card-title {
-            font-size: 1.3rem;
-            font-weight: 600;
-        }
-        .code-block {
-            background: #0a0a0f;
-            border: 1px solid var(--border);
-            border-radius: 12px;
-            padding: 20px;
-            margin: 20px 0;
-            position: relative;
-            overflow: hidden;
-        }
-        .code-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 15px;
-            padding-bottom: 10px;
-            border-bottom: 1px solid var(--border);
-        }
-        .code-lang {
-            color: var(--secondary);
-            font-size: 0.9rem;
-            font-weight: 500;
-        }
-        .copy-btn {
-            background: var(--gradient);
-            color: white;
-            border: none;
-            padding: 8px 16px;
-            border-radius: 6px;
-            cursor: pointer;
-            font-size: 0.9rem;
-            transition: all 0.3s;
-            display: flex;
-            align-items: center;
-            gap: 5px;
-        }
-        .copy-btn:hover {
-            transform: scale(1.05);
-            box-shadow: 0 4px 15px rgba(254, 44, 85, 0.4);
-        }
-        .copy-btn.copied {
-            background: var(--success);
-        }
-        pre {
-            color: #e6e6e6;
-            font-family: 'Courier New', Consolas, monospace;
-            font-size: 0.9rem;
-            line-height: 1.6;
-            overflow-x: auto;
-            margin: 0;
-        }
-        .instructions {
-            background: rgba(37, 244, 238, 0.1);
-            border: 1px solid rgba(37, 244, 238, 0.3);
-            border-radius: 12px;
-            padding: 20px;
-            margin: 20px 0;
-        }
-        .instructions h3 {
-            color: var(--secondary);
-            margin-bottom: 15px;
-            display: flex;
-            align-items: center;
-            gap: 10px;
-        }
-        .instructions ol {
-            margin-left: 20px;
-            color: var(--text-secondary);
-        }
-        .instructions li {
-            margin: 10px 0;
-            line-height: 1.6;
-        }
-        .feature-list {
-            display: grid;
-            gap: 15px;
-            margin: 20px 0;
-        }
-        .feature-item {
-            display: flex;
-            align-items: start;
-            gap: 15px;
-            padding: 15px;
-            background: rgba(255, 255, 255, 0.02);
-            border-radius: 10px;
-            transition: all 0.3s;
-        }
-        .feature-item:hover {
-            background: rgba(255, 255, 255, 0.05);
-            transform: translateX(5px);
-        }
-        .feature-icon {
-            width: 35px;
-            height: 35px;
-            background: var(--gradient);
-            border-radius: 8px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            flex-shrink: 0;
-        }
-        .demo-section {
-            background: var(--bg-card);
-            border-radius: 20px;
-            padding: 40px;
-            margin: 30px 0;
-            text-align: center;
-        }
-        .demo-title {
-            font-size: 1.5rem;
-            margin-bottom: 20px;
-            background: var(--gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-        }
-        .demo-buttons {
-            display: flex;
-            gap: 15px;
-            justify-content: center;
-            flex-wrap: wrap;
-        }
-        .demo-btn {
-            padding: 12px 30px;
-            background: var(--gradient);
-            color: white;
-            border: none;
-            border-radius: 10px;
-            font-size: 1rem;
-            font-weight: 600;
-            cursor: pointer;
-            transition: all 0.3s;
-            display: flex;
-            align-items: center;
-            gap: 10px;
-        }
-        .demo-btn:hover {
-            transform: translateY(-3px);
-            box-shadow: 0 5px 20px rgba(254, 44, 85, 0.4);
-        }
-        .preview-window {
-            background: #0a0a0f;
-            border: 1px solid var(--border);
-            border-radius: 12px;
-            padding: 20px;
-            margin: 20px 0;
-            font-family: monospace;
-            font-size: 0.9rem;
-            max-height: 300px;
-            overflow-y: auto;
-        }
-        .status-indicator {
-            display: inline-flex;
-            align-items: center;
-            gap: 8px;
-            padding: 6px 12px;
-            border-radius: 20px;
-            font-size: 0.85rem;
-            font-weight: 500;
-        }
-        .status-active {
-            background: rgba(0, 255, 136, 0.1);
-            color: var(--success);
-            border: 1px solid rgba(0, 255, 136, 0.3);
-        }
-        .status-inactive {
-            background: rgba(255, 170, 0, 0.1);
-            color: var(--warning);
-            border: 1px solid rgba(255, 170, 0, 0.3);
-        }
-        @media (max-width: 968px) {
-            .content-area {
-                grid-template-columns: 1fr;
-            }
-            .header-content {
-                flex-direction: column;
-                gap: 15px;
-            }
-        }
-        .highlight {
-            background: rgba(254, 44, 85, 0.1);
-            border-left: 3px solid var(--primary);
-            padding: 15px;
-            margin: 20px 0;
-            border-radius: 8px;
-        }
-        .highlight strong {
-            color: var(--primary);
-        }
-    </style>
 </head>
 <body>
-    <header>
-        <div class="header-content">
-            <div class="logo">
-                <div class="logo-icon">
-                    <i class="fas fa-code"></i>
-                </div>
-                <h1>Douyin Video Extractor</h1>
             </div>
-            <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with">
-                Built with anycoder
-            </a>
         </div>
-    </header>
-    <div class="container">
-        <div class="tabs">
-            <button class="tab active" onclick="switchTab('userscript')">
-                <i class="fas fa-file-code"></i>
-                Userscript
-            </button>
-            <button class="tab" onclick="switchTab('bookmarklet')">
-                <i class="fas fa-bookmark"></i>
-                Bookmarklet
-            </button>
-            <button class="tab" onclick="switchTab('demo')">
-                <i class="fas fa-play"></i>
-                Demo
-            </button>
         </div>
-        <div id="userscript-tab" class="tab-content">
-            <div class="content-area">
-                <div class="card">
-                    <div class="card-header">
-                        <div class="card-icon">
-                            <i class="fas fa-download"></i>
-                        </div>
-                        <div class="card-title">Userscript para Douyin</div>
-                    </div>
-                    <div class="instructions">
-                        <h3><i class="fas fa-info-circle"></i> Como Instalar</h3>
-                        <ol>
-                            <li>Instale a extensão <strong>Tampermonkey</strong> no seu navegador</li>
-                            <li>Clique no botão "Copiar Código" abaixo</li>
-                            <li>Abra o Tampermonkey e clique em "Criar novo script"</li>
-                            <li>Apague o código padrão e cole o código copiado</li>
-                            <li>Salve o script (Ctrl+S)</li>
-                            <li>Acesse qualquer vídeo no Douyin e o botão de download aparecerá</li>
-                        </ol>
-                    </div>
-                    <div class="code-block">
-                        <div class="code-header">
-                            <span class="code-lang">JavaScript (Userscript)</span>
-                            <button class="copy-btn" onclick="copyCode(this, 'userscript-code')">
-                                <i class="fas fa-copy"></i>
-                                Copiar Código
-                            </button>
-                        </div>
-                        <pre id="userscript-code">// ==UserScript==
-// @name         Douyin Video Downloader
-// @namespace    http://tampermonkey.net/
-// @version      1.0
-// @description  Download Douyin videos directly from the page
-// @author       You
-// @match        https://www.douyin.com/*
-// @match        https://v.douyin.com/*
-// @grant        none
-// ==/UserScript==
-(function() {
-    'use strict';
-    // Função principal de extração
-    async function extractVideoUrl() {
-        try {
-            // Passo a: Extrair URL alvo
-            const targetUrl = window.location.href.split('?')[0];
-            // Passo b: Identificar ID do vídeo
-            const urlParams = new URLSearchParams(window.location.search);
-            let videoId = urlParams.get('modal_id');
-            if (!videoId) {
-                // Extrair ID da URL atual
-                const pathMatch = targetUrl.match(/\/video\/(\d+)/);
-                if (pathMatch) {
-                    videoId = pathMatch[1];
-                }
-            }
-            const finalUrl = videoId ? `https://www.douyin.com/video/${videoId}` : targetUrl;
-            // Passo c: Gerar hash
-            const hash = btoa(finalUrl) + (finalUrl.length + 1000) + btoa('aio-dl');
-            // Passo d: Fazer chamada API
-            const response = await fetch('https://api.douyin.wtf/api', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({
-                    url: finalUrl,
-                    hash: hash
-                })
-            });
-            const data = await response.json();
-            if (data.success && data.data.medias && data.data.medias.length > 0) {
-                // Passo f: Ordenar e selecionar melhor mídia
-                const sortedMedias = data.data.medias.sort((a, b) => (b.size || 0) - (a.size || 0));
-                const bestMedia = sortedMedias[0];
-                // Passo g: Extrair link de download
-                return {
-                    success: true,
-                    downloadUrl: bestMedia.url,
-                    quality: bestMedia.quality || 'Unknown',
-                    size: bestMedia.formattedSize || 'Unknown'
-                };
-            } else {
-                throw new Error('No media found');
-            }
-        } catch (error) {
-            // Passo h: Fallback
-            return {
-                success: false,
-                fallbackUrl: `https://snapdouyin.app/#url=${encodeURIComponent(window.location.href)}`
-            };
-        }
     }
-    // Criar botão de download
-    function createDownloadButton() {
-        const button = document.createElement('button');
-        button.innerHTML = '<i class="fas fa-download"></i> Download Vídeo';
-        button.style.cssText = `
-            position: fixed;
-            top: 100px;
-            right: 20px;
-            z-index: 9999;
-            padding: 12px 20px;
-            background: linear-gradient(135deg, #fe2c55 0%, #25f4ee 100%);
-            color: white;
-            border: none;
-            border-radius: 10px;
-            font-size: 14px;
-            font-weight: 600;
-            cursor: pointer;
-            box-shadow: 0 4px 15px rgba(254, 44, 85, 0.3);
-            transition: all 0.3s;
         `;
-        button.onmouseover = () => {
-            button.style.transform = 'translateY(-3px)';
-            button.style.boxShadow = '0 6px 20px rgba(254, 44, 85, 0.4)';
-        };
-        button.onmouseout = () => {
-            button.style.transform = 'translateY(0)';
-            button.style.boxShadow = '0 4px 15px rgba(254, 44, 85, 0.3)';
-        };
-        button.onclick = async function() {
-            button.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processando...';
-            button.disabled = true;
-            const result = await extractVideoUrl();
-            if (result.success) {
-                // Criar popup com link
-                showDownloadPopup(result.downloadUrl, result.quality, result.size);
-            } else {
-                window.open(result.fallbackUrl, '_blank');
-            }
-            button.innerHTML = '<i class="fas fa-download"></i> Download Vídeo';
-            button.disabled = false;
-        };
-        return button;
-    }
-    // Mostrar popup de download
-    function showDownloadPopup(url, quality, size) {
-        const popup = document.createElement('div');
-        popup.style.cssText = `
-            position: fixed;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            background: #1a1a2e;
-            border: 2px solid #fe2c55;
-            border-radius: 15px;
-            padding: 30px;
-            z-index: 10000;
-            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
-            max-width: 500px;
-            width: 90%;
-        `;
-        popup.innerHTML = `
-            <h3 style="margin: 0 0 15px 0; color: #fe2c55;">✨ Link de Download Pronto!</h3>
-            <div style="margin: 15px 0;">
-                <p style="color: #25f4ee; margin: 5px 0;"><strong>Qualidade:</strong> ${quality}</p>
-                <p style="color: #25f4ee; margin: 5px 0;"><strong>Tamanho:</strong> ${size}</p>
-            </div>
-            <div style="background: #0a0a0f; padding: 10px; border-radius: 8px; margin: 15px 0; word-break: break-all;">
-                <code style="color: #ffffff; font-size: 12px;">${url}</code>
-            </div>
-            <div style="display: flex; gap: 10px; margin-top: 20px;">
-                <button onclick="window.open('${url}', '_blank')" style="flex: 1; padding: 10px; background: #fe2c55; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: 600;">
-                    <i class="fas fa-download"></i> Baixar
-                </button>
-                <button onclick="navigator.clipboard.writeText('${url}'); this.innerHTML='✓ Copiado!'; setTimeout(() => this.innerHTML='<i class="fas fa-copy"></i> Copiar', 2000)" style="flex: 1; padding: 10px; background: #25f4ee; color: #000; border: none; border-radius: 8px; cursor: pointer; font-weight: 600;">
-                    <i class="fas fa-copy"></i> Copiar Link
-                </button>
-                <button onclick="this.parentElement.parentElement.remove()" style="padding: 10px 20px; background: #444; color: white; border: none; border-radius: 8px; cursor: pointer;">
-                    Fechar
-                </button>
-            </div>
-        `;
-        document.body.appendChild(popup);
-    }
-    // Inicializar
-    setTimeout(() => {
-        const button = createDownloadButton();
-        document.body.appendChild(button);
-    }, 2000);
-})();</pre>
-                    </div>
-                </div>
-                <div class="card">
-                    <div class="card-header">
-                        <div class="card-icon">
-                            <i class="fas fa-star"></i>
-                        </div>
-                        <div class="card-title">Recursos do Script</div>
-                    </div>
-                    <div class="feature-list">
-                        <div class="feature-item">
-                            <div class="feature-icon">
-                                <i class="fas fa-bolt"></i>
-                            </div>
-                            <div>
-                                <strong>Execução Automática</strong>
-                                <p style="color: var(--text-secondary); margin-top: 5px;">O script detecta automaticamente quando você está em uma página de vídeo do Douyin</p>
-                            </div>
-                        </div>
-                        <div class="feature-item">
-                            <div class="feature-icon">
-                                <i class="fas fa-link"></i>
-                            </div>
-                            <div>
-                                <strong>Extração Inteligente</strong>
-                                <p style="color: var(--text-secondary); margin-top: 5px;">Utiliza a lógica exata do v3 para extrair a URL correta do vídeo</p>
-                            </div>
-                        </div>
-                        <div class="feature-item">
-                            <div class="feature-icon">
-                                <i class="fas fa-hd"></i>
-                            </div>
-                            <div>
-                                <strong>Melhor Qualidade</strong>
-                                <p style="color: var(--text-secondary); margin-top: 5px;">Sempre seleciona a versão de maior qualidade disponível</p>
-                            </div>
-                        </div>
-                        <div class="feature-item">
-                            <div class="feature-icon">
-                                <i class="fas fa-shield-alt"></i>
-                            </div>
-                            <div>
-                                <strong>Fallback Automático</strong>
-                                <p style="color: var(--text-secondary); margin-top: 5px;">Se falhar, redireciona para alternativa automaticamente</p>
-                            </div>
-                        </div>
-                        <div class="feature-item">
-                            <div class="feature-icon">
-                                <i class="fas fa-copy"></i>
-                            </div>
-                            <div>
-                                <strong>Copiar Link</strong>
-                                <p style="color: var(--text-secondary); margin-top: 5px;">Copia o link de download direto para a área de transferência</p>
-                            </div>
-                        </div>
-                        <div class="feature-item">
-                            <div class="feature-icon">
-                                <i class="fas fa-mobile-alt"></i>
-                            </div>
-                            <div>
-                                <strong>Interface Responsiva</strong>
-                                <p style="color: var(--text-secondary); margin-top: 5px;">Funciona perfeitamente em desktop e dispositivos móveis</p>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="highlight">
-                        <strong>⚡ Dica Pro:</strong> Depois de instalar, você verá um botão "Download Vídeo" flutuante no canto superior direito de qualquer página de vídeo do Douyin. Basta clicar e aguardar o processamento!
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div id="bookmarklet-tab" class="tab-content" style="display: none;">
-            <div class="card">
-                <div class="card-header">
-                    <div class="card-icon">
-                        <i class="fas fa-bookmark"></i>
-                    </div>
-                    <div class="card-title">Bookmarklet para Download Rápido</div>
-                </div>
-                <div class="instructions">
-                    <h3><i class="fas fa-info-circle"></i> Como Usar o Bookmarklet</h3>
-                    <ol>
-                        <li>Clique e arraste o botão abaixo para a sua barra de favoritos</li>
-                        <li>Ou clique com o direito e selecione "Adicionar aos favoritos"</li>
-                        <li>Acesse qualquer vídeo no Douyin</li>
-                        <li>Clique no favorito salvo na sua barra</li>
-                        <li>O script será executado e extrairá o link de download</li>
-                    </ol>
-                </div>
-                <div style="text-align: center; margin: 30px 0;">
-                    <a href="javascript:(function(){async function extractVideoUrl(){try{const targetUrl=window.location.href.split('?')[0];const urlParams=new URLSearchParams(window.location.search);let videoId=urlParams.get('modal_id');if(!videoId){const pathMatch=targetUrl.match(/\/video\/(\d+)/);if(pathMatch){videoId=pathMatch[1];}}const finalUrl=videoId?`https://www.douyin.com/video/${videoId}`:targetUrl;const hash=btoa(finalUrl)+(finalUrl.length+1000)+btoa('aio-dl');const response=await fetch('https://api.douyin.wtf/api',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({url:finalUrl,hash:hash})});const data=await response.json();if(data.success&&data.data.medias&&data.data.medias.length>0){const sortedMedias=data.data.medias.sort((a,b)=>(b.size||0)-(a.size||0));const bestMedia=sortedMedias[0];return{success:true,downloadUrl:bestMedia.url,quality:bestMedia.quality||'Unknown',size:bestMedia.formattedSize||'Unknown'};}else{throw new Error('No media found');}}catch(error){return{success:false,fallbackUrl:`https://snapdouyin.app/#url=${encodeURIComponent(window.location.href)}`};}}async function main(){const result=await extractVideoUrl();if(result.success){const popup=document.createElement('div');popup.style.cssText='position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#1a1a2e;border:2px solid #fe2c55;border-radius:15px;padding:30px;z-index:99999;box-shadow:0 10px 40px rgba(0,0,0,0.5);max-width:500px;width:90%;';popup.innerHTML=`<h3 style="margin:0 0 15px 0;color:#fe2c55;">✨ Link de Download!</h3><div style="margin:15px 0;"><p style="color:#25f4ee;margin:5px 0;"><strong>Qualidade:</strong> ${result.quality}</p><p style="color:#25f4ee;margin:5px 0;"><strong>Tamanho:</strong> ${result.size}</p></div><div style="background:#0a0a0f;padding:10px;border-radius:8px;margin:15px 0;word-break:break-all;"><code style="color:#ffffff;font-size:12px;">${result.downloadUrl}</code></div><div style="display:flex;gap:10px;margin-top:20px;"><button onclick="window.open('${result.downloadUrl}','_blank')" style="flex:1;padding:10px;background:#fe2c55;color:white;border:none;border-radius:8px;cursor:pointer;font-weight:600;">📥 Baixar</button><button onclick="navigator.clipboard.writeText('${result.downloadUrl}');this.innerHTML='✓ Copiado!';setTimeout(()=>this.innerHTML='📋 Copiar',2000)" style="flex:1;padding:10px;background:#25f4ee;color:#000;border:none;border-radius:8px;cursor:pointer;font-weight:600;">📋 Copiar</button><button onclick="this.parentElement.parentElement.remove()" style="padding:10px 20px;background:#444;color:white;border:none;border-radius:8px;cursor:pointer;">✖ Fechar</button></div>`;document.body.appendChild(popup);}else{window.open(result.fallbackUrl,'_blank');}}main();})();" class="demo-btn" style="text-decoration: none; display: inline-block;">
-                        <i class="fas fa-download"></i>
-                        Douyin Downloader
-                    </a>
-                    <p style="color: var(--text-secondary); margin-top: 15px;">
-                        <i class="fas fa-arrow-up"></i> Arraste este botão para sua barra de favoritos
-                    </p>
-                </div>
-                <div class="code-block">
-                    <div class="code-header">
-                        <span class="code-lang">JavaScript (Bookmarklet)</span>
-                        <button class="copy-btn" onclick="copyCode(this, 'bookmarklet-code')">
-                            <i class="fas fa-copy"></i>
-                            Copiar Código
-                        </button>
-                    </div>
-                    <pre id="bookmarklet-code">javascript:(function(){async function extractVideoUrl(){try{const targetUrl=window.location.href.split('?')[0];const urlParams=new URLSearchParams(window.location.search);let videoId=urlParams.get('modal_id');if(!videoId){const pathMatch=targetUrl.match(/\/video\/(\d+)/);if(pathMatch){videoId=pathMatch[1];}}const finalUrl=videoId?`https://www.douyin.com/video/${videoId}`:targetUrl;const hash=btoa(finalUrl)+(finalUrl.length+1000)+btoa('aio-dl');const response=await fetch('https://api.douyin.wtf/api',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({url:finalUrl,hash:hash})});const data=await response.json();if(data.success&&data.data.medias&&data.data.medias.length>0){const sortedMedias=data.data.medias.sort((a,b)=>(b.size||0)-(a.size||0));const bestMedia=sortedMedias[0];return{success:true,downloadUrl:bestMedia.url,quality:bestMedia.quality||'Unknown',size:bestMedia.formattedSize||'Unknown'};}else{throw new Error('No media found');}}catch(error){return{success:false,fallbackUrl:`https://snapdouyin.app/#url=${encodeURIComponent(window.location.href)}`};}}async function main(){const result=await extractVideoUrl();if(result.success){const popup=document.createElement('div');popup.style.cssText='position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#1a1a2e;border:2px solid #fe2c55;border-radius:15px;padding:30px;z-index:99999;box-shadow:0 10px 40px rgba(0,0,0,0.5);max-width:500px;width:90%;';popup.innerHTML=`<h3 style="margin:0 0 15px 0;color:#fe2c55;">✨ Link de Download!</h3><div style="margin:15px 0;"><p style="color:#25f4ee;margin:5px 0;"><strong>Qualidade:</strong> ${result.quality}</p><p style="color:#25f4ee;margin:5px 0;"><strong>Tamanho:</strong> ${result.size}</p></div><div style="background:#0a0a0f;padding:10px;border-radius:8px;margin:15px 0;word-break:break-all;"><code style="color:#ffffff;font-size:12px;">${result.downloadUrl}</code></div><div style="display:flex;gap:10px;margin-top:20px;"><button onclick="window.open('${result.downloadUrl}','_blank')" style="flex:1;padding:10px;background:#fe2c55;color:white;border:none;border-radius:8px;cursor:pointer;font-weight:600;">📥 Baixar</button><button onclick="navigator.clipboard.writeText('${result.downloadUrl}');this.innerHTML='✓ Copiado!';setTimeout(()=>this.innerHTML='📋 Copiar',2000)" style="flex:1;padding:10px;background:#25f4ee;color:#000;border:none;border-radius:8px;cursor:pointer;font-weight:600;">📋 Copiar</button><button onclick="this.parentElement.parentElement.remove()" style="padding:10px 20px;background:#444;color:white;border:none;border-radius:8px;cursor:pointer;">✖ Fechar</button></div>`;document.body.appendChild(popup);}else{window.open(result.fallbackUrl,'_blank');}}main();})();</pre>
-                </div>
-            </div>
         </div>
-        <div id="demo-tab" class="tab-content" style="display: none;">
-            <div class="demo-section">
-                <h2 class="demo-title">Demonstração do Script</h2>
-                <p style="color: var(--text-secondary); margin-bottom: 30px;">
-                    Teste a funcionalidade do script diretamente aqui. Simule a extração de um vídeo do Douyin.
-                </p>
-                <div class="demo-buttons">
-                    <button class="demo-btn" onclick="runDemo('success')">
-                        <i class="fas fa-check"></i>
-                        Simular Extração Sucesso
-                    </button>
-                    <button class="demo-btn" onclick="runDemo('fallback')">
-                        <i class="fas fa-exclamation-triangle"></i>
-                        Simular Fallback
-                    </button>
-                    <button class="demo-btn" onclick="runDemo('batch')">
-                        <i class="fas fa-layer-group"></i>
-                        Simular Lote
-                    </button>
-                </div>
-                <div id="demo-output" class="preview-window" style="display: none; margin-top: 30px;">
-                    <div style="color: var(--secondary); margin-bottom: 10px;">
-                        <i class="fas fa-terminal"></i> Saída da Simulação
-                    </div>
-                    <div id="demo-content"></div>
-                </div>
-            </div>
-            <div class="card">
-                <div class="card-header">
-                    <div class="card-icon">
-                        <i class="fas fa-cog"></i>
-                    </div>
-                    <div class="card-title">Configurações Avançadas</div>
-                </div>
-                <div style="display: grid; gap: 20px;">
-                    <div>
-                        <label style="display: block; margin-bottom: 10px; color: var(--text-secondary);">
-                            URL da API Personalizada
-                        </label>
-                        <input type="text" id="apiUrl" value="https://api.douyin.wtf/api" style="width: 100%; padding: 10px; background: var(--bg-dark); border: 1px solid var

 <!DOCTYPE html>
 <html lang="pt-BR">
 <head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Douyin Video Downloader - Automático</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+  <style>
+    :root {
+      --primary: #fe2c55;
+      --secondary: #25f4ee;
+      --bg-dark: #161823;
+      --bg-card: #1f1f2e;
+      --bg-hover: #2a2a3e;
+      --text-primary: #ffffff;
+      --text-secondary: #a0a0b0;
+      --border: #2a2a3e;
+      --success: #00ff88;
+      --warning: #ffaa00;
+      --error: #ff3366;
+      --gradient: linear-gradient(135deg, #fe2c55 0%, #25f4ee 100%);
+    }
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+      background: linear-gradient(135deg, #0f0f1e 0%, #1a1a2e 100%);
+      color: var(--text-primary);
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+    }
+    .container {
+      max-width: 1400px;
+      margin: 0 auto;
+      padding: 20px;
+      flex: 1;
+      width: 100%;
+    }
+    header {
+      background: rgba(31, 31, 46, 0.8);
+      backdrop-filter: blur(10px);
+      border-bottom: 1px solid var(--border);
+      padding: 20px 0;
+      position: sticky;
+      top: 0;
+      z-index: 100;
+      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+    }
+    .header-content {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      max-width: 1400px;
+      margin: 0 auto;
+      padding: 0 20px;
+    }
+    .logo {
+      display: flex;
+      align-items: center;
+      gap: 15px;
+    }
+    .logo-icon {
+      width: 50px;
+      height: 50px;
+      background: var(--gradient);
+      border-radius: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 24px;
+      animation: pulse 2s infinite;
+    }
+    @keyframes pulse {
+      0%, 100% { transform: scale(1); }
+      50% { transform: scale(1.05); }
+    }
+    h1 {
+      font-size: 1.8rem;
+      font-weight: 700;
+      background: var(--gradient);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+    .built-with {
+      color: var(--text-secondary);
+      text-decoration: none;
+      font-size: 0.9rem;
+      transition: color 0.3s;
+    }
+    .built-with:hover {
+      color: var(--secondary);
+    }
+    .main-content {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 30px;
+      margin-top: 30px;
+    }
+    .card {
+      background: rgba(31, 31, 46, 0.6);
+      backdrop-filter: blur(10px);
+      border: 1px solid var(--border);
+      border-radius: 20px;
+      padding: 30px;
+      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
+      transition: transform 0.3s, box-shadow 0.3s;
+    }
+    .card:hover {
+      transform: translateY(-5px);
+      box-shadow: 0 15px 50px rgba(254, 44, 85, 0.2);
+    }
+    .card-header {
+      display: flex;
+      align-items: center;
+      gap: 15px;
+      margin-bottom: 25px;
+    }
+    .card-icon {
+      width: 45px;
+      height: 45px;
+      background: var(--gradient);
+      border-radius: 10px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 20px;
+    }
+    .card-title {
+      font-size: 1.3rem;
+      font-weight: 600;
+    }
+    .input-section {
+      margin-bottom: 25px;
+    }
+    .input-label {
+      display: block;
+      margin-bottom: 10px;
+      color: var(--text-secondary);
+      font-weight: 500;
+    }
+    .links-textarea {
+      width: 100%;
+      min-height: 200px;
+      padding: 15px;
+      background: var(--bg-dark);
+      border: 2px solid var(--border);
+      border-radius: 12px;
+      color: var(--text-primary);
+      font-size: 14px;
+      resize: vertical;
+      transition: border-color 0.3s;
+    }
+    .links-textarea:focus {
+      outline: none;
+      border-color: var(--primary);
+    }
+    .url-chips {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-top: 10px;
+    }
+    .url-chip {
+      background: var(--bg-hover);
+      padding: 6px 12px;
+      border-radius: 20px;
+      font-size: 12px;
+      color: var(--text-secondary);
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      animation: fadeIn 0.3s;
+    }
+    @keyframes fadeIn {
+      from { opacity: 0; transform: scale(0.8); }
+      to { opacity: 1; transform: scale(1); }
+    }
+    .url-chip .remove {
+      cursor: pointer;
+      color: var(--error);
+      transition: transform 0.2s;
+    }
+    .url-chip .remove:hover {
+      transform: scale(1.2);
+    }
+    .action-buttons {
+      display: flex;
+      gap: 15px;
+      margin-top: 20px;
+    }
+    .btn {
+      flex: 1;
+      padding: 14px 24px;
+      border: none;
+      border-radius: 10px;
+      font-size: 1rem;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.3s;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 10px;
+    }
+    .btn-primary {
+      background: var(--gradient);
+      color: white;
+    }
+    .btn-primary:hover:not(:disabled) {
+      transform: translateY(-3px);
+      box-shadow: 0 5px 20px rgba(254, 44, 85, 0.4);
+    }
+    .btn-secondary {
+      background: var(--bg-hover);
+      color: var(--text-primary);
+    }
+    .btn-secondary:hover:not(:disabled) {
+      background: #3a3a4e;
+    }
+    .btn:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+    .progress-section {
+      margin-top: 30px;
+      display: none;
+    }
+    .progress-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 15px;
+    }
+    .progress-title {
+      font-size: 1.1rem;
+      color: var(--text-primary);
+    }
+    .progress-stats {
+      display: flex;
+      gap: 20px;
+      font-size: 0.9rem;
+    }
+    .stat {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+    }
+    .stat.success { color: var(--success); }
+    .stat.error { color: var(--error); }
+    .stat.pending { color: var(--warning); }
+    .progress-bar {
+      width: 100%;
+      height: 8px;
+      background: var(--bg-dark);
+      border-radius: 10px;
+      overflow: hidden;
+      margin-bottom: 20px;
+    }
+    .progress-fill {
+      height: 100%;
+      background: var(--gradient);
+      border-radius: 10px;
+      transition: width 0.3s ease;
+      width: 0%;
+    }
+    .downloads-list {
+      max-height: 400px;
+      overflow-y: auto;
+      margin-top: 20px;
+    }
+    .download-item {
+      background: var(--bg-dark);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      padding: 15px;
+      margin-bottom: 15px;
+      display: flex;
+      align-items: center;
+      gap: 15px;
+      transition: all 0.3s;
+    }
+    .download-item:hover {
+      border-color: var(--primary);
+      transform: translateX(5px);
+    }
+    .download-status {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+    .status-pending {
+      background: rgba(255, 170, 0, 0.2);
+      color: var(--warning);
+    }
+    .status-processing {
+      background: rgba(37, 244, 238, 0.2);
+      color: var(--secondary);
+      animation: spin 1s linear infinite;
+    }
+    @keyframes spin {
+      from { transform: rotate(0deg); }
+      to { transform: rotate(360deg); }
+    }
+    .status-success {
+      background: rgba(0, 255, 136, 0.2);
+      color: var(--success);
+    }
+    .status-error {
+      background: rgba(255, 51, 102, 0.2);
+      color: var(--error);
+    }
+    .download-info {
+      flex: 1;
+    }
+    .download-url {
+      font-size: 0.9rem;
+      color: var(--text-secondary);
+      margin-bottom: 5px;
+      word-break: break-all;
+    }
+    .download-details {
+      display: flex;
+      gap: 15px;
+      font-size: 0.85rem;
+      color: var(--text-secondary);
+    }
+    .download-actions {
+      display: flex;
+      gap: 10px;
+    }
+    .action-btn {
+      width: 35px;
+      height: 35px;
+      border-radius: 8px;
+      border: none;
+      background: var(--bg-hover);
+      color: var(--text-secondary);
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: all 0.3s;
+    }
+    .action-btn:hover {
+      background: var(--primary);
+      color: white;
+      transform: scale(1.1);
+    }
+    .settings-section {
+      margin-top: 20px;
+    }
+    .setting-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 15px;
+      background: var(--bg-dark);
+      border-radius: 10px;
+      margin-bottom: 10px;
+    }
+    .setting-label {
+      color: var(--text-secondary);
+      font-size: 0.9rem;
+    }
+    .toggle-switch {
+      position: relative;
+      width: 50px;
+      height: 26px;
+      background: var(--bg-hover);
+      border-radius: 13px;
+      cursor: pointer;
+      transition: background 0.3s;
+    }
+    .toggle-switch.active {
+      background: var(--gradient);
+    }
+    .toggle-switch::after {
+      content: '';
+      position: absolute;
+      width: 22px;
+      height: 22px;
+      background: white;
+      border-radius: 50%;
+      top: 2px;
+      left: 2px;
+      transition: transform 0.3s;
+    }
+    .toggle-switch.active::after {
+      transform: translateX(24px);
+    }
+    .notification {
+      position: fixed;
+      bottom: 20px;
+      right: 20px;
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      padding: 15px 20px;
+      display: flex;
+      align-items: center;
+      gap: 15px;
+      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
+      transform: translateX(400px);
+      transition: transform 0.3s;
+      z-index: 1000;
+    }
+    .notification.show {
+      transform: translateX(0);
+    }
+    .notification-icon {
+      width: 30px;
+      height: 30px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .notification.success .notification-icon {
+      background: rgba(0, 255, 136, 0.2);
+      color: var(--success);
+    }
+    .notification.error .notification-icon {
+      background: rgba(255, 51, 102, 0.2);
+      color: var(--error);
+    }
+    @media (max-width: 968px) {
+      .main-content {
+        grid-template-columns: 1fr;
+      }
+    }
+    .empty-state {
+      text-align: center;
+      padding: 40px;
+      color: var(--text-secondary);
+    }
+    .empty-state i {
+      font-size: 48px;
+      margin-bottom: 15px;
+      opacity: 0.5;
+    }
+  </style>
 </head>
 <body>
+  <header>
+    <div class="header-content">
+      <div class="logo">
+        <div class="logo-icon">
+          <i class="fas fa-download"></i>
+        </div>
+        <h1>Douyin Video Downloader</h1>
+      </div>
+      <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with">
+        Built with anycoder
+      </a>
+    </div>
+  </header>
+  <div class="container">
+    <div class="main-content">
+      <div class="card">
+        <div class="card-header">
+          <div class="card-icon">
+            <i class="fas fa-link"></i>
+          </div>
+          <div class="card-title">Adicionar Links do Douyin</div>
+        </div>
+        <div class="input-section">
+          <label class="input-label">Cole os links dos vídeos (um por linha):</label>
+          <textarea
+            id="linksInput"
+            class="links-textarea"
+            placeholder="https://www.douyin.com/video/7123456789012345678&#10;https://v.douyin.com/ABC123&#10;https://www.douyin.com/video/7123456789012345679"
+          ></textarea>
+          <div id="urlChips" class="url-chips"></div>
+        </div>
+        <div class="action-buttons">
+          <button class="btn btn-primary" onclick="startDownloads()" id="startBtn">
+            <i class="fas fa-play"></i>
+            Iniciar Downloads
+          </button>
+          <button class="btn btn-secondary" onclick="clearLinks()">
+            <i class="fas fa-trash"></i>
+            Limpar
+          </button>
+        </div>
+        <div class="progress-section" id="progressSection">
+          <div class="progress-header">
+            <div class="progress-title">Progresso dos Downloads</div>
+            <div class="progress-stats">
+              <div class="stat success">
+                <i class="fas fa-check-circle"></i>
+                <span id="successCount">0</span>
+              </div>
+              <div class="stat error">
+                <i class="fas fa-times-circle"></i>
+                <span id="errorCount">0</span>
+              </div>
+              <div class="stat pending">
+                <i class="fas fa-clock"></i>
+                <span id="pendingCount">0</span>
+              </div>
             </div>
+          </div>
+          <div class="progress-bar">
+            <div class="progress-fill" id="progressFill"></div>
+          </div>
+          <div class="downloads-list" id="downloadsList"></div>
         </div>
+      </div>
+      <div class="card">
+        <div class="card-header">
+          <div class="card-icon">
+            <i class="fas fa-cog"></i>
+          </div>
+          <div class="card-title">Configurações</div>
         </div>
+        <div class="settings-section">
+          <div class="setting-item">
+            <span class="setting-label">Baixar automaticamente após extração</span>
+            <div class="toggle-switch active" onclick="toggleSetting(this, 'autoDownload')"></div>
+          </div>
+          <div class="setting-item">
+            <span class="setting-label">Selecionar máxima qualidade</span>
+            <div class="toggle-switch active" onclick="toggleSetting(this, 'maxQuality')"></div>
+          </div>
+          <div class="setting-item">
+            <span class="setting-label">Notificações de conclusão</span>
+            <div class="toggle-switch active" onclick="toggleSetting(this, 'notifications')"></div>
+          </div>
+          <div class="setting-item">
+            <span class="setting-label">Processamento simultâneo</span>
+            <div class="toggle-switch" onclick="toggleSetting(this, 'parallel')"></div>
+          </div>
+        </div>
+        <div style="margin-top: 30px; padding: 20px; background: rgba(254, 44, 85, 0.1); border-radius: 12px;">
+          <h3 style="color: var(--primary); margin-bottom: 10px;">
+            <i class="fas fa-info-circle"></i> Como Funciona
+          </h3>
+          <ol style="color: var(--text-secondary); margin-left: 20px; line-height: 1.8;">
+            <li>Cole os links dos vídeos do Douyin na área de texto</li>
+            <li>Clique em "Iniciar Downloads" para começar o processamento</li>
+            <li>O sistema extrairá automaticamente os links de download na máxima qualidade</li>
+            <li>Os vídeos serão baixados automaticamente para sua pasta de downloads</li>
+            <li>Acompanhe o progresso em tempo real na lista abaixo</li>
+          </ol>
+        </div>
+        <div style="margin-top: 20px;">
+          <h3 style="color: var(--text-primary); margin-bottom: 15px;">
+            <i class="fas fa-chart-line"></i> Estatísticas
+          </h3>
+          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px;">
+            <div style="background: var(--bg-dark); padding: 15px; border-radius: 10px;">
+              <div style="color: var(--text-secondary); font-size: 0.85rem;">Total Processado</div>
+              <div style="font-size: 1.5rem; font-weight: bold; color: var(--primary);" id="totalProcessed">0</div>
+            </div>
+            <div style="background: var(--bg-dark); padding: 15px; border-radius: 10px;">
+              <div style="color: var(--text-secondary); font-size: 0.85rem;">Taxa de Sucesso</div>
+              <div style="font-size: 1.5rem; font-weight: bold; color: var(--success);" id="successRate">0%</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="notification" id="notification">
+    <div class="notification-icon">
+      <i class="fas fa-check"></i>
+    </div>
+    <div class="notification-content">
+      <div id="notificationText" style="font-weight: 600;"></div>
+    </div>
+  </div>
+  <script>
+    let settings = {
+      autoDownload: true,
+      maxQuality: true,
+      notifications: true,
+      parallel: false
+    };
+    let downloadQueue = [];
+    let processedCount = 0;
+    let successCount = 0;
+    let errorCount = 0;
+    function toggleSetting(element, setting) {
+      element.classList.toggle('active');
+      settings[setting] = element.classList.contains('active');
     }
+    function parseLinks() {
+      const input = document.getElementById('linksInput').value;
+      const urls = input.split('\n')
+        .map(url => url.trim())
+        .filter(url => url && (url.includes('douyin.com') || url.includes('v.douyin.com')));
+      const uniqueUrls = [...new Set(urls)];
+      updateUrlChips(uniqueUrls);
+      return uniqueUrls;
+    }
+    function updateUrlChips(urls) {
+      const chipsContainer = document.getElementById('urlChips');
+      chipsContainer.innerHTML = '';
+      urls.forEach((url, index) => {
+        const chip = document.createElement('div');
+        chip.className = 'url-chip';
+        chip.innerHTML = `
+          <i class="fas fa-link"></i>
+          <span>${url.substring(0, 40)}${url.length > 40 ? '...' : ''}</span>
+          <i class="fas fa-times remove" onclick="removeUrl(${index})"></i>
         `;
+        chipsContainer.appendChild(chip);
+      });
+    }
+    function removeUrl(index) {
+      const input = document.getElementById('linksInput');
+      const urls = input.value.split('\n');
+      urls.splice(index, 1);
+      input.value = urls.join('\n');
+      parseLinks();
+    }
+    function clearLinks() {
+      document.getElementById('linksInput').value = '';
+      document.getElementById('urlChips').innerHTML = '';
+      document.getElementById('progressSection').style.display = 'none';
+      resetStats();
+    }
+    function resetStats() {
+      processedCount = 0;
+      successCount = 0;
+      errorCount = 0;
+      downloadQueue = [];
+      updateProgressDisplay();
+    }
+    async function extractVideoUrl(url) {
+      try {
+        // Extrair URL alvo
+        const targetUrl = url.split('?')[0];
+        // Identificar ID do vídeo
+        const urlParams = new URLSearchParams(url.split('?')[1] || '');
+        let videoId = urlParams.get('modal_id');
+        if (!videoId) {
+          const pathMatch = targetUrl.match(/\/video\/(\d+)/);
+          if (pathMatch) {
+            videoId = pathMatch[1];
+          }
+        }
+        const finalUrl = videoId ? `https://www.douyin.com/video/${videoId}` : targetUrl;
+        // Gerar hash
+        const hash = btoa(finalUrl) + (finalUrl.length + 1000) + btoa('aio-dl');
+        // Fazer chamada API
+        const response = await fetch('https://api.douyin.wtf/api', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            url: finalUrl,
+            hash: hash
+          })
+        });
+        const data = await response.json();
+        if (data.success && data.data.medias && data.data.medias.length > 0) {
+          // Ordenar e selecionar melhor mídia
+          const sortedMedias = data.data.medias.sort((a, b) => (b.size || 0) - (a.size || 0));
+          const bestMedia = sortedMedias[0];
+          return {
+            success: true,
+            downloadUrl: bestMedia.url,
+            quality: bestMedia.quality || 'HD',
+            size: bestMedia.formattedSize || 'Unknown',
+            title: data.data.title || 'Video'
+          };
+        } else {
+          throw new Error('No media found');
+        }
+      } catch (error) {
+        return {
+          success: false,
+          error: error.message,
+          fallbackUrl: `https://snapdouyin.app/#url=${encodeURIComponent(url)}`
+        };
+      }
+    }
+    function createDownloadItem(url, index) {
+      const item = document.createElement('div');
+      item.className = 'download-item';
+      item.id = `download-${index}`;
+      item.innerHTML = `
+        <div class="download-status status-pending">
+          <i class="fas fa-clock"></i>
+        </div>
+        <div class="download-info">
+          <div class="download-url">${url}</div>
+          <div class="download-details">
+            <span id="quality-${index}">Aguardando...</span>
+            <span id="size-${index}">--</span>
+          </div>
+        </div>
+        <div class="download-actions">
+          <button class="action-btn" onclick="copyLink('${index}')" title="Copiar Link">
+            <i class="fas fa-copy"></i>
+          </button>
+          <button class="action-btn" onclick="downloadVideo('${index}')" title="Baixar">
+            <i class="fas fa-download"></i>
+          </button>
         </div>
+      `;
+      return item;
+    }
+    function updateDownloadStatus(index, status, data = {}) {
+      const item = document.getElementById(`download-${index}`);
+      const statusDiv = item.querySelector('.download-status');
+      const qualitySpan = document.getElementById(`quality-${index}`);
+      const sizeSpan = document.getElementById(`size-${index}`);
+      statusDiv.className = `download-status status-${status}`;
+      switch(status) {
+        case 'processing':
+          statusDiv.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
+          break;
+        case 'success':
+          statusDiv.innerHTML = '<i class="fas fa-check"></i>';
+          qualitySpan.textContent = data.quality || 'HD';
+          sizeSpan.textContent = data.size || '--';
+          if (settings.autoDownload) {
+            downloadVideo(index, data.downloadUrl);
+          }
+          break;
+        case 'error':
+          statusDiv.innerHTML = '<i class="fas fa-times"></i>';
+          qualitySpan.textContent = 'Erro';
+          sizeSpan.textContent = data.error || 'Falha';
+          break;
+      }
+    }
+    async function processDownload(url, index) {
+      updateDownloadStatus(index, 'processing');
+      const result = await extractVideoUrl(url);
+      if (result.success) {
+        downloadQueue[index] = result;
+        updateDownloadStatus(index, 'success', result);
+        successCount++;
+        if (settings.notifications) {
+          showNotification('Download extraído com sucesso!', 'success');
+        }
+      } else {
+        updateDownloadStatus(index, 'error', result);
+        errorCount++;
+        if (settings.notifications) {
+          showNotification('Falha ao extrair vídeo', 'error');
+        }
+      }
+      processedCount++;
+      updateProgressDisplay();
+    }
+    async function startDownloads() {
+      const urls = parseLinks();
+      if (urls.length === 0) {
+        showNotification('Por favor, adicione pelo menos um link', 'error');
+        return;
+      }
+      // Resetar contadores
+      processedCount = 0;
+      successCount = 0;
+      errorCount = 0;
+      downloadQueue = new Array(urls.length);
+      // Mostrar seção de progresso
+      document.getElementById('progressSection').style.display = 'block';
+      document.getElementById('downloadsList').innerHTML = '';
+      // Criar itens de download
+      urls.forEach((url, index) => {
+        const item = createDownloadItem(url, index);
+        document.getElementById('downloadsList').appendChild(item);
+      });
+      // Desabilitar botão
+      document.getElementById('startBtn').disabled = true;
+      // Processar downloads
+      if (settings.parallel) {
+        // Processar todos simultaneamente
+        await Promise.all(urls.map((url, index) => processDownload(url, index)));
+      } else {
+        // Processar sequencialmente
+        for (let i = 0; i < urls.length; i++) {
+          await processDownload(urls[i], i);
+        }
+      }
+      // Reabilitar botão
+      document.getElementById('startBtn').disabled = false;
+      // Notificação final
+      if (settings.notifications) {
+        showNotification(`Processamento concluído! ${successCount} de ${urls.length} vídeos extraídos.`, 'success');
+      }
+    }
+    function updateProgressDisplay() {
+      const total = downloadQueue.length;
+      const progress = total > 0 ? (processedCount / total) * 100 : 0;
+      document.getElementById('progressFill').style.width = `${progress}%`;
+      document.getElementById('successCount').textContent = successCount;
+      document.getElementById('errorCount').textContent = errorCount;
+      document.getElementById('pendingCount').textContent = total - processedCount;
+      document.getElementById('totalProcessed').textContent = processedCount;
+      const successRate = total > 0 ? Math.round((successCount / total) * 100) : 0;
+      document.getElementById('successRate').textContent = `${successRate}%`;
+    }
+    function copyLink(index) {
+      const data = downloadQueue[index];
+      if (data && data.downloadUrl) {
+        navigator.clipboard.writeText(data.downloadUrl);
+        showNotification('Link copiado para área de transferência!', 'success');
+      }
+    }
+    function downloadVideo(index, directUrl = null) {
+      const data = downloadQueue[index];
+      const url = directUrl || (data ? data.downloadUrl : null);
+      if (url) {
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `douyin_video_${index}.mp4`;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        if (!directUrl && settings.notifications) {
+          showNotification('Download iniciado!', 'success');
+        }
+      }
+    }
+    function showNotification(message, type = 'success') {
+      const notification = document.getElementById('notification');
+      const icon = notification.querySelector('.notification-icon i');
+      const text = document.getElementById('notificationText');
+      notification.className = `notification ${type}`;
+      icon.className = type === 'success' ? 'fas fa-check' : 'fas fa-exclamation';
+      text.textContent = message;
+      notification.classList.add('show');
+      setTimeout(() => {
+        notification.classList.remove('show');
+      }, 3000);
+    }
+    // Auto-parse links on input
+    document.getElementById('linksInput').addEventListener('input', parseLinks);
+  </script>
+</body>
+</html>