Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
344 changes: 344 additions & 0 deletions projects/Antivirus scan/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,344 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ShieldNode | Advanced Security Suite</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Fira+Code:wght@400;500&display=swap');

body {
font-family: 'Plus Jakarta Sans', sans-serif;
background-color: #020617;
color: #f1f5f9;
}

.code-font {
font-family: 'Fira Code', monospace;
}

.scanning-gradient {
background: linear-gradient(180deg, rgba(59, 130, 246, 0.1) 0%, rgba(59, 130, 246, 0) 100%);
background-size: 100% 200%;
animation: scan-move 2s linear infinite;
}

@keyframes scan-move {
0% { background-position: 0% 0%; }
100% { background-position: 0% 200%; }
}

.orbit {
animation: rotate 20s linear infinite;
}

@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

.glass-panel {
background: rgba(15, 23, 42, 0.6);
backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.05);
}

.pulse-danger {
animation: danger-pulse 2s infinite;
}

@keyframes danger-pulse {
0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

.custom-scrollbar::-webkit-scrollbar {
width: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: #1e293b;
border-radius: 10px;
}
</style>
</head>
<body class="h-screen flex flex-col overflow-hidden">

<!-- App Shell -->
<div class="flex-1 flex overflow-hidden">

<!-- Sidebar Navigation -->
<aside class="w-20 lg:w-64 border-r border-slate-800 flex flex-col items-center lg:items-stretch py-6 px-4 bg-slate-950">
<div class="flex items-center gap-3 mb-10 px-2">
<div class="w-10 h-10 bg-blue-600 rounded-xl flex items-center justify-center shadow-lg shadow-blue-500/20">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
</div>
<h1 class="hidden lg:block text-xl font-bold tracking-tight">ShieldNode</h1>
</div>

<nav class="space-y-2 w-full">
<button class="w-full flex items-center gap-4 px-4 py-3 bg-blue-600/10 text-blue-400 rounded-xl font-semibold text-sm">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></nav>
</button>
<button class="w-full flex items-center gap-4 px-4 py-3 text-slate-500 hover:text-slate-300 transition-colors rounded-xl font-semibold text-sm">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
</button>
</nav>

<div class="mt-auto px-4 py-4 bg-slate-900/50 rounded-2xl border border-slate-800 hidden lg:block">
<p class="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-1">Database</p>
<p class="text-xs text-blue-400 font-medium">v4.2.1-stable</p>
<p class="text-[10px] text-slate-600 mt-2">Last updated: Today, 04:12 AM</p>
</div>
</aside>

<!-- Main Dashboard -->
<main class="flex-1 overflow-y-auto custom-scrollbar p-6 lg:p-10 relative">

<!-- Dashboard Header -->
<div class="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-10">
<div>
<h2 class="text-3xl font-bold text-white mb-2">System Status</h2>
<p class="text-slate-400">Heuristic engine is active and monitoring filesystem.</p>
</div>
<div class="flex gap-4">
<button id="quickScanBtn" class="px-6 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-xl font-bold text-sm shadow-lg shadow-blue-500/20 transition-all active:scale-95">Quick Scan</button>
<button id="deepScanBtn" class="px-6 py-3 bg-slate-800 hover:bg-slate-700 text-white rounded-xl font-bold text-sm border border-slate-700 transition-all active:scale-95">Full System Scan</button>
</div>
</div>

<!-- Main Status Card -->
<div id="statusContainer" class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-10">
<div class="lg:col-span-2 glass-panel rounded-3xl p-8 relative overflow-hidden flex items-center gap-8">
<div id="statusIcon" class="w-32 h-32 rounded-full border-4 border-emerald-500/30 flex items-center justify-center relative">
<div class="absolute inset-0 border-t-4 border-emerald-500 rounded-full orbit"></div>
<svg class="text-emerald-500" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
</div>
<div>
<h3 id="statusTitle" class="text-2xl font-bold text-white mb-1">Your PC is Protected</h3>
<p id="statusDesc" class="text-slate-400 text-sm">No threats detected in the last 24 hours. Real-time protection is running at 100% capacity.</p>
</div>
</div>

<div class="glass-panel rounded-3xl p-8 flex flex-col justify-between">
<div class="flex justify-between items-start">
<span class="text-xs font-bold text-slate-500 uppercase tracking-widest">Active Threats</span>
<span id="threatCount" class="text-2xl font-bold text-emerald-500">0</span>
</div>
<div class="mt-4 space-y-3">
<div class="flex justify-between text-xs">
<span class="text-slate-400">Last Scan:</span>
<span class="text-slate-200">2 hours ago</span>
</div>
<div class="flex justify-between text-xs">
<span class="text-slate-400">Files Processed:</span>
<span class="text-slate-200">1.2M</span>
</div>
</div>
</div>
</div>

<!-- Scan Interface (Hidden by Default) -->
<div id="scanInterface" class="hidden glass-panel rounded-3xl p-8 mb-10 relative overflow-hidden">
<div class="scanning-gradient absolute inset-0 opacity-20 pointer-events-none"></div>

<div class="flex items-center justify-between mb-8 relative z-10">
<div>
<h3 id="scanType" class="text-xl font-bold text-white">Full System Scan in Progress...</h3>
<p id="currentFile" class="text-xs text-blue-400 mt-1 code-font">/usr/bin/kernel_service_host.dll</p>
</div>
<button id="cancelScanBtn" class="text-xs font-bold text-slate-500 hover:text-red-400 uppercase tracking-widest transition-colors">Abort Scan</button>
</div>

<div class="relative w-full h-4 bg-slate-800 rounded-full overflow-hidden mb-6">
<div id="progressBar" class="absolute top-0 left-0 h-full bg-blue-500 transition-all duration-300" style="width: 0%"></div>
</div>

<div class="grid grid-cols-3 gap-4 relative z-10">
<div class="bg-slate-900/50 p-4 rounded-2xl border border-slate-800">
<p class="text-[10px] text-slate-500 uppercase font-bold mb-1">Items Scanned</p>
<p id="itemsScanned" class="text-lg font-bold">0</p>
</div>
<div class="bg-slate-900/50 p-4 rounded-2xl border border-slate-800">
<p class="text-[10px] text-slate-500 uppercase font-bold mb-1">Time Elapsed</p>
<p id="scanTimer" class="text-lg font-bold">00:00</p>
</div>
<div class="bg-slate-900/50 p-4 rounded-2xl border border-slate-800">
<p class="text-[10px] text-slate-500 uppercase font-bold mb-1">Threats Found</p>
<p id="threatsFound" class="text-lg font-bold text-emerald-500">0</p>
</div>
</div>
</div>

<!-- Threat Log -->
<div class="glass-panel rounded-3xl p-8">
<h3 class="text-sm font-bold text-slate-500 uppercase tracking-widest mb-6">Security Incident Log</h3>
<div id="logContent" class="space-y-4">
<div class="flex items-center gap-4 py-3 border-b border-slate-800/50 last:border-0">
<div class="w-8 h-8 rounded-lg bg-emerald-500/10 flex items-center justify-center text-emerald-500">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
</div>
<div class="flex-1">
<p class="text-sm font-semibold">Real-time protection enabled</p>
<p class="text-[10px] text-slate-500">ShieldNode engine version 4.2.1 initialized successfully.</p>
</div>
<span class="text-[10px] text-slate-600">Today, 08:30 AM</span>
</div>
</div>
</div>
</main>
</div>

<script>
const quickScanBtn = document.getElementById('quickScanBtn');
const deepScanBtn = document.getElementById('deepScanBtn');
const scanInterface = document.getElementById('scanInterface');
const statusContainer = document.getElementById('statusContainer');
const cancelScanBtn = document.getElementById('cancelScanBtn');
const progressBar = document.getElementById('progressBar');
const currentFile = document.getElementById('currentFile');
const itemsScannedText = document.getElementById('itemsScanned');
const threatsFoundText = document.getElementById('threatsFound');
const scanTimerText = document.getElementById('scanTimer');
const logContent = document.getElementById('logContent');
const threatCountBadge = document.getElementById('threatCount');
const statusIcon = document.getElementById('statusIcon');
const statusTitle = document.getElementById('statusTitle');
const statusDesc = document.getElementById('statusDesc');

let isScanning = false;
let scanInterval;
let timerInterval;

const fakeFiles = [
"/system/drivers/nv_dispi.sys",
"/windows/system32/kernel32.dll",
"/users/admin/downloads/setup_unverified.exe",
"/program_files/temp/cache_0812.tmp",
"/bin/bash_profile",
"/etc/hosts",
"/system/vmm/pagefile.sys",
"/users/admin/desktop/invoice.pdf",
"/windows/winlogon.exe",
"/system/drivers/tcpip.sys"
];

const dangerousFiles = ["setup_unverified.exe", "cache_0812.tmp"];

function startScan(type) {
if (isScanning) return;
isScanning = true;

// UI Reset
scanInterface.classList.remove('hidden');
statusContainer.classList.add('opacity-40', 'pointer-events-none');
document.getElementById('scanType').textContent = type + ' in progress...';
progressBar.style.width = '0%';

let progress = 0;
let items = 0;
let threats = 0;
let seconds = 0;

// Timer
timerInterval = setInterval(() => {
seconds++;
const mins = Math.floor(seconds / 60).toString().padStart(2, '0');
const secs = (seconds % 60).toString().padStart(2, '0');
scanTimerText.textContent = `${mins}:${secs}`;
}, 1000);

// Scan Animation
scanInterval = setInterval(() => {
progress += (Math.random() * 3);
items += Math.floor(Math.random() * 5000) + 1000;

if (progress >= 100) {
finishScan(threats);
return;
}

progressBar.style.width = progress + '%';
itemsScannedText.textContent = items.toLocaleString();

const randomFile = fakeFiles[Math.floor(Math.random() * fakeFiles.length)];
currentFile.textContent = randomFile;

// Randomly "find" a threat during deep scans
if (type.includes('Full') && progress > 40 && progress < 45 && threats === 0) {
threats++;
threatsFoundText.textContent = threats;
threatsFoundText.className = "text-lg font-bold text-red-500";
addLogEntry("Trojan.Generic detection", "Malicious activity detected in " + randomFile, "high");
}
}, 150);
}

function finishScan(threats) {
clearInterval(scanInterval);
clearInterval(timerInterval);
isScanning = false;

scanInterface.classList.add('hidden');
statusContainer.classList.remove('opacity-40', 'pointer-events-none');

if (threats > 0) {
setSystemStatus('danger', threats);
} else {
setSystemStatus('safe', 0);
addLogEntry("Scan Completed", "No threats were found during the system scan.", "info");
}
}

function setSystemStatus(type, count) {
if (type === 'danger') {
statusIcon.className = "w-32 h-32 rounded-full border-4 border-red-500/30 flex items-center justify-center relative pulse-danger";
statusIcon.innerHTML = `<div class="absolute inset-0 border-t-4 border-red-500 rounded-full orbit"></div><svg class="text-red-500" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>`;
statusTitle.textContent = "System at Risk";
statusTitle.className = "text-2xl font-bold text-red-500 mb-1";
statusDesc.textContent = `${count} malicious threats found. Immediate action required to quarantine files.`;
threatCountBadge.textContent = count;
threatCountBadge.className = "text-2xl font-bold text-red-500";
} else {
statusIcon.className = "w-32 h-32 rounded-full border-4 border-emerald-500/30 flex items-center justify-center relative";
statusIcon.innerHTML = `<div class="absolute inset-0 border-t-4 border-emerald-500 rounded-full orbit"></div><svg class="text-emerald-500" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>`;
statusTitle.textContent = "Your PC is Protected";
statusTitle.className = "text-2xl font-bold text-white mb-1";
statusDesc.textContent = "No threats detected. Real-time protection is running at 100% capacity.";
threatCountBadge.textContent = "0";
threatCountBadge.className = "text-2xl font-bold text-emerald-500";
}
}

function addLogEntry(title, desc, type) {
const entry = document.createElement('div');
entry.className = "flex items-center gap-4 py-3 border-b border-slate-800/50 last:border-0";

const colorClass = type === 'high' ? 'bg-red-500/10 text-red-500' :
type === 'info' ? 'bg-blue-500/10 text-blue-400' : 'bg-emerald-500/10 text-emerald-500';

const icon = type === 'high' ?
`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>` :
`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>`;

entry.innerHTML = `
<div class="w-8 h-8 rounded-lg ${colorClass} flex items-center justify-center">
${icon}
</div>
<div class="flex-1">
<p class="text-sm font-semibold">${title}</p>
<p class="text-[10px] text-slate-500">${desc}</p>
</div>
<span class="text-[10px] text-slate-600">Just now</span>
`;
logContent.prepend(entry);
}

quickScanBtn.onclick = () => startScan('Quick Scan');
deepScanBtn.onclick = () => startScan('Full System Scan');
cancelScanBtn.onclick = () => finishScan(0);

</script>
</body>
</html>
13 changes: 13 additions & 0 deletions projects/Antivirus scan/project.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
{
"title": "Antivirus scan",
"category": "utility",
"difficulty": "advanced",
"description": "A utility project built with HTML, CSS, and JavaScript.",
"tech": [
"HTML",
"CSS",
"JavaScript"
],
"icon": "ri-function-line",
"coverStyle": "background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); color: white;"
}