// MCP Website JavaScript document.addEventListener('DOMContentLoaded', function() { // Newsletter subscription form const newsletterForm = document.getElementById('newsletter-form'); if (newsletterForm) { newsletterForm.addEventListener('submit', function(e) { e.preventDefault(); const email = this.querySelector('input[type="email"]').value; // In a real implementation, this would send the email to a server // For demonstration purposes, we'll show an alert alert(`Thank you for subscribing with ${email}! You'll receive MCP updates soon.`); this.reset(); }); } // Smooth scrolling for navigation links const navLinks = document.querySelectorAll('nav a[href^="#"]'); navLinks.forEach(link => { link.addEventListener('click', function(e) { e.preventDefault(); const targetId = this.getAttribute('href'); const targetElement = document.querySelector(targetId); if (targetElement) { window.scrollTo({ top: targetElement.offsetTop - 80, behavior: 'smooth' }); } }); }); // Add active class to navigation items on scroll const sections = document.querySelectorAll('section[id]'); window.addEventListener('scroll', function() { const scrollPosition = window.scrollY + 150; sections.forEach(section => { const sectionTop = section.offsetTop; const sectionHeight = section.offsetHeight; const sectionId = section.getAttribute('id'); if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) { document.querySelector(`nav a[href="#${sectionId}"]`).classList.add('active'); } else { document.querySelector(`nav a[href="#${sectionId}"]`).classList.remove('active'); } }); }); // Create a simple syntax highlighting effect for code blocks const codeBlocks = document.querySelectorAll('pre code'); codeBlocks.forEach(block => { // Simple keyword highlighting const keywords = ['import', 'const', 'let', 'var', 'function', 'return', 'async', 'await', 'new', 'class']; const punctuation = ['{', '}', '[', ']', '(', ')', ',', ';', '.', ':']; const strings = ['"', "'", '`']; // Get the text content let content = block.textContent; // This is a very simple implementation - in a real-world scenario, // you would use a proper syntax highlighting library like Prism.js or highlight.js // For now, we'll just add a CSS class to the block to enable some basic styling block.classList.add('syntax-highlighted'); }); });