|
|
<!doctype html> |
|
|
<html lang="ar" dir="rtl"> |
|
|
<head> |
|
|
<meta charset="utf-8"/> |
|
|
<meta name="viewport" content="width=device-width,initial-scale=1"/> |
|
|
|
|
|
<title>Nouf Alnasser</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=Cairo:wght@400;600;700&family=Tajawal:wght@400;700;800&display=swap" rel="stylesheet"> |
|
|
|
|
|
<link rel="stylesheet" href="./style.css"/> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<div id="lockOverlay" class="lock-overlay" aria-hidden="true"> |
|
|
<div class="lock-card"> |
|
|
<h2>تأكيد الدخول</h2> |
|
|
<p class="muted">أدخل الرقم السري</p> |
|
|
<input id="lockInput" type="password" inputmode="numeric" placeholder="••••" maxlength="10" /> |
|
|
<div class="actions"> |
|
|
<button id="lockBtn" class="primary">دخول</button> |
|
|
</div> |
|
|
<div id="lockErr" class="err"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<header class="topbar center"> |
|
|
<h1>تصميم واعداد نوف الناصر</h1> |
|
|
</header> |
|
|
|
|
|
<main class="container center"> |
|
|
|
|
|
<section class="card"> |
|
|
<h2>الملف</h2> |
|
|
<div class="upload-wrap"> |
|
|
|
|
|
<div id="dropArea" class="drop-area" tabindex="0" role="button" aria-label="رفع ملف Excel" data-role="drop"> |
|
|
<input id="fileInput" type="file" accept=".xlsx,.xls" hidden> |
|
|
<div class="drop-inner"> |
|
|
<div class="icon">📄</div> |
|
|
<div class="title">اسحب وأفلِت هنا</div> |
|
|
<div class="hint">أو اضغط لاختيار ملف Excel</div> |
|
|
</div> |
|
|
</div> |
|
|
<button id="chooseBtn" class="secondary" data-role="choose">اختيار ملف</button> |
|
|
</div> |
|
|
<div id="fileName" class="muted" style="margin-top:6px"></div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="card"> |
|
|
<h2>الإعدادات</h2> |
|
|
<div class="grid-2"> |
|
|
<div> |
|
|
<label for="monthSelect">الشهر</label> |
|
|
<select id="monthSelect"><option value="">الكل</option></select> |
|
|
</div> |
|
|
<div> |
|
|
<label for="weekSelect">الأسبوع</label> |
|
|
<select id="weekSelect"><option value="">الكل</option></select> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<details id="advDetails" class="adv"> |
|
|
<summary>إعدادات متقدمة (اختياري)</summary> |
|
|
<div class="grid-3 cols"> |
|
|
<div> |
|
|
<label for="colComplete">عمود “مكتمل”</label> |
|
|
<select id="colComplete"></select> |
|
|
</div> |
|
|
<div> |
|
|
<label for="colFullfilled">عمود “استوفيت كليًا”</label> |
|
|
<select id="colFullfilled"></select> |
|
|
</div> |
|
|
<div> |
|
|
<label for="colInspectorNo">عمود “رقم المفتش” (اختياري)</label> |
|
|
<select id="colInspectorNo"></select> |
|
|
</div> |
|
|
</div> |
|
|
<div class="grid-3 cols" style="margin-top:10px"> |
|
|
<div> |
|
|
<label for="colInspectorName">عمود “اسم المفتش”</label> |
|
|
<select id="colInspectorName"></select> |
|
|
</div> |
|
|
<div> |
|
|
<label for="colResearcher">عمود “اسم الباحث”</label> |
|
|
<select id="colResearcher"></select> |
|
|
</div> |
|
|
<div> |
|
|
<label for="colPublicId">عمود “المعرّف العام”</label> |
|
|
<select id="colPublicId"></select> |
|
|
</div> |
|
|
</div> |
|
|
<div class="grid-3 cols" style="margin-top:10px"> |
|
|
<div> |
|
|
<label for="colWeek">عمود “الأسبوع”</label> |
|
|
<select id="colWeek"></select> |
|
|
</div> |
|
|
<div> |
|
|
<label for="colMonth">عمود “الشهر”</label> |
|
|
<select id="colMonth"></select> |
|
|
</div> |
|
|
<div> |
|
|
<label for="colRegion">عمود “منطقة العد”</label> |
|
|
<select id="colRegion"></select> |
|
|
</div> |
|
|
</div> |
|
|
<div class="actions center" style="margin-top:10px"> |
|
|
<button id="saveCols" class="primary">حفظ الأعمدة</button> |
|
|
<button id="resetCols">إعادة الافتراضيات</button> |
|
|
</div> |
|
|
</details> |
|
|
|
|
|
<div class="actions center" style="margin-top:12px"> |
|
|
<button id="btnProcess" class="primary">تنفيذ التصفية</button> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="card"> |
|
|
<h2>التنزيل</h2> |
|
|
<div class="actions center"> |
|
|
<button id="btnDownloadPerInspector">تحميل ملفات متعددة (ملف لكل مفتش)</button> |
|
|
<button id="btnDownloadMaster" class="secondary">تحميل ملف مُجمّع (ورقة لكل مفتش)</button> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="card"> |
|
|
<div class="flex-between"> |
|
|
<h2>المفتشون</h2> |
|
|
<div id="stats" class="muted">لم يتم رفع ملف بعد.</div> |
|
|
</div> |
|
|
<div id="noData" class="muted" style="display:none">لا توجد بيانات مطابقة.</div> |
|
|
|
|
|
|
|
|
<div id="cards" class="grid"></div> |
|
|
</section> |
|
|
</main> |
|
|
|
|
|
<footer class="footer center muted">تصميم وإعداد الدعم الفني نوف الناصر</footer> |
|
|
|
|
|
<div id="toast" class="toast" role="status"></div> |
|
|
|
|
|
<script src="./app.js" type="module"></script> |
|
|
</body> |
|
|
</html> |
