Spaces:

AnesKAM
/

SurfGO

Running

App Files Files Community

AnesKAM commited on May 2

Commit

df422cc

verified ·

1 Parent(s): 92160e0

Update results.html

Browse files

Files changed (1) hide show

results.html +515 -195

results.html CHANGED Viewed

@@ -1,16 +1,15 @@
 <!DOCTYPE html>
-<html data-theme="light" dir="rtl" lang="ar"><head>
-<meta charset="utf-8"/>
-<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0" name="viewport"/>
-<title>SurfGO | نتائج البحث</title>
-<link href="https://fonts.googleapis.com" rel="preconnect"/>
-<link 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" rel="stylesheet"/>
-<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" rel="stylesheet"/>
-<style>
-        /* =========================================
-           1. نظام الألوان المتطور (SurfGO Theme)
-           ========================================= */
         :root {
             --bg-base: #f8fafc;
             --bg-nav: rgba(255, 255, 255, 0.85);
@@ -22,7 +21,14 @@
             --text-sub: #64748b;
             --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
         }
-        * { margin: 0; padding: 0; box-sizing: border-box; outline: none; }
         body {
             font-family: 'Plus Jakarta Sans', 'Tajawal', sans-serif;
             background: var(--bg-base);
@@ -30,72 +36,219 @@
             min-height: 100vh;
             overflow-x: hidden;
         }
         .orb {
-            position: fixed; border-radius: 50%; filter: blur(100px); z-index: 0; pointer-events: none; opacity: 0.15;
         }
-        .orb-1 { top: -10%; left: -10%; width: 50vw; height: 50vw; background: var(--accent); }
-        .orb-2 { bottom: -10%; right: -10%; width: 40vw; height: 40vw; background: var(--accent-2); }
         .navbar {
-            position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
-            width: 95%; max-width: 1300px; height: auto; min-height: 72px;
-            background: var(--bg-nav); backdrop-filter: blur(24px);
-            border: 1px solid var(--border); border-radius: 20px;
-            display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
-            padding: 10px 20px; z-index: 1000; box-shadow: 0 10px 30px rgba(0,0,0,0.05);
             gap: 15px;
         }
