bnkops.landing.page/site/js/main.js

/*
 * Main JavaScript for BNKOps Website
 * Version: 2.0.0
 * Date: May 2025
 * Theme: Dark Purple with Trans Pride Colors
 */

document.addEventListener('DOMContentLoaded', () => {
    // Mobile menu toggle
    const mobileMenu = document.getElementById('mobile-menu');
    const navMenu = document.querySelector('.nav-menu');
    
    if (mobileMenu) {
        mobileMenu.addEventListener('click', () => {
            mobileMenu.classList.toggle('active');
            navMenu.classList.toggle('active');
        });
    }
    
    // Close mobile menu when clicking on a nav link
    const navLinks = document.querySelectorAll('.nav-menu a');
    
    navLinks.forEach(link => {
        link.addEventListener('click', () => {
            mobileMenu.classList.remove('active');
            navMenu.classList.remove('active');
        });
    });
    
    // Smooth scrolling for anchor links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function(e) {
            if (this.getAttribute('href') !== '#') {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                const targetElement = document.querySelector(targetId);
                
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 70,
                        behavior: 'smooth'
                    });
                }
            }
        });
    });
    
    // Sticky navigation on scroll with color change
    const navbar = document.querySelector('.navbar');
    const navbarHeight = navbar.getBoundingClientRect().height;
    
    window.addEventListener('scroll', () => {
        if (window.scrollY > navbarHeight) {
            navbar.classList.add('sticky');
            navbar.style.backgroundColor = 'rgba(60, 9, 108, 0.95)';
        } else {
            navbar.classList.remove('sticky');
            navbar.style.backgroundColor = 'rgba(16, 0, 43, 0.9)';
        }
    });
    
    // Form submission (prevent default for demo)
    const contactForm = document.querySelector('.contact-form');
    
    if (contactForm) {
        contactForm.addEventListener('submit', (e) => {
            e.preventDefault();
            alert('Form submission successful! This is a demo message.');
            contactForm.reset();
        });
    }
    
    // Create emoji stickers dynamically
    const createEmojiStickers = () => {
        const heroSection = document.querySelector('.hero');
        const servicesSection = document.querySelector('.services');
        const aboutSection = document.querySelector('.about');
        const contactSection = document.querySelector('.contact');
        
        const emojis = ['💻', '📚', '🌱', '⚡', '🔓', '💪', '✨', '🌈', '🏳️‍⚧️', '🏳️‍🌈'];
        
        const sections = [heroSection, servicesSection, aboutSection, contactSection];
        
        // Safe zones for emoji placement (percentage from edges)
        const safeZones = {
            hero: { top: 35, bottom: 25, left: 10, right: 10 },
            services: { top: 15, bottom: 15, left: 5, right: 5 },
            about: { top: 20, bottom: 20, left: 5, right: 5 },
            contact: { top: 20, bottom: 15, left: 5, right: 5 }
        };
        
        // Get section name from class
        const getSectionName = (section) => {
            if (section.classList.contains('hero')) return 'hero';
            if (section.classList.contains('services')) return 'services';
            if (section.classList.contains('about')) return 'about';
            if (section.classList.contains('contact')) return 'contact';
            return 'default';
        };
        
        sections.forEach((section) => {
            if (section) {
                const sectionName = getSectionName(section);
                const zone = safeZones[sectionName] || { top: 20, bottom: 20, left: 5, right: 5 };
                
                // Add 3-4 emoji stickers per section
                const emojiCount = Math.floor(Math.random() * 2) + 2; // 2-3 emojis per section
                const placedPositions = [];
                
                for (let i = 0; i < emojiCount; i++) {
                    const emoji = document.createElement('div');
                    emoji.className = 'emoji-sticker';
                    emoji.textContent = emojis[Math.floor(Math.random() * emojis.length)];
                    
                    // Calculate safe position that doesn't overlap with content
                    let attempts = 0;
                    let position;
                    
                    // Try to find a non-overlapping position
                    do {
                        position = {
                            top: Math.random() * (100 - zone.top - zone.bottom) + zone.top,
                            left: Math.random() * (100 - zone.left - zone.right) + zone.left
                        };
                        
                        // Check if this position is far enough from other emojis
                        const isFarEnough = placedPositions.every(pos => {
                            const distance = Math.sqrt(
                                Math.pow(position.top - pos.top, 2) + 
                                Math.pow(position.left - pos.left, 2)
                            );
                            return distance > 20; // Minimum distance between emojis
                        });
                        
                        attempts++;
                        if (isFarEnough || attempts > 10) break;
                    } while (attempts < 10);
                    
                    // Apply position
                    emoji.style.top = `${position.top}%`;
                    emoji.style.left = `${position.left}%`;
                    placedPositions.push(position);
                    
                    // Set z-index to be below content
                    emoji.style.zIndex = "1";
                    
                    // Random animation delay
                    emoji.style.animationDelay = `${Math.random() * 2}s`;
                    
                    section.appendChild(emoji);
                }
            }
        });
    };
    
    // Create post-it notes effect
    const createPostItEffect = () => {
        const postIts = document.querySelectorAll('.post-it, .service-card');
        
        postIts.forEach((postIt, index) => {
            // Add subtle rotation to every other card
            if (index % 2 === 0) {
                postIt.classList.add('tilt-left-sm');
            } else {
                postIt.classList.add('tilt-right-sm');
            }
            
            // Create shadow effect on hover
            postIt.addEventListener('mouseover', () => {
                postIt.style.transform = 'scale(1.03) rotate(0deg)';
                postIt.style.boxShadow = '0 15px 30px rgba(0, 0, 0, 0.3)';
                postIt.style.zIndex = '10';
            });
            
            postIt.addEventListener('mouseout', () => {
                postIt.style.transform = '';
                postIt.style.boxShadow = '';
                postIt.style.zIndex = '';
            });
        });
    };
    
    // Initialize effects
    setTimeout(() => {
        createEmojiStickers();
        createPostItEffect();
    }, 100);
});