diff --git a/projects/cyberpulse-dashboard/index.html b/projects/cyberpulse-dashboard/index.html new file mode 100644 index 00000000..67370c08 --- /dev/null +++ b/projects/cyberpulse-dashboard/index.html @@ -0,0 +1,45 @@ + + + + + +CyberPulse Dashboard + + + + + + + + +
+ +
+

CyberPulse Security Monitor

+
SYSTEM STATUS: ONLINE
+
+ +
+ +
+

Live Attack Feed

+
    +
    + +
    +

    Threat Level

    + +
    + +
    +

    System Terminal

    +
    +
    + +
    + +
    + + + + diff --git a/projects/cyberpulse-dashboard/script.js b/projects/cyberpulse-dashboard/script.js new file mode 100644 index 00000000..4fe2cf14 --- /dev/null +++ b/projects/cyberpulse-dashboard/script.js @@ -0,0 +1,128 @@ +/* =========================== + MATRIX BACKGROUND +=========================== */ + +const canvas = document.getElementById("matrix"); +const ctx = canvas.getContext("2d"); + +canvas.height = window.innerHeight; +canvas.width = window.innerWidth; + +const letters = "01"; +const fontSize = 14; +const columns = canvas.width / fontSize; +const drops = []; + +for(let x=0;xcanvas.height && Math.random()>0.975) +drops[i]=0; + +drops[i]++; +} +} + +setInterval(drawMatrix,33); + +/* =========================== + ATTACK FEED SIMULATION +=========================== */ + +const attackFeed = document.getElementById("attackFeed"); + +const countries = ["USA","China","Russia","Germany","Brazil","India","UK","France"]; +const attackTypes = ["DDoS","Phishing","Malware","Ransomware","SQL Injection","Brute Force"]; + +function generateAttack(){ +const country = countries[Math.floor(Math.random()*countries.length)]; +const type = attackTypes[Math.floor(Math.random()*attackTypes.length)]; +const time = new Date().toLocaleTimeString(); + +const li = document.createElement("li"); +li.textContent = `[${time}] ${type} attack detected from ${country}`; + +attackFeed.prepend(li); + +if(attackFeed.children.length>20){ +attackFeed.removeChild(attackFeed.lastChild); +} +} + +setInterval(generateAttack,2000); + +/* =========================== + TERMINAL SIMULATION +=========================== */ + +const terminalOutput = document.getElementById("terminalOutput"); + +const commands = [ +"Initializing firewall protocols...", +"Scanning network ports...", +"Encrypting data packets...", +"Monitoring suspicious activity...", +"Deploying countermeasures...", +"System integrity check complete.", +"Blocking unauthorized access attempt." +]; + +function generateTerminalLine(){ +const cmd = commands[Math.floor(Math.random()*commands.length)]; +terminalOutput.innerHTML += cmd + "\n"; + +terminalOutput.scrollTop = terminalOutput.scrollHeight; + +if(terminalOutput.innerHTML.split("\n").length>30){ +terminalOutput.innerHTML=""; +} +} + +setInterval(generateTerminalLine,1500); + +/* =========================== + THREAT LEVEL CHART +=========================== */ + +const threatCanvas = document.getElementById("threatChart"); +const threatCtx = threatCanvas.getContext("2d"); + +let threatData = []; + +function updateThreatChart(){ + +if(threatData.length>20){ +threatData.shift(); +} + +threatData.push(Math.floor(Math.random()*100)); + +threatCtx.clearRect(0,0,threatCanvas.width,threatCanvas.height); + +threatCtx.strokeStyle="#00ff99"; +threatCtx.beginPath(); + +threatData.forEach((value,index)=>{ +const x = index*(threatCanvas.width/20); +const y = threatCanvas.height - value*2; + +if(index===0) threatCtx.moveTo(x,y); +else threatCtx.lineTo(x,y); +}); + +threatCtx.stroke(); +} + +setInterval(updateThreatChart,2000); diff --git a/projects/cyberpulse-dashboard/style.css b/projects/cyberpulse-dashboard/style.css new file mode 100644 index 00000000..05b57417 --- /dev/null +++ b/projects/cyberpulse-dashboard/style.css @@ -0,0 +1,68 @@ +*{ +margin:0; +padding:0; +box-sizing:border-box; +} + +body{ +font-family:'Share Tech Mono',monospace; +background:black; +color:#00ff99; +overflow:hidden; +} + +canvas#matrix{ +position:fixed; +top:0; +left:0; +z-index:-1; +} + +.dashboard{ +padding:30px; +} + +header{ +display:flex; +justify-content:space-between; +align-items:center; +margin-bottom:20px; +} + +.online{ +color:#00ff00; +} + +.grid{ +display:grid; +grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); +gap:20px; +} + +.card{ +background:rgba(0,0,0,0.8); +border:1px solid #00ff99; +padding:20px; +border-radius:10px; +height:300px; +overflow:auto; +} + +ul{ +list-style:none; +} + +li{ +margin-bottom:10px; +font-size:0.85rem; +} + +.terminal{ +background:black; +} + +#terminalOutput{ +font-size:0.8rem; +line-height:1.4; +white-space:pre-wrap; +}