Hugging Face's logo

Spaces:
S-Dreamer
/
primussecuritydashboard
Running

App Files Community
primussecuritydashboard / index.html
S-Dreamer's picture
S-Dreamer
Add 3 files
4a271ac verified
raw
history blame contribute delete
34.5 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>PRIMUS Dashboard</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Roboto:wght@300;400;500;700&display=swap');
:root {
 --primary: #3b82f6;
 --primary-dark: #2563eb;
 --secondary: #10b981;
 --danger: #ef4444;
 --warning: #f59e0b;
 --dark: #1e293b;
 --light: #f8fafc;
 }
body {
 font-family: 'Roboto', sans-serif;
 background-color: #f1f5f9;
 color: var(--dark);
 }
.dashboard-title {
 font-family: 'Orbitron', sans-serif;
 letter-spacing: 1px;
 text-shadow: 0 2px 4px rgba(0,0,0,0.1);
 }
.card {
 transition: all 0.3s ease;
 box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
 }
.card:hover {
 transform: translateY(-2px);
 box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
 }
.status-indicator {
 width: 12px;
 height: 12px;
 border-radius: 50%;
 display: inline-block;
 margin-right: 8px;
 }
.status-safe {
 background-color: var(--secondary);
 box-shadow: 0 0 10px var(--secondary);
 }
.status-warning {
 background-color: var(--warning);
 box-shadow: 0 0 10px var(--warning);
 }
.status-danger {
 background-color: var(--danger);
 box-shadow: 0 0 10px var(--danger);
 }
.scan-progress {
 height: 4px;
 background: linear-gradient(90deg, var(--primary), var(--secondary));
 background-size: 200% 100%;
 animation: progress 2s linear infinite;
 }
@keyframes progress {
 0% { background-position: 0% 50%; }
 50% { background-position: 100% 50%; }
 100% { background-position: 0% 50%; }
 }
.glow {
 animation: glow 2s infinite alternate;
 }
@keyframes glow {
 from { box-shadow: 0 0 5px rgba(59, 130, 246, 0.5); }
 to { box-shadow: 0 0 20px rgba(59, 130, 246, 0.8); }
 }
/* Compact scanner styles */
 .compact-scanner {
 max-height: 300px;
 overflow: hidden;
 transition: all 0.3s ease;
 }
.compact-scanner.expanded {
 max-height: 600px;
 }
.compact-results {
 max-height: 150px;
 font-size: 0.85rem;
 line-height: 1.3;
 }
.compact-input {
 padding: 0.5rem 0.75rem;
 font-size: 0.9rem;
 }
.compact-btn {
 padding: 0.5rem 1rem;
 font-size: 0.9rem;
 }
 </style>
</head>
<body class="min-h-screen">
 <div class="container mx-auto px-4 py-8">
 <!-- Header -->
 <header class="flex justify-between items-center mb-8">
 <div>
 <h1 class="dashboard-title text-3xl md:text-4xl font-bold text-blue-600">
 <i class="fas fa-shield-alt mr-2"></i>PRIMUS SECURITY DASHBOARD
 </h1>
 <p class="text-slate-500">Comprehensive security monitoring and threat detection</p>
 </div>
 <div class="flex items-center space-x-4">
 <div class="relative">
 <button id="notifications" class="p-2 rounded-full bg-white text-slate-600 hover:bg-slate-100">
 <i class="fas fa-bell"></i>
 <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span>
 </button>
 </div>
 <div class="flex items-center space-x-2 bg-white px-4 py-2 rounded-full shadow-sm">
 <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
 <i class="fas fa-user"></i>
 </div>
 <span class="font-medium">Admin</span>
 </div>
 </div>
 </header>
<!-- Dashboard Grid -->
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
 <!-- System Status Card -->
 <div class="card bg-white rounded-xl overflow-hidden">
 <div class="px-6 py-4 border-b border-slate-100 flex justify-between items-center">
 <h2 class="font-bold text-lg text-slate-800">
 <i class="fas fa-heartbeat mr-2 text-red-500"></i>System Status
 </h2>
 <span class="text-xs px-2 py-1 bg-blue-100 text-blue-600 rounded-full">LIVE</span>
 </div>
 <div class="p-6">
 <div id="status" class="space-y-4">
 <div class="flex justify-between items-center">
 <span class="text-slate-600">Safety Mode:</span>
 <span class="font-medium flex items-center">
 <span class="status-indicator status-safe"></span>
 <span id="safety-mode">Loading...</span>
 </span>
 </div>
 <div class="flex justify-between items-center">
 <span class="text-slate-600">Current Scenario:</span>
 <span class="font-medium" id="scenario">Loading...</span>
 </div>
 <div class="flex justify-between items-center">
 <span class="text-slate-600">Threat Level:</span>
 <span class="font-medium">
 <span id="threat-level" class="px-2 py-1 rounded-full text-xs bg-green-100 text-green-800">Analyzing...</span>
 </span>
 </div>
 <div class="flex justify-between items-center">
 <span class="text-slate-600">Last Updated:</span>
 <span class="font-medium text-sm" id="last-updated">Just now</span>
 </div>
 </div>
 </div>
 <div class="px-6 py-3 bg-slate-50 text-right">
 <button onclick="updateStatus()" class="text-sm text-blue-600 hover:text-blue-800 flex items-center justify-end space-x-1">
 <i class="fas fa-sync-alt"></i>
 <span>Refresh</span>
 </button>
 </div>
 </div>
<!-- Compact Network Scanner Card -->
 <div class="card bg-white rounded-xl overflow-hidden compact-scanner" id="scanner-container">
 <div class="px-6 py-4 border-b border-slate-100 flex justify-between items-center">
 <h2 class="font-bold text-lg text-slate-800">
 <i class="fas fa-search mr-2 text-blue-500"></i>Network Scanner
 </h2>
 <button id="toggle-scanner" class="text-blue-600 hover:text-blue-800 text-sm">
 <i class="fas fa-expand-alt"></i>
 </button>
 </div>
 <div class="p-4">
 <div class="mb-3">
 <label for="target-ip" class="block text-sm font-medium text-slate-700 mb-1">Target</label>
 <div class="flex space-x-2">
 <input type="text" id="target-ip" placeholder="192.168.1.1"
class="flex-1 compact-input border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
 <button onclick="scan()" class="compact-btn bg-blue-600 text-white rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 flex items-center space-x-2 glow">
 <i class="fas fa-bolt"></i>
 <span>Scan</span>
 </button>
 </div>
 </div>
 <div id="scan-progress" class="scan-progress rounded-full mb-3 hidden"></div>
 <div class="bg-slate-50 rounded-lg p-3">
 <div class="flex justify-between items-center mb-1">
 <label class="block text-sm font-medium text-slate-700">Results</label>
 <button id="clear-results" class="text-xs text-slate-500 hover:text-slate-700">
 <i class="fas fa-trash-alt mr-1"></i>Clear
 </button>
 </div>
 <pre id="results" class="compact-results text-slate-600 font-mono overflow-y-auto p-2 bg-white rounded border border-slate-200">No scan performed yet. Enter a target and click Scan.</pre>
 </div>
 </div>
 </div>
