Upload 18 files

Dockerfile

@@ -0,0 +1,15 @@
+FROM python:3.10-slim
+
+WORKDIR /app
+
+# Copiar dependências primeiro (melhor aproveitamento do cache do Docker)
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copiar o restante do projeto
+COPY . .
+
+# HF Spaces expõe a porta 7860
+EXPOSE 7860
+
+CMD ["python", "app.py"]

agents/__init__.py

@@ -0,0 +1 @@
+

agents/html_agent.py

@@ -0,0 +1,80 @@
+from bs4 import BeautifulSoup
+import requests
+import logging
+
+logger = logging.getLogger(__name__)
+
+class HTMLStructuralAgent:
+    def __init__(self):
+        self.name = "HTML Structural Analyzer"
+
+    def _fetch_html(self, url):
+        try:
+            # Tentar buscar a página com um timeout curto
+            response = requests.get(url, timeout=5, headers={'User-Agent': 'Mozilla/5.0'})
+            return response.text
+        except Exception as e:
+            logger.warning(f"Não foi possível buscar HTML da URL {url}: {e}")
+            return None
+
+    def analyze(self, html_content=None, url=None):
+        """
+        Analisa a estrutura do HTML em busca de anomalias comuns em phishing.
+        Pode receber o HTML diretamente ou uma URL para tentar buscar.
+        """
+        if not html_content and url:
+            html_content = self._fetch_html(url)
+
+        if not html_content:
+            return {"agent": self.name, "score": 0, "findings": ["HTML não disponível para análise"], "result": "Neutral"}
+
+        try:
+            soup = BeautifulSoup(html_content, 'html.parser')
+            score = 0
+            findings = []
+
+            # 1. Verificar campos de senha em sites sem HTTPS (se tivermos a URL)
+            if url and not url.startswith('https'):
+                if soup.find('input', {'type': 'password'}):
+                    score += 0.8
+                    findings.append("Campo de senha encontrado em conexão não segura (HTTP)")
+
+            # 2. Verificar formulários que apontam para domínios diferentes
+            forms = soup.find_all('form')
+            for form in forms:
+                action = form.get('action', '').lower()
+                if action.startswith('http') and url:
+                    from urllib.parse import urlparse
+                    action_domain = urlparse(action).netloc
+                    current_domain = urlparse(url).netloc
+                    if action_domain != current_domain:
+                        score += 0.5
+                        findings.append(f"Formulário enviando dados para domínio externo: {action_domain}")
+
+            # 3. Presença de tags estranhas ou ocultas
+            hidden_elements = soup.find_all(style=lambda value: value and ('display:none' in value.replace(' ', '') or 'visibility:hidden' in value.replace(' ', '')))
+            if len(hidden_elements) > 5:
+                score += 0.2
+                findings.append("Muitos elementos ocultos detectados (possível tentativa de ofuscação)")
+
+            # 4. Links externos massivos (muitos links apontando para fora)
+            links = soup.find_all('a', href=True)
+            if len(links) > 0:
+                external_links = [l for l in links if l['href'].startswith('http')]
+                if len(external_links) / len(links) > 0.8:
+                    score += 0.3
+                    findings.append("Alta proporção de links externos")
+
+            # Normalizar score
+            final_score = min(max(score, 0), 1.0)
+            result = "Phishing" if final_score > 0.4 else "Legítima"
+
+            return {
+                "agent": self.name,
+                "score": final_score,
+                "result": result,
+                "findings": findings
+            }
+        except Exception as e:
+            logger.error(f"Erro na análise do HTMLStructuralAgent: {e}")
+            return {"agent": self.name, "score": 0, "findings": [f"Erro ao processar HTML: {str(e)}"], "result": "Error"}

agents/orchestrator.py

@@ -0,0 +1,98 @@
+from agents.url_agent import URLLexicalAgent
+from agents.text_agent import NLPTextAgent
+from agents.html_agent import HTMLStructuralAgent
+from agents.vision_agent import VisionAgent
+import logging
+
+logger = logging.getLogger(__name__)
+
+class PhishingOrchestrator:
+    def __init__(self):
+        logger.info("Inicializando Orquestrador de Agentes...")
+        self.url_agent = URLLexicalAgent()
+        self.text_agent = NLPTextAgent()
+        self.html_agent = HTMLStructuralAgent()
+        self.vision_agent = VisionAgent()
+        logger.info("Todos os agentes foram inicializados.")
+
+    def analyze_full(self, url=None, text=None, html=None, image_data=None):
+        """
+        Executa uma análise completa usando todos os agentes disponíveis.
+        """
+        results = []
+        
+        # 1. Análise de URL
+        if url:
+            results.append(self.url_agent.analyze(url))
+        
+        # 2. Análise de Texto (NLP)
+        if text:
+            results.append(self.text_agent.analyze(text))
+        elif url and not text:
+            results.append(self.text_agent.analyze(url))
+
+        # 3. Análise de HTML
+        if html or url:
+            results.append(self.html_agent.analyze(html_content=html, url=url))
+
+        # 4. Análise de Visão (Imagem)
+        if image_data:
+            results.append(self.vision_agent.analyze(image_data=image_data))
+
+        # 5. Consolidação (Ensemble)
+        final_verdict = self._consolidate(results)
+        
+        return {
+            "verdict": final_verdict["result"],
+            "risk_score": final_verdict["score"],
+            "agent_details": results,
+            "summary": final_verdict["summary"]
+        }
+
+    def _consolidate(self, results):
+        """
+        Consolida os resultados dos agentes em uma decisão final.
+        """
+        if not results:
+            return {"result": "Desconhecido", "score": 0, "summary": "Nenhum dado fornecido."}
+
+        total_score = 0
+        weights = {
+            "URL Lexical Analyzer": 0.25,
+            "NLP Text Analyzer": 0.35,
+            "HTML Structural Analyzer": 0.25,
+            "Vision Analysis Agent": 0.15
+        }
+        
+        total_weight = 0
+        agent_results = []
+
+        for res in results:
+            agent_name = res.get("agent", "Unknown Agent")
+            weight = weights.get(agent_name, 0.25)
+            score = res.get("score", 0)
+            total_score += score * weight
+            total_weight += weight
+            agent_results.append(f"{agent_name}: {res.get('result', 'Unknown')} ({score:.2f})")
+
+        # ... rest of consolidation logic ...
+
+        # Média ponderada
+        final_score = total_score / total_weight if total_weight > 0 else 0
+        
+        # Veredito baseado no score consolidado
+        if final_score > 0.6:
+            result = "Phishing"
+            summary = "Alta probabilidade de fraude detectada por múltiplos agentes."
+        elif final_score > 0.4:
+            result = "Suspeito"
+            summary = "Padrões anômalos detectados. Recomenda-se cautela extrema."
+        else:
+            result = "Legítima"
+            summary = "A análise não encontrou evidências significativas de phishing."
+
+        return {
+            "result": result,
+            "score": final_score,
+            "summary": summary
+        }

agents/text_agent.py

