first commit

site/js/main.js

@@ -0,0 +1,189 @@
+/*
+ * 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 = '2';
+            });
+        });
+    };
+    
+    // Initialize effects
+    setTimeout(() => {
+        createEmojiStickers();
+        createPostItEffect();
+    }, 100);
+});