Files
saqel/backend/app/Views/MilitaryCulturePitch.php
T

530 lines
31 KiB
PHP

<?php
namespace App\Views;
class MilitaryCulturePitch
{
public static function render(): string
{
return <<<'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>
<!-- Apple SF Pro & Alexandria Arabic Web Fonts -->
<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=Alexandria:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<!-- Executive Enterprise Luxury CSS -->
<style>
:root {
--bg-dark: #07101E;
--bg-card: #0F1A2E;
--bg-card-hover: #15243F;
--border: #1E3152;
--border-accent: #D4AF37;
--text-primary: #FFFFFF;
--text-secondary: #E2E8F0;
--text-muted: #94A3B8;
--gold-primary: #FFD166;
--gold-dark: #D4AF37;
--cyan-accent: #00F5D4;
--green-accent: #10B981;
--blue-accent: #3B82F6;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Alexandria", "SF Pro Display", "SF Pro Text", "SF Arabic", "Segoe UI", Roboto, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
background-color: var(--bg-dark);
color: var(--text-primary);
min-height: 100vh;
overflow-x: hidden;
background-image:
radial-gradient(circle at 15% 15%, rgba(212, 175, 55, 0.08) 0%, transparent 45%),
radial-gradient(circle at 85% 35%, rgba(0, 245, 212, 0.05) 0%, transparent 45%),
linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
background-size: 100% 100%, 100% 100%, 36px 36px, 36px 36px;
}
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; width: 100%; }
/* Header */
header {
border-bottom: 1px solid var(--border);
background-color: rgba(7, 16, 30, 0.96);
backdrop-filter: blur(16px);
position: sticky;
top: 0;
z-index: 50;
}
.header-content { height: 74px; display: flex; align-items: center; justify-content: space-between; }
.logo-area { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.logo-badge {
width: 44px; height: 44px; border-radius: 12px;
background: linear-gradient(135deg, #FFD166, #D4AF37);
display: flex; align-items: center; justify-content: center;
color: #07101E; font-size: 22px; font-weight: 900;
box-shadow: 0 0 24px rgba(212, 175, 55, 0.4);
}
.brand-title { font-size: 21px; font-weight: 900; color: #FFFFFF; }
.military-pill {
font-size: 11.5px; font-weight: 800; padding: 4px 12px; border-radius: 999px;
background: rgba(212, 175, 55, 0.15); color: var(--gold-primary);
border: 1px solid rgba(212, 175, 55, 0.4); margin-right: 8px;
}
.header-cta {
padding: 10px 22px; font-size: 13.5px; font-weight: 900; border-radius: 10px; text-decoration: none;
background: linear-gradient(135deg, #FFD166, #D4AF37); color: #07101E !important;
box-shadow: 0 4px 16px rgba(212, 175, 55, 0.35); transition: 0.2s;
}
.header-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(212, 175, 55, 0.5); }
/* Executive Hero Section */
.exec-hero { padding: 64px 0 48px; text-align: center; }
.flag-badge {
display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 900;
background: rgba(212, 175, 55, 0.12); border: 1px solid rgba(212, 175, 55, 0.4);
color: var(--gold-primary); padding: 6px 20px; border-radius: 999px; margin-bottom: 24px;
}
.exec-title {
font-size: clamp(28px, 4.5vw, 46px); font-weight: 900; line-height: 1.35; color: #FFFFFF;
max-width: 960px; margin: 0 auto 20px;
}
.exec-title-gold {
background: linear-gradient(135deg, #FFD166 0%, #D4AF37 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.exec-desc {
font-size: clamp(15px, 2vw, 18px); color: var(--text-secondary); max-width: 840px;
margin: 0 auto 36px; line-height: 1.8; font-weight: 500;
}
.exec-cta-banner {
background: linear-gradient(135deg, #0F1A2E 0%, #15243F 100%);
border: 1px solid rgba(212, 175, 55, 0.45); border-radius: 20px;
padding: 26px 32px; max-width: 820px; margin: 0 auto 56px; display: flex; align-items: center;
justify-content: space-between; gap: 24px; flex-wrap: wrap; text-align: right;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}
.cta-btn-gold {
padding: 13px 30px; font-size: 15px; font-weight: 900; border-radius: 12px; text-decoration: none;
background: linear-gradient(135deg, #FFD166, #D4AF37); color: #07101E !important;
box-shadow: 0 6px 24px rgba(212, 175, 55, 0.4); transition: 0.2s; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px;
}
.cta-btn-gold:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(212, 175, 55, 0.55); }
/* Strategic Value Matrix */
.value-matrix {
display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-bottom: 70px;
}
.matrix-card {
background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; padding: 28px;
transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s; position: relative;
}
.matrix-card:hover {
transform: translateY(-3px); border-color: var(--gold-dark);
box-shadow: 0 14px 32px rgba(212, 175, 55, 0.12);
}
.matrix-num { font-size: 34px; font-weight: 900; color: var(--gold-primary); margin-bottom: 6px; }
.matrix-title { font-size: 17px; font-weight: 800; color: #FFFFFF; margin-bottom: 8px; }
.matrix-desc { font-size: 13px; color: var(--text-muted); line-height: 1.65; font-weight: 500; }
/* Core Strategic Pillars */
.section-header { text-align: center; margin-bottom: 44px; }
.section-tag {
font-size: 11.5px; font-weight: 800; color: var(--cyan-accent); background: rgba(0,245,212,0.1);
border: 1px solid rgba(0,245,212,0.3); padding: 4px 16px; border-radius: 999px; display: inline-block; margin-bottom: 12px;
}
.section-title { font-size: 32px; font-weight: 900; color: #FFFFFF; margin-bottom: 10px; }
.section-subtitle { font-size: 15px; color: var(--text-muted); max-width: 680px; margin: 0 auto; line-height: 1.7; }
.pillars-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 24px; margin-bottom: 70px;
}
.pillar-card {
background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; padding: 32px;
position: relative; transition: 0.2s;
}
.pillar-card:hover { border-color: var(--cyan-accent); }
.pillar-card.highlight-card { border-color: rgba(212, 175, 55, 0.5); background: linear-gradient(135deg, #0F1A2E, #14223A); }
.pillar-icon {
width: 50px; height: 50px; border-radius: 14px; background: rgba(212, 175, 55, 0.12);
border: 1px solid rgba(212, 175, 55, 0.35); display: flex; align-items: center; justify-content: center;
font-size: 22px; margin-bottom: 18px; color: var(--gold-primary);
}
.pillar-title { font-size: 19px; font-weight: 900; color: #FFFFFF; margin-bottom: 10px; }
.pillar-desc { font-size: 13.5px; color: var(--text-secondary); line-height: 1.75; }
.pillar-points { list-style: none; margin-top: 16px; display: flex; flex-direction: column; gap: 9px; font-size: 13px; color: var(--text-muted); }
.pillar-points li { display: flex; align-items: flex-start; gap: 8px; }
.pillar-points li::before { content: "✓"; color: var(--cyan-accent); font-weight: 900; font-size: 14px; flex-shrink: 0; }
/* Economics Comparison Box */
.economics-box {
background: linear-gradient(135deg, #0B132B 0%, #111E36 100%);
border: 1px solid var(--border); border-radius: 24px; padding: 40px; margin-bottom: 70px;
}
.economics-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 28px;
}
@media (max-width: 768px) { .economics-grid { grid-template-columns: 1fr; } }
.econ-col {
background: rgba(7, 16, 30, 0.7); border: 1px solid var(--border); border-radius: 18px; padding: 24px;
}
.econ-col.saqel-model { border-color: rgba(0, 245, 212, 0.5); background: rgba(0, 245, 212, 0.03); }
/* Roadmap Section */
.roadmap-box {
background: var(--bg-card); border: 1px solid var(--border); border-radius: 24px; padding: 40px; margin-bottom: 70px;
}
.roadmap-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 28px;
}
.step-card {
background: rgba(7, 16, 30, 0.8); border: 1px solid var(--border); border-radius: 18px; padding: 24px;
}
.step-badge {
font-size: 11.5px; font-weight: 900; color: var(--cyan-accent); background: rgba(0,245,212,0.1);
border: 1px solid rgba(0,245,212,0.3); padding: 3px 12px; border-radius: 6px; display: inline-block; margin-bottom: 10px;
}
.step-title { font-size: 16.5px; font-weight: 800; color: #FFF; margin-bottom: 8px; }
.step-desc { font-size: 13px; color: var(--text-muted); line-height: 1.7; }
/* Demo Request Form */
.demo-section {
background: linear-gradient(135deg, #0F1A2E 0%, #15243F 100%);
border: 1px solid rgba(212, 175, 55, 0.45); border-radius: 24px;
padding: 44px; margin-bottom: 70px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.demo-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; }
@media (max-width: 860px) { .demo-grid { grid-template-columns: 1fr; } }
.form-group { margin-bottom: 18px; }
.form-label { display: block; font-size: 12.5px; font-weight: 700; color: var(--text-secondary); margin-bottom: 8px; }
.input-text {
width: 100%; background: #07101E; border: 1px solid var(--border); border-radius: 10px;
padding: 13px 16px; font-size: 14px; color: #FFFFFF; outline: none; transition: 0.2s;
}
.input-text:focus { border-color: var(--gold-primary); box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2); }
footer {
border-top: 1px solid var(--border); background: #040912; padding: 36px 0 24px; color: var(--text-muted); font-size: 13px;
}
.footer-content { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; }
</style>
</head>
<body>
<!-- Header -->
<header>
<div class="container">
<div class="header-content">
<a href="/" class="logo-area">
<div class="logo-badge">صـ</div>
<div>
<span class="brand-title">منصة صَقِل</span>
<span class="military-pill">مبادرة الثقافة العسكرية 🇯🇴</span>
</div>
</a>
<div style="display: flex; align-items: center; gap: 14px;">
<a href="/" style="font-size: 13.5px; color: var(--text-secondary); text-decoration: none;">الرئيسية</a>
<a href="#demo_request_form" class="header-cta">طلب العرض التنفيذي للقيادة ←</a>
</div>
</div>
</div>
</header>
<!-- Executive Hero -->
<section class="exec-hero">
<div class="container">
<div class="flag-badge">
<span>🇯🇴 شراكة استراتيجية لمدارس الجيش العربي والأجهزة الأمنية</span>
</div>
<h1 class="exec-title">
نحو أعلى نسب تفوق وزاري لأبناء القوات المسلحة: <br>
<span class="exec-title-gold">نبيعكم المخرجات الأكاديمية والإنتاج</span> بأقل التكاليف التشغيلية
</h1>
<p class="exec-desc">
منظومة وطنية متكاملة موجهة لقيادة ومديرية التربية والتعليم والثقافة العسكرية، تضمن توحيد جودة تدريس التوجيهي عبر كافة المحافظات ومناطق البادية، مع غرفة قيادة وسيطرة مركزية تقيس مستوى تحصيل كل مدرسة وطالب لحظياً.
</p>
<div class="exec-cta-banner">
<div>
<strong style="font-size: 16px; color: #FFF; display: block; margin-bottom: 4px;">جاهزية كاملة لتقديم العرض التنفيذي المباشر (Live Demo)</strong>
<span style="font-size: 13px; color: var(--text-secondary);">استعراض حي لكافة إمكانيات المنظمة في مبنى المديرية في الوقت المناسب لكم.</span>
</div>
<a href="#demo_request_form" class="cta-btn-gold">حجز موعد العرض التنفيذي 📅</a>
</div>
<!-- Value Matrix -->
<div class="value-matrix">
<div class="matrix-card">
<div class="matrix-num">100%</div>
<div class="matrix-title">عدالة تعليمية جغرافية</div>
<div class="matrix-desc">طالب مدرسة القويرة أو الصفاوي يتلقى نفس شرح نخبة معلمي المملكة بدون أعباء تنقل أو نقص كوادر.</div>
</div>
<div class="matrix-card">
<div class="matrix-num">80%</div>
<div class="matrix-title">خفض النفقات التشغيلية</div>
<div class="matrix-desc">إلغاء تكاليف المراكز الإثرائية، المطبوعات الورقية، وباصات التنقل بنظام سحابي موحد وفائق الكفاءة.</div>
</div>
<div class="matrix-card">
<div class="matrix-num">0s</div>
<div class="matrix-title">تقارير لحظية للقيادة</div>
<div class="matrix-desc">غرفة عمليات مركزية تتيح لمدير التعليم والضباط رصد نسب الإنجاز والمؤشر الوزاري لكل مدرسة وشعبة.</div>
</div>
<div class="matrix-card">
<div class="matrix-num">100%</div>
<div class="matrix-title">سيادة وأمان رقمي</div>
<div class="matrix-desc">استضافة محلية آمنة، تشفير بيانات الطلاب، ومنع تام لتسريب أو تصوير المواد التعليمية (DRM).</div>
</div>
</div>
</div>
</section>
<!-- Strategic Pillars -->
<section style="padding: 20px 0;">
<div class="container">
<div class="section-header">
<span class="section-tag">المحاور الاستراتيجية للمبادرة</span>
<h2 class="section-title">كيف تضمن صَقِل تحقيق القفزة النوعية لمدارس المديرية؟</h2>
<p class="section-subtitle">
نستبدل المشاهدة السلبية غير المقاسة بنظام اشتباك ذهني إجباري يضمن استيعاب كل مفهوم قبل الانتقال للذي يليه.
</p>
</div>
<div class="pillars-grid">
<!-- Pillar 1 -->
<div class="pillar-card highlight-card">
<div class="pillar-icon">🎖️</div>
<h3 class="pillar-title">1. غرفة القيادة والسيطرة التعليمية (Command Dashboard)</h3>
<p class="pillar-desc">
لوحة تحكم تنفيذية مركزية مخصصة للقيادة وضباط الإشراف بالمديرية:
</p>
<ul class="pillar-points">
<li>رصد فوري لنسب مشاهدة وحل امتحانات الدروس لكل مدرسة وشعبة في المملكة.</li>
<li>اكتشاف مبكر للشعب التي تواجه صعوبة في مباحث علمية معينة للتدخل الاستباقي.</li>
<li>مؤشر الجاهزية للوزاري التراكمي لجميع طلبة مدارس الثقافة العسكرية.</li>
</ul>
</div>
<!-- Pillar 2 -->
<div class="pillar-card">
<div class="pillar-icon">🧠</div>
<h3 class="pillar-title">2. تقنية التثبيت المعرفي السقراطي (Active Recall Engine)</h3>
<p class="pillar-desc">
القضاء التام على مشكلة تشتت الطالب أو تشغيل الفيديو دون تركيز:
</p>
<ul class="pillar-points">
<li>توقف الفيديو إجبارياً عند نقاط فحص الفهم لاختبار استيعاب الطالب.</li>
<li>إلزام الطالب بمراجعة المفهوم في حال عدم الدقة لضمان الإتقان التام.</li>
<li>لا يُسجل الدرس كمكتمل إلا بعد اجتياز نقاط الفحص بنجاح.</li>
</ul>
</div>
<!-- Pillar 3 -->
<div class="pillar-card">
<div class="pillar-icon">📲</div>
<h3 class="pillar-title">3. تقارير مؤتمتة لأولياء الأمور عبر الواتساب</h3>
<p class="pillar-desc">
إبقاء أولياء الأمور من ضباط وضباط صف القوات المسلحة في قلب المتابعة:
</p>
<ul class="pillar-points">
<li>إشعار دوري موجز بنسبة تقدم الطالب وساعات دراسته ونتائج امتحاناته.</li>
<li>تنبيه استباقي عند وجود أي تراجع في مؤشر الفهم للمعالجة الفورية.</li>
<li>تسهيل المتابعة الأسرية أثناء فترات الخدمة والمناوبات الميدانية.</li>
</ul>
</div>
<!-- Pillar 4 -->
<div class="pillar-card">
<div class="pillar-icon">🤖</div>
<h3 class="pillar-title">4. التشخيص الأكاديمي الذكي لسد الثغرات</h3>
<p class="pillar-desc">
معالجة الفروق الفردية وتمكين كل طالب من تدارك نقاط ضعفه:
</p>
<ul class="pillar-points">
<li>تحليل دقيق لأخطاء الطالب في امتحانات الدروس والوحدات.</li>
<li>توليد نماذج امتحانية علاجية مخصصة تسد الثغرات قبل الامتحان الوزاري.</li>
<li>تزويد المعلمين والمشرفين بملخص مباشر حول المفاهيم الأكثر صعوبة.</li>
</ul>
</div>
<!-- Pillar 5 -->
<div class="pillar-card">
<div class="pillar-icon">📡</div>
<h3 class="pillar-title">5. ملاءمة بيئات البادية والاتصال المحدود</h3>
<p class="pillar-desc">
بنية تحتية مرنة تتكيف مع سرعات الإنترنت في مختلف مناطق المملكة:
</p>
<ul class="pillar-points">
<li>بث مرن ذكي يعمل بسلاسة حتى مع شبكات الاتصال البسيطة.</li>
<li>إمكانية التشغيل السلس داخل معامل الحاسوب المدرسية في المدارس النائية.</li>
</ul>
</div>
<!-- Pillar 6 -->
<div class="pillar-card">
<div class="pillar-icon">🔒</div>
<h3 class="pillar-title">6. الحماية العالية والسيادة الرقمية (Zero-Trust)</h3>
<p class="pillar-desc">
أعلى معايير حماية البيانات والخصوصية المعتمدة مؤسسياً:
</p>
<ul class="pillar-points">
<li>تشفير شامل لبيانات الطلبة ونتائجهم وسجلاتهم الأكاديمية.</li>
<li>علامة مائية أمنية ديناميكية تمنع تصوير الشاشات أو قرصنة المواد.</li>
<li>استضافة محلية تخضع للسيادة الأردنية الكاملة.</li>
</ul>
</div>
</div>
<!-- Economics Comparison -->
<div class="economics-box">
<div style="text-align: center;">
<span class="section-tag">الجدوى الاقتصادية والأثر المالي</span>
<h2 style="font-size: 26px; font-weight: 900; color: #FFF;">مقارنة نموذج النفقات التقليدي بنموذج صَقِل</h2>
</div>
<div class="economics-grid">
<div class="econ-col">
<strong style="font-size: 16px; color: #F87171; display: block; margin-bottom: 12px;">❌ النموذج التقليدي (نفقات متكررة ومخرجات غير مقاسة):</strong>
<ul class="pillar-points" style="color: var(--text-secondary);">
<li>تكاليف باهظة لطباعة الكراسات والملازم سنوياً.</li>
<li>أعباء استئجار مراكز وتسيير باصات للنقل في البرامج الإثرائية.</li>
<li>صعوبة رصد مستوى الطالب إلا بعد صدور النتائج النهائية.</li>
</ul>
</div>
<div class="econ-col saqel-model">
<strong style="font-size: 16px; color: var(--cyan-accent); display: block; margin-bottom: 12px;">✓ نموذج صَقِل (شراء الناتج والإنتاج بأعلى كفاءة):</strong>
<ul class="pillar-points" style="color: #FFFFFF;">
<li>توفير يصل إلى 80% من النفقات التشغيلية والمطبوعات.</li>
<li>رصد دقيق لحظي لمستوى كل مدرسة وطالب على مستوى المملكة.</li>
<li>تأثير مباشر ومثبت في رفع نسب التفوق لجميع أبناء القوات المسلحة.</li>
</ul>
</div>
</div>
</div>
<!-- Roadmap -->
<div class="roadmap-box">
<div style="text-align: center;">
<span class="section-tag">مراحل الشراكة والتنفيذ</span>
<h2 style="font-size: 26px; font-weight: 900; color: #FFF;">خطة التفعيل المرحلية المقترحة</h2>
</div>
<div class="roadmap-grid">
<div class="step-card">
<span class="step-badge">المرحلة الأولى</span>
<h4 class="step-title">التشغيل التجريبي الاستطلاعي (Pilot)</h4>
<p class="step-desc">
اختيار 5 مدارس نموذجية تابعة للمديرية (شمال، وسط، جنوب، وبادية) لتطبيق المنظومة وربط طلاب التوجيهي بها.
</p>
</div>
<div class="step-card">
<span class="step-badge">المرحلة الثانية</span>
<h4 class="step-title">قياس الأثر وتحليل المؤشرات</h4>
<p class="step-desc">
استعراض تقارير غرفة القيادة والسيطرة وقياس نسبة تحسن الطلبة في الامتحانات والجاهزية للوزاري.
</p>
</div>
<div class="step-card">
<span class="step-badge">المرحلة الثالثة</span>
<h4 class="step-title">الاعتماد والتعميم الشامل</h4>
<p class="step-desc">
تعميم المنظومة على كافة مدارس مديرية الثقافة العسكرية لتكون المنصة الرقمية المعتمدة رسمياً.
</p>
</div>
</div>
</div>
<!-- Demo Request -->
<div id="demo_request_form" class="demo-section">
<div class="demo-grid">
<div>
<span class="section-tag">التنسيق المباشر</span>
<h2 style="font-size: 28px; font-weight: 900; color: #FFF; margin-bottom: 12px;">طلب جلسة تقديم العرض التنفيذي للقيادة</h2>
<p style="font-size: 14px; color: var(--text-secondary); line-height: 1.75; margin-bottom: 24px;">
يسعدنا تقديم عرض عملي وتوضيحي لكافة مزايا المنظومة أمام عطوفة المدير وضباط التعليم، ومناقشة تفاصيل التطبيق الميداني.
</p>
<div style="background: rgba(7, 16, 30, 0.85); border: 1px solid var(--border); border-radius: 16px; padding: 20px;">
<span style="font-size: 12px; color: var(--text-muted); display: block;">مسؤول التنسيق والتنفيذ المباشر:</span>
<strong style="font-size: 17px; color: var(--gold-primary); display: block; margin-top: 2px;">الأستاذ حمزة الغويري</strong>
<span style="font-size: 13px; color: var(--text-secondary);">المؤسس والمعماري التقني لمنظومة صَقِل التعليمية</span>
</div>
</div>
<div>
<form onsubmit="event.preventDefault(); alert('تم استلام طلبكم بنجاح! سيتم التواصل معكم فوراً لترتيب موعد العرض التنفيذي.');">
<div class="form-group">
<label class="form-label">الرتبة والاسم الكامل للمسؤول / الضابط المنسق</label>
<input type="text" placeholder="مثال: الرائد محمد ..." class="input-text" required>
</div>
<div class="form-group">
<label class="form-label">الجهة أو المدرسة التابعة للمديرية</label>
<input type="text" placeholder="مثال: قسم الإشراف التربوي / مدرسة ..." class="input-text" required>
</div>
<div class="form-group">
<label class="form-label">رقم الهاتف / الواتساب للتنسيق المباشر</label>
<input type="tel" placeholder="0790000000" class="input-text" required>
</div>
<div class="form-group">
<label class="form-label">الموعد أو اليوم المقترح للعرض التوضيحي</label>
<input type="text" placeholder="مثال: الثلاثاء القادم الساعة 10:00 صباحاً" class="input-text">
</div>
<button type="submit" class="cta-btn-gold" style="width: 100%; padding: 14px; border: none; cursor: pointer; justify-content: center; font-size: 15px;">
تأكيد طلب موعد العرض التنفيذي 🇯🇴
</button>
</form>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<div class="container">
<div class="footer-content">
<span>المبادرة الاستراتيجية لمدارس مديرية التربية والتعليم والثقافة العسكرية — منصة صَقِل © 2026</span>
<div style="display: flex; gap: 18px;">
<a href="/" style="color: var(--text-muted); text-decoration: none;">الرئيسية</a>
<a href="/student" style="color: var(--text-muted); text-decoration: none;">بوابة الطالب</a>
<a href="/teacher" style="color: var(--text-muted); text-decoration: none;">استوديو المعلمين</a>
</div>
</div>
</div>
</footer>
</body>
</html>
HTML;
}
}