Spaces:

stat2025
/

MapSearch

Running

App Files Files Community

stat2025 commited on Dec 29, 2025

Commit

8c4683e

verified ·

1 Parent(s): 939b033

Update index.html

Browse files

Files changed (1) hide show

index.html +369 -19

index.html CHANGED Viewed

@@ -1,19 +1,369 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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>