| <!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 - دليل الإعداد الشامل</title> |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"> |
| <style> |
| :root { |
| --bg-primary: #0f172a; |
| --bg-secondary: #1e293b; |
| --bg-tertiary: #334155; |
| --text-primary: #f1f5f9; |
| --text-secondary: #94a3b8; |
| --text-muted: #64748b; |
| --border-color: #334155; |
| --accent-blue: #3b82f6; |
| --accent-purple: #8b5cf6; |
| --accent-cyan: #06b6d4; |
| --success: #10b981; |
| --warning: #f59e0b; |
| --danger: #ef4444; |
| --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3); |
| --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4); |
| --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
| } |
| |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| |
| body { |
| font-family: 'Noto Sans Arabic', -apple-system, sans-serif; |
| background: var(--bg-primary); |
| color: var(--text-primary); |
| line-height: 1.8; |
| overflow-x: hidden; |
| } |
| |
| |
| .hero { |
| background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%); |
| padding: 80px 40px; |
| text-align: center; |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .hero::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background: |
| radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.1) 0%, transparent 50%), |
| radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.1) 0%, transparent 50%); |
| pointer-events: none; |
| } |
| |
| .hero-content { |
| position: relative; |
| z-index: 1; |
| max-width: 800px; |
| margin: 0 auto; |
| } |
| |
| .hero-badge { |
| display: inline-flex; |
| align-items: center; |
| gap: 8px; |
| background: rgba(59, 130, 246, 0.2); |
| border: 1px solid rgba(59, 130, 246, 0.3); |
| padding: 8px 20px; |
| border-radius: 50px; |
| font-size: 14px; |
| color: var(--accent-blue); |
| margin-bottom: 24px; |
| } |
| |
| .hero-title { |
| font-size: 48px; |
| font-weight: 700; |
| margin-bottom: 16px; |
| background: linear-gradient(135deg, var(--text-primary), var(--accent-blue)); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| } |
| |
| .hero-subtitle { |
| font-size: 18px; |
| color: var(--text-muted); |
| margin-bottom: 40px; |
| } |
| |
| .hero-actions { |
| display: flex; |
| gap: 16px; |
| justify-content: center; |
| flex-wrap: wrap; |
| } |
| |
| .btn { |
| display: inline-flex; |
| align-items: center; |
| gap: 8px; |
| padding: 14px 28px; |
| border-radius: 12px; |
| font-size: 15px; |
| font-weight: 600; |
| cursor: pointer; |
| transition: var(--transition); |
| border: none; |
| font-family: inherit; |
| text-decoration: none; |
| } |
| |
| .btn-primary { |
| background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple)); |
| color: white; |
| } |
| |
| .btn-primary:hover { |
| transform: translateY(-3px); |
| box-shadow: var(--shadow-lg); |
| } |
| |
| .btn-secondary { |
| background: var(--bg-tertiary); |
| color: var(--text-primary); |
| border: 1px solid var(--border-color); |
| } |
| |
| .btn-secondary:hover { |
| background: var(--bg-secondary); |
| border-color: var(--accent-blue); |
| } |
| |
| |
| .progress-section { |
| background: var(--bg-secondary); |
| padding: 60px 40px; |
| } |
| |
| .section-header { |
| text-align: center; |
| margin-bottom: 48px; |
| } |
| |
| .section-title { |
| font-size: 32px; |
| font-weight: 700; |
| margin-bottom: 12px; |
| } |
| |
| .section-subtitle { |
| font-size: 16px; |
| color: var(--text-muted); |
| } |
| |
| .steps-container { |
| max-width: 900px; |
| margin: 0 auto; |
| } |
| |
| .step { |
| display: flex; |
| gap: 24px; |
| margin-bottom: 32px; |
| padding: 24px; |
| background: var(--bg-primary); |
| border-radius: 16px; |
| border: 1px solid var(--border-color); |
| transition: var(--transition); |
| opacity: 0.5; |
| } |
| |
| .step.active { |
| opacity: 1; |
| border-color: var(--accent-blue); |
| box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); |
| } |
| |
| .step.completed { |
| opacity: 1; |
| border-color: var(--success); |
| } |
| |
| .step-number { |
| width: 48px; |
| height: 48px; |
| border-radius: 50%; |
| background: var(--bg-tertiary); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 18px; |
| font-weight: 700; |
| flex-shrink: 0; |
| transition: var(--transition); |
| } |
| |
| .step.active .step-number { |
| background: var(--accent-blue); |
| color: white; |
| } |
| |
| .step.completed .step-number { |
| background: var(--success); |
| color: white; |
| } |
| |
| .step-content { |
| flex: 1; |
| } |
| |
| .step-title { |
| font-size: 20px; |
| font-weight: 600; |
| margin-bottom: 8px; |
| } |
| |
| .step-description { |
| font-size: 14px; |
| color: var(--text-muted); |
| margin-bottom: 16px; |
| } |
| |
| .step-code { |
| background: var(--bg-secondary); |
| border-radius: 8px; |
| padding: 16px; |
| font-family: 'JetBrains Mono', monospace; |
| font-size: 13px; |
| overflow-x: auto; |
| border: 1px solid var(--border-color); |
| } |
| |
| .step-files { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 8px; |
| margin-top: 12px; |
| } |
| |
| .file-tag { |
| display: inline-flex; |
| align-items: center; |
| gap: 6px; |
| padding: 6px 12px; |
| background: var(--bg-tertiary); |
| border-radius: 6px; |
| font-size: 12px; |
| font-family: 'JetBrains Mono', monospace; |
| } |
| |
| .step-checklist { |
| list-style: none; |
| margin-top: 12px; |
| } |
| |
| .step-checklist li { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| padding: 8px 0; |
| font-size: 14px; |
| } |
| |
| .check-icon { |
| width: 20px; |
| height: 20px; |
| border-radius: 50%; |
| border: 2px solid var(--border-color); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 12px; |
| } |
| |
| .step.completed .check-icon { |
| background: var(--success); |
| border-color: var(--success); |
| color: white; |
| } |
| |
| |
| .structure-section { |
| padding: 60px 40px; |
| } |
| |
| .tree-container { |
| max-width: 700px; |
| margin: 0 auto; |
| background: var(--bg-secondary); |
| border-radius: 16px; |
| padding: 24px; |
| border: 1px solid var(--border-color); |
| } |
| |
| .tree { |
| font-family: 'JetBrains Mono', monospace; |
| font-size: 14px; |
| line-height: 2; |
| } |
| |
| .tree-line { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| padding-right: 20px; |
| } |
| |
| .tree-folder { |
| color: var(--warning); |
| } |
| |
| .tree-file { |
| color: var(--accent-cyan); |
| } |
| |
| .tree-badge { |
| background: var(--accent-purple); |
| color: white; |
| padding: 2px 8px; |
| border-radius: 4px; |
| font-size: 10px; |
| margin-right: auto; |
| } |
| |
| |
| .features-section { |
| background: var(--bg-secondary); |
| padding: 60px 40px; |
| } |
| |
| .features-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); |
| gap: 24px; |
| max-width: 1200px; |
| margin: 0 auto; |
| } |
| |
| .feature-card { |
| background: var(--bg-primary); |
| border-radius: 16px; |
| padding: 32px; |
| border: 1px solid var(--border-color); |
| transition: var(--transition); |
| } |
| |
| .feature-card:hover { |
| transform: translateY(-4px); |
| border-color: var(--accent-blue); |
| } |
| |
| .feature-icon { |
| width: 56px; |
| height: 56px; |
| border-radius: 14px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 28px; |
| margin-bottom: 20px; |
| } |
| |
| .feature-icon.security { background: rgba(239, 68, 68, 0.2); } |
| .feature-icon.auto { background: rgba(59, 130, 246, 0.2); } |
| .feature-icon.dashboard { background: rgba(16, 185, 129, 0.2); } |
| .feature-icon.multi { background: rgba(139, 92, 246, 0.2); } |
| |
| .feature-title { |
| font-size: 20px; |
| font-weight: 600; |
| margin-bottom: 12px; |
| } |
| |
| .feature-description { |
| font-size: 14px; |
| color: var(--text-muted); |
| } |
| |
| |
| .faq-section { |
| padding: 60px 40px; |
| } |
| |
| .faq-container { |
| max-width: 800px; |
| margin: 0 auto; |
| } |
| |
| .faq-item { |
| background: var(--bg-secondary); |
| border-radius: 12px; |
| margin-bottom: 16px; |
| overflow: hidden; |
| border: 1px solid var(--border-color); |
| } |
| |
| .faq-question { |
| padding: 20px 24px; |
| font-size: 16px; |
| font-weight: 600; |
| cursor: pointer; |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| transition: var(--transition); |
| } |
| |
| .faq-question:hover { |
| background: var(--bg-tertiary); |
| } |
| |
| .faq-answer { |
| padding: 0 24px 20px; |
| font-size: 14px; |
| color: var(--text-muted); |
| display: none; |
| } |
| |
| .faq-item.open .faq-answer { |
| display: block; |
| } |
| |
| .faq-toggle { |
| transition: var(--transition); |
| } |
| |
| .faq-item.open .faq-toggle { |
| transform: rotate(180deg); |
| } |
| |
| |
| .footer { |
| background: var(--bg-secondary); |
| padding: 40px; |
| text-align: center; |
| border-top: 1px solid var(--border-color); |
| } |
| |
| .footer-text { |
| font-size: 14px; |
| color: var(--text-muted); |
| } |
| |
| |
| @media (max-width: 768px) { |
| .hero { |
| padding: 40px 20px; |
| } |
| |
| .hero-title { |
| font-size: 32px; |
| } |
| |
| .step { |
| flex-direction: column; |
| } |
| |
| .hero-actions { |
| flex-direction: column; |
| } |
| |
| .btn { |
| width: 100%; |
| justify-content: center; |
| } |
| } |
| |
| |
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(20px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| |
| .step { |
| animation: fadeIn 0.5s ease forwards; |
| } |
| |
| .step:nth-child(1) { animation-delay: 0.1s; } |
| .step:nth-child(2) { animation-delay: 0.2s; } |
| .step:nth-child(3) { animation-delay: 0.3s; } |
| .step:nth-child(4) { animation-delay: 0.4s; } |
| .step:nth-child(5) { animation-delay: 0.5s; } |
| </style> |
| </head> |
| <body> |
| |
| <section class="hero"> |
| <div class="hero-content"> |
| <div class="hero-badge"> |
| <span>🚀</span> |
| <span>دليل الإعداد الشامل</span> |
| </div> |
| <h1 class="hero-title">ابدأ مع Auto-Guardian</h1> |
| <p class="hero-subtitle"> |
| نظام الفحص الأمني التلقائي للكود. اتبع الخطوات أدناه لتفعيل النظام بالكامل والحصول على لوحة تحكم تفاعلية تعرض حالة أمان مستودعك. |
| </p> |
| <div class="hero-actions"> |
| <button class="btn btn-primary" onclick="scrollToSection('steps')"> |
| <span>📋</span> |
| <span>بدء الإعداد</span> |
| </button> |
| <a href="index.html" class="btn btn-secondary"> |
| <span>🎨</span> |
| <span>معاينة لوحة التحكم</span> |
| </a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="progress-section" id="steps"> |
| <div class="section-header"> |
| <h2 class="section-title">خطوات الإعداد</h2> |
| <p class="section-subtitle">اتبع هذه الخطوات بالترتيب لتفعيل النظام على مستودعك</p> |
| </div> |
|
|
| <div class="steps-container"> |
| |
| <div class="step active" id="step1"> |
| <div class="step-number">1</div> |
| <div class="step-content"> |
| <h3 class="step-title">إنشاء المستودع أو نسخ القالب</h3> |
| <p class="step-description"> |
| أولاً، تحتاج إلى إنشاء مستودع جديد. يمكنك استخدام هذا المشروع كقالب لإنشاء مستودع جديد، أو نسخ الملفات يدوياً إلى مستودع موجود. |
| </p> |
| <div class="step-checklist"> |
| <li> |
| <span class="check-icon">✓</span> |
| <span>اذهب إلى <strong>GitHub</strong وسجل الدخول</span> |
| </li> |
| <li> |
| <span class="check-icon">✓</span> |
| <span>زر <strong>Use this template</strong> لإنشاء مستودع جديد</span> |
| </li> |
| <li> |
| <span class="check-icon">✓</span> |
| <span>أو انسخ الملفات يدوياً إذا كان لديك مستودع موجود</span> |
| </li> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="step" id="step2"> |
| <div class="step-number">2</div> |
| <div class="step-content"> |
| <h3 class="step-title">رفع الملفات</h3> |
| <p class="step-description"> |
| بعد إنشاء المستودع، تحتاج إلى رفع جميع الملفات. الهيكل التالي يجب أن يكون موجوداً في مستودعك: |
| </p> |
| <div class="step-files"> |
| <span class="file-tag">📁 .github/workflows/scan-and-deploy.yml</span> |
| <span class="file-tag">📁 scripts/aggregate_results.py</span> |
| <span class="file-tag">📁 scripts/generate_report.py</span> |
| <span class="file-tag">📁 dashboard/public/data/latest.json</span> |
| <span class="file-tag">📁 dashboard/index.html</span> |
| <span class="file-tag">📄 README.md</span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="step" id="step3"> |
| <div class="step-number">3</div> |
| <div class="step-content"> |
| <h3 class="step-title">تفعيل GitHub Pages</h3> |
| <p class="step-description"> |
| الآن تحتاج إلى تفعيل GitHub Pages للسماح بنشر لوحة التحكم. اتبع الخطوات التالية: |
| </p> |
| <div class="step-checklist"> |
| <li> |
| <span class="check-icon">✓</span> |
| <span>اذهب إلى <strong>Settings</strong> في مستودعك</span> |
| </li> |
| <li> |
| <span class="check-icon">✓</span> |
| <span>انقر على <strong>Pages</strong> في القائمة الجانبية</span> |
| </li> |
| <li> |
| <span class="check-icon">✓</span> |
| <span>في قسم <strong>Build and deployment</strong>:</span> |
| </li> |
| <li> |
| <span class="check-icon">✓</span> |
| <span><strong>Source:</strong> اختر <mark>GitHub Actions</mark></span> |
| </li> |
| </div> |
| <div class="step-code"> |
| ┌─────────────────────────────────────────────┐ |
| │ Build and deployment │ |
| │ │ |
| │ Source › GitHub Actions │ |
| └─────────────────────────────────────────────┘ |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="step" id="step4"> |
| <div class="step-number">4</div> |
| <div class="step-content"> |
| <h3 class="step-title">تفعيل GitHub Actions</h3> |
| <p class="step-description"> |
| الآن دعنا نتحقق من أن GitHub Actions يعمل. سير العمل سيبدأ تلقائياً عند دفع أي تغيير. |
| </p> |
| <div class="step-checklist"> |
| <li> |
| <span class="check-icon">✓</span> |
| <span>اذهب إلى تبويب <strong>Actions</strong> في المستودع</span> |
| </li> |
| <li> |
| <span class="check-icon">✓</span> |
| <span>ابحث عن <strong>Auto-Guardian Scan & Deploy</strong></span> |
| </li> |
| <li> |
| <span class="check-icon">✓</span> |
| <span>انقر على <strong>Enable workflow</strong> إذا كان معطلاً</span> |
| </li> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="step" id="step5"> |
| <div class="step-number">5</div> |
| <div class="step-content"> |
| <h3 class="step-title">اختبار النظام</h3> |
| <p class="step-description"> |
| للاختبار، قم بدفع أي تغيير بسيط إلى المستودع. سير العمل سيبدأ تلقائياً وسيتم نشر لوحة التحكم بعد اكتمال الفحص. |
| </p> |
| <div class="step-checklist"> |
| <li> |
| <span class="check-icon">✓</span> |
| <span>أنشئ ملفاً جديداً أو عدل ملفاً موجوداً</span> |
| </li> |
| <li> |
| <span class="check-icon">✓</span> |
| <span>ادفع التغييرات: <code>git add . && git commit -m "test" && git push</code></span> |
| </li> |
| <li> |
| <span class="check-icon">✓</span> |
| <span>تحقق من تبويب <strong>Actions</strong> لرؤية تقدم الفحص</span> |
| </li> |
| <li> |
| <span class="check-icon">✓</span> |
| <span>بعد اكتمال الفحص، اذهب إلى <strong>Settings > Pages</strong> للحصول على الرابط</span> |
| </li> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="structure-section"> |
| <div class="section-header"> |
| <h2 class="section-title">هيكل الملفات</h2> |
| <p class="section-subtitle">تأكد من أن جميع الملفات موجودة في الأماكن الصحيحة</p> |
| </div> |
|
|
| <div class="tree-container"> |
| <pre class="tree"> |
| <span class="tree-line"><span class="tree-folder">📁</span> auto-guardian/ |
| <span class="tree-line"> 📁 <span class="tree-folder">.github/</span> |
| <span class="tree-line"> 📁 workflows/ |
| <span class="tree-badge">NEW</span> 📄 scan-and-deploy.yml</span> |
| <span class="tree-line"> 📁 <span class="tree-folder">dashboard/</span> |
| <span class="tree-line"> 📄 index.html</span> |
| <span class="tree-line"> 📁 <span class="tree-folder">public/</span> |
| <span class="tree-line"> 📁 <span class="tree-folder">data/</span> |
| <span class="tree-line"> 📄 latest.json</span> |
| <span class="tree-line"> 📁 <span class="tree-folder">scripts/</span> |
| <span class="tree-badge">NEW</span> 📄 aggregate_results.py |
| <span class="tree-line"> 📄 generate_report.py</span> |
| <span class="tree-line"> 📄 README.md</span></pre> |
| </div> |
| </section> |
|
|
| |
| <section class="features-section"> |
| <div class="section-header"> |
| <h2 class="section-title">مميزات النظام</h2> |
| <p class="section-subtitle">كل ما يقدمه لك نظام Auto-Guardian</p> |
| </div> |
|
|
| <div class="features-grid"> |
| <div class="feature-card"> |
| <div class="feature-icon security">🛡️</div> |
| <h3 class="feature-title">فحص أمني شامل</h3> |
| <p class="feature-description"> |
| يكتشف الثغرات الأمنية والأخطاء البرمجية باستخدام أدوات متخصصة لكل لغة برمجية. |
| </p> |
| </div> |
|
|
| <div class="feature-card"> |
| <div class="feature-icon auto">⚡</div> |
| <h3 class="feature-title">فحص تلقائي</h3> |
| <p class="feature-description"> |
| يبدأ الفحص تلقائياً عند كل دفع للكود، ولا تحتاج لأي تدخل يدوي. |
| </p> |
| </div> |
|
|
| <div class="feature-card"> |
| <div class="feature-icon dashboard">📊</div> |
| <h3 class="feature-title">لوحة تحكم تفاعلية</h3> |
| <p class="feature-description"> |
| واجهة جميلة وسهلة الاستخدام تعرض حالة الأمان بشكل واضح ومباشر. |
| </p> |
| </div> |
|
|
| <div class="feature-card"> |
| <div class="feature-icon multi">🌐</div> |
| <h3 class="feature-title">دعم لغات متعددة</h3> |
| <p class="feature-description"> |
| يدعم Python وJavaScript وTypeScript وGo وRust وغيرها من اللغات. |
| </p> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="faq-section"> |
| <div class="section-header"> |
| <h2 class="section-title">الأسئلة الشائعة</h2> |
| <p class="section-subtitle">إجابات على الأسئلة المتكررة</p> |
| </div> |
|
|
| <div class="faq-container"> |
| <div class="faq-item" onclick="toggleFaq(this)"> |
| <div class="faq-question"> |
| <span>كم يستغرق الفحص؟</span> |
| <span class="faq-toggle">▼</span> |
| </div> |
| <div class="faq-answer"> |
| يعتمد وقت الفحص على حجم المشروع. للمشاريع الصغيرة (أقل من 100 ملف) يستغرق عادة من 2 إلى 5 دقائق. للمشاريع الكبيرة قد يستغرق حتى 15 دقيقة. |
| </div> |
| </div> |
|
|
| <div class="faq-item" onclick="toggleFaq(this)"> |
| <div class="faq-question"> |
| <span>هل يمكنني استخدام النظام في مستودع خاص؟</span> |
| <span class="faq-toggle">▼</span> |
| </div> |
| <div class="faq-answer"> |
| نعم، يمكنك استخدام النظام في المستودعات الخاصة. لكن إذا كنت تريد GitHub Pages عام، ستحتاج إلى خطة GitHub مدفوعة. |
| </div> |
| </div> |
|
|
| <div class="faq-item" onclick="toggleFaq(this)"> |
| <div class="faq-question"> |
| <span>ماذا يعني درجة الأمان؟</span> |
| <span class="faq-toggle">▼</span> |
| </div> |
| <div class="faq-answer"> |
| درجة الأمان هي رقم من 0 إلى 100. الدرجة A (90-100) تعني مستوى ممتاز، بينما F (أقل من 60) تعني وجود مشاكل حرجة تحتاج اهتماماً فورياً. |
| </div> |
| </div> |
|
|
| <div class="faq-item" onclick="toggleFaq(this)"> |
| <div class="faq-question"> |
| <span>هل يمكنني تخصيص أدوات الفحص؟</span> |
| <span class="faq-toggle">▼</span> |
| </div> |
| <div class="faq-answer"> |
| نعم، يمكنك تعديل ملف سير العمل لإضافة أو إزالة أدوات الفحص، أو تخصيص إعدادات كل أداة من خلال ملفات الإعدادات الخاصة بها. |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="footer"> |
| <p class="footer-text"> |
| صنع بـ ❤️ بواسطة Auto-Guardian Team | |
| <a href="#" style="color: var(--accent-blue);">التوثيق</a> | |
| <a href="#" style="color: var(--accent-blue);">الإبلاغ عن مشكلة</a> |
| </p> |
| </footer> |
|
|
| <script> |
| |
| function toggleFaq(element) { |
| element.classList.toggle('open'); |
| } |
| |
| |
| function scrollToSection(sectionId) { |
| document.getElementById(sectionId).scrollIntoView({ |
| behavior: 'smooth' |
| }); |
| } |
| |
| |
| const observer = new IntersectionObserver((entries) => { |
| entries.forEach(entry => { |
| if (entry.isIntersecting) { |
| entry.target.style.opacity = '1'; |
| } |
| }); |
| }, { threshold: 0.1 }); |
| |
| document.querySelectorAll('.step').forEach(step => { |
| observer.observe(step); |
| }); |
| |
| |
| console.log('%c مرحباً بك في Auto-Guardian! 🎉', 'font-size: 20px; font-weight: bold; color: #3b82f6;'); |
| console.log('%c نظام الفحص الأمني التلقائي للكود', 'font-size: 14px; color: #64748b;'); |
| </script> |
| </body> |
| </html> |
|
|
