1<!DOCTYPE html> 2<html lang="ar"> 3 4 5<head> 6 <meta charset="utf-8"> 7<!-- CSRF Token --> 8<meta name="csrf-token" content="FfGJ4SYsegEaMTBCuTd4VyHJGqPbkvn4IKfB5A8C"> 9<meta name="google-site-verification" content="MavK-BVjuskESReOp8bQ1iLLQwhvtBBev9xF6RNOynQ" /> 10<meta http-equiv="X-UA-Compatible" content="IE=edge"> 11<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 12 13<meta name='robots' content="index, follow, all"> 14<input type="hidden" name="_token" value="FfGJ4SYsegEaMTBCuTd4VyHJGqPbkvn4IKfB5A8C"> 15 16 17<meta name="title" content="Login"> 18<meta name="description" content="Login Page Description"> 19<meta name="keywords" content="Ø£ÙØ§Ø¯ÙÙ ÙØ© اÙÙÙØµÙ, Ø§ÙØªØ¯Ø±Ùب, Ø§ÙØªØ¹ÙÙÙ Ø§ÙØ¥ÙÙØªØ±ÙÙÙ, Ø¯ÙØ±Ø§Øª ØªØ¯Ø±ÙØ¨ÙØ©, Ø§ÙØ³Ø¹ÙØ¯ÙØ©, Al Faisal Academy, Training, E-Learning, Courses, Saudi Arabia"> 20<meta name="author" content="Al Faisal Academy"> 21 22 <meta property="og:description" content="Login Page Description"> 23 <meta name='twitter:description' content='Login Page Description'> 24 25<link rel='shortcut icon' type='image/png' href="https://alfac.edu.sa/images/logo.png"> 26<link rel="manifest" href="/mix-manifest.json?v=4"> 27<meta name="theme-color" content="#FFF"> 28<!-- Windows Phone --> 29<meta name="msapplication-starturl" content="/"> 30<meta name="msapplication-TileColor" content="#FFF"> 31<meta name="msapplication-TileImage" content="/images/logo.png"> 32<!-- iOS Safari --> 33<meta name="apple-mobile-web-app-title" 34 content="Ø§ÙØ§Ø¯ÙÙ ÙØ© اÙÙÙØµÙ Ø§ÙØ¹Ø§ÙÙ ÙØ©"> 35<link rel="apple-touch-icon" href="https://alfac.edu.sa/images/logo.png"> 36<meta name="apple-mobile-web-app-capable" content="yes"> 37<meta name="apple-mobile-web-app-status-bar-style" content="default"> 38<!-- Android --> 39<link rel='icon' type='image/png' href='https://alfac.edu.sa/images/logo.png'> 40<meta name="application-name" 41 content="Ø§ÙØ§Ø¯ÙÙ ÙØ© اÙÙÙØµÙ Ø§ÙØ¹Ø§ÙÙ ÙØ©"> 42<meta name="mobile-web-app-capable" content="yes"> 43<!-- Other --> 44<meta name="layoutmode" content="fitscreen/standard"> 45<link rel="home" href="https://alfac.edu.sa"> 46 47<!-- Open Graph --> 48<meta property='og:title' content='Login'> 49<meta property='og:url' content='https://alfac.edu.sa/login'> 50<meta property='og:site_name' 51 content='Ø§ÙØ§Ø¯ÙÙ ÙØ© اÙÙÙØµÙ Ø§ÙØ¹Ø§ÙÙ ÙØ©'> 52<meta property='og:type' content='website'> 53<meta property='og:locale' content='ar_SA'> 54<meta property='og:locale:alternate' content='en_US'> 55 56 57<meta property='og:image' content='/images/logo.png'> 58<meta property='og:image:width' content='1200'> 59<meta property='og:image:height' content='630'> 60<meta property='og:image:alt' 61 content='Ø§ÙØ§Ø¯ÙÙ ÙØ© اÙÙÙØµÙ Ø§ÙØ¹Ø§ÙÙ ÙØ©'> 62 63<!-- Twitter Card --> 64<meta name='twitter:card' content='summary_large_image'> 65<meta name='twitter:title' content='Login'> 66<meta name='twitter:image' content='https://alfac.edu.sa/images/logo.png'> 67<meta name='twitter:site' content='@alfacacademy'> 68<meta name='twitter:creator' content='@alfacacademy'> 69<!-- Google Tag Manager -->
70<script>
vendor: 498 bytes, lines 70-84
70 71 (function(w, d, s, l, i) { 72 w[l] = w[l] || []; 73 w[l].push({ 74 'gtm.start': new Date().getTime(), 75 event: 'gtm.js' 76 }); 77 var f = d.getElementsByTagName(s)[0], 78 j = d.createElement(s), 79 dl = l != 'dataLayer' ? '&l=' + l : ''; 80 j.async = true; 81 j.src = 82 'https://www.googletagmanager.com/gtm.js?id=' + i + dl; 83 f.parentNode.insertBefore(j, f); 84 })(window, document, 'script', 'dataLayer', '
84GTM-TWWCLBH
vendor: 4 bytes, line 84
84');
85</script>
85 86<!-- End Google Tag Manager --> 87<!-- Google Tag Manager (noscript) -->
vendor: 68 bytes, lines 87-88
87 88<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=
88GTM-TWWCLBH
vendor: 91 bytes, lines 88-89
88" height="0" width="0" 89 style="display:none;visibility:hidden"></iframe></noscript>
90<!-- End Google Tag Manager (noscript) --> 91 92 93 94
95<script type='text/javascript'> 96(function(e,t,n){if(e.snaptr)return;var a=e.snaptr=function() 97{a.handleRequest?a.handleRequest.apply(a,arguments):a.queue.push(arguments)}; 98a.queue=[];var s='script';r=t.createElement(s);r.async=!0; 99r.src=n;var u=t.getElementsByTagName(s)[0]; 100u.parentNode.insertBefore(r,u);})(window,document, 101'https://sc-static.net/scevent.min.js'); 102 103// 1. Initialize the Pixel 104snaptr('init', '778eb8a1-0e6a-4063-b840-c504a3425586', { 105 'user_email': '' 106}); 107 108// 2. Fire Page View on every page load 109snaptr('track', 'PAGE_VIEW'); 110 111// 3. URL-Based Tracking Logic 112document.addEventListener("DOMContentLoaded", function() { 113 var currentUrl = window.location.href; 114 115 // VIEW CONTENT: Triggers on single course/product pages 116 if (currentUrl.indexOf('/course/') !== -1) { 117 snaptr('track', 'VIEW_CONTENT'); 118 } 119 120 // ADD TO CART: Triggers when they land on the main cart page 121 if (currentUrl.indexOf('/cart') !== -1 && currentUrl.indexOf('/payment/') === -1) { 122 snaptr('track', 'ADD_CART'); 123 } 124 125 // PAY / PURCHASE: Triggers when they hit the payment confirmation/order step 126 if (currentUrl.indexOf('/cart/payment/') !== -1) { 127 snaptr('track', 'PURCHASE', { 128 'currency': 'SAR', // Set to Saudi Riyal based on your domain 129 'price': 0.00 130 }); 131 } 132 133 // LOGIN: (Optional) Triggers if the URL contains dashboard or account 134 if (currentUrl.indexOf('/dashboard') !== -1 || currentUrl.indexOf('/profile') !== -1) { 135 snaptr('track', 'LOGIN'); 136 } 137 138}); 139</script>
139 140 <title> 141 Login | Ø§ÙØ§Ø¯ÙÙ ÙØ© اÙÙÙØµÙ Ø§ÙØ¹Ø§ÙÙ ÙØ© 142 </title> 143 144 <!-- Google Fonts - Optimized --> 145 <link rel="preconnect" href="https://fonts.googleapis.com"> 146 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 147 <link href="https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@400;600;700&display=swap" rel="stylesheet"> 148 149 <!-- General CSS File --> 150 <link rel="stylesheet" href="/assets/default/vendors/sweetalert2/dist/sweetalert2.min.css"> 151 <link rel="stylesheet" href="/assets/default/vendors/toast/jquery.toast.min.css"> 152 <link rel="stylesheet" href="/assets/default/vendors/simplebar/simplebar.css"> 153 <link rel="stylesheet" href="/assets/default/css/app.css"> 154 <link rel="stylesheet" href="/assets/default/css/mobile-cart-notifications.css"> 155 156 157 <link rel="stylesheet" href="/assets/default/css/modern-ui.css"> 158 <link rel="stylesheet" href="/assets/default/css/performance-boost.css"> 159 <link rel="stylesheet" href="/assets/default/css/navbar-fixes.css"> 160 <link rel="stylesheet" href="/assets/default/css/af-cards.css"> 161 162 163 <link rel="stylesheet" href="/assets/default/css/rtl-app.css"> 164 165 <link rel="stylesheet" href="/assets/default/vendors/select2/select2.min.css"> 166 167 <style> 168 @font-face { 169 font-family: 'main-font-family'; 170 font-style: normal; 171 font-weight: 400; 172 font-display: swap; 173 src: url(/store/1/fonts/kufi/NotoKufiArabic-Regular.woff2) format('woff2'); 174 }@font-face { 175 font-family: 'main-font-family'; 176 font-style: normal; 177 font-weight: bold; 178 font-display: swap; 179 src: url(/store/1/fonts/kufi/NotoKufiArabic-Bold.woff2) format('woff2'); 180 }@font-face { 181 font-family: 'main-font-family'; 182 font-style: normal; 183 font-weight: 500; 184 font-display: swap; 185 src: url(/store/1/fonts/kufi/NotoKufiArabic-Regular.woff2) format('woff2'); 186 }@font-face { 187 font-family: 'rtl-font-family'; 188 font-style: normal; 189 font-weight: 400; 190 font-display: swap; 191 src: url(/store/1/fonts/kufi/NotoKufiArabic-Regular.woff2) format('woff2'); 192 }@font-face { 193 font-family: 'rtl-font-family'; 194 font-style: normal; 195 font-weight: bold; 196 font-display: swap; 197 src: url(/store/1/fonts/kufi/NotoKufiArabic-Bold.woff2) format('woff2'); 198 }@font-face { 199 font-family: 'rtl-font-family'; 200 font-style: normal; 201 font-weight: 500; 202 font-display: swap; 203 src: url(/store/1/fonts/kufi/NotoKufiArabic-Regular.woff2) format('woff2'); 204 } :root{ 205--primary:#112569; 206--primary-border:#7d8496; 207} 208 209 210 /* Modern Login Modal Styles */ 211 .modern-login-modal { 212 border: none; 213 border-radius: 20px; 214 box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15); 215 overflow: hidden; 216 position: relative; 217 backdrop-filter: blur(10px); 218 } 219
220 .modal-bg-pattern { 221 position: absolute; 222 top: 0; 223 left: 0; 224 right: 0; 225 height: 120px; 226 background: linear-gradient(135deg, #1E3A8A 0%, #1E293B 50%, #05b17d 100%); 227 opacity: 0.1; 228 z-index: 1; 229 } 230 231 .modal-bg-pattern::before { 232 content: ''; 233 position: absolute; 234 top: 0; 235 left: 0; 236 right: 0; 237 bottom: 0; 238 background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); 239 } 240 241 .modern-header { 242 background: linear-gradient(135deg, #1E3A8A 0%, #1E293B 100%); 243 color: white; 244 text-align: center; 245 padding: 2rem 2rem 1.5rem; 246 border: none; 247 position: relative; 248 z-index: 2; 249 } 250 251 .login-icon { 252 width: 60px; 253 height: 60px; 254 background: rgba(255, 255, 255, 0.2); 255 border-radius: 50%; 256 display: flex; 257 align-items: center; 258 justify-content: center; 259 margin: 0 auto 1rem; 260 font-size: 1.5rem; 261 backdrop-filter: blur(10px); 262 } 263 264 .modern-header .modal-title { 265 font-size: 1.5rem; 266 font-weight: 700; 267 margin: 0 0 0.5rem; 268 color: white; 269 } 270
271 .modal-subtitle { 272 font-size: 0.9rem; 273 opacity: 0.9; 274 margin: 0; 275 font-weight: 400; 276 } 277 278 .modern-close { 279 position: absolute; 280 top: 15px; 281 left: 15px; 282 background: rgba(255, 255, 255, 0.2); 283 border-radius: 50%; 284 width: 35px; 285 height: 35px; 286 display: flex; 287 align-items: center; 288 justify-content: center; 289 backdrop-filter: blur(10px); 290 transition: all 0.3s ease; 291 } 292 293 .modern-close:hover { 294 background: rgba(255, 255, 255, 0.3); 295 transform: rotate(90deg); 296 } 297 298 .modern-body { 299 padding: 2rem; 300 background: white; 301 position: relative; 302 z-index: 2; 303 } 304 305 .social-login-section { 306 margin-bottom: 2rem; 307 } 308 309 .google-login-btn { 310 display: flex; 311 align-items: center; 312 justify-content: center; 313 gap: 12px; 314 width: 100%; 315 padding: 12px 20px; 316 background: #fff; 317 border: 2px solid #e0e0e0; 318 border-radius: 12px; 319 text-decoration: none; 320 color: #333; 321 font-weight: 600; 322 transition: all 0.3s ease; 323 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); 324 } 325 326 .google-login-btn:hover { 327 border-color: #4285f4; 328 box-shadow: 0 4px 12px rgba(66, 133, 244, 0.15); 329 transform: translateY(-2px); 330 color: #333; 331 text-decoration: none; 332 } 333 334 .google-icon { 335 display: flex; 336 align-items: center; 337 justify-content: center; 338 } 339 340 .divider-section { 341 display: flex; 342 align-items: center; 343 margin: 2rem 0; 344 gap: 15px; 345 } 346 347 .divider-line { 348 flex: 1; 349 height: 1px; 350 background: linear-gradient(90deg, transparent, #e0e0e0, transparent); 351 } 352 353 .divider-text { 354 font-size: 0.85rem; 355 color: #666; 356 white-space: nowrap; 357 } 358 359 .login-form, 360 .otp-form { 361 position: relative; 362 } 363 364 .form-group { 365 margin-bottom: 1.5rem; 366 } 367 368 .form-label { 369 display: flex; 370 align-items: center; 371 gap: 8px; 372 font-weight: 600; 373 margin-bottom: 0.5rem; 374 color: #333; 375 font-size: 0.9rem; 376 } 377 378 .form-icon { 379 color: #1E3A8A; 380 font-size: 0.9rem; 381 } 382 383 .modern-input, 384 .otp-input { 385 width: 100%; 386 padding: 12px 16px; 387 border: 2px solid #e8e8e8; 388 border-radius: 12px; 389 font-size: 1rem; 390 transition: all 0.3s ease; 391 background: #fafafa; 392 } 393 394 .modern-input:focus, 395 .otp-input:focus { 396 border-color: #1E3A8A; 397 box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); 398 background: white; 399 outline: none; 400 } 401 402 .otp-input { 403 text-align: center; 404 font-weight: 700; 405 font-size: 1.2rem; 406 letter-spacing: 0.3em; 407 background: #f8f9ff; 408 } 409 410 .modern-submit-btn { 411 width: 100%; 412 padding: 14px 20px; 413 border: none; 414 border-radius: 12px; 415 background: linear-gradient(135deg, #1E3A8A 0%, #1E293B 100%); 416 color: white; 417 font-weight: 600; 418 font-size: 1rem; 419 cursor: pointer; 420 position: relative; 421 overflow: hidden; 422 transition: all 0.3s ease; 423 box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); 424 } 425 426 .modern-submit-btn:hover { 427 transform: translateY(-2px); 428 box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4); 429 } 430 431 .modern-submit-btn:disabled { 432 opacity: 0.7;
433 cursor: not-allowed; 434 transform: none; 435 } 436 437 .btn-content { 438 display: flex; 439 align-items: center; 440 justify-content: center; 441 gap: 8px; 442 transition: opacity 0.3s ease; 443 } 444 445 .btn-loader { 446 position: absolute; 447 top: 50%; 448 left: 50%; 449 transform: translate(-50%, -50%); 450 opacity: 0; 451 transition: opacity 0.3s ease; 452 } 453 454 .modern-submit-btn.loading .btn-content { 455 opacity: 0; 456 } 457 458 .modern-submit-btn.loading .btn-loader { 459 opacity: 1; 460 } 461 462 .loader-spinner { 463 width: 20px; 464 height: 20px; 465 border: 2px solid rgba(255, 255, 255, 0.3); 466 border-radius: 50%; 467 border-top: 2px solid white; 468 animation: spin 1s linear infinite; 469 } 470 471 @keyframes spin { 472 0% { 473 transform: rotate(0deg); 474 } 475 476 100% { 477 transform: rotate(360deg); 478 } 479 } 480 481 .verify-btn { 482 background: linear-gradient(135deg, #05b17d 0%, #0ac593 100%); 483 box-shadow: 0 4px 15px rgba(5, 177, 125, 0.3); 484 } 485 486 .verify-btn:hover { 487 box-shadow: 0 6px 20px rgba(5, 177, 125, 0.4); 488 } 489 490 .otp-timer { 491 display: flex; 492 align-items: center; 493 justify-content: center; 494 gap: 8px; 495 margin-bottom: 1.5rem; 496 padding: 12px; 497 background: linear-gradient(135deg, #fff3cd, #ffeaa7); 498 border-radius: 10px; 499 color: #856404; 500 font-size: 0.9rem; 501 } 502 503 .timer-icon { 504 color: #f39c12; 505 } 506 507 .countdown-timer { 508 font-weight: 700; 509 font-family: 'Courier New', monospace; 510 } 511 512 .resend-section { 513 text-align: center; 514 margin-top: 1.5rem; 515 } 516 517 .resend-btn { 518 background: none; 519 border: none; 520 color: #1E3A8A; 521 font-weight: 600; 522 cursor: pointer; 523 padding: 8px 16px; 524 border-radius: 8px; 525 transition: all 0.3s ease; 526 font-size: 0.9rem; 527 } 528 529 .resend-btn:hover { 530 background: rgba(102, 126, 234, 0.1); 531 transform: translateY(-1px); 532 } 533 534 .message-box { 535 margin: 1rem 0; 536 padding: 12px 16px; 537 border-radius: 10px; 538 text-align: center; 539 font-weight: 600; 540 opacity: 0; 541 transform: translateY(10px); 542 transition: all 0.3s ease; 543 } 544 545 .message-box.show { 546 opacity: 1; 547 transform: translateY(0); 548 } 549 550 .message-box.success { 551 background: linear-gradient(135deg, #d4edda, #c3e6cb); 552 color: #155724; 553 border: 1px solid #c3e6cb; 554 } 555 556 .message-box.error { 557 background: linear-gradient(135deg, #f8d7da, #f5c6cb); 558 color: #721c24; 559 border: 1px solid #f5c6cb; 560 } 561 562 .register-section { 563 text-align: center; 564 margin-top: 2rem; 565 padding-top: 1.5rem; 566 border-top: 1px solid #e8e8e8; 567 } 568 569 .register-text { 570 margin: 0; 571 color: #666; 572 font-size: 0.9rem; 573 } 574 575 .register-link { 576 color: #1E3A8A; 577 text-decoration: none; 578 font-weight: 600; 579 transition: all 0.3s ease; 580 } 581 582 .register-link:hover { 583 color: #1E293B; 584 text-decoration: underline; 585 } 586 587 /* Mobile Responsive */ 588 @media (max-width: 576px) { 589 .modern-login-modal { 590 margin: 1rem; 591 } 592 593 .modern-header { 594 padding: 1.5rem 1rem 1rem; 595 } 596 597 .modern-body { 598 padding: 1.5rem; 599 } 600 601 .login-icon { 602 width: 50px; 603 height: 50px; 604 font-size: 1.2rem; 605 } 606 607 .modern-header .modal-title { 608 font-size: 1.3rem; 609 } 610 } 611 612 /* Animation for modal entrance */ 613 .modal.fade .modal-dialog { 614 transform: scale(0.8) translateY(-50px); 615 transition: all 0.3s ease; 616 } 617 618 .modal.show .modal-dialog { 619 transform: scale(1) translateY(0); 620 } 621 </style> 622 623 624 625 626 627 <!-- Google Tag Manager --> 628
628<script>
vendor: 343 bytes, lines 628-632
628(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': 629 new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], 630 j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 631 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); 632 })(window,document,'script','dataLayer','
632GTM-T9RCNNXK
vendor: 3 bytes, line 632
632');
632</script>
632 633 <!-- End Google Tag Manager --> 634 635 <!-- LinkedIn Insight Tag Start --> 636
636<script type="text/javascript"> 637 _linkedin_partner_id = "10068121"; 638 window._linkedin_data_partner_ids = window._linkedin_data_partner_ids || []; 639 window._linkedin_data_partner_ids.push(_linkedin_partner_id); 640 </script>
640 641
641<script type="text/javascript"> 642 (function(l) { 643 if (!l){window.lintrk = function(a,b){window.lintrk.q.push([a,b])}; 644 window.lintrk.q=[]} 645 var s = document.getElementsByTagName("script")[0]; 646 var b = document.createElement("script"); 647 b.type = "text/javascript";b.async = true; 648 b.src = "https://snap.licdn.com/li.lms-analytics/insight.min.js"; 649 s.parentNode.insertBefore(b, s);})(window.lintrk); 650 </script>
650 651 <noscript> 652 <img height="1" width="1" style="display:none;" alt="" src="https://px.ads.linkedin.com/collect/?pid=10068121&fmt=gif" /> 653 </noscript> 654 <!-- LinkedIn Insight Tag End --> 655 656 <!-- TikTok Pixel Code Start --> 657
657<script> 658 !function (w, d, t) { 659 w.TiktokAnalyticsObject=t;var ttq=w[t]=w[t]||[];ttq.methods=["page","track","identify","instances","debug","on","off","once","ready","alias","group","enableCookie","disableCookie","holdConsent","revokeConsent","grantConsent"],ttq.setAndDefer=function(t,e){t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}};for(var i=0;i<ttq.methods.length;i++)ttq.setAndDefer(ttq,ttq.methods[i]);ttq.instance=function(t){for( 660 var e=ttq._i[t]||[],n=0;n<ttq.methods.length;n++)ttq.setAndDefer(e,ttq.methods[n]);return e},ttq.load=function(e,n){var r="https://analytics.tiktok.com/i18n/pixel/events.js",o=n&&n.partner;ttq._i=ttq._i||{},ttq._i[e]=[],ttq._i[e]._u=r,ttq._t=ttq._t||{},ttq._t[e]=+new Date,ttq._o=ttq._o||{},ttq._o[e]=n||{};n=document.createElement("script") 661 ;n.type="text/javascript",n.async=!0,n.src=r+"?sdkid="+e+"&lib="+t;e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(n,e)}; 662 663 ttq.load('D7PGNJJC77U2TFGF22I0'); 664 ttq.page(); 665 }(window, document, 'ttq'); 666 </script>
666 667 <!-- TikTok Pixel Code End --> 668</head> 669 670<body class=" rtl "> 671<!-- Google Tag Manager (noscript) -->
vendor: 68 bytes, lines 671-672
671 672<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=
672GTM-T9RCNNXK
vendor: 83 bytes, lines 672-673
672" 673height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
674<!-- End Google Tag Manager (noscript) --> 675 676 <div id="app" 677 class=""> 678 679 <!-- âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 680 ⨠MODERN CLEAN TOP NAVBAR - FAISAL ACADEMY 681 âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ --> 682<div class="faisal-top-nav"> 683 <div class="container-fluid"> 684 <div class="top-nav-container"> 685 686 687 <div class="top-nav-section left-section"> 688 689 690 </div> 691 692 693 <div class="top-nav-section center-section"> 694 695 696 <form action="/search" method="get" class="top-search-bar"> 697 <div class="search-input-wrapper-large"> 698 <svg class="search-icon" width="20" height="20" fill="none" stroke="currentColor"
699 viewBox="0 0 24 24"> 700 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 701 d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /> 702 </svg> 703 <input type="text" name="search" placeholder="Ø§Ø¨ØØ« Ø¹Ù Ø§ÙØ¯Ùرات ÙØ§Ù٠دربÙÙ..." 704 class="search-field-large" autocomplete="off"> 705 </div> 706 </form> 707 708 </div> 709 710 711 <div class="top-nav-section left-section-actions"> 712 713 714 <!-- Shopping Cart - Click to go to cart page --> 715<div class="dropdown"> 716 <a href="/cart" class="btn btn-transparent cart-btn" title="عرض Ø³ÙØ© Ø§ÙØªØ³ÙÙ"> 717 <i data-feather="shopping-cart" width="20" height="20" class="mr-10"></i> 718 719 </a> 720 721 <div class="dropdown-menu" aria-labelledby="navbarShopingCart" style="display: none;"> 722 <div class="d-md-none border-bottom mb-20 pb-10 text-right"> 723 <i class="close-dropdown" data-feather="x" width="32" height="32" class="mr-10"></i> 724 </div> 725 <div class="h-100"> 726 <div class="navbar-shopping-cart h-100" data-simplebar> 727 <div class="d-flex align-items-center text-center py-50"> 728 <i data-feather="shopping-cart" width="20" height="20" class="mr-10"></i> 729 <span class="">Ø¹Ø±Ø¨ØªÙ ÙØ§Ø±ØºØ©</span> 730 </div> 731 </div> 732 </div> 733 </div> 734</div> 735 736<style> 737 /* Simple Shopping Cart Button */ 738 .cart-btn { 739 position: relative; 740 min-width: 44px; 741 min-height: 44px; 742 display: flex; 743 align-items: center; 744 justify-content: center; 745 border-radius: 12px; 746 transition: all 0.3s ease; 747 } 748 749 .cart-btn:hover { 750 background: #f0f9f6 !important; 751 transform: translateY(-2px); 752 text-decoration: none; 753 } 754 755 .cart-btn .badge { 756 position: absolute; 757 top: -5px; 758 right: -5px; 759 min-width: 20px; 760 height: 20px; 761 font-size: 11px; 762 font-weight: 700; 763 } 764 765 /* Touch-friendly on mobile */ 766 @media (hover: none) and (pointer: coarse) { 767 .cart-btn { 768 -webkit-tap-highlight-color: transparent; 769 } 770 771 .cart-btn:active { 772 transform: scale(0.95); 773 } 774 } 775</style> 776 777 778 779 780 781 <div class="d-flex align-items-center ml-md-50"> 782 <a href="/login" class="py-5 px-10 mr-10 text-dark-blue font-14">تسجÙÙ Ø§ÙØ¯Ø®ÙÙ</a> 783 784 </div> 785 786 787 <a href="/login" class="primary-cta-btn"> 788 <svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 789 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 790 d="M13 10V3L4 14h7v7l9-11h-7z" /> 791 </svg> 792 <span class="btn-text">إبدء Ø§ÙØªØ¹ÙÙ </span> 793 </a> 794 795 </div> 796 797 798 <div class="top-nav-section right-section-minimal"> 799 800 801 802 803 804 </div> 805 806 </div> 807 </div> 808</div> 809 810<style> 811 /* âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 812 ð¨ MODERN TOP NAVBAR STYLES - FAISAL ACADEMY 813 âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 814 815 :root { 816 --top-nav-bg: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); 817 --top-nav-border: #e8e8e8; 818 --primary-color: #05b17d; 819 --primary-hover: #048a66; 820 --text-primary: #2c3e50; 821 --text-secondary: #5a6c7d; 822 --text-muted: #a0aec0; 823 --white: #ffffff; 824 --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 825 } 826 827 /* âââ Main Container âââ */ 828 .faisal-top-nav { 829 background: var(--top-nav-bg); 830 border-bottom: 1px solid var(--top-nav-border); 831 padding: 12px 0; 832 font-family: 'Noto Kufi Arabic', 'Cairo', 'Segoe UI', Tahoma, sans-serif; 833 position: sticky; 834 top: 0; 835 /* No z-index here on purpose: with position:sticky + z-index:auto this 836 bar does NOT create its own stacking context, so the account 837 dropdown below (which sets a very high z-index) can still escape 838 above .faisal-navbar (z-index: 999999) instead of being capped by 839 a local context here. */ 840 } 841 842 /* The user account dropdown overflows below this bar into the main 843 navbar row underneath it. Force it above that row (z-index: 999999) 844 without changing the stacking of the bar itself, so the sticky 845 scroll-stacking behavior between the two bars is unaffected. */ 846 .navbar-auth-user-dropdown .custom-dropdown-body { 847 z-index: 1000001 !important; 848 } 849 850 /* When scrolled, make it more prominent */ 851 body.scrolled .faisal-top-nav { 852 box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08); 853 padding: 8px 0; 854 } 855 856 .faisal-top-nav .container-fluid { 857 max-width: 1400px; 858 margin: 0 auto; 859 padding: 0 2rem; 860 } 861 862 .top-nav-container { 863 display: grid; 864 grid-template-columns: minmax(180px, 0.8fr) minmax(400px, 2.5fr) minmax(200px, 1fr); 865 align-items: center; 866 gap: 1.5rem; 867 } 868 869 /* âââ Section Layouts âââ */ 870 .top-nav-section { 871 display: flex; 872 align-items: center; 873 gap: 1rem; 874 } 875 876 .left-section { 877 justify-content: flex-start; 878 } 879 880 .center-section { 881 justify-content: center; 882 gap: 1.5rem; 883 } 884 885 .left-section-actions { 886 justify-content: flex-start; 887 gap: 0.75rem; 888 } 889 890 .right-section-minimal { 891 justify-content: flex-end; 892 gap: 0.75rem; 893 } 894 895 /* âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 896 ð CONTACT INFORMATION 897 âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 898 899 .contact-info-group { 900 display: flex; 901 align-items: center; 902 gap: 0.75rem; 903 } 904 905 .contact-info-item { 906 display: flex; 907 align-items: center; 908 gap: 0.5rem; 909 padding: 7px 14px; 910 background: var(--white); 911 border: 1px solid #e8e8e8; 912 border-radius: 10px; 913 color: var(--text-secondary); 914 text-decoration: none; 915 font-size: 13px; 916 font-weight: 500; 917 transition: var(--transition); 918 } 919 920 .contact-info-item:hover { 921 background: #f0f9f6; 922 border-color: var(--primary-color); 923 color: var(--primary-color); 924 transform: translateY(-2px); 925 box-shadow: 0 4px 12px rgba(5, 177, 125, 0.15); 926 } 927 928 .contact-info-item .icon { 929 flex-shrink: 0; 930 } 931 932 .contact-text { 933 white-space: nowrap; 934 } 935 936 /* Social Links */ 937 .social-links-group { 938 display: flex; 939 align-items: center; 940 gap: 0.5rem; 941 } 942 943 .social-link { 944 display: flex; 945 align-items: center; 946 justify-content: center; 947 width: 32px; 948 height: 32px; 949 background: var(--white); 950 border: 1px solid #e8e8e8; 951 border-radius: 8px; 952 color: var(--text-secondary); 953 text-decoration: none; 954 font-size: 14px; 955 transition: var(--transition); 956 } 957 958 .social-link:hover { 959 background: var(--primary-color); 960 border-color: var(--primary-color); 961 color: var(--white); 962 transform: translateY(-2px); 963 } 964 965 /* âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 966 ð SEARCH BAR (LARGER, NO GREEN BUTTON) 967 âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 968 969 .top-search-bar { 970 width: 100%; 971 max-width: 600px; 972 flex: 1; 973 } 974 975 .search-input-wrapper-large { 976 display: flex; 977 align-items: center; 978 background: var(--white); 979 border: 2px solid #e8e8e8; 980 border-radius: 16px; 981 overflow: hidden; 982 transition: var(--transition); 983 height: 52px; 984 } 985 986 .search-input-wrapper-large:focus-within { 987 border-color: var(--primary-color); 988 box-shadow: 0 0 0 4px rgba(5, 177, 125, 0.1); 989 } 990 991 .search-icon { 992 margin: 0 15px; 993 color: var(--text-muted); 994 flex-shrink: 0; 995 } 996 997 .search-field-large { 998 flex: 1; 999 border: none; 1000 padding: 0 15px; 1001 font-size: 15px; 1002 font-weight: 500; 1003 color: var(--text-primary); 1004 background: transparent; 1005 outline: none; 1006 } 1007 1008 .search-field-large::placeholder { 1009 color: var(--text-muted); 1010 font-weight: 400; 1011 } 1012 1013 /* âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 1014 ð LANGUAGE & CURRENCY 1015 âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 1016 1017 .language-switcher-wrapper { 1018 position: relative; 1019 } 1020 1021 .language-switcher-form { 1022 display: flex; 1023 align-items: center; 1024 } 1025 1026 .language-dropdown { 1027 background: var(--white); 1028 border: 1px solid #e8e8e8; 1029 border-radius: 10px; 1030 padding: 6px 12px; 1031 transition: var(--transition); 1032 cursor: pointer; 1033 } 1034 1035 .language-dropdown:hover { 1036 border-color: var(--primary-color); 1037 box-shadow: 0 2px 8px rgba(5, 177, 125, 0.1); 1038 } 1039 1040 /* âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 1041 ð¯ PRIMARY CTA BUTTON 1042 âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 1043 1044 .primary-cta-btn { 1045 display: inline-flex; 1046 align-items: center; 1047 justify-content: center; 1048 gap: 0.5rem; 1049 background: linear-gradient(135deg, var(--primary-color) 0%, #0ac593 100%); 1050 color: var(--white) !important; 1051 padding: 11px 24px; 1052 border-radius: 12px; 1053 font-size: 14px; 1054 font-weight: 700; 1055 text-decoration: none; 1056 text-align: center; 1057 transition: var(--transition); 1058 box-shadow: 0 4px 12px rgba(5, 177, 125, 0.25); 1059 white-space: nowrap; 1060 position: relative; 1061 overflow: hidden; 1062 } 1063 1064 .primary-cta-btn::before { 1065 content: ''; 1066 position: absolute; 1067 top: 0; 1068 left: -100%; 1069 width: 100%; 1070 height: 100%; 1071 background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); 1072 transition: left 0.5s; 1073 } 1074 1075 .primary-cta-btn:hover::before { 1076 left: 100%; 1077 } 1078 1079 .primary-cta-btn:hover { 1080 transform: translateY(-3px); 1081 box-shadow: 0 6px 20px rgba(5, 177, 125, 0.35); 1082 } 1083 1084 .primary-cta-btn svg { 1085 flex-shrink: 0; 1086 animation: pulseIcon 2s ease-in-out infinite; 1087 } 1088
1089 @keyframes pulseIcon { 1090 1091 0%, 1092 100% { 1093 transform: scale(1); 1094 } 1095 1096 50% { 1097 transform: scale(1.1); 1098 } 1099 } 1100 1101 /* âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 1102 ð± RESPONSIVE DESIGN 1103 âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 1104 1105 /* Large Desktop */ 1106 @media (max-width: 1400px) { 1107 .top-nav-container { 1108 gap: 1rem; 1109 } 1110 } 1111 1112 /* Desktop */ 1113 @media (max-width: 1200px) { 1114 .top-nav-container { 1115 grid-template-columns: minmax(150px, 1fr) minmax(250px, 2fr) minmax(150px, 1fr); 1116 } 1117 1118 .contact-text { 1119 display: none; 1120 } 1121 1122 .btn-text { 1123 display: none; 1124 } 1125 1126 .top-search-bar { 1127 max-width: 400px; 1128 } 1129 } 1130 1131 /* Tablet */ 1132 @media (max-width: 991px) { 1133 .faisal-top-nav { 1134 padding: 10px 0; 1135 } 1136 1137 .faisal-top-nav .container-fluid { 1138 padding: 0 1rem; 1139 } 1140 1141 .top-nav-container { 1142 grid-template-columns: auto 1fr auto; 1143 gap: 0.75rem; 1144 } 1145 1146 .left-section { 1147 order: 1; 1148 } 1149 1150 .center-section { 1151 order: 3; 1152 grid-column: 1 / -1; 1153 } 1154 1155 .right-section { 1156 order: 2; 1157 } 1158 1159 .social-links-group { 1160 display: none; 1161 } 1162 1163 .top-search-bar { 1164 max-width: 100%; 1165 } 1166 1167 .search-input-wrapper { 1168 height: 42px; 1169 } 1170 } 1171 1172 /* Mobile */ 1173 @media (max-width: 768px) { 1174 .faisal-top-nav .container-fluid { 1175 padding: 0 0.75rem; 1176 } 1177 1178 .contact-info-group { 1179 display: none; 1180 } 1181 1182 .language-switcher-wrapper { 1183 display: none; 1184 } 1185 1186 .search-submit-btn { 1187 padding: 0 16px; 1188 font-size: 13px; 1189 } 1190 1191 .primary-cta-btn { 1192 padding: 10px 16px; 1193 font-size: 13px; 1194 } 1195 } 1196 1197 /* Small Mobile */ 1198 @media (max-width: 576px) { 1199 .faisal-top-nav { 1200 padding: 8px 0; 1201 } 1202 1203 .top-nav-container { 1204 gap: 0.5rem; 1205 } 1206 1207 .search-input-wrapper { 1208 height: 38px; 1209 } 1210 1211 .search-field { 1212 font-size: 13px; 1213 } 1214 1215 .search-submit-btn { 1216 padding: 0 12px; 1217 font-size: 12px; 1218 } 1219 1220 .primary-cta-btn { 1221 padding: 8px 12px; 1222 } 1223 } 1224 1225 /* âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 1226 ⨠ANIMATIONS & EFFECTS 1227 âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 1228 1229 /* Smooth scroll */ 1230 html { 1231 scroll-behavior: smooth; 1232 } 1233 1234 /* Remove tap highlight on mobile */ 1235 * { 1236 -webkit-tap-highlight-color: transparent; 1237 } 1238 1239 /* Fade in animation */ 1240 .faisal-top-nav { 1241 animation: fadeInDown 0.5s ease-out; 1242 } 1243 1244 @keyframes fadeInDown { 1245 from { 1246 opacity: 0; 1247 transform: translateY(-10px); 1248 } 1249 1250 to { 1251 opacity: 1; 1252 transform: translateY(0); 1253 } 1254 } 1255 1256 /* Loading state */ 1257 .search-field:disabled { 1258 opacity: 0.6; 1259 cursor: not-allowed; 1260 } 1261 1262 /* Focus visible for accessibility */ 1263 *:focus-visible { 1264 outline: 2px solid var(--primary-color); 1265 outline-offset: 2px; 1266 } 1267 1268 /* Print styles */ 1269 @media print { 1270 .faisal-top-nav { 1271 display: none; 1272 } 1273 } 1274</style> 1275 1276 <div id="navbarVacuum"></div> 1277 1278<!-- ⨠MODERN CLEAN NAVBAR ⨠--> 1279<nav id="navbar" class="faisal-navbar"> 1280 <!-- Main Menu with Logo --> 1281 <div class="navbar-main-level"> 1282 <div class="container-fluid"> 1283 <div class="navbar-wrapper"> 1284 1285 <!-- Logo Section --> 1286 <div class="navbar-brand-section"> 1287 <a href="/" class="brand-link"> 1288 <img src="/images/short_logo.png" class="brand-logo" alt="ALFAC"> 1289 </a> 1290 1291 </div> 1292 1293 <!-- Desktop Menu (Centered) --> 1294 <div class="navbar-menu-desktop"> 1295 <ul class="nav-links"> 1296 1297 <!-- Regular Item --> 1298 <li class="nav-item"> 1299 <a href="/" 1300 class="nav-link">Ø§ÙØµÙØØ© Ø§ÙØ±Ø¦ÙØ³ÙØ©</a> 1301 </li> 1302 1303 <!-- Custom Dropdown Item --> 1304 <li class="nav-item has-dropdown">
1305 <a href="/classes?sort=newest" class="nav-link"> 1306 Ø§ÙØ¯Ùرات 1307 <svg class="dropdown-icon" width="16" height="16" fill="none" 1308 stroke="currentColor" viewBox="0 0 24 24"> 1309 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 1310 d="M19 9l-7 7-7-7" /> 1311 </svg> 1312 </a> 1313 <ul class="dropdown-menu"> 1314 <li><a href="/classes?sort=english" 1315 class="dropdown-link">اÙÙØºØ© Ø§ÙØ¥ÙجÙÙØ²ÙØ©</a></li> 1316 <li><a href="/classes?sort=comp" 1317 class="dropdown-link">Ø§ÙØØ§Ø³Ø¨ Ø§ÙØ¢ÙÙ</a></li> 1318 <li><a href="/classes?sort=pmp" 1319 class="dropdown-link">Ø§ÙØªØ¯Ø±Ùب Ø§ÙØ¥Ø¯Ø§Ø±Ù</a></li> 1320 </ul> 1321 </li> 1322 1323 <!-- Regular Item --> 1324 <li class="nav-item"> 1325 <a href="categories/Ø§ÙØ´Ùادات-اÙÙ ÙÙÙØ©-Ø§ÙØ§ØØªØ±Ø§ÙÙØ©" 1326 class="nav-link">Ø§ÙØ´Ùادات Ø§ÙØ§ØØªØ±Ø§ÙÙØ©</a> 1327 </li> 1328 1329 <!-- Custom Dropdown Item --> 1330 <li class="nav-item has-dropdown"> 1331 <a href="categories/Ø¨Ø±ÙØ§Ù ج-Ø§ÙØ¯Ø¨ÙÙÙ " class="nav-link"> 1332 Ø§ÙØ¯Ø¨ÙÙ٠ات 1333 <svg class="dropdown-icon" width="16" height="16" fill="none" 1334 stroke="currentColor" viewBox="0 0 24 24"> 1335 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 1336 d="M19 9l-7 7-7-7" /> 1337 </svg> 1338 </a> 1339 <ul class="dropdown-menu"> 1340 <li><a href="/classes?sort=dip_it" 1341 class="dropdown-link">دبÙÙ٠ات اÙÙØºØ© Ø§ÙØ§ÙجÙÙØ²ÙØ© </a></li> 1342 <li><a href="/classes?sort=dip_it" 1343 class="dropdown-link">دبÙÙ٠ات تÙÙÙØ© </a></li> 1344 <li><a href="/classes?sort=dip_it" 1345 class="dropdown-link">دبÙÙ٠ات Ø§Ø¯Ø§Ø±ÙØ© </a></li> 1346 </ul> 1347 </li> 1348 1349 <!-- Regular Item --> 1350 <li class="nav-item"> 1351 <a href="classes?sort=exams" 1352 class="nav-link">Ø§ÙØ§Ø®ØªØ¨Ø§Ø±Ø§Øª Ø§ÙØ¯ÙÙÙØ©</a> 1353 </li> 1354 1355 <!-- Regular Item --> 1356 <li class="nav-item"> 1357 <a href="/about" 1358 class="nav-link">Ø¹Ù Ø§ÙØ£ÙادÙÙ ÙØ©</a> 1359 </li> 1360 </ul> 1361 </div> 1362 1363 <!-- Mobile Menu Toggle --> 1364 <button class="mobile-menu-btn" id="mobileMenuToggle" aria-label="Toggle menu">
1365 <span class="hamburger-line"></span> 1366 <span class="hamburger-line"></span> 1367 <span class="hamburger-line"></span> 1368 </button> 1369 1370 </div> 1371 </div> 1372 </div> 1373</nav> 1374 1375<!-- Mobile Menu Overlay --> 1376<div class="mobile-menu-overlay" id="mobileOverlay"></div> 1377 1378<!-- Mobile Menu Drawer --> 1379<div class="mobile-menu-drawer" id="mobileDrawer"> 1380 <div class="mobile-drawer-header"> 1381 <div class="mobile-logo-section"> 1382 <img src="/store/1/alfac/alfacLOGO.png" class="mobile-logo" alt="Logo"> 1383 </div> 1384 <button class="mobile-close-btn" id="mobileCloseBtn" aria-label="Close menu"> 1385 <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 1386 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> 1387 </svg> 1388 </button> 1389 </div> 1390 1391 <nav class="mobile-nav"> 1392 <ul class="mobile-nav-list"> 1393 1394 <!-- Mobile Regular Item --> 1395 <li class="mobile-nav-item"> 1396 <a href="/" 1397 class="mobile-nav-link">Ø§ÙØµÙØØ© Ø§ÙØ±Ø¦ÙØ³ÙØ©</a> 1398 </li> 1399 1400 <!-- Mobile Custom Dropdown --> 1401 <li class="mobile-nav-item has-children"> 1402 <div class="mobile-nav-parent"> 1403 <a href="/classes?sort=newest" 1404 class="mobile-nav-link">Ø§ÙØ¯Ùرات</a> 1405 <button class="mobile-dropdown-toggle" aria-label="Toggle submenu"> 1406 <svg width="20" height="20" fill="none" stroke="currentColor"
1407 viewBox="0 0 24 24"> 1408 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 1409 d="M19 9l-7 7-7-7" /> 1410 </svg> 1411 </button> 1412 </div> 1413 <ul class="mobile-submenu"> 1414 <li><a href="/classes?sort=english" 1415 class="mobile-submenu-link">اÙÙØºØ© Ø§ÙØ¥ÙجÙÙØ²ÙØ©</a></li> 1416 <li><a href="/classes?sort=comp" 1417 class="mobile-submenu-link">Ø§ÙØØ§Ø³Ø¨ Ø§ÙØ¢ÙÙ</a></li> 1418 <li><a href="/classes?sort=pmp" 1419 class="mobile-submenu-link">Ø§ÙØªØ¯Ø±Ùب Ø§ÙØ¥Ø¯Ø§Ø±Ù</a></li> 1420 </ul> 1421 </li> 1422 1423 <!-- Mobile Regular Item --> 1424 <li class="mobile-nav-item"> 1425 <a href="categories/Ø§ÙØ´Ùادات-اÙÙ ÙÙÙØ©-Ø§ÙØ§ØØªØ±Ø§ÙÙØ©" 1426 class="mobile-nav-link">Ø§ÙØ´Ùادات Ø§ÙØ§ØØªØ±Ø§ÙÙØ©</a> 1427 </li> 1428 1429 <!-- Mobile Custom Dropdown --> 1430 <li class="mobile-nav-item has-children"> 1431 <div class="mobile-nav-parent"> 1432 <a href="categories/Ø¨Ø±ÙØ§Ù ج-Ø§ÙØ¯Ø¨ÙÙÙ " 1433 class="mobile-nav-link">Ø§ÙØ¯Ø¨ÙÙ٠ات</a> 1434 <button class="mobile-dropdown-toggle" aria-label="Toggle submenu"> 1435 <svg width="20" height="20" fill="none" stroke="currentColor"
1436 viewBox="0 0 24 24"> 1437 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 1438 d="M19 9l-7 7-7-7" /> 1439 </svg> 1440 </button> 1441 </div> 1442 <ul class="mobile-submenu"> 1443 <li><a href="/classes?sort=dip_it" 1444 class="mobile-submenu-link">Ø§ÙØ¯Ø¨ÙÙ٠ات Ø§ÙØªÙÙÙØ©</a></li> 1445 </ul> 1446 </li> 1447 1448 <!-- Mobile Regular Item --> 1449 <li class="mobile-nav-item"> 1450 <a href="classes?sort=exams" 1451 class="mobile-nav-link">Ø§ÙØ§Ø®ØªØ¨Ø§Ø±Ø§Øª Ø§ÙØ¯ÙÙÙØ©</a> 1452 </li> 1453 1454 <!-- Mobile Regular Item --> 1455 <li class="mobile-nav-item"> 1456 <a href="/about" 1457 class="mobile-nav-link">Ø¹Ù Ø§ÙØ£ÙادÙÙ ÙØ©</a> 1458 </li> 1459 </ul> 1460 </nav> 1461</div> 1462 1463<style> 1464 /* âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 1465 ð PREMIUM NAVBAR - WORLD-CLASS DESIGN 1466 âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 1467 1468 /* Main Navbar */ 1469 .faisal-navbar { 1470 background: rgba(255, 255, 255, 0.98); 1471 backdrop-filter: blur(20px); 1472 box-shadow: 1473 0 4px 6px -1px rgba(0, 0, 0, 0.05), 1474 0 2px 4px -1px rgba(0, 0, 0, 0.03), 1475 0 0 0 1px rgba(0, 102, 255, 0.05); 1476 padding: 0; 1477 position: sticky; 1478 top: 0; 1479 z-index: 999999; 1480 font-family: 'Cairo', 'Inter', 'Tajawal', -apple-system, BlinkMacSystemFont, sans-serif; 1481 transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); 1482 } 1483 1484 .faisal-navbar::after { 1485 content: ''; 1486 position: absolute; 1487 bottom: 0; 1488 left: 0; 1489 right: 0; 1490 height: 2px; 1491 background: linear-gradient(90deg, transparent, #0066FF, transparent); 1492 opacity: 0; 1493 transition: opacity 0.3s ease; 1494 } 1495 1496 .faisal-navbar:hover::after { 1497 opacity: 1; 1498 } 1499 1500 .faisal-navbar .container-fluid { 1501 max-width: 1400px; 1502 margin: 0 auto; 1503 padding: 0 2rem; 1504 } 1505 1506 .navbar-wrapper { 1507 display: flex; 1508 align-items: center; 1509 justify-content: space-between; 1510 height: 75px; 1511 gap: 2rem; 1512 } 1513 1514 /* âââ Brand Section âââ */ 1515 .navbar-brand-section { 1516 display: flex; 1517 align-items: center; 1518 gap: 1rem; 1519 flex-shrink: 0; 1520 } 1521 1522 .brand-link { 1523 display: flex; 1524 align-items: center; 1525 text-decoration: none; 1526 transition: transform 0.3s ease; 1527 } 1528 1529 .brand-link:hover { 1530 transform: scale(1.05); 1531 } 1532 1533 .brand-logo { 1534 height: 50px; 1535 width: auto; 1536 object-fit: contain; 1537 } 1538 1539 .beta-tag { 1540 background: linear-gradient(135deg, #0066FF 0%, #3B82F6 100%); 1541 color: #fff; 1542 font-size: 0.75rem; 1543 font-weight: 700; 1544 padding: 0.5rem 1rem; 1545 border-radius: 9999px; 1546 white-space: nowrap; 1547 box-shadow: 1548 0 4px 12px rgba(0, 102, 255, 0.3), 1549 inset 0 1px 0 rgba(255, 255, 255, 0.2); 1550 letter-spacing: -0.01em; 1551 animation: pulse 2s ease-in-out infinite; 1552 } 1553 1554 @keyframes pulse { 1555 1556 0%, 1557 100% { 1558 box-shadow: 1559 0 4px 12px rgba(0, 102, 255, 0.3), 1560 inset 0 1px 0 rgba(255, 255, 255, 0.2); 1561 } 1562 1563 50% { 1564 box-shadow: 1565 0 6px 16px rgba(0, 102, 255, 0.4), 1566 inset 0 1px 0 rgba(255, 255, 255, 0.3); 1567 } 1568 } 1569 1570 /* âââ Desktop Menu âââ */ 1571 .navbar-menu-desktop { 1572 flex: 1; 1573 display: flex; 1574 justify-content: center; 1575 } 1576 1577 .nav-links { 1578 display: flex; 1579 align-items: center; 1580 gap: 0.5rem; 1581 list-style: none; 1582 margin: 0; 1583 padding: 0; 1584 } 1585 1586 .nav-item { 1587 position: relative; 1588 } 1589 1590 /* Extend the hoverable area to bridge the visual gap above the dropdown 1591 menu (margin-top: 0.75rem), otherwise the mouse leaves the hover zone 1592 while moving toward the menu and it closes before it can be reached. */ 1593 .nav-item.has-dropdown { 1594 padding-bottom: 0.75rem; 1595 margin-bottom: -0.75rem; 1596 } 1597 1598 .nav-link { 1599 display: flex; 1600 align-items: center; 1601 gap: 0.5rem; 1602 padding: 0.75rem 1.25rem; 1603 color: #374151; 1604 text-decoration: none; 1605 font-weight: 600; 1606 font-size: 0.9375rem; 1607 border-radius: 12px; 1608 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 1609 white-space: nowrap; 1610 cursor: pointer; 1611 position: relative; 1612 letter-spacing: -0.01em; 1613 } 1614 1615 .nav-link::before { 1616 content: ''; 1617 position: absolute; 1618 inset: 0; 1619 border-radius: 12px; 1620 background: linear-gradient(135deg, rgba(0, 102, 255, 0.1) 0%, rgba(59, 130, 246, 0.05) 100%); 1621 opacity: 0; 1622 transition: opacity 0.3s ease; 1623 } 1624 1625 .nav-link:hover { 1626 background: linear-gradient(135deg, rgba(0, 102, 255, 0.08) 0%, rgba(59, 130, 246, 0.04) 100%); 1627 color: #0066FF; 1628 transform: translateY(-2px); 1629 box-shadow: 0 4px 12px rgba(0, 102, 255, 0.15); 1630 } 1631 1632 .nav-link:hover::before { 1633 opacity: 1; 1634 } 1635 1636 .has-dropdown:hover>.nav-link { 1637 background: linear-gradient(135deg, rgba(0, 102, 255, 0.08) 0%, rgba(59, 130, 246, 0.04) 100%); 1638 color: #0066FF; 1639 } 1640 1641 .dropdown-icon { 1642 transition: transform 0.3s ease; 1643 } 1644 1645 .has-dropdown:hover .dropdown-icon { 1646 transform: rotate(180deg); 1647 } 1648 1649 /* âââ Premium Dropdown Menu Design âââ */ 1650 .faisal-navbar .nav-item.has-dropdown .dropdown-menu { 1651 position: absolute !important; 1652 top: 100% !important; 1653 right: 0 !important; 1654 left: auto !important; 1655 background: rgba(255, 255, 255, 0.98) !important; 1656 backdrop-filter: blur(20px) !important; 1657 border-radius: 16px !important; 1658 box-shadow: 1659 0 20px 40px rgba(0, 0, 0, 0.12) !important, 1660 0 10px 20px rgba(0, 102, 255, 0.08) !important, 1661 0 0 0 1px rgba(0, 102, 255, 0.1) !important; 1662 padding: 0.75rem !important; 1663 min-width: 240px !important; 1664 width: auto !important; 1665 opacity: 0 !important; 1666 visibility: hidden !important; 1667 transform: translateY(-15px) scale(0.95) !important; 1668 transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; 1669 list-style: none !important; 1670 margin: 0 !important; 1671 border: none !important; 1672 z-index: 9999999 !important; 1673 pointer-events: none !important; 1674 display: block !important; 1675 } 1676 1677 /* Show dropdown on hover */ 1678 .faisal-navbar .nav-item.has-dropdown:hover .dropdown-menu { 1679 opacity: 1 !important; 1680 visibility: visible !important; 1681 transform: translateY(0) scale(1) !important; 1682 pointer-events: auto !important; 1683 display: block !important; 1684 } 1685 1686 /* Keep dropdown visible when hovering over it */ 1687 .faisal-navbar .dropdown-menu:hover { 1688 opacity: 1 !important; 1689 visibility: visible !important; 1690 transform: translateY(0) scale(1) !important; 1691 pointer-events: auto !important; 1692 display: block !important; 1693 } 1694 1695 .faisal-navbar .dropdown-menu li { 1696 list-style: none !important; 1697 margin: 0 !important; 1698 padding: 0 !important; 1699 } 1700 1701 .faisal-navbar .dropdown-link { 1702 display: flex !important; 1703 align-items: center !important; 1704 gap: 0.75rem !important; 1705 padding: 0.875rem 1.125rem !important; 1706 color: #374151 !important; 1707 text-decoration: none !important; 1708 border-radius: 12px !important; 1709 font-size: 0.9375rem !important; 1710 font-weight: 600 !important; 1711 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; 1712 white-space: nowrap !important; 1713 position: relative !important; 1714 letter-spacing: -0.01em !important; 1715 } 1716 1717 .faisal-navbar .dropdown-link::before { 1718 content: '' !important; 1719 position: absolute !important; 1720 right: 1rem !important; 1721 width: 4px !important; 1722 height: 4px !important; 1723 background: #0066FF !important; 1724 border-radius: 50% !important; 1725 opacity: 0 !important; 1726 transform: scale(0) !important; 1727 transition: all 0.3s ease !important; 1728 } 1729 1730 .faisal-navbar .dropdown-link:hover { 1731 background: linear-gradient(135deg, rgba(0, 102, 255, 0.12) 0%, rgba(59, 130, 246, 0.08) 100%) !important; 1732 color: #0066FF !important; 1733 padding-right: 1.5rem !important; 1734 transform: translateX(-4px) !important; 1735 box-shadow: 0 4px 12px rgba(0, 102, 255, 0.1) !important; 1736 } 1737 1738 .faisal-navbar .dropdown-link:hover::before { 1739 opacity: 1 !important; 1740 transform: scale(1) !important; 1741 } 1742 1743 .faisal-navbar .dropdown-link:hover { 1744 background: #f0f9f6 !important; 1745 color: #05b17d !important; 1746 padding-right: 20px !important; 1747 transform: translateX(-4px) !important; 1748 } 1749 1750 /* âââ Mobile Menu Button - Premium âââ */ 1751 .mobile-menu-btn { 1752 display: none; 1753 flex-direction: column; 1754 gap: 6px; 1755 background: linear-gradient(135deg, rgba(0, 102, 255, 0.08) 0%, rgba(59, 130, 246, 0.04) 100%); 1756 border: none; 1757 cursor: pointer; 1758 padding: 0.75rem; 1759 z-index: 1001; 1760 border-radius: 12px; 1761 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 1762 box-shadow: 0 2px 8px rgba(0, 102, 255, 0.1); 1763 } 1764 1765 .mobile-menu-btn:hover { 1766 background: linear-gradient(135deg, rgba(0, 102, 255, 0.12) 0%, rgba(59, 130, 246, 0.08) 100%); 1767 box-shadow: 0 4px 12px rgba(0, 102, 255, 0.2); 1768 transform: scale(1.05); 1769 } 1770 1771 .hamburger-line { 1772 width: 26px; 1773 height: 3px; 1774 background: linear-gradient(90deg, #0066FF 0%, #3B82F6 100%); 1775 border-radius: 3px; 1776 transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); 1777 } 1778 1779 .mobile-menu-btn.active .hamburger-line:nth-child(1) { 1780 transform: rotate(45deg) translateY(9px); 1781 background: #0066FF; 1782 } 1783 1784 .mobile-menu-btn.active .hamburger-line:nth-child(2) { 1785 opacity: 0; 1786 transform: scale(0); 1787 } 1788 1789 .mobile-menu-btn.active .hamburger-line:nth-child(3) { 1790 transform: rotate(-45deg) translateY(-9px); 1791 background: #0066FF; 1792 } 1793 1794 /* âââ Mobile Menu Overlay - Premium âââ */ 1795 .mobile-menu-overlay { 1796 display: none; 1797 position: fixed; 1798 inset: 0; 1799 background: rgba(15, 23, 42, 0.7); 1800 backdrop-filter: blur(8px); 1801 z-index: 10000; 1802 opacity: 0; 1803 transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1); 1804 } 1805 1806 .mobile-menu-overlay.active { 1807 opacity: 1; 1808 } 1809 1810 /* âââ Mobile Menu Drawer - Premium âââ */ 1811 .mobile-menu-drawer { 1812 display: none; 1813 position: fixed; 1814 top: 0; 1815 right: -100%; 1816 width: 90%; 1817 max-width: 420px; 1818 height: 100vh; 1819 background: linear-gradient(180deg, #FFFFFF 0%, #F9FAFB 100%); 1820 z-index: 10001; 1821 transition: right 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); 1822 overflow-y: auto; 1823 box-shadow: 1824 -10px 0 40px rgba(0, 0, 0, 0.15), 1825 -5px 0 20px rgba(0, 102, 255, 0.1); 1826 } 1827 1828 .mobile-menu-drawer.active { 1829 right: 0; 1830 } 1831 1832 .mobile-drawer-header { 1833 display: flex; 1834 align-items: center; 1835 justify-content: space-between; 1836 padding: 1.75rem 1.5rem; 1837 border-bottom: 2px solid rgba(0, 102, 255, 0.1); 1838 background: linear-gradient(135deg, 1839 rgba(0, 102, 255, 0.05) 0%, 1840 rgba(59, 130, 246, 0.02) 50%, 1841 rgba(255, 255, 255, 1) 100%); 1842 backdrop-filter: blur(10px); 1843 } 1844 1845 .mobile-logo-section { 1846 flex: 1; 1847 } 1848 1849 .mobile-logo { 1850 height: 40px; 1851 width: auto; 1852 object-fit: contain; 1853 } 1854 1855 .mobile-close-btn { 1856 background: linear-gradient(135deg, rgba(0, 102, 255, 0.1) 0%, rgba(59, 130, 246, 0.05) 100%); 1857 border: 2px solid rgba(0, 102, 255, 0.2); 1858 width: 44px; 1859 height: 44px; 1860 border-radius: 50%; 1861 display: flex; 1862 align-items: center; 1863 justify-content: center; 1864 cursor: pointer; 1865 transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); 1866 box-shadow: 0 4px 12px rgba(0, 102, 255, 0.15); 1867 } 1868 1869 .mobile-close-btn:hover { 1870 background: linear-gradient(135deg, #0066FF 0%, #3B82F6 100%); 1871 transform: rotate(90deg) scale(1.1); 1872 box-shadow: 0 6px 16px rgba(0, 102, 255, 0.3); 1873 } 1874 1875 .mobile-close-btn svg { 1876 color: #0066FF; 1877 transition: color 0.3s ease; 1878 } 1879 1880 .mobile-close-btn:hover svg { 1881 color: #FFFFFF; 1882 } 1883 1884 /* Mobile Navigation */ 1885 .mobile-nav { 1886 padding: 1rem 0; 1887 } 1888 1889 .mobile-nav-list { 1890 list-style: none; 1891 margin: 0; 1892 padding: 0; 1893 } 1894 1895 .mobile-nav-item { 1896 border-bottom: 1px solid rgba(0, 102, 255, 0.08); 1897 transition: all 0.3s ease; 1898 } 1899 1900 .mobile-nav-item:hover { 1901 background: rgba(0, 102, 255, 0.02); 1902 } 1903 1904 .mobile-nav-parent { 1905 display: flex; 1906 align-items: center; 1907 justify-content: space-between; 1908 } 1909 1910 .mobile-nav-link { 1911 display: block; 1912 padding: 1.125rem 1.5rem; 1913 color: #374151; 1914 text-decoration: none; 1915 font-weight: 600; 1916 font-size: 1rem; 1917 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 1918 flex: 1; 1919 letter-spacing: -0.01em; 1920 } 1921 1922 .mobile-nav-link:hover { 1923 background: linear-gradient(90deg, rgba(0, 102, 255, 0.08) 0%, transparent 100%); 1924 color: #0066FF; 1925 padding-right: 2rem; 1926 border-right: 3px solid #0066FF; 1927 } 1928 1929 .mobile-dropdown-toggle { 1930 background: transparent; 1931 border: none; 1932 padding: 1rem 1.25rem; 1933 cursor: pointer; 1934 color: #6B7280; 1935 transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); 1936 border-radius: 8px; 1937 } 1938 1939 .mobile-dropdown-toggle:hover { 1940 background: rgba(0, 102, 255, 0.1); 1941 color: #0066FF; 1942 } 1943 1944 .mobile-dropdown-toggle svg { 1945 transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); 1946 } 1947 1948 .mobile-nav-item.active .mobile-dropdown-toggle svg { 1949 transform: rotate(180deg); 1950 color: #0066FF; 1951 } 1952 1953 .mobile-submenu { 1954 list-style: none; 1955 background: linear-gradient(135deg, rgba(0, 102, 255, 0.03) 0%, rgba(59, 130, 246, 0.02) 100%); 1956 max-height: 0; 1957 overflow: hidden; 1958 transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1); 1959 border-left: 3px solid rgba(0, 102, 255, 0.2); 1960 margin: 0 0.75rem; 1961 border-radius: 0 12px 12px 0; 1962 } 1963 1964 .mobile-nav-item.active .mobile-submenu { 1965 max-height: 600px; 1966 } 1967 1968 .mobile-submenu-link { 1969 display: flex; 1970 align-items: center; 1971 gap: 0.75rem; 1972 padding: 1rem 1.25rem 1rem 2.5rem; 1973 color: #6B7280; 1974 text-decoration: none; 1975 font-size: 0.9375rem; 1976 font-weight: 500; 1977 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 1978 border-right: 3px solid transparent; 1979 position: relative; 1980 } 1981 1982 .mobile-submenu-link::before {
1982 1983 content: ''; 1984 position: absolute; 1985 left: 1.5rem; 1986 width: 6px; 1987 height: 6px; 1988 background: #0066FF; 1989 border-radius: 50%; 1990 opacity: 0; 1991 transform: scale(0); 1992 transition: all 0.3s ease; 1993 } 1994 1995 .mobile-submenu-link:hover { 1996 background: rgba(0, 102, 255, 0.08); 1997 color: #0066FF; 1998 border-right: 3px solid #0066FF; 1999 padding-left: 2.75rem; 2000 } 2001 2002 .mobile-submenu-link:hover::before { 2003 opacity: 1; 2004 transform: scale(1); 2005 } 2006 2007 /* âââ PREMIUM RESPONSIVE DESIGN âââ */ 2008 2009 /* Desktop: Show desktop menu, hide mobile elements */ 2010 @media (min-width: 992px) { 2011 .mobile-menu-btn { 2012 display: none !important; 2013 } 2014 2015 .mobile-menu-overlay { 2016 display: none !important; 2017 } 2018 2019 .mobile-menu-drawer { 2020 display: none !important; 2021 } 2022 } 2023 2024 /* Mobile/Tablet: Hide desktop menu, show mobile button */ 2025 @media (max-width: 991px) { 2026 .navbar-menu-desktop { 2027 display: none !important; 2028 } 2029 2030 .mobile-menu-btn { 2031 display: flex !important; 2032 } 2033 2034 /* Only show overlay when active */ 2035 .mobile-menu-overlay.active { 2036 display: block !important; 2037 } 2038 2039 .mobile-menu-drawer { 2040 display: block !important; 2041 } 2042 2043 .faisal-navbar .container-fluid { 2044 padding: 0 1rem; 2045 } 2046 2047 .navbar-wrapper { 2048 height: 70px; 2049 } 2050 2051 .brand-logo { 2052 height: 45px; 2053 } 2054 2055 .beta-tag { 2056 font-size: 0.6875rem; 2057 padding: 0.375rem 0.75rem; 2058 } 2059 2060 .beta-tag { 2061 font-size: 0.6875rem; 2062 padding: 0.375rem 0.75rem; 2063 } 2064 } 2065 2066 @media (max-width: 480px) { 2067 .faisal-navbar .container-fluid { 2068 padding: 0 0.875rem; 2069 } 2070 2071 .navbar-wrapper { 2072 height: 65px; 2073 gap: 0.875rem; 2074 } 2075 2076 .brand-logo { 2077 height: 38px; 2078 } 2079 2080 .beta-tag { 2081 font-size: 0.625rem; 2082 padding: 0.3125rem 0.625rem; 2083 } 2084 2085 .mobile-menu-drawer { 2086 width: 95%; 2087 max-width: 100%; 2088 } 2089 } 2090 2091 /* Premium Scroll Effects */ 2092 .faisal-navbar.scrolled { 2093 box-shadow: 2094 0 8px 16px -4px rgba(0, 0, 0, 0.08), 2095 0 4px 8px -2px rgba(0, 0, 0, 0.04), 2096 0 0 0 1px rgba(0, 102, 255, 0.1); 2097 } 2098 2099 body.menu-open { 2100 overflow: hidden; 2101 } 2102 2103 html { 2104 scroll-behavior: smooth; 2105 } 2106 2107 .nav-link.active, 2108 .mobile-nav-link.active { 2109 background: linear-gradient(135deg, rgba(0, 102, 255, 0.12) 0%, rgba(59, 130, 246, 0.08) 100%); 2110 color: #0066FF; 2111 font-weight: 700; 2112 box-shadow: 0 4px 12px rgba(0, 102, 255, 0.2); 2113 } 2114</style> 2115
2116<script> 2117 /* âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 2118 ð PREMIUM NAVBAR JAVASCRIPT - 60 FPS OPTIMIZED 2119 âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 2120 2121 document.addEventListener('DOMContentLoaded', function() { 2122 'use strict'; 2123 2124 // Cache DOM elements 2125 const navbar = document.querySelector('.faisal-navbar'); 2126 const mobileMenuBtn = document.getElementById('mobileMenuToggle'); 2127 const mobileOverlay = document.getElementById('mobileOverlay'); 2128 const mobileDrawer = document.getElementById('mobileDrawer'); 2129 const mobileCloseBtn = document.getElementById('mobileCloseBtn'); 2130 const body = document.body; 2131 const dropdownToggles = document.querySelectorAll('.mobile-dropdown-toggle'); 2132 2133 // Premium scroll handler with RAF optimization 2134 let lastScrollY = window.scrollY; 2135 let ticking = false; 2136 2137 function updateNavbarOnScroll() { 2138 lastScrollY = window.scrollY; 2139 2140 if (lastScrollY > 50) { 2141 navbar?.classList.add('scrolled'); 2142 } else { 2143 navbar?.classList.remove('scrolled'); 2144 } 2145 2146 ticking = false; 2147 } 2148 2149 window.addEventListener('scroll', function() { 2150 if (!ticking) { 2151 window.requestAnimationFrame(updateNavbarOnScroll); 2152 ticking = true; 2153 } 2154 }, { 2155 passive: true 2156 }); 2157 2158 // Premium mobile menu functions with smooth animations 2159 function openMobileMenu() { 2160 mobileMenuBtn?.classList.add('active'); 2161 2162 requestAnimationFrame(() => { 2163 mobileOverlay?.classList.add('active'); 2164 requestAnimationFrame(() => { 2165 mobileDrawer?.classList.add('active'); 2166 body.classList.add('menu-open'); 2167 }); 2168 }); 2169 } 2170 2171 function closeMobileMenu() { 2172 mobileDrawer?.classList.remove('active'); 2173 2174 setTimeout(() => { 2175 mobileOverlay?.classList.remove('active'); 2176 mobileMenuBtn?.classList.remove('active'); 2177 body.classList.remove('menu-open'); 2178 }, 300); 2179 } 2180 2181 // Event listeners with debouncing 2182 mobileMenuBtn?.addEventListener('click', openMobileMenu); 2183 mobileCloseBtn?.addEventListener('click', closeMobileMenu); 2184 mobileOverlay?.addEventListener('click', closeMobileMenu); 2185 2186 // ESC key handler 2187 document.addEventListener('keydown', function(e) { 2188 if (e.key === 'Escape' && mobileDrawer?.classList.contains('active')) { 2189 closeMobileMenu(); 2190 } 2191 }); 2192 2193 // Premium mobile dropdown with smooth accordion 2194 dropdownToggles.forEach(function(toggle) { 2195 toggle.addEventListener('click', function(e) { 2196 e.preventDefault(); 2197 e.stopPropagation(); 2198 2199 const parentItem = this.closest('.mobile-nav-item'); 2200 const isActive = parentItem.classList.contains('active'); 2201 2202 // Close other dropdowns with animation 2203 document.querySelectorAll('.mobile-nav-item.active').forEach(function(item) { 2204 if (item !== parentItem) { 2205 item.classList.remove('active'); 2206 } 2207 }); 2208 2209 // Toggle current with smooth animation 2210 parentItem.classList.toggle('active'); 2211 }); 2212 }); 2213 2214 // Responsive handler with debouncing 2215 let resizeTimer; 2216 window.addEventListener('resize', function() { 2217 clearTimeout(resizeTimer); 2218 resizeTimer = setTimeout(function() { 2219 if (window.innerWidth > 991 && mobileDrawer?.classList.contains('active')) { 2220 closeMobileMenu(); 2221 } 2222 }, 250); 2223 }); 2224 2225 // Premium active link highlighting 2226 const currentPath = window.location.pathname; 2227 document.querySelectorAll('.nav-link, .mobile-nav-link').forEach(function(link) { 2228 if (link.getAttribute('href') === currentPath) { 2229 link.classList.add('active'); 2230 } 2231 }); 2232 2233 }); 2234</script>
2234 2235 2236 2237 <div class="container"> 2238 2239 <div class="row login-container"> 2240 2241 <div class="col-12 col-md-6 pl-0"> 2242 <img src="/store/1/alfac/l.jpg" class="img-cover" alt="Login"> 2243 </div> 2244 <div class="col-12 col-md-6"> 2245 <div class="login-card"> 2246 <h1 class="font-20 font-weight-bold">Ù٠بتسجÙÙ Ø§ÙØ¯Ø®Ù٠إÙÙ ØØ³Ø§Ø¨Ù</h1> 2247 2248 <form method="Post" action="/login" class="mt-35"> 2249 <input type="hidden" name="_token" value="FfGJ4SYsegEaMTBCuTd4VyHJGqPbkvn4IKfB5A8C"> 2250 2251 <div class="d-flex align-items-center wizard-custom-radio mb-20"> 2252 <div class="wizard-custom-radio-item flex-grow-1"> 2253 <input type="radio" name="type" value="email" id="emailType" class="" checked> 2254 <label class="font-12 cursor-pointer px-15 py-10" for="emailType">Ø§ÙØ¨Ø±Ùد Ø§ÙØ¥ÙÙØªØ±ÙÙÙ</label> 2255 </div> 2256 2257 <div class="wizard-custom-radio-item flex-grow-1"> 2258 <input type="radio" name="type" value="mobile" id="mobileType" class="" > 2259 <label class="font-12 cursor-pointer px-15 py-10" for="mobileType">ÙØ§ØªÙ</label> 2260 </div> 2261 </div> 2262 2263 <div class="js-email-fields form-group "> 2264 <label class="input-label" for="email">Ø§ÙØ¨Ø±Ùد Ø§ÙØ¥ÙÙØªØ±ÙÙÙ:</label> 2265 <input name="email" type="email" class="form-control " id="email" 2266 value="" aria-describedby="emailHelp"> 2267 </div> 2268 2269 2270 <div class="js-mobile-fields d-none"> 2271 <div class="row"> 2272 <div class="col-5"> 2273 <div class="form-group"> 2274 <label class="input-label" for="mobile">دÙÙØ©:</label> 2275 <select name="country_code" class="form-control select2"> 2276 2277 <option value="+966" selected>Ø§ÙØ³Ø¹ÙØ¯ÙØ© (+966)</option> 2278 2279 </select> 2280 2281 </div> 2282 </div> 2283 2284 <div class="col-7"> 2285 <div class="form-group"> 2286 <label class="input-label" for="mobile">Ø§ÙØ¬Ùا٠2287 :</label> 2288 <input name="mobile" type="text" class="form-control " 2289 value="" placeholder="5xxxxxxxx"id="mobile" aria-describedby="mobileHelp"> 2290 2291 </div> 2292 </div> 2293</div> 2294 </div> 2295 2296 2297 2298 <div class="form-group"> 2299 <label class="input-label" for="password">ÙÙÙ Ø© اÙÙ Ø±ÙØ±:</label> 2300 <input name="password" type="password" 2301 class="form-control " id="password" 2302 aria-describedby="passwordHelp"> 2303 2304 </div> 2305 2306 2307 <button type="submit" class="btn btn-primary btn-block mt-20">تسجÙÙ Ø§ÙØ¯Ø®ÙÙ</button> 2308 </form> 2309 2310 2311 <div class="text-center mt-20"> 2312 <span 2313 class="badge badge-circle-gray300 text-secondary d-inline-flex align-items-center justify-content-center">Ø£Ù</span> 2314 </div> 2315 2316 <a href="/google" target="_blank" 2317 class="social-login mt-20 p-10 text-center d-flex align-items-center justify-content-center"> 2318 <img src="/assets/default/img/auth/google.svg" class="mr-auto" alt=" google svg" /> 2319 <span class="flex-grow-1">تسجÙÙ Ø§ÙØ¯Ø®ÙÙ Ø¨ØØ³Ø§Ø¨ Google</span> 2320 </a> 2321 2322 2323 2324 <div class="mt-30 text-center"> 2325 <a href="/forget-password" target="_blank">ÙØ³Ùت ÙÙÙ Ø© Ø§ÙØ³Ø±Ø</a> 2326 </div> 2327 2328 <div class="mt-20 text-center"> 2329 <span>ÙÙØ³ ÙØ¯ÙÙ ØØ³Ø§Ø¨Ø</span> 2330 <a href="/register" class="text-secondary font-weight-bold">اشتراÙ</a> 2331 </div> 2332 </div> 2333 </div> 2334 </div> 2335 </div> 2336 2337 <footer class="footer position-relative bg-dark"> 2338 <br><br> 2339 <div class="container"> 2340 <div class="row"> 2341 <div class="col-6 col-md-3"> 2342
2343 <span 2344 class="header d-block text-white font-weight-bold">٠عÙÙ٠ات Ø¹ÙØ§</span> 2345 2346 <div class="mt-20"> 2347 <p data-pm-slice="0 0 []"><font color="#ffffff">ALFAC LMS ÙÙ ÙØ¸Ø§Ù إدارة تعÙÙ ÙØ§Ù ٠اÙÙ ÙØ²Ø§Øª ÙØ³Ø§Ø¹Ø¯Ù عÙ٠إدارة أع٠اÙÙ Ø§ÙØªØ¹ÙÙÙ ÙØ© Ù٠عدة ساعات. تساعد ÙØ°Ù اÙÙ ÙØµØ© اÙ٠عÙÙ Ù٠عÙÙ Ø¥ÙØ´Ø§Ø¡ Ù ÙØ§Ø¯ تعÙÙÙ ÙØ© Ø§ØØªØ±Ø§ÙÙØ© ÙØªØ³Ø§Ø¹Ø¯ Ø§ÙØ·Ùاب عÙÙ Ø§ÙØªØ¹ÙÙ Ù Ù Ø£ÙØ¶Ù اÙ٠دربÙÙ.</font></p> 2348 </div> 2349 </div> 2350 2351 <div class="col-6 col-md-3"> 2352 2353 <span 2354 class="header d-block text-white font-weight-bold">Ø´Ø±ÙØ§Ø¦Ùا</span> 2355 2356 <div class="mt-20"> 2357 <p><img style="width: 100%;" src="/store/1/alfac/white__logo.svg"></p><p><img style="width: 100%;" src="/store/1/fonts/nelc-horizontal-white.png"><br><br></p><p><br></p> 2358 </div> 2359 </div> 2360 2361 <div class="col-6 col-md-3"> 2362 2363 2364 <div class="mt-20"> 2365 <br> 2366 </div> 2367 </div> 2368 2369 <div class="col-6 col-md-3"> 2370 2371 <span 2372 class="header d-block text-white font-weight-bold">Alfac LMS</span> 2373 2374 <div class="mt-20"> 2375 <p><img src="/store/1/so/ALFAC.png" style="width: 80%;"><br></p> 2376 </div> 2377 </div> 2378 2379 </div> 2380 2381 2382 <div class="row mt-30"> 2383 <div class="col-12"> 2384 <span class="header d-block text-white font-weight-bold mb-15">Ø§ÙØ³Ùاسات</span> 2385 <div class="d-flex flex-wrap" style="gap: 8px 20px;"> 2386 <a href="/policies#privacy" class="text-white font-14" style="opacity:0.8;"> 2387 <i data-feather="lock" width="14" height="14" class="mr-5"></i> 2388 Ø³ÙØ§Ø³Ø© Ø§ÙØ®ØµÙØµÙØ© 2389 </a> 2390 <a href="/policies#integrity" class="text-white font-14" style="opacity:0.8;"> 2391 <i data-feather="shield" width="14" height="14" class="mr-5"></i> 2392 اÙÙØ²Ø§ÙØ© Ø§ÙØ£ÙادÙÙ ÙØ© 2393 </a> 2394 <a href="/policies#attendance" class="text-white font-14" style="opacity:0.8;"> 2395 <i data-feather="user-check" width="14" height="14" class="mr-5"></i> 2396 Ø§ÙØØ¶ÙØ± ÙØ§Ùاختبارات 2397 </a> 2398 <a href="/policies#communication" class="text-white font-14" style="opacity:0.8;"> 2399 <i data-feather="message-circle" width="14" height="14" class="mr-5"></i> 2400 Ø³ÙØ§Ø³Ø© Ø§ÙØªÙاص٠2401 </a> 2402 <a href="/policies#instructor-guide" class="text-white font-14" style="opacity:0.8;"> 2403 <i data-feather="book-open" width="14" height="14" class="mr-5"></i> 2404 دÙÙ٠اÙ٠درب 2405 </a> 2406 <a href="/policies#student-guide" class="text-white font-14" style="opacity:0.8;"> 2407 <i data-feather="user" width="14" height="14" class="mr-5"></i> 2408 دÙÙ٠اÙ٠تدرب 2409 </a> 2410 <a href="/policies#team-structure" class="text-white font-14" style="opacity:0.8;"> 2411 <i data-feather="users" width="14" height="14" class="mr-5"></i> 2412 اÙÙÙÙÙ Ø§ÙØªÙظÙÙ Ù 2413 </a> 2414 </div> 2415 </div> 2416 </div> 2417 2418 <div class="mt-40 border-blue py-25"> 2419 2420 2421 <div class="d-flex align-items-center justify-content-between flex-wrap" style="gap:16px;"> 2422 <div class="footer-logo"> 2423 <a href="/"> 2424 <img src="https://alfac.edu.sa/store/1/so/ALFAC.png" class="img-cover" alt="ALFAC logo"> 2425 </a> 2426 </div> 2427 2428 2429 <div class="footer-payment d-flex align-items-center flex-wrap my-2" style="gap: 10px;"> 2430 <img src="https://alfac.edu.sa/assets/default/img/payment/visa.svg" alt="Visa" 2431 style="height: 28px; width: auto; background: white; padding: 4px 8px; border-radius: 4px;"> 2432 <img src="https://alfac.edu.sa/assets/default/img/payment/master.svg" alt="MasterCard" 2433 style="height: 28px; width: auto; background: white; padding: 4px 8px; border-radius: 4px;"> 2434 <img src="https://alfac.edu.sa/assets/default/img/payment/mada.svg" alt="Mada" 2435 style="height: 28px; width: auto; background: white; padding: 4px 8px; border-radius: 4px;"> 2436 <img src="https://alfac.edu.sa/assets/default/img/payment/tamara.svg" alt="Tamara" 2437 style="height: 28px; width: auto; background: white; padding: 4px 8px; border-radius: 4px;"> 2438 <img src="https://alfac.edu.sa/assets/default/img/payment/jeelpay.svg" alt="Jeel Pay" 2439 style="height: 28px; width: auto; background: white; padding: 4px 8px; border-radius: 4px;"> 2440 <img src="https://alfac.edu.sa/assets/default/img/payment/apple-pay.svg" alt="Apple Pay" 2441 style="height: 28px; width: auto; background: white; padding: 4px 8px; border-radius: 4px;"> 2442 </div> 2443 2444 <div class="footer-social"> 2445 <a href="https://www.instagram.com/alfaisalac/?utm_source=ig_web_button_share_sheet&igsh=ZDNlZDc0MzIxNw%3D%3D"> 2446 <img src="/store/1/default_images/social/instagram.svg" alt="Instagram" class="mr-15"> 2447 </a> 2448 <a href="https://x.com/AlfaisalAC?s=20"> 2449 <img src="/store/1/so/icons8-x-50 (1).png" alt="X" class="mr-15"> 2450 </a> 2451 <a href="https://www.linkedin.com/company/alfaisalacademy"> 2452 <img src="/store/1/so/icons8-in-50.png" alt="Linkedin" class="mr-15"> 2453 </a> 2454 <a href="https://www.tiktok.com/@alfaisalac?is_from_webapp=1&sender_device=pc"> 2455 <img src="/store/1/so/icons8-tiktok-50.png" alt="Tiktok" class="mr-15"> 2456 </a> 2457 </div> 2458 2459 </div> 2460 </div> 2461 </div> 2462 2463 <div class="footer-copyright container d-flex align-items-center justify-content-between py-15 flex-wrap"> 2464 <div class="font-14 text-white">© 2026 All Rights Reserved.</div> 2465 2466 2467 <div class="d-flex align-items-center my-2"> 2468 <iframe 2469 src="https://services.futurex.sa/entity-badge?code=c8iT1bAMaztRVXLY" 2470 width="250" 2471 height="60" 2472 referrerpolicy="unsafe-url" 2473 style="border: none;" 2474 title="NELC Verified Entity" 2475 loading="lazy"></iframe> 2476 </div> 2477 2478 <div class="font-14 text-white" style="user-select: text;" > 2479 <a href="tel:920000840" class="text-white" style="text-decoration: none;" dir="ltr"> 2480 920000840 2481 </a> 2482 | 2483 <a href="tel:+966920000840" class="text-white" style="text-decoration: none;" dir="ltr"> 2484 +966 920000840 2485 </a> 2486 | 2487 <a href="mailto:[email protected]" class="text-white" 2488 style="text-decoration: none;"> 2489 [email protected] 2490 </a> 2491 </div> 2492 </div> 2493 2494</footer> 2495 2496 <div class="d-none" id="advertisingModalSettings"> 2497 <div class="d-flex align-items-center justify-content-between"> 2498 <h3 class="section-title font-16 text-dark-blue mb-10">
2498ÙÙØªØ±Ø© Ù ØØ¯Ùدة</h3> 2499 2500 <button type="button" class="btn-close-advertising-modal close-swl btn-transparent d-flex"> 2501 <i data-feather="x" width="25" height="25" class=""></i> 2502 </button> 2503 </div> 2504 2505 <div class="d-flex align-items-center justify-content-center"> 2506 <img src="/store/1/Ù ÙÙÙÙ _اختبار_اÙÙØ¯Ø±Ø§Øª_Ø§ÙØ¹Ø§Ù Ø©_GAT_(Ø§ÙØ³Ø¹ÙØ¯ÙØ©).jpg" class="img-fluid rounded-lg" alt="ÙÙØªØ±Ø© Ù ØØ¯Ùدة"> 2507 </div> 2508 2509 <p class="font-14 text-gray mt-20">عرض خاص 2510اختبار ØªØØ¯Ùد اÙ٠ستÙÙ 100% ٠جاÙÙ ÙÙØªØ±Ø© Ù ØØ¯Ùدة</p> 2511 2512 <div class="row align-items-center mt-20"> 2513 <div class="col-6"> 2514 <a href="https://alfac.edu.sa/level" class="btn btn-primary btn-sm btn-block">اغتÙ٠اÙÙØ±ØµØ©</a> 2515 </div> 2516 2517 <div class="col-6"> 2518 <a href="https://alfac.edu.sa/level" class="btn btn-outline-primary btn-sm btn-block">عرض Ø§ÙØ¯Ùرات</a> 2519 </div> 2520 </div> 2521 </div> 2522 2523 </div> 2524 <!-- Template JS File --> 2525
2525<script src="/assets/default/js/app.js"></script>
2525 2526
2526<script src="/assets/default/vendors/feather-icons/dist/feather.min.js"></script>
2526 2527
2527<script src="/assets/default/vendors/moment.min.js"></script>
2527 2528
2528<script src="/assets/default/vendors/sweetalert2/dist/sweetalert2.min.js"></script>
2528 2529
2529<script src="/assets/default/vendors/toast/jquery.toast.min.js"></script>
2529 2530
2530<script type="text/javascript" src="/assets/default/vendors/simplebar/simplebar.min.js"></script>
2530 2531 2532 2533 2534
2534<script> 2535 var deleteAlertTitle = 'ÙÙ Ø£ÙØª ÙØ§Ø«ÙØ'; 2536 var deleteAlertHint = 'ÙØ§ ÙÙ ÙÙ Ø§ÙØªØ±Ø§Ø¬Ø¹ Ø¹Ù ÙØ°Ø§ Ø§ÙØ¥Ø¬Ø±Ø§Ø¡!'; 2537 var deleteAlertConfirm = 'ØØ°Ù'; 2538 var deleteAlertCancel = 'Ø§ÙØºØ§Ø¡'; 2539 var deleteAlertSuccess = 'اÙÙØ¬Ø§Ø'; 2540 var deleteAlertFail = 'ÙØ´Ù'; 2541 var deleteAlertFailHint = 'خطأ Ø£Ø«ÙØ§Ø¡ ØØ°Ù Ø§ÙØ¹Ùصر!'; 2542 var deleteAlertSuccessHint = 'ØªÙ ØØ°Ù Ø§ÙØ¹Ùصر Ø¨ÙØ¬Ø§Ø.'; 2543 var forbiddenRequestToastTitleLang = 'Ø·ÙØ¨"Ù Ù ÙÙØ¹" '; 2544 var forbiddenRequestToastMsgLang = 'ØºÙØ± Ù Ø³Ù ÙØ Ù٠باÙÙÙÙØ¬ ÙÙØ°Ø§ اÙÙ ØØªÙÙ'; 2545 </script>
2545 2546 2547 2548 2549
2549<script src="/assets/default/vendors/select2/select2.min.js"></script>
2549 2550
2550<script src="/assets/default/js/parts/forgot_password.min.js"></script>
2550 2551 <link href="/assets/default/vendors/flagstrap/css/flags.css" rel="stylesheet"> 2552
2552<script src="/assets/default/vendors/flagstrap/js/jquery.flagstrap.min.js"></script>
2552 2553
2553<script src="/assets/default/js/parts/top_nav_flags.min.js"></script>
2553 2554 2555
2555<script> 2556 // Simple and fast search functionality 2557 document.addEventListener('DOMContentLoaded', function() { 2558 const searchForm = document.querySelector('.top-search-bar'); 2559 const searchField = document.querySelector('.search-field-large'); 2560 2561 if (searchForm && searchField) { 2562 searchForm.addEventListener('submit', function(e) { 2563 if (searchField.value.trim() === '') { 2564 e.preventDefault(); 2565 searchField.focus(); 2566 } 2567 }); 2568 } 2569 }); 2570 </script>
2570 2571 2572
2572<script src="/assets/default/js/parts/main.min.js"></script>
2572 2573 2574
2574<script> 2575 2576 2577 </script>
2577 2578 2579 2580
2580<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
2580 2581 2582 2583 2584 <!-- تسجÙÙ Ø§ÙØ¯Ø®Ù٠عبر Ø§ÙØ¨Ø±Ùد ÙØ§ÙÙØ§ØªÙ --> 2585 <div class="modal fade" id="otpLoginModal" tabindex="-1" aria-hidden="true"> 2586 <div class="modal-dialog modal-dialog-centered"> 2587 <div class="modal-content modern-login-modal"> 2588 2589 <!-- Background Pattern --> 2590 <div class="modal-bg-pattern"></div> 2591 2592 <!-- Header --> 2593 <div class="modal-header modern-header"> 2594 <div class="login-icon"> 2595 <i class="fas fa-user-shield"></i> 2596 </div> 2597 <h5 class="modal-title">تسجÙÙ Ø§ÙØ¯Ø®ÙÙ</h5> 2598 <p class="modal-subtitle">Ù Ø±ØØ¨Ø§Ù ب٠ÙÙ Ø£ÙØ§Ø¯ÙÙ ÙØ© اÙÙÙØµÙ Ø§ÙØ¹Ø§ÙÙ ÙØ©</p> 2599 <button type="button" class="btn-close modern-close" data-bs-dismiss="modal"></button> 2600 </div> 2601 2602 <div class="modal-body modern-body"> 2603 2604 <!-- Google Login --> 2605 <div class="social-login-section"> 2606 <a href="/google" class="google-login-btn"> 2607 <div class="google-icon"> 2608 <img src="https://developers.google.com/identity/images/g-logo.png" alt="Google logo" 2609 width="20"> 2610 2611 </div> 2612 <span>تسجÙÙ Ø§ÙØ¯Ø®ÙÙ Ø¨ÙØ§Ø³Ø·Ø© Google</span> 2613 </a> 2614 </div> 2615 2616 <div class="divider-section"> 2617 <div class="divider-line"></div> 2618 <span class="divider-text">Ø£Ù Ø§ÙØ¯Ø®ÙÙ Ø¨Ø§Ø³ØªØ®Ø¯Ø§Ù Ø§ÙØ¨Ø±Ùد ÙØ±ÙÙ Ø§ÙØ¬ÙاÙ</span> 2619 <div class="divider-line"></div> 2620 </div> 2621 2622 <!-- Step 1: Email + Phone --> 2623 <form id="otpLoginForm" class="login-form"> 2624 2625 <div class="form-group"> 2626 <label class="form-label"> 2627 <i class="fas fa-envelope form-icon"></i> 2628 Ø§ÙØ¨Ø±Ùد Ø§ÙØ¥ÙÙØªØ±ÙÙÙ 2629 </label> 2630 <input type="email" class="form-control modern-input" name="email" required 2631 placeholder="[email protected]"> 2632 </div> 2633 2634 <div class="form-group"> 2635 <label class="form-label"> 2636 <i class="fas fa-mobile-alt form-icon"></i> 2637 رÙÙ Ø§ÙØ¬Ùا٠2638 </label> 2639 <input type="text" class="form-control modern-input" name="phone" required 2640 placeholder="05XXXXXXXX"> 2641 </div> 2642 2643 <button type="submit" class="modern-submit-btn"> 2644 <span class="btn-content"> 2645 <i class="fas fa-paper-plane btn-icon"></i> 2646 <span class="btn-text">إرسا٠ر٠ز Ø§ÙØªØÙÙ</span> 2647 </span> 2648 <div class="btn-loader"> 2649 <div class="loader-spinner"></div> 2650 </div> 2651 </button> 2652 </form> 2653 2654 <!-- Step 2: OTP Verify --> 2655 <form id="otpVerifyForm" class="d-none otp-form"> 2656 2657 <div class="otp-timer"> 2658 <i class="fas fa-clock timer-icon"></i> 2659 <span>Ø§ÙØ±Ù ز ØµØ§ÙØ Ù٠دة <span id="otpCountdown" class="countdown-timer">02:00</span></span> 2660 </div> 2661 2662 <div class="form-group"> 2663 <label class="form-label"> 2664 <i class="fas fa-shield-alt form-icon"></i> 2665 أدخ٠ر٠ز Ø§ÙØªØÙÙ 2666 </label> 2667 <input type="text" class="form-control otp-input" name="otp" maxlength="6" 2668 required placeholder="â¢â¢â¢â¢â¢â¢"> 2669 </div> 2670 2671 <button type="submit" class="modern-submit-btn verify-btn">
2672 <span class="btn-content"> 2673 <i class="fas fa-check-circle btn-icon"></i> 2674 <span class="btn-text">تأÙÙØ¯ Ø§ÙØ¯Ø®ÙÙ</span> 2675 </span> 2676 <div class="btn-loader"> 2677 <div class="loader-spinner"></div> 2678 </div> 2679 </button> 2680 2681 <div class="resend-section"> 2682 <button type="button" id="resendOtpBtn" class="resend-btn"> 2683 <i class="fas fa-redo-alt"></i> 2684 إعادة Ø¥Ø±Ø³Ø§Ù Ø§ÙØ±Ù ز 2685 </button> 2686 </div> 2687 </form> 2688 2689 <!-- Message --> 2690 <div id="otpMessage" class="message-box"></div> 2691 2692 <!-- Register Link --> 2693 <div class="register-section"> 2694 <p class="register-text"> 2695 ÙÙØ³ ÙØ¯ÙÙ ØØ³Ø§Ø¨Ø 2696 <a href="/register" class="register-link">Ø¥ÙØ´Ø§Ø¡ ØØ³Ø§Ø¨ Ø¬Ø¯ÙØ¯</a> 2697 </p> 2698 </div> 2699 2700 </div> 2701 </div> 2702 </div> 2703 </div> 2704 2705 2706 <!-- JS --> 2707
2707<script> 2708 document.addEventListener("DOMContentLoaded", function() { 2709 const otpLoginForm = document.getElementById("otpLoginForm"); 2710 const otpVerifyForm = document.getElementById("otpVerifyForm"); 2711 const otpMessage = document.getElementById("otpMessage"); 2712 const otpCountdown = document.getElementById("otpCountdown"); 2713 const resendBtn = document.getElementById("resendOtpBtn"); 2714 let countdownInterval; 2715 2716 function startCountdown(minutes = 2) { 2717 let time = minutes * 60; 2718 clearInterval(countdownInterval); 2719 2720 countdownInterval = setInterval(() => { 2721 let min = Math.floor(time / 60); 2722 let sec = time % 60; 2723 otpCountdown.textContent = 2724 `${min.toString().padStart(2,'0')}:${sec.toString().padStart(2,'0')}`; 2725 time--; 2726 2727 if (time < 0) { 2728 clearInterval(countdownInterval); 2729 otpMessage.textContent = "Ø§ÙØªÙت ØµÙØ§ØÙØ© Ø§ÙØ±Ù ز. ÙØ±Ø¬Ù إعادة Ø§ÙØ¥Ø±Ø³Ø§Ù."; 2730 otpMessage.className = "mb-3 text-center text-danger fw-bold"; 2731 } 2732 }, 1000); 2733 } 2734 2735 function showLoader(button, show = true) { 2736 if (show) { 2737 button.classList.add("loading"); 2738 button.disabled = true; 2739 } else { 2740 button.classList.remove("loading"); 2741 button.disabled = false; 2742 } 2743 } 2744 2745 function showMessage(message, type = 'success') { 2746 otpMessage.textContent = message; 2747 otpMessage.className = `message-box ${type} show`; 2748 2749 setTimeout(() => { 2750 otpMessage.classList.remove('show'); 2751 }, 5000); 2752 } 2753 2754 // إرسا٠OTP 2755 otpLoginForm.addEventListener("submit", function(e) { 2756 e.preventDefault(); 2757 const submitBtn = otpLoginForm.querySelector("button[type='submit']"); 2758 showLoader(submitBtn, true); 2759 2760 let formData = new FormData(otpLoginForm); 2761 2762 fetch("/send-otp", { 2763 method: "POST", 2764 headers: { 2765 "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').content 2766 }, 2767 body: formData 2768 }) 2769 .then(res => res.json()) 2770 .then(data => { 2771 showLoader(submitBtn, false); 2772 if (data.success) { 2773 otpLoginForm.classList.add("d-none"); 2774 otpVerifyForm.classList.remove("d-none"); 2775 showMessage(data.message || "ت٠إرسا٠ر٠ز Ø§ÙØªØÙÙ Ø¨ÙØ¬Ø§Ø", 'success'); 2776 startCountdown(5); 2777 } else { 2778 showMessage(data.message, 'error'); 2779 } 2780 }) 2781 .catch(error => { 2782 showLoader(submitBtn, false); 2783 showMessage("ØØ¯Ø« خطأ Ø£Ø«ÙØ§Ø¡ Ø¥Ø±Ø³Ø§Ù Ø§ÙØ±Ù ز", 'error'); 2784 }); 2785 }); 2786 2787 // تØÙÙ OTP 2788 otpVerifyForm.addEventListener("submit", function(e) { 2789 e.preventDefault(); 2790 const submitBtn = otpVerifyForm.querySelector("button[type='submit']"); 2791 showLoader(submitBtn, true); 2792 2793 let formData = new FormData(otpVerifyForm); 2794 2795 fetch("/verify-otp", { 2796 method: "POST", 2797 headers: { 2798 "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').content 2799 }, 2800 body: formData 2801 }) 2802 .then(res => res.json()) 2803 .then(data => { 2804 showLoader(submitBtn, false); 2805 if (data.success) { 2806 showMessage(data.message || "ت٠تسجÙÙ Ø§ÙØ¯Ø®ÙÙ Ø¨ÙØ¬Ø§Ø!", 'success'); 2807 setTimeout(() => window.location.reload(), 1500); 2808 } else { 2809 showMessage(data.message, 'error'); 2810 } 2811 }) 2812 .catch(error => { 2813 showLoader(submitBtn, false); 2814 showMessage("ØØ¯Ø« خطأ Ø£Ø«ÙØ§Ø¡ Ø§ÙØªØÙÙ Ù Ù Ø§ÙØ±Ù ز", 'error'); 2815 }); 2816 }); 2817 2818 // إعادة إرسا٠OTP 2819 resendBtn.addEventListener("click", function() { 2820 otpVerifyForm.classList.add("d-none"); 2821 otpLoginForm.classList.remove("d-none"); 2822 otpMessage.classList.remove("show"); 2823 clearInterval(countdownInterval); 2824 }); 2825 }); 2826 </script>
2826 2827 2828 2829 <!-- Bootstrap Icons --> 2830 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"> 2831 2832 <!-- Font Awesome for Icons --> 2833 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> 2834 2835 2836
2836<script src="/assets/default/js/modern-ui.js" defer></script>
2836 2837 2838 2839
2839<script> 2840 (function() { 2841 'use strict'; 2842 2843 // Create a single toast element 2844 var toast = document.createElement('div'); 2845 toast.className = 'af-interest-toast'; 2846 document.body.appendChild(toast); 2847 2848 var toastTimer = null; 2849 2850 function showToast(msg, isError) { 2851 toast.textContent = msg; 2852 toast.classList.toggle('af-interest-toast--error', !!isError); 2853 toast.classList.add('af-interest-toast--show'); 2854 clearTimeout(toastTimer); 2855 toastTimer = setTimeout(function() { 2856 toast.classList.remove('af-interest-toast--show'); 2857 }, 3000); 2858 } 2859 2860 document.addEventListener('click', function(e) { 2861 var btn = e.target.closest('.af-card__heart, .af-card__interest-btn'); 2862 if (!btn) return; 2863 2864 var url = btn.dataset.toggleUrl; 2865 var loginUrl = btn.dataset.loginUrl; 2866 2867 if (!url) { 2868 window.location.href = loginUrl || '/login'; 2869 return; 2870 } 2871 2872 btn.disabled = true; 2873 2874 var csrfMeta = document.querySelector('meta[name="csrf-token"]'); 2875 var csrf = csrfMeta ? csrfMeta.getAttribute('content') : ''; 2876 2877 fetch(url, { 2878 method: 'POST', 2879 headers: { 2880 'X-CSRF-TOKEN': csrf, 2881 'Accept': 'application/json', 2882 'Content-Type': 'application/json', 2883 }, 2884 }) 2885 .then(function(res) { 2886 return res.json().then(function(data) { 2887 return { 2888 ok: res.ok, 2889 status: res.status, 2890 data: data 2891 }; 2892 }); 2893 }) 2894 .then(function(r) { 2895 if (r.status === 401) { 2896 showToast(r.data.message || 'ÙØ±Ø¬Ù تسجÙÙ Ø§ÙØ¯Ø®Ù٠أÙÙØ§Ù', true); 2897 setTimeout(function() { 2898 window.location.href = r.data.redirect || '/login'; 2899 }, 1500); 2900 return; 2901 } 2902 var interested = r.data.interested; 2903 var isHeartBtn = btn.classList.contains('af-card__heart'); 2904 if (isHeartBtn) { 2905 var icon = btn.querySelector('svg'); 2906 btn.classList.toggle('af-card__heart--active', interested); 2907 if (icon) { 2908 icon.setAttribute('fill', interested ? '#e11d48' : 'none'); 2909 icon.setAttribute('stroke', interested ? '#e11d48' : 'currentColor'); 2910 } 2911 btn.title = interested ? 'Ø¥ÙØºØ§Ø¡ Ø§ÙØ§Ùت٠ا٠' : 'أض٠ÙÙØ§Ùت٠ا٠ات'; 2912 btn.classList.remove('af-card__heart--pop'); 2913 void btn.offsetWidth; 2914 btn.classList.add('af-card__heart--pop'); 2915 } else { 2916 // .af-card__interest-btn 2917 btn.classList.toggle('af-card__interest-btn--active', interested); 2918 btn.textContent = interested ? 'Ø¥ÙØºØ§Ø¡ Ø§ÙØ§Ùت٠ا٠' : 'Ø³Ø¬Ù Ø§ÙØªÙ ا٠Ù'; 2919 btn.title = interested ? 'Ø¥ÙØºØ§Ø¡ Ø§ÙØ§Ùت٠ا٠' : 'Ø³Ø¬Ù Ø§ÙØªÙ ا٠Ù'; 2920 } 2921 showToast(r.data.message || (interested ? 'ت٠تسجÙÙ Ø§ÙØªÙ ا٠٠â' : 2922 'ØªÙ Ø¥ÙØºØ§Ø¡ Ø§ÙØ§Ùت٠ا٠'), !r.ok); 2923 }) 2924 .catch(function() { 2925 showToast('ØØ¯Ø« Ø®Ø·Ø£Ø ØØ§Ù٠٠جدداÙ', true); 2926 }) 2927 .finally(function() { 2928 btn.disabled = false;
2929 }); 2930 }); 2931 2932 // ââ Course Detail Page Interest Button (Ø³Ø¬Ù Ø§ÙØªÙ ا٠٠CTA) ââ 2933 document.addEventListener('click', function(e) { 2934 var btn = e.target.closest('#courseInterestBtn, #courseInterestBtnCta'); 2935 if (!btn) return; 2936 2937 var url = btn.dataset.toggleUrl; 2938 var loginUrl = btn.dataset.loginUrl; 2939 2940 if (!url) { 2941 window.location.href = loginUrl || '/login'; 2942 return; 2943 } 2944 2945 btn.disabled = true; 2946 var csrfMeta = document.querySelector('meta[name="csrf-token"]'); 2947 var csrf = csrfMeta ? csrfMeta.getAttribute('content') : ''; 2948 2949 fetch(url, { 2950 method: 'POST', 2951 headers: { 2952 'X-CSRF-TOKEN': csrf, 2953 'Accept': 'application/json', 2954 'Content-Type': 'application/json', 2955 }, 2956 }) 2957 .then(function(res) { 2958 return res.json().then(function(data) { 2959 return { 2960 ok: res.ok, 2961 status: res.status, 2962 data: data 2963 }; 2964 }); 2965 }) 2966 .then(function(r) { 2967 if (r.status === 401) { 2968 showToast(r.data.message || 'ÙØ±Ø¬Ù تسجÙÙ Ø§ÙØ¯Ø®Ù٠أÙÙØ§Ù', true); 2969 setTimeout(function() { 2970 window.location.href = r.data.redirect || '/login'; 2971 }, 1500); 2972 return; 2973 } 2974 var interested = r.data.interested; 2975 // sync sidebar icon button 2976 var icon = document.getElementById('courseInterestIcon'); 2977 var label = document.getElementById('courseInterestLabel'); 2978 if (icon) { 2979 icon.setAttribute('fill', interested ? '#e53e3e' : 'none'); 2980 icon.setAttribute('stroke', interested ? '#e53e3e' : 'currentColor'); 2981 } 2982 if (label) label.textContent = interested ? 'Ø§ÙØªÙ ا٠ات' : 'أض٠ÙÙØ§Ùت٠ا٠ات'; 2983 // sync CTA button 2984 var ctaBtn = document.getElementById('courseInterestBtnCta'); 2985 var ctaIcon = document.getElementById('courseInterestIconCta'); 2986 var ctaLabel = document.getElementById('courseInterestLabelCta'); 2987 if (ctaBtn) ctaBtn.classList.toggle('active', interested); 2988 if (ctaIcon) { 2989 ctaIcon.setAttribute('fill', interested ? '#e53e3e' : 'none'); 2990 ctaIcon.setAttribute('stroke', interested ? '#e53e3e' : 'currentColor'); 2991 } 2992 if (ctaLabel) ctaLabel.textContent = interested ? 'Ø¥ÙØºØ§Ø¡ Ø§ÙØ§Ùت٠ا٠' : 'Ø³Ø¬Ù Ø§ÙØªÙ ا٠Ù'; 2993 // update titles 2994 btn.title = interested ? 'Ø¥ÙØºØ§Ø¡ Ø§ÙØ§Ùت٠ا٠' : 'أض٠ÙÙØ§Ùت٠ا٠ات'; 2995 if (ctaBtn && ctaBtn !== btn) ctaBtn.title = btn.title; 2996 showToast(r.data.message || (interested ? 'ت٠تسجÙÙ Ø§ÙØªÙ ا٠٠â' : 2997 'ØªÙ Ø¥ÙØºØ§Ø¡ Ø§ÙØ§Ùت٠ا٠'), !r.ok); 2998 }) 2999 .catch(function() { 3000 showToast('ØØ¯Ø« Ø®Ø·Ø£Ø ØØ§Ù٠٠جدداÙ', true); 3001 }) 3002 .finally(function() { 3003 btn.disabled = false; 3004 }); 3005 }); 3006 })(); 3007 </script>
3007 3008 3009 <!-- TikTok Pixel â AddToCart event --> 3010
3010<script> 3011 document.addEventListener('click', function (e) { 3012 if (typeof ttq === 'undefined') return; 3013 3014 // Course "Add to Cart" button 3015 var addToCartBtn = e.target.closest('.js-course-add-to-cart-btn'); 3016 if (addToCartBtn) { 3017 var cid = addToCartBtn.dataset.id || ''; 3018 var ctitle = addToCartBtn.dataset.title || document.title; 3019 var cprice = parseFloat(addToCartBtn.dataset.price || 0); 3020 ttq.track('AddToCart', { 3021 content_type: 'product', 3022 currency: 'SAR', 3023 value: cprice, 3024 contents: [{ 3025 content_id: cid, 3026 content_name: ctitle, 3027 price: cprice, 3028 quantity: 1 3029 }] 3030 }); 3031 } 3032 3033 // Product "Add to Cart" button 3034 var addProductBtn = e.target.closest('.btn-add-product-to-cart'); 3035 if (addProductBtn) { 3036 var pid = addProductBtn.dataset.id || ''; 3037 var pname = addProductBtn.dataset.title || ''; 3038 var pprice = parseFloat(addProductBtn.dataset.price || 0); 3039 ttq.track('AddToCart', { 3040 content_type: 'product', 3041 currency: 'SAR', 3042 value: pprice, 3043 contents: [{ 3044 content_id: pid, 3045 content_name: pname, 3046 price: pprice, 3047 quantity: 1 3048 }] 3049 }); 3050 } 3051 }, true); 3052 </script>
3052 3053 3054</body> 3055 3056</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.