Spaces:

AnesKAM
/

SurfGO

Running

App Files Files Community

AnesKAM commited on May 2

Commit

ecfd363

verified ·

1 Parent(s): 577965a

Update results.html

Browse files

Files changed (1) hide show

results.html +237 -241

results.html CHANGED Viewed

@@ -1,266 +1,262 @@
 <!DOCTYPE html>
-<html class="dark" dir="rtl" lang="ar"><head>
 <meta charset="utf-8"/>
-<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
-<title>SurfGO - Modern Search</title>
-<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
-<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&amp;display=swap" rel="stylesheet"/>
-<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
-<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
-<script id="tailwind-config">
-        tailwind.config = {
-            darkMode: "class",
-            theme: {
-                extend: {
-                    "colors": {
-                        "tertiary": "#ffb783",
-                        "surface-container-highest": "#34343d",
-                        "background": "#13131b",
-                        "secondary-fixed": "#ffd9e4",
-                        "outline-variant": "#464554",
-                        "on-tertiary-fixed-variant": "#703700",
-                        "on-primary-fixed": "#07006c",
-                        "secondary-container": "#aa0266",
-                        "primary-fixed": "#e1e0ff",
-                        "on-error": "#690005",
-                        "on-background": "#e4e1ed",
-                        "tertiary-container": "#d97721",
-                        "surface-container": "#1f1f27",
-                        "primary": "#c0c1ff",
-                        "on-tertiary-container": "#452000",
-                        "tertiary-fixed-dim": "#ffb783",
-                        "surface-variant": "#34343d",
-                        "on-surface": "#e4e1ed",
-                        "error": "#ffb4ab",
-                        "tertiary-fixed": "#ffdcc5",
-                        "surface-container-low": "#1b1b23",
-                        "secondary-fixed-dim": "#ffb0cd",
-                        "secondary": "#ffb0cd",
-                        "on-surface-variant": "#c7c4d7",
-                        "error-container": "#93000a",
-                        "surface-bright": "#393841",
-                        "primary-container": "#8083ff",
-                        "on-primary": "#1000a9",
-                        "inverse-on-surface": "#303038",
-                        "on-primary-fixed-variant": "#2f2ebe",
-                        "on-secondary-container": "#ffbad3",
-                        "on-tertiary-fixed": "#301400",
-                        "surface-tint": "#c0c1ff",
-                        "surface-dim": "#13131b",
-                        "outline": "#908fa0",
-                        "surface-container-lowest": "#0d0d15",
-                        "on-tertiary": "#4f2500",
-                        "on-primary-container": "#0d0096",
-                        "on-secondary-fixed-variant": "#8c0053",
-                        "inverse-primary": "#494bd6",
-                        "primary-fixed-dim": "#c0c1ff",
-                        "surface": "#13131b",
-                        "surface-container-high": "#292932",
-                        "on-secondary-fixed": "#3e0022",
-                        "inverse-surface": "#e4e1ed",
-                        "on-error-container": "#ffdad6",
-                        "on-secondary": "#640039"
-                    },
-                    "borderRadius": {
-                        "DEFAULT": "0.25rem",
-                        "lg": "0.5rem",
-                        "xl": "0.75rem",
-                        "full": "9999px"
-                    },
-                    "spacing": {
-                        "margin-desktop": "40px",
-                        "gutter": "24px",
-                        "base": "8px",
-                        "margin-mobile": "16px",
-                        "container-max": "1280px"
-                    },
-                    "fontFamily": {
-                        "headline-lg": ["Plus Jakarta Sans"],
-                        "display-xl": ["Plus Jakarta Sans"],
-                        "label-sm": ["Plus Jakarta Sans"],
-                        "body-md": ["Plus Jakarta Sans"]
-                    },
-                    "fontSize": {
-                        "headline-lg": ["32px", {"lineHeight": "1.2", "fontWeight": "700"}],
-                        "display-xl": ["48px", {"lineHeight": "1.1", "letterSpacing": "-0.02em", "fontWeight": "800"}],
-                        "label-sm": ["13px", {"lineHeight": "1", "letterSpacing": "0.05em", "fontWeight": "600"}],
-                        "body-md": ["16px", {"lineHeight": "1.6", "fontWeight": "400"}]
-                    }
-                }
-            }
-        }
-    </script>
 <style>
         body {
-            background-color: #05050a;
-            position: relative;
             overflow-x: hidden;
         }