-        .brand { font-weight: 700; font-size: 22px; text-decoration: none; color: var(--text-main); display: flex; align-items: center; gap: 10px; }
-        .brand-icon { width: 38px; height: 38px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-radius: 11px; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
-        .search-container { flex: 1; max-width: 600px; width: 100%; margin: 0; }
         .search-bar {
-            display: flex; align-items: center; background: #f1f5f9;
-            border: 1px solid var(--border); border-radius: 100px; padding: 4px; transition: var(--transition);
             width: 100%;
         }
-        .search-bar:focus-within { border-color: var(--accent); background: #ffffff; box-shadow: 0 0 15px rgba(99,102,241,0.1); }
-        .search-bar input { flex: 1; background: transparent; border: none; padding: 10px 18px; color: var(--text-main); font-size: 15px; width: 100%; }
-        .search-bar input::placeholder { color: var(--text-sub); }
         .tabs-bar {
-            position: fixed; top: 105px; left: 50%; transform: translateX(-50%);
-            width: 95%; max-width: 1300px; display: flex; gap: 8px; z-index: 999;
-            overflow-x: auto; padding-bottom: 5px; scrollbar-width: none; /* Firefox */
         }
-        .tabs-bar::-webkit-scrollbar { display: none; /* Safari and Chrome */ }
         .tab-pill {
-            padding: 8px 16px; border-radius: 100px; background: var(--bg-card);
-            border: 1px solid var(--border); color: var(--text-sub); font-size: 13px;
-            cursor: pointer; transition: 0.3s; display: flex; align-items: center; gap: 6px;
-            box-shadow: 0 2px 10px rgba(0,0,0,0.02); white-space: nowrap;
-        }
-        .tab-pill.active { background: var(--accent); color: #fff; border-color: var(--accent); }
-        .page-wrapper { max-width: 1300px; margin: 180px auto 50px; padding: 0 16px; display: flex; flex-direction: column; gap: 30px; }
-        .results-area { min-width: 0; width: 100%; }
-        /* =========================================
-           2. إخفاء آثار GOOGLE CSE بشكل جذري
-           ========================================= */
-        .gsc-control-cse { background: transparent !important; border: none !important; padding: 0 !important; }
-        .gsc-result {
-            background: var(--bg-card) !important; border: 1px solid var(--border) !important;
-            border-radius: 16px !important; padding: 16px !important; margin-bottom: 15px !important;
-            transition: var(--transition) !important; box-shadow: 0 4px 20px rgba(0,0,0,0.02) !important;
         }
         @media (min-width: 768px) {
-            .gsc-result { padding: 22px !important; }
         }
-        .gsc-result:hover { border-color: var(--accent) !important; transform: translateX(-5px) !important; background: #f8fafc !important; box-shadow: 0 8px 30px rgba(99,102,241,0.08) !important; }
-        .gs-title, .gs-title * { color: var(--accent) !important; text-decoration: none !important; font-size: 16px !important; }
         @media (min-width: 768px) {
-            .gs-title, .gs-title * { font-size: 18px !important; }
         }
-        .gs-snippet { color: var(--text-sub) !important; line-height: 1.6 !important; font-size: 14px !important; }
-        /* الخيار النووي: إخفاء كل ما يمت لجوجل بصلة بما في ذلك تابات (الكل / صور) */
         .gsc-adBlock,
         .gsc-branding,
         .gsc-search-box,
@@ -111,12 +264,12 @@
         .gsc-orderby,
         .gsc-selected-option-container,
         .gsc-thumbnail-inside,
-        .gsc-tabsArea,              /* يخفي شريط تبويبات جوجل (الكل / صور) */
-        .gsc-tabsAreaInvisible,     /* يخفي المساحة الفارغة للتبويبات */
-        .gsc-refinementHeader,      /* يخفي أدوات التصفية المتقدمة */
-        .gsc-refinementBlock {
-            display: none !important;
-            visibility: hidden !important;
             opacity: 0 !important;
             height: 0 !important;
             width: 0 !important;
@@ -124,125 +277,252 @@
             padding: 0 !important;
             pointer-events: none !important;
         }
-        .gsc-above-wrapper-area { border: none !important; padding: 0 !important; margin: 0 !important; height: 0 !important; }
-        .sidebar { width: 100%; order: 2; margin-top: 20px; }
-        .widget { background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; padding: 20px; text-align: center; box-shadow: 0 4px 20px rgba(0,0,0,0.03); }
-        .ai-avatar { width: 60px; height: 60px; border-radius: 50%; background: var(--bg-base); border: 2px solid var(--accent); padding: 5px; margin-bottom: 15px; }
-        .btn-ai { display: block; margin-top: 15px; padding: 12px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border-radius: 12px; text-decoration: none; font-weight: 600; font-size: 14px; }
-        /* Tablet & Desktop Layout Adjustments */
         @media (min-width: 768px) {
-            .navbar { flex-wrap: nowrap; padding: 0 20px; height: 72px; gap: 0; }
-            .search-container { margin: 0 24px; }
-            .tabs-bar { top: 105px; overflow-x: visible; padding-bottom: 0; justify-content: flex-start; }
-            .tab-pill { padding: 8px 20px; font-size: 13px; gap: 8px; }
-            .page-wrapper { margin: 180px auto 50px; grid-template-columns: 1fr 300px; display: grid; }
-            .sidebar { order: unset; margin-top: 0; }
-        }
         @media (max-width: 767px) {
-            .navbar { top: 10px; border-radius: 16px; padding: 12px 16px; }
-            .brand { font-size: 18px; }
-            .brand-icon { width: 32px; height: 32px; border-radius: 8px; font-size: 14px; }
-            .tabs-bar { top: 135px; } /* Adjust based on new navbar height */
-            .page-wrapper { margin-top: 190px; }
-        }
-        /* Collapsible Sidebar on Mobile */
-        .sidebar-toggle { display: none; width: 100%; background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 15px; text-align: center; font-weight: 600; color: var(--text-main); cursor: pointer; margin-bottom: 15px; box-shadow: 0 2px 10px rgba(0,0,0,0.02); }
-        .sidebar-content { display: block; }
         @media (max-width: 767px) {
-            .sidebar-toggle { display: block; }
-            .sidebar-content { display: none; }
-            .sidebar-content.active { display: block; }
-        }
-        .gs-favicon { width: 18px; height: 18px; vertical-align: middle; margin-left: 8px; border-radius: 4px; display: inline-block; }
-        .gs-title { display: flex !important; align-items: center; flex-wrap: wrap; }
-        </style>
 </head>
 <body>
-<div class="orb orb-1"></div>
-<div class="orb orb-2"></div>
-<nav class="navbar">
-<a class="brand" href="index.html">
-<div class="brand-icon"><i class="fa-solid fa-bolt"></i></div>
-<span>SurfGO</span>
-</a>
-<div class="search-container">
-<form class="search-bar" id="search-form">
-<input id="main-input" placeholder="ابحث في الويب..." type="text"/>
-<button style="background:none; border:none; color:var(--accent); cursor:pointer; padding:0 15px;" type="submit">
-<i class="fa-solid fa-search"></i>
-</button>
-</form>
-</div>
-<div class="hidden md:block" style="width: 40px;"></div>
-</nav>
-<div class="tabs-bar">
-<button class="tab-pill active" data-tab="all"><i class="fa-solid fa-globe"></i> الويب</button>
-<button class="tab-pill" data-tab="news"><i class="fa-solid fa-newspaper"></i> أخبار</button>
-<button class="tab-pill" data-tab="images"><i class="fa-solid fa-image"></i> صور</button>
-<button class="tab-pill" data-tab="videos"><i class="fa-solid fa-play"></i> فيديو</button>
-</div>
-<div class="page-wrapper">
-<main class="results-area">
-<div id="loading-text" style="color:var(--text-sub); margin-bottom:20px; font-size: 14px;">جاري استدعاء البيانات من SurfGO...</div>
-<div id="results-container"></div>
-</main>
-<aside class="sidebar">
-<button class="sidebar-toggle" id="sidebarToggle">
-<i class="fa-solid fa-server" style="margin-left: 8px; color: var(--accent);"></i> المحركات النشطة <i class="fa-solid fa-chevron-down" style="margin-right: 8px; font-size: 12px;"></i>
-</button>
-<div class="sidebar-content" id="sidebarContent">
-<div class="widget">
-<div class="brand-icon" style="margin: 0 auto 15px auto;"><i class="fa-solid fa-server"></i></div>
-<h3 style="font-size: 16px; margin-bottom: 15px;">المحركات النشطة</h3>
-<div style="display: flex; flex-direction: column; gap: 10px; text-align: right;">
-<div 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);">
-<span style="font-size: 13px;">SurfGO Index</span>
-<div style="display: flex; align-items: center; gap: 5px; color: #10b981; font-size: 11px;">
-<span style="width: 6px; height: 6px; background: #10b981; border-radius: 50%;"></span>
-                            نشط
                         </div>
-</div>
-<div 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);">
-<span style="font-size: 13px;">الأخبار العالمية</span>
-<div style="display: flex; align-items: center; gap: 5px; color: #10b981; font-size: 11px;">
-<span style="width: 6px; height: 6px; background: #10b981; border-radius: 50%;"></span>
-                            نشط
                         </div>
-</div>
-<div 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);">
-<span style="font-size: 13px;">الوسائط المرئية</span>
-<div style="display: flex; align-items: center; gap: 5px; color: #10b981; font-size: 11px;">
-<span style="width: 6px; height: 6px; background: #10b981; border-radius: 50%;"></span>
-                            نشط
                         </div>
-</div>
-<div 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);">
-<span style="font-size: 13px;">خدمة الفيديو</span>
-<div style="display: flex; align-items: center; gap: 5px; color: #10b981; font-size: 11px;">
-<span style="width: 6px; height: 6px; background: #10b981; border-radius: 50%;"></span>
-                            نشط
                         </div>
