Hugging Face's logo

Spaces:
AnesKAM
/
SurfGO
Running

App Files Community
AnesKAM commited on
Commit
1cf9e70
·
verified ·
1 Parent(s): 7231861

Update results.html

Browse files
Files changed (1) hide show
  1. results.html +212 -646
results.html CHANGED
@@ -1,739 +1,305 @@
1
  <!DOCTYPE html>
2
- <html data-theme="light" dir="rtl" lang="ar">
3
  <head>
4
- <meta charset="utf-8" />
5
- <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0" name="viewport" />
6
- <title>SurfGO | نتائج البحث</title>
7
- <link href="https://fonts.googleapis.com" rel="preconnect" />
8
- <link
9
- href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&amp;family=Tajawal:wght@300;400;500;700&amp;display=swap"
10
- rel="stylesheet" />
11
- <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" rel="stylesheet" />
12
  <style>
13
- /* =========================================
14
- 1. نظام الألوان والوضع الداكن
15
- ========================================= */
16
  :root {
17
- --bg-base: #f8fafc;
18
- --bg-nav: rgba(255, 255, 255, 0.85);
19
- --bg-card: #ffffff;
20
- --bg-input: #f1f5f9;
21
- --bg-input-focus: #ffffff;
22
- --border: #e2e8f0;
23
- --accent: #6366f1;
24
- --accent-2: #ec4899;
25
- --text-main: #0f172a;
26
- --text-sub: #64748b;
27
- --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
28
- }
29
-
30
- /* الوضع الداكن */
31
- [data-theme="dark"] {
32
- --bg-base: #0f172a;
33
- --bg-nav: rgba(15, 23, 42, 0.9);
34
- --bg-card: #1e293b;
35
- --bg-input: #334155;
36
- --bg-input-focus: #1e293b;
37
- --border: #334155;
38
- --accent: #818cf8;
39
- --accent-2: #f472b6;
40
- --text-main: #f1f5f9;
41
  --text-sub: #94a3b8;
 
42
  }
43
 
44
  * {
45
  margin: 0;
46
  padding: 0;
47
  box-sizing: border-box;
48
- outline: none;
49
  }
50
 
51
  body {
52
- font-family: 'Plus Jakarta Sans', 'Tajawal', sans-serif;
53
- background: var(--bg-base);
54
  color: var(--text-main);
55
- min-height: 100vh;
56
  overflow-x: hidden;
57
- transition: background-color 0.3s ease, color 0.3s ease;
58
  }
59
 
 
60
  .orb {
61
  position: fixed;
62
  border-radius: 50%;
63
- filter: blur(100px);
64
- z-index: 0;
 
65
  pointer-events: none;
66
- opacity: 0.15;
67
- transition: opacity 0.3s;
68
- }
69
-
70
- .orb-1 {
71
- top: -10%;
72
- left: -10%;
73
- width: 50vw;
74
- height: 50vw;
75
- background: var(--accent);
76
- }
77
-
78
- .orb-2 {
79
- bottom: -10%;
80
- right: -10%;
81
- width: 40vw;
82
- height: 40vw;
83
- background: var(--accent-2);
84
  }
 
 
85
 
86
- .navbar {
87
- position: fixed;
88
- top: 16px;
89
- left: 50%;
90
- transform: translateX(-50%);
91
- width: 95%;
92
- max-width: 1300px;
93
- height: auto;
94
- min-height: 72px;
95
- background: var(--bg-nav);
96
- backdrop-filter: blur(24px);
97
- border: 1px solid var(--border);
98
- border-radius: 20px;
99
- display: flex;
100
- flex-wrap: wrap;
101
- align-items: center;
102
- justify-content: space-between;
103
- padding: 10px 20px;
104
- z-index: 1000;
105
- box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
106
- gap: 15px;
107
- transition: background 0.3s, border-color 0.3s;
108
- }
109
-
110
- .brand {
111
- font-weight: 700;
112
- font-size: 22px;
113
- text-decoration: none;
114
- color: var(--text-main);
115
- display: flex;
116
- align-items: center;
117
- gap: 10px;
118
  }
119
 
120
- .brand-icon {
121
- width: 38px;
122
- height: 38px;
123
- background: linear-gradient(135deg, var(--accent), var(--accent-2));
124
- border-radius: 11px;
125
- display: flex;
126
- align-items: center;
127
- justify-content: center;
128
- color: #fff;
129
- flex-shrink: 0;
130
  }
131
 
132
- .search-container {
133
- flex: 1;
134
- max-width: 600px;
135
- width: 100%;
136
- margin: 0;
 
 
 
137
  }
138
 
