support/kh3_website
1
0
Fork 0
mirror of https://git.kh3group.com/georgebiri/kh3_website.git synced 2026-07-02 06:23:44 +00:00
Code Issues Projects Releases Packages Wiki Activity

refactor: update menu toggle structure and icons across multiple HTML files for improved consistency and user experience

Browse source
This commit is contained in:
George Birikorang 2025-09-03 04:02:08 -04:00
parent 03b6cc138b
commit 584ba42eab
10 changed files with 210 additions and 343 deletions
Download patch file Download diff file Expand all files Collapse all files

14
about.html
View file

@ -377,22 +377,14 @@
<span class="wave"></span>
</div>
<div class="menu-outline" aria-hidden="true"></div>
<div class="grid grid-cols-3 gap-1 w-6 h-6 relative" id="menuGrid">
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<div class="relative" id="menuGrid">
<img src="assets/icons/closed_petal.png" alt="closed petal" class="w-6 h-6" />
</div>
<div
id="menuPetal"
class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 transition-opacity"
>
<img src="assets/icons/petal.png" alt="petal" class="w-8 h-8" />
<img src="assets/icons/open_petal.png" alt="petal" class="w-8 h-8" />
</div>
</div>
</div>

BIN
assets/icons/closed_petal.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 33 KiB

0
assets/icons/petal.png → assets/icons/open_petal.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 19 KiB

Before After
Before After

152
contact.html
View file

@ -379,22 +379,14 @@
<span class="wave"></span>
</div>
<div class="menu-outline" aria-hidden="true"></div>
<div class="grid grid-cols-3 gap-1 w-6 h-6 relative" id="menuGrid">
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<div class="relative" id="menuGrid">
<img src="assets/icons/closed_petal.png" alt="closed petal" class="w-6 h-6" />
</div>
<div
id="menuPetal"
class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 transition-opacity"
>
<img src="assets/icons/petal.png" alt="petal" class="w-8 h-8" />
<img src="assets/icons/open_petal.png" alt="petal" class="w-8 h-8" />
</div>
</div>
@ -961,142 +953,6 @@
}
</script>
// Form submission
const contactForm = document.getElementById("contactForm");
if (contactForm) {
contactForm.addEventListener("submit", (e) => {
e.preventDefault();
// Add your form submission logic here
alert(
"Thank you for your message! We'll get back to you within 24 hours."
);
contactForm.reset();
});
}
// Staggered entrance for hero and sections
window.addEventListener("load", () => {
const heroTitle = document.querySelector(
"section.relative h1.masked-reveal"
);
const heroSub = document.querySelector("section.relative div.text-xl");
if (heroTitle) {
heroTitle.style.animation =
"maskReveal 900ms ease-out 150ms forwards";
}
if (heroSub) {
heroSub.style.opacity = "0";
heroSub.style.animation = "fadeUp 700ms ease-out 320ms forwards";
}
const contactSection = document.querySelector("section.py-20.bg-white");
if (contactSection) {
contactSection.style.opacity = "0";
contactSection.style.animation =
"fadeUp 800ms ease-out 600ms forwards";
}
const mapSection = document.querySelector("section.py-20.bg-kh3-black");
if (mapSection) {
mapSection.style.opacity = "0";
mapSection.style.animation = "fadeUp 800ms ease-out 850ms forwards";
}
});
// Auto-scroll to contact section after 2.5 seconds with custom smooth animation
setTimeout(() => {
const contactSection = document.querySelector("section:nth-of-type(2)"); // Contact Section
if (contactSection) {
const targetPosition = contactSection.offsetTop;
const startPosition = window.pageYOffset;
const distance = targetPosition - startPosition;
const duration = 2000; // 2 seconds for the scroll animation
let start = null;
function animation(currentTime) {
if (start === null) start = currentTime;
const timeElapsed = currentTime - start;
const run = easeInOutCubic(
timeElapsed,
startPosition,
distance,
duration
);
window.scrollTo(0, run);
if (timeElapsed < duration) requestAnimationFrame(animation);
}
// Easing function for smooth animation
function easeInOutCubic(t, b, c, d) {
t /= d / 2;
if (t < 1) return (c / 2) * t * t * t + b;
t -= 2;
return (c / 2) * (t * t * t + 2) + b;
}
requestAnimationFrame(animation);
}
}, 2500);
// Page transition functionality
function handlePageTransition(e) {
e.preventDefault();
const targetUrl = e.currentTarget.href;
const transitionType = e.currentTarget.getAttribute('data-trans') || 'crossfade';
// Get all elements to animate out
const elementsToAnimate = [
document.querySelector('.hero-section'),
document.querySelector('.contact-form-section'),
document.querySelector('.map-section'),
document.querySelector('main')
].filter(el => el);
// Animate elements out in order
elementsToAnimate.forEach((element, index) => {
setTimeout(() => {
if (element) {
element.style.animation = 'staggerFadeOut 0.6s ease-in-out forwards';
}
}, index * 100);
});
// Navigate after animations complete
setTimeout(() => {
window.location.href = targetUrl;
}, elementsToAnimate.length * 100 + 600);
}
// Add event listeners for page transitions
document.addEventListener('DOMContentLoaded', function() {
const transitionLinks = document.querySelectorAll('[data-trans]');
transitionLinks.forEach(link => {
link.addEventListener('click', handlePageTransition);
});
});
// Handle back/forward navigation
window.addEventListener('pageshow', function(event) {
if (event.persisted) {
// Page was loaded from cache (back/forward)
window.location.reload();
}
});
</script>
<script>
// Ensure clean state on back/forward cache restores
window.addEventListener('pageshow', () => {
const nav = document.getElementById('navMenu');
const wrap = document.getElementById('menuWrap');
if (nav) nav.classList.add('hidden');
if (wrap) wrap.classList.remove('open');
});
// Cleanup before bfcache snapshot
window.addEventListener('pagehide', () => {
const nav = document.getElementById('navMenu');
const wrap = document.getElementById('menuWrap');
if (nav) nav.classList.add('hidden');
if (wrap) wrap.classList.remove('open');
});
</script>
<script src="js/contact.js"></script>
</body>
</html>