-        /* Deep Space Glowing Orbs */
-        body::before {
-            content: '';
-            position: fixed;
-            top: -20%;
-            left: -10%;
-            width: 50vw;
-            height: 50vw;
-            background: radial-gradient(circle, rgba(99,102,241,0.15) 0%, rgba(99,102,241,0) 70%);
-            border-radius: 50%;
-            z-index: -1;
-            pointer-events: none;
         }
-        body::after {
-            content: '';
-            position: fixed;
-            bottom: -20%;
-            right: -10%;
-            width: 40vw;
-            height: 40vw;
-            background: radial-gradient(circle, rgba(236,72,153,0.1) 0%, rgba(236,72,153,0) 70%);
-            border-radius: 50%;
-            z-index: -1;
-            pointer-events: none;
         }
-        /* Glassmorphism Utilities */
-        .glass-panel {
-            background: rgba(19, 19, 27, 0.4);
-            backdrop-filter: blur(24px);
-            -webkit-backdrop-filter: blur(24px);
-            border: 1px solid rgba(255, 255, 255, 0.1);
         }
-        .search-glow:focus-within {
-            box-shadow: 0 0 30px rgba(192, 193, 255, 0.2), inset 0 0 20px rgba(192, 193, 255, 0.1);
-            border-image: linear-gradient(to right, #c0c1ff, #ffb0cd) 1;
-            border-image-slice: 1;
-            border-radius: 0; /* Reset border radius when using border-image */
         }
     </style>
 </head>
-<body class="text-on-background min-h-screen flex antialiased selection:bg-primary-container selection:text-on-primary-container">
-<!-- SideNavBar Component -->
-<nav class="hidden md:flex flex-col h-screen left-0 border-l w-64 bg-slate-950/40 backdrop-blur-2xl border-white/10 shrink-0 py-8 z-20">
-<div class="px-6 mb-10">
-<h2 class="text-indigo-400 font-['Plus_Jakarta_Sans'] text-xs font-semibold uppercase tracking-widest mb-1">ACTIVE ENGINES</h2>
-<p class="text-slate-500 font-label-sm text-label-sm">4 sources connected</p>
-</div>
-<ul class="flex flex-col gap-1 flex-grow">
-<li>
-<a class="bg-indigo-500/10 text-indigo-400 border-r-4 border-indigo-500 py-3 px-4 flex items-center gap-4 transition-colors duration-200" href="#">
-<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">search</span>
-<span class="font-label-sm text-label-sm flex-grow">Google</span>
-<span class="w-2 h-2 rounded-full bg-primary animate-pulse"></span>
-</a>
-</li>
-<li>
-<a class="text-slate-500 py-3 px-4 flex items-center gap-4 hover:bg-white/5 hover:text-slate-200 transition-colors duration-200" href="#">
-<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">shield</span>
-<span class="font-label-sm text-label-sm flex-grow">DuckDuckGo</span>
-<span class="w-2 h-2 rounded-full bg-surface-variant"></span>
-</a>
-</li>
-<li>
-<a class="text-slate-500 py-3 px-4 flex items-center gap-4 hover:bg-white/5 hover:text-slate-200 transition-colors duration-200" href="#">
-<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">bolt</span>
-<span class="font-label-sm text-label-sm flex-grow">Brave</span>
-<span class="w-2 h-2 rounded-full bg-surface-variant"></span>
-</a>
-</li>
-<li>
-<a class="text-slate-500 py-3 px-4 flex items-center gap-4 hover:bg-white/5 hover:text-slate-200 transition-colors duration-200" href="#">
-<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">language</span>
-<span class="font-label-sm text-label-sm flex-grow">Bing</span>
-<span class="w-2 h-2 rounded-full bg-surface-variant"></span>
-</a>
-</li>
-</ul>
-<div class="mt-auto px-4 border-t border-white/10 pt-6">
-<ul class="flex flex-col gap-1">
-<li>
-<a class="text-slate-500 py-3 px-4 flex items-center gap-4 hover:bg-white/5 hover:text-slate-200 transition-colors duration-200" href="#">
-<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">tune</span>
-<span class="font-label-sm text-label-sm">Settings</span>
 </a>
-</li>
-<li>
-<a class="text-slate-500 py-3 px-4 flex items-center gap-4 hover:bg-white/5 hover:text-slate-200 transition-colors duration-200" href="#">
-<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">policy</span>
-<span class="font-label-sm text-label-sm">Privacy</span>
-</a>
-</li>
-</ul>
-</div>
-</nav>
-<!-- Main Content Area -->
-<main class="flex-grow flex flex-col relative w-full h-screen overflow-hidden">
-<!-- TopNavBar Component -->
-<header class="flex justify-between items-center w-full px-6 py-3 bg-slate-950/50 backdrop-blur-3xl border-b border-white/10 shadow-[0_0_20px_rgba(99,102,241,0.1)] z-10 docked full-width top-0">
-<!-- Brand Logo -->
-<div class="flex items-center gap-2">
-<span class="text-2xl font-black tracking-tighter text-indigo-500 font-['Plus_Jakarta_Sans']">NEBULA</span>
 </div>
-<!-- Navigation Links -->
-<nav class="hidden md:flex gap-8">
-<a class="font-['Plus_Jakarta_Sans'] text-sm tracking-wide text-indigo-400 border-b-2 border-indigo-500 pb-1 duration-300 ease-in-out" href="#">Web</a>
-<a class="font-['Plus_Jakarta_Sans'] text-sm tracking-wide text-slate-400 hover:text-white hover:bg-white/5 transition-all duration-300 ease-in-out px-2 rounded-lg py-1" href="#">Images</a>
-<a class="font-['Plus_Jakarta_Sans'] text-sm tracking-wide text-slate-400 hover:text-white hover:bg-white/5 transition-all duration-300 ease-in-out px-2 rounded-lg py-1" href="#">Videos</a>
-<a class="font-['Plus_Jakarta_Sans'] text-sm tracking-wide text-slate-400 hover:text-white hover:bg-white/5 transition-all duration-300 ease-in-out px-2 rounded-lg py-1" href="#">News</a>
 </nav>
-<!-- Trailing Icons -->
-<div class="flex items-center gap-4">
-<button class="text-slate-400 hover:text-white hover:bg-white/5 transition-all p-2 rounded-full duration-300 ease-in-out flex items-center justify-center">
-<span class="material-symbols-outlined">settings</span>
-</button>
-<button class="text-slate-400 hover:text-white hover:bg-white/5 transition-all p-2 rounded-full duration-300 ease-in-out flex items-center justify-center">
-<span class="material-symbols-outlined">account_circle</span>
-</button>
 </div>
-</header>
-<!-- Central Search Area -->
-<div class="flex-grow flex flex-col items-center justify-center px-4 md:px-0 relative z-0">
-<div class="w-full max-w-2xl flex flex-col items-center gap-10">
-<!-- SurfGO Logo -->
-<div class="text-center">
-<h1 class="font-display-xl text-display-xl text-primary bg-clip-text text-transparent bg-gradient-to-r from-primary to-secondary">
-                        SurfGO
-                    </h1>
-<p class="font-body-md text-body-md text-on-surface-variant mt-2">البحث الحديث</p>
 </div>
-<!-- Glassmorphism Search Bar -->
-<div class="w-full relative group">
-<div class="absolute inset-0 bg-primary/20 rounded-full blur-xl group-hover:bg-primary/30 transition-all duration-500 pointer-events-none"></div>
-<div class="glass-panel search-glow rounded-full flex items-center px-6 py-4 relative transition-all duration-300 w-full bg-surface-container/60">
-<button class="text-on-surface-variant hover:text-primary transition-colors pl-4">
-<span class="material-symbols-outlined text-2xl">search</span>
-</button>
-<input class="flex-grow bg-transparent border-none outline-none text-on-surface font-body-md text-body-md placeholder-on-surface-variant/50 pr-4 text-right rtl" dir="rtl" placeholder="ابحث في الفضاء الرقمي..." type="text"/>
-<div class="flex items-center gap-3 border-r border-outline-variant pr-4">
-<button class="text-on-surface-variant hover:text-secondary transition-colors" title="البحث الصوتي">
-<span class="material-symbols-outlined">mic</span>
-</button>
-<button class="text-on-surface-variant hover:text-primary transition-colors" title="البحث بالصور">
-<span class="material-symbols-outlined">image</span>
-</button>
 </div>
 </div>
 </div>
-<!-- Quick Action Chips -->
-<div class="flex flex-wrap justify-center gap-3 mt-4">
-<button class="glass-panel px-6 py-2 rounded-full font-label-sm text-label-sm text-on-surface hover:bg-primary/10 hover:border-primary/30 transition-all duration-300">
-                        الذكاء الاصطناعي
-                    </button>
-<button class="glass-panel px-6 py-2 rounded-full font-label-sm text-label-sm text-on-surface hover:bg-primary/10 hover:border-primary/30 transition-all duration-300">
-                        الأخبار العاجلة
-                    </button>
-<button class="glass-panel px-6 py-2 rounded-full font-label-sm text-label-sm text-on-surface hover:bg-primary/10 hover:border-primary/30 transition-all duration-300">
-                        الطقس المحلي
-                    </button>
 </div>
 </div>
 </div>
-</main>
 </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. نظام الألوان المتطور (SurfGO Theme)
+           ========================================= */
+        :root {
+            --bg-base: #f8fafc;
+            --bg-nav: rgba(255, 255, 255, 0.85);
+            --bg-card: #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);
+        }
+        * { 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;
         }
+        .orb {
+            position: fixed; border-radius: 50%; filter: blur(100px); z-index: 0; pointer-events: none; opacity: 0.15;
         }
+        .orb-1 { top: -10%; left: -10%; width: 50vw; height: 50vw; background: var(--accent); }
+        .orb-2 { bottom: -10%; right: -10%; width: 40vw; height: 40vw; background: var(--accent-2); }
+        .navbar {
+            position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
+            width: 95%; max-width: 1300px; height: 72px;
+            background: var(--bg-nav); backdrop-filter: blur(24px);
+            border: 1px solid var(--border); border-radius: 20px;
+            display: flex; align-items: center; justify-content: space-between;
+            padding: 0 20px; z-index: 1000; box-shadow: 0 10px 30px rgba(0,0,0,0.05);
         }
+        .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; }
+        .search-container { flex: 1; max-width: 600px; margin: 0 24px; }
+        .search-bar {
+            display: flex; align-items: center; background: #f1f5f9;
+            border: 1px solid var(--border); border-radius: 100px; padding: 4px; transition: var(--transition);
         }
