146 أسطر
5.8 KiB
HTML
146 أسطر
5.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ar" dir="rtl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>SIEM Dashboard - لوحة تحكم الأمان</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<!-- Header -->
|
|
<header class="header">
|
|
<div class="header-content">
|
|
<h1>🛡️ SIEM Dashboard</h1>
|
|
<p>نظام مراقبة وتحليل السجلات الأمنية</p>
|
|
</div>
|
|
<div class="header-actions">
|
|
<span class="status-badge online">● متصل</span>
|
|
<span class="last-update">آخر تحديث: <span id="lastUpdate">--:--:--</span></span>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Stats Cards -->
|
|
<section class="stats-grid">
|
|
<div class="stat-card critical">
|
|
<div class="stat-icon">🚨</div>
|
|
<div class="stat-content">
|
|
<h3>تنبيهات حرجة</h3>
|
|
<p class="stat-number" id="criticalCount">0</p>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card high">
|
|
<div class="stat-icon">⚠️</div>
|
|
<div class="stat-content">
|
|
<h3>تنبيهات عالية</h3>
|
|
<p class="stat-number" id="highCount">0</p>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card medium">
|
|
<div class="stat-icon">📊</div>
|
|
<div class="stat-content">
|
|
<h3>تنبيهات متوسطة</h3>
|
|
<p class="stat-number" id="mediumCount">0</p>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card info">
|
|
<div class="stat-icon">🔍</div>
|
|
<div class="stat-content">
|
|
<h3>IPs مشبوهة</h3>
|
|
<p class="stat-number" id="suspiciousIPs">0</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Main Content -->
|
|
<div class="main-content">
|
|
<!-- Alerts Section -->
|
|
<section class="alerts-section">
|
|
<div class="section-header">
|
|
<h2>📋 التنبيهات الأخيرة</h2>
|
|
<div class="filter-buttons">
|
|
<button class="filter-btn active" data-filter="all">الكل</button>
|
|
<button class="filter-btn" data-filter="critical">حرجة</button>
|
|
<button class="filter-btn" data-filter="high">عالية</button>
|
|
<button class="filter-btn" data-filter="medium">متوسطة</button>
|
|
</div>
|
|
</div>
|
|
<div class="alerts-list" id="alertsList">
|
|
<!-- Alerts will be inserted here -->
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Suspicious IPs Section -->
|
|
<section class="ips-section">
|
|
<div class="section-header">
|
|
<h2>🔴 عناوين IP المشبوهة</h2>
|
|
</div>
|
|
<div class="ips-table-container">
|
|
<table class="ips-table">
|
|
<thead>
|
|
<tr>
|
|
<th>عنوان IP</th>
|
|
<th>عدد التهديدات</th>
|
|
<th>عدد الطلبات</th>
|
|
<th>آخر نشاط</th>
|
|
<th>الإجراء</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="ipsTableBody">
|
|
<!-- IPs will be inserted here -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- Threat Types Chart -->
|
|
<section class="chart-section">
|
|
<div class="section-header">
|
|
<h2>📈 أنواع التهديدات</h2>
|
|
</div>
|
|
<div class="chart-container">
|
|
<div class="bar-chart" id="threatChart">
|
|
<!-- Chart bars will be inserted here -->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Log Sources Status -->
|
|
<section class="sources-section">
|
|
<div class="section-header">
|
|
<h2>📂 حالة مصادر السجلات</h2>
|
|
</div>
|
|
<div class="sources-grid">
|
|
<div class="source-card active">
|
|
<div class="source-icon">🌐</div>
|
|
<h4>Nginx Logs</h4>
|
|
<p class="source-status">● نشط</p>
|
|
<p class="source-lines"><span id="nginxLines">0</span> سطر</p>
|
|
</div>
|
|
<div class="source-card active">
|
|
<div class="source-icon">🔐</div>
|
|
<h4>Auth Logs</h4>
|
|
<p class="source-status">● نشط</p>
|
|
<p class="source-lines"><span id="authLines">0</span> سطر</p>
|
|
</div>
|
|
<div class="source-card active">
|
|
<div class="source-icon">📱</div>
|
|
<h4>App Logs</h4>
|
|
<p class="source-status">● نشط</p>
|
|
<p class="source-lines"><span id="appLines">0</span> سطر</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer">
|
|
<p>SIEM Dashboard - نظام مراقبة أمني لمنصة غيمة</p>
|
|
<p>© 2026 - جميع الحقوق محفوظة</p>
|
|
</footer>
|
|
</div>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|