139
- .search-bar {
 
 
 
 
 
140
  display: flex;
141
  align-items: center;
142
- background: var(--bg-input);
143
- border: 1px solid var(--border);
144
- border-radius: 100px;
145
- padding: 4px;
146
- transition: var(--transition), background-color 0.3s;
147
- width: 100%;
148
  }
149
 
150
- .search-bar:focus-within {
151
  border-color: var(--accent);
152
- background: var(--bg-input-focus);
153
- box-shadow: 0 0 15px rgba(99, 102, 241, 0.1);
154
  }
155
 
156
- .search-bar input {
157
  flex: 1;
158
  background: transparent;
159
  border: none;
160
- padding: 10px 18px;
161
- color: var(--text-main);
162
- font-size: 15px;
163
- width: 100%;
164
- }
165
-
166
- .search-bar input::placeholder {
167
- color: var(--text-sub);
168
  }
169
 
170
- /* زر تبديل السمة */
171
- #theme-toggle {
172
- background: none;
173
  border: none;
174
- color: var(--text-main);
 
 
175
  cursor: pointer;
176
- padding: 5px;
177
- font-size: 20px;
178
- width: 40px;
179
- height: 40px;
180
- border-radius: 50%;
181
- display: flex;
182
- align-items: center;
183
- justify-content: center;
184
- transition: background 0.3s, color 0.3s;
185
  }
186
 
187
- #theme-toggle:hover {
188
- background: var(--border);
189
- }
190
 
191
- .tabs-bar {
192
- position: fixed;
193
- top: 105px;
194
- left: 50%;
195
- transform: translateX(-50%);
196
- width: 95%;
197
- max-width: 1300px;
198
  display: flex;
199
- gap: 8px;
200
- z-index: 999;
201
- overflow-x: auto;
202
- padding-bottom: 5px;
203
- scrollbar-width: none;
204
- }
205
-
206
- .tabs-bar::-webkit-scrollbar {
207
- display: none;
208
  }
209
 
210
  .tab-pill {
211
- padding: 8px 16px;
212
- border-radius: 100px;
213
- background: var(--bg-card);
214
- border: 1px solid var(--border);
215
  color: var(--text-sub);
216
- font-size: 13px;
217
  cursor: pointer;
 
218
  transition: 0.3s;
219
- display: flex;
220
- align-items: center;
221
- gap: 6px;
222
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
223
- white-space: nowrap;
224
  }
225
 
226
  .tab-pill.active {
227
  background: var(--accent);
228
- color: #fff;
229
  border-color: var(--accent);
230
  }
231
 
232
- .page-wrapper {
233
- max-width: 1300px;
234
- margin: 180px auto 50px;
235
- padding: 0 16px;
236
- display: flex;
237
- flex-direction: column;
238
- gap: 30px;
239
- }
240
-
241
  .results-area {
242
- min-width: 0;
243
- width: 100%;
244
  }
245
 
246
- .gsc-control-cse {
247
- background: transparent !important;
248
- border: none !important;
249
- padding: 0 !important;
 
 
250
  }
251
 
 
252
  .gsc-result {
253
- background: var(--bg-card) !important;
254
- border: 1px solid var(--border) !important;
255
- border-radius: 16px !important;
256
- padding: 16px !important;
257
- margin-bottom: 15px !important;
258
- transition: var(--transition) !important;
259
- box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important;
260
- }
261
-
262
- @media (min-width: 768px) {
263
- .gsc-result {
264
- padding: 22px !important;
265
- }
266
- }
267
-
268
- .gsc-result:hover {
269
- border-color: var(--accent) !important;
270
- transform: translateX(-5px) !important;
271
- background: var(--bg-input) !important;
272
- box-shadow: 0 8px 30px rgba(99, 102, 241, 0.08) !important;
273
- }
274
-
275
- .gs-title,
276
- .gs-title * {
277
- color: var(--accent) !important;
278
- text-decoration: none !important;
279
- font-size: 16px !important;
280
- }
281
-
282
- @media (min-width: 768px) {
283
- .gs-title,
284
- .gs-title * {
285
- font-size: 18px !important;
286
- }
287
- }
288
-
289
- .gs-snippet {
290
- color: var(--text-sub) !important;
291
- line-height: 1.6 !important;
292
- font-size: 14px !important;
293
- }
294
-
295
- .gsc-adBlock,
296
- .gsc-branding,
297
- .gsc-search-box,
298
- .gcsc-branding,
299
- .gsc-branding-text,
300
- .gsc-branding-img,
301
- .gsc-branding-img-noclear,
302
- .gs-watermark,
303
- .gsc-results-branding,
304
- .gcsc-find-more-on-google,
305
- .gcsc-find-more-on-google-root,
306
- .gsc-result-info,
307
- .gsc-orderby,
308
- .gsc-selected-option-container,
309
- .gsc-thumbnail-inside,
310
- .gsc-tabsArea,
311
- .gsc-tabsAreaInvisible,
312
- .gsc-refinementHeader,
313
- .gsc-refinementBlock {
314
- display: none !important;
315
- visibility: hidden !important;
316
- opacity: 0 !important;
317
- height: 0 !important;
318
- width: 0 !important;
319
- margin: 0 !important;
320
- padding: 0 !important;
321
- pointer-events: none !important;
322
- }
323
-
324
- .gsc-above-wrapper-area {
325
- border: none !important;
326
- padding: 0 !important;
327
- margin: 0 !important;
328
- height: 0 !important;
329
- }
330
-
331
- .sidebar {
332
- width: 100%;
333
- order: 2;
334
- margin-top: 20px;
335
- }
336
-
337
- .widget {
338
- background: var(--bg-card);
339
- border: 1px solid var(--border);
340
- border-radius: 20px;
341
  padding: 20px;
342
- text-align: center;
343
- box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
344
- }
345
-
346
- .ai-avatar {
347
- width: 60px;
348
- height: 60px;
349
- border-radius: 50%;
350
- background: var(--bg-base);
351
- border: 2px solid var(--accent);
352
- padding: 5px;
353
  margin-bottom: 15px;
 
 
354
  }
