عطني كود html يكون فيه صفحة تعرض الانظمة و الخدمات و خلي امثلة من عندك
- أنت
عطني كود html يكون فيه صفحة تعرض الانظمة و الخدمات و خلي امثلة من عندك
- النموذج
إليك كود HTML كامل مع تنسيق CSS مدمج، يعرض صفحة أنيقة تعرض الأنظمة والخدمات مع أمثلة واقعية. الكود متجاوب (Responsive) ويعمل مباشرة في المتصفح.
<!DOCTYPE html> <html lang="ar" dir="rtl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>منصة الأنظمة والخدمات</title> <style> :root { --primary-color: #2563eb; --primary-hover: #1d4ed8; --bg-color: #f3f4f6; --card-bg: #ffffff; --text-main: #1f2937; --text-muted: #6b7280; --border-color: #e5e7eb; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: var(--bg-color); color: var(--text-main); line-height: 1.6; } .container { max-width: 1200px; margin: 0 auto; padding: 20px; } /* Header Styles */ header { background: linear-gradient(135deg, var(--primary-color), #1e40af); color: white; padding: 40px 0; text-align: center; margin-bottom: 40px; } header h1 { font-size: 2.5rem; margin-bottom: 10px; } header p { font-size: 1.1rem; opacity: 0.9; max-width: 600px; margin: 0 auto; } /* Section Titles */ .section-title { font-size: 1.8rem; margin-bottom: 25px; padding-bottom: 10px; border-bottom: 3px solid var(--primary-color); display: inline-block; } .section { margin-bottom: 50px; } /* Grid Layout */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; } /* Card Styles */ .card { background-color: var(--card-bg); border-radius: 12px; padding: 25px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; border: 1px solid var(--border-color); display: flex; flex-direction: column; } .card:hover { transform: translateY(-5px); box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); border-color: var(--primary-color); } .card-icon { font-size: 2.5rem; margin-bottom: 15px; color: var(--primary-color); } .card h3 { font-size: 1.3rem; margin-bottom: 10px; color: var(--text-main); } .card p { color: var(--text-muted); font-size: 0.95rem; flex-grow: 1; } .card-footer { margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--border-color); } .status-badge { display: inline-block; padding: 4px 10px; border-radius: 20px; font-size: 0.8rem; font-weight: bold; } .status-active { background-color: #dcfce7; color: #166534; } .status-maintenance { background-color: #fef08a; color: #854d0e; } .status-new { background-color: #dbeafe; color: #1e40af; } /* Footer */ footer { text-align: center; padding: 20px; color: var(--text-muted); font-size: 0.9rem; border-top: 1px solid var(--border-color); margin-top: 40px; } /* Responsive */ @media (max-width: 600px) { header h1 { font-size: 1.8rem; } .grid { grid-template-columns: 1fr; } } </style> </head> <body> <header> <div class="container"> <h1>منصة الأنظمة والخدمات الرقمية</h1> <p>بوابة موحدة للوصول إلى جميع الأنظمة الداخلية والخدمات التقنية المقدمة للموظفين والمستخدمين.</p> </div> </header> <main class="container"> <!-- Section: Systems --> <section class="section"> <h2 class="section-title">الأنظمة الرئيسية</h2> <div class="grid"> <!-- System 1 --> <div class="card"> <div class="card-icon">💼</div> <h3>نظام إدارة الموارد البشرية (HRM)</h3> <p>إدارة شؤون الموظفين، الرواتب، الإجازات، والقرارات الإدارية. يتيح للموظفين عرض بياناتهم الشخصية وطباعة كشوف الرواتب.</p> <div class="card-footer"> <span class="status-badge status-active">نشط</span> </div> </div> <!-- System 2 --> <div class="card"> <div class="card-icon">📊</div> <h3>نظام التخطيط المالي (ERP)</h3> <p>نظام متكامل لإدارة الميزانية، المشتريات، والحسابات العامة. يوفر تقارير لحظية عن الوضع المالي للمؤسسة.</p> <div class="card-footer"> <span class="status-badge status-active">نشط</span> </div> </div> <!-- System 3 --> <div class="card"> <div class="card-icon">📚</div> <h3>منصة التعلم الإلكتروني (LMS)</h3> <p>منصة لاستضافة الدورات التدريبية، اختبارات الكفاءة، وشهادات الإنجاز. تدعم التفاعل المباشر مع المدربين.</p> <div class="card-footer"> <span class="status-badge status-maintenance">قيد الصيانة</span> </div> </div> <!-- System 4 --> <div class="card"> <div class="card-icon">📄</div> <h3>نظام إدارة المستندات (DMS)</h3> <p>تخزين آمن للوثائق الرسمية، أرشفة إلكترونية، وصلاحيات وصول مخصصة لكل قسم. يدعم البحث المتقدم في الملفات.</p> <div class="card-footer"> <span class="status-badge status-active">نشط</span> </div> </div> </div> </section> <!-- Section: Services --> <section class="section"> <h2 class="section-title">الخدمات التقنية</h2> <div class="grid"> <!-- Service 1 --> <div class="card"> <div class="card-icon">🔐</div> <h3>خدمة المصادقة الموحدة (SSO)</h3> <p>تسجيل دخول واحد لجميع الأنظمة. يضمن أماناً أعلى ويوفر وقت الموظف من تكرار إدخال كلمة المرور.</p> <div class="card-footer"> <span class="status-badge status-new">جديد</span> </div> </div> <!-- Service 2 --> <div class="card"> <div class="card-icon">📧</div> <h3>خدمة البريد الإلكتروني المؤسسي</h3> <p>نظام بريد داخلي وخارجي آمن، مع صندوق وارد موحّد، وإدارة التقويمات والمواعيد عبر Outlook أو Gmail.</p> <div class="card-footer"> <span class="status-badge status-active">نشط</span> </div> </div> <!-- Service 3 --> <div class="card"> <div class="card-icon">🛠️</div> <h3>مركز دعم تقنية المعلومات</h3> <p>تقديم طلبات صيانة الأجهزة، استكشاف الأعطال، والدعم الفني عن بعد. تتبع حالة الطلبات لحظياً.</p> <div class="card-footer"> <span class="status-badge status-active">نشط</span> </div> </div> <!-- Service 4 --> <div class="card"> <div class="card-icon">☁️</div> <h3>خدمة التخزين السحابي</h3> <p>مساحة تخزين مشتركة بين الأقسام لتبادل الملفات الكبيرة، مع نسخ احتياطي تلقائي يومي.</p> <div class="card-footer"> <span class="status-badge status-active">نشط</span> </div> </div> </div> </section> </main> <footer> <p>© 2023 شركة التقنية المتقدمة - جميع الحقوق محفوظة</p> </footer> </body> </html>ملاحظات حول الكود:
- التصميم (CSS):
- استخدمت
CSS Gridلتوزيع البطاقات بشكل تلقوي ومنظم على الشاشات الكبيرة والصغيرة. - ألوان احترافية (أزرق رئيسي) تناسب بيئة الأعمال.
- تأثيرات حركية (
Hover) عند مرور الماوس على البطاقات لجعل الصفحة تفاعلية.
- استخدمت
- المحتوى (HTML):
- قسمان رئيسيان: "الأنظمة الرئيسية" و "الخدمات التقنية".
- كل بطاقة تحتوي على: أيقونة (إيموجي)، عنوان، وصف، وحالة النظام (نشط، قيد الصيانة، جديد).
- التجاوب (Responsive):
- الصفحة تتكيف مع حجم الشاشة (هاتف، تابلت، حاسوب) بفضل
media queriesوgrid.
- الصفحة تتكيف مع حجم الشاشة (هاتف، تابلت، حاسوب) بفضل
- كيفية الاستخدام:
- انسخ الكود واحفظه في ملف باسم
index.html. - افتح الملف باستخدام أي متصفح (Chrome, Firefox, Edge).
- انسخ الكود واحفظه في ملف باسم
يمكنك بسهولة تعديل النصوص والأيقونات لتطابق الأنظمة الموجودة في مؤسستك.
- التصميم (CSS):
- أنت
<!DOCTYPE html> <html lang="ar" dir="rtl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>منصة الأنظمة والخدمات</title> <style> :root { --primary-color: #2563eb; --primary-hover: #1d4ed8; --bg-color: #f3f4f6; --card-bg: #ffffff; --text-main: #1f2937; --text-muted: #6b7280; --border-color: #e5e7eb; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: var(--bg-color); color: var(--text-main); line-height: 1.6; } .container { max-width: 1200px; margin: 0 auto; padding: 20px; } /* Header Styles */ header { background: linear-gradient(135deg, var(--primary-color), #1e40af); color: white; padding: 40px 0; text-align: center; margin-bottom: 40px; } header h1 { font-size: 2.5rem; margin-bottom: 10px; } header p { font-size: 1.1rem; opacity: 0.9; max-width: 600px; margin: 0 auto; } /* Section Titles */ .section-title { font-size: 1.8rem; margin-bottom: 25px; padding-bottom: 10px; border-bottom: 3px solid var(--primary-color); display: inline-block; } .section { margin-bottom: 50px; } /* Grid Layout */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; } /* Card Styles */ .card { background-color: var(--card-bg); border-radius: 12px; padding: 25px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; border: 1px solid var(--border-color); display: flex; flex-direction: column; } .card:hover { transform: translateY(-5px); box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); border-color: var(--primary-color); } .card-icon { font-size: 2.5rem; margin-bottom: 15px; color: var(--primary-color); } .card h3 { font-size: 1.3rem; margin-bottom: 10px; color: var(--text-main); } .card p { color: var(--text-muted); font-size: 0.95rem; flex-grow: 1; } .card-footer { margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--border-color); } .status-badge { display: inline-block; padding: 4px 10px; border-radius: 20px; font-size: 0.8rem; font-weight: bold; } .status-active { background-color: #dcfce7; color: #166534; } .status-maintenance { background-color: #fef08a; color: #854d0e; } .status-new { background-color: #dbeafe; color: #1e40af; } /* Footer */ footer { text-align: center; padding: 20px; color: var(--text-muted); font-size: 0.9rem; border-top: 1px solid var(--border-color); margin-top: 40px; } /* Responsive */ @media (max-width: 600px) { header h1 { font-size: 1.8rem; } .grid { grid-template-columns: 1fr; } } </style> </head> <body> <header> <div class="container"> <h1>منصة الأنظمة والخدمات الرقمية</h1> <p>بوابة موحدة للوصول إلى جميع الأنظمة الداخلية والخدمات التقنية المقدمة للموظفين والمستخدمين.</p> </div> <!-- Section: Systems --> <section class="section"> <h2 class="section-title">الأنظمة الرئيسية</h2> <div class="grid"> <!-- System 1 --> <div class="card"> <div class="card-icon">💼</div> <h3>نظام إدارة الموارد البشرية (HRM)</h3> <p>إدارة شؤون الموظفين، الرواتب، الإجازات، والقرارات الإدارية. يتيح للموظفين عرض بياناتهم الشخصية وطباعة كشوف الرواتب.</p> <div class="card-footer"> <span class="status-badge status-active">نشط</span> </div> </div> <!-- System 2 --> <div class="card"> <div class="card-icon">📊</div> <h3>نظام التخطيط المالي (ERP)</h3> <p>نظام متكامل لإدارة الميزانية، المشتريات، والحسابات العامة. يوفر تقارير لحظية عن الوضع المالي للمؤسسة.</p> <div class="card-footer"> <span class="status-badge status-active">نشط</span> </div> </div> <!-- System 3 --> <div class="card"> <div class="card-icon">📚</div> <h3>منصة التعلم الإلكتروني (LMS)</h3> <p>منصة لاستضافة الدورات التدريبية، اختبارات الكفاءة، وشهادات الإنجاز. تدعم التفاعل المباشر مع المدربين.</p> <div class="card-footer"> <span class="status-badge status-maintenance">قيد الصيانة</span> </div> </div> <!-- System 4 --> <div class="card"> <div class="card-icon">📄</div> <h3>نظام إدارة المستندات (DMS)</h3> <p>تخزين آمن للوثائق الرسمية، أرشفة إلكترونية، وصلاحيات وصول مخصصة لكل قسم. يدعم البحث المتقدم في الملفات.</p> <div class="card-footer"> <span class="status-badge status-active">نشط</span> </div> </div> </div> </section> <!-- Section: Services --> <section class="section"> <h2 class="section-title">الخدمات التقنية</h2> <div class="grid"> <!-- Service 1 --> <div class="card"> <div class="card-icon">🔐</div> <h3>خدمة المصادقة الموحدة (SSO)</h3> <p>تسجيل دخول واحد لجميع الأنظمة. يضمن أماناً أعلى ويوفر وقت الموظف من تكرار إدخال كلمة المرور.</p> <div class="card-footer"> <span class="status-badge status-new">جديد</span> </div> </div> <!-- Service 2 --> <div class="card"> <div class="card-icon">📧</div> <h3>خدمة البريد الإلكتروني المؤسسي</h3> <p>نظام بريد داخلي وخارجي آمن، مع صندوق وارد موحّد، وإدارة التقويمات والمواعيد عبر Outlook أو Gmail.</p> <div class="card-footer"> <span class="status-badge status-active">نشط</span> </div> </div> <!-- Service 3 --> <div class="card"> <div class="card-icon">🛠️</div> <h3>مركز دعم تقنية المعلومات</h3> <p>تقديم طلبات صيانة الأجهزة، استكشاف الأعطال، والدعم الفني عن بعد. تتبع حالة الطلبات لحظياً.</p> <div class="card-footer"> <span class="status-badge status-active">نشط</span> </div> </div> <!-- Service 4 --> <div class="card"> <div class="card-icon">☁️</div> <h3>خدمة التخزين السحابي</h3> <p>مساحة تخزين مشتركة بين الأقسام لتبادل الملفات الكبيرة، مع نسخ احتياطي تلقائي يومي.</p> <div class="card-footer"> <span class="status-badge status-active">نشط</span> </div> </div> </div> </section> </main> <footer> <p>© 2023 شركة التقنية المتقدمة - جميع الحقوق محفوظة</p> </footer> </body> </html> الكود بالاعلى فيه خطا ابيك تحله
- النموذج
أهلاً بك. المشكلة في الكود الذي أرسلته هي أخطاء في هيكلة الوسوم (HTML Tags)، مما يجعل الصفحة غير معيارية وقد تسبب مشاكل في العرض.
الخطأ الرئيسي:
- وسم
<header>تم إغلاقه (</header>) قبل بداية قسم<section class="section">. - قسم
<section>و<main>موجودان داخل وسم<header>المفتوح (أو بعد إغلاقه بشكل خاطئ)، مما يكسر بنية الصفحة. - لا يوجد وسم
<main>مفتوح قبل الأقسام.
الحل: يجب أن تكون البنية كالتالي:
<header>يحتوي فقط على العنوان والوصف، ثم يُغلق.<main>يحتوي على الأقسام (<section>).<footer>يأتي بعد إغلاق<main>.
إليك الكود المصحح بالكامل (مع إصلاح البنية وإضافة بعض التحسينات البصرية):
<!DOCTYPE html> <html lang="ar" dir="rtl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>منصة الأنظمة والخدمات</title> <style> :root { --primary-color: #2563eb; --primary-hover: #1d4ed8; --bg-color: #f3f4f6; --card-bg: #ffffff; --text-main: #1f2937; --text-muted: #6b7280; --border-color: #e5e7eb; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: var(--bg-color); color: var(--text-main); line-height: 1.6; } .container { max-width: 1200px; margin: 0 auto; padding: 20px; } /* Header Styles */ header { background: linear-gradient(135deg, var(--primary-color), #1e40af); color: white; padding: 40px 0; text-align: center; margin-bottom: 40px; } header h1 { font-size: 2.5rem; margin-bottom: 10px; } header p { font-size: 1.1rem; opacity: 0.9; max-width: 600px; margin: 0 auto; } /* Section Titles */ .section-title { font-size: 1.8rem; margin-bottom: 25px; padding-bottom: 10px; border-bottom: 3px solid var(--primary-color); display: inline-block; } .section { margin-bottom: 50px; } /* Grid Layout */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; } /* Card Styles */ .card { background-color: var(--card-bg); border-radius: 12px; padding: 25px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; border: 1px solid var(--border-color); display: flex; flex-direction: column; } .card:hover { transform: translateY(-5px); box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); border-color: var(--primary-color); } .card-icon { font-size: 2.5rem; margin-bottom: 15px; color: var(--primary-color); } .card h3 { font-size: 1.3rem; margin-bottom: 10px; color: var(--text-main); } .card p { color: var(--text-muted); font-size: 0.95rem; flex-grow: 1; } .card-footer { margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--border-color); } .status-badge { display: inline-block; padding: 4px 10px; border-radius: 20px; font-size: 0.8rem; font-weight: bold; } .status-active { background-color: #dcfce7; color: #166534; } .status-maintenance { background-color: #fef08a; color: #854d0e; } .status-new { background-color: #dbeafe; color: #1e40af; } /* Footer */ footer { text-align: center; padding: 20px; color: var(--text-muted); font-size: 0.9rem; border-top: 1px solid var(--border-color); margin-top: 40px; } /* Responsive */ @media (max-width: 600px) { header h1 { font-size: 1.8rem; } .grid { grid-template-columns: 1fr; } } </style> </head> <body> <!-- 1. Header: يحتوي فقط على العنوان --> <header> <div class="container"> <h1>منصة الأنظمة والخدمات الرقمية</h1> <p>بوابة موحدة للوصول إلى جميع الأنظمة الداخلية والخدمات التقنية المقدمة للموظفين والمستخدمين.</p> </div> </header> <!-- إغلاق الـ Header هنا --> <!-- 2. Main: يحتوي على الأقسام --> <main class="container"> <!-- Section: Systems --> <section class="section"> <h2 class="section-title">الأنظمة الرئيسية</h2> <div class="grid"> <!-- System 1 --> <div class="card"> <div class="card-icon">💼</div> <h3>نظام إدارة الموارد البشرية (HRM)</h3> <p>إدارة شؤون الموظفين، الرواتب، الإجازات، والقرارات الإدارية. يتيح للموظفين عرض بياناتهم الشخصية وطباعة كشوف الرواتب.</p> <div class="card-footer"> <span class="status-badge status-active">نشط</span> </div> </div> <!-- System 2 --> <div class="card"> <div class="card-icon">📊</div> <h3>نظام التخطيط المالي (ERP)</h3> <p>نظام متكامل لإدارة الميزانية، المشتريات، والحسابات العامة. يوفر تقارير لحظية عن الوضع المالي للمؤسسة.</p> <div class="card-footer"> <span class="status-badge status-active">نشط</span> </div> </div> <!-- System 3 --> <div class="card"> <div class="card-icon">📚</div> <h3>منصة التعلم الإلكتروني (LMS)</h3> <p>منصة لاستضافة الدورات التدريبية، اختبارات الكفاءة، وشهادات الإنجاز. تدعم التفاعل المباشر مع المدربين.</p> <div class="card-footer"> <span class="status-badge status-maintenance">قيد الصيانة</span> </div> </div> <!-- System 4 --> <div class="card"> <div class="card-icon">📄</div> <h3>نظام إدارة المستندات (DMS)</h3> <p>تخزين آمن للوثائق الرسمية، أرشفة إلكترونية، وصلاحيات وصول مخصصة لكل قسم. يدعم البحث المتقدم في الملفات.</p> <div class="card-footer"> <span class="status-badge status-active">نشط</span> </div> </div> </div> </section> <!-- Section: Services --> <section class="section"> <h2 class="section-title">الخدمات التقنية</h2> <div class="grid"> <!-- Service 1 --> <div class="card"> <div class="card-icon">🔐</div> <h3>خدمة المصادقة الموحدة (SSO)</h3> <p>تسجيل دخول واحد لجميع الأنظمة. يضمن أمانا أعلى ويوفر وقت الموظف من تكرار إدخال كلمة المرور.</p> <div class="card-footer"> <span class="status-badge status-new">جديد</span> </div> </div> <!-- Service 2 --> <div class="card"> <div class="card-icon">📧</div> <h3>خدمة البريد الإلكتروني المؤسسي</h3> <p>نظام بريد داخلي وخارجي آمن، مع صندوق وارد موحّد، وإدارة التقويمات والمواعيد عبر Outlook أو Gmail.</p> <div class="card-footer"> <span class="status-badge status-active">نشط</span> </div> </div> <!-- Service 3 --> <div class="card"> <div class="card-icon">🛠️</div> <h3>مركز دعم تقنية المعلومات</h3> <p>تقديم طلبات صيانة الأجهزة، استكشاف الأعطال، والدعم الفني عن بعد. تتبع حالة الطلبات لحظياً.</p> <div class="card-footer"> <span class="status-badge status-active">نشط</span> </div> </div> <!-- Service 4 --> <div class="card"> <div class="card-icon">☁️</div> <h3>خدمة التخزين السحابي</h3> <p>مساحة تخزين مشتركة بين الأقسام لتبادل الملفات الكبيرة، مع نسخ احتياطي تلقائي يومي.</p> <div class="card-footer"> <span class="status-badge status-active">نشط</span> </div> </div> </div> </section> </main> <!-- إغلاق الـ Main --> <!-- 3. Footer --> <footer> <p>© 2023 شركة التقنية المتقدمة - جميع الحقوق محفوظة</p> </footer> </body> </html>ما تم إصلاحه:
- إغلاق وسم
<header>بعد وصف المنصة مباشرة. - إضافة وسم
<main>ليعمل كحاوية رئيسية للأقسام (<section>). - نقل الأقسام (
<section>) داخل<main>بدلاً من كونها داخل<header>أو خارج أي حاوية رئيسية. - تأكيد إغلاق جميع الوسوم بشكل صحيح (
</main>,</footer>).
هذا الكود الآن سليم من الناحية الهيكلية (Valid HTML) وسيعمل بشكل مثالي في جميع المتصفحات.
- وسم
- أنت
خلي روح الموقع كنها القوات البرية و درجات الالوان البني
- النموذج
تم تعديل الكود ليتناسب مع هوية القوات البرية، مع استخدام تدرجات اللون البني/الرمادي العسكري بدلاً من الأزرق، وإضافة لمسات بصرية توحي بالجدية والانضباط.
<!DOCTYPE html> <html lang="ar" dir="rtl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>بوابة القوات البرية - الأنظمة والخدمات</title> <style> /* الألوان العسكرية (البني/الرمادي) */ :root { --primary-color: #5C4033; /* بني غامق (لون التراب/الزيت) */ --primary-hover: #3E2723; /* بني أغمق */ --accent-color: #8B7355; /* بني فاتح/رملي */ --bg-color: #F5F5F0; /* رمادي فاتح جداً (خلفية محايدة) */ --card-bg: #FFFFFF; --text-main: #2D2926; /* رمادي داكن */ --text-muted: #5D5C5B; --border-color: #D7CCC8; /* رمادي بني فاتح */ --header-gradient: linear-gradient(135deg, #4E342E, #795548); /* تدرج بني */ } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: var(--bg-color); color: var(--text-main); line-height: 1.6; } .container { max-width: 1200px; margin: 0 auto; padding: 20px; } /* Header Styles - هوية عسكرية */ header { background: var(--header-gradient); color: white; padding: 50px 0; text-align: center; margin-bottom: 40px; border-bottom: 4px solid var(--accent-color); /* شريط زخرفي */ } header h1 { font-size: 2.5rem; margin-bottom: 10px; font-weight: 800; letter-spacing: 1px; } header p { font-size: 1.1rem; opacity: 0.9; max-width: 600px; margin: 0 auto; } /* Section Titles */ .section-title { font-size: 1.8rem; margin-bottom: 25px; padding-bottom: 10px; border-bottom: 3px solid var(--primary-color); display: inline-block; color: var(--primary-color); } .section { margin-bottom: 50px; } /* Grid Layout */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; } /* Card Styles */ .card { background-color: var(--card-bg); border-radius: 8px; /* حواف أقل حدة لإعطاء طابع صلب */ padding: 25px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); transition: transform 0.2s ease, box-shadow 0.2s ease; border: 1px solid var(--border-color); display: flex; flex-direction: column; border-top: 4px solid var(--primary-color); /* شريط علوي مميز */ } .card:hover { transform: translateY(-3px); box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1); border-top-color: var(--accent-color); } .card-icon { font-size: 2.5rem; margin-bottom: 15px; color: var(--primary-color); } .card h3 { font-size: 1.3rem; margin-bottom: 10px; color: var(--text-main); font-weight: 700; } .card p { color: var(--text-muted); font-size: 0.95rem; flex-grow: 1; } .card-footer { margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--border-color); } .status-badge { display: inline-block; padding: 4px 12px; border-radius: 4px; /* حواف مستقيمة قليلاً */ font-size: 0.8rem; font-weight: bold; } /* ألوان الحالات (مطابقة للهوية البنية) */ .status-active { background-color: #E8F5E9; /* أخضر فاتح (جاهزية) */ color: #2E7D32; } .status-maintenance { background-color: #FFF3E0; /* برتقالي/كهرماني (تنبيه) */ color: #E65100; } .status-new { background-color: #EFEBE9; /* رمادي بني فاتح (جديد) */ color: #4E342E; } /* Footer */ footer { text-align: center; padding: 20px; color: var(--text-muted); font-size: 0.9rem; border-top: 1px solid var(--border-color); margin-top: 40px; background-color: #EFEBE9; } /* Responsive */ @media (max-width: 600px) { header h1 { font-size: 1.8rem; } .grid { grid-template-columns: 1fr; } } </style> </head> <body> <!-- 1. Header --> <header> <div class="container"> <h1>🛡️ بوابة القوات البرية</h1> <p>المنصة الرسمية للوصول إلى الأنظمة العسكرية والخدمات اللوجستية والإدارية. "النصر من عند الله، والعزم من عندنا"</p> </div> </header> <!-- 2. Main Content --> <main class="container"> <!-- Section: Systems --> <section class="section"> <h2 class="section-title">الأنظمة العملياتية والإدارية</h2> <div class="grid"> <!-- System 1 --> <div class="card"> <div class="card-icon">🪖</div> <h3>نظام إدارة الموارد البشرية العسكرية</h3> <p>إدارة الملفات الوظيفية، الترقيات، الإعفاءات، وشهادات الخدمة. يتيح للعسكريين متابعة أوضاعهم الوظيفية والإجازات.</p> <div class="card-footer"> <span class="status-badge status-active">جاهز</span> </div> </div> <!-- System 2 --> <div class="card"> <div class="card-icon">📍</div> <h3>نظام إدارة الوحدات والتشكيلات</h3> <p>متابعة تحركات الوحدات، توزيع العتاد، والقوام البشري لكل تشكيل. يوفر رؤية شاملة للقادة الميدانيين.</p> <div class="card-footer"> <span class="status-badge status-active">جاهز</span> </div> </div> <!-- System 3 --> <div class="card"> <div class="card-icon">📚</div> <h3>أكاديمية التدريب والتأهيل</h3> <p>منصة لاستضافة الدورات القتالية، التكتيكية، والتخصصية. تتبع ساعات التدريب والنتائج الميدانية للعسكريين.</p> <div class="card-footer"> <span class="status-badge status-maintenance">قيد التحديث</span> </div> </div> <!-- System 4 --> <div class="card"> <div class="card-icon">📄</div> <h3>نظام الأوامر والقرارات</h3> <p>توثيق الأوامر العسكرية، نشر التعليمات، وإدارة صلاحيات الوصول للوثائق السرية والمصنفة. أرشفة إلكترونية آمنة.</p> <div class="card-footer"> <span class="status-badge status-active">جاهز</span> </div> </div> </div> </section> <!-- Section: Services --> <section class="section"> <h2 class="section-title">الخدمات اللوجستية والداعمة</h2> <div class="grid"> <!-- Service 1 --> <div class="card"> <div class="card-icon">🔐</div> <h3>خدمة المصادقة العسكرية الموحدة</h3> <p>تسجيل دخول آمن عبر البصمة أو الرمز العسكري الموحّد لجميع الأنظمة. يضمن سرية المعلومات وسهولة الوصول.</p> <div class="card-footer"> <span class="status-badge status-new">جديد</span> </div> </div> <!-- Service 2 --> <div class="card"> <div class="card-icon">📧</div> <h3>بريد القوات البرية الإلكتروني</h3> <p>نظام بريد داخلي آمن للتواصل بين الوحدات والمقرات، مع تشفير كامل للرسائل الحساسة وإدارة التقويمات.</p> <div class="card-footer"> <span class="status-badge status-active">جاهز</span> </div> </div> <!-- Service 3 --> <div class="card"> <div class="card-icon">🛠️</div> <h3>مركز الدعم الفني العسكري</h3> <p>تقديم طلبات صيانة الأجهزة الميدانية، استكشاف الأعطال، والدعم التقني للأنظمة التشغيلية في الوحدات.</p> <div class="card-footer"> <span class="status-badge status-active">جاهز</span> </div> </div> <!-- Service 4 --> <div class="card"> <div class="card-icon">☁️</div> <h3>خدمة التخزين السحابي المؤمّن</h3> <p>مساحة تخزين مشتركة بين الأقسام لتبادل الملفات العملياتية الكبيرة، مع نسخ احتياطي يومي ومراقبة أمنية.</p> <div class="card-footer"> <span class="status-badge status-active">جاهز</span> </div> </div> </div> </section> </main> <!-- 3. Footer --> <footer> <p>© 2023 القوات البرية - جميع الحقوق محفوظة | السرية والأمان أولاً</p> </footer> </body> </html>أبرز التغييرات:
- الألوان:
- تم استبدال الأزرق بتدرجات البني الغامق (
#5C4033) والرمادي البني (#8B7355). - الخلفية أصبحت رمادية فاتحة محايدة (
#F5F5F0) لتبدو أكثر احترافية وعسكرية.
- تم استبدال الأزرق بتدرجات البني الغامق (
- الهوية:
- تم تغيير العنوان إلى "بوابة القوات البرية".
- تم تغيير أسماء الأنظمة والوصف لتناسب البيئة العسكرية (مثل: "الوحدات والتشكيلات"، "الأكاديمية التدريبية"، "الأوامر والقرارات").
- تم تغيير كلمة "نشط" إلى "جاهز" (مصطلح عسكري شائع).
- تم تغيير كلمة "قيد الصيانة" إلى "قيد التحديث".
- التصميم:
- حواف البطاقات أصبحت أقل استدارة (8px) لإعطاء طابع صلب.
- إضافة شريط علوي بني لكل بطاقة.
- خط العنوان أصبح أسمك وأكثر وضوحاً.
- الألوان: