|
|
| <!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{ |
| --primary:#4137A8; |
| --secondary:#1CADE4; |
| --muted:#5C6E88; |
| --bg:#F6F8FC; |
| --text:#0B1324; |
| --line:#E7ECF5; |
| --radius:22px; |
| --shadow: 0 18px 55px rgba(51,91,116,.12); |
| --shadow2: 0 10px 26px rgba(51,91,116,.10); |
| --focus: 0 0 0 6px rgba(28,173,228,.18); |
| --maxw: 1100px; |
| } |
| *{box-sizing:border-box} |
| html,body{height:100%} |
| body{ |
| margin:0; |
| font-family: system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif; |
| color:var(--text); |
| background: |
| radial-gradient(900px 520px at 18% 10%, rgba(65,55,168,.12), rgba(65,55,168,0) 60%), |
| radial-gradient(900px 520px at 82% 12%, rgba(28,173,228,.14), rgba(28,173,228,0) 60%), |
| linear-gradient(180deg, #ffffff, var(--bg)); |
| display:flex; |
| flex-direction:column; |
| overflow-x:hidden; |
| } |
| .wrap{ |
| width:min(var(--maxw), 92vw); |
| margin:0 auto; |
| padding:26px 0 92px; |
| flex:1; |
| display:flex; |
| flex-direction:column; |
| gap:14px; |
| } |
| header{ |
| display:flex; |
| align-items:center; |
| justify-content:space-between; |
| gap:12px; |
| flex-wrap:wrap; |
| padding-top:4px; |
| } |
| .title{display:flex;align-items:center;gap:12px} |
| .logo{ |
| width:44px;height:44px;border-radius:16px; |
| background: |
| radial-gradient(16px 16px at 28% 26%, rgba(255,255,255,.9), rgba(255,255,255,0) 60%), |
| linear-gradient(135deg, var(--primary), var(--secondary)); |
| box-shadow: var(--shadow2); |
| flex:0 0 auto; |
| } |
| h1{ |
| margin:0; |
| font-size:18px; |
| letter-spacing:.2px; |
| color:var(--primary); |
| font-weight:850; |
| line-height:1; |
| } |
| .chip,.pill,.tag{ |
| display:inline-flex; |
| align-items:center; |
| gap:8px; |
| white-space:nowrap; |
| background:#fff; |
| border:1px solid rgba(231,236,245,.95); |
| box-shadow:0 10px 26px rgba(51,91,116,.07); |
| } |
| .chip{ |
| padding:10px 12px; |
| border-radius:999px; |
| border-color:rgba(28,173,228,.22); |
| background:linear-gradient(180deg, #ffffff, rgba(28,173,228,.08)); |
| color:var(--muted); |
| font-size:12.5px; |
| } |
| .chip b{color:var(--primary);font-weight:900} |
| .card{ |
| border-radius:var(--radius); |
| background:rgba(255,255,255,.92); |
| border:1px solid var(--line); |
| box-shadow:var(--shadow); |
| overflow:hidden; |
| position:relative; |
| } |
| .card::before{ |
| content:""; |
| position:absolute; inset:-2px; |
| background: |
| radial-gradient(420px 260px at 15% 0%, rgba(65,55,168,.10), rgba(65,55,168,0) 60%), |
| radial-gradient(460px 280px at 85% 8%, rgba(28,173,228,.10), rgba(28,173,228,0) 62%); |
| pointer-events:none; |
| } |
| .inner{position:relative;padding:18px} |
| .panel{ |
| width:min(980px, 100%); |
| margin:0 auto; |
| display:grid; |
| gap:12px; |
| padding:6px 0 2px; |
| } |
| .row{ |
| display:grid; |
| grid-template-columns:minmax(0,1fr) auto; |
| gap:10px; |
| align-items:stretch; |
| } |
| .field{ |
| display:flex; |
| align-items:center; |
| gap:10px; |
| background:#fff; |
| border:1px solid rgba(231,236,245,.95); |
| border-radius:18px; |
| padding:10px 12px; |
| box-shadow:0 10px 26px rgba(51,91,116,.07); |
| transition: box-shadow .2s ease, border-color .2s ease; |
| } |
| .field:focus-within{ |
| border-color:rgba(28,173,228,.45); |
| box-shadow: var(--focus), 0 10px 26px rgba(51,91,116,.10); |
| } |
| .fieldIcon{ |
| width:14px;height:14px;border-radius:50%; |
| background: |
| radial-gradient(circle at 30% 30%, #fff, rgba(255,255,255,0) 55%), |
| linear-gradient(180deg, var(--secondary), var(--primary)); |
| box-shadow:0 0 0 4px rgba(28,173,228,.10); |
| flex:0 0 auto; |
| } |
| input{ |
| width:100%;border:none;outline:none;font-size:14px;background:transparent;color:var(--text); |
| } |
| .btnGroup{display:flex;gap:10px;align-items:stretch} |
| .btn{ |
| border:none;cursor:pointer;border-radius:16px;padding:10px 14px;font-weight:800;font-size:13px; |
| box-shadow:0 12px 30px rgba(51,91,116,.10);transition:transform .08s ease, opacity .2s ease;white-space:nowrap; |
| } |
| .btn.primary{background:linear-gradient(135deg, var(--primary), var(--secondary));color:#fff} |
| .btn.secondary{background:#fff;border:1px solid rgba(231,236,245,.95);color:var(--muted)} |
| .btn:active{transform:translateY(1px)} |
| .btn:hover{opacity:.93} |
| .meta{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap} |
| .pill{padding:8px 10px;border-radius:999px;color:var(--muted);font-size:12.5px} |
| .results{display:grid;gap:12px} |
| .empty{ |
| white-space:pre-line;text-align:center;color:var(--muted);background:#fff;border:1px dashed rgba(92,110,136,.35); |
| border-radius:18px;padding:18px 12px; |
| } |
| .tableWrap{ |
| background:#fff;border:1px solid rgba(231,236,245,.95);border-radius:18px;overflow:auto; |
| box-shadow:0 10px 26px rgba(51,91,116,.07); |
| } |
| table{width:100%;border-collapse:separate;border-spacing:0;min-width:860px;font-size:13px} |
| thead th{ |
| position:sticky;top:0;background:linear-gradient(180deg, #ffffff, rgba(28,173,228,.06));color:var(--primary); |
| text-align:right;padding:12px 10px;border-bottom:1px solid rgba(231,236,245,.95);font-weight:900;white-space:nowrap;z-index:2; |
| } |
| tbody td{padding:10px 10px;border-bottom:1px solid rgba(231,236,245,.75);color:var(--text);vertical-align:top} |
| tbody tr:hover td{background:rgba(28,173,228,.04)} |
| .tag{padding:4px 10px;border-radius:999px;color:var(--muted);font-weight:800;font-size:12px} |
| .tag.ok{border-color:rgba(0,176,80,.22);background:rgba(0,176,80,.06);color:#0A6A35} |
| .tag.warn{border-color:rgba(255,192,0,.28);background:rgba(255,192,0,.10);color:#7A5A00} |
| .tag.info{border-color:rgba(65,55,168,.18);background:rgba(65,55,168,.06);color:var(--primary)} |
| footer{ |
| position:fixed;left:0;right:0;bottom:0;text-align:center;padding:10px 14px;background:rgba(255,255,255,.82); |
| border-top:1px solid rgba(231,236,245,.95);backdrop-filter:blur(10px);color:var(--muted);font-size:12.5px;z-index:40; |
| } |
| footer b{color:var(--primary);font-weight:900} |
| @media (max-width: 720px){ |
| .row{grid-template-columns:1fr} |
| .btnGroup{width:100%} |
| .btn{flex:1} |
| table{min-width:700px} |
| } |
| </style> |
| </head> |
| <body> |
| <div class="wrap"> |
| <header> |
| <div class="title"> |
| <div class="logo" aria-hidden="true"></div> |
| <h1>تفاصيل عينات الباحثين بمسح الهيكلي</h1> |
| </div> |
| <div class="chip" id="totalChip">إجمالي السجلات: <b>—</b></div> |
| </header> |
|
|
| <section class="card" aria-label="search"> |
| <div class="inner"> |
| <div class="panel"> |
| <div class="row"> |
| <div class="field" aria-label="search field"> |
| <div class="fieldIcon" aria-hidden="true"></div> |
| <input id="q" type="text" inputmode="search" autocomplete="off" placeholder="اكتب اسمك (يقبل جزء من الاسم)..." /> |
| </div> |
| <div class="btnGroup" aria-label="button group"> |
| <button id="btnSearch" class="btn primary" type="button">بحث</button> |
| <button id="btnClear" class="btn secondary" type="button">مسح</button> |
| </div> |
| </div> |
|
|
| <div class="meta"> |
| <div class="pill" id="countPill">النتائج: 0</div> |
| <div class="pill" id="summaryPill">—</div> |
| </div> |
|
|
| <div class="results" id="results" aria-live="polite"></div> |
| </div> |
| </div> |
| </section> |
| </div> |
|
|
| <footer>تصميم وإعداد <b>نوف الناصر</b></footer> |
|
|
| <script src="./data.js"></script> |
| <script src="./script.js"></script> |
| </body> |
| </html> |
