Upload 8 files

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+static/img/paso1.png filter=lfs diff=lfs merge=lfs -text

app.py

@@ -0,0 +1,99 @@
+import os
+import zipfile
+import json
+import tempfile
+import shutil
+from datetime import datetime
+from flask import Flask, render_template, request
+from nucleo import cazar_datos_meta
+
+# 1. Nombramos a nuestra app como flask_app
+flask_app = Flask(__name__)
+
+def buscar_archivos_json(directorio):
+    ruta_seguidores = None
+    ruta_siguiendo = None
+    for raiz, _, archivos in os.walk(directorio):
+        for archivo in archivos:
+            if archivo.startswith('followers') and archivo.endswith('.json'):
+                ruta_seguidores = os.path.join(raiz, archivo)
+            elif archivo.startswith('following') and archivo.endswith('.json'):
+                ruta_siguiendo = os.path.join(raiz, archivo)
+    return ruta_seguidores, ruta_siguiendo
+
+@flask_app.route('/', methods=['GET', 'POST'])
+def index():
+    if request.method == 'POST':
+        if 'archivo_zip' not in request.files:
+            return "No se subió ningún archivo", 400
+        
+        archivo = request.files['archivo_zip']
+        if archivo.filename == '':
+            return "El archivo no tiene nombre", 400
+            
+        if archivo and archivo.filename.endswith('.zip'):
+            temp_dir = tempfile.mkdtemp()
+            zip_path = os.path.join(temp_dir, 'datos.zip')
+            
+            try:
+                archivo.save(zip_path)
+                with zipfile.ZipFile(zip_path, 'r') as zip_ref:
+                    zip_ref.extractall(temp_dir)
+                    
+                ruta_seguidores, ruta_siguiendo = buscar_archivos_json(temp_dir)
+                
+                if not ruta_seguidores or not ruta_siguiendo:
+                    shutil.rmtree(temp_dir)
+                    return "❌ Error: El ZIP no contiene la información de Seguidores y Seguidos.", 400
+                    
+                with open(ruta_seguidores, 'r', encoding='utf-8') as f:
+                    data_seguidores = json.load(f)
+                with open(ruta_siguiendo, 'r', encoding='utf-8') as f:
+                    data_siguiendo = json.load(f)
+                    
+                seguidores_info = cazar_datos_meta(data_seguidores)
+                siguiendo_info = cazar_datos_meta(data_siguiendo)
+                
+                nombres_seguidores = set(seguidores_info.keys())
+                
+                lista_final = []
+                for usuario, ts in siguiendo_info.items():
+                    if usuario not in nombres_seguidores:
+                        fecha = datetime.fromtimestamp(ts).strftime('%d/%m/%Y') if ts else "Desconocida"
+                        lista_final.append({'usuario': usuario, 'fecha': fecha, 'ts': ts})
+                        
+                lista_final.sort(key=lambda x: x['ts'], reverse=True)
+                
+                resultados = {
+                    'total_siguiendo': len(siguiendo_info),
+                    'total_seguidores': len(nombres_seguidores),
+                    'mutuos': len(nombres_seguidores.intersection(siguiendo_info.keys())),
+                    'traidores': lista_final
+                }
+                
+                shutil.rmtree(temp_dir)
+                return render_template('index.html', resultados=resultados)
+                
+            except Exception as e:
+                if os.path.exists(temp_dir):
+                    shutil.rmtree(temp_dir)
+                return f"Ocurrió un error técnico: {str(e)}", 500
+
+    return render_template('index.html', resultados=None)
+
+# ==========================================
+# EL CABALLO DE TROYA PARA HUGGING FACE
+# ==========================================
+from fastapi import FastAPI
+from fastapi.middleware.wsgi import WSGIMiddleware
+import uvicorn
+
+# Creamos una app de FastAPI (El motor que Hugging Face exige)
+app = FastAPI()
+
+# Camuflamos nuestra app de Flask adentro de FastAPI
+app.mount("/", WSGIMiddleware(flask_app))
+
+if __name__ == '__main__':
+    # Lanzamos el servidor en el puerto 7860 para pasar la seguridad
+    uvicorn.run(app, host='0.0.0.0', port=7860)

nucleo.py

