File size: 6,267 Bytes
658ff35 e9af8e8 59856af e9af8e8 dba6001 e9af8e8 ab3bd11 e9af8e8 ab3bd11 e9af8e8 ab3bd11 e9af8e8 dba6001 e9af8e8 ab3bd11 e9af8e8 ab3bd11 e9af8e8 ab3bd11 e9af8e8 ab3bd11 dba6001 e9af8e8 ab3bd11 e9af8e8 ab3bd11 e9af8e8 ab3bd11 e9af8e8 ab3bd11 e9af8e8 dba6001 e9af8e8 ab3bd11 e9af8e8 ab3bd11 e9af8e8 ab3bd11 e9af8e8 ab3bd11 e9af8e8 ab3bd11 e9af8e8 ab3bd11 e9af8e8 ab3bd11 e9af8e8 633e8c5 ab3bd11 633e8c5 e9af8e8 ab3bd11 e9af8e8 dba6001 e9af8e8 658ff35 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 | <!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>
|