SS/public/index.html

<!doctype html>
<html lang="ar" dir="rtl">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>SMM Panel</title>
    <link rel="stylesheet" href="/styles.css">
  </head>
  <body>
    <div id="authScreen" class="auth-shell">
      <section class="auth-panel">
        <div class="brand-row">
          <span class="brand-mark" aria-hidden="true"></span>
          <div>
            <h1>SMM Panel</h1>
            <p>إدارة الطلبات والرصيد والخدمات</p>
          </div>
        </div>

        <div class="auth-grid">
          <form id="loginForm" class="surface form-stack">
            <h2>تسجيل الدخول</h2>
            <label>البريد الإلكتروني<input name="email" type="email" autocomplete="email" required></label>
            <label>كلمة المرور<input name="password" type="password" autocomplete="current-password" required></label>
            <button type="submit">دخول</button>
          </form>

          <form id="registerForm" class="surface form-stack">
            <h2>حساب جديد</h2>
            <label>اسم المستخدم<input name="username" autocomplete="username" required></label>
            <label>البريد الإلكتروني<input name="email" type="email" autocomplete="email" required></label>
            <label>كلمة المرور<input name="password" type="password" autocomplete="new-password" minlength="8" required></label>
            <button type="submit">إنشاء الحساب</button>
          </form>
        </div>
        <div id="authMessage" class="message hidden"></div>
      </section>
    </div>

    <div id="appShell" class="app-shell hidden">
      <aside class="sidebar">
        <div class="brand-row compact">
          <span class="brand-mark" aria-hidden="true"></span>
          <strong>SMM Panel</strong>
        </div>
        <nav id="mainNav" class="nav-list"></nav>
      </aside>

      <main class="main">
        <header class="topbar">
          <div>
            <p id="userLine" class="muted"></p>
            <h1 id="viewTitle">لوحة المستخدم</h1>
          </div>
          <div class="top-actions">
            <div class="balance-box">
              <span>الرصيد</span>
              <strong id="balanceValue">0.0000</strong>
            </div>
            <button id="menuButton" type="button" class="secondary icon-button mobile-only" aria-label="فتح القائمة">☰</button>
            <div id="themePicker" class="theme-picker">
              <button id="themeButton" type="button" class="theme-trigger" aria-expanded="false" aria-controls="themeMenu">
                <svg viewBox="0 0 24 24" aria-hidden="true">
                  <path d="M12 3.5a8.5 8.5 0 0 0 0 17h1.2a2.2 2.2 0 0 0 1.6-3.7 1.25 1.25 0 0 1 .9-2.1H17a4 4 0 0 0 4-4C21 6.7 17 3.5 12 3.5Z"></path>
                  <circle cx="7.8" cy="11" r="1.2"></circle>
                  <circle cx="10.8" cy="7.8" r="1.2"></circle>
                  <circle cx="15" cy="8.2" r="1.2"></circle>
                </svg>
                <span>المظهر</span>
              </button>
              <div id="themeMenu" class="theme-menu" aria-hidden="true">
                <div class="theme-menu-head">
                  <strong>اختر اللون الأساسي</strong>
                  <button id="themeClose" type="button" class="theme-close" aria-label="إغلاق">×</button>
                </div>
                <div class="theme-grid">
                  <button type="button" class="color-option" data-color="#0f766e" style="--swatch-color:#0f766e" aria-label="تركواز"><span></span><small>تركواز</small></button>
                  <button type="button" class="color-option" data-color="#2563eb" style="--swatch-color:#2563eb" aria-label="أزرق"><span></span><small>أزرق</small></button>
                  <button type="button" class="color-option" data-color="#7c3aed" style="--swatch-color:#7c3aed" aria-label="بنفسجي"><span></span><small>بنفسجي</small></button>
                  <button type="button" class="color-option" data-color="#16a34a" style="--swatch-color:#16a34a" aria-label="أخضر"><span></span><small>أخضر</small></button>
                  <button type="button" class="color-option" data-color="#ea580c" style="--swatch-color:#ea580c" aria-label="برتقالي"><span></span><small>برتقالي</small></button>
                  <button type="button" class="color-option" data-color="#db2777" style="--swatch-color:#db2777" aria-label="وردي"><span></span><small>وردي</small></button>
                </div>
                <div class="custom-color">
                  <label>لون مخصص<input id="customColor" type="color" value="#0f766e"></label>
                  <label>الكود<input id="customHex" dir="ltr" maxlength="7" value="#0f766e" spellcheck="false"></label>
                  <span id="themePreview" class="theme-preview">معاينة</span>
                </div>
              </div>
            </div>
            <button id="refreshButton" type="button" class="secondary">تحديث</button>
            <button id="logoutButton" type="button" class="danger">خروج</button>
          </div>
        </header>

        <div id="message" class="message hidden"></div>
        <section id="view" class="view"></section>
      </main>
      <button id="navBackdrop" type="button" class="nav-backdrop hidden" aria-label="إغلاق القائمة"></button>
    </div>

    <script src="/app.js"></script>
  </body>
</html>