@@ -0,0 +1,24 @@
+import json
+
+def cazar_datos_meta(datos, extraidos=None):
+    if extraidos is None:
+        extraidos = {}
+
+    if isinstance(datos, dict):
+        if 'string_list_data' in datos and isinstance(datos['string_list_data'], list) and len(datos['string_list_data']) > 0:
+            item = datos['string_list_data'][0]
+            ts = item.get('timestamp', 0)
+            
+            if 'value' in item and item['value']:
+                extraidos[item['value']] = ts
+            elif 'title' in datos and datos['title']:
+                extraidos[datos['title']] = ts
+
+        for valor in datos.values():
+            cazar_datos_meta(valor, extraidos)
+
+    elif isinstance(datos, list):
+        for item in datos:
+            cazar_datos_meta(item, extraidos)
+
+    return extraidos

requirements.txt

@@ -0,0 +1,4 @@
+Flask
+Werkzeug
+fastapi
+uvicorn

templates/index.html

@@ -0,0 +1,437 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>InstaScanner | Descubre quién no te sigue</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        /* ===== ANIMACIÓN DE INTRO ESTILO NETFLIX ===== */
+        @keyframes fadeInScale {
+            0% { opacity: 0; transform: scale(0.8); }
+            20% { opacity: 0.3; }
+            100% { opacity: 1; transform: scale(1); }
+        }
+        
+        @keyframes textGlow {
+            0%, 100% { text-shadow: 0 0 20px rgba(168, 85, 247, 0.5), 0 0 40px rgba(236, 72, 153, 0.3); }
+            50% { text-shadow: 0 0 40px rgba(168, 85, 247, 0.8), 0 0 80px rgba(236, 72, 153, 0.6); }
+        }
+        
+        @keyframes slideUp {
+            from { opacity: 0; transform: translateY(30px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        
+        @keyframes fadeOut {
+            from { opacity: 1; }
+            to { opacity: 0; visibility: hidden; }
+        }
+        
+        @keyframes pulse {
+            0%, 100% { transform: scale(1); }
+            50% { transform: scale(1.1); }
+        }
+        
+        @keyframes shimmer {
+            0% { background-position: -200% center; }
+            100% { background-position: 200% center; }
+        }
+        
+        .intro-animation {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: radial-gradient(circle at center, #1a1a2e 0%, #0a0a0f 100%);
+            z-index: 9999;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            animation: fadeOut 1s ease-in-out 4s forwards;
+        }
+        
+        .intro-content {
+            text-align: center;
+            animation: fadeInScale 2s ease-out;
+        }
+        
+        .intro-title {
+            font-size: clamp(2.5rem, 8vw, 5rem);
+            font-weight: 900;
+            background: linear-gradient(135deg, #c084fc 0%, #ec4899 25%, #f472b6 50%, #c084fc 75%, #ec4899 100%);
+            background-size: 200% auto;
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+            animation: textGlow 2s ease-in-out infinite, shimmer 3s linear infinite;
+            letter-spacing: -2px;
+        }
+        
+        .intro-subtitle {
+            font-size: clamp(1rem, 3vw, 1.5rem);
+            color: #e0e0e0;
+            margin-top: 1rem;
+            opacity: 0;
+            animation: slideUp 1s ease-out 1s forwards;
+            letter-spacing: 2px;
+        }
+        
+        .intro-creator {
+            font-size: clamp(0.8rem, 2vw, 1rem);
+            color: #888;
+            margin-top: 2rem;
+            opacity: 0;
+            animation: slideUp 1s ease-out 2s forwards;
+            font-style: italic;
+        }
+        
+        .intro-logo {
+            width: 80px;
+            height: 80px;
+            margin-bottom: 2rem;
+            background: linear-gradient(45deg, #c084fc, #ec4899);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 2.5rem;
+            animation: pulse 2s ease-in-out infinite;
+            box-shadow: 0 0 30px rgba(236, 72, 153, 0.6);
+        }
+        
+        /* ===== REGLAS PARA IMPRESIÓN PDF ===== */
+        @media print {
+            body * { visibility: hidden; }
+            #seccionResultados, #seccionResultados * { visibility: visible; }
+            #seccionResultados { position: absolute; left: 0; top: 0; width: 100%; box-shadow: none; border: none; background: white; color: black; }
+            .no-print { display: none !important; }
+            .intro-animation { display: none !important; }
+            td, th, p, h2 { color: black !important; }
+            a { color: #2563eb !important; text-decoration: none; }
+        }
+        
+        /* ===== ESTILOS ADICIONALES ===== */
+        .watermark {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            z-index: 50;
+            opacity: 0.3;
+            pointer-events: none;
+            transition: opacity 0.3s ease;
+        }
+        
+        .watermark:hover {
+            opacity: 0.6;
+        }
+        
+        .instagram-icon {
+            position: fixed;
+            bottom: 20px;
+            left: 20px;
+            z-index: 50;
+            width: 50px;
+            height: 50px;
+            background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+            transition: all 0.3s ease;
+            cursor: pointer;
+        }
+        
+        .instagram-icon:hover {
+            transform: scale(1.1);
+            box-shadow: 0 6px 20px rgba(220, 39, 67, 0.5);
+        }
+        
+        .fade-in-up {
+            animation: slideUp 0.5s ease-out;
+        }
+        
+        .bg-gray-750 {
+            background-color: #1f2937;
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-gray-100 font-sans min-h-screen">
+
+    <!-- ===== INTRO ANIMATION ===== -->
+    <div class="intro-animation" id="introAnimation">
+        <div class="intro-content">
+            <div class="intro-logo">
+                📸
+            </div>
+            <h1 class="intro-title">InstaScanner</h1>
+            <p class="intro-subtitle">Descubre quién no te sigue</p>
+            <p class="intro-creator">✨ Creado por Jonathan Loza ✨</p>
+        </div>
+    </div>
+
+    <!-- ===== MARCA DE AGUA ===== -->
+    <div class="watermark no-print">
+        <p class="text-xs text-gray-500">InstaScanner © Jonathan Loza</p>
+    </div>
+
+    <!-- ===== ICONO DE INSTAGRAM ===== -->
+    <a href="https://www.instagram.com/jonathan_loza05?igsh=MXViOTBhdm9saTVncA==" 
+       target="_blank" 
+       class="instagram-icon no-print" 
+       title="Sígueme en Instagram">
+        <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
+            <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
+        </svg>
+    </a>
+
+    <main class="max-w-4xl mx-auto p-4 md:p-6 mt-6 md:mt-10">
+        <!-- Encabezado -->
+        <div class="text-center mb-8 md:mb-10 no-print fade-in-up">
+            <h1 class="text-4xl md:text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-600 mb-4">
+                InstaScanner
+            </h1>
+            <p class="text-gray-400 text-base md:text-lg">Descubre quién no te devuelve el follow. 100% Privado y Seguro.</p>
+        </div>
+
+        <!-- Tutorial de Pasos -->
+        <div class="mb-12 no-print fade-in-up" style="animation-delay: 0.2s;">
+            <h2 class="text-2xl font-bold mb-6 text-center text-white">¿Cómo descargo mis datos correctamente?</h2>
+            
+            <!-- Usamos un grid de 4 columnas para pantallas grandes -->
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+                
+                <!-- Paso 1 -->
+                <div class="bg-gray-800 rounded-xl p-5 border border-gray-700 shadow-lg relative transform transition hover:-translate-y-1 hover:shadow-2xl flex flex-col">
+                    <div class="absolute -top-4 -left-4 bg-pink-500 w-10 h-10 rounded-full flex items-center justify-center font-bold text-lg shadow-lg">1</div>
+                    <h3 class="text-lg font-bold mb-2 text-pink-400 mt-2">Crear Exportación</h3>
+                    <p class="text-sm text-gray-400 mb-4 flex-grow">Ve a <strong>Ajustes > Centro de cuentas > Tu información</strong>. Toca "Descargar tu información" y selecciona <strong>"Crear exportación"</strong>.</p>
+                    <div class="bg-gray-900 rounded-lg h-32 overflow-hidden border border-gray-600 flex items-center justify-center p-2 mt-auto">
+                        <img src="{{ url_for('static', filename='img/paso1.png') }}" alt="Paso 1" class="w-full h-full object-contain opacity-90 hover:opacity-100 transition">
+                    </div>
+                </div>
+
+                <!-- Paso 2 -->
+                <div class="bg-gray-800 rounded-xl p-5 border border-gray-700 shadow-lg relative transform transition hover:-translate-y-1 hover:shadow-2xl flex flex-col">
+                    <div class="absolute -top-4 -left-4 bg-purple-500 w-10 h-10 rounded-full flex items-center justify-center font-bold text-lg shadow-lg">2</div>
+                    <h3 class="text-lg font-bold mb-2 text-purple-400 mt-2">Elegir Destino</h3>
+                    <p class="text-sm text-gray-400 mb-4 flex-grow">Selecciona el perfil de tu cuenta de Instagram y elige la opción <strong>"Exportar al dispositivo"</strong> para descargar el archivo en tu equipo.</p>
+                    <div class="bg-gray-900 rounded-lg h-32 overflow-hidden border border-gray-600 flex items-center justify-center p-2 mt-auto">
+                        <img src="{{ url_for('static', filename='img/paso2.png') }}" alt="Paso 2" class="w-full h-full object-contain opacity-90 hover:opacity-100 transition">
+                    </div>
+                </div>
+
+                <!-- Paso 3 -->
+                <div class="bg-gray-800 rounded-xl p-5 border border-gray-700 shadow-lg relative transform transition hover:-translate-y-1 hover:shadow-2xl flex flex-col">
+                    <div class="absolute -top-4 -left-4 bg-blue-500 w-10 h-10 rounded-full flex items-center justify-center font-bold text-lg shadow-lg">3</div>
+                    <h3 class="text-lg font-bold mb-2 text-blue-400 mt-2">Filtrar Datos</h3>
+                    <p class="text-sm text-gray-400 mb-4 flex-grow">Toca "Personalizar información". En la sección <em>Conexiones</em>, deja activada <strong>SOLO</strong> la casilla de <strong>"Seguidores y seguidos"</strong>.</p>
+                    <div class="bg-gray-900 rounded-lg h-32 overflow-hidden border border-gray-600 flex items-center justify-center p-2 mt-auto">
+                        <img src="{{ url_for('static', filename='img/paso3.png') }}" alt="Paso 3" class="w-full h-full object-contain opacity-90 hover:opacity-100 transition">
+                    </div>
+                </div>
+
+                <!-- Paso 4 -->
+                <div class="bg-gray-800 rounded-xl p-5 border border-gray-700 shadow-lg relative transform transition hover:-translate-y-1 hover:shadow-2xl flex flex-col">
+                    <div class="absolute -top-4 -left-4 bg-green-500 w-10 h-10 rounded-full flex items-center justify-center font-bold text-lg shadow-lg">4</div>
+                    <h3 class="text-lg font-bold mb-2 text-green-400 mt-2">Formato JSON</h3>
+                    <p class="text-sm text-gray-400 mb-4 flex-grow">Intervalo: <strong>"Desde el principio"</strong>. Formato: <strong>"JSON"</strong> (¡Vital!). Finalmente, haz clic en <strong>"Iniciar exportación"</strong>.</p>
+                    <div class="bg-gray-900 rounded-lg h-32 overflow-hidden border border-gray-600 flex items-center justify-center p-2 mt-auto">
+                        <img src="{{ url_for('static', filename='img/paso4.png') }}" alt="Paso 4" class="w-full h-full object-contain opacity-90 hover:opacity-100 transition">
+                    </div>
+                </div>
+
+            </div>
+        </div>
+
+        <!-- Tarjeta de subida -->
+        <div class="bg-gray-800 rounded-2xl p-6 md:p-8 shadow-2xl border border-gray-700 mb-10 no-print fade-in-up">
+            <div class="mb-6 bg-blue-900/30 border-l-4 border-blue-500 p-4 rounded text-blue-200 text-xs md:text-sm">
+                <strong>🔒 Privacidad garantizada:</strong> Tus datos se procesan temporalmente y se destruyen automáticamente. No guardamos nada.
+            </div>
+
+            <form action="/" method="POST" enctype="multipart/form-data" class="flex flex-col items-center">
+                <label class="block mb-4 text-center w-full">
+                    <span class="text-gray-300">Sube tu archivo <span class="font-mono text-pink-400">.zip</span> de Instagram</span>
+                    <input type="file" name="archivo_zip" accept=".zip" required 
+                           class="mt-4 block w-full text-sm text-gray-400
+                                  file:mr-4 file:py-3 file:px-4 md:file:px-6
+                                  file:rounded-full file:border-0
+                                  file:text-sm file:font-bold
+                                  file:bg-purple-600 file:text-white
+                                  hover:file:bg-purple-700 cursor-pointer transition-all"/>
+                </label>
+                <button type="submit" class="mt-4 w-full md:w-auto bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700 text-white font-bold py-3 px-10 rounded-full shadow-lg transform transition hover:scale-105">
+                    Escanear Seguidores
+                </button>
+            </form>
+        </div>
+
+        <!-- Zona de Resultados -->
+        {% if resultados %}
+        <div class="bg-gray-800 rounded-2xl p-6 md:p-8 shadow-2xl border border-gray-700 animate-fade-in-up" id="seccionResultados">
+            <h2 class="text-2xl md:text-3xl font-bold mb-6 text-center text-white">📊 Tu Reporte Oficial</h2>
+            
+            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-8">
+                <div class="bg-gray-700 p-4 rounded-xl text-center border border-gray-600">
+                    <p class="text-xs md:text-sm text-gray-400">Tú Sigues a</p>
+                    <p class="text-2xl md:text-3xl font-bold text-blue-400">{{ resultados.total_siguiendo }}</p>
+                </div>
+                <div class="bg-gray-700 p-4 rounded-xl text-center border border-gray-600">
+                    <p class="text-xs md:text-sm text-gray-400">Te Siguen</p>
+                    <p class="text-2xl md:text-3xl font-bold text-green-400">{{ resultados.total_seguidores }}</p>
+                </div>
+                <div class="bg-gray-700 p-4 rounded-xl text-center border border-gray-600 border-b-4 border-b-red-500">
+                    <p class="text-xs md:text-sm text-gray-400">No te siguen</p>
+                    <p class="text-2xl md:text-3xl font-bold text-red-400">{{ resultados.traidores|length }}</p>
+                </div>
+            </div>
+
+            <!-- Controles: Buscador y Exportar -->
+            <div class="flex flex-col md:flex-row justify-between items-center mb-6 space-y-4 md:space-y-0 no-print">
+                <input type="text" id="buscador" placeholder="🔍 Buscar usuario..." 
+                       class="bg-gray-900 border border-gray-600 text-white text-sm rounded-lg focus:ring-pink-500 focus:border-pink-500 block w-full md:w-64 p-2.5">
+                
+                <div class="flex flex-col sm:flex-row w-full md:w-auto space-y-2 sm:space-y-0 sm:space-x-2">
+                    <button onclick="window.print()" class="flex items-center justify-center w-full sm:w-auto bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded border border-blue-500 transition">
+                        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
+                        PDF
+                    </button>
+                    <button onclick="exportarCSV()" class="flex items-center justify-center w-full sm:w-auto bg-green-600 hover:bg-green-700 text-white font-semibold py-2 px-4 rounded border border-green-500 transition">
+                        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
+                        CSV
+                    </button>
+                </div>
+            </div>
+
+            <!-- Tabla -->
+            <div class="overflow-x-auto rounded-lg border border-gray-700">
+                <table class="w-full text-left border-collapse" id="tablaUsuarios">
+                    <thead>
+                        <tr class="bg-gray-900 text-gray-400 text-xs md:text-sm uppercase">
+                            <th class="p-3 md:p-4 border-b border-gray-700">Usuario</th>
+                            <th class="p-3 md:p-4 border-b border-gray-700 text-right">Te fuiste de follow el</th>
+                        </tr>
+                    </thead>
+                    <tbody class="divide-y divide-gray-700" id="cuerpoTabla">
+                        {% for persona in resultados.traidores %}
+                        <tr class="hover:bg-gray-750 transition duration-150 fila-usuario">
+                            <td class="p-3 md:p-4 text-white font-medium nombre-usuario">
+                                <a href="https://instagram.com/{{ persona.usuario }}" target="_blank" class="hover:text-pink-400 transition">
+                                    @{{ persona.usuario }}
+                                </a>
+                            </td>
+                            <td class="p-3 md:p-4 text-right text-gray-400 text-xs md:text-sm">{{ persona.fecha }}</td>
+                        </tr>
+                        {% endfor %}
+                    </tbody>
+                </table>
+            </div>
+
+            <!-- Controles de Paginación -->
+            <div class="flex justify-between items-center mt-6 no-print">
+                <button id="btnAnterior" onclick="cambiarPagina(-1)" class="bg-gray-700 hover:bg-gray-600 text-gray-200 px-4 py-2 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed">
+                    Anterior
+                </button>
+                <span id="infoPagina" class="text-gray-400 text-sm font-medium"></span>
+                <button id="btnSiguiente" onclick="cambiarPagina(1)" class="bg-gray-700 hover:bg-gray-600 text-gray-200 px-4 py-2 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed">
+                    Siguiente
+                </button>
+            </div>
+        </div>
+
+        <script>
+            // === CONTROL DE LA ANIMACIÓN DE INTRO ===
+            document.addEventListener('DOMContentLoaded', function() {
+                // La animación se oculta automáticamente después de 4 segundos (definido en CSS)
+                // Pero también podemos agregar un fallback por si acaso
+                setTimeout(function() {
+                    const intro = document.getElementById('introAnimation');
+                    if (intro) {
+                        intro.style.display = 'none';
+                    }
+                }, 4500); // 4.5 segundos para asegurar que la transición termine
+            });
+
+            // === LÓGICA DE PAGINACIÓN Y BUSCADOR ===
+            let paginaActual = 1;
+            const filasPorPagina = 20;
+            let todasLasFilas = Array.from(document.querySelectorAll('.fila-usuario'));
+            let filasFiltradas = todasLasFilas;
+
+            function renderizarTabla() {
+                // Ocultar todas las filas
+                todasLasFilas.forEach(fila => fila.style.display = 'none');
+                
+                // Calcular qué filas mostrar
+                let inicio = (paginaActual - 1) * filasPorPagina;
+                let fin = inicio + filasPorPagina;
+                
+                filasFiltradas.slice(inicio, fin).forEach(fila => fila.style.display = '');
+
+                // Actualizar info y botones
+                let totalPaginas = Math.ceil(filasFiltradas.length / filasPorPagina) || 1;
+                document.getElementById('infoPagina').innerText = `Página ${paginaActual} de ${totalPaginas}`;
+                document.getElementById('btnAnterior').disabled = paginaActual === 1;
+                document.getElementById('btnSiguiente').disabled = paginaActual === totalPaginas;
+            }
+
+            function cambiarPagina(direccion) {
+                paginaActual += direccion;
+                renderizarTabla();
+            }
+
+            // Buscador en tiempo real
+            document.getElementById('buscador').addEventListener('keyup', function() {
+                let filtro = this.value.toLowerCase();
+                filasFiltradas = todasLasFilas.filter(fila => {
+                    let nombre = fila.querySelector('.nombre-usuario').textContent.toLowerCase();
+                    return nombre.includes(filtro);
+                });
+                paginaActual = 1; // Volver a la página 1 al buscar
+                renderizarTabla();
+            });
+
+            // Inicializar tabla al cargar
+            if(todasLasFilas.length > 0) {
+                renderizarTabla();
+            }
+
+            // === LÓGICA DE EXPORTACIÓN CSV ===
+            function exportarCSV() {
+                let csv = [];
+                // Exportamos los datos filtrados actualmente (no solo la página)
+                filasFiltradas.forEach(function(fila) {
+                    let columnas = fila.querySelectorAll('th, td');
+                    let filaCSV = [];
+                    columnas.forEach(function(columna) {
+                        let texto = columna.innerText.replace('@', '').trim();
+                        filaCSV.push('"' + texto + '"');
+                    });
+                    csv.push(filaCSV.join(','));
+                });
+
+                let csvCompleto = csv.join('\n');
+                let blob = new Blob([csvCompleto], { type: 'text/csv;charset=utf-8;' });
+                let link = document.createElement("a");
+                link.setAttribute("href", URL.createObjectURL(blob));
+                link.setAttribute("download", "InstaScanner_Reporte.csv");
+                link.style.visibility = 'hidden';
+                document.body.appendChild(link);
+                link.click();
+                document.body.removeChild(link);
+            }
+        </script>
+        {% endif %}
+    </main>
+    <!-- Script para evitar el mensaje de "Confirmar reenvío de formulario" al recargar -->
+    <script>
+        if (window.history.replaceState) {
+            window.history.replaceState(null, null, window.location.href);
+        }
+    </script>
+</body>
+</html>