<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CYBER NOTES | Admin Dashboard</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="matrix-bg" id="matrix"></div>
<header class="topbar">
<div class="brand">
<span class="brand-icon">CN</span>
<div>
<h1>CYBER NOTES</h1>
<p>SECURITY OPERATIONS CENTER</p>
</div>
</div>
<div class="connection">
<span class="status-dot"></span>
<span id="connectionStatus">DEMO MODE</span>
</div>
</header>
<main class="container">
<section class="welcome">
<div>
<p class="eyebrow">ADMINISTRATOR CONSOLE</p>
<h2>Security Dashboard</h2>
<p>Monitor website activity and simulated security incidents.</p>
</div>
<div class="clock" id="clock">--:--:--</div>
</section>
<section class="stats">
<article class="stat-card">
<p>TOTAL PAGE VISITS</p>
<h3 id="visitsCount">0</h3>
<span>Anonymous visit events</span>
</article>
<article class="stat-card">
<p>LOGIN EVENTS</p>
<h3 id="loginCount">0</h3>
<span>Demo login activity</span>
</article>
<article class="stat-card danger">
<p>SIMULATED ALERTS</p>
<h3 id="attackCount">0</h3>
<span>Security simulation events</span>
</article>
<article class="stat-card">
<p>RECENT EVENTS</p>
<h3 id="eventCount">0</h3>
<span>Events recorded in this session</span>
</article>
</section>
<section class="panel alert-panel">
<div>
<p class="eyebrow">REAL-TIME MONITOR</p>
<h2>Security Event Monitor</h2>
<p id="alertMessage">No new simulation alerts.</p>
</div>
<div class="shield" id="shield">✓</div>
</section>
<section class="panel">
<div class="section-heading">
<div>
<p class="eyebrow">ACTIVITY MONITOR</p>
<h2>Recent Security Events</h2>
</div>
<span class="badge">LIVE DEMO</span>
</div>
<div class="table-wrap">
<table>
<thead>
<tr>
<th>TIME</th>
<th>EVENT</th>
<th>TYPE</th>
<th>STATUS</th>
</tr>
</thead>
<tbody id="eventTable">
<tr>
<td colspan="4" class="empty">
Waiting for events...
</td>
</tr>
</tbody>
</table>
</div>
</section>
<section class="panel">
<div class="section-heading">
<div>
<p class="eyebrow">TEST ENVIRONMENT</p>
<h2>Admin Controls</h2>
</div>
</div>
<p class="muted">
Use this button to test the dashboard alert locally.
It does not attack any system.
</p>
<button id="testAlertBtn" class="primary-btn">
TEST ALERT
</button>
</section>
<footer>
CYBER NOTES · EDUCATIONAL SECURITY SIMULATION
</footer>
</main>
<div id="flashOverlay" class="flash-overlay">
<div class="flash-box">
<div class="warning-icon">!</div>
<p class="eyebrow">SECURITY NOTIFICATION</p>
<h2>SIMULATED ATTACK DETECTED</h2>
<p id="flashDetails">
A test security event was received.
</p>
<button id="closeAlertBtn" class="primary-btn">
ACKNOWLEDGE
</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>