-</div>
-</div>
-<p style="font-size: 11px; color: var(--text-sub); margin-top: 15px;">مدعوم بواسطة AnesNT Core</p>
-</div>
-</div>
-</aside>
-</div>
-<script>
         const ENGINES = {
-            all:    '75aa960081baa4f0c',
-            news:   '35b0f5b6012e94f78',
             images: '23c7fd94975714dd8',
             videos: 'b11f5dceb04784b9f'
         };
         const params = new URLSearchParams(window.location.search);
         let query = params.get('q');
         let currentTab = params.get('tab') || 'all';
@@ -251,12 +531,12 @@
         const loadingText = document.getElementById('loading-text');
         const sidebarToggle = document.getElementById('sidebarToggle');
         const sidebarContent = document.getElementById('sidebarContent');
-        if(sidebarToggle) {
             sidebarToggle.addEventListener('click', () => {
                 sidebarContent.classList.toggle('active');
                 const icon = sidebarToggle.querySelector('.fa-chevron-down, .fa-chevron-up');
-                if(sidebarContent.classList.contains('active')) {
                     icon.classList.remove('fa-chevron-down');
                     icon.classList.add('fa-chevron-up');
                 } else {
@@ -265,7 +545,7 @@
                 }
             });
         }
         document.querySelectorAll('.tab-pill').forEach(btn => {
             btn.classList.toggle('active', btn.dataset.tab === currentTab);
         });