355
 
356
- .btn-ai {
357
- display: block;
358
- margin-top: 15px;
359
- padding: 12px;
360
- background: linear-gradient(135deg, var(--accent), var(--accent-2));
361
- color: #fff;
362
- border-radius: 12px;
363
- text-decoration: none;
364
- font-weight: 600;
365
- font-size: 14px;
366
- }
367
-
368
- @media (min-width: 768px) {
369
- .navbar {
370
- flex-wrap: nowrap;
371
- padding: 0 20px;
372
- height: 72px;
373
- gap: 0;
374
- }
375
- .search-container {
376
- margin: 0 24px;
377
- }
378
- .tabs-bar {
379
- top: 105px;
380
- overflow-x: visible;
381
- padding-bottom: 0;
382
- justify-content: flex-start;
383
- }
384
- .tab-pill {
385
- padding: 8px 20px;
386
- font-size: 13px;
387
- gap: 8px;
388
- }
389
- .page-wrapper {
390
- margin: 180px auto 50px;
391
- grid-template-columns: 1fr 300px;
392
- display: grid;
393
- }
394
- .sidebar {
395
- order: unset;
396
- margin-top: 0;
397
- }
398
- }
399
-
400
- @media (max-width: 767px) {
401
- .navbar {
402
- top: 10px;
403
- border-radius: 16px;
404
- padding: 12px 16px;
405
- }
406
- .brand {
407
- font-size: 18px;
408
- }
409
- .brand-icon {
410
- width: 32px;
411
- height: 32px;
412
- border-radius: 8px;
413
- font-size: 14px;
414
- }
415
- .tabs-bar {
416
- top: 135px;
417
- }
418
- .page-wrapper {
419
- margin-top: 190px;
420
- }
421
- }
422
-
423
- .sidebar-toggle {
424
- display: none;
425
- width: 100%;
426
- background: var(--bg-card);
427
- border: 1px solid var(--border);
428
- border-radius: 16px;
429
- padding: 15px;
430
- text-align: center;
431
- font-weight: 600;
432
- color: var(--text-main);
433
- cursor: pointer;
434
- margin-bottom: 15px;
435
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
436
  }
437
 
438
- .sidebar-content {
439
- display: block;
440
- }
 
 
 
 
441
 
442
- @media (max-width: 767px) {
443
- .sidebar-toggle {
444
- display: block;
445
- }
446
- .sidebar-content {
447
- display: none;
448
- }
449
- .sidebar-content.active {
450
- display: block;
451
- }
452
- }
453
-
454
- /* أيقونات المواقع */
455
- .gs-favicon {
456
- width: 20px;
457
- height: 20px;
458
- vertical-align: middle;
459
- margin-left: 10px;
460
- border-radius: 4px;
461
- display: inline-block;
462
- flex-shrink: 0;
463
- object-fit: contain;
464
- }
465
-
466
- .gs-title {
467
- display: flex !important;
468
- align-items: center;
469
- flex-wrap: wrap;
470
- }
471
  </style>
472
  </head>
473
  <body>
 
474
  <div class="orb orb-1"></div>
475
  <div class="orb orb-2"></div>
476
 
