fitness/public/admin/index.php

<!doctype html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="theme-color" content="#f5f7f2">
  <title>إدارة المحتوى — SportPath</title>
  <link rel="stylesheet" href="/assets/app.css">
  <link rel="stylesheet" href="/assets/admin.css">
  <script src="/assets/admin.js" defer></script>
</head>
<body class="admin-body">
  <header class="topbar admin-topbar wrap">
    <a class="brand" href="/"><span class="brand-mark">S</span> SportPath <span class="admin-label">إدارة المحتوى</span></a>
    <button class="text-button hidden" id="logout-button" type="button">تسجيل الخروج</button>
  </header>
  <main class="wrap admin-main">
    <section class="admin-intro">
      <p class="eyebrow">مساحة التحرير</p>
      <h1>محتوى واضح،<br><em>وتدريب مسؤول.</em></h1>
      <p>أدر مكتبة الحركات والخطط الأسبوعية. لا تُنشر التغييرات إلا باختيارك، وتسجل كل عملية في سجل التدقيق.</p>
    </section>

    <section class="admin-panel" id="login-panel">
      <h2>دخول المشرف</h2>
      <p class="panel-note">يتطلب حسابًا موجودًا بدور مالك أو مدير محتوى، ورمز تحقق صالحًا.</p>
      <form id="otp-request-form" class="admin-form">
        <label>رقم الهاتف الدولي
          <input id="admin-phone" type="tel" inputmode="tel" placeholder="+9627xxxxxxxx" autocomplete="tel" required>
        </label>
        <button class="button" type="submit">إرسال رمز الدخول <span aria-hidden="true">←</span></button>
      </form>
      <form id="otp-verify-form" class="admin-form hidden">
        <label>رمز التحقق
          <input id="admin-code" type="text" inputmode="numeric" pattern="[0-9]{6}" maxlength="6" autocomplete="one-time-code" required>
        </label>
        <button class="button" type="submit">تأكيد الدخول <span aria-hidden="true">←</span></button>
      </form>
      <p class="status-message" id="login-status" role="status" aria-live="polite"></p>
    </section>

    <section class="admin-workspace hidden" id="workspace">
      <div class="workspace-heading">
        <div><p class="eyebrow">لوحة التحكم</p><h2>مكتبة التدريب</h2></div>
        <button class="outline-button" type="button" id="reload-button">تحديث المحتوى</button>
      </div>
      <p class="status-message" id="workspace-status" role="status" aria-live="polite"></p>
      <div class="workspace-grid">
        <section class="admin-panel">
          <div class="panel-heading"><h3>التمارين</h3><button class="text-button" type="button" id="new-exercise">تمرين جديد +</button></div>
          <div class="content-list" id="exercise-list"></div>
        </section>
        <section class="admin-panel">
          <div class="panel-heading"><h3>الخطط</h3><button class="text-button" type="button" id="new-plan">خطة جديدة +</button></div>
          <div class="content-list" id="plan-list"></div>
        </section>
      </div>

      <section class="admin-panel editor-panel hidden" id="editor-panel">
        <div class="panel-heading"><div><p class="eyebrow" id="editor-kind">تحرير</p><h3 id="editor-title">محتوى جديد</h3></div><button class="text-button" type="button" id="close-editor">إغلاق ×</button></div>
        <form class="admin-form" id="content-form">
          <input id="entity-type" type="hidden">
          <input id="entity-uuid" type="hidden">
          <label>المعرّف النصي (slug)
            <input id="slug" required maxlength="100" dir="ltr" pattern="[a-z0-9]+(?:-[a-z0-9]+)*" placeholder="gentle-mobility">
          </label>
          <label>الاسم بالعربية
            <input id="title-ar" required maxlength="160">
          </label>
          <div id="exercise-fields" class="form-grid hidden">
            <label>نوع الحركة
              <select id="movement-type"><option value="strength">قوة</option><option value="mobility">مرونة</option><option value="cardio">لياقة قلبية</option><option value="recovery">استشفاء</option></select>
            </label>
            <label>المستوى
              <select id="difficulty"><option value="beginner">مبتدئ</option><option value="intermediate">متوسط</option><option value="advanced">متقدم</option></select>
            </label>
            <label>رابط GIF (HTTPS)
              <input id="gif-url" type="url" dir="ltr" placeholder="https://…/movement.gif">
            </label>
            <label>رابط صورة بديلة (HTTPS)
              <input id="poster-url" type="url" dir="ltr" placeholder="https://…/poster.webp">
            </label>
            <label>مدة الحركة بالثواني
              <input id="exercise-duration" type="number" min="1" max="3600">
            </label>
            <label>التكرارات الافتراضية
              <input id="repetitions" maxlength="80" placeholder="8–12">
            </label>
            <label class="full-width">تعليمات الأداء — كل خطوة بسطر
              <textarea id="instructions" rows="4"></textarea>
            </label>
            <label>العضلات المستهدفة — سطر لكل عنصر
              <textarea id="muscles" rows="3"></textarea>
            </label>
            <label>الأدوات — سطر لكل عنصر
              <textarea id="equipment" rows="3"></textarea>
            </label>
            <label class="full-width">تنبيهات السلامة — تنبيه لكل سطر
              <textarea id="exercise-safety" rows="3"></textarea>
            </label>
          </div>
          <div id="plan-fields" class="form-grid hidden">
            <label>الهدف
              <select id="goal"><option value="general_fitness">لياقة عامة</option><option value="weight_management">إدارة الوزن</option><option value="mobility">مرونة وحركة</option><option value="endurance">التحمل</option></select>
            </label>
            <label>المستوى
              <select id="plan-level"><option value="beginner">مبتدئ</option><option value="intermediate">متوسط</option><option value="advanced">متقدم</option></select>
            </label>
            <label>عدد الأسابيع
              <input id="weeks" type="number" min="1" max="52" value="4" required>
            </label>
            <label class="full-width">نبذة الخطة
              <textarea id="summary" rows="3"></textarea>
            </label>
            <label class="full-width">المصادر/ملاحظات المراجعة — سطر لكل مصدر
              <textarea id="sources" rows="3" placeholder="اسم الجهة أو الدراسة؛ الرابط أو المرجع الكامل"></textarea>
            </label>
            <label class="full-width">تنبيهات السلامة الخاصة بالخطة — سطر لكل تنبيه
              <textarea id="plan-safety" rows="3"></textarea>
            </label>
            <label class="full-width">جدول الجلسات (JSON)
              <textarea id="sessions-json" rows="13" dir="ltr" spellcheck="false" placeholder='[{"week":1,"day":1,"title_ar":"جلسة تجريبية","type":"walking","duration_minutes":20,"intensity":"easy","notes_ar":"","exercises":[]}]'></textarea>
              <small>كل عنصر يمثل أسبوعًا/يومًا. يمكن ربط التمارين المنشورة باستخدام exercise_uuid. راجع JSON قبل الحفظ.</small>
            </label>
          </div>
          <label class="publish-toggle"><input id="is-published" type="checkbox"> نشر هذا المحتوى ليظهر للمستخدمين</label>
          <div class="editor-actions"><button class="button" type="submit">حفظ المحتوى <span aria-hidden="true">←</span></button><span id="form-status" class="status-message" role="status"></span></div>
        </form>
      </section>
      <p class="privacy-note">مفاتيح قاعدة البيانات وOTP والذكاء الاصطناعي لا تظهر في لوحة المحتوى ولا تُخزن فيها. ملفات GIF يجب أن تكون مرخصة ومراجعة قبل النشر.</p>
    </section>
  </main>
  <footer class="wrap footer"><a class="brand" href="/"><span class="brand-mark">S</span> SportPath</a><span>إدارة آمنة للمحتوى</span></footer>
</body>
</html>