Update index.html
Browse files- index.html +75 -888
index.html
CHANGED
|
@@ -1,903 +1,90 @@
|
|
| 1 |
<!DOCTYPE html>
|
| 2 |
-
<html
|
| 3 |
<head>
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
|
| 20 |
-
--accent: #5b5ef4;
|
| 21 |
-
--accent-2: #e0427a;
|
| 22 |
-
--accent-glow: rgba(91,94,244,0.18);
|
| 23 |
-
--text-main: #12132a;
|
| 24 |
-
--text-sub: #6b7280;
|
| 25 |
-
--text-faint: #9ca3af;
|
| 26 |
-
--shadow-card: 0 2px 12px rgba(91,94,244,0.07),0 1px 3px rgba(0,0,0,0.04);
|
| 27 |
-
--shadow-hover: 0 8px 32px rgba(91,94,244,0.13),0 2px 8px rgba(0,0,0,0.06);
|
| 28 |
-
--radius-nav: 22px;
|
| 29 |
-
--radius-card: 18px;
|
| 30 |
-
--radius-pill: 100px;
|
| 31 |
-
--transition: 0.28s cubic-bezier(0.4,0,0.2,1);
|
| 32 |
-
}
|
| 33 |
-
[data-theme="dark"] {
|
| 34 |
-
--bg-base: #0c0d1d;
|
| 35 |
-
--bg-nav: rgba(18,20,40,0.92);
|
| 36 |
-
--bg-card: #13152e;
|
| 37 |
-
--bg-input: #1c1f3d;
|
| 38 |
-
--bg-input-focus: #13152e;
|
| 39 |
-
--border: rgba(130,133,255,0.13);
|
| 40 |
-
--border-hover: rgba(130,133,255,0.4);
|
| 41 |
-
--accent: #8284fc;
|
| 42 |
-
--accent-2: #f472b6;
|
| 43 |
-
--accent-glow: rgba(130,133,255,0.16);
|
| 44 |
-
--text-main: #eef0ff;
|
| 45 |
-
--text-sub: #9099c0;
|
| 46 |
-
--text-faint: #5a6080;
|
| 47 |
-
--shadow-card: 0 2px 14px rgba(0,0,0,0.28);
|
| 48 |
-
--shadow-hover: 0 10px 36px rgba(130,133,255,0.14);
|
| 49 |
-
}
|
| 50 |
-
*{margin:0;padding:0;box-sizing:border-box}
|
| 51 |
-
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}
|
| 52 |
-
.bg-mesh{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
|
| 53 |
-
.orb{position:absolute;border-radius:50%;filter:blur(85px);opacity:0.4;animation:drift 20s ease-in-out infinite alternate}
|
| 54 |
-
.orb-1{width:55vw;height:55vw;background:radial-gradient(circle,rgba(91,94,244,0.15) 0%,transparent 70%);top:-20%;right:-15%}
|
| 55 |
-
.orb-2{width:45vw;height:45vw;background:radial-gradient(circle,rgba(224,66,122,0.12) 0%,transparent 70%);bottom:-15%;left:-10%}
|
| 56 |
-
.orb-3{width:35vw;height:35vw;background:radial-gradient(circle,rgba(167,139,250,0.1) 0%,transparent 70%);top:55%;left:55%}
|
| 57 |
-
@keyframes drift{0%{transform:translate(0,0) scale(1)}100%{transform:translate(4%,3%) scale(1.06)}}
|
| 58 |
-
|
| 59 |
-
/* ========== شريط التنقل ========== */
|
| 60 |
-
.navbar{
|
| 61 |
-
position:fixed;top:14px;left:50%;transform:translateX(-50%);width:95%;max-width:1280px;min-height:68px;
|
| 62 |
-
background:var(--bg-nav);backdrop-filter:blur(28px) saturate(1.6);-webkit-backdrop-filter:blur(28px) saturate(1.6);
|
| 63 |
-
border:1px solid var(--border);border-radius:var(--radius-nav);display:flex;flex-wrap:wrap;align-items:center;
|
| 64 |
-
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;
|
| 65 |
-
gap:12px;transition:background 0.35s,border-color 0.35s;
|
| 66 |
-
}
|
| 67 |
-
.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}
|
| 68 |
-
.brand:hover{transform:scale(1.03)}
|
| 69 |
-
.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)}
|
| 70 |
-
.search-container{flex:1;max-width:580px;width:100%}
|
| 71 |
-
|
| 72 |
-
/* ========== صندوق البحث ========== */
|
| 73 |
-
.search-bar{
|
| 74 |
-
display:flex;align-items:center;background:var(--bg-input);border:2px solid var(--border);
|
| 75 |
-
border-radius:var(--radius-pill);padding:4px 4px 4px 16px;transition:var(--transition);width:100%;
|
| 76 |
-
position:relative;overflow:hidden;
|
| 77 |
-
}
|
| 78 |
-
.search-bar:focus-within{
|
| 79 |
-
border-color:var(--accent);background:var(--bg-input-focus);
|
| 80 |
-
box-shadow:0 0 0 4px var(--accent-glow), 0 4px 16px rgba(0,0,0,0.04);
|
| 81 |
-
transform:translateY(-1px);
|
| 82 |
-
}
|
| 83 |
-
.search-bar input{
|
| 84 |
-
flex:1;background:transparent;border:none;padding:9px 0;color:var(--text-main);
|
| 85 |
-
font-size:14.5px;min-width:0;font-family:'Tajawal',sans-serif;
|
| 86 |
-
}
|
| 87 |
-
.search-bar input::placeholder{color:var(--text-faint);opacity:0.7}
|
| 88 |
-
.search-bar .clear-btn{
|
| 89 |
-
background:none;border:none;color:var(--text-faint);cursor:pointer;
|
| 90 |
-
padding:6px 8px;font-size:14px;display:none;transition:color 0.2s;
|
| 91 |
-
}
|
| 92 |
-
.search-bar .clear-btn:hover{color:var(--accent)}
|
| 93 |
-
.search-bar .clear-btn.visible{display:block}
|
| 94 |
-
|
| 95 |
-
/* ========== زر البحث الصوتي ========== */
|
| 96 |
-
.voice-btn{
|
| 97 |
-
background:none;border:none;color:var(--text-faint);cursor:pointer;
|
| 98 |
-
padding:6px 10px;font-size:15px;transition:var(--transition);position:relative;
|
| 99 |
-
display:flex;align-items:center;justify-content:center;
|
| 100 |
-
}
|
| 101 |
-
.voice-btn:hover{color:var(--accent)}
|
| 102 |
-
.voice-btn.listening{color:#e0427a;animation:pulse-mic 1s ease-in-out infinite}
|
| 103 |
-
@keyframes pulse-mic{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
|
| 104 |
-
|
| 105 |
-
/* مؤشر الاستماع */
|
| 106 |
-
.voice-listening-indicator{
|
| 107 |
-
display:none;position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);
|
| 108 |
-
background:var(--bg-card);border:2px solid var(--accent);border-radius:var(--radius-pill);
|
| 109 |
-
padding:8px 20px;font-size:13px;color:var(--accent);white-space:nowrap;
|
| 110 |
-
box-shadow:var(--shadow-hover);z-index:999;
|
| 111 |
-
align-items:center;gap:8px;
|
| 112 |
-
}
|
| 113 |
-
.voice-listening-indicator.show{display:flex}
|
| 114 |
-
.voice-waves{display:flex;gap:3px;align-items:center;height:16px}
|
| 115 |
-
.voice-wave{width:3px;background:var(--accent);border-radius:2px;animation:wave-bar 0.8s ease-in-out infinite}
|
| 116 |
-
.voice-wave:nth-child(1){height:6px;animation-delay:0s}
|
| 117 |
-
.voice-wave:nth-child(2){height:12px;animation-delay:0.15s}
|
| 118 |
-
.voice-wave:nth-child(3){height:16px;animation-delay:0.3s}
|
| 119 |
-
.voice-wave:nth-child(4){height:10px;animation-delay:0.45s}
|
| 120 |
-
.voice-wave:nth-child(5){height:6px;animation-delay:0.6s}
|
| 121 |
-
@keyframes wave-bar{0%,100%{transform:scaleY(0.5)}50%{transform:scaleY(1)}}
|
| 122 |
-
|
| 123 |
-
.search-btn{
|
| 124 |
-
background:linear-gradient(135deg,var(--accent),var(--accent-2));border:none;color:#fff;cursor:pointer;
|
| 125 |
-
width:40px;height:36px;border-radius:var(--radius-pill);display:flex;align-items:center;
|
| 126 |
-
justify-content:center;font-size:14px;flex-shrink:0;transition:var(--transition);
|
| 127 |
-
box-shadow:0 2px 8px var(--accent-glow);
|
| 128 |
-
}
|
| 129 |
-
.search-btn:hover{opacity:0.9;transform:scale(1.06);box-shadow:0 4px 14px var(--accent-glow)}
|
| 130 |
-
.search-btn:active{transform:scale(0.95)}
|
| 131 |
-
/* حالة تحميل زر البحث */
|
| 132 |
-
.search-btn.loading-btn{pointer-events:none;opacity:0.7}
|
| 133 |
-
.search-btn.loading-btn i{animation:spin 0.8s linear infinite}
|
| 134 |
-
|
| 135 |
-
.nav-actions{display:flex;align-items:center;gap:8px}
|
| 136 |
-
#theme-toggle{
|
| 137 |
-
background:var(--bg-input);border:1.5px solid var(--border);color:var(--text-sub);cursor:pointer;
|
| 138 |
-
width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
|
| 139 |
-
font-size:15px;transition:var(--transition);
|
| 140 |
-
}
|
| 141 |
-
#theme-toggle:hover{border-color:var(--accent);color:var(--accent);transform:rotate(180deg)}
|
| 142 |
-
|
| 143 |
-
/* ========== شريط التبويبات ========== */
|
| 144 |
-
.tabs-bar{
|
| 145 |
-
position:fixed;top:98px;left:50%;transform:translateX(-50%);width:95%;max-width:1280px;display:flex;gap:6px;
|
| 146 |
-
z-index:999;overflow-x:auto;padding:6px 10px;backdrop-filter:blur(16px);background:rgba(255,255,255,0.2);
|
| 147 |
-
border:1px solid var(--border);border-radius:40px;scrollbar-width:none;
|
| 148 |
-
}
|
| 149 |
-
[data-theme="dark"] .tabs-bar{background:rgba(18,20,40,0.35)}
|
| 150 |
-
.tab-pill{
|
| 151 |
-
padding:7px 16px;border-radius:var(--radius-pill);background:var(--bg-card);border:1.5px solid var(--border);
|
| 152 |
-
color:var(--text-sub);font-family:'Tajawal',sans-serif;font-size:13px;font-weight:500;cursor:pointer;
|
| 153 |
-
transition:var(--transition);display:flex;align-items:center;gap:6px;white-space:nowrap;
|
| 154 |
-
box-shadow:var(--shadow-card);
|
| 155 |
-
}
|
| 156 |
-
.tab-pill:hover{border-color:var(--border-hover);color:var(--accent);transform:translateY(-1px)}
|
| 157 |
-
.tab-pill.active{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 4px 16px var(--accent-glow)}
|
| 158 |
-
|
| 159 |
-
/* ========== التخطيط العام ========== */
|
| 160 |
-
.page-wrapper{position:relative;z-index:1;max-width:1280px;margin:170px auto 60px;padding:0 16px;display:flex;flex-direction:column;gap:24px}
|
| 161 |
-
.results-area{min-width:0;width:100%}
|
| 162 |
-
|
| 163 |
-
/* ========== مؤشر التحميل ========== */
|
| 164 |
-
#loading-text{color:var(--text-sub);font-size:13.5px;margin-bottom:18px;display:flex;align-items:center;gap:8px}
|
| 165 |
-
#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}
|
| 166 |
-
@keyframes spin{to{transform:rotate(360deg)}}
|
| 167 |
-
|
| 168 |
-
/* ========== عداد النتائج ========== */
|
| 169 |
-
.results-count{font-size:12px;color:var(--text-faint);margin-bottom:14px;display:flex;align-items:center;gap:6px}
|
| 170 |
-
.results-count span{color:var(--accent);font-weight:600}
|
| 171 |
-
|
| 172 |
-
/* ========== الاقتراحات ========== */
|
| 173 |
-
.suggestions-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
|
| 174 |
-
.suggestion-chip{
|
| 175 |
-
padding:6px 14px;border-radius:var(--radius-pill);background:var(--bg-card);border:1px solid var(--border);
|
| 176 |
-
color:var(--text-sub);font-size:12px;cursor:pointer;transition:var(--transition);white-space:nowrap;
|
| 177 |
-
}
|
| 178 |
-
.suggestion-chip:hover{border-color:var(--accent);color:var(--accent);background:var(--bg-input-focus);transform:translateY(-1px)}
|
| 179 |
-
|
| 180 |
-
/* ========== تأثيرات الظهور ========== */
|
| 181 |
-
.search-result,.image-card,.video-card{opacity:0;transform:translateY(20px);transition:opacity 0.5s ease,transform 0.5s ease}
|
| 182 |
-
.search-result.visible,.image-card.visible,.video-card.visible{opacity:1;transform:translateY(0)}
|
| 183 |
-
|
| 184 |
-
/* ========== بطاقات نتائج الويب ========== */
|
| 185 |
-
.search-result{
|
| 186 |
-
background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--radius-card);
|
| 187 |
-
padding:18px 20px;margin-bottom:12px;transition:var(--transition);box-shadow:var(--shadow-card);
|
| 188 |
-
display:flex;gap:14px;align-items:flex-start;
|
| 189 |
-
}
|
| 190 |
-
.search-result:hover{border-color:var(--border-hover);box-shadow:var(--shadow-hover);transform:translateY(-2px)}
|
| 191 |
-
.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}
|
| 192 |
-
.favicon-wrap img{width:16px;height:16px;object-fit:contain}
|
| 193 |
-
.fallback-icon{color:var(--text-faint);font-size:11px}
|
| 194 |
-
.result-content{flex:1;min-width:0}
|
| 195 |
-
.result-domain{font-size:11.5px;color:var(--text-faint);margin-bottom:4px;display:flex;align-items:center;gap:4px}
|
| 196 |
-
.result-title{
|
| 197 |
-
font-size:16px;font-weight:700;color:var(--accent);text-decoration:none;display:-webkit-box;
|
| 198 |
-
-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:6px;line-height:1.4;transition:color 0.2s;
|
| 199 |
-
}
|
| 200 |
-
.result-title:hover{color:var(--accent-2);text-decoration:underline}
|
| 201 |
-
.result-snippet{
|
| 202 |
-
font-size:13.5px;color:var(--text-sub);line-height:1.65;display:-webkit-box;
|
| 203 |
-
-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
|
| 204 |
-
}
|
| 205 |
-
.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}
|
| 206 |
-
.copy-link-btn:hover{color:var(--accent)}
|
| 207 |
-
|
| 208 |
-
/* ========== شبكة الصور ========== */
|
| 209 |
-
.images-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;width:100%}
|
| 210 |
-
.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}
|
| 211 |
-
.image-card:hover{border-color:var(--border-hover);box-shadow:var(--shadow-hover);transform:translateY(-5px)}
|
| 212 |
-
.image-card-link{display:block;width:100%;height:150px;overflow:hidden;background:var(--bg-input);position:relative}
|
| 213 |
-
.image-card-link img{width:100%;height:100%;object-fit:cover;transition:transform 0.4s ease;display:block}
|
| 214 |
-
.image-card:hover .image-card-link img{transform:scale(1.06)}
|
| 215 |
-
.image-info{padding:8px 10px;font-size:11px;color:var(--text-sub);border-top:1px solid var(--border)}
|
| 216 |
-
.image-info .img-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:4px}
|
| 217 |
-
.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}
|
| 218 |
-
|
| 219 |
-
/* ========== شبكة الفيديوهات ========== */
|
| 220 |
-
.videos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;width:100%}
|
| 221 |
-
.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)}
|
| 222 |
-
.video-card:hover{border-color:var(--border-hover);box-shadow:var(--shadow-hover);transform:translateY(-3px)}
|
| 223 |
-
.video-thumb-wrap{position:relative;width:100%;height:150px;background:var(--bg-input);display:block;overflow:hidden}
|
| 224 |
-
.video-thumb-wrap img{width:100%;height:100%;object-fit:cover;opacity:0.85;transition:0.3s;display:block}
|
| 225 |
-
.video-card:hover .video-thumb-wrap img{opacity:1}
|
| 226 |
-
.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)}
|
| 227 |
-
.video-details{padding:10px}
|
| 228 |
-
.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}
|
| 229 |
-
.video-title:hover{color:var(--accent)}
|
| 230 |
-
.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}
|
| 231 |
-
|
| 232 |
-
/* ========== عناوين الأقسام ========== */
|
| 233 |
-
.section-title{font-size:18px;font-weight:700;margin:20px 0 12px;color:var(--text-main);display:flex;align-items:center;gap:10px}
|
| 234 |
-
.section-title a{color:var(--accent);text-decoration:none;font-size:14px;font-weight:500;margin-right:auto;transition:color 0.2s}
|
| 235 |
-
.section-title a:hover{color:var(--accent-2)}
|
| 236 |
-
|
| 237 |
-
/* ========== مؤشر تحميل المزيد ========== */
|
| 238 |
-
.load-more-spinner{
|
| 239 |
-
display:none;text-align:center;padding:24px;color:var(--text-faint);font-size:13px;
|
| 240 |
-
align-items:center;justify-content:center;gap:8px;
|
| 241 |
-
}
|
| 242 |
-
.load-more-spinner.show{display:flex}
|
| 243 |
-
.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}
|
| 244 |
-
|
| 245 |
-
/* ========== نهاية النتائج ========== */
|
| 246 |
-
.end-of-results{
|
| 247 |
-
text-align:center;padding:30px 20px;color:var(--text-faint);font-size:13px;
|
| 248 |
-
display:none;align-items:center;justify-content:center;gap:8px;
|
| 249 |
-
}
|
| 250 |
-
.end-of-results.show{display:flex}
|
| 251 |
-
.end-divider{height:1px;background:var(--border);flex:1;max-width:80px}
|
| 252 |
-
|
| 253 |
-
/* ========== مساعد الذكاء الاصطناعي ========== */
|
| 254 |
-
.sidebar{width:100%;order:2;margin-top:12px}
|
| 255 |
-
.ai-widget-wrap{position:relative;border-radius:var(--radius-card)}
|
| 256 |
-
.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)}
|
| 257 |
-
@property --angle{syntax:'<angle>';initial-value:0deg;inherits:false}
|
| 258 |
-
@keyframes spin-glow{to{--angle:360deg}}
|
| 259 |
-
.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)}
|
| 260 |
-
.ai-widget-header{display:flex;align-items:center;gap:9px;margin-bottom:14px}
|
| 261 |
-
.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}
|
| 262 |
-
.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)}
|
| 263 |
-
.ai-answer-body{font-size:13.5px;color:var(--text-sub);line-height:1.75;min-height:60px}
|
| 264 |
-
.ai-answer-body.loading{display:flex;flex-direction:column;gap:8px}
|
| 265 |
-
.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}
|
| 266 |
-
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
|
| 267 |
-
.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)}
|
| 268 |
-
.ai-copy-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
|
| 269 |
-
.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}
|
| 270 |
-
.ai-sources{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px}
|
| 271 |
-
.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)}
|
| 272 |
-
.ai-source-chip:hover{border-color:var(--accent);color:var(--accent)}
|
| 273 |
-
.ai-mobile-wrap{display:none;border-radius:var(--radius-card);margin-bottom:16px;position:relative}
|
| 274 |
-
|
| 275 |
-
/* ========== حالات خاصة ========== */
|
| 276 |
-
.empty-state{text-align:center;padding:60px 20px;color:var(--text-sub)}
|
| 277 |
-
.empty-state i{font-size:40px;margin-bottom:16px;color:var(--text-faint);display:block}
|
| 278 |
-
.empty-state p{font-size:15px;margin-top:8px}
|
| 279 |
-
|
| 280 |
-
/* ========== زر العودة للأعلى ========== */
|
| 281 |
-
.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}
|
| 282 |
-
.back-to-top.show{opacity:1;visibility:visible}
|
| 283 |
-
.back-to-top:hover{transform:translateY(-3px)}
|
| 284 |
-
|
| 285 |
-
/* ========== تنبيه عدم دعم الصوت ========== */
|
| 286 |
-
.voice-unsupported-toast{
|
| 287 |
-
position:fixed;bottom:90px;left:50%;transform:translateX(-50%);
|
| 288 |
-
background:var(--bg-card);border:1.5px solid var(--accent-2);color:var(--accent-2);
|
| 289 |
-
padding:10px 20px;border-radius:var(--radius-pill);font-size:13px;
|
| 290 |
-
box-shadow:var(--shadow-hover);z-index:2000;opacity:0;pointer-events:none;
|
| 291 |
-
transition:opacity 0.3s;
|
| 292 |
-
}
|
| 293 |
-
.voice-unsupported-toast.show{opacity:1}
|
| 294 |
-
|
| 295 |
-
@media(max-width:767px){
|
| 296 |
-
.navbar{top:10px;border-radius:16px;padding:10px 14px}
|
| 297 |
-
.tabs-bar{top:125px}
|
| 298 |
-
.page-wrapper{margin-top:176px}
|
| 299 |
-
.sidebar{display:none!important}
|
| 300 |
-
.ai-mobile-wrap{display:block}
|
| 301 |
-
.images-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
|
| 302 |
-
.videos-grid{grid-template-columns:1fr}
|
| 303 |
-
}
|
| 304 |
-
@media(min-width:768px){
|
| 305 |
-
.navbar{flex-wrap:nowrap;padding:0 22px;height:68px}
|
| 306 |
-
.page-wrapper{display:grid;grid-template-columns:1fr 300px;gap:24px;margin:176px auto 60px}
|
| 307 |
-
.sidebar{order:unset;margin-top:0}
|
| 308 |
-
.ai-mobile-wrap{display:none!important}
|
| 309 |
-
}
|
| 310 |
-
</style>
|
| 311 |
</head>
|
| 312 |
<body>
|
| 313 |
-
<div class="bg-mesh"><div class="orb orb-1"></div><div class="orb orb-2"></div><div class="orb orb-3"></div></div>
|
| 314 |
|
| 315 |
-
|
| 316 |
-
<
|
| 317 |
-
<div
|
| 318 |
-
|
| 319 |
-
<input id="main-input" placeholder="ابحث في الويب..." type="text" autocomplete="off" />
|
| 320 |
-
<button type="button" class="clear-btn" id="clear-btn" aria-label="مسح النص"><i class="fa-solid fa-times"></i></button>
|
| 321 |
-
<!-- زر البحث الصوتي الجديد -->
|
| 322 |
-
<button type="button" class="voice-btn" id="voice-btn" aria-label="بحث صوتي" title="بحث صوتي">
|
| 323 |
-
<i class="fa-solid fa-microphone"></i>
|
| 324 |
-
</button>
|
| 325 |
-
<button class="search-btn" id="search-submit-btn" type="submit" aria-label="بحث"><i class="fa-solid fa-magnifying-glass"></i></button>
|
| 326 |
-
</form>
|
| 327 |
-
<!-- مؤشر الاستماع -->
|
| 328 |
-
<div class="voice-listening-indicator" id="voice-indicator">
|
| 329 |
-
<div class="voice-waves">
|
| 330 |
-
<div class="voice-wave"></div><div class="voice-wave"></div><div class="voice-wave"></div>
|
| 331 |
-
<div class="voice-wave"></div><div class="voice-wave"></div>
|
| 332 |
-
</div>
|
| 333 |
-
جاري الاستماع…
|
| 334 |
-
</div>
|
| 335 |
</div>
|
| 336 |
-
|
| 337 |
-
|
| 338 |
-
|
| 339 |
-
|
| 340 |
-
|
| 341 |
-
|
| 342 |
-
|
| 343 |
-
|
| 344 |
-
|
| 345 |
-
|
| 346 |
-
|
| 347 |
-
|
| 348 |
-
|
| 349 |
-
|
| 350 |
-
|
| 351 |
-
|
| 352 |
-
|
| 353 |
-
|
| 354 |
-
|
| 355 |
-
|
| 356 |
-
|
| 357 |
-
|
| 358 |
-
|
| 359 |
-
<div id="suggestions-container"></div>
|
| 360 |
-
<div id="results-count-bar"></div>
|
| 361 |
-
<div id="results-container"></div>
|
| 362 |
-
<div class="load-more-spinner" id="load-more-spinner">جاري تحميل المزيد…</div>
|
| 363 |
-
<div class="end-of-results" id="end-of-results">
|
| 364 |
-
<div class="end-divider"></div>
|
| 365 |
-
<span><i class="fa-solid fa-check-circle" style="color:var(--accent);margin-left:5px"></i> تم عرض جميع النتائج</span>
|
| 366 |
-
<div class="end-divider"></div>
|
| 367 |
-
</div>
|
| 368 |
-
</main>
|
| 369 |
-
<aside class="sidebar" id="sidebar">
|
| 370 |
-
<div class="ai-widget-wrap"><div class="ai-glow-ring"></div>
|
| 371 |
-
<div class="ai-widget">
|
| 372 |
-
<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>
|
| 373 |
-
<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>
|
| 374 |
-
<div class="ai-sources" id="ai-sources-desktop"></div>
|
| 375 |
-
<button class="ai-copy-btn" id="ai-copy-desktop" style="display:none"><i class="fa-regular fa-copy"></i> نسخ</button>
|
| 376 |
-
<div class="ai-widget-footer"><i class="fa-solid fa-bolt"></i> مدعوم بواسطة AnesNT</div>
|
| 377 |
-
</div>
|
| 378 |
-
</div>
|
| 379 |
-
</aside>
|
| 380 |
-
</div>
|
| 381 |
-
|
| 382 |
-
<button class="back-to-top" id="backToTop" aria-label="العودة للأعلى"><i class="fa-solid fa-arrow-up"></i></button>
|
| 383 |
-
<div class="voice-unsupported-toast" id="voice-toast">متصفحك لا يدعم البحث الصوتي</div>
|
| 384 |
-
|
| 385 |
-
<script>
|
| 386 |
-
(() => {
|
| 387 |
-
const SEARXNG_URL = "https://cjj-on-hf-searxng.hf.space/search";
|
| 388 |
-
const GEMINI_API = "https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent";
|
| 389 |
-
const GEMINI_KEY = "";
|
| 390 |
-
|
| 391 |
-
// ===== إدارة السمة =====
|
| 392 |
-
let currentTheme = 'light';
|
| 393 |
-
const themeBtn = document.getElementById('theme-toggle');
|
| 394 |
-
const setTheme = (t) => {
|
| 395 |
-
document.documentElement.setAttribute('data-theme', t);
|
| 396 |
-
themeBtn.innerHTML = t === 'dark' ? '<i class="fa-solid fa-sun"></i>' : '<i class="fa-solid fa-moon"></i>';
|
| 397 |
-
currentTheme = t;
|
| 398 |
-
};
|
| 399 |
-
setTheme('light');
|
| 400 |
-
themeBtn.addEventListener('click', () => setTheme(currentTheme === 'dark' ? 'light' : 'dark'));
|
| 401 |
-
|
| 402 |
-
// ===== المتغيرات العامة =====
|
| 403 |
-
const params = new URLSearchParams(window.location.search);
|
| 404 |
-
let query = params.get('q') || '';
|
| 405 |
-
let currentTab = params.get('tab') || 'all';
|
| 406 |
-
|
| 407 |
-
const inputEl = document.getElementById('main-input');
|
| 408 |
-
const resultsEl = document.getElementById('results-container');
|
| 409 |
-
const loadingEl = document.getElementById('loading-text');
|
| 410 |
-
const sidebarEl = document.getElementById('sidebar');
|
| 411 |
-
const aiMobileWrap = document.getElementById('ai-mobile-wrap');
|
| 412 |
-
const suggestionsEl= document.getElementById('suggestions-container');
|
| 413 |
-
const clearBtn = document.getElementById('clear-btn');
|
| 414 |
-
const submitBtn = document.getElementById('search-submit-btn');
|
| 415 |
-
const countBar = document.getElementById('results-count-bar');
|
| 416 |
-
const loadMoreEl = document.getElementById('load-more-spinner');
|
| 417 |
-
const endEl = document.getElementById('end-of-results');
|
| 418 |
-
|
| 419 |
-
// ===== Infinite Scroll State =====
|
| 420 |
-
let allWebResults = []; // كل نتائج الويب المجلوبة
|
| 421 |
-
let renderedCount = 0; // عدد ما تم عرضه
|
| 422 |
-
const PAGE_SIZE = 10; // كم نتيجة نعرض في كل دفعة
|
| 423 |
-
let isRendering = false;
|
| 424 |
-
|
| 425 |
-
// ===== إدارة التبويبات =====
|
| 426 |
-
const setActiveTab = (tab) => {
|
| 427 |
-
document.querySelectorAll('.tab-pill').forEach(b => b.classList.toggle('active', b.dataset.tab === tab));
|
| 428 |
-
};
|
| 429 |
-
setActiveTab(currentTab);
|
| 430 |
-
|
| 431 |
-
// ===== زر المسح =====
|
| 432 |
-
const updateClearBtn = () => {
|
| 433 |
-
clearBtn.classList.toggle('visible', inputEl.value.length > 0);
|
| 434 |
-
};
|
| 435 |
-
inputEl.addEventListener('input', updateClearBtn);
|
| 436 |
-
clearBtn.addEventListener('click', () => { inputEl.value = ''; updateClearBtn(); inputEl.focus(); });
|
| 437 |
-
inputEl.addEventListener('keydown', (e) => {
|
| 438 |
-
if (e.key === 'Escape' && inputEl.value.length > 0) { inputEl.value = ''; updateClearBtn(); inputEl.blur(); }
|
| 439 |
-
});
|
| 440 |
-
|
| 441 |
-
// ===== دوال مساعدة =====
|
| 442 |
-
const esc = (s) => s ? s.replace(/[&<>'"]/g, m => ({'&':'&','<':'<','>':'>',"'":''','"':'"'}[m]||m)) : '';
|
| 443 |
-
const getDomain = (url) => { try { return new URL(url).hostname.replace('www.',''); } catch { return url||''; } };
|
| 444 |
-
const proxyImg = (url) => url && !url.startsWith('data:') ? `https://wsrv.nl/?url=${encodeURIComponent(url)}&output=webp` : url;
|
| 445 |
-
const faviconURL = (d) => `https://www.google.com/s2/favicons?domain=${d}&sz=32`;
|
| 446 |
-
const extractBestImage = (r) => {
|
| 447 |
-
for (const c of [r.img_src, r.thumbnail_src, r.thumbnail, r.image]) {
|
| 448 |
-
if (c && typeof c === 'string' && c.startsWith('http')) return c;
|
| 449 |
-
}
|
| 450 |
-
return null;
|
| 451 |
-
};
|
| 452 |
-
const truncateWords = (text, maxWords) => {
|
| 453 |
-
if (!text) return '';
|
| 454 |
-
const words = text.split(/\s+/).filter(w => w.length > 0);
|
| 455 |
-
if (words.length <= maxWords) return text;
|
| 456 |
-
return words.slice(0, maxWords).join(' ') + '...';
|
| 457 |
-
};
|
| 458 |
-
|
| 459 |
-
// ===== Intersection Observer للظهور =====
|
| 460 |
-
const observer = new IntersectionObserver(entries => entries.forEach(en => {
|
| 461 |
-
if (en.isIntersecting) en.target.classList.add('visible');
|
| 462 |
-
}), { threshold: 0.08 });
|
| 463 |
-
const observe = () => document.querySelectorAll('.search-result:not(.visible),.image-card:not(.visible),.video-card:not(.visible)').forEach(el => observer.observe(el));
|
| 464 |
-
|
| 465 |
-
// ===== Sentinel للـ Infinite Scroll =====
|
| 466 |
-
let sentinel = null;
|
| 467 |
-
const scrollObserver = new IntersectionObserver(entries => {
|
| 468 |
-
if (entries[0].isIntersecting && !isRendering) renderNextBatch();
|
| 469 |
-
}, { rootMargin: '300px' });
|
| 470 |
-
|
| 471 |
-
const attachSentinel = () => {
|
| 472 |
-
if (sentinel) sentinel.remove();
|
| 473 |
-
sentinel = document.createElement('div');
|
| 474 |
-
sentinel.id = 'scroll-sentinel';
|
| 475 |
-
resultsEl.appendChild(sentinel);
|
| 476 |
-
scrollObserver.observe(sentinel);
|
| 477 |
-
};
|
| 478 |
-
|
| 479 |
-
const detachSentinel = () => {
|
| 480 |
-
if (sentinel) { scrollObserver.unobserve(sentinel); sentinel.remove(); sentinel = null; }
|
| 481 |
-
};
|
| 482 |
-
|
| 483 |
-
// ===== عرض دفعة من نتائج الويب =====
|
| 484 |
-
const renderNextBatch = () => {
|
| 485 |
-
if (renderedCount >= allWebResults.length) {
|
| 486 |
-
detachSentinel();
|
| 487 |
-
loadMoreEl.classList.remove('show');
|
| 488 |
-
endEl.classList.add('show');
|
| 489 |
-
return;
|
| 490 |
-
}
|
| 491 |
-
isRendering = true;
|
| 492 |
-
loadMoreEl.classList.add('show');
|
| 493 |
-
|
| 494 |
-
const batch = allWebResults.slice(renderedCount, renderedCount + PAGE_SIZE);
|
| 495 |
-
batch.forEach(r => {
|
| 496 |
-
const d = getDomain(r.url);
|
| 497 |
-
const art = document.createElement('article'); art.className = 'search-result';
|
| 498 |
-
art.innerHTML = `
|
| 499 |
-
<div class="favicon-wrap">
|
| 500 |
-
<img src="${faviconURL(d)}" onerror="this.style.display='none';this.nextElementSibling.style.display='flex'" />
|
| 501 |
-
<i class="fa-solid fa-globe fallback-icon" style="display:none"></i>
|
| 502 |
-
</div>
|
| 503 |
-
<div class="result-content">
|
| 504 |
-
<div class="result-domain"><i class="fa-solid fa-link"></i> ${esc(d)}</div>
|
| 505 |
-
<a class="result-title" href="${esc(r.url)}" target="_blank" title="${esc(r.title||'')}">${esc(truncateWords(r.title||'بدون عنوان', 14))}</a>
|
| 506 |
-
<p class="result-snippet">${esc(truncateWords(r.content||'', 35))}</p>
|
| 507 |
-
</div>
|
| 508 |
-
<button class="copy-link-btn" data-url="${esc(r.url)}" title="نسخ الرابط"><i class="fa-regular fa-copy"></i></button>
|
| 509 |
-
`;
|
| 510 |
-
resultsEl.appendChild(art);
|
| 511 |
-
});
|
| 512 |
-
|
| 513 |
-
renderedCount += batch.length;
|
| 514 |
-
observe();
|
| 515 |
-
|
| 516 |
-
setTimeout(() => {
|
| 517 |
-
loadMoreEl.classList.remove('show');
|
| 518 |
-
isRendering = false;
|
| 519 |
-
if (renderedCount < allWebResults.length) {
|
| 520 |
-
attachSentinel();
|
| 521 |
-
} else {
|
| 522 |
-
endEl.classList.add('show');
|
| 523 |
-
}
|
| 524 |
-
}, 400);
|
| 525 |
-
};
|
| 526 |
-
|
| 527 |
-
// ===== الذكاء الاصطناعي =====
|
| 528 |
-
let currentAItext = '';
|
| 529 |
-
const aiSetLoading = () => {
|
| 530 |
-
['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>'} });
|
| 531 |
-
['ai-copy-desktop','ai-copy-mobile'].forEach(id => { const b=document.getElementById(id); if(b)b.style.display='none' });
|
| 532 |
-
['ai-sources-desktop','ai-sources-mobile'].forEach(id => { const el=document.getElementById(id); if(el)el.innerHTML='' });
|
| 533 |
-
};
|
| 534 |
-
const aiUpdate = (text, sources) => {
|
| 535 |
-
currentAItext = text;
|
| 536 |
-
['ai-answer-body','ai-answer-body-mobile'].forEach(id => { const el=document.getElementById(id); if(el){el.classList.remove('loading');el.textContent=text} });
|
| 537 |
-
['ai-copy-desktop','ai-copy-mobile'].forEach(id => { const b=document.getElementById(id); if(b)b.style.display='inline-flex' });
|
| 538 |
-
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('');
|
| 539 |
-
['ai-sources-desktop','ai-sources-mobile'].forEach(id => { const el=document.getElementById(id); if(el)el.innerHTML=chips });
|
| 540 |
-
};
|
| 541 |
-
const runAI = async (q, results) => {
|
| 542 |
-
aiSetLoading();
|
| 543 |
-
if (GEMINI_KEY.trim()) {
|
| 544 |
-
try {
|
| 545 |
-
const snippets = results.slice(0,5).map((r,i)=>`[${i+1}] ${r.title||''}: ${r.content||''}`).join('\n');
|
| 546 |
-
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}})});
|
| 547 |
-
const data = await resp.json();
|
| 548 |
-
aiUpdate(data.candidates?.[0]?.content?.parts?.[0]?.text||'لا توجد إجابة.', results.slice(0,4));
|
| 549 |
-
return;
|
| 550 |
-
} catch(e){}
|
| 551 |
-
}
|
| 552 |
-
const best = results[0];
|
| 553 |
-
const summary = best ? truncateWords(best.content, 35) : '';
|
| 554 |
-
aiUpdate(summary ? `🔍 ${summary}` : 'لا توجد معلومات كافية.', results.slice(0,3));
|
| 555 |
-
};
|
| 556 |
-
const showAI = (visible) => {
|
| 557 |
-
if(sidebarEl) sidebarEl.style.display = visible ? '' : 'none';
|
| 558 |
-
if(aiMobileWrap) aiMobileWrap.style.display = visible ? '' : 'none';
|
| 559 |
-
};
|
| 560 |
-
|
| 561 |
-
// ===== معالجة أخطاء الصور =====
|
| 562 |
-
window.handleImageError = function(img) { const c=img.closest('.image-card'); if(c)c.remove(); };
|
| 563 |
-
window.handleVideoThumbError = function(img) { const c=img.closest('.video-card'); if(c)c.remove(); };
|
| 564 |
-
|
| 565 |
-
// ===== زر العودة للأعلى =====
|
| 566 |
-
const backBtn = document.getElementById('backToTop');
|
| 567 |
-
window.addEventListener('scroll', () => backBtn.classList.toggle('show', scrollY > 400));
|
| 568 |
-
backBtn.addEventListener('click', () => scrollTo({top:0,behavior:'smooth'}));
|
| 569 |
-
|
| 570 |
-
// ===== جلب البيانات =====
|
| 571 |
-
const fetchJSON = (url) => fetch(url, {signal: AbortSignal.timeout(12000)}).then(r=>r.json());
|
| 572 |
-
const fetchCategory = (cat, pageno=1) => {
|
| 573 |
-
const url = `${SEARXNG_URL}?q=${encodeURIComponent(query)}&format=json&categories=${cat}&language=ar&safesearch=1&pageno=${pageno}`;
|
| 574 |
-
return fetchJSON(url).catch(()=>({results:[],suggestions:[]}));
|
| 575 |
-
};
|
| 576 |
-
|
| 577 |
-
// ===== عرض الاقتراحات =====
|
| 578 |
-
const renderSuggestions = (suggestions) => {
|
| 579 |
-
suggestionsEl.innerHTML = '';
|
| 580 |
-
if (!suggestions?.length) return;
|
| 581 |
-
const row = document.createElement('div'); row.className='suggestions-row';
|
| 582 |
-
suggestions.forEach(s => {
|
| 583 |
-
const chip = document.createElement('button'); chip.className='suggestion-chip'; chip.textContent=s;
|
| 584 |
-
chip.addEventListener('click', () => { inputEl.value=s; updateClearBtn(); document.getElementById('search-form').dispatchEvent(new Event('submit')); });
|
| 585 |
-
row.appendChild(chip);
|
| 586 |
-
});
|
| 587 |
-
suggestionsEl.appendChild(row);
|
| 588 |
-
};
|
| 589 |
-
|
| 590 |
-
// ===== عرض عداد النتائج =====
|
| 591 |
-
const renderCount = (count) => {
|
| 592 |
-
countBar.innerHTML = count > 0
|
| 593 |
-
? `<div class="results-count"><i class="fa-solid fa-circle-info"></i> تم العثور على <span>${count}</span> نتيجة</div>`
|
| 594 |
-
: '';
|
| 595 |
-
};
|
| 596 |
-
|
| 597 |
-
// ===== عناوين الأقسام =====
|
| 598 |
-
const createSectionTitle = (text, tabLink) => {
|
| 599 |
-
const h3=document.createElement('h3'); h3.className='section-title';
|
| 600 |
-
h3.innerHTML=`${text} <a href="?q=${encodeURIComponent(query)}&tab=${tabLink}">عرض الكل <i class="fa-solid fa-arrow-left"></i></a>`;
|
| 601 |
-
return h3;
|
| 602 |
-
};
|
| 603 |
-
|
| 604 |
-
// ===== عرض الصور =====
|
| 605 |
-
const renderImageGrid = (images, container, withTitle=false) => {
|
| 606 |
-
const valid = images.filter(r => extractBestImage(r));
|
| 607 |
-
if (!valid.length) return;
|
| 608 |
-
if (withTitle) container.appendChild(createSectionTitle('صور','images'));
|
| 609 |
-
const grid = document.createElement('div'); grid.className='images-grid';
|
| 610 |
-
valid.forEach(r => {
|
| 611 |
-
const proxied = proxyImg(extractBestImage(r));
|
| 612 |
-
const card = document.createElement('div'); card.className='image-card';
|
| 613 |
-
card.innerHTML=`
|
| 614 |
-
<a class="image-card-link" href="${esc(r.url||'')}" target="_blank">
|
| 615 |
-
<img src="${esc(proxied)}" loading="lazy" onerror="handleImageError(this)" alt="${esc(r.title||'')}" />
|
| 616 |
-
</a>
|
| 617 |
-
<div class="image-info">
|
| 618 |
-
<div class="img-title" title="${esc(r.title||'صورة')}">${esc(truncateWords(r.title||'صورة',8))}</div>
|
| 619 |
-
<a class="image-url" href="${esc(r.url||'')}" target="_blank">${esc(getDomain(r.url||''))}</a>
|
| 620 |
-
</div>`;
|
| 621 |
-
grid.appendChild(card);
|
| 622 |
-
});
|
| 623 |
-
container.appendChild(grid);
|
| 624 |
-
};
|
| 625 |
-
|
| 626 |
-
// ===== عرض الفيديوهات =====
|
| 627 |
-
const renderVideoGrid = (videos, container, withTitle=false) => {
|
| 628 |
-
const valid = videos.filter(r => r.thumbnail);
|
| 629 |
-
if (!valid.length) return;
|
| 630 |
-
if (withTitle) container.appendChild(createSectionTitle('فيديوهات','videos'));
|
| 631 |
-
const grid = document.createElement('div'); grid.className='videos-grid';
|
| 632 |
-
valid.forEach(r => {
|
| 633 |
-
const thumb = proxyImg(r.thumbnail);
|
| 634 |
-
const card = document.createElement('div'); card.className='video-card';
|
| 635 |
-
card.innerHTML=`
|
| 636 |
-
<a href="${esc(r.url||'')}" target="_blank" class="video-thumb-wrap">
|
| 637 |
-
<img src="${esc(thumb)}" loading="lazy" onerror="handleVideoThumbError(this)" alt="${esc(r.title||'')}" />
|
| 638 |
-
<div class="play-overlay"><i class="fa-solid fa-play"></i></div>
|
| 639 |
-
</a>
|
| 640 |
-
<div class="video-details">
|
| 641 |
-
<a class="video-title" href="${esc(r.url||'')}" target="_blank">${esc(truncateWords(r.title||'فيديو',12))}</a>
|
| 642 |
-
<a class="video-url" href="${esc(r.url||'')}" target="_blank">${esc(getDomain(r.url||''))}</a>
|
| 643 |
-
</div>`;
|
| 644 |
-
grid.appendChild(card);
|
| 645 |
-
});
|
| 646 |
-
container.appendChild(grid);
|
| 647 |
-
};
|
| 648 |
-
|
| 649 |
-
// ===== البحث الرئيسي =====
|
| 650 |
-
const performSearch = async (q, tab) => {
|
| 651 |
-
// إعادة تعيين الحالة
|
| 652 |
-
resultsEl.innerHTML = '';
|
| 653 |
-
suggestionsEl.innerHTML = '';
|
| 654 |
-
countBar.innerHTML = '';
|
| 655 |
-
endEl.classList.remove('show');
|
| 656 |
-
loadMoreEl.classList.remove('show');
|
| 657 |
-
allWebResults = [];
|
| 658 |
-
renderedCount = 0;
|
| 659 |
-
isRendering = false;
|
| 660 |
-
detachSentinel();
|
| 661 |
-
|
| 662 |
-
loadingEl.style.display = 'flex';
|
| 663 |
-
loadingEl.classList.add('spinning');
|
| 664 |
-
loadingEl.textContent = 'جاري جلب النتائج…';
|
| 665 |
-
|
| 666 |
-
// حالة تحميل زر البحث
|
| 667 |
-
submitBtn.classList.add('loading-btn');
|
| 668 |
-
submitBtn.innerHTML = '<i class="fa-solid fa-circle-notch"></i>';
|
| 669 |
-
|
| 670 |
-
showAI(tab === 'all');
|
| 671 |
-
|
| 672 |
-
const resetSubmitBtn = () => {
|
| 673 |
-
submitBtn.classList.remove('loading-btn');
|
| 674 |
-
submitBtn.innerHTML = '<i class="fa-solid fa-magnifying-glass"></i>';
|
| 675 |
-
};
|
| 676 |
|
| 677 |
try {
|
| 678 |
-
|
| 679 |
-
|
| 680 |
-
|
| 681 |
-
|
| 682 |
-
|
| 683 |
-
|
| 684 |
-
|
| 685 |
-
|
| 686 |
-
|
| 687 |
-
|
| 688 |
-
|
| 689 |
-
|
| 690 |
-
|
| 691 |
-
|
| 692 |
-
|
| 693 |
-
|
| 694 |
-
|
| 695 |
-
|
| 696 |
-
|
| 697 |
-
|
| 698 |
-
fetchCategory('general', 3),
|
| 699 |
-
]);
|
| 700 |
-
|
| 701 |
-
// دمج كل النتائج وإزالة المكرر
|
| 702 |
-
const seen = new Set();
|
| 703 |
-
const mergeUnique = (arr) => (arr||[]).filter(r => {
|
| 704 |
-
if (!r.url || seen.has(r.url)) return false;
|
| 705 |
-
seen.add(r.url); return true;
|
| 706 |
-
});
|
| 707 |
-
|
| 708 |
-
allWebResults = [
|
| 709 |
-
...mergeUnique(page1.results),
|
| 710 |
-
...mergeUnique(page2.results),
|
| 711 |
-
...mergeUnique(page3.results),
|
| 712 |
-
];
|
| 713 |
-
|
| 714 |
-
loadingEl.style.display = 'none';
|
| 715 |
-
resetSubmitBtn();
|
| 716 |
-
|
| 717 |
-
if (!allWebResults.length) {
|
| 718 |
-
resultsEl.innerHTML += `<div class="empty-state"><i class="fa-solid fa-magnifying-glass"></i><p>لا توجد نتائج لـ "<strong>${esc(q)}</strong>"</p></div>`;
|
| 719 |
-
return;
|
| 720 |
-
}
|
| 721 |
-
|
| 722 |
-
// عرض عداد النتائج
|
| 723 |
-
renderCount(allWebResults.length);
|
| 724 |
-
|
| 725 |
-
// عرض الدفعة الأولى
|
| 726 |
-
renderNextBatch();
|
| 727 |
-
|
| 728 |
-
// تشغيل الذكاء الاصطناعي بناءً على أفضل النتائج
|
| 729 |
-
runAI(q, allWebResults.slice(0,6));
|
| 730 |
-
|
| 731 |
-
} else if (tab === 'images') {
|
| 732 |
-
const [p1, p2] = await Promise.all([fetchCategory('images',1), fetchCategory('images',2)]);
|
| 733 |
-
const seen = new Set();
|
| 734 |
-
const all = [...(p1.results||[]), ...(p2.results||[])].filter(r => {
|
| 735 |
-
if (!r.url || seen.has(r.url)) return false; seen.add(r.url); return true;
|
| 736 |
-
});
|
| 737 |
-
loadingEl.style.display='none'; resetSubmitBtn();
|
| 738 |
-
renderCount(all.length);
|
| 739 |
-
renderImageGrid(all, resultsEl, false);
|
| 740 |
-
observe();
|
| 741 |
-
|
| 742 |
-
} else if (tab === 'videos') {
|
| 743 |
-
const [p1, p2] = await Promise.all([fetchCategory('videos',1), fetchCategory('videos',2)]);
|
| 744 |
-
const seen = new Set();
|
| 745 |
-
const all = [...(p1.results||[]), ...(p2.results||[])].filter(r => {
|
| 746 |
-
if (!r.url || seen.has(r.url)) return false; seen.add(r.url); return true;
|
| 747 |
-
});
|
| 748 |
-
loadingEl.style.display='none'; resetSubmitBtn();
|
| 749 |
-
renderCount(all.length);
|
| 750 |
-
renderVideoGrid(all, resultsEl, false);
|
| 751 |
-
observe();
|
| 752 |
-
|
| 753 |
-
} else if (tab === 'news') {
|
| 754 |
-
const data = await fetchCategory('news');
|
| 755 |
-
const results = data.results || [];
|
| 756 |
-
loadingEl.style.display='none'; resetSubmitBtn();
|
| 757 |
-
if (data.suggestions?.length) renderSuggestions(data.suggestions);
|
| 758 |
-
renderCount(results.length);
|
| 759 |
-
if (results.length) {
|
| 760 |
-
// عرض الأخبار كبطاقات ويب عادية
|
| 761 |
-
allWebResults = results;
|
| 762 |
-
renderedCount = 0;
|
| 763 |
-
renderNextBatch();
|
| 764 |
} else {
|
| 765 |
-
|
| 766 |
-
}
|
| 767 |
-
}
|
| 768 |
-
|
| 769 |
-
} catch(e) {
|
| 770 |
-
loadingEl.style.display='none';
|
| 771 |
-
resetSubmitBtn();
|
| 772 |
-
resultsEl.innerHTML = `<div class="empty-state"><i class="fa-solid fa-triangle-exclamation"></i><p>حدث خطأ أثناء البحث. حاول مجدداً.</p></div>`;
|
| 773 |
-
}
|
| 774 |
-
};
|
| 775 |
-
|
| 776 |
-
// ===== البحث الصوتي =====
|
| 777 |
-
const voiceBtn = document.getElementById('voice-btn');
|
| 778 |
-
const voiceIndicator = document.getElementById('voice-indicator');
|
| 779 |
-
const voiceToast = document.getElementById('voice-toast');
|
| 780 |
-
|
| 781 |
-
const showToast = (msg) => {
|
| 782 |
-
voiceToast.textContent = msg;
|
| 783 |
-
voiceToast.classList.add('show');
|
| 784 |
-
setTimeout(() => voiceToast.classList.remove('show'), 3000);
|
| 785 |
-
};
|
| 786 |
-
|
| 787 |
-
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
|
| 788 |
-
|
| 789 |
-
if (!SpeechRecognition) {
|
| 790 |
-
voiceBtn.title = 'البحث الصوتي غير مدعوم في هذا المتصفح';
|
| 791 |
-
voiceBtn.style.opacity = '0.4';
|
| 792 |
-
voiceBtn.addEventListener('click', () => showToast('متصفحك لا يدعم البحث الصوتي. جرب Chrome أو Edge.'));
|
| 793 |
-
} else {
|
| 794 |
-
const recognition = new SpeechRecognition();
|
| 795 |
-
recognition.lang = 'ar-SA';
|
| 796 |
-
recognition.interimResults = true;
|
| 797 |
-
recognition.maxAlternatives = 1;
|
| 798 |
-
recognition.continuous = false;
|
| 799 |
-
|
| 800 |
-
let isListening = false;
|
| 801 |
-
|
| 802 |
-
const startListening = () => {
|
| 803 |
-
if (isListening) { recognition.stop(); return; }
|
| 804 |
-
try {
|
| 805 |
-
recognition.start();
|
| 806 |
-
} catch(e) {
|
| 807 |
-
showToast('لا يمكن بدء الاستماع. تحقق من إذن الميكروفون.');
|
| 808 |
-
}
|
| 809 |
-
};
|
| 810 |
-
|
| 811 |
-
recognition.onstart = () => {
|
| 812 |
-
isListening = true;
|
| 813 |
-
voiceBtn.classList.add('listening');
|
| 814 |
-
voiceBtn.innerHTML = '<i class="fa-solid fa-microphone-slash"></i>';
|
| 815 |
-
voiceIndicator.classList.add('show');
|
| 816 |
-
};
|
| 817 |
-
|
| 818 |
-
recognition.onresult = (e) => {
|
| 819 |
-
const transcript = Array.from(e.results).map(r => r[0].transcript).join('');
|
| 820 |
-
inputEl.value = transcript;
|
| 821 |
-
updateClearBtn();
|
| 822 |
-
// إذا كانت النتيجة نهائية، نبحث تلقائياً
|
| 823 |
-
if (e.results[e.results.length - 1].isFinal) {
|
| 824 |
-
recognition.stop();
|
| 825 |
-
if (transcript.trim()) {
|
| 826 |
-
setTimeout(() => {
|
| 827 |
-
document.getElementById('search-form').dispatchEvent(new Event('submit'));
|
| 828 |
-
}, 300);
|
| 829 |
}
|
| 830 |
-
}
|
| 831 |
-
};
|
| 832 |
-
|
| 833 |
-
recognition.onerror = (e) => {
|
| 834 |
-
const msgs = {
|
| 835 |
-
'no-speech': 'لم يُسمع أي كلام. حاول مجدداً.',
|
| 836 |
-
'audio-capture': 'لا يمكن الوصول للميكروفون.',
|
| 837 |
-
'not-allowed': 'تم رفض إذن الميكروفون.',
|
| 838 |
-
'network': 'خطأ في الشبكة أثناء التعرف على الصوت.',
|
| 839 |
-
};
|
| 840 |
-
showToast(msgs[e.error] || 'خطأ في البحث الصوتي.');
|
| 841 |
-
};
|
| 842 |
|
| 843 |
-
|
| 844 |
-
|
| 845 |
-
|
| 846 |
-
|
| 847 |
-
|
| 848 |
-
|
| 849 |
-
|
| 850 |
-
|
| 851 |
-
}
|
| 852 |
-
|
| 853 |
-
// ===== التهيئة =====
|
| 854 |
-
if (query) {
|
| 855 |
-
inputEl.value = query;
|
| 856 |
-
updateClearBtn();
|
| 857 |
-
performSearch(query, currentTab);
|
| 858 |
-
} else {
|
| 859 |
-
loadingEl.style.display = 'block';
|
| 860 |
-
loadingEl.classList.remove('spinning');
|
| 861 |
-
loadingEl.textContent = 'أدخل كلمة البحث للبدء.';
|
| 862 |
-
submitBtn.classList.remove('loading-btn');
|
| 863 |
-
submitBtn.innerHTML = '<i class="fa-solid fa-magnifying-glass"></i>';
|
| 864 |
-
}
|
| 865 |
-
|
| 866 |
-
// ===== مستمعو الأحداث =====
|
| 867 |
-
document.getElementById('search-form').addEventListener('submit', e => {
|
| 868 |
-
e.preventDefault();
|
| 869 |
-
const q = inputEl.value.trim();
|
| 870 |
-
if (!q) return;
|
| 871 |
-
window.history.pushState({}, '', `?q=${encodeURIComponent(q)}&tab=${currentTab}`);
|
| 872 |
-
query = q;
|
| 873 |
-
performSearch(q, currentTab);
|
| 874 |
-
});
|
| 875 |
-
|
| 876 |
-
document.querySelectorAll('.tab-pill').forEach(btn => {
|
| 877 |
-
btn.addEventListener('click', () => {
|
| 878 |
-
const tab = btn.dataset.tab;
|
| 879 |
-
if (!tab || tab === currentTab) return;
|
| 880 |
-
currentTab = tab;
|
| 881 |
-
setActiveTab(tab);
|
| 882 |
-
window.history.pushState({}, '', `?q=${encodeURIComponent(query)}&tab=${tab}`);
|
| 883 |
-
if (query) performSearch(query, tab);
|
| 884 |
-
});
|
| 885 |
-
});
|
| 886 |
-
|
| 887 |
-
document.getElementById('ai-copy-desktop')?.addEventListener('click', () => navigator.clipboard.writeText(currentAItext));
|
| 888 |
-
document.getElementById('ai-copy-mobile')?.addEventListener('click', () => navigator.clipboard.writeText(currentAItext));
|
| 889 |
-
|
| 890 |
-
document.addEventListener('click', (e) => {
|
| 891 |
-
const btn = e.target.closest('.copy-link-btn');
|
| 892 |
-
if (btn) {
|
| 893 |
-
navigator.clipboard.writeText(btn.dataset.url).then(() => {
|
| 894 |
-
btn.innerHTML = '<i class="fa-solid fa-check"></i>';
|
| 895 |
-
setTimeout(() => { btn.innerHTML = '<i class="fa-regular fa-copy"></i>'; }, 1500);
|
| 896 |
-
}).catch(()=>{});
|
| 897 |
}
|
| 898 |
-
|
|
|
|
| 899 |
|
| 900 |
-
})();
|
| 901 |
-
</script>
|
| 902 |
</body>
|
| 903 |
</html>
|
|
|
|
| 1 |
<!DOCTYPE html>
|
| 2 |
+
<html lang="ar" dir="rtl">
|
| 3 |
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>نتائج البحث - SurfGO</title>
|
| 7 |
+
<style>
|
| 8 |
+
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f8f9fa; margin: 0; padding: 20px; }
|
| 9 |
+
.container { max-width: 800px; margin: auto; }
|
| 10 |
+
.search-info { margin-bottom: 20px; color: #555; font-size: 0.9em; }
|
| 11 |
+
.result-item { background: white; padding: 15px; border-radius: 8px; margin-bottom: 15px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
|
| 12 |
+
.result-item a { color: #1a0dab; text-decoration: none; font-size: 1.2em; }
|
| 13 |
+
.result-item a:hover { text-decoration: underline; }
|
| 14 |
+
.result-item .url { color: #006621; font-size: 0.85em; display: block; margin-top: 2px; word-break: break-all; }
|
| 15 |
+
.result-item .content { color: #4d5156; margin-top: 8px; line-height: 1.4; }
|
| 16 |
+
.loading { text-align: center; padding: 50px; font-weight: bold; color: #007bff; }
|
| 17 |
+
.error { color: red; text-align: center; padding: 20px; }
|
| 18 |
+
.no-results { text-align: center; padding: 20px; color: #777; }
|
| 19 |
+
</style>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 20 |
</head>
|
| 21 |
<body>
|
|
|
|
| 22 |
|
| 23 |
+
<div class="container">
|
| 24 |
+
<h2 id="query-title">جاري البحث عن...</h2>
|
| 25 |
+
<div id="results-container">
|
| 26 |
+
<div class="loading">انتظر قليلاً، جاري جلب النتائج من سيرفر OpenShift...</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 27 |
</div>
|
| 28 |
+
</div>
|
| 29 |
+
|
| 30 |
+
<script>
|
| 31 |
+
// 1. استخراج كلمة البحث من الرابط (URL Parameters)
|
| 32 |
+
const urlParams = new URLSearchParams(window.location.search);
|
| 33 |
+
const query = urlParams.get('q');
|
| 34 |
+
const category = urlParams.get('categories') || 'general';
|
| 35 |
+
|
| 36 |
+
if (query) {
|
| 37 |
+
document.getElementById('query-title').innerText = `نتائج البحث عن: ${query}`;
|
| 38 |
+
fetchResults(query, category);
|
| 39 |
+
} else {
|
| 40 |
+
document.getElementById('results-container').innerHTML = '<div class="error">لم يتم إدخال كلمة بحث!</div>';
|
| 41 |
+
}
|
| 42 |
+
|
| 43 |
+
async function fetchResults(query, cat) {
|
| 44 |
+
const resultsContainer = document.getElementById('results-container');
|
| 45 |
+
|
| 46 |
+
// رابط سيرفرك الأصلي
|
| 47 |
+
const targetUrl = `https://searxng-anesnt-dev.apps.rm1.0a51.p1.openshiftapps.com/search?q=${encodeURIComponent(query)}&format=json&categories=${cat}&language=ar&safesearch=1`;
|
| 48 |
+
|
| 49 |
+
// استخدام بروكسي AllOrigins لتجاوز CORS
|
| 50 |
+
const proxyUrl = `https://api.allorigins.win/get?url=${encodeURIComponent(targetUrl)}`;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 51 |
|
| 52 |
try {
|
| 53 |
+
const response = await fetch(proxyUrl);
|
| 54 |
+
if (!response.ok) throw new Error("فشل في الاتصال بالبروكسي");
|
| 55 |
+
|
| 56 |
+
const data = await response.json();
|
| 57 |
+
// تحويل البيانات من نص إلى JSON
|
| 58 |
+
const searchData = JSON.parse(data.contents);
|
| 59 |
+
|
| 60 |
+
resultsContainer.innerHTML = ''; // تنظيف شاشة التحميل
|
| 61 |
+
|
| 62 |
+
if (searchData.results && searchData.results.length > 0) {
|
| 63 |
+
searchData.results.forEach(item => {
|
| 64 |
+
const resultHtml = `
|
| 65 |
+
<div class="result-item">
|
| 66 |
+
<a href="${item.url}" target="_blank">${item.title}</a>
|
| 67 |
+
<span class="url">${item.url}</span>
|
| 68 |
+
<div class="content">${item.content || 'لا يوجد وصف متاح.'}</div>
|
| 69 |
+
</div>
|
| 70 |
+
`;
|
| 71 |
+
resultsContainer.innerHTML += resultHtml;
|
| 72 |
+
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 73 |
} else {
|
| 74 |
+
resultsContainer.innerHTML = '<div class="no-results">لم نجد أي نتائج لهذه الكلمة.</div>';
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 75 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 76 |
|
| 77 |
+
} catch (error) {
|
| 78 |
+
console.error("Error:", error);
|
| 79 |
+
resultsContainer.innerHTML = `
|
| 80 |
+
<div class="error">
|
| 81 |
+
حدث خطأ أثناء جلب البيانات.<br>
|
| 82 |
+
تأكد أن سيرفر OpenShift يعمل أو جرب لاحقاً.<br>
|
| 83 |
+
<small>${error.message}</small>
|
| 84 |
+
</div>`;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 85 |
}
|
| 86 |
+
}
|
| 87 |
+
</script>
|
| 88 |
|
|
|
|
|
|
|
| 89 |
</body>
|
| 90 |
</html>
|