<!-- Threat Detection Card -->
 <div class="card bg-white rounded-xl overflow-hidden">
 <div class="px-6 py-4 border-b border-slate-100">
 <h2 class="font-bold text-lg text-slate-800">
 <i class="fas fa-radar mr-2 text-purple-500"></i>Threat Detection
 </h2>
 </div>
 <div class="p-6">
 <div class="space-y-4">
 <div class="flex items-center justify-between">
 <div class="flex items-center space-x-3">
 <div class="p-2 bg-red-100 rounded-lg text-red-600">
 <i class="fas fa-fire"></i>
 </div>
 <div>
 <h3 class="font-medium">Malicious Activity</h3>
 <p class="text-xs text-slate-500">Potential threats detected</p>
 </div>
 </div>
 <span class="text-red-600 font-bold">12</span>
 </div>
 <div class="flex items-center justify-between">
 <div class="flex items-center space-x-3">
 <div class="p-2 bg-yellow-100 rounded-lg text-yellow-600">
 <i class="fas fa-exclamation-triangle"></i>
 </div>
 <div>
 <h3 class="font-medium">Suspicious Logins</h3>
 <p class="text-xs text-slate-500">Unusual access patterns</p>
 </div>
 </div>
 <span class="text-yellow-600 font-bold">5</span>
 </div>
 <div class="flex items-center justify-between">
 <div class="flex items-center space-x-3">
 <div class="p-2 bg-blue-100 rounded-lg text-blue-600">
 <i class="fas fa-shield-virus"></i>
 </div>
 <div>
 <h3 class="font-medium">Vulnerabilities</h3>
 <p class="text-xs text-slate-500">System weaknesses found</p>
 </div>
 </div>
 <span class="text-blue-600 font-bold">8</span>
 </div>
 </div>
 </div>
 <div class="px-6 py-3 bg-slate-50 text-center">
 <button class="text-sm text-blue-600 hover:text-blue-800 flex items-center justify-center space-x-1 w-full">
 <i class="fas fa-chart-line"></i>
 <span>View Detailed Report</span>
 </button>
 </div>
 </div>
 </div>
<!-- Additional Dashboard Sections -->
 <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
 <!-- Activity Log -->
 <div class="card bg-white rounded-xl overflow-hidden">
 <div class="px-6 py-4 border-b border-slate-100">
 <h2 class="font-bold text-lg text-slate-800">
 <i class="fas fa-history mr-2 text-green-500"></i>Recent Activity
 </h2>
 </div>
 <div class="p-6">
 <div class="space-y-4">
 <div class="flex items-start space-x-3">
 <div class="mt-1">
 <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
 <i class="fas fa-user-shield text-sm"></i>
 </div>
 </div>
 <div>
 <h3 class="font-medium">Admin login detected</h3>
 <p class="text-sm text-slate-500">From IP: 192.168.1.100 at 10:42 AM</p>
 </div>
 <div class="ml-auto text-xs text-slate-400">2 min ago</div>
 </div>
 <div class="flex items-start space-x-3">
 <div class="mt-1">
 <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center text-green-600">
 <i class="fas fa-check text-sm"></i>
 </div>
 </div>
 <div>
 <h3 class="font-medium">System scan completed</h3>
 <p class="text-sm text-slate-500">No critical threats found</p>
 </div>
 <div class="ml-auto text-xs text-slate-400">15 min ago</div>
 </div>
 <div class="flex items-start space-x-3">
 <div class="mt-1">
 <div class="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600">
 <i class="fas fa-exclamation text-sm"></i>
 </div>
 </div>
 <div>
 <h3 class="font-medium">Unusual network activity</h3>
 <p class="text-sm text-slate-500">From IP: 192.168.1.45 - Port scanning detected</p>
 </div>
 <div class="ml-auto text-xs text-slate-400">1 hour ago</div>
 </div>
 <div class="flex items-start space-x-3">
 <div class="mt-1">
 <div class="w-8 h-8 rounded-full bg-red-100 flex items-center justify-center text-red-600">
 <i class="fas fa-times text-sm"></i>
 </div>
 </div>
 <div>
 <h3 class="font-medium">Blocked brute force attempt</h3>
 <p class="text-sm text-slate-500">22 failed SSH login attempts</p>
 </div>
 <div class="ml-auto text-xs text-slate-400">3 hours ago</div>
 </div>
 </div>
 </div>
 <div class="px-6 py-3 bg-slate-50 text-center">
 <button class="text-sm text-blue-600 hover:text-blue-800 flex items-center justify-center space-x-1 w-full">
 <i class="fas fa-list-ul"></i>
 <span>View Full Log</span>
 </button>
 </div>
 </div>
