Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>TASSI Framework - State Scam & Fraud Intelligence Dashboard</title> | |
| <!-- Tailwind CSS --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <!-- Chart.js --> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <!-- Leaflet for Maps --> | |
| <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" /> | |
| <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script> | |
| <!-- Font Awesome Icons --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary-color: #1e40af; | |
| --secondary-color: #7c3aed; | |
| --success-color: #10b981; | |
| --warning-color: #f59e0b; | |
| --danger-color: #ef4444; | |
| --dark-bg: #0f172a; | |
| --dark-card: #1e293b; | |
| --dark-border: #334155; | |
| } | |
| [data-theme="dark"] { | |
| background-color: var(--dark-bg); | |
| color: #e2e8f0; | |
| } | |
| [data-theme="dark"] .bg-white { | |
| background-color: var(--dark-card) ; | |
| } | |
| [data-theme="dark"] .bg-gray-50 { | |
| background-color: var(--dark-bg) ; | |
| } | |
| [data-theme="dark"] .text-gray-900 { | |
| color: #e2e8f0 ; | |
| } | |
| [data-theme="dark"] .text-gray-700 { | |
| color: #cbd5e1 ; | |
| } | |
| [data-theme="dark"] .text-gray-600 { | |
| color: #94a3b8 ; | |
| } | |
| [data-theme="dark"] .border-gray-200 { | |
| border-color: var(--dark-border) ; | |
| } | |
| [data-theme="dark"] .hover\:bg-gray-100:hover { | |
| background-color: #334155 ; | |
| } | |
| .kpi-card { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| } | |
| .kpi-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); | |
| } | |
| .glass-effect { | |
| background: rgba(255, 255, 255, 0.95); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| } | |
| [data-theme="dark"] .glass-effect { | |
| background: rgba(30, 41, 59, 0.95); | |
| border: 1px solid rgba(51, 65, 85, 0.5); | |
| } | |
| .pulse-dot { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); | |
| } | |
| 70% { | |
| box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); | |
| } | |
| 100% { | |
| box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); | |
| } | |
| } | |
| .risk-high { | |
| background: linear-gradient(135deg, #ef4444, #dc2626); | |
| } | |
| .risk-medium { | |
| background: linear-gradient(135deg, #f59e0b, #d97706); | |
| } | |
| .risk-low { | |
| background: linear-gradient(135deg, #10b981, #059669); | |
| } | |
| .chart-container { | |
| position: relative; | |
| height: 300px; | |
| } | |
| .notification-badge { | |
| animation: bounce 2s infinite; | |
| } | |
| @keyframes bounce { | |
| 0%, | |
| 20%, | |
| 50%, | |
| 80%, | |
| 100% { | |
| transform: translateY(0); | |
| } | |
| 40% { | |
| transform: translateY(-10px); | |
| } | |
| 60% { | |
| transform: translateY(-5px); | |
| } | |
| } | |
| .loading-skeleton { | |
| background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); | |
| background-size: 200% 100%; | |
| animation: loading 1.5s infinite; | |
| } | |
| @keyframes loading { | |
| 0% { | |
| background-position: 200% 0; | |
| } | |
| 100% { | |
| background-position: -200% 0; | |
| } | |
| } | |
| .scrollbar-custom::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| .scrollbar-custom::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| border-radius: 10px; | |
| } | |
| .scrollbar-custom::-webkit-scrollbar-thumb { | |
| background: #888; | |
| border-radius: 10px; | |
| } | |
| .scrollbar-custom::-webkit-scrollbar-thumb:hover { | |
| background: #555; | |
| } | |
| .animate-float { | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .animate-slide-in { | |
| animation: slideIn 0.5s ease-out; | |
| } | |
| @keyframes slideIn { | |
| from { | |
| opacity: 0; | |
| transform: translateX(-20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateX(0); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body data-theme="light" class="bg-gray-50 transition-colors duration-300"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-lg border-b border-gray-200 sticky top-0 z-50 glass-effect"> | |
| <div class="container mx-auto px-4 py-3"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-shield-alt text-3xl text-blue-600 animate-pulse"></i> | |
| <div> | |
| <h1 class="text-2xl font-bold text-gray-900">TASSI Framework</h1> | |
| <p class="text-xs text-gray-600">State Scam & Fraud Intelligence Dashboard</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex items-center space-x-2 bg-green-100 px-3 py-1 rounded-full"> | |
| <div class="w-2 h-2 bg-green-500 rounded-full pulse-dot"></div> | |
| <span class="text-sm text-green-700 font-medium">Live Monitoring</span> | |
| </div> | |
| <button onclick="toggleTheme()" class="p-2 rounded-lg hover:bg-gray-100 transition-colors"> | |
| <i class="fas fa-moon text-gray-700" id="themeIcon"></i> | |
| </button> | |
| <div class="relative"> | |
| <button class="p-2 rounded-lg hover:bg-gray-100 transition-colors relative"> | |
| <i class="fas fa-bell text-gray-700"></i> | |
| <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center notification-badge">3</span> | |
| </button> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <img src="https://picsum.photos/seed/user123/40/40" alt="User" class="w-10 h-10 rounded-full"> | |
| <div> | |
| <p class="text-sm font-semibold text-gray-900">Cyber Analyst</p> | |
| <p class="text-xs text-gray-600">STF Unit</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-6"> | |
| <!-- KPI Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-4 mb-6 animate-slide-in"> | |
| <div class="kpi-card rounded-xl p-4 text-white"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <i class="fas fa-exclamation-triangle text-2xl opacity-80"></i> | |
| <span class="text-xs bg-white/20 px-2 py-1 rounded-full">Today</span> | |
| </div> | |
| <h3 class="text-3xl font-bold">247</h3> | |
| <p class="text-sm opacity-90">Total Scams</p> | |
| <div class="mt-2 text-xs flex items-center"> | |
| <i class="fas fa-arrow-up mr-1"></i> | |
| <span>+12% from yesterday</span> | |
| </div> | |
| </div> | |
| <div class="bg-gradient-to-br from-red-500 to-pink-600 rounded-xl p-4 text-white"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <i class="fas fa-rupee-sign text-2xl opacity-80"></i> | |
| <span class="text-xs bg-white/20 px-2 py-1 rounded-full">₹ Cr</span> | |
| </div> | |
| <h3 class="text-3xl font-bold">₹18.7</h3> | |
| <p class="text-sm opacity-90">Amount Lost</p> | |
| <div class="mt-2 text-xs flex items-center"> | |
| <i class="fas fa-arrow-up mr-1"></i> | |
| <span>+8.3% this week</span> | |
| </div> | |
| </div> | |
| <div class="bg-gradient-to-br from-orange-500 to-yellow-600 rounded-xl p-4 text-white"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <i class="fas fa-bullhorn text-2xl opacity-80"></i> | |
| <span class="text-xs bg-white/20 px-2 py-1 rounded-full">Active</span> | |
| </div> | |
| <h3 class="text-3xl font-bold">42</h3> | |
| <p class="text-sm opacity-90">Campaigns</p> | |
| <div class="mt-2 text-xs flex items-center"> | |
| <i class="fas fa-minus mr-1"></i> | |
| <span>3 new today</span> | |
| </div> | |
| </div> | |
| <div class="bg-gradient-to-br from-purple-500 to-indigo-600 rounded-xl p-4 text-white"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <i class="fas fa-map-marker-alt text-2xl opacity-80"></i> | |
| <span class="text-xs bg-white/20 px-2 py-1 rounded-full">Risk</span> | |
| </div> | |
| <h3 class="text-3xl font-bold">8</h3> | |
| <p class="text-sm opacity-90">High Risk Districts</p> | |
| <div class="mt-2 text-xs flex items-center"> | |
| <i class="fas fa-exclamation-circle mr-1"></i> | |
| <span>2 critical zones</span> | |
| </div> | |
| </div> | |
| <div class="bg-gradient-to-br from-cyan-500 to-blue-600 rounded-xl p-4 text-white"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <i class="fas fa-fish text-2xl opacity-80"></i> | |
| <span class="text-xs bg-white/20 px-2 py-1 rounded-full">Top</span> | |
| </div> | |
| <h3 class="text-2xl font-bold">Phishing</h3> | |
| <p class="text-sm opacity-90">Most Used Type</p> | |
| <div class="mt-2 text-xs"> | |
| <span>34% of total scams</span> | |
| </div> | |
| </div> | |
| <div class="bg-gradient-to-br from-green-500 to-teal-600 rounded-xl p-4 text-white"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <i class="fas fa-shield-virus text-2xl opacity-80"></i> | |
| <span class="text-xs bg-white/20 px-2 py-1 rounded-full">AI</span> | |
| </div> | |
| <h3 class="text-3xl font-bold">92%</h3> | |
| <p class="text-sm opacity-90">Detection Rate</p> | |
| <div class="mt-2 text-xs flex items-center"> | |
| <i class="fas fa-arrow-up mr-1"></i> | |
| <span>+5% improvement</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Grid Layout --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Left Column --> | |
| <div class="lg:col-span-2 space-y-6"> | |
| <!-- Scam Trend Analytics --> | |
| <div class="bg-white rounded-xl shadow-lg p-6 animate-slide-in"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-bold text-gray-900"> | |
| <i class="fas fa-chart-line mr-2 text-blue-600"></i> | |
| Scam Trend Analytics | |
| </h2> | |
| <select class="px-3 py-1 border border-gray-300 rounded-lg text-sm" onchange="updateTrendChart(this.value)"> | |
| <option value="7">Last 7 Days</option> | |
| <option value="30">Last 30 Days</option> | |
| <option value="90">Last 90 Days</option> | |
| </select> | |
| </div> | |
| <div class="chart-container"> | |
| <canvas id="trendChart"></canvas> | |
| </div> | |
| </div> | |
| <!-- Scam Types Distribution --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="bg-white rounded-xl shadow-lg p-6 animate-slide-in"> | |
| <h3 class="text-lg font-bold text-gray-900 mb-4"> | |
| <i class="fas fa-chart-bar mr-2 text-purple-600"></i> | |
| Scam Types | |
| </h3> | |
| <div class="chart-container"> | |
| <canvas id="scamTypesChart"></canvas> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-lg p-6 animate-slide-in"> | |
| <h3 class="text-lg font-bold text-gray-900 mb-4"> | |
| <i class="fas fa-chart-pie mr-2 text-green-600"></i> | |
| Victim Demographics | |
| </h3> | |
| <div class="chart-container"> | |
| <canvas id="demographicsChart"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Geo Intelligence Map --> | |
| <div class="bg-white rounded-xl shadow-lg p-6 animate-slide-in"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-bold text-gray-900"> | |
| <i class="fas fa-map mr-2 text-red-600"></i> | |
| Geo Intelligence Map | |
| </h2> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-blue-100 text-blue-700 rounded-lg text-sm hover:bg-blue-200" onclick="filterMap()"> | |
| <i class="fas fa-filter mr-1"></i> | |
| Filter | |
| </button> | |
| <button class="px-3 py-1 bg-green-100 text-green-700 rounded-lg text-sm hover:bg-green-200" onclick="exportMap()"> | |
| <i class="fas fa-download mr-1"></i> | |
| Export | |
| </button> | |
| </div> | |
| </div> | |
| <div id="map" class="h-96 rounded-lg"></div> | |
| <div class="mt-4 flex items-center justify-between text-sm"> | |
| <div class="flex space-x-4"> | |
| <span class="flex items-center"> | |
| <div class="w-3 h-3 bg-green-500 rounded-full mr-2"></div> | |
| Low Risk | |
| </span> | |
| <span class="flex items-center"> | |
| <div class="w-3 h-3 bg-yellow-500 rounded-full mr-2"></div> | |
| Medium Risk | |
| </span> | |
| <span class="flex items-center"> | |
| <div class="w-3 h-3 bg-red-500 rounded-full mr-2"></div> | |
| High Risk | |
| </span> | |
| </div> | |
| <span class="text-gray-600"> | |
| <i class="fas fa-info-circle mr-1"></i> | |
| Click on district for details | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Column --> | |
| <div class="space-y-6"> | |
| <!-- AI Insight Panel --> | |
| <div class="bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl shadow-lg p-6 text-white animate-float"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-bold"> | |
| <i class="fas fa-brain mr-2"></i> | |
| AI Insights | |
| </h2> | |
| <div class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="bg-white/10 rounded-lg p-4 backdrop-blur"> | |
| <h3 class="font-semibold mb-2">What's Happening Today</h3> | |
| <p class="text-sm opacity-90"> | |
| Spike detected in KYC verification scams targeting senior citizens in Mumbai district. | |
| Pattern suggests organized operation using 12+ phone numbers. | |
| </p> | |
| </div> | |
| <div class="bg-white/10 rounded-lg p-4 backdrop-blur"> | |
| <h3 class="font-semibold mb-2">New Pattern Detected</h3> | |
| <p class="text-sm opacity-90"> | |
| Emerging crypto investment scam using WhatsApp groups. | |
| Average loss: ₹45,000 per victim. | |
| </p> | |
| </div> | |
| <div class="bg-white/10 rounded-lg p-4 backdrop-blur"> | |
| <h3 class="font-semibold mb-2">Predicted Targets</h3> | |
| <p class="text-sm opacity-90"> | |
| High probability of UPI fraud attacks in Pune and Nagpur during salary week (25-30). | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Time Pattern Analysis --> | |
| <div class="bg-white rounded-xl shadow-lg p-6 animate-slide-in"> | |
| <h2 class="text-xl font-bold text-gray-900 mb-4"> | |
| <i class="fas fa-clock mr-2 text-orange-600"></i> | |
| Time Pattern Analysis | |
| </h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Peak Hours</span> | |
| <span class="font-semibold">2PM - 6PM</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-gradient-to-r from-orange-400 to-red-500 h-2 rounded-full" | |
| style="width: 75%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Weekend Activity</span> | |
| <span class="font-semibold">High</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-gradient-to-r from-blue-400 to-purple-500 h-2 rounded-full" | |
| style="width: 85%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Salary Day Spike</span> | |
| <span class="font-semibold">1st & 15th</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-gradient-to-r from-green-400 to-teal-500 h-2 rounded-full" | |
| style="width: 90%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <canvas id="timePatternChart" height="150"></canvas> | |
| </div> | |
| </div> | |
| <!-- Alerts & Watchlist --> | |
| <div class="bg-white rounded-xl shadow-lg p-6 animate-slide-in"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-bold text-gray-900"> | |
| <i class="fas fa-exclamation-circle mr-2 text-red-600"></i> | |
| Active Alerts | |
| </h2> | |
| <span class="bg-red-100 text-red-700 px-2 py-1 rounded-full text-xs font-semibold">3 New</span> | |
| </div> | |
| <div class="space-y-3 max-h-64 overflow-y-auto scrollbar-custom"> | |
| <div class="border-l-4 border-red-500 bg-red-50 p-3 rounded"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="font-semibold text-sm text-red-900">Critical Spike Alert</p> | |
| <p class="text-xs text-red-700 mt-1">200% increase in job scams - Thane district</p> | |
| </div> | |
| <span class="text-xs text-red-600">2m ago</span> | |
| </div> | |
| </div> | |
| <div class="border-l-4 border-orange-500 bg-orange-50 p-3 rounded"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="font-semibold text-sm text-orange-900">New Campaign Detected</p> | |
| <p class="text-xs text-orange-700 mt-1">Crypto fraud using fake exchange platform</p> | |
| </div> | |
| <span class="text-xs text-orange-600">15m ago</span> | |
| </div> | |
| </div> | |
| <div class="border-l-4 border-yellow-500 bg-yellow-50 p-3 rounded"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="font-semibold text-sm text-yellow-900">Repeated Entity Alert</p> | |
| <p class="text-xs text-yellow-700 mt-1">UPI ID: fraud.pay@okicici in 12 complaints</p> | |
| </div> | |
| <span class="text-xs text-yellow-600">1h ago</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Scam Entity Intelligence Tables --> | |
| <div class="mt-6 grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Phone Numbers Table --> | |
| <div class="bg-white rounded-xl shadow-lg p-6 animate-slide-in"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-bold text-gray-900"> | |
| <i class="fas fa-phone mr-2 text-blue-600"></i> | |
| Suspicious Phone Numbers | |
| </h3> | |
| <button class="text-blue-600 hover:text-blue-800" onclick="searchEntities('phone')"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full text-sm"> | |
| <thead> | |
| <tr class="border-b"> | |
| <th class="text-left py-2">Number</th> | |
| <th class="text-left py-2">Risk</th> | |
| <th class="text-left py-2">Count</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="border-b hover:bg-gray-50"> | |
| <td class="py-2">+91-9876543210</td> | |
| <td><span class="px-2 py-1 bg-red-100 text-red-700 rounded-full text-xs">Critical</span> | |
| </td> | |
| <td>47</td> | |
| </tr> | |
| <tr class="border-b hover:bg-gray-50"> | |
| <td class="py-2">+91-8765432109</td> | |
| <td><span class="px-2 py-1 bg-orange-100 text-orange-700 rounded-full text-xs">High</span> | |
| </td> | |
| <td>32</td> | |
| </tr> | |
| <tr class="border-b hover:bg-gray-50"> | |
| <td class="py-2">+91-7654321098</td> | |
| <td><span class="px-2 py-1 bg-yellow-100 text-yellow-700 rounded-full text-xs">Medium</span> | |
| </td> | |
| <td>18</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <!-- URLs Table --> | |
| <div class="bg-white rounded-xl shadow-lg p-6 animate-slide-in"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-bold text-gray-900"> | |
| <i class="fas fa-link mr-2 text-purple-600"></i> | |
| Malicious URLs | |
| </h3> | |
| <button class="text-purple-600 hover:text-purple-800" onclick="searchEntities('url')"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full text-sm"> | |
| <thead> | |
| <tr class="border-b"> | |
| <th class="text-left py-2">Domain</th> | |
| <th class="text-left py-2">Type</th> | |
| <th class="text-left py-2">Risk</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="border-b hover:bg-gray-50"> | |
| <td class="py-2 text-xs">secure-bank.in</td> | |
| <td>Phishing</td> | |
| <td><span class="px-2 py-1 bg-red-100 text-red-700 rounded-full text-xs">Critical</span> | |
| </td> | |
| </tr> | |
| <tr class="border-b hover:bg-gray-50"> | |
| <td class="py-2 text-xs">quick-loan.xyz</td> | |
| <td>Loan</td> | |
| <td><span class="px-2 py-1 bg-orange-100 text-orange-700 rounded-full text-xs">High</span> | |
| </td> | |
| </tr> | |
| <tr class="border-b hover:bg-gray-50"> | |
| <td class="py-2 text-xs">crypto-profit.net</td> | |
| <td>Crypto</td> | |
| <td><span class="px-2 py-1 bg-orange-100 text-orange-700 rounded-full text-xs">High</span> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <!-- UPI/Wallets Table --> | |
| <div class="bg-white rounded-xl shadow-lg p-6 animate-slide-in"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-bold text-gray-900"> | |
| <i class="fas fa-wallet mr-2 text-green-600"></i> | |
| Fraudulent UPI IDs | |
| </h3> | |
| <button class="text-green-600 hover:text-green-800" onclick="searchEntities('upi')"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full text-sm"> | |
| <thead> | |
| <tr class="border-b"> | |
| <th class="text-left py-2">UPI ID</th> | |
| <th class="text-left py-2">Bank</th> | |
| <th class="text-left py-2">Amount</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="border-b hover:bg-gray-50"> | |
| <td class="py-2 text-xs">fraud@paytm</td> | |
| <td>Paytm</td> | |
| <td>₹4.5L</td> | |
| </tr> | |
| <tr class="border-b hover:bg-gray-50"> | |
| <td class="py-2 text-xs">scam2024@ybl</td> | |
| <td>PhonePe</td> | |
| <td>₹3.2L</td> | |
| </tr> | |
| <tr class="border-b hover:bg-gray-50"> | |
| <td class="py-2 text-xs">help@okaxis</td> | |
| <td>Axis</td> | |
| <td>₹2.8L</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Reports & Exports Section --> | |
| <div class="mt-6 bg-white rounded-xl shadow-lg p-6 animate-slide-in"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-bold text-gray-900"> | |
| <i class="fas fa-file-export mr-2 text-indigo-600"></i> | |
| Reports & Exports | |
| </h2> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4"> | |
| <button onclick="generateReport('pdf')" class="flex items-center justify-center space-x-2 px-4 py-3 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors"> | |
| <i class="fas fa-file-pdf"></i> | |
| <span>Generate Police Report (PDF)</span> | |
| </button> | |
| <button onclick="exportData('csv')" class="flex items-center justify-center space-x-2 px-4 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors"> | |
| <i class="fas fa-file-csv"></i> | |
| <span>Export Data (CSV)</span> | |
| </button> | |
| <button onclick="exportData('json')" class="flex items-center justify-center space-x-2 px-4 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"> | |
| <i class="fas fa-file-code"></i> | |
| <span>Export Data (JSON)</span> | |
| </button> | |
| <button onclick="generateTimeline()" class="flex items-center justify-center space-x-2 px-4 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors"> | |
| <i class="fas fa-calendar-alt"></i> | |
| <span>Timeline Case Report</span> | |
| </button> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-white border-t border-gray-200 mt-12"> | |
| <div class="container mx-auto px-4 py-4"> | |
| <div class="flex justify-between items-center"> | |
| <p class="text-sm text-gray-600"> | |
| <i class="fas fa-shield-alt mr-2 text-blue-600"></i> | |
| TASSI Framework v2.0 | Secure Intelligence Platform | |
| </p> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" | |
| class="text-sm text-blue-600 hover:text-blue-800 font-medium"> | |
| Built with anycoder | |
| </a> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Theme Toggle | |
| function toggleTheme() { | |
| const body = document.body; | |
| const themeIcon = document.getElementById('themeIcon'); | |
| if (body.getAttribute('data-theme') === 'light') { | |
| body.setAttribute('data-theme', 'dark'); | |
| themeIcon.classList.remove('fa-moon'); | |
| themeIcon.classList.add('fa-sun'); | |
| } else { | |
| body.setAttribute('data-theme', 'light'); | |
| themeIcon.classList.remove('fa-sun'); | |
| themeIcon.classList.add('fa-moon'); | |
| } | |
| } | |
| // Initialize Charts | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Trend Chart | |
| const trendCtx = document.getElementById('trendChart').getContext('2d'); | |
| const trendChart = new Chart(trendCtx, { | |
| type: 'line', | |
| data: { | |
| labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], | |
| datasets: [{ | |
| label: 'Scams Reported', | |
| data: [185, 203, 247, 198, 256, 289, 247], | |
| borderColor: 'rgb(59, 130, 246)', | |
| backgroundColor: 'rgba(59, 130, 246, 0.1)', | |
| tension: 0.4, | |
| fill: true | |
| }, { | |
| label: 'Amount Lost (₹ Lakhs)', | |
| data: [145, 167, 189, 156, 198, 234, 187], | |
| borderColor: 'rgb(239, 68, 68)', | |
| backgroundColor: 'rgba(239, 68, 68, 0.1)', | |
| tension: 0.4, | |
| fill: true | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| display: true, | |
| position: 'top' | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: true | |
| } | |
| } | |
| } | |
| }); | |
| // Scam Types Chart | |
| const scamTypesCtx = document.getElementById('scamTypesChart').getContext('2d'); | |
| new Chart(scamTypesCtx, { | |
| type: 'bar', | |
| data: { | |
| labels: ['Phishing', 'Loan', 'KYC', 'Crypto', 'Job', 'UPI'], | |
| datasets: [{ | |
| label: 'Count', | |
| data: [84, 52, 38, 29, 24, 20], | |
| backgroundColor: [ | |
| 'rgba(59, 130, 246, 0.8)', | |
| 'rgba(239, 68, 68, 0.8)', | |
| 'rgba(245, 158, 11, 0.8)', | |
| 'rgba(139, 92, 246, 0.8)', | |
| 'rgba(16, 185, 129, 0.8)', | |
| 'rgba(236, 72, 153, 0.8)' | |
| ] | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| display: false | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: true | |
| } | |
| } | |
| } | |
| }); | |
| // Demographics Chart | |
| const demographicsCtx = document.getElementById('demographicsChart').getContext('2d'); | |
| new Chart(demographicsCtx, { | |
| type: 'pie', | |
| data: { | |
| labels: ['18-25', '26-35', '36-45', '46-55', '55+'], | |
| datasets: [{ | |
| data: [28, 35, 22, 10, 5], | |
| backgroundColor: [ | |
| 'rgba(59, 130, 246, 0.8)', | |
| 'rgba(16, 185, 129, 0.8)', | |
| 'rgba(245, 158, 11, 0.8)', | |
| 'rgba(239, 68, 68, 0.8)', | |
| 'rgba(139, 92, 246, 0.8)' | |
| ] | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| position: |