@@ -285,8 +565,10 @@
             document.querySelectorAll('.tab-pill').forEach(btn => {
                 btn.classList.toggle('active', btn.dataset.tab === tab);
             });
             const oldScript = document.getElementById('cse-logic');
             if (oldScript) oldScript.remove();
             const script = document.createElement('script');
             script.id = 'cse-logic';
             script.src = `https://cse.google.com/cse.js?cx=${cx}`;
@@ -296,8 +578,9 @@
                 gcseDiv.className = 'gcse-searchresults-only';
                 gcseDiv.setAttribute('data-query', query);
                 resultsContainer.appendChild(gcseDiv);
-                setTimeout(() => { loadingText.style.display = 'none'; }, 1000);
             };
             document.head.appendChild(script);
         }
@@ -307,9 +590,10 @@
                 currentTab = btn.dataset.tab;
                 const newUrl = `${window.location.pathname}?q=${encodeURIComponent(query || '')}&tab=${currentTab}`;
                 window.history.pushState({ path: newUrl }, '', newUrl);
-                if(query) loadSurfEngine(currentTab);
                 else {
-                    document.querySelectorAll('.tab-pill').forEach(b => b.classList.toggle('active', b.dataset.tab === currentTab));
                 }
             });
         });
@@ -323,25 +607,61 @@
                 loadSurfEngine(currentTab);
             }
         });
         const observer = new MutationObserver((mutations) => {
-            document.querySelectorAll('.gsc-adBlock, .gcsc-branding, .gsc-result-info, .gsc-tabsArea, .gsc-refinementHeader').forEach(el => el.remove());
             document.querySelectorAll('.gsc-result').forEach(result => {
                 if (result.dataset.faviconAdded) return;
                 const link = result.querySelector('a.gs-title');
-                if (link && link.href) {
-                    try {
                         const url = new URL(link.href);
-                        const favicon = document.createElement('img');
-                        favicon.src = `https://www.google.com/s2/favicons?domain=${url.hostname}&sz=32`;
-                        favicon.className = 'gs-favicon';
-                        link.prepend(favicon);
-                        result.dataset.faviconAdded = 'true';
-                    } catch(e) {}
                 }
             });
         });
         observer.observe(document.body, { childList: true, subtree: true });
     </script>
-</body></html>

 <!DOCTYPE html>
+<html data-theme="light" dir="rtl" lang="ar">
+<head>
+    <meta charset="utf-8" />
+    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0" name="viewport" />
+    <title>SurfGO | نتائج البحث</title>
+    <link href="https://fonts.googleapis.com" rel="preconnect" />
+    <link
+        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"
+        rel="stylesheet" />
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" rel="stylesheet" />
+    <style>
         :root {
             --bg-base: #f8fafc;
             --bg-nav: rgba(255, 255, 255, 0.85);
             --text-sub: #64748b;
             --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
         }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            outline: none;
