1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5 <meta charset="utf-8" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> 7 <meta name="description" content="" /> 8 <meta name="author" content="" /> 9 <!-- Favicon --> 10 <link rel="icon" href="/assets/img/logo.png" type="image/png"> 11 12 <!-- Title --> 13 <title>DISDIK KOTA PADANG</title> 14 15 <!-- AOS Animation --> 16 <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet" /> 17 18 <!-- Custom CSS --> 19 <link href="/assets/style/main.css" rel="stylesheet" /> 20 21 <!-- Bootstrap Icons --> 22 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"> 23 24 <!-- Font Awesome --> 25 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> 26 27 <!-- jCarousel CSS --> 28 <link rel="stylesheet" type="text/css" href="/assets/vendor/jquery/jcarousel.responsive.css"> 29 30 <!-- Select2 CSS --> 31 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" /> 32 33 <!-- jQuery (wajib sebelum Select2) --> 34
34<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
34 35 36 <!-- Select2 JS --> 37
37<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
37 38 39 40 <!-- jQuery & jCarousel Scripts --> 41 42
42<script src="/assets/vendor/jquery/jquery.jcarousel.min.js"></script>
42 43
43<script src="/assets/vendor/jquery/jcarousel.responsive.js"></script>
43 44 45 46 47 48 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.css"> 49 50 <link rel="preload" href="/assets/img/logo-head-DISDIK1.png" as="image"> 51 <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css" /> 52 <link rel="stylesheet" type="text/css" 53 href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css" /> 54 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/3.2.0/jquery.rateyo.min.css"> 55 56 <!-- JS RateYo --> 57
57<script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/3.2.0/jquery.rateyo.min.js"></script>
57 58 <!-- Slick Carousel CSS --> 59 <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css" /> 60 <link rel="stylesheet" type="text/css" 61 href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css" /> 62 63 64 <style type="text/css"> 65 .preloader { 66 position: fixed; 67 top: 0; 68 left: 0; 69 width: 100%; 70 height: 100%; 71 z-index: 9999; 72 background-color: #fff; 73 } 74 75 .preloader .loading { 76 position: absolute; 77 left: 50%; 78 top: 50%; 79 transform: translate(-50%, -50%); 80 font: 14px arial; 81 } 82 83 .info-banner { 84 background-color: transparent; 85 color: #dc3545; 86 /* ubah warna teks jadi merah agar tetap terlihat */ 87 padding: 6px 0; 88 font-size: 15px; 89 font-weight: bold; 90 text-align: center; 91 z-index: 1040; 92 position: fixed; 93 top: 0; 94 left: 0; 95 width: 100%; 96 } 97 98 .slider-galeri .slick-slide { 99 padding: 0 10px; 100 } 101 102 .slider-galeri img.galeri-img { 103 height: 200px; 104 object-fit: cover; 105 } 106 107 .red { 108 color: #93192C; 109 } 110 111 .line { 112 width: 100px; 113 height: 3px; 114 background-color: #93192C; 115 margin: 10px auto; 116 } 117 118 .card-img-top { 119 height: 200px; 120 object-fit: cover; 121 } 122 123 .card-date-badge { 124 position: absolute; 125 top: 10px; 126 left: 10px; 127 background-color: red; 128 color: white; 129 padding: 4px 8px; 130 font-size: 13px; 131 font-weight: bold; 132 border-radius: 3px; 133 } 134 135 .card-category { 136 color: red; 137 font-size: 14px; 138 margin-bottom: 5px; 139 } 140 141 .card-title { 142 font-weight: 700; 143 font-size: 18px; 144 } 145 146 .card-text { 147 font-size: 14px; 148 color: #666; 149 } 150 151 .custom-table tbody tr:nth-child(odd) { 152 background-color: #f8f9fa; 153 /* abu muda */ 154 } 155 156 .custom-table tbody tr:nth-child(even) { 157 background-color: #e9ecef; 158 /* abu agak gelap */ 159 } 160 161 /* Hover effect */ 162 .custom-table tbody tr:hover { 163 background-color: #cce5ff !important; 164 /* biru muda saat hover */ 165 transition: background-color 0.3s ease; 166 cursor: pointer; 167 } 168 169 /* Judul tabel */ 170 .custom-table thead { 171 background-color: #004085; 172 color: #fff; 173 } 174 175 /* Border tabel lebih halus */ 176 .custom-table th, 177 .custom-table td { 178 border: 1px solid #dee2e6; 179 vertical-align: middle; 180 } 181 </style> 182 <!-- Font Awesome untuk icon panah --> 183 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"> 184 185 <style> 186 /* Back to top button */ 187 .back-to-top { 188 position: fixed; 189 bottom: 30px; 190 right: 30px; 191 width: 50px; 192 height: 50px; 193 background-color: #1a2b6f; 194 color: white; 195 border-radius: 50%; 196 display: none; 197 /* Awalnya disembunyikan */ 198 align-items: center; 199 justify-content: center; 200 text-decoration: none; 201 font-size: 20px; 202 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); 203 opacity: 0; 204 transition: all 0.3s ease; 205 z-index: 999; 206 } 207 208 .back-to-top:hover { 209 background-color: #0f1a4b; 210 transform: translateY(-3px); 211 } 212 213 .back-to-top.active { 214 opacity: 1; 215 display: flex; 216 /* Muncul saat aktif */ 217 } 218 </style> 219 220
220<script src="https://cdn.jsdelivr.net/npm/sienna-accessibility@latest/dist/sienna-accessibility.umd.js" defer></script>
220 221</head> 222 223<body onload="slider()"> 224 225 <div class="preloader" style="background-color: rgb(199, 192, 192)"> 226 <div class="loading"> 227 <img src="/assets/img/logo-head-DISDIK.png" class="img-fluid" alt="Logo DISDIK" width="600"> 228 </div> 229 </div> 230 231 <style> 232 /* Import Poppins Font */ 233 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap'); 234 235 /* Animasi CSS */ 236 .fade-in-up { 237 opacity: 0; 238 transform: translateY(20px); 239 animation: fadeInUp 0.6s forwards; 240 } 241 242 @keyframes fadeInUp { 243 to { 244 opacity: 1; 245 transform: translateY(0); 246 } 247 } 248 249 /* Delay untuk animasi berurutan */ 250 .card-animation-delay-1 { 251 animation-delay: 0.2s; 252 } 253 254 .card-animation-delay-2 { 255 animation-delay: 0.4s; 256 } 257 258 .card-animation-delay-3 { 259 animation-delay: 0.6s; 260 } 261 262 .card-animation-delay-4 { 263 animation-delay: 0.8s; 264 } 265 266 .image-animation-delay { 267 animation-delay: 1s; 268 } 269 270 .video-title:hover { 271 white-space: normal; 272 overflow: visible; 273 text-overflow: unset; 274 background-color: #fff; 275 position: relative; 276 z-index: 1; 277 } 278 279 /* Back to top button */ 280 .back-to-top { 281 position: fixed; 282 bottom: 30px; 283 right: 30px; 284 width: 50px; 285 height: 50px; 286 background-color: #1a2b6f; 287 color: white; 288 border-radius: 50%; 289 display: flex; 290 align-items: center; 291 justify-content: center; 292 text-decoration: none; 293 font-size: 20px; 294 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); 295 opacity: 0; 296 visibility: hidden; 297 transition: all 0.3s ease; 298 z-index: 999; 299 } 300 301 .back-to-top:hover { 302 background-color: #0f1a4b; 303 transform: translateY(-3px); 304 } 305 306 .back-to-top.active { 307 opacity: 1; 308 visibility: visible; 309 } 310 311 .video-title { 312 font-size: 14px; 313 font-weight: 600; 314 min-height: 45px; 315 display: flex; 316 align-items: center; 317 justify-content: center; 318 text-align: center; 319 line-height: 1.3; 320 } 321 322 .embed-responsive { 323 border-radius: 10px; 324 overflow: hidden; 325 } 326 327 #galeriCarousel, 328 #galeriCarousel * { 329 border: none !important; 330 outline: none !important; 331 box-shadow: none !important; 332 } 333 334 .carousel-control-prev, 335 .carousel-control-next { 336 border: none !important; 337 outline: none !important; 338 box-shadow: none !important; 339 background: transparent !important; 340 } 341 342 .col-md-6 { 343 border: none !important; 344 box-shadow: none !important; 345 } 346 347 #galeriCarousel img { 348 height: 200px; 349 object-fit: cover; 350 } 351 352 .hover-scale { 353 transition: transform 0.3s ease; 354 } 355 356 .hover-scale:hover { 357 transform: translateY(-5px); 358 } 359 </style> 360 361 <!-- NAVBAR --> 362 <style> 363 /* Info Banner */ 364 .info-banner { 365 background: linear-gradient(135deg, #dc3545 0%, #c82333 100%); 366 color: white; 367 padding: 8px 0; 368 font-size: 14px; 369 font-weight: 500; 370 width: 100%; 371 z-index: 1031; 372 box-shadow: 0 2px 5px rgba(0,0,0,0.1); 373 } 374 375 .info-banner marquee { 376 padding: 0 20px; 377 } 378 379 /* Navbar Base Styles */ 380 .navbar-store { 381 background: transparent !important; 382 box-shadow: none; 383 padding: 15px 0 !important; 384 transition: all 0.4s ease; 385 position: fixed !important; 386 width: 100% !important; 387 z-index: 1030 !important; 388 top: 0; 389 } 390 391 .navbar-store-download { 392 background: linear-gradient(135deg, #212E60 0%, #1a2550 100%) !important; 393 box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1); 394 padding: 10px 0 !important; 395 transition: all 0.4s ease; 396 position: fixed !important; 397 width: 100% !important; 398 z-index: 1030 !important; 399 top: 0; 400 } 401 402 .navbar-store.scrolled { 403 background: linear-gradient(135deg, #212E60 0%, #1a2550 100%) !important; 404 box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1) !important; 405 padding: 10px 0 !important; 406 } 407 408 /* Logo */ 409 .navbar-brand img { 410 max-height: 50px; 411 transition: transform 0.3s ease; 412 } 413 414 .navbar-brand:hover img { 415 transform: scale(1.05); 416 } 417 418 /* Nav Links */ 419 .navbar-light .navbar-nav .nav-link { 420 color: white !important; 421 font-weight: 500; 422 padding: 10px 15px !important; 423 transition: all 0.3s ease; 424 position: relative; 425 font-size: 15px; 426 } 427 428 .navbar-light .navbar-nav .nav-link::after { 429 content: ''; 430 position: absolute; 431 bottom: 5px; 432 left: 15px; 433 right: 15px; 434 height: 2px; 435 background: #19BBB5; 436 transform: scaleX(0); 437 transition: transform 0.3s ease; 438 } 439 440 .navbar-light .navbar-nav .nav-link:hover::after, 441 .navbar-light .navbar-nav .nav-item.active .nav-link::after { 442 transform: scaleX(1); 443 } 444 445 .navbar-light .navbar-nav .nav-link:hover { 446 color: #19BBB5 !important; 447 } 448 449 .navbar-light .navbar-nav .nav-item.active .nav-link { 450 color: #19BBB5 !important; 451 font-weight: 600; 452 } 453 454 /* Dropdown Menu */ 455 .navbar .dropdown-menu { 456 background-color: #212E60 !important; 457 border: none !important; 458 border-radius: 10px !important; 459 box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2) !important; 460 padding: 10px 0 !important; 461 margin-top: 0px !important; 462 position: absolute !important; 463 min-width: 280px; 464 display: none; 465 } 466 467 .navbar .dropdown-menu.show { 468 display: block; 469 } 470 471 .navbar .nav-item.dropdown { 472 position: relative !important; 473 } 474 475 .navbar .dropdown-toggle::after { 476 margin-left: 8px; 477 transition: transform 0.3s ease; 478 } 479 480 .navbar .dropdown.show .dropdown-toggle::after { 481 transform: rotate(180deg); 482 } 483 484 /* Dropdown Items */ 485 .navbar .dropdown-item { 486 color: white !important; 487 padding: 12px 25px !important; 488 font-size: 14px !important; 489 transition: all 0.3s ease !important; 490 border-left: 3px solid transparent; 491 display: flex; 492 align-items: center; 493 gap: 12px; 494 } 495 496 .navbar .dropdown-item i {
497 width: 20px; 498 text-align: center; 499 color: #19BBB5; 500 font-size: 16px; 501 } 502 503 .navbar .dropdown-item:hover, 504 .navbar .dropdown-item:focus { 505 background-color: #19BBB5 !important; 506 border-left-color: white; 507 color: white !important; 508 padding-left: 30px !important; 509 } 510 511 .navbar .dropdown-item:hover i { 512 color: white; 513 } 514 515 /* ===== NESTED SUBMENU STYLES ===== */ 516 .dropdown-nested { 517 position: relative; 518 cursor: pointer; 519 display: flex; 520 align-items: center; 521 justify-content: space-between; 522 color: white !important; 523 padding: 12px 25px !important; 524 font-size: 14px !important; 525 transition: all 0.3s ease !important; 526 border-left: 3px solid transparent; 527 gap: 12px; 528 } 529 530 .dropdown-nested:hover { 531 background-color: #19BBB5 !important; 532 border-left-color: white; 533 padding-left: 30px !important; 534 } 535 536 .dropdown-nested .menu-icon { 537 width: 20px; 538 text-align: center; 539 color: #19BBB5; 540 font-size: 16px; 541 flex-shrink: 0; 542 } 543 544 .dropdown-nested:hover .menu-icon { 545 color: white; 546 } 547 548 .dropdown-nested .menu-text { 549 flex: 1; 550 color: white; 551 } 552 553 .dropdown-nested .menu-arrow { 554 margin-left: auto; 555 font-size: 14px; 556 color: rgba(255, 255, 255, 0.7); 557 transition: all 0.3s ease; 558 flex-shrink: 0; 559 padding-left: 15px; 560 } 561 562 .dropdown-nested:hover .menu-arrow { 563 color: white; 564 transform: translateX(3px); 565 } 566 567 .dropdown-submenu { 568 position: absolute; 569 left: 100%; 570 top: 0; 571 display: none; 572 background: linear-gradient(135deg, #1a2550 0%, #162040 100%) !important; 573 border-radius: 10px; 574 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); 575 padding: 10px 0; 576 min-width: 250px; 577 margin-left: 8px; 578 z-index: 1000; 579 border: 1px solid rgba(255, 255, 255, 0.1); 580 } 581 582 .dropdown-nested::before { 583 content: ''; 584 position: absolute; 585 top: 0; 586 right: -12px; 587 bottom: 0; 588 width: 12px; 589 z-index: 999; 590 } 591 592 .dropdown-submenu .dropdown-item { 593 color: rgba(255, 255, 255, 0.9) !important; 594 padding: 10px 20px !important; 595 font-size: 13.5px !important; 596 border-left: 2px solid transparent; 597 } 598 599 .dropdown-submenu .dropdown-item i { 600 font-size: 12px; 601 color: #19BBB5; 602 } 603 604 .dropdown-submenu .dropdown-item:hover { 605 background: linear-gradient(90deg, #19BBB5 0%, #17a6a1 100%) !important; 606 border-left-color: white; 607 padding-left: 25px !important; 608 color: white !important; 609 } 610 611 .dropdown-submenu .dropdown-item:hover i { 612 color: white; 613 } 614 615 @media (min-width: 992px) { 616 .dropdown-nested:hover .dropdown-submenu { 617 display: block; 618 animation: slideIn 0.3s ease; 619 } 620 } 621 622 @keyframes slideIn { 623 from { 624 opacity: 0; 625 transform: translateX(-10px); 626 } 627 to { 628 opacity: 1; 629 transform: translateX(0); 630 } 631 } 632 633 /* Mobile Styles */ 634 @media (max-width: 991px) { 635 .dropdown-submenu { 636 position: relative !important; 637 left: 0 !important; 638 margin-left: 0 !important; 639 margin-top: 5px; 640 box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.2) !important; 641 border-left: 3px solid #19BBB5; 642 background: rgba(26, 37, 80, 0.7) !important; 643 } 644 645 .dropdown-nested .menu-arrow { 646 transform: rotate(90deg); 647 } 648 649 .dropdown-nested.active .menu-arrow { 650 transform: rotate(-90deg); 651 } 652 653 .dropdown-nested::before { 654 display: none; 655 } 656 657 .dropdown-submenu .dropdown-item { 658 padding-left: 35px !important; 659 } 660 661 .dropdown-submenu .dropdown-item:hover { 662 padding-left: 40px !important; 663 } 664 } 665 666 /* Navbar Toggler */ 667 .navbar-toggler { 668 border: 2px solid white !important; 669 padding: 5px 10px; 670 } 671 672 .navbar-toggler-icon { 673 background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important; 674 } 675 676 .navbar-toggler:focus { 677 box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25); 678 } 679 680 body { 681 padding-top: 0 !important; 682 } 683 684 @media (max-width: 991px) { 685 .navbar-collapse { 686 background: #212E60; 687 padding: 20px; 688 margin-top: 15px; 689 border-radius: 10px; 690 box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); 691 } 692 693 .navbar .dropdown-menu { 694 background-color: #1a2550 !important; 695 box-shadow: none !important; 696 margin-left: 15px; 697 position: relative !important; 698 transform: none !important; 699 opacity: 1;
700 visibility: visible; 701 } 702 703 .navbar-light .navbar-nav .nav-link::after { 704 display: none; 705 } 706 707 .navbar-light .navbar-nav .nav-link { 708 padding: 12px 15px !important; 709 } 710 711 .navbar-store, 712 .navbar-store-download { 713 background: linear-gradient(135deg, #212E60 0%, #1a2550 100%) !important; 714 } 715 } 716 717 html { 718 scroll-padding-top: 100px; 719 scroll-behavior: smooth; 720 } 721</style> 722 723<nav class="navbar navbar-expand-lg navbar-light navbar-store fixed-top navbar-fixed-top"> 724 <div class="container d-flex justify-content-between align-items-center"> 725 726 <a class="navbar-brand mb-0" href="https://disdik.padang.go.id"> 727 <img src="/assets/img/logo-head-DISDIK1.png" alt="logo" /> 728 </a> 729 730 <button class="navbar-toggler border-0" type="button" data-toggle="collapse" 731 data-target="#navbarSupportedContent"> 732 <span class="navbar-toggler-icon"></span> 733 </button> 734 735 <div class="collapse navbar-collapse" id="navbarSupportedContent"> 736 <ul class="navbar-nav ml-auto"> 737 738 739 <li class="nav-item active"> 740 <a class="nav-link" href="https://disdik.padang.go.id/beranda"> 741 <i class="fas fa-home"></i> Home 742 </a> 743 </li> 744 745 746<li class="nav-item dropdown "> 747 <a class="nav-link dropdown-toggle" href="#"> 748 <i class="fas fa-building"></i> Profil 749 </a> 750 751 <div class="dropdown-content dropdown-menu"> 752 753 <a class="dropdown-item " href="https://disdik.padang.go.id/profil/visi-misi"> 754 <i class="fas fa-lightbulb"></i> Visi & Misi 755 </a> 756 <a class="dropdown-item " href="https://disdik.padang.go.id/profil/pejabat-struktural"> 757 <i class="fas fa-user-tie"></i> Pejabat Struktural 758 </a> 759 <a class="dropdown-item " href="https://disdik.padang.go.id/profil/struktur-organisasi"> 760 <i class="fas fa-sitemap"></i> Struktur Organisasi 761 </a> 762 <a class="dropdown-item " href="https://disdik.padang.go.id/profil/tupoksi"> 763 <i class="fas fa-tasks"></i> Tugas & Fungsi 764 </a> 765 766 767 </div> 768</li> 769 770 771 <li class="nav-item "> 772 <a class="nav-link" href="https://disdik.padang.go.id/dokumen-index"> 773 <i class="fas fa-chart-bar"></i> Statistik Disdik 774 </a> 775 </li> 776 777 778 779 780<li class="nav-item dropdown "> 781 <a class="nav-link dropdown-toggle" href="#"> 782 <i class="fas fa-newspaper"></i> Publikasi 783 </a> 784 785 <div class="dropdown-content dropdown-menu"> 786 787 <a class="dropdown-item " href="https://disdik.padang.go.id/berita-list"> 788 <i class="fas fa-newspaper"></i> Berita & Artikel 789 </a> 790 <a class="dropdown-item " href="https://disdik.padang.go.id/galeri-list"> 791 <i class="fas fa-photo-video"></i> Galeri 792 </a> 793 794 795 </div> 796</li> 797 798 799 800 801<li class="nav-item dropdown "> 802 <a class="nav-link dropdown-toggle" href="#"> 803 <i class="fas fa-briefcase"></i> Layanan 804 </a> 805 806 <div class="dropdown-content dropdown-menu"> 807 808 <a class="dropdown-item" href="https://psb.diknaspadang.id/" target="_blank"> 809 <i class="fas fa-user-graduate"></i> SPMB 810 </a> 811 812 813 <a class="dropdown-item " href="https://disdik.padang.go.id/page/Layanan-Layanan Online"> 814 <i class="fas fa-circle"></i> Layanan Online 815 </a> 816 <a class="dropdown-item " href="https://disdik.padang.go.id/page/UPTDLDPI"> 817 <i class="fas fa-circle"></i> UPTD LDPI 818 </a> 819 </div> 820</li> 821 822 823 824 825 <li class="nav-item dropdown"> 826 <a class="nav-link dropdown-toggle" href="#"> 827 <i class="fas fa-bars"></i> Pengaduan 828 </a> 829 <div class="dropdown-content dropdown-menu"> 830 <a class="dropdown-item" href="https://disdik.padang.go.id/page/Pengaduan-SK Tim Pengaduan"> 831 <i class="fas fa-circle"></i> SK Tim Pengaduan 832 </a> 833 </div> 834 </li> 835 836 837<li class="nav-item "> 838 <a class="nav-link" href="https://disdik.padang.go.id/antrian"> 839 <i class="fas fa-ticket-alt"></i> Antrian Online 840 </a> 841</li> 842 843 </ul> 844 </div> 845 </div> 846</nav> 847
848<script> 849 document.addEventListener('DOMContentLoaded', function() { 850 const navbar = document.querySelector('.navbar'); 851 const isHomePage = navbar.classList.contains('navbar-store'); 852 853 if (isHomePage) { 854 window.addEventListener('scroll', function() { 855 if (window.scrollY > 50) { 856 navbar.classList.add('scrolled'); 857 } else { 858 navbar.classList.remove('scrolled'); 859 } 860 }); 861 } 862 863 const dropdowns = document.querySelectorAll('.navbar .nav-item.dropdown'); 864 865 dropdowns.forEach(dropdown => { 866 let timeoutId; 867 868 dropdown.addEventListener('mouseenter', function() { 869 clearTimeout(timeoutId); 870 const menu = this.querySelector('.dropdown-menu'); 871 menu.classList.add('show'); 872 this.classList.add('show'); 873 }); 874 875 dropdown.addEventListener('mouseleave', function() { 876 const menu = this.querySelector('.dropdown-menu'); 877 const self = this; 878 879 timeoutId = setTimeout(function() { 880 menu.classList.remove('show'); 881 self.classList.remove('show'); 882 }, 300); 883 }); 884 885 const toggle = dropdown.querySelector('.dropdown-toggle'); 886 toggle.addEventListener('click', function(e) { 887 e.preventDefault(); 888 const menu = dropdown.querySelector('.dropdown-menu'); 889 const isShown = menu.classList.contains('show'); 890 891 document.querySelectorAll('.navbar .dropdown-menu.show').forEach(m => { 892 if (m !== menu) { 893 m.classList.remove('show'); 894 m.closest('.dropdown').classList.remove('show'); 895 } 896 }); 897 898 if (isShown) { 899 menu.classList.remove('show'); 900 dropdown.classList.remove('show'); 901 } else { 902 menu.classList.add('show'); 903 dropdown.classList.add('show'); 904 } 905 }); 906 }); 907 908 const nestedItems = document.querySelectorAll('.dropdown-nested'); 909 910 nestedItems.forEach(nested => { 911 let nestedTimeoutId; 912 913 nested.addEventListener('mouseenter', function(e) { 914 if (window.innerWidth > 991) { 915 clearTimeout(nestedTimeoutId); 916 const submenu = this.querySelector('.dropdown-submenu'); 917 if (submenu) { 918 submenu.style.display = 'block'; 919 } 920 } 921 }); 922 923 nested.addEventListener('mouseleave', function(e) { 924 if (window.innerWidth > 991) { 925 const submenu = this.querySelector('.dropdown-submenu'); 926 if (submenu) { 927 nestedTimeoutId = setTimeout(function() { 928 submenu.style.display = 'none'; 929 }, 200); 930 } 931 } 932 }); 933 934 nested.addEventListener('click', function(e) { 935 if (window.innerWidth <= 991) { 936 e.preventDefault(); 937 e.stopPropagation(); 938 939 const submenu = this.querySelector('.dropdown-submenu'); 940 if (submenu) { 941 const isVisible = submenu.style.display === 'block'; 942 943 document.querySelectorAll('.dropdown-submenu').forEach(s => { 944 s.style.display = 'none'; 945 }); 946 document.querySelectorAll('.dropdown-nested').forEach(n => { 947 n.classList.remove('active'); 948 }); 949 950 if (isVisible) { 951 submenu.style.display = 'none'; 952 this.classList.remove('active'); 953 } else { 954 submenu.style.display = 'block'; 955 this.classList.add('active'); 956 } 957 } 958 } 959 }); 960 }); 961 962 document.addEventListener('click', function(e) { 963 if (!e.target.closest('.navbar .dropdown')) { 964 document.querySelectorAll('.navbar .dropdown-menu.show').forEach(menu => { 965 menu.classList.remove('show'); 966 menu.closest('.dropdown').classList.remove('show'); 967 }); 968 document.querySelectorAll('.dropdown-submenu').forEach(submenu => { 969 submenu.style.display = 'none'; 970 }); 971 document.querySelectorAll('.dropdown-nested').forEach(n => { 972 n.classList.remove('active'); 973 }); 974 } 975 }); 976 });
977</script>
977 978 <div class="page-home"> 979 980 <!-- LANDING PAGE dengan CURVE DIVIDER --> 981 <section class="store-landing"> 982 <div class="container-background"> 983 <div id="carouselExampleControls" class="carousel slide" data-ride="carousel"> 984 <div class="carousel-inner"> 985 <div class="carousel-item active"> 986 <img class="d-block bg-100" src="/assets/img/Intersect1.png" id="slideImg" 987 alt="First slide"> 988 989 <!-- Overlay untuk memastikan teks di tengah --> 990 <div class="carousel-caption d-flex align-items-center justify-content-center" 991 style="top: 0; left: 0; right: 0; bottom: 0; transform: none; background: rgba(0, 0, 0, 0.45);"> 992 993 <div class="hero-content"> 994 <!-- Decorative line top --> 995 <div class="decorative-line-top"></div> 996 997 <!-- Title dengan typing effect - FONT BESAR POPPINS --> 998 <h1 class="elegant-title"> 999 <span id="typingText"></span> 1000 </h1> 1001 1002 <!-- Subtitle dengan aksen --> 1003 <p class="elegant-subtitle"> 1004 <span class="accent-text">Kota Padang</span> 1005 </p> 1006 1007 <!-- Decorative line bottom --> 1008 <div class="decorative-line-bottom"></div> 1009 </div> 1010 </div> 1011 </div> 1012 </div> 1013 </div> 1014 1015 <div class="landing-page-container"> 1016 <div id="particles-js"></div> 1017 </div> 1018 </div> 1019 1020 <!-- CURVE DIVIDER - Pengganti store-landing.top --> 1021 <div class="curve-divider-wrapper"> 1022 <div class="curve-divider"> 1023 <!-- SVG Curve --> 1024 <svg viewBox="0 0 1440 320" preserveAspectRatio="none"> 1025 <path d="M0,0 C360,320 1080,320 1440,0 L1440,320 L0,320 Z"></path> 1026 </svg> 1027 1028 <!-- Scroll Down Button --> 1029 <button type="button" class="scroll-down-btn" onclick="scrollToNextSection()" 1030 aria-label="Gulir ke bawah"> 1031 <i class="fas fa-chevron-down"></i> 1032 </button> 1033 </div> 1034 </div> 1035 </section> 1036 1037 <style> 1038 /* HERO SECTION STYLING */ 1039 .store-landing { 1040 position: relative; 1041 min-height: 100vh; 1042 background: #ffffff; 1043 } 1044 1045 .store-landing .carousel-item { 1046 min-height: 100vh; 1047 position: relative; 1048 } 1049 1050 .store-landing .carousel-item img { 1051 width: 100%; 1052 height: 100vh; 1053 object-fit: cover; 1054 background-color: #ffffff; 1055 transition: opacity 0.8s ease-in-out; 1056 } 1057 1058 /* Pastikan caption berada di tengah sempurna */ 1059 .store-landing .carousel-caption { 1060 position: absolute !important; 1061 top: 0 !important; 1062 left: 0 !important; 1063 right: 0 !important; 1064 bottom: 0 !important; 1065 transform: none !important; 1066 background: rgba(0, 0, 0, 0.45) !important; 1067 } 1068 1069 /* CURVE DIVIDER - Pengganti store-landing.top */ 1070 .curve-divider-wrapper { 1071 position: absolute; 1072 bottom: 0; 1073 left: 0; 1074 width: 100%; 1075 z-index: 10; 1076 pointer-events: none; 1077 } 1078 1079 .curve-divider { 1080 position: relative; 1081 height: 200px; 1082 } 1083 1084 .curve-divider svg { 1085 position: absolute; 1086 inset: 0; 1087 width: 100%; 1088 height: 100%; 1089 } 1090 1091 .curve-divider path { 1092 fill: #f8f9fa; 1093 /* Warna background section visi-misi */ 1094 } 1095 1096 /* SCROLL DOWN BUTTON - Navy Theme */ 1097 .scroll-down-btn { 1098 position: absolute; 1099 top: 72%; 1100 left: 50%; 1101 transform: translate(-50%, -50%); 1102 z-index: 30; 1103 pointer-events: auto; 1104 1105 width: 60px; 1106 height: 60px; 1107 border-radius: 50%; 1108 background: linear-gradient(135deg, #2c3e6f 0%, #1a2b4f 100%); 1109 color: white; 1110 border: 3px solid rgba(255, 255, 255, 0.3); 1111 cursor: pointer; 1112 1113 display: flex; 1114 align-items: center; 1115 justify-content: center; 1116 1117 box-shadow: 1118 0 0 0 4px #f8f9fa, 1119 0 8px 20px rgba(26, 43, 79, 0.3), 1120 inset 0 1px 0 rgba(255, 255, 255, 0.1); 1121 transition: all 0.3s ease; 1122 animation: bounce 2s infinite; 1123 } 1124 1125 .scroll-down-btn:hover { 1126 background: linear-gradient(135deg, #1a2b4f 0%, #0f1a3a 100%); 1127 transform: translate(-50%, calc(-50% - 5px)); 1128 box-shadow: 1129 0 0 0 4px #f8f9fa, 1130 0 12px 30px rgba(26, 43, 79, 0.5), 1131 inset 0 1px 0 rgba(255, 255, 255, 0.2); 1132 border-color: rgba(255, 255, 255, 0.5); 1133 } 1134 1135 .scroll-down-btn:focus { 1136 outline: none; 1137 box-shadow: 1138 0 0 0 4px #f8f9fa, 1139 0 0 0 6px rgba(26, 43, 79, 0.3); 1140 } 1141 1142 .scroll-down-btn i { 1143 font-size: 22px; 1144 transition: transform 0.3s ease; 1145 filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
1146 } 1147 1148 .scroll-down-btn:hover i { 1149 transform: translateY(5px); 1150 } 1151 1152 /* Bounce Animation */ 1153 @keyframes bounce { 1154 0%, 20%, 50%, 80%, 100% { 1155 transform: translate(-50%, -50%); 1156 } 1157 40% { 1158 transform: translate(-50%, calc(-50% - 10px)); 1159 } 1160 60% { 1161 transform: translate(-50%, calc(-50% - 5px)); 1162 } 1163 } 1164 1165 /* Pulse Ring Effect */ 1166 .scroll-down-btn::before { 1167 content: ''; 1168 position: absolute; 1169 inset: -8px; 1170 border: 2px solid rgba(44, 62, 111, 0.4); 1171 border-radius: 50%; 1172 animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; 1173 } 1174 1175 @keyframes pulse-ring { 1176 0% { 1177 transform: scale(1); 1178 opacity: 1; 1179 } 1180 100% { 1181 transform: scale(1.3); 1182 opacity: 0; 1183 } 1184 } 1185 1186 /* HERO CONTENT CONTAINER */ 1187 .hero-content { 1188 text-align: center; 1189 padding: 0 20px; 1190 max-width: 1200px; 1191 margin: 0 auto; 1192 } 1193 1194 /* HERO TITLE - FONT BESAR dengan POPPINS */ 1195 .elegant-title { 1196 font-family: 'Poppins', sans-serif !important; 1197 font-size: clamp(3rem, 8vw, 7rem) !important; /* Font lebih besar: 3rem - 7rem */ 1198 font-weight: 600 !important; /* Semi-bold */ 1199 color: #ffffff !important; 1200 letter-spacing: -2px !important; /* Negative spacing untuk modern look */ 1201 line-height: 1.1 !important; 1202 text-shadow: 1203 0 4px 30px rgba(0, 0, 0, 0.6), 1204 0 8px 60px rgba(0, 0, 0, 0.4) !important; 1205 margin-bottom: 20px !important; 1206 opacity: 0; 1207 animation: fadeInTitle 1.2s ease-out 0.3s forwards !important; 1208 } 1209 1210 .elegant-title * { 1211 font-weight: 600 !important; /* Pastikan semua child element juga semi-bold */ 1212 } 1213 1214 #typingText { 1215 border-right: 3px solid rgba(255, 255, 255, 0.9); 1216 padding-right: 10px; 1217 animation: blink-cursor 1s step-end infinite; 1218 display: inline-block; 1219 font-weight: 600 !important; /* Semi-bold untuk text yang muncul */ 1220 } 1221 1222 @keyframes blink-cursor { 1223 0%, 49% { 1224 border-color: rgba(255, 255, 255, 0.9); 1225 } 1226 50%, 100% { 1227 border-color: transparent; 1228 } 1229 } 1230 1231 /* SUBTITLE - Poppins dengan ukuran lebih besar */ 1232 .elegant-subtitle { 1233 font-family: 'Poppins', sans-serif; 1234 font-size: clamp(1.2rem, 3vw, 2rem); /* Lebih besar */ 1235 font-weight: 600; /* Semi-bold */ 1236 color: rgba(255, 255, 255, 0.95); 1237 letter-spacing: 8px; 1238 text-transform: uppercase; 1239 text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5); 1240 margin: 0; 1241 opacity: 0; 1242 animation: fadeInTitle 1.2s ease-out 0.6s forwards; 1243 } 1244 1245 .accent-text { 1246 position: relative; 1247 padding: 0 20px; 1248 background: linear-gradient(90deg, 1249 rgba(255, 255, 255, 0.1) 0%, 1250 rgba(255, 255, 255, 0.2) 50%, 1251 rgba(255, 255, 255, 0.1) 100%); 1252 border-radius: 50px; 1253 display: inline-block; 1254 } 1255 1256 /* Decorative Lines */ 1257 .decorative-line-top, 1258 .decorative-line-bottom { 1259 width: 80px; 1260 height: 3px; 1261 background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent); 1262 margin: 0 auto; 1263 opacity: 0; 1264 } 1265 1266 .decorative-line-top { 1267 margin-bottom: 30px; 1268 animation: fadeInLine 1s ease-out 0.1s forwards; 1269 } 1270 1271 .decorative-line-bottom { 1272 margin-top: 30px; 1273 animation: fadeInLine 1s ease-out 0.8s forwards; 1274 } 1275 1276 /* Animations */ 1277 @keyframes fadeInTitle { 1278 from { 1279 opacity: 0; 1280 transform: translateY(30px); 1281 } 1282 to { 1283 opacity: 1;
1284 transform: translateY(0); 1285 } 1286 } 1287 1288 @keyframes fadeInLine { 1289 from { 1290 opacity: 0; 1291 width: 0; 1292 } 1293 to { 1294 opacity: 1; 1295 width: 80px; 1296 } 1297 } 1298 1299 /* Responsif untuk tablet */ 1300 @media (max-width: 992px) { 1301 .elegant-title { 1302 letter-spacing: -1px; 1303 } 1304 1305 .elegant-subtitle { 1306 letter-spacing: 6px; 1307 } 1308 } 1309 1310 /* Responsif untuk mobile */ 1311 @media (max-width: 768px) { 1312 .curve-divider { 1313 height: 120px; 1314 } 1315 1316 .scroll-down-btn { 1317 width: 52px; 1318 height: 52px; 1319 } 1320 1321 .scroll-down-btn i { 1322 font-size: 20px; 1323 } 1324 1325 .elegant-title { 1326 letter-spacing: -1px; 1327 } 1328 1329 .elegant-subtitle { 1330 letter-spacing: 4px; 1331 } 1332 1333 .decorative-line-top, 1334 .decorative-line-bottom { 1335 width: 60px; 1336 } 1337 } 1338 1339 @media (max-width: 576px) { 1340 .curve-divider { 1341 height: 80px; 1342 } 1343 1344 .scroll-down-btn { 1345 width: 48px; 1346 height: 48px; 1347 } 1348 1349 .scroll-down-btn i { 1350 font-size: 18px; 1351 } 1352 1353 .elegant-title { 1354 letter-spacing: 0; 1355 } 1356 1357 .elegant-subtitle { 1358 letter-spacing: 3px; 1359 } 1360 1361 .decorative-line-top, 1362 .decorative-line-bottom { 1363 width: 50px; 1364 height: 2px; 1365 } 1366 } 1367 </style> 1368 1369
1369<script> 1370 // Typing Animation - Simple & Elegant 1371 document.addEventListener('DOMContentLoaded', function() { 1372 const text = "Dinas Pendidikan dan Kebudayaan"; 1373 const typingElement = document.getElementById('typingText'); 1374 let index = 0; 1375 1376 function typeText() { 1377 if (index < text.length) { 1378 typingElement.textContent += text.charAt(index); 1379 index++; 1380 setTimeout(typeText, 80); 1381 } else { 1382 // Remove cursor setelah selesai dengan delay 1383 setTimeout(() => { 1384 typingElement.style.borderRight = 'none'; 1385 }, 2000); 1386 } 1387 } 1388 1389 // Mulai typing setelah 800ms (setelah fade in) 1390 setTimeout(typeText, 800); 1391 }); 1392 1393 // Smooth scroll ke section berikutnya 1394 function scrollToNextSection() { 1395 const nextSection = document.getElementById('visi'); 1396 if (nextSection) { 1397 nextSection.scrollIntoView({ 1398 behavior: 'smooth', 1399 block: 'start' 1400 }); 1401 } 1402 } 1403 </script>
1403 1404 1405 1406<!-- VISI MISI SECTION --> 1407<section class="visi-misi-section" id="visi"> 1408 <div class="container"> 1409 <!-- Section Header - seperti "Berita Terbaru" --> 1410 <div class="text-center mb-5"> 1411 <h3 class="section-main-title" style="color: #212e60;">Visi & Misi</h3> 1412 <p class="section-subtitle">Dinas Pendidikan dan Kebudayaan <span class="badge bg-warning text-dark">DISDIKBUD</span> Kota Padang</p> 1413 <hr class="line"> 1414 </div> 1415 1416 <div class="row g-4"> 1417 1418 <!-- Card VISI - 8 Kolom --> 1419 <div class="col-lg-8"> 1420 <div class="card shadow-sm h-100"> 1421 <div class="card-body p-3"> 1422 <h4 class="card-title-custom mb-2">VISI</h4> 1423 <p class="card-text-content mb-0"> 1424 "Menggerakkan segala potensi untuk Mewujudkan Kota Padang sebagai Kota Pintar (Smart City) dan Kota Sehat, berlandaskan agama dan budaya, menuju kota maju dan sejahtera." 1425 </p> 1426 </div> 1427 </div> 1428 </div> 1429 1430 <!-- Gambar - 4 Kolom (Sebelah Visi) --> 1431 <div class="col-lg-4"> 1432 <div class="card shadow-sm h-100"> 1433 <div class="image-container-visi"> 1434 <img src="/storage/info-bergambar/1766044402_HL-DAN-KARIKATUR-2005732567.png" 1435 class="img-fluid" 1436 alt="KEPALA DINAS PENDIDIKAN DAN KEBUDAYAAN KOTA PADANG" 1437 style="width: 100%; height: 100%; object-fit: contain;"> 1438 </div> 1439 <div class="card-body py-2 px-3"> 1440 <h6 class="card-title text-center fw-bold mb-0" style="color: #212e60; font-size: 0.85rem; line-height: 1.3;"> 1441 KEPALA DINAS PENDIDIKAN DAN KEBUDAYAAN KOTA PADANG 1442 </h6> 1443 </div> 1444 </div> 1445 </div> 1446 1447 <!-- Card MISI - Full Width dengan 2 Kolom Internal --> 1448 <div class="col-12"> 1449 <div class="card shadow-sm"> 1450 <div class="card-body p-4"> 1451 <h4 class="card-title-custom mb-4">MISI</h4> 1452 <div class="row g-4"> 1453 1454 <!-- Kolom Kiri Misi --> 1455 <div class="col-lg-6"> 1456 <div class="misi-items"> 1457 <div class="misi-item-row"> 1458 <span class="misi-number">1</span> 1459 <span class="misi-text">Menguatkan Tata Kelola Pemerintahan Yang Berintegritas, Responsif, Inovatif Dan Partisipatif.</span> 1460 </div> 1461 <div class="misi-item-row"> 1462 <span class="misi-number">2</span> 1463 <span class="misi-text">Menguatkan Pencapaian Indikator Kota Pintar Dan Kota Sehat.</span> 1464 </div> 1465 <div class="misi-item-row"> 1466 <span class="misi-number">3</span> 1467 <span class="misi-text">Menguatkan Masyarakat Yang Beragama Dan Berbudaya Melalui Pendidikan Karakter.</span> 1468 </div> 1469 <div class="misi-item-row">
1470 <span class="misi-number">4</span> 1471 <span class="misi-text">Mendorong Terbukanya Lapangan Pekerjaan.</span> 1472 </div> 1473 </div> 1474 </div> 1475 1476 <!-- Kolom Kanan Misi --> 1477 <div class="col-lg-6"> 1478 <div class="misi-items"> 1479 <div class="misi-item-row"> 1480 <span class="misi-number">5</span> 1481 <span class="misi-text">Mewujudkan Pembangunan Dan Merevitalisasi Sarana Dan Prasarana Umum Yang Hijau Dan Berkualitas.</span> 1482 </div> 1483 <div class="misi-item-row"> 1484 <span class="misi-number">6</span> 1485 <span class="misi-text">Menguatkan Jaringan Ketahanan Bencana.</span> 1486 </div> 1487 <div class="misi-item-row"> 1488 <span class="misi-number">7</span> 1489 <span class="misi-text">Mengembangkan Perekonomian Masyarakat Yang Adaptif Dan Kondusif Melalui Penguatan Sektor Perdagangan Dan Jasa.</span> 1490 </div> 1491 <div class="misi-item-row"> 1492 <span class="misi-number">8</span> 1493 <span class="misi-text">Menggerakkan Potensi Kota Untuk Terwujudnya Industri Kreatif Dan Pariwisata.</span> 1494 </div> 1495 </div> 1496 </div> 1497 </div> 1498 </div> 1499 </div> 1500 </div> 1501 1502 <!-- Card MOTTO - Full Width (jika ada) --> 1503 1504 </div> 1505 1506 </div> 1507</section> 1508 1509<style> 1510 /* Section Styling - Clean & Professional */ 1511 .visi-misi-section { 1512 background: #f8f9fa; 1513 padding: 80px 0; 1514 } 1515 1516 /* Section Header */ 1517 .section-main-title { 1518 color: #212e60; 1519 font-weight: 700; 1520 font-size: 2rem; 1521 margin-bottom: 10px; 1522 } 1523 1524 .section-subtitle { 1525 color: #666; 1526 font-size: 1rem; 1527 margin-bottom: 15px; 1528 } 1529 1530 .line { 1531 width: 60px; 1532 height: 3px; 1533 background: #212e60; 1534 margin: 0 auto; 1535 border: none; 1536 } 1537 1538 /* Card Styling - seperti card dokumen */ 1539 .visi-misi-section .card { 1540 border: none; 1541 border-radius: 8px; 1542 transition: all 0.3s ease; 1543 background: #ffffff; 1544 } 1545 1546 .visi-misi-section .card:hover { 1547 transform: translateY(-3px); 1548 box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important; 1549 } 1550 1551 /* Number Badge - seperti nomor urut di halaman statistik */ 1552 .number-badge { 1553 width: 45px; 1554 height: 45px; 1555 background: linear-gradient(135deg, #212e60 0%, #1a2352 100%); 1556 color: white; 1557 border-radius: 8px; 1558 display: flex; 1559 align-items: center; 1560 justify-content: center; 1561 font-weight: 700; 1562 font-size: 1.3rem; 1563 flex-shrink: 0; 1564 box-shadow: 0 4px 10px rgba(33, 46, 96, 0.2); 1565 } 1566 1567 /* Card Title */ 1568 .card-title-custom { 1569 color: #212e60; 1570 font-weight: 700; 1571 font-size: 1.4rem; 1572 letter-spacing: 1px; 1573 margin-bottom: 0; 1574 } 1575 1576 /* Card Text Content */ 1577 .card-text-content { 1578 color: #555; 1579 font-size: 1rem; 1580 line-height: 1.8; 1581 text-align: justify;
1582 margin-bottom: 0; 1583 } 1584 1585 /* Image Container for Visi Card */ 1586 .image-container-visi { 1587 flex: 1; 1588 display: flex; 1589 align-items: center; 1590 justify-content: center; 1591 padding: 15px; 1592 background: #f8f9fa; 1593 } 1594 1595 /* Misi Items Container */ 1596 .misi-items { 1597 display: flex; 1598 flex-direction: column; 1599 gap: 15px; 1600 } 1601 1602 /* Misi Item Row - Clean & Structured */ 1603 .misi-item-row { 1604 display: flex; 1605 align-items: flex-start; 1606 gap: 15px; 1607 padding: 15px; 1608 background: #f8f9fa; 1609 border-radius: 8px; 1610 border-left: 3px solid #212e60; 1611 transition: all 0.3s ease; 1612 } 1613 1614 .misi-item-row:hover { 1615 background: #e9ecef; 1616 border-left-color: #19BBB5; 1617 } 1618 1619 /* Misi Number */ 1620 .misi-number { 1621 display: inline-flex; 1622 align-items: center; 1623 justify-content: center; 1624 width: 30px; 1625 height: 30px; 1626 background: #212e60; 1627 color: white; 1628 border-radius: 6px; 1629 font-weight: 700; 1630 font-size: 0.9rem; 1631 flex-shrink: 0; 1632 } 1633 1634 /* Misi Text */ 1635 .misi-text { 1636 flex: 1; 1637 color: #555; 1638 font-size: 0.95rem; 1639 line-height: 1.6; 1640 } 1641 1642 /* Image Card di sidebar */ 1643 .visi-misi-section .card-img-top { 1644 border-radius: 8px 8px 0 0; 1645 } 1646 1647 /* Responsive Design */ 1648 @media (max-width: 991px) { 1649 .visi-misi-section { 1650 padding: 60px 0; 1651 } 1652 1653 .section-main-title { 1654 font-size: 1.75rem; 1655 } 1656 1657 .card-title-custom { 1658 font-size: 1.25rem; 1659 } 1660 1661 .card-text-content, 1662 .misi-text { 1663 font-size: 0.9rem; 1664 } 1665 1666 .number-badge { 1667 width: 40px; 1668 height: 40px; 1669 font-size: 1.1rem; 1670 } 1671 } 1672 1673 @media (max-width: 767px) { 1674 .visi-misi-section { 1675 padding: 50px 0; 1676 } 1677 1678 .section-main-title { 1679 font-size: 1.5rem; 1680 } 1681 1682 .card-title-custom { 1683 font-size: 1.15rem; 1684 } 1685 1686 .card-text-content, 1687 .misi-text { 1688 font-size: 0.85rem; 1689 } 1690 1691 .number-badge { 1692 width: 38px; 1693 height: 38px; 1694 font-size: 1rem; 1695 } 1696 1697 .misi-number { 1698 width: 28px; 1699 height: 28px; 1700 font-size: 0.85rem; 1701 } 1702 1703 .misi-item-row { 1704 padding: 12px; 1705 gap: 12px; 1706 } 1707 } 1708</style> 1709 1710 1711 </div> 1712 </div> 1713 1714 </div> 1715 </div> 1716 </section> 1717 1718 <!-- PROGRAM UNGGULAN --> 1719 1720 1721 <!-- ARTIKEL --> 1722 <section class="my-5"> 1723 <div class="container"> 1724 <div class="text-center mt-5"> 1725 <h3 class="red" style="color: #212e60;">Berita Terbaru</h3> 1726 <p>Berita dan Artikel <b>DISDIKBUD</b> Kota Padang</p> 1727 <hr class="line"> 1728 </div> 1729 <div class="row g-4"> 1730 <div class="col-lg-4 col-md-6"> 1731 <div class="card shadow-sm position-relative h-100"> 1732 <span class="card-date-badge"> 1733 13 September, 2026 1734 </span> 1735 <img src="/storage/berita_thumbnails/1789615453_Desain tanpa judul (18).jpg" alt="..." class="card-img-top" 1736 style="height: 200px; object-fit: cover;" /> 1737 1738 <div class="card-body d-flex flex-column"> 1739 <div class="card-category"><i class="fas fa-tag me-1"></i> Kegiatan</div> 1740 <h5 class="card-title">Pelaksanaan Belajar Mengajar (PBM) akibat Kondisi Kualitas Udara Kurang Baik</h5> 1741 <p class="card-text mt-2">Edran Pelaksanaan Belajar Mengajar (PBM) akibat
1741Kondisi Kualitas Udara Kurang Baik pada t...</p> 1742 1743 <div class="mt-auto"> 1744 <a href="https://disdik.padang.go.id/berita/75" 1745 class="btn btn-primary btn-sm mt-2"> 1746 Lihat Selengkapnya 1747 </a> 1748 </div> 1749 </div> 1750 </div> 1751 </div> 1752 <div class="col-lg-4 col-md-6"> 1753 <div class="card shadow-sm position-relative h-100"> 1754 <span class="card-date-badge"> 1755 16 September, 2026 1756 </span> 1757 <img src="/storage/berita_thumbnails/1789546558_Desain tanpa judul (17).jpg" alt="..." class="card-img-top" 1758 style="height: 200px; object-fit: cover;" /> 1759 1760 <div class="card-body d-flex flex-column"> 1761 <div class="card-category"><i class="fas fa-tag me-1"></i> Kegiatan</div> 1762 <h5 class="card-title">Penetapan Tari Buai-Buai Pauh sebagai Warisan Budaya Takbenda Indonesia (WBTbI) dari Kota Padang Tahun 2026</h5> 1763 <p class="card-text mt-2">Tari Buai-Buai Pauh resmi ditetapkan sebagai Warisan Budaya Takbenda Indonesia (WBTbI) dari Kota Pad...</p> 1764 1765 <div class="mt-auto"> 1766 <a href="https://disdik.padang.go.id/berita/74" 1767 class="btn btn-primary btn-sm mt-2"> 1768 Lihat Selengkapnya 1769 </a> 1770 </div> 1771 </div> 1772 </div> 1773 </div> 1774 <div class="col-lg-4 col-md-6"> 1775 <div class="card shadow-sm position-relative h-100"> 1776 <span class="card-date-badge"> 1777 11 September, 2026 1778 </span> 1779 <img src="/storage/berita_thumbnails/1789534561_Desain tanpa judul (13).jpg" alt="..." class="card-img-top" 1780 style="height: 200px; object-fit: cover;" /> 1781 1782 <div class="card-body d-flex flex-column"> 1783 <div class="card-category"><i class="fas fa-tag me-1"></i> Kegiatan</div> 1784 <h5 class="card-title">Mengukuhkan Dedikasi dan Pengabdian: Sertijab, Purna Bakti, dan Apresiasi ASN BerAKHLAK</h5> 1785 <p class="card-text mt-2">Dinas Pendidikan dan Kebudayaan Kota Padang telah melaksanakan kegiatan Serah Terima Jabatan (Sertij...</p> 1786 1787 <div class="mt-auto"> 1788 <a href="https://disdik.padang.go.id/berita/73" 1789 class="btn btn-primary btn-sm mt-2"> 1790 Lihat Selengkapnya 1791 </a> 1792 </div> 1793 </div> 1794 </div> 1795 </div> 1796 1797 1798 </div> 1799 <div class="text-center mt-4"> 1800 <a href="https://disdik.padang.go.id/berita-list" class="btn btn-primary px-4 py-2" 1801 style="border-radius: 30px; font-weight: 600; box-shadow: 0 4px 6px rgba(0,0,0,0.1); transition: all 0.3s ease;"> 1802 Lihat Semua Berita 1803 </a> 1804 </div> 1805 1806 <style> 1807 .btn-primary:hover { 1808 background-color: #0056b3 !important; 1809 transform: translateY(-2px); 1810 box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); 1811 } 1812 </style> 1813 1814 </div> 1815 </section> 1816 1817<!-- INFO GAMBAR SLIDER --> 1818<section class="my-5"> 1819 <div class="container"> 1820 <div class="text-center mb-4"> 1821 <h3 style="color:#212e60;">Info Gambar</h3> 1822 <p>Informasi Visual <b>DISDIKBUD</b> Kota Padang</p> 1823 <hr class="line"> 1824 </div> 1825 <div class="slider-info-gambar-wrapper position-relative"> 1826 <div class="slider-info-gambar"> 1827 <div class="px-2"> 1828 <div class="info-gambar-item" 1829 data-toggle="modal" 1830 data-target="#modalInfoGambar" 1831 data-image="/storage/info-gambar/1766376972_111.jpg" 1832 data-title="a"> 1833 <div class="info-gambar-img-wrapper"> 1834 <img src="/storage/info-gambar/1766376972_111.jpg" 1835 class="info-gambar-img" 1836 alt="a"> 1837 </div> 1838 </div> 1839 </div> 1840 <div class="px-2"> 1841 <div class="info-gambar-item" 1842 data-toggle="modal" 1843 data-target="#modalInfoGambar" 1844 data-image="/storage/info-gambar/1766373413_logo.png" 1845 data-title="TEST 3"> 1846 <div class="info-gambar-img-wrapper"> 1847 <img src="/storage/info-gambar/1766373413_logo.png" 1848 class="info-gambar-img" 1849 alt="TEST 3"> 1850 </div> 1851 </div> 1852 </div> 1853 <div class="px-2"> 1854 <div class="info-gambar-item" 1855 data-toggle="modal" 1856 data-target="#modalInfoGambar" 1857 data-image="/storage/info-gambar/1766373399_logo.png" 1858 data-title="TEST2"> 1859 <div class="info-gambar-img-wrapper"> 1860 <img src="/storage/info-gambar/1766373399_logo.png" 1861 class="info-gambar-img" 1862 alt="TEST2"> 1863 </div> 1864 </div> 1865 </div> 1866 <div class="px-2"> 1867 <div class="info-gambar-item" 1868 data-toggle="modal" 1869 data-target="#modalInfoGambar" 1870 data-image="/storage/info-gambar/1766373385_logo.png" 1871 data-title="TEST"> 1872 <div class="info-gambar-img-wrapper"> 1873 <img src="/storage/info-gambar/1766373385_logo.png" 1874 class="info-gambar-img" 1875 alt="TEST"> 1876 </div> 1877 </div> 1878 </div> 1879 </div> 1880 </div> 1881 </div> 1882</section> 1883 1884<!-- Modal Info Gambar --> 1885<div class="modal fade" id="modalInfoGambar" tabindex="-1" role="dialog" aria-hidden="true"> 1886 <div class="modal-dialog modal-dialog-centered" role="document"> 1887 <div class="modal-content border-0"> 1888 <button type="button" class="modal-close-btn" data-dismiss="modal" aria-label="Close">
1889 <span aria-hidden="true">×</span> 1890 </button> 1891 <div class="modal-body p-0"> 1892 <img src="" id="modalInfoGambarImage" class="modal-image" alt=""> 1893 <div class="modal-caption"> 1894 <p id="modalInfoGambarLabel" class="mb-0"></p> 1895 </div> 1896 </div> 1897 </div> 1898 </div> 1899</div> 1900 1901<style> 1902/* INFO GAMBAR SLIDER */ 1903.slider-info-gambar-wrapper { 1904 margin: 0 -15px; 1905} 1906 1907.slider-info-gambar { 1908 padding: 0 50px; 1909} 1910 1911.slider-info-gambar .slick-slide { 1912 padding: 0 8px; 1913} 1914 1915.info-gambar-item { 1916 cursor: pointer; 1917} 1918 1919.info-gambar-img-wrapper { 1920 width: 100%; 1921 height: 280px; 1922 overflow: hidden; 1923 background-color: #fff; 1924 border-radius: 8px; 1925 box-shadow: 0 2px 8px rgba(0,0,0,0.08); 1926} 1927 1928.info-gambar-item:hover .info-gambar-img-wrapper { 1929 box-shadow: 0 8px 20px rgba(0,0,0,0.15); 1930} 1931 1932.info-gambar-img { 1933 width: 100%; 1934 height: 100%; 1935 object-fit: contain; 1936 object-position: center; 1937} 1938 1939/* Custom Slick Arrow */ 1940.slider-info-gambar .slick-prev, 1941.slider-info-gambar .slick-next { 1942 width: 45px; 1943 height: 45px; 1944 background-color: #fff; 1945 border: 2px solid #212e60; 1946 border-radius: 50%; 1947 z-index: 10; 1948 transition: all 0.3s ease; 1949 box-shadow: 0 2px 8px rgba(0,0,0,0.1); 1950} 1951 1952.slider-info-gambar .slick-prev:hover, 1953.slider-info-gambar .slick-next:hover { 1954 background-color: #212e60; 1955 transform: scale(1.1); 1956} 1957 1958.slider-info-gambar .slick-prev { 1959 left: 0; 1960} 1961 1962.slider-info-gambar .slick-next { 1963 right: 0; 1964} 1965 1966.slider-info-gambar .slick-prev:before, 1967.slider-info-gambar .slick-next:before { 1968 font-size: 22px; 1969 opacity: 1; 1970 color: #212e60; 1971} 1972 1973.slider-info-gambar .slick-prev:hover:before, 1974.slider-info-gambar .slick-next:hover:before { 1975 color: #fff; 1976} 1977 1978/* Modal Styling - Ukuran Sedang */ 1979#modalInfoGambar .modal-dialog { 1980 max-width: 700px; 1981} 1982 1983#modalInfoGambar .modal-content { 1984 background-color: transparent; 1985 box-shadow: none; 1986} 1987 1988#modalInfoGambar .modal-body { 1989 position: relative; 1990 padding: 0; 1991 display: flex; 1992 flex-direction: column; 1993 align-items: center; 1994} 1995 1996.modal-image { 1997 width: 100%; 1998 height: auto; 1999 max-height: 500px; 2000 object-fit: contain; 2001 border-radius: 8px; 2002 background-color: #fff; 2003 box-shadow: 0 10px 40px rgba(0,0,0,0.3); 2004} 2005 2006.modal-caption { 2007 background-color: rgba(255, 255, 255, 0.95); 2008 padding: 12px 20px; 2009 border-radius: 8px; 2010 margin-top: 15px; 2011 box-shadow: 0 4px 15px rgba(0,0,0,0.1); 2012 width: 100%; 2013 text-align: center; 2014} 2015 2016.modal-caption p { 2017 color: #212e60; 2018 font-weight: 600; 2019 font-size: 0.95rem; 2020} 2021 2022.modal-close-btn { 2023 position: absolute; 2024 top: -15px; 2025 right: -15px; 2026 z-index: 1050; 2027 width: 40px; 2028 height: 40px; 2029 background-color: #fff; 2030 border: 2px solid #212e60; 2031 border-radius: 50%; 2032 font-size: 26px; 2033 line-height: 1; 2034 color: #212e60; 2035 cursor: pointer; 2036 transition: all 0.3s ease; 2037 display: flex;
2038 align-items: center; 2039 justify-content: center; 2040 box-shadow: 0 4px 15px rgba(0,0,0,0.2); 2041} 2042 2043.modal-close-btn:hover { 2044 background-color: #212e60; 2045 color: #fff; 2046 transform: rotate(90deg); 2047} 2048 2049/* Responsive Adjustments */ 2050@media (max-width: 768px) { 2051 .slider-info-gambar { 2052 padding: 0 45px; 2053 } 2054 2055 .info-gambar-img-wrapper { 2056 height: 220px; 2057 } 2058 2059 .slider-info-gambar .slick-prev, 2060 .slider-info-gambar .slick-next { 2061 width: 38px; 2062 height: 38px; 2063 } 2064 2065 #modalInfoGambar .modal-dialog { 2066 max-width: 90%; 2067 margin: 30px auto; 2068 } 2069 2070 .modal-image { 2071 max-height: 400px; 2072 } 2073 2074 .modal-close-btn { 2075 width: 36px; 2076 height: 36px; 2077 font-size: 24px; 2078 top: -12px; 2079 right: -12px; 2080 } 2081 2082 .modal-caption { 2083 margin-top: 12px; 2084 padding: 10px 15px; 2085 } 2086 2087 .modal-caption p { 2088 font-size: 0.9rem; 2089 } 2090} 2091 2092@media (max-width: 576px) { 2093 .slider-info-gambar { 2094 padding: 0 40px; 2095 } 2096 2097 .info-gambar-img-wrapper { 2098 height: 200px; 2099 } 2100 2101 .slider-info-gambar .slick-prev, 2102 .slider-info-gambar .slick-next { 2103 width: 35px; 2104 height: 35px; 2105 } 2106 2107 .slider-info-gambar .slick-prev:before, 2108 .slider-info-gambar .slick-next:before { 2109 font-size: 18px; 2110 } 2111 2112 #modalInfoGambar .modal-dialog { 2113 max-width: 95%; 2114 margin: 20px auto; 2115 } 2116 2117 .modal-image { 2118 max-height: 350px; 2119 } 2120 2121 .modal-close-btn { 2122 width: 34px; 2123 height: 34px; 2124 font-size: 22px; 2125 top: -10px; 2126 right: -10px; 2127 } 2128} 2129</style> 2130
2131<script> 2132$(document).ready(function () { 2133 // Initialize Slick Slider 2134 $('.slider-info-gambar').slick({ 2135 slidesToShow: 3, 2136 slidesToScroll: 1, 2137 autoplay: true, 2138 autoplaySpeed: 3500, 2139 infinite: true, 2140 arrows: true, 2141 dots: false, 2142 centerMode: false, 2143 focusOnSelect: false, 2144 responsive: [ 2145 { 2146 breakpoint: 1200, 2147 settings: { 2148 slidesToShow: 3 2149 } 2150 }, 2151 { 2152 breakpoint: 992, 2153 settings: { 2154 slidesToShow: 2 2155 } 2156 }, 2157 { 2158 breakpoint: 768, 2159 settings: { 2160 slidesToShow: 2 2161 } 2162 }, 2163 { 2164 breakpoint: 576, 2165 settings: { 2166 slidesToShow: 1, 2167 centerMode: false 2168 } 2169 } 2170 ] 2171 }); 2172 2173 // Handle Modal Click 2174 $('.info-gambar-item').on('click', function() { 2175 var imageSrc = $(this).data('image'); 2176 var imageTitle = $(this).data('title'); 2177 2178 $('#modalInfoGambarImage').attr('src', imageSrc); 2179 $('#modalInfoGambarLabel').text(imageTitle); 2180 }); 2181 2182 // Reset modal on close 2183 $('#modalInfoGambar').on('hidden.bs.modal', function () { 2184 $('#modalInfoGambarImage').attr('src', ''); 2185 $('#modalInfoGambarLabel').text(''); 2186 }); 2187}); 2188</script>
2188 2189 2190 2191 2192<section class="my-5 kalender-section" id="layanan"> 2193 <div class="container"> 2194 2195 <div class="text-center mb-4"> 2196 <h3 class="title">Kalender Akademik</h3> 2197 <p>Agenda Pendidikan <b>DISDIKBUD</b> Kota Padang</p> 2198 <hr class="line"> 2199 </div> 2200 2201 <div class="calendar-wrapper"> 2202 2203 <!-- HEADER --> 2204 <div class="calendar-nav"> 2205 <h5 id="calendarTitle" 2206 data-year="2026" 2207 data-month="8"> 2208 September 2026 2209 </h5> 2210 2211 <div class="calendar-controls"> 2212 <button class="btn btn-dark btn-sm" id="btnPrev">â¹</button> 2213 <button class="btn btn-dark btn-sm" id="btnToday">today</button> 2214 <button class="btn btn-dark btn-sm" id="btnNext">âº</button> 2215 </div> 2216 </div> 2217 2218 <!-- GRID --> 2219 <div class="calendar-grid" id="calendarGrid"></div> 2220 2221 </div> 2222 </div> 2223</section> 2224 2225 2226 2227 2228<style> 2229 /* SECTION */ 2230.kalender-section { 2231 background: url('/assets/img/bgcal.png') center/cover no-repeat; 2232 padding: 45px 0; 2233} 2234 2235/* WRAPPER */ 2236.calendar-wrapper { 2237 background: rgba(255,255,255,0.96); 2238 border-radius: 14px; 2239 padding: 14px; 2240 max-width: 820px; /* ð¥ lebih kecil & proporsional */ 2241 margin: 0 auto; 2242} 2243 2244/* HEADER */ 2245.calendar-nav { 2246 display: flex;
2247 align-items: center; 2248 justify-content: space-between; 2249 margin-bottom: 10px; 2250} 2251 2252.calendar-nav h5 { 2253 margin: 0; 2254 font-weight: 700; 2255 font-size: 15px; 2256 color: #212e60; 2257} 2258 2259/* BUTTON */ 2260.calendar-controls { 2261 display: flex; 2262 gap: 6px; 2263} 2264 2265.calendar-controls .btn { 2266 padding: 3px 8px; 2267 font-size: 11px; 2268 border-radius: 6px; 2269} 2270 2271/* GRID */ 2272.calendar-grid { 2273 display: grid; 2274 grid-template-columns: repeat(7, minmax(0, 1fr)); 2275 gap: 5px; 2276} 2277 2278/* DAY HEADER */ 2279.calendar-day-header { 2280 text-align: center; 2281 font-weight: 600; 2282 color: #212e60; 2283 font-size: 11px; 2284} 2285 2286/* CELL */ 2287.calendar-cell { 2288 min-height: 68px; 2289 background: #fff; 2290 border-radius: 9px; 2291 padding: 4px; 2292 font-size: 11px; 2293 min-width: 0; 2294 overflow: hidden; 2295} 2296 2297/* OTHER MONTH */ 2298.calendar-cell.other-month { 2299 opacity: 0.25; 2300} 2301 2302/* TODAY */ 2303.calendar-cell.today { 2304 background: #b7f5c8; 2305 border: 2px solid #28a745; 2306} 2307 2308/* DATE */ 2309.date-number { 2310 font-weight: 700; 2311 font-size: 10px; 2312 color: #333; 2313} 2314 2315/* EVENT */ 2316.calendar-event { 2317 margin-top: 3px; 2318 padding: 2px 5px; 2319 background: #0dcaf0; 2320 color: #fff; 2321 border-radius: 5px; 2322 font-size: 9.5px; 2323 line-height: 1.2; 2324 white-space: nowrap; 2325 overflow: hidden; 2326 text-overflow: ellipsis; 2327} 2328 2329/* RESPONSIVE */ 2330@media (max-width: 768px) { 2331 .calendar-wrapper { 2332 max-width: 100%; 2333 padding: 12px; 2334 } 2335 2336 .calendar-cell { 2337 min-height: 55px; 2338 } 2339} 2340 2341@media (max-width: 576px) { 2342 .calendar-grid { 2343 gap: 4px; 2344 } 2345 2346 .calendar-cell { 2347 min-height: 48px; 2348 padding: 3px; 2349 } 2350 2351 .calendar-nav h5 { 2352 font-size: 14px; 2353 } 2354 2355 .calendar-controls .btn { 2356 font-size: 10px; 2357 padding: 2px 6px; 2358 } 2359} 2360 2361</style> 2362
2363<script> 2364const kalenderData = {"2026-07-01":[{"id":7,"tanggal":"2026-07-01","deskripsi":"LIBUR SEMESTER GANJIL\/GENAP","created_at":"2026-07-16T00:59:04.000000Z","updated_at":"2026-07-16T00:59:04.000000Z"}],"2026-07-02":[{"id":8,"tanggal":"2026-07-02","deskripsi":"LIBUR SEMESTER GANJIL\/GENAP","created_at":"2026-07-16T00:59:26.000000Z","updated_at":"2026-07-16T00:59:26.000000Z"}],"2026-07-03":[{"id":9,"tanggal":"2026-07-03","deskripsi":"LIBUR SEMESTER GANJIL\/GENAP","created_at":"2026-07-16T01:00:27.000000Z","updated_at":"2026-07-16T01:00:27.000000Z"}],"2026-07-04":[{"id":10,"tanggal":"2026-07-04","deskripsi":"LIBUR SEMESTER GANJIL\/GENAP","created_at":"2026-07-16T01:01:01.000000Z","updated_at":"2026-07-16T01:01:01.000000Z"}],"2026-07-05":[{"id":11,"tanggal":"2026-07-05","deskripsi":"LIBUR SEMESTER GANJIL\/GENAP","created_at":"2026-07-16T01:02:49.000000Z","updated_at":"2026-07-16T01:02:49.000000Z"}],"2026-07-06":[{"id":12,"tanggal":"2026-07-06","deskripsi":"LIBUR SEMESTER GANJIL\/GENAP","created_at":"2026-07-16T01:03:07.000000Z","updated_at":"2026-07-16T01:03:07.000000Z"}],"2026-07-07":[{"id":13,"tanggal":"2026-07-07","deskripsi":"LIBUR SEMESTER GANJIL\/GENAP","created_at":"2026-07-16T01:03:19.000000Z","updated_at":"2026-07-16T01:03:19.000000Z"}],"2026-07-08":[{"id":14,"tanggal":"2026-07-08","deskripsi":"LIBUR SEMESTER GANJIL\/GENAP","created_at":"2026-07-16T01:03:28.000000Z","updated_at":"2026-07-16T01:03:28.000000Z"},{"id":34,"tanggal":"2026-07-08","deskripsi":"SUMATIF AKHIR SEMESTER","created_at":"2026-07-24T04:29:55.000000Z","updated_at":"2026-07-24T04:29:55.000000Z"}],"2026-07-10":[{"id":15,"tanggal":"2026-07-10","deskripsi":"LIBUR SEMESTER GANJIL\/GENAP","created_at":"2026-07-16T01:03:53.000000Z","updated_at":"2026-07-16T01:03:53.000000Z"}],"2026-07-09":[{"id":16,"tanggal":"2026-07-09","deskripsi":"LIBUR SEMESTER GANJIL\/GENAP","created_at":"2026-07-16T01:04:01.000000Z","updated_at":"2026-07-16T01:04:01.000000Z"}],"2026-07-11":[{"id":17,"tanggal":"2026-07-11","deskripsi":"LIBUR SEMESTER GANJIL\/GENAP","created_at":"2026-07-16T01:04:11.000000Z","updated_at":"2026-07-16T01:04:11.000000Z"}],"2026-07-13":[{"id":18,"tanggal":"2026-07-13","deskripsi":"AWAL SEMESTER GANJIL\/GENAP","created_at":"2026-07-16T01:04:51.000000Z","updated_at":"2026-07-16T01:04:51.000000Z"}],"2026-07-14":[{"id":19,"tanggal":"2026-07-14","deskripsi":"PENGENALAN LINGKUNGAN SEKOLAH (PLS)","created_at":"2026-07-16T01:05:28.000000Z","updated_at":"2026-07-16T01:05:28.000000Z"}],"2026-07-15":[{"id":20,"tanggal":"2026-07-15","deskripsi":"PENGENALAN LINGKUNGAN SEKOLAH (PLS)","created_at":"2026-07-16T01:05:37.000000Z","updated_at":"2026-07-16T01:05:37.000000Z"}],"2026-07-16":[{"id":21,"tanggal":"2026-07-16","deskripsi":"PENGENALAN LINGKUNGAN SEKOLAH (PLS)","created_at":"2026-07-16T01:05:49.000000Z","updated_at":"2026-07-16T01:06:07.000000Z"}],"2026-07-17":[{"id":22,"tanggal":"2026-07-17","deskripsi":"PENGENALAN LINGKUNGAN SEKOLAH (PLS)","created_at":"2026-07-16T01:06:19.000000Z","updated_at":"2026-07-16T01:06:19.000000Z"}],"2026-08-18":[{"id":23,"tanggal":"2026-08-18","deskripsi":"PERINGATAN HARI BESAR","created_at":"2026-07-16T01:08:56.000000Z","updated_at":"2026-07-16T01:08:56.000000Z"}],"2026-08-28":[{"id":24,"tanggal":"2026-08-28","deskripsi":"PERINGATAN HARI BESAR","created_at":"2026-07-16T01:09:07.000000Z","updated_at":"2026-07-16T01:09:07.000000Z"}],"2026-12-25":[{"id":25,"tanggal":"2026-12-25","deskripsi":"PERINGATAN HARI BESAR","created_at":"2026-07-16T01:09:32.000000Z","updated_at":"2026-07-16T01:09:32.000000Z"}],"2026-09-21":[{"id":26,"tanggal":"2026-09-21","deskripsi":"ASESMEN TENGAH SEMESTER SD DAN SMP","created_at":"2026-07-16T01:10:32.000000Z","updated_at":"2026-07-16T01:10:32.000000Z"}],"2026-09-22":[{"id":27,"tanggal":"2026-09-22","deskripsi":"ASESMEN TENGAH SEMESTER SD DAN SMP","created_at":"2026-07-16T01:10:40.000000Z","updated_at":"2026-07-16T01:10:40.000000Z"}],"2026-09-23":[{"id":28,"tanggal":"2026-09-23","deskripsi":"ASESMEN TENGAH SEMESTER SD DAN SMP","created_at":"2026-07-16T01:10:50.000000Z","updated_at":"2026-07-16T01:10:50.000000Z"}
2364],"2026-09-24":[{"id":29,"tanggal":"2026-09-24","deskripsi":"ASESMEN TENGAH SEMESTER SD DAN SMP","created_at":"2026-07-16T01:11:40.000000Z","updated_at":"2026-07-16T01:11:40.000000Z"}],"2026-09-25":[{"id":30,"tanggal":"2026-09-25","deskripsi":"ASESMEN TENGAH SEMESTER SD DAN SMP","created_at":"2026-07-16T01:12:23.000000Z","updated_at":"2026-07-16T01:12:23.000000Z"}],"2026-09-26":[{"id":31,"tanggal":"2026-09-26","deskripsi":"ASESMEN TENGAH SEMESTER SD DAN SMP","created_at":"2026-07-16T01:12:40.000000Z","updated_at":"2026-07-16T01:12:40.000000Z"}],"2026-11-25":[{"id":32,"tanggal":"2026-11-25","deskripsi":"PERINGATAN HARI BESAR","created_at":"2026-07-24T04:28:25.000000Z","updated_at":"2026-07-24T04:28:25.000000Z"}],"2026-12-07":[{"id":33,"tanggal":"2026-12-07","deskripsi":"SUMATIF AKHIR SEMESTER","created_at":"2026-07-24T04:29:34.000000Z","updated_at":"2026-07-24T04:29:34.000000Z"}],"2026-12-09":[{"id":35,"tanggal":"2026-12-09","deskripsi":"SUMATIF AKHIR SEMESTER","created_at":"2026-07-24T04:30:10.000000Z","updated_at":"2026-07-24T04:30:10.000000Z"}],"2026-12-10":[{"id":36,"tanggal":"2026-12-10","deskripsi":"SUMATIF AKHIR SEMESTER","created_at":"2026-07-24T04:30:28.000000Z","updated_at":"2026-07-24T04:30:28.000000Z"}],"2026-12-11":[{"id":37,"tanggal":"2026-12-11","deskripsi":"SUMATIF AKHIR SEMESTER","created_at":"2026-07-24T04:30:39.000000Z","updated_at":"2026-07-24T04:30:39.000000Z"}],"2026-12-12":[{"id":38,"tanggal":"2026-12-12","deskripsi":"SUMATIF AKHIR SEMESTER","created_at":"2026-07-24T04:30:51.000000Z","updated_at":"2026-07-24T04:30:51.000000Z"}],"2026-12-08":[{"id":39,"tanggal":"2026-12-08","deskripsi":"SUMATIF AKHIR SEMESTER","created_at":"2026-07-24T04:31:22.000000Z","updated_at":"2026-07-24T04:31:22.000000Z"}],"2026-12-14":[{"id":40,"tanggal":"2026-12-14","deskripsi":"CLASS MEETING\/PENGOLAHAN NILAI RAPOR","created_at":"2026-07-24T04:32:58.000000Z","updated_at":"2026-07-24T04:32:58.000000Z"}],"2026-12-15":[{"id":41,"tanggal":"2026-12-15","deskripsi":"CLASS MEETING\/PENGOLAHAN NILAI RAPOR","created_at":"2026-07-24T04:33:11.000000Z","updated_at":"2026-07-24T04:33:11.000000Z"}],"2026-12-16":[{"id":42,"tanggal":"2026-12-16","deskripsi":"CLASS MEETING\/PENGOLAHAN NILAI RAPOR","created_at":"2026-07-24T04:33:22.000000Z","updated_at":"2026-07-24T04:33:22.000000Z"}],"2026-12-17":[{"id":43,"tanggal":"2026-12-17","deskripsi":"CLASS MEETING\/PENGOLAHAN NILAI RAPOR","created_at":"2026-07-24T04:33:34.000000Z","updated_at":"2026-07-24T04:33:34.000000Z"}],"2026-12-18":[{"id":44,"tanggal":"2026-12-18","deskripsi":"CLASS MEETING\/PENGOLAHAN NILAI RAPOR","created_at":"2026-07-24T04:33:46.000000Z","updated_at":"2026-07-24T04:33:46.000000Z"}],"2026-12-19":[{"id":45,"tanggal":"2026-12-19","deskripsi":"PEMBAGIAN RAPOR SEMESTER GANJIL\/GENAP","created_at":"2026-07-24T04:35:05.000000Z","updated_at":"2026-07-24T04:35:05.000000Z"}],"2026-12-21":[{"id":46,"tanggal":"2026-12-21","deskripsi":"LIBUR SEMESTER GANJIL\/GENAP","created_at":"2026-07-24T04:36:07.000000Z","updated_at":"2026-07-24T04:36:07.000000Z"}],"2026-12-22":[{"id":47,"tanggal":"2026-12-22","deskripsi":"LIBUR SEMESTER GANJIL\/GENAP","created_at":"2026-07-24T04:36:19.000000Z","updated_at":"2026-07-24T04:36:19.000000Z"}],"2026-12-23":[{"id":48,"tanggal":"2026-12-23","deskripsi":"LIBUR SEMESTER GANJIL\/GENAP","created_at":"2026-07-24T04:36:30.000000Z","updated_at":"2026-07-24T04:36:30.000000Z"}],"2026-12-24":[{"id":49,"tanggal":"2026-12-24","deskripsi":"LIBUR SEMESTER GANJIL\/GENAP","created_at":"2026-07-24T04:36:39.000000Z","updated_at":"2026-07-24T04:36:39.000000Z"}],"2026-12-26":[{"id":50,"tanggal":"2026-12-26","deskripsi":"LIBUR SEMESTER GANJIL\/GENAP","created_at":"2026-07-24T04:36:51.000000Z","updated_at":"2026-07-24T04:36:51.000000Z"}],"2026-12-28":[{"id":51,"tanggal":"2026-12-28","deskripsi":"LIBUR SEMESTER GANJIL\/GENAP","created_at":"2026-07-24T04:37:06.000000Z","updated_at":"2026-07-24T04:37:06.000000Z"}],"2026-12-29":[{"id":52,"tanggal":"2026-12-29","deskripsi":"LIBUR SEMESTER GANJIL\/GENAP","created_at":"2026-07-24T04:37:18.000000Z","updated_at":"2026-07-24T04:37:18.000000Z"}],"2026-12-30":[{"id":53,"tanggal":"2026-12-30","deskripsi":"LIBUR SEMESTER GANJIL\/GENAP","created_at":"2026-07-24T04:37:28.000000Z","updated_at":"2026-07-24T04:37:28.000000Z"}],"2026-12-31":[{"id":54,"tanggal":"2026-12-31","deskripsi":"LIBUR SEMESTER GANJIL\/GENAP","created_at":"2026-07-24T04:37:38.000000Z","updated_at":"2026-07-24T04:37:38.000000Z"}],"2027-01-04":[{"id":55,"tanggal":"2027-01-04","deskripsi":"AWAL SEMESTER GANJIL\/GENAP","created_at":"2026-07-24T04:38:14.000000Z","updated_at":"2026-07-24T04:38:14.000000Z"}],"2027-01-08":[{"id":56,"tanggal":"2027-01-08","deskripsi":"PERINGATAN HARI BESAR","created_at":"2026-07-24T04:39:18.000000Z","updated_at":"2026-07-24T04:39:18.000000Z"}],"2027-02-05":[{"id":57,"tanggal":"2027-02-05","deskripsi":"LIBUR AWAL RAMADHAN 1448H","created_at":"2026-07-24T04:40:28.000000Z","updated_at":"2026-07-24T04:40:28.000000Z"}],"2027-02-08":[{"id":58,"tanggal":"2027-02-08","deskripsi":"LIBUR AWAL RAMADHAN 1448H","created_at":"2026-07-24T04:42:45.000000Z","updated_at":"2026-07-24T04:42:45.000000Z"}],"2027-02-09":[{"id":59,"tanggal":"2027-02-09","deskripsi":"LIBUR AWAL RAMADHAN 1448H","created_at":"2026-07-24T04:43:00.000000Z","updated_at":"2026-07-24T04:43:00.000000Z"}],"2027-02-10":[{"id":60,"tanggal":"2027-02-10","deskripsi":"LIBUR AWAL RAMADHAN 1448H","created_at":"2026-07-24T04:43:22.000000Z","updated_at":"2026-07-24T04:43:22.000000Z"}],"2027-02-11":[{"id":61,"tanggal":"2027-02-11","deskripsi":"LIBUR AWAL RAMADHAN 1448H","created_at":"2026-07-24T04:43:34.000000Z","updated_at":"2026-07-24T04:43:34.000000Z"}],"2027-02-12":[{"id":62,"tanggal":"2027-02-12","deskripsi":"PESANTREN RAMADHAN 1448H (KURIKULER SEMESTER 2)","created_at":"2026-07-24T04:45:32.000000Z","updated_at":"2026-07-24T04:45:32.000000Z"}],"2027-02-13":[{"id":63,"tanggal":"2027-02-13","deskripsi":"PESANTREN RAMADHAN 1448H (KURIKULER SEMESTER 2)","created_at":"2026-07-24T04:45:45.
2364000000Z","updated_at":"2026-07-24T04:45:45.000000Z"}],"2027-02-15":[{"id":64,"tanggal":"2027-02-15","deskripsi":"PESANTREN RAMADHAN 1448H (KURIKULER SEMESTER 2)","created_at":"2026-07-24T04:46:03.000000Z","updated_at":"2026-07-24T04:46:03.000000Z"}],"2027-02-16":[{"id":65,"tanggal":"2027-02-16","deskripsi":"PESANTREN RAMADHAN 1448H (KURIKULER SEMESTER 2)","created_at":"2026-07-24T04:46:14.000000Z","updated_at":"2026-07-24T04:46:14.000000Z"}],"2027-02-17":[{"id":66,"tanggal":"2027-02-17","deskripsi":"PESANTREN RAMADHAN 1448H (KURIKULER SEMESTER 2)","created_at":"2026-07-24T04:46:25.000000Z","updated_at":"2026-07-24T04:46:25.000000Z"}],"2027-02-18":[{"id":67,"tanggal":"2027-02-18","deskripsi":"PESANTREN RAMADHAN 1448H (KURIKULER SEMESTER 2)","created_at":"2026-07-24T04:46:36.000000Z","updated_at":"2026-07-24T04:46:36.000000Z"}],"2027-02-19":[{"id":68,"tanggal":"2027-02-19","deskripsi":"PESANTREN RAMADHAN 1448H (KURIKULER SEMESTER 2)","created_at":"2026-07-24T04:46:46.000000Z","updated_at":"2026-07-24T04:46:46.000000Z"}],"2027-02-20":[{"id":69,"tanggal":"2027-02-20","deskripsi":"PESANTREN RAMADHAN 1448H (KURIKULER SEMESTER 2)","created_at":"2026-07-24T04:46:56.000000Z","updated_at":"2026-07-24T04:46:56.000000Z"}],"2027-02-22":[{"id":70,"tanggal":"2027-02-22","deskripsi":"PESANTREN RAMADHAN 1448H (KURIKULER SEMESTER 2)","created_at":"2026-07-24T04:47:09.000000Z","updated_at":"2026-07-24T04:47:09.000000Z"}],"2027-02-23":[{"id":71,"tanggal":"2027-02-23","deskripsi":"PESANTREN RAMADHAN 1448H (KURIKULER SEMESTER 2)","created_at":"2026-07-24T04:47:19.000000Z","updated_at":"2026-07-24T04:47:19.000000Z"}],"2027-02-24":[{"id":72,"tanggal":"2027-02-24","deskripsi":"PESANTREN RAMADHAN 1448H (KURIKULER SEMESTER 2)","created_at":"2026-07-24T04:47:29.000000Z","updated_at":"2026-07-24T04:47:29.000000Z"}],"2027-02-25":[{"id":73,"tanggal":"2027-02-25","deskripsi":"PESANTREN RAMADHAN 1448H (KURIKULER SEMESTER 2)","created_at":"2026-07-24T04:47:39.000000Z","updated_at":"2026-07-24T04:47:39.000000Z"}],"2027-02-27":[{"id":74,"tanggal":"2027-02-27","deskripsi":"PESANTREN RAMADHAN 1448H (KURIKULER SEMESTER 2)","created_at":"2026-07-24T04:47:55.000000Z","updated_at":"2026-07-24T04:47:55.000000Z"}],"2027-02-26":[{"id":75,"tanggal":"2027-02-26","deskripsi":"PESANTREN RAMADHAN 1448H (KURIKULER SEMESTER 2)","created_at":"2026-07-24T04:48:23.000000Z","updated_at":"2026-07-24T04:48:23.000000Z"}],"2027-03-01":[{"id":76,"tanggal":"2027-03-01","deskripsi":"PESANTREN RAMADHAN 1448H (KURIKULER SEMESTER 2)","created_at":"2026-07-24T04:49:47.000000Z","updated_at":"2026-07-24T04:49:47.000000Z"}],"2027-03-02":[{"id":77,"tanggal":"2027-03-02","deskripsi":"PESANTREN RAMADHAN 1448H (KURIKULER SEMESTER 2)","created_at":"2026-07-24T04:49:57.000000Z","updated_at":"2026-07-24T04:49:57.000000Z"}],"2027-03-03":[{"id":78,"tanggal":"2027-03-03","deskripsi":"PESANTREN RAMADHAN 1448H (KURIKULER SEMESTER 2)","created_at":"2026-07-24T04:50:08.000000Z","updated_at":"2026-07-24T04:50:08.000000Z"}],"2027-03-04":[{"id":79,"tanggal":"2027-03-04","deskripsi":"LIBUR IDUL FITRI 1448H","created_at":"2026-07-24T04:51:30.000000Z","updated_at":"2026-07-24T04:51:30.000000Z"}],"2027-03-05":[{"id":80,"tanggal":"2027-03-05","deskripsi":"LIBUR IDUL FITRI 1448H","created_at":"2026-07-24T04:51:39.000000Z","updated_at":"2026-07-24T04:51:39.000000Z"}],"2027-03-06":[{"id":81,"tanggal":"2027-03-06","deskripsi":"LIBUR IDUL FITRI 1448H","created_at":"2026-07-24T04:51:51.000000Z","updated_at":"2026-07-24T04:51:51.000000Z"}],"2027-03-08":[{"id":82,"tanggal":"2027-03-08","deskripsi":"LIBUR IDUL FITRI 1448H","created_at":"2026-07-24T04:52:02.000000Z","updated_at":"2026-07-24T04:52:02.000000Z"}],"2027-03-12":[{"id":83,"tanggal":"2027-03-12","deskripsi":"LIBUR IDUL FITRI 1448H","created_at":"2026-07-24T04:52:19.000000Z","updated_at":"2026-07-24T04:52:19.000000Z"}],"2027-03-13":[{"id":84,"tanggal":"2027-03-13","deskripsi":"LIBUR IDUL FITRI 1448H","created_at":"2026-07-24T04:52:30.000000Z","updated_at":"2026-07-24T04:52:30.000000Z"}],"2027-03-15":[{"id":85,"tanggal":"2027-03-15","deskripsi":"LIBUR IDUL FITRI 1448H","created_at":"2026-07-24T04:52:42.000000Z","updated_at":"2026-07-24T04:52:42.000000Z"}],"2027-03-16":[{"id":86,"tanggal":"2027-03-16","deskripsi":"LIBUR IDUL FITRI 1448H","created_at":"2026-07-24T04:52:54.000000Z","updated_at":"2026-07-24T04:52:54.000000Z"}],"2027-03-17":[{"id":87,"tanggal":"2027-03-17","deskripsi":"LIBUR IDUL FITRI 1448H","created_at":"2026-07-24T04:53:04.000000Z","updated_at":"2026-07-24T04:53:04.000000Z"}],"2027-03-18":[{"id":88,"tanggal":"2027-03-18","deskripsi":"LIBUR IDUL FITRI 1448H","created_at":"2026-07-24T04:53:14.000000Z","updated_at":"2026-07-24T04:53:14.000000Z"}],"2027-03-19":[{"id":89,"tanggal":"2027-03-19","deskripsi":"LIBUR IDUL FITRI 1448H","created_at":"2026-07-24T04:53:27.000000Z","updated_at":"2026-07-24T04:53:27.000000Z"}],"2027-03-20":[{"id":90,"tanggal":"2027-03-20","deskripsi":"LIBUR IDUL FITRI 1448H","created_at":"2026-07-24T04:53:36.000000Z","updated_at":"2026-07-24T04:53:36.000000Z"}],"2027-03-22":[{"id":91,"tanggal":"2027-03-22","deskripsi":"AWAL SEKOLAH SETELAH LIBUR IDUL FITRI","created_at":"2026-07-24T04:54:40.000000Z","updated_at":"2026-07-24T04:54:40.000000Z"}],"2027-03-29":[{"id":92,"tanggal":"2027-03-29","deskripsi":"ASESMEN TENGAH SEMESTER SD DAN SMP","created_at":"2026-07-24T04:55:24.000000Z","updated_at":"2026-07-24T04:55:24.000000Z"}],"2027-03-30":[{"id":93,"tanggal":"2027-03-30","deskripsi":"ASESMEN TENGAH SEMESTER SD DAN SMP","created_at":"2026-07-24T04:55:37.000000Z","updated_at":"2026-07-24T04:55:37.000000Z"}],"2027-03-31":[{"id":94,"tanggal":"2027-03-31","deskripsi":"ASESMEN TENGAH SEMESTER SD DAN SMP","created_at":"2026-07-24T04:55:51.000000Z","updated_at":"2026-07-24T04:55:51.000000Z"}],"2027-04-01":[{"id":95,"tanggal":"2027-04-01","deskripsi":"ASESMEN TENGAH SEMESTER SD DAN SMP","created_at":"2026-07-24T04:56:19.000000Z","updated_at":"2026-07-24T04:56:19.000000Z"}],"2027-04-02":[{"id":96,"tanggal":"2027-04-02","deskripsi":"ASESMEN TENGAH SEMESTER SD DAN SMP","created_at":"2026-07-24T04:56:30.000000Z","updated_at":"2026-07-24T04:56:30.000000Z"}],"2027-04-03":[{"id":97,"tanggal":"2027-04-03","deskripsi":"ASESMEN TENGAH SEMESTER SD DAN SMP","created_at":"2026-07-24T04:56:39.000000Z","updated_at":"2026-07-24T04:56:39.000000Z"}],"2027-04-12":[{"id":98,"tanggal":"2027-04-12","deskripsi":"PERKIRAAN TKA SD, SMP, KESETARAAN\/UJIAN PRAKTEK","created_at":"2026-07-24T04:57:26.000000Z","updated_at":"2026-07-24T04:57:26.000000Z"}],"2027-04-13":[{"id":99,"tanggal":"2027-04-13","deskripsi":"PERKIRAAN TKA SD, SMP, KESETARAAN\/UJIAN PRAKTEK","created_at":"2026-07-24T04:57:35.000000Z","updated_at":"2026-07-24T04:57:35.000000Z"}],"2027-04-14":[{"id":100,"tanggal":"2027-04-14","deskripsi":"PERKIRAAN TKA SD, SMP, KESETARAAN\/UJIAN PRAKTEK","created_at":"2026-07-24T04:57:45.000000Z","updated_at":"2026-07-24T04:57:45.000000Z"}],"2027-04-15":[{"id":101,"tanggal":"2027-04-15","deskripsi":"PERKIRAAN TKA SD, SMP, KESETARAAN\/UJIAN PRAKTEK","created_at":"2026-07-24T04:57:55.000000Z","updated_at":"2026-07-24T04:57:55.000000Z"}],"2027-04-16":[{"id":102,"tanggal":"2027-04-16","deskripsi":"PERKIRAAN TKA SD, SMP, KESETARAAN\/UJIAN PRAKTEK","created_at":"2026-07-24T04:58:05.000000Z","updated_at":"2026-07-24T04:58:05.000000Z"}],"2027-04-17":[{"id":103,"tanggal":"2027-04-17","deskripsi":"PERKIRAAN TKA SD, SMP, KESETARAAN\/UJIAN PRAKTEK","created_at":"2026-07-24T04:58:15.000000Z","updated_at":"2026-07-24T04:58:15.000000Z"}],"2027-04-19":[{"id":104,"tanggal":"2027-04-19","deskripsi":"PERKIRAAN TKA SD, SMP, KESETARAAN\/UJIAN PRAKTEK","created_at":"2026-07-24T04:58:25.000000Z","updated_at":"2026-07-24T04:58:25.000000Z"}],"2027-04-20":[{"id":105,"tanggal":"2027-04-20","deskripsi":"PERKIRAAN TKA SD, SMP, KESETARAAN\/UJIAN PRAKTEK","created_at":"2026-07-24T04:58:35.000000Z","updated_at":"2026-07-24T04:58:35.000000Z"}],"2027-04-21":[{"id":106,"tanggal":"2027-04-21","deskripsi":"PERKIRAAN TKA SD, SMP, KESETARAAN\/UJIAN PRAKTEK","created_at":"2026-07-24T04:58:44.000000Z","updated_at":"2026-07-24T04:58:44.000000Z"}],"2027-04-22":[{"id":107,"tanggal":"2027-04-22","deskripsi":"PERKIRAAN TKA SD, SMP, KESETARAAN\/UJIAN PRAKTEK","created_at":"2026-07-24T04:58:53.000000Z","updated_at":"2026-07-24T04:58:53.000000Z"}],"2027-04-23":[{"id":108,"tanggal":"2027-04-23","deskripsi":"PERKIRAAN TKA SD, SMP, KESETARAAN\/UJIAN PRAKTEK","created_at":"2026-07-24T04:59:02.000000Z","updated_at":"2026-07-24T04:59:02.000000Z"}],"2027-04-24":[{"id":109,"tanggal":"2027-04-24","deskripsi":"PERKIRAAN TKA SD, SMP, KESETARAAN\/UJIAN PRAKTEK","created_at":"2026-07-24T04:59:11.000000Z","updated_at":"2026-07-24T04:59:11.000000Z"}],"2027-05-10":[{"id":110,"tanggal":"2027-05-10","deskripsi":"ASESMEN AKHIR SEKOLAH","created_at":"2026-07-24T05:02:33.000000Z","updated_at":"2026-07-24T05:02:33.000000Z"}],"2027-05-11":[{"id":111,"tanggal":"2027-05-11","deskripsi":"ASESMEN AKHIR SEKOLAH","created_at":"2026-07-24T05:02:45.000000Z","updated_at":"2026-07-24T05:02:45.000000Z"}],"2027-05-12":[{"id":112,"tanggal":"2027-05-12","deskripsi":"ASESMEN AKHIR SEKOLAH","created_at":"2026-07-24T05:02:54.000000Z","updated_at":"2026-07-24T05:02:54.000000Z"}],"2027-05-13":[{"id":113,"tanggal":"2027-05-13","deskripsi":"ASESMEN AKHIR SEKOLAH","created_at":"2026-07-24T05:03:04.000000Z","updated_at":"2026-07-24T05:03:04.000000Z"}],"2027-05-14":[{"id":114,"tanggal":"2027-05-14","deskripsi":"ASESMEN AKHIR SEKOLAH","created_at":"2026-07-24T05:03:15.000000Z","updated_at":"2026-07-24T05:03:15.000000Z"}],"2027-05-15":[{"id":115,"tanggal":"2027-05-15","deskripsi":"ASESMEN AKHIR SEKOLAH","created_at":"2026-07-24T05:03:25.000000Z","updated_at":"2026-07-24T05:03:25.000000Z"}],"2027-06-07":[{"id":116,"tanggal":"2027-06-07","deskripsi":"SUMATIF AKHIR SEMESTER","created_at":"2026-07-24T05:04:26.000000Z","updated_at":"2026-07-24T05:04:26.000000Z"}],"2027-06-08":[{"id":117,"tanggal":"2027-06-08","deskripsi":"SUMATIF AKHIR SEMESTER","created_at":"2026-07-24T05:04:46.000000Z","updated_at":"2026-07-24T05:04:46.000000Z"}],"2027-06-09":[{"id":118,"tanggal":"2027-06-09","deskripsi":"SUMATIF AKHIR SEMESTER","created_at":"2026-07-24T05:04:55.000000Z","updated_at":"2026-07-24T05:04:55.000000Z"}],"2027-06-10":[{"id":119,"tanggal":"2027-06-10","deskripsi":"SUMATIF AKHIR SEMESTER","created_at":"2026-07-24T05:05:05.000000Z","updated_at":"2026-07-24T05:05:05.000000Z"}],"2027-06-11":[{"id":120,"tanggal":"2027-06-11","deskripsi":"SUMATIF AKHIR SEMESTER","created_at":"2026-07-24T05:05:14.000000Z","updated_at":"2026-07-24T05:05:14.000000Z"}],"2027-06-12":[{"id":121,"tanggal":"2027-06-12","deskripsi":"SUMATIF AKHIR SEMESTER","created_at":"2026-07-24T05:05:24.000000Z","updated_at":"2026-07-24T05:05:24.000000Z"}],"2027-06-14":[{"id":122,"tanggal":"2027-06-14","deskripsi":"CLASS MEETING\/PENGOLAHAN NILAI RAPOR","created_at":"2026-07-24T05:05:52.000000Z","updated_at":"2026-07-24T05:05:52.000000Z"}],"2027-06-15":[{"id":123,"tanggal":"2027-06-15","deskripsi":"CLASS MEETING\/PENGOLAHAN NILAI RAPOR","created_at":"2026-07-24T05:06:01.000000Z","updated_at":"2026-07-24T05:06:01.000000Z"}],"2027-06-16":[{"id":124,"tanggal":"2027-06-16","deskripsi":"CLASS MEETING\/PENGOLAHAN NILAI RAPOR","created_at":"2026-07-24T05:06:12.000000Z","updated_at":"2026-07-24T05:06:12.000000Z"}],"2027-06-17":[{"id":125,"tanggal":"2027-06-17","deskripsi":"CLASS MEETING\/PENGOLAHAN NILAI RAPOR","created_at":"2026-07-24T05:06:23.000000Z","updated_at":"2026-07-24T05:06:23.000000Z"}],"2027-06-18":[{"id":126,"tanggal":"2027-06-18","deskripsi":"CLASS MEETING\/PENGOLAHAN NILAI RAPOR","created_at":"2026-07-24T05:06:37.000000Z","updated_at":"2026-07-24T05:06:37.000000Z"}],"2027-06-19":[{"id":127,"tanggal":"2027-06-19","deskripsi":"PEMBAGIAN RAPOR SEMESTER GANJIL\/GENAP","created_at":"2026-07-24T05:07:04.000000Z","updated_at":"2026-07-24T05:07:04.000000Z"}],"2027-06-21":[{"id":128,"tanggal":"2027-06-21","deskripsi":"LIBUR SEMESTER GANJIL\/GENAP","created_at":"2026-07-24T06:15:01.000000Z","updated_at":"2026-07-24T06:15:01.000000Z"}],"2027-06-22":[{"id":129,"tanggal":"2027-06-22","deskripsi":"LIBUR SEMESTER GANJIL\/GENAP","created_at":"2026-07-24T06:15:36.000000Z","updated_at":"2026-07-24T06:15:36.000000Z"}],"2027-06-23":[{"id":130,"tanggal":"2027-06-23","deskripsi":"LIBUR SEMESTER GANJIL\/GENAP","created_at":"2026-07-24T06:15:47.000000Z","updated_at":"2026-07-24T06:15:47.000000Z"}],"2027-06-24":[{"id":131,"tanggal":"2027-06-24","deskripsi":"LIBUR SEMESTER GANJIL\/GENAP","created_at":"2026-07-24T06:15:58.000000Z","updated_at":"2026-07-24T06:15:58.000000Z"}],"2027-06-25":[{"id":132,"tanggal":"2027-06-25","deskripsi":"LIBUR SEMESTER GANJIL\/GENAP","created_at":"2026-07-24T06:16:10.000000Z","updated_at":"2026-07-24T06:16:10.000000Z"}],"2027-06-26":[{"id":133,"tanggal":"2027-06-26","deskripsi":"LIBUR SEMESTER GANJIL\/GENAP","created_at":"2026-07-24T06:16:20.000000Z","updated_at":"2026-07-24T06:16:20.000000Z"}],"2027-06-28":[{"id":134,"tanggal":"2027-06-28","deskripsi":"LIBUR SEMESTER GANJIL\/GENAP","created_at":"2026-07-24T06:16:31.000000Z","updated_at":"2026-07-24T06:16:31.000000Z"}],"2027-06-29":[{"id":135,"tanggal":"2027-06-29","deskripsi":"LIBUR SEMESTER GANJIL\/GENAP","created_at":"2026-07-24T06:16:44.000000Z","updated_at":"2026-07-24T06:16:44.000000Z"}
2364],"2027-06-30":[{"id":136,"tanggal":"2027-06-30","deskripsi":"LIBUR SEMESTER GANJIL\/GENAP","created_at":"2026-07-24T06:16:53.000000Z","updated_at":"2026-07-24T06:16:53.000000Z"}]}; 2365 2366const titleEl = document.getElementById('calendarTitle'); 2367const gridEl = document.getElementById('calendarGrid'); 2368 2369let currentYear = parseInt(titleEl.dataset.year); 2370let currentMonth = parseInt(titleEl.dataset.month); 2371 2372function renderCalendar(year, month) { 2373 gridEl.innerHTML = ''; 2374 2375 titleEl.innerText = new Date(year, month).toLocaleDateString('id-ID', { 2376 month: 'long', 2377 year: 'numeric' 2378 }); 2379 2380 titleEl.dataset.year = year; 2381 titleEl.dataset.month = month; 2382 2383 const firstDay = new Date(year, month, 1); 2384 const startDay = new Date(firstDay); 2385 startDay.setDate(firstDay.getDate() - firstDay.getDay()); 2386 2387 // Header hari 2388 ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'].forEach(d => { 2389 const h = document.createElement('div'); 2390 h.className = 'calendar-day-header'; 2391 h.innerText = d; 2392 gridEl.appendChild(h); 2393 }); 2394 2395 const today = new Date(); 2396 2397 for (let i = 0; i < 42; i++) { 2398 const d = new Date(startDay); 2399 d.setDate(startDay.getDate() + i); 2400 2401 const cell = document.createElement('div'); 2402 cell.className = 'calendar-cell'; 2403 2404 if (d.getMonth() !== month) cell.classList.add('other-month'); 2405 if (d.toDateString() === today.toDateString()) cell.classList.add('today'); 2406 2407 cell.innerHTML = `<span class="date-number">${d.getDate()}</span>`; 2408 2409 const key = `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`; 2410 2411 if (kalenderData[key]) { 2412 kalenderData[key].forEach(ev => { 2413 const e = document.createElement('div'); 2414 e.className = 'calendar-event'; 2415 e.innerText = ev.deskripsi; 2416 cell.appendChild(e); 2417 }); 2418 } 2419 2420 gridEl.appendChild(cell); 2421 } 2422} 2423 2424// CONTROLS 2425document.getElementById('btnPrev').onclick = () => { 2426 currentMonth--; 2427 if (currentMonth < 0) { 2428 currentMonth = 11; 2429 currentYear--; 2430 } 2431 renderCalendar(currentYear, currentMonth); 2432}; 2433 2434document.getElementById('btnNext').onclick = () => { 2435 currentMonth++; 2436 if (currentMonth > 11) { 2437 currentMonth = 0; 2438 currentYear++; 2439 } 2440 renderCalendar(currentYear, currentMonth); 2441}; 2442 2443document.getElementById('btnToday').onclick = () => { 2444 const now = new Date(); 2445 currentYear = now.getFullYear(); 2446 currentMonth = now.getMonth(); 2447 renderCalendar(currentYear, currentMonth); 2448}; 2449 2450// INIT 2451renderCalendar(currentYear, currentMonth); 2452</script>
2452 2453 2454 2455 2456 2457 2458 <section class="store-adventeges" id="adventeges"> 2459 <div class="container"> 2460 <div class="row text-center"> 2461 <div class="col-12 mt-5"> 2462 <h3 class="red" style="color: #212e60;">Jumlah Pengunjung</h3> 2463 <p>Jumlah Pengunjung Website 2464 <span class="badge bg-warning text-dark">DISDIKBUD</span> Kota Padang 2465 </p> 2466 <hr class="line"> 2467 </div> 2468 </div> 2469 2470 <div class="row justify-content-center mt-4"> 2471 <!-- Card Hari Ini --> 2472 <div class="col-md-3 col-sm-6 mb-3"> 2473 <div class="card shadow-sm border-0"> 2474 <div class="card-body text-center"> 2475 <h5 class="card-title text-muted">Hari Ini</h5> 2476 <h2 class="fw-bold text-success">192</h2> 2477 </div> 2478 </div> 2479 </div> 2480 2481 <!-- Card Bulan Ini --> 2482 <div class="col-md-3 col-sm-6 mb-3"> 2483 <div class="card shadow-sm border-0"> 2484 <div class="card-body text-center"> 2485 <h5 class="card-title text-muted">Bulan Ini</h5> 2486 <h2 class="fw-bold text-primary">14152</h2> 2487 </div> 2488 </div> 2489 </div> 2490 2491 <!-- Card Bulan Lalu --> 2492 <div class="col-md-3 col-sm-6 mb-3"> 2493 <div class="card shadow-sm border-0"> 2494 <div class="card-body text-center"> 2495 <h5 class="card-title text-muted">Bulan Lalu</h5> 2496 <h2 class="fw-bold text-secondary">7434</h2> 2497 </div> 2498 </div> 2499 </div> 2500 2501 <!-- Card Total Pengunjung --> 2502 <div class="col-md-3 col-sm-6 mb-3"> 2503 <div class="card shadow-sm border-0"> 2504 <div class="card-body text-center"> 2505 <h5 class="card-title text-muted">Total Pengunjung</h5> 2506 <h2 class="fw-bold text-danger">54950</h2> 2507 </div> 2508 </div> 2509 </div> 2510 </div> 2511 2512 </div> 2513 </section> 2514 2515 2516 2517 <!-- KONTAK --> 2518 <section class="store-adventeges" id="adventeges"> 2519 <div class="container-fluid kontak"> 2520 <div class="row text-center"> 2521 <div class="col-12"><br> 2522 <h3 style="color:#212e60;"> Kontak Kami</h3> 2523 <h6>[email protected]</h6> 2524 <hr class="line"> 2525 </div> 2526 </div> 2527 <div class="row justify-content-center"> 2528 2529 <div class="col-12"> 2530 <div class="container"> 2531 <div class="w-auto mb-2"> 2532 <div class="row justify-content-center"> 2533 <div class="container-iframe"> 2534 2535 2536 <iframe class="iframe-maps" 2537 src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1504.2217282869278!2d100.35873817220963!3d-0.9530398525107862!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2fd4b938f6e103cf%3A0x89b0dbf4883e4677!2sDinas%20Pendidikan%20dan%20Kebudayaan%20Kota%20Padang!5e0!3m2!1sid!2sid!4v1765762201516!5m2!1sid!2sid" 2538 allowfullscreen="" loading="lazy"></iframe> 2539 </div> 2540 </div> 2541 </div> 2542 2543 </div> 2544 2545 </div> 2546 2547 2548 </div> 2549 </div> 2550 </section> 2551 2552 </div> 2553 <!-- footer --> 2554 <footer class="text-center text-lg-start"> 2555 <section class=""> 2556 <div class="container text-center text-md-start mt-5"> 2557 <!-- Grid row --> 2558 <div class="row mt-3"> 2559 <!-- Grid column - Informasi Kontak --> 2560 <div class="col-md-3 col-lg-4 col-xl-3 mx-auto mb-1"> 2561 <!-- Content --> 2562 <h6 class="text-uppercase fw-bold mb-2 text-left">DISDIKBUD KOTA PADANG</h6> 2563 <p class="text-left text-white">
2563Jln. Marah Roesli No.25A, Belakang Tangsi, Kec. Padang Bar., Kota Padang, Sumatera Barat</p> 2564 2565 <p class="text-left text-white"> 2566 <i class="bi bi-telephone-forward-fill"></i> 2567 082350232165 2568 </p> 2569 2570 <p class="text-left text-white"> 2571 <i class="bi bi-envelope-at-fill"></i> [email protected] 2572 </p> 2573 2574 <!-- Media Sosial --> 2575 2576 <h6 class="text-uppercase fw-bold mb-2 text-left">media sosial: </h6> 2577 <h5 class="text-left"> 2578 <a href="https://www.facebook.com/DISDIKBUDPADANG/?locale=id_ID" target="_blank" rel="noopener noreferrer" class="me-4 pl-1 text-white"> 2579 <i class="bi bi-facebook"></i> 2580 </a> 2581 <a href="https://www.x.com/" target="_blank" rel="noopener noreferrer" class="me-4 pl-1 text-white"> 2582 <i class="bi bi-twitter"></i> 2583 </a> 2584 <a href="https://www.google.com/" target="_blank" rel="noopener noreferrer" class="me-4 pl-1 text-white"> 2585 <i class="bi bi-google"></i> 2586 </a> 2587 <a href="https://www.instagram.com/disdikbud_padang/" target="_blank" rel="noopener noreferrer" class="me-4 pl-1 text-white"> 2588 <i class="bi bi-instagram"></i> 2589 </a> 2590 <a href="https://linkedin.com/" target="_blank" rel="noopener noreferrer" class="me-4 pl-1 text-white"> 2591 <i class="bi bi-linkedin"></i> 2592 </a> 2593 <a href="https://wa.me/" target="_blank" rel="noopener noreferrer" class="me-4 pl-1 text-white"> 2594 <i class="bi bi-whatsapp"></i> 2595 </a> 2596 </h5> 2597 </div> <!-- Grid column --> 2598 2599 <!-- Grid column - Useful Links --> 2600 <div class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4"> 2601 <h6 class="text-uppercase text-left fw-bold mb-4">Useful Links</h6> 2602 <a href="https://disdik.padang.go.id" target="_blank" rel="noopener noreferrer" class=""> 2603 <p class="text-left text-white">DISDIK PADANG</p> 2604 </a> 2605 <a href="https://psb.diknaspadang.id/" target="_blank" rel="noopener noreferrer" class=""> 2606 <p class="text-left text-white">SPMB</p> 2607 </a> 2608 </div> <!-- Grid column --> 2609 2610 <!-- Grid column - Other Website --> 2611 <div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4"> 2612 <h6 class="text-uppercase text-left fw-bold mb-4">Other Website</h6> 2613 <p class="text-left text-white">-</p> 2614 </div> <!-- Grid column --> 2615 2616 <!-- Grid column - Informasi Terkait --> 2617 <div class="col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4"> 2618 <h6 class="text-uppercase text-left fw-bold mb-4">Informasi Terkait</h6> 2619 <a href="https://padang.go.id/" target="_blank" rel="noopener noreferrer" class=""> 2620 <p class="text-left text-white">Pemkot Padang</p> 2621 </a> 2622 </div> <!-- Grid column --> 2623 </div> <!-- Grid row --> 2624 </div> 2625 </section> <!-- Section: Links --> 2626 2627 <!-- Copyright --> 2628 <div class="text-center p-2"> 2629 ©
2629 Copyright 2026 2630 <a href="#" target="_blank" rel="noopener noreferrer" class="text-white"> 2631 DISKOMINFO KOTA PADANG 2632 </a> 2633 </div> <!-- Copyright --> 2634 2635 <a href="#" class="back-to-top" id="backToTop"> 2636 <i class="fas fa-arrow-up"></i> 2637 </a> 2638 2639
2639<script> 2640 // Back to top button untuk semua halaman 2641 document.addEventListener('DOMContentLoaded', function() { 2642 const backToTopButton = document.getElementById('backToTop'); 2643 2644 if (backToTopButton) { 2645 window.addEventListener('scroll', function() { 2646 if (window.pageYOffset > 300) { 2647 backToTopButton.classList.add('active'); 2648 } else { 2649 backToTopButton.classList.remove('active'); 2650 } 2651 }); 2652 2653 backToTopButton.addEventListener('click', function(e) { 2654 e.preventDefault(); 2655 window.scrollTo({ 2656 top: 0, 2657 behavior: 'smooth' 2658 }); 2659 }); 2660 } 2661 }); 2662 </script>
2662 2663</footer> 2664
2665<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
2665 <!-- akhir footer --> 2666 2667 <!-- modal --> 2668 <div id="modalBerita" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="my-modal-title" 2669 aria-hidden="true"> 2670 <div class="modal-dialog modal-dialog-centered" role="document"> 2671 <div class="modal-content"> 2672 <div class="modal-header"> 2673 <h5 class="modal-title berita-title">Contoh</h5> 2674 <button class="close" data-dismiss="modal" aria-label="Close"> 2675 <span aria-hidden="true">×</span> 2676 </button> 2677 </div> 2678 <div class="modal-body"> 2679 <div class="card"> 2680 <img class="card-img-top w-100 berita-img" src="assets/img/1123123 1.png" alt=""> 2681 <div class="card-body"> 2682 <div class="card-text berita-isi">Content</div> 2683 </div> 2684 <img class="card-img-bottom" src="" alt=""> 2685 </div> 2686 </div> 2687 <div class="modal-footer berita-tgl"> 2688 2689 </div> 2690 </div> 2691 </div> 2692 </div> 2693 <!-- modal --> 2694 2695 2696 2697 <!-- Highlight modal artikel --> 2698 2699 2700 <!-- Bootstrap core JavaScript --> 2701 2702 <!-- scripts --> 2703 2704
2704<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
2704 2705
2705<script src="assets/particles.js"></script>
2705 2706
2706<script src="assets/app.js"></script>
2706 2707 2708 2709
2709<script src="https://code.jquery.com/jquery-3.6.1.min.js" 2710 integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
2710 2711 2712
2712<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
2712 2713
2713<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
2713 2714 2715
2715<script> 2716 AOS.init(); 2717 </script>
2717 2718
2718<script src="assets/js/navbar-scroll.js"></script>
2718 2719 2720 2721
2721<script> 2722 $(document).ready(function() { 2723 $('.preloader').fadeOut(1000); 2724 2725 $('.berita').on('click', function() { 2726 $('#modal-berita').modal('show'); 2727 $('.berita-title').text($(this).attr('data-judul')); 2728 $('.berita-img').attr('src', $(this).attr('data-thumbnail')); 2729 $('.berita-isi').html($(this).attr('data-isi')); 2730 $('.berita-tgl').text($(this).attr('data-tgl')); 2731 }); 2732 }); 2733 </script>
2733
2734<script> 2735document.addEventListener('DOMContentLoaded', function () { 2736 2737 var slideImg = document.getElementById("slideImg"); 2738 2739 if (!slideImg) { 2740 console.error('slideImg tidak ditemukan'); 2741 return; 2742 } 2743 2744 var images = [ 2745 "/assets/img/Intersect1.png", 2746 "/storage/hero_sections/1772416927_Snapshot_9.jpg", 2747 "/storage/hero_sections/1772416554_Snapshot_14.jpg", 2748 "/storage/hero_sections/1766114464_balaikotabaru.png", 2749 "/storage/hero_sections/1766114418_WhatsApp Image 2025-12-16 at 13.31.17.jpeg", 2750 ]; 2751 2752 var i = 0; 2753 var len = images.length; 2754 2755 function slider() { 2756 2757 // fade out 2758 slideImg.style.opacity = 0; 2759 2760 setTimeout(function () { 2761 slideImg.src = images[i]; 2762 2763 // setelah ganti gambar â fade in 2764 slideImg.onload = function () { 2765 slideImg.style.opacity = 1; 2766 }; 2767 2768 i = (i + 1) % len; 2769 2770 }, 400); // waktu fade-out 2771 2772 setTimeout(slider, 6000); 2773} 2774 2775 2776 slider(); // JALANKAN SEKALI SAJA 2777}); 2778</script>
2778 2779 2780 2781 2782 2783
2783<script async src="//www.instagram.com/embed.js"></script>
2783 2784 2785 2786 <!-- Back to top button --> 2787 <a href="#" class="back-to-top" id="backToTop"> 2788 <i class="fas fa-arrow-up"></i> 2789 </a> 2790 2791
2791<script> 2792 // Back to top button 2793 const backToTopButton = document.getElementById('backToTop'); 2794 2795 window.addEventListener('scroll', function() { 2796 if (window.pageYOffset > 300) { 2797 backToTopButton.classList.add('active'); 2798 } else { 2799 backToTopButton.classList.remove('active'); 2800 } 2801 }); 2802 2803 backToTopButton.addEventListener('click', function(e) { 2804 e.preventDefault(); 2805 window.scrollTo({ 2806 top: 0, 2807 behavior: 'smooth' 2808 }); 2809 }); 2810 </script>
2810 2811 2812 <!-- TTS Script --> 2813
2813<script> 2814 // Fungsi untuk membaca teks 2815 function speakText(text) { 2816 if ('speechSynthesis' in window) { 2817 window.speechSynthesis.cancel(); 2818 const utterance = new SpeechSynthesisUtterance(text); 2819 utterance.lang = 'id-ID'; 2820 utterance.rate = 1; 2821 utterance.volume = 1; 2822 utterance.pitch = 1; 2823 window.speechSynthesis.speak(utterance); 2824 } 2825 } 2826 2827 // Auto-play saat pertama masuk 2828 document.addEventListener('DOMContentLoaded', function() { 2829 setTimeout(function() { 2830 speakText('Selamat datang di website Dinas Pendidikan dan Kebudayaan Kota Padang'); 2831 }, 1000); 2832 }); 2833 2834 // Baca teks yang di-select 2835 document.addEventListener('mouseup', function() { 2836 const selectedText = window.getSelection().toString().trim(); 2837 if (selectedText.length > 0) { 2838 setTimeout(function() { 2839 speakText(selectedText); 2840 }, 300); 2841 } 2842 }); 2843 </script>
2843 2844 2845
2845<script src="https://cdn.jsdelivr.net/npm/sienna-accessibility@latest/dist/sienna-accessibility.umd.js" defer></script>
2845 2846 2847 2848</body> 2849<!-- jQuery -->
2850<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
2850 2851<!-- Slick Carousel JS -->
2852<script src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
2852 2853<!-- Inisialisasi Slider -->
2854<script> 2855 $(document).ready(function() { 2856 console.log('slider aktif'); 2857 $('.slider-galeri').slick({ 2858 slidesToShow: 2.8, 2859 slidesToScroll: 1, 2860 autoplay: true, 2861 autoplaySpeed: 3000, 2862 infinite: true, // â tambahkan ini 2863 centerMode: true, 2864 centerPadding: '40px', 2865 arrows: true, 2866 dots: true, 2867 responsive: [{ 2868 breakpoint: 992, 2869 settings: { 2870 slidesToShow: 2 2871 } 2872 }, 2873 { 2874 breakpoint: 768, 2875 settings: { 2876 slidesToShow: 1 2877 } 2878 } 2879 ] 2880 }); 2881 2882 }); 2883</script>
2883
2884<script> 2885 document.addEventListener('DOMContentLoaded', function() { 2886 var myCarousel = document.querySelector('#galeriCarousel'); 2887 var carousel = new bootstrap.Carousel(myCarousel, { 2888 interval: 3000, 2889 ride: 'carousel' 2890 }); 2891 }); 2892</script>
2892
2893<script> 2894 document.addEventListener('DOMContentLoaded', function() { 2895 var detailModal = document.getElementById('detailModal'); 2896 detailModal.addEventListener('show.bs.modal', function(event) { 2897 var button = event.relatedTarget; 2898 2899 var title = button.getAttribute('data-title'); 2900 var image = button.getAttribute('data-image'); 2901 var date = button.getAttribute('data-date'); 2902 2903 detailModal.querySelector('#modalTitle').textContent = title; 2904 detailModal.querySelector('#modalImage').src = image; 2905 detailModal.querySelector('#modalDate').textContent = date; 2906 }); 2907 }); 2908</script>
2908 2909 2910</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.