+        .search-bar:focus-within { border-color: var(--accent); background: #ffffff; box-shadow: 0 0 15px rgba(99,102,241,0.1); }
+        .search-bar input { flex: 1; background: transparent; border: none; padding: 10px 18px; color: var(--text-main); font-size: 15px; }
+        .search-bar input::placeholder { color: var(--text-sub); }
+        .tabs-bar {
+            position: fixed; top: 105px; left: 50%; transform: translateX(-50%);
+            width: 95%; max-width: 1300px; display: flex; gap: 8px; z-index: 999;
+        }
+        .tab-pill {
+            padding: 8px 20px; 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: 8px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.02);
         }
+        .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: grid; grid-template-columns: 1fr 300px; gap: 30px; }
+        .results-area { min-width: 0; }
+        /* =========================================
+           2. إخفاء آثار GOOGLE CSE بشكل جذري
+           ========================================= */
+        .gsc-control-cse { background: transparent !important; border: none !important; padding: 0 !important; }
+        .gsc-result {
+            background: var(--bg-card) !important; border: 1px solid var(--border) !important;
+            border-radius: 16px !important; padding: 22px !important; margin-bottom: 15px !important;
+            transition: var(--transition) !important; box-shadow: 0 4px 20px rgba(0,0,0,0.02) !important;
+        }
+        .gsc-result:hover { border-color: var(--accent) !important; transform: translateX(-5px) !important; background: #f8fafc !important; box-shadow: 0 8px 30px rgba(99,102,241,0.08) !important; }
+        .gs-title, .gs-title * { color: var(--accent) !important; text-decoration: none !important; font-size: 18px !important; }
+        .gs-snippet { color: var(--text-sub) !important; line-height: 1.6 !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; }
+        .widget { background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; padding: 25px; 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 (max-width: 1000px) { .page-wrapper { grid-template-columns: 1fr; } .sidebar { display: none; } }
     </style>
 </head>
+<body>
+<div class="orb orb-1"></div>
+<div class="orb orb-2"></div>
+<nav class="navbar">
+<a class="brand" href="index.html">
+<div class="brand-icon"><i class="fa-solid fa-bolt"></i></div>
+<span>SurfGO</span>
 </a>
+<div class="search-container">
+<form class="search-bar" id="search-form">
+<input id="main-input" placeholder="ابحث في الويب..." type="text"/>
+<button style="background:none; border:none; color:var(--accent); cursor:pointer; padding:0 15px;" type="submit">
+<i class="fa-solid fa-search"></i>
+</button>
+</form>
 </div>
+<div style="width: 40px;"></div>
 </nav>
+<div class="tabs-bar">
+<button class="tab-pill active" data-tab="all"><i class="fa-solid fa-globe"></i> الويب</button>
+<button class="tab-pill" data-tab="news"><i class="fa-solid fa-newspaper"></i> أخبار</button>
+<button class="tab-pill" data-tab="images"><i class="fa-solid fa-image"></i> صور</button>
+<button class="tab-pill" data-tab="videos"><i class="fa-solid fa-play"></i> فيديو</button>
 </div>
+<div class="page-wrapper">
+<main class="results-area">
+<div id="loading-text" style="color:var(--text-sub); margin-bottom:20px;">جاري استدعاء البيانات من SurfGO...</div>
+<div id="results-container"></div>
+</main>
+<aside class="sidebar">
+<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>
+</aside>
 </div>
+<script>
+        const ENGINES = {
+            all:    '75aa960081baa4f0c',
+            news:   '35b0f5b6012e94f78',
+            images: '23c7fd94975714dd8',
+            videos: 'b11f5dceb04784b9f'
+        };
+        const params = new URLSearchParams(window.location.search);
+        let query = params.get('q');
+        let currentTab = params.get('tab') || 'all';
+        const inputField = document.getElementById('main-input');
+        const resultsContainer = document.getElementById('results-container');
+        const loadingText = document.getElementById('loading-text');
+        // Initial set active tab based on URL
+        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((mutations) => {
+            document.querySelectorAll('.gsc-adBlock, .gcsc-branding, .gsc-result-info, .gsc-tabsArea, .gsc-refinementHeader').forEach(el => el.remove());
+        });
+        observer.observe(document.body, { childList: true, subtree: true });
+    </script>
 </body></html>