<!-- System Resources -->
 <div class="card bg-white rounded-xl overflow-hidden">
 <div class="px-6 py-4 border-b border-slate-100">
 <h2 class="font-bold text-lg text-slate-800">
 <i class="fas fa-microchip mr-2 text-amber-500"></i>System Resources
 </h2>
 </div>
 <div class="p-6">
 <div class="space-y-6">
 <!-- CPU Usage -->
 <div>
 <div class="flex justify-between mb-1">
 <span class="text-sm font-medium text-slate-700">CPU Usage</span>
 <span class="text-sm font-medium text-blue-600" id="cpu-usage">65%</span>
 </div>
 <div class="w-full bg-slate-200 rounded-full h-2.5">
 <div class="bg-blue-600 h-2.5 rounded-full" style="width: 65%"></div>
 </div>
 </div>
<!-- Memory Usage -->
 <div>
 <div class="flex justify-between mb-1">
 <span class="text-sm font-medium text-slate-700">Memory Usage</span>
 <span class="text-sm font-medium text-purple-600" id="memory-usage">78%</span>
 </div>
 <div class="w-full bg-slate-200 rounded-full h-2.5">
 <div class="bg-purple-600 h-2.5 rounded-full" style="width: 78%"></div>
 </div>
 </div>
<!-- Disk Usage -->
 <div>
 <div class="flex justify-between mb-1">
 <span class="text-sm font-medium text-slate-700">Disk Usage</span>
 <span class="text-sm font-medium text-green-600" id="disk-usage">42%</span>
 </div>
 <div class="w-full bg-slate-200 rounded-full h-2.5">
 <div class="bg-green-600 h-2.5 rounded-full" style="width: 42%"></div>
 </div>
 </div>
<!-- Network Traffic -->
 <div class="grid grid-cols-2 gap-4">
 <div>
 <div class="flex items-center space-x-2">
 <i class="fas fa-arrow-down text-blue-500"></i>
 <span class="text-sm font-medium text-slate-700">Download</span>
 </div>
 <div class="text-xl font-bold mt-1" id="download-speed">12.4 Mbps</div>
 </div>
 <div>
 <div class="flex items-center space-x-2">
 <i class="fas fa-arrow-up text-green-500"></i>
 <span class="text-sm font-medium text-slate-700">Upload</span>
 </div>
 <div class="text-xl font-bold mt-1" id="upload-speed">5.8 Mbps</div>
 </div>
 </div>
 </div>
 </div>
 <div class="px-6 py-3 bg-slate-50 text-center">
 <button onclick="updateResources()" class="text-sm text-blue-600 hover:text-blue-800 flex items-center justify-center space-x-1 w-full">
 <i class="fas fa-sync-alt"></i>
 <span>Refresh Metrics</span>
 </button>
 </div>
 </div>
 </div>
<!-- Footer -->
 <footer class="text-center text-sm text-slate-500 mt-8">
 <p>PRIMUS Security Dashboard v2.4.1 | &copy; 2023 PRIMUS Security Systems</p>
 <p class="mt-1">Last system update: <span id="system-version">2023-11-15 14:30 UTC</span></p>
 </footer>
 </div>
