Searxng / index.html
Laylaprs's picture
Create index.html
6b285c8 verified
Raw
History Blame Contribute Delete
2.98 kB
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meu SearxNG</title>
<style>
body { font-family: Arial, sans-serif; max-width: 600px; margin: 40px auto; padding: 20px; text-align: center; background: #f9f9f9; color: #333; }
input { width: 80%; padding: 12px; font-size: 16px; border: 1px solid #ccc; border-radius: 6px; margin-bottom: 10px; }
button { padding: 12px 20px; font-size: 16px; background: #007bff; color: white; border: none; border-radius: 6px; cursor: pointer; }
button:hover { background: #0056b3; }
#results { margin-top: 20px; text-align: left; background: white; padding: 20px; border-radius: 6px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.result-item { margin-bottom: 15px; }
.result-item a { color: #007bff; text-decoration: none; font-weight: bold; }
.result-item a:hover { text-decoration: underline; }
.result-item p { margin: 5px 0 0 0; color: #555; font-size: 14px; }
</style>
</head>
<body>
<h1>🔍 Meu SearxNG</h1>
<p>Busca rápida hospedada na Hugging Face (Static)</p>
<input type="text" id="query" placeholder="O que você quer buscar?" onkeypress="if(event.key === 'Enter') realizarBusca()">
<br>
<button onclick="realizarBusca()">Pesquisar</button>
<div id="results">Digite um termo acima para começar...</div>
<script>
async function realizarBusca() {
const termo = document.getElementById('query').value.trim();
const resultsDiv = document.getElementById('results');
if (!termo) {
resultsDiv.innerHTML = "Por favor, digite algo para buscar.";
return;
}
resultsDiv.innerHTML = "Buscando...";
try {
// Usando uma API pública compatível com CORS/JSON do SearxNG
const response = await fetch(`https://corsproxy.io/?` + encodeURIComponent(`https://searx.be/search?q=${termo}&format=json`));
const data = await response.json();
if (!data.results || data.results.length === 0) {
resultsDiv.innerHTML = "Nenhum resultado encontrado.";
return;
}
let html = "";
data.results.forEach(r => {
html += `
<div class="result-item">
<a href="${r.url}" target="_blank">${r.title || 'Sem título'}</a>
<p>${r.content || ''}</p>
</div>
`;
});
resultsDiv.innerHTML = html;
} catch (error) {
resultsDiv.innerHTML = "Erro ao realizar a busca. Tente novamente.";
console.error(error);
}
}
</script>
</body>
</html>