bug fixes

public/index.html

@@ -7,7 +7,7 @@
     <meta http-equiv="Permissions-Policy" content="clipboard-write=(self https://sftp.my-mc.link)">
     <title>My-MC Panel</title>
     <link rel="stylesheet" href="css/style.min.css">
-    <link rel="stylesheet" href="css/main-site.css">
+    <link rel="stylesheet" href="css/main-site.min.css">
 
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700;900&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
@@ -541,7 +541,7 @@
 
         <script src="js/app.js"></script>
         <script src="js/tutorial.js"></script>
-        <script src="https://my-mc.link/js/main.js"></script>
+        <script src="js/main_app.js"></script>
 
 </body>
 

public/js/main_app.js

@@ -0,0 +1,145 @@
+const PARTICLE_POOL_SIZE = 50;
+const particlePool = [];
+const activeParticles = new Set();
+
+function createParticleElement() {
+    const particle = document.createElement('div');
+    particle.classList.add('particle');
+    if (Math.random() > 0.6) particle.classList.add('large');
+    return particle;
+}
+
+function initializeParticlePool() {
+    for (let i = 0; i < PARTICLE_POOL_SIZE; i++) {
+        particlePool.push(createParticleElement());
+    }
+}
+
+function resetParticle(particle) {
+    particle.style.left = `${Math.random() * 100}%`;
+    particle.style.top = `${Math.random() * 100}%`;
+    particle.style.animationDelay = `${Math.random() * 8}s`;
+    particle.style.animationDuration = `${8 + Math.random() * 6}s`;
+    particle.classList.remove('fade-out');
+    return particle;
+}
+
+function spawnParticle() {
+    if (particlePool.length === 0 || activeParticles.size >= PARTICLE_POOL_SIZE) return;
+
+    const particle = resetParticle(particlePool.pop());
+    if (!particle.parentNode) document.body.appendChild(particle);
+    activeParticles.add(particle);
+
+    setTimeout(() => {
+        particle.classList.add('fade-out');
+        setTimeout(() => {
+            activeParticles.delete(particle);
+            particlePool.push(particle);
+        }, 500);
+    }, 14000);
+}
+
+function animate() {
+    if (Math.random() < 0.1) spawnParticle(); // Reduced spawn frequency
+    requestAnimationFrame(animate);
+}
+
+// Initialize and start
+setTimeout(() => {
+    initializeParticlePool();
+    animate();
+}, 500);
+
+function throttle(fn, wait) {
+    let lastTime = 0;
+    return function (...args) {
+        const now = Date.now();
+        if (now - lastTime >= wait) {
+            fn.apply(this, args);
+            lastTime = now;
+        }
+    };
+}
+
+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)
+            );
+        }
+    }
+}
+
+const tiltCards = document.querySelectorAll('.tilt-card');
+tiltCards.forEach(card => {
+    card.addEventListener('mousemove', (e) => {
+        const rect = card.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+        const centerX = rect.width / 2;
+        const centerY = rect.height / 2;
+        const tiltX = (y - centerY) / 12;
+        const tiltY = (centerX - x) / 12;
+        card.style.transform = `perspective(1200px) rotateX(${tiltX}deg) rotateY(${tiltY}deg)`;
+    });
+    card.addEventListener('mouseleave', () => {
+        card.style.transform = 'perspective(1200px) rotateX(0) rotateY(0)';
+    });
+});
+
+const buttons = document.querySelectorAll('.btn-minecraft');
+buttons.forEach(button => {
+    button.addEventListener('mousemove', (e) => {
+        const rect = button.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+        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');
+    }
+});