Spaces:

AnesKAM
/

SurfGO

Running

App Files Files Community

AnesKAM commited on May 2

Commit

116ea32

verified ·

1 Parent(s): 7233388

Update results.html

Browse files

Files changed (1) hide show

results.html +402 -248

results.html CHANGED Viewed

@@ -1,253 +1,407 @@
 <!DOCTYPE html>
-<html lang="ar" dir="rtl" data-theme="dark">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
-    <title>SurfGO | نتائج البحث</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Tajawal:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
-    <style>
-        /* =========================================
-           1. نظام الألوان المتطور (SurfGO Theme)
-           ========================================= */
-        :root {
-            --bg-base: #05050a;
-            --bg-nav: rgba(9, 9, 15, 0.7);
-            --bg-card: rgba(255, 255, 255, 0.03);
-            --border: rgba(255, 255, 255, 0.08);
-            --accent: #6366f1;
-            --accent-2: #ec4899;
-            --text-main: #f1f5f9;
-            --text-sub: #94a3b8;
-            --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.4;
-        }
-        .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.5);
-        }
-        .brand { font-weight: 700; font-size: 22px; text-decoration: none; color: #fff; 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; }
-        .search-container { flex: 1; max-width: 600px; margin: 0 24px; }
-        .search-bar {
-            display: flex; align-items: center; background: rgba(255,255,255,0.04);
-            border: 1px solid var(--border); border-radius: 100px; padding: 4px; transition: var(--transition);
         }
-        .search-bar:focus-within { border-color: var(--accent); background: rgba(255,255,255,0.08); box-shadow: 0 0 15px rgba(99,102,241,0.2); }
-        .search-bar input { flex: 1; background: transparent; border: none; padding: 10px 18px; color: #fff; font-size: 15px; }
-        .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;
-        }
-        .tab-pill.active { background: #fff; color: #000; border-color: #fff; }
-        .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;
-        }
-        .gsc-result:hover { border-color: var(--accent) !important; transform: translateX(-5px) !important; background: rgba(255,255,255,0.05) !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; }
-        .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 href="index.html" class="brand">
-            <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 type="text" id="main-input" placeholder="ابحث في الويب...">
-                <button type="submit" style="background:none; border:none; color:var(--accent); cursor:pointer; padding:0 15px;">
-                    <i class="fa-solid fa-search"></i>
-                </button>
-            </form>
-        </div>
-        <div style="width: 40px;"></div>
-    </nav>
-    <div class="tabs-bar">
-        <button class="tab-pill" 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-code"></i></div>
-                <h3 style="font-size: 16px; margin-bottom: 5px;">AnesNT Core</h3>
-                <p style="font-size: 13px; color: var(--text-sub);">محرك بحث مخصص تم تطويره بالكامل لتوفير نتائج دقيقة وسريعة.</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');
-        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);
-                loadSurfEngine(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>

 <!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 Search Results</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;500;600;700&amp;family=Tajawal:wght@400;500;700&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"/>
+<style>
+        .material-symbols-outlined {
+            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
         }
     </style>
+<script id="tailwind-config">
+        tailwind.config = {
+          darkMode: "class",
+          theme: {
+            extend: {
+              "colors": {
+                      "primary-fixed-dim": "#c0c1ff",
+                      "surface-bright": "#31394d",
+                      "outline-variant": "#464554",
+                      "on-secondary-fixed": "#3e0022",
+                      "background": "#0b1326",
+                      "tertiary": "#4fdbc8",
+                      "tertiary-fixed": "#71f8e4",
+                      "surface-dim": "#0b1326",
+                      "on-secondary-container": "#ffbad3",
+                      "on-primary": "#1000a9",
+                      "secondary-container": "#aa0266",
+                      "on-error-container": "#ffdad6",
+                      "on-primary-fixed": "#07006c",
+                      "on-secondary": "#640039",
+                      "on-tertiary-container": "#00302a",
+                      "secondary-fixed": "#ffd9e4",
+                      "secondary-fixed-dim": "#ffb0cd",
+                      "tertiary-fixed-dim": "#4fdbc8",
+                      "surface": "#0b1326",
+                      "on-tertiary-fixed-variant": "#005048",
+                      "on-primary-fixed-variant": "#2f2ebe",
+                      "primary-fixed": "#e1e0ff",
+                      "on-error": "#690005",
+                      "tertiary-container": "#00a392",
+                      "error": "#ffb4ab",
+                      "on-primary-container": "#0d0096",
+                      "inverse-surface": "#dae2fd",
+                      "on-tertiary": "#003731",
+                      "on-secondary-fixed-variant": "#8c0053",
+                      "surface-container-low": "#131b2e",
+                      "surface-variant": "#2d3449",
+                      "primary": "#c0c1ff",
+                      "surface-container-lowest": "#060e20",
+                      "error-container": "#93000a",
+                      "on-background": "#dae2fd",
+                      "inverse-on-surface": "#283044",
+                      "primary-container": "#8083ff",
+                      "on-tertiary-fixed": "#00201c",
+                      "surface-container-highest": "#2d3449",
+                      "on-surface": "#dae2fd",
+                      "secondary": "#ffb0cd",
+                      "outline": "#908fa0",
+                      "surface-container-high": "#222a3d",
+                      "surface-container": "#171f33",
+                      "on-surface-variant": "#c7c4d7",
+                      "inverse-primary": "#494bd6",
+                      "surface-tint": "#c0c1ff"
+              },
+              "borderRadius": {
+                      "DEFAULT": "0.25rem",
+                      "lg": "0.5rem",
+                      "xl": "0.75rem",
+                      "full": "9999px"
+              },
+              "spacing": {
+                      "stack-sm": "12px",
+                      "margin-page": "40px",
+                      "base": "8px",
+                      "stack-lg": "48px",
+                      "container-max-width": "1280px",
+                      "stack-xs": "4px",
+                      "stack-md": "24px",
+                      "gutter": "24px",
+                      "result-column-width": "720px"
+              },
+              "fontFamily": {
+                      "display-lg": [
+                              "Plus Jakarta Sans"
+                      ],
+                      "headline-md": [
+                              "Plus Jakarta Sans"
+                      ],
+                      "label-caps": [
+                              "Tajawal"
+                      ],
+                      "body-main": [
+                              "Plus Jakarta Sans"
+                      ],
+                      "meta-data": [
+                              "Tajawal"
+                      ],
+                      "result-title": [
+                              "Plus Jakarta Sans"
+                      ]
+              },
+              "fontSize": {
+                      "display-lg": [
+                              "48px",
+                              {
+                                      "lineHeight": "1.2",
+                                      "letterSpacing": "-0.02em",
+                                      "fontWeight": "700"
+                              }
+                      ],
+                      "headline-md": [
+                              "24px",
+                              {
+                                      "lineHeight": "1.4",
+                                      "fontWeight": "600"
+                              }
+                      ],
+                      "label-caps": [
+                              "12px",
+                              {
+                                      "lineHeight": "1.2",
+                                      "letterSpacing": "0.05em",
+                                      "fontWeight": "700"
+                              }
+                      ],
+                      "body-main": [
+                              "16px",
+                              {
+                                      "lineHeight": "1.6",
+                                      "fontWeight": "400"
+                              }
+                      ],
+                      "meta-data": [
+                              "14px",
+                              {
+                                      "lineHeight": "1.4",
+                                      "letterSpacing": "0.02em",
+                                      "fontWeight": "500"
+                              }
+                      ],
+                      "result-title": [
+                              "20px",
+                              {
+                                      "lineHeight": "1.3",
+                                      "letterSpacing": "0.01em",
+                                      "fontWeight": "500"
+                              }
+                      ]
+              }
+      },
+          },
         }
+      </script>
+</head>
+<body class="bg-background text-on-surface font-body-main text-body-main min-h-screen flex flex-col antialiased selection:bg-primary-container selection:text-on-primary-container">
+<!-- Top Navigation Bar -->
+<header class="sticky top-0 z-50 bg-[#050505] dark:bg-[#050505] border-b border-[#1E1E1E] w-full max-w-[1280px] mx-auto px-4 md:px-8 pt-4 pb-0 flex flex-col">
+<div class="flex items-center justify-between gap-4 mb-4">
+<!-- Brand -->
+<a class="flex items-center gap-2 group" href="#">
+<span class="material-symbols-outlined text-indigo-500 dark:text-indigo-400 text-3xl group-hover:scale-110 transition-transform">bolt</span>
+<span class="font-['Plus_Jakarta_Sans'] text-2xl font-bold text-indigo-500 dark:text-indigo-400 tracking-tight">InsightSearch</span>
+</a>
+<!-- Search Bar -->
+<div class="flex-1 max-w-2xl mx-auto hidden md:block">
+<div class="relative group">
+<input class="w-full bg-surface-container-low border border-outline-variant rounded-full py-3 px-6 pr-12 text-on-surface font-body-main text-body-main focus:outline-none focus:ring-2 focus:ring-primary-container focus:border-transparent transition-all shadow-sm hover:shadow-md group-focus-within:shadow-[0_0_15px_rgba(128,131,255,0.15)] placeholder:text-on-surface-variant" placeholder="ابحث هنا..." type="text" value="AnesNT"/>
+<button class="absolute right-4 top-1/2 -translate-y-1/2 text-on-surface-variant hover:text-primary transition-colors">
+<span class="material-symbols-outlined">search</span>
+</button>
+<div class="absolute left-4 top-1/2 -translate-y-1/2 flex items-center gap-2 text-on-surface-variant">
+<button class="hover:text-primary transition-colors p-1"><span class="material-symbols-outlined text-lg">mic</span></button>
+<button class="hover:text-primary transition-colors p-1"><span class="material-symbols-outlined text-lg">image</span></button>
+</div>
+</div>
+</div>
+<!-- Actions -->
+<div class="flex items-center gap-3">
+<button class="p-2 text-gray-400 hover:text-gray-200 hover:bg-[#1E1E1E] rounded-full transition-all scale-95 active:opacity-80">
+<span class="material-symbols-outlined">settings</span>
+</button>
+<button class="p-2 text-gray-400 hover:text-gray-200 hover:bg-[#1E1E1E] rounded-full transition-all scale-95 active:opacity-80">
+<span class="material-symbols-outlined">apps</span>
+</button>
+<button class="w-8 h-8 rounded-full overflow-hidden border border-outline-variant hover:border-primary transition-colors">
+<img alt="User profile" class="w-full h-full object-cover" data-alt="A small, circular avatar portrait of a professional individual against a neutral background. The lighting is soft and studio-quality, emphasizing clarity and modern corporate identity. The overall tone is professional, approachable, and integrates perfectly into a dark-mode minimalist UI aesthetic." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCVl2CvHDMsv4lOnnsIDaGDzhMftqtZQJA0_vJGQ6PK18VuYq_-uEsyHq1LdWjMFecwTt_m2xZ0uKmh3uru1IywV3iThe-09175wH-AZOfHlcgn2hJBQYLcwWzew47w6kglLswJxpUlBra0IHAo-Nvv8zzJIq41WRM2kh2UG4vU7xXpkPgM_mPdMfBoR71ioKdhkE9x95EuCh1ZNljNNHFRmje37DqjIBfDUjBMutfQYZFtE6QQUoujCvhp_80LnvEaTtkr8VT5QFR7"/>
+</button>
+</div>
+</div>
+<!-- Navigation Links -->
+<nav class="flex gap-6 overflow-x-auto no-scrollbar pb-0">
+<a class="flex items-center gap-2 text-indigo-400 border-b-2 border-indigo-400 pb-4 font-medium whitespace-nowrap px-1" href="#">
+<span class="material-symbols-outlined text-sm">search</span>
+<span class="font-['Plus_Jakarta_Sans'] text-sm antialiased">Web</span>
+</a>
+<a class="flex items-center gap-2 text-gray-400 hover:text-gray-200 pb-4 transition-colors whitespace-nowrap px-1" href="#">
+<span class="material-symbols-outlined text-sm">article</span>
+<span class="font-['Plus_Jakarta_Sans'] text-sm antialiased">News</span>
+</a>
+<a class="flex items-center gap-2 text-gray-400 hover:text-gray-200 pb-4 transition-colors whitespace-nowrap px-1" href="#">
+<span class="material-symbols-outlined text-sm">image</span>
+<span class="font-['Plus_Jakarta_Sans'] text-sm antialiased">Images</span>
+</a>
+<a class="flex items-center gap-2 text-gray-400 hover:text-gray-200 pb-4 transition-colors whitespace-nowrap px-1" href="#">
+<span class="material-symbols-outlined text-sm">smart_display</span>
+<span class="font-['Plus_Jakarta_Sans'] text-sm antialiased">Videos</span>
+</a>
+<a class="flex items-center gap-2 text-gray-400 hover:text-gray-200 pb-4 transition-colors whitespace-nowrap px-1" href="#">
+<span class="material-symbols-outlined text-sm">map</span>
+<span class="font-['Plus_Jakarta_Sans'] text-sm antialiased">Maps</span>
+</a>
+</nav>
+</header>
+<!-- Main Content Area -->
+<main class="flex-1 w-full max-w-container-max-width mx-auto px-4 md:px-8 py-stack-md flex flex-col lg:flex-row gap-gutter">
+<!-- Search Results Column -->
+<div class="flex-1 max-w-result-column-width flex flex-col gap-stack-md">
+<!-- Result Stats -->
+<p class="font-meta-data text-meta-data text-on-surface-variant mb-2">حوالي 1,240,000 نتيجة (0.42 ثانية)</p>
+<!-- Result Card 1 -->
+<article class="bg-[#121212] border border-[#1E1E1E] rounded-xl p-6 hover:bg-[#1E1E1E] hover:shadow-[0_8px_24px_rgba(0,0,0,0.5)] transition-all duration-300 group">
+<div class="flex items-center gap-3 mb-2">
+<div class="w-6 h-6 rounded-full bg-surface-container-high flex items-center justify-center overflow-hidden border border-outline-variant">
+<span class="material-symbols-outlined text-xs text-primary">code</span>
+</div>
+<div class="flex flex-col">
+<span class="font-meta-data text-meta-data text-on-surface-variant leading-tight">AnesNT Core | الموقع الرسمي</span>
+<span class="font-meta-data text-[12px] text-outline leading-tight mt-0.5">https://anesnt.dev › core</span>
+</div>
+</div>
+<h3 class="mb-2">
+<a class="font-result-title text-result-title text-primary hover:underline group-hover:text-primary-fixed transition-colors" href="#">AnesNT Core - منصة تطوير برمجيات متقدمة للشركات</a>
+</h3>
+<p class="font-body-main text-body-main text-on-surface-variant line-clamp-2">
+                    اكتشف AnesNT Core، إطار العمل القوي والمفتوح المصدر المصمم لبناء تطبيقات ويب عالية الأداء وقابلة للتطوير. يوفر أدوات متكاملة للمطورين وبيئة عمل آمنة وموثوقة...
+                </p>
+<div class="mt-4 flex gap-4">
+<a class="font-meta-data text-meta-data text-secondary hover:underline" href="#">التوثيق (Docs)</a>
+<a class="font-meta-data text-meta-data text-secondary hover:underline" href="#">التحميل</a>
+<a class="font-meta-data text-meta-data text-secondary hover:underline" href="#">المجتمع</a>
+</div>
+</article>
+<!-- Result Card 2 -->
+<article class="bg-[#121212] border border-[#1E1E1E] rounded-xl p-6 hover:bg-[#1E1E1E] hover:shadow-[0_8px_24px_rgba(0,0,0,0.5)] transition-all duration-300 group">
+<div class="flex items-center gap-3 mb-2">
+<div class="w-6 h-6 rounded-full bg-surface-container-high flex items-center justify-center overflow-hidden border border-outline-variant">
+<span class="material-symbols-outlined text-xs text-primary">terminal</span>
+</div>
+<div class="flex flex-col">
+<span class="font-meta-data text-meta-data text-on-surface-variant leading-tight">GitHub</span>
+<span class="font-meta-data text-[12px] text-outline leading-tight mt-0.5">https://github.com › anesnt › core</span>
+</div>
+</div>
+<h3 class="mb-2">
+<a class="font-result-title text-result-title text-primary hover:underline group-hover:text-primary-fixed transition-colors" href="#">anesnt/core: The official repository for AnesNT Core framework</a>
+</h3>
+<p class="font-body-main text-body-main text-on-surface-variant line-clamp-2">
+                    The core framework repository containing the fundamental building blocks, routing systems, and database ORM components for the AnesNT ecosystem. Contributions are welcome...
+                </p>
+<div class="mt-3 flex items-center gap-2 text-outline text-xs">
+<span class="flex items-center gap-1"><span class="material-symbols-outlined text-[14px]">star</span> 4.5k</span>
+<span class="w-1 h-1 rounded-full bg-outline-variant"></span>
+<span>Updated 2 days ago</span>
+</div>
+</article>
+<!-- Video Results Grid -->
+<div class="mt-2 mb-4">
+<h4 class="font-headline-md text-headline-md text-on-surface mb-4">فيديوهات ذات صلة</h4>
+<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+<!-- Video Card 1 -->
+<a class="block bg-[#121212] border border-[#1E1E1E] rounded-xl overflow-hidden hover:bg-[#1E1E1E] hover:shadow-[0_8px_24px_rgba(0,0,0,0.5)] transition-all group" href="#">
+<div class="aspect-video bg-surface-container-high relative">
+<img alt="React Tutorial" class="w-full h-full object-cover opacity-80 group-hover:opacity-100 transition-opacity" data-alt="A modern, abstract digital tech background featuring glowing lines of code and futuristic UI elements floating in a deep dark space. Subtle indigo and pink neon accents highlight key technical nodes, representing advanced software architecture in a sleek, minimalist style suitable for a dark-mode tech thumbnail." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAbv_x8ME78e_ZYvUOgWCBJesAnnuIBorGT42jLjWpBzquyV4x2QPfSKIj0jMKOncDBtWMBmiH6JkB7COM3JD9T9fDVXkUQ_wPaWb_E0YaubOCQYAcDk3g8Cu7EHBy70i379IHeEz93yq8FX6RJJcEVoN24FuOR6EYSqRe80NJAhD4kBRq57X5R8JHGvuE0muNlj4nDbzC5OfWlFXZjM4oEweAumS_oWB9gxn0TmbcvrBm6_m0mSXNFEuabnu3ZEzVwj845es8FzoS4"/>
+<div class="absolute inset-0 flex items-center justify-center">
+<div class="w-10 h-10 rounded-full bg-black/50 backdrop-blur-sm flex items-center justify-center border border-white/10 group-hover:bg-primary/20 transition-colors">
+<span class="material-symbols-outlined text-white">play_arrow</span>
+</div>
+</div>
+<div class="absolute bottom-2 left-2 bg-black/80 px-2 py-0.5 rounded text-xs font-meta-data text-white">12:45</div>
+</div>
+<div class="p-3">
+<h5 class="font-body-main text-body-main text-on-surface line-clamp-2 leading-tight mb-1 group-hover:text-primary transition-colors">مقدمة شاملة في AnesNT Core - دورة للمبتدئين</h5>
+<span class="font-meta-data text-[12px] text-on-surface-variant block">TechAcademy Arabic</span>
+</div>
+</a>
+<!-- Video Card 2 -->
+<a class="block bg-[#121212] border border-[#1E1E1E] rounded-xl overflow-hidden hover:bg-[#1E1E1E] hover:shadow-[0_8px_24px_rgba(0,0,0,0.5)] transition-all group" href="#">
+<div class="aspect-video bg-surface-container-high relative">
+<img alt="Code structure" class="w-full h-full object-cover opacity-80 group-hover:opacity-100 transition-opacity" data-alt="Close up of a computer screen displaying complex programming code in a modern dark-mode IDE. The syntax highlighting uses vibrant blues, purples, and teals against a deep black background. The image is crisp, focused on the structural elegance of the code, evoking a sense of deep technical expertise and modern software development." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCshWSZbLwSLcmQNG4IURqW-hHSqPMpNh797CqYbRnZ3gtI8EusDK5BZT_hdCGxw5ZzlLesJeqEi2dIxiSqipZlNF-j9y08fV4A32L23BiuoaE4y4KvNQWSfjl5gM9Z7azVtEu4WhsNOauIvVN9bAUnF2Kqfhejw5Q3ey1UakqfDde6GJJWn0oU2zLwqbUuyEdiOH2twxSXY5sapyDrMqZfO5gFVI1L4u97MSxR7SzZ496AFXFRcoSnjbsm5Puofr75WxqKvYaKjzU5"/>
+<div class="absolute inset-0 flex items-center justify-center">
+<div class="w-10 h-10 rounded-full bg-black/50 backdrop-blur-sm flex items-center justify-center border border-white/10 group-hover:bg-primary/20 transition-colors">
+<span class="material-symbols-outlined text-white">play_arrow</span>
+</div>
+</div>
+<div class="absolute bottom-2 left-2 bg-black/80 px-2 py-0.5 rounded text-xs font-meta-data text-white">45:20</div>
+</div>
+<div class="p-3">
+<h5 class="font-body-main text-body-main text-on-surface line-clamp-2 leading-tight mb-1 group-hover:text-primary transition-colors">بناء تطبيق كامل باستخدام AnesNT Core v2</h5>
+<span class="font-meta-data text-[12px] text-on-surface-variant block">CodeWithAnes</span>
+</div>
+</a>
+</div>
+</div>
+<!-- Result Card 3 -->
+<article class="bg-[#121212] border border-[#1E1E1E] rounded-xl p-6 hover:bg-[#1E1E1E] hover:shadow-[0_8px_24px_rgba(0,0,0,0.5)] transition-all duration-300 group">
+<div class="flex items-center gap-3 mb-2">
+<div class="w-6 h-6 rounded-full bg-surface-container-high flex items-center justify-center overflow-hidden border border-outline-variant">
+<span class="material-symbols-outlined text-xs text-primary">forum</span>
+</div>
+<div class="flex flex-col">
+<span class="font-meta-data text-meta-data text-on-surface-variant leading-tight">Stack Overflow</span>
+<span class="font-meta-data text-[12px] text-outline leading-tight mt-0.5">https://stackoverflow.com › questions › tagged</span>
+</div>
+</div>
+<h3 class="mb-2">
+<a class="font-result-title text-result-title text-primary hover:underline group-hover:text-primary-fixed transition-colors" href="#">How to handle middleware in AnesNT Core? - Stack Overflow</a>
+</h3>
+<p class="font-body-main text-body-main text-on-surface-variant line-clamp-2">
+                    I'm migrating a project to AnesNT Core and struggling to understand the new middleware pipeline architecture. Can someone explain how the request lifecycle handles custom...
+                </p>
+<div class="mt-3 flex items-center gap-4 text-outline text-xs">
+<span>15 إجابات</span>
+<span>تم الحل</span>
+</div>
+</article>
+<!-- Pagination -->
+<div class="flex items-center justify-center gap-2 mt-8 py-4">
+<button class="w-10 h-10 rounded-full flex items-center justify-center text-on-surface-variant hover:bg-surface-container hover:text-primary transition-colors border border-transparent hover:border-outline-variant">
+<span class="material-symbols-outlined">chevron_right</span>
+</button>
+<button class="w-10 h-10 rounded-full flex items-center justify-center bg-primary text-on-primary font-meta-data font-bold shadow-[0_4px_10px_rgba(192,193,255,0.2)]">1</button>
+<button class="w-10 h-10 rounded-full flex items-center justify-center text-on-surface hover:bg-surface-container hover:text-primary transition-colors border border-transparent hover:border-outline-variant font-meta-data">2</button>
+<button class="w-10 h-10 rounded-full flex items-center justify-center text-on-surface hover:bg-surface-container hover:text-primary transition-colors border border-transparent hover:border-outline-variant font-meta-data">3</button>
+<span class="text-on-surface-variant">...</span>
+<button class="w-10 h-10 rounded-full flex items-center justify-center text-on-surface hover:bg-surface-container hover:text-primary transition-colors border border-transparent hover:border-outline-variant font-meta-data">10</button>
+<button class="w-10 h-10 rounded-full flex items-center justify-center text-on-surface-variant hover:bg-surface-container hover:text-primary transition-colors border border-transparent hover:border-outline-variant">
+<span class="material-symbols-outlined">chevron_left</span>
+</button>
+</div>
+</div>
+<!-- Knowledge Panel Sidebar -->
+<aside class="hidden lg:block w-[350px] shrink-0">
+<div class="sticky top-[140px] bg-[#1E1E1E] border border-outline-variant rounded-2xl overflow-hidden shadow-[0_8px_32px_rgba(0,0,0,0.3)]">
+<!-- Header/Hero -->
+<div class="h-32 bg-gradient-to-br from-surface-container-high to-surface-container relative overflow-hidden">
+<div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMSIgY3k9IjEiIHI9IjEiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4wNSkiLz48L3N2Zz4=')] [mask-image:linear-gradient(to_bottom,white,transparent)]"></div>
+<div class="absolute -bottom-10 right-6 w-20 h-20 rounded-2xl bg-surface-bright border-4 border-[#1E1E1E] flex items-center justify-center shadow-lg transform rotate-3">
+<span class="material-symbols-outlined text-4xl text-primary drop-shadow-[0_0_8px_rgba(192,193,255,0.5)]">webhook</span>
+</div>
+</div>
+<div class="pt-14 px-6 pb-6">
+<h2 class="font-headline-md text-headline-md text-on-surface mb-1">AnesNT Core</h2>
+<p class="font-meta-data text-meta-data text-on-surface-variant mb-4">إطار عمل لتطوير الويب</p>
+<p class="font-body-main text-body-main text-on-surface mb-6 leading-relaxed">
+                        AnesNT Core هو إطار عمل برمجي حديث ومفتوح المصدر مصمم لبناء تطبيقات ويب متقدمة، واجهات برمجة تطبيقات (APIs)، وخدمات مصغرة (Microservices) بسرعة وكفاءة عالية، مع التركيز على الأمان وسهولة التوسع.
+                    </p>
+<div class="space-y-4 border-t border-outline-variant pt-4">
+<div class="flex items-start justify-between">
+<span class="font-meta-data text-meta-data text-on-surface-variant w-1/3">الإصدار المستقر</span>
+<span class="font-body-main text-body-main text-on-surface w-2/3">v2.4.0 (15 مايو 2024)</span>
+</div>
+<div class="flex items-start justify-between">
+<span class="font-meta-data text-meta-data text-on-surface-variant w-1/3">لغة البرمجة</span>
+<span class="font-body-main text-body-main text-on-surface w-2/3">TypeScript, JavaScript</span>
+</div>
+<div class="flex items-start justify-between">
+<span class="font-meta-data text-meta-data text-on-surface-variant w-1/3">الترخيص</span>
+<span class="font-body-main text-body-main text-on-surface w-2/3">MIT License</span>
+</div>
+</div>
+<div class="mt-6 flex gap-3">
+<button class="flex-1 bg-primary text-on-primary py-2 px-4 rounded-lg font-meta-data font-bold hover:bg-primary-fixed transition-colors shadow-[0_4px_12px_rgba(192,193,255,0.15)] flex items-center justify-center gap-2">
+<span class="material-symbols-outlined text-sm">open_in_new</span> الموقع الرسمي
+                        </button>
+<button class="flex-1 bg-surface-container-high text-on-surface py-2 px-4 rounded-lg border border-outline-variant font-meta-data hover:bg-surface-variant transition-colors flex items-center justify-center gap-2">
+<span class="material-symbols-outlined text-sm">share</span> مشاركة
+                        </button>
+</div>
+</div>
+</div>
+</aside>
+</main>
+<!-- Subtle Footer -->
+<footer class="mt-auto border-t border-[#1E1E1E] bg-[#050505] py-4">
+<div class="max-w-container-max-width mx-auto px-4 md:px-8 flex flex-col md:flex-row items-center justify-between gap-4 text-on-surface-variant font-meta-data text-xs">
+<div class="flex items-center gap-4">
+<span>المملكة العربية السعودية</span>
+<div class="w-px h-4 bg-outline-variant"></div>
+<div class="flex items-center gap-1">
+<span class="w-2 h-2 rounded-full bg-tertiary"></span>
+<span>تم التحديث منذ 2 ساعة</span>
+</div>
+</div>
+<div class="flex items-center gap-6">
+<a class="hover:text-primary transition-colors" href="#">المساعدة</a>
+<a class="hover:text-primary transition-colors" href="#">إرسال تعليقات</a>
+<a class="hover:text-primary transition-colors" href="#">الخصوصية</a>
+<a class="hover:text-primary transition-colors" href="#">البنود</a>
+</div>
+</div>
+</footer>
+</body></html>