| <!DOCTYPE html> |
| <html dir="rtl" lang="ar"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>منصة الأمان السيبراني المتطورة 2025 | Ultimate Security Platform</title> |
| <meta name="description" content="منصة الأمان السيبراني الأكثر تطوراً في 2025 مع تقنيات الذكاء الاصطناعي والتحليل المتقدم"> |
| <meta name="keywords" content="أمان سيبراني, تحليل الثغرات, ذكاء اصطناعي, أمان ويب, حماية"> |
| |
| |
| <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🔒</text></svg>"> |
| |
| |
| <link rel="manifest" href="data:application/json,{"name":"Ultimate Security Platform","short_name":"Security Pro","description":"منصة الأمان السيبراني المتطورة","start_url":"./ultimate-security-platform.html","display":"standalone","background_color":"#0a0a0a","theme_color":"#00e0d5","icons":[{"src":"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' fill='%2300e0d5'/><text y='.9em' font-size='90' fill='white'>🔒</text></svg>","sizes":"192x192","type":"image/svg+xml"}]}"> |
| |
| <style> |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| |
| :root { |
| --primary-color: #00e0d5; |
| --secondary-color: #1a1a1a; |
| --accent-color: #9d4edd; |
| --danger-color: #ff6b6b; |
| --warning-color: #ffa500; |
| --success-color: #4CAF50; |
| --text-color: #ffffff; |
| --text-secondary: #b0b0b0; |
| --bg-gradient: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #2d2d2d 100%); |
| --glass-bg: rgba(255, 255, 255, 0.05); |
| --glass-border: rgba(255, 255, 255, 0.1); |
| --shadow: 0 8px 32px rgba(0, 224, 213, 0.1); |
| } |
| |
| body { |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
| background: var(--bg-gradient); |
| color: var(--text-color); |
| line-height: 1.6; |
| overflow-x: hidden; |
| min-height: 100vh; |
| } |
| |
| |
| .bg-particles { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| z-index: -1; |
| pointer-events: none; |
| } |
| |
| .particle { |
| position: absolute; |
| background: var(--primary-color); |
| border-radius: 50%; |
| opacity: 0.3; |
| animation: float 6s ease-in-out infinite; |
| } |
| |
| @keyframes float { |
| 0%, 100% { transform: translateY(0px) rotate(0deg); } |
| 50% { transform: translateY(-20px) rotate(180deg); } |
| } |
| |
| |
| .header { |
| background: var(--glass-bg); |
| backdrop-filter: blur(10px); |
| border-bottom: 1px solid var(--glass-border); |
| padding: 1rem 0; |
| position: fixed; |
| top: 0; |
| left: 0; |
| right: 0; |
| z-index: 1000; |
| transition: all 0.3s ease; |
| } |
| |
| .header.scrolled { |
| background: rgba(10, 10, 10, 0.9); |
| backdrop-filter: blur(20px); |
| } |
| |
| .nav-container { |
| max-width: 1200px; |
| margin: 0 auto; |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| padding: 0 2rem; |
| } |
| |
| .logo { |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| font-size: 1.5rem; |
| font-weight: bold; |
| color: var(--primary-color); |
| text-decoration: none; |
| } |
| |
| .logo-icon { |
| width: 40px; |
| height: 40px; |
| background: var(--primary-color); |
| border-radius: 8px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| color: var(--secondary-color); |
| font-size: 1.2rem; |
| } |
| |
| .nav-links { |
| display: flex; |
| list-style: none; |
| gap: 2rem; |
| } |
| |
| .nav-links a { |
| color: var(--text-color); |
| text-decoration: none; |
| padding: 0.5rem 1rem; |
| border-radius: 25px; |
| transition: all 0.3s ease; |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .nav-links a::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: -100%; |
| width: 100%; |
| height: 100%; |
| background: linear-gradient(90deg, transparent, var(--primary-color), transparent); |
| transition: left 0.5s ease; |
| } |
| |
| .nav-links a:hover::before { |
| left: 100%; |
| } |
| |
| .nav-links a:hover { |
| color: var(--secondary-color); |
| background: var(--primary-color); |
| } |
| |
| .status-indicator { |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| padding: 0.5rem 1rem; |
| background: var(--glass-bg); |
| border-radius: 25px; |
| border: 1px solid var(--glass-border); |
| } |
| |
| .status-dot { |
| width: 8px; |
| height: 8px; |
| border-radius: 50%; |
| background: var(--success-color); |
| animation: pulse 2s infinite; |
| } |
| |
| @keyframes pulse { |
| 0% { transform: scale(1); opacity: 1; } |
| 50% { transform: scale(1.2); opacity: 0.7; } |
| 100% { transform: scale(1); opacity: 1; } |
| } |
| |
| |
| .main { |
| margin-top: 80px; |
| padding: 2rem; |
| } |
| |
| .container { |
| max-width: 1200px; |
| margin: 0 auto; |
| } |
| |
| .hero { |
| text-align: center; |
| padding: 4rem 0; |
| position: relative; |
| } |
| |
| .hero-title { |
| font-size: 3.5rem; |
| font-weight: 900; |
| margin-bottom: 1rem; |
| background: linear-gradient(135deg, var(--primary-color), var(--accent-color)); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| animation: glow 2s ease-in-out infinite alternate; |
| } |
| |
| @keyframes glow { |
| from { filter: brightness(1); } |
| to { filter: brightness(1.2); } |
| } |
| |
| .hero-subtitle { |
| font-size: 1.3rem; |
| color: var(--text-secondary); |
| margin-bottom: 2rem; |
| max-width: 600px; |
| margin-left: auto; |
| margin-right: auto; |
| } |
| |
| .stats-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); |
| gap: 2rem; |
| margin: 4rem 0; |
| } |
| |
| .stat-card { |
| background: var(--glass-bg); |
| backdrop-filter: blur(10px); |
| border: 1px solid var(--glass-border); |
| border-radius: 15px; |
| padding: 2rem; |
| text-align: center; |
| transition: all 0.3s ease; |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .stat-card::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| height: 3px; |
| background: linear-gradient(90deg, var(--primary-color), var(--accent-color)); |
| } |
| |
| .stat-card:hover { |
| transform: translateY(-5px); |
| box-shadow: var(--shadow); |
| } |
| |
| .stat-number { |
| font-size: 2.5rem; |
| font-weight: bold; |
| color: var(--primary-color); |
| margin-bottom: 0.5rem; |
| } |
| |
| .stat-label { |
| color: var(--text-secondary); |
| font-size: 0.9rem; |
| } |
| |
| |
| .systems-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); |
| gap: 2rem; |
| margin: 4rem 0; |
| } |
| |
| .system-card { |
| background: var(--glass-bg); |
| backdrop-filter: blur(15px); |
| border: 1px solid var(--glass-border); |
| border-radius: 20px; |
| padding: 2rem; |
| position: relative; |
| overflow: hidden; |
| transition: all 0.4s ease; |
| cursor: pointer; |
| } |
| |
| .system-card::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| height: 4px; |
| background: linear-gradient(90deg, var(--primary-color), var(--accent-color), var(--danger-color)); |
| transform: scaleX(0); |
| transition: transform 0.3s ease; |
| } |
| |
| .system-card:hover::before { |
| transform: scaleX(1); |
| } |
| |
| .system-card:hover { |
| transform: translateY(-8px) scale(1.02); |
| box-shadow: 0 20px 40px rgba(0, 224, 213, 0.2); |
| } |
| |
| .system-icon { |
| width: 60px; |
| height: 60px; |
| border-radius: 15px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 2rem; |
| margin-bottom: 1.5rem; |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .system-icon::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background: linear-gradient(135deg, var(--primary-color), var(--accent-color)); |
| opacity: 0.1; |
| } |
| |
| .system-title { |
| font-size: 1.5rem; |
| font-weight: bold; |
| margin-bottom: 1rem; |
| color: var(--text-color); |
| } |
| |
| .system-description { |
| color: var(--text-secondary); |
| margin-bottom: 1.5rem; |
| line-height: 1.6; |
| } |
| |
| .system-features { |
| list-style: none; |
| margin-bottom: 1.5rem; |
| } |
| |
| .system-features li { |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| margin-bottom: 0.5rem; |
| color: var(--text-secondary); |
| } |
| |
| .system-features li::before { |
| content: '✓'; |
| color: var(--success-color); |
| font-weight: bold; |
| } |
| |
| .system-btn { |
| background: linear-gradient(135deg, var(--primary-color), var(--accent-color)); |
| color: var(--secondary-color); |
| border: none; |
| padding: 0.75rem 2rem; |
| border-radius: 25px; |
| font-weight: bold; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| width: 100%; |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .system-btn::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: -100%; |
| width: 100%; |
| height: 100%; |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); |
| transition: left 0.5s ease; |
| } |
| |
| .system-btn:hover::before { |
| left: 100%; |
| } |
| |
| .system-btn:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 10px 20px rgba(0, 224, 213, 0.3); |
| } |
| |
| |
| .modal { |
| display: none; |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: rgba(0, 0, 0, 0.8); |
| backdrop-filter: blur(10px); |
| z-index: 2000; |
| animation: fadeIn 0.3s ease; |
| } |
| |
| .modal.show { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
| |
| @keyframes fadeIn { |
| from { opacity: 0; } |
| to { opacity: 1; } |
| } |
| |
| .modal-content { |
| background: var(--secondary-color); |
| border-radius: 20px; |
| padding: 2rem; |
| max-width: 90vw; |
| max-height: 90vh; |
| overflow-y: auto; |
| position: relative; |
| animation: slideIn 0.3s ease; |
| } |
| |
| @keyframes slideIn { |
| from { transform: translateY(-50px) scale(0.9); opacity: 0; } |
| to { transform: translateY(0) scale(1); opacity: 1; } |
| } |
| |
| .modal-header { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| margin-bottom: 2rem; |
| padding-bottom: 1rem; |
| border-bottom: 1px solid var(--glass-border); |
| } |
| |
| .modal-title { |
| font-size: 1.8rem; |
| font-weight: bold; |
| color: var(--primary-color); |
| } |
| |
| .close-btn { |
| background: none; |
| border: none; |
| color: var(--text-secondary); |
| font-size: 2rem; |
| cursor: pointer; |
| padding: 0; |
| width: 40px; |
| height: 40px; |
| border-radius: 50%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| transition: all 0.3s ease; |
| } |
| |
| .close-btn:hover { |
| background: var(--danger-color); |
| color: white; |
| } |
| |
| |
| .analysis-interface { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 2rem; |
| margin-top: 2rem; |
| } |
| |
| .code-input { |
| background: var(--glass-bg); |
| border: 1px solid var(--glass-border); |
| border-radius: 15px; |
| padding: 1rem; |
| } |
| |
| .code-textarea { |
| width: 100%; |
| min-height: 300px; |
| background: transparent; |
| border: none; |
| color: var(--text-color); |
| font-family: 'Courier New', monospace; |
| font-size: 0.9rem; |
| resize: vertical; |
| outline: none; |
| } |
| |
| .results-panel { |
| background: var(--glass-bg); |
| border: 1px solid var(--glass-border); |
| border-radius: 15px; |
| padding: 1rem; |
| max-height: 400px; |
| overflow-y: auto; |
| } |
| |
| .result-item { |
| background: rgba(255, 255, 255, 0.05); |
| border-radius: 10px; |
| padding: 1rem; |
| margin-bottom: 1rem; |
| border-right: 4px solid var(--primary-color); |
| } |
| |
| .result-item.critical { |
| border-right-color: var(--danger-color); |
| } |
| |
| .result-item.high { |
| border-right-color: var(--warning-color); |
| } |
| |
| .result-item.medium { |
| border-right-color: var(--accent-color); |
| } |
| |
| .result-item.low { |
| border-right-color: var(--success-color); |
| } |
| |
| .result-header { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| margin-bottom: 0.5rem; |
| } |
| |
| .result-type { |
| font-weight: bold; |
| color: var(--primary-color); |
| } |
| |
| .result-severity { |
| padding: 0.25rem 0.75rem; |
| border-radius: 15px; |
| font-size: 0.8rem; |
| font-weight: bold; |
| } |
| |
| .severity-critical { |
| background: var(--danger-color); |
| color: white; |
| } |
| |
| .severity-high { |
| background: var(--warning-color); |
| color: white; |
| } |
| |
| .severity-medium { |
| background: var(--accent-color); |
| color: white; |
| } |
| |
| .severity-low { |
| background: var(--success-color); |
| color: white; |
| } |
| |
| .result-confidence { |
| color: var(--text-secondary); |
| font-size: 0.9rem; |
| } |
| |
| |
| .canvas-container { |
| width: 100%; |
| height: 500px; |
| background: var(--glass-bg); |
| border: 1px solid var(--glass-border); |
| border-radius: 15px; |
| overflow: hidden; |
| position: relative; |
| } |
| |
| .canvas-fallback { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| height: 100%; |
| color: var(--text-secondary); |
| font-size: 1.2rem; |
| } |
| |
| |
| .loading-spinner { |
| width: 40px; |
| height: 40px; |
| border: 3px solid var(--glass-border); |
| border-top: 3px solid var(--primary-color); |
| border-radius: 50%; |
| animation: spin 1s linear infinite; |
| margin: 2rem auto; |
| } |
| |
| @keyframes spin { |
| 0% { transform: rotate(0deg); } |
| 100% { transform: rotate(360deg); } |
| } |
| |
| |
| .footer { |
| background: var(--glass-bg); |
| border-top: 1px solid var(--glass-border); |
| padding: 3rem 0 2rem; |
| margin-top: 4rem; |
| text-align: center; |
| } |
| |
| .footer-content { |
| max-width: 1200px; |
| margin: 0 auto; |
| padding: 0 2rem; |
| } |
| |
| .footer-links { |
| display: flex; |
| justify-content: center; |
| gap: 2rem; |
| margin-bottom: 2rem; |
| } |
| |
| .footer-links a { |
| color: var(--text-secondary); |
| text-decoration: none; |
| transition: color 0.3s ease; |
| } |
| |
| .footer-links a:hover { |
| color: var(--primary-color); |
| } |
| |
| .copyright { |
| color: var(--text-secondary); |
| font-size: 0.9rem; |
| } |
| |
| |
| @media (max-width: 768px) { |
| .nav-container { |
| padding: 0 1rem; |
| } |
| |
| .nav-links { |
| display: none; |
| } |
| |
| .hero-title { |
| font-size: 2.5rem; |
| } |
| |
| .stats-grid { |
| grid-template-columns: repeat(2, 1fr); |
| } |
| |
| .systems-grid { |
| grid-template-columns: 1fr; |
| } |
| |
| .analysis-interface { |
| grid-template-columns: 1fr; |
| } |
| |
| .footer-links { |
| flex-direction: column; |
| gap: 1rem; |
| } |
| } |
| |
| @media (max-width: 480px) { |
| .hero-title { |
| font-size: 2rem; |
| } |
| |
| .stats-grid { |
| grid-template-columns: 1fr; |
| } |
| } |
| |
| |
| .notification { |
| position: fixed; |
| top: 100px; |
| right: 20px; |
| background: var(--secondary-color); |
| border: 1px solid var(--glass-border); |
| border-radius: 10px; |
| padding: 1rem; |
| max-width: 300px; |
| z-index: 3000; |
| transform: translateX(100%); |
| transition: transform 0.3s ease; |
| } |
| |
| .notification.show { |
| transform: translateX(0); |
| } |
| |
| .notification.success { |
| border-left: 4px solid var(--success-color); |
| } |
| |
| .notification.warning { |
| border-left: 4px solid var(--warning-color); |
| } |
| |
| .notification.error { |
| border-left: 4px solid var(--danger-color); |
| } |
| |
| .notification-header { |
| font-weight: bold; |
| margin-bottom: 0.5rem; |
| } |
| |
| .notification-message { |
| color: var(--text-secondary); |
| font-size: 0.9rem; |
| } |
| </style> |
| </head> |
| <body> |
| |
| <div class="bg-particles" id="bgParticles"></div> |
|
|
| |
| <header class="header" id="header"> |
| <div class="nav-container"> |
| <a href="#" class="logo"> |
| <div class="logo-icon">🔒</div> |
| <span>منصة الأمان المتطورة</span> |
| </a> |
| |
| <nav> |
| <ul class="nav-links"> |
| <li><a href="#home">الرئيسية</a></li> |
| <li><a href="#systems">الأنظمة</a></li> |
| <li><a href="#analysis">التحليل</a></li> |
| <li><a href="#training">التدريب</a></li> |
| <li><a href="#dashboard">لوحة التحكم</a></li> |
| </ul> |
| </nav> |
| |
| <div class="status-indicator"> |
| <div class="status-dot" id="statusDot"></div> |
| <span id="statusText">متصل</span> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <main class="main"> |
| <div class="container"> |
| |
| <section class="hero" id="home"> |
| <h1 class="hero-title">منصة الأمان السيبراني المتطورة 2025</h1> |
| <p class="hero-subtitle"> |
| أقوى منصة أمان سيبراني في العالم مع تقنيات الذكاء الاصطناعي المتقدمة |
| والتحليل الفوري للثغرات الأمنية |
| </p> |
| |
| <div class="stats-grid"> |
| <div class="stat-card"> |
| <div class="stat-number" id="threatsDetected">847</div> |
| <div class="stat-label">تهديد مكتشف اليوم</div> |
| </div> |
| <div class="stat-card"> |
| <div class="stat-number" id="analysisCount">12,847</div> |
| <div class="stat-label">تحليل مكتمل</div> |
| </div> |
| <div class="stat-card"> |
| <div class="stat-number" id="accuracyRate">99.8%</div> |
| <div class="stat-label">دقة الكشف</div> |
| </div> |
| <div class="stat-card"> |
| <div class="stat-number" id="responseTime">0.3s</div> |
| <div class="stat-label">متوسط وقت الاستجابة</div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="systems" id="systems"> |
| <h2 style="text-align: center; font-size: 2.5rem; margin-bottom: 3rem; color: var(--primary-color);"> |
| الأنظمة المتقدمة |
| </h2> |
| |
| <div class="systems-grid"> |
| |
| <div class="system-card" onclick="openSystemModal('wasm')"> |
| <div class="system-icon" style="background: linear-gradient(135deg, #00e0d5, #9d4edd);"> |
| 🚀 |
| </div> |
| <h3 class="system-title">محلل الأمان عالي الأداء</h3> |
| <p class="system-description"> |
| تحليل الثغرات باستخدام WebAssembly للسرعة القصوى والدقة في الكشف |
| </p> |
| <ul class="system-features"> |
| <li>تحليل فوري بالذكاء الاصطناعي</li> |
| <li>كشف متقدم لجميع أنواع الثغرات</li> |
| <li>تقييم مخاطر ذكي</li> |
| <li>تقارير مفصلة وشاملة</li> |
| </ul> |
| <button class="system-btn">تشغيل المحلل</button> |
| </div> |
|
|
| |
| <div class="system-card" onclick="openSystemModal('behavioral')"> |
| <div class="system-icon" style="background: linear-gradient(135deg, #9d4edd, #ff6b6b);"> |
| 🤖 |
| </div> |
| <h3 class="system-title">محلل السلوك الذكي</h3> |
| <p class="system-description"> |
| تحليل أنماط السلوك المشبوه والكشف عن التهديدات الناشئة |
| </p> |
| <ul class="system-features"> |
| <li>مراقبة السلوك في الوقت الفعلي</li> |
| <li>كشف البوتات والهجمات الآلية</li> |
| <li>تحليل التهديدات المتقدمة</li> |
| <li>استجابة تلقائية ذكية</li> |
| </ul> |
| <button class="system-btn">تفعيل المراقبة</button> |
| </div> |
|
|
| |
| <div class="system-card" onclick="openSystemModal('3d')"> |
| <div class="system-icon" style="background: linear-gradient(135deg, #ff6b6b, #ffa500);"> |
| 🎮 |
| </div> |
| <h3 class="system-title">الواجهة التفاعلية ثلاثية الأبعاد</h3> |
| <p class="system-description"> |
| واجهة مستخدم متطورة مع تصور ثلاثي الأبعاد للبيانات الأمنية |
| </p> |
| <ul class="system-features"> |
| <li>تصور ثلاثي الأبعاد للتهديدات</li> |
| <li>تفاعل بالإيماءات واللمس</li> |
| <li>دعم الواقع الافتراضي والمعزز</li> |
| <li>تجربة مستخدم غامرة</li> |
| </ul> |
| <button class="system-btn">تشغيل الواجهة</button> |
| </div> |
|
|
| |
| <div class="system-card" onclick="openSystemModal('sw')"> |
| <div class="system-icon" style="background: linear-gradient(135deg, #4CAF50, #00e0d5);"> |
| 🌐 |
| </div> |
| <h3 class="system-title">مدير الخدمة المتقدم</h3> |
| <p class="system-description"> |
| إمكانيات العمل دون اتصال ومزامنة البيانات الذكية |
| </p> |
| <ul class="system-features"> |
| <li>عمل دون اتصال بالإنترنت</li> |
| <li>مزامنة تلقائية للبيانات</li> |
| <li>إشعارات فورية</li> |
| <li>تطبيق ويب تقدمي (PWA)</li> |
| </ul> |
| <button class="system-btn">تفعيل الخدمات</button> |
| </div> |
|
|
| |
| <div class="system-card" onclick="openSystemModal('vuln')"> |
| <div class="system-icon" style="background: linear-gradient(135deg, #ffa500, #ff0000);"> |
| 🔍 |
| </div> |
| <h3 class="system-title">كاشف الثغرات المتطور</h3> |
| <p class="system-description"> |
| تحليل لغوي طبيعي ذكي لكشف الثغرات المعقدة والمتطورة |
| </p> |
| <ul class="system-features"> |
| <li>تحليل لغوي طبيعي (NLP)</li> |
| <li>كشف الثغرات المتقدمة</li> |
| <li>تعلم آلي متطور</li> |
| <li>تحليل سياقي ذكي</li> |
| </ul> |
| <button class="system-btn">بدء الكشف</button> |
| </div> |
|
|
| |
| <div class="system-card" onclick="openSystemModal('dashboard')"> |
| <div class="system-icon" style="background: linear-gradient(135deg, #00e0d5, #4CAF50);"> |
| 📊 |
| </div> |
| <h3 class="system-title">لوحة التحكم المتكاملة</h3> |
| <p class="system-description"> |
| لوحة تحكم شاملة تجمع جميع الأنظمة في واجهة موحدة |
| </p> |
| <ul class="system-features"> |
| <li>مراقبة شاملة لجميع الأنظمة</li> |
| <li>تقارير تفاعلية</li> |
| <li>إحصائيات متقدمة</li> |
| <li>تنبيهات ذكية</li> |
| </ul> |
| <button class="system-btn">عرض اللوحة</button> |
| </div> |
| </div> |
| </section> |
| </div> |
| </main> |
|
|
| |
| <div class="modal" id="systemModal"> |
| <div class="modal-content" style="max-width: 95vw;"> |
| <div class="modal-header"> |
| <h2 class="modal-title" id="modalTitle">نظام الأمان</h2> |
| <button class="close-btn" onclick="closeSystemModal()">×</button> |
| </div> |
| <div id="modalBody"> |
| |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="notificationContainer"></div> |
|
|
| |
| <script> |
| |
| let wasmAnalyzer = null; |
| let behavioralAnalyzer = null; |
| let security3DInterface = null; |
| let serviceWorkerManager = null; |
| let vulnDetector = null; |
| |
| |
| document.addEventListener('DOMContentLoaded', async function() { |
| console.log('🚀 Initializing Ultimate Security Platform...'); |
| |
| |
| createBackgroundParticles(); |
| |
| |
| await initializeServiceWorker(); |
| |
| |
| await initializeSecuritySystems(); |
| |
| |
| setupEventListeners(); |
| |
| |
| startRealTimeUpdates(); |
| |
| console.log('✅ Platform initialized successfully'); |
| }); |
| |
| |
| function createBackgroundParticles() { |
| const container = document.getElementById('bgParticles'); |
| const particleCount = 50; |
| |
| for (let i = 0; i < particleCount; i++) { |
| const particle = document.createElement('div'); |
| particle.className = 'particle'; |
| |
| |
| const size = Math.random() * 4 + 2; |
| const x = Math.random() * window.innerWidth; |
| const y = Math.random() * window.innerHeight; |
| const animationDelay = Math.random() * 6; |
| |
| particle.style.width = size + 'px'; |
| particle.style.height = size + 'px'; |
| particle.style.left = x + 'px'; |
| particle.style.top = y + 'px'; |
| particle.style.animationDelay = animationDelay + 's'; |
| |
| container.appendChild(particle); |
| } |
| } |
| |
| |
| async function initializeServiceWorker() { |
| try { |
| |
| const { ServiceWorkerManager } = await import('./js/service-worker-manager.js'); |
| serviceWorkerManager = new ServiceWorkerManager(); |
| await serviceWorkerManager.initialize(); |
| |
| updateStatus('متصل', 'success'); |
| } catch (error) { |
| console.warn('Service Worker initialization failed:', error); |
| updateStatus('غير متصل', 'warning'); |
| } |
| } |
| |
| |
| async function initializeSecuritySystems() { |
| try { |
| |
| const { WasmSecurityAnalyzer } = await import('./js/wasm-security-analyzer.js'); |
| wasmAnalyzer = new WasmSecurityAnalyzer(); |
| await wasmAnalyzer.initialize(); |
| |
| |
| const { AIBehavioralAnalyzer } = await import('./js/ai-behavioral-analyzer.js'); |
| behavioralAnalyzer = new AIBehavioralAnalyzer(); |
| await behavioralAnalyzer.initialize(); |
| |
| |
| const { AdvancedVulnerabilityDetector } = await import('./js/advanced-vulnerability-detector.js'); |
| vulnDetector = new AdvancedVulnerabilityDetector(); |
| await vulnDetector.initialize(); |
| |
| } catch (error) { |
| console.error('Security systems initialization failed:', error); |
| showNotification('فشل في تهيئة الأنظمة الأمنية', 'error'); |
| } |
| } |
| |
| |
| function setupEventListeners() { |
| |
| window.addEventListener('scroll', function() { |
| const header = document.getElementById('header'); |
| if (window.scrollY > 50) { |
| header.classList.add('scrolled'); |
| } else { |
| header.classList.remove('scrolled'); |
| } |
| }); |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function (e) { |
| e.preventDefault(); |
| const target = document.querySelector(this.getAttribute('href')); |
| if (target) { |
| target.scrollIntoView({ |
| behavior: 'smooth', |
| block: 'start' |
| }); |
| } |
| }); |
| }); |
| |
| |
| window.addEventListener('vulnerabilityDetected', function(e) { |
| showNotification('تم اكتشاف تهديد أمني!', 'warning'); |
| console.warn('Vulnerability detected:', e.detail); |
| }); |
| } |
| |
| |
| function startRealTimeUpdates() { |
| |
| setInterval(updateStats, 5000); |
| |
| |
| setInterval(checkConnection, 10000); |
| } |
| |
| function updateStats() { |
| |
| const threatsElement = document.getElementById('threatsDetected'); |
| const analysisElement = document.getElementById('analysisCount'); |
| |
| if (threatsElement && Math.random() > 0.7) { |
| const current = parseInt(threatsElement.textContent); |
| threatsElement.textContent = current + Math.floor(Math.random() * 3); |
| } |
| |
| if (analysisElement && Math.random() > 0.9) { |
| const current = parseInt(analysisElement.textContent.replace(',', '')); |
| analysisElement.textContent = (current + 1).toLocaleString(); |
| } |
| } |
| |
| function checkConnection() { |
| if (navigator.onLine) { |
| updateStatus('متصل', 'success'); |
| } else { |
| updateStatus('غير متصل', 'warning'); |
| } |
| } |
| |
| function updateStatus(text, type) { |
| const statusText = document.getElementById('statusText'); |
| const statusDot = document.getElementById('statusDot'); |
| |
| if (statusText) statusText.textContent = text; |
| |
| if (statusDot) { |
| statusDot.style.background = type === 'success' ? '#4CAF50' : |
| type === 'warning' ? '#FF9800' : '#f44336'; |
| } |
| } |
| |
| |
| function openSystemModal(systemType) { |
| const modal = document.getElementById('systemModal'); |
| const modalTitle = document.getElementById('modalTitle'); |
| const modalBody = document.getElementById('modalBody'); |
| |
| modalTitle.textContent = getSystemTitle(systemType); |
| modalBody.innerHTML = getSystemInterface(systemType); |
| modal.classList.add('show'); |
| |
| |
| initializeSystemInterface(systemType); |
| } |
| |
| function closeSystemModal() { |
| const modal = document.getElementById('systemModal'); |
| modal.classList.remove('show'); |
| } |
| |
| function getSystemTitle(systemType) { |
| const titles = { |
| 'wasm': 'محلل الأمان عالي الأداء', |
| 'behavioral': 'محلل السلوك الذكي', |
| '3d': 'الواجهة التفاعلية ثلاثية الأبعاد', |
| 'sw': 'مدير الخدمة المتقدم', |
| 'vuln': 'كاشف الثغرات المتطور', |
| 'dashboard': 'لوحة التحكم المتكاملة' |
| }; |
| return titles[systemType] || 'نظام الأمان'; |
| } |
| |
| function getSystemInterface(systemType) { |
| switch (systemType) { |
| case 'wasm': |
| return ` |
| <div class="analysis-interface"> |
| <div class="code-input"> |
| <h3 style="margin-bottom: 1rem; color: var(--primary-color);">أدخل الكود للتحليل</h3> |
| <textarea class="code-textarea" id="wasmCodeInput" |
| placeholder="// أدخل الكود هنا للتحليل الأمني... |
| function processUserInput(input) { |
| var result = eval(input); |
| document.getElementById('output').innerHTML = result; |
| }"></textarea> |
| <button class="system-btn" onclick="analyzeWithWasm()" style="margin-top: 1rem;"> |
| تحليل الكود |
| </button> |
| </div> |
| <div class="results-panel"> |
| <h3 style="margin-bottom: 1rem; color: var(--primary-color);">نتائج التحليل</h3> |
| <div id="wasmResults"> |
| <p style="color: var(--text-secondary); text-align: center; margin-top: 2rem;"> |
| ستظهر نتائج التحليل هنا... |
| </p> |
| </div> |
| </div> |
| </div> |
| `; |
| |
| case 'behavioral': |
| return ` |
| <div style="padding: 2rem;"> |
| <div style="text-align: center; margin-bottom: 2rem;"> |
| <div class="loading-spinner"></div> |
| <p style="color: var(--text-secondary);">جاري تفعيل مراقبة السلوك...</p> |
| </div> |
| <div id="behavioralStatus"> |
| <div class="stat-card" style="margin: 1rem 0;"> |
| <div class="stat-number" id="behavioralScore">0</div> |
| <div class="stat-label">نقاط السلوك المشبوه</div> |
| </div> |
| <div class="result-item"> |
| <div class="result-header"> |
| <span class="result-type">مراقبة الوقت الفعلي</span> |
| <span class="result-severity severity-low">نشط</span> |
| </div> |
| <div class="result-confidence">جاري مراقبة أنماط السلوك والتفاعل</div> |
| </div> |
| </div> |
| </div> |
| `; |
| |
| case '3d': |
| return ` |
| <div class="canvas-container" id="3dCanvasContainer"> |
| <div class="canvas-fallback"> |
| <div style="text-align: center;"> |
| <h3 style="color: var(--primary-color); margin-bottom: 1rem;">🎮 الواجهة ثلاثية الأبعاد</h3> |
| <p style="color: var(--text-secondary);">جاري تحميل البيئة ثلاثية الأبعاد...</p> |
| <div class="loading-spinner" style="margin-top: 1rem;"></div> |
| </div> |
| </div> |
| </div> |
| <div style="margin-top: 1rem; padding: 1rem; background: var(--glass-bg); border-radius: 10px;"> |
| <h4 style="color: var(--primary-color); margin-bottom: 0.5rem;">التحكم:</h4> |
| <p style="color: var(--text-secondary); font-size: 0.9rem;"> |
| • الماوس: تحريك الكاميرا<br> |
| • العجلة: التكبير والتصغير<br> |
| • النقر: التفاعل مع العناصر |
| </p> |
| </div> |
| `; |
| |
| case 'vuln': |
| return ` |
| <div class="analysis-interface"> |
| <div class="code-input"> |
| <h3 style="margin-bottom: 1rem; color: var(--primary-color);">تحليل الثغرات المتقدم</h3> |
| <textarea class="code-textarea" id="vulnCodeInput" |
| placeholder="// أدخل الكود لتحليل الثغرات المتقدم... |
| <?php |
| $user_id = $_GET['id']; |
| $query = "SELECT * FROM users WHERE id = " . $user_id; |
| $result = mysql_query($query); |
| ?>"></textarea> |
| <button class="system-btn" onclick="analyzeVulnerabilities()" style="margin-top: 1rem;"> |
| تحليل متقدم |
| </button> |
| </div> |
| <div class="results-panel"> |
| <h3 style="margin-bottom: 1rem; color: var(--primary-color);">نتائج التحليل المتقدم</h3> |
| <div id="vulnResults"> |
| <p style="color: var(--text-secondary); text-align: center; margin-top: 2rem;"> |
| نتائج التحليل اللغوي الطبيعي ستظهر هنا... |
| </p> |
| </div> |
| </div> |
| </div> |
| `; |
| |
| case 'dashboard': |
| return ` |
| <div style="padding: 1rem;"> |
| <div class="stats-grid" style="grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 2rem;"> |
| <div class="stat-card"> |
| <div class="stat-number" style="color: var(--danger-color);">5</div> |
| <div class="stat-label">التهديدات النشطة</div> |
| </div> |
| <div class="stat-card"> |
| <div class="stat-number" style="color: var(--warning-color);">12</div> |
| <div class="stat-label">تحذيرات</div> |
| </div> |
| <div class="stat-card"> |
| <div class="stat-number" style="color: var(--success-color);">847</div> |
| <div class="stat-label">حماية ناجحة</div> |
| </div> |
| <div class="stat-card"> |
| <div class="stat-number" style="color: var(--primary-color);">99.8%</div> |
| <div class="stat-label">معدل الحماية</div> |
| </div> |
| </div> |
| <div style="background: var(--glass-bg); border-radius: 15px; padding: 1.5rem;"> |
| <h4 style="color: var(--primary-color); margin-bottom: 1rem;">آخر الأنشطة الأمنية</h4> |
| <div id="securityLog"> |
| <div class="result-item low"> |
| <div class="result-header"> |
| <span class="result-type">حماية XSS</span> |
| <span class="result-severity severity-low">محجوب</span> |
| </div> |
| <div class="result-confidence">تم منع محاولة XSS من 192.168.1.100</div> |
| </div> |
| <div class="result-item medium"> |
| <div class="result-header"> |
| <span class="result-type">مراقبة معدل الطلبات</span> |
| <span class="result-severity severity-medium">تحذير</span> |
| </div> |
| <div class="result-confidence">اكتشاف معدل طلبات مرتفع من IP مشبوه</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| `; |
| |
| default: |
| return '<p>واجهة النظام قيد التطوير...</p>'; |
| } |
| } |
| |
| async function initializeSystemInterface(systemType) { |
| switch (systemType) { |
| case '3d': |
| await initialize3DInterface(); |
| break; |
| case 'behavioral': |
| startBehavioralMonitoring(); |
| break; |
| } |
| } |
| |
| async function initialize3DInterface() { |
| try { |
| const { Security3DInterface } = await import('./js/3d-interactive-interface.js'); |
| security3DInterface = new Security3DInterface('3dCanvasContainer'); |
| await security3DInterface.initialize(); |
| } catch (error) { |
| console.warn('3D interface initialization failed:', error); |
| |
| } |
| } |
| |
| function startBehavioralMonitoring() { |
| |
| let score = 0; |
| const interval = setInterval(() => { |
| score += Math.random() * 10; |
| document.getElementById('behavioralScore').textContent = Math.floor(score); |
| |
| if (score > 80) { |
| clearInterval(interval); |
| showNotification('تم اكتشاف سلوك مشبوه!', 'warning'); |
| } |
| }, 2000); |
| } |
| |
| |
| async function analyzeWithWasm() { |
| const code = document.getElementById('wasmCodeInput').value; |
| const resultsDiv = document.getElementById('wasmResults'); |
| |
| if (!code.trim()) { |
| showNotification('يرجى إدخال كود للتحليل', 'warning'); |
| return; |
| } |
| |
| resultsDiv.innerHTML = '<div class="loading-spinner"></div><p style="text-align: center; color: var(--text-secondary);">جاري التحليل...</p>'; |
| |
| try { |
| const results = await wasmAnalyzer.analyzeCode(code); |
| displayAnalysisResults(results, resultsDiv); |
| } catch (error) { |
| resultsDiv.innerHTML = `<p style="color: var(--danger-color);">خطأ في التحليل: ${error.message}</p>`; |
| } |
| } |
| |
| async function analyzeVulnerabilities() { |
| const code = document.getElementById('vulnCodeInput').value; |
| const resultsDiv = document.getElementById('vulnResults'); |
| |
| if (!code.trim()) { |
| showNotification('يرجى إدخال كود للتحليل', 'warning'); |
| return; |
| } |
| |
| resultsDiv.innerHTML = '<div class="loading-spinner"></div><p style="text-align: center; color: var(--text-secondary);">جاري التحليل المتقدم...</p>'; |
| |
| try { |
| const results = await vulnDetector.analyzeCode(code); |
| displayVulnerabilityResults(results, resultsDiv); |
| } catch (error) { |
| resultsDiv.innerHTML = `<p style="color: var(--danger-color);">خطأ في التحليل: ${error.message}</p>`; |
| } |
| } |
| |
| function displayAnalysisResults(results, container) { |
| let html = ''; |
| |
| if (results.vulnerabilities.length === 0) { |
| html = '<div class="result-item low"><div class="result-header"><span class="result-type">لا توجد ثغرات</span><span class="result-severity severity-low">آمن</span></div><div class="result-confidence">الكود آمن - لم يتم العثور على ثغرات أمنية</div></div>'; |
| } else { |
| results.vulnerabilities.forEach(vuln => { |
| const severityClass = vuln.severity >= 8 ? 'critical' : vuln.severity >= 6 ? 'high' : vuln.severity >= 4 ? 'medium' : 'low'; |
| html += ` |
| <div class="result-item ${severityClass}"> |
| <div class="result-header"> |
| <span class="result-type">${getVulnTypeName(vuln.type)}</span> |
| <span class="result-severity severity-${severityClass}">${getSeverityName(vuln.severity)}</span> |
| </div> |
| <div class="result-confidence">الثقة: ${(vuln.confidence * 100).toFixed(1)}% | الخط: ${vuln.line}</div> |
| ${vuln.match ? `<div style="margin-top: 0.5rem; padding: 0.5rem; background: rgba(0,0,0,0.3); border-radius: 5px; font-family: monospace; font-size: 0.8rem;">${vuln.match}</div>` : ''} |
| </div> |
| `; |
| }); |
| } |
| |
| html += `<div style="margin-top: 1rem; padding: 1rem; background: var(--glass-bg); border-radius: 10px;"> |
| <strong>درجة المخاطر الإجمالية:</strong> ${results.riskScore}/100<br> |
| <strong>طريقة التحليل:</strong> ${results.engine}<br> |
| <strong>وقت التحليل:</strong> ${results.performance.analysisTime.toFixed(2)}ms |
| </div>`; |
| |
| container.innerHTML = html; |
| } |
| |
| function displayVulnerabilityResults(results, container) { |
| let html = ''; |
| |
| if (results.vulnerabilities.length === 0) { |
| html = '<div class="result-item low"><div class="result-header"><span class="result-type">لا توجد ثغرات</span><span class="result-severity severity-low">آمن</span></div><div class="result-confidence">التحليل المتقدم لم يجد ثغرات أمنية</div></div>'; |
| } else { |
| results.vulnerabilities.forEach(vuln => { |
| const severityClass = vuln.severity >= 8 ? 'critical' : vuln.severity >= 6 ? 'high' : vuln.severity >= 4 ? 'medium' : 'low'; |
| html += ` |
| <div class="result-item ${severityClass}"> |
| <div class="result-header"> |
| <span class="result-type">${getVulnTypeName(vuln.type)}</span> |
| <span class="result-severity severity-${severityClass}">${getSeverityName(vuln.severity)}</span> |
| </div> |
| <div class="result-confidence">الثقة: ${(vuln.confidence * 100).toFixed(1)}% | الطريقة: ${vuln.method}</div> |
| ${vuln.context ? `<div style="margin-top: 0.5rem; padding: 0.5rem; background: rgba(0,0,0,0.3); border-radius: 5px; font-size: 0.8rem;">السياق: ${vuln.context}</div>` : ''} |
| </div> |
| `; |
| }); |
| } |
| |
| if (results.recommendations && results.recommendations.length > 0) { |
| html += '<h4 style="color: var(--primary-color); margin-top: 1.5rem; margin-bottom: 0.5rem;">التوصيات:</h4>'; |
| results.recommendations.forEach(rec => { |
| html += ` |
| <div class="result-item" style="border-left-color: var(--success-color);"> |
| <div class="result-header"> |
| <span class="result-type">${rec.type}</span> |
| <span class="result-severity severity-${rec.priority.toLowerCase()}">${rec.priority}</span> |
| </div> |
| <div style="margin-top: 0.5rem;">${rec.action}</div> |
| ${rec.code ? `<pre style="margin-top: 0.5rem; padding: 0.5rem; background: rgba(0,0,0,0.5); border-radius: 5px; font-size: 0.8rem; overflow-x: auto;"><code>${rec.code}</code></pre>` : ''} |
| </div> |
| `; |
| }); |
| } |
| |
| html += `<div style="margin-top: 1rem; padding: 1rem; background: var(--glass-bg); border-radius: 10px;"> |
| <strong>درجة المخاطر:</strong> ${results.riskScore}/100<br> |
| <strong>مستوى الثقة:</strong> ${(results.confidence * 100).toFixed(1)}%<br> |
| <strong>طرق التحليل المستخدمة:</strong> ${results.methods.join(', ')}<br> |
| <strong>وقت التحليل:</strong> ${results.analysisTime.toFixed(2)}ms |
| </div>`; |
| |
| container.innerHTML = html; |
| } |
| |
| function getVulnTypeName(type) { |
| const names = { |
| 'xss': 'Cross-Site Scripting (XSS)', |
| 'sql_injection': 'SQL Injection', |
| 'command_injection': 'Command Injection', |
| 'path_traversal': 'Path Traversal', |
| 'csrf': 'Cross-Site Request Forgery', |
| 'deserialization': 'Deserialization', |
| 'code_injection': 'Code Injection', |
| 'file_inclusion': 'File Inclusion' |
| }; |
| return names[type] || type; |
| } |
| |
| function getSeverityName(severity) { |
| if (severity >= 8) return 'حرج'; |
| if (severity >= 6) return 'عالي'; |
| if (severity >= 4) return 'متوسط'; |
| return 'منخفض'; |
| } |
| |
| |
| function showNotification(message, type = 'info') { |
| const container = document.getElementById('notificationContainer'); |
| const notification = document.createElement('div'); |
| notification.className = `notification ${type}`; |
| notification.innerHTML = ` |
| <div class="notification-header">${type === 'success' ? 'نجح' : type === 'warning' ? 'تحذير' : type === 'error' ? 'خطأ' : 'معلومة'}</div> |
| <div class="notification-message">${message}</div> |
| `; |
| |
| container.appendChild(notification); |
| |
| |
| setTimeout(() => notification.classList.add('show'), 100); |
| |
| |
| setTimeout(() => { |
| notification.classList.remove('show'); |
| setTimeout(() => notification.remove(), 300); |
| }, 5000); |
| } |
| |
| |
| document.getElementById('systemModal').addEventListener('click', function(e) { |
| if (e.target === this) { |
| closeSystemModal(); |
| } |
| }); |
| |
| |
| document.addEventListener('keydown', function(e) { |
| if (e.key === 'Escape') { |
| closeSystemModal(); |
| } |
| }); |
| </script> |
| </body> |
| </html> |
