BoatoZero

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Guardião da Verdade - Filtro de Desinformação</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background-color: #0b0f19;
            color: #f1f5f9;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 40px 20px;
        }

        .app-container {
            background: #131c2e;
            border: 1px solid #1e293b;
            padding: 40px;
            border-radius: 16px;
            width: 100%;
            max-width: 650px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.7);
        }

        h1 {
            font-size: 2rem;
            color: #38bdf8;
            text-align: center;
            margin-bottom: 8px;
        }

        p.description {
            text-align: center;
            color: #94a3b8;
            margin-bottom: 30px;
            font-size: 0.95rem;
        }

        .input-group {
            margin-bottom: 20px;
        }

        label {
            display: block;
            font-size: 0.85rem;
            color: #38bdf8;
            margin-bottom: 8px;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: bold;
        }

        input[type="text"], textarea {
            width: 100%;
            padding: 14px;
            background-color: #0b0f19;
            border: 1px solid #334155;
            border-radius: 8px;
            color: #fff;
            font-size: 1rem;
            outline: none;
            transition: 0.3s;
        }

        input[type="text"]:focus, textarea:focus {
            border-color: #38bdf8;
            box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2);
        }

        textarea {
            height: 120px;
            resize: none;
        }

        button {
            width: 100%;
            padding: 16px;
            background: linear-gradient(90deg, #0284c7 0%, #0369a1 100%);
            color: white;
            border: none;
            font-size: 1rem;
            font-weight: bold;
            border-radius: 8px;
            cursor: pointer;
            transition: 0.3s;
        }

        button:hover {
            opacity: 0.9;
            transform: translateY(-1px);
        }

        .loading {
            display: none;
            text-align: center;
            color: #e2e8f0;
            margin: 20px 0;
            font-weight: 500;
        }

        .result-card {
            display: block;
            margin-top: 30px;
            padding: 25px;
            border-radius: 10px;
            border-left: 6px solid #475569;
            background: rgba(71, 85, 105, 0.1);
        }

        .result-card.status-falso {
            background: rgba(239, 68, 68, 0.1);
            border-color: #ef4444;
        }

        .result-card.status-verdadeiro {
            background: rgba(34, 197, 94, 0.1);
            border-color: #22c55e;
        }

        .result-badge {
            font-size: 1.25rem;
            font-weight: bold;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .result-badge.falso { color: #ef4444; }
        .result-badge.verdadeiro { color: #22c55e; }

        .result-body {
            font-size: 0.98rem;
            line-height: 1.6;
            color: #cbd5e1;
        }

        .history-section {
            margin-top: 40px;
            border-top: 1px solid #1e293b;
            padding-top: 25px;
        }

        .history-title {
            font-size: 1.2rem;
            color: #94a3b8;
            margin-bottom: 15px;
        }

        .history-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .history-item {
            background: #1e293b;
            padding: 15px;
            border-radius: 8px;
            border-left: 4px solid;
            font-size: 0.9rem;
        }

        .history-item.falso { border-color: #ef4444; }
        .history-item.verdadeiro { border-color: #22c55e; }

        .history-header {
            display: flex;
            justify-content: space-between;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .history-header.falso { color: #ef4444; }
        .history-header.verdadeiro { color: #22c55e; }

        .history-query {
            font-style: italic;
            color: #94a3b8;
            margin-bottom: 5px;
        }
    </style>
</head>
<body>

    <div class="app-container">
        <h1>Guardião da Verdade</h1>
        <p class="description">Verificador inteligente de desinformação abastecido com Inteligência Artificial.</p>

        <div class="input-group">
            <label for="api-key">Chave de API do Gemini</label>
            <input type="text" id="api-key" placeholder="Cole sua chave gratuita da IA aqui...">
        </div>

        <div class="input-group">
            <label for="text-to-check">Texto ou Notícia Suspeita</label>
            <textarea id="text-to-check" placeholder="Cole aqui o boato do WhatsApp ou a notícia polêmica para checar..."></textarea>
        </div>

        <button id="verify-button">Analisar Fato ou Fake</button>

        <div class="loading" id="status-loading">Consultando banco de dados neural e checando fontes...</div>

        <div class="result-card" id="output-card">
            <div class="result-badge" id="output-badge">Aguardando Análise...</div>
            <div class="result-body" id="output-text">Insira os dados acima para iniciar a varredura.</div>
        </div>

        <div class="history-section">
            <div class="history-title">Análises Recentes</div>
            <div class="history-list" id="history-container"></div>
        </div>
    </div>

    <script>
        const verifyBtn = document.getElementById('verify-button');
        const apiKeyInput = document.getElementById('api-key');
        const textInput = document.getElementById('text-to-check');
        const loadingDiv = document.getElementById('status-loading');
        const outputCard = document.getElementById('output-card');
        const outputBadge = document.getElementById('output-badge');
        const outputText = document.getElementById('output-text');
        const historyContainer = document.getElementById('history-container');

        const savedKey = localStorage.getItem('gemini_api_key');
        if (savedKey) apiKeyInput.value = savedKey;
        renderHistory();

        verifyBtn.addEventListener('click', async () => {
            const key = apiKeyInput.value.trim();
            const text = textInput.value.trim();

            if (!key || !text) {
                alert("Atenção: Insira a sua chave de API e o texto que deseja analisar!");
                return;
            }

            localStorage.setItem('gemini_api_key', key);
            loadingDiv.style.display = "block";
            outputCard.style.display = "none";

            try {
                const url = `https://googleapis.com{key}`;
                const prompt = `Você é um robô especialista em checagem de fatos. Analise o texto a seguir e defina estritamente se ele é VERDADEREIRO ou FALSO/FAKE NEWS. Comece a resposta escrevendo apenas '[VERDADEIRO]' ou '[FALSO]'. Logo em seguida, apresente uma explicação clara de até 4 linhas detalhando os motivos. Texto a ser analisado: "${text}"`;

                const response = await fetch(url, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ contents: [{ parts: [{ text: prompt }] }] })
                });

                const data = await response.json();
                const aiResult = data.candidates.content.parts.text;

                loadingDiv.style.display = "none";
                outputCard.style.display = "block";

                let isFalso = aiResult.includes('[FALSO]');
                let cleanText = aiResult.replace('[FALSO]', '').replace('[VERDADEIRO]', '').trim();
                let status = isFalso ? "falso" : "verdadeiro";

                if (isFalso) {
                    outputCard.className = "result-card status-falso";
                    outputBadge.className = "result-badge falso";
                    outputBadge.innerText = "❌ DESMENTIDO / FAKE NEWS";
                    outputText.innerText = cleanText;
                } else {
                    outputCard.className = "result-card status-verdadeiro";
                    outputBadge.className = "result-badge verdadeiro";
                    outputBadge.innerText = "✅ INFORMAÇÃO VERDADEIRA";
                    outputText.innerText = cleanText;
                }

                saveToHistory(text, status, cleanText);

            } catch (error) {
                loadingDiv.style.display = "none";
                outputCard.style.display = "block";
                outputCard.className = "result-card";
                outputBadge.className = "result-badge";
                outputBadge.innerText = "⚠️ Falha na Conexão";
                outputText.innerText = "Não foi possível contactar a Inteligência Artificial. Verifique se a sua chave de API está correta e tente de novo.";
            }
        });

        function saveToHistory(query, status, explanation) {
            let history = JSON.parse(localStorage.getItem('fact_history')) || [];
            history.unshift({ query, status, explanation });
            if (history.length > 3) history.pop();