Spaces:

DeepRat
/

TrueEye_Reports

Paused

App Files Files Community

DeepRat commited on Jun 27, 2025

Commit

ecd2a2b

verified ·

1 Parent(s): 0989070

Update static/index.html

Browse files

Files changed (1) hide show

static/index.html +202 -55

static/index.html CHANGED Viewed

@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html lang="en" class="dark">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>TrueEye - Intelligent Media Literacy System</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <script>
@@ -12,25 +12,46 @@
             theme: {
                 extend: {
                     colors: {
-                        primary: '#f6ae2d',
-                        secondary: '#4a2040',
-                        dark: '#1a1a1a',
                     }
                 }
             }
         }
     </script>
     <style>
-        .markdown-content a {
             color: #f6ae2d;
             text-decoration: underline;
         }
-        .markdown-content h1, .markdown-content h2, .markdown-content h3, .markdown-content h4 {
             color: #f6ae2d;
             margin-top: 1rem;
             margin-bottom: 0.5rem;
             font-weight: bold;
         }
         .markdown-content p {
             margin-bottom: 1rem;
         }
@@ -41,18 +62,35 @@
         .markdown-content li {
             margin-bottom: 0.5rem;
         }
-        .markdown-content code {
             background-color: rgba(246, 174, 45, 0.2);
             padding: 0.2rem 0.4rem;
             border-radius: 0.25rem;
         }
-        .markdown-content pre {
             background-color: rgba(246, 174, 45, 0.1);
             padding: 1rem;
             border-radius: 0.5rem;
             overflow-x: auto;
             margin-bottom: 1rem;
         }
         .markdown-content blockquote {
             border-left: 4px solid #f6ae2d;
             padding-left: 1rem;
@@ -60,10 +98,17 @@
             color: #777;
             margin-bottom: 1rem;
         }
-        .markdown-content strong {
             font-weight: bold;
             color: #f6ae2d;
         }
         @keyframes pulse {
             0%, 100% { opacity: 1; }
             50% { opacity: 0.5; }
@@ -71,16 +116,114 @@
         .loading-message {
             animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
         }
     </style>
 </head>
-<body class="bg-gray-100 dark:bg-dark min-h-screen transition-colors duration-300">
-    <div class="container mx-auto px-4 py-8 max-w-4xl">
         <header class="flex justify-between items-center mb-8">
             <div>
-                <h1 class="text-4xl font-bold text-secondary dark:text-primary">TrueEye</h1>
-                <p class="text-lg text-gray-600 dark:text-gray-300">Intelligent Media Literacy System</p>
             </div>
-            <button id="theme-toggle" class="p-2 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200">
                 <svg id="theme-icon-dark" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
                 </svg>
@@ -91,64 +234,68 @@
         </header>
         <main>
-            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 mb-8 transition-colors duration-300">
                 <div class="flex flex-col md:flex-row gap-4">
                     <input
                         id="input-url"
                         type="url"
-                        placeholder="Enter URL to analyze..."
-                        class="flex-grow px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-primary dark:bg-gray-700 dark:text-white"
                     >
                     <button
                         id="analyze-btn"
-                        class="px-6 py-3 bg-primary hover:bg-yellow-500 text-secondary font-semibold rounded-lg transition-colors duration-300 flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
                     >
                         <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                             <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
                         </svg>
-                        Analyze
                     </button>
                 </div>
-                <div id="error-message" class="mt-2 text-red-500 hidden"></div>
             </div>
             <div id="loading" class="hidden">
-                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8 text-center">
                     <div class="flex justify-center items-center mb-4">
-                        <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary"></div>
                     </div>
-                    <p class="text-gray-600 dark:text-gray-300 loading-message">Analyzing content...</p>
-                    <p class="text-sm text-gray-500 dark:text-gray-400 mt-2">This may take a few minutes as we perform a comprehensive analysis</p>
-                    <div id="progress-timer" class="text-xs text-gray-400 dark:text-gray-500 mt-4">Time elapsed: 0:00</div>
                 </div>
             </div>
-            <div id="result-container" class="hidden bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transition-colors duration-300">
-                <h2 class="text-2xl font-semibold text-secondary dark:text-primary mb-4">Analysis Result</h2>
-                <div id="result" class="markdown-content text-gray-700 dark:text-gray-300"></div>
             </div>
-            <div id="info-box" class="mt-8 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
-                <h3 class="text-lg font-semibold text-blue-700 dark:text-blue-300 mb-2">How it works</h3>
-                <p class="text-blue-600 dark:text-blue-400 text-sm">
-                    TrueEye analyzes news articles and web content to detect bias, identify target audiences,
-                    and reveal hidden agendas. Simply paste a URL and let our AI-powered system provide you
-                    with a comprehensive media literacy report.
                 </p>
             </div>
         </main>
-        <footer class="mt-12 text-center text-gray-500 dark:text-gray-400">
-            <p>© 2025 TrueEye. All rights reserved.</p>
         </footer>
     </div>
     <script>
-        // Global variables
         let analysisStartTime = null;
         let timerInterval = null;
-        // Theme toggle
         const themeToggle = document.getElementById('theme-toggle');
         const themeIconDark = document.getElementById('theme-icon-dark');
         const themeIconLight = document.getElementById('theme-icon-light');
@@ -177,7 +324,7 @@
             }
         });
