| <!doctype html> |
| <html lang="ar" dir="rtl"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| <meta name="theme-color" content="#123c69" /> |
| <meta name="robots" content="noindex, nofollow" /> |
| <title>نظام متابعة العينات</title> |
| <link rel="preconnect" href="https://fonts.googleapis.com" /> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> |
| <link |
| href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;600;700;800&display=swap" |
| rel="stylesheet" |
| /> |
| <link rel="stylesheet" href="style.css" /> |
| </head> |
| <body> |
| <div class="background-shape shape-one"></div> |
| <div class="background-shape shape-two"></div> |
|
|
| <main> |
| <section id="loginView" class="login-view"> |
| <div class="login-card"> |
| <div class="brand-mark" aria-hidden="true"> |
| <svg viewBox="0 0 48 48" role="img"> |
| <path d="M24 4 42 14v20L24 44 6 34V14L24 4Z" /> |
| <path d="M16 25.5 21.5 31 33 18.5" /> |
| </svg> |
| </div> |
| <p class="eyebrow">بوابة العمل الميداني</p> |
| <h1>نظام متابعة العينات</h1> |
| <p class="login-description"> |
| أدخل رمز الدخول للوصول إلى بيانات التواصل ومتابعة حالات العينات. |
| </p> |
|
|
| <form id="loginForm" class="login-form" autocomplete="off"> |
| <label for="password">رمز الدخول</label> |
| <div class="password-field"> |
| <input |
| id="password" |
| name="password" |
| type="password" |
| inputmode="numeric" |
| placeholder="أدخل رمز الدخول" |
| required |
| autofocus |
| /> |
| <button id="togglePassword" type="button" class="icon-button" aria-label="إظهار رمز الدخول"> |
| <svg viewBox="0 0 24 24" aria-hidden="true"> |
| <path d="M2.5 12s3.5-6 9.5-6 9.5 6 9.5 6-3.5 6-9.5 6-9.5-6-9.5-6Z" /> |
| <circle cx="12" cy="12" r="2.8" /> |
| </svg> |
| </button> |
| </div> |
| <p id="loginError" class="form-error" role="alert"></p> |
| <button id="loginButton" class="primary-button" type="submit"> |
| <span>دخول آمن</span> |
| <svg viewBox="0 0 24 24" aria-hidden="true"> |
| <path d="m9 18 6-6-6-6" /> |
| </svg> |
| </button> |
| </form> |
|
|
| <div class="security-note"> |
| <svg viewBox="0 0 24 24" aria-hidden="true"> |
| <rect x="5" y="10" width="14" height="10" rx="2" /> |
| <path d="M8 10V7a4 4 0 0 1 8 0v3" /> |
| </svg> |
| <span>البيانات مشفرة ولا تُعرض قبل تسجيل الدخول.</span> |
| </div> |
| </div> |
| </section> |
|
|
| <section id="dashboardView" class="dashboard-view" hidden> |
| <header class="topbar"> |
| <div class="topbar-brand"> |
| <div class="brand-mark small" aria-hidden="true"> |
| <svg viewBox="0 0 48 48"> |
| <path d="M24 4 42 14v20L24 44 6 34V14L24 4Z" /> |
| <path d="M16 25.5 21.5 31 33 18.5" /> |
| </svg> |
| </div> |
| <div> |
| <p>بوابة العمل الميداني</p> |
| <h1>نظام متابعة العينات</h1> |
| </div> |
| </div> |
| <button id="logoutButton" class="secondary-button compact" type="button"> |
| <svg viewBox="0 0 24 24" aria-hidden="true"> |
| <path d="M10 17l5-5-5-5M15 12H3M15 4h4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-4" /> |
| </svg> |
| خروج |
| </button> |
| </header> |
|
|
| <div class="dashboard-shell"> |
| <section class="welcome-panel"> |
| <div> |
| <p class="eyebrow">لوحة الاستعلام</p> |
| <h2>الوصول إلى بيانات العينة بسهولة</h2> |
| <p>ابحث مباشرة، أو اختر المشرف لعرض عيناته ثم حدّد الباحث عند الحاجة.</p> |
| </div> |
| <div class="privacy-pill"> |
| <span class="status-dot"></span> |
| جلسة خاصة |
| </div> |
| </section> |
|
|
| <section class="controls-card"> |
| <div class="filters-grid"> |
| <div class="field-group"> |
| <label for="supervisorSelect">اسم المشرف</label> |
| <div class="select-wrap"> |
| <select id="supervisorSelect"> |
| <option value="">اختر المشرف</option> |
| </select> |
| <svg viewBox="0 0 24 24" aria-hidden="true"><path d="m7 10 5 5 5-5" /></svg> |
| </div> |
| </div> |
|
|
| <div class="field-group"> |
| <label for="researcherSelect">اسم الباحث</label> |
| <div class="select-wrap"> |
| <select id="researcherSelect" disabled> |
| <option value="">اختر الباحث</option> |
| </select> |
| <svg viewBox="0 0 24 24" aria-hidden="true"><path d="m7 10 5 5 5-5" /></svg> |
| </div> |
| </div> |
|
|
| <div class="field-group"> |
| <label for="statusSelect">حالة الاستيفاء</label> |
| <div class="select-wrap"> |
| <select id="statusSelect" disabled> |
| <option value="">جميع الحالات</option> |
| </select> |
| <svg viewBox="0 0 24 24" aria-hidden="true"><path d="m7 10 5 5 5-5" /></svg> |
| </div> |
| </div> |
|
|
| <div class="field-group search-group"> |
| <label for="searchInput">البحث الذكي</label> |
| <div class="search-wrap"> |
| <svg viewBox="0 0 24 24" aria-hidden="true"> |
| <circle cx="11" cy="11" r="7" /> |
| <path d="m20 20-4-4" /> |
| </svg> |
| <input |
| id="searchInput" |
| type="search" |
| placeholder="اسم العينة أو رقم السجل" |
| /> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <section id="emptyState" class="empty-state"> |
| <div class="empty-icon"> |
| <svg viewBox="0 0 48 48" aria-hidden="true"> |
| <path d="M8 13h32v27H8z" /> |
| <path d="M15 8h18v10H15zM15 26h18M15 33h11" /> |
| </svg> |
| </div> |
| <h3>ابحث أو اختر المشرف</h3> |
| <p>اكتب اسم العينة أو رقم السجل مباشرة، أو اختر المشرف لعرض كامل عيناته.</p> |
| </section> |
|
|
| <section id="resultsSection" class="results-section" hidden> |
| <div class="results-header"> |
| <div> |
| <p id="resultsMeta" class="results-meta"></p> |
| <h2 id="resultsTitle">العينات</h2> |
| </div> |
| <button id="copyAllButton" class="primary-button copy-all" type="button"> |
| <svg viewBox="0 0 24 24" aria-hidden="true"> |
| <rect x="8" y="8" width="11" height="11" rx="2" /> |
| <path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2" /> |
| </svg> |
| نسخ جميع عينات الباحث |
| </button> |
| </div> |
|
|
| <div id="statusChips" class="status-chips" aria-label="ملخص الحالات"></div> |
| <div id="samplesGrid" class="samples-grid"></div> |
| <div id="loadMoreWrap" class="load-more-wrap" hidden> |
| <button id="loadMoreButton" class="secondary-button load-more-button" type="button"> |
| عرض المزيد |
| </button> |
| <p id="loadMoreMeta"></p> |
| </div> |
|
|
| <div id="noResults" class="no-results" hidden> |
| <h3>لا توجد نتائج مطابقة</h3> |
| <p>جرّب تغيير حالة الاستيفاء أو عبارة البحث.</p> |
| </div> |
| </section> |
| </div> |
| </section> |
| </main> |
|
|
| <footer id="footer">إعداد نوف الناصر</footer> |
| <div id="toast" class="toast" role="status" aria-live="polite"></div> |
|
|
| <script src="data.js"></script> |
| <script src="app.js"></script> |
| </body> |
| </html> |
|
|
