1 2 3 4 5 6<!DOCTYPE html> 7 8<!DOCTYPE html> 9<html lang="en"> 10<head> 11 <meta charset="UTF-8"> 12 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> 13 <title>MOAUM Portal | Login</title> 14 <!-- Favicon using the logo image --> 15 <link rel="icon" type="image/png" href="files/logo.png"> 16 <link rel="shortcut icon" href="files/logo.png"> 17 <!-- Font Awesome 6 (free) --> 18 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> 19 <style> 20 * { 21 margin: 0; 22 padding: 0; 23 box-sizing: border-box; 24 } 25 26 body { 27 background: #eef2f8; 28 font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, sans-serif; 29 color: #1a2c3e; 30 overflow-x: hidden; 31 } 32 33 /* Main page container with max-width and centering */ 34 .page { 35 max-width: 1300px; 36 margin: 0 auto; 37 background: white; 38 box-shadow: 0 0 20px rgba(0, 0, 0, 0.03); 39 min-height: 100vh; 40 display: flex; 41 flex-direction: column; 42 position: relative; 43 } 44 .payment-error { 45 background-color: #f8d7da; 46 color: #842029; 47 padding: 15px; 48 border-radius: 8px; 49 margin-bottom: 20px; 50 font-size: 0.9em; 51 border-left: 4px solid #dc3545; 52 } 53 54 /* ----- FIRST ROW: HIGHLY COMPACT HEADER ----- */ 55 .top-header-row { 56 background: #ffffff; 57 border-bottom: 1px solid #eef2f6; 58 padding: 0.25rem 1rem; 59 display: flex; 60 justify-content: space-between; 61 align-items: center; 62 flex-wrap: wrap; 63 gap: 0.5rem; 64 } 65 .logo-area { 66 display: flex; 67 align-items: center; 68 line-height: 1; 69 } 70 .logo-area img { 71 display: block; 72 height: 40px; 73 width: auto; 74 max-width: 160px; 75 transition: 0.2s; 76 } 77 .logo-area .logo-fallback { 78 font-weight: 700; 79 font-size: 1.2rem; 80 color: #0d3b58; 81 display: none; 82 } 83 .logo-area img:not([src]), .logo-area img[src=""] { 84 display: none; 85 } 86 .logo-area img:not([src]) + .logo-fallback, 87 .logo-area img[src=""] + .logo-fallback { 88 display: block; 89 } 90 91 .moau-text { 92 font-size: 0.95rem; 93 font-weight: 700; 94 letter-spacing: 0.3px; 95 white-space: nowrap; 96 } 97 .moau-red { 98 color: #d32f2f; 99 } 100 .makurdi-black { 101 color: #1a1a1a; 102 } 103 104 /* ----- FULL WIDTH BLACK MENU BAR WITH HAMBURGER FOR MOBILE ----- */ 105 .full-width-nav-wrapper { 106 width: 100vw; 107 position: relative; 108 left: 50%; 109 right: 50%; 110 margin-left: -50vw; 111 margin-right: -50vw; 112 background: #000000; 113 background: linear-gradient(98deg, #0a0a0a 0%, #1a1a1a 100%); 114 border-bottom: 1px solid #2a2a2a; 115 border-top: 1px solid #333333; 116 box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 2px 5px rgba(0,0,0,0.2); 117 } 118 119 .main-nav-row { 120 max-width: 1300px; 121 margin: 0 auto; 122 padding: 0.5rem 1rem; 123 display: flex; 124 justify-content: space-between; 125 align-items: center; 126 flex-wrap: wrap; 127 position: relative; 128 background: transparent; 129 } 130 131 /* Desktop menu styles */ 132 .nav-left { 133 display: flex; 134 flex-wrap: wrap; 135 align-items: center; 136 gap: 1.5rem; 137 } 138 139 .nav-left a, .dropbtn-store { 140 text-decoration: none; 141 color: #ffffff; 142 font-weight: 700; 143 font-size: 0.9rem; 144 transition: 0.2s; 145 letter-spacing: 0.2px; 146 text-shadow: 0 1px 1px rgba(0,0,0,0.3); 147 } 148 149 .nav-left a:hover, .dropbtn-store:hover { color: #ffefc0; } 150 151 /* Store dropdown */ 152 .dropdown-store { 153 position: relative; 154 display: inline-block; 155 } 156 .dropbtn-store { 157 background: transparent; 158 border: none; 159 cursor: pointer; 160 font-family: inherit; 161 display: flex; 162 align-items: center; 163 gap: 5px; 164 } 165 .dropdown-content-store { 166 display: none; 167 position: absolute; 168 background-color: #ffffff; 169 min-width: 260px; 170 max-height: 500px; 171 overflow-y: auto; 172 box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12); 173 border-radius: 8px; 174 border: 1px solid #cde0ec; 175 z-index: 100; 176 top: 32px; 177 left: 0; 178 padding: 0.5rem 0; 179 } 180 .dropdown-content-store a { 181 color: #1f5072; 182 padding: 0.4rem 1.2rem; 183 text-decoration: none; 184 display: block; 185 font-size: 0.75rem; 186 font-weight: 500; 187 } 188 .dropdown-content-store a:hover { 189 background-color: #f3f9ff; 190 color: #0f5b8c; 191 } 192 .dropdown-category { 193 font-weight: 800; 194 color: #0b496b; 195 background-color: #f8fbfe; 196 padding: 0.4rem 1.2rem 0.2rem 1.2rem; 197 font-size: 0.65rem; 198 border-bottom: 1px solid #eaf0f5; 199 margin-top: 4px; 200 } 201 .dropdown-store.show .dropdown-content-store { 202 display: block; 203 } 204 205 /* Account dropdown */ 206 .nav-right { 207 display: flex; 208 align-items: center; 209 } 210 .dropdown-account { 211 position: relative; 212 display: inline-block; 213 } 214 .dropbtn-account { 215 background: rgba(255,255,250,0.15); 216 border: 1px solid rgba(255,255,255,0.3); 217 font-weight: 700; 218 font-size: 0.9rem; 219 color: white; 220 cursor: pointer; 221 font-family: inherit; 222 padding: 0.35rem 1rem; 223 border-radius: 6px; 224 display: flex; 225 align-items: center; 226 gap: 6px; 227 transition: 0.2s; 228 } 229 .dropbtn-account i { font-size: 0.8rem; } 230 .dropbtn-account:hover { 231 background: rgba(255,255,255,0.25); 232 border-color: rgba(255,255,255,0.5); 233 } 234 .dropdown-content-account { 235 display: none; 236 position: absolute; 237 background-color: #ffffff; 238 min-width: 170px; 239 box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1); 240 border-radius: 8px; 241 border: 1px solid #cde0ec; 242 z-index: 100; 243 top: 42px; 244 right: 0; 245 padding: 0.4rem 0; 246 } 247 .dropdown-content-account a { 248 color: #1f5072; 249 padding: 0.45rem 1.2rem; 250 text-decoration: none; 251 display: block; 252 font-size: 0.75rem; 253 font-weight: 500; 254 } 255 .dropdown-content-account a:hover { 256 background-color: #f5faff; 257 color: #0f5b8c; 258 } 259 .dropdown-account.show .dropdown-content-account { 260 display: block; 261 } 262 263 /* HAMBURGER MENU BUTTON - visible only on mobile */ 264 .hamburger { 265 display: none; 266 background: transparent; 267 border: none; 268 color: white; 269 font-size: 1.5rem; 270 cursor: pointer; 271 padding: 0.25rem; 272 } 273 274 /* Mobile menu container */ 275 .mobile-menu { 276 display: none; 277 flex-direction: column; 278 width: 100%; 279 background: #0a0a0a; 280 border-top: 1px solid #2a2a2a; 281 padding: 0.75rem 1rem; 282 } 283 284 .mobile-menu a, .mobile-menu .mobile-dropdown-btn { 285 color: white; 286 text-decoration: none; 287 padding: 0.6rem 0; 288 font-weight: 600; 289 font-size: 0.9rem; 290 border-bottom: 1px solid #2a2a2a; 291 display: flex; 292 justify-content: space-between; 293 align-items: center; 294 } 295 296 .mobile-menu a:last-child, .mobile-menu .mobile-dropdown-btn:last-child { 297 border-bottom: none; 298 } 299 300 .mobile-dropdown-content { 301 display: none; 302 padding-left: 1rem; 303 flex-direction: column; 304 background: #1a1a1a; 305 margin: 0.25rem 0 0.25rem 0; 306 border-radius: 6px; 307 } 308 309 .mobile-dropdown-content a { 310 padding: 0.5rem 0.5rem 0.5rem 1rem; 311 font-size: 0.8rem; 312 border-bottom: 1px solid #2a2a2a; 313 color: #dddddd; 314 } 315 316 .mobile-dropdown-content a:last-child { 317 border-bottom: none; 318 } 319 320 .mobile-menu.show { 321 display: flex; 322 } 323 324 /* Login card section */ 325 .login-section { 326 display: flex; 327 justify-content: center; 328 align-items: flex-start; 329 padding: 1.5rem 1rem 2rem 1rem; 330 background: #fbfdff; 331 flex: 1; 332 } 333 .login-card { 334 max-width: 580px; 335 width: 100%; 336 background: white; 337 border-radius: 20px; 338 box-shadow: 0 16px 32px -12px rgba(0, 0, 0, 0.08); 339 border: 1px solid #e4eef5; 340 padding: 1.5rem 2rem 1.8rem 2rem; 341 margin-top: 0.5rem; 342 } 343 344 .login-header-row { 345 display: flex; 346 align-items: baseline; 347 justify-content: flex-start; 348 gap: 10px; 349 flex-wrap: wrap; 350 margin-bottom: 1.5rem; 351 } 352 h2 { 353 font-size: 1.8rem; 354 font-weight: 600; 355 color: #0a2e44; 356 margin: 0; 357 } 358 .restricted-inline { 359 font-size: 0.9rem; 360 color: #5a6e7c; 361 font-weight: 450; 362 } 363 364 .input-group-c { 365 margin-bottom: 1.2rem; 366 } 367 label { 368 font-weight: 700; 369 font-size: 0.85rem; 370 margin-bottom: 0.35rem; 371 display: block; 372 color: #1f5072; 373 } 374 .input-field-c { 375 width: 100%; 376 padding: 0.55rem 1rem; 377 border: 2px solid #7fb4d4; 378 border-radius: 8px; 379 font-size: 0.9rem; 380 background: white; 381 } 382 .input-field-c::placeholder { 383 color: #6b7c8a; 384 opacity: 0.7; 385 } 386 387 .remember-row { 388 margin-bottom: 1.5rem; 389 } 390 .check-label { 391 display: flex; 392 align-items: center; 393 gap: 0.5rem; 394 font-size: 0.85rem; 395 color: #2c5e7e; 396 cursor: pointer; 397 } 398 399 .button-group { 400 display: flex; 401 justify-content: flex-end; 402 align-items: center; 403 gap: 1rem; 404 flex-wrap: wrap; 405 } 406 .login-button { 407 background: #0f5b8c; 408 border: none; 409 padding: 0.6rem 1.6rem; 410 font-size: 0.9rem; 411 font-weight: 600; 412 border-radius: 8px; 413 color: white; 414 cursor: pointer; 415 display: inline-flex; 416 align-items: center; 417 gap: 8px; 418 } 419 .forgot-btn { 420 background: white; 421 border: 1.5px solid #cfe0ec; 422 padding: 0.6rem 1.6rem; 423 font-size: 0.9rem; 424 font-weight: 500; 425 border-radius: 8px; 426 color: #1f6392; 427 cursor: pointer; 428 } 429 430 /* ========== FOOTER WITH SINGLE THIN LINE ========== */ 431 /* Line extends to extreme ends of page width */ 432 .footer { 433 background: #f9fcfd; 434 margin-top: 0; 435 position: relative; 436 padding: 0; 437 } 438 439 /* Full-width wrapper for the line */ 440 .footer-line-wrapper { 441 width: 100vw; 442 position: relative; 443 left: 50%; 444 right: 50%; 445 margin-left: -50vw; 446 margin-right: -50vw; 447 background: #f9fcfd; 448 } 449 450 /* Thin black line */ 451 .footer-line { 452 width: 100%; 453 height: 1px; 454 background-color: #1a1a1a; 455 border: none; 456 margin: 0; 457 } 458 459 .footer-content { 460 padding: 0.8rem 1rem; 461 text-align: left; 462 font-size: 0.8rem; 463 color: #55758b; 464 max-width: 1300px; 465 margin: 0 auto; 466 } 467 468 /* RESPONSIVE BREAKPOINT */ 469 @media (max-width: 768px) { 470 .nav-left { 471 display: none; 472 } 473 .hamburger { 474 display: block; 475 } 476 .main-nav-row { 477 justify-content: space-between; 478 } 479 .top-header-row { 480 padding: 0.2rem 1rem; 481 } 482 .logo-area img { 483 height: 35px; 484 }
485 .moau-text { 486 font-size: 0.85rem; 487 } 488 .login-card { 489 padding: 1.2rem; 490 margin: 0 0.5rem; 491 } 492 h2 { 493 font-size: 1.5rem; 494 } 495 .restricted-inline { 496 font-size: 0.8rem; 497 } 498 .button-group { 499 justify-content: center; 500 } 501 } 502 503 @media (max-width: 480px) { 504 .top-header-row { 505 flex-direction: column; 506 align-items: center; 507 text-align: center; 508 gap: 0.25rem; 509 } 510 .login-header-row { 511 justify-content: center; 512 } 513 h2, .restricted-inline { 514 text-align: center; 515 } 516 .button-group { 517 flex-direction: column; 518 width: 100%; 519 } 520 .login-button, .forgot-btn { 521 width: 100%; 522 justify-content: center; 523 } 524 } 525 </style> 526</head> 527 528 529<body> 530<div class="page"> 531 <!-- HEADER --> 532 <div class="top-header-row"> 533 <div class="logo-area"> 534 <img src="files/logo.png" alt="MOAUM" onerror="this.style.display='none'; this.nextElementSibling.style.display='block';"> 535 <span class="logo-fallback">MOAUM</span> 536 </div> 537 <div class="moau-text"> 538 <span class="moau-red">MOAU</span> <span class="makurdi-black">Makurdi</span> 539 </div> 540 </div> 541 542 <!-- FULL WIDTH MENU BAR WITH HAMBURGER --> 543 <div class="full-width-nav-wrapper"> 544 <div class="main-nav-row"> 545 <!-- Desktop menu --> 546 <div class="nav-left"> 547 <div class="dropdown-store" id="storeDropdown"> 548 <button class="dropbtn-store" id="storeBtn">Application <i class="fas fa-chevron-down"></i></button> 549 <div class="dropdown-content-store" id="dropdownMenuStore"> 550 <!--<div class="dropdown-category">UNDER GRADUATE PROGRAMMES</div> 551 <a href="putmeverifier.jsp" class="store-service-item" data-category="Private Cloud (PvC)">Post UTME/DE Verification</a> 552 <a href="putmecontinue.jsp" class="store-service-item" data-category="Private Cloud (PvC)">Continue Registration</a> 553 <a href="putmescore.jsp" class="store-service-item" data-category="Private Cloud (PvC)">Post UTME Score</a> 554 <a href="retreivematricnumber.jsp" class="store-service-item" data-category="Private Cloud (PvC)">Retrieve Matric No</a> 555 --> 556 <div class="dropdown-category">POST GRADUATE SCHOOL</div> 557 <a href="application.jsp" class="store-service-item" data-category="Public Cloud Services">Start Application</a> 558 <a href="https://application.bsum.edu.ng/" class="store-service-item" data-category="Public Cloud Services">Continue Application</a> 559 560 <div class="dropdown-category">PRELIMINARY SCIENCE</div> 561 <a href="application.jsp" class="store-service-item" data-category="SSL and Code Signing">Start Application</a> 562 <a href="https://application.bsum.edu.ng/" class="store-service-item" data-category="SSL and Code Signing">Continue Application</a> 563 564 <div class="dropdown-category">SANDWICH PROGRAMMES</div> 565 <a href="application.jsp" class="store-service-item" data-category="Backup and Disk Services">Start Application</a> 566 <a href="https://application.bsum.edu.ng/" class="store-service-item" data-category="Backup and Disk Services">Continue Application</a> 567 568 <div class="dropdown-category">JUPEB</div> 569 <a href="application.jsp" class="store-service-item" data-category="Email Services">Start Application</a> 570 <a href="https://application.bsum.edu.ng/" class="store-service-item" data-category="Email Services">Continue Application</a> 571 572 573 <div class="dropdown-category">PART-TERM PROGRAMMES </div> 574 <a href="application.jsp" class="store-service-item" data-category="Transfer Domain">Start Application</a> 575 <a href="https://application.bsum.edu.ng/" class="store-service-item" data-category="Transfer Domain">Continue Application</a> 576 </div> 577 </div> 578 <div class="dropdown-store" id="admissionDropdown"> 579 <button class="dropbtn-store" id="admissionBtn">Admission <i class="fas fa-chevron-down"></i></button> 580 <div class="dropdown-content-store" id="dropdownMenuAdmission"> 581 <a href="putmeverifier.jsp" class="store-service-item" data-category="Private Cloud (PvC)">Post UTME/DE Verification</a> 582 <a href="putmecontinue.jsp" class="store-service-item" data-category="Private Cloud (PvC)">Continue Registration</a> 583 <a href="putmescore.jsp" class="store-service-item" data-category="Private Cloud (PvC)">Post UTME Score</a> 584 <a href="retreivematricnumber.jsp" class="store-service-item" data-category="Private Cloud (PvC)">Retrieve Matric No</a> 585 <!-- 586 <a href="putmeverifier.jsp" class="store-service-item" data-category="Private Cloud (PvC)">Post UTME/DE Verification</a> 587 <a href="admissionchecker.jsp" class="store-service-item" data-category="Private Cloud (PvC)">Continue Registration</a> 588 <a href="admissionacceptance.jsp" class="store-service-item" data-category="Private Cloud (PvC)">Post UTME Score</a> 589 <a href="retreivematricnumber.jsp" class="store-service-item" data-category="Private Cloud (PvC)">Retrieve Matric No</a> 590 <a href="http://bsum.edu.ng/matno/retreivematricnumber/" class="store-service-item" data-category="Private Cloud (PvC)">Retrieve Matric No</a>--> 591 592 </div> 593 </div> 594 595 </div> 596 597 <!-- Hamburger button for mobile --> 598 <button class="hamburger" id="hamburgerBtn"> 599 <i class="fas fa-bars"></i> 600 </button> 601 </div> 602 603 <!-- Mobile menu (hidden by default) --> 604 <div class="mobile-menu" id="mobileMenu"> 605 606 <div class="mobile-dropdown"> 607 <div class="mobile-dropdown-btn" id="mobileStoreBtn"> 608 Application <i class="fas fa-chevron-down"></i> 609 </div> 610 <div class="mobile-dropdown-content" id="mobileStoreContent"> 611 <!-- <div style="font-weight:800; padding:0.5rem 0 0.2rem 0.5rem; color:#aaa; font-size:0.7rem;">UNDER GRADUATE PROGRAMMES</div> 612 <a href="putmeverifier.jsp" class="store-service-item" data-category="Private Cloud (PvC)">Post UTME/DE Verification</a> 613 <a href="putmecontinue.jsp" class="store-service-item" data-category="Private Cloud (PvC)">Continue Registration</a> 614 <a href="putmescore.jsp" class="store-service-item" data-category="Private Cloud (PvC)">Post UTME Score</a> 615 <a href="retreivematricnumber.jsp" class="store-service-item" data-category="Private Cloud (PvC)">Retrieve Matric No</a>--> 616 617 <div style="font-weight:800; padding:0.5rem 0 0.2rem 0.5rem; color:#aaa; font-size:0.7rem;">POST GRADUATE SCHOOL</div> 618 <a href="application.jsp" class="mobile-store-item" data-category="Public Cloud Services">Start Application</a> 619 <a href="https://application.bsum.edu.ng/" class="mobile-store-item" data-category="Public Cloud Services">Continue Application</a> 620 621 <div style="font-weight:800; padding:0.5rem 0 0.2rem 0.5rem; color:#aaa; font-size:0.7rem;">PRELIMINARY SCIENCE</div> 622 <a href="application.jsp" class="mobile-store-item" data-category="Platform as a Service (PaaS)">Start Application</a> 623 <a href="https://application.bsum.edu.ng/" class="mobile-store-item" data-category="Platform as a Service (PaaS)">Continue Application</a> 624 <div style="font-weight:800; padding:0.5rem 0 0.2rem 0.5rem; color:#aaa; font-size:0.7rem;">SANDWICH PROGRAMMES</div> 625 <a href="sandwichverifier.jsp" class="mobile-store-item" data-category="Backup and Disk Services">Start Application</a> 626 <a href="https://application.bsum.edu.ng/" class="mobile-store-item" data-category="Backup and Disk Services">Continue Application</a> 627 <div style="font-weight:800; padding:0.5rem 0 0.2rem 0.5rem; color:#aaa; font-size:0.7rem;">JUPEB</div> 628 <a href="application.jsp" class="mobile-store-item" data-category="Email Services">Start Application</a> 629 <a href="https://application.bsum.edu.ng/" class="mobile-store-item" data-category="Email Services">Continue Application</a> 630 631 <div style="font-weight:800; padding:0.5rem 0 0.2rem 0.5rem; color:#aaa; font-size:0.7rem;">PART-TERM PROGRAMMES</div> 632 <a href="application.jsp" class="mobile-store-item" data-category="Transfer Domain">Start Application</a> 633 <a href="https://application.bsum.edu.ng/" class="mobile-store-item" data-category="Transfer Domain">Continue Application</a> 634 635 </div> 636 </div> 637 <div class="mobile-dropdown"> 638 <div class="mobile-dropdown-btn" id="mobileAdmissionBtn"> 639 Admission <i class="fas fa-chevron-down"></i> 640 </div> 641 <div class="mobile-dropdown-content" id="mobileAdmssionContent"> 642 <a href="putmeverifier.jsp" class="store-service-item" data-category="Private Cloud (PvC)">Post UTME/DE Verification</a> 643 <a href="putmecontinue.jsp" class="store-service-item" data-category="Private Cloud (PvC)">Continue Registration</a> 644 <a href="putmescore.jsp" class="store-service-item" data-category="Private Cloud (PvC)">Post UTME Score</a> 645 <a href="retreivematricnumber.jsp" class="store-service-item" data-category="Private Cloud (PvC)">Retrieve Matric No</a> 646 <!-- 647 <a href="putmeverifier2.jsp" class="store-service-item" data-category="Private Cloud (PvC)">Post UTME/DE Verification</a> 648 <a href="admissionchecker.jsp" class="store-service-item" data-category="Private Cloud (PvC)">Continue Registration</a> 649 <a href="admissionacceptance.jsp" class="store-service-item" data-category="Private Cloud (PvC)">Post UTME Score</a> 650 <a href="retreivematricnumber.jsp" class="store-service-item" data-category="Private Cloud (PvC)">Retrieve Matric No</a> 651 <a href="http://bsum.edu.ng/matno/retreivematricnumber/" class="store-service-item" data-category="Private Cloud (PvC)">Retrieve Matric No</a>--> 652 </div> 653 </div> 654 655 656 </div> 657 </div> 658 659 660 <!-- LOGIN CARD --> 661 <div class="login-section"> 662 <form id="loginForm" class="form-border" method="post"> 663 <div class="login-card"> 664 <div class="login-header-row"> 665 <h2>Login</h2>
666 <span class="restricted-inline">This page is restricted</span> 667 </div> 668 669 <div class="input-group-c"> 670 <label>Username</label> 671 <input type="text" class="input-field-c" id="username" name="username" placeholder="Username"> 672 </div> 673 <div class="input-group-c"> 674 <label>Password</label> 675 <input type="password" class="input-field-c" id="psw" name ="psw" required placeholder="Password" > 676 </div> 677 <div class="remember-row"> 678 <label class="check-label"> 679 <input type="checkbox" checked> Remember Me 680 </label> 681 </div> 682 <div class="button-group"> 683 <button class="login-button" type="submit">Login <i class="fas fa-arrow-right"></i></button> 684 <button class="forgot-btn" id="#">Forgot Password</button> 685 </div> 686 </div> 687 </form> 688 </div> 689 690 <!-- FOOTER WITH SINGLE THIN LINE spanning full width --> 691 <div class="footer"> 692 <div class="footer-line-wrapper"> 693 <hr class="footer-line"> 694 </div> 695 <div class="footer-content"> 696 <div>Copyright © 2026 MOAUM. All Rights Reserved.</div> 697 </div> 698 </div> 699</div>
700<script> 701 // Desktop dropdowns 702 const storeDropdown = document.getElementById('storeDropdown'); 703 const storeBtn = document.getElementById('storeBtn'); 704 function closeStoreDropdown() { storeDropdown.classList.remove('show'); } 705 function toggleStoreDropdown(e) { e.stopPropagation(); storeDropdown.classList.toggle('show'); } 706 if(storeBtn) storeBtn.addEventListener('click', toggleStoreDropdown); 707 708 const accountDropdown = document.getElementById('accountDropdown'); 709 const accountBtn = document.getElementById('accountBtn'); 710 function closeAccountDropdown() { accountDropdown.classList.remove('show'); } 711 function toggleAccountDropdown(e) { e.stopPropagation(); accountDropdown.classList.toggle('show'); } 712 if(accountBtn) accountBtn.addEventListener('click', toggleAccountDropdown); 713 714 // Addition 715 const admissionDropdown = document.getElementById('admissionDropdown'); 716 const admissionBtn = document.getElementById('admissionBtn'); 717 function closeAdmissionDropdown() { admissionDropdown.classList.remove('show'); } 718 function toggleAdmissionDropdown(e) { e.stopPropagation(); admissionDropdown.classList.toggle('show'); } 719 if(admissionBtn) admissionBtn.addEventListener('click', toggleAdmissionDropdown); 720 721 window.addEventListener('click', function(e) { 722 if(storeDropdown && !storeDropdown.contains(e.target)) closeStoreDropdown(); 723 if(accountDropdown && !accountDropdown.contains(e.target)) closeAccountDropdown(); 724 if(admissionDropdown && !admissionDropdown.contains(e.target)) closeAdmissionDropdown(); 725 }); 726 727 728 729 730 window.addEventListener('click', function(e) { 731 if(storeDropdown && !storeDropdown.contains(e.target)) closeStoreDropdown(); 732 if(accountDropdown && !accountDropdown.contains(e.target)) closeAccountDropdown(); 733 if(admissionDropdown && !admissionDropdown.contains(e.target)) closeAdmissionDropdown(); 734 }); 735 736 // Mobile menu toggle 737 const hamburger = document.getElementById('hamburgerBtn'); 738 const mobileMenu = document.getElementById('mobileMenu'); 739 hamburger.addEventListener('click', () => { 740 mobileMenu.classList.toggle('show'); 741 }); 742 743 // Mobile store dropdown 744 const mobileStoreBtn = document.getElementById('mobileStoreBtn'); 745 const mobileStoreContent = document.getElementById('mobileStoreContent'); 746 mobileStoreBtn.addEventListener('click', () => { 747 mobileStoreContent.style.display = mobileStoreContent.style.display === 'flex' ? 'none' : 'flex'; 748 mobileStoreBtn.querySelector('i').classList.toggle('fa-chevron-down'); 749 mobileStoreBtn.querySelector('i').classList.toggle('fa-chevron-up'); 750 }); 751 752 const mobileAdmissionBtn = document.getElementById('mobileAdmissionBtn'); 753 const mobileAdmssionContent = document.getElementById('mobileAdmssionContent'); 754 mobileAdmissionBtn.addEventListener('click', () => { 755 mobileAdmssionContent.style.display = mobileAdmssionContent.style.display === 'flex' ? 'none' : 'flex'; 756 mobileAdmissionBtn.querySelector('i').classList.toggle('fa-chevron-down'); 757 mobileAdmissionBtn.querySelector('i').classList.toggle('fa-chevron-up'); 758 }); 759 760 // Mobile account dropdown 761 const mobileAccountBtn = document.getElementById('mobileAccountBtn'); 762 const mobileAccountContent = document.getElementById('mobileAccountContent'); 763 mobileAccountBtn.addEventListener('click', () => { 764 mobileAccountContent.style.display = mobileAccountContent.style.display === 'flex' ? 'none' : 'flex'; 765 mobileAccountBtn.querySelector('i').classList.toggle('fa-chevron-down'); 766 mobileAccountBtn.querySelector('i').classList.toggle('fa-chevron-up'); 767 }); 768 769 function showMsg(itemName, parentSection, extra = "") { 770 alert(`? ""\n? Parent: \n`); 771 } 772 773 // Desktop store items 774 document.querySelectorAll('.store-service-item').forEach(item => { 775 item.addEventListener('click', (e) => { 776 e.preventDefault(); 777 const cat = item.getAttribute('data-category') || "Store"; 778 showMsg(item.innerText.trim(), `Store / `, `? Full service list.\n`); 779 closeStoreDropdown(); 780 }); 781 }); 782 783 // Mobile store items 784 document.querySelectorAll('.mobile-store-item').forEach(item => { 785 item.addEventListener('click', (e) => { 786 e.preventDefault(); 787 const cat = item.getAttribute('data-category') || "Store"; 788 showMsg(item.innerText.trim(), `Store / `, `? Mobile menu.\n`); 789 }); 790 }); 791 792 // Desktop main nav 793 document.querySelectorAll('.nav-main').forEach(link => { 794 link.addEventListener('click', (e) => { 795 e.preventDefault(); 796 showMsg(link.innerText.trim(), link.innerText.trim(), `? Main menu.\n`); 797 }); 798 }); 799 800 // Mobile main nav 801 document.querySelectorAll('.mobile-nav-main').forEach(link => { 802 link.addEventListener('click', (e) => { 803 e.preventDefault(); 804 showMsg(link.innerText.trim(), link.innerText.trim(), `? Mobile menu.\n`); 805 }); 806 }); 807 808 // Desktop account items 809 const accLogin = document.getElementById('accountLoginItem'); 810 const accForgot = document.getElementById('accountForgotItem'); 811 if(accLogin) accLogin.addEventListener('click', (e) => { 812 e.preventDefault(); 813 alert(`? Account ? Login\n? Parent: Account`); 814 closeAccountDropdown(); 815 }); 816 if(accForgot) accForgot.addEventListener('click', (e) => { 817 e.preventDefault(); 818 alert(`? Account ? Forgot Password`); 819 closeAccountDropdown(); 820 }); 821 822 // Mobile account items 823 const mobileLogin = document.getElementById('mobileLoginItem'); 824 const mobileForgot = document.getElementById('mobileForgotItem'); 825 if(mobileLogin) mobileLogin.addEventListener('click', (e) => { 826 e.preventDefault(); 827 alert(`? Account ? Login (Mobile)`); 828 }); 829 830 831 832 833 document.getElementById('dropdownMenuStore')?.addEventListener('click', e => e.stopPropagation()); 834 document.getElementById('dropdownMenuAccount')?.addEventListener('click', e => e.stopPropagation()); 835 document.getElementById('dropdownMenuAdmission')?.addEventListener('click', e => e.stopPropagation()); 836</script>
836 837</body> 838</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.