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

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>