+        }
         body {
             font-family: 'Plus Jakarta Sans', 'Tajawal', sans-serif;
             background: var(--bg-base);
             min-height: 100vh;
             overflow-x: hidden;
         }
         .orb {
+            position: fixed;
+            border-radius: 50%;
+            filter: blur(100px);
+            z-index: 0;
+            pointer-events: none;
+            opacity: 0.15;
+        }
+        .orb-1 {
+            top: -10%;
+            left: -10%;
+            width: 50vw;
+            height: 50vw;
+            background: var(--accent);
+        }
+        .orb-2 {
+            bottom: -10%;
+            right: -10%;
+            width: 40vw;
+            height: 40vw;
+            background: var(--accent-2);
         }
         .navbar {
+            position: fixed;
+            top: 16px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 95%;
+            max-width: 1300px;
+            height: auto;
+            min-height: 72px;
+            background: var(--bg-nav);
+            backdrop-filter: blur(24px);
+            border: 1px solid var(--border);
+            border-radius: 20px;
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+            justify-content: space-between;
+            padding: 10px 20px;
+            z-index: 1000;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
             gap: 15px;
         }
+        .brand {
+            font-weight: 700;
+            font-size: 22px;
+            text-decoration: none;
+            color: var(--text-main);
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .brand-icon {
+            width: 38px;
+            height: 38px;
+            background: linear-gradient(135deg, var(--accent), var(--accent-2));
+            border-radius: 11px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: #fff;
+            flex-shrink: 0;
+        }
+        .search-container {
+            flex: 1;
+            max-width: 600px;
+            width: 100%;
+            margin: 0;
+        }
         .search-bar {
+            display: flex;
+            align-items: center;
+            background: #f1f5f9;
+            border: 1px solid var(--border);
+            border-radius: 100px;
+            padding: 4px;
+            transition: var(--transition);
             width: 100%;
         }
+        .search-bar:focus-within {
+            border-color: var(--accent);
+            background: #ffffff;
+            box-shadow: 0 0 15px rgba(99, 102, 241, 0.1);
+        }
+        .search-bar input {
+            flex: 1;
+            background: transparent;
+            border: none;
+            padding: 10px 18px;
+            color: var(--text-main);
+            font-size: 15px;
+            width: 100%;
+        }
+        .search-bar input::placeholder {
+            color: var(--text-sub);
+        }
         .tabs-bar {
+            position: fixed;
+            top: 105px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 95%;
+            max-width: 1300px;
+            display: flex;
+            gap: 8px;
+            z-index: 999;
+            overflow-x: auto;
+            padding-bottom: 5px;
+            scrollbar-width: none;
         }
+        .tabs-bar::-webkit-scrollbar {
+            display: none;
+        }
         .tab-pill {
+            padding: 8px 16px;
+            border-radius: 100px;
+            background: var(--bg-card);
+            border: 1px solid var(--border);
+            color: var(--text-sub);
+            font-size: 13px;
+            cursor: pointer;
+            transition: 0.3s;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
+            white-space: nowrap;
         }
+        .tab-pill.active {
+            background: var(--accent);
+            color: #fff;
+            border-color: var(--accent);
+        }
+        .page-wrapper {
+            max-width: 1300px;
+            margin: 180px auto 50px;
+            padding: 0 16px;
+            display: flex;
+            flex-direction: column;
+            gap: 30px;
+        }
+        .results-area {
+            min-width: 0;
+            width: 100%;
+        }
+        .gsc-control-cse {
+            background: transparent !important;
+            border: none !important;
+            padding: 0 !important;
+        }
+        .gsc-result {
+            background: var(--bg-card) !important;
+            border: 1px solid var(--border) !important;
+            border-radius: 16px !important;
+            padding: 16px !important;
+            margin-bottom: 15px !important;
+            transition: var(--transition) !important;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important;
+        }
         @media (min-width: 768px) {
+            .gsc-result {
+                padding: 22px !important;
+            }
+        }
+        .gsc-result:hover {
+            border-color: var(--accent) !important;
+            transform: translateX(-5px) !important;
+            background: #f8fafc !important;
+            box-shadow: 0 8px 30px rgba(99, 102, 241, 0.08) !important;
+        }
+        .gs-title,
+        .gs-title * {
+            color: var(--accent) !important;
+            text-decoration: none !important;
+            font-size: 16px !important;
         }
         @media (min-width: 768px) {
+            .gs-title,
+            .gs-title * {
+                font-size: 18px !important;
+            }
+        }
+        .gs-snippet {
+            color: var(--text-sub) !important;
+            line-height: 1.6 !important;
+            font-size: 14px !important;
         }
         .gsc-adBlock,
         .gsc-branding,
         .gsc-search-box,
         .gsc-orderby,
         .gsc-selected-option-container,
         .gsc-thumbnail-inside,
+        .gsc-tabsArea,
+        .gsc-tabsAreaInvisible,
+        .gsc-refinementHeader,
+        .gsc-refinementBlock {
+            display: none !important;
+            visibility: hidden !important;
             opacity: 0 !important;
             height: 0 !important;
             width: 0 !important;
             padding: 0 !important;
             pointer-events: none !important;
         }
+        .gsc-above-wrapper-area {
+            border: none !important;
+            padding: 0 !important;
+            margin: 0 !important;
+            height: 0 !important;
+        }
+        .sidebar {
+            width: 100%;
+            order: 2;
+            margin-top: 20px;
+        }
+        .widget {
+            background: var(--bg-card);
+            border: 1px solid var(--border);
+            border-radius: 20px;
+            padding: 20px;
+            text-align: center;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
+        }
+        .ai-avatar {
+            width: 60px;
+            height: 60px;
+            border-radius: 50%;
+            background: var(--bg-base);
+            border: 2px solid var(--accent);
+            padding: 5px;
+            margin-bottom: 15px;
+        }
+        .btn-ai {
+            display: block;
+            margin-top: 15px;
+            padding: 12px;
+            background: linear-gradient(135deg, var(--accent), var(--accent-2));
+            color: #fff;
+            border-radius: 12px;
+            text-decoration: none;
+            font-weight: 600;
+            font-size: 14px;
+        }
         @media (min-width: 768px) {
+            .navbar {
+                flex-wrap: nowrap;
+                padding: 0 20px;
+                height: 72px;
+                gap: 0;
+            }
+            .search-container {
+                margin: 0 24px;
+            }
+            .tabs-bar {
+                top: 105px;
+                overflow-x: visible;
+                padding-bottom: 0;
+                justify-content: flex-start;
+            }
+            .tab-pill {
+                padding: 8px 20px;
+                font-size: 13px;
+                gap: 8px;
+            }
+            .page-wrapper {
+                margin: 180px auto 50px;
+                grid-template-columns: 1fr 300px;
+                display: grid;
+            }
+            .sidebar {
+                order: unset;
+                margin-top: 0;
+            }
+        }
         @media (max-width: 767px) {
+            .navbar {
+                top: 10px;
+                border-radius: 16px;
+                padding: 12px 16px;
+            }
+            .brand {
+                font-size: 18px;
+            }
+            .brand-icon {
+                width: 32px;
+                height: 32px;
+                border-radius: 8px;
+                font-size: 14px;
+            }
+            .tabs-bar {
+                top: 135px;
+            }
+            .page-wrapper {
+                margin-top: 190px;
+            }
+        }
+        .sidebar-toggle {
+            display: none;
+            width: 100%;
+            background: var(--bg-card);
+            border: 1px solid var(--border);
+            border-radius: 16px;
+            padding: 15px;
+            text-align: center;
+            font-weight: 600;
+            color: var(--text-main);
+            cursor: pointer;
+            margin-bottom: 15px;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
+        }
+        .sidebar-content {
+            display: block;
+        }
         @media (max-width: 767px) {
+            .sidebar-toggle {
+                display: block;
+            }
+            .sidebar-content {
+                display: none;
+            }
+            .sidebar-content.active {
+                display: block;
+            }
+        }
+        /* تنسيق الفاف ايكون الجديد والمحسن */
+        .gs-favicon {
+            width: 20px;
+            height: 20px;
+            vertical-align: middle;
+            margin-left: 10px;
+            border-radius: 4px;
+            display: inline-block;
+            flex-shrink: 0;
+            object-fit: contain;
+        }
+        .gs-title {
+            display: flex !important;
+            align-items: center;
+            flex-wrap: wrap;
+        }
+    </style>
 </head>
 <body>
+    <div class="orb orb-1"></div>
+    <div class="orb orb-2"></div>
+    <nav class="navbar">
+        <a class="brand" href="index.html">
+            <div class="brand-icon"><i class="fa-solid fa-bolt"></i></div>
+            <span>SurfGO</span>
+        </a>
+        <div class="search-container">
+            <form class="search-bar" id="search-form">
+                <input id="main-input" placeholder="ابحث في الويب..." type="text" />
+                <button
+                    style="background:none; border:none; color:var(--accent); cursor:pointer; padding:0 15px;"
+                    type="submit">
+                    <i class="fa-solid fa-search"></i>
+                </button>
+            </form>
+        </div>
+        <div class="hidden md:block" style="width: 40px;"></div>
+    </nav>
+    <div class="tabs-bar">
+        <button class="tab-pill active" data-tab="all"><i class="fa-solid fa-globe"></i> الويب</button>
+        <button class="tab-pill" data-tab="news"><i class="fa-solid fa-newspaper"></i> أخبار</button>
+        <button class="tab-pill" data-tab="images"><i class="fa-solid fa-image"></i> صور</button>
+        <button class="tab-pill" data-tab="videos"><i class="fa-solid fa-play"></i> فيديو</button>
+    </div>
+    <div class="page-wrapper">
+        <main class="results-area">
+            <div id="loading-text" style="color:var(--text-sub); margin-bottom:20px; font-size: 14px;">
+                جاري استدعاء البيانات من SurfGO...
+            </div>
+            <div id="results-container"></div>
+        </main>
+        <aside class="sidebar">
+            <button class="sidebar-toggle" id="sidebarToggle">
+                <i class="fa-solid fa-server" style="margin-left: 8px; color: var(--accent);"></i> المحركات النشطة
+                <i class="fa-solid fa-chevron-down" style="margin-right: 8px; font-size: 12px;"></i>
+            </button>
+            <div class="sidebar-content" id="sidebarContent">
+                <div class="widget">
+                    <div class="brand-icon" style="margin: 0 auto 15px auto;">
+                        <i class="fa-solid fa-server"></i>
+                    </div>
+                    <h3 style="font-size: 16px; margin-bottom: 15px;">المحركات النشطة</h3>
+                    <div style="display: flex; flex-direction: column; gap: 10px; text-align: right;">
+                        <div
+                            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);">
+                            <span style="font-size: 13px;">SurfGO Index</span>
+                            <div style="display: flex; align-items: center; gap: 5px; color: #10b981; font-size: 11px;">
+                                <span style="width: 6px; height: 6px; background: #10b981; border-radius: 50%;"></span>
+                                نشط
+                            </div>
                         </div>
