| <!DOCTYPE html> |
| <html data-theme="light" dir="rtl" lang="ar"> |
| <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 rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> |
| <link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&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> |
| :root { |
| --bg-base: #f0f2f8; |
| --bg-nav: rgba(255,255,255,0.82); |
| --bg-card: #ffffff; |
| --bg-input: #e8ebf5; |
| --bg-input-focus: #ffffff; |
| --border: rgba(99,102,241,0.12); |
| --border-hover: rgba(99,102,241,0.4); |
| --accent: #5b5ef4; |
| --accent-2: #e0427a; |
| --accent-glow: rgba(91,94,244,0.18); |
| --text-main: #12132a; |
| --text-sub: #6b7280; |
| --text-faint: #9ca3af; |
| --shadow-card: 0 2px 12px rgba(91,94,244,0.07),0 1px 3px rgba(0,0,0,0.04); |
| --shadow-hover: 0 8px 32px rgba(91,94,244,0.13),0 2px 8px rgba(0,0,0,0.06); |
| --radius-nav: 22px; |
| --radius-card: 18px; |
| --radius-pill: 100px; |
| --transition: 0.28s cubic-bezier(0.4,0,0.2,1); |
| } |
| [data-theme="dark"] { |
| --bg-base: #0c0d1d; |
| --bg-nav: rgba(18,20,40,0.92); |
| --bg-card: #13152e; |
| --bg-input: #1c1f3d; |
| --bg-input-focus: #13152e; |
| --border: rgba(130,133,255,0.13); |
| --border-hover: rgba(130,133,255,0.4); |
| --accent: #8284fc; |
| --accent-2: #f472b6; |
| --accent-glow: rgba(130,133,255,0.16); |
| --text-main: #eef0ff; |
| --text-sub: #9099c0; |
| --text-faint: #5a6080; |
| --shadow-card: 0 2px 14px rgba(0,0,0,0.28); |
| --shadow-hover: 0 10px 36px rgba(130,133,255,0.14); |
| } |
| *{margin:0;padding:0;box-sizing:border-box} |
| body{font-family:'Tajawal',sans-serif;background:var(--bg-base);color:var(--text-main);min-height:100vh;overflow-x:hidden;transition:background 0.35s,color 0.35s} |
| .bg-mesh{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden} |
| .orb{position:absolute;border-radius:50%;filter:blur(85px);opacity:0.4;animation:drift 20s ease-in-out infinite alternate} |
| .orb-1{width:55vw;height:55vw;background:radial-gradient(circle,rgba(91,94,244,0.15) 0%,transparent 70%);top:-20%;right:-15%} |
| .orb-2{width:45vw;height:45vw;background:radial-gradient(circle,rgba(224,66,122,0.12) 0%,transparent 70%);bottom:-15%;left:-10%} |
| .orb-3{width:35vw;height:35vw;background:radial-gradient(circle,rgba(167,139,250,0.1) 0%,transparent 70%);top:55%;left:55%} |
| @keyframes drift{0%{transform:translate(0,0) scale(1)}100%{transform:translate(4%,3%) scale(1.06)}} |
| |
| /* ========== شريط التنقل ========== */ |
| .navbar{ |
| position:fixed;top:14px;left:50%;transform:translateX(-50%);width:95%;max-width:1280px;min-height:68px; |
| background:var(--bg-nav);backdrop-filter:blur(28px) saturate(1.6);-webkit-backdrop-filter:blur(28px) saturate(1.6); |
| border:1px solid var(--border);border-radius:var(--radius-nav);display:flex;flex-wrap:wrap;align-items:center; |
| justify-content:space-between;padding:10px 18px;z-index:1000;box-shadow:0 4px 24px rgba(0,0,0,0.06),0 1px 0 rgba(255,255,255,0.6) inset; |
| gap:12px;transition:background 0.35s,border-color 0.35s; |
| } |
| .brand{font-family:'Syne',sans-serif;font-weight:400;font-size:21px;text-decoration:none;color:var(--text-main);display:flex;align-items:center;gap:10px;letter-spacing:-0.01em;flex-shrink:0;transition:transform 0.2s} |
| .brand:hover{transform:scale(1.03)} |
| .brand-icon{width:36px;height:36px;background:linear-gradient(135deg,var(--accent),var(--accent-2));border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;flex-shrink:0;box-shadow:0 4px 14px var(--accent-glow)} |
| .search-container{flex:1;max-width:580px;width:100%} |
| |
| /* ========== صندوق البحث ========== */ |
| .search-bar{ |
| display:flex;align-items:center;background:var(--bg-input);border:2px solid var(--border); |
| border-radius:var(--radius-pill);padding:4px 4px 4px 16px;transition:var(--transition);width:100%; |
| position:relative;overflow:hidden; |
| } |
| .search-bar:focus-within{ |
| border-color:var(--accent);background:var(--bg-input-focus); |
| box-shadow:0 0 0 4px var(--accent-glow), 0 4px 16px rgba(0,0,0,0.04); |
| transform:translateY(-1px); |
| } |
| .search-bar input{ |
| flex:1;background:transparent;border:none;padding:9px 0;color:var(--text-main); |
| font-size:14.5px;min-width:0;font-family:'Tajawal',sans-serif; |
| } |
| .search-bar input::placeholder{color:var(--text-faint);opacity:0.7} |
| .search-bar .clear-btn{ |
| background:none;border:none;color:var(--text-faint);cursor:pointer; |
| padding:6px 8px;font-size:14px;display:none;transition:color 0.2s; |
| } |
| .search-bar .clear-btn:hover{color:var(--accent)} |
| .search-bar .clear-btn.visible{display:block} |
| |
| /* ========== زر البحث الصوتي ========== */ |
| .voice-btn{ |
| background:none;border:none;color:var(--text-faint);cursor:pointer; |
| padding:6px 10px;font-size:15px;transition:var(--transition);position:relative; |
| display:flex;align-items:center;justify-content:center; |
| } |
| .voice-btn:hover{color:var(--accent)} |
| .voice-btn.listening{color:#e0427a;animation:pulse-mic 1s ease-in-out infinite} |
| @keyframes pulse-mic{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}} |
| |
| /* مؤشر الاستماع */ |
| .voice-listening-indicator{ |
| display:none;position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%); |
| background:var(--bg-card);border:2px solid var(--accent);border-radius:var(--radius-pill); |
| padding:8px 20px;font-size:13px;color:var(--accent);white-space:nowrap; |
| box-shadow:var(--shadow-hover);z-index:999; |
| align-items:center;gap:8px; |
| } |
| .voice-listening-indicator.show{display:flex} |
| .voice-waves{display:flex;gap:3px;align-items:center;height:16px} |
| .voice-wave{width:3px;background:var(--accent);border-radius:2px;animation:wave-bar 0.8s ease-in-out infinite} |
| .voice-wave:nth-child(1){height:6px;animation-delay:0s} |
| .voice-wave:nth-child(2){height:12px;animation-delay:0.15s} |
| .voice-wave:nth-child(3){height:16px;animation-delay:0.3s} |
| .voice-wave:nth-child(4){height:10px;animation-delay:0.45s} |
| .voice-wave:nth-child(5){height:6px;animation-delay:0.6s} |
| @keyframes wave-bar{0%,100%{transform:scaleY(0.5)}50%{transform:scaleY(1)}} |
| |
| .search-btn{ |
| background:linear-gradient(135deg,var(--accent),var(--accent-2));border:none;color:#fff;cursor:pointer; |
| width:40px;height:36px;border-radius:var(--radius-pill);display:flex;align-items:center; |
| justify-content:center;font-size:14px;flex-shrink:0;transition:var(--transition); |
| box-shadow:0 2px 8px var(--accent-glow); |
| } |
| .search-btn:hover{opacity:0.9;transform:scale(1.06);box-shadow:0 4px 14px var(--accent-glow)} |
| .search-btn:active{transform:scale(0.95)} |
| /* حالة تحميل زر البحث */ |
| .search-btn.loading-btn{pointer-events:none;opacity:0.7} |
| .search-btn.loading-btn i{animation:spin 0.8s linear infinite} |
| |
| .nav-actions{display:flex;align-items:center;gap:8px} |
| #theme-toggle{ |
| background:var(--bg-input);border:1.5px solid var(--border);color:var(--text-sub);cursor:pointer; |
| width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center; |
| font-size:15px;transition:var(--transition); |
| } |
| #theme-toggle:hover{border-color:var(--accent);color:var(--accent);transform:rotate(180deg)} |
| |
| /* ========== شريط التبويبات ========== */ |
| .tabs-bar{ |
| position:fixed;top:98px;left:50%;transform:translateX(-50%);width:95%;max-width:1280px;display:flex;gap:6px; |
| z-index:999;overflow-x:auto;padding:6px 10px;backdrop-filter:blur(16px);background:rgba(255,255,255,0.2); |
| border:1px solid var(--border);border-radius:40px;scrollbar-width:none; |
| } |
| [data-theme="dark"] .tabs-bar{background:rgba(18,20,40,0.35)} |
| .tab-pill{ |
| padding:7px 16px;border-radius:var(--radius-pill);background:var(--bg-card);border:1.5px solid var(--border); |
| color:var(--text-sub);font-family:'Tajawal',sans-serif;font-size:13px;font-weight:500;cursor:pointer; |
| transition:var(--transition);display:flex;align-items:center;gap:6px;white-space:nowrap; |
| box-shadow:var(--shadow-card); |
| } |
| .tab-pill:hover{border-color:var(--border-hover);color:var(--accent);transform:translateY(-1px)} |
| .tab-pill.active{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 4px 16px var(--accent-glow)} |
| |
| /* ========== التخطيط العام ========== */ |
| .page-wrapper{position:relative;z-index:1;max-width:1280px;margin:170px auto 60px;padding:0 16px;display:flex;flex-direction:column;gap:24px} |
| .results-area{min-width:0;width:100%} |
| |
| /* ========== مؤشر التحميل ========== */ |
| #loading-text{color:var(--text-sub);font-size:13.5px;margin-bottom:18px;display:flex;align-items:center;gap:8px} |
| #loading-text.spinning::before{content:'';display:inline-block;width:14px;height:14px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin 0.8s linear infinite} |
| @keyframes spin{to{transform:rotate(360deg)}} |
| |
| /* ========== عداد النتائج ========== */ |
| .results-count{font-size:12px;color:var(--text-faint);margin-bottom:14px;display:flex;align-items:center;gap:6px} |
| .results-count span{color:var(--accent);font-weight:600} |
| |
| /* ========== الاقتراحات ========== */ |
| .suggestions-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px} |
| .suggestion-chip{ |
| padding:6px 14px;border-radius:var(--radius-pill);background:var(--bg-card);border:1px solid var(--border); |
| color:var(--text-sub);font-size:12px;cursor:pointer;transition:var(--transition);white-space:nowrap; |
| } |
| .suggestion-chip:hover{border-color:var(--accent);color:var(--accent);background:var(--bg-input-focus);transform:translateY(-1px)} |
| |
| /* ========== تأثيرات الظهور ========== */ |
| .search-result,.image-card,.video-card{opacity:0;transform:translateY(20px);transition:opacity 0.5s ease,transform 0.5s ease} |
| .search-result.visible,.image-card.visible,.video-card.visible{opacity:1;transform:translateY(0)} |
| |
| /* ========== بطاقات نتائج الويب ========== */ |
| .search-result{ |
| background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--radius-card); |
| padding:18px 20px;margin-bottom:12px;transition:var(--transition);box-shadow:var(--shadow-card); |
| display:flex;gap:14px;align-items:flex-start; |
| } |
| .search-result:hover{border-color:var(--border-hover);box-shadow:var(--shadow-hover);transform:translateY(-2px)} |
| .favicon-wrap{width:22px;height:22px;border-radius:5px;overflow:hidden;flex-shrink:0;margin-top:3px;background:var(--bg-input);display:flex;align-items:center;justify-content:center} |
| .favicon-wrap img{width:16px;height:16px;object-fit:contain} |
| .fallback-icon{color:var(--text-faint);font-size:11px} |
| .result-content{flex:1;min-width:0} |
| .result-domain{font-size:11.5px;color:var(--text-faint);margin-bottom:4px;display:flex;align-items:center;gap:4px} |
| .result-title{ |
| font-size:16px;font-weight:700;color:var(--accent);text-decoration:none;display:-webkit-box; |
| -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:6px;line-height:1.4;transition:color 0.2s; |
| } |
| .result-title:hover{color:var(--accent-2);text-decoration:underline} |
| .result-snippet{ |
| font-size:13.5px;color:var(--text-sub);line-height:1.65;display:-webkit-box; |
| -webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; |
| } |
| .copy-link-btn{background:none;border:none;color:var(--text-faint);cursor:pointer;font-size:13px;margin-right:8px;transition:color 0.2s;padding:4px} |
| .copy-link-btn:hover{color:var(--accent)} |
| |
| /* ========== شبكة الصور ========== */ |
| .images-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;width:100%} |
| .image-card{background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--radius-card);overflow:hidden;transition:var(--transition);box-shadow:var(--shadow-card);display:flex;flex-direction:column} |
| .image-card:hover{border-color:var(--border-hover);box-shadow:var(--shadow-hover);transform:translateY(-5px)} |
| .image-card-link{display:block;width:100%;height:150px;overflow:hidden;background:var(--bg-input);position:relative} |
| .image-card-link img{width:100%;height:100%;object-fit:cover;transition:transform 0.4s ease;display:block} |
| .image-card:hover .image-card-link img{transform:scale(1.06)} |
| .image-info{padding:8px 10px;font-size:11px;color:var(--text-sub);border-top:1px solid var(--border)} |
| .image-info .img-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:4px} |
| .image-url{font-size:10px;color:var(--text-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:4px;display:block;text-decoration:none;direction:ltr;text-align:right} |
| |
| /* ========== شبكة الفيديوهات ========== */ |
| .videos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;width:100%} |
| .video-card{background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--radius-card);overflow:hidden;transition:var(--transition);box-shadow:var(--shadow-card)} |
| .video-card:hover{border-color:var(--border-hover);box-shadow:var(--shadow-hover);transform:translateY(-3px)} |
| .video-thumb-wrap{position:relative;width:100%;height:150px;background:var(--bg-input);display:block;overflow:hidden} |
| .video-thumb-wrap img{width:100%;height:100%;object-fit:cover;opacity:0.85;transition:0.3s;display:block} |
| .video-card:hover .video-thumb-wrap img{opacity:1} |
| .play-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:42px;height:42px;background:rgba(91,94,244,0.92);color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;box-shadow:0 0 20px var(--accent-glow)} |
| .video-details{padding:10px} |
| .video-title{font-size:14px;font-weight:700;color:var(--text-main);text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4} |
| .video-title:hover{color:var(--accent)} |
| .video-url{font-size:10px;color:var(--text-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:4px;display:block;text-decoration:none;direction:ltr;text-align:right} |
| |
| /* ========== عناوين الأقسام ========== */ |
| .section-title{font-size:18px;font-weight:700;margin:20px 0 12px;color:var(--text-main);display:flex;align-items:center;gap:10px} |
| .section-title a{color:var(--accent);text-decoration:none;font-size:14px;font-weight:500;margin-right:auto;transition:color 0.2s} |
| .section-title a:hover{color:var(--accent-2)} |
| |
| /* ========== مؤشر تحميل المزيد ========== */ |
| .load-more-spinner{ |
| display:none;text-align:center;padding:24px;color:var(--text-faint);font-size:13px; |
| align-items:center;justify-content:center;gap:8px; |
| } |
| .load-more-spinner.show{display:flex} |
| .load-more-spinner::before{content:'';width:18px;height:18px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin 0.8s linear infinite;flex-shrink:0} |
| |
| /* ========== نهاية النتائج ========== */ |
| .end-of-results{ |
| text-align:center;padding:30px 20px;color:var(--text-faint);font-size:13px; |
| display:none;align-items:center;justify-content:center;gap:8px; |
| } |
| .end-of-results.show{display:flex} |
| .end-divider{height:1px;background:var(--border);flex:1;max-width:80px} |
| |
| /* ========== مساعد الذكاء الاصطناعي ========== */ |
| .sidebar{width:100%;order:2;margin-top:12px} |
| .ai-widget-wrap{position:relative;border-radius:var(--radius-card)} |
| .ai-glow-ring{position:absolute;inset:-2px;border-radius:calc(var(--radius-card) + 2px);background:conic-gradient(from var(--angle,0deg),var(--accent),var(--accent-2),#a78bfa,var(--accent),var(--accent-2),var(--accent));z-index:0;animation:spin-glow 4s linear infinite;filter:blur(1px)} |
| @property --angle{syntax:'<angle>';initial-value:0deg;inherits:false} |
| @keyframes spin-glow{to{--angle:360deg}} |
| .ai-widget{position:relative;z-index:1;background:var(--bg-card);border-radius:var(--radius-card);padding:18px 18px 16px;box-shadow:var(--shadow-card)} |
| .ai-widget-header{display:flex;align-items:center;gap:9px;margin-bottom:14px} |
| .ai-widget-icon{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--accent),var(--accent-2));display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px} |
| .ai-widget-badge{margin-right:auto;font-size:10px;padding:2px 8px;border-radius:20px;background:var(--accent-glow);color:var(--accent);font-weight:600;border:1px solid rgba(91,94,244,0.2)} |
| .ai-answer-body{font-size:13.5px;color:var(--text-sub);line-height:1.75;min-height:60px} |
| .ai-answer-body.loading{display:flex;flex-direction:column;gap:8px} |
| .ai-skeleton{height:12px;border-radius:6px;background:linear-gradient(90deg,var(--bg-input) 25%,var(--border) 50%,var(--bg-input) 75%);background-size:200% 100%;animation:shimmer 1.4s ease-in-out infinite} |
| @keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}} |
| .ai-copy-btn{margin-top:14px;padding:8px 16px;background:var(--bg-input);border:1px solid var(--border);border-radius:30px;cursor:pointer;font-size:12px;color:var(--text-sub);display:inline-flex;align-items:center;gap:6px;transition:var(--transition)} |
| .ai-copy-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)} |
| .ai-widget-footer{font-size:10.5px;color:var(--text-faint);margin-top:12px;padding-top:10px;border-top:1px solid var(--border);display:flex;align-items:center;gap:5px} |
| .ai-sources{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px} |
| .ai-source-chip{font-size:11px;padding:3px 10px;border-radius:20px;background:var(--bg-input);border:1px solid var(--border);color:var(--text-faint);text-decoration:none;display:flex;align-items:center;gap:5px;transition:var(--transition)} |
| .ai-source-chip:hover{border-color:var(--accent);color:var(--accent)} |
| .ai-mobile-wrap{display:none;border-radius:var(--radius-card);margin-bottom:16px;position:relative} |
| |
| /* ========== حالات خاصة ========== */ |
| .empty-state{text-align:center;padding:60px 20px;color:var(--text-sub)} |
| .empty-state i{font-size:40px;margin-bottom:16px;color:var(--text-faint);display:block} |
| .empty-state p{font-size:15px;margin-top:8px} |
| |
| /* ========== زر العودة للأعلى ========== */ |
| .back-to-top{position:fixed;bottom:30px;right:30px;z-index:999;width:46px;height:46px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;opacity:0;visibility:hidden;transition:0.3s;box-shadow:0 6px 20px var(--accent-glow);border:none} |
| .back-to-top.show{opacity:1;visibility:visible} |
| .back-to-top:hover{transform:translateY(-3px)} |
| |
| /* ========== تنبيه عدم دعم الصوت ========== */ |
| .voice-unsupported-toast{ |
| position:fixed;bottom:90px;left:50%;transform:translateX(-50%); |
| background:var(--bg-card);border:1.5px solid var(--accent-2);color:var(--accent-2); |
| padding:10px 20px;border-radius:var(--radius-pill);font-size:13px; |
| box-shadow:var(--shadow-hover);z-index:2000;opacity:0;pointer-events:none; |
| transition:opacity 0.3s; |
| } |
| .voice-unsupported-toast.show{opacity:1} |
| |
| @media(max-width:767px){ |
| .navbar{top:10px;border-radius:16px;padding:10px 14px} |
| .tabs-bar{top:125px} |
| .page-wrapper{margin-top:176px} |
| .sidebar{display:none!important} |
| .ai-mobile-wrap{display:block} |
| .images-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))} |
| .videos-grid{grid-template-columns:1fr} |
| } |
| @media(min-width:768px){ |
| .navbar{flex-wrap:nowrap;padding:0 22px;height:68px} |
| .page-wrapper{display:grid;grid-template-columns:1fr 300px;gap:24px;margin:176px auto 60px} |
| .sidebar{order:unset;margin-top:0} |
| .ai-mobile-wrap{display:none!important} |
| } |
| </style> |
| </head> |
| <body> |
| <div class="bg-mesh"><div class="orb orb-1"></div><div class="orb orb-2"></div><div class="orb orb-3"></div></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" style="position:relative"> |
| <form class="search-bar" id="search-form"> |
| <input id="main-input" placeholder="ابحث في الويب..." type="text" autocomplete="off" /> |
| <button type="button" class="clear-btn" id="clear-btn" aria-label="مسح النص"><i class="fa-solid fa-times"></i></button> |
| |
| <button type="button" class="voice-btn" id="voice-btn" aria-label="بحث صوتي" title="بحث صوتي"> |
| <i class="fa-solid fa-microphone"></i> |
| </button> |
| <button class="search-btn" id="search-submit-btn" type="submit" aria-label="بحث"><i class="fa-solid fa-magnifying-glass"></i></button> |
| </form> |
| |
| <div class="voice-listening-indicator" id="voice-indicator"> |
| <div class="voice-waves"> |
| <div class="voice-wave"></div><div class="voice-wave"></div><div class="voice-wave"></div> |
| <div class="voice-wave"></div><div class="voice-wave"></div> |
| </div> |
| جاري الاستماع… |
| </div> |
| </div> |
| <div class="nav-actions"><button id="theme-toggle" aria-label="تغيير السمة"></button></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" class="spinning">جاري جلب النتائج…</div> |
| <div class="ai-mobile-wrap" id="ai-mobile-wrap"> |
| <div class="ai-glow-ring"></div> |
| <div class="ai-widget"> |
| <div class="ai-widget-header"><div class="ai-widget-icon"><i class="fa-solid fa-robot"></i></div><span>إجابة الذكاء الاصطناعي</span><span class="ai-widget-badge">AI</span></div> |
| <div class="ai-answer-body loading" id="ai-answer-body-mobile"><div class="ai-skeleton"></div><div class="ai-skeleton"></div><div class="ai-skeleton"></div></div> |
| <div class="ai-sources" id="ai-sources-mobile"></div> |
| <button class="ai-copy-btn" id="ai-copy-mobile" style="display:none"><i class="fa-regular fa-copy"></i> نسخ</button> |
| <div class="ai-widget-footer"><i class="fa-solid fa-bolt"></i> مدعوم بواسطة AnesNT</div> |
| </div> |
| </div> |
| <div id="suggestions-container"></div> |
| <div id="results-count-bar"></div> |
| <div id="results-container"></div> |
| <div class="load-more-spinner" id="load-more-spinner">جاري تحميل المزيد…</div> |
| <div class="end-of-results" id="end-of-results"> |
| <div class="end-divider"></div> |
| <span><i class="fa-solid fa-check-circle" style="color:var(--accent);margin-left:5px"></i> تم عرض جميع النتائج</span> |
| <div class="end-divider"></div> |
| </div> |
| </main> |
| <aside class="sidebar" id="sidebar"> |
| <div class="ai-widget-wrap"><div class="ai-glow-ring"></div> |
| <div class="ai-widget"> |
| <div class="ai-widget-header"><div class="ai-widget-icon"><i class="fa-solid fa-robot"></i></div><span>إجابة الذكاء الاصطناعي</span><span class="ai-widget-badge">AI</span></div> |
| <div class="ai-answer-body loading" id="ai-answer-body"><div class="ai-skeleton"></div><div class="ai-skeleton"></div><div class="ai-skeleton"></div></div> |
| <div class="ai-sources" id="ai-sources-desktop"></div> |
| <button class="ai-copy-btn" id="ai-copy-desktop" style="display:none"><i class="fa-regular fa-copy"></i> نسخ</button> |
| <div class="ai-widget-footer"><i class="fa-solid fa-bolt"></i> مدعوم بواسطة AnesNT</div> |
| </div> |
| </div> |
| </aside> |
| </div> |
|
|
| <button class="back-to-top" id="backToTop" aria-label="العودة للأعلى"><i class="fa-solid fa-arrow-up"></i></button> |
| <div class="voice-unsupported-toast" id="voice-toast">متصفحك لا يدعم البحث الصوتي</div> |
|
|
| <script> |
| (() => { |
| const SEARXNG_URL = "https://cjj-on-hf-searxng.hf.space/search"; |
| const GEMINI_API = "https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent"; |
| const GEMINI_KEY = ""; |
| |
| |
| let currentTheme = 'light'; |
| const themeBtn = document.getElementById('theme-toggle'); |
| const setTheme = (t) => { |
| document.documentElement.setAttribute('data-theme', t); |
| themeBtn.innerHTML = t === 'dark' ? '<i class="fa-solid fa-sun"></i>' : '<i class="fa-solid fa-moon"></i>'; |
| currentTheme = t; |
| }; |
| setTheme('light'); |
| themeBtn.addEventListener('click', () => setTheme(currentTheme === 'dark' ? 'light' : 'dark')); |
| |
| |
| const params = new URLSearchParams(window.location.search); |
| let query = params.get('q') || ''; |
| let currentTab = params.get('tab') || 'all'; |
| |
| const inputEl = document.getElementById('main-input'); |
| const resultsEl = document.getElementById('results-container'); |
| const loadingEl = document.getElementById('loading-text'); |
| const sidebarEl = document.getElementById('sidebar'); |
| const aiMobileWrap = document.getElementById('ai-mobile-wrap'); |
| const suggestionsEl= document.getElementById('suggestions-container'); |
| const clearBtn = document.getElementById('clear-btn'); |
| const submitBtn = document.getElementById('search-submit-btn'); |
| const countBar = document.getElementById('results-count-bar'); |
| const loadMoreEl = document.getElementById('load-more-spinner'); |
| const endEl = document.getElementById('end-of-results'); |
| |
| |
| let allWebResults = []; |
| let renderedCount = 0; |
| const PAGE_SIZE = 10; |
| let isRendering = false; |
| |
| |
| const setActiveTab = (tab) => { |
| document.querySelectorAll('.tab-pill').forEach(b => b.classList.toggle('active', b.dataset.tab === tab)); |
| }; |
| setActiveTab(currentTab); |
| |
| |
| const updateClearBtn = () => { |
| clearBtn.classList.toggle('visible', inputEl.value.length > 0); |
| }; |
| inputEl.addEventListener('input', updateClearBtn); |
| clearBtn.addEventListener('click', () => { inputEl.value = ''; updateClearBtn(); inputEl.focus(); }); |
| inputEl.addEventListener('keydown', (e) => { |
| if (e.key === 'Escape' && inputEl.value.length > 0) { inputEl.value = ''; updateClearBtn(); inputEl.blur(); } |
| }); |
| |
| |
| const esc = (s) => s ? s.replace(/[&<>'"]/g, m => ({'&':'&','<':'<','>':'>',"'":''','"':'"'}[m]||m)) : ''; |
| const getDomain = (url) => { try { return new URL(url).hostname.replace('www.',''); } catch { return url||''; } }; |
| const proxyImg = (url) => url && !url.startsWith('data:') ? `https://wsrv.nl/?url=${encodeURIComponent(url)}&output=webp` : url; |
| const faviconURL = (d) => `https://www.google.com/s2/favicons?domain=${d}&sz=32`; |
| const extractBestImage = (r) => { |
| for (const c of [r.img_src, r.thumbnail_src, r.thumbnail, r.image]) { |
| if (c && typeof c === 'string' && c.startsWith('http')) return c; |
| } |
| return null; |
| }; |
| const truncateWords = (text, maxWords) => { |
| if (!text) return ''; |
| const words = text.split(/\s+/).filter(w => w.length > 0); |
| if (words.length <= maxWords) return text; |
| return words.slice(0, maxWords).join(' ') + '...'; |
| }; |
| |
| |
| const observer = new IntersectionObserver(entries => entries.forEach(en => { |
| if (en.isIntersecting) en.target.classList.add('visible'); |
| }), { threshold: 0.08 }); |
| const observe = () => document.querySelectorAll('.search-result:not(.visible),.image-card:not(.visible),.video-card:not(.visible)').forEach(el => observer.observe(el)); |
| |
| |
| let sentinel = null; |
| const scrollObserver = new IntersectionObserver(entries => { |
| if (entries[0].isIntersecting && !isRendering) renderNextBatch(); |
| }, { rootMargin: '300px' }); |
| |
| const attachSentinel = () => { |
| if (sentinel) sentinel.remove(); |
| sentinel = document.createElement('div'); |
| sentinel.id = 'scroll-sentinel'; |
| resultsEl.appendChild(sentinel); |
| scrollObserver.observe(sentinel); |
| }; |
| |
| const detachSentinel = () => { |
| if (sentinel) { scrollObserver.unobserve(sentinel); sentinel.remove(); sentinel = null; } |
| }; |
| |
| |
| const renderNextBatch = () => { |
| if (renderedCount >= allWebResults.length) { |
| detachSentinel(); |
| loadMoreEl.classList.remove('show'); |
| endEl.classList.add('show'); |
| return; |
| } |
| isRendering = true; |
| loadMoreEl.classList.add('show'); |
| |
| const batch = allWebResults.slice(renderedCount, renderedCount + PAGE_SIZE); |
| batch.forEach(r => { |
| const d = getDomain(r.url); |
| const art = document.createElement('article'); art.className = 'search-result'; |
| art.innerHTML = ` |
| <div class="favicon-wrap"> |
| <img src="${faviconURL(d)}" onerror="this.style.display='none';this.nextElementSibling.style.display='flex'" /> |
| <i class="fa-solid fa-globe fallback-icon" style="display:none"></i> |
| </div> |
| <div class="result-content"> |
| <div class="result-domain"><i class="fa-solid fa-link"></i> ${esc(d)}</div> |
| <a class="result-title" href="${esc(r.url)}" target="_blank" title="${esc(r.title||'')}">${esc(truncateWords(r.title||'بدون عنوان', 14))}</a> |
| <p class="result-snippet">${esc(truncateWords(r.content||'', 35))}</p> |
| </div> |
| <button class="copy-link-btn" data-url="${esc(r.url)}" title="نسخ الرابط"><i class="fa-regular fa-copy"></i></button> |
| `; |
| resultsEl.appendChild(art); |
| }); |
| |
| renderedCount += batch.length; |
| observe(); |
| |
| setTimeout(() => { |
| loadMoreEl.classList.remove('show'); |
| isRendering = false; |
| if (renderedCount < allWebResults.length) { |
| attachSentinel(); |
| } else { |
| endEl.classList.add('show'); |
| } |
| }, 400); |
| }; |
| |
| |
| let currentAItext = ''; |
| const aiSetLoading = () => { |
| ['ai-answer-body','ai-answer-body-mobile'].forEach(id => { const el=document.getElementById(id); if(el){el.classList.add('loading');el.innerHTML='<div class="ai-skeleton"></div><div class="ai-skeleton"></div><div class="ai-skeleton"></div>'} }); |
| ['ai-copy-desktop','ai-copy-mobile'].forEach(id => { const b=document.getElementById(id); if(b)b.style.display='none' }); |
| ['ai-sources-desktop','ai-sources-mobile'].forEach(id => { const el=document.getElementById(id); if(el)el.innerHTML='' }); |
| }; |
| const aiUpdate = (text, sources) => { |
| currentAItext = text; |
| ['ai-answer-body','ai-answer-body-mobile'].forEach(id => { const el=document.getElementById(id); if(el){el.classList.remove('loading');el.textContent=text} }); |
| ['ai-copy-desktop','ai-copy-mobile'].forEach(id => { const b=document.getElementById(id); if(b)b.style.display='inline-flex' }); |
| const chips = sources.slice(0,4).map(s=>`<a class="ai-source-chip" href="${s.url}" target="_blank"><i class="fa-solid fa-link"></i>${esc(getDomain(s.url))}</a>`).join(''); |
| ['ai-sources-desktop','ai-sources-mobile'].forEach(id => { const el=document.getElementById(id); if(el)el.innerHTML=chips }); |
| }; |
| const runAI = async (q, results) => { |
| aiSetLoading(); |
| if (GEMINI_KEY.trim()) { |
| try { |
| const snippets = results.slice(0,5).map((r,i)=>`[${i+1}] ${r.title||''}: ${r.content||''}`).join('\n'); |
| const resp = await fetch(`${GEMINI_API}?key=${GEMINI_KEY}`,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({contents:[{parts:[{text:`أجب باختصار بالعربية عن: "${q}" بناءً على:\n${snippets}`}]}],generationConfig:{maxOutputTokens:400}})}); |
| const data = await resp.json(); |
| aiUpdate(data.candidates?.[0]?.content?.parts?.[0]?.text||'لا توجد إجابة.', results.slice(0,4)); |
| return; |
| } catch(e){} |
| } |
| const best = results[0]; |
| const summary = best ? truncateWords(best.content, 35) : ''; |
| aiUpdate(summary ? `🔍 ${summary}` : 'لا توجد معلومات كافية.', results.slice(0,3)); |
| }; |
| const showAI = (visible) => { |
| if(sidebarEl) sidebarEl.style.display = visible ? '' : 'none'; |
| if(aiMobileWrap) aiMobileWrap.style.display = visible ? '' : 'none'; |
| }; |
| |
| |
| window.handleImageError = function(img) { const c=img.closest('.image-card'); if(c)c.remove(); }; |
| window.handleVideoThumbError = function(img) { const c=img.closest('.video-card'); if(c)c.remove(); }; |
| |
| |
| const backBtn = document.getElementById('backToTop'); |
| window.addEventListener('scroll', () => backBtn.classList.toggle('show', scrollY > 400)); |
| backBtn.addEventListener('click', () => scrollTo({top:0,behavior:'smooth'})); |
| |
| |
| const fetchJSON = (url) => fetch(url, {signal: AbortSignal.timeout(12000)}).then(r=>r.json()); |
| const fetchCategory = (cat, pageno=1) => { |
| const url = `${SEARXNG_URL}?q=${encodeURIComponent(query)}&format=json&categories=${cat}&language=ar&safesearch=1&pageno=${pageno}`; |
| return fetchJSON(url).catch(()=>({results:[],suggestions:[]})); |
| }; |
| |
| |
| const renderSuggestions = (suggestions) => { |
| suggestionsEl.innerHTML = ''; |
| if (!suggestions?.length) return; |
| const row = document.createElement('div'); row.className='suggestions-row'; |
| suggestions.forEach(s => { |
| const chip = document.createElement('button'); chip.className='suggestion-chip'; chip.textContent=s; |
| chip.addEventListener('click', () => { inputEl.value=s; updateClearBtn(); document.getElementById('search-form').dispatchEvent(new Event('submit')); }); |
| row.appendChild(chip); |
| }); |
| suggestionsEl.appendChild(row); |
| }; |
| |
| |
| const renderCount = (count) => { |
| countBar.innerHTML = count > 0 |
| ? `<div class="results-count"><i class="fa-solid fa-circle-info"></i> تم العثور على <span>${count}</span> نتيجة</div>` |
| : ''; |
| }; |
| |
| |
| const createSectionTitle = (text, tabLink) => { |
| const h3=document.createElement('h3'); h3.className='section-title'; |
| h3.innerHTML=`${text} <a href="?q=${encodeURIComponent(query)}&tab=${tabLink}">عرض الكل <i class="fa-solid fa-arrow-left"></i></a>`; |
| return h3; |
| }; |
| |
| |
| const renderImageGrid = (images, container, withTitle=false) => { |
| const valid = images.filter(r => extractBestImage(r)); |
| if (!valid.length) return; |
| if (withTitle) container.appendChild(createSectionTitle('صور','images')); |
| const grid = document.createElement('div'); grid.className='images-grid'; |
| valid.forEach(r => { |
| const proxied = proxyImg(extractBestImage(r)); |
| const card = document.createElement('div'); card.className='image-card'; |
| card.innerHTML=` |
| <a class="image-card-link" href="${esc(r.url||'')}" target="_blank"> |
| <img src="${esc(proxied)}" loading="lazy" onerror="handleImageError(this)" alt="${esc(r.title||'')}" /> |
| </a> |
| <div class="image-info"> |
| <div class="img-title" title="${esc(r.title||'صورة')}">${esc(truncateWords(r.title||'صورة',8))}</div> |
| <a class="image-url" href="${esc(r.url||'')}" target="_blank">${esc(getDomain(r.url||''))}</a> |
| </div>`; |
| grid.appendChild(card); |
| }); |
| container.appendChild(grid); |
| }; |
| |
| |
| const renderVideoGrid = (videos, container, withTitle=false) => { |
| const valid = videos.filter(r => r.thumbnail); |
| if (!valid.length) return; |
| if (withTitle) container.appendChild(createSectionTitle('فيديوهات','videos')); |
| const grid = document.createElement('div'); grid.className='videos-grid'; |
| valid.forEach(r => { |
| const thumb = proxyImg(r.thumbnail); |
| const card = document.createElement('div'); card.className='video-card'; |
| card.innerHTML=` |
| <a href="${esc(r.url||'')}" target="_blank" class="video-thumb-wrap"> |
| <img src="${esc(thumb)}" loading="lazy" onerror="handleVideoThumbError(this)" alt="${esc(r.title||'')}" /> |
| <div class="play-overlay"><i class="fa-solid fa-play"></i></div> |
| </a> |
| <div class="video-details"> |
| <a class="video-title" href="${esc(r.url||'')}" target="_blank">${esc(truncateWords(r.title||'فيديو',12))}</a> |
| <a class="video-url" href="${esc(r.url||'')}" target="_blank">${esc(getDomain(r.url||''))}</a> |
| </div>`; |
| grid.appendChild(card); |
| }); |
| container.appendChild(grid); |
| }; |
| |
| |
| const performSearch = async (q, tab) => { |
| |
| resultsEl.innerHTML = ''; |
| suggestionsEl.innerHTML = ''; |
| countBar.innerHTML = ''; |
| endEl.classList.remove('show'); |
| loadMoreEl.classList.remove('show'); |
| allWebResults = []; |
| renderedCount = 0; |
| isRendering = false; |
| detachSentinel(); |
| |
| loadingEl.style.display = 'flex'; |
| loadingEl.classList.add('spinning'); |
| loadingEl.textContent = 'جاري جلب النتائج…'; |
| |
| |
| submitBtn.classList.add('loading-btn'); |
| submitBtn.innerHTML = '<i class="fa-solid fa-circle-notch"></i>'; |
| |
| showAI(tab === 'all'); |
| |
| const resetSubmitBtn = () => { |
| submitBtn.classList.remove('loading-btn'); |
| submitBtn.innerHTML = '<i class="fa-solid fa-magnifying-glass"></i>'; |
| }; |
| |
| try { |
| if (tab === 'all') { |
| |
| const [imagesData, videosData] = await Promise.all([ |
| fetchCategory('images'), |
| fetchCategory('videos') |
| ]); |
| |
| const suggestions = imagesData.suggestions || videosData.suggestions || []; |
| if (suggestions.length) renderSuggestions(suggestions); |
| |
| renderImageGrid((imagesData.results||[]).slice(0,4), resultsEl, true); |
| renderVideoGrid((videosData.results||[]).slice(0,3), resultsEl, true); |
| observe(); |
| |
| |
| loadingEl.textContent = 'جاري جلب نتائج الويب…'; |
| |
| const [page1, page2, page3] = await Promise.all([ |
| fetchCategory('general', 1), |
| fetchCategory('general', 2), |
| fetchCategory('general', 3), |
| ]); |
| |
| |
| const seen = new Set(); |
| const mergeUnique = (arr) => (arr||[]).filter(r => { |
| if (!r.url || seen.has(r.url)) return false; |
| seen.add(r.url); return true; |
| }); |
| |
| allWebResults = [ |
| ...mergeUnique(page1.results), |
| ...mergeUnique(page2.results), |
| ...mergeUnique(page3.results), |
| ]; |
| |
| loadingEl.style.display = 'none'; |
| resetSubmitBtn(); |
| |
| if (!allWebResults.length) { |
| resultsEl.innerHTML += `<div class="empty-state"><i class="fa-solid fa-magnifying-glass"></i><p>لا توجد نتائج لـ "<strong>${esc(q)}</strong>"</p></div>`; |
| return; |
| } |
| |
| |
| renderCount(allWebResults.length); |
| |
| |
| renderNextBatch(); |
| |
| |
| runAI(q, allWebResults.slice(0,6)); |
| |
| } else if (tab === 'images') { |
| const [p1, p2] = await Promise.all([fetchCategory('images',1), fetchCategory('images',2)]); |
| const seen = new Set(); |
| const all = [...(p1.results||[]), ...(p2.results||[])].filter(r => { |
| if (!r.url || seen.has(r.url)) return false; seen.add(r.url); return true; |
| }); |
| loadingEl.style.display='none'; resetSubmitBtn(); |
| renderCount(all.length); |
| renderImageGrid(all, resultsEl, false); |
| observe(); |
| |
| } else if (tab === 'videos') { |
| const [p1, p2] = await Promise.all([fetchCategory('videos',1), fetchCategory('videos',2)]); |
| const seen = new Set(); |
| const all = [...(p1.results||[]), ...(p2.results||[])].filter(r => { |
| if (!r.url || seen.has(r.url)) return false; seen.add(r.url); return true; |
| }); |
| loadingEl.style.display='none'; resetSubmitBtn(); |
| renderCount(all.length); |
| renderVideoGrid(all, resultsEl, false); |
| observe(); |
| |
| } else if (tab === 'news') { |
| const data = await fetchCategory('news'); |
| const results = data.results || []; |
| loadingEl.style.display='none'; resetSubmitBtn(); |
| if (data.suggestions?.length) renderSuggestions(data.suggestions); |
| renderCount(results.length); |
| if (results.length) { |
| |
| allWebResults = results; |
| renderedCount = 0; |
| renderNextBatch(); |
| } else { |
| resultsEl.innerHTML = `<div class="empty-state"><i class="fa-solid fa-newspaper"></i><p>لا توجد أخبار حول "<strong>${esc(q)}</strong>"</p></div>`; |
| } |
| } |
| |
| } catch(e) { |
| loadingEl.style.display='none'; |
| resetSubmitBtn(); |
| resultsEl.innerHTML = `<div class="empty-state"><i class="fa-solid fa-triangle-exclamation"></i><p>حدث خطأ أثناء البحث. حاول مجدداً.</p></div>`; |
| } |
| }; |
| |
| |
| const voiceBtn = document.getElementById('voice-btn'); |
| const voiceIndicator = document.getElementById('voice-indicator'); |
| const voiceToast = document.getElementById('voice-toast'); |
| |
| const showToast = (msg) => { |
| voiceToast.textContent = msg; |
| voiceToast.classList.add('show'); |
| setTimeout(() => voiceToast.classList.remove('show'), 3000); |
| }; |
| |
| const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; |
| |
| if (!SpeechRecognition) { |
| voiceBtn.title = 'البحث الصوتي غير مدعوم في هذا المتصفح'; |
| voiceBtn.style.opacity = '0.4'; |
| voiceBtn.addEventListener('click', () => showToast('متصفحك لا يدعم البحث الصوتي. جرب Chrome أو Edge.')); |
| } else { |
| const recognition = new SpeechRecognition(); |
| recognition.lang = 'ar-SA'; |
| recognition.interimResults = true; |
| recognition.maxAlternatives = 1; |
| recognition.continuous = false; |
| |
| let isListening = false; |
| |
| const startListening = () => { |
| if (isListening) { recognition.stop(); return; } |
| try { |
| recognition.start(); |
| } catch(e) { |
| showToast('لا يمكن بدء الاستماع. تحقق من إذن الميكروفون.'); |
| } |
| }; |
| |
| recognition.onstart = () => { |
| isListening = true; |
| voiceBtn.classList.add('listening'); |
| voiceBtn.innerHTML = '<i class="fa-solid fa-microphone-slash"></i>'; |
| voiceIndicator.classList.add('show'); |
| }; |
| |
| recognition.onresult = (e) => { |
| const transcript = Array.from(e.results).map(r => r[0].transcript).join(''); |
| inputEl.value = transcript; |
| updateClearBtn(); |
| |
| if (e.results[e.results.length - 1].isFinal) { |
| recognition.stop(); |
| if (transcript.trim()) { |
| setTimeout(() => { |
| document.getElementById('search-form').dispatchEvent(new Event('submit')); |
| }, 300); |
| } |
| } |
| }; |
| |
| recognition.onerror = (e) => { |
| const msgs = { |
| 'no-speech': 'لم يُسمع أي كلام. حاول مجدداً.', |
| 'audio-capture': 'لا يمكن الوصول للميكروفون.', |
| 'not-allowed': 'تم رفض إذن الميكروفون.', |
| 'network': 'خطأ في الشبكة أثناء التعرف على الصوت.', |
| }; |
| showToast(msgs[e.error] || 'خطأ في البحث الصوتي.'); |
| }; |
| |
| recognition.onend = () => { |
| isListening = false; |
| voiceBtn.classList.remove('listening'); |
| voiceBtn.innerHTML = '<i class="fa-solid fa-microphone"></i>'; |
| voiceIndicator.classList.remove('show'); |
| }; |
| |
| voiceBtn.addEventListener('click', startListening); |
| } |
| |
| |
| if (query) { |
| inputEl.value = query; |
| updateClearBtn(); |
| performSearch(query, currentTab); |
| } else { |
| loadingEl.style.display = 'block'; |
| loadingEl.classList.remove('spinning'); |
| loadingEl.textContent = 'أدخل كلمة البحث للبدء.'; |
| submitBtn.classList.remove('loading-btn'); |
| submitBtn.innerHTML = '<i class="fa-solid fa-magnifying-glass"></i>'; |
| } |
| |
| |
| document.getElementById('search-form').addEventListener('submit', e => { |
| e.preventDefault(); |
| const q = inputEl.value.trim(); |
| if (!q) return; |
| window.history.pushState({}, '', `?q=${encodeURIComponent(q)}&tab=${currentTab}`); |
| query = q; |
| performSearch(q, currentTab); |
| }); |
| |
| document.querySelectorAll('.tab-pill').forEach(btn => { |
| btn.addEventListener('click', () => { |
| const tab = btn.dataset.tab; |
| if (!tab || tab === currentTab) return; |
| currentTab = tab; |
| setActiveTab(tab); |
| window.history.pushState({}, '', `?q=${encodeURIComponent(query)}&tab=${tab}`); |
| if (query) performSearch(query, tab); |
| }); |
| }); |
| |
| document.getElementById('ai-copy-desktop')?.addEventListener('click', () => navigator.clipboard.writeText(currentAItext)); |
| document.getElementById('ai-copy-mobile')?.addEventListener('click', () => navigator.clipboard.writeText(currentAItext)); |
| |
| document.addEventListener('click', (e) => { |
| const btn = e.target.closest('.copy-link-btn'); |
| if (btn) { |
| navigator.clipboard.writeText(btn.dataset.url).then(() => { |
| btn.innerHTML = '<i class="fa-solid fa-check"></i>'; |
| setTimeout(() => { btn.innerHTML = '<i class="fa-regular fa-copy"></i>'; }, 1500); |
| }).catch(()=>{}); |
| } |
| }); |
| |
| })(); |
| </script> |
| </body> |
| </html> |
