stat2025 commited on
Commit
be0199f
·
verified ·
1 Parent(s): 45d6699

Delete index.html

Browse files
Files changed (1) hide show
  1. index.html +0 -389
index.html DELETED
@@ -1,389 +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
- <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>