diff --git a/index.html b/index.html index 4d60ea9..27bb556 100644 --- a/index.html +++ b/index.html @@ -12,13 +12,33 @@ /* Texto claro */ } + .prompt { + position: fixed; + top: 0; + left: 0; + right: 0; + padding: 5px; + background-color: #333333; + /* Fondo del filtro */ + color: #e0e0e0; + /* Texto del filtro */ + font-family: monospace; + /* Fuente monoespaciada */ + text-align: center; + /* Alineación centrada */ + z-index: 1; + /* Asegura que esté por encima de los iconos */ + } + .container { display: flex; flex-wrap: wrap; justify-content: center; + margin-top: 25px; /* Centra los iconos si deseas */ } + .icono { margin: 10px; padding: 10px; @@ -38,12 +58,21 @@ /* Espacio entre el ícono y el texto */ } + .icono.discarded { + color: #333333 !important; + /* Oculta los iconos que no coinciden con el filtro */ + } + .icono:hover { background-color: #333333; /* Color de fondo al pasar el mouse */ } /* Asegura que los enlaces visitados no se diferencien */ + .icono.discarded::visited { + color: #333333 !important; + } + .icono:visited { color: #e0e0e0; } @@ -52,7 +81,7 @@ -
+
Gmail Meet @@ -92,12 +121,18 @@ ChatGPT Discord Plex - raddio.app - Radio Garden - Radio Browser - Code Radio - Monkey Radio - lofi hip hop radio + + raddio.app + + Radio Garden + Radio Browser + + Code Radio + Monkey Radio + lofi hip hop radio
@@ -107,15 +142,40 @@ const iconos = document.querySelectorAll('.icono'); const filtroDisplay = document.getElementById('filtro'); + // Inicializa destacando el primer icono y mostrando el filtro + filtroDisplay.textContent = ''; + destacarSeleccionado(); + function actualizarFiltro() { + filtroDisplay.textContent = filtroTexto; + + if (filtroTexto === '') { + filtroDisplay.textContent = ''; + iconos.forEach((icono) => { + if (icono.classList.contains('discarded')) { + icono.classList.remove('discarded'); + } + }); + seleccionado = 0; + destacarSeleccionado(); + return; + } + const regex = crearRegexDeFiltro(filtroTexto.toLowerCase()); + let primerVisible = null; iconos.forEach((icono, index) => { const nombre = icono.dataset.nombre.toLowerCase(); - if (nombre.includes(filtroTexto.toLowerCase())) { - icono.style.display = ''; - if (primerVisible === null) primerVisible = index; + if (regex.test(nombre)) { + if (icono.classList.contains('discarded')) { + icono.classList.remove('discarded'); + } + if (primerVisible === null) { + primerVisible = index; + } } else { - icono.style.display = 'none'; + if (!icono.classList.contains('discarded')) { + icono.classList.add('discarded'); + } } }); @@ -123,6 +183,13 @@ destacarSeleccionado(); } + // Función para convertir el filtro en una expresión regular + function crearRegexDeFiltro(filtro) { + const filtroLower = filtro.toLowerCase(); + const regexString = filtroLower.split('').map(char => `.*${char}`).join(''); + return new RegExp(regexString, 'i'); + } + function destacarSeleccionado() { iconos.forEach((icono, index) => { if (index === seleccionado) { @@ -150,12 +217,12 @@ } else if (e.key === 'ArrowRight') { do { seleccionado = (seleccionado + 1) % iconos.length; - } while (iconos[seleccionado].style.display === 'none'); + } while (iconos[seleccionado].classList.contains('discarded')); destacarSeleccionado(); } else if (e.key === 'ArrowLeft') { do { seleccionado = (seleccionado - 1 + iconos.length) % iconos.length; - } while (iconos[seleccionado].style.display === 'none'); + } while (iconos[seleccionado].classList.contains('discarded')); destacarSeleccionado(); } else if (e.key === 'Enter') { abrirEnlaceSeleccionado(); @@ -164,13 +231,8 @@ filtroTexto = ''; actualizarFiltro(); } - - filtroDisplay.textContent = `Filtro: ${filtroTexto}`; }); - // Inicializa destacando el primer icono y mostrando el filtro - destacarSeleccionado(); - filtroDisplay.textContent = 'Filtro:';