mintris/website/js/main.js

// Pixel Mint Games Website JavaScript

document.addEventListener('DOMContentLoaded', function() {
    // Mobile Navigation Toggle
    const createMobileNav = () => {
        const header = document.querySelector('header');
        if (header) {
            // Create mobile nav button
            const mobileNavBtn = document.createElement('button');
            mobileNavBtn.classList.add('mobile-nav-toggle');
            mobileNavBtn.innerHTML = '<span></span><span></span><span></span>';
            header.querySelector('.logo').after(mobileNavBtn);
            
            // Mobile nav functionality
            mobileNavBtn.addEventListener('click', function() {
                const nav = document.querySelector('nav ul');
                nav.classList.toggle('show');
                this.classList.toggle('active');
            });
        }
    };

    // Add mobile navigation only on smaller screens
    if (window.innerWidth <= 768) {
        createMobileNav();
    }
    
    // Window resize handler
    window.addEventListener('resize', function() {
        const mobileNavBtn = document.querySelector('.mobile-nav-toggle');
        if (window.innerWidth <= 768 && !mobileNavBtn) {
            createMobileNav();
        } else if (window.innerWidth > 768 && mobileNavBtn) {
            mobileNavBtn.remove();
            document.querySelector('nav ul').classList.remove('show');
        }
    });

    // Smooth scrolling for anchor links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function(e) {
            const targetId = this.getAttribute('href');
            if (targetId === '#') return;
            
            const targetElement = document.querySelector(targetId);
            if (targetElement) {
                e.preventDefault();
                targetElement.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
        });
    });

    // Add active class to current page in navigation
    const currentPage = window.location.pathname.split('/').pop();
    const navLinks = document.querySelectorAll('nav ul li a');
    
    navLinks.forEach(link => {
        const linkPage = link.getAttribute('href');
        if (linkPage === currentPage || (currentPage === '' && linkPage === 'index.html')) {
            link.classList.add('active');
        }
    });

    // Form validation for contact form
    const contactForm = document.getElementById('contactForm');
    if (contactForm) {
        contactForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            // Simple form validation
            let isValid = true;
            const formElements = this.elements;
            
            for (let i = 0; i < formElements.length; i++) {
                if (formElements[i].hasAttribute('required') && !formElements[i].value.trim()) {
                    isValid = false;
                    formElements[i].classList.add('error');
                } else {
                    formElements[i].classList.remove('error');
                }
                
                // Email validation
                if (formElements[i].type === 'email' && formElements[i].value.trim()) {
                    const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                    if (!emailPattern.test(formElements[i].value)) {
                        isValid = false;
                        formElements[i].classList.add('error');
                    }
                }
            }
            
            if (isValid) {
                // In a real application, this would submit to a server
                alert('Thank you for your message! We will get back to you soon.');
                this.reset();
            } else {
                alert('Please fill in all required fields correctly.');
            }
        });
    }
});