| <!DOCTYPE html> |
| <html lang="ar" dir="rtl"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Auto-Guardian Dashboard</title> |
| <meta name="google-site-verification" content="google7cceda004d653872" /> |
| <meta name="description" content="Auto-Guardian: A comprehensive security and monitoring system dashboard for modern infrastructure. Automated security monitoring and protection core system." /> |
| <meta name="keywords" content="security, monitoring, automation, guardian, dashboard, infrastructure, protection" /> |
| <meta name="author" content="Abdulelah Othman Gwaith" /> |
| <meta property="og:title" content="Auto-Guardian Dashboard" /> |
| <meta property="og:description" content="Automated security monitoring and protection core system." /> |
| <meta property="og:url" content="https://abdulelahothmangwaith.github.io/Auto-Guardian-Core/" /> |
| <meta property="og:type" content="website" /> |
| <script type="application/ld+json"> |
| { |
| "@context": "https://schema.org", |
| "@type": "SoftwareApplication", |
| "name": "Auto-Guardian-Core", |
| "operatingSystem": "Linux, Windows, macOS", |
| "applicationCategory": "SecurityApplication", |
| "offers": { |
| "@type": "Offer", |
| "price": "0", |
| "priceCurrency": "USD" |
| }, |
| "author": { |
| "@type": "Person", |
| "name": "Abdulelah Othman Gwaith" |
| }, |
| "description": "An automated security monitoring and protection core system designed for modern infrastructure.", |
| "url": "https://abdulelahothmangwaith.github.io/Auto-Guardian-Core/" |
| } |
| </script> |
| <style> |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| |
| :root { |
| --primary: #0F172A; |
| --secondary: #3B82F6; |
| --success: #10B981; |
| --danger: #EF4444; |
| --warning: #F59E0B; |
| --bg: #F8FAFC; |
| --card-bg: #FFFFFF; |
| --text: #1E293B; |
| --text-muted: #64748B; |
| --border: #E2E8F0; |
| } |
| |
| body { |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
| background-color: var(--bg); |
| color: var(--text); |
| min-height: 100vh; |
| overflow-x: hidden; |
| } |
| |
| .dashboard { |
| display: flex; |
| flex-direction: row; |
| min-height: 100vh; |
| width: 100%; |
| } |
| |
| |
| .sidebar { |
| background: var(--primary); |
| color: white; |
| padding: 20px 0; |
| width: 240px; |
| height: 100vh; |
| overflow-y: auto; |
| flex-shrink: 0; |
| position: sticky; |
| top: 0; |
| } |
| |
| .logo { |
| padding: 20px; |
| text-align: center; |
| border-bottom: 1px solid rgba(255,255,255,0.1); |
| margin-bottom: 20px; |
| } |
| |
| .logo h1 { |
| font-size: 20px; |
| font-weight: 700; |
| color: var(--secondary); |
| } |
| |
| .logo span { |
| font-size: 12px; |
| color: var(--text-muted); |
| } |
| |
| .nav-menu { |
| list-style: none; |
| } |
| |
| .nav-item { |
| padding: 12px 20px; |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| border-right: 3px solid transparent; |
| } |
| |
| .nav-item:hover, .nav-item.active { |
| background: rgba(59, 130, 246, 0.1); |
| border-right-color: var(--secondary); |
| } |
| |
| .nav-item svg { |
| width: 20px; |
| height: 20px; |
| } |
| |
| .nav-item span { |
| font-size: 14px; |
| } |
| |
| |
| .main-content { |
| flex: 1; |
| padding: 20px 30px; |
| min-width: 0; |
| overflow-x: hidden; |
| } |
| |
| |
| .header { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| margin-bottom: 30px; |
| flex-wrap: wrap; |
| gap: 15px; |
| } |
| |
| .header h2 { |
| font-size: 24px; |
| font-weight: 600; |
| } |
| |
| .header-actions { |
| display: flex; |
| gap: 12px; |
| align-items: center; |
| } |
| |
| .search-box { |
| display: flex; |
| align-items: center; |
| background: var(--card-bg); |
| border: 1px solid var(--border); |
| border-radius: 8px; |
| padding: 8px 16px; |
| gap: 8px; |
| position: relative; |
| } |
| |
| .search-box:hover { |
| border-color: var(--secondary); |
| } |
| |
| .search-box input { |
| border: none; |
| outline: none; |
| font-size: 14px; |
| width: 150px; |
| background: transparent; |
| flex: 1; |
| min-width: 100px; |
| } |
| |
| .search-results { |
| display: none; |
| position: absolute; |
| top: 100%; |
| left: 0; |
| right: 0; |
| background: white; |
| border: 1px solid var(--border); |
| border-radius: 8px; |
| margin-top: 8px; |
| max-height: 300px; |
| overflow-y: auto; |
| box-shadow: 0 4px 20px rgba(0,0,0,0.1); |
| z-index: 100; |
| } |
| |
| .search-results.active { |
| display: block; |
| } |
| |
| .search-result-item { |
| padding: 12px 16px; |
| border-bottom: 1px solid var(--border); |
| cursor: pointer; |
| transition: background 0.3s ease; |
| } |
| |
| .search-result-item:hover { |
| background: var(--bg); |
| } |
| |
| .search-result-item:last-child { |
| border-bottom: none; |
| } |
| |
| .notification-btn { |
| position: relative; |
| background: var(--card-bg); |
| border: 1px solid var(--border); |
| border-radius: 8px; |
| padding: 8px 12px; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| } |
| |
| .notification-btn:hover { |
| border-color: var(--secondary); |
| } |
| |
| .notification-badge { |
| position: absolute; |
| top: -5px; |
| right: -5px; |
| background: var(--danger); |
| color: white; |
| font-size: 10px; |
| padding: 2px 6px; |
| border-radius: 10px; |
| } |
| |
| |
| .settings-panel { |
| display: none; |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: rgba(0,0,0,0.5); |
| z-index: 1000; |
| justify-content: center; |
| align-items: center; |
| } |
| |
| .settings-panel.active { |
| display: flex; |
| } |
| |
| .settings-content { |
| background: white; |
| border-radius: 16px; |
| padding: 30px; |
| width: 90%; |
| max-width: 500px; |
| max-height: 80vh; |
| overflow-y: auto; |
| } |
| |
| .settings-header { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| margin-bottom: 24px; |
| } |
| |
| .settings-header h3 { |
| font-size: 20px; |
| } |
| |
| .close-btn { |
| background: none; |
| border: none; |
| font-size: 24px; |
| cursor: pointer; |
| color: var(--text-muted); |
| } |
| |
| .setting-item { |
| margin-bottom: 20px; |
| } |
| |
| .setting-label { |
| display: block; |
| font-size: 14px; |
| font-weight: 500; |
| margin-bottom: 8px; |
| } |
| |
| .setting-description { |
| font-size: 12px; |
| color: var(--text-muted); |
| margin-bottom: 8px; |
| } |
| |
| .setting-input { |
| width: 100%; |
| padding: 10px 14px; |
| border: 1px solid var(--border); |
| border-radius: 8px; |
| font-size: 14px; |
| transition: all 0.3s ease; |
| } |
| |
| .setting-input:focus { |
| outline: none; |
| border-color: var(--secondary); |
| } |
| |
| .setting-select { |
| width: 100%; |
| padding: 10px 14px; |
| border: 1px solid var(--border); |
| border-radius: 8px; |
| font-size: 14px; |
| background: white; |
| cursor: pointer; |
| } |
| |
| .setting-toggle { |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| cursor: pointer; |
| } |
| |
| .toggle-switch { |
| position: relative; |
| width: 50px; |
| height: 26px; |
| background: var(--border); |
| border-radius: 13px; |
| transition: all 0.3s ease; |
| } |
| |
| .toggle-switch.active { |
| background: var(--secondary); |
| } |
| |
| .toggle-switch::after { |
| content: ''; |
| position: absolute; |
| width: 22px; |
| height: 22px; |
| background: white; |
| border-radius: 50%; |
| top: 2px; |
| left: 2px; |
| transition: all 0.3s ease; |
| } |
| |
| .toggle-switch.active::after { |
| left: 26px; |
| } |
| |
| .save-btn { |
| width: 100%; |
| padding: 12px; |
| background: var(--secondary); |
| color: white; |
| border: none; |
| border-radius: 8px; |
| font-size: 14px; |
| font-weight: 500; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| } |
| |
| .save-btn:hover { |
| background: var(--primary); |
| } |
| |
| |
| .stats-grid { |
| display: grid; |
| grid-template-columns: repeat(4, 1fr); |
| gap: 20px; |
| margin-bottom: 30px; |
| } |
| |
| .stat-card { |
| background: var(--card-bg); |
| border-radius: 12px; |
| padding: 20px; |
| box-shadow: 0 1px 3px rgba(0,0,0,0.1); |
| transition: transform 0.3s ease, box-shadow 0.3s ease; |
| cursor: pointer; |
| } |
| |
| .stat-card:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 4px 12px rgba(0,0,0,0.15); |
| } |
| |
| .stat-header { |
| display: flex; |
| justify-content: space-between; |
| align-items: flex-start; |
| margin-bottom: 12px; |
| } |
| |
| .stat-icon { |
| width: 40px; |
| height: 40px; |
| border-radius: 10px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
| |
| .stat-icon.blue { background: rgba(59, 130, 246, 0.1); color: var(--secondary); } |
| .stat-icon.green { background: rgba(16, 185, 129, 0.1); color: var(--success); } |
| .stat-icon.red { background: rgba(239, 68, 68, 0.1); color: var(--danger); } |
| .stat-icon.yellow { background: rgba(245, 158, 11, 0.1); color: var(--warning); } |
| |
| .stat-trend { |
| font-size: 12px; |
| display: flex; |
| align-items: center; |
| gap: 4px; |
| } |
| |
| .stat-trend.up { color: var(--success); } |
| .stat-trend.down { color: var(--danger); } |
| |
| .stat-value { |
| font-size: 28px; |
| font-weight: 700; |
| margin-bottom: 4px; |
| } |
| |
| .stat-label { |
| font-size: 13px; |
| color: var(--text-muted); |
| } |
| |
| |
| .charts-section { |
| display: grid; |
| grid-template-columns: 2fr 1fr; |
| gap: 20px; |
| margin-bottom: 30px; |
| } |
| |
| .chart-card { |
| background: var(--card-bg); |
| border-radius: 12px; |
| padding: 20px; |
| box-shadow: 0 1px 3px rgba(0,0,0,0.1); |
| } |
| |
| .chart-header { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| margin-bottom: 20px; |
| } |
| |
| .chart-title { |
| font-size: 16px; |
| font-weight: 600; |
| } |
| |
| .chart-tabs { |
| display: flex; |
| gap: 8px; |
| } |
| |
| .chart-tab { |
| padding: 6px 12px; |
| border-radius: 6px; |
| font-size: 12px; |
| cursor: pointer; |
| background: var(--bg); |
| border: none; |
| transition: all 0.3s ease; |
| } |
| |
| .chart-tab.active { |
| background: var(--secondary); |
| color: white; |
| } |
| |
| .chart-tab:hover:not(.active) { |
| background: var(--border); |
| } |
| |
| |
| .area-chart { |
| height: 250px; |
| position: relative; |
| } |
| |
| .chart-svg { |
| width: 100%; |
| height: 100%; |
| } |
| |
| |
| .donut-chart { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: 30px; |
| } |
| |
| .donut-svg { |
| width: 180px; |
| height: 180px; |
| } |
| |
| .donut-legend { |
| display: flex; |
| flex-direction: column; |
| gap: 12px; |
| } |
| |
| .legend-item { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| } |
| |
| .legend-color { |
| width: 12px; |
| height: 12px; |
| border-radius: 3px; |
| } |
| |
| .legend-label { |
| font-size: 13px; |
| color: var(--text-muted); |
| } |
| |
| .legend-value { |
| font-size: 14px; |
| font-weight: 600; |
| margin-right: auto; |
| } |
| |
| |
| .activity-section { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 20px; |
| } |
| |
| .activity-card { |
| background: var(--card-bg); |
| border-radius: 12px; |
| padding: 20px; |
| box-shadow: 0 1px 3px rgba(0,0,0,0.1); |
| } |
| |
| .activity-header { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| margin-bottom: 16px; |
| } |
| |
| .activity-title { |
| font-size: 16px; |
| font-weight: 600; |
| } |
| |
| .view-all { |
| font-size: 13px; |
| color: var(--secondary); |
| cursor: pointer; |
| } |
| |
| .view-all:hover { |
| text-decoration: underline; |
| } |
| |
| |
| .issues-list { |
| display: flex; |
| flex-direction: column; |
| gap: 12px; |
| } |
| |
| .issue-item { |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| padding: 12px; |
| background: var(--bg); |
| border-radius: 8px; |
| transition: all 0.3s ease; |
| cursor: pointer; |
| } |
| |
| .issue-item:hover { |
| background: rgba(59, 130, 246, 0.05); |
| } |
| |
| .issue-icon { |
| width: 32px; |
| height: 32px; |
| border-radius: 8px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
| |
| .issue-content { |
| flex: 1; |
| } |
| |
| .issue-title { |
| font-size: 13px; |
| font-weight: 500; |
| margin-bottom: 2px; |
| } |
| |
| .issue-meta { |
| font-size: 11px; |
| color: var(--text-muted); |
| } |
| |
| .issue-badge { |
| padding: 4px 10px; |
| border-radius: 20px; |
| font-size: 11px; |
| font-weight: 500; |
| } |
| |
| .badge-critical { background: rgba(239, 68, 68, 0.1); color: var(--danger); } |
| .badge-warning { background: rgba(245, 158, 11, 0.1); color: var(--warning); } |
| .badge-info { background: rgba(59, 130, 246, 0.1); color: var(--secondary); } |
| .badge-success { background: rgba(16, 185, 129, 0.1); color: var(--success); } |
| |
| |
| .repos-list { |
| display: flex; |
| flex-direction: column; |
| gap: 12px; |
| } |
| |
| .repo-item { |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| padding: 12px; |
| background: var(--bg); |
| border-radius: 8px; |
| transition: all 0.3s ease; |
| cursor: pointer; |
| } |
| |
| .repo-item:hover { |
| background: rgba(59, 130, 246, 0.05); |
| } |
| |
| .repo-icon { |
| width: 36px; |
| height: 36px; |
| border-radius: 8px; |
| background: var(--primary); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| color: white; |
| } |
| |
| .repo-content { |
| flex: 1; |
| } |
| |
| .repo-name { |
| font-size: 13px; |
| font-weight: 500; |
| margin-bottom: 2px; |
| } |
| |
| .repo-stats { |
| display: flex; |
| gap: 12px; |
| font-size: 11px; |
| color: var(--text-muted); |
| } |
| |
| .repo-status { |
| display: flex; |
| align-items: center; |
| gap: 4px; |
| font-size: 12px; |
| } |
| |
| .status-dot { |
| width: 8px; |
| height: 8px; |
| border-radius: 50%; |
| } |
| |
| .status-dot.active { background: var(--success); } |
| .status-dot.warning { background: var(--warning); } |
| .status-dot.error { background: var(--danger); } |
| |
| |
| .toast-container { |
| position: fixed; |
| top: 20px; |
| left: 50%; |
| transform: translateX(-50%); |
| z-index: 2000; |
| display: flex; |
| flex-direction: column; |
| gap: 10px; |
| } |
| |
| .toast { |
| padding: 14px 20px; |
| background: var(--primary); |
| color: white; |
| border-radius: 10px; |
| box-shadow: 0 4px 20px rgba(0,0,0,0.2); |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| animation: slideIn 0.3s ease, fadeOut 0.3s ease 2.7s; |
| } |
| |
| .toast.success { background: var(--success); } |
| .toast.error { background: var(--danger); } |
| .toast.warning { background: var(--warning); } |
| .toast.info { background: var(--secondary); } |
| |
| @keyframes slideIn { |
| from { transform: translateY(-20px); opacity: 0; } |
| to { transform: translateY(0); opacity: 1; } |
| } |
| |
| @keyframes fadeOut { |
| from { opacity: 1; } |
| to { opacity: 0; } |
| } |
| |
| |
| @media (max-width: 1200px) { |
| .stats-grid { |
| grid-template-columns: repeat(2, 1fr); |
| } |
| .charts-section { |
| grid-template-columns: 1fr; |
| } |
| .activity-section { |
| grid-template-columns: 1fr; |
| } |
| } |
| |
| @media (max-width: 992px) { |
| .sidebar { |
| position: fixed; |
| right: -240px; |
| top: 0; |
| z-index: 1000; |
| transition: right 0.3s ease; |
| box-shadow: -4px 0 20px rgba(0,0,0,0.1); |
| } |
| |
| .sidebar.active { |
| right: 0; |
| } |
| |
| .sidebar-overlay { |
| display: none; |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: rgba(0,0,0,0.5); |
| z-index: 999; |
| } |
| |
| .sidebar-overlay.active { |
| display: block; |
| } |
| |
| .main-content { |
| width: 100%; |
| padding: 15px 20px; |
| } |
| |
| .mobile-menu-btn { |
| display: flex !important; |
| } |
| |
| .header-actions { |
| gap: 8px; |
| } |
| |
| .search-box { |
| min-width: 120px; |
| } |
| |
| .search-box input { |
| width: 80px; |
| } |
| } |
| |
| @media (max-width: 768px) { |
| .dashboard { |
| flex-direction: column; |
| } |
| |
| .stats-grid { |
| grid-template-columns: 1fr; |
| gap: 12px; |
| } |
| |
| .stat-card { |
| padding: 15px; |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| flex-wrap: wrap; |
| } |
| |
| .stat-header { |
| margin-bottom: 0; |
| width: auto; |
| } |
| |
| .stat-value { |
| font-size: 24px; |
| text-align: left; |
| } |
| |
| .stat-label { |
| text-align: left; |
| width: 100%; |
| } |
| |
| .charts-section { |
| gap: 15px; |
| margin-bottom: 20px; |
| } |
| |
| .chart-card { |
| padding: 15px; |
| } |
| |
| .area-chart { |
| height: 200px; |
| } |
| |
| .donut-chart { |
| flex-direction: column; |
| gap: 15px; |
| } |
| |
| .donut-svg { |
| width: 150px; |
| height: 150px; |
| } |
| |
| .activity-section { |
| gap: 15px; |
| } |
| |
| .activity-card { |
| padding: 15px; |
| } |
| |
| .header { |
| margin-bottom: 20px; |
| } |
| |
| .header h2 { |
| font-size: 20px; |
| width: 100%; |
| } |
| |
| .header-actions { |
| width: 100%; |
| justify-content: space-between; |
| } |
| |
| .search-box { |
| flex: 1; |
| min-width: 0; |
| } |
| |
| .search-box input { |
| width: 100%; |
| } |
| |
| .notification-btn { |
| padding: 8px; |
| } |
| } |
| |
| @media (max-width: 480px) { |
| .stat-card { |
| padding: 12px; |
| } |
| |
| .stat-icon { |
| width: 36px; |
| height: 36px; |
| } |
| |
| .stat-value { |
| font-size: 20px; |
| } |
| |
| .stat-label { |
| font-size: 12px; |
| } |
| |
| .chart-title { |
| font-size: 14px; |
| } |
| |
| .chart-tabs { |
| gap: 4px; |
| } |
| |
| .chart-tab { |
| padding: 4px 8px; |
| font-size: 11px; |
| } |
| |
| .issue-item, .repo-item { |
| padding: 10px; |
| } |
| |
| .issue-icon { |
| width: 28px; |
| height: 28px; |
| } |
| |
| .issue-title { |
| font-size: 12px; |
| } |
| |
| .issue-meta { |
| font-size: 10px; |
| } |
| } |
| |
| |
| .mobile-menu-btn { |
| display: none; |
| position: fixed; |
| bottom: 20px; |
| left: 20px; |
| width: 50px; |
| height: 50px; |
| border-radius: 50%; |
| background: var(--secondary); |
| color: white; |
| border: none; |
| cursor: pointer; |
| z-index: 1001; |
| box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4); |
| align-items: center; |
| justify-content: center; |
| transition: all 0.3s ease; |
| } |
| |
| .mobile-menu-btn:hover { |
| transform: scale(1.1); |
| background: var(--primary); |
| } |
| |
| .mobile-menu-btn svg { |
| width: 24px; |
| height: 24px; |
| } |
| |
| |
| .sidebar-overlay { |
| display: none; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="dashboard"> |
| |
| <div class="sidebar-overlay" id="sidebarOverlay" onclick="toggleMobileMenu()"></div> |
| |
| |
| <aside class="sidebar" id="sidebar"> |
| <div class="logo"> |
| <h1>Auto-Guardian</h1> |
| <span>Security Dashboard</span> |
| </div> |
| <ul class="nav-menu"> |
| <li class="nav-item active" data-view="dashboard"> |
| <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/> |
| </svg> |
| <span>لوحة التحكم</span> |
| </li> |
| <li class="nav-item" data-view="protection"> |
| <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/> |
| </svg> |
| <span>الحماية</span> |
| </li> |
| <li class="nav-item" data-view="analysis"> |
| <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"/> |
| </svg> |
| <span>الفحص والتحليل</span> |
| </li> |
| <li class="nav-item" data-view="reports"> |
| <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/> |
| </svg> |
| <span>التقارير</span> |
| </li> |
| <li class="nav-item" data-view="settings" id="settingsNavItem"> |
| <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/> |
| </svg> |
| <span>الإعدادات</span> |
| </li> |
| <li class="nav-item" data-view="help"> |
| <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/> |
| </svg> |
| <span>المساعدة</span> |
| </li> |
| </ul> |
| </aside> |
| |
| |
| <button class="mobile-menu-btn" id="mobileMenuBtn" onclick="toggleMobileMenu()"> |
| <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/> |
| </svg> |
| </button> |
| |
| |
| <main class="main-content"> |
| |
| <header class="header"> |
| <h2>لوحة تحكم Auto-Guardian</h2> |
| <div class="header-actions"> |
| <div class="search-box" id="searchBox"> |
| <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/> |
| </svg> |
| <input type="text" placeholder="بحث..." id="searchInput"> |
| <div class="search-results" id="searchResults"></div> |
| </div> |
| <button class="notification-btn" id="notificationBtn"> |
| <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/> |
| </svg> |
| <span class="notification-badge" id="notificationBadge">5</span> |
| </button> |
| </div> |
| </header> |
| |
| |
| <div class="stats-grid"> |
| <div class="stat-card" onclick="filterIssues('critical')"> |
| <div class="stat-header"> |
| <div class="stat-icon blue"> |
| <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/> |
| </svg> |
| </div> |
| <span class="stat-trend up" id="trendCritical">↑ 12%</span> |
| </div> |
| <div class="stat-value" id="statThreats">1,247</div> |
| <div class="stat-label">التهديدات المحظورة</div> |
| </div> |
| |
| <div class="stat-card"> |
| <div class="stat-header"> |
| <div class="stat-icon green"> |
| <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/> |
| </svg> |
| </div> |
| <span class="stat-trend up" id="trendSuccess">↑ 8%</span> |
| </div> |
| <div class="stat-value" id="statSuccess">99.9%</div> |
| <div class="stat-label">معدل النجاح</div> |
| </div> |
| |
| <div class="stat-card" onclick="filterIssues('open')"> |
| <div class="stat-header"> |
| <div class="stat-icon red"> |
| <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/> |
| </svg> |
| </div> |
| <span class="stat-trend down" id="trendOpen">↓ 3%</span> |
| </div> |
| <div class="stat-value" id="statOpen">23</div> |
| <div class="stat-label">المشكلات المفتوحة</div> |
| </div> |
| |
| <div class="stat-card"> |
| <div class="stat-header"> |
| <div class="stat-icon yellow"> |
| <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/> |
| </svg> |
| </div> |
| <span class="stat-trend up" id="trendResponse">↑ 15%</span> |
| </div> |
| <div class="stat-value" id="statResponse">0.3s</div> |
| <div class="stat-label">زمن الاستجابة</div> |
| </div> |
| </div> |
| |
| |
| <div class="charts-section"> |
| <div class="chart-card"> |
| <div class="chart-header"> |
| <h3 class="chart-title">نشاط الفحص والأمان</h3> |
| <div class="chart-tabs"> |
| <button class="chart-tab" data-period="day" onclick="changePeriod('day')">24 ساعة</button> |
| <button class="chart-tab active" data-period="week" onclick="changePeriod('week')">أسبوع</button> |
| <button class="chart-tab" data-period="month" onclick="changePeriod('month')">شهر</button> |
| </div> |
| </div> |
| <div class="area-chart"> |
| <svg class="chart-svg" viewBox="0 0 800 250" id="mainChart"> |
| |
| <line x1="50" y1="30" x2="750" y2="30" stroke="#E2E8F0" stroke-width="1"/> |
| <line x1="50" y1="80" x2="750" y2="80" stroke="#E2E8F0" stroke-width="1"/> |
| <line x1="50" y1="130" x2="750" y2="130" stroke="#E2E8F0" stroke-width="1"/> |
| <line x1="50" y1="180" x2="750" y2="180" stroke="#E2E8F0" stroke-width="1"/> |
| |
| |
| <defs> |
| <linearGradient id="areaGradient" x1="0%" y1="0%" x2="0%" y2="100%"> |
| <stop offset="0%" style="stop-color:#3B82F6;stop-opacity:0.3"/> |
| <stop offset="100%" style="stop-color:#3B82F6;stop-opacity:0.05"/> |
| </linearGradient> |
| </defs> |
| |
| |
| <path d="M50,180 L100,150 L150,160 L200,120 L250,140 L300,100 L350,110 L400,70 L450,90 L500,60 L550,80 L600,50 L650,65 L700,40 L750,55 L750,180 Z" fill="url(#areaGradient)"/> |
| |
| |
| <path d="M50,180 L100,150 L150,160 L200,120 L250,140 L300,100 L350,110 L400,70 L450,90 L500,60 L550,80 L600,50 L650,65 L700,40 L750,55" fill="none" stroke="#3B82F6" stroke-width="3" stroke-linecap="round"/> |
| |
| |
| <circle cx="100" cy="150" r="5" fill="#3B82F6" class="chart-point" data-value="45"/> |
| <circle cx="200" cy="120" r="5" fill="#3B82F6" class="chart-point" data-value="60"/> |
| <circle cx="300" cy="100" r="5" fill="#3B82F6" class="chart-point" data-value="70"/> |
| <circle cx="400" cy="70" r="5" fill="#3B82F6" class="chart-point" data-value="85"/> |
| <circle cx="500" cy="60" r="5" fill="#3B82F6" class="chart-point" data-value="90"/> |
| <circle cx="600" cy="50" r="5" fill="#3B82F6" class="chart-point" data-value="95"/> |
| <circle cx="700" cy="40" r="5" fill="#3B82F6" class="chart-point" data-value="100"/> |
| |
| |
| <text x="50" y="200" fill="#64748B" font-size="11">السبت</text> |
| <text x="150" y="200" fill="#64748B" font-size="11">الأحد</text> |
| <text x="250" y="200" fill="#64748B" font-size="11">الاثنين</text> |
| <text x="350" y="200" fill="#64748B" font-size="11">الثلاثاء</text> |
| <text x="450" y="200" fill="#64748B" font-size="11">الأربعاء</text> |
| <text x="550" y="200" fill="#64748B" font-size="11">الخميس</text> |
| <text x="650" y="200" fill="#64748B" font-size="11">الجمعة</text> |
| |
| |
| <text x="45" y="35" text-anchor="end" fill="#64748B" font-size="10">100</text> |
| <text x="45" y="85" text-anchor="end" fill="#64748B" font-size="10">75</text> |
| <text x="45" y="135" text-anchor="end" fill="#64748B" font-size="10">50</text> |
| <text x="45" y="185" text-anchor="end" fill="#64748B" font-size="10">25</text> |
| </svg> |
| </div> |
| </div> |
| |
| <div class="chart-card"> |
| <div class="chart-header"> |
| <h3 class="chart-title">توزيع المشكلات</h3> |
| </div> |
| <div class="donut-chart"> |
| <svg class="donut-svg" viewBox="0 0 180 180"> |
| <circle cx="90" cy="90" r="70" fill="none" stroke="#E2E8F0" stroke-width="25"/> |
| <circle cx="90" cy="90" r="70" fill="none" stroke="#EF4444" stroke-width="25" stroke-dasharray="110 308" stroke-dashoffset="0" transform="rotate(-90 90 90)"/> |
| <circle cx="90" cy="90" r="70" fill="none" stroke="#F59E0B" stroke-width="25" stroke-dasharray="88 308" stroke-dashoffset="-110" transform="rotate(-90 90 90)"/> |
| <circle cx="90" cy="90" r="70" fill="none" stroke="#3B82F6" stroke-width="25" stroke-dasharray="66 308" stroke-dashoffset="-198" transform="rotate(-90 90 90)"/> |
| <circle cx="90" cy="90" r="70" fill="none" stroke="#10B981" stroke-width="25" stroke-dasharray="44 308" stroke-dashoffset="-264" transform="rotate(-90 90 90)"/> |
| <text x="90" y="85" text-anchor="middle" font-size="24" font-weight="bold" fill="#0F172A" id="donutTotal">23</text> |
| <text x="90" y="105" text-anchor="middle" font-size="12" fill="#64748B">إجمالي</text> |
| </svg> |
| <div class="donut-legend"> |
| <div class="legend-item"> |
| <div class="legend-color" style="background:#EF4444"></div> |
| <span class="legend-label">حرجة</span> |
| <span class="legend-value" id="legendCritical">5</span> |
| </div> |
| <div class="legend-item"> |
| <div class="legend-color" style="background:#F59E0B"></div> |
| <span class="legend-label">عالية</span> |
| <span class="legend-value" id="legendHigh">7</span> |
| </div> |
| <div class="legend-item"> |
| <div class="legend-color" style="background:#3B82F6"></div> |
| <span class="legend-label">متوسطة</span> |
| <span class="legend-value" id="legendMedium">6</span> |
| </div> |
| <div class="legend-item"> |
| <div class="legend-color" style="background:#10B981"></div> |
| <span class="legend-label">منخفضة</span> |
| <span class="legend-value" id="legendLow">5</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="activity-section"> |
| <div class="activity-card"> |
| <div class="activity-header"> |
| <h3 class="activity-title">أحدث المشكلات</h3> |
| <span class="view-all" onclick="filterIssues('all')">عرض الكل →</span> |
| </div> |
| <div class="issues-list" id="issuesList"> |
| |
| </div> |
| </div> |
| |
| <div class="activity-card"> |
| <div class="activity-header"> |
| <h3 class="activity-title">المستودعات النشطة</h3> |
| <span class="view-all">عرض الكل →</span> |
| </div> |
| <div class="repos-list" id="reposList"> |
| |
| </div> |
| </div> |
| </div> |
| </main> |
| </div> |
| |
| |
| <div class="settings-panel" id="settingsPanel"> |
| <div class="settings-content"> |
| <div class="settings-header"> |
| <h3>⚙️ الإعدادات</h3> |
| <button class="close-btn" onclick="closeSettings()">×</button> |
| </div> |
| |
| <div class="setting-item"> |
| <label class="setting-label">اسم المستخدم</label> |
| <input type="text" class="setting-input" id="settingUsername" placeholder="أدخل اسم المستخدم"> |
| </div> |
| |
| <div class="setting-item"> |
| <label class="setting-label">البريد الإلكتروني</label> |
| <input type="email" class="setting-input" id="settingEmail" placeholder="أدخل البريد الإلكتروني"> |
| </div> |
| |
| <div class="setting-item"> |
| <label class="setting-label">لغة الواجهة</label> |
| <select class="setting-select" id="settingLanguage"> |
| <option value="ar">العربية</option> |
| <option value="en">English</option> |
| </select> |
| </div> |
| |
| <div class="setting-item"> |
| <label class="setting-label">السمة</label> |
| <select class="setting-select" id="settingTheme"> |
| <option value="light">فاتحة</option> |
| <option value="dark">داكنة</option> |
| <option value="auto">تلقائي</option> |
| </select> |
| </div> |
| |
| <div class="setting-item"> |
| <label class="setting-label">فحص تلقائي عند الحفظ</label> |
| <div class="setting-toggle" onclick="toggleSetting('autoScan')"> |
| <div class="toggle-switch" id="toggleAutoScan"></div> |
| <span>تشغيل</span> |
| </div> |
| <p class="setting-description">إجراء فحص تلقائي للكود عند حفظ الملفات</p> |
| </div> |
| |
| <div class="setting-item"> |
| <label class="setting-label">إشعارات المشاكل الحرجة</label> |
| <div class="setting-toggle" onclick="toggleSetting('criticalAlerts')"> |
| <div class="toggle-switch" id="toggleCriticalAlerts"></div> |
| <span>تشغيل</span> |
| </div> |
| <p class="setting-description">إرسال إشعارات فورية للمشاكل الأمنية الحرجة</p> |
| </div> |
| |
| <div class="setting-item"> |
| <label class="setting-label">الإصلاح التلقائي الآمن</label> |
| <div class="setting-toggle" onclick="toggleSetting('autoFix')"> |
| <div class="toggle-switch" id="toggleAutoFix"></div> |
| <span>تشغيل</span> |
| </div> |
| <p class="setting-description">إصلاح المشاكل الآمنة تلقائياً دون تدخل</p> |
| </div> |
| |
| <button class="save-btn" onclick="saveSettings()">💾 حفظ الإعدادات</button> |
| </div> |
| </div> |
| |
| |
| <div class="toast-container" id="toastContainer"></div> |
|
|
| <script> |
| |
| let currentData = { |
| threats: 1247, |
| successRate: 99.9, |
| openIssues: 23, |
| responseTime: 0.3, |
| issues: [], |
| repos: [] |
| }; |
| |
| let settings = { |
| username: '', |
| email: '', |
| language: 'ar', |
| theme: 'light', |
| autoScan: true, |
| criticalAlerts: true, |
| autoFix: true |
| }; |
| |
| |
| const sampleIssues = [ |
| { id: 1, title: 'ثغرة أمنية في وحدة المصادقة', file: 'auth-module.py', time: 'قبل 5 دقائق', severity: 'critical' }, |
| { id: 2, title: 'فشل في اختبارات الأداء', file: 'performance_test.py', time: 'قبل 23 دقيقة', severity: 'warning' }, |
| { id: 3, title: 'تحذير في تنسيق الكود', file: 'main_controller.dart', time: 'قبل ساعة', severity: 'info' }, |
| { id: 4, title: 'تم إصلاح مشكلة التنسيق تلقائياً', file: 'utils_helper.js', time: 'قبل ساعتين', severity: 'success' }, |
| { id: 5, title: 'مشكلة في اتصال قاعدة البيانات', file: 'db_connection.java', time: 'قبل ساعتين', severity: 'critical' }, |
| { id: 6, title: 'تحذير: استخدام دالة قديمة', file: 'legacy_code.py', time: 'قبل 3 ساعات', severity: 'warning' } |
| ]; |
| |
| const sampleRepos = [ |
| { id: 1, name: 'auto-guardian-system', stars: 124, pullRequests: 45, bugs: 3, status: 'active' }, |
| { id: 2, name: 'payment-gateway-api', stars: 89, pullRequests: 32, bugs: 5, status: 'warning' }, |
| { id: 3, name: 'user-management-service', stars: 56, pullRequests: 18, bugs: 1, status: 'active' }, |
| { id: 4, name: 'data-analytics-platform', stars: 234, pullRequests: 67, bugs: 8, status: 'error' } |
| ]; |
| |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| loadSettings(); |
| loadData(); |
| renderIssues(); |
| renderRepos(); |
| setupEventListeners(); |
| setupMobileMenu(); |
| showToast('🎉 مرحباً بك في Auto-Guardian!', 'success'); |
| }); |
| |
| |
| function setupMobileMenu() { |
| const mobileMenuBtn = document.getElementById('mobileMenuBtn'); |
| if (mobileMenuBtn) { |
| |
| const checkScreenSize = () => { |
| if (window.innerWidth <= 992) { |
| mobileMenuBtn.style.display = 'flex'; |
| } else { |
| mobileMenuBtn.style.display = 'none'; |
| closeMobileMenu(); |
| } |
| }; |
| |
| checkScreenSize(); |
| window.addEventListener('resize', checkScreenSize); |
| } |
| } |
| |
| |
| function toggleMobileMenu() { |
| const sidebar = document.getElementById('sidebar'); |
| const overlay = document.getElementById('sidebarOverlay'); |
| |
| if (sidebar && overlay) { |
| sidebar.classList.toggle('active'); |
| overlay.classList.toggle('active'); |
| } |
| } |
| |
| |
| function closeMobileMenu() { |
| const sidebar = document.getElementById('sidebar'); |
| const overlay = document.getElementById('sidebarOverlay'); |
| |
| if (sidebar) { |
| sidebar.classList.remove('active'); |
| } |
| if (overlay) { |
| overlay.classList.remove('active'); |
| } |
| } |
| |
| |
| function loadSettings() { |
| const saved = localStorage.getItem('autoGuardianSettings'); |
| if (saved) { |
| settings = JSON.parse(saved); |
| } |
| |
| |
| document.getElementById('settingUsername').value = settings.username || ''; |
| document.getElementById('settingEmail').value = settings.email || ''; |
| document.getElementById('settingLanguage').value = settings.language || 'ar'; |
| document.getElementById('settingTheme').value = settings.theme || 'light'; |
| updateToggle('toggleAutoScan', settings.autoScan); |
| updateToggle('toggleCriticalAlerts', settings.criticalAlerts); |
| updateToggle('toggleAutoFix', settings.autoFix); |
| } |
| |
| |
| function saveSettings() { |
| settings.username = document.getElementById('settingUsername').value; |
| settings.email = document.getElementById('settingEmail').value; |
| settings.language = document.getElementById('settingLanguage').value; |
| settings.theme = document.getElementById('settingTheme').value; |
| |
| localStorage.setItem('autoGuardianSettings', JSON.stringify(settings)); |
| closeSettings(); |
| showToast('✅ تم حفظ الإعدادات بنجاح!', 'success'); |
| } |
| |
| |
| function updateToggle(id, value) { |
| const toggle = document.getElementById(id); |
| if (value) { |
| toggle.classList.add('active'); |
| } else { |
| toggle.classList.remove('active'); |
| } |
| } |
| |
| |
| function toggleSetting(setting) { |
| settings[setting] = !settings[setting]; |
| updateToggle('toggle' + setting.charAt(0).toUpperCase() + setting.slice(1), settings[setting]); |
| showToast(`⚙️ تم ${settings[setting] ? 'تفعيل' : 'تعطيل'} ${setting}`, 'info'); |
| } |
| |
| |
| function loadData() { |
| currentData.issues = sampleIssues; |
| currentData.repos = sampleRepos; |
| |
| |
| currentData.threats = Math.floor(Math.random() * 2000) + 500; |
| currentData.openIssues = Math.floor(Math.random() * 30) + 10; |
| currentData.responseTime = (Math.random() * 0.5 + 0.1).toFixed(1); |
| |
| updateStatsUI(); |
| } |
| |
| |
| function updateStatsUI() { |
| document.getElementById('statThreats').textContent = currentData.threats.toLocaleString(); |
| document.getElementById('statSuccess').textContent = currentData.successRate + '%'; |
| document.getElementById('statOpen').textContent = currentData.openIssues; |
| document.getElementById('statResponse').textContent = currentData.responseTime + 's'; |
| |
| |
| const critical = currentData.issues.filter(i => i.severity === 'critical').length; |
| const warning = currentData.issues.filter(i => i.severity === 'warning').length; |
| const info = currentData.issues.filter(i => i.severity === 'info').length; |
| const success = currentData.issues.filter(i => i.severity === 'success').length; |
| |
| document.getElementById('legendCritical').textContent = critical; |
| document.getElementById('legendHigh').textContent = warning; |
| document.getElementById('legendMedium').textContent = info; |
| document.getElementById('legendLow').textContent = success; |
| document.getElementById('donutTotal').textContent = currentData.issues.length; |
| } |
| |
| |
| function renderIssues(issues = currentData.issues) { |
| const container = document.getElementById('issuesList'); |
| container.innerHTML = ''; |
| |
| issues.forEach(issue => { |
| const severityClass = issue.severity === 'critical' ? 'badge-critical' : |
| issue.severity === 'warning' ? 'badge-warning' : |
| issue.severity === 'info' ? 'badge-info' : 'badge-success'; |
| |
| const severityLabel = issue.severity === 'critical' ? 'حرجة' : |
| issue.severity === 'warning' ? 'عالية' : |
| issue.severity === 'info' ? 'متوسطة' : 'تم الإصلاح'; |
| |
| const iconSvg = issue.severity === 'critical' ? |
| '<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>' : |
| issue.severity === 'warning' ? |
| '<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>' : |
| issue.severity === 'success' ? |
| '<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>' : |
| '<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>'; |
| |
| const html = ` |
| <div class="issue-item" onclick="showIssueDetails(${issue.id})"> |
| <div class="issue-icon" style="background: rgba(${issue.severity === 'critical' ? '239, 68, 68' : issue.severity === 'warning' ? '245, 158, 11' : issue.severity === 'success' ? '16, 185, 129' : '59, 130, 246'}, 0.1); color: ${issue.severity === 'critical' ? '#EF4444' : issue.severity === 'warning' ? '#F59E0B' : issue.severity === 'success' ? '#10B981' : '#3B82F6'};"> |
| ${iconSvg} |
| </div> |
| <div class="issue-content"> |
| <div class="issue-title">${issue.title}</div> |
| <div class="issue-meta">${issue.file} • ${issue.time}</div> |
| </div> |
| <span class="issue-badge ${severityClass}">${severityLabel}</span> |
| </div> |
| `; |
| container.innerHTML += html; |
| }); |
| } |
| |
| |
| function renderRepos(repos = currentData.repos) { |
| const container = document.getElementById('reposList'); |
| container.innerHTML = ''; |
| |
| repos.forEach(repo => { |
| const statusClass = repo.status === 'active' ? 'active' : repo.status === 'warning' ? 'warning' : 'error'; |
| const statusLabel = repo.status === 'active' ? 'نشط' : repo.status === 'warning' ? 'يحتاج مراجعة' : 'مشاكل'; |
| const statusColor = repo.status === 'active' ? '#10B981' : repo.status === 'warning' ? '#F59E0B' : '#EF4444'; |
| |
| const html = ` |
| <div class="repo-item"> |
| <div class="repo-icon"> |
| <svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/> |
| </svg> |
| </div> |
| <div class="repo-content"> |
| <div class="repo-name">${repo.name}</div> |
| <div class="repo-stats"> |
| <span>⭐ ${repo.stars}</span> |
| <span>🔀 ${repo.pullRequests}</span> |
| <span>🐛 ${repo.bugs}</span> |
| </div> |
| </div> |
| <div class="repo-status"> |
| <span class="status-dot ${statusClass}"></span> |
| <span style="color: ${statusColor};">${statusLabel}</span> |
| </div> |
| </div> |
| `; |
| container.innerHTML += html; |
| }); |
| } |
| |
| |
| function filterIssues(type) { |
| let filtered = currentData.issues; |
| |
| if (type === 'critical') { |
| filtered = currentData.issues.filter(i => i.severity === 'critical'); |
| showToast(`🔍 عرض ${filtered.length} مشكلة حرجة`, 'info'); |
| } else if (type === 'open') { |
| filtered = currentData.issues.filter(i => i.severity !== 'success'); |
| showToast(`🔍 عرض ${filtered.length} مشكلة مفتوحة`, 'info'); |
| } else if (type === 'all') { |
| showToast(`🔍 عرض ${filtered.length} مشكلة`, 'info'); |
| } |
| |
| renderIssues(filtered); |
| } |
| |
| |
| function showIssueDetails(id) { |
| const issue = currentData.issues.find(i => i.id === id); |
| if (issue) { |
| showToast(`📋 ${issue.title} - ${issue.file}`, 'info'); |
| } |
| } |
| |
| |
| function changePeriod(period) { |
| |
| document.querySelectorAll('.chart-tab').forEach(tab => { |
| tab.classList.remove('active'); |
| if (tab.dataset.period === period) { |
| tab.classList.add('active'); |
| } |
| }); |
| |
| |
| showToast(`📊 عرض بيانات ${period === 'day' ? '24 ساعة' : period === 'week' ? 'أسبوع' : 'شهر'}`, 'info'); |
| |
| |
| const randomFactor = period === 'day' ? 1 : period === 'week' ? 7 : 30; |
| currentData.threats = Math.floor(Math.random() * 2000 * randomFactor) + 500; |
| updateStatsUI(); |
| } |
| |
| |
| function setupEventListeners() { |
| |
| document.querySelectorAll('.nav-item').forEach(item => { |
| item.addEventListener('click', function() { |
| const view = this.dataset.view; |
| |
| document.querySelectorAll('.nav-item').forEach(i => i.classList.remove('active')); |
| this.classList.add('active'); |
| |
| |
| closeMobileMenu(); |
| |
| if (view === 'settings') { |
| openSettings(); |
| } else if (view === 'help') { |
| showToast('📖 المساعدة: استخدم القائمة للتنقل بين الأقسام', 'info'); |
| } else { |
| showToast(`📂 الانتقال إلى ${this.querySelector('span').textContent}`, 'info'); |
| } |
| }); |
| }); |
| |
| |
| const searchInput = document.getElementById('searchInput'); |
| const searchResults = document.getElementById('searchResults'); |
| |
| searchInput.addEventListener('input', function() { |
| const query = this.value.toLowerCase(); |
| |
| if (query.length < 2) { |
| searchResults.classList.remove('active'); |
| return; |
| } |
| |
| |
| const results = []; |
| |
| currentData.issues.forEach(issue => { |
| if (issue.title.toLowerCase().includes(query) || issue.file.toLowerCase().includes(query)) { |
| results.push({ type: 'issue', title: issue.title, subtitle: issue.file }); |
| } |
| }); |
| |
| currentData.repos.forEach(repo => { |
| if (repo.name.toLowerCase().includes(query)) { |
| results.push({ type: 'repo', title: repo.name, subtitle: `⭐ ${repo.stars} | 🔀 ${repo.pullRequests}` }); |
| } |
| }); |
| |
| if (results.length > 0) { |
| searchResults.innerHTML = results.map(r => ` |
| <div class="search-result-item"> |
| <div style="font-weight: 500;">${r.title}</div> |
| <div style="font-size: 12px; color: var(--text-muted);">${r.subtitle}</div> |
| </div> |
| `).join(''); |
| searchResults.classList.add('active'); |
| } else { |
| searchResults.innerHTML = '<div class="search-result-item">لا توجد نتائج</div>'; |
| searchResults.classList.add('active'); |
| } |
| }); |
| |
| searchInput.addEventListener('blur', function() { |
| setTimeout(() => { |
| searchResults.classList.remove('active'); |
| }, 200); |
| }); |
| |
| searchInput.addEventListener('focus', function() { |
| if (this.value.length >= 2) { |
| searchResults.classList.add('active'); |
| } |
| }); |
| |
| |
| document.getElementById('notificationBtn').addEventListener('click', function() { |
| showToast('🔔 الإشعارات: 5 إشعارات جديدة', 'info'); |
| document.getElementById('notificationBadge').textContent = '0'; |
| }); |
| } |
| |
| |
| function openSettings() { |
| document.getElementById('settingsPanel').classList.add('active'); |
| } |
| |
| function closeSettings() { |
| document.getElementById('settingsPanel').classList.remove('active'); |
| } |
| |
| |
| function showToast(message, type = 'info') { |
| const container = document.getElementById('toastContainer'); |
| const toast = document.createElement('div'); |
| toast.className = `toast ${type}`; |
| toast.innerHTML = message; |
| container.appendChild(toast); |
| |
| setTimeout(() => { |
| toast.remove(); |
| }, 3000); |
| } |
| |
| |
| document.getElementById('settingsPanel').addEventListener('click', function(e) { |
| if (e.target === this) { |
| closeSettings(); |
| } |
| }); |
| </script> |
| </body> |
| </html> |
|
|
