combile main-app.js into app.js

public/index.html

@@ -541,7 +541,6 @@
 
         <script src="js/app.js"></script>
         <script src="js/tutorial.js"></script>
-        <script src="js/main_app.js"></script>
 
 </body>
 

public/js/app.js

@@ -48,7 +48,7 @@ document.addEventListener('DOMContentLoaded', () => {
     section.style.opacity = '0';
     section.style.transition = 'transform 0.7s ease-out, opacity 0.7s ease-out';
     observer.observe(section);
-});
+  });
 
 
   function throttle(fn, wait) {
@@ -66,6 +66,59 @@ document.addEventListener('DOMContentLoaded', () => {
   const hamburger = document.querySelector('.hamburger');
   const mobileNav = document.querySelector('[data-mobile-nav]');
   const navLinks = mobileNav.querySelectorAll('a');
+  sections.forEach(section => {
+    section.style.transform = 'translateY(30px)';
+    section.style.opacity = '0';
+    section.style.transition = 'transform 0.7s ease-out, opacity 0.7s ease-out';
+    observer.observe(section);
+  });
+
+  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);
+  }
 
 
   // Debounce function to prevent rapid clicks
@@ -595,9 +648,9 @@ document.addEventListener('DOMContentLoaded', () => {
       state.serverStatus = status;
       toggleSections(status);
     }
-}
+  }
 
-function toggleSections(status) {
+  function toggleSections(status) {
     const sections = document.querySelectorAll('.section-bg');
     const serverStatusSection = document.querySelector('.section-bg[data-section="server-status"]');
     const editPropertiesBtn = elements.editPropertiesBtn;
@@ -735,7 +788,7 @@ function toggleSections(status) {
       }
       state.hasShownStartNotification = false;
     }
-}
+  }
 
   function updateDockerLogsUI(message) {
     if (message.error) {
@@ -1340,9 +1393,9 @@ function toggleSections(status) {
       }
       createPageButton(currentPage + 1, 'Next', currentPage === totalPages);
     }
-}
+  }
 
-function updateModListPagination() {
+  function updateModListPagination() {
     const filteredMods = state.allMods.filter(mod =>
       mod.name.toLowerCase().includes(modListSearchQuery.toLowerCase())
     );
@@ -1375,7 +1428,7 @@ function updateModListPagination() {
       }
       createPageButton(modListCurrentPage + 1, 'Next', modListCurrentPage === totalModPages);
     }
-}
+  }
 
   function closeSearch() {
     elements.modSearch.value = '';
@@ -2222,7 +2275,7 @@ function updateModListPagination() {
       console.error('Start server error:', error);
       showNotification(`Failed to start server: ${error.message}`, 'error', 'start-error');
     }
-});
+  });
 
 
   document.getElementById('stopBtn').addEventListener('click', async () => {
@@ -2396,7 +2449,7 @@ function updateModListPagination() {
   window.showNotification = showNotification;
 
   // Add this at the end of the document.addEventListener('DOMContentLoaded', ...) block
-function applyResponsiveStyles() {
+  function applyResponsiveStyles() {
     const sections = document.querySelectorAll('.section-bg');
     sections.forEach(section => {
       section.style.padding = window.innerWidth <= 640 ? '1rem' : window.innerWidth <= 768 ? '1.5rem' : '2rem';
@@ -2427,9 +2480,9 @@ function applyResponsiveStyles() {
     consoles.forEach(console => {
       console.style.height = window.innerWidth <= 640 ? '7rem' : window.innerWidth <= 768 ? '8rem' : '12rem';
     });
-}
+  }
 
-window.addEventListener('resize', applyResponsiveStyles);
+  window.addEventListener('resize', applyResponsiveStyles);
 
 
 });

public/js/main_app.js

@@ -1,130 +0,0 @@
-const sections = document.querySelectorAll('.section-bg');
-const observer = new IntersectionObserver((entries) => {
-    entries.forEach((entry, index) => {
-        if (entry.isIntersecting) {
-            entry.target.style.transform = 'translateY(0)';
-            entry.target.style.opacity = '1';
-            entry.target.style.transitionDelay = `${index * 0.1}s`;
-        }
-    });
-}, { threshold: 0.1 });
-
-sections.forEach(section => {
-    section.style.transform = 'translateY(30px)';
-    section.style.opacity = '0';
-    section.style.transition = 'transform 0.7s ease-out, opacity 0.7s ease-out';
-    observer.observe(section);
-});
-
-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;
-        }
-    };
-}
-
-
-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');
-    }
-});
-