@@ -0,0 +1,55 @@
+from transformers import pipeline
+import logging
+
+logger = logging.getLogger(__name__)
+
+class NLPTextAgent:
+    def __init__(self, model_name="ealvaradob/bert-finetuned-phishing"):
+        self.name = "NLP Text Analyzer"
+        self.model_name = model_name
+        self.pipe = self._load_model()
+
+    def _load_model(self):
+        try:
+            logger.info(f"Carregando modelo para {self.name}: {self.model_name}...")
+            pipe = pipeline("text-classification", model=self.model_name)
+            logger.info(f"Modelo {self.model_name} carregado com sucesso.")
+            return pipe
+        except Exception as e:
+            logger.error(f"Erro ao carregar o modelo NLP: {e}")
+            return None
+
+    def analyze(self, text):
+        """
+        Analisa o conteúdo textual (e-mail ou corpo da página) usando NLP.
+        """
+        if not text or len(text.strip()) < 10:
+            return {"agent": self.name, "score": 0, "findings": ["Texto insuficiente para análise NLP"], "result": "Neutral"}
+
+        if self.pipe is None:
+            return {"agent": self.name, "score": 0, "findings": ["Modelo NLP não disponível"], "result": "Error"}
+
+        try:
+            # Predição usando a pipeline do Transformers
+            # Nota: truncamos o texto para o limite do modelo (geralmente 512 tokens)
+            prediction = self.pipe(text[:512])[0]
+            
+            label = prediction['label'].lower()
+            confidence = prediction['score']
+            
+            # Mapeamento (depende do modelo, mas geralmente LABEL_1 ou 'phishing')
+            is_phishing = "phishing" in label or "1" in label
+            result = "Phishing" if is_phishing else "Legítima"
+            
+            # Ajustamos o score para ser positivo para phishing
+            score = confidence if is_phishing else (1 - confidence)
+
+            return {
+                "agent": self.name,
+                "score": float(score),
+                "result": result,
+                "findings": [f"Confiança do modelo ({self.model_name}): {confidence:.2%}"]
+            }
+        except Exception as e:
+            logger.error(f"Erro na análise do NLPTextAgent: {e}")
+            return {"agent": self.name, "score": 0, "findings": [f"Erro interno: {str(e)}"], "result": "Error"}

agents/url_agent.py

@@ -0,0 +1,64 @@
+import re
+from urllib.parse import urlparse
+
+class URLLexicalAgent:
+    def __init__(self):
+        self.name = "URL Lexical Analyzer"
+
+    def analyze(self, url):
+        """
+        Analisa a URL em busca de padrões lexicais suspeitos.
+        """
+        if not url:
+            return {"score": 0, "findings": ["URL não fornecida"], "result": "Neutral"}
+
+        parsed = urlparse(url)
+        netloc = parsed.netloc
+        path = parsed.path
+        
+        score = 0
+        findings = []
+
+        # 1. Verificar IPs em vez de nomes de domínio
+        ip_pattern = r"^(?:[0-9]{1,3}\.){3}[0-9]{1,3}$"
+        if re.match(ip_pattern, netloc):
+            score += 0.8
+            findings.append("Uso de endereço IP em vez de domínio")
+
+        # 2. Comprimento da URL
+        if len(url) > 75:
+            score += 0.3
+            findings.append("URL excessivamente longa")
+
+        # 3. Número de pontos no domínio (subdomínios excessivos)
+        dot_count = netloc.count('.')
+        if dot_count > 3:
+            score += 0.4
+            findings.append(f"Número elevado de subdomínios ({dot_count})")
+
+        # 4. Presença de caracteres suspeitos (@ ou hífens excessivos)
+        if "@" in url:
+            score += 0.7
+            findings.append("Uso de símbolo '@' (frequentemente usado para mascarar URLs)")
+        
+        if netloc.count('-') > 2:
+            score += 0.2
+            findings.append("Muitos hífens no domínio")
+
+        # 5. Palavras-chave suspeitas no domínio ou path
+        suspicious_keywords = ["login", "verify", "update", "secure", "account", "bank", "pay", "paypal", "signin"]
+        found_keywords = [kw for kw in suspicious_keywords if kw in url.lower()]
+        if found_keywords:
+            score += 0.2 * len(found_keywords)
+            findings.append(f"Palavras-chave suspeitas encontradas: {', '.join(found_keywords)}")
+
+        # Normalizar score (cap em 1.0)
+        final_score = min(max(score, 0), 1.0)
+        result = "Phishing" if final_score > 0.5 else "Legítima"
+
+        return {
+            "agent": self.name,
+            "score": final_score,
+            "result": result,
+            "findings": findings
+        }

agents/vision_agent.py

@@ -0,0 +1,50 @@
+import logging
+import os
+
+logger = logging.getLogger(__name__)
+
+class VisionAgent:
+    def __init__(self):
+        self.name = "Vision Analysis Agent"
+
+    def analyze(self, image_data=None, image_path=None):
+        """
+        Analisa uma imagem em busca de padrões de phishing.
+        Para esta versão inicial, focamos em metadados e detecção básica.
+        """
+        score = 0
+        findings = []
+
+        if not image_data and not image_path:
+            return {
+                "agent": self.name,
+                "score": 0,
+                "result": "Neutral",
+                "findings": ["Nenhuma imagem fornecida para análise."]
+            }
+
+        try:
+            # Lógica simulada de Visão Computacional / OCR
+            # Em uma implementação real, usaríamos bibliotecas como Tesseract, OpenCV 
+            # ou modelos como CLIP/ViT.
+            
+            # Simulação: Se for uma captura de tela de login (placeholder logic)
+            findings.append("Análise visual concluída: Padrões estruturais de página de login detectados.")
+            
+            # Exemplo de verificação de 'suspicion'
+            # (Aqui poderíamos adicionar lógica de OCR para capturar texto da imagem)
+            
+            return {
+                "agent": self.name,
+                "score": 0.2, # Score baixo por enquanto (análise básica)
+                "result": "Legítima",
+                "findings": findings
+            }
+        except Exception as e:
+            logger.error(f"Erro na análise de visão: {e}")
+            return {
+                "agent": self.name,
+                "score": 0,
+                "result": "Error",
+                "findings": [f"Erro ao processar imagem: {str(e)}"]
+            }

app.py

