| <!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="#4137A8" /> |
| <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;700;800&display=swap" |
| rel="stylesheet" |
| /> |
| <link rel="stylesheet" href="style.css" /> |
| </head> |
| <body> |
| <main> |
| <section id="loginView" class="login-view"> |
| <form id="loginForm" class="login-card" autocomplete="off"> |
| <div class="brand-mark" aria-hidden="true"> |
| <svg viewBox="0 0 24 24"><path d="M4 20V8l8-4 8 4v12H4Z" /><path d="M8 20v-7h8v7" /></svg> |
| </div> |
| <p class="eyebrow">نظام الاستعلام</p> |
| <h1>شاشة استعلام</h1> |
| <p class="login-description">أدخل رمز الدخول للمتابعة.</p> |
|
|
| <label for="password">رمز الدخول</label> |
| <div class="password-field"> |
| <input id="password" type="password" inputmode="numeric" placeholder="رمز الدخول" required autofocus /> |
| <button id="togglePassword" type="button" class="icon-button" aria-label="إظهار رمز الدخول"> |
| <svg viewBox="0 0 24 24"><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"><path d="m9 18 6-6-6-6" /></svg> |
| </button> |
| </form> |
| </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 24 24"><path d="M4 20V8l8-4 8 4v12H4Z" /><path d="M8 20v-7h8v7" /></svg> |
| </div> |
| <div> |
| <p>نظام الاستعلام</p> |
| <h1>شاشة استعلام</h1> |
| </div> |
| </div> |
| <button id="logoutButton" class="secondary-button compact" type="button"> |
| <svg viewBox="0 0 24 24"><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="summary-panel"> |
| <div class="summary-copy"> |
| <p class="eyebrow">لوحة الاستعلام</p> |
| <h2>اختر المنطقة والمدينة الصناعية أو ابحث باسم المنشأة مباشرة</h2> |
| </div> |
| </section> |
|
|
| <section class="controls-panel"> |
| <div class="filters-grid"> |
| <div class="field-group region-group"> |
| <span class="field-label">المنطقة</span> |
| <div id="regionButtons" class="region-buttons" role="radiogroup" aria-label="اختيار المنطقة"></div> |
| <select id="regionSelect" class="region-select-hidden" aria-hidden="true" tabindex="-1"> |
| <option value="">اختر المنطقة</option> |
| </select> |
| </div> |
|
|
| <div class="field-group"> |
| <label for="citySelect">المدينة الصناعية</label> |
| <div class="select-wrap"> |
| <select id="citySelect" disabled><option value="">اختر المدينة الصناعية</option></select> |
| <svg viewBox="0 0 24 24"><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"><circle cx="11" cy="11" r="7" /><path d="m20 20-4-4" /></svg> |
| <input id="searchInput" type="search" placeholder="ابحث باسم المنشأة أو السجل التجاري" /> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="filters-actions"> |
| <button id="clearFiltersButton" class="clear-filters-button" type="button"> |
| <svg viewBox="0 0 24 24"><path d="M18 6 6 18M6 6l12 12" /></svg> |
| مسح الاختيارات |
| </button> |
| </div> |
| </section> |
|
|
| <section id="emptyState" class="empty-state"> |
| <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> |
| </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>إعداد نوف الناصر</footer> |
| <div id="toast" class="toast" role="status" aria-live="polite"></div> |
|
|
| <script src="data.js"></script> |
| <script src="app.js"></script> |
| </body> |
| </html> |
|
|