477
- <nav class="navbar">
478
- <a class="brand" href="index.html">
479
- <div class="brand-icon"><i class="fa-solid fa-bolt"></i></div>
480
- <span>SurfGO</span>
481
- </a>
482
- <div class="search-container">
483
- <form class="search-bar" id="search-form">
484
- <input id="main-input" placeholder="ابحث في الويب..." type="text" />
485
- <button
486
- style="background:none; border:none; color:var(--accent); cursor:pointer; padding:0 15px;"
487
- type="submit">
488
- <i class="fa-solid fa-search"></i>
489
- </button>
490
- </form>
491
- </div>
492
- <!-- زر تبديل الوضع الداكن/الفاتح -->
493
- <button id="theme-toggle" aria-label="تغيير السمة">
494
- <i class="fa-solid fa-moon"></i>
495
- </button>
496
- </nav>
497
-
498
- <div class="tabs-bar">
499
- <button class="tab-pill active" data-tab="all"><i class="fa-solid fa-globe"></i> الويب</button>
500
- <button class="tab-pill" data-tab="news"><i class="fa-solid fa-newspaper"></i> أخبار</button>
501
- <button class="tab-pill" data-tab="images"><i class="fa-solid fa-image"></i> صور</button>
502
- <button class="tab-pill" data-tab="videos"><i class="fa-solid fa-play"></i> فيديو</button>
503
- </div>
504
-
505
- <div class="page-wrapper">
506
- <main class="results-area">
507
- <div id="loading-text" style="color:var(--text-sub); margin-bottom:20px; font-size: 14px;">
508
- جاري استدعاء البيانات من SurfGO...
509
  </div>
510
- <div id="results-container"></div>
511
- </main>
512
-
513
- <aside class="sidebar">
514
- <button class="sidebar-toggle" id="sidebarToggle">
515
- <i class="fa-solid fa-server" style="margin-left: 8px; color: var(--accent);"></i> المحركات النشطة
516
- <i class="fa-solid fa-chevron-down" style="margin-right: 8px; font-size: 12px;"></i>
517
- </button>
518
- <div class="sidebar-content" id="sidebarContent">
519
- <div class="widget">
520
- <div class="brand-icon" style="margin: 0 auto 15px auto;">
521
- <i class="fa-solid fa-server"></i>
522
- </div>
523
- <h3 style="font-size: 16px; margin-bottom: 15px;">المحركات النشطة</h3>
524
- <div style="display: flex; flex-direction: column; gap: 10px; text-align: right;">
525
- <div
526
- style="display: flex; align-items: center; justify-content: space-between; background: var(--bg-base); padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border);">
527
- <span style="font-size: 13px;">SurfGO Index</span>
528
- <div style="display: flex; align-items: center; gap: 5px; color: #10b981; font-size: 11px;">
529
- <span style="width: 6px; height: 6px; background: #10b981; border-radius: 50%;"></span>
530
- نشط
531
- </div>
532
- </div>
533
- <div
534
- style="display: flex; align-items: center; justify-content: space-between; background: var(--bg-base); padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border);">
535
- <span style="font-size: 13px;">الأخبار العالمية</span>
536
- <div style="display: flex; align-items: center; gap: 5px; color: #10b981; font-size: 11px;">
537
- <span style="width: 6px; height: 6px; background: #10b981; border-radius: 50%;"></span>
538
- نشط
539
- </div>
540
- </div>
541
- <div
542
- style="display: flex; align-items: center; justify-content: space-between; background: var(--bg-base); padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border);">
543
- <span style="font-size: 13px;">الوسائط المرئية</span>
544
- <div style="display: flex; align-items: center; gap: 5px; color: #10b981; font-size: 11px;">
545
- <span style="width: 6px; height: 6px; background: #10b981; border-radius: 50%;"></span>
546
- نشط
547
- </div>
548
- </div>
549
- <div
550
- style="display: flex; align-items: center; justify-content: space-between; background: var(--bg-base); padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border);">
551
- <span style="font-size: 13px;">خدمة الفيديو</span>
552
- <div style="display: flex; align-items: center; gap: 5px; color: #10b981; font-size: 11px;">
553
- <span style="width: 6px; height: 6px; background: #10b981; border-radius: 50%;"></span>
554
- نشط
555
- </div>
556
- </div>
557
- </div>
558
- <p style="font-size: 11px; color: var(--text-sub); margin-top: 15px;">مدعوم بواسطة AnesNT Core</p>
559
- </div>
560
  </div>
561
- </aside>
 
 
 
 
 
 
562
  </div>
563
 
564
  <script>
