Spaces:

enacimie
/

TestSearch

Running

App Files Files Community

enacimie commited on Aug 1

Commit

fd50cb7

verified ·

1 Parent(s): a4a9f45

Update index.html

Browse files

Files changed (1) hide show

index.html +315 -19

index.html CHANGED Viewed

@@ -1,19 +1,315 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Buscador Avanzado Google</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+        body {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 20px;
+        }
+        .container {
+            background: rgba(255, 255, 255, 0.95);
+            border-radius: 20px;
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+            width: 100%;
+            max-width: 600px;
+            padding: 40px;
+            transition: transform 0.3s ease;
+        }
+        .container:hover {
+            transform: translateY(-5px);
+        }
+        h1 {
+            text-align: center;
+            color: #333;
+            margin-bottom: 30px;
+            font-size: 2.5rem;
+            background: linear-gradient(90deg, #667eea, #764ba2);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+        .form-group {
+            margin-bottom: 25px;
+        }
+        label {
+            display: block;
+            margin-bottom: 8px;
+            font-weight: 600;
+            color: #555;
+        }
+        input, select {
+            width: 100%;
+            padding: 15px;
+            border: 2px solid #e1e5e9;
+            border-radius: 12px;
+            font-size: 16px;
+            transition: all 0.3s ease;
+        }
+        input:focus, select:focus {
+            outline: none;
+            border-color: #667eea;
+            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
+        }
+        .site-options {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 10px;
+            margin-top: 10px;
+        }
+        .site-btn {
+            flex: 1;
+            min-width: 120px;
+            padding: 12px;
+            background: #f8f9fa;
+            border: 2px solid #e1e5e9;
+            border-radius: 10px;
+            cursor: pointer;
+            text-align: center;
+            font-weight: 600;
+            transition: all 0.3s ease;
+        }
+        .site-btn:hover {
+            background: #667eea;
+            color: white;
+            border-color: #667eea;
+        }
+        .time-options {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 15px;
+        }
+        .time-option {
+            padding: 15px;
+            background: #f8f9fa;
+            border: 2px solid #e1e5e9;
+            border-radius: 10px;
+            cursor: pointer;
+            text-align: center;
+            transition: all 0.3s ease;
+        }
+        .time-option:hover, .time-option.active {
+            background: #667eea;
+            color: white;
+            border-color: #667eea;
+        }
+        .search-btn {
+            width: 100%;
+            padding: 18px;
+            background: linear-gradient(90deg, #667eea, #764ba2);
+            color: white;
+            border: none;
+            border-radius: 12px;
+            font-size: 18px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
+        }
+        .search-btn:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 8px 20px rgba(102, 126, 234, 0.6);
+        }
+        .search-btn:active {
+            transform: translateY(0);
+        }
+        .preview {
+            margin-top: 25px;
+            padding: 20px;
+            background: #f8f9fa;
+            border-radius: 12px;
+            border-left: 4px solid #667eea;
+        }
+        .preview h3 {
+            margin-bottom: 10px;
+            color: #555;
+        }
+        .preview-url {
+            word-break: break-all;
+            color: #667eea;
+            font-weight: 500;
+        }
+        @media (max-width: 600px) {
+            .container {
+                padding: 25px;
+            }
+            h1 {
+                font-size: 2rem;
+            }
+            .time-options {
+                grid-template-columns: 1fr;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>🔍 Buscador Avanzado</h1>
+        <div class="form-group">
+            <label for="searchQuery">Términos de búsqueda:</label>
+            <input type="text" id="searchQuery" placeholder="Ej: ofertas de trabajo tenerife">
+        </div>
+        <div class="form-group">
+            <label for="site">Sitio web (opcional):</label>
+            <input type="text" id="site" placeholder="Ej: linkedin.com o deja en blanco para buscar en todo Google">
+            <div class="site-options">
+                <div class="site-btn" data-site="linkedin.com">LinkedIn</div>
+                <div class="site-btn" data-site="facebook.com">Facebook</div>
+                <div class="site-btn" data-site="youtube.com">YouTube</div>
+                <div class="site-btn" data-site="twitter.com">X (Twitter)</div>
+            </div>
+        </div>
+        <div class="form-group">
+            <label>Periodo de tiempo:</label>
+            <div class="time-options">
+                <div class="time-option" data-time="">Cualquier momento</div>
+                <div class="time-option" data-time="qdr:d">Últimas 24 horas</div>
+                <div class="time-option" data-time="qdr:w">Última semana</div>
+                <div class="time-option" data-time="qdr:m">Último mes</div>
+                <div class="time-option" data-time="qdr:y">Último año</div>
+            </div>
+        </div>
+        <button class="search-btn" id="searchButton">Buscar en Google</button>
+        <div class="preview">
+            <h3>Vista previa de la búsqueda:</h3>
+            <div class="preview-url" id="previewUrl">https://www.google.com/search?q=...</div>
+        </div>
+    </div>
+    <script>
+        // Elementos del DOM
+        const searchQuery = document.getElementById('searchQuery');
+        const siteInput = document.getElementById('site');
+        const searchButton = document.getElementById('searchButton');
+        const previewUrl = document.getElementById('previewUrl');
+        const siteButtons = document.querySelectorAll('.site-btn');
+        const timeOptions = document.querySelectorAll('.time-option');
+        // Variables de estado
+        let selectedTime = '';
+        // Event listeners para los botones de sitio
+        siteButtons.forEach(button => {
+            button.addEventListener('click', () => {
+                siteInput.value = button.getAttribute('data-site');
+                updatePreview();
+            });
+        });
+        // Event listeners para las opciones de tiempo
+        timeOptions.forEach(option => {
+            option.addEventListener('click', () => {
+                // Remover clase activa de todos
+                timeOptions.forEach(opt => opt.classList.remove('active'));
+                // Agregar clase activa al seleccionado
+                option.classList.add('active');
+                // Guardar el valor seleccionado
+                selectedTime = option.getAttribute('data-time');
+                updatePreview();
+            });
+        });
+        // Event listeners para inputs
+        searchQuery.addEventListener('input', updatePreview);
+        siteInput.addEventListener('input', updatePreview);
+        // Función para actualizar la vista previa
+        function updatePreview() {
+            const query = searchQuery.value.trim();
+            const site = siteInput.value.trim();
+            let url = 'https://www.google.com/search?q=';
+            if (query) {
+                url += encodeURIComponent(query);
+            }
+            if (site) {
+                url += encodeURIComponent(` site:${site}`);
+            }
+            if (selectedTime) {
+                url += `&tbs=${selectedTime}`;
+            }
+            previewUrl.textContent = url;
+        }
+        // Función para realizar la búsqueda
+        function performSearch() {
+            const query = searchQuery.value.trim();
+            const site = siteInput.value.trim();
+            if (!query) {
+                alert('Por favor, introduce términos de búsqueda');
+                return;
+            }
+            let searchUrl = 'https://www.google.com/search?q=' + encodeURIComponent(query);
+            if (site) {
+                searchUrl += encodeURIComponent(` site:${site}`);
+            }
+            if (selectedTime) {
+                searchUrl += `&tbs=${selectedTime}`;
+            }
+            // Abrir en una nueva pestaña/ventana
+            window.open(searchUrl, '_blank', 'noopener noreferrer'); // Agregamos 'noopener noreferrer' para evitar problemas de seguridad
+        }
+        // Event listener para el botón de búsqueda
+        searchButton.addEventListener('click', performSearch);
+        // Inicializar vista previa
+        updatePreview();
+        // Establecer opción por defecto
+        document.querySelector('.time-option[data-time=""]').classList.add('active');
+    </script>
+</body>
+</html>