phishing-detection.html

<!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">
    <!-- Navbar -->
    <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 Content -->
    <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 -->
    <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>
        // Initialize transformers.js
        let pipeline;

        async function loadModel() {
            pipeline = await transformers.AutoModelForSequenceClassification.from_pretrained(
                'ealvaradob/bert-finetuned-phishing',
                { quantized: false }
            );
        }

        // Load model when page loads
        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 {
                // Run the model
                const result = await pipeline(text);
                
                // Display results
                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>