| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Phishing Detection | SurakhshaAI</title> |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/@xenova/transformers@2.4.0"></script> |
| <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&family=Poppins:wght@400;500&family=Roboto:wght@300;400&display=swap" rel="stylesheet"> |
| <style> |
| .gradient-bg { |
| background: linear-gradient(135deg, #0F172A 0%, #1E40AF 100%); |
| } |
| .glass-effect { |
| background: rgba(255, 255, 255, 0.1); |
| backdrop-filter: blur(10px); |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| } |
| .pulse-glow { |
| animation: pulse 2s infinite; |
| } |
| @keyframes pulse { |
| 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); } |
| 70% { box-shadow: 0 0 0 15px rgba(16, 185, 129, 0); } |
| 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } |
| } |
| </style> |
| </head> |
| <body class="font-roboto bg-gradient-to-b from-gray-50 to-gray-100 min-h-screen"> |
| |
| <nav class="bg-white shadow-md"> |
| <div class="container mx-auto px-6 py-3"> |
| <div class="flex items-center justify-between"> |
| <a href="index.html" class="flex items-center"> |
| <i data-feather="shield" class="text-green-600 w-8 h-8 mr-2"></i> |
| <span class="font-montserrat font-bold text-2xl text-gray-800">Surakhsha<span class="text-green-600">AI</span></span> |
| </a> |
| <div class="hidden md:flex items-center space-x-8"> |
| <a href="index.html" class="text-gray-800 hover:text-green-600 transition">Home</a> |
| <a href="threat-intelligence.html" class="text-gray-800 hover:text-green-600 transition">Threat Intelligence</a> |
| <a href="phishing-detection.html" class="text-green-600 font-medium">Phishing Detection</a> |
| <a href="#" class="text-gray-800 hover:text-green-600 transition">About</a> |
| </div> |
| <div class="md:hidden"> |
| <button class="text-gray-800 focus:outline-none"> |
| <i data-feather="menu"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <main class="container mx-auto px-6 py-12"> |
| <div class="text-center mb-12"> |
| <h1 class="font-montserrat font-bold text-4xl text-gray-800 mb-4">AI-Powered Phishing Detection</h1> |
| <p class="font-poppins text-lg text-gray-600 max-w-2xl mx-auto"> |
| Analyze text content to detect potential phishing attempts using our advanced AI model |
| </p> |
| </div> |
|
|
| <div class="max-w-3xl mx-auto bg-white rounded-xl shadow-lg overflow-hidden"> |
| <div class="p-8"> |
| <div class="mb-8"> |
| <label for="text-input" class="block font-poppins font-medium text-gray-700 mb-2">Enter suspicious text to analyze:</label> |
| <textarea id="text-input" rows="6" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent" placeholder="Paste suspicious email, message or URL here..."></textarea> |
| </div> |
| <div class="flex justify-center"> |
| <button id="analyze-btn" class="pulse-glow bg-green-600 text-white font-poppins font-bold px-8 py-3 rounded-lg hover:bg-green-700 transition flex items-center"> |
| <span id="btn-text">Analyze Text</span> |
| <span id="spinner" class="hidden ml-2"> |
| <i data-feather="loader" class="animate-spin w-5 h-5"></i> |
| </span> |
| </button> |
| </div> |
| </div> |
|
|
| <div id="results" class="hidden px-8 pb-8"> |
| <div class="border-t border-gray-200 pt-8"> |
| <h3 class="font-montserrat font-bold text-xl text-gray-800 mb-4">Analysis Results</h3> |
| <div id="result-content" class="bg-gray-50 rounded-lg p-6"></div> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| |
| <footer class="bg-gray-800 text-white py-8 mt-12"> |
| <div class="container mx-auto px-6 text-center"> |
| <p class="font-poppins">© 2023 SurakhshaAI. All rights reserved.</p> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| let pipeline; |
| |
| async function loadModel() { |
| pipeline = await transformers.AutoModelForSequenceClassification.from_pretrained( |
| 'ealvaradob/bert-finetuned-phishing', |
| { quantized: false } |
| ); |
| } |
| |
| |
| document.addEventListener('DOMContentLoaded', async () => { |
| feather.replace(); |
| await loadModel(); |
| |
| document.getElementById('analyze-btn').addEventListener('click', analyzeText); |
| }); |
| |
| async function analyzeText() { |
| const text = document.getElementById('text-input').value.trim(); |
| if (!text) { |
| alert('Please enter some text to analyze'); |
| return; |
| } |
| |
| const btn = document.getElementById('analyze-btn'); |
| const btnText = document.getElementById('btn-text'); |
| const spinner = document.getElementById('spinner'); |
| |
| btn.disabled = true; |
| btnText.textContent = 'Analyzing...'; |
| spinner.classList.remove('hidden'); |
| |
| try { |
| |
| const result = await pipeline(text); |
| |
| |
| const resultContent = document.getElementById('result-content'); |
| const resultsDiv = document.getElementById('results'); |
| |
| let html = ''; |
| if (result[0].label === 'phishing') { |
| html = ` |
| <div class="bg-red-50 border-l-4 border-red-500 p-4"> |
| <div class="flex items-center"> |
| <i data-feather="alert-triangle" class="text-red-500 w-6 h-6 mr-2"></i> |
| <h4 class="font-montserrat font-bold text-red-800">Phishing Detected</h4> |
| </div> |
| <p class="font-poppins text-red-700 mt-2"> |
| This text appears to be a phishing attempt with ${(result[0].score * 100).toFixed(2)}% confidence. |
| </p> |
| <p class="font-poppins text-gray-600 mt-4"> |
| <strong>Safety Tip:</strong> Do not click on any links or provide personal information. |
| </p> |
| </div> |
| `; |
| } else { |
| html = ` |
| <div class="bg-green-50 border-l-4 border-green-500 p-4"> |
| <div class="flex items-center"> |
| <i data-feather="check-circle" class="text-green-500 w-6 h-6 mr-2"></i> |
| <h4 class="font-montserrat font-bold text-green-800">No Phishing Detected</h4> |
| </div> |
| <p class="font-poppins text-green-700 mt-2"> |
| This text appears legitimate with ${(result[0].score * 100).toFixed(2)}% confidence. |
| </p> |
| </div> |
| `; |
| } |
| |
| resultContent.innerHTML = html; |
| resultsDiv.classList.remove('hidden'); |
| feather.replace(); |
| |
| } catch (error) { |
| console.error('Error analyzing text:', error); |
| alert('An error occurred while analyzing the text'); |
| } finally { |
| btn.disabled = false; |
| btnText.textContent = 'Analyze Text'; |
| spinner.classList.add('hidden'); |
| } |
| } |
| </script> |
| </body> |
| </html> |