25
index.html
View file

@ -385,25 +385,22 @@
<span class="wave"></span>
</div>
<div class="menu-outline" aria-hidden="true"></div>
<div
class="grid grid-cols-3 gap-1 w-6 h-6 relative"
id="menuGrid"
>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<div class="relative" id="menuGrid">
<img
src="assets/icons/closed_petal.png"
alt="closed petal"
class="w-6 h-6"
/>
</div>
<div
id="menuPetal"
class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 transition-opacity"
>
<img src="assets/icons/petal.png" alt="petal" class="w-8 h-8" />
<img
src="assets/icons/open_petal.png"
alt="petal"
class="w-8 h-8"
/>
</div>
</div>

63
js/contact.js Normal file
View file

@ -0,0 +1,63 @@
// Contact page specific scripts
// Form submission
document.addEventListener("DOMContentLoaded", () => {
const contactForm = document.getElementById("contactForm");
if (contactForm) {
contactForm.addEventListener("submit", (e) => {
e.preventDefault();
alert(
"Thank you for your message! We'll get back to you within 24 hours."
);
contactForm.reset();
});
}
// Staggered entrance for hero and sections
window.addEventListener("load", () => {
const heroTitle = document.querySelector(
"section.relative h1.masked-reveal"
);
const heroSub = document.querySelector("section.relative div.text-xl");
if (heroTitle) {
heroTitle.style.animation = "maskReveal 900ms ease-out 150ms forwards";
}
if (heroSub) {
heroSub.style.opacity = "0";
heroSub.style.animation = "fadeUp 700ms ease-out 320ms forwards";
}
const contactSectionFade = document.querySelector("section.py-20.bg-white");
if (contactSectionFade) {
contactSectionFade.style.opacity = "0";
contactSectionFade.style.animation =
"fadeUp 800ms ease-out 600ms forwards";
}
const mapSection = document.querySelector("section.py-20.bg-kh3-black");
if (mapSection) {
mapSection.style.opacity = "0";
mapSection.style.animation = "fadeUp 800ms ease-out 850ms forwards";
}
});
// Gentle auto-scroll like WHAT page: nudge ~1.1vh after 3s with easing
setTimeout(() => {
const startScroll = window.pageYOffset;
const targetScroll = window.innerHeight * 1.0;
const distance = targetScroll - startScroll;
const duration = 2000;
let start = null;
function animateScroll(ts) {
if (start === null) start = ts;
const elapsed = ts - start;
const progress = Math.min(elapsed / duration, 1);
const easeOutQuart = 1 - Math.pow(1 - progress, 4);
window.scrollTo(0, startScroll + distance * easeOutQuart);
if (progress < 1) requestAnimationFrame(animateScroll);
}
requestAnimationFrame(animateScroll);
}, 3000);
});

