Spaces:

AnesKAM
/

SurfGO

Running

App Files Files Community

AnesKAM commited on May 2

Commit

d303109

verified ·

1 Parent(s): 1cf9e70

Update results.html

Browse files

Files changed (1) hide show

results.html +734 -300

results.html CHANGED Viewed

@@ -1,305 +1,739 @@
 <!DOCTYPE html>
-<html lang="ar" dir="rtl">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>SurfGO - محرك البحث الشامل</title>
-    <!-- Font Awesome للأيقونات -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <!-- Google Fonts -->
-    <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">
-    <style>
-        :root {
-            --bg-dark: #050505;
-            --glass-bg: rgba(20, 20, 25, 0.7);
-            --glass-border: rgba(255, 255, 255, 0.1);
-            --accent: #6366f1; /* Indigo */
-            --accent-pink: #ec4899; /* Pink */
-            --text-main: #f8fafc;
-            --text-sub: #94a3b8;
-            --card-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.8);
-        }
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-            font-family: 'Plus Jakarta Sans', 'Cairo', sans-serif;
-        }
-        body {
-            background-color: var(--bg-dark);
-            color: var(--text-main);
-            overflow-x: hidden;
-            min-height: 100vh;
-        }
-        /* Orbs الخلفية الفخمة */
-        .orb {
-            position: fixed;
-            border-radius: 50%;
-            filter: blur(80px);
-            z-index: -1;
-            opacity: 0.4;
-            pointer-events: none;
-        }
-        .orb-1 { width: 400px; height: 400px; background: var(--accent); top: -100px; right: -50px; }
-        .orb-2 { width: 350px; height: 350px; background: var(--accent-pink); bottom: -100px; left: -50px; }
-        .container {
-            max-width: 900px;
-            margin: 0 auto;
-            padding: 20px;
-        }
-        /* تصميم الهيدر والبحث */
-        header {
-            padding: 40px 0;
-            text-align: center;
-        }
-        .logo {
-            font-size: 3rem;
-            font-weight: 800;
-            background: linear-gradient(to left, var(--accent), var(--accent-pink));
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            margin-bottom: 25px;
-            letter-spacing: -2px;
-        }
-        .search-wrapper {
-            position: relative;
-            background: var(--glass-bg);
-            border: 1px solid var(--glass-border);
-            border-radius: 20px;
-            padding: 8px;
-            display: flex;
-            align-items: center;
-            backdrop-filter: blur(12px);
-            box-shadow: var(--card-shadow);
-            transition: all 0.3s ease;
-        }
-        .search-wrapper:focus-within {
-            border-color: var(--accent);
-            transform: translateY(-2px);
-            box-shadow: 0 10px 40px rgba(99, 102, 241, 0.2);
-        }
-        .search-input {
-            flex: 1;
-            background: transparent;
-            border: none;
-            padding: 12px 20px;
-            color: white;
-            font-size: 1.1rem;
-            outline: none;
-        }
-        .search-btn {
-            background: var(--accent);
-            border: none;
-            color: white;
-            padding: 12px 25px;
-            border-radius: 15px;
-            cursor: pointer;
-            font-weight: 600;
-            transition: 0.3s;
-        }
-        .search-btn:hover { background: #4f46e5; }
-        /* التبويبات */
-        .tabs-container {
-            display: flex;
-            gap: 10px;
-            margin-top: 25px;
-            justify-content: center;
-        }
-        .tab-pill {
-            padding: 8px 20px;
-            background: rgba(255, 255, 255, 0.05);
-            border: 1px solid var(--glass-border);
-            border-radius: 30px;
-            color: var(--text-sub);
-            cursor: pointer;
-            font-size: 0.9rem;
-            transition: 0.3s;
-        }
-        .tab-pill.active {
-            background: var(--accent);
-            color: white;
-            border-color: var(--accent);
-        }
-        /* منطقة النتائج */
-        .results-area {
-            margin-top: 40px;
-            min-height: 400px;
-        }
-        #loading {
-            display: none;
-            text-align: center;
-            color: var(--accent);
-            font-weight: bold;
-            margin: 20px 0;
-        }
-        /* تصميم كرت النتيجة (SearXNG & Google) */
-        .gsc-result {
-            background: var(--glass-bg);
-            border: 1px solid var(--glass-border);
-            padding: 20px;
-            border-radius: 18px;
-            margin-bottom: 15px;
-            backdrop-filter: blur(10px);
-            animation: fadeIn 0.5s ease forwards;
-        }
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(10px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-        .gs-title { margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
-        .gs-title a { color: var(--accent); text-decoration: none; font-size: 1.2rem; font-weight: 700; }
-        .gs-title a:hover { text-decoration: underline; }
-        .gs-snippet { color: var(--text-sub); line-height: 1.6; font-size: 0.95rem; }
-        .gs-favicon { width: 20px; height: 20px; border-radius: 4px; }
-        /* تخصيص نتائج Google المدمجة */
-        .gsc-control-cse { background: transparent !important; border: none !important; padding: 0 !important; }
-        .gsc-webResult { background: transparent !important; border: none !important; margin: 0 !important; }
-    </style>
 </head>
 <body>
-    <div class="orb orb-1"></div>
-    <div class="orb orb-2"></div>
-    <div class="container">
-        <header>
-            <div class="logo">SurfGO</div>
-            <div class="search-wrapper">
-                <input type="text" id="searchInput" class="search-input" placeholder="ماذا تريد أن تكتشف اليوم؟">
-                <button class="search-btn" onclick="executeSearch()"><i class="fas fa-search"></i></button>
-            </div>
-            <div class="tabs-container">
-                <div class="tab-pill active" data-tab="all" onclick="switchTab(this)">الكل</div>
-                <div class="tab-pill" data-tab="images" onclick="switchTab(this)">صور</div>
-                <div class="tab-pill" data-tab="news" onclick="switchTab(this)">أخبار</div>
-                <div class="tab-pill" data-tab="videos" onclick="switchTab(this)">فيديو</div>
-            </div>
-        </header>
-        <div id="loading"><i class="fas fa-spinner fa-spin"></i> جاري جلب النتائج الفخمة...</div>
-        <div id="results" class="results-area">
-            <!-- تظهر النتائج هنا -->
-        </div>
-    </div>
-    <script>
-        // إعدادات محركات جوجل (أضف معرفاتك هنا)
-        const ENGINES = {
-            images: 'YOUR_IMAGE_ENGINE_ID',
-            news: 'YOUR_NEWS_ENGINE_ID',
-            videos: 'YOUR_VIDEO_ENGINE_ID'
-        };
-        const searchInput = document.getElementById('searchInput');
-        const resultsContainer = document.getElementById('results');
-        const loadingText = document.getElementById('loading');
-        let currentTab = 'all';
-        // البحث عند الضغط على Enter
-        searchInput.addEventListener('keypress', (e) => {
-            if (e.key === 'Enter') executeSearch();
-        });
-        function switchTab(el) {
-            document.querySelectorAll('.tab-pill').forEach(p => p.classList.remove('active'));
-            el.classList.add('active');
-            currentTab = el.dataset.tab;
-            if(searchInput.value) executeSearch();
-        }
-        async function executeSearch() {
-            const query = searchInput.value.trim();
-            if (!query) return;
-            resultsContainer.innerHTML = '';
-            loadingText.style.display = 'block';
-            if (currentTab === 'all') {
-                await fetchGlobalResults(query);
-            } else {
-                loadGoogleEngine(query, ENGINES[currentTab]);
-            }
-        }
-        // محرك البحث الشامل (SearXNG)
-        async function fetchGlobalResults(query) {
-            // نستخدم Instance من سيرفر SearXNG عام
-            const url = `https://search.ethibox.fr/search?q=${encodeURIComponent(query)}&format=json&language=ar`;
-            try {
-                const response = await fetch(url);
-                const data = await response.json();
-                loadingText.style.display = 'none';
-                if (data.results && data.results.length > 0) {
-                    data.results.forEach(res => {
-                        const domain = new URL(res.url).hostname;
-                        const card = `
-                            <div class="gsc-result">
-                                <div class="gs-title">
-                                    <img src="https://www.google.com/s2/favicons?domain=${domain}&sz=32" class="gs-favicon">
-                                    <a href="${res.url}" target="_blank">${res.title}</a>
-                                </div>
-                                <div class="gs-snippet">${res.content || 'لا يوجد وصف متاح لهذه النتيجة.'}</div>
-                                <div style="margin-top:10px; font-size:0.8rem; color:var(--accent-pink)">
-                                    <i class="fas fa-globe"></i> ${domain}
-                                </div>
-                            </div>
-                        `;
-                        resultsContainer.innerHTML += card;
-                    });
-                } else {
-                    resultsContainer.innerHTML = '<p style="text-align:center">عذراً، لم نجد نتائج شاملة.</p>';
-                }
-            } catch (err) {
-                console.error(err);
-                loadingText.textContent = "خطأ في الاتصال بالسيرفر الشامل.";
-            }
-        }
-        // محرك جوجل المخصص للتبويبات الأخرى
-        function loadGoogleEngine(query, cx) {
-            const oldScript = document.getElementById('google-cse');
-            if (oldScript) oldScript.remove();
-            const script = document.createElement('script');
-            script.id = 'google-cse';
-            script.src = `https://cse.google.com/cse.js?cx=${cx}`;
-            script.async = true;
-            script.onload = () => {
-                const gcse = document.createElement('div');
-                gcse.className = 'gcse-searchresults-only';
-                gcse.setAttribute('data-query', query);
-                resultsContainer.appendChild(gcse);
-                setTimeout(() => { loadingText.style.display = 'none'; }, 1500);
-            };
-            document.head.appendChild(script);
-        }
-    </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>
+        /* =========================================
+           1. نظام الألوان والوضع الداكن
+           ========================================= */
+        :root {
+            --bg-base: #f8fafc;
+            --bg-nav: rgba(255, 255, 255, 0.85);
+            --bg-card: #ffffff;
+            --bg-input: #f1f5f9;
+            --bg-input-focus: #ffffff;
+            --border: #e2e8f0;
+            --accent: #6366f1;
+            --accent-2: #ec4899;
+            --text-main: #0f172a;
+            --text-sub: #64748b;
+            --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        /* الوضع الداكن */
+        [data-theme="dark"] {
+            --bg-base: #0f172a;
+            --bg-nav: rgba(15, 23, 42, 0.9);
+            --bg-card: #1e293b;
+            --bg-input: #334155;
+            --bg-input-focus: #1e293b;
+            --border: #334155;
+            --accent: #818cf8;
+            --accent-2: #f472b6;
+            --text-main: #f1f5f9;
+            --text-sub: #94a3b8;
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            outline: none;
+        }
+        body {
+            font-family: 'Plus Jakarta Sans', 'Tajawal', sans-serif;
+            background: var(--bg-base);
+            color: var(--text-main);
+            min-height: 100vh;
+            overflow-x: hidden;
+            transition: background-color 0.3s ease, color 0.3s ease;
+        }
+        .orb {
+            position: fixed;
+            border-radius: 50%;
+            filter: blur(100px);
+            z-index: 0;
+            pointer-events: none;
+            opacity: 0.15;
+            transition: opacity 0.3s;
+        }
+        .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;
+            transition: background 0.3s, border-color 0.3s;
+        }
+        .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: var(--bg-input);
+            border: 1px solid var(--border);
+            border-radius: 100px;
+            padding: 4px;
+            transition: var(--transition), background-color 0.3s;
+            width: 100%;
+        }
+        .search-bar:focus-within {
+            border-color: var(--accent);
+            background: var(--bg-input-focus);
+            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);
+        }
+        /* زر تبديل السمة */
+        #theme-toggle {
+            background: none;
+            border: none;
+            color: var(--text-main);
+            cursor: pointer;
+            padding: 5px;
+            font-size: 20px;
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: background 0.3s, color 0.3s;
+        }
+        #theme-toggle:hover {
+            background: var(--border);
+        }
+        .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: var(--bg-input) !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,
+        .gcsc-branding,
+        .gsc-branding-text,
+        .gsc-branding-img,
+        .gsc-branding-img-noclear,
+        .gs-watermark,
+        .gsc-results-branding,
+        .gcsc-find-more-on-google,
+        .gcsc-find-more-on-google-root,
+        .gsc-result-info,
+        .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;
+            margin: 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>
+        <!-- زر تبديل الوضع الداكن/الفاتح -->
+        <button id="theme-toggle" aria-label="تغيير السمة">
+            <i class="fa-solid fa-moon"></i>
+        </button>
+    </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>
+        (function() {
+            // ─────────────────────────────────────
+            // إدارة السمة (داكن/فاتح)
+            // ─────────────────────────────────────
+            const themeToggle = document.getElementById('theme-toggle');
+            const themeIcon = themeToggle.querySelector('i');
+            function setTheme(theme) {
+                document.documentElement.setAttribute('data-theme', theme);
+                localStorage.setItem('surfgo-theme', theme);
+                if (theme === 'dark') {
+                    themeIcon.classList.remove('fa-moon');
+                    themeIcon.classList.add('fa-sun');
+                } else {
+                    themeIcon.classList.remove('fa-sun');
+                    themeIcon.classList.add('fa-moon');
+                }
+            }
+            // استعادة السمة المحفوظة أو استخدام الفاتح كإفتراضي
+            const savedTheme = localStorage.getItem('surfgo-theme') || 'light';
+            setTheme(savedTheme);
+            themeToggle.addEventListener('click', () => {
+                const current = document.documentElement.getAttribute('data-theme');
+                const next = current === 'dark' ? 'light' : 'dark';
+                setTheme(next);
+            });
+            // ─────────────────────────────────────
+            // محركات البحث والإعدادات الأخرى
+            // ─────────────────────────────────────
+            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 inputField = document.getElementById('main-input');
+            const resultsContainer = document.getElementById('results-container');
+            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 {
+                        icon.classList.remove('fa-chevron-up');
+                        icon.classList.add('fa-chevron-down');
+                    }
+                });
+            }
+            document.querySelectorAll('.tab-pill').forEach(btn => {
+                btn.classList.toggle('active', btn.dataset.tab === currentTab);
+            });
+            if (query) {
+                inputField.value = query;
+                document.title = `${query} - SurfGO`;
+                loadSurfEngine(currentTab);
+            } else {
+                loadingText.textContent = "يرجى إدخال كلمة بحث للبدء.";
+            }
+            function loadSurfEngine(tab) {
+                const cx = ENGINES[tab];
+                resultsContainer.innerHTML = '';
+                loadingText.style.display = 'block';
+                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}`;
+                script.async = true;
+                script.onload = () => {
+                    const gcseDiv = document.createElement('div');
+                    gcseDiv.className = 'gcse-searchresults-only';
+                    gcseDiv.setAttribute('data-query', query);
+                    resultsContainer.appendChild(gcseDiv);
+                    setTimeout(() => {
+                        loadingText.style.display = 'none';
+                    }, 1000);
+                };
+                document.head.appendChild(script);
+            }
+            document.querySelectorAll('.tab-pill').forEach(btn => {
+                btn.addEventListener('click', () => {
+                    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));
+                    }
+                });
+            });
+            document.getElementById('search-form').addEventListener('submit', (e) => {
+                e.preventDefault();
+                query = inputField.value;
+                if (query) {
+                    const newUrl = `${window.location.pathname}?q=${encodeURIComponent(query)}&tab=${currentTab}`;
+                    window.history.pushState({ path: newUrl }, '', newUrl);
+                    loadSurfEngine(currentTab);
+                }
+            });
+            // ─────────────────────────────────────
+            // المراقب الذكي: إخفاء عناصر غوغل + أيقونات المواقع
+            // ─────────────────────────────────────
+            const observer = new MutationObserver(() => {
+                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>