+                        <div
+                            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);">
+                            <span style="font-size: 13px;">الأخبار العالمية</span>
+                            <div style="display: flex; align-items: center; gap: 5px; color: #10b981; font-size: 11px;">
+                                <span style="width: 6px; height: 6px; background: #10b981; border-radius: 50%;"></span>
+                                نشط
+                            </div>
                         </div>
+                        <div
+                            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);">
+                            <span style="font-size: 13px;">الوسائط المرئية</span>
+                            <div style="display: flex; align-items: center; gap: 5px; color: #10b981; font-size: 11px;">
+                                <span style="width: 6px; height: 6px; background: #10b981; border-radius: 50%;"></span>
+                                نشط
+                            </div>
                         </div>
+                        <div
+                            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);">
+                            <span style="font-size: 13px;">خدمة الفيديو</span>
+                            <div style="display: flex; align-items: center; gap: 5px; color: #10b981; font-size: 11px;">
+                                <span style="width: 6px; height: 6px; background: #10b981; border-radius: 50%;"></span>
+                                نشط
+                            </div>
                         </div>
+                    </div>
+                    <p style="font-size: 11px; color: var(--text-sub); margin-top: 15px;">مدعوم بواسطة AnesNT Core</p>
+                </div>
+            </div>
+        </aside>
+    </div>
+    <script>
         const ENGINES = {
+            all: '75aa960081baa4f0c',
+            news: '35b0f5b6012e94f78',
             images: '23c7fd94975714dd8',
             videos: 'b11f5dceb04784b9f'
         };
         const params = new URLSearchParams(window.location.search);
         let query = params.get('q');
         let currentTab = params.get('tab') || 'all';
         const loadingText = document.getElementById('loading-text');
         const sidebarToggle = document.getElementById('sidebarToggle');
         const sidebarContent = document.getElementById('sidebarContent');
