henztech/coinbase
1
1// Mobile menu toggle2document.addEventListener('DOMContentLoaded', function() {3 const mobileMenuBtn = document.querySelector('.mobile-menu-btn');4 const navLinks = document.querySelector('.nav-links');5 const navButtons = document.querySelector('.nav-buttons');6 7 let menuOpen = false;8 9 mobileMenuBtn.addEventListener('click', function() {10 if (!menuOpen) {11 // Create mobile menu12 const mobileMenu = document.createElement('div');13 mobileMenu.classList.add('mobile-menu');14 15 // Clone nav links and buttons16 const navLinksClone = navLinks.cloneNode(true);17 const navButtonsClone = navButtons.cloneNode(true);18 19 // Append to mobile menu20 mobileMenu.appendChild(navLinksClone);21 mobileMenu.appendChild(navButtonsClone);22 23 // Add mobile menu after header24 const header = document.querySelector('header');25 header.after(mobileMenu);26 27 // Animate menu button28 mobileMenuBtn.classList.add('open');29 30 // Add styles for mobile menu31 const style = document.createElement('style');32 style.id = 'mobile-menu-styles';33 style.innerHTML = `34 .mobile-menu {35 background-color: white;36 padding: 20px;37 box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);38 }39 40 .mobile-menu .nav-links {41 display: flex;42 flex-direction: column;43 gap: 15px;44 margin-bottom: 20px;45 }46 47 .mobile-menu .nav-buttons {48 display: flex;49 flex-direction: column;50 gap: 10px;51 }52 53 .mobile-menu-btn.open span:nth-child(1) {54 transform: rotate(45deg) translate(5px, 5px);55 }56 57 .mobile-menu-btn.open span:nth-child(2) {58 opacity: 0;59 }60 61 .mobile-menu-btn.open span:nth-child(3) {62 transform: rotate(-45deg) translate(7px, -6px);63 }64 `;65 document.head.appendChild(style);66 67 menuOpen = true;68 } else {69 // Remove mobile menu70 const mobileMenu = document.querySelector('.mobile-menu');71 if (mobileMenu) {72 mobileMenu.remove();73 }74 75 // Remove mobile menu styles76 const mobileMenuStyles = document.getElementById('mobile-menu-styles');77 if (mobileMenuStyles) {78 mobileMenuStyles.remove();79 }80 81 // Reset menu button82 mobileMenuBtn.classList.remove('open');83 84 menuOpen = false;85 }86 });87 88 // Close mobile menu on window resize89 window.addEventListener('resize', function() {90 if (window.innerWidth > 768 && menuOpen) {91 const mobileMenu = document.querySelector('.mobile-menu');92 if (mobileMenu) {93 mobileMenu.remove();94 }95 96 const mobileMenuStyles = document.getElementById('mobile-menu-styles');97 if (mobileMenuStyles) {98 mobileMenuStyles.remove();99 }100 101 mobileMenuBtn.classList.remove('open');102 103 menuOpen = false;104 }105 });106 107 // Smooth scrolling for anchor links108 document.querySelectorAll('a[href^="#"]').forEach(anchor => {109 anchor.addEventListener('click', function(e) {110 e.preventDefault();111 112 const targetId = this.getAttribute('href');113 if (targetId === '#') return;114 115 const targetElement = document.querySelector(targetId);116 if (targetElement) {117 targetElement.scrollIntoView({118 behavior: 'smooth'119 });120 }121 122 // Close mobile menu if open123 if (menuOpen) {124 const mobileMenu = document.querySelector('.mobile-menu');125 if (mobileMenu) {126 mobileMenu.remove();127 }128 129 const mobileMenuStyles = document.getElementById('mobile-menu-styles');130 if (mobileMenuStyles) {131 mobileMenuStyles.remove();132 }133 134 mobileMenuBtn.classList.remove('open');135 136 menuOpen = false;137 }138 });139 });140 141 // Animate stats on scroll142 const statsSection = document.querySelector('.stats');143 const statNumbers = document.querySelectorAll('.stat-item h3');144 145 let animated = false;146 147 function animateStats() {148 if (animated) return;149 150 const statsPosition = statsSection.getBoundingClientRect().top;151 const screenPosition = window.innerHeight / 1.3;152 153 if (statsPosition < screenPosition) {154 statNumbers.forEach(stat => {155 const targetNumber = stat.textContent;156 let currentNumber = 0;157 const increment = Math.ceil(parseInt(targetNumber.replace(/[^0-9]/g, '')) / 50);158 const duration = 1500; // ms159 const interval = duration / (parseInt(targetNumber.replace(/[^0-9]/g, '')) / increment);160 161 const counter = setInterval(() => {162 currentNumber += increment;163 164 if (currentNumber >= parseInt(targetNumber.replace(/[^0-9]/g, ''))) {165 stat.textContent = targetNumber;166 clearInterval(counter);167 } else {168 if (targetNumber.includes('M')) {169 stat.textContent = currentNumber + 'M+';170 } else if (targetNumber.includes('B')) {171 stat.textContent = '$' + currentNumber + 'B+';172 } else {173 stat.textContent = currentNumber + '+';174 }175 }176 }, interval);177 });178 179 animated = true;180 }181 }182 183 // Check if stats are in view on scroll184 window.addEventListener('scroll', animateStats);185 186 // Check on page load187 animateStats();188 189 // Parallax effect for hero section190 const hero = document.querySelector('.hero');191 192 window.addEventListener('scroll', function() {193 const scrollPosition = window.pageYOffset;194 hero.style.backgroundPosition = `50% ${scrollPosition * 0.5}px`;195 });196 197 // Product card hover effect198 const productCards = document.querySelectorAll('.product-card');199 200 productCards.forEach(card => {201 card.addEventListener('mouseenter', function() {202 this.style.transform = 'translateY(-10px)';203 this.style.boxShadow = '0 10px 30px rgba(0, 0, 0, 0.1)';204 });205 206 card.addEventListener('mouseleave', function() {207 this.style.transform = 'translateY(0)';208 this.style.boxShadow = 'none';209 });210 });211});