Hugging Face's logo

Spaces:
stat2025
/
Nof2030
Running

App Files Community
Nof2030
File size: 5,819 Bytes 
8a16319
f3bf432
 
8a16319
 
 
 
 
 
 
 
 
 
 
f3bf432
 
8a16319
 
 
 
 
 
 
 
f3bf432
8a16319
64fec21
8a16319
f3bf432
8a16319
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
f3bf432
8a16319
 
 
 
 
 
 
 
 
 
 
 
 
 
 
f3bf432
 
8a16319
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
f3bf432
8a16319
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
f3bf432
8a16319
f3bf432
8a16319
 
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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
 
<!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>

  <!-- Fonts: Tajawal + Cairo (مثل Nof2030) -->
  <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">
        <!-- دعم dropArea و dropZone -->
        <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>