Spaces:

stat2025
/

MapSearch

Running

App Files Files Community

stat2025 commited on Dec 29, 2025

Commit

7662fa0

verified ·

1 Parent(s): 8c4683e

Delete index.html

Browse files

Files changed (1) hide show

index.html +0 -369

index.html DELETED Viewed

@@ -1,369 +0,0 @@
-<!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=Cairo:wght@400;600;700&display=swap" rel="stylesheet" />
-  <style>
-    :root {
-      --primary: #2563eb;
-      --primary-dark: #1d4ed8;
-      --accent: #fbbf24;
-      --bg-dark: #020617;
-      --text-main: #0f172a;
-      --text-muted: #64748b;
-      --radius-lg: 26px;
-      --radius-md: 16px;
-    }
-    * {
-      box-sizing: border-box;
-      font-family: "Cairo", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-    }
-    body {
-      margin: 0;
-      min-height: 100vh;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 18px;
-      background:
-        radial-gradient(circle at top left, #1d4ed8 0, transparent 52%),
-        radial-gradient(circle at bottom right, #0f766e 0, transparent 55%),
-        linear-gradient(135deg, #020617, #020617);
-      color: var(--text-main);
-    }
-    /* خلفية دوائر ناعمة */
-    .background-bubbles::before,
-    .background-bubbles::after {
-      content: "";
-      position: fixed;
-      border-radius: 999px;
-      filter: blur(40px);
-      opacity: 0.4;
-      z-index: -1;
-    }
-    .background-bubbles::before {
-      width: 240px;
-      height: 240px;
-      background: #60a5fa;
-      inset-inline-start: -40px;
-      top: -60px;
-    }
-    .background-bubbles::after {
-      width: 260px;
-      height: 260px;
-      background: #22c55e;
-      inset-inline-end: -50px;
-      bottom: -80px;
-    }
-    .card {
-      width: 100%;
-      max-width: 480px;
-      border-radius: var(--radius-lg);
-      padding: 26px 24px 20px;
-      position: relative;
-      background: rgba(248, 250, 252, 0.89);
-      box-shadow:
-        0 20px 50px rgba(15, 23, 42, 0.55),
-        0 0 0 1px rgba(148, 163, 184, 0.2);
-      backdrop-filter: blur(20px);
-      -webkit-backdrop-filter: blur(20px);
-      animation: floatIn 0.6s ease-out;
-    }
-    @keyframes floatIn {
-      from {
-        opacity: 0;
-        transform: translateY(14px) scale(0.98);
-      }
-      to {
-        opacity: 1;
-        transform: translateY(0) scale(1);
-      }
-    }
-    .card::before {
-      content: "";
-      position: absolute;
-      inset-inline: 16px;
-      top: 10px;
-      height: 4px;
-      border-radius: 999px;
-      background: linear-gradient(90deg, #22c55e, #2563eb, #fbbf24);
-      opacity: 0.9;
-    }
-    .header {
-      margin-top: 12px;
-      display: flex;
-      align-items: center;
-      gap: 14px;
-    }
-    .logo-badge {
-      width: 54px;
-      height: 54px;
-      border-radius: 22px;
-      background: radial-gradient(circle at 30% 20%, #ffffff 0, #bfdbfe 40%, #1d4ed8 100%);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 26px;
-      box-shadow: 0 10px 25px rgba(37, 99, 235, 0.55);
-      color: #0b1120;
-    }
-    .header-text h1 {
-      margin: 0;
-      font-size: 1.45rem;
-      color: var(--primary-dark);
-    }
-    .header-text p {
-      margin: 4px 0 0;
-      font-size: 0.9rem;
-      color: var(--text-muted);
-    }
-    .form-section {
-      margin-top: 22px;
-    }
-    label {
-      display: block;
-      font-size: 0.9rem;
-      font-weight: 600;
-      color: #111827;
-      margin-bottom: 8px;
-    }
-    .input-shell {
-      position: relative;
-    }
-    .input-shell span.icon {
-      position: absolute;
-      inset-inline-start: 12px;
-      top: 50%;
-      transform: translateY(-50%);
-      font-size: 1.1rem;
-      color: #6b7280;
-      pointer-events: none;
-    }
-    input[type="text"] {
-      width: 100%;
-      padding: 11px 14px;
-      padding-inline-start: 40px;
-      border-radius: var(--radius-md);
-      border: 1.5px solid #cbd5e1;
-      font-size: 1rem;
-      background: #f9fafb;
-      transition: border-color 0.2s, box-shadow 0.2s, transform 0.12s, background 0.2s;
-    }
-    input[type="text"]::placeholder {
-      color: #9ca3af;
-    }
-    input[type="text"]:focus {
-      outline: none;
-      border-color: var(--primary);
-      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
-      transform: translateY(-1px);
-      background: #ffffff;
-    }
-    .hint {
-      margin-top: 6px;
-      font-size: 0.8rem;
-      color: var(--text-muted);
-    }
-    .result-wrapper {
-      margin-top: 20px;
-    }
-    .result-card {
-      border-radius: var(--radius-md);
-      padding: 14px 14px 12px;
-      border: 1px solid #e2e8f0;
-      background: #f8fafc;
-      min-height: 64px;
-      transition: background 0.25s, border-color 0.25s, transform 0.12s;
-    }
-    .result-header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 12px;
-      margin-bottom: 6px;
-    }
-    .result-title {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      font-size: 0.9rem;
-      color: #475569;
-      font-weight: 600;
-    }
-    .status-dot {
-      width: 9px;
-      height: 9px;
-      border-radius: 999px;
-      background: #9ca3af;
-    }
-    .result-badge {
-      padding: 3px 10px;
-      border-radius: 999px;
-      font-size: 0.75rem;
-      font-weight: 600;
-      background: #e5e7eb;
-      color: #374151;
-    }
-    .result-grid {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 6px 16px;
-      font-size: 0.93rem;
-    }
-    .result-label {
-      color: #6b7280;
-      font-weight: 500;
-    }
-    .result-value {
-      color: #111827;
-      font-weight: 700;
-    }
-    .text-muted-small {
-      font-size: 0.88rem;
-      color: var(--text-muted);
-    }
-    .not-found {
-      color: #b91c1c;
-      font-weight: 700;
-    }
-    .motivation {
-      margin-top: 18px;
-      font-size: 0.86rem;
-      padding: 8px 12px;
-      border-radius: 999px;
-      background: rgba(254, 243, 199, 0.96);
-      border: 1px solid #facc15;
-      color: #92400e;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 8px;
-    }
-    .motivation .icon {
-      font-size: 1rem;
-    }
-    @media (max-width: 480px) {
-      .card {
-        padding: 22px 18px 17px;
-      }
-      .header-text h1 {
-        font-size: 1.25rem;
-      }
-    }
-  </style>
-</head>
-<body>
-  <div class="background-bubbles"></div>
-  <div class="card">
-    <div class="header">
-      <div class="logo-badge">📋</div>
-      <div class="header-text">
-        <h1>استعلام رقم الجلوس</h1>
-        <p>اكتب اسم الطالب ليظهر رقم جلوسه فورًا وبشكل أنيق</p>
-      </div>
-    </div>
-    <div class="form-section">
-      <label for="studentName">اسم الطالب</label>
-      <div class="input-shell">
-        <span class="icon">👤</span>
-        <input
-          id="studentName"
-          type="text"
-          placeholder="مثال: احمد"
-        />
-      </div>
-      <div class="hint">
-        أدخل الاسم كما هو في الكشوف (مثل: احمد، خالد، سعد) وستظهر النتيجة مباشرة أسفل المربع.
-      </div>
-    </div>
-    <div class="result-wrapper">
-      <div id="resultCard" class="result-card">
-        <div id="resultContent" class="text-muted-small">
-          اكتب الاسم في الأعلى لعرض بيانات الطالب…
-        </div>
-      </div>
-    </div>
-    <div class="motivation">
-      <span class="icon">✨</span>
-      <span>نجاحك يبدأ من تنظيمك… نتمنى التوفيق والتميّز لكل طالب وطالبة 🌟</span>
-    </div>
-  </div>
-  <script>
-    // قاعدة البيانات البسيطة (يمكنك التعديل والإضافة هنا)
-    const students = {
-      "احمد": 1,
-      "أحمد": 1, // دعم الهمزة
-      "خالد": 2,
-      "سعد": 3
-    };
-    const input = document.getElementById("studentName");
-    const resultCard = document.getElementById("resultCard");
-    const resultContent = document.getElementById("resultContent");
-    function renderEmpty() {
-      resultCard.style.background = "#f8fafc";
-      resultCard.style.borderColor = "#e2e8f0";
-      resultCard.style.transform = "translateY(0)";
-      resultContent.className = "text-muted-small";
-      resultContent.innerHTML = "اكتب الاسم في الأعلى لعرض بيانات الطالب…";
-    }
-    function updateResult() {
-      const name = input.value.trim();
-      if (!name) {
-        renderEmpty();
-        return;
-      }
-      const seat = students[name];
-      if (seat !== undefined) {
-        resultCard.style.background = "#ecfdf5";
-        resultCard.style.borderColor = "#4ade80";
-        resultCard.style.transform = "translateY(-1px)";
-        resultContent.className = "";
-        resultContent.innerHTML = `
-          <div class="result-header">
-            <div class="result-title">
-              <span class="status-dot" style="background:#22c55e;"></span>
-              <span>تم العثور على بيانات الطالب</span>
-            </div>
-            <div class="result-badge">سجل مُطابق</div>
-          </div>
-          <div class="result-grid">
-            <div class="result-label">اسم الطالب</div>
-            <div class="result-value">${name}</div>
-            <div class="result-label">رقم الجلوس</div>
-            <div class="result-value">${seat}</div>
-          </div>
-        `;
-      } else {
-        resultCard.style.background = "#fef2f2";
-        resultCard.style.borderColor = "#fecaca";
-        resultCard.style.transform = "translateY(-1px)";
-        resultContent.className = "";
-        resultContent.innerHTML = `
-          <div class="result-header">
-            <div class="result-title">
-              <span class="status-dot" style="background:#ef4444;"></span>
-              <span class="not-found">لم يتم العثور على الاسم</span>
-            </div>
-            <div class="result-badge" style="background:#fee2e2;color:#991b1b;">تحقق من الإملاء</div>
-          </div>
-          <div class="text-muted-small" style="margin-top:4px;">
-            تأكد من كتابة الاسم كما هو مسجّل في كشف الأسماء، بدون زيادات أو رموز.
-          </div>
-        `;
-      }
-    }
-    input.addEventListener("input", updateResult);
-    input.addEventListener("change", updateResult);
-  </script>
-</body>
-</html>