@@ -0,0 +1,172 @@
+from flask import Flask, request, jsonify, render_template
+from flask_cors import CORS
+from flask_sqlalchemy import SQLAlchemy
+from datetime import datetime
+import logging
+import os
+
+# Configuração de logging
+logging.basicConfig(
+    level=logging.INFO,
+    format='%(asctime)s - %(name)s - %(levelname)s - %(message)s'
+)
+logger = logging.getLogger(__name__)
+
+# Configurações
+MODEL_NAME = "ealvaradob/bert-finetuned-phishing"
+
+# Caminho absoluto para o banco de dados (melhor compatibilidade no Windows)
+basedir = os.path.abspath(os.path.dirname(__file__))
+db_path = os.path.join(basedir, 'phishing_history.db')
+
+# Inicializar o Flask
+app = Flask(__name__, 
+            static_folder='static',
+            template_folder='templates')
+CORS(app)
+
+# Banco de Dados
+app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///' + db_path.replace('\\', '/')
+app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
+db = SQLAlchemy(app)
+
+class ScannedURL(db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    url = db.Column(db.String(500), nullable=False)
+    result = db.Column(db.String(50), nullable=False)
+    confidence = db.Column(db.Float)
+    description = db.Column(db.Text)
+    timestamp = db.Column(db.DateTime, default=datetime.utcnow)
+
+    def to_dict(self):
+        return {
+            'id': self.id,
+            'url': self.url,
+            'result': self.result,
+            'confidence': round(self.confidence * 100, 2) if self.confidence else None,
+            'description': self.description,
+            'timestamp': self.timestamp.strftime('%H:%M - %d/%m/%Y')
+        }
+
+# Criar banco de dados se não existir
+with app.app_context():
+    db.create_all()
+
+from agents.orchestrator import PhishingOrchestrator
+
+# ... (logging and db config remain the same)
+
+# Inicializar o Orquestrador Multi-Agente
+orchestrator = PhishingOrchestrator()
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/predict', methods=['POST'])
+def predict():
+    try:
+        # Check for multi-part form data (for images) or JSON
+        if request.is_json:
+            data = request.get_json()
+        else:
+            data = request.form.to_dict()
+            
+        url = data.get('url', '').strip()
+        text = data.get('text', '').strip()
+        html = data.get('html', '').strip()
+        
+        image_data = None
+        if 'image' in request.files:
+            file = request.files['image']
+            if file.filename != '':
+                # Process small images in memory or save them
+                image_data = file.read()
+        elif 'image_b64' in data:
+            import base64
+            image_data = base64.b64decode(data['image_b64'].split(',')[-1])
+
+        logger.info(f"Analisando Multi-Modal: URL={url}, Text={bool(text)}, HTML={bool(html)}, Image={bool(image_data)}")
+
+        if not any([url, text, html, image_data]):
+            return jsonify({'error': 'Nenhum dado fornecido para análise.'}), 400
+
+        # Executar análise multi-modal
+        results = orchestrator.analyze_full(url=url, text=text, html=html, image_data=image_data)
+        
+        result = results['verdict']
+        confidence = results['risk_score']
+        description = results['summary']
+
+        # Salvar no Banco de Dados (usamos a URL ou um placeholder se for só texto/imagem)
+        record_url = url if url else f"Analysis: {datetime.now().strftime('%H:%M:%S')}"
+        try:
+            new_scan = ScannedURL(
+                url=record_url,
+                result=result,
+                confidence=confidence,
+                description=description
+            )
+            db.session.add(new_scan)
+            db.session.commit()
+        except Exception as db_err:
+            logger.error(f"Erro ao salvar no banco: {db_err}")
+
+        response = {
+            'result': result,
+            'url': record_url,
+            'description': description,
+            'confidence': round(confidence * 100, 2),
+            'agent_details': results['agent_details']
+        }
+        
+        return jsonify(response)
+        
+    except Exception as e:
+        logger.error(f"Erro ao processar requisição multi-modal: {e}")
+        return jsonify({'error': 'Erro interno do servidor.'}), 500
+
+@app.route('/history', methods=['GET'])
+def get_history():
+    try:
+        # Pega as últimas 10 análises
+        history = ScannedURL.query.order_by(ScannedURL.timestamp.desc()).limit(10).all()
+        return jsonify([item.to_dict() for item in history])
+    except Exception as e:
+        logger.error(f"Erro ao buscar histórico: {e}")
+        return jsonify({'error': 'Erro ao buscar histórico.'}), 500
+
+@app.route('/stats', methods=['GET'])
+def get_stats():
+    try:
+        total = ScannedURL.query.count()
+        phishing = ScannedURL.query.filter_by(result='Phishing').count()
+        suspect = ScannedURL.query.filter_by(result='Suspeito').count()
+        safe = ScannedURL.query.filter(ScannedURL.result.in_(['Legítima', 'Safe'])).count()
+        
+        # Média de confiança
+        from sqlalchemy import func
+        avg_conf = db.session.query(func.avg(ScannedURL.confidence)).scalar() or 0
+        
+        # Taxa de detecção (phishing + suspeito / total)
+        detection_rate = round(((phishing + suspect) / total * 100), 1) if total > 0 else 0
+        
+        # Últimas 7 análises para o mini-gráfico
+        recent = ScannedURL.query.order_by(ScannedURL.timestamp.desc()).limit(7).all()
+        timeline = [{'date': r.timestamp.strftime('%d/%m'), 'result': r.result} for r in reversed(recent)]
+        
+        return jsonify({
+            'total': total,
+            'phishing': phishing,
+            'suspect': suspect,
+            'safe': safe,
+            'detection_rate': detection_rate,
+            'avg_confidence': round(avg_conf * 100, 1),
+            'timeline': timeline
+        })
+    except Exception as e:
+        logger.error(f"Erro ao buscar estatísticas: {e}")
+        return jsonify({'error': 'Erro ao buscar estatísticas.'}), 500
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=7860, debug=False)

requirements.txt

@@ -0,0 +1,5 @@
+flask
+flask-cors
+flask-sqlalchemy
+requests
+beautifulsoup4

static/script.js