565
- (function() {
566
- // ─────────────────────────────────────
567
- // إدارة السمة (داكن/فاتح)
568
- // ─────────────────────────────────────
569
- const themeToggle = document.getElementById('theme-toggle');
570
- const themeIcon = themeToggle.querySelector('i');
571
-
572
- function setTheme(theme) {
573
- document.documentElement.setAttribute('data-theme', theme);
574
- localStorage.setItem('surfgo-theme', theme);
575
- if (theme === 'dark') {
576
- themeIcon.classList.remove('fa-moon');
577
- themeIcon.classList.add('fa-sun');
578
- } else {
579
- themeIcon.classList.remove('fa-sun');
580
- themeIcon.classList.add('fa-moon');
581
- }
582
- }
583
-
584
- // استعادة السمة المحفوظة أو استخدام الفاتح كإفتراضي
585
- const savedTheme = localStorage.getItem('surfgo-theme') || 'light';
586
- setTheme(savedTheme);
587
-
588
- themeToggle.addEventListener('click', () => {
589
- const current = document.documentElement.getAttribute('data-theme');
590
- const next = current === 'dark' ? 'light' : 'dark';
591
- setTheme(next);
592
- });
593
-
594
- // ─────────────────────────────────────
595
- // محركات البحث والإعدادات الأخرى
596
- // ─────────────────────────────────────
597
- const ENGINES = {
598
- all: '75aa960081baa4f0c',
599
- news: '35b0f5b6012e94f78',
600
- images: '23c7fd94975714dd8',
601
- videos: 'b11f5dceb04784b9f'
602
- };
603
-
604
- const params = new URLSearchParams(window.location.search);
605
- let query = params.get('q');
606
- let currentTab = params.get('tab') || 'all';
607
- const inputField = document.getElementById('main-input');
608
- const resultsContainer = document.getElementById('results-container');
609
- const loadingText = document.getElementById('loading-text');
610
- const sidebarToggle = document.getElementById('sidebarToggle');
611
- const sidebarContent = document.getElementById('sidebarContent');
612
-
613
- if (sidebarToggle) {
614
- sidebarToggle.addEventListener('click', () => {
615
- sidebarContent.classList.toggle('active');
616
- const icon = sidebarToggle.querySelector('.fa-chevron-down, .fa-chevron-up');
617
- if (sidebarContent.classList.contains('active')) {
618
- icon.classList.remove('fa-chevron-down');
619
- icon.classList.add('fa-chevron-up');
620
- } else {
621
- icon.classList.remove('fa-chevron-up');
622
- icon.classList.add('fa-chevron-down');
623
- }
624
- });
625
- }
626
-
627
- document.querySelectorAll('.tab-pill').forEach(btn => {
628
- btn.classList.toggle('active', btn.dataset.tab === currentTab);
629
- });
630
-
631
- if (query) {
632
- inputField.value = query;
633
- document.title = `${query} - SurfGO`;
634
- loadSurfEngine(currentTab);
635
  } else {
636
- loadingText.textContent = "يرجى إدخال كلمة بحث للبدء.";
637
  }
 
638
 
639
- function loadSurfEngine(tab) {
640
- const cx = ENGINES[tab];
641
- resultsContainer.innerHTML = '';
642
- loadingText.style.display = 'block';
643
- document.querySelectorAll('.tab-pill').forEach(btn => {
644
- btn.classList.toggle('active', btn.dataset.tab === tab);
645
- });
646
-
647
- const oldScript = document.getElementById('cse-logic');
648
- if (oldScript) oldScript.remove();
649
-
650
- const script = document.createElement('script');
651
- script.id = 'cse-logic';
652
- script.src = `https://cse.google.com/cse.js?cx=${cx}`;
653
- script.async = true;
654
- script.onload = () => {
655
- const gcseDiv = document.createElement('div');
656
- gcseDiv.className = 'gcse-searchresults-only';
657
- gcseDiv.setAttribute('data-query', query);
658
- resultsContainer.appendChild(gcseDiv);
659
- setTimeout(() => {
660
- loadingText.style.display = 'none';
661
- }, 1000);
662
- };
663
- document.head.appendChild(script);
 
 
 
 
 
 
 
 
664
  }
 
665
 
666
- document.querySelectorAll('.tab-pill').forEach(btn => {
667
- btn.addEventListener('click', () => {
668
- currentTab = btn.dataset.tab;
669
- const newUrl = `${window.location.pathname}?q=${encodeURIComponent(query || '')}&tab=${currentTab}`;
670
- window.history.pushState({ path: newUrl }, '', newUrl);
671
- if (query) loadSurfEngine(currentTab);
672
- else {
673
- document.querySelectorAll('.tab-pill').forEach(b => b.classList.toggle('active', b.dataset
674
- .tab === currentTab));
675
- }
676
- });
677
- });
678
-
679
- document.getElementById('search-form').addEventListener('submit', (e) => {
680
- e.preventDefault();
681
- query = inputField.value;
682
- if (query) {
683
- const newUrl = `${window.location.pathname}?q=${encodeURIComponent(query)}&tab=${currentTab}`;
684
- window.history.pushState({ path: newUrl }, '', newUrl);
685
- loadSurfEngine(currentTab);
686
- }
687
- });
688
-
689
- // ─────────────────────────────────────
690
- // المراقب الذكي: إخفاء عناصر غوغل + أيقونات المواقع
691
- // ─────────────────────────────────────
692
- const observer = new MutationObserver(() => {
693
- document.querySelectorAll(
694
- '.gsc-adBlock, .gcsc-branding, .gsc-result-info, .gsc-tabsArea, .gsc-refinementHeader'
695
- ).forEach(el => el.remove());
696
-
697
- document.querySelectorAll('.gsc-result').forEach(result => {
698
- if (result.dataset.faviconAdded) return;
699
- const link = result.querySelector('a.gs-title');
700
- if (!link) return;
701
-
702
- let domain = '';
703
- try {
704
- if (link.href) {
705
- const url = new URL(link.href);
706
- domain = url.hostname;
707
- }
708
- } catch (e) {}
709
-
710
- const favicon = document.createElement('img');
711
- favicon.className = 'gs-favicon';
712
- favicon.alt = 'شعار الموقع';
713
- favicon.loading = 'lazy';
714
-
715
- if (domain) {
716
- favicon.src = `https://www.google.com/s2/favicons?domain=${domain}&sz=32`;
717
- favicon.onerror = () => {
718
- favicon.src =
719
- 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%236366f1"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>';
720
- };
721
- } else {
722
- favicon.src =
723
- 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%236366f1"><circle cx="12" cy="12" r="10"/></svg>';
724
- }
725
-
726
- if (link.firstChild) {
727
- link.insertBefore(favicon, link.firstChild);
728
- } else {
729
- link.appendChild(favicon);
730
- }
731
- result.dataset.faviconAdded = 'true';
732
- });
733
- });
734
-
735
- observer.observe(document.body, { childList: true, subtree: true });
736
- })();
737
  </script>