-        // Analyze functionality
         const analyzeBtn = document.getElementById('analyze-btn');
         const inputUrl = document.getElementById('input-url');
         const resultContainer = document.getElementById('result-container');
@@ -190,12 +337,12 @@
             const url = inputUrl.value.trim();
             if (!url) {
-                showError('Please enter a URL');
                 return;
             }
             if (!isValidUrl(url)) {
-                showError('Please enter a valid URL (include http:// or https://)');
                 return;
             }
@@ -212,34 +359,34 @@
                 });
                 if (!response.ok) {
-                    throw new Error(`Server returned ${response.status}`);
                 }
                 const data = await response.json();
                 if (!data.success && data.error) {
-                    // Handle specific error types
                     if (data.error === 'timeout') {
-                        showError('The analysis took too long. Please try again with a simpler article or try again later.');
                     } else if (data.error === 'connection') {
-                        showError('Could not connect to the analysis service. Please check your connection and try again.');
                     } else {
-                        showError(data.result || 'An error occurred during analysis.');
                     }
                     stopAnalysis();
                     return;
                 }
-                // Show results
                 resultDiv.innerHTML = marked.parse(data.result);
                 resultContainer.classList.remove('hidden');
                 stopAnalysis();
-                // Scroll to results
                 resultContainer.scrollIntoView({ behavior: 'smooth', block: 'start' });
             } catch (error) {
-                showError('Failed to analyze URL. Please try again later.');
                 console.error('Error:', error);
                 stopAnalysis();
             }
@@ -251,12 +398,12 @@
             analyzeBtn.disabled = true;
             analysisStartTime = Date.now();
-            // Update timer every second
             timerInterval = setInterval(() => {
                 const elapsed = Date.now() - analysisStartTime;
                 const minutes = Math.floor(elapsed / 60000);
                 const seconds = Math.floor((elapsed % 60000) / 1000);
-                progressTimer.textContent = `Time elapsed: ${minutes}:${seconds.toString().padStart(2, '0')}`;
             }, 1000);
         }
@@ -288,21 +435,21 @@
             errorMessage.classList.add('hidden');
         }
-        // Allow pressing Enter in the input field
         inputUrl.addEventListener('keypress', (e) => {
             if (e.key === 'Enter' && !analyzeBtn.disabled) {
                 analyzeBtn.click();
             }
         });
-        // Example URLs for testing
         const exampleUrls = [
             'https://example.com/news-article',
             'https://bbc.com/news/article-123',
             'https://cnn.com/2025/01/article'
         ];
-        // Add example URL on double-click (for testing)
         inputUrl.addEventListener('dblclick', () => {
             inputUrl.value = exampleUrls[Math.floor(Math.random() * exampleUrls.length)];
         });

 <!DOCTYPE html>
+<html lang="es" class="dark">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>TrueEye - Sistema Inteligente de Alfabetización Mediática</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <script>
             theme: {
                 extend: {
                     colors: {
+                        'trueeye-dark': '#420909',
+                        'trueeye-gold': '#f6ae2d',
+                        'trueeye-navbar': '#2a0606',
                     }
                 }
             }
         }
     </script>
     <style>
+        /* Estilos para modo oscuro */
+        .dark .markdown-content a {
             color: #f6ae2d;
             text-decoration: underline;
         }
+        .dark .markdown-content h1,
+        .dark .markdown-content h2,
+        .dark .markdown-content h3,
+        .dark .markdown-content h4 {
             color: #f6ae2d;
             margin-top: 1rem;
             margin-bottom: 0.5rem;
             font-weight: bold;
         }
