| <!doctype html> |
| <html lang="ar" dir="rtl"> |
| <head> |
| <meta charset="utf-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| <title>صفحة البحث عن خريطة باحث</title> |
| <style> |
| :root{ |
| --bg:#f7f8fc; |
| --card:#ffffff; |
| --text:#0f172a; |
| --muted:#64748b; |
| --border:#e2e8f0; |
| --shadow:0 10px 30px rgba(2,8,23,.08); |
| --radius:18px; |
| } |
| *{box-sizing:border-box} |
| body{ |
| margin:0; |
| font-family: system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif; |
| background: radial-gradient(1200px 700px at 50% -10%, #e8f0ff 0%, rgba(232,240,255,0) 55%), |
| radial-gradient(900px 600px at 90% 20%, #eafbf3 0%, rgba(234,251,243,0) 55%), |
| var(--bg); |
| color:var(--text); |
| min-height:100vh; |
| display:flex; |
| flex-direction:column; |
| } |
| header{ |
| padding:48px 16px 18px; |
| text-align:center; |
| } |
| h1{ |
| margin:0 0 10px; |
| font-size: clamp(22px, 2.2vw, 34px); |
| letter-spacing:.2px; |
| } |
| p.sub{ |
| margin:0; |
| color:var(--muted); |
| font-size: 15px; |
| line-height: 1.8; |
| } |
| main{ |
| width:min(920px, 92vw); |
| margin: 0 auto; |
| flex:1; |
| padding: 16px 0 90px; |
| } |
| .card{ |
| background:var(--card); |
| border:1px solid var(--border); |
| border-radius:var(--radius); |
| box-shadow:var(--shadow); |
| padding:18px; |
| } |
| .searchRow{ |
| display:flex; |
| gap:10px; |
| align-items:stretch; |
| flex-wrap:wrap; |
| } |
| .inputWrap{ |
| position:relative; |
| flex:1 1 420px; |
| min-width:260px; |
| } |
| input[type="text"]{ |
| width:100%; |
| padding:14px 14px 14px 44px; |
| border:1px solid var(--border); |
| border-radius:14px; |
| outline:none; |
| font-size:16px; |
| background:#fff; |
| } |
| input[type="text"]:focus{ |
| border-color:#93c5fd; |
| box-shadow:0 0 0 4px rgba(59,130,246,.12); |
| } |
| .icon{ |
| position:absolute; |
| left:12px; |
| top:50%; |
| transform:translateY(-50%); |
| color:#94a3b8; |
| pointer-events:none; |
| font-size:18px; |
| } |
| button{ |
| border:1px solid #1d4ed8; |
| background:#1d4ed8; |
| color:#fff; |
| padding: 12px 18px; |
| border-radius:14px; |
| font-size:16px; |
| cursor:pointer; |
| transition: transform .06s ease, opacity .2s ease; |
| flex: 0 0 auto; |
| min-width:120px; |
| } |
| button:active{ transform: translateY(1px); } |
| button.secondary{ |
| border:1px solid var(--border); |
| background:#fff; |
| color:var(--text); |
| min-width:110px; |
| } |
| .meta{ |
| display:flex; |
| justify-content:space-between; |
| align-items:center; |
| gap:12px; |
| flex-wrap:wrap; |
| margin-top:12px; |
| color:var(--muted); |
| font-size:13px; |
| } |
| .badge{ |
| background:#f1f5f9; |
| border:1px solid var(--border); |
| color:#0f172a; |
| padding:6px 10px; |
| border-radius:999px; |
| font-size:12px; |
| } |
| .results{ |
| margin-top:14px; |
| border-top:1px dashed var(--border); |
| padding-top:14px; |
| display:grid; |
| gap:10px; |
| } |
| .item{ |
| display:flex; |
| align-items:center; |
| justify-content:space-between; |
| gap:10px; |
| padding:12px 12px; |
| border:1px solid var(--border); |
| border-radius:14px; |
| background:#fff; |
| } |
| .name{ |
| font-weight:650; |
| font-size:15px; |
| line-height:1.6; |
| } |
| .hint{ |
| color:var(--muted); |
| font-size:13px; |
| margin-top:2px; |
| } |
| a.open{ |
| text-decoration:none; |
| border:1px solid #0ea5e9; |
| color:#0369a1; |
| padding:10px 12px; |
| border-radius:12px; |
| background: #f0f9ff; |
| white-space:nowrap; |
| } |
| a.open:hover{ opacity:.9; } |
| .empty{ |
| text-align:center; |
| color:var(--muted); |
| padding:22px 10px; |
| border:1px dashed var(--border); |
| border-radius:14px; |
| background:#fff; |
| } |
| footer{ |
| position:fixed; |
| bottom:0; |
| left:0; |
| right:0; |
| padding: 10px 14px; |
| text-align:center; |
| color:#475569; |
| font-size:13px; |
| background: rgba(255,255,255,.85); |
| border-top:1px solid var(--border); |
| backdrop-filter: blur(8px); |
| } |
| mark{ |
| background: #fff7ed; |
| padding: 0 4px; |
| border-radius: 6px; |
| } |
| </style> |
| </head> |
| <body> |
| <header> |
| <h1>صفحة البحث عن خريطة باحث</h1> |
| <p class="sub">اكتب اسم الباحث أو جزءًا منه، ثم اختر النتيجة لفتح رابط الخريطة.</p> |
| </header> |
|
|
| <main> |
| <section class="card" aria-label="search"> |
| <div class="searchRow"> |
| <div class="inputWrap"> |
| <span class="icon">🔎</span> |
| <input id="q" type="text" inputmode="search" autocomplete="off" |
| placeholder="مثال: تركي / نوره / المحيفيظ ..." /> |
| </div> |
| <button id="btnSearch" type="button">بحث</button> |
| <button id="btnClear" class="secondary" type="button">مسح</button> |
| </div> |
|
|
| <div class="meta"> |
| <div class="badge" id="countBadge">النتائج: 0</div> |
| <div>يدعم البحث بجزء من الاسم (حتى كلمة واحدة).</div> |
| </div> |
|
|
| <div class="results" id="results" aria-live="polite"></div> |
| </section> |
| </main> |
|
|
| <footer>تصميم وإعداد الدعم الفني نوف الناصر</footer> |
|
|
| <script src="./script.js"></script> |
| </body> |
| </html> |
|
|