738
  </body>
739
  </html>
 
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.0">
6
+ <title>SurfGO - محرك البحث الشامل</title>
7
+ <!-- Font Awesome للأيقونات -->
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <!-- Google Fonts -->
10
+ <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;600;800&family=Cairo:wght@400;700&display=swap" rel="stylesheet">
11
+
12
  <style>
 
 
 
13
  :root {
14
+ --bg-dark: #050505;
15
+ --glass-bg: rgba(20, 20, 25, 0.7);
16
+ --glass-border: rgba(255, 255, 255, 0.1);
17
+ --accent: #6366f1; /* Indigo */
18
+ --accent-pink: #ec4899; /* Pink */
19
+ --text-main: #f8fafc;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
20
  --text-sub: #94a3b8;
21
+ --card-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.8);
22
  }
23
 
24
  * {
25
  margin: 0;
26
  padding: 0;
27
  box-sizing: border-box;
28
+ font-family: 'Plus Jakarta Sans', 'Cairo', sans-serif;
29
  }
30
 
31
  body {
32
+ background-color: var(--bg-dark);
 
33
  color: var(--text-main);
 
34
  overflow-x: hidden;
35
+ min-height: 100vh;
36
  }
37
 
38
+ /* Orbs الخلفية الفخمة */
39
  .orb {
40
  position: fixed;
41
  border-radius: 50%;
42
+ filter: blur(80px);
43
+ z-index: -1;
44
+ opacity: 0.4;
45
  pointer-events: none;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
46
  }
47
+ .orb-1 { width: 400px; height: 400px; background: var(--accent); top: -100px; right: -50px; }
48
+ .orb-2 { width: 350px; height: 350px; background: var(--accent-pink); bottom: -100px; left: -50px; }
49
 
50
+ .container {
51
+ max-width: 900px;
52
+ margin: 0 auto;
53
+ padding: 20px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
54
  }
55
 
56
+ /* تصميم الهيدر والبحث */
57
+ header {
58
+ padding: 40px 0;
59
+ text-align: center;
 
 
 
 
 
 
60
  }
61
 
62
+ .logo {
63
+ font-size: 3rem;
64
+ font-weight: 800;
65
+ background: linear-gradient(to left, var(--accent), var(--accent-pink));
66
+ -webkit-background-clip: text;
67
+ -webkit-text-fill-color: transparent;
68
+ margin-bottom: 25px;
69
+ letter-spacing: -2px;
70
  }
