Create a complete AI-Powered Cyberbullying Detection Portal web application using Python (Flask) with the following features:
93b2045
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CyberGuardian - Toxicity Detection</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script> | |
| <style> | |
| .vanta-bg { | |
| min-height: 100vh; | |
| } | |
| .glass-card { | |
| backdrop-filter: blur(16px) saturate(180%); | |
| -webkit-backdrop-filter: blur(16px) saturate(180%); | |
| background-color: rgba(255, 255, 255, 0.75); | |
| border-radius: 12px; | |
| border: 1px solid rgba(209, 213, 219, 0.3); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="vanta-bg" class="vanta-bg"> | |
| <nav class="bg-blue-600 text-white shadow-lg"> | |
| <div class="max-w-6xl mx-auto px-4"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <i data-feather="shield" class="mr-2"></i> | |
| <span class="font-semibold text-xl">CyberGuardian</span> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-4"> | |
| <a href="/about" class="px-3 py-2 hover:bg-blue-700 rounded-md">About</a> | |
| <a href="/privacy" class="px-3 py-2 hover:bg-blue-700 rounded-md">Privacy</a> | |
| <a href="/login" class="px-3 py-2 bg-white text-blue-600 rounded-md font-medium ml-4">Login</a> | |
| <a href="/signup" class="px-3 py-2 hover:bg-blue-500 rounded-md">Sign Up</a> | |
| </div> | |
| <div class="md:hidden flex items-center"> | |
| <button class="mobile-menu-button"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <div class="max-w-6xl mx-auto px-4 py-12"> | |
| <div class="glass-card p-8 max-w-3xl mx-auto"> | |
| <h1 class="text-4xl font-bold text-blue-800 mb-6">Guard Against Toxic Content</h1> | |
| <p class="text-lg text-gray-700 mb-8"> | |
| Our AI-powered system detects cyberbullying, hate speech, and offensive language | |
| with cutting-edge NLP technology. Protect your digital spaces today. | |
| </p> | |
| <div class="flex flex-col sm:flex-row gap-4"> | |
| <a href="/signup" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-md text-center transition duration-300"> | |
| Get Started | |
| </a> | |
| <a href="/about" class="border border-blue-600 text-blue-600 font-medium py-3 px-6 rounded-md text-center hover:bg-blue-50 transition duration-300"> | |
| Learn More | |
| </a> | |
| </div> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8 mt-16"> | |
| <div class="glass-card p-6"> | |
| <div class="bg-blue-100 w-12 h-12 rounded-full flex items-center justify-center mb-4"> | |
| <i data-feather="eye" class="text-blue-600"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Real-time Detection</h3> | |
| <p class="text-gray-600">Instant analysis of text for toxic content with confidence scoring.</p> | |
| </div> | |
| <div class="glass-card p-6"> | |
| <div class="bg-blue-100 w-12 h-12 rounded-full flex items-center justify-center mb-4"> | |
| <i data-feather="database" class="text-blue-600"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Secure History</h3> | |
| <p class="text-gray-600">All your past analyses stored securely for your reference.</p> | |
| </div> | |
| <div class="glass-card p-6"> | |
| <div class="bg-blue-100 w-12 h-12 rounded-full flex items-center justify-center mb-4"> | |
| <i data-feather="lock" class="text-blue-600"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Privacy Focused</h3> | |
| <p class="text-gray-600">Your data never leaves our secure servers.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <footer class="bg-gray-100 border-t mt-12"> | |
| <div class="max-w-6xl mx-auto px-4 py-8"> | |
| <div class="md:flex md:justify-between"> | |
| <div class="mb-8 md:mb-0"> | |
| <h2 class="text-lg font-semibold text-gray-900 mb-4">CyberGuardian</h2> | |
| <p class="text-gray-600 max-w-xs">Making online spaces safer with AI-powered toxicity detection.</p> | |
| </div> | |
| <div class="grid grid-cols-2 gap-8 sm:grid-cols-3"> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-900 tracking-wider uppercase mb-4">Resources</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="/about" class="text-gray-600 hover:text-blue-600">About</a></li> | |
| <li><a href="/privacy" class="text-gray-600 hover:text-blue-600">Privacy</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-900 tracking-wider uppercase mb-4">Account</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="/login" class="text-gray-600 hover:text-blue-600">Login</a></li> | |
| <li><a href="/signup" class="text-gray-600 hover:text-blue-600">Sign Up</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 pt-8 border-t border-gray-200 md:flex md:items-center md:justify-between"> | |
| <div class="flex space-x-6 md:order-2"> | |
| <a href="#" class="text-gray-400 hover:text-gray-500"> | |
| <i data-feather="twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-gray-500"> | |
| <i data-feather="github"></i> | |
| </a> | |
| </div> | |
| <p class="mt-8 text-base text-gray-500 md:mt-0 md:order-1"> | |
| © 2023 CyberGuardian. All rights reserved. | |
| </p> | |
| </div> | |
| </div> | |
| </footer> | |
| </div> | |
| <script> | |
| feather.replace(); | |
| VANTA.NET({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x3b82f6, | |
| backgroundColor: 0xf8fafc, | |
| points: 10.00, | |
| maxDistance: 22.00, | |
| spacing: 18.00 | |
| }); | |
| </script> | |
| </body> | |
| </html> | |