refactor: update menu toggle structure and icons across multiple HTML files for improved consistency and user experience
This commit is contained in:
parent
03b6cc138b
commit
584ba42eab
10 changed files with 210 additions and 343 deletions
63
js/contact.js
Normal file
63
js/contact.js
Normal 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
126
js/main.js
|
|
@ -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;
|
||||
}
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue