|
|
<!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 { |
|
|
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 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> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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 class="text-center text-sm text-slate-500 mt-8"> |
|
|
<p>PRIMUS Security Dashboard v2.4.1 | © 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> |
|
|
|
|
|
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'); |
|
|
|
|
|
|
|
|
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>'; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
|
|
|
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)]; |
|
|
|
|
|
|
|
|
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'; |
|
|
} |
|
|
|
|
|
|
|
|
safetyModeElement.textContent = randomStatus; |
|
|
scenarioElement.textContent = randomScenario; |
|
|
threatLevelElement.textContent = randomThreat.level; |
|
|
threatLevelElement.className = `px-2 py-1 rounded-full text-xs ${randomThreat.class}`; |
|
|
|
|
|
|
|
|
const now = new Date(); |
|
|
lastUpdatedElement.textContent = now.toLocaleTimeString(); |
|
|
|
|
|
|
|
|
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> |
|
|
`; |
|
|
|
|
|
|
|
|
showNotification('System status updated successfully', 'success'); |
|
|
}, 1500); |
|
|
} |
|
|
|
|
|
|
|
|
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'); |
|
|
|
|
|
|
|
|
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); |
|
|
|
|
|
|
|
|
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`; |
|
|
|
|
|
|
|
|
showNotification('Resource metrics refreshed', 'info'); |
|
|
} |
|
|
|
|
|
|
|
|
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; |
|
|
} |
|
|
|
|
|
|
|
|
resultsElement.textContent = 'Initializing scan...'; |
|
|
scanProgress.classList.remove('hidden'); |
|
|
|
|
|
|
|
|
let progress = 0; |
|
|
const progressInterval = setInterval(() => { |
|
|
progress += 5; |
|
|
if (progress >= 100) { |
|
|
clearInterval(progressInterval); |
|
|
completeScan(targetIp); |
|
|
scanProgress.classList.add('hidden'); |
|
|
} |
|
|
}, 200); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
|
|
|
}, 3000); |
|
|
} |
|
|
|
|
|
function completeScan(target) { |
|
|
const resultsElement = document.getElementById('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'); |
|
|
|
|
|
|
|
|
updateActivityLog(`Network scan performed on ${target}`); |
|
|
} |
|
|
|
|
|
|
|
|
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); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
notification.classList.add('opacity-0', 'transition-opacity', 'duration-300'); |
|
|
setTimeout(() => notification.remove(), 300); |
|
|
}, 5000); |
|
|
} |
|
|
|
|
|
|
|
|
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); |
|
|
} |
|
|
|
|
|
|
|
|
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>'; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function clearResults() { |
|
|
document.getElementById('results').textContent = 'No scan performed yet. Enter a target and click Scan.'; |
|
|
} |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
updateStatus(); |
|
|
updateResources(); |
|
|
|
|
|
|
|
|
document.getElementById('system-version').textContent = new Date().toISOString().replace('T', ' ').substring(0, 19) + ' UTC'; |
|
|
|
|
|
|
|
|
document.getElementById('notifications').addEventListener('click', function() { |
|
|
showNotification('You have 3 unread notifications', 'info'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('toggle-scanner').addEventListener('click', toggleScannerSize); |
|
|
|
|
|
|
|
|
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> |