@@ -0,0 +1,447 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const urlForm = document.getElementById('url-form');
+    const urlInput = document.getElementById('url-input');
+    const textInput = document.getElementById('text-input');
+    const htmlInput = document.getElementById('html-input');
+    const imageUpload = document.getElementById('image-upload');
+    const imagePreview = document.getElementById('image-preview');
+    const previewImg = document.getElementById('preview-img');
+    const removeImageBtn = document.getElementById('remove-image');
+
+    const analyzeBtn = document.getElementById('analyze-btn');
+    const loadingSpinner = document.getElementById('loading');
+    const resultCard = document.getElementById('result-card');
+
+    const omniPlusBtn = document.getElementById('omni-plus-btn');
+    const omniMenu = document.getElementById('omni-menu');
+    const omniMenuItems = document.querySelectorAll('.omni-menu-item');
+
+    const sidebar = document.querySelector('.sidebar');
+    const sidebarToggle = document.getElementById('sidebar-toggle');
+    const navAnalyzer = document.getElementById('nav-analyzer');
+
+    let currentMode = 'url';
+    let selectedFile = null;
+
+    // --- Sidebar & Navigation ---
+    const overlay = document.createElement('div');
+    overlay.className = 'sidebar-overlay';
+    document.body.appendChild(overlay);
+
+    // All sidebar toggle buttons (analyzer page + stats page)
+    document.querySelectorAll('.sidebar-toggle-btn').forEach(btn => {
+        btn.addEventListener('click', () => {
+            const isActive = sidebar.classList.toggle('active');
+            overlay.style.display = isActive ? 'block' : 'none';
+        });
+    });
+
+    overlay.addEventListener('click', () => {
+        sidebar.classList.remove('active');
+        overlay.style.display = 'none';
+    });
+
+    // Close button inside sidebar
+    const sidebarClose = document.getElementById('sidebar-close');
+    if (sidebarClose) {
+        sidebarClose.addEventListener('click', () => {
+            sidebar.classList.remove('active');
+            overlay.style.display = 'none';
+        });
+    }
+
+    if (navAnalyzer) {
+        navAnalyzer.addEventListener('click', (e) => {
+            e.preventDefault();
+            showPage('analyzer');
+            if (window.innerWidth <= 1024) sidebar.classList.remove('active');
+            overlay.style.display = 'none';
+        });
+    }
+
+    // --- Page Navigation ---
+    const analyzerPage = document.querySelector('.main-content:not(#stats-page)');
+    const statsPage = document.getElementById('stats-page');
+    const navStats = document.getElementById('nav-stats');
+    const statsBackBtn = document.getElementById('stats-back-btn');
+
+    function showPage(page) {
+        if (page === 'stats') {
+            analyzerPage.classList.add('d-none');
+            statsPage.classList.remove('d-none');
+            navAnalyzer.classList.remove('active');
+            navStats.classList.add('active');
+            fetchStats();
+        } else {
+            statsPage.classList.add('d-none');
+            analyzerPage.classList.remove('d-none');
+            navStats.classList.remove('active');
+            navAnalyzer.classList.add('active');
+        }
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+    }
+
+    if (navStats) {
+        navStats.addEventListener('click', (e) => {
+            e.preventDefault();
+            showPage('stats');
+            if (window.innerWidth <= 1024) sidebar.classList.remove('active');
+            overlay.style.display = 'none';
+        });
+    }
+
+    if (statsBackBtn) {
+        statsBackBtn.addEventListener('click', () => showPage('analyzer'));
+    }
+
+    // --- Omni-Menu Logic ---
+    omniPlusBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        omniMenu.classList.toggle('active');
+    });
+
+    document.addEventListener('click', () => {
+        omniMenu.classList.remove('active');
+    });
+
+    omniMenuItems.forEach(item => {
+        item.addEventListener('click', () => {
+            const mode = item.dataset.mode;
+            if (mode) switchMode(mode);
+            omniMenu.classList.remove('active');
+        });
+    });
+
+    function switchMode(mode) {
+        currentMode = mode;
+
+        // Hide all
+        urlInput.classList.add('d-none');
+        textInput.classList.add('d-none');
+        htmlInput.classList.add('d-none');
+
+        // Remove 'required' from all
+        urlInput.removeAttribute('required');
+        textInput.removeAttribute('required');
+        htmlInput.removeAttribute('required');
+
+        // Show selected
+        if (mode === 'url') {
+            urlInput.classList.remove('d-none');
+            urlInput.setAttribute('required', '');
+            urlInput.focus();
+        } else if (mode === 'text') {
+            textInput.classList.remove('d-none');
+            textInput.setAttribute('required', '');
+            textInput.focus();
+        } else if (mode === 'html') {
+            htmlInput.classList.remove('d-none');
+            htmlInput.setAttribute('required', '');
+            htmlInput.focus();
+        }
+    }
+
+    // --- File/Image Handling ---
+    imageUpload.addEventListener('change', (e) => {
+        const file = e.target.files[0];
+        if (file && file.type.startsWith('image/')) {
+            selectedFile = file;
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                previewImg.src = e.target.result;
+                imagePreview.classList.remove('d-none');
+            };
+            reader.readAsDataURL(file);
+        }
+    });
+
+    removeImageBtn.addEventListener('click', () => {
+        selectedFile = null;
+        imageUpload.value = '';
+        imagePreview.classList.add('d-none');
+    });
+
+    // --- Analysis Submission ---
+    urlForm.addEventListener('submit', async (e) => {
+        e.preventDefault();
+
+        const url = urlInput.value.trim();
+        const text = textInput.value.trim();
+        const html = htmlInput.value.trim();
+
+        if (currentMode === 'url' && !url && !selectedFile) return;
+        if (currentMode === 'text' && !text) return;
+        if (currentMode === 'html' && !html) return;
+
+        // Reset UI
+        resultCard.style.display = 'none';
+        loadingSpinner.style.display = 'block';
+        analyzeBtn.disabled = true;
+
+        try {
+            const formData = new FormData();
+            if (currentMode === 'url' && url) formData.append('url', url);
+            if (currentMode === 'text' && text) formData.append('text', text);
+            if (currentMode === 'html' && html) formData.append('html', html);
+            if (selectedFile) formData.append('image', selectedFile);
+
+            const response = await fetch('/predict', {
+                method: 'POST',
+                body: formData // Fetch automatically sets content-type for FormData
+            });
+
+            const data = await response.json();
+
+            if (data.error) {
+                showError(data.error);
+            } else {
+                showResult(data);
+                fetchHistory();
+            }
+        } catch (error) {
+            showError('Erro ao conectar com o serviço de análise multi-modal.');
+            console.error(error);
+        } finally {
+            loadingSpinner.style.display = 'none';
+            analyzeBtn.disabled = false;
+        }
+    });
+
+    function showResult(data) {
+        const isPhishing = data.result === 'Phishing';
+        const isSuspect = data.result === 'Suspeito';
+        const colorClass = isPhishing ? 'is-phishing' : (isSuspect ? 'text-warning' : 'is-safe');
+        const borderColor = isPhishing ? 'var(--danger)' : (isSuspect ? 'orange' : 'var(--success)');
+        const icon = isPhishing ? 'fa-shield-virus' : (isSuspect ? 'fa-exclamation-triangle' : 'fa-shield-check');
+        const statusText = isPhishing ? 'Potencial Phishing' : (isSuspect ? 'Análise Suspeita' : 'URL Legítima');
+
+        let agentsHtml = '';
+        if (data.agent_details) {
+            agentsHtml = `
+                <div class="mt-4">
+                    <h6 class="text-muted mb-3" style="font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px;">Insights dos Agentes</h6>
+                    <div class="d-flex flex-column gap-2">
+                        ${data.agent_details.map(agent => `
+                            <div class="glass p-2 px-3 rounded-3" style="border-left: 3px solid ${agent.result === 'Phishing' ? 'var(--danger)' : 'var(--success)'}; font-size: 0.85rem;">
+                                <div class="d-flex justify-content-between align-items-center mb-1">
+                                    <strong>${agent.agent}</strong>
+                                    <span class="badge ${agent.result === 'Phishing' ? 'bg-danger' : (agent.result === 'Legítima' || agent.result === 'Safe' ? 'bg-success' : 'bg-secondary')}" style="font-size: 0.65rem;">${agent.result}</span>
+                                </div>
+                                ${agent.findings && agent.findings.length > 0 ? `
+                                    <ul class="mb-0 ps-3 text-muted" style="font-size: 0.75rem;">
+                                        ${agent.findings.map(f => `<li>${f}</li>`).join('')}
+                                    </ul>
+                                ` : ''}
+                            </div>
+                        `).join('')}
+                    </div>
+                </div>
+            `;
+        }
+
+        resultCard.innerHTML = `
+            <div class="result-header">
+                <div class="status-icon glass ${colorClass}">
+                    <i class="fas ${icon}"></i>
+                </div>
+                <div>
+                    <h3 style="color: ${borderColor}">${statusText}</h3>
+                    <p class="text-muted" style="font-size: 0.9rem; word-break: break-all;">${data.url}</p>
+                </div>
+            </div>
+            ${data.confidence ? `
+                <div class="confidence-meter mt-3">
+                    <div class="d-flex justify-content-between mb-2">
+                        <span>Score de Risco Consolidado</span>
+                        <span>${data.confidence}%</span>
+                    </div>
+                    <div style="height: 6px; background: rgba(255,255,255,0.1); border-radius: 10px; overflow: hidden;">
+                        <div style="width: ${data.confidence}%; height: 100%; background: ${borderColor}; transition: width 1s ease-out;"></div>
+                    </div>
+                </div>
+            ` : ''}
+            <div class="mt-4 p-3 glass" style="border-radius: 12px; font-size: 0.85rem; color: var(--text-muted); border-left: 4px solid var(--primary);">
+                <i class="fas fa-info-circle me-2"></i>
+                Decisão consolidada: <strong>${data.description}</strong>
+            </div>
+            ${agentsHtml}
+        `;
+        resultCard.style.display = 'block';
+    }
+
+    function showError(message) {
+        resultCard.innerHTML = `
+            <div class="alert alert-danger glass" style="border-color: var(--danger); color: var(--danger);">
+                <i class="fas fa-exclamation-triangle me-2"></i> ${message}
+            </div>
+        `;
+        resultCard.style.display = 'block';
+    }
+
+    // --- History Logic ---
+    const historyContainer = document.getElementById('history-container');
+    const viewMoreContainer = document.getElementById('view-more-container');
+    const viewMoreBtn = document.getElementById('view-more-btn');
+
+    let allHistoryItems = [];
+    let showingAll = false;
+
+    async function fetchHistory() {
+        try {
+            const response = await fetch('/history');
+            const data = await response.json();
+            if (!data.error) {
+                allHistoryItems = data;
+                renderHistory();
+            }
+        } catch (error) {
+            console.error('Erro ao buscar histórico:', error);
+        }
+    }
+
+    function renderHistory() {
+        if (!allHistoryItems || allHistoryItems.length === 0) {
+            historyContainer.innerHTML = `
+                <div class="text-center py-5 text-muted glass rounded-4">
+                    <i class="fas fa-search mb-2 d-block fs-3"></i>
+                    <p class="mb-0">Nenhuma busca recente encontrada.</p>
+                </div>
+            `;
+            viewMoreContainer.classList.add('d-none');
+            return;
+        }
+
+        const itemsToShow = showingAll ? allHistoryItems : allHistoryItems.slice(0, 2);
+
+        historyContainer.innerHTML = itemsToShow.map((item, index) => {
+            const isPhishing = item.result === 'Phishing';
+            const isSuspect = item.result === 'Suspeito';
+            const colorClass = isPhishing ? 'phishing' : (isSuspect ? 'suspect' : 'safe');
+            const confidenceText = item.confidence ? `${item.confidence}%` : 'N/A';
+            const desc = item.description || 'Sem detalhes disponíveis para esta análise.';
+
+            return `
+                <div class="history-card glass rounded-4 mb-3">
+                    <div class="history-item" onclick="toggleHistoryDetail(${index})">
+                        <div class="history-info">
+                            <span class="history-url">${item.url}</span>
+                            <div class="history-meta">
+                                <span class="history-status-dot dot-${colorClass}"></span>
+                                <span>${item.result}</span>
+                                <span><i class="far fa-clock me-1"></i>${item.timestamp}</span>
+                            </div>
+                        </div>
+                        <div class="d-flex align-items-center gap-2">
+                            <div class="history-badge badge-${colorClass}">
+                                ${item.result}
+                            </div>
+                            <i class="fas fa-chevron-down history-chevron" id="chevron-${index}" style="color: var(--text-muted); font-size: 0.7rem; transition: transform 0.3s ease;"></i>
+                        </div>
+                    </div>
+                    <div class="history-detail" id="detail-${index}" style="display: none;">
+                        <div class="detail-divider"></div>
+                        <div class="detail-content">
+                            <div class="detail-row">
+                                <div class="detail-label"><i class="fas fa-shield-alt me-2"></i>Resultado</div>
+                                <div class="detail-value">
+                                    <span class="history-badge badge-${colorClass}">${item.result}</span>
+                                    <span class="ms-2" style="font-size: 0.85rem; color: var(--text-muted);">Confiança: <strong>${confidenceText}</strong></span>
+                                </div>
+                            </div>
+                            <div class="detail-row">
+                                <div class="detail-label"><i class="fas fa-brain me-2"></i>Análise da IA</div>
+                                <div class="detail-description">${desc}</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            `;
+        }).join('');
+
+        // Show/hide view more button
+        if (allHistoryItems.length > 2) {
+            viewMoreContainer.classList.remove('d-none');
+            viewMoreBtn.innerHTML = showingAll ?
+                'Ver Menos <i class="fas fa-chevron-up ms-1"></i>' :
+                `Ver Mais (${allHistoryItems.length - 2} extras) <i class="fas fa-chevron-down ms-1"></i>`;
+        } else {
+            viewMoreContainer.classList.add('d-none');
+        }
+    }
+
+    viewMoreBtn.addEventListener('click', () => {
+        showingAll = !showingAll;
+        renderHistory();
+    });
+
+    // --- Statistics Logic ---
+    async function fetchStats() {
+        try {
+            const response = await fetch('/stats');
+            const data = await response.json();
+            if (!data.error) renderStats(data);
+        } catch (error) {
+            console.error('Erro ao buscar estatísticas:', error);
+        }
+    }
+
+    function renderStats(data) {
+        // KPI Values
+        document.getElementById('stat-total').textContent = data.total;
+        document.getElementById('stat-phishing').textContent = data.phishing;
+        document.getElementById('stat-safe').textContent = data.safe;
+        document.getElementById('stat-rate').textContent = data.detection_rate + '%';
+
+        // Breakdown Bars
+        const total = data.total || 1;
+        const phishPct = (data.phishing / total * 100).toFixed(0);
+        const suspPct = (data.suspect / total * 100).toFixed(0);
+        const safePct = (data.safe / total * 100).toFixed(0);
+
+        setTimeout(() => {
+            document.getElementById('bar-phishing').style.width = phishPct + '%';
+            document.getElementById('bar-suspect').style.width = suspPct + '%';
+            document.getElementById('bar-safe').style.width = safePct + '%';
+        }, 100);
+
+        document.getElementById('bar-phishing-val').textContent = data.phishing;
+        document.getElementById('bar-suspect-val').textContent = data.suspect;
+        document.getElementById('bar-safe-val').textContent = data.safe;
+
+        // Timeline
+        const timelineEl = document.getElementById('stats-timeline');
+        if (data.timeline && data.timeline.length > 0) {
+            timelineEl.innerHTML = data.timeline.map(item => {
+                const isPhishing = item.result === 'Phishing';
+                const isSuspect = item.result === 'Suspeito';
+                const color = isPhishing ? 'var(--danger)' : (isSuspect ? '#f59e0b' : 'var(--success)');
+                const icon = isPhishing ? 'fa-exclamation-triangle' : (isSuspect ? 'fa-question-circle' : 'fa-check-circle');
+                return `
+                    <div class="timeline-item" style="border-left-color: ${color};">
+                        <i class="fas ${icon}" style="color: ${color};"></i>
+                        <span class="text-muted">${item.date}</span>
+                        <span style="color: ${color}; font-weight: 600;">${item.result}</span>
+                    </div>
+                `;
+            }).join('');
+        } else {
+            timelineEl.innerHTML = '<p class="text-muted text-center mb-0">Nenhuma análise registrada ainda.</p>';
+        }
+    }
+
+    // --- Toggle History Detail ---
+    window.toggleHistoryDetail = function (index) {
+        const detail = document.getElementById(`detail-${index}`);
+        const chevron = document.getElementById(`chevron-${index}`);
+        if (!detail) return;
+
+        const isOpen = detail.style.display !== 'none';
+        detail.style.display = isOpen ? 'none' : 'block';
+        if (chevron) {
+            chevron.style.transform = isOpen ? 'rotate(0deg)' : 'rotate(180deg)';
+        }
+    };
+
+    // Initialize
+    fetchHistory();
+});

