Update index.html

index.html

@@ -13,29 +13,27 @@
   .container { max-width: 960px; margin: 30px auto; padding: 0 20px; }
   .card { background: #1e293b; border: 1px solid #334155; border-radius: 12px; padding: 24px; margin-bottom: 24px; }
   .card h2 { color: #38bdf8; margin-bottom: 18px; font-size: 1.05rem; display:flex; align-items:center; gap:8px; }
-  .form-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
-  input[type=text], input[type=password] {
+  .info-box {
+    background: #0f172a; border: 1px solid #1e3a5f; border-radius: 8px;
+    padding: 14px 18px; font-size: 0.88rem; color: #7dd3fc; line-height: 1.8;
+  }
+  .info-box code { background: #1e293b; padding: 2px 8px; border-radius: 4px; color: #fbbf24; font-size: 0.85rem; }
+  input[type=text] {
     flex: 1; min-width: 200px; padding: 10px 14px;
     background: #0f172a; border: 1px solid #475569; border-radius: 8px;
     color: #e2e8f0; font-size: 0.95rem;
   }
   input:focus { outline: none; border-color: #38bdf8; }
   input::placeholder { color: #475569; }
-  .hint { font-size: 0.8rem; color: #64748b; margin-bottom: 10px; }
-  .hint span { color: #fbbf24; }
-  .divider { display: flex; align-items: center; gap: 10px; margin: 10px 0; color: #475569; font-size: 0.82rem; }
-  .divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: #334155; }
+  .form-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
   button {
     padding: 10px 22px; border: none; border-radius: 8px; cursor: pointer;
     font-size: 0.9rem; font-weight: 600; transition: all .15s;
   }
   button:hover { transform: translateY(-1px); opacity: .9; }
-  button:active { transform: translateY(0); }
   .btn-primary { background: #2563eb; color: #fff; }
-  .btn-danger  { background: #dc2626; color: #fff; }
-  .btn-success { background: #16a34a; color: #fff; }
   .btn-warning { background: #d97706; color: #fff; }
-  .btn-info    { background: #0891b2; color: #fff; }
+  .btn-success { background: #16a34a; color: #fff; }
   .btn-gray    { background: #475569; color: #fff; }
   table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
   th { background: #0f172a; color: #94a3b8; padding: 10px 14px; text-align: right; font-weight: 600; }
@@ -44,14 +42,12 @@
   .badge { display:inline-block; padding:3px 10px; border-radius:20px; font-size:0.78rem; font-weight:600; }
   .badge-ok  { background:#14532d; color:#86efac; }
   .badge-na  { background:#334155; color:#94a3b8; }
-  .badge-method { background:#1e3a5f; color:#7dd3fc; font-size:0.72rem; padding:2px 8px; border-radius:10px; }
   #log {
     background: #020617; border: 1px solid #1e3a5f; border-radius: 8px;
     padding: 14px; height: 260px; overflow-y: auto;
     font-family: 'Courier New', monospace; font-size: 0.8rem; color: #7dd3fc;
     direction: ltr; text-align: left;
   }
-  #log .line { margin: 2px 0; }
   #log .line.err { color: #f87171; }
   #log .line.ok  { color: #86efac; }
   .sch-badge { display:inline-flex; align-items:center; gap:6px; padding:6px 16px; border-radius:20px; font-size:0.85rem; font-weight:600; margin-left:12px; }
@@ -59,14 +55,10 @@
   .sch-off { background:#3f1818; color:#fca5a5; }
   .toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
            padding:12px 28px; border-radius:10px; font-size:0.92rem; font-weight:600;
-           z-index:9999; display:none; animation: fadeup .3s ease; }
+           z-index:9999; display:none; }
   .toast-ok  { background:#14532d; color:#bbf7d0; border:1px solid #16a34a; }
   .toast-err { background:#7f1d1d; color:#fca5a5; border:1px solid #dc2626; }
-  @keyframes fadeup { from { opacity:0; transform:translateX(-50%) translateY(10px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }
-  .spinner { display:inline-block; width:14px; height:14px; border:2px solid #fff; border-top-color:transparent; border-radius:50%; animation:spin .6s linear infinite; vertical-align:middle; margin-left:6px; }
-  @keyframes spin { to { transform:rotate(360deg); } }
   .ctrl-row { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
-  .actions-row { display:flex; gap:10px; flex-wrap:wrap; }
   .empty { color:#475569; padding:16px 0; text-align:center; }
 </style>
 </head>
@@ -74,51 +66,28 @@
 
 <header>
   <h1>🐍 PythonAnywhere Auto-Renewer</h1>
-  <p>إدارة وتجديد حسابات PythonAnywhere تلقائياً كل 10 أيام</p>
+  <p>تجديد حسابات PythonAnywhere تلقائياً كل 10 أيام</p>
 </header>
 
 <div class="container">
 
-  <!-- الحسابات -->
+  <!-- تعليمات الإعداد -->
   <div class="card">
-    <h2>📋 الحسابات المضافة</h2>
-    <div id="accounts-wrap"><div class="empty">جاري التحميل...</div></div>
-    <button class="btn-gray" style="margin-top:14px" onclick="loadAccounts()">🔄 تحديث القائمة</button>
-  </div>
-
-  <!-- إضافة حساب -->
-  <div class="card">
-    <h2>➕ إضافة حساب جديد</h2>
-
-    <div class="hint">
-      يمكنك استخدام <span>كلم�� المرور</span> (طريقة التمديد المباشر /extend) أو <span>API Token</span> (إعادة تحميل الويب آب).
-      إذا أدخلت الاثنين معاً، ستُستخدم كلمة المرور أولاً.
-    </div>
-
-    <div class="form-row">
-      <input type="text"     id="new-user"  placeholder="اسم المستخدم — مثال: mahmoud123">
-    </div>
-
-    <div class="divider">كلمة المرور (موصى بها)</div>
-    <div class="form-row">
-      <input type="password" id="new-pass"  placeholder="كلمة مرور الحساب">
+    <h2>⚙️ طريقة إضافة الحسابات</h2>
+    <div class="info-box">
+      الحسابات تُضاف من <b>Hugging Face → Settings → Variables and secrets</b><br><br>
+      أضف secret باسم: <code>ACCOUNTS</code><br>
+      القيمة: <code>username1:password1,username2:password2</code><br><br>
+      مثال: <code>nopoh55678:mypass123,mahmoud:pass456</code><br><br>
+      أو حسابات منفردة: <code>ACCOUNT_1</code> = <code>user1:pass1</code> &nbsp;|&nbsp; <code>ACCOUNT_2</code> = <code>user2:pass2</code>
     </div>
-
-    <div class="divider">أو API Token</div>
-    <div class="form-row">
-      <input type="password" id="new-token" placeholder="API Token — من /account/#api_token">
-    </div>
-
-    <button class="btn-primary" id="add-btn" onclick="addAccount()">➕ إضافة الحساب</button>
   </div>
 
-  <!-- حذف حساب -->
+  <!-- الحسابات -->
   <div class="card">
-    <h2>🗑️ حذف حساب</h2>
-    <div class="form-row">
-      <input type="text" id="del-user" placeholder="اسم المستخدم المراد حذفه">
-    </div>
-    <button class="btn-danger" onclick="deleteAccount()">🗑️ حذف</button>
+    <h2>📋 الحسابات المحملة من Secrets</h2>
+    <div id="accounts-wrap"><div class="empty">جاري التحميل...</div></div>
+    <button class="btn-gray" style="margin-top:14px" onclick="loadAccounts()">🔄 تحديث</button>
   </div>
 
   <!-- التحكم -->
@@ -128,7 +97,7 @@
       <span id="sch-badge" class="sch-badge sch-off">⏹ المجدول متوقف</span>
       <button class="btn-success" id="sch-btn" onclick="toggleScheduler()">▶️ تشغيل المجدول التلقائي</button>
     </div>
-    <div class="actions-row" style="margin-bottom:14px">
+    <div style="margin-bottom:14px">
       <button class="btn-primary" onclick="renewAll()">🚀 تجديد كل الحسابات الآن</button>
     </div>
     <div class="form-row">
@@ -149,8 +118,6 @@
 <div id="toast" class="toast"></div>
 
 <script>
-let schedulerOn = false;
-
 function toast(msg, ok=true) {
   const el = document.getElementById('toast');
   el.textContent = msg;
@@ -175,11 +142,11 @@ async function loadAccounts() {
   const data = await api('/api/accounts');
   const el = document.getElementById('accounts-wrap');
   if (!Array.isArray(data) || !data.length) {
-    el.innerHTML = '<div class="empty">لا توجد حسابات مضافة بعد.</div>';
+    el.innerHTML = '<div class="empty">⚠️ لا توجد حسابات — أضف ACCOUNTS في Secrets وأعد تشغيل الـ Space.</div>';
     return;
   }
   let html = `<table>
-    <tr><th>المستخدم</th><th>الخادم</th><th>طريقة الدخول</th><th>آخر تجديد</th><th>التجديد القادم</th><th>الحالة</th></tr>`;
+    <tr><th>المستخدم</th><th>الخادم</th><th>آخر تجديد</th><th>التجديد القادم</th><th>الحالة</th></tr>`;
   for (const a of data) {
     const last  = a.last_renewed ? a.last_renewed.slice(0,16).replace('T',' ') : '—';
     const nxt   = a.next_renewal ? a.next_renewal.slice(0,16).replace('T',' ') : '—';
@@ -187,15 +154,9 @@ async function loadAccounts() {
     const badge = a.last_renewed
       ? '<span class="badge badge-ok">✅ مجدَّد</span>'
       : '<span class="badge badge-na">⏳ لم يُجدَّد</span>';
-    const method = a.auth_method === 'password'
-      ? '<span class="badge-method">🔑 Password</span>'
-      : a.auth_method === 'token'
-        ? '<span class="badge-method">🔐 Token</span>'
-        : '—';
     html += `<tr>
       <td><b>${a.username}</b></td>
       <td style="font-size:.8rem;color:#94a3b8">${a.host||'—'}</td>
-      <td>${method}</td>
       <td style="font-size:.82rem">${last}</td>
       <td style="font-size:.82rem">${nxt}</td>
       <td>${badge}<br><span style="font-size:.78rem;color:#64748b">${res}</span></td>
@@ -204,36 +165,6 @@ async function loadAccounts() {
   el.innerHTML = html + '</table>';
 }
 
-async function addAccount() {
-  const user  = document.getElementById('new-user').value.trim();
-  const pass  = document.getElementById('new-pass').value.trim();
-  const token = document.getElementById('new-token').value.trim();
-  if (!user) { toast('❌ أدخل اسم المستخدم', false); return; }
-  if (!pass && !token) { toast('❌ أدخل كلمة المرور أو API Token', false); return; }
-  const btn = document.getElementById('add-btn');
-  btn.innerHTML = 'جاري التحقق... <span class="spinner"></span>';
-  btn.disabled = true;
-  const r = await api('/api/accounts', 'POST', {username: user, token, password: pass});
-  btn.innerHTML = '➕ إضافة الحساب';
-  btn.disabled = false;
-  toast(r.message, r.ok);
-  if (r.ok) {
-    document.getElementById('new-user').value = '';
-    document.getElementById('new-pass').value = '';
-    document.getElementById('new-token').value = '';
-    loadAccounts();
-  }
-}
-
-async function deleteAccount() {
-  const user = document.getElementById('del-user').value.trim();
-  if (!user) { toast('❌ أدخل اسم المستخدم', false); return; }
-  if (!confirm(`هل أنت متأكد من حذف ${user}؟`)) return;
-  const r = await api('/api/accounts/'+user,'DELETE');
-  toast(r.message, r.ok);
-  if (r.ok) { document.getElementById('del-user').value=''; loadAccounts(); }
-}
-
 async function renewAll() {
   toast('🚀 جاري إرسال طلب التجديد...');
   await api('/api/renew','POST');
@@ -250,17 +181,16 @@ async function renewOne() {
 
 async function toggleScheduler() {
   const r = await api('/api/scheduler','POST');
-  schedulerOn = r.running;
-  document.getElementById('sch-badge').className = 'sch-badge ' + (schedulerOn?'sch-on':'sch-off');
-  document.getElementById('sch-badge').textContent = schedulerOn ? '🟢 المجدول شغّال' : '⏹ المجدول متوقف';
-  document.getElementById('sch-btn').textContent   = schedulerOn ? '⏹ إيقاف المجدول' : '▶️ تشغيل المجدول التلقائي';
-  toast(schedulerOn ? '✅ المجدول شغّال الآن' : '⏹ تم إيقاف المجدول');
-  loadLog();
+  const on = r.running;
+  document.getElementById('sch-badge').className = 'sch-badge ' + (on?'sch-on':'sch-off');
+  document.getElementById('sch-badge').textContent = on ? '🟢 المجدول شغّال' : '⏹ المجدول متوقف';
+  document.getElementById('sch-btn').textContent   = on ? '⏹ إيقاف المجدول' : '▶️ تشغيل المجدول التلقائي';
+  toast(on ? '✅ المجدول شغّال' : '⏹ تم إيقاف المجدول');
 }
 
 function colorLine(l) {
-  if (l.includes('❌') || l.includes('فشل') || l.includes('Error')) return 'err';
-  if (l.includes('✅') || l.includes('تمت') || l.includes('تم تجديد')) return 'ok';
+  if (l.includes('❌') || l.includes('فشل')) return 'err';
+  if (l.includes('✅') || l.includes('تم')) return 'ok';
   return '';
 }