+        if (sidebarToggle) {
             sidebarToggle.addEventListener('click', () => {
                 sidebarContent.classList.toggle('active');
                 const icon = sidebarToggle.querySelector('.fa-chevron-down, .fa-chevron-up');
+                if (sidebarContent.classList.contains('active')) {
                     icon.classList.remove('fa-chevron-down');
                     icon.classList.add('fa-chevron-up');
                 } else {
                 }
             });
         }
         document.querySelectorAll('.tab-pill').forEach(btn => {
             btn.classList.toggle('active', btn.dataset.tab === currentTab);
         });
             document.querySelectorAll('.tab-pill').forEach(btn => {
                 btn.classList.toggle('active', btn.dataset.tab === tab);
             });
             const oldScript = document.getElementById('cse-logic');
             if (oldScript) oldScript.remove();
             const script = document.createElement('script');
             script.id = 'cse-logic';
             script.src = `https://cse.google.com/cse.js?cx=${cx}`;
                 gcseDiv.className = 'gcse-searchresults-only';
                 gcseDiv.setAttribute('data-query', query);
                 resultsContainer.appendChild(gcseDiv);
+                setTimeout(() => {
+                    loadingText.style.display = 'none';
+                }, 1000);
             };
             document.head.appendChild(script);
         }
                 currentTab = btn.dataset.tab;
                 const newUrl = `${window.location.pathname}?q=${encodeURIComponent(query || '')}&tab=${currentTab}`;
                 window.history.pushState({ path: newUrl }, '', newUrl);