static/style.css

@@ -0,0 +1,625 @@
+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap');
+
+:root {
+    --primary: #2563eb;
+    --primary-hover: #1d4ed8;
+    --bg-dark: #f1f5f9;
+    --card-bg: rgba(255, 255, 255, 0.85);
+    --text-main: #1e293b;
+    --text-muted: #64748b;
+    --danger: #ef4444;
+    --success: #22c55e;
+    --border: rgba(0, 0, 0, 0.08);
+    --glass-bg: rgba(255, 255, 255, 0.7);
+    --glass-border: rgba(0, 0, 0, 0.08);
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    background-color: var(--bg-dark);
+    color: var(--text-main);
+    font-family: 'Outfit', sans-serif;
+    min-height: 100vh;
+    display: flex;
+    overflow-x: hidden;
+}
+
+/* Glassmorphism Classes */
+.glass {
+    background: var(--glass-bg);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border: 1px solid var(--glass-border);
+}
+
+.glass-card {
+    background: var(--card-bg);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+    border: 1px solid var(--border);
+    border-radius: 24px;
+    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.06);
+}
+
+/* Side Navigation */
+.sidebar {
+    width: 280px;
+    height: 100vh;
+    position: fixed;
+    left: 0;
+    top: 0;
+    padding: 2rem;
+    display: flex;
+    flex-direction: column;
+    z-index: 1000;
+    transform: translateX(-100%);
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.sidebar.active {
+    transform: translateX(0);
+}
+
+.sidebar-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.3);
+    backdrop-filter: blur(4px);
+    z-index: 999;
+    display: none;
+    animation: fadeIn 0.3s ease;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+.logo {
+    /* ... existing logo styles ... */
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 3rem;
+    color: var(--primary);
+}
+
+.nav-links {
+    list-style: none;
+    flex-grow: 1;
+}
+
+.nav-item {
+    margin-bottom: 0.5rem;
+}
+
+.nav-link {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 16px;
+    color: var(--text-muted);
+    text-decoration: none;
+    border-radius: 12px;
+    transition: all 0.3s ease;
+}
+
+.nav-link:hover,
+.nav-link.active {
+    background: var(--primary);
+    color: white;
+}
+
+/* Main Content */
+.main-content {
+    margin-left: 0;
+    width: 100%;
+    flex-grow: 1;
+    padding: 2.5rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    min-height: 100vh;
+}
+
+.hero-section {
+    max-width: 800px;
+    width: 100%;
+    text-align: center;
+    margin-top: 10vh;
+}
+
+h1 {
+    font-size: 3.5rem;
+    font-weight: 700;
+    margin-bottom: 1.5rem;
+    background: linear-gradient(135deg, #1e293b 0%, #2563eb 100%);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.analyzer-container {
+    width: 100%;
+    max-width: 800px;
+    margin: 2rem auto 0;
+}
+
+.omni-input-wrapper {
+    display: flex;
+    align-items: flex-end;
+    gap: 8px;
+    padding: 8px;
+    background: var(--card-bg);
+    border: 1px solid var(--border);
+    border-radius: 24px;
+    transition: all 0.3s ease;
+    position: relative;
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.omni-input-wrapper:focus-within {
+    border-color: var(--primary);
+    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
+}
+
+.btn-omni-plus {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    border: none;
+    background: var(--glass-bg);
+    color: var(--text-main);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    margin-bottom: 4px;
+}
+
+.btn-omni-plus:hover {
+    background: rgba(0, 0, 0, 0.06);
+    transform: rotate(90deg);
+}
+
+.omni-menu {
+    position: absolute;
+    bottom: calc(100% + 12px);
+    left: 8px;
+    width: 220px;
+    border-radius: 16px;
+    padding: 8px;
+    display: none;
+    flex-direction: column;
+    z-index: 1001;
+    animation: menuFadeIn 0.2s ease-out;
+}
+
+@keyframes menuFadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.omni-menu.active {
+    display: flex;
+}
+
+.omni-menu-item {
+    width: 100%;
+    padding: 10px 16px;
+    border-radius: 10px;
+    border: none;
+    background: transparent;
+    color: var(--text-main);
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    font-size: 0.9rem;
+    cursor: pointer;
+    transition: background 0.2s ease;
+    text-align: left;
+}
+
+.omni-menu-item:hover {
+    background: rgba(0, 0, 0, 0.05);
+}
+
+.omni-field {
+    width: 100%;
+    background: transparent !important;
+    border: none !important;
+    padding: 10px 16px;
+    color: var(--text-main) !important;
+    font-size: 1rem;
+    outline: none !important;
+    resize: none;
+}
+
+.btn-omni-send {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    border: none;
+    background: var(--primary);
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    margin-bottom: 4px;
+}
+
+.btn-omni-send:hover {
+    background: var(--primary-hover);
+    transform: scale(1.05);
+}
+
+.btn-omni-send:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.is-phishing {
+    color: var(--danger);
+    border-color: var(--danger);
+}
+
+.is-safe {
+    color: var(--success);
+    border-color: var(--success);
+}
+
+
+
+/* History Section */
+.history-section {
+    margin-top: 4rem;
+    padding-bottom: 5rem;
+    animation: fadeIn 1s ease;
+}
+
+.history-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1.25rem 1.5rem;
+    border-radius: 16px;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    cursor: pointer;
+    border-left: 4px solid transparent;
+}
+
+.history-item:hover {
+    background: rgba(0, 0, 0, 0.03);
+    transform: translateX(8px);
+    border-color: var(--primary);
+}
+
+.btn-view-more {
+    background: var(--glass-bg);
+    border: 1px solid var(--border);
+    color: var(--text-muted);
+    padding: 8px 24px;
+    border-radius: 100px;
+    font-size: 0.85rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    margin-top: 1rem;
+}
+
+.btn-view-more:hover {
+    background: rgba(0, 0, 0, 0.04);
+    color: var(--text-main);
+    border-color: var(--primary);
+}
+
+.history-info {
+    flex-grow: 1;
+    overflow: hidden;
+}
+
+.history-url {
+    font-weight: 500;
+    color: var(--text-main);
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-bottom: 2px;
+}
+
+.history-meta {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.history-status-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+}
+
+.dot-phishing {
+    background-color: var(--danger);
+    box-shadow: 0 0 10px var(--danger);
+}
+
+.dot-safe {
+    background-color: var(--success);
+    box-shadow: 0 0 10px var(--success);
+}
+
+.dot-suspect {
+    background-color: #f59e0b;
+    box-shadow: 0 0 10px #f59e0b;
+}
+
+.history-badge {
+    padding: 4px 12px;
+    border-radius: 100px;
+    font-size: 0.7rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.badge-phishing {
+    background: rgba(239, 68, 68, 0.1);
+    color: var(--danger);
+    border: 1px solid rgba(239, 68, 68, 0.2);
+}
+
+.badge-safe {
+    background: rgba(34, 197, 94, 0.1);
+    color: var(--success);
+    border: 1px solid rgba(34, 197, 94, 0.2);
+}
+
+.badge-suspect {
+    background: rgba(245, 158, 11, 0.1);
+    color: #f59e0b;
+    border: 1px solid rgba(245, 158, 11, 0.2);
+}
+
+
+/* ====== History Detail Box ====== */
+.history-detail {
+    animation: detailFadeIn 0.25s ease-out;
+    overflow: hidden;
+}
+
+@keyframes detailFadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(-6px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.detail-divider {
+    height: 1px;
+    background: linear-gradient(to right, transparent, var(--border), transparent);
+    margin: 0 1.5rem;
+}
+
+.detail-content {
+    padding: 1.25rem 1.5rem 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    background: linear-gradient(135deg, rgba(37, 99, 235, 0.03) 0%, rgba(255, 255, 255, 0.5) 100%);
+    border-radius: 0 0 16px 16px;
+}
+
+.detail-row {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.detail-label {
+    font-size: 0.72rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 1.2px;
+    color: var(--text-muted);
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.detail-label i {
+    color: var(--primary);
+    font-size: 0.8rem;
+}
+
+.detail-value {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 8px;
+    font-size: 0.9rem;
+}
+
+.detail-description {
+    font-size: 0.875rem;
+    color: var(--text-main);
+    line-height: 1.65;
+    background: rgba(255, 255, 255, 0.6);
+    border: 1px solid var(--border);
+    border-left: 3px solid var(--primary);
+    border-radius: 10px;
+    padding: 0.75rem 1rem;
+    backdrop-filter: blur(6px);
+}
+
+/* ====== Statistics Page ====== */
+.stat-card {
+    padding: 1.5rem 1rem;
+    border-radius: 20px;
+    transition: all 0.3s ease;
+}
+
+.stat-card:hover {
+    transform: translateY(-4px);
+}
+
+.stat-icon {
+    width: 48px;
+    height: 48px;
+    border-radius: 14px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.2rem;
+    margin: 0 auto 1rem;
+}
+
+.stat-label {
+    font-size: 0.65rem;
+    font-weight: 600;
+    letter-spacing: 1.5px;
+    color: var(--text-muted);
+    margin-bottom: 0.25rem;
+}
+
+.stat-value {
+    font-size: 2rem;
+    font-weight: 700;
+    margin: 0;
+    background: linear-gradient(135deg, #1e293b, var(--primary));
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.stat-bar-label {
+    width: 70px;
+    font-size: 0.8rem;
+    color: var(--text-muted);
+    flex-shrink: 0;
+}
+
+.stat-bar-track {
+    flex-grow: 1;
+    height: 8px;
+    background: rgba(0, 0, 0, 0.05);
+    border-radius: 10px;
+    overflow: hidden;
+}
+
+.stat-bar-fill {
+    height: 100%;
+    border-radius: 10px;
+    transition: width 1s ease-out;
+}
+
+.stat-bar-value {
+    width: 30px;
+    text-align: right;
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: var(--text-main);
+}
+
+.timeline-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 10px 16px;
+    border-radius: 12px;
+    background: rgba(0, 0, 0, 0.02);
+    border-left: 3px solid transparent;
+    font-size: 0.85rem;
+}
+
+/* Animations & Responsive */
+.loading-spinner {
+    display: none;
+    width: 50px;
+    height: 50px;
+    border: 3px solid rgba(0, 0, 0, 0.08);
+    border-radius: 50%;
+    border-top-color: var(--primary);
+    animation: spin 1s ease-in-out infinite;
+    margin-top: 2rem;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+@media (max-width: 1024px) {
+    .sidebar {
+        width: 80px;
+        padding: 1.5rem 1rem;
+    }
+
+    .sidebar .logo span,
+    .sidebar .nav-link span {
+        display: none;
+    }
+
+    .main-content {
+        margin-left: 80px;
+    }
+}
+
+@media (max-width: 640px) {
+    .sidebar {
+        display: none;
+    }
+
+    .main-content {
+        margin-left: 0;
+        padding: 1.5rem;
+    }
+
+    h1 {
+        font-size: 2.5rem;
+    }
+
+    .input-wrapper {
+        border-radius: 20px;
+        flex-direction: column;
+    }
+
+    .btn-analyze {
+        width: 100%;
+        border-radius: 12px;
+    }
+}

templates/index.html

@@ -0,0 +1,374 @@
+<!DOCTYPE html>
+<html lang="pt-BR">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>IA-Phishing | Detector de Sites Maliciosos</title>
+
+    <!-- CSS Dependencies -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+</head>
+
+<body>
+
+    <nav class="sidebar glass">
+        <div class="d-flex justify-content-between align-items-center mb-4">
+            <div class="logo mb-0">
+                <i class="fas fa-microchip"></i>
+                <span>IA-Phishing</span>
+            </div>
+            <button id="sidebar-close" class="glass rounded-circle d-flex align-items-center justify-content-center"
+                style="width: 36px; height: 36px; border: 1px solid var(--border); color: var(--text-muted); cursor: pointer; flex-shrink: 0;">
+                <i class="fas fa-times"></i>
+            </button>
+        </div>
+
+        <ul class="nav-links">
+            <li class="nav-item">
+                <a href="#" id="nav-analyzer" class="nav-link active">
+                    <i class="fas fa-search-shield"></i>
+                    <span>Analisador</span>
+                </a>
+            </li>
+
+            <li class="nav-item">
+                <a href="#" id="nav-stats" class="nav-link">
+                    <i class="fas fa-chart-line"></i>
+                    <span>Estatísticas</span>
+                </a>
+            </li>
+        </ul>
+
+        <div class="mt-auto">
+            <div class="glass p-3 rounded-4" style="font-size: 0.8rem;">
+                <p class="mb-2 text-muted">Proteção ativa via IA</p>
+                <div class="d-flex align-items-center gap-2">
+                    <div style="width: 8px; height: 8px; background: #22c55e; border-radius: 50%;"></div>
+                    <span>Sistema Online</span>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <main class="main-content">
+        <header class="w-100 d-flex justify-content-between align-items-center mb-5">
+            <button id="sidebar-toggle"
+                class="sidebar-toggle-btn glass rounded-circle d-flex align-items-center justify-content-center"
+                style="width: 45px; height: 45px; border: 1px solid var(--border); color: var(--text-main); cursor: pointer;">
+                <i class="fas fa-bars"></i>
+            </button>
+            <div class="d-flex align-items-center gap-3">
+                <div class="glass p-2 px-3 rounded-pill" style="font-size: 0.85rem;">
+                    <i class="fas fa-globe me-2"></i> Português
+                </div>
+                <div class="glass rounded-circle p-2 d-flex align-items-center justify-content-center"
+                    style="width: 40px; height: 40px;">
+                    <i class="fas fa-user-circle"></i>
+                </div>
+            </div>
+        </header>
+
+        <section class="hero-section">
+            <h1>Como posso ajudar na sua <span style="color: var(--primary)">segurança?</span></h1>
+            <p class="text-muted mb-5">Analise URLs, textos, códigos ou imagens instantaneamente com IA.</p>
+
+            <div class="analyzer-container">
+                <div class="omni-input-wrapper glass">
+                    <div class="dropdown">
+                        <button class="btn-omni-plus" id="omni-plus-btn">
+                            <i class="fas fa-plus"></i>
+                        </button>
+                        <div class="omni-menu glass shadow-lg" id="omni-menu">
+                            <button class="omni-menu-item" data-mode="url">
+                                <i class="fas fa-link text-primary"></i>
+                                <span>Analisar URL/Link</span>
+                            </button>
+                            <button class="omni-menu-item" data-mode="text">
+                                <i class="fas fa-file-alt text-success"></i>
+                                <span>Conteúdo de E-mail</span>
+                            </button>
+                            <button class="omni-menu-item" data-mode="html">
+                                <i class="fas fa-code text-warning"></i>
+                                <span>Código HTML</span>
+                            </button>
+                            <label class="omni-menu-item mb-0" style="cursor: pointer;">
+                                <i class="fas fa-image text-danger"></i>
+                                <span>Carregar Imagem</span>
+                                <input type="file" id="image-upload" accept="image/*" class="d-none">
+                            </label>
+                        </div>
+                    </div>
+
+                    <form id="url-form" class="w-100 d-flex gap-2">
+                        <div class="input-dynamic-area w-100">
+                            <input type="text" id="url-input" class="omni-field"
+                                placeholder="Insira o link para análise..." required autocomplete="off">
+                            <textarea id="text-input" class="omni-field d-none" rows="3"
+                                placeholder="Cole aqui o conteúdo suspeito..."></textarea>
+                            <textarea id="html-input" class="omni-field d-none" rows="3"
+                                placeholder="Cole aqui o código HTML..."></textarea>
+
+                            <div id="image-preview" class="d-none mt-2 p-2 glass rounded-3">
+                                <div class="d-flex align-items-center justify-content-between mb-2">
+                                    <span class="text-muted small"><i class="fas fa-image me-1"></i> Imagem
+                                        selecionada</span>
+                                    <button type="button" class="btn-close btn-close-white small"
+                                        id="remove-image"></button>
+                                </div>
+                                <img src="" id="preview-img" style="max-height: 150px; border-radius: 8px;">
+                            </div>
+                        </div>
+                        <button type="submit" id="analyze-btn" class="btn-omni-send">
+                            <i class="fas fa-arrow-up"></i>
+                        </button>
+                    </form>
+                </div>
+
+                <div id="loading" class="loading-spinner mx-auto"></div>
+
+                <div id="result-card" class="result-card glass-card text-start">
+                    <!-- Result content injected via JS -->
+                </div>
+            </div>
+        </section>
+
+        <section id="history-section" class="history-section mt-5 w-100" style="max-width: 800px;">
+            <div class="d-flex justify-content-between align-items-center mb-4">
+                <h2 class="h4 mb-0"><i class="fas fa-history me-2 text-primary"></i> Buscas Recentes</h2>
+                <span class="badge glass text-muted fw-normal" style="font-size: 0.75rem;">Últimas 10 análises</span>
+            </div>
+
+            <div id="history-container" class="history-list d-flex flex-column gap-3">
+                <!-- History items injected via JS -->
+                <div class="text-center py-5 text-muted glass rounded-4">
+                    <i class="fas fa-search mb-2 d-block fs-3"></i>
+                    <p class="mb-0">Nenhuma busca recente encontrada.</p>
+                </div>
+            </div>
+
+            <div id="view-more-container" class="text-center mt-3 d-none">
+                <button id="view-more-btn" class="btn-view-more">
+                    Ver Mais <i class="fas fa-chevron-down ms-1"></i>
+                </button>
+            </div>
+        </section>
+
+
+    </main>
+
+    <!-- Stats Page (hidden by default) -->
+    <main class="main-content d-none" id="stats-page">
+        <header class="w-100 d-flex justify-content-between align-items-center mb-5">
+            <div class="d-flex align-items-center gap-2">
+                <button class="sidebar-toggle-btn glass rounded-circle d-flex align-items-center justify-content-center"
+                    style="width: 45px; height: 45px; border: 1px solid var(--border); color: var(--text-main); cursor: pointer;">
+                    <i class="fas fa-bars"></i>
+                </button>
+                <button id="stats-back-btn"
+                    class="glass rounded-circle d-flex align-items-center justify-content-center"
+                    style="width: 45px; height: 45px; border: 1px solid var(--border); color: var(--text-main); cursor: pointer;"
+                    title="Voltar ao Analisador">
+                    <i class="fas fa-arrow-left"></i>
+                </button>
+            </div>
+            <h2 class="h5 mb-0"><i class="fas fa-chart-line me-2 text-primary"></i> Estatísticas</h2>
+            <div></div>
+        </header>
+
+        <div class="stats-container" style="max-width: 800px; margin: 0 auto;">
+            <div class="row g-4 mb-4">
+                <div class="col-6 col-md-3">
+                    <div class="stat-card glass text-center">
+                        <div class="stat-icon" style="background: rgba(37, 99, 235, 0.15); color: var(--primary);">
+                            <i class="fas fa-chart-bar"></i>
+                        </div>
+                        <p class="stat-label">TOTAL DE ANÁLISES</p>
+                        <h3 class="stat-value" id="stat-total">0</h3>
+                    </div>
+                </div>
+                <div class="col-6 col-md-3">
+                    <div class="stat-card glass text-center">
+                        <div class="stat-icon" style="background: rgba(239, 68, 68, 0.15); color: var(--danger);">
+                            <i class="fas fa-exclamation-triangle"></i>
+                        </div>
+                        <p class="stat-label">PHISHING DETECTADO</p>
+                        <h3 class="stat-value" id="stat-phishing">0</h3>
+                    </div>
+                </div>
+                <div class="col-6 col-md-3">
+                    <div class="stat-card glass text-center">
+                        <div class="stat-icon" style="background: rgba(34, 197, 94, 0.15); color: var(--success);">
+                            <i class="fas fa-check-circle"></i>
+                        </div>
+                        <p class="stat-label">CONTEÚDO SEGURO</p>
+                        <h3 class="stat-value" id="stat-safe">0</h3>
+                    </div>
+                </div>
+                <div class="col-6 col-md-3">
+                    <div class="stat-card glass text-center">
+                        <div class="stat-icon" style="background: rgba(245, 158, 11, 0.15); color: #f59e0b;">
+                            <i class="fas fa-percentage"></i>
+                        </div>
+                        <p class="stat-label">TAXA DE DETECÇÃO</p>
+                        <h3 class="stat-value" id="stat-rate">0%</h3>
+                    </div>
+                </div>
+            </div>
+
+            <div class="glass rounded-4 p-4 mb-4">
+                <h5 class="mb-4"><i class="fas fa-shield-alt me-2 text-primary"></i> Distribuição de Resultados</h5>
+                <div id="stats-breakdown">
+                    <div class="d-flex align-items-center gap-3 mb-3">
+                        <span class="stat-bar-label">Phishing</span>
+                        <div class="stat-bar-track">
+                            <div class="stat-bar-fill" id="bar-phishing" style="width: 0%; background: var(--danger);">
+                            </div>
+                        </div>
+                        <span class="stat-bar-value" id="bar-phishing-val">0</span>
+                    </div>
+                    <div class="d-flex align-items-center gap-3 mb-3">
+                        <span class="stat-bar-label">Suspeito</span>
+                        <div class="stat-bar-track">
+                            <div class="stat-bar-fill" id="bar-suspect" style="width: 0%; background: #f59e0b;"></div>
+                        </div>
+                        <span class="stat-bar-value" id="bar-suspect-val">0</span>
+                    </div>
+                    <div class="d-flex align-items-center gap-3">
+                        <span class="stat-bar-label">Seguro</span>
+                        <div class="stat-bar-track">
+                            <div class="stat-bar-fill" id="bar-safe" style="width: 0%; background: var(--success);">
+                            </div>
+                        </div>
+                        <span class="stat-bar-value" id="bar-safe-val">0</span>
+                    </div>
+                </div>
+            </div>
+
+            <div class="glass rounded-4 p-4">
+                <h5 class="mb-4"><i class="fas fa-clock me-2 text-primary"></i> Últimas Análises</h5>
+                <div id="stats-timeline" class="d-flex flex-column gap-2">
+                    <p class="text-muted text-center">Carregando...</p>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <!-- Disclaimer Popup -->
+    <div id="disclaimer-overlay" style="
+        position: fixed; inset: 0; z-index: 9999;
+        background: rgba(15, 23, 42, 0.75);
+        backdrop-filter: blur(8px);
+        display: flex; align-items: center; justify-content: center;
+        padding: 1.5rem;
+        animation: fadeIn 0.4s ease;
+    ">
+        <div style="
+            background: var(--card-bg);
+            border: 1px solid var(--border);
+            border-radius: 24px;
+            max-width: 480px;
+            width: 100%;
+            padding: 2.5rem 2rem;
+            box-shadow: 0 24px 64px rgba(0,0,0,0.15);
+            text-align: center;
+            animation: popupSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+        ">
+            <!-- Icon -->
+            <div style="
+                width: 72px; height: 72px;
+                background: linear-gradient(135deg, rgba(37,99,235,0.15), rgba(37,99,235,0.05));
+                border: 2px solid rgba(37,99,235,0.25);
+                border-radius: 20px;
+                display: flex; align-items: center; justify-content: center;
+                margin: 0 auto 1.5rem;
+                font-size: 2rem; color: var(--primary);
+            ">
+                <i class="fas fa-flask"></i>
+            </div>
+
+            <!-- Title -->
+            <h2 style="font-size: 1.4rem; font-weight: 700; color: var(--text-main); margin-bottom: 0.5rem;">
+                Projeto Acadêmico
+            </h2>
+            <p
+                style="font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--primary); margin-bottom: 1.5rem;">
+                Apenas para fins de teste
+            </p>
+
+            <!-- Body -->
+            <p style="color: var(--text-muted); font-size: 0.9rem; line-height: 1.7; margin-bottom: 1rem;">
+                Este é um <strong style="color: var(--text-main);">protótipo acadêmico</strong> desenvolvido para fins
+                educacionais na disciplina de <strong style="color: var(--text-main);">IA Generativa</strong>.
+            </p>
+            <p style="color: var(--text-muted); font-size: 0.875rem; line-height: 1.65; margin-bottom: 2rem;">
+                Os resultados gerados pelos agentes são baseados em <strong style="color: var(--text-main);">heurísticas
+                    e regras simples</strong>, não em modelos de IA reais. <span
+                    style="color: #ef4444; font-weight: 600;">Não utilize para fins de segurança reais.</span>
+            </p>
+
+            <!-- Tags -->
+            <div style="display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 2rem;">
+                <span
+                    style="background: rgba(37,99,235,0.08); border: 1px solid rgba(37,99,235,0.2); color: var(--primary); border-radius: 100px; padding: 4px 14px; font-size: 0.75rem; font-weight: 600;">
+                    <i class="fas fa-graduation-cap me-1"></i> Acadêmico
+                </span>
+                <span
+                    style="background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.2); color: #ef4444; border-radius: 100px; padding: 4px 14px; font-size: 0.75rem; font-weight: 600;">
+                    <i class="fas fa-exclamation-triangle me-1"></i> Não profissional
+                </span>
+                <span
+                    style="background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.2); color: var(--success); border-radius: 100px; padding: 4px 14px; font-size: 0.75rem; font-weight: 600;">
+                    <i class="fas fa-code me-1"></i> Open Source
+                </span>
+            </div>
+
+            <!-- Button -->
+            <button id="disclaimer-close-btn"
+                onclick="document.getElementById('disclaimer-overlay').style.display='none'" style="
+                width: 100%;
+                padding: 14px;
+                background: var(--primary);
+                color: white;
+                border: none;
+                border-radius: 14px;
+                font-size: 0.95rem;
+                font-weight: 600;
+                cursor: pointer;
+                transition: all 0.2s ease;
+                font-family: 'Outfit', sans-serif;
+            " onmouseover="this.style.background='var(--primary-hover)'; this.style.transform='translateY(-1px)'"
+                onmouseout="this.style.background='var(--primary)'; this.style.transform='translateY(0)'">
+                Entendi, continuar <i class="fas fa-arrow-right ms-2"></i>
+            </button>
+        </div>
+    </div>
+
+    <style>
+        @keyframes popupSlideIn {
+            from {
+                opacity: 0;
+                transform: scale(0.85) translateY(20px);
+            }
+
+            to {
+                opacity: 1;
+                transform: scale(1) translateY(0);
+            }
+        }
+    </style>
+
+    <!-- Scripts -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="{{ url_for('static', filename='script.js') }}?v=2.0"></script>
+    <script>
+        // Close popup when clicking outside the card
+        document.getElementById('disclaimer-overlay').addEventListener('click', function (e) {
+            if (e.target === this) this.style.display = 'none';
+        });
+    </script>
+</body>
+
+</html>