| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>FamilyGuard - Device Monitor Dashboard</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/lucide@latest"></script> |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
| <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> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
| |
| body { font-family: 'Inter', sans-serif; } |
| |
| .gradient-bg { |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| } |
| |
| .sidebar-item { |
| transition: all 0.3s ease; |
| } |
| |
| .sidebar-item:hover, .sidebar-item.active { |
| background: rgba(255, 255, 255, 0.1); |
| border-left: 4px solid #667eea; |
| } |
| |
| .glass-effect { |
| background: rgba(255, 255, 255, 0.05); |
| backdrop-filter: blur(10px); |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| } |
| |
| .status-dot { |
| animation: pulse 2s infinite; |
| } |
| |
| @keyframes pulse { |
| 0%, 100% { opacity: 1; } |
| 50% { opacity: 0.5; } |
| } |
| |
| .chat-bubble { |
| max-width: 70%; |
| word-wrap: break-word; |
| } |
| |
| .scrollbar-hide::-webkit-scrollbar { |
| display: none; |
| } |
| |
| .scrollbar-hide { |
| -ms-overflow-style: none; |
| scrollbar-width: none; |
| } |
| |
| .feature-card { |
| transition: transform 0.2s, box-shadow 0.2s; |
| } |
| |
| .feature-card:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 10px 40px rgba(0,0,0,0.2); |
| } |
| </style> |
| </head> |
| <body class="bg-gray-900 text-white overflow-hidden"> |
|
|
| |
| <div id="disclaimerModal" class="fixed inset-0 bg-black bg-opacity-90 z-50 flex items-center justify-center p-4"> |
| <div class="bg-gray-800 rounded-2xl p-8 max-w-2xl w-full border border-gray-700"> |
| <div class="flex items-center mb-4 text-yellow-500"> |
| <i data-lucide="alert-triangle" class="w-8 h-8 mr-3"></i> |
| <h2 class="text-2xl font-bold">Important Legal Notice</h2> |
| </div> |
| <div class="space-y-4 text-gray-300 mb-6"> |
| <p>This is a <strong>frontend demonstration</strong> using simulated data only. It is designed for:</p> |
| <ul class="list-disc pl-6 space-y-2"> |
| <li>UI/UX design practice</li> |
| <li>Educational purposes about dashboard interfaces</li> |
| <li>Parental control interface prototyping</li> |
| </ul> |
| <p class="text-red-400 font-semibold">Monitoring devices without explicit consent is illegal in most jurisdictions and violates privacy rights.</p> |
| <p>By continuing, you agree to use this only for legitimate purposes on devices you own or have explicit permission to monitor.</p> |
| </div> |
| <button onclick="closeDisclaimer()" class="w-full gradient-bg text-white py-3 rounded-xl font-semibold hover:opacity-90 transition"> |
| I Understand - Continue to Demo |
| </button> |
| </div> |
| </div> |
|
|
| <div class="flex h-screen"> |
| |
| <aside class="w-64 bg-gray-800 border-r border-gray-700 flex flex-col hidden md:flex"> |
| <div class="p-6 border-b border-gray-700"> |
| <div class="flex items-center space-x-3"> |
| <div class="w-10 h-10 gradient-bg rounded-xl flex items-center justify-center"> |
| <i data-lucide="shield" class="w-6 h-6 text-white"></i> |
| </div> |
| <div> |
| <h1 class="text-xl font-bold">FamilyGuard</h1> |
| <p class="text-xs text-gray-400">Demo Dashboard</p> |
| </div> |
| </div> |
| </div> |
|
|
| <nav class="flex-1 overflow-y-auto py-4"> |
| <div class="px-4 mb-2 text-xs font-semibold text-gray-500 uppercase">Monitoring</div> |
| <a href="#" onclick="showSection('dashboard')" class="sidebar-item active flex items-center px-6 py-3 text-gray-300 hover:text-white"> |
| <i data-lucide="layout-dashboard" class="w-5 h-5 mr-3"></i> |
| Dashboard |
| </a> |
| <a href="#" onclick="showSection('calls')" class="sidebar-item flex items-center px-6 py-3 text-gray-300 hover:text-white"> |
| <i data-lucide="phone" class="w-5 h-5 mr-3"></i> |
| Call Logs |
| </a> |
| <a href="#" onclick="showSection('messages')" class="sidebar-item flex items-center px-6 py-3 text-gray-300 hover:text-white"> |
| <i data-lucide="message-square" class="w-5 h-5 mr-3"></i> |
| Messages |
| <span class="ml-auto bg-red-500 text-xs px-2 py-1 rounded-full">3</span> |
| </a> |
| <a href="#" onclick="showSection('locations')" class="sidebar-item flex items-center px-6 py-3 text-gray-300 hover:text-white"> |
| <i data-lucide="map-pin" class="w-5 h-5 mr-3"></i> |
| GPS Location |
| </a> |
| <a href="#" onclick="showSection('contacts')" class="sidebar-item flex items-center px-6 py-3 text-gray-300 hover:text-white"> |
| <i data-lucide="users" class="w-5 h-5 mr-3"></i> |
| Contacts |
| </a> |
| <a href="#" onclick="showSection('photos')" class="sidebar-item flex items-center px-6 py-3 text-gray-300 hover:text-white"> |
| <i data-lucide="image" class="w-5 h-5 mr-3"></i> |
| Photos |
| </a> |
| |
| <div class="px-4 mt-6 mb-2 text-xs font-semibold text-gray-500 uppercase">Activity</div> |
| <a href="#" onclick="showSection('browser')" class="sidebar-item flex items-center px-6 py-3 text-gray-300 hover:text-white"> |
| <i data-lucide="globe" class="w-5 h-5 mr-3"></i> |
| Browser History |
| </a> |
| <a href="#" onclick="showSection('apps')" class="sidebar-item flex items-center px-6 py-3 text-gray-300 hover:text-white"> |
| <i data-lucide="grid" class="w-5 h-5 mr-3"></i> |
| Installed Apps |
| </a> |
| <a href="#" onclick="showSection('keylogger')" class="sidebar-item flex items-center px-6 py-3 text-gray-300 hover:text-white"> |
| <i data-lucide="keyboard" class="w-5 h-5 mr-3"></i> |
| Keylogger |
| </a> |
| <a href="#" onclick="showSection('screen')" class="sidebar-item flex items-center px-6 py-3 text-gray-300 hover:text-white"> |
| <i data-lucide="monitor" class="w-5 h-5 mr-3"></i> |
| Screen Recorder |
| </a> |
| </nav> |
|
|
| <div class="p-4 border-t border-gray-700"> |
| <div class="glass-effect rounded-xl p-4"> |
| <div class="flex items-center mb-3"> |
| <div class="w-2 h-2 bg-green-500 rounded-full status-dot mr-2"></div> |
| <span class="text-sm font-medium">Device Online</span> |
| </div> |
| <p class="text-xs text-gray-400 mb-2">iPhone 13 Pro</p> |
| <div class="w-full bg-gray-700 rounded-full h-2"> |
| <div class="bg-green-500 h-2 rounded-full" style="width: 78%"></div> |
| </div> |
| <p class="text-xs text-gray-400 mt-1">Battery: 78%</p> |
| </div> |
| </div> |
| </aside> |
|
|
| |
| <main class="flex-1 overflow-y-auto bg-gray-900"> |
| |
| <header class="bg-gray-800 border-b border-gray-700 p-4 sticky top-0 z-10"> |
| <div class="flex justify-between items-center"> |
| <div class="flex items-center md:hidden"> |
| <button onclick="toggleMobileMenu()" class="text-gray-300 hover:text-white"> |
| <i data-lucide="menu" class="w-6 h-6"></i> |
| </button> |
| <span class="ml-3 font-bold">FamilyGuard</span> |
| </div> |
| |
| <div class="hidden md:flex items-center text-gray-400 text-sm"> |
| <i data-lucide="clock" class="w-4 h-4 mr-2"></i> |
| Last sync: <span id="lastSync" class="ml-1 text-white">Just now</span> |
| </div> |
|
|
| <div class="flex items-center space-x-4"> |
| <button class="relative text-gray-400 hover:text-white"> |
| <i data-lucide="bell" class="w-5 h-5"></i> |
| <span class="absolute -top-1 -right-1 w-2 h-2 bg-red-500 rounded-full"></span> |
| </button> |
| <div class="flex items-center space-x-2"> |
| <img src="http://static.photos/people/200x200/42" alt="User" class="w-8 h-8 rounded-full border-2 border-purple-500"> |
| <span class="hidden md:block text-sm font-medium">Admin</span> |
| </div> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <div class="p-6"> |
| |
| |
| <section id="dashboard" class="space-y-6"> |
| <div class="flex justify-between items-center mb-6"> |
| <div> |
| <h2 class="text-2xl font-bold">Dashboard Overview</h2> |
| <p class="text-gray-400">Real-time device monitoring statistics</p> |
| </div> |
| <button onclick="refreshData()" class="flex items-center px-4 py-2 bg-gray-800 rounded-lg hover:bg-gray-700 transition text-sm"> |
| <i data-lucide="refresh-cw" class="w-4 h-4 mr-2"></i> |
| Refresh Data |
| </button> |
| </div> |
|
|
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> |
| <div class="feature-card bg-gray-800 rounded-2xl p-6 border border-gray-700"> |
| <div class="flex justify-between items-start mb-4"> |
| <div class="p-3 bg-blue-500/20 rounded-xl"> |
| <i data-lucide="phone-call" class="w-6 h-6 text-blue-500"></i> |
| </div> |
| <span class="text-green-400 text-sm font-medium">+12%</span> |
| </div> |
| <h3 class="text-3xl font-bold mb-1">24</h3> |
| <p class="text-gray-400 text-sm">Calls Today</p> |
| </div> |
|
|
| <div class="feature-card bg-gray-800 rounded-2xl p-6 border border-gray-700"> |
| <div class="flex justify-between items-start mb-4"> |
| <div class="p-3 bg-purple-500/20 rounded-xl"> |
| <i data-lucide="message-circle" class="w-6 h-6 text-purple-500"></i> |
| </div> |
| <span class="text-green-400 text-sm font-medium">+5%</span> |
| </div> |
| <h3 class="text-3xl font-bold mb-1">156</h3> |
| <p class="text-gray-400 text-sm">Messages</p> |
| </div> |
|
|
| <div class="feature-card bg-gray-800 rounded-2xl p-6 border border-gray-700"> |
| <div class="flex justify-between items-start mb-4"> |
| <div class="p-3 bg-green-500/20 rounded-xl"> |
| <i data-lucide="map-pin" class="w-6 h-6 text-green-500"></i> |
| </div> |
| <span class="text-gray-400 text-sm font-medium">Active</span> |
| </div> |
| <h3 class="text-3xl font-bold mb-1">12</h3> |
| <p class="text-gray-400 text-sm">Locations</p> |
| </div> |
|
|
| <div class="feature-card bg-gray-800 rounded-2xl p-6 border border-gray-700"> |
| <div class="flex justify-between items-start mb-4"> |
| <div class="p-3 bg-orange-500/20 rounded-xl"> |
| <i data-lucide="wifi" class="w-6 h-6 text-orange-500"></i> |
| </div> |
| <span class="text-green-400 text-sm font-medium">Online</span> |
| </div> |
| <h3 class="text-3xl font-bold mb-1">4h 32m</h3> |
| <p class="text-gray-400 text-sm">Screen Time</p> |
| </div> |
| </div> |
|
|
| |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6"> |
| <div class="bg-gray-800 rounded-2xl p-6 border border-gray-700"> |
| <h3 class="text-lg font-semibold mb-4">Activity Overview</h3> |
| <canvas id="activityChart" height="250"></canvas> |
| </div> |
| <div class="bg-gray-800 rounded-2xl p-6 border border-gray-700"> |
| <h3 class="text-lg font-semibold mb-4">App Usage</h3> |
| <canvas id="appUsageChart" height="250"></canvas> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-gray-800 rounded-2xl p-6 border border-gray-700 mt-6"> |
| <h3 class="text-lg font-semibold mb-4">Recent Activity</h3> |
| <div class="space-y-4"> |
| <div class="flex items-center justify-between p-4 bg-gray-700/50 rounded-xl"> |
| <div class="flex items-center space-x-4"> |
| <div class="w-10 h-10 bg-blue-500/20 rounded-full flex items-center justify-center"> |
| <i data-lucide="phone" class="w-5 h-5 text-blue-500"></i> |
| </div> |
| <div> |
| <p class="font-medium">Incoming Call</p> |
| <p class="text-sm text-gray-400">Mom • 5 minutes ago</p> |
| </div> |
| </div> |
| <span class="text-sm text-gray-400">2:34 PM</span> |
| </div> |
| |
| <div class="flex items-center justify-between p-4 bg-gray-700/50 rounded-xl"> |
| <div class="flex items-center space-x-4"> |
| <div class="w-10 h-10 bg-green-500/20 rounded-full flex items-center justify-center"> |
| <i data-lucide="map-pin" class="w-5 h-5 text-green-500"></i> |
| </div> |
| <div> |
| <p class="font-medium">Location Updated</p> |
| <p class="text-sm text-gray-400">Central Park • 12 minutes ago</p> |
| </div> |
| </div> |
| <span class="text-sm text-gray-400">2:27 PM</span> |
| </div> |
|
|
| <div class="flex items-center justify-between p-4 bg-gray-700/50 rounded-xl"> |
| <div class="flex items-center space-x-4"> |
| <div class="w-10 h-10 bg-purple-500/20 rounded-full flex items-center justify-center"> |
| <i data-lucide="message-square" class="w-5 h-5 text-purple-500"></i> |
| </div> |
| <div> |
| <p class="font-medium">New Message</p> |
| <p class="text-sm text-gray-400">Sarah • WhatsApp • 15 minutes ago</p> |
| </div> |
| </div> |
| <span class="text-sm text-gray-400">2:24 PM</span> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="calls" class="hidden space-y-6"> |
| <div class="flex justify-between items-center"> |
| <h2 class="text-2xl font-bold">Call Logs</h2> |
| <div class="flex space-x-2"> |
| <select class="bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-sm focus:outline-none focus:border-purple-500"> |
| <option>All Calls</option> |
| <option>Incoming</option> |
| <option>Outgoing</option> |
| <option>Missed</option> |
| </select> |
| <input type="text" placeholder="Search..." class="bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-sm focus:outline-none focus:border-purple-500"> |
| </div> |
| </div> |
|
|
| <div class="bg-gray-800 rounded-2xl border border-gray-700 overflow-hidden"> |
| <table class="w-full"> |
| <thead class="bg-gray-700/50"> |
| <tr> |
| <th class="text-left p-4 text-sm font-medium text-gray-400">Type</th> |
| <th class="text-left p-4 text-sm font-medium text-gray-400">Contact</th> |
| <th class="text-left p-4 text-sm font-medium text-gray-400">Number</th> |
| <th class="text-left p-4 text-sm font-medium text-gray-400">Duration</th> |
| <th class="text-left p-4 text-sm font-medium text-gray-400">Time</th> |
| </tr> |
| </thead> |
| <tbody id="callsTableBody" class="divide-y divide-gray-700"> |
| |
| </tbody> |
| </table> |
| </div> |
| </section> |
|
|
| |
| <section id="messages" class="hidden h-[calc(100vh-140px)]"> |
| <div class="flex h-full bg-gray-800 rounded-2xl border border-gray-700 overflow-hidden"> |
| |
| <div class="w-80 border-r border-gray-700 flex flex-col"> |
| <div class="p-4 border-b border-gray-700"> |
| <h3 class="font-semibold mb-4">Conversations</h3> |
| <input type="text" placeholder="Search messages..." class="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 text-sm focus:outline-none focus:border-purple-500"> |
| </div> |
| <div class="flex-1 overflow-y-auto" id="messageContacts"> |
| |
| </div> |
| </div> |
|
|
| |
| <div class="flex-1 flex flex-col"> |
| <div class="p-4 border-b border-gray-700 flex items-center justify-between"> |
| <div class="flex items-center space-x-3"> |
| <img src="http://static.photos/people/200x200/1" class="w-10 h-10 rounded-full"> |
| <div> |
| <h4 class="font-semibold">Sarah Johnson</h4> |
| <p class="text-xs text-green-400">Online</p> |
| </div> |
| </div> |
| <button class="text-gray-400 hover:text-white"> |
| <i data-lucide="more-vertical" class="w-5 h-5"></i> |
| </button> |
| </div> |
| |
| <div class="flex-1 overflow-y-auto p-4 space-y-4" id="chatMessages"> |
| |
| </div> |
|
|
| <div class="p-4 border-t border-gray-700 bg-gray-800"> |
| <div class="flex items-center space-x-2 text-sm text-gray-400"> |
| <i data-lucide="info" class="w-4 h-4"></i> |
| <span>Viewing mode only - simulated data</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="locations" class="hidden space-y-6"> |
| <div class="flex justify-between items-center"> |
| <h2 class="text-2xl font-bold">GPS Location History</h2> |
| <div class="flex space-x-2"> |
| <button class="px-4 py-2 bg-purple-600 rounded-lg text-sm hover:bg-purple-700 transition">Live Location</button> |
| <button class="px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg text-sm hover:bg-gray-700 transition">History</button> |
| </div> |
| </div> |
|
|
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> |
| <div class="lg:col-span-2 bg-gray-800 rounded-2xl border border-gray-700 overflow-hidden h-[500px]"> |
| <div id="map" class="w-full h-full"></div> |
| </div> |
| |
| <div class="bg-gray-800 rounded-2xl border border-gray-700 p-6"> |
| <h3 class="font-semibold mb-4">Recent Locations</h3> |
| <div class="space-y-4" id="locationList"> |
| |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="contacts" class="hidden space-y-6"> |
| <div class="flex justify-between items-center"> |
| <h2 class="text-2xl font-bold">Contacts</h2> |
| <input type="text" id="contactSearch" placeholder="Search contacts..." class="bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-sm focus:outline-none focus:border-purple-500"> |
| </div> |
|
|
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" id="contactsGrid"> |
| |
| </div> |
| </section> |
|
|
| |
| <section id="photos" class="hidden space-y-6"> |
| <div class="flex justify-between items-center"> |
| <h2 class="text-2xl font-bold">Photos & Videos</h2> |
| <div class="flex space-x-2"> |
| <button class="px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg text-sm hover:bg-gray-700 transition">All</button> |
| <button class="px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg text-sm hover:bg-gray-700 transition">Screenshots</button> |
| <button class="px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg text-sm hover:bg-gray-700 transition">Camera</button> |
| </div> |
| </div> |
|
|
| <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4" id="photosGrid"> |
| |
| </div> |
| </section> |
|
|
| |
| <section id="browser" class="hidden space-y-6"> |
| <h2 class="text-2xl font-bold">Browser History</h2> |
| <div class="bg-gray-800 rounded-2xl border border-gray-700 overflow-hidden"> |
| <table class="w-full"> |
| <thead class="bg-gray-700/50"> |
| <tr> |
| <th class="text-left p-4 text-sm font-medium text-gray-400">Website</th> |
| <th class="text-left p-4 text-sm font-medium text-gray-400">URL</th> |
| <th class="text-left p-4 text-sm font-medium text-gray-400">Visits</th> |
| <th class="text-left p-4 text-sm font-medium text-gray-400">Last Visit</th> |
| </tr> |
| </thead> |
| <tbody id="browserTableBody" class="divide-y divide-gray-700"> |
| |
| </tbody> |
| </table> |
| </div> |
| </section> |
|
|
| |
| <section id="apps" class="hidden space-y-6"> |
| <div class="flex justify-between items-center"> |
| <h2 class="text-2xl font-bold">Installed Applications</h2> |
| <div class="text-sm text-gray-400"> |
| Total: <span class="text-white font-semibold">42 Apps</span> |
| </div> |
| </div> |
|
|
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4" id="appsGrid"> |
| |
| </div> |
| </section> |
|
|
| |
| <section id="keylogger" class="hidden space-y-6"> |
| <div class="flex justify-between items-center"> |
| <h2 class="text-2xl font-bold">Keylogger</h2> |
| <div class="flex items-center space-x-2 text-sm text-gray-400"> |
| <div class="w-2 h-2 bg-green-500 rounded-full status-dot"></div> |
| <span>Recording Active</span> |
| </div> |
| </div> |
|
|
| <div class="bg-gray-800 rounded-2xl border border-gray-700 p-6"> |
| <div class="space-y-4" id="keyloggerList"> |
| |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="screen" class="hidden space-y-6"> |
| <div class="flex justify-between items-center"> |
| <h2 class="text-2xl font-bold">Screen Recordings</h2> |
| <button class="px-4 py-2 bg-red-600 rounded-lg text-sm hover:bg-red-700 transition flex items-center"> |
| <div class="w-2 h-2 bg-white rounded-full mr-2 status-dot"></div> |
| Recording |
| </button> |
| </div> |
|
|
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="screenRecordings"> |
| |
| </div> |
| </section> |
|
|
| </div> |
| </main> |
| </div> |
|
|
| |
| <div id="mobileMenu" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden" onclick="toggleMobileMenu()"> |
| <div class="w-64 bg-gray-800 h-full p-4" onclick="event.stopPropagation()"> |
| <nav class="space-y-2"> |
| <a href="#" onclick="showSection('dashboard'); toggleMobileMenu()" class="block p-3 rounded-lg hover:bg-gray-700">Dashboard</a> |
| <a href="#" onclick="showSection('calls'); toggleMobileMenu()" class="block p-3 rounded-lg hover:bg-gray-700">Calls</a> |
| <a href="#" onclick="showSection('messages'); toggleMobileMenu()" class="block p-3 rounded-lg hover:bg-gray-700">Messages</a> |
| <a href="#" onclick="showSection('locations'); toggleMobileMenu()" class="block p-3 rounded-lg hover:bg-gray-700">Location</a> |
| </nav> |
| </div> |
| </div> |
|
|
| <script> |
| |
| lucide.createIcons(); |
| |
| |
| const mockData = { |
| calls: [ |
| { type: 'incoming', contact: 'Mom', number: '+1 (555) 123-4567', duration: '5:23', time: '2:34 PM', date: 'Today' }, |
| { type: 'outgoing', contact: 'John Smith', number: '+1 (555) 987-6543', duration: '2:15', time: '1:45 PM', date: 'Today' }, |
| { type: 'missed', contact: 'Unknown', number: '+1 (555) 456-7890', duration: '-', time: '11:20 AM', date: 'Today' }, |
| { type: 'incoming', contact: 'Sarah Johnson', number: '+1 (555) 234-5678', duration: '8:42', time: 'Yesterday', date: 'Yesterday' }, |
| { type: 'outgoing', contact: 'Work', number: '+1 (555) 876-5432', duration: '15:30', time: 'Yesterday', date: 'Yesterday' }, |
| ], |
| messages: [ |
| { id: 1, name: 'Sarah Johnson', avatar: 'http://static.photos/people/200x200/1', lastMessage: 'See you at 5!', time: '2:30 PM', unread: 2, online: true }, |
| { id: 2, name: 'Mom', avatar: 'http://static.photos/people/200x200/2', lastMessage: 'Call me when you can', time: '1:15 PM', unread: 0, online: false }, |
| { id: 3, name: 'Work Group', avatar: 'http://static.photos/abstract/200x200/3', lastMessage: 'Meeting postponed', time: '11:45 AM', unread: 5, online: true }, |
| ], |
| chatMessages: [ |
| { sender: 'them', text: 'Hey! Are we still on for tonight?', time: '2:15 PM' }, |
| { sender: 'me', text: 'Yes, definitely! What time works for you?', time: '2:20 PM' }, |
| { sender: 'them', text: 'How about 5 PM at the usual place?', time: '2:25 PM' }, |
| { sender: 'me', text: 'Perfect, see you then!', time: '2:28 PM' }, |
| { sender: 'them', text: 'See you at 5!', time: '2:30 PM' }, |
| ], |
| locations: [ |
| { name: 'Home', address: '123 Main St, New York, NY', time: '2:34 PM', lat: 40.7128, lng: -74.0060 }, |
| { name: 'Central Park', address: 'Central Park, New York, NY', time: '12:15 PM', lat: 40.7829, lng: -73.9654 }, |
| { name: 'Coffee Shop', address: '456 Broadway, New York, NY', time: '10:30 AM', lat: 40.7190, lng: -73.9990 }, |
| ], |
| contacts: [ |
| { name: 'Sarah Johnson', number: '+1 (555) 234-5678', email: 'sarah@email.com', photo: 'http://static.photos/people/200x200/1' }, |
| { name: 'John Smith', number: '+1 (555) 987-6543', email: 'john@email.com', photo: 'http://static.photos/people/200x200/4' }, |
| { name: 'Mom', number: '+1 (555) 123-4567', email: 'mom@email.com', photo: 'http://static.photos/people/200x200/2' }, |
| { name: 'Dad', number: '+1 (555) 765-4321', email: 'dad@email.com', photo: 'http://static.photos/people/200x200/5' }, |
| { name: 'Emma Wilson', number: '+1 (555) 345-6789', email: 'emma@email.com', photo: 'http://static.photos/people/200x200/6' }, |
| { name: 'Mike Brown', number: '+1 (555) 456-7890', email: 'mike@email.com', photo: 'http://static.photos/people/200x200/7' }, |
| ], |
| browser: [ |
| { title: 'Google', url: 'https://google.com', visits: 45, last: '2:30 PM' }, |
| { title: 'YouTube', url: 'https://youtube.com', visits: 32, last: '1:45 PM' }, |
| { title: 'Instagram', url: 'https://instagram.com', visits: 28, last: '12:20 PM' }, |
| { title: 'News Site', url: 'https://cnn.com', visits: 12, last: '11:00 AM' }, |
| { title: 'Maps', url: 'https://maps.google.com', visits: 8, last: '10:30 AM' }, |
| ], |
| apps: [ |
| { name: 'WhatsApp', category: 'Social', size: '45 MB', icon: 'message-circle' }, |
| { name: 'Instagram', category: 'Social', size: '89 MB', icon: 'camera' }, |
| { name: 'Maps', category: 'Navigation', size: '34 MB', icon: 'map' }, |
| { name: 'Spotify', category: 'Music', size: '120 MB', icon: 'music' }, |
| { name: 'Chrome', category: 'Browser', size: '56 MB', icon: 'chrome' }, |
| { name: 'Photos', category: 'Media', size: '23 MB', icon: 'image' }, |
| { name: 'Settings', category: 'System', size: '12 MB', icon: 'settings' }, |
| { name: 'Calendar', category: 'Productivity', size: '18 MB', icon: 'calendar' }, |
| ], |
| keylogs: [ |
| { app: 'WhatsApp', text: 'Hey are you coming to the party tonight?', time: '2:34 PM' }, |
| { app: 'Notes', text: 'Meeting password: 123456', time: '2:15 PM' }, |
| { app: 'Messages', text: 'The address is 123 Main Street', time: '1:45 PM' }, |
| { app: 'Browser', text: 'google.com/search/how to make pizza', time: '12:30 PM' }, |
| ] |
| }; |
| |
| let map = null; |
| |
| function closeDisclaimer() { |
| document.getElementById('disclaimerModal').style.display = 'none'; |
| localStorage.setItem('disclaimerAccepted', 'true'); |
| } |
| |
| function showSection(sectionId) { |
| |
| document.querySelectorAll('section').forEach(section => { |
| section.classList.add('hidden'); |
| }); |
| |
| |
| document.getElementById(sectionId).classList.remove('hidden'); |
| |
| |
| document.querySelectorAll('.sidebar-item').forEach(item => { |
| item.classList.remove('active'); |
| }); |
| event.target.closest('.sidebar-item')?.classList.add('active'); |
| |
| |
| if (sectionId === 'calls') renderCalls(); |
| if (sectionId === 'messages') renderMessages(); |
| if (sectionId === 'locations') initMap(); |
| if (sectionId === 'contacts') renderContacts(); |
| if (sectionId === 'photos') renderPhotos(); |
| if (sectionId === 'browser') renderBrowser(); |
| if (sectionId === 'apps') renderApps(); |
| if (sectionId === 'keylogger') renderKeylogger(); |
| if (sectionId === 'screen') renderScreenRecordings(); |
| |
| lucide.createIcons(); |
| } |
| |
| function renderCalls() { |
| const tbody = document.getElementById('callsTableBody'); |
| tbody.innerHTML = mockData.calls.map(call => ` |
| <tr class="hover:bg-gray-700/50 transition"> |
| <td class="p-4"> |
| <div class="flex items-center"> |
| ${call.type === 'incoming' ? '<i data-lucide="arrow-down-left" class="w-5 h-5 text-green-500 mr-2"></i>' : |
| call.type === 'outgoing' ? '<i data-lucide="arrow-up-right" class="w-5 h-5 text-blue-500 mr-2"></i>' : |
| '<i data-lucide="phone-missed" class="w-5 h-5 text-red-500 mr-2"></i>'} |
| <span class="capitalize">${call.type}</span> |
| </div> |
| </td> |
| <td class="p-4 font-medium">${call.contact}</td> |
| <td class="p-4 text-gray-400">${call.number}</td> |
| <td class="p-4 text-gray-400">${call.duration}</td> |
| <td class="p-4 text-gray-400">${call.time}</td> |
| </tr> |
| `).join(''); |
| } |
| |
| function renderMessages() { |
| const contactsList = document.getElementById('messageContacts'); |
| contactsList.innerHTML = mockData.messages.map(msg => ` |
| <div class="p-4 hover:bg-gray-700/50 cursor-pointer border-b border-gray-700 transition"> |
| <div class="flex items-center space-x-3"> |
| <div class="relative"> |
| <img src="${msg.avatar}" class="w-12 h-12 rounded-full"> |
| ${msg.online ? '<div class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-gray-800"></div>' : ''} |
| </div> |
| <div class="flex-1 min-w-0"> |
| <div class="flex justify-between items-start"> |
| <h4 class="font-medium truncate">${msg.name}</h4> |
| <span class="text-xs text-gray-400">${msg.time}</span> |
| </div> |
| <p class="text-sm text-gray-400 truncate">${msg.lastMessage}</p> |
| </div> |
| ${msg.unread > 0 ? `<span class="bg-purple-600 text-xs px-2 py-1 rounded-full">${msg.unread}</span>` : ''} |
| </div> |
| </div> |
| `).join(''); |
| |
| const chatContainer = document.getElementById('chatMessages'); |
| chatContainer.innerHTML = mockData.chatMessages.map(msg => ` |
| <div class="flex ${msg.sender === 'me' ? 'justify-end' : 'justify-start'}"> |
| <div class="chat-bubble ${msg.sender === 'me' ? 'bg-purple-600' : 'bg-gray-700'} rounded-2xl px-4 py-2"> |
| <p>${msg.text}</p> |
| <span class="text-xs ${msg.sender === 'me' ? 'text-purple-200' : 'text-gray-400'} mt-1 block">${msg.time}</span> |
| </div> |
| </div> |
| `).join(''); |
| } |
| |
| function initMap() { |
| if (!map) { |
| map = L.map('map').setView([40.7128, -74.0060], 13); |
| L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { |
| attribution: '© OpenStreetMap contributors' |
| }).addTo(map); |
| |
| mockData.locations.forEach((loc, idx) => { |
| L.marker([loc.lat, loc.lng]) |
| .addTo(map) |
| .bindPopup(`<b>${loc.name}</b><br>${loc.time}`); |
| }); |
| } |
| setTimeout(() => map.invalidateSize(), 100); |
| |
| const locationList = document.getElementById('locationList'); |
| locationList.innerHTML = mockData.locations.map(loc => ` |
| <div class="flex items-start space-x-3 p-3 rounded-lg hover:bg-gray-700/50 transition cursor-pointer"> |
| <div class="w-10 h-10 bg-green-500/20 rounded-full flex items-center justify-center flex-shrink-0"> |
| <i data-lucide="map-pin" class="w-5 h-5 text-green-500"></i> |
| </div> |
| <div class="flex-1"> |
| <h4 class="font-medium">${loc.name}</h4> |
| <p class="text-sm text-gray-400">${loc.address}</p> |
| <p class="text-xs text-gray-500 mt-1">${loc.time}</p> |
| </div> |
| </div> |
| `).join(''); |
| } |
| |
| function renderContacts() { |
| const grid = document.getElementById('contactsGrid'); |
| grid.innerHTML = mockData.contacts.map(contact => ` |
| <div class="bg-gray-800 rounded-xl p-4 border border-gray-700 hover:border-purple-500 transition"> |
| <div class="flex items-center space-x-4"> |
| <img src="${contact.photo}" class="w-16 h-16 rounded-full"> |
| <div class="flex-1 min-w-0"> |
| <h4 class="font-semibold truncate">${contact.name}</h4> |
| <p class="text-sm text-gray-400">${contact.number}</p> |
| <p class="text-xs text-gray-500 truncate">${contact.email}</p> |
| </div> |
| </div> |
| <div class="flex mt-4 space-x-2"> |
| <button class="flex-1 py-2 bg-gray-700 rounded-lg text-sm hover:bg-gray-600 transition flex items-center justify-center"> |
| <i data-lucide="phone" class="w-4 h-4 mr-1"></i> Call |
| </button> |
| <button class="flex-1 py-2 bg-gray-700 rounded-lg text-sm hover:bg-gray-600 transition flex items-center justify-center"> |
| <i data-lucide="message-square" class="w-4 h-4 mr-1"></i> Text |
| </button> |
| </div> |
| </div> |
| `).join(''); |
| } |
| |
| function renderPhotos() { |
| const grid = document.getElementById('photosGrid'); |
| const photos = Array.from({length: 12}, (_, i) => ({ |
| url: `http://static.photos/nature/320x240/${i + 1}`, |
| date: new Date(Date.now() - i * 86400000).toLocaleDateString() |
| })); |
| |
| grid.innerHTML = photos.map(photo => ` |
| <div class="relative group aspect-square rounded-xl overflow-hidden cursor-pointer"> |
| <img src="${photo.url}" class="w-full h-full object-cover transition transform group-hover:scale-110"> |
| <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-50 transition flex items-center justify-center opacity-0 group-hover:opacity-100"> |
| <div class="text-center"> |
| <i data-lucide="maximize-2" class="w-6 h-6 mx-auto mb-1"></i> |
| <span class="text-xs">${photo.date}</span> |
| </div> |
| </div> |
| </div> |
| `).join(''); |
| } |
| |
| function renderBrowser() { |
| const tbody = document.getElementById('browserTableBody'); |
| tbody.innerHTML = mockData.browser.map(site => ` |
| <tr class="hover:bg-gray-700/50 transition"> |
| <td class="p-4"> |
| <div class="flex items-center"> |
| <div class="w-8 h-8 bg-blue-500/20 rounded-lg flex items-center justify-center mr-3"> |
| <i data-lucide="globe" class="w-4 h-4 text-blue-500"></i> |
| </div> |
| <span class="font-medium">${site.title}</span> |
| </div> |
| </td> |
| <td class="p-4 text-gray-400 text-sm">${site.url}</td> |
| <td class="p-4 text-gray-400">${site.visits}</td> |
| <td class="p-4 text-gray-400">${site.last}</td> |
| </tr> |
| `).join(''); |
| } |
| |
| function renderApps() { |
| const grid = document.getElementById('appsGrid'); |
| grid.innerHTML = mockData.apps.map(app => ` |
| <div class="bg-gray-800 rounded-xl p-4 border border-gray-700 flex items-center space-x-4 hover:border-purple-500 transition"> |
| <div class="w-12 h-12 bg-gray-700 rounded-xl flex items-center justify-center"> |
| <i data-lucide="${app.icon}" class="w-6 h-6 text-purple-400"></i> |
| </div> |
| <div class="flex-1"> |
| <h4 class="font-medium">${app.name}</h4> |
| <p class="text-xs text-gray-400">${app.category} • ${app.size}</p> |
| </div> |
| <button class="text-gray-400 hover:text-white"> |
| <i data-lucide="more-vertical" class="w-5 h-5"></i> |
| </button> |
| </div> |
| `).join(''); |
| } |
| |
| function renderKeylogger() { |
| const container = document.getElementById('keyloggerList'); |
| container.innerHTML = mockData.keylogs.map(log => ` |
| <div class="border-l-4 border-purple-500 pl-4 py-2 bg-gray-700/30 rounded-r-lg"> |
| <div class="flex justify-between items-start mb-1"> |
| <span class="text-sm font-medium text-purple-400">${log.app}</span> |
| <span class="text-xs text-gray-500">${log.time}</span> |
| </div> |
| <p class="text-gray-300 font-mono text-sm">${log.text}</p> |
| </div> |
| `).join(''); |
| } |
| |
| function renderScreenRecordings() { |
| const container = document.getElementById('screenRecordings'); |
| const recordings = [ |
| { time: '2:30 PM - 2:35 PM', duration: '5:00', thumb: 'http://static.photos/technology/640x360/1' }, |
| { time: '1:00 PM - 1:15 PM', duration: '15:00', thumb: 'http://static.photos/technology/640x360/2' }, |
| { time: '11:30 AM - 11:45 AM', duration: '15:00', thumb: 'http://static.photos/technology/640x360/3' }, |
| ]; |
| |
| container.innerHTML = recordings.map(rec => ` |
| <div class="bg-gray-800 rounded-xl overflow-hidden border border-gray-700 group cursor-pointer"> |
| <div class="relative aspect-video"> |
| <img src="${rec.thumb}" class="w-full h-full object-cover"> |
| <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center group-hover:bg-opacity-30 transition"> |
| <div class="w-16 h-16 bg-white bg-opacity-90 rounded-full flex items-center justify-center pl-1"> |
| <i data-lucide="play" class="w-8 h-8 text-gray-900"></i> |
| </div> |
| </div> |
| <span class="absolute bottom-2 right-2 bg-black bg-opacity-70 px-2 py-1 rounded text-xs">${rec.duration}</span> |
| </div> |
| <div class="p-4"> |
| <p class="font-medium">${rec.time}</p> |
| <p class="text-sm text-gray-400 mt-1">Automatic recording</p> |
| </div> |
| </div> |
| `).join(''); |
| } |
| |
| function toggleMobileMenu() { |
| const menu = document.getElementById('mobileMenu'); |
| menu.classList.toggle('hidden'); |
| } |
| |
| function refreshData() { |
| const btn = event.target.closest('button'); |
| const icon = btn.querySelector('i'); |
| icon.classList.add('animate-spin'); |
| setTimeout(() => { |
| icon.classList.remove('animate-spin'); |
| document.getElementById('lastSync').textContent = 'Just now'; |
| }, 1000); |
| } |
| |
| |
| function initCharts() { |
| const ctx1 = document.getElementById('activityChart').getContext('2d'); |
| new Chart(ctx1, { |
| type: 'line', |
| data: { |
| labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], |
| datasets: [{ |
| label: 'Calls', |
| data: [12, 19, 15, 25, 22, 30, 24], |
| borderColor: '#667eea', |
| backgroundColor: 'rgba(102, 126, 234, 0.1)', |
| tension: 0.4, |
| fill: true |
| }, { |
| label: 'Messages', |
| data: [20, 35, 28, 45, 40, 55, 48], |
| borderColor: '#764ba2', |
| backgroundColor: 'rgba(118, 75, 162, 0.1)', |
| tension: 0.4, |
| fill: true |
| }] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| plugins: { |
| legend: { |
| labels: { color: '#9ca3af' } |
| } |
| }, |
| scales: { |
| y: { |
| grid: { color: 'rgba(255, 255, 255, 0.1)' }, |
| ticks: { color: '#9ca3af' } |
| }, |
| x: { |
| grid: { color: 'rgba(255, 255, 255, 0.1)' }, |
| ticks: { color: '#9ca3af' } |
| } |
| } |
| } |
| }); |
| |
| const ctx2 = document.getElementById('appUsageChart').getContext('2d'); |
| new Chart(ctx2, { |
| type: 'doughnut', |
| data: { |
| labels: ['Social', 'Productivity', 'Entertainment', 'Other'], |
| datasets: [{ |
| data: [35, 25, 30, 10], |
| backgroundColor: ['#667eea', '#764ba2', '#f093fb', '#4facfe'], |
| borderWidth: 0 |
| }] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| plugins: { |
| legend: { |
| position: 'bottom', |
| labels: { color: '#9ca3af', padding: 20 } |
| } |
| } |
| } |
| }); |
| } |
| |
| |
| window.onload = function() { |
| if (localStorage.getItem('disclaimerAccepted')) { |
| document.getElementById('disclaimerModal').style.display = 'none'; |
| } |
| initCharts(); |
| lucide.createIcons(); |
| |
| |
| setInterval(() => { |
| const now = new Date(); |
| document.getElementById('lastSync').textContent = now.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'}); |
| }, 60000); |
| }; |
| </script> |
| <script src="https://deepsite.hf.co/deepsite-badge.js"></script> |
| </body> |
| </html> |
