Add ham menu

js/main.js

@@ -1,16 +1,20 @@
-// Handle video playback error
-const iframe = document.getElementById('ytplayer');
-iframe.onerror = () => {
-    iframe.style.display = 'none';
-    document.querySelector('.hero-bg img').style.display = 'block';
-};
+if (window.location.href === 'https://my-mc.link' || window.location.href === 'https://my-mc.link/') {
+    const iframe = document.getElementById('ytplayer');
+    if (iframe) {
+        iframe.onerror = () => {
+            iframe.style.display = 'none';
+            const img = document.querySelector('.hero-bg img');
+            if (img) {
+                img.style.display = 'block';
+            }
+        };
+    }
+}
 
-// Ensure page loads at the top
 window.addEventListener('load', () => {
     window.scrollTo(0, 0);
 });
 
-// Scroll animations for sections
 const sections = document.querySelectorAll('.section-bg');
 const observer = new IntersectionObserver((entries) => {
     entries.forEach((entry, index) => {
@@ -29,7 +33,6 @@ sections.forEach(section => {
     observer.observe(section);
 });
 
-// Dynamic particle spawning
 function createParticle() {
     const particle = document.createElement('div');
     particle.classList.add('particle');
@@ -44,7 +47,6 @@ function createParticle() {
 
 setInterval(createParticle, 500);
 
-// Throttle function to limit scroll event frequency
 function throttle(fn, wait) {
     let lastTime = 0;
     return function (...args) {
@@ -56,21 +58,24 @@ function throttle(fn, wait) {
     };
 }
 
-// Parallax effect for fallback image only
-const hero = document.querySelector('.hero-bg');
-const heroImg = hero.querySelector('img');
-window.addEventListener(
-    'scroll',
-    throttle(() => {
-        const scrollPosition = window.pageYOffset;
-        // Apply parallax only to fallback image if iframe is hidden
-        if (heroImg.style.display === 'block') {
-            heroImg.style.transform = `translate(-50%, calc(-50% + ${scrollPosition * 0.3}px)) scale(1.2)`;
+if (window.location.href === 'https://my-mc.link' || window.location.href === 'https://my-mc.link/') {
+    const hero = document.querySelector('.hero-bg');
+    if (hero) {
+        const heroImg = hero.querySelector('img');
+        if (heroImg) {
+            window.addEventListener(
+                'scroll',
+                throttle(() => {
+                    const scrollPosition = window.pageYOffset;
+                    if (heroImg.style.display === 'block') {
+                        heroImg.style.transform = `translate(-50%, calc(-50% + ${scrollPosition * 0.3}px)) scale(1.2)`;
+                    }
+                }, 16)
+            );
         }
-    }, 16) // ~60fps
-);
+    }
+}
 
-// Tilt effect for feature cards
 const tiltCards = document.querySelectorAll('.tilt-card');
 tiltCards.forEach(card => {
     card.addEventListener('mousemove', (e) => {
@@ -88,7 +93,6 @@ tiltCards.forEach(card => {
     });
 });
 
-// Cursor glow effect for buttons
 const buttons = document.querySelectorAll('.btn-minecraft');
 buttons.forEach(button => {
     button.addEventListener('mousemove', (e) => {
@@ -98,4 +102,40 @@ buttons.forEach(button => {
         button.style.setProperty('--x', `${x}px`);
         button.style.setProperty('--y', `${y}px`);
     });
+});
+
+// Hamburger Menu Toggle
+const hamburger = document.querySelector('.hamburger');
+const mobileNav = document.querySelector('[data-mobile-nav]');
+const navLinks = mobileNav.querySelectorAll('a');
+
+// Debounce function to prevent rapid clicks
+function debounce(fn, wait) {
+    let timeout;
+    return function (...args) {
+        clearTimeout(timeout);
+        timeout = setTimeout(() => fn.apply(this, args), wait);
+    };
+}
+
+hamburger.addEventListener('click', debounce(() => {
+    console.log('Hamburger clicked, toggling menu');
+    mobileNav.classList.toggle('active');
+    hamburger.classList.toggle('active');
+}, 100));
+
+navLinks.forEach(link => {
+    link.addEventListener('click', () => {
+        console.log('Nav link clicked, closing menu');
+        mobileNav.classList.remove('active');
+        hamburger.classList.remove('active');
+    });
+});
+
+document.addEventListener('click', (e) => {
+    if (!mobileNav.contains(e.target) && !hamburger.contains(e.target) && mobileNav.classList.contains('active')) {
+        console.log('Clicked outside, closing menu');
+        mobileNav.classList.remove('active');
+        hamburger.classList.remove('active');
+    }
 });