Skip to content

implement cyber security simulation UI with live attack feed and anim… #4161

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Jayanta2004 merged 1 commit into from
Feb 17, 2026
+241 −0
Merged

implement cyber security simulation UI with live attack feed and anim… #4161

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
45 changes: 45 additions & 0 deletions projects/cyberpulse-dashboard/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CyberPulse Dashboard</title>

<link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>

<canvas id="matrix"></canvas>

<div class="dashboard">

<header>
<h1>CyberPulse Security Monitor</h1>
<div class="status">SYSTEM STATUS: <span class="online">ONLINE</span></div>
</header>

<div class="grid">

<div class="card">
<h2>Live Attack Feed</h2>
<ul id="attackFeed"></ul>
</div>

<div class="card">
<h2>Threat Level</h2>
<canvas id="threatChart" width="400" height="200"></canvas>
</div>

<div class="card terminal">
<h2>System Terminal</h2>
<div id="terminalOutput"></div>
</div>

</div>

</div>

<script src="script.js"></script>
</body>
</html>
128 changes: 128 additions & 0 deletions projects/cyberpulse-dashboard/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;x<columns;x++){
drops[x]=1;
}

function drawMatrix(){
ctx.fillStyle="rgba(0,0,0,0.05)";
ctx.fillRect(0,0,canvas.width,canvas.height);

ctx.fillStyle="#00ff99";
ctx.font=fontSize+"px monospace";

for(let i=0;i<drops.length;i++){
const text = letters.charAt(Math.floor(Math.random()*letters.length));
ctx.fillText(text,i*fontSize,drops[i]*fontSize);

if(drops[i]*fontSize>canvas.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);
68 changes: 68 additions & 0 deletions projects/cyberpulse-dashboard/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}