+        /* Estilos para modo claro */
+        .markdown-content a {
+            color: #420909;
+            text-decoration: underline;
+            font-weight: 500;
+        }
+        .markdown-content h1,
+        .markdown-content h2,
+        .markdown-content h3,
+        .markdown-content h4 {
+            color: #420909;
+            margin-top: 1rem;
+            margin-bottom: 0.5rem;
+            font-weight: bold;
+        }
         .markdown-content p {
             margin-bottom: 1rem;
         }
         .markdown-content li {
             margin-bottom: 0.5rem;
         }
+        /* Código en modo oscuro */
+        .dark .markdown-content code {
             background-color: rgba(246, 174, 45, 0.2);
             padding: 0.2rem 0.4rem;
             border-radius: 0.25rem;
         }
+        .dark .markdown-content pre {
             background-color: rgba(246, 174, 45, 0.1);
             padding: 1rem;
             border-radius: 0.5rem;
             overflow-x: auto;
             margin-bottom: 1rem;
         }
+        /* Código en modo claro */
+        .markdown-content code {
+            background-color: rgba(66, 9, 9, 0.1);
+            padding: 0.2rem 0.4rem;
+            border-radius: 0.25rem;
+        }
+        .markdown-content pre {
+            background-color: rgba(66, 9, 9, 0.05);
+            padding: 1rem;
+            border-radius: 0.5rem;
+            overflow-x: auto;
+            margin-bottom: 1rem;
+        }
         .markdown-content blockquote {
             border-left: 4px solid #f6ae2d;
             padding-left: 1rem;
             color: #777;
             margin-bottom: 1rem;
         }
+        /* Strong text */
+        .dark .markdown-content strong {
             font-weight: bold;
             color: #f6ae2d;
         }
+        .markdown-content strong {
+            font-weight: bold;
+            color: #420909;
+        }
         @keyframes pulse {
             0%, 100% { opacity: 1; }
             50% { opacity: 0.5; }
         .loading-message {
             animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
         }
+        /* Navbar fija */
+        .navbar {
+            background-color: #2a0606;
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            z-index: 50;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+        }
+        /* Compensar el espacio de la navbar */
+        body {
+            padding-top: 64px;
+        }
+        /* Botones de la navbar */
+        .nav-button {
+            background-color: #f6ae2d;
+            color: #420909;
+            padding: 0.5rem 1rem;
+            border-radius: 0.375rem;
+            font-weight: 600;
+            transition: all 0.3s;
+        }
+        .nav-button:hover {
+            background-color: #e09d1c;
+            transform: translateY(-1px);
+            box-shadow: 0 2px 8px rgba(246, 174, 45, 0.3);
+        }
+        /* Banner cards */
+        .feature-card {
+            transition: all 0.3s;
+        }
+        .dark .feature-card {
+            background-color: rgba(246, 174, 45, 0.1);
+            border: 1px solid rgba(246, 174, 45, 0.3);
+        }
+        .feature-card {
+            background-color: rgba(246, 174, 45, 0.1);
+            border: 1px solid rgba(66, 9, 9, 0.2);
+        }
+        .dark .feature-card:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(246, 174, 45, 0.2);
+            border-color: #f6ae2d;
+        }
+        .feature-card:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(66, 9, 9, 0.1);
+            border-color: #420909;
+        }
     </style>
 </head>
