georgebiri/kh3_website
1
0
Fork 0
Code Issues Pull requests 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

16
about.html
View file

@ -367,7 +367,7 @@
<div
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">
<div class="cursor-pointer" id="menuToggle">
<!-- Desktop view: menuWrap with waves and outline -->
<div class="relative inline-block hidden md:block" id="menuWrap">
<div class="cursor-pointer bg-black/30 backdrop-blur-sm rounded-lg p-3">
@ -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>

67
index.html
View file

@ -51,7 +51,7 @@
"
>
<span class="md:hidden">HOME</span>
<span
<span
class="hidden md:inline"
style="
animation-delay: 0.05s;
@ -68,8 +68,8 @@
animation-duration: 0.15s;
"
>O</span
>
<span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.1s;
@ -78,7 +78,7 @@
"
>M</span
>
<span
<span
class="hidden md:inline"
style="
animation-delay: 0.125s;
@ -90,8 +90,8 @@
</a>
<!-- WHY - Slightly right -->
<a
href="about.html"
<a
href="about.html"
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-6 font-montserrat opacity-0 animate-fade-in-left"
style="
animation-delay: 0.2s;
@ -131,8 +131,8 @@
</a>
<!-- HOW - More right -->
<a
href="services.html"
<a
href="services.html"
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-12 font-montserrat opacity-0 animate-fade-in-left"
style="
animation-delay: 0.35s;
@ -263,8 +263,8 @@
</a>
<!-- CONTACTS - More right -->
<a
href="contact.html"
<a
href="contact.html"
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-12 font-montserrat opacity-0 animate-fade-in-left"
style="
animation-delay: 0.75s;
@ -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>
@ -457,7 +454,7 @@
class="w-3 h-3 bg-kh3-red transform rotate-45 -mt-1.5"
></div>
<div class="w-px h-8 bg-kh3-red"></div>
</div>
</div>
<div class="flex items-center h-16">
<span
class="text-xs md:text-sm tracking-widest text-neutral-400"
@ -536,18 +533,18 @@
<div class="flex items-center gap-4">
<a
href="about.html"
data-trans
data-trans
class="px-4 py-2 text-sm uppercase tracking-wider border border-white text-white hover:bg-kh3-red hover:border-kh3-red transition-all duration-300 rounded-none"
>Why</a
>
<a
href="contact.html"
data-trans
<a
href="contact.html"
data-trans
class="px-4 py-2 text-sm uppercase tracking-wider border border-white text-white hover:bg-kh3-red hover:border-kh3-red transition-all duration-300 rounded-none"
>Contacts</a
>
</div>
</div>
>
</div>
</div>
</div>
</div>
@ -558,7 +555,7 @@
>
<a
class="inline-block uppercase tracking-wider px-5 py-2 md:px-6 md:py-3 text-sm md:text-base border border-white text-white hover:bg-kh3-red hover:border-kh3-red transition-all duration-300 rounded-none animate-border-glow"
href="about.html"
href="about.html"
data-trans
>
Why
@ -579,9 +576,9 @@
WHO
</a>
<div class="w-6 md:w-8 h-px bg-kh3-red"></div>
</div>
</div>
</section>
</div>
</div>
<!-- Custom Cursor -->
<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);
});

126
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,58 +72,37 @@ 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;
}
});
}
});
// Close navigation when clicking on a link
navLinks.forEach((link) => {
link.addEventListener("click", function () {
// Close navigation when clicking on a link
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;
});
});
});
// Close navigation with Escape key
document.addEventListener("keydown", function (e) {
// Close navigation with Escape key
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;
}
});

52
projects.html
View file

@ -31,7 +31,7 @@
>
<img src="assets/images/kh3_logo.png" alt="KH3" class="w-12 h-12" />
</a>
</div>
</div>
<!-- Navigation Links - Inverted C Layout -->
<nav class="flex-1 relative">
@ -346,12 +346,12 @@
>S</span
>
</a>
</div>
</div>
</div>
</div>
</div>
</nav>
</div>
</div>
</div>
<!-- Static Logo and Menu -->
<div class="fixed top-6 left-8 z-40">
@ -361,7 +361,7 @@
>
<img src="assets/images/kh3_logo.png" alt="KH3" class="w-12 h-12" />
</a>
</div>
</div>
<!-- Menu Toggle with Homepage/WHY structure -->
<div
@ -374,26 +374,26 @@
<span class="wave"></span>
<span class="wave"></span>
<span class="wave"></span>
</div>
</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" />
</div>
<img
src="assets/icons/open_petal.png"
alt="petal"
class="w-8 h-8"
/>
</div>
</div>
<!-- Mobile view: simple transparent background -->
<div class="md:hidden">
@ -577,7 +577,7 @@
id="modalCategory"
class="text-kh3-red text-sm font-medium tracking-wider"
></p>
</div>
</div>
<button
id="closeModal"
class="text-white/70 hover:text-white transition-colors duration-300"
@ -596,7 +596,7 @@
></path>
</svg>
</button>
</div>
</div>
<!-- Modal Body -->
<div class="flex flex-col lg:flex-row h-full">
@ -618,8 +618,8 @@
>
<div id="imageDots" class="flex space-x-2">
<!-- Dots will be generated here -->
</div>
</div>
</div>
</div>
<!-- Previous/Next Buttons -->
<button
@ -665,9 +665,9 @@
>
<span id="imageCounter">1</span> /
<span id="totalImages">1</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Project Details Section -->
<div
@ -686,7 +686,7 @@
id="modalDescription"
class="text-white/80 text-sm leading-relaxed"
></p>
</div>
</div>
<!-- Project Details -->
<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>

63
who.html
View file

@ -353,14 +353,11 @@
<!-- 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"
/>
</div>
<div class="flex items-center gap-3">
<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>
<!-- Menu Toggle with Homepage/WHY structure -->
@ -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";
}
});