71
 
72
+ .search-wrapper {
73
+ position: relative;
74
+ background: var(--glass-bg);
75
+ border: 1px solid var(--glass-border);
76
+ border-radius: 20px;
77
+ padding: 8px;
78
  display: flex;
79
  align-items: center;
80
+ backdrop-filter: blur(12px);
81
+ box-shadow: var(--card-shadow);
82
+ transition: all 0.3s ease;
 
 
 
83
  }
84
 
85
+ .search-wrapper:focus-within {
86
  border-color: var(--accent);
87
+ transform: translateY(-2px);
88
+ box-shadow: 0 10px 40px rgba(99, 102, 241, 0.2);
89
  }
90
 
91
+ .search-input {
92
  flex: 1;
93
  background: transparent;
94
  border: none;
95
+ padding: 12px 20px;
96
+ color: white;
97
+ font-size: 1.1rem;
98
+ outline: none;
 
 
 
 
99
  }
100
 
101
+ .search-btn {
102
+ background: var(--accent);
 
103
  border: none;
104
+ color: white;
105
+ padding: 12px 25px;
106
+ border-radius: 15px;
107
  cursor: pointer;
108
+ font-weight: 600;
109
+ transition: 0.3s;
 
 
 
 
 
 
 
110
  }
111
 
112
+ .search-btn:hover { background: #4f46e5; }
 
 
113
 
114
+ /* التبويبات */
115
+ .tabs-container {
 
 
 
 
 
116
  display: flex;
117
+ gap: 10px;
118
+ margin-top: 25px;
119
+ justify-content: center;
 
 
 
 
 
 
120
  }
121
 
122
  .tab-pill {
123
+ padding: 8px 20px;
124
+ background: rgba(255, 255, 255, 0.05);
125
+ border: 1px solid var(--glass-border);
126
+ border-radius: 30px;
127
  color: var(--text-sub);
 
128
  cursor: pointer;
129
+ font-size: 0.9rem;
130
  transition: 0.3s;
 
 
 
 
 
131
  }
132
 
133
  .tab-pill.active {
134
  background: var(--accent);
135
+ color: white;
136
  border-color: var(--accent);
137
  }
138
 
139
+ /* منطقة النتائج */
 
 
 
 
 
 
 
 
140
  .results-area {
141
+ margin-top: 40px;
142
+ min-height: 400px;
143
  }
144
 
145
+ #loading {
146
+ display: none;
147
+ text-align: center;
148
+ color: var(--accent);
149
+ font-weight: bold;
150
+ margin: 20px 0;
151
  }
152
 
153
+ /* تصميم كرت النتيجة (SearXNG & Google) */
154
  .gsc-result {
155
+ background: var(--glass-bg);
156
+ border: 1px solid var(--glass-border);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
157
  padding: 20px;
158
+ border-radius: 18px;
 
 
 
 
 
 
 
 
 
 
159
  margin-bottom: 15px;
160
+ backdrop-filter: blur(10px);
161
+ animation: fadeIn 0.5s ease forwards;
162
  }
163
 
164
+ @keyframes fadeIn {
165
+ from { opacity: 0; transform: translateY(10px); }
166
+ to { opacity: 1; transform: translateY(0); }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
167
  }
168
 