110
js/main.js
View file

@ -21,42 +21,49 @@ function initNavigation() {
// Only initialize if elements exist
if (menuToggle && navMenu && menuGrid) {
console.log("Navigation elements found:", {
menuToggle,
navMenu,
menuGrid,
});
let isMenuOpen = false;
const menuPetal = document.getElementById("menuPetal");
console.log("menuPetal element:", menuPetal);
const menuWrap = document.getElementById("menuWrap");
// Force a known initial state: closed menu shows closed petal
if (menuWrap) menuWrap.classList.remove("open");
try {
if (menuGrid) menuGrid.style.opacity = "1";
if (menuPetal) menuPetal.style.opacity = "0";
} catch (e) {}
menuToggle.addEventListener("click", () => {
console.log("Menu clicked! Current state:", isMenuOpen);
console.log("menuPetal element:", menuPetal);
console.log("navMenu element:", navMenu);
if (isMenuOpen) {
// Close menu
console.log("Closing menu...");
navMenu.classList.add("hidden");
// Transform back to full grid
menuGrid.innerHTML = `
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
`;
menuGrid.style.transform = "scale(1)";
// Show closed petal, hide open petal
if (menuPetal) {
menuGrid.style.opacity = "1";
menuPetal.style.opacity = "0";
console.log("Showing closed petal, hiding open petal");
}
isMenuOpen = false;
} else {
// Open menu
console.log("Opening menu...");
navMenu.classList.remove("hidden");
// Transform to compressed state - only center 5 dots, corner dots disappear
menuGrid.innerHTML = `
<span class="w-1 h-1 bg-white rounded-full opacity-0"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full opacity-0"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full opacity-0"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full opacity-0"></span>
`;
menuGrid.style.transform = "scale(0.8)";
// Hide closed petal, show open petal
if (menuPetal) {
menuGrid.style.opacity = "0";
menuPetal.style.opacity = "1";
console.log("Hiding closed petal, showing open petal");
}
isMenuOpen = true;
}
});
@ -65,18 +72,11 @@ function initNavigation() {
document.addEventListener("click", (e) => {
if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) {
navMenu.classList.add("hidden");
// Transform back to grid
menuGrid.innerHTML = `
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
`;
// Show closed petal, hide open petal
if (menuPetal) {
menuGrid.style.opacity = "1";
menuPetal.style.opacity = "0";
}
isMenuOpen = false;
}
});
@ -85,18 +85,11 @@ function initNavigation() {
navLinks.forEach((link) => {
link.addEventListener("click", function () {
navMenu.classList.add("hidden");
// Transform back to grid
menuGrid.innerHTML = `
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
`;
// Show closed petal, hide open petal
if (menuPetal) {
menuGrid.style.opacity = "1";
menuPetal.style.opacity = "0";
}
isMenuOpen = false;
});
});
@ -105,18 +98,11 @@ function initNavigation() {
document.addEventListener("keydown", function (e) {
if (e.key === "Escape" && !navMenu.classList.contains("hidden")) {
navMenu.classList.add("hidden");
// Transform back to grid
menuGrid.innerHTML = `
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
`;
// Show closed petal, hide open petal
if (menuPetal) {
menuGrid.style.opacity = "1";
menuPetal.style.opacity = "0";
}
isMenuOpen = false;
}
});

22
projects.html
View file

@ -376,22 +376,22 @@
<span class="wave"></span>
</div>
<div class="menu-outline" aria-hidden="true"></div>
<div class="grid grid-cols-3 gap-1 w-6 h-6 relative" id="menuGrid">
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<div class="relative" id="menuGrid">
<img
src="assets/icons/closed_petal.png"
alt="closed petal"
class="w-6 h-6"
/>
</div>
<div
id="menuPetal"
class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 transition-opacity"
>
<img src="assets/icons/petal.png" alt="petal" class="w-8 h-8" />
<img
src="assets/icons/open_petal.png"
alt="petal"
class="w-8 h-8"
/>
</div>
</div>

14
services.html
View file

@ -560,22 +560,14 @@
<span class="wave"></span>
</div>
<div class="menu-outline" aria-hidden="true"></div>
<div class="grid grid-cols-3 gap-1 w-6 h-6 relative" id="menuGrid">
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<div class="relative" id="menuGrid">
<img src="assets/icons/closed_petal.png" alt="closed petal" class="w-6 h-6" />
</div>
<div
id="menuPetal"
class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 transition-opacity"
>
<img src="assets/icons/petal.png" alt="petal" class="w-8 h-8" />
<img src="assets/icons/open_petal.png" alt="petal" class="w-8 h-8" />
</div>
</div>

59
who.html
View file

@ -354,12 +354,9 @@
<!-- Static Logo and Menu -->
<div class="fixed top-6 left-8 z-40">
<div class="flex items-center gap-3">
<img
src="assets/images/kh3_logo.png"
alt="KH3"
class="w-12 h-12"
/>
<a href="index.html" class="flex items-center gap-3 hover:opacity-80 transition-opacity">
<img src="assets/images/kh3_logo.png" alt="KH3" class="w-12 h-12" />
</a>
</div>
</div>
@ -368,7 +365,7 @@
class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-50"
>
<div class="cursor-pointer" id="menuToggle">
<!-- Desktop view: menuWrap with waves and outline -->
<!-- Desktop view: menuWrap with waves and outline (wrapped like WHY page) -->
<div class="relative inline-block hidden md:block" id="menuWrap">
<div class="menu-waves" aria-hidden="true">
<span class="wave"></span>
@ -376,22 +373,14 @@
<span class="wave"></span>
</div>
<div class="menu-outline" aria-hidden="true"></div>
<div class="grid grid-cols-3 gap-1 w-6 h-6 relative" id="menuGrid">
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<div class="relative z-20" id="menuGrid" style="opacity: 1;">
<img src="assets/icons/closed_petal.png" alt="closed petal" class="block w-6 h-6" />
</div>
<div
id="menuPetal"
class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 transition-opacity"
class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 transition-opacity z-0"
>
<img src="assets/icons/petal.png" alt="petal" class="w-8 h-8" />
<img src="assets/icons/open_petal.png" alt="petal" class="w-8 h-8" />
</div>
</div>
@ -1716,16 +1705,12 @@
const grid = document.getElementById("menuGrid");
if (nav) nav.classList.add("hidden");
if (grid) {
grid.innerHTML = `
<span class=\"w-1 h-1 bg-white rounded-full\"></span>
<span class=\"w-1 h-1 bg-white rounded-full\"></span>
<span class=\"w-1 h-1 bg-white rounded-full\"></span>
<span class=\"w-1 h-1 bg-white rounded-full\"></span>
<span class=\"w-1 h-1 bg-white rounded-full\"></span>
<span class=\"w-1 h-1 bg-white rounded-full\"></span>
<span class=\"w-1 h-1 bg-white rounded-full\"></span>
<span class=\"w-1 h-1 bg-white rounded-full\"></span>
<span class=\"w-1 h-1 bg-white rounded-full\"></span>`;
// Ensure closed state on snapshot
grid.style.opacity = "1";
const wrap = document.getElementById("menuWrap");
if (wrap) wrap.classList.remove("open");
const petal = document.getElementById("menuPetal");
if (petal) petal.style.opacity = "0";
}
});
@ -1739,16 +1724,12 @@
const grid = document.getElementById("menuGrid");
if (nav) nav.classList.add("hidden");
if (grid) {
grid.innerHTML = `
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>`;
// Ensure closed state on restore
grid.style.opacity = "1";
const wrap = document.getElementById("menuWrap");
if (wrap) wrap.classList.remove("open");
const petal = document.getElementById("menuPetal");
if (petal) petal.style.opacity = "0";
}
});