Update results.html
Browse files- results.html +669 -672
results.html
CHANGED
|
@@ -1,691 +1,688 @@
|
|
| 1 |
<!DOCTYPE html>
|
| 2 |
<html data-theme="light" dir="rtl" lang="ar">
|
| 3 |
<head>
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
|
| 20 |
-
|
| 21 |
-
|
| 22 |
-
|
| 23 |
-
|
| 24 |
-
|
| 25 |
-
|
| 26 |
-
|
| 27 |
-
|
| 28 |
-
|
| 29 |
-
|
| 30 |
-
|
| 31 |
-
|
| 32 |
-
|
| 33 |
-
|
| 34 |
-
|
| 35 |
-
|
| 36 |
-
|
| 37 |
-
|
| 38 |
-
|
| 39 |
-
|
| 40 |
-
|
| 41 |
-
|
| 42 |
-
|
| 43 |
-
|
| 44 |
-
|
| 45 |
-
|
| 46 |
-
|
| 47 |
-
|
| 48 |
-
|
| 49 |
-
|
| 50 |
-
|
| 51 |
-
|
| 52 |
-
|
| 53 |
-
|
| 54 |
-
|
| 55 |
-
|
| 56 |
-
|
| 57 |
-
|
| 58 |
-
|
| 59 |
-
|
| 60 |
-
|
| 61 |
-
|
| 62 |
-
|
| 63 |
-
|
| 64 |
-
|
| 65 |
-
|
| 66 |
-
|
| 67 |
-
|
| 68 |
-
|
| 69 |
-
|
| 70 |
-
|
| 71 |
-
|
| 72 |
-
|
| 73 |
-
|
| 74 |
-
|
| 75 |
-
|
| 76 |
-
|
| 77 |
-
|
| 78 |
-
|
| 79 |
-
|
| 80 |
-
|
| 81 |
-
|
| 82 |
-
|
| 83 |
-
|
| 84 |
-
|
| 85 |
-
|
| 86 |
-
|
| 87 |
-
|
| 88 |
-
|
| 89 |
-
|
| 90 |
-
|
| 91 |
-
|
| 92 |
-
|
| 93 |
-
|
| 94 |
-
|
| 95 |
-
|
| 96 |
-
|
| 97 |
-
|
| 98 |
-
|
| 99 |
-
|
| 100 |
-
|
| 101 |
-
|
| 102 |
-
|
| 103 |
-
|
| 104 |
-
|
| 105 |
-
|
| 106 |
-
|
| 107 |
-
|
| 108 |
-
|
| 109 |
-
|
| 110 |
-
|
| 111 |
-
|
| 112 |
-
|
| 113 |
-
|
| 114 |
-
|
| 115 |
-
|
| 116 |
-
|
| 117 |
-
|
| 118 |
-
|
| 119 |
-
|
| 120 |
-
|
| 121 |
-
|
| 122 |
-
|
| 123 |
-
|
| 124 |
-
|
| 125 |
-
|
| 126 |
-
|
| 127 |
-
|
| 128 |
-
|
| 129 |
-
|
| 130 |
-
|
| 131 |
-
|
| 132 |
-
|
| 133 |
-
|
| 134 |
-
|
| 135 |
-
|
| 136 |
-
|
| 137 |
-
|
| 138 |
-
|
| 139 |
-
|
| 140 |
-
|
| 141 |
-
|
| 142 |
-
|
| 143 |
-
|
| 144 |
-
|
| 145 |
-
|
| 146 |
-
|
| 147 |
-
|
| 148 |
-
|
| 149 |
-
|
| 150 |
-
|
| 151 |
-
|
| 152 |
-
|
| 153 |
-
|
| 154 |
-
|
| 155 |
-
|
| 156 |
-
|
| 157 |
-
|
| 158 |
-
|
| 159 |
-
|
| 160 |
-
|
| 161 |
-
|
| 162 |
-
|
| 163 |
-
|
| 164 |
-
|
| 165 |
-
|
| 166 |
-
|
| 167 |
-
|
| 168 |
-
|
| 169 |
-
|
| 170 |
-
|
| 171 |
-
|
| 172 |
-
|
| 173 |
-
|
| 174 |
-
|
| 175 |
-
|
| 176 |
-
|
| 177 |
-
|
| 178 |
-
|
| 179 |
-
|
| 180 |
-
|
| 181 |
-
|
| 182 |
-
|
| 183 |
-
|
| 184 |
-
|
| 185 |
-
|
| 186 |
-
|
| 187 |
-
|
| 188 |
-
|
| 189 |
-
|
| 190 |
-
|
| 191 |
-
|
| 192 |
-
|
| 193 |
-
|
| 194 |
-
|
| 195 |
-
|
| 196 |
-
|
| 197 |
-
|
| 198 |
-
|
| 199 |
-
|
| 200 |
-
|
| 201 |
-
|
| 202 |
-
|
| 203 |
-
|
| 204 |
-
|
| 205 |
-
|
| 206 |
-
|
| 207 |
-
|
| 208 |
-
|
| 209 |
-
|
| 210 |
-
|
| 211 |
-
|
| 212 |
-
|
| 213 |
-
|
| 214 |
-
|
| 215 |
-
|
| 216 |
-
|
| 217 |
-
|
| 218 |
-
|
| 219 |
-
|
| 220 |
-
|
| 221 |
-
|
| 222 |
-
|
| 223 |
-
|
| 224 |
-
|
| 225 |
-
|
| 226 |
-
|
| 227 |
-
|
| 228 |
-
|
| 229 |
-
|
| 230 |
-
|
| 231 |
-
|
| 232 |
-
|
| 233 |
-
|
| 234 |
-
|
| 235 |
-
|
| 236 |
-
|
| 237 |
-
|
| 238 |
-
|
| 239 |
-
|
| 240 |
-
|
| 241 |
-
|
| 242 |
-
|
| 243 |
-
|
| 244 |
-
|
| 245 |
-
|
| 246 |
-
|
| 247 |
-
|
| 248 |
-
|
| 249 |
-
|
| 250 |
-
|
| 251 |
-
.ai-widget-title { font-family: 'Syne', sans-serif; font-size: 13.5px; font-weight: 600; color: var(--text-main); }
|
| 252 |
-
.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); }
|
| 253 |
-
|
| 254 |
-
.ai-answer-body { font-size: 13.5px; color: var(--text-sub); line-height: 1.7; min-height: 60px; }
|
| 255 |
-
.ai-answer-body.loading { display: flex; flex-direction: column; gap: 8px; }
|
| 256 |
-
.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; }
|
| 257 |
-
.ai-skeleton:nth-child(2) { width: 85%; animation-delay: 0.1s; }
|
| 258 |
-
.ai-skeleton:nth-child(3) { width: 70%; animation-delay: 0.2s; }
|
| 259 |
-
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
|
| 260 |
-
|
| 261 |
-
.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; }
|
| 262 |
-
.ai-widget-footer i { color: var(--accent); font-size: 10px; }
|
| 263 |
-
|
| 264 |
-
/* AI sources list */
|
| 265 |
-
.ai-sources { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
|
| 266 |
-
.ai-source-chip {
|
| 267 |
-
font-size: 11px; padding: 3px 10px; border-radius: 20px;
|
| 268 |
-
background: var(--bg-input); border: 1px solid var(--border);
|
| 269 |
-
color: var(--text-faint); text-decoration: none;
|
| 270 |
-
display: flex; align-items: center; gap: 5px;
|
| 271 |
-
transition: var(--transition);
|
| 272 |
-
}
|
| 273 |
-
.ai-source-chip:hover { border-color: var(--accent); color: var(--accent); }
|
| 274 |
-
.ai-source-chip i { font-size: 9px; }
|
| 275 |
-
|
| 276 |
-
.sidebar-toggle { display: none; }
|
| 277 |
-
.sidebar-content { display: block; }
|
| 278 |
-
.ai-mobile-wrap { display: none; position: relative; border-radius: var(--radius-card); margin-bottom: 16px; }
|
| 279 |
-
|
| 280 |
-
.empty-state { text-align: center; padding: 60px 20px; color: var(--text-sub); }
|
| 281 |
-
.empty-state i { font-size: 40px; margin-bottom: 16px; color: var(--text-faint); display: block; }
|
| 282 |
-
.empty-state p { font-size: 15px; }
|
| 283 |
-
#results-container { width: 100%; min-height: 200px; position: relative; }
|
| 284 |
-
|
| 285 |
-
@media (max-width: 767px) {
|
| 286 |
-
.navbar { top: 10px; border-radius: 16px; padding: 10px 14px; gap: 10px; }
|
| 287 |
-
.brand { font-size: 18px; }
|
| 288 |
-
.brand-icon { width: 32px; height: 32px; font-size: 13px; }
|
| 289 |
-
.tabs-bar { top: 125px; }
|
| 290 |
-
.page-wrapper { margin-top: 176px; gap: 16px; }
|
| 291 |
-
.tavily-result { padding: 14px 15px; }
|
| 292 |
-
.sidebar { display: none !important; }
|
| 293 |
-
.ai-mobile-wrap { display: block; }
|
| 294 |
-
}
|
| 295 |
-
@media (min-width: 768px) {
|
| 296 |
-
.navbar { flex-wrap: nowrap; padding: 0 22px; height: 68px; gap: 0; }
|
| 297 |
-
.search-container { margin: 0 20px; }
|
| 298 |
-
.tabs-bar { top: 98px; overflow-x: visible; padding-bottom: 0; }
|
| 299 |
-
.page-wrapper { display: grid; grid-template-columns: 1fr 288px; margin: 176px auto 60px; gap: 24px; }
|
| 300 |
-
.sidebar { order: unset; margin-top: 0; }
|
| 301 |
-
.ai-mobile-wrap { display: none !important; }
|
| 302 |
-
}
|
| 303 |
-
</style>
|
| 304 |
</head>
|
| 305 |
<body>
|
| 306 |
-
|
| 307 |
-
|
| 308 |
-
|
| 309 |
-
|
| 310 |
-
|
| 311 |
-
|
| 312 |
-
</
|
| 313 |
-
<
|
| 314 |
-
|
| 315 |
-
|
| 316 |
-
<button class="search-btn" type="submit" aria-label="بحث">
|
| 317 |
-
<i class="fa-solid fa-magnifying-glass"></i>
|
| 318 |
-
</button>
|
| 319 |
-
</form>
|
| 320 |
-
</div>
|
| 321 |
-
<button id="theme-toggle" aria-label="تغيير السمة"></button>
|
| 322 |
-
</nav>
|
| 323 |
-
|
| 324 |
-
<div class="tabs-bar" role="tablist">
|
| 325 |
-
<button class="tab-pill active" data-tab="all" role="tab"><i class="fa-solid fa-globe"></i> الويب</button>
|
| 326 |
-
<button class="tab-pill" data-tab="news" role="tab"><i class="fa-solid fa-newspaper"></i> أخبار</button>
|
| 327 |
-
<button class="tab-pill" data-tab="images" role="tab"><i class="fa-solid fa-image"></i> صور</button>
|
| 328 |
-
<button class="tab-pill" data-tab="videos" role="tab"><i class="fa-solid fa-play"></i> فيديو</button>
|
| 329 |
</div>
|
| 330 |
-
|
| 331 |
-
|
| 332 |
-
|
| 333 |
-
|
| 334 |
-
|
| 335 |
-
|
| 336 |
-
|
| 337 |
-
|
| 338 |
-
|
| 339 |
-
|
| 340 |
-
|
| 341 |
-
|
| 342 |
-
|
| 343 |
-
|
| 344 |
-
|
| 345 |
-
|
| 346 |
-
|
| 347 |
-
|
| 348 |
-
|
| 349 |
-
|
| 350 |
-
|
| 351 |
-
|
| 352 |
-
|
| 353 |
-
|
| 354 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 355 |
</div>
|
| 356 |
-
|
| 357 |
-
|
| 358 |
-
|
| 359 |
-
|
| 360 |
-
|
| 361 |
-
|
| 362 |
-
|
| 363 |
-
|
| 364 |
-
|
| 365 |
-
|
| 366 |
-
|
| 367 |
-
|
| 368 |
-
|
| 369 |
-
|
| 370 |
-
|
| 371 |
-
|
| 372 |
-
|
| 373 |
-
|
| 374 |
-
|
| 375 |
-
|
| 376 |
-
|
| 377 |
-
|
| 378 |
-
|
| 379 |
-
|
| 380 |
-
|
| 381 |
-
</div>
|
| 382 |
</div>
|
| 383 |
-
|
| 384 |
-
|
| 385 |
-
|
| 386 |
-
<script>
|
| 387 |
-
(function () {
|
| 388 |
-
// ════════════════════════════════════
|
| 389 |
-
// Config
|
| 390 |
-
// ════════════════════════════════════
|
| 391 |
-
const TAVILY_API_KEYS = [
|
| 392 |
-
"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",
|
| 393 |
-
"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",
|
| 394 |
-
"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"
|
| 395 |
-
];
|
| 396 |
-
const GOOGLE_ENGINES = {
|
| 397 |
-
news: '35b0f5b6012e94f78',
|
| 398 |
-
images: 'd19b1849dac034835',
|
| 399 |
-
videos: 'b11f5dceb04784b9f'
|
| 400 |
-
};
|
| 401 |
-
|
| 402 |
-
// ════════════════════════════════════
|
| 403 |
-
// Theme
|
| 404 |
-
// ════════════════════════════════════
|
| 405 |
-
const themeBtn = document.getElementById('theme-toggle');
|
| 406 |
-
function setTheme(t) {
|
| 407 |
-
document.documentElement.setAttribute('data-theme', t);
|
| 408 |
-
localStorage.setItem('surfgo-theme', t);
|
| 409 |
-
themeBtn.innerHTML = t === 'dark'
|
| 410 |
-
? '<i class="fa-solid fa-sun"></i>'
|
| 411 |
-
: '<i class="fa-solid fa-moon"></i>';
|
| 412 |
-
}
|
| 413 |
-
setTheme(localStorage.getItem('surfgo-theme') || 'light');
|
| 414 |
-
themeBtn.addEventListener('click', () => {
|
| 415 |
-
setTheme(document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark');
|
| 416 |
});
|
| 417 |
-
|
| 418 |
-
|
| 419 |
-
|
| 420 |
-
|
| 421 |
-
|
| 422 |
-
|
| 423 |
-
|
| 424 |
-
|
| 425 |
-
|
| 426 |
-
const
|
| 427 |
-
|
| 428 |
-
|
| 429 |
-
|
| 430 |
-
|
| 431 |
-
|
| 432 |
-
|
| 433 |
-
|
| 434 |
-
|
| 435 |
-
|
| 436 |
-
|
| 437 |
-
|
| 438 |
-
|
| 439 |
-
|
| 440 |
-
|
| 441 |
-
|
| 442 |
-
|
| 443 |
-
|
| 444 |
-
|
| 445 |
-
|
| 446 |
-
|
| 447 |
-
|
| 448 |
-
|
| 449 |
-
|
| 450 |
-
|
| 451 |
-
|
| 452 |
-
|
| 453 |
-
|
| 454 |
-
|
| 455 |
-
|
| 456 |
-
|
| 457 |
-
|
| 458 |
-
|
| 459 |
-
|
| 460 |
-
|
| 461 |
-
|
| 462 |
-
|
| 463 |
-
|
| 464 |
-
|
| 465 |
-
|
| 466 |
-
|
| 467 |
-
|
| 468 |
-
|
| 469 |
-
|
| 470 |
-
|
| 471 |
-
|
| 472 |
-
|
| 473 |
-
|
| 474 |
-
|
| 475 |
-
|
| 476 |
-
async function fetchAIAnswer(q, idx = 0) {
|
| 477 |
-
if (!q) return;
|
| 478 |
-
setAIState('loading');
|
| 479 |
-
try {
|
| 480 |
-
const res = await fetch('https://api.tavily.com/search', {
|
| 481 |
-
method: 'POST',
|
| 482 |
-
headers: { 'Content-Type': 'application/json' },
|
| 483 |
-
body: JSON.stringify({
|
| 484 |
-
api_key: TAVILY_API_KEYS[idx],
|
| 485 |
-
query: q,
|
| 486 |
-
include_answer: 'advanced',
|
| 487 |
-
search_depth: 'advanced',
|
| 488 |
-
max_results: 5
|
| 489 |
-
})
|
| 490 |
-
});
|
| 491 |
-
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
| 492 |
-
const data = await res.json();
|
| 493 |
-
if (data.error) throw new Error(data.error);
|
| 494 |
-
|
| 495 |
-
const answer = data.answer || '';
|
| 496 |
-
const sources = data.results || [];
|
| 497 |
-
setAIState('done', answer, sources);
|
| 498 |
-
|
| 499 |
-
} catch (e) {
|
| 500 |
-
console.warn(`Tavily AI key #${idx + 1} failed:`, e);
|
| 501 |
-
if (idx + 1 < TAVILY_API_KEYS.length) {
|
| 502 |
-
return fetchAIAnswer(q, idx + 1);
|
| 503 |
-
}
|
| 504 |
-
setAIState('done', 'تعذّر تحميل الإجابة في الوقت الحالي.');
|
| 505 |
}
|
| 506 |
-
|
| 507 |
-
|
| 508 |
-
|
| 509 |
-
|
| 510 |
-
|
| 511 |
-
|
| 512 |
-
|
| 513 |
-
|
| 514 |
-
if (!
|
| 515 |
-
|
| 516 |
-
|
| 517 |
-
|
| 518 |
-
|
| 519 |
-
|
| 520 |
-
|
| 521 |
-
|
| 522 |
-
|
| 523 |
-
|
| 524 |
-
|
| 525 |
-
|
| 526 |
-
|
| 527 |
-
|
| 528 |
-
|
| 529 |
-
|
| 530 |
-
|
| 531 |
-
|
| 532 |
-
|
| 533 |
-
|
| 534 |
-
|
| 535 |
-
|
| 536 |
-
|
| 537 |
-
|
| 538 |
-
|
| 539 |
-
|
| 540 |
-
|
| 541 |
-
|
| 542 |
-
|
| 543 |
-
|
| 544 |
-
|
| 545 |
-
|
| 546 |
-
|
| 547 |
-
|
| 548 |
-
|
| 549 |
-
|
| 550 |
-
|
| 551 |
-
|
| 552 |
-
|
| 553 |
-
|
| 554 |
-
|
| 555 |
-
|
| 556 |
-
|
| 557 |
-
|
| 558 |
-
|
|
|
|
| 559 |
} else {
|
| 560 |
-
|
| 561 |
}
|
| 562 |
-
|
| 563 |
-
|
| 564 |
-
|
| 565 |
-
|
| 566 |
-
|
| 567 |
-
|
| 568 |
-
|
| 569 |
-
|
| 570 |
-
|
| 571 |
-
|
| 572 |
-
|
| 573 |
-
|
| 574 |
-
|
| 575 |
-
|
| 576 |
-
|
| 577 |
-
|
| 578 |
-
|
| 579 |
-
|
| 580 |
-
|
| 581 |
-
|
| 582 |
-
|
| 583 |
-
|
| 584 |
-
|
| 585 |
-
|
| 586 |
-
|
| 587 |
-
|
| 588 |
-
|
| 589 |
-
|
| 590 |
-
|
| 591 |
-
|
| 592 |
-
|
| 593 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 594 |
|
| 595 |
-
|
| 596 |
-
|
| 597 |
-
// ════════════════════════════════════
|
| 598 |
-
async function fetchTavilyResults(q, idx = 0) {
|
| 599 |
-
if (idx >= TAVILY_API_KEYS.length) {
|
| 600 |
-
showLoading(false);
|
| 601 |
-
resultsEl.innerHTML = `<div class="empty-state"><i class="fa-solid fa-triangle-exclamation"></i><p>تعذّر الاتصال بالخادم. حاول مجدداً.</p></div>`;
|
| 602 |
-
return;
|
| 603 |
-
}
|
| 604 |
-
try {
|
| 605 |
-
const res = await fetch('https://api.tavily.com/search', {
|
| 606 |
-
method: 'POST',
|
| 607 |
-
headers: { 'Content-Type': 'application/json' },
|
| 608 |
-
body: JSON.stringify({
|
| 609 |
-
api_key: TAVILY_API_KEYS[idx],
|
| 610 |
-
query: q,
|
| 611 |
-
search_depth: 'advanced',
|
| 612 |
-
max_results: 20,
|
| 613 |
-
include_favicon: true
|
| 614 |
-
})
|
| 615 |
-
});
|
| 616 |
-
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
| 617 |
-
const data = await res.json();
|
| 618 |
-
if (data.error) throw new Error(data.error);
|
| 619 |
-
renderTavilyResults(data.results || []);
|
| 620 |
-
showLoading(false);
|
| 621 |
-
} catch (e) {
|
| 622 |
-
console.warn(`Tavily API key #${idx + 1} failed:`, e);
|
| 623 |
-
if (idx + 1 < TAVILY_API_KEYS.length) {
|
| 624 |
-
return fetchTavilyResults(q, idx + 1);
|
| 625 |
-
}
|
| 626 |
-
showLoading(false);
|
| 627 |
-
resultsEl.innerHTML = `<div class="empty-state"><i class="fa-solid fa-triangle-exclamation"></i><p>تعذّر الاتصال بالخادم. حاول مجدداً.</p></div>`;
|
| 628 |
-
}
|
| 629 |
-
}
|
| 630 |
|
| 631 |
-
|
| 632 |
-
|
| 633 |
-
|
| 634 |
-
|
| 635 |
-
|
| 636 |
-
|
| 637 |
-
|
| 638 |
-
const favicon = r.favicon
|
| 639 |
-
? `<img class="tavily-favicon" src="${r.favicon}" alt="" loading="lazy" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">`
|
| 640 |
-
: '';
|
| 641 |
-
const placeholder = r.favicon
|
| 642 |
-
? `<span class="favicon-placeholder" style="display:none;"><i class="fa-solid fa-globe"></i></span>`
|
| 643 |
-
: `<span class="favicon-placeholder"><i class="fa-solid fa-globe"></i></span>`;
|
| 644 |
-
return `
|
| 645 |
-
<article class="tavily-result">
|
| 646 |
-
${favicon}${placeholder}
|
| 647 |
-
<div class="tavily-content">
|
| 648 |
-
<div class="tavily-domain"><i class="fa-solid fa-link"></i> ${escapeHTML(domain)}</div>
|
| 649 |
-
<a class="tavily-title" href="${r.url}" target="_blank" rel="noopener noreferrer">${escapeHTML(r.title || 'بدون عنوان')}</a>
|
| 650 |
-
<p class="tavily-snippet">${truncateWords(escapeHTML(r.content || r.snippet || ''), 21)}</p>
|
| 651 |
-
</div>
|
| 652 |
-
</article>`;
|
| 653 |
-
}).join('');
|
| 654 |
-
resultsEl.innerHTML = html;
|
| 655 |
}
|
| 656 |
-
|
| 657 |
-
// ════════════════════════════════════
|
| 658 |
-
// Event Listeners
|
| 659 |
-
// ════════════════════════════════════
|
| 660 |
-
document.getElementById('search-form').addEventListener('submit', (e) => {
|
| 661 |
-
e.preventDefault();
|
| 662 |
-
const q = inputEl.value.trim();
|
| 663 |
-
if (!q) return;
|
| 664 |
-
const url = new URL(window.location);
|
| 665 |
-
url.searchParams.set('q', q);
|
| 666 |
-
url.searchParams.set('tab', currentTab);
|
| 667 |
-
window.history.pushState({}, '', url);
|
| 668 |
-
query = q;
|
| 669 |
-
document.title = `${query} – SurfGO`;
|
| 670 |
-
fetchAIAnswer(q);
|
| 671 |
-
loadTabResults(currentTab);
|
| 672 |
-
});
|
| 673 |
-
|
| 674 |
-
document.querySelectorAll('.tab-pill').forEach(btn => {
|
| 675 |
-
btn.addEventListener('click', () => {
|
| 676 |
-
const tab = btn.dataset.tab;
|
| 677 |
-
if (tab === currentTab) return;
|
| 678 |
-
currentTab = tab;
|
| 679 |
-
setActiveTab(tab);
|
| 680 |
-
const url = new URL(window.location);
|
| 681 |
-
url.searchParams.set('tab', tab);
|
| 682 |
-
if (query) url.searchParams.set('q', query);
|
| 683 |
-
window.history.pushState({}, '', url);
|
| 684 |
-
if (query) loadTabResults(tab);
|
| 685 |
-
});
|
| 686 |
-
});
|
| 687 |
|
| 688 |
})();
|
| 689 |
-
|
| 690 |
</body>
|
| 691 |
</html>
|
|
|
|
| 1 |
<!DOCTYPE html>
|
| 2 |
<html data-theme="light" dir="rtl" lang="ar">
|
| 3 |
<head>
|
| 4 |
+
<meta charset="utf-8" />
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
|
| 6 |
+
<title>SurfGO | محرك بحث متكامل</title>
|
| 7 |
+
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
| 8 |
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
| 9 |
+
<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" />
|
| 10 |
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" />
|
| 11 |
+
<style>
|
| 12 |
+
:root {
|
| 13 |
+
--bg-base: #f0f2f8;
|
| 14 |
+
--bg-nav: rgba(255,255,255,0.82);
|
| 15 |
+
--bg-card: #ffffff;
|
| 16 |
+
--bg-input: #e8ebf5;
|
| 17 |
+
--bg-input-focus: #ffffff;
|
| 18 |
+
--border: rgba(99,102,241,0.12);
|
| 19 |
+
--border-hover: rgba(99,102,241,0.4);
|
| 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 10px;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 |
+
.search-btn{
|
| 95 |
+
background:linear-gradient(135deg,var(--accent),var(--accent-2));border:none;color:#fff;cursor:pointer;
|
| 96 |
+
width:40px;height:36px;border-radius:var(--radius-pill);display:flex;align-items:center;
|
| 97 |
+
justify-content:center;font-size:14px;flex-shrink:0;transition:var(--transition);
|
| 98 |
+
box-shadow:0 2px 8px var(--accent-glow);
|
| 99 |
+
}
|
| 100 |
+
.search-btn:hover{opacity:0.9;transform:scale(1.06);box-shadow:0 4px 14px var(--accent-glow)}
|
| 101 |
+
.search-btn:active{transform:scale(0.95)}
|
| 102 |
+
|
| 103 |
+
.nav-actions{display:flex;align-items:center;gap:8px}
|
| 104 |
+
#theme-toggle{
|
| 105 |
+
background:var(--bg-input);border:1.5px solid var(--border);color:var(--text-sub);cursor:pointer;
|
| 106 |
+
width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
|
| 107 |
+
font-size:15px;transition:var(--transition);
|
| 108 |
+
}
|
| 109 |
+
#theme-toggle:hover{border-color:var(--accent);color:var(--accent);transform:rotate(180deg)}
|
| 110 |
+
|
| 111 |
+
/* ========== شريط التبويبات ========== */
|
| 112 |
+
.tabs-bar{
|
| 113 |
+
position:fixed;top:98px;left:50%;transform:translateX(-50%);width:95%;max-width:1280px;display:flex;gap:6px;
|
| 114 |
+
z-index:999;overflow-x:auto;padding:6px 10px;backdrop-filter:blur(16px);background:rgba(255,255,255,0.2);
|
| 115 |
+
border:1px solid var(--border);border-radius:40px;scrollbar-width:none;
|
| 116 |
+
}
|
| 117 |
+
[data-theme="dark"] .tabs-bar{background:rgba(18,20,40,0.35)}
|
| 118 |
+
.tab-pill{
|
| 119 |
+
padding:7px 16px;border-radius:var(--radius-pill);background:var(--bg-card);border:1.5px solid var(--border);
|
| 120 |
+
color:var(--text-sub);font-family:'Tajawal',sans-serif;font-size:13px;font-weight:500;cursor:pointer;
|
| 121 |
+
transition:var(--transition);display:flex;align-items:center;gap:6px;white-space:nowrap;
|
| 122 |
+
box-shadow:var(--shadow-card);
|
| 123 |
+
}
|
| 124 |
+
.tab-pill:hover{border-color:var(--border-hover);color:var(--accent);transform:translateY(-1px)}
|
| 125 |
+
.tab-pill.active{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 4px 16px var(--accent-glow)}
|
| 126 |
+
|
| 127 |
+
/* ========== التخطيط العام ========== */
|
| 128 |
+
.page-wrapper{position:relative;z-index:1;max-width:1280px;margin:170px auto 60px;padding:0 16px;display:flex;flex-direction:column;gap:24px}
|
| 129 |
+
.results-area{min-width:0;width:100%}
|
| 130 |
+
|
| 131 |
+
/* ========== مؤشر التحميل ========== */
|
| 132 |
+
#loading-text{color:var(--text-sub);font-size:13.5px;margin-bottom:18px;display:flex;align-items:center;gap:8px}
|
| 133 |
+
#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}
|
| 134 |
+
@keyframes spin{to{transform:rotate(360deg)}}
|
| 135 |
+
|
| 136 |
+
/* ========== الاقتراحات ========== */
|
| 137 |
+
.suggestions-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
|
| 138 |
+
.suggestion-chip{
|
| 139 |
+
padding:6px 14px;border-radius:var(--radius-pill);background:var(--bg-card);border:1px solid var(--border);
|
| 140 |
+
color:var(--text-sub);font-size:12px;cursor:pointer;transition:var(--transition);white-space:nowrap;
|
| 141 |
+
}
|
| 142 |
+
.suggestion-chip:hover{border-color:var(--accent);color:var(--accent);background:var(--bg-input-focus);transform:translateY(-1px)}
|
| 143 |
+
|
| 144 |
+
/* ========== تأثيرات الظهور ========== */
|
| 145 |
+
.search-result,.image-card,.video-card{opacity:0;transform:translateY(20px);transition:opacity 0.5s ease,transform 0.5s ease}
|
| 146 |
+
.search-result.visible,.image-card.visible,.video-card.visible{opacity:1;transform:translateY(0)}
|
| 147 |
+
|
| 148 |
+
/* ========== بطاقات نتائج الويب ========== */
|
| 149 |
+
.search-result{
|
| 150 |
+
background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--radius-card);
|
| 151 |
+
padding:18px 20px;margin-bottom:12px;transition:var(--transition);box-shadow:var(--shadow-card);
|
| 152 |
+
display:flex;gap:14px;align-items:flex-start;
|
| 153 |
+
}
|
| 154 |
+
.search-result:hover{border-color:var(--border-hover);box-shadow:var(--shadow-hover);transform:translateY(-2px)}
|
| 155 |
+
.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}
|
| 156 |
+
.favicon-wrap img{width:16px;height:16px;object-fit:contain}
|
| 157 |
+
.fallback-icon{color:var(--text-faint);font-size:11px}
|
| 158 |
+
.result-content{flex:1;min-width:0}
|
| 159 |
+
.result-domain{font-size:11.5px;color:var(--text-faint);margin-bottom:4px;display:flex;align-items:center;gap:4px}
|
| 160 |
+
.result-title{
|
| 161 |
+
font-size:16px;font-weight:700;color:var(--accent);text-decoration:none;display:-webkit-box;
|
| 162 |
+
-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:6px;line-height:1.4;transition:color 0.2s;
|
| 163 |
+
}
|
| 164 |
+
.result-title:hover{color:var(--accent-2);text-decoration:underline}
|
| 165 |
+
.result-snippet{
|
| 166 |
+
font-size:13.5px;color:var(--text-sub);line-height:1.65;display:-webkit-box;
|
| 167 |
+
-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
|
| 168 |
+
}
|
| 169 |
+
.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}
|
| 170 |
+
.copy-link-btn:hover{color:var(--accent)}
|
| 171 |
+
|
| 172 |
+
/* ========== شبكة الصور ========== */
|
| 173 |
+
.images-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;width:100%}
|
| 174 |
+
.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}
|
| 175 |
+
.image-card:hover{border-color:var(--border-hover);box-shadow:var(--shadow-hover);transform:translateY(-5px)}
|
| 176 |
+
.image-card-link{display:block;width:100%;height:150px;overflow:hidden;background:var(--bg-input);position:relative}
|
| 177 |
+
.image-card-link img{width:100%;height:100%;object-fit:cover;transition:transform 0.4s ease;display:block}
|
| 178 |
+
.image-card:hover .image-card-link img{transform:scale(1.06)}
|
| 179 |
+
.image-info{padding:8px 10px;font-size:11px;color:var(--text-sub);border-top:1px solid var(--border)}
|
| 180 |
+
.image-info .img-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:4px}
|
| 181 |
+
.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}
|
| 182 |
+
|
| 183 |
+
/* ========== شبكة الفيديوهات ========== */
|
| 184 |
+
.videos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;width:100%}
|
| 185 |
+
.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)}
|
| 186 |
+
.video-card:hover{border-color:var(--border-hover);box-shadow:var(--shadow-hover);transform:translateY(-3px)}
|
| 187 |
+
.video-thumb-wrap{position:relative;width:100%;height:150px;background:var(--bg-input);display:block;overflow:hidden}
|
| 188 |
+
.video-thumb-wrap img{width:100%;height:100%;object-fit:cover;opacity:0.85;transition:0.3s;display:block}
|
| 189 |
+
.video-card:hover .video-thumb-wrap img{opacity:1}
|
| 190 |
+
.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)}
|
| 191 |
+
.video-details{padding:10px}
|
| 192 |
+
.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}
|
| 193 |
+
.video-title:hover{color:var(--accent)}
|
| 194 |
+
.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}
|
| 195 |
+
|
| 196 |
+
/* ========== عناوين الأقسام ========== */
|
| 197 |
+
.section-title{font-size:18px;font-weight:700;margin:20px 0 12px;color:var(--text-main);display:flex;align-items:center;gap:10px}
|
| 198 |
+
.section-title a{color:var(--accent);text-decoration:none;font-size:14px;font-weight:500;margin-right:auto;transition:color 0.2s}
|
| 199 |
+
.section-title a:hover{color:var(--accent-2)}
|
| 200 |
+
|
| 201 |
+
/* ========== مساعد الذكاء الاصطناعي ========== */
|
| 202 |
+
.sidebar{width:100%;order:2;margin-top:12px}
|
| 203 |
+
.ai-widget-wrap{position:relative;border-radius:var(--radius-card)}
|
| 204 |
+
.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)}
|
| 205 |
+
@property --angle{syntax:'<angle>';initial-value:0deg;inherits:false}
|
| 206 |
+
@keyframes spin-glow{to{--angle:360deg}}
|
| 207 |
+
.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)}
|
| 208 |
+
.ai-widget-header{display:flex;align-items:center;gap:9px;margin-bottom:14px}
|
| 209 |
+
.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}
|
| 210 |
+
.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)}
|
| 211 |
+
.ai-answer-body{font-size:13.5px;color:var(--text-sub);line-height:1.75;min-height:60px}
|
| 212 |
+
.ai-answer-body.loading{display:flex;flex-direction:column;gap:8px}
|
| 213 |
+
.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}
|
| 214 |
+
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
|
| 215 |
+
.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)}
|
| 216 |
+
.ai-copy-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
|
| 217 |
+
.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}
|
| 218 |
+
.ai-sources{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px}
|
| 219 |
+
.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)}
|
| 220 |
+
.ai-source-chip:hover{border-color:var(--accent);color:var(--accent)}
|
| 221 |
+
.ai-mobile-wrap{display:none;border-radius:var(--radius-card);margin-bottom:16px;position:relative}
|
| 222 |
+
|
| 223 |
+
/* ========== حالات خاصة ========== */
|
| 224 |
+
.empty-state{text-align:center;padding:60px 20px;color:var(--text-sub)}
|
| 225 |
+
.empty-state i{font-size:40px;margin-bottom:16px;color:var(--text-faint);display:block}
|
| 226 |
+
.empty-state p{font-size:15px;margin-top:8px}
|
| 227 |
+
.error-state{text-align:center;padding:40px 20px;color:var(--accent-2)}
|
| 228 |
+
.error-state i{font-size:36px;margin-bottom:14px;display:block}
|
| 229 |
+
|
| 230 |
+
/* ========== زر العودة للأعلى ========== */
|
| 231 |
+
.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}
|
| 232 |
+
.back-to-top.show{opacity:1;visibility:visible}
|
| 233 |
+
.back-to-top:hover{transform:translateY(-3px)}
|
| 234 |
+
|
| 235 |
+
@media(max-width:767px){
|
| 236 |
+
.navbar{top:10px;border-radius:16px;padding:10px 14px}
|
| 237 |
+
.tabs-bar{top:125px}
|
| 238 |
+
.page-wrapper{margin-top:176px}
|
| 239 |
+
.sidebar{display:none!important}
|
| 240 |
+
.ai-mobile-wrap{display:block}
|
| 241 |
+
.images-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
|
| 242 |
+
.videos-grid{grid-template-columns:1fr}
|
| 243 |
+
}
|
| 244 |
+
@media(min-width:768px){
|
| 245 |
+
.navbar{flex-wrap:nowrap;padding:0 22px;height:68px}
|
| 246 |
+
.page-wrapper{display:grid;grid-template-columns:1fr 300px;gap:24px;margin:176px auto 60px}
|
| 247 |
+
.sidebar{order:unset;margin-top:0}
|
| 248 |
+
.ai-mobile-wrap{display:none!important}
|
| 249 |
+
}
|
| 250 |
+
</style>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 251 |
</head>
|
| 252 |
<body>
|
| 253 |
+
<div class="bg-mesh"><div class="orb orb-1"></div><div class="orb orb-2"></div><div class="orb orb-3"></div></div>
|
| 254 |
+
|
| 255 |
+
<nav class="navbar">
|
| 256 |
+
<a class="brand" href="index.html"><div class="brand-icon"><i class="fa-solid fa-bolt"></i></div><span>SurfGO</span></a>
|
| 257 |
+
<div class="search-container">
|
| 258 |
+
<form class="search-bar" id="search-form">
|
| 259 |
+
<input id="main-input" placeholder="ابحث في الويب..." type="text" autocomplete="off" />
|
| 260 |
+
<button type="button" class="clear-btn" id="clear-btn" aria-label="مسح النص"><i class="fa-solid fa-times"></i></button>
|
| 261 |
+
<button class="search-btn" type="submit" aria-label="بحث"><i class="fa-solid fa-magnifying-glass"></i></button>
|
| 262 |
+
</form>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 263 |
</div>
|
| 264 |
+
<div class="nav-actions"><button id="theme-toggle" aria-label="تغيير السمة"></button></div>
|
| 265 |
+
</nav>
|
| 266 |
+
|
| 267 |
+
<div class="tabs-bar">
|
| 268 |
+
<button class="tab-pill active" data-tab="all"><i class="fa-solid fa-globe"></i> الكل</button>
|
| 269 |
+
<button class="tab-pill" data-tab="news"><i class="fa-solid fa-newspaper"></i> أخبار</button>
|
| 270 |
+
<button class="tab-pill" data-tab="images"><i class="fa-solid fa-image"></i> صور</button>
|
| 271 |
+
<button class="tab-pill" data-tab="videos"><i class="fa-solid fa-play"></i> فيديو</button>
|
| 272 |
+
</div>
|
| 273 |
+
|
| 274 |
+
<div class="page-wrapper">
|
| 275 |
+
<main class="results-area">
|
| 276 |
+
<div id="loading-text" class="spinning">جاري جلب النتائج…</div>
|
| 277 |
+
<div class="ai-mobile-wrap" id="ai-mobile-wrap">
|
| 278 |
+
<div class="ai-glow-ring"></div>
|
| 279 |
+
<div class="ai-widget">
|
| 280 |
+
<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>
|
| 281 |
+
<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>
|
| 282 |
+
<div class="ai-sources" id="ai-sources-mobile"></div>
|
| 283 |
+
<button class="ai-copy-btn" id="ai-copy-mobile" style="display:none"><i class="fa-regular fa-copy"></i> نسخ</button>
|
| 284 |
+
<div class="ai-widget-footer"><i class="fa-solid fa-bolt"></i> مدعوم بواسطة AnesNT</div>
|
| 285 |
+
</div>
|
| 286 |
+
</div>
|
| 287 |
+
<div id="suggestions-container"></div>
|
| 288 |
+
<div id="results-container"></div>
|
| 289 |
+
</main>
|
| 290 |
+
<aside class="sidebar" id="sidebar">
|
| 291 |
+
<div class="ai-widget-wrap"><div class="ai-glow-ring"></div>
|
| 292 |
+
<div class="ai-widget">
|
| 293 |
+
<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>
|
| 294 |
+
<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>
|
| 295 |
+
<div class="ai-sources" id="ai-sources-desktop"></div>
|
| 296 |
+
<button class="ai-copy-btn" id="ai-copy-desktop" style="display:none"><i class="fa-regular fa-copy"></i> نسخ</button>
|
| 297 |
+
<div class="ai-widget-footer"><i class="fa-solid fa-bolt"></i> مدعوم بواسطة AnesNT</div>
|
| 298 |
+
</div>
|
| 299 |
+
</div>
|
| 300 |
+
</aside>
|
| 301 |
+
</div>
|
| 302 |
+
|
| 303 |
+
<button class="back-to-top" id="backToTop" aria-label="العودة للأعلى"><i class="fa-solid fa-arrow-up"></i></button>
|
| 304 |
+
|
| 305 |
+
<script>
|
| 306 |
+
(() => {
|
| 307 |
+
const SEARXNG_URL = "https://cjj-on-hf-searxng.hf.space/search";
|
| 308 |
+
const GEMINI_API = "https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent";
|
| 309 |
+
const GEMINI_KEY = "";
|
| 310 |
+
|
| 311 |
+
// ========== إدارة السمة ==========
|
| 312 |
+
let currentTheme = 'light';
|
| 313 |
+
const themeBtn = document.getElementById('theme-toggle');
|
| 314 |
+
const setTheme = (t) => {
|
| 315 |
+
document.documentElement.setAttribute('data-theme', t);
|
| 316 |
+
themeBtn.innerHTML = t === 'dark' ? '<i class="fa-solid fa-sun"></i>' : '<i class="fa-solid fa-moon"></i>';
|
| 317 |
+
currentTheme = t;
|
| 318 |
+
};
|
| 319 |
+
setTheme('light');
|
| 320 |
+
themeBtn.addEventListener('click', () => setTheme(currentTheme === 'dark' ? 'light' : 'dark'));
|
| 321 |
+
|
| 322 |
+
// ========== المتغيرات العامة ==========
|
| 323 |
+
const params = new URLSearchParams(window.location.search);
|
| 324 |
+
let query = params.get('q') || '';
|
| 325 |
+
let currentTab = params.get('tab') || 'all';
|
| 326 |
+
const inputEl = document.getElementById('main-input');
|
| 327 |
+
const resultsEl = document.getElementById('results-container');
|
| 328 |
+
const loadingEl = document.getElementById('loading-text');
|
| 329 |
+
const sidebarEl = document.getElementById('sidebar');
|
| 330 |
+
const aiMobileWrap = document.getElementById('ai-mobile-wrap');
|
| 331 |
+
const suggestionsEl = document.getElementById('suggestions-container');
|
| 332 |
+
const clearBtn = document.getElementById('clear-btn');
|
| 333 |
+
|
| 334 |
+
// ========== إدارة التبويبات ==========
|
| 335 |
+
const setActiveTab = (tab) => {
|
| 336 |
+
document.querySelectorAll('.tab-pill').forEach(b => b.classList.toggle('active', b.dataset.tab === tab));
|
| 337 |
+
};
|
| 338 |
+
setActiveTab(currentTab);
|
| 339 |
+
|
| 340 |
+
// ========== صندوق البحث (زر المسح) ==========
|
| 341 |
+
const updateClearBtn = () => {
|
| 342 |
+
if (inputEl.value.length > 0) {
|
| 343 |
+
clearBtn.classList.add('visible');
|
| 344 |
+
} else {
|
| 345 |
+
clearBtn.classList.remove('visible');
|
| 346 |
+
}
|
| 347 |
+
};
|
| 348 |
+
inputEl.addEventListener('input', updateClearBtn);
|
| 349 |
+
clearBtn.addEventListener('click', () => {
|
| 350 |
+
inputEl.value = '';
|
| 351 |
+
updateClearBtn();
|
| 352 |
+
inputEl.focus();
|
| 353 |
+
});
|
| 354 |
+
|
| 355 |
+
// مفتاح Escape لمسح حقل البحث
|
| 356 |
+
inputEl.addEventListener('keydown', (e) => {
|
| 357 |
+
if (e.key === 'Escape' && inputEl.value.length > 0) {
|
| 358 |
+
inputEl.value = '';
|
| 359 |
+
updateClearBtn();
|
| 360 |
+
inputEl.blur();
|
| 361 |
+
}
|
| 362 |
+
});
|
| 363 |
+
|
| 364 |
+
// ========== دوال مساعدة ==========
|
| 365 |
+
const esc = (s) => s ? s.replace(/[&<>'"]/g, m => ({'&':'&','<':'<','>':'>',"'":''','"':'"'}[m]||m)) : '';
|
| 366 |
+
const getDomain = (url) => { try { return new URL(url).hostname.replace('www.',''); } catch { return url||''; } };
|
| 367 |
+
const proxyImg = (url) => url && !url.startsWith('data:') ? `https://wsrv.nl/?url=${encodeURIComponent(url)}&output=webp` : url;
|
| 368 |
+
const faviconURL = (d) => `https://www.google.com/s2/favicons?domain=${d}&sz=32`;
|
| 369 |
+
const extractBestImage = (r) => {
|
| 370 |
+
const candidates = [r.img_src, r.thumbnail_src, r.thumbnail, r.image];
|
| 371 |
+
for (const c of candidates) {
|
| 372 |
+
if (c && typeof c === 'string' && c.match(/\.(jpg|jpeg|png|gif|webp|bmp)/i)) return c;
|
| 373 |
+
if (c && typeof c === 'string' && c.startsWith('http')) return c;
|
| 374 |
+
}
|
| 375 |
+
return null;
|
| 376 |
+
};
|
| 377 |
+
|
| 378 |
+
// قص النص بعد عدد معين من الكلمات
|
| 379 |
+
const truncateWords = (text, maxWords) => {
|
| 380 |
+
if (!text) return '';
|
| 381 |
+
const words = text.split(/\s+/).filter(w => w.length > 0);
|
| 382 |
+
if (words.length <= maxWords) return text;
|
| 383 |
+
return words.slice(0, maxWords).join(' ') + '...';
|
| 384 |
+
};
|
| 385 |
+
|
| 386 |
+
// ========== الذكاء الاصطناعي ==========
|
| 387 |
+
let currentAItext = '';
|
| 388 |
+
const aiSetLoading = () => {
|
| 389 |
+
['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>'} });
|
| 390 |
+
['ai-copy-desktop','ai-copy-mobile'].forEach(id => { const b=document.getElementById(id); if(b)b.style.display='none' });
|
| 391 |
+
['ai-sources-desktop','ai-sources-mobile'].forEach(id => { const el=document.getElementById(id); if(el)el.innerHTML='' });
|
| 392 |
+
};
|
| 393 |
+
const aiUpdate = (text, sources) => {
|
| 394 |
+
currentAItext = text;
|
| 395 |
+
['ai-answer-body','ai-answer-body-mobile'].forEach(id => { const el=document.getElementById(id); if(el){el.classList.remove('loading');el.textContent=text} });
|
| 396 |
+
['ai-copy-desktop','ai-copy-mobile'].forEach(id => { const b=document.getElementById(id); if(b)b.style.display='inline-flex' });
|
| 397 |
+
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('');
|
| 398 |
+
['ai-sources-desktop','ai-sources-mobile'].forEach(id => { const el=document.getElementById(id); if(el)el.innerHTML=chips });
|
| 399 |
+
};
|
| 400 |
+
const runAI = async (q, results) => {
|
| 401 |
+
aiSetLoading();
|
| 402 |
+
if (GEMINI_KEY.trim()) {
|
| 403 |
+
try {
|
| 404 |
+
const snippets = results.slice(0,5).map((r,i)=>`[${i+1}] ${r.title||''}: ${r.content||''}`).join('\n');
|
| 405 |
+
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}})});
|
| 406 |
+
const data = await resp.json();
|
| 407 |
+
aiUpdate(data.candidates?.[0]?.content?.parts?.[0]?.text||'لا توجد إجابة.', results.slice(0,4));
|
| 408 |
+
return;
|
| 409 |
+
}catch(e){}
|
| 410 |
+
}
|
| 411 |
+
const best = results[0];
|
| 412 |
+
const summary = best ? truncateWords(best.content, 35) : '';
|
| 413 |
+
aiUpdate(summary ? `🔍 ${summary}` : 'لا توجد معلومات كافية.', results.slice(0,3));
|
| 414 |
+
};
|
| 415 |
+
const showAI = (visible) => {
|
| 416 |
+
if(sidebarEl) sidebarEl.style.display = visible ? '' : 'none';
|
| 417 |
+
if(aiMobileWrap) aiMobileWrap.style.display = visible ? '' : 'none';
|
| 418 |
+
};
|
| 419 |
+
|
| 420 |
+
// ========== معالجة أخطاء الصور ==========
|
| 421 |
+
window.handleImageError = function(img) {
|
| 422 |
+
const card = img.closest('.image-card');
|
| 423 |
+
if (card) card.remove();
|
| 424 |
+
};
|
| 425 |
+
window.handleVideoThumbError = function(img) {
|
| 426 |
+
const card = img.closest('.video-card');
|
| 427 |
+
if (card) card.remove();
|
| 428 |
+
};
|
| 429 |
+
|
| 430 |
+
// ========== مراقب الظهور ==========
|
| 431 |
+
const observer = new IntersectionObserver(entries => entries.forEach(en => { if(en.isIntersecting) en.target.classList.add('visible') }), {threshold:0.1});
|
| 432 |
+
const observe = () => document.querySelectorAll('.search-result,.image-card,.video-card').forEach(el => observer.observe(el));
|
| 433 |
+
|
| 434 |
+
// ========== زر العودة للأعلى ==========
|
| 435 |
+
const backBtn = document.getElementById('backToTop');
|
| 436 |
+
window.addEventListener('scroll', () => backBtn.classList.toggle('show', scrollY > 400));
|
| 437 |
+
backBtn.addEventListener('click', () => scrollTo({top:0,behavior:'smooth'}));
|
| 438 |
+
|
| 439 |
+
// ========== جلب البيانات ==========
|
| 440 |
+
const fetchJSON = (url) => fetch(url, {signal: AbortSignal.timeout(12000)}).then(r=>r.json());
|
| 441 |
+
const fetchCategory = (cat) => {
|
| 442 |
+
const url = `${SEARXNG_URL}?q=${encodeURIComponent(query)}&format=json&categories=${cat}&language=ar&safesearch=1&limit=100`;
|
| 443 |
+
return fetchJSON(url).catch(()=>({results:[], suggestions:[]}));
|
| 444 |
+
};
|
| 445 |
+
|
| 446 |
+
// ========== عرض الاقتراحات ==========
|
| 447 |
+
const renderSuggestions = (suggestions) => {
|
| 448 |
+
suggestionsEl.innerHTML = '';
|
| 449 |
+
if (!suggestions || !suggestions.length) return;
|
| 450 |
+
const row = document.createElement('div');
|
| 451 |
+
row.className = 'suggestions-row';
|
| 452 |
+
suggestions.forEach(s => {
|
| 453 |
+
const chip = document.createElement('button');
|
| 454 |
+
chip.className = 'suggestion-chip';
|
| 455 |
+
chip.textContent = s;
|
| 456 |
+
chip.addEventListener('click', () => {
|
| 457 |
+
inputEl.value = s;
|
| 458 |
+
updateClearBtn();
|
| 459 |
+
document.getElementById('search-form').dispatchEvent(new Event('submit'));
|
| 460 |
+
});
|
| 461 |
+
row.appendChild(chip);
|
| 462 |
+
});
|
| 463 |
+
suggestionsEl.appendChild(row);
|
| 464 |
+
};
|
| 465 |
+
|
| 466 |
+
// ========== عناوين الأقسام ==========
|
| 467 |
+
const createSectionTitle = (text, tabLink) => {
|
| 468 |
+
const h3 = document.createElement('h3'); h3.className='section-title';
|
| 469 |
+
h3.innerHTML = `${text} <a href="?q=${encodeURIComponent(query)}&tab=${tabLink}">عرض الكل <i class="fa-solid fa-arrow-left"></i></a>`;
|
| 470 |
+
return h3;
|
| 471 |
+
};
|
| 472 |
+
|
| 473 |
+
// ========== عرض نتائج الويب ==========
|
| 474 |
+
const renderWebResults = (results) => {
|
| 475 |
+
results.forEach(r => {
|
| 476 |
+
const d = getDomain(r.url);
|
| 477 |
+
const art = document.createElement('article'); art.className='search-result';
|
| 478 |
+
art.innerHTML = `
|
| 479 |
+
<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>
|
| 480 |
+
<div class="result-content">
|
| 481 |
+
<div class="result-domain"><i class="fa-solid fa-link"></i> ${esc(d)}</div>
|
| 482 |
+
<a class="result-title" href="${esc(r.url)}" target="_blank" title="${esc(r.title||'')}">${esc(truncateWords(r.title||'بدون عنوان', 12))}</a>
|
| 483 |
+
<p class="result-snippet">${esc(truncateWords(r.content||'', 30))}</p>
|
| 484 |
</div>
|
| 485 |
+
<button class="copy-link-btn" data-url="${esc(r.url)}" title="نسخ الرابط"><i class="fa-regular fa-copy"></i></button>
|
| 486 |
+
`;
|
| 487 |
+
resultsEl.appendChild(art);
|
| 488 |
+
});
|
| 489 |
+
};
|
| 490 |
+
|
| 491 |
+
// ========== عرض الصور ==========
|
| 492 |
+
const renderImageCards = (images) => {
|
| 493 |
+
const validImages = images.filter(r => extractBestImage(r));
|
| 494 |
+
if(!validImages.length) return;
|
| 495 |
+
const title = createSectionTitle('صور','images');
|
| 496 |
+
resultsEl.appendChild(title);
|
| 497 |
+
const grid = document.createElement('div'); grid.className='images-grid';
|
| 498 |
+
validImages.forEach(r => {
|
| 499 |
+
const raw = extractBestImage(r);
|
| 500 |
+
const proxied = proxyImg(raw);
|
| 501 |
+
const displayUrl = r.url || '';
|
| 502 |
+
const card = document.createElement('div'); card.className='image-card';
|
| 503 |
+
card.innerHTML = `
|
| 504 |
+
<a class="image-card-link" href="${esc(displayUrl)}" target="_blank">
|
| 505 |
+
<img src="${esc(proxied)}" loading="lazy" onerror="handleImageError(this)" alt="${esc(r.title||'')}" />
|
| 506 |
+
</a>
|
| 507 |
+
<div class="image-info">
|
| 508 |
+
<div class="img-title" title="${esc(r.title||'صورة')}">${esc(truncateWords(r.title||'صورة', 8))}</div>
|
| 509 |
+
<a class="image-url" href="${esc(displayUrl)}" target="_blank" title="${esc(displayUrl)}">${esc(truncateWords(displayUrl, 6))}</a>
|
|
|
|
| 510 |
</div>
|
| 511 |
+
`;
|
| 512 |
+
grid.appendChild(card);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 513 |
});
|
| 514 |
+
resultsEl.appendChild(grid);
|
| 515 |
+
};
|
| 516 |
+
|
| 517 |
+
// ========== عرض الفيديوهات ==========
|
| 518 |
+
const renderVideoCards = (videos) => {
|
| 519 |
+
const validVideos = videos.filter(r => r.thumbnail);
|
| 520 |
+
if(!validVideos.length) return;
|
| 521 |
+
const title = createSectionTitle('فيديوهات','videos');
|
| 522 |
+
resultsEl.appendChild(title);
|
| 523 |
+
const grid = document.createElement('div'); grid.className='videos-grid';
|
| 524 |
+
validVideos.forEach(r => {
|
| 525 |
+
const thumb = proxyImg(r.thumbnail);
|
| 526 |
+
const displayUrl = r.url || '';
|
| 527 |
+
const card = document.createElement('div'); card.className='video-card';
|
| 528 |
+
card.innerHTML = `
|
| 529 |
+
<a href="${esc(displayUrl)}" target="_blank" class="video-thumb-wrap">
|
| 530 |
+
<img src="${esc(thumb)}" loading="lazy" onerror="handleVideoThumbError(this)" alt="${esc(r.title||'')}" />
|
| 531 |
+
<div class="play-overlay"><i class="fa-solid fa-play"></i></div>
|
| 532 |
+
</a>
|
| 533 |
+
<div class="video-details">
|
| 534 |
+
<a class="video-title" href="${esc(displayUrl)}" target="_blank" title="${esc(r.title||'فيديو')}">${esc(truncateWords(r.title||'فيديو', 10))}</a>
|
| 535 |
+
<a class="video-url" href="${esc(displayUrl)}" target="_blank" title="${esc(displayUrl)}">${esc(truncateWords(displayUrl, 8))}</a>
|
| 536 |
+
</div>
|
| 537 |
+
`;
|
| 538 |
+
grid.appendChild(card);
|
| 539 |
+
});
|
| 540 |
+
resultsEl.appendChild(grid);
|
| 541 |
+
};
|
| 542 |
+
|
| 543 |
+
// ========== البحث الرئيسي ==========
|
| 544 |
+
const performSearch = async (q, tab) => {
|
| 545 |
+
resultsEl.innerHTML = '';
|
| 546 |
+
suggestionsEl.innerHTML = '';
|
| 547 |
+
loadingEl.style.display = 'flex'; loadingEl.classList.add('spinning');
|
| 548 |
+
showAI(tab === 'all');
|
| 549 |
+
|
| 550 |
+
try {
|
| 551 |
+
if (tab === 'all') {
|
| 552 |
+
const [imagesData, videosData] = await Promise.all([
|
| 553 |
+
fetchCategory('images'),
|
| 554 |
+
fetchCategory('videos')
|
| 555 |
+
]);
|
| 556 |
+
|
| 557 |
+
const suggestions = imagesData.suggestions || videosData.suggestions || [];
|
| 558 |
+
if (suggestions.length) renderSuggestions(suggestions);
|
| 559 |
+
|
| 560 |
+
const imageResults = (imagesData.results || []).slice(0, 3);
|
| 561 |
+
if (imageResults.length) renderImageCards(imageResults);
|
| 562 |
+
|
| 563 |
+
const videoResults = (videosData.results || []).slice(0, 2);
|
| 564 |
+
if (videoResults.length) renderVideoCards(videoResults);
|
| 565 |
+
|
| 566 |
+
const generalData = await fetchCategory('general');
|
| 567 |
+
const webResults = generalData.results || [];
|
| 568 |
+
loadingEl.style.display = 'none';
|
| 569 |
+
|
| 570 |
+
if (webResults.length) {
|
| 571 |
+
renderWebResults(webResults);
|
| 572 |
+
runAI(q, webResults);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 573 |
}
|
| 574 |
+
observe();
|
| 575 |
+
} else {
|
| 576 |
+
const data = await fetchCategory(tab);
|
| 577 |
+
const results = data.results || [];
|
| 578 |
+
const suggestions = data.suggestions || [];
|
| 579 |
+
loadingEl.style.display = 'none';
|
| 580 |
+
|
| 581 |
+
if (suggestions.length) renderSuggestions(suggestions);
|
| 582 |
+
if (!results.length) { resultsEl.innerHTML = ''; return; }
|
| 583 |
+
|
| 584 |
+
if (tab === 'images') {
|
| 585 |
+
const validImages = results.filter(r => extractBestImage(r));
|
| 586 |
+
if (validImages.length) {
|
| 587 |
+
const grid = document.createElement('div'); grid.className='images-grid';
|
| 588 |
+
validImages.forEach(r => {
|
| 589 |
+
const raw = extractBestImage(r);
|
| 590 |
+
const proxied = proxyImg(raw);
|
| 591 |
+
const displayUrl = r.url || '';
|
| 592 |
+
const card = document.createElement('div'); card.className='image-card';
|
| 593 |
+
card.innerHTML = `
|
| 594 |
+
<a class="image-card-link" href="${esc(displayUrl)}" target="_blank">
|
| 595 |
+
<img src="${esc(proxied)}" loading="lazy" onerror="handleImageError(this)" alt="${esc(r.title||'')}" />
|
| 596 |
+
</a>
|
| 597 |
+
<div class="image-info">
|
| 598 |
+
<div class="img-title" title="${esc(r.title||'صورة')}">${esc(truncateWords(r.title||'صورة', 8))}</div>
|
| 599 |
+
<a class="image-url" href="${esc(displayUrl)}" target="_blank" title="${esc(displayUrl)}">${esc(truncateWords(displayUrl, 6))}</a>
|
| 600 |
+
</div>
|
| 601 |
+
`;
|
| 602 |
+
grid.appendChild(card);
|
| 603 |
+
});
|
| 604 |
+
resultsEl.appendChild(grid);
|
| 605 |
+
}
|
| 606 |
+
} else if (tab === 'videos') {
|
| 607 |
+
const validVideos = results.filter(r => r.thumbnail);
|
| 608 |
+
if (validVideos.length) {
|
| 609 |
+
const grid = document.createElement('div'); grid.className='videos-grid';
|
| 610 |
+
validVideos.forEach(r => {
|
| 611 |
+
const thumb = proxyImg(r.thumbnail);
|
| 612 |
+
const displayUrl = r.url || '';
|
| 613 |
+
const card = document.createElement('div'); card.className='video-card';
|
| 614 |
+
card.innerHTML = `
|
| 615 |
+
<a href="${esc(displayUrl)}" target="_blank" class="video-thumb-wrap">
|
| 616 |
+
<img src="${esc(thumb)}" loading="lazy" onerror="handleVideoThumbError(this)" alt="${esc(r.title||'')}" />
|
| 617 |
+
<div class="play-overlay"><i class="fa-solid fa-play"></i></div>
|
| 618 |
+
</a>
|
| 619 |
+
<div class="video-details">
|
| 620 |
+
<a class="video-title" href="${esc(displayUrl)}" target="_blank" title="${esc(r.title||'فيديو')}">${esc(truncateWords(r.title||'فيديو', 10))}</a>
|
| 621 |
+
<a class="video-url" href="${esc(displayUrl)}" target="_blank" title="${esc(displayUrl)}">${esc(truncateWords(displayUrl, 8))}</a>
|
| 622 |
+
</div>
|
| 623 |
+
`;
|
| 624 |
+
grid.appendChild(card);
|
| 625 |
+
});
|
| 626 |
+
resultsEl.appendChild(grid);
|
| 627 |
+
}
|
| 628 |
} else {
|
| 629 |
+
renderWebResults(results);
|
| 630 |
}
|
| 631 |
+
observe();
|
| 632 |
+
}
|
| 633 |
+
} catch(e) {
|
| 634 |
+
loadingEl.style.display = 'none';
|
| 635 |
+
resultsEl.innerHTML = '';
|
| 636 |
+
suggestionsEl.innerHTML = '';
|
| 637 |
+
}
|
| 638 |
+
};
|
| 639 |
+
|
| 640 |
+
// ========== التهيئة الأولية ==========
|
| 641 |
+
if (query) {
|
| 642 |
+
inputEl.value = query;
|
| 643 |
+
updateClearBtn();
|
| 644 |
+
performSearch(query, currentTab);
|
| 645 |
+
} else {
|
| 646 |
+
loadingEl.style.display = 'block';
|
| 647 |
+
loadingEl.classList.remove('spinning');
|
| 648 |
+
loadingEl.textContent = 'أدخل كلمة البحث للبدء.';
|
| 649 |
+
}
|
| 650 |
+
|
| 651 |
+
// ========== مستمعو الأحداث ==========
|
| 652 |
+
document.getElementById('search-form').addEventListener('submit', e => {
|
| 653 |
+
e.preventDefault();
|
| 654 |
+
const q = inputEl.value.trim();
|
| 655 |
+
if (!q) return;
|
| 656 |
+
window.history.pushState({}, '', `?q=${encodeURIComponent(q)}&tab=${currentTab}`);
|
| 657 |
+
query = q;
|
| 658 |
+
performSearch(q, currentTab);
|
| 659 |
+
});
|
| 660 |
+
|
| 661 |
+
document.querySelectorAll('.tab-pill').forEach(btn => {
|
| 662 |
+
btn.addEventListener('click', () => {
|
| 663 |
+
const tab = btn.dataset.tab;
|
| 664 |
+
if (!tab || tab === currentTab) return;
|
| 665 |
+
currentTab = tab;
|
| 666 |
+
setActiveTab(tab);
|
| 667 |
+
window.history.pushState({}, '', `?q=${encodeURIComponent(query)}&tab=${tab}`);
|
| 668 |
+
if (query) performSearch(query, tab);
|
| 669 |
+
});
|
| 670 |
+
});
|
| 671 |
|
| 672 |
+
document.getElementById('ai-copy-desktop')?.addEventListener('click', ()=>navigator.clipboard.writeText(currentAItext));
|
| 673 |
+
document.getElementById('ai-copy-mobile')?.addEventListener('click', ()=>navigator.clipboard.writeText(currentAItext));
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 674 |
|
| 675 |
+
// نسخ رابط النتيجة
|
| 676 |
+
document.addEventListener('click', (e) => {
|
| 677 |
+
if (e.target.classList.contains('copy-link-btn')) {
|
| 678 |
+
navigator.clipboard.writeText(e.target.dataset.url).then(() => {
|
| 679 |
+
e.target.innerHTML = '<i class="fa-solid fa-check"></i>';
|
| 680 |
+
setTimeout(() => { e.target.innerHTML = '<i class="fa-regular fa-copy"></i>'; }, 1500);
|
| 681 |
+
}).catch(() => {});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 682 |
}
|
| 683 |
+
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 684 |
|
| 685 |
})();
|
| 686 |
+
</script>
|
| 687 |
</body>
|
| 688 |
</html>
|