+<body class="bg-white dark:bg-trueeye-dark min-h-screen transition-colors duration-300">
+    <!-- Navbar fija -->
+    <nav class="navbar">
+        <div class="container mx-auto px-4">
+            <div class="flex justify-between items-center h-16">
+                <!-- Logo y título -->
+                <div class="flex items-center space-x-3">
+                    <img src="/static/te.png" alt="TrueEye Logo" class="h-10 w-10">
+                    <span class="text-trueeye-gold text-xl font-bold">TrueEye Reports</span>
+                </div>
+                <!-- Botones de navegación -->
+                <div class="flex items-center space-x-4">
+                    <a href="#" target="_blank" class="nav-button" id="my-web-btn">
+                        Mi Web
+                    </a>
+                    <a href="#" target="_blank" class="nav-button" id="trueeye-project-btn">
+                        Proyecto TrueEye
+                    </a>
+                </div>
+            </div>
+        </div>
+    </nav>
+    <div class="container mx-auto px-4 py-8 max-w-6xl">
+        <!-- Banner de características -->
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
+            <div class="feature-card rounded-lg p-4">
+                <h3 class="text-trueeye-gold dark:text-trueeye-gold font-bold mb-2">Detección de Sesgos</h3>
+                <p class="text-sm text-gray-700 dark:text-gray-200">Identificación precisa de inclinaciones positivas, negativas o neutrales</p>
+            </div>
+            <div class="feature-card rounded-lg p-4">
+                <h3 class="text-trueeye-gold dark:text-trueeye-gold font-bold mb-2">Verificación de Hechos</h3>
+                <p class="text-sm text-gray-700 dark:text-gray-200">Detección de falacias, argumentos engañosos y desinformación</p>
+            </div>
+            <div class="feature-card rounded-lg p-4">
+                <h3 class="text-trueeye-gold dark:text-trueeye-gold font-bold mb-2">Análisis de Audiencia</h3>
+                <p class="text-sm text-gray-700 dark:text-gray-200">Perfil demográfico y psicográfico del público objetivo</p>
+            </div>
+            <div class="feature-card rounded-lg p-4">
+                <h3 class="text-trueeye-gold dark:text-trueeye-gold font-bold mb-2">Evaluación de Intencionalidad</h3>
+                <p class="text-sm text-gray-700 dark:text-gray-200">Análisis de manipulación y niveles de animosidad</p>
+            </div>
+        </div>
+        <!-- Header principal -->
         <header class="flex justify-between items-center mb-8">
             <div>
+                <h1 class="text-4xl font-bold text-trueeye-dark dark:text-trueeye-gold">TrueEye</h1>
+                <p class="text-lg text-gray-700 dark:text-gray-300">Sistema Inteligente de Alfabetización Mediática</p>
             </div>
+            <button id="theme-toggle" class="p-2 rounded-full bg-trueeye-gold dark:bg-trueeye-dark text-trueeye-dark dark:text-trueeye-gold border-2 border-trueeye-dark dark:border-trueeye-gold">
                 <svg id="theme-icon-dark" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
                 </svg>
         </header>
         <main>
+            <div class="bg-trueeye-gold/10 dark:bg-trueeye-gold/10 border border-trueeye-dark/20 dark:border-trueeye-gold/30 rounded-lg shadow-lg p-6 mb-8 transition-colors duration-300">
                 <div class="flex flex-col md:flex-row gap-4">
                     <input
                         id="input-url"
                         type="url"
+                        placeholder="Ingrese la URL a analizar..."
+                        class="flex-grow px-4 py-3 rounded-lg border border-trueeye-dark/30 dark:border-trueeye-gold/30 focus:outline-none focus:ring-2 focus:ring-trueeye-gold dark:focus:ring-trueeye-gold bg-white dark:bg-trueeye-dark/50 text-black dark:text-white placeholder-gray-500 dark:placeholder-gray-400"
                     >
                     <button
                         id="analyze-btn"
+                        class="px-6 py-3 bg-trueeye-gold hover:bg-trueeye-gold/90 text-trueeye-dark font-semibold rounded-lg transition-all duration-300 flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed hover:shadow-lg"
                     >
                         <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                             <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
                         </svg>
+                        Analizar
                     </button>
                 </div>
+                <div id="error-message" class="mt-2 text-red-600 dark:text-red-400 hidden"></div>
             </div>
             <div id="loading" class="hidden">
+                <div class="bg-trueeye-gold/10 dark:bg-trueeye-gold/10 border border-trueeye-dark/20 dark:border-trueeye-gold/30 rounded-lg shadow-lg p-8 text-center">
                     <div class="flex justify-center items-center mb-4">
+                        <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-trueeye-gold"></div>
                     </div>
+                    <p class="text-gray-700 dark:text-gray-200 loading-message">Analizando contenido...</p>
+                    <p class="text-sm text-gray-600 dark:text-gray-400 mt-2">Esto puede tomar algunos minutos mientras realizamos un análisis exhaustivo</p>
+                    <div id="progress-timer" class="text-xs text-gray-500 dark:text-gray-500 mt-4">Tiempo transcurrido: 0:00</div>
                 </div>
             </div>
+            <div id="result-container" class="hidden bg-trueeye-gold/10 dark:bg-trueeye-gold/10 border border-trueeye-dark/20 dark:border-trueeye-gold/30 rounded-lg shadow-lg p-6 transition-colors duration-300">
+                <h2 class="text-2xl font-semibold text-trueeye-dark dark:text-trueeye-gold mb-4">Resultado del Análisis</h2>
+                <div id="result" class="markdown-content text-gray-800 dark:text-gray-200"></div>
             </div>
