Hugging Face's logo

Spaces:
stat2025
/
MapSearch
Running

App Files Community
stat2025 commited on
Commit
c820a51
·
verified ·
1 Parent(s): cbeb429

Upload 2 files

Browse files
Files changed (2) hide show
  1. index.html +389 -0
  2. script.js +166 -0
index.html ADDED
@@ -0,0 +1,389 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!doctype html>
2
+ <html lang="ar" dir="rtl">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
6
+ <title>بحث الخرائط</title>
7
+ <style>
8
+ :root{
9
+ /* Palette (from user) */
10
+ --p1:#4137A8; /* primary */
11
+ --p2:#1CADE4; /* secondary */
12
+ --p3:#7030A0; /* violet */
13
+ --p4:#27CED7; /* cyan */
14
+ --p5:#42BA97; /* teal */
15
+ --p6:#00B050; /* green */
16
+ --p7:#FFC000; /* yellow */
17
+ --p8:#5C6E88; /* slate */
18
+ --p9:#335B74; /* bluegray */
19
+ --pr:#F5554A; /* red */
20
+
21
+ --bg:#f5f7fb;
22
+ --card:#ffffff;
23
+ --text:#0b1324;
24
+ --muted:#5c6e88;
25
+ --line:#e7ecf5;
26
+ --shadow: 0 18px 55px rgba(51,91,116,.12);
27
+ --shadow2: 0 10px 28px rgba(51,91,116,.10);
28
+ --radius: 22px;
29
+ --focus: 0 0 0 6px rgba(28,173,228,.18);
30
+ }
31
+
32
+ *{box-sizing:border-box}
33
+ html,body{height:100%}
34
+ body{
35
+ margin:0;
36
+ font-family: system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
37
+ color:var(--text);
38
+ background:
39
+ radial-gradient(900px 520px at 18% 10%, rgba(65,55,168,.14), rgba(65,55,168,0) 60%),
40
+ radial-gradient(900px 520px at 82% 12%, rgba(28,173,228,.16), rgba(28,173,228,0) 60%),
41
+ radial-gradient(900px 520px at 50% 108%, rgba(66,186,151,.12), rgba(66,186,151,0) 55%),
42
+ linear-gradient(180deg, #ffffff, var(--bg));
43
+ display:flex;
44
+ flex-direction:column;
45
+ overflow-x:hidden;
46
+ }
47
+
48
+ .wrap{
49
+ width:min(980px, 92vw);
50
+ margin:0 auto;
51
+ padding: 38px 0 92px;
52
+ flex:1;
53
+ display:flex;
54
+ flex-direction:column;
55
+ gap: 16px;
56
+ }
57
+
58
+ /* Simple top */
59
+ .top{
60
+ display:flex;
61
+ align-items:center;
62
+ justify-content:space-between;
63
+ gap:12px;
64
+ flex-wrap:wrap;
65
+ }
66
+ .brand{
67
+ display:flex;
68
+ align-items:center;
69
+ gap:12px;
70
+ }
71
+ .logo{
72
+ width:44px;height:44px;border-radius:16px;
73
+ background:
74
+ radial-gradient(16px 16px at 28% 26%, rgba(255,255,255,.9), rgba(255,255,255,0) 60%),
75
+ linear-gradient(135deg, var(--p1), var(--p2));
76
+ box-shadow: var(--shadow2);
77
+ }
78
+ .brand h1{
79
+ margin:0;
80
+ font-size:18px;
81
+ letter-spacing:.2px;
82
+ }
83
+ .chip{
84
+ display:inline-flex;
85
+ align-items:center;
86
+ gap:8px;
87
+ padding: 10px 12px;
88
+ border-radius:999px;
89
+ border:1px solid rgba(28,173,228,.22);
90
+ background: linear-gradient(180deg, #ffffff, rgba(28,173,228,.08));
91
+ color: var(--p9);
92
+ font-size: 12.5px;
93
+ box-shadow: 0 10px 24px rgba(51,91,116,.10);
94
+ white-space:nowrap;
95
+ }
96
+ .chip b{font-weight:850;color:var(--p1)}
97
+
98
+ /* Main card */
99
+ .card{
100
+ position:relative;
101
+ border-radius: var(--radius);
102
+ background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.82));
103
+ border: 1px solid var(--line);
104
+ box-shadow: var(--shadow);
105
+ overflow:hidden;
106
+ }
107
+ .card::before{
108
+ content:"";
109
+ position:absolute; inset:-2px;
110
+ background:
111
+ radial-gradient(420px 260px at 15% 0%, rgba(112,48,160,.10), rgba(112,48,160,0) 60%),
112
+ radial-gradient(460px 280px at 85% 8%, rgba(28,206,215,.10), rgba(28,206,215,0) 62%);
113
+ pointer-events:none;
114
+ }
115
+ .inner{
116
+ position:relative;
117
+ padding: 20px 18px 18px;
118
+ }
119
+
120
+ /* Centered search fields */
121
+ .searchWrap{
122
+ display:flex;
123
+ justify-content:center;
124
+ }
125
+ .searchPanel{
126
+ width:min(820px, 100%);
127
+ display:grid;
128
+ gap:12px;
129
+ padding-top: 6px;
130
+ }
131
+ .row{
132
+ display:grid;
133
+ grid-template-columns: 1fr auto auto;
134
+ gap: 12px;
135
+ align-items:stretch;
136
+ justify-items:center;
137
+ }
138
+ @media(max-width: 720px){
139
+ .row{ grid-template-columns: 1fr; }
140
+ .chip{ display:none; }
141
+ }
142
+ .field{
143
+ width:100%;
144
+ background:#fff;
145
+ border:1px solid var(--line);
146
+ border-radius: 18px;
147
+ box-shadow: 0 10px 26px rgba(51,91,116,.10);
148
+ padding: 14px;
149
+ display:flex;
150
+ align-items:center;
151
+ gap: 10px;
152
+ justify-content:center;
153
+ }
154
+ .fieldIcon{
155
+ width:38px;height:38px;border-radius:14px;
156
+ display:grid;place-items:center;
157
+ background: linear-gradient(135deg, rgba(65,55,168,.10), rgba(28,173,228,.10));
158
+ border: 1px solid rgba(65,55,168,.12);
159
+ color: var(--p1);
160
+ font-size: 18px;
161
+ flex:0 0 auto;
162
+ }
163
+ input{
164
+ width:100%;
165
+ border:none;
166
+ outline:none;
167
+ font-size:16px;
168
+ padding: 0;
169
+ background:transparent;
170
+ text-align:center;
171
+ color: var(--text);
172
+ }
173
+ input::placeholder{ color: #94a3b8; }
174
+
175
+ .btn{
176
+ height: 66px;
177
+ min-width: 140px;
178
+ border-radius: 18px;
179
+ border:1px solid transparent;
180
+ cursor:pointer;
181
+ font-size: 15px;
182
+ font-weight: 850;
183
+ display:flex;
184
+ align-items:center;
185
+ justify-content:center;
186
+ gap:10px;
187
+ box-shadow: 0 10px 26px rgba(51,91,116,.10);
188
+ transition: transform .06s ease, opacity .2s ease;
189
+ user-select:none;
190
+ }
191
+ .btn:active{ transform: translateY(1px); }
192
+ .btn.primary{
193
+ color:#fff;
194
+ background: linear-gradient(135deg, var(--p1), var(--p2));
195
+ }
196
+ .btn.ghost{
197
+ background:#fff;
198
+ border-color: var(--line);
199
+ color: var(--p9);
200
+ }
201
+ .btn:hover{ opacity:.94; }
202
+
203
+ .meta{
204
+ display:flex;
205
+ align-items:center;
206
+ justify-content:space-between;
207
+ gap: 10px;
208
+ flex-wrap:wrap;
209
+ color: var(--muted);
210
+ font-size: 13px;
211
+ margin-top: 4px;
212
+ padding: 0 4px;
213
+ }
214
+ .meta .pill{
215
+ display:inline-flex;
216
+ align-items:center;
217
+ gap:8px;
218
+ padding: 8px 10px;
219
+ border-radius: 999px;
220
+ border: 1px solid rgba(0,176,80,.20);
221
+ background: linear-gradient(180deg, #ffffff, rgba(0,176,80,.08));
222
+ color: #0a5a32;
223
+ font-weight: 800;
224
+ }
225
+
226
+ /* Results */
227
+ .results{
228
+ margin-top: 10px;
229
+ display:grid;
230
+ gap: 10px;
231
+ }
232
+ .result{
233
+ background:#fff;
234
+ border:1px solid var(--line);
235
+ border-radius: 18px;
236
+ padding: 14px;
237
+ box-shadow: 0 10px 26px rgba(51,91,116,.10);
238
+ display:flex;
239
+ align-items:center;
240
+ justify-content:space-between;
241
+ gap: 12px;
242
+ }
243
+ .left{min-width:0;display:flex;flex-direction:column;gap:2px}
244
+ .name{
245
+ font-weight: 900;
246
+ font-size: 15.5px;
247
+ line-height:1.7;
248
+ white-space:nowrap;
249
+ overflow:hidden;
250
+ text-overflow:ellipsis;
251
+ max-width: 66ch;
252
+ }
253
+ .actions{
254
+ display:flex;
255
+ gap: 8px;
256
+ flex-wrap:wrap;
257
+ justify-content:flex-end;
258
+ }
259
+
260
+ .openBtn, .copyBtn{
261
+ border-radius: 14px;
262
+ padding: 10px 12px;
263
+ border: 1px solid transparent;
264
+ font-size: 13.5px;
265
+ font-weight: 900;
266
+ cursor:pointer;
267
+ display:inline-flex;
268
+ align-items:center;
269
+ gap: 8px;
270
+ white-space:nowrap;
271
+ transition: transform .06s ease, opacity .2s ease;
272
+ user-select:none;
273
+ text-decoration:none;
274
+ }
275
+ .openBtn{
276
+ color:#fff;
277
+ background: linear-gradient(135deg, var(--p3), var(--p1));
278
+ box-shadow: 0 10px 22px rgba(112,48,160,.18);
279
+ }
280
+ .copyBtn{
281
+ color:#0b1324;
282
+ background: linear-gradient(135deg, rgba(255,255,255,1), rgba(0,176,80,.12));
283
+ border-color: rgba(0,176,80,.22);
284
+ }
285
+ .openBtn:active,.copyBtn:active{ transform: translateY(1px); }
286
+ .openBtn:hover,.copyBtn:hover{ opacity:.93; }
287
+
288
+ mark{
289
+ background: rgba(28,173,228,.12);
290
+ border: 1px solid rgba(28,173,228,.16);
291
+ color: var(--p1);
292
+ padding: 1px 6px;
293
+ border-radius: 999px;
294
+ }
295
+
296
+ .empty{
297
+ text-align:center;
298
+ color: var(--muted);
299
+ background:#fff;
300
+ border: 1px dashed rgba(92,110,136,.35);
301
+ border-radius: 18px;
302
+ padding: 18px 12px;
303
+ }
304
+
305
+ /* Toast */
306
+ .toast{
307
+ position:fixed;
308
+ left:50%;
309
+ bottom: 78px;
310
+ transform: translateX(-50%) translateY(14px);
311
+ background: rgba(51,91,116,.92);
312
+ color:#fff;
313
+ padding: 10px 14px;
314
+ border-radius: 999px;
315
+ box-shadow: 0 18px 45px rgba(0,0,0,.14);
316
+ opacity:0;
317
+ pointer-events:none;
318
+ transition: opacity .22s ease, transform .22s ease;
319
+ font-size: 13px;
320
+ display:flex;
321
+ align-items:center;
322
+ gap:8px;
323
+ z-index: 50;
324
+ }
325
+ .toast.show{
326
+ opacity:1;
327
+ transform: translateX(-50%) translateY(0);
328
+ }
329
+ .toast .dot{
330
+ width:9px;height:9px;border-radius:50%;
331
+ background: var(--p7);
332
+ box-shadow: 0 0 0 3px rgba(255,192,0,.22);
333
+ }
334
+
335
+ footer{
336
+ position:fixed;
337
+ left:0; right:0; bottom:0;
338
+ text-align:center;
339
+ padding: 10px 14px;
340
+ background: rgba(255,255,255,.82);
341
+ border-top: 1px solid rgba(231,236,245,.95);
342
+ backdrop-filter: blur(10px);
343
+ color:#475569;
344
+ font-size: 12.5px;
345
+ z-index: 40;
346
+ }
347
+ </style>
348
+ </head>
349
+ <body>
350
+ <div class="wrap">
351
+ <div class="top">
352
+ <div class="brand">
353
+ <div class="logo" aria-hidden="true"></div>
354
+ <h1>بحث الخرائط</h1>
355
+ </div>
356
+ <div class="chip" id="totalChip">إجمالي: <b>—</b></div>
357
+ </div>
358
+
359
+ <section class="card" aria-label="search">
360
+ <div class="inner">
361
+ <div class="searchWrap">
362
+ <div class="searchPanel">
363
+ <div class="row">
364
+ <div class="field">
365
+ <div class="fieldIcon" aria-hidden="true">🔎</div>
366
+ <input id="q" type="text" inputmode="search" autocomplete="off" placeholder="اكتب الاسم…" />
367
+ </div>
368
+
369
+ <button id="btnSearch" class="btn primary" type="button">بحث</button>
370
+ <button id="btnClear" class="btn ghost" type="button">مسح</button>
371
+ </div>
372
+
373
+ <div class="meta">
374
+ <div class="pill" id="countPill">النتائج: 0</div>
375
+ <div></div>
376
+ </div>
377
+
378
+ <div class="results" id="results" aria-live="polite"></div>
379
+ </div>
380
+ </div>
381
+ </div>
382
+ </section>
383
+ </div>
384
+
385
+ <div class="toast" id="toast"><span class="dot" aria-hidden="true"></span><span>تم نسخ الرابط</span></div>
386
+ <footer>تصميم وإعداد الدعم الفني نوف الناصر</footer>
387
+ <script src="./script.js"></script>
388
+ </body>
389
+ </html>
script.js ADDED
@@ -0,0 +1,166 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ const DATA = [{"name": "أروى سعيد بن عبدالله القحطاني", "url": "https://stat2025-map.static.hf.space/BCS/37.html"}, {"name": "أسماء درويش سالم الدوسري", "url": "https://stat2025-map.static.hf.space/BCS/15.html"}, {"name": "أمل احمد محمد مجرشي", "url": "https://stat2025-map.static.hf.space/BCS/28.html"}, {"name": "أمل بنت علي بن علي السماعيل", "url": "https://stat2025-map.static.hf.space/BCS/07.html"}, {"name": "أمل جعفر بن علي آل حماد", "url": "https://stat2025-map.static.hf.space/BCS/30.html"}, {"name": "أمل صالح بن احمد آل مزعل", "url": "https://stat2025-map.static.hf.space/BCS/47.html"}, {"name": "ابرار بنت يوسف بن علي آل حماد", "url": "https://stat2025-map.static.hf.space/BCS/44.html"}, {"name": "احلام صالح معيوض العصيمي", "url": "https://stat2025-map.static.hf.space/BCS/16.html"}, {"name": "اسعد بن ماجد بن احمد الهاشم", "url": "https://stat2025-map.static.hf.space/BCS/46.html"}, {"name": "اسماء بنت محمد بن حسين العدساني", "url": "https://stat2025-map.static.hf.space/BCS/09.html"}, {"name": "ايمان عبدالعزيز بن صالح الصالح", "url": "https://stat2025-map.static.hf.space/BCS/40.html"}, {"name": "باسمه احمد بن محمد القرني", "url": "https://stat2025-map.static.hf.space/BCS/21.html"}, {"name": "باقر عبدالله بن هاشم الهاشم", "url": "https://stat2025-map.static.hf.space/BCS/11.html"}, {"name": "تركي وحيد بن عيسى المحيفيظ", "url": "https://stat2025-map.static.hf.space/BCS/01.html"}, {"name": "حسن عادل بن حسين الوصيبعي", "url": "https://stat2025-map.static.hf.space/BCS/03.html"}, {"name": "زكي بن عيسى بن عبدالله القفاص", "url": "https://stat2025-map.static.hf.space/BCS/51.html"}, {"name": "زهراء بنت عايش بن علي الصاهود", "url": "https://stat2025-map.static.hf.space/BCS/33.html"}, {"name": "ساره خالد سليمان المحيسن", "url": "https://stat2025-map.static.hf.space/BCS/35.html"}, {"name": "ساره راشد عبدالله المديني", "url": "https://stat2025-map.static.hf.space/BCS/34.html"}, {"name": "ساره عبدالحميد بن حسين البوحمد", "url": "https://stat2025-map.static.hf.space/BCS/12.html"}, {"name": "سميه رياض بن عبدالله البراك", "url": "https://stat2025-map.static.hf.space/BCS/39.html"}, {"name": "سميه سامى بن احمد النعيم", "url": "https://stat2025-map.static.hf.space/BCS/05.html"}, {"name": "شريفه ابراهيم بن عبدالله العقيل", "url": "https://stat2025-map.static.hf.space/BCS/41.html"}, {"name": "شيماء عبدالرحمن بن دحباش سودي", "url": "https://stat2025-map.static.hf.space/BCS/19.html"}, {"name": "صالح دلي الشمري", "url": "https://stat2025-map.static.hf.space/BCS/48.html"}, {"name": "طيبه فالح بن عبدالله الرويشد", "url": "https://stat2025-map.static.hf.space/BCS/31.html"}, {"name": "عائشه سليمان بن نايف الحربي", "url": "https://stat2025-map.static.hf.space/BCS/13.html"}, {"name": "عبدالله خلف الجدعان", "url": "https://stat2025-map.static.hf.space/BCS/49.html"}, {"name": "عقيله محمدحسين بن علي الجباره", "url": "https://stat2025-map.static.hf.space/BCS/06.html"}, {"name": "علياء فيصل بن محمد الكثيري", "url": "https://stat2025-map.static.hf.space/BCS/36.html"}, {"name": "غدير عبدالعزيز بن سعد القاسم", "url": "https://stat2025-map.static.hf.space/BCS/38.html"}, {"name": "فارس ثاني الشمري", "url": "https://stat2025-map.static.hf.space/BCS/50.html"}, {"name": "فاطمه حسين بن ابراهيم القرقوش", "url": "https://stat2025-map.static.hf.space/BCS/45.html"}, {"name": "فايزه محمد مسعود الحازمي", "url": "https://stat2025-map.static.hf.space/BCS/32.html"}, {"name": "فيصل تركي فيصل القحطاني", "url": "https://stat2025-map.static.hf.space/BCS/18.html"}, {"name": "لطيفه صالح بن عبدالرحمن العبد القادر", "url": "https://stat2025-map.static.hf.space/BCS/25.html"}, {"name": "لطيفه علي بن حسين النعيم", "url": "https://stat2025-map.static.hf.space/BCS/29.html"}, {"name": "لين أحمد بن عبدالعزيز القصير", "url": "https://stat2025-map.static.hf.space/BCS/22.html"}, {"name": "محمد دبيان بن مفرج الشمري", "url": "https://stat2025-map.static.hf.space/BCS/27.html"}, {"name": "مرتضى عبدالجليل بن عيسى الحكيم", "url": "https://stat2025-map.static.hf.space/BCS/43.html"}, {"name": "مصطفى احمد بن جمعه الرمضان", "url": "https://stat2025-map.static.hf.space/BCS/10.html"}, {"name": "ممدوح مشعل ضيف الله الصخري", "url": "https://stat2025-map.static.hf.space/BCS/26.html"}, {"name": "منيره سعد بن احمد الجديدي", "url": "https://stat2025-map.static.hf.space/BCS/04.html"}, {"name": "منيره سعود بن عبدالعزيز القوز", "url": "https://stat2025-map.static.hf.space/BCS/42.html"}, {"name": "نبأ عادل بن عبدالكريم آل رضوان", "url": "https://stat2025-map.static.hf.space/BCS/23.html"}, {"name": "نجود عبدالعزيز بن عقيل العمري", "url": "https://stat2025-map.static.hf.space/BCS/20.html"}, {"name": "نوره عبدالله بن زهير الرزقي", "url": "https://stat2025-map.static.hf.space/BCS/24.html"}, {"name": "نوره عبدالله بن مانع الخالدي", "url": "https://stat2025-map.static.hf.space/BCS/02.html"}, {"name": "نوف صالح بن محمد السميح", "url": "https://stat2025-map.static.hf.space/BCS/08.html"}, {"name": "نيللي حسين عبدالله الجعص", "url": "https://stat2025-map.static.hf.space/BCS/17.html"}, {"name": "وضحه خالد بن مشرف الخالدي", "url": "https://stat2025-map.static.hf.space/BCS/14.html"}];
2
+
3
+ function normalizeArabic(s) {
4
+ if (!s) return "";
5
+ return String(s)
6
+ .trim()
7
+ .toLowerCase()
8
+ .replace(/[\u064B-\u065F\u0670\u06D6-\u06ED]/g, "")
9
+ .replace(/\u0640/g, "")
10
+ .replace(/[إأآٱ]/g, "ا")
11
+ .replace(/ى/g, "ي")
12
+ .replace(/ة/g, "ه")
13
+ .replace(/\s+/g, " ");
14
+ }
15
+
16
+ function escapeHtml(str) {
17
+ return String(str)
18
+ .replaceAll("&", "&amp;")
19
+ .replaceAll("<", "&lt;")
20
+ .replaceAll(">", "&gt;")
21
+ .replaceAll('"', "&quot;")
22
+ .replaceAll("'", "&#039;");
23
+ }
24
+
25
+ function highlightMatch(name, rawQuery) {
26
+ if (!rawQuery) return escapeHtml(name);
27
+ const tokens = rawQuery.trim().split(/\s+/).filter(Boolean);
28
+ if (!tokens.length) return escapeHtml(name);
29
+
30
+ const t = tokens[0];
31
+ const idx = name.indexOf(t);
32
+ if (idx === -1) return escapeHtml(name);
33
+
34
+ const before = escapeHtml(name.slice(0, idx));
35
+ const mid = escapeHtml(name.slice(idx, idx + t.length));
36
+ const after = escapeHtml(name.slice(idx + t.length));
37
+ return `${before}<mark>${mid}</mark>${after}`;
38
+ }
39
+
40
+ const elQ = document.getElementById("q");
41
+ const elResults = document.getElementById("results");
42
+ const elCount = document.getElementById("countPill");
43
+ const elTotal = document.getElementById("totalChip");
44
+ const toast = document.getElementById("toast");
45
+
46
+ elTotal.innerHTML = `إجمالي: <b>${DATA.length}</b>`;
47
+
48
+ function showToast() {
49
+ toast.classList.add("show");
50
+ clearTimeout(window.__toastT);
51
+ window.__toastT = setTimeout(() => toast.classList.remove("show"), 1200);
52
+ }
53
+
54
+ async function copyLink(url) {
55
+ try {
56
+ await navigator.clipboard.writeText(url);
57
+ showToast();
58
+ } catch (e) {
59
+ const ta = document.createElement("textarea");
60
+ ta.value = url;
61
+ document.body.appendChild(ta);
62
+ ta.select();
63
+ document.execCommand("copy");
64
+ document.body.removeChild(ta);
65
+ showToast();
66
+ }
67
+ }
68
+
69
+ function renderResults(list, rawQuery) {
70
+ elResults.innerHTML = "";
71
+
72
+ if (!list.length) {
73
+ elCount.textContent = "النتائج: 0";
74
+ elResults.innerHTML = `<div class="empty">لا توجد نتائج</div>`;
75
+ return;
76
+ }
77
+
78
+ elCount.textContent = `النتائج: ${list.length}`;
79
+ const frag = document.createDocumentFragment();
80
+
81
+ list.forEach(item => {
82
+ const row = document.createElement("div");
83
+ row.className = "result";
84
+
85
+ const left = document.createElement("div");
86
+ left.className = "left";
87
+
88
+ const nm = document.createElement("div");
89
+ nm.className = "name";
90
+ nm.innerHTML = highlightMatch(item.name, rawQuery);
91
+
92
+ left.appendChild(nm);
93
+
94
+ const actions = document.createElement("div");
95
+ actions.className = "actions";
96
+
97
+ const open = document.createElement("a");
98
+ open.className = "openBtn";
99
+ open.href = item.url;
100
+ open.target = "_blank";
101
+ open.rel = "noopener";
102
+ open.innerHTML = `فتح <span aria-hidden="true">↗</span>`;
103
+
104
+ const copy = document.createElement("button");
105
+ copy.className = "copyBtn";
106
+ copy.type = "button";
107
+ copy.innerHTML = `نسخ <span aria-hidden="true">⧉</span>`;
108
+ copy.addEventListener("click", () => copyLink(item.url));
109
+
110
+ actions.appendChild(open);
111
+ actions.appendChild(copy);
112
+
113
+ row.appendChild(left);
114
+ row.appendChild(actions);
115
+ frag.appendChild(row);
116
+ });
117
+
118
+ elResults.appendChild(frag);
119
+ }
120
+
121
+ function doSearch() {
122
+ const raw = (elQ.value || "").trim();
123
+ const q = normalizeArabic(raw);
124
+
125
+ if (!q) {
126
+ elCount.textContent = "النتائج: 0";
127
+ elResults.innerHTML = "";
128
+ return;
129
+ }
130
+
131
+ const tokens = q.split(" ").filter(Boolean);
132
+
133
+ const matched = DATA.filter(d => {
134
+ const nameNorm = normalizeArabic(d.name);
135
+ return tokens.every(t => nameNorm.includes(t));
136
+ });
137
+
138
+ matched.sort((a, b) => {
139
+ const al = (a.name || "").length;
140
+ const bl = (b.name || "").length;
141
+ if (al !== bl) return al - bl;
142
+ return (a.name || "").localeCompare(b.name || "", "ar");
143
+ });
144
+
145
+ renderResults(matched, raw);
146
+ }
147
+
148
+ document.getElementById("btnSearch").addEventListener("click", doSearch);
149
+ document.getElementById("btnClear").addEventListener("click", () => {
150
+ elQ.value = "";
151
+ elQ.focus();
152
+ elResults.innerHTML = "";
153
+ elCount.textContent = "النتائج: 0";
154
+ });
155
+
156
+ let t = null;
157
+ elQ.addEventListener("input", () => {
158
+ clearTimeout(t);
159
+ t = setTimeout(doSearch, 140);
160
+ });
161
+
162
+ elQ.addEventListener("keydown", (e) => {
163
+ if (e.key === "Enter") doSearch();
164
+ });
165
+
166
+ elCount.textContent = "النتائج: 0";