57 أسطر
2.4 KiB
HTML
57 أسطر
2.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ar" dir="rtl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>SIEM Dashboard - Ghaymah</title>
|
|
<style>
|
|
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #f4f7f6; margin: 0; padding: 20px; }
|
|
.card { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
|
|
table { width: 100%; border-collapse: collapse; margin-top: 15px; }
|
|
th, td { padding: 12px; border-bottom: 1px solid #ddd; text-align: right; }
|
|
th { background-color: #2c3e50; color: white; }
|
|
.alert-high { color: #e74c3c; font-weight: bold; }
|
|
.ip-address { font-family: monospace; background: #eee; padding: 2px 6px; border-radius: 4px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>🛡️ لوحة مراقبة SIEM - غيمة</h1>
|
|
|
|
<div class="card">
|
|
<h2>التنبيهات الأمنية المكتشفة</h2>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>وقت الحدث</th>
|
|
<th>نوع التهديد</th>
|
|
<th>عنوان IP المشبوه</th>
|
|
<th>تفاصيل السجل</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="alerts-table">
|
|
<!-- Data is injected via JavaScript -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<script>
|
|
// محاكاة استدعاء ملف alerts.json الذي ينتجه البايثون
|
|
const alertsData = [
|
|
{ timestamp: "2026-07-26 14:30:00", type: "Brute Force Attempt", source_ip: "192.168.1.50", raw_log: "[AUTH] Failed password for admin" },
|
|
{ timestamp: "2026-07-26 14:31:15", type: "SQL Injection", source_ip: "Unknown", raw_log: "[WEB] GET /api/data?id=1' OR 1=1-- HTTP/1.1" },
|
|
{ timestamp: "2026-07-26 14:35:10", type: "Port Scanning", source_ip: "10.0.0.9", raw_log: "[FIREWALL] BLOCK TCP SRC=10.0.0.9 DPT=22" }
|
|
];
|
|
|
|
const tableBody = document.getElementById('alerts-table');
|
|
alertsData.forEach(alert => {
|
|
const row = `<tr>
|
|
<td>${alert.timestamp}</td>
|
|
<td class="alert-high">${alert.type}</td>
|
|
<td><span class="ip-address">${alert.source_ip}</span></td>
|
|
<td dir="ltr" style="text-align: left;"><code>${alert.raw_log}</code></td>
|
|
</tr>`;
|
|
tableBody.innerHTML += row;
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|