+            <div id="info-box" class="mt-8 bg-trueeye-gold/20 dark:bg-trueeye-gold/10 border border-trueeye-dark/20 dark:border-trueeye-gold/30 rounded-lg p-4">
+                <h3 class="text-lg font-semibold text-trueeye-dark dark:text-trueeye-gold mb-2">¿Cómo funciona?</h3>
+                <p class="text-gray-700 dark:text-gray-300 text-sm">
+                    TrueEye analiza artículos de noticias y contenido web para detectar sesgos, identificar audiencias objetivo
+                    y revelar agendas ocultas. Simplemente pegue una URL y deje que nuestro sistema impulsado por IA le proporcione
+                    un informe completo de alfabetización mediática.
                 </p>
             </div>
         </main>
+        <footer class="mt-12 text-center text-gray-600 dark:text-gray-400">
+            <p>© 2025 TrueEye. Todos los derechos reservados.</p>
         </footer>
     </div>
     <script>
+        // Variables globales
         let analysisStartTime = null;
         let timerInterval = null;
+        // Configurar URLs de los botones (cambiar estas URLs según necesites)
+        document.getElementById('my-web-btn').href = '#'; // Cambia esto a tu URL
+        document.getElementById('trueeye-project-btn').href = '#'; // Cambia esto a la URL del proyecto
+        // Cambio de tema
         const themeToggle = document.getElementById('theme-toggle');
         const themeIconDark = document.getElementById('theme-icon-dark');
         const themeIconLight = document.getElementById('theme-icon-light');
             }
         });
+        // Funcionalidad de análisis
         const analyzeBtn = document.getElementById('analyze-btn');
         const inputUrl = document.getElementById('input-url');
         const resultContainer = document.getElementById('result-container');
             const url = inputUrl.value.trim();
             if (!url) {
+                showError('Por favor ingrese una URL');
                 return;
             }
             if (!isValidUrl(url)) {
+                showError('Por favor ingrese una URL válida (incluya http:// o https://)');
                 return;
             }
                 });
                 if (!response.ok) {
+                    throw new Error(`El servidor retornó ${response.status}`);
                 }
                 const data = await response.json();
                 if (!data.success && data.error) {
+                    // Manejar tipos de error específicos
                     if (data.error === 'timeout') {
+                        showError('El análisis tardó demasiado tiempo. Por favor intente nuevamente con un artículo más simple o intente más tarde.');
                     } else if (data.error === 'connection') {
+                        showError('No se pudo conectar con el servicio de análisis. Por favor verifique su conexión e intente nuevamente.');
                     } else {
+                        showError(data.result || 'Ocurrió un error durante el análisis.');
                     }
                     stopAnalysis();
                     return;
                 }
+                // Mostrar resultados
                 resultDiv.innerHTML = marked.parse(data.result);
                 resultContainer.classList.remove('hidden');
                 stopAnalysis();
+                // Hacer scroll a los resultados
                 resultContainer.scrollIntoView({ behavior: 'smooth', block: 'start' });
             } catch (error) {
+                showError('Error al analizar la URL. Por favor intente más tarde.');
                 console.error('Error:', error);
                 stopAnalysis();
             }
             analyzeBtn.disabled = true;
             analysisStartTime = Date.now();
+            // Actualizar timer cada segundo
             timerInterval = setInterval(() => {
                 const elapsed = Date.now() - analysisStartTime;
                 const minutes = Math.floor(elapsed / 60000);
                 const seconds = Math.floor((elapsed % 60000) / 1000);
+                progressTimer.textContent = `Tiempo transcurrido: ${minutes}:${seconds.toString().padStart(2, '0')}`;
             }, 1000);
         }
             errorMessage.classList.add('hidden');
         }
+        // Permitir presionar Enter en el campo de entrada
         inputUrl.addEventListener('keypress', (e) => {
             if (e.key === 'Enter' && !analyzeBtn.disabled) {
                 analyzeBtn.click();
             }
         });
+        // URLs de ejemplo para pruebas
         const exampleUrls = [
             'https://example.com/news-article',
             'https://bbc.com/news/article-123',
             'https://cnn.com/2025/01/article'
         ];
+        // Agregar URL de ejemplo con doble clic (para pruebas)
         inputUrl.addEventListener('dblclick', () => {
             inputUrl.value = exampleUrls[Math.floor(Math.random() * exampleUrls.length)];
         });