One Hat Cyber Team

View File Name : search.html

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Buscar | ECJ Catamarca</title>
<link rel="shortcut icon" href="favicon.png">
<link href='https://fonts.googleapis.com/css?family=Inter:300,400,500,600,700,800&display=swap' rel='stylesheet'>
<link rel="stylesheet" href="./assets/plugins/bootstrap/css/bootstrap.min.css?v=20260302">
<link id="theme-style" rel="stylesheet" href="./assets/css/styles.css?v=20260302">
</head>
<body>
    <div class="container py-5">
        <h1 class="mb-4">Resultados de búsqueda</h1>
        <div class="mb-3">
            <a href="index.html" class="btn btn-secondary">Volver al inicio</a>
            <a id="newSearch" href="#" class="btn btn-primary">Nueva búsqueda</a>
        </div>
        <div id="results" class="row g-3"></div>
    </div>

    <script>
        const params = new URLSearchParams(window.location.search);
        const query = (params.get('q') || '').trim().toLowerCase();
        const resultsContainer = document.getElementById('results');

        function escapeHtml(text) {
            return text.replace(/[&<>"']/g, c => ({ '&':'&amp;', '<':'&lt;', '>':'&gt;', '"':'&quot;', "'":'&#39;' }[c]));
        }

        if (!query) {
            resultsContainer.innerHTML = '<div class="col-12 alert alert-warning">No se ingresó término de búsqueda.</div>';
        } else {
            fetch('search-index.json')
                .then(res => res.json())
                .then(data => {
                    const matches = data.filter(item => {
                        const haystack = (item.title + ' ' + item.content).toLowerCase();
                        return haystack.includes(query);
                    });

                    if (matches.length === 0) {
                        resultsContainer.innerHTML = `<div class="col-12 alert alert-info">No se encontraron resultados para "${escapeHtml(query)}"</div>`;
                        return;
                    }

                    resultsContainer.innerHTML = matches.map(item => {
                        const snippetIdx = (item.content.toLowerCase().indexOf(query));
                        const snippet = snippetIdx >= 0 ? item.content.substr(Math.max(0,snippetIdx-60), 180) : item.content.substr(0,180);
                        return `
                            <div class="col-12">
                                <div class="card">
                                    <div class="card-body">
                                        <h4 class="card-title"><a href="${item.url}">${escapeHtml(item.title)}</a></h4>
                                        <p class="card-text">${escapeHtml(snippet)}...</p>
                                        <a href="${item.url}" class="btn btn-primary btn-sm">Ir al contenido</a>
                                    </div>
                                </div>
                            </div>`;
                    }).join('');
                })
                .catch(err => {
                    resultsContainer.innerHTML = `<div class="col-12 alert alert-danger">Error al cargar el índice de búsqueda. ${escapeHtml(err.message)}</div>`;
                });
        }

        document.getElementById('newSearch').addEventListener('click', (e) => {
            e.preventDefault();
            const searchTerm = prompt('Ingrese término de búsqueda');
            if (searchTerm) {
                window.location.href = `search.html?q=${encodeURIComponent(searchTerm)}`;
            }
        });
    </script>
</body>
</html>