Spaces:

AnesKAM
/

SurfGO

Running

App Files Files Community

AnesKAM commited on May 2

Commit

1d648c8

verified ·

1 Parent(s): d303109

Update results.html

Browse files

Files changed (1) hide show

results.html +733 -733

results.html CHANGED Viewed

@@ -1,739 +1,739 @@
 <!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>

 <!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>