Update results.html

results.html

@@ -10,10 +10,15 @@
         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;
@@ -22,6 +27,20 @@
             --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;
@@ -35,6 +54,7 @@
             color: var(--text-main);
             min-height: 100vh;
             overflow-x: hidden;
+            transition: background-color 0.3s ease, color 0.3s ease;
         }
 
         .orb {
@@ -44,6 +64,7 @@
             z-index: 0;
             pointer-events: none;
             opacity: 0.15;
+            transition: opacity 0.3s;
         }
 
         .orb-1 {
@@ -83,6 +104,7 @@
             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 {
@@ -117,17 +139,17 @@
         .search-bar {
             display: flex;
             align-items: center;
-            background: #f1f5f9;
+            background: var(--bg-input);
             border: 1px solid var(--border);
             border-radius: 100px;
             padding: 4px;
-            transition: var(--transition);
+            transition: var(--transition), background-color 0.3s;
             width: 100%;
         }
 
         .search-bar:focus-within {
             border-color: var(--accent);
-            background: #ffffff;
+            background: var(--bg-input-focus);
             box-shadow: 0 0 15px rgba(99, 102, 241, 0.1);
         }
 
@@ -145,6 +167,27 @@
             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;
@@ -225,7 +268,7 @@
         .gsc-result:hover {
             border-color: var(--accent) !important;
             transform: translateX(-5px) !important;
-            background: #f8fafc !important;
+            background: var(--bg-input) !important;
             box-shadow: 0 8px 30px rgba(99, 102, 241, 0.08) !important;
         }
 
@@ -408,7 +451,7 @@
             }
         }
 
-        /* تنسيق الفاف ايكون الجديد والمحسن */
+        /* أيقونات المواقع */
         .gs-favicon {
             width: 20px;
             height: 20px;
@@ -446,7 +489,10 @@
                 </button>
             </form>
         </div>
-        <div class="hidden md:block" style="width: 40px;"></div>
+        <!-- زر تبديل الوضع الداكن/الفاتح -->
+        <button id="theme-toggle" aria-label="تغيير السمة">
+            <i class="fa-solid fa-moon"></i>
+        </button>
     </nav>
 
     <div class="tabs-bar">
@@ -516,152 +562,178 @@
     </div>
 
     <script>
-        const ENGINES = {
-            all: '75aa960081baa4f0c',
-            news: '35b0f5b6012e94f78',
-            images: '23c7fd94975714dd8',
-            videos: 'b11f5dceb04784b9f'
-        };
-
-        const params = new URLSearchParams(window.location.search);
-        let query = params.get('q');
-        let currentTab = params.get('tab') || 'all';
-        const 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');
+        (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 {
-                    icon.classList.remove('fa-chevron-up');
-                    icon.classList.add('fa-chevron-down');
+                    themeIcon.classList.remove('fa-sun');
+                    themeIcon.classList.add('fa-moon');
                 }
-            });
-        }
-
-        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 = "يرجى إدخال كلمة بحث للبدء.";
-        }
+            // استعادة السمة المحفوظة أو استخدام الفاتح كإفتراضي
+            const savedTheme = localStorage.getItem('surfgo-theme') || 'light';
+            setTheme(savedTheme);
 
-        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);
+            themeToggle.addEventListener('click', () => {
+                const current = document.documentElement.getAttribute('data-theme');
+                const next = current === 'dark' ? 'light' : 'dark';
+                setTheme(next);
             });
 
-            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);
+            // ─────────────────────────────────────
+            // محركات البحث والإعدادات الأخرى
+            // ─────────────────────────────────────
+            const ENGINES = {
+                all: '75aa960081baa4f0c',
+                news: '35b0f5b6012e94f78',
+                images: '23c7fd94975714dd8',
+                videos: 'b11f5dceb04784b9f'
             };
-            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));
-                }
+
+            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);
             });
-        });
 
-        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);
+                inputField.value = query;
+                document.title = `${query} - SurfGO`;
                 loadSurfEngine(currentTab);
+            } else {
+                loadingText.textContent = "يرجى إدخال كلمة بحث للبدء.";
             }
-        });
-
-        // ─────────────────────────────────────
-        // المراقب الذكي: إزالة عناصر غوغل + إضافة الفاف ايكون بذكاء
-        // ─────────────────────────────────────
-        const observer = new MutationObserver((mutations) => {
-            // إخفاء عناصر غوغل غير المرغوب فيها
-            document.querySelectorAll(
-                '.gsc-adBlock, .gcsc-branding, .gsc-result-info, .gsc-tabsArea, .gsc-refinementHeader'
-            ).forEach(el => el.remove());
-
-            // إضافة شعار الموقع (فاف ايكون) لكل نتيجة
-            document.querySelectorAll('.gsc-result').forEach(result => {
-                if (result.dataset.faviconAdded) return;
-
-                const link = result.querySelector('a.gs-title');
-                if (!link) return;
-
-                let domain = '';
-                try {
-                    if (link.href) {
-                        const url = new URL(link.href);
-                        domain = url.hostname;
-                    }
-                } catch (e) {
-                    // نتجاهل الأخطاء ونستخدم أيقونة افتراضية
-                }
 
-                const favicon = document.createElement('img');
-                favicon.className = 'gs-favicon';
-                favicon.alt = 'شعار الموقع';
-                favicon.loading = 'lazy';
+            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);
+            }
 
-                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>';
-                }
+            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));
+                    }
+                });
+            });
 
-                // إدراج الأيقونة داخل الرابط كأول عنصر
-                if (link.firstChild) {
-                    link.insertBefore(favicon, link.firstChild);
-                } else {
-                    link.appendChild(favicon);
+            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);
                 }
+            });
 
-                result.dataset.faviconAdded = 'true';
+            // ─────────────────────────────────────
+            // المراقب الذكي: إخفاء عناصر غوغل + أيقونات المواقع
+            // ─────────────────────────────────────
+            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 });
+            observer.observe(document.body, { childList: true, subtree: true });
+        })();
     </script>
 </body>
 </html>