<?php
/*
  demo.php
  واجهة ديمو مجانية وتسويقية آمنة للنظام.
  لا تقوم بتعديل قاعدة البيانات ولا تحتاج تسجيل دخول.
*/
?>
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<title>ديمو مجاني | نظام إدارة المدرسة الذكي</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&display=swap" rel="stylesheet">
<style>
:root{--dark:#061321;--navy:#0b2d4d;--cyan:#22d3ee;--gold:#f5c542;--green:#22c55e;--muted:#cbd5e1}
*{box-sizing:border-box}
body{margin:0;font-family:Tajawal,Arial;background:
radial-gradient(circle at 14% 12%,rgba(34,211,238,.25),transparent 28%),
radial-gradient(circle at 84% 15%,rgba(245,197,66,.22),transparent 25%),
radial-gradient(circle at 50% 100%,rgba(37,99,235,.22),transparent 38%),
linear-gradient(135deg,#061321,#0b2d4d 65%,#061321);color:#fff;min-height:100vh}
a{text-decoration:none;color:inherit}
.wrap{width:94%;max-width:1320px;margin:auto}
.header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;position:sticky;top:0;z-index:10;background:rgba(6,19,33,.78);backdrop-filter:blur(16px)}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:55px;height:55px;object-fit:contain;background:#fff;border-radius:18px;padding:6px}
.brand b{font-size:19px}
.brand small{display:block;color:var(--muted);margin-top:2px}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:15px;padding:11px 15px;font-weight:900;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.09);transition:.25s}
.btn:hover{transform:translateY(-2px);background:rgba(255,255,255,.15)}
.btn.gold{background:linear-gradient(135deg,#fde68a,#f59e0b);color:#3b2600;border:0}
.btn.cyan{background:linear-gradient(135deg,#67e8f9,#0ea5e9);color:#061321;border:0}
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:22px;align-items:center;padding:42px 0 25px}
.hero h1{font-size:44px;line-height:1.35;margin:0 0 14px;font-weight:900}
.hero p{font-size:18px;line-height:2;color:#dbeafe;margin:0}
.badges{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0}
.badge{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:9px 13px;font-weight:800;color:#e2e8f0}
.screen{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);border-radius:32px;padding:18px;box-shadow:0 30px 85px rgba(0,0,0,.35);position:relative;overflow:hidden}
.screen:before{content:"";position:absolute;inset:-60px auto auto -70px;width:240px;height:240px;background:rgba(34,211,238,.22);filter:blur(45px);border-radius:999px}
.browser{height:16px;display:flex;gap:7px;margin-bottom:15px;position:relative}
.dot{width:12px;height:12px;border-radius:50%;background:#ef4444}.dot:nth-child(2){background:#f59e0b}.dot:nth-child(3){background:#22c55e}
.dashboard{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;position:relative}
.mini{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:16px;min-height:115px}
.mini span{display:block;color:#cbd5e1;font-weight:800;font-size:13px}
.mini b{display:block;font-size:31px;margin-top:8px}
.section-title{text-align:center;margin:45px auto 22px}
.section-title h2{font-size:30px;margin:0 0 8px}
.section-title p{margin:0;color:#cbd5e1}
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.feature{background:rgba(255,255,255,.085);border:1px solid rgba(255,255,255,.13);border-radius:26px;padding:20px;min-height:210px;box-shadow:0 18px 50px rgba(0,0,0,.16);transition:.25s}
.feature:hover{transform:translateY(-6px);background:rgba(255,255,255,.13)}
.ico{font-size:42px;margin-bottom:13px}
.feature h3{margin:0 0 9px;font-size:19px}
.feature p{margin:0;color:#cbd5e1;line-height:1.8}
.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:16px}
.step{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.13);border-radius:24px;padding:18px;text-align:center}
.step b{display:inline-flex;width:38px;height:38px;align-items:center;justify-content:center;border-radius:50%;background:linear-gradient(135deg,var(--cyan),var(--gold));color:#061321;margin-bottom:9px}
.step span{display:block;font-weight:900}
.cta{margin:45px 0 28px;background:linear-gradient(135deg,rgba(34,211,238,.18),rgba(245,197,66,.16));border:1px solid rgba(255,255,255,.16);border-radius:32px;padding:26px;display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center}
.cta h2{margin:0 0 8px;font-size:28px}
.cta p{margin:0;color:#dbeafe;line-height:1.8}
.footer{text-align:center;color:#94a3b8;padding:20px;border-top:1px solid rgba(255,255,255,.12)}
@media(max-width:1050px){.hero,.cta{grid-template-columns:1fr}.features{grid-template-columns:1fr 1fr}.flow{grid-template-columns:1fr 1fr}.header{flex-direction:column;text-align:center}.actions{justify-content:center}}
@media(max-width:600px){.hero h1{font-size:30px}.dashboard,.features,.flow{grid-template-columns:1fr}.actions .btn{width:100%}.actions{width:100%}.brand{flex-direction:column}.cta{text-align:center}.wrap{width:92%}}
</style>
</head>
<body>
<div class="wrap">
  <div class="header">
    <div class="brand">
      <img src="logo.png" alt="logo">
      <div>
        <b>نظام إدارة المدرسة الذكي</b>
        <small>ديمو مجاني آمن للعرض على المدارس</small>
      </div>
    </div>
    <div class="actions">
      <a class="btn cyan" href="demo_admin.php">لوحة الإدارة التجريبية</a>
      <a class="btn" href="registration/student_register.php" target="_blank">فتح تسجيل طالب</a>
      <a class="btn gold" href="https://wa.me/9647728430588" target="_blank">اطلب نسخة لمدرستك</a>
    </div>
  </div>

  <section class="hero">
    <div>
      <h1>حوّل المدرسة إلى إدارة ذكية من التسجيل إلى التقارير</h1>
      <p>
        ديمو تسويقي يوضح فكرة النظام للمدارس: تسجيل إلكتروني، أقساط، حضور ببصمة الوجه،
        درجات، واجبات، أسئلة، إشعارات أولياء الأمور، وإحصائيات شاملة من لوحة واحدة.
      </p>
      <div class="badges">
        <span class="badge">بدون ورق وقلم</span>
        <span class="badge">جاهز للتخصيص باسم المدرسة</span>
        <span class="badge">يدعم العربية RTL</span>
        <span class="badge">مناسب للمدارس الأهلية</span>
      </div>
      <div class="actions">
        <a class="btn gold" href="#features">استعراض المزايا</a>
        <a class="btn cyan" href="demo_admin.php">تجربة لوحة الإدارة</a>
      </div>
    </div>
    <div class="screen">
      <div class="browser"><i class="dot"></i><i class="dot"></i><i class="dot"></i></div>
      <div class="dashboard">
        <div class="mini"><span>الطلبة</span><b>1,240</b></div>
        <div class="mini"><span>تحصيل الأقساط</span><b>86%</b></div>
        <div class="mini"><span>حضور اليوم</span><b>94%</b></div>
        <div class="mini"><span>الواجبات المرسلة</span><b>38</b></div>
        <div class="mini"><span>ملفات الأسئلة</span><b>215</b></div>
        <div class="mini"><span>إشعارات ولي الأمر</span><b>72</b></div>
      </div>
    </div>
  </section>

  <div class="section-title" id="features">
    <h2>مزايا النظام الجاهزة للبيع</h2>
    <p>كل ميزة مصممة لحل مشكلة فعلية داخل المدرسة.</p>
  </div>

  <section class="features">
    <div class="feature"><div class="ico">📝</div><h3>تسجيل الطلبة إلكترونياً</h3><p>استمارة تسجيل متكاملة مع بيانات الطالب، ولي الأمر، الأم، العنوان، الخريطة، وصورة الطالب اختيارياً.</p></div>
    <div class="feature"><div class="ico">💰</div><h3>متابعة الأقساط</h3><p>تحديد القسط السنوي، تسجيل الدفعات، حساب المتبقي، حالات التسديد، وسجل دفعات لكل طالب.</p></div>
    <div class="feature"><div class="ico">📷</div><h3>حضور ببصمة الوجه</h3><p>تسجيل بصمة الطالب من الكاميرا، ثم تسجيل الحضور والمغادرة عبر بوابة ذكية وسريعة.</p></div>
    <div class="feature"><div class="ico">📚</div><h3>إدارة الدرجات</h3><p>درجات شهرية وفصلية ونهائية، جدول مواد، معدل سنوي، وتحليل نجاح ورسوب ومتابعة الضعف.</p></div>
    <div class="feature"><div class="ico">📘</div><h3>الواجبات والمادة الداخلة</h3><p>المدرس يرسل الواجبات والمادة الداخلة، والإدارة تتابع من أرسل ومن لم يرسل.</p></div>
    <div class="feature"><div class="ico">📁</div><h3>رفع أسئلة المدرسين</h3><p>رفع ملفات PDF وWord للأسئلة، تصنيف حسب المرحلة والشعبة والمادة ونوع الامتحان.</p></div>
    <div class="feature"><div class="ico">👨‍👩‍👦</div><h3>بوابة ولي الأمر</h3><p>حساب خاص لولي الأمر لمتابعة الطالب، الدرجات، الحضور، التبليغات، وجداول الامتحانات.</p></div>
    <div class="feature"><div class="ico">📊</div><h3>إحصائيات شاملة</h3><p>لوحة قيادة تعرض الطلبة، الحضور، الأقساط، المدرسين، الواجبات، الأسئلة، والتقييمات.</p></div>
  </section>

  <div class="section-title">
    <h2>مسار العمل داخل المدرسة</h2>
    <p>النظام مرتب كرحلة كاملة من تسجيل الطالب إلى متابعة مستواه.</p>
  </div>

  <section class="flow">
    <div class="step"><b>1</b><span>تسجيل الطالب</span></div>
    <div class="step"><b>2</b><span>قبول وتحويل</span></div>
    <div class="step"><b>3</b><span>تحديد القسط</span></div>
    <div class="step"><b>4</b><span>حضور ودرجات</span></div>
    <div class="step"><b>5</b><span>تقارير وولي أمر</span></div>
  </section>

  <section class="cta">
    <div>
      <h2>جاهز تعرضه على المدارس؟</h2>
      <p>هذه الصفحة تساعدك تبيع النظام كمنتج كامل وليس مجرد موقع. غيّر الشعار والاسم والسعر حسب المدرسة، ثم اعرض الديمو بثقة.</p>
    </div>
    <div class="actions">
      <a class="btn gold" href="https://wa.me/9647728430588" target="_blank">تواصل واتساب</a>
      <a class="btn cyan" href="demo_admin.php">لوحة الإدارة التجريبية</a>
    </div>
  </section>

  <div class="footer">© <?php echo date('Y'); ?> — ديمو نظام إدارة المدرسة الذكي</div>
</div>
</body>
</html>