<script>
 // Update system status
 function updateStatus() {
 const statusElement = document.getElementById('status');
 const safetyModeElement = document.getElementById('safety-mode');
 const scenarioElement = document.getElementById('scenario');
 const threatLevelElement = document.getElementById('threat-level');
 const lastUpdatedElement = document.getElementById('last-updated');
// Show loading state
 statusElement.innerHTML = '<div class="text-center py-4"><i class="fas fa-spinner fa-spin text-blue-500 text-2xl"></i><p class="mt-2 text-sm text-slate-600">Updating system status...</p></div>';
// Simulate API call with timeout
 setTimeout(() => {
 // Random status data for demonstration
 const statuses = ['Active Protection', 'High Alert', 'Maintenance Mode'];
 const scenarios = ['Normal Operations', 'Under Attack', 'Scheduled Maintenance'];
 const threatLevels = [
 { level: 'Low', class: 'bg-green-100 text-green-800' },
 { level: 'Medium', class: 'bg-yellow-100 text-yellow-800' },
 { level: 'High', class: 'bg-red-100 text-red-800' }
 ];
const randomStatus = statuses[Math.floor(Math.random() * statuses.length)];
 const randomScenario = scenarios[Math.floor(Math.random() * scenarios.length)];
 const randomThreat = threatLevels[Math.floor(Math.random() * threatLevels.length)];
// Update status indicator color based on status
 const statusIndicator = document.querySelector('#status .status-indicator');
 if (randomStatus === 'High Alert') {
 statusIndicator.className = 'status-indicator status-danger';
 } else if (randomStatus === 'Maintenance Mode') {
 statusIndicator.className = 'status-indicator status-warning';
 } else {
 statusIndicator.className = 'status-indicator status-safe';
 }
// Update elements
 safetyModeElement.textContent = randomStatus;
 scenarioElement.textContent = randomScenario;
 threatLevelElement.textContent = randomThreat.level;
 threatLevelElement.className = `px-2 py-1 rounded-full text-xs ${randomThreat.class}`;
// Update last updated time
 const now = new Date();
 lastUpdatedElement.textContent = now.toLocaleTimeString();
// Restore original status HTML structure
 statusElement.innerHTML = `
 <div class="flex justify-between items-center">
 <span class="text-slate-600">Safety Mode:</span>
 <span class="font-medium flex items-center">
 <span class="status-indicator ${randomStatus === 'High Alert' ? 'status-danger' : randomStatus === 'Maintenance Mode' ? 'status-warning' : 'status-safe'}"></span>
 <span id="safety-mode">${randomStatus}</span>
 </span>
 </div>
 <div class="flex justify-between items-center">
 <span class="text-slate-600">Current Scenario:</span>
 <span class="font-medium" id="scenario">${randomScenario}</span>
 </div>
 <div class="flex justify-between items-center">
 <span class="text-slate-600">Threat Level:</span>
 <span class="font-medium">
 <span id="threat-level" class="px-2 py-1 rounded-full text-xs ${randomThreat.class}">${randomThreat.level}</span>
 </span>
 </div>
 <div class="flex justify-between items-center">
 <span class="text-slate-600">Last Updated:</span>
 <span class="font-medium text-sm" id="last-updated">${now.toLocaleTimeString()}</span>
 </div>
 `;
// Show notification
 showNotification('System status updated successfully', 'success');
 }, 1500);
 }
// Update system resources
 function updateResources() {
 const cpuElement = document.getElementById('cpu-usage');
 const memoryElement = document.getElementById('memory-usage');
 const diskElement = document.getElementById('disk-usage');
 const downloadElement = document.getElementById('download-speed');
 const uploadElement = document.getElementById('upload-speed');
// Generate random values for demonstration
 const randomCpu = Math.floor(Math.random() * 40) + 30;
 const randomMemory = Math.floor(Math.random() * 30) + 50;
 const randomDisk = Math.floor(Math.random() * 30) + 20;
 const randomDownload = (Math.random() * 10 + 5).toFixed(1);
 const randomUpload = (Math.random() * 5 + 2).toFixed(1);
// Update elements
 cpuElement.textContent = `${randomCpu}%`;
 document.querySelector('#cpu-usage').nextElementSibling.firstElementChild.style.width = `${randomCpu}%`;
memoryElement.textContent = `${randomMemory}%`;
 document.querySelector('#memory-usage').nextElementSibling.firstElementChild.style.width = `${randomMemory}%`;
diskElement.textContent = `${randomDisk}%`;
 document.querySelector('#disk-usage').nextElementSibling.firstElementChild.style.width = `${randomDisk}%`;
downloadElement.textContent = `${randomDownload} Mbps`;
 uploadElement.textContent = `${randomUpload} Mbps`;
// Show notification
 showNotification('Resource metrics refreshed', 'info');
 }
// Perform network scan
 function scan() {
 const targetIp = document.getElementById('target-ip').value.trim();
 const resultsElement = document.getElementById('results');
 const scanProgress = document.getElementById('scan-progress');
if (!targetIp) {
 showNotification('Please enter a target IP or hostname', 'error');
 return;
 }
// Show loading state
 resultsElement.textContent = 'Initializing scan...';
 scanProgress.classList.remove('hidden');
// Simulate scan progress
 let progress = 0;
 const progressInterval = setInterval(() => {
 progress += 5;
 if (progress >= 100) {
 clearInterval(progressInterval);
 completeScan(targetIp);
 scanProgress.classList.add('hidden');
 }
 }, 200);
// Simulate API call with timeout
 setTimeout(() => {
 // This would be replaced with actual API call in a real application
 }, 3000);
 }
function completeScan(target) {
 const resultsElement = document.getElementById('results');
// Generate realistic scan results
 const scanResults = `
Scanning target: ${target}
Scan started at: ${new Date().toLocaleString()}
PORT STATE SERVICE VERSION
22/tcp open ssh OpenSSH 8.2p1 Ubuntu 4ubuntu0.3
80/tcp open http Apache httpd 2.4.41
443/tcp open ssl/http Apache httpd 2.4.41
3306/tcp filtered mysql
8080/tcp open http-proxy nginx 1.18.0
Nmap scan report for ${target}
Host is up (0.045s latency).
5 ports scanned, 3 open, 1 filtered, 1 closed
Security Assessment:
- Outdated Apache version detected (2.4.41)
- SSH service running with default configuration
- No critical vulnerabilities found
Scan completed in 4.23 seconds
 `;
resultsElement.textContent = scanResults;
 showNotification(`Scan completed for ${target}`, 'success');
// Update activity log
 updateActivityLog(`Network scan performed on ${target}`);
 }
// Show notification
 function showNotification(message, type) {
 const notification = document.createElement('div');
 notification.className = `fixed bottom-4 right-4 px-4 py-3 rounded-lg shadow-lg text-white max-w-xs ${
 type === 'error' ? 'bg-red-500' :
type === 'success' ? 'bg-green-500' :
'bg-blue-500'
 }`;
 notification.innerHTML = `
 <div class="flex items-center">
 <i class="fas ${
 type === 'error' ? 'fa-exclamation-circle' :
type === 'success' ? 'fa-check-circle' :
'fa-info-circle'
 } mr-2"></i>
 <span>${message}</span>
 </div>
 `;
document.body.appendChild(notification);
// Auto-remove after 5 seconds
 setTimeout(() => {
 notification.classList.add('opacity-0', 'transition-opacity', 'duration-300');
 setTimeout(() => notification.remove(), 300);
 }, 5000);
 }
// Update activity log
 function updateActivityLog(message) {
 const activityLog = document.querySelector('.space-y-4');
 const now = new Date();
const newEntry = document.createElement('div');
 newEntry.className = 'flex items-start space-x-3';
 newEntry.innerHTML = `
 <div class="mt-1">
 <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
 <i class="fas fa-search text-sm"></i>
 </div>
 </div>
 <div>
 <h3 class="font-medium">${message}</h3>
 <p class="text-sm text-slate-500">Scan completed successfully</p>
 </div>
 <div class="ml-auto text-xs text-slate-400">Just now</div>
 `;
activityLog.prepend(newEntry);
 }
// Toggle scanner size
 function toggleScannerSize() {
 const scannerContainer = document.getElementById('scanner-container');
 const toggleButton = document.getElementById('toggle-scanner');
scannerContainer.classList.toggle('expanded');
if (scannerContainer.classList.contains('expanded')) {
 toggleButton.innerHTML = '<i class="fas fa-compress-alt"></i>';
 } else {
 toggleButton.innerHTML = '<i class="fas fa-expand-alt"></i>';
 }
 }
// Clear scan results
 function clearResults() {
 document.getElementById('results').textContent = 'No scan performed yet. Enter a target and click Scan.';
 }
// Initialize dashboard
 document.addEventListener('DOMContentLoaded', function() {
 updateStatus();
 updateResources();
// Set current version date
 document.getElementById('system-version').textContent = new Date().toISOString().replace('T', ' ').substring(0, 19) + ' UTC';
// Add click handler for notifications button
 document.getElementById('notifications').addEventListener('click', function() {
 showNotification('You have 3 unread notifications', 'info');
 });
// Add toggle scanner size handler
 document.getElementById('toggle-scanner').addEventListener('click', toggleScannerSize);
// Add clear results handler
 document.getElementById('clear-results').addEventListener('click', clearResults);
 });
 </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=S-Dreamer/primussecuritydashboard" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>