Spaces:
Sleeping
Sleeping
| <html lang="ar" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SurfGO! — محرك بحث AnesNT</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800;900&family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --bg: #07090f; | |
| --bg2: #0d1017; | |
| --bg3: #131720; | |
| --bg4: #1a1f2e; | |
| --cyan: #00e5ff; | |
| --cyan2: #00bcd4; | |
| --orange: #ff6b00; | |
| --orange2: #ff9a3c; | |
| --purple: #7c3aed; | |
| --text: #e8eeff; | |
| --text2: #8899bb; | |
| --text3: #4a5a7a; | |
| --border: rgba(0,229,255,0.12); | |
| --border2: rgba(0,229,255,0.25); | |
| --glow: 0 0 30px rgba(0,229,255,0.2); | |
| --r: 14px; | |
| } | |
| * { margin:0; padding:0; box-sizing:border-box; } | |
| body { | |
| background: var(--bg); | |
| color: var(--text); | |
| font-family: 'Tajawal', sans-serif; | |
| min-height: 100vh; | |
| position: relative; | |
| overflow-x: hidden; | |
| } | |
| /* Grid background */ | |
| body::before { | |
| content:''; | |
| position:fixed; | |
| inset:0; | |
| background: | |
| linear-gradient(rgba(0,229,255,0.025) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(0,229,255,0.025) 1px, transparent 1px); | |
| background-size: 50px 50px; | |
| pointer-events:none; | |
| z-index:0; | |
| } | |
| /* Glow blob */ | |
| .blob { | |
| position:fixed; | |
| border-radius:50%; | |
| filter:blur(80px); | |
| pointer-events:none; | |
| z-index:0; | |
| opacity:0.4; | |
| } | |
| .blob1 { width:500px; height:500px; background:radial-gradient(circle, #00e5ff22, transparent); top:-100px; right:-100px; animation:drift1 12s ease-in-out infinite; } | |
| .blob2 { width:400px; height:400px; background:radial-gradient(circle, #ff6b0015, transparent); bottom:-100px; left:-100px; animation:drift2 15s ease-in-out infinite; } | |
| @keyframes drift1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-40px,40px)} } | |
| @keyframes drift2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(40px,-30px)} } | |
| /* HEADER */ | |
| header { | |
| position:relative; | |
| z-index:10; | |
| padding: 16px 24px; | |
| display:flex; | |
| align-items:center; | |
| justify-content:space-between; | |
| border-bottom: 1px solid var(--border); | |
| background: rgba(7,9,15,0.8); | |
| backdrop-filter: blur(12px); | |
| } | |
| .logo { | |
| display:flex; | |
| align-items:center; | |
| gap:10px; | |
| text-decoration:none; | |
| } | |
| .logo-icon { | |
| width:38px; height:38px; | |
| background: linear-gradient(135deg, var(--cyan), var(--purple)); | |
| border-radius:10px; | |
| display:flex; | |
| align-items:center; | |
| justify-content:center; | |
| font-size:18px; | |
| box-shadow: 0 0 20px rgba(0,229,255,0.4); | |
| } | |
| .logo-text { | |
| font-family:'Space Grotesk', sans-serif; | |
| font-size:22px; | |
| font-weight:700; | |
| color:var(--cyan); | |
| letter-spacing:-0.5px; | |
| } | |
| .logo-text span { color:var(--orange); } | |
| .logo-by { | |
| font-size:11px; | |
| color:var(--text3); | |
| letter-spacing:1px; | |
| } | |
| .header-search { | |
| display:flex; | |
| align-items:center; | |
| gap:10px; | |
| flex:1; | |
| max-width:500px; | |
| margin: 0 24px; | |
| } | |
| .header-search input { | |
| flex:1; | |
| background: var(--bg3); | |
| border: 1px solid var(--border); | |
| border-radius:10px; | |
| padding: 9px 16px; | |
| color: var(--text); | |
| font-family:'Tajawal',sans-serif; | |
| font-size:15px; | |
| outline:none; | |
| transition:border-color 0.2s, box-shadow 0.2s; | |
| } | |
| .header-search input:focus { | |
| border-color: var(--cyan2); | |
| box-shadow: 0 0 12px rgba(0,229,255,0.15); | |
| } | |
| .header-search button { | |
| background: linear-gradient(135deg, var(--cyan), var(--cyan2)); | |
| border:none; border-radius:10px; | |
| padding:9px 18px; | |
| color:#000; font-weight:700; | |
| font-family:'Tajawal',sans-serif; | |
| font-size:14px; | |
| cursor:pointer; | |
| transition:opacity 0.2s, transform 0.1s; | |
| white-space:nowrap; | |
| } | |
| .header-search button:hover { opacity:0.85; transform:scale(0.98); } | |
| .nav-links { | |
| display:flex; | |
| gap:6px; | |
| } | |
| .nav-links a { | |
| color:var(--text2); | |
| text-decoration:none; | |
| font-size:13px; | |
| padding:6px 12px; | |
| border-radius:8px; | |
| transition:background 0.2s, color 0.2s; | |
| cursor:pointer; | |
| } | |
| .nav-links a:hover, .nav-links a.active { background:var(--bg3); color:var(--cyan); } | |
| /* HERO */ | |
| #hero { | |
| position:relative; | |
| z-index:10; | |
| display:flex; | |
| flex-direction:column; | |
| align-items:center; | |
| justify-content:center; | |
| min-height: calc(100vh - 71px); | |
| padding: 40px 24px; | |
| text-align:center; | |
| transition: opacity 0.3s, transform 0.3s; | |
| } | |
| .hero-badge { | |
| display:inline-flex; | |
| align-items:center; | |
| gap:8px; | |
| background: rgba(0,229,255,0.08); | |
| border: 1px solid var(--border2); | |
| border-radius:100px; | |
| padding:7px 16px; | |
| font-size:13px; | |
| color:var(--cyan); | |
| margin-bottom:28px; | |
| animation: fadeUp 0.6s ease both; | |
| } | |
| .hero-badge::before { content:'✦'; font-size:10px; } | |
| .hero-title { | |
| font-size:clamp(52px, 10vw, 90px); | |
| font-weight:900; | |
| line-height:1; | |
| margin-bottom:12px; | |
| animation: fadeUp 0.6s 0.1s ease both; | |
| } | |
| .hero-title .surf { color: var(--cyan); text-shadow: 0 0 40px rgba(0,229,255,0.5); } | |
| .hero-title .go { color: var(--orange); } | |
| .hero-title .bang { color: var(--text3); } | |
| .hero-sub { | |
| font-size:18px; | |
| color:var(--text2); | |
| margin-bottom:40px; | |
| font-weight:300; | |
| animation: fadeUp 0.6s 0.2s ease both; | |
| } | |
| .search-box { | |
| width:100%; | |
| max-width:680px; | |
| animation: fadeUp 0.6s 0.3s ease both; | |
| } | |
| .search-wrap { | |
| display:flex; | |
| align-items:center; | |
| background: var(--bg3); | |
| border: 1.5px solid var(--border2); | |
| border-radius:18px; | |
| padding:8px 8px 8px 20px; | |
| gap:10px; | |
| transition: border-color 0.3s, box-shadow 0.3s; | |
| box-shadow: var(--glow); | |
| } | |
| .search-wrap:focus-within { | |
| border-color: var(--cyan); | |
| box-shadow: 0 0 40px rgba(0,229,255,0.25); | |
| } | |
| .search-icon { color:var(--text3); font-size:18px; flex-shrink:0; } | |
| .search-wrap input { | |
| flex:1; | |
| background:transparent; | |
| border:none; | |
| outline:none; | |
| color:var(--text); | |
| font-family:'Tajawal',sans-serif; | |
| font-size:18px; | |
| direction:rtl; | |
| } | |
| .search-wrap input::placeholder { color:var(--text3); } | |
| .search-btn { | |
| background: linear-gradient(135deg, var(--cyan), var(--cyan2)); | |
| border:none; | |
| border-radius:12px; | |
| padding:13px 28px; | |
| color:#000; | |
| font-family:'Tajawal',sans-serif; | |
| font-size:16px; | |
| font-weight:700; | |
| cursor:pointer; | |
| transition:transform 0.15s, opacity 0.2s; | |
| white-space:nowrap; | |
| display:flex; | |
| align-items:center; | |
| gap:8px; | |
| } | |
| .search-btn:hover { transform:scale(0.97); opacity:0.9; } | |
| .search-btn.loading { opacity:0.7; cursor:wait; } | |
| .search-tags { | |
| display:flex; | |
| flex-wrap:wrap; | |
| gap:8px; | |
| justify-content:center; | |
| margin-top:20px; | |
| animation: fadeUp 0.6s 0.4s ease both; | |
| } | |
| .tag { | |
| background: var(--bg3); | |
| border: 1px solid var(--border); | |
| border-radius:100px; | |
| padding:6px 14px; | |
| font-size:13px; | |
| color:var(--text2); | |
| cursor:pointer; | |
| transition:all 0.2s; | |
| } | |
| .tag:hover { border-color:var(--cyan2); color:var(--cyan); background:rgba(0,229,255,0.05); } | |
| .hero-stats { | |
| display:flex; | |
| gap:32px; | |
| margin-top:48px; | |
| animation: fadeUp 0.6s 0.5s ease both; | |
| } | |
| .stat { text-align:center; } | |
| .stat-num { font-size:24px; font-weight:700; color:var(--cyan); } | |
| .stat-label { font-size:12px; color:var(--text3); margin-top:2px; } | |
| @keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} } | |
| /* RESULTS PAGE */ | |
| #results-page { | |
| position:relative; | |
| z-index:10; | |
| display:none; | |
| padding:24px; | |
| max-width:1100px; | |
| margin:0 auto; | |
| } | |
| .results-meta { | |
| font-size:13px; | |
| color:var(--text3); | |
| margin-bottom:20px; | |
| padding-bottom:16px; | |
| border-bottom: 1px solid var(--border); | |
| display:flex; | |
| align-items:center; | |
| gap:8px; | |
| } | |
| .results-meta .count { color:var(--cyan); font-weight:600; } | |
| .results-grid { | |
| display:grid; | |
| grid-template-columns: 1fr 320px; | |
| gap:24px; | |
| } | |
| .results-main { display:flex; flex-direction:column; gap:16px; } | |
| /* AI Answer */ | |
| .ai-answer { | |
| background: linear-gradient(135deg, rgba(0,229,255,0.05), rgba(124,58,237,0.05)); | |
| border: 1px solid var(--border2); | |
| border-radius:var(--r); | |
| padding:20px; | |
| margin-bottom:8px; | |
| } | |
| .ai-answer-header { | |
| display:flex; | |
| align-items:center; | |
| gap:10px; | |
| margin-bottom:12px; | |
| } | |
| .ai-badge { | |
| background: linear-gradient(135deg, var(--cyan), var(--purple)); | |
| border-radius:8px; | |
| padding:4px 10px; | |
| font-size:12px; | |
| font-weight:700; | |
| color:#fff; | |
| font-family:'Space Grotesk',sans-serif; | |
| } | |
| .ai-answer p { | |
| font-size:15px; | |
| line-height:1.7; | |
| color:var(--text2); | |
| } | |
| /* Result Card */ | |
| .result-card { | |
| background: var(--bg2); | |
| border: 1px solid var(--border); | |
| border-radius:var(--r); | |
| padding:18px 20px; | |
| transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; | |
| animation: fadeUp 0.4s ease both; | |
| cursor:pointer; | |
| } | |
| .result-card:hover { | |
| border-color: var(--border2); | |
| transform:translateY(-2px); | |
| box-shadow: 0 8px 24px rgba(0,0,0,0.3); | |
| } | |
| .result-source { | |
| display:flex; | |
| align-items:center; | |
| gap:8px; | |
| margin-bottom:8px; | |
| } | |
| .favicon { | |
| width:16px; height:16px; | |
| border-radius:3px; | |
| object-fit:cover; | |
| background:var(--bg4); | |
| } | |
| .source-domain { | |
| font-size:12px; | |
| color:var(--text3); | |
| } | |
| .result-score { | |
| margin-right:auto; | |
| font-size:11px; | |
| background:rgba(0,229,255,0.08); | |
| color:var(--cyan2); | |
| border-radius:100px; | |
| padding:2px 8px; | |
| font-family:'Space Grotesk',sans-serif; | |
| } | |
| .result-title { | |
| font-size:17px; | |
| font-weight:600; | |
| color:var(--text); | |
| margin-bottom:6px; | |
| line-height:1.4; | |
| text-decoration:none; | |
| display:block; | |
| transition:color 0.2s; | |
| } | |
| .result-title:hover { color:var(--cyan); } | |
| .result-snippet { | |
| font-size:14px; | |
| color:var(--text2); | |
| line-height:1.6; | |
| } | |
| .result-date { | |
| font-size:12px; | |
| color:var(--text3); | |
| margin-top:8px; | |
| } | |
| /* Sidebar */ | |
| .results-sidebar { display:flex; flex-direction:column; gap:16px; } | |
| .sidebar-card { | |
| background: var(--bg2); | |
| border: 1px solid var(--border); | |
| border-radius:var(--r); | |
| padding:18px; | |
| } | |
| .sidebar-title { | |
| font-size:13px; | |
| font-weight:700; | |
| color:var(--text3); | |
| text-transform:uppercase; | |
| letter-spacing:1px; | |
| margin-bottom:14px; | |
| display:flex; | |
| align-items:center; | |
| gap:8px; | |
| } | |
| .sidebar-title::before { content:''; width:3px; height:14px; background:var(--cyan); border-radius:2px; display:inline-block; } | |
| /* Images grid */ | |
| .images-grid { | |
| display:grid; | |
| grid-template-columns:1fr 1fr; | |
| gap:8px; | |
| } | |
| .img-thumb { | |
| border-radius:8px; | |
| overflow:hidden; | |
| aspect-ratio:16/9; | |
| background:var(--bg4); | |
| } | |
| .img-thumb img { | |
| width:100%; height:100%; | |
| object-fit:cover; | |
| transition:transform 0.3s; | |
| cursor:pointer; | |
| } | |
| .img-thumb img:hover { transform:scale(1.05); } | |
| /* Related searches */ | |
| .related-item { | |
| display:flex; | |
| align-items:center; | |
| gap:8px; | |
| padding:8px 0; | |
| border-bottom:1px solid var(--border); | |
| cursor:pointer; | |
| color:var(--text2); | |
| font-size:14px; | |
| transition:color 0.2s; | |
| } | |
| .related-item:last-child { border-bottom:none; } | |
| .related-item:hover { color:var(--cyan); } | |
| .related-item::before { content:'↗'; font-size:12px; color:var(--text3); } | |
| /* Loading spinner */ | |
| .spinner { | |
| display:flex; | |
| align-items:center; | |
| justify-content:center; | |
| padding:60px; | |
| flex-direction:column; | |
| gap:16px; | |
| } | |
| .spin { | |
| width:40px; height:40px; | |
| border:3px solid var(--border); | |
| border-top-color:var(--cyan); | |
| border-radius:50%; | |
| animation:spin 0.8s linear infinite; | |
| } | |
| @keyframes spin { to{transform:rotate(360deg)} } | |
| .spin-text { color:var(--text3); font-size:14px; } | |
| /* Footer */ | |
| footer { | |
| position:relative; | |
| z-index:10; | |
| text-align:center; | |
| padding:24px; | |
| color:var(--text3); | |
| font-size:13px; | |
| border-top:1px solid var(--border); | |
| margin-top:40px; | |
| } | |
| footer span { color:var(--cyan); } | |
| /* Error */ | |
| .error-box { | |
| background: rgba(255,107,0,0.08); | |
| border:1px solid rgba(255,107,0,0.2); | |
| border-radius:var(--r); | |
| padding:20px; | |
| text-align:center; | |
| color:var(--orange2); | |
| } | |
| /* Responsive */ | |
| @media(max-width:768px) { | |
| .results-grid { grid-template-columns:1fr; } | |
| .results-sidebar { display:none; } | |
| .header-search { display:none; } | |
| .hero-stats { gap:20px; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="blob blob1"></div> | |
| <div class="blob blob2"></div> | |
| <!-- HEADER --> | |
| <header id="site-header"> | |
| <a class="logo" href="#" onclick="showHero()"> | |
| <div class="logo-icon">🏄</div> | |
| <div> | |
| <div class="logo-text">Surf<span>GO</span>!</div> | |
| <div class="logo-by">by AnesNT</div> | |
| </div> | |
| </a> | |
| <div class="header-search" id="header-search" style="display:none"> | |
| <input type="text" id="header-input" placeholder="ابحث في SurfGO..." onkeydown="if(event.key==='Enter')doSearch(this.value)"> | |
| <button onclick="doSearch(document.getElementById('header-input').value)">🔍 بحث</button> | |
| </div> | |
| <nav class="nav-links"> | |
| <a class="active" onclick="setFilter('all')">كل شيء</a> | |
| <a onclick="setFilter('news')">أخبار</a> | |
| <a onclick="setFilter('images')">صور</a> | |
| <a onclick="setFilter('web')">ويب</a> | |
| </nav> | |
| </header> | |
| <!-- HERO --> | |
| <section id="hero"> | |
| <div class="hero-badge">محرك البحث الذكي من AnesNT</div> | |
| <h1 class="hero-title"> | |
| <span class="surf">Surf</span><span class="go">GO</span><span class="bang">!</span> | |
| </h1> | |
| <p class="hero-sub">ابحث بذكاء · اكتشف أسرع · انطلق أبعد</p> | |
| <div class="search-box"> | |
| <div class="search-wrap"> | |
| <span class="search-icon">🔍</span> | |
| <input type="text" id="hero-input" placeholder="عمّ تبحث اليوم؟" autofocus | |
| onkeydown="if(event.key==='Enter')doSearch(this.value)"> | |
| <button class="search-btn" id="search-btn" onclick="doSearch(document.getElementById('hero-input').value)"> | |
| <span>ابحث</span> | |
| <span>→</span> | |
| </button> | |
| </div> | |
| <div class="search-tags"> | |
| <span class="tag" onclick="quickSearch('ذكاء اصطناعي 2025')">🤖 ذكاء اصطناعي</span> | |
| <span class="tag" onclick="quickSearch('برمجة Python')">💻 برمجة</span> | |
| <span class="tag" onclick="quickSearch('أخبار التقنية')">📡 تقنية</span> | |
| <span class="tag" onclick="quickSearch('تعلم الآلة')">🧠 تعلم الآلة</span> | |
| <span class="tag" onclick="quickSearch('HuggingFace Spaces')">🤗 HuggingFace</span> | |
| </div> | |
| </div> | |
| <div class="hero-stats"> | |
| <div class="stat"> | |
| <div class="stat-num">20+</div> | |
| <div class="stat-label">نتيجة لكل بحث</div> | |
| </div> | |
| <div class="stat"> | |
| <div class="stat-num">AI</div> | |
| <div class="stat-label">إجابة ذكية</div> | |
| </div> | |
| <div class="stat"> | |
| <div class="stat-num">⚡</div> | |
| <div class="stat-label">نتائج فورية</div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- RESULTS PAGE --> | |
| <div id="results-page"> | |
| <div class="results-meta"> | |
| <span>نتائج بحث عن:</span> | |
| <strong id="query-display" style="color:var(--text)"></strong> | |
| <span>·</span> | |
| <span class="count" id="results-count">0</span> | |
| <span>نتيجة</span> | |
| <span>·</span> | |
| <span id="results-time"></span> | |
| </div> | |
| <div id="results-content"></div> | |
| </div> | |
| <footer> | |
| <p>SurfGO! © 2025 — صُنع بواسطة <span>AnesNT</span></p> | |
| </footer> | |
| <script> | |
| let currentFilter = 'all'; | |
| let lastQuery = ''; | |
| function setFilter(f) { | |
| currentFilter = f; | |
| document.querySelectorAll('.nav-links a').forEach(a => a.classList.remove('active')); | |
| event.target.classList.add('active'); | |
| if (lastQuery) doSearch(lastQuery); | |
| } | |
| function quickSearch(q) { | |
| document.getElementById('hero-input').value = q; | |
| doSearch(q); | |
| } | |
| function showHero() { | |
| document.getElementById('hero').style.display = 'flex'; | |
| document.getElementById('results-page').style.display = 'none'; | |
| document.getElementById('header-search').style.display = 'none'; | |
| } | |
| async function doSearch(query) { | |
| query = query.trim(); | |
| if (!query) return; | |
| lastQuery = query; | |
| // Switch to results view | |
| document.getElementById('hero').style.display = 'none'; | |
| document.getElementById('results-page').style.display = 'block'; | |
| document.getElementById('header-search').style.display = 'flex'; | |
| document.getElementById('header-input').value = query; | |
| document.getElementById('query-display').textContent = query; | |
| const startTime = Date.now(); | |
| document.getElementById('results-content').innerHTML = ` | |
| <div class="spinner"> | |
| <div class="spin"></div> | |
| <div class="spin-text">يبحث SurfGO في الويب...</div> | |
| </div>`; | |
| try { | |
| const response = await fetch('/search', { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify({ | |
| query: query, | |
| include_answer: "basic", | |
| search_depth: "advanced", | |
| max_results: 20, | |
| time_range: currentFilter === 'news' ? 'day' : null, | |
| include_images: true, | |
| include_image_descriptions: true, | |
| include_favicon: true | |
| }) | |
| }); | |
| const data = await response.json(); | |
| const elapsed = ((Date.now() - startTime) / 1000).toFixed(2); | |
| renderResults(data, elapsed); | |
| } catch (err) { | |
| document.getElementById('results-content').innerHTML = ` | |
| <div class="error-box"> | |
| <p>⚠️ حدث خطأ أثناء البحث. تحقق من مفتاح API أو اتصالك بالإنترنت.</p> | |
| <p style="margin-top:8px;font-size:13px;opacity:0.7">${err.message}</p> | |
| </div>`; | |
| } | |
| } | |
| function renderResults(data, elapsed) { | |
| const results = data.results || []; | |
| const images = data.images || []; | |
| const answer = data.answer || ''; | |
| document.getElementById('results-count').textContent = results.length; | |
| const cachedBadge = data._cached | |
| ? `<span style="background:rgba(0,229,255,0.12);color:var(--cyan);border-radius:100px;padding:2px 10px;font-size:12px;font-weight:700">⚡ من الكاش · شوهد ${data._hits} مرة</span>` | |
| : `<span style="background:rgba(255,107,0,0.1);color:var(--orange2);border-radius:100px;padding:2px 10px;font-size:12px;font-weight:700">🌐 جديد · تم الحفظ في الداتابيس</span>`; | |
| document.getElementById('results-time').innerHTML = `${elapsed}s ${cachedBadge}`; | |
| // Related suggestions | |
| const relatedTerms = generateRelated(lastQuery); | |
| document.getElementById('results-content').innerHTML = ` | |
| <div class="results-grid"> | |
| <div class="results-main"> | |
| ${answer ? ` | |
| <div class="ai-answer"> | |
| <div class="ai-answer-header"> | |
| <div class="ai-badge">✦ AI Answer</div> | |
| <span style="font-size:13px;color:var(--text3)">إجابة ذكية</span> | |
| </div> | |
| <p>${answer}</p> | |
| </div>` : ''} | |
| ${results.length === 0 ? `<div class="error-box"><p>لا توجد نتائج لهذا البحث.</p></div>` : ''} | |
| ${results.map((r, i) => ` | |
| <div class="result-card" style="animation-delay:${i * 0.04}s" onclick="window.open('${r.url}','_blank')"> | |
| <div class="result-source"> | |
| ${r.favicon ? `<img class="favicon" src="${r.favicon}" onerror="this.style.display='none'">` : ''} | |
| <span class="source-domain">${getDomain(r.url)}</span> | |
| ${r.score ? `<span class="result-score">${(r.score * 100).toFixed(0)}%</span>` : ''} | |
| </div> | |
| <a class="result-title" href="${r.url}" target="_blank" onclick="event.stopPropagation()">${r.title || 'بدون عنوان'}</a> | |
| <p class="result-snippet">${(r.content || '').slice(0, 200)}${r.content && r.content.length > 200 ? '...' : ''}</p> | |
| ${r.published_date ? `<div class="result-date">📅 ${r.published_date}</div>` : ''} | |
| </div>`).join('')} | |
| </div> | |
| <div class="results-sidebar"> | |
| ${images.length > 0 ? ` | |
| <div class="sidebar-card"> | |
| <div class="sidebar-title">صور</div> | |
| <div class="images-grid"> | |
| ${images.slice(0,4).map(img => ` | |
| <div class="img-thumb"> | |
| <img src="${typeof img === 'string' ? img : img.url}" | |
| alt="${typeof img === 'object' ? (img.description || '') : ''}" | |
| loading="lazy" | |
| onerror="this.parentElement.style.display='none'" | |
| onclick="window.open('${typeof img === 'string' ? img : img.url}','_blank')"> | |
| </div>`).join('')} | |
| </div> | |
| </div>` : ''} | |
| <div class="sidebar-card"> | |
| <div class="sidebar-title">بحث مقترح</div> | |
| ${relatedTerms.map(t => ` | |
| <div class="related-item" onclick="quickSearch('${t}')">${t}</div>`).join('')} | |
| </div> | |
| <div class="sidebar-card" style="background:linear-gradient(135deg,rgba(0,229,255,0.05),rgba(124,58,237,0.05));border-color:rgba(0,229,255,0.2)"> | |
| <div class="sidebar-title">SurfGO! Stats</div> | |
| <div style="display:flex;flex-direction:column;gap:10px"> | |
| <div style="display:flex;justify-content:space-between;align-items:center"> | |
| <span style="font-size:13px;color:var(--text2)">نتائج البحث</span> | |
| <span style="color:var(--cyan);font-weight:700">${results.length}</span> | |
| </div> | |
| <div style="display:flex;justify-content:space-between;align-items:center"> | |
| <span style="font-size:13px;color:var(--text2)">الصور</span> | |
| <span style="color:var(--cyan);font-weight:700">${images.length}</span> | |
| </div> | |
| <div style="display:flex;justify-content:space-between;align-items:center"> | |
| <span style="font-size:13px;color:var(--text2)">وقت البحث</span> | |
| <span style="color:var(--cyan);font-weight:700">${elapsed}s</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div>`; | |
| } | |
| function getDomain(url) { | |
| try { return new URL(url).hostname.replace('www.',''); } catch { return url; } | |
| } | |
| function generateRelated(q) { | |
| return [ | |
| q + ' 2025', | |
| q + ' شرح بالعربي', | |
| 'أفضل ' + q, | |
| 'كيف ' + q, | |
| q + ' مجاناً', | |
| ]; | |
| } | |
| </script> | |
| </body> | |
| </html> |