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 @@
-
+
@@ -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:';