+                if (query) loadSurfEngine(currentTab);
                 else {
+                    document.querySelectorAll('.tab-pill').forEach(b => b.classList.toggle('active', b
+                        .dataset.tab === currentTab));
                 }
             });
         });
                 loadSurfEngine(currentTab);
             }
         });
+        // ─────────────────────────────────────
+        // المراقب الذكي: إزالة عناصر غوغل + إضافة الفاف ايكون بذكاء
+        // ─────────────────────────────────────
         const observer = new MutationObserver((mutations) => {
+            // إخفاء عناصر غوغل غير المرغوب فيها
+            document.querySelectorAll(
+                '.gsc-adBlock, .gcsc-branding, .gsc-result-info, .gsc-tabsArea, .gsc-refinementHeader'
+            ).forEach(el => el.remove());
+            // إضافة شعار الموقع (فاف ايكون) لكل نتيجة
             document.querySelectorAll('.gsc-result').forEach(result => {
                 if (result.dataset.faviconAdded) return;
                 const link = result.querySelector('a.gs-title');
+                if (!link) return;
+                let domain = '';
+                try {
+                    if (link.href) {
                         const url = new URL(link.href);
+                        domain = url.hostname;
+                    }
+                } catch (e) {
+                    // نتجاهل الأخطاء ونستخدم أيقونة افتراضية
                 }
+                const favicon = document.createElement('img');
+                favicon.className = 'gs-favicon';
+                favicon.alt = 'شعار الموقع';
+                favicon.loading = 'lazy';
+                if (domain) {
+                    favicon.src = `https://www.google.com/s2/favicons?domain=${domain}&sz=32`;
+                    favicon.onerror = () => {
+                        favicon.src =
+                            '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>';
+                    };
+                } else {
+                    favicon.src =
+                        '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>';
+                }
+                // إدراج الأيقونة داخل الرابط كأول عنصر
+                if (link.firstChild) {
+                    link.insertBefore(favicon, link.firstChild);
+                } else {
+                    link.appendChild(favicon);
+                }
+                result.dataset.faviconAdded = 'true';
             });
         });
         observer.observe(document.body, { childList: true, subtree: true });
     </script>
+</body>
+</html>