169
+ .gs-title { margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
170
+ .gs-title a { color: var(--accent); text-decoration: none; font-size: 1.2rem; font-weight: 700; }
171
+ .gs-title a:hover { text-decoration: underline; }
172
+
173
+ .gs-snippet { color: var(--text-sub); line-height: 1.6; font-size: 0.95rem; }
174
+
175
+ .gs-favicon { width: 20px; height: 20px; border-radius: 4px; }
176
 
177
+ /* تخصيص نتائج Google المدمجة */
178
+ .gsc-control-cse { background: transparent !important; border: none !important; padding: 0 !important; }
179
+ .gsc-webResult { background: transparent !important; border: none !important; margin: 0 !important; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
180
  </style>
181
  </head>
182
  <body>
183
+
184
  <div class="orb orb-1"></div>
185
  <div class="orb orb-2"></div>
186
 
187
+ <div class="container">
188
+ <header>
189
+ <div class="logo">SurfGO</div>
190
+ <div class="search-wrapper">
191
+ <input type="text" id="searchInput" class="search-input" placeholder="ماذا تريد أن تكتشف اليوم؟">
192
+ <button class="search-btn" onclick="executeSearch()"><i class="fas fa-search"></i></button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
193
  </div>
194
+
195
+ <div class="tabs-container">
196
+ <div class="tab-pill active" data-tab="all" onclick="switchTab(this)">الكل</div>
197
+ <div class="tab-pill" data-tab="images" onclick="switchTab(this)">صور</div>
198
+ <div class="tab-pill" data-tab="news" onclick="switchTab(this)">أخبار</div>
199
+ <div class="tab-pill" data-tab="videos" onclick="switchTab(this)">فيديو</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
200
  </div>
201
+ </header>
202
+
203
+ <div id="loading"><i class="fas fa-spinner fa-spin"></i> جاري جلب النتائج الفخمة...</div>
204
+
205
+ <div id="results" class="results-area">
206
+ <!-- تظهر النتائج هنا -->
207
+ </div>
208
  </div>
209
 
210
  <script>
211
+ // إعدادات محركات جوجل (أضف معرفاتك هنا)
212
+ const ENGINES = {
213
+ images: 'YOUR_IMAGE_ENGINE_ID',
214
+ news: 'YOUR_NEWS_ENGINE_ID',
215
+ videos: 'YOUR_VIDEO_ENGINE_ID'
216
+ };
217
+
218
+ const searchInput = document.getElementById('searchInput');
219
+ const resultsContainer = document.getElementById('results');
220
+ const loadingText = document.getElementById('loading');
221
+ let currentTab = 'all';
222
+
223
+ // البحث عند الضغط على Enter
224
+ searchInput.addEventListener('keypress', (e) => {
225
+ if (e.key === 'Enter') executeSearch();
226
+ });
227
+
228
+ function switchTab(el) {
229
+ document.querySelectorAll('.tab-pill').forEach(p => p.classList.remove('active'));
230
+ el.classList.add('active');
231
+ currentTab = el.dataset.tab;
232
+ if(searchInput.value) executeSearch();
233
+ }
234
+
235
+ async function executeSearch() {
236
+ const query = searchInput.value.trim();
237
+ if (!query) return;
238
+
239
+ resultsContainer.innerHTML = '';
240
+ loadingText.style.display = 'block';
241
+
242
+ if (currentTab === 'all') {
243
+ await fetchGlobalResults(query);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
244
  } else {
245
+ loadGoogleEngine(query, ENGINES[currentTab]);
246
  }
247
+ }
248
 
249
+ // محرك البحث الشامل (SearXNG)
250
+ async function fetchGlobalResults(query) {
251
+ // نستخدم Instance من سيرفر SearXNG عام
252
+ const url = `https://search.ethibox.fr/search?q=${encodeURIComponent(query)}&format=json&language=ar`;
253
+
254
+ try {
255
+ const response = await fetch(url);
256
+ const data = await response.json();
257
+ loadingText.style.display = 'none';
258
+
259
+ if (data.results && data.results.length > 0) {
260
+ data.results.forEach(res => {
261
+ const domain = new URL(res.url).hostname;
262
+ const card = `
263
+ <div class="gsc-result">
264
+ <div class="gs-title">
265
+ <img src="https://www.google.com/s2/favicons?domain=${domain}&sz=32" class="gs-favicon">
266
+ <a href="${res.url}" target="_blank">${res.title}</a>
267
+ </div>
268
+ <div class="gs-snippet">${res.content || 'لا يوجد وصف متاح لهذه النتيجة.'}</div>
269
+ <div style="margin-top:10px; font-size:0.8rem; color:var(--accent-pink)">
270
+ <i class="fas fa-globe"></i> ${domain}
271
+ </div>
272
+ </div>
273
+ `;
274
+ resultsContainer.innerHTML += card;
275
+ });
276
+ } else {
277
+ resultsContainer.innerHTML = '<p style="text-align:center">عذراً، لم نجد نتائج شاملة.</p>';
278
+ }
279
+ } catch (err) {
280
+ console.error(err);
281
+ loadingText.textContent = "خطأ في الاتصال بالسيرفر الشامل.";
282
  }
283
+ }
284
 
285
+ // محرك جوجل المخصص للتبويبات الأخرى
286
+ function loadGoogleEngine(query, cx) {
287
+ const oldScript = document.getElementById('google-cse');
288
+ if (oldScript) oldScript.remove();
289
+
290
+ const script = document.createElement('script');
291
+ script.id = 'google-cse';
292
+ script.src = `https://cse.google.com/cse.js?cx=${cx}`;
293
+ script.async = true;
294
+ script.onload = () => {
295
+ const gcse = document.createElement('div');
296
+ gcse.className = 'gcse-searchresults-only';
297
+ gcse.setAttribute('data-query', query);
298
+ resultsContainer.appendChild(gcse);
299
+ setTimeout(() => { loadingText.style.display = 'none'; }, 1500);
300
+ };
301
+ document.head.appendChild(script);
302
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
303
  </script>
304
  </body>
305
  </html>