stat2025 commited on
Commit
cbeb429
·
verified ·
1 Parent(s): fb2e13b

Delete index.html

Browse files
Files changed (1) hide show
  1. index.html +0 -436
index.html DELETED
@@ -1,436 +0,0 @@
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
- <meta name="description" content="ابحث باسم الباحث أو جزء منه لفتح أو نسخ رابط الخريطة." />
8
- <style>
9
- :root{
10
- --bg:#f5f7fb;
11
- --card:#ffffff;
12
- --text:#0b1324;
13
- --muted:#5b6b86;
14
- --line:#e6eaf2;
15
- --shadow: 0 18px 55px rgba(13,32,62,.10);
16
- --shadow2: 0 10px 28px rgba(13,32,62,.08);
17
- --radius: 22px;
18
-
19
- --primary:#2563eb;
20
- --primary2:#7c3aed;
21
- --mint:#10b981;
22
- --danger:#ef4444;
23
-
24
- --chip:#f1f5ff;
25
- --chipText:#1e3a8a;
26
-
27
- --btnText:#ffffff;
28
- --focus: 0 0 0 6px rgba(37,99,235,.15);
29
- }
30
-
31
- *{box-sizing:border-box}
32
- html,body{height:100%}
33
- body{
34
- margin:0;
35
- font-family: system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
36
- color:var(--text);
37
- background:
38
- radial-gradient(900px 480px at 18% 12%, rgba(124,58,237,.18), rgba(124,58,237,0) 60%),
39
- radial-gradient(900px 520px at 82% 10%, rgba(37,99,235,.18), rgba(37,99,235,0) 62%),
40
- radial-gradient(900px 520px at 50% 105%, rgba(16,185,129,.12), rgba(16,185,129,0) 55%),
41
- linear-gradient(180deg, #f8fafc, #f5f7fb 55%, #eef2ff);
42
- display:flex;
43
- flex-direction:column;
44
- overflow-x:hidden;
45
- }
46
-
47
- .wrap{
48
- width:min(1020px, 92vw);
49
- margin:0 auto;
50
- padding: 34px 0 92px;
51
- flex:1;
52
- display:flex;
53
- flex-direction:column;
54
- gap: 18px;
55
- }
56
-
57
- /* Top bar */
58
- .top{
59
- display:flex;
60
- align-items:center;
61
- justify-content:space-between;
62
- gap:12px;
63
- flex-wrap:wrap;
64
- }
65
- .brand{
66
- display:flex;
67
- align-items:center;
68
- gap:12px;
69
- }
70
- .logo{
71
- width:44px;height:44px;border-radius:16px;
72
- background:
73
- radial-gradient(16px 16px at 28% 26%, rgba(255,255,255,.9), rgba(255,255,255,0) 60%),
74
- linear-gradient(135deg, var(--primary), var(--primary2));
75
- box-shadow: var(--shadow2);
76
- }
77
- .brandTitle{display:flex;flex-direction:column}
78
- .brandTitle h1{
79
- margin:0;
80
- font-size: 18px;
81
- letter-spacing:.2px;
82
- line-height:1.2;
83
- }
84
- .brandTitle p{
85
- margin:4px 0 0;
86
- color:var(--muted);
87
- font-size: 13px;
88
- }
89
-
90
- .chip{
91
- display:inline-flex;
92
- align-items:center;
93
- gap:8px;
94
- padding: 10px 12px;
95
- border-radius:999px;
96
- border:1px solid rgba(37,99,235,.15);
97
- background: linear-gradient(180deg, #ffffff, var(--chip));
98
- color: var(--chipText);
99
- font-size: 12.5px;
100
- box-shadow: 0 8px 18px rgba(13,32,62,.06);
101
- white-space:nowrap;
102
- }
103
- .chip b{font-weight:800}
104
-
105
- /* Hero card */
106
- .hero{
107
- position:relative;
108
- border-radius: var(--radius);
109
- background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
110
- border: 1px solid rgba(230,234,242,.85);
111
- box-shadow: var(--shadow);
112
- overflow:hidden;
113
- }
114
- .hero::before{
115
- content:"";
116
- position:absolute; inset:-2px;
117
- background:
118
- radial-gradient(420px 260px at 15% 0%, rgba(124,58,237,.12), rgba(124,58,237,0) 60%),
119
- radial-gradient(460px 280px at 85% 10%, rgba(37,99,235,.12), rgba(37,99,235,0) 62%);
120
- pointer-events:none;
121
- }
122
- .heroInner{
123
- position:relative;
124
- padding: 26px 22px 18px;
125
- }
126
-
127
- .headline{
128
- display:flex;
129
- flex-direction:column;
130
- align-items:center;
131
- text-align:center;
132
- gap:10px;
133
- padding-bottom: 14px;
134
- }
135
- .headline h2{
136
- margin:0;
137
- font-size: clamp(22px, 2.2vw, 34px);
138
- letter-spacing:.2px;
139
- line-height:1.2;
140
- }
141
- .headline p{
142
- margin:0;
143
- color:var(--muted);
144
- font-size: 14.5px;
145
- line-height: 1.95;
146
- max-width: 72ch;
147
- }
148
-
149
- /* Centered "boxed" fields */
150
- .searchBox{
151
- margin-top: 10px;
152
- display:flex;
153
- justify-content:center;
154
- }
155
- .searchPanel{
156
- width:min(860px, 100%);
157
- display:grid;
158
- gap:12px;
159
- }
160
-
161
- .fieldsRow{
162
- display:grid;
163
- grid-template-columns: 1fr auto auto;
164
- gap: 12px;
165
- align-items:stretch;
166
- justify-items:center;
167
- }
168
- @media(max-width: 720px){
169
- .fieldsRow{ grid-template-columns: 1fr; }
170
- }
171
-
172
- .field{
173
- width:100%;
174
- background:#ffffff;
175
- border:1px solid var(--line);
176
- border-radius: 18px;
177
- box-shadow: 0 10px 26px rgba(13,32,62,.06);
178
- padding: 14px;
179
- display:flex;
180
- align-items:center;
181
- gap: 10px;
182
- justify-content:center; /* توسيط */
183
- }
184
- .field .icon{
185
- width:38px;height:38px;border-radius:14px;
186
- display:grid;place-items:center;
187
- background: linear-gradient(135deg, rgba(37,99,235,.12), rgba(124,58,237,.10));
188
- border: 1px solid rgba(37,99,235,.12);
189
- color:#1e3a8a;
190
- font-size: 18px;
191
- flex:0 0 auto;
192
- }
193
- .field input{
194
- width:100%;
195
- border:none;
196
- outline:none;
197
- font-size:16px;
198
- padding: 0;
199
- background:transparent;
200
- text-align:center; /* توسيط داخل الحقل */
201
- color: var(--text);
202
- }
203
- .field input::placeholder{ color: #94a3b8; }
204
-
205
- .btn{
206
- height: 66px;
207
- min-width: 140px;
208
- border-radius: 18px;
209
- border:1px solid transparent;
210
- cursor:pointer;
211
- font-size: 15px;
212
- font-weight: 750;
213
- letter-spacing:.1px;
214
- display:flex;
215
- align-items:center;
216
- justify-content:center;
217
- gap:10px;
218
- box-shadow: 0 10px 26px rgba(13,32,62,.08);
219
- transition: transform .06s ease, box-shadow .2s ease, opacity .2s ease;
220
- user-select:none;
221
- }
222
- .btn:active{ transform: translateY(1px); }
223
- .btn.primary{
224
- color: var(--btnText);
225
- background: linear-gradient(135deg, var(--primary), var(--primary2));
226
- }
227
- .btn.ghost{
228
- background:#ffffff;
229
- border-color: var(--line);
230
- color: #0f172a;
231
- }
232
- .btn:hover{ opacity:.94; }
233
-
234
- .meta{
235
- display:flex;
236
- align-items:center;
237
- justify-content:space-between;
238
- gap: 10px;
239
- flex-wrap:wrap;
240
- color: var(--muted);
241
- font-size: 13px;
242
- margin-top: 6px;
243
- padding: 0 4px;
244
- }
245
- .meta .pill{
246
- display:inline-flex;
247
- align-items:center;
248
- gap:8px;
249
- padding: 8px 10px;
250
- border-radius: 999px;
251
- border: 1px solid rgba(16,185,129,.20);
252
- background: linear-gradient(180deg, #ffffff, rgba(16,185,129,.08));
253
- color: #065f46;
254
- font-weight: 700;
255
- }
256
-
257
- /* Results */
258
- .results{
259
- margin-top: 10px;
260
- display:grid;
261
- gap: 10px;
262
- }
263
- .resultCard{
264
- background:#ffffff;
265
- border:1px solid var(--line);
266
- border-radius: 18px;
267
- padding: 14px 14px;
268
- box-shadow: 0 10px 26px rgba(13,32,62,.06);
269
- display:flex;
270
- align-items:center;
271
- justify-content:space-between;
272
- gap: 12px;
273
- }
274
- .rLeft{min-width:0;display:flex;flex-direction:column;gap:2px}
275
- .rName{
276
- font-weight: 800;
277
- font-size: 15.5px;
278
- line-height:1.7;
279
- white-space:nowrap;
280
- overflow:hidden;
281
- text-overflow:ellipsis;
282
- max-width: 66ch;
283
- }
284
- .rHint{
285
- color: var(--muted);
286
- font-size: 12.5px;
287
- }
288
- .rActions{
289
- display:flex;
290
- gap: 8px;
291
- flex-wrap:wrap;
292
- justify-content:flex-end;
293
- }
294
-
295
- .linkBtn, .copyBtn{
296
- border-radius: 14px;
297
- padding: 10px 12px;
298
- border: 1px solid transparent;
299
- font-size: 13.5px;
300
- font-weight: 750;
301
- cursor:pointer;
302
- display:inline-flex;
303
- align-items:center;
304
- gap: 8px;
305
- white-space:nowrap;
306
- transition: transform .06s ease, opacity .2s ease;
307
- user-select:none;
308
- text-decoration:none;
309
- }
310
- .linkBtn{
311
- color:#0b1324;
312
- background: linear-gradient(180deg, #ffffff, #f1f5ff);
313
- border-color: rgba(37,99,235,.18);
314
- }
315
- .copyBtn{
316
- color:#064e3b;
317
- background: linear-gradient(180deg, #ffffff, rgba(16,185,129,.10));
318
- border-color: rgba(16,185,129,.22);
319
- }
320
- .linkBtn:active,.copyBtn:active{ transform: translateY(1px); }
321
- .linkBtn:hover,.copyBtn:hover{ opacity:.92; }
322
-
323
- .empty{
324
- text-align:center;
325
- color: var(--muted);
326
- background:#ffffff;
327
- border: 1px dashed rgba(148,163,184,.55);
328
- border-radius: 18px;
329
- padding: 18px 12px;
330
- }
331
-
332
- mark{
333
- background: rgba(37,99,235,.10);
334
- border: 1px solid rgba(37,99,235,.16);
335
- color:#1e3a8a;
336
- padding: 1px 6px;
337
- border-radius: 999px;
338
- }
339
-
340
- /* Toast */
341
- .toast{
342
- position:fixed;
343
- left:50%;
344
- bottom: 78px;
345
- transform: translateX(-50%) translateY(14px);
346
- background: rgba(15,23,42,.92);
347
- color:#fff;
348
- padding: 10px 14px;
349
- border-radius: 999px;
350
- box-shadow: 0 18px 45px rgba(0,0,0,.18);
351
- opacity:0;
352
- pointer-events:none;
353
- transition: opacity .22s ease, transform .22s ease;
354
- font-size: 13px;
355
- display:flex;
356
- align-items:center;
357
- gap:8px;
358
- z-index: 50;
359
- }
360
- .toast.show{
361
- opacity:1;
362
- transform: translateX(-50%) translateY(0);
363
- }
364
-
365
- footer{
366
- position:fixed;
367
- left:0; right:0; bottom:0;
368
- text-align:center;
369
- padding: 10px 14px;
370
- background: rgba(255,255,255,.82);
371
- border-top: 1px solid rgba(230,234,242,.95);
372
- backdrop-filter: blur(10px);
373
- color:#475569;
374
- font-size: 12.5px;
375
- z-index: 40;
376
- }
377
- </style>
378
- </head>
379
- <body>
380
- <div class="wrap">
381
- <div class="top">
382
- <div class="brand">
383
- <div class="logo" aria-hidden="true"></div>
384
- <div class="brandTitle">
385
- <h1>صفحة البحث عن خريطة باحث</h1>
386
- <p>ابحث بالاسم أو جزء منه — ثم افتح الخريطة أو انسخ الرابط</p>
387
- </div>
388
- </div>
389
- <div class="chip" id="totalChip">📌 إجمالي الروابط: <b>—</b></div>
390
- </div>
391
-
392
- <section class="hero" aria-label="hero">
393
- <div class="heroInner">
394
- <div class="headline">
395
- <h2>اكتب اسم الباحث لعرض الرابط فورًا</h2>
396
- <p>
397
- يدعم البحث بكلمة واحدة أو أكثر (مثال: “تركي” أو “تركي المحيفيظ”). يمكنك أيضًا استخدام زر <b>نسخ الرابط</b> للمشاركة بسرعة.
398
- </p>
399
- </div>
400
-
401
- <div class="searchBox">
402
- <div class="searchPanel" aria-label="search panel">
403
- <div class="fieldsRow">
404
- <div class="field" aria-label="search field">
405
- <div class="icon" aria-hidden="true">🔎</div>
406
- <input id="q" type="text" inputmode="search" autocomplete="off"
407
- placeholder="اكتب الاسم أو جزء منه…" />
408
- </div>
409
-
410
- <button id="btnSearch" class="btn primary" type="button">
411
- بحث <span aria-hidden="true">↵</span>
412
- </button>
413
-
414
- <button id="btnClear" class="btn ghost" type="button">
415
- مسح <span aria-hidden="true">✕</span>
416
- </button>
417
- </div>
418
-
419
- <div class="meta">
420
- <div class="pill"><span aria-hidden="true">✅</span> <span id="countPill">النتائج: 0</span></div>
421
- <div>نصيحة: اضغط Enter للبحث السريع</div>
422
- </div>
423
-
424
- <div class="results" id="results" aria-live="polite"></div>
425
- </div>
426
- </div>
427
- </div>
428
- </section>
429
- </div>
430
-
431
- <div class="toast" id="toast">تم نسخ الرابط <span aria-hidden="true">✔</span></div>
432
-
433
- <footer>تصميم وإعداد الدعم الفني نوف الناصر</footer>
434
- <script src="./script.js"></script>
435
- </body>
436
- </html>