From 9786cd515aa9a3368f9da01fcef2a7fef79a56b4 Mon Sep 17 00:00:00 2001 From: Mas Budi Kusuma Date: Tue, 15 Sep 2026 23:08:59 +0700 Subject: [PATCH] feat(core): integrasi navigasi hamburger mobile, single-program template, floating whatsapp, dan back-to-top --- footer.php | 54 +++++++++++++++++++++++++++--- header.php | 82 +++++++++++++++++++++++++--------------------- single-program.php | 51 ++++++++++++++++++++++++++++ style.css | 78 +++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 224 insertions(+), 41 deletions(-) create mode 100644 single-program.php diff --git a/footer.php b/footer.php index 03b47ca..0e4fd1c 100644 --- a/footer.php +++ b/footer.php @@ -6,13 +6,18 @@ $footer_logo = get_option( 'edukarsa_footer_logo' ); if ( empty( $footer_logo ) ) { $footer_logo = get_option( 'edukarsa_header_logo' ); } +$raw_telp = get_option( 'edukarsa_footer_telp', '' ); +$wa_clean = preg_replace( '/[^0-9]/', '', $raw_telp ); +if ( substr( $wa_clean, 0, 1 ) === '0' ) { + $wa_clean = '62' . substr( $wa_clean, 1 ); +} ?> + + + + + Tanya PMB + + + + + + + + + diff --git a/header.php b/header.php index 7853976..ffbeddd 100644 --- a/header.php +++ b/header.php @@ -1,37 +1,45 @@ - -> - - - - - -> - -
-
-
- - - <?php bloginfo( 'name' ); ?> - -

- - -
- - -
-
\ No newline at end of file + +> + + + + + +> + +
+
+
+ + + <?php bloginfo( 'name' ); ?> + +

+ + +
+ + + + + + +
+
diff --git a/single-program.php b/single-program.php new file mode 100644 index 0000000..538e92f --- /dev/null +++ b/single-program.php @@ -0,0 +1,51 @@ + + +
+
+ + +
style="padding: 40px;"> + +
+ PROGRAM STUDI & KEUNGGULAN +

+ +

+
+ + +
+ 'width: 100%; height: auto; display: block;' ) ); ?> +
+ + +
+ +
+ +
+

Tertarik dengan program ini?

+

+ Dapatkan informasi lengkap mengenai syarat pendaftaran, kurikulum terpadu, dan beasiswa pendidikan yang tersedia. +

+ + Konsultasi Program » + +
+ +
+ + + + +
+
+ + diff --git a/style.css b/style.css index 64de1bb..a0bcbf8 100644 --- a/style.css +++ b/style.css @@ -285,3 +285,81 @@ h1, h2, h3, h4, h5, h6 { color: var(--heading-color); font-weight: 800; line-hei .cta-floating-card { padding: 25px; } .cta-floating-title { font-size: 20px; } } + +/* 13. MOBILE MENU TOGGLE & DRAWER */ +.menu-toggle { display: none; background: transparent; border: none; cursor: pointer; padding: 10px; flex-direction: column; gap: 5px; z-index: 1001; } +.menu-toggle span { display: block; width: 26px; height: 3px; background-color: #ffffff; border-radius: 3px; transition: all 0.3s ease; } +.menu-toggle.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); } +.menu-toggle.active span:nth-child(2) { opacity: 0; } +.menu-toggle.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } + +@media (max-width: 768px) { + .menu-toggle { display: flex; } + .main-navigation { + position: fixed; + top: 0; + right: -100%; + width: 280px; + height: 100vh; + background: var(--primary-color); + box-shadow: -5px 0 25px rgba(0,0,0,0.3); + padding: 85px 25px 40px; + transition: right 0.35s ease-in-out; + z-index: 1000; + overflow-y: auto; + } + .main-navigation.active { right: 0; } + .nav-menu-custom { flex-direction: column; gap: 15px; align-items: flex-start; } + .nav-menu-custom li a { font-size: 15px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.08); width: 100%; } + .header-container { flex-direction: row; } +} + +/* 14. FLOATING WHATSAPP HOTLINE */ +.edukarsa-wa-float { + position: fixed; + bottom: 25px; + right: 25px; + background-color: #25d366; + color: #ffffff !important; + padding: 10px 18px; + border-radius: 50px; + display: flex; + align-items: center; + gap: 8px; + font-size: 14px; + font-weight: 700; + box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4); + z-index: 998; + transition: all 0.3s ease; +} +.edukarsa-wa-float:hover { + background-color: #1ebc57; + transform: translateY(-3px) scale(1.03); + box-shadow: 0 12px 28px rgba(37, 211, 102, 0.5); +} + +/* 15. BACK TO TOP BUTTON */ +.back-to-top-btn { + position: fixed; + bottom: 25px; + left: 25px; + width: 44px; + height: 44px; + background-color: var(--primary-color); + color: #ffffff; + border: 2px solid rgba(255,255,255,0.2); + border-radius: 50%; + font-size: 14px; + cursor: pointer; + box-shadow: var(--shadow); + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + visibility: hidden; + transform: translateY(15px); + transition: all 0.3s ease; + z-index: 997; +} +.back-to-top-btn.show { opacity: 1; visibility: visible; transform: translateY(0); } +.back-to-top-btn:hover { background-color: var(--secondary-color); transform: translateY(-3px); }