// Performance and UX Optimizations for MNT (function() { 'use strict'; // Check if DOM is ready if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } function init() { // Initialize all features initSmoothScroll(); initLazyLoading(); initPerformanceOptimizations(); initAnalytics(); initSecurityFeatures(); initAccessibility(); initSchemaUpdater(); } // Smooth Scroll for Navigation Links function initSmoothScroll() { document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function(e) { e.preventDefault(); const target = document.querySelector(this.getAttribute('href')); if (target) { const headerOffset = 80; const elementPosition = target.getBoundingClientRect().top; const offsetPosition = elementPosition + window.pageYOffset - headerOffset; window.scrollTo({ top: offsetPosition, behavior: 'smooth' }); } }); }); } // Lazy Loading for Images (if any added later) function initLazyLoading() { if ('IntersectionObserver' in window) { const imageObserver = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; if (img.dataset.src) { img.src = img.dataset.src; img.classList.add('loaded'); observer.unobserve(img); } } }); }, { rootMargin: '50px 0px', threshold: 0.01 }); document.querySelectorAll('img[data-src]').forEach(img => { imageObserver.observe(img); }); } } // Performance Optimizations function initPerformanceOptimizations() { // Debounce scroll events let scrollTimer; const header = document.querySelector('header'); let lastScrollTop = 0; window.addEventListener('scroll', () => { if (scrollTimer) { window.cancelAnimationFrame(scrollTimer); } scrollTimer = window.requestAnimationFrame(() => { const scrollTop = window.pageYOffset || document.documentElement.scrollTop; // Add/remove header shadow based on scroll if (scrollTop > 10) { header.classList.add('scrolled'); } else { header.classList.remove('scrolled'); } // Hide/show header on scroll (mobile optimization) if (window.innerWidth <= 768) { if (scrollTop > lastScrollTop && scrollTop > 100) { header.style.transform = 'translateY(-100%)'; } else { header.style.transform = 'translateY(0)'; } } lastScrollTop = scrollTop; }); }, { passive: true }); // Preload critical resources const preloadLink = document.createElement('link'); preloadLink.rel = 'preload'; preloadLink.as = 'style'; preloadLink.href = 'styles.css'; document.head.appendChild(preloadLink); // Prefetch DNS for external resources const dnsPrefetch = document.createElement('link'); dnsPrefetch.rel = 'dns-prefetch'; dnsPrefetch.href = 'https://www.google-analytics.com'; document.head.appendChild(dnsPrefetch); } // Analytics (Google Analytics or similar) function initAnalytics() { // Track button clicks document.querySelectorAll('.btn-primary').forEach(button => { button.addEventListener('click', function() { // Track event if (typeof gtag !== 'undefined') { gtag('event', 'click', { 'event_category': 'engagement', 'event_label': this.textContent.trim() }); } }); }); // Track FAQ interactions document.querySelectorAll('.faq-item').forEach(item => { item.addEventListener('toggle', function() { if (this.open && typeof gtag !== 'undefined') { gtag('event', 'faq_open', { 'event_category': 'engagement', 'event_label': this.querySelector('summary').textContent.trim() }); } }); }); // Track time on page let startTime = Date.now(); window.addEventListener('beforeunload', () => { const timeSpent = Math.round((Date.now() - startTime) / 1000); if (typeof gtag !== 'undefined' && timeSpent > 0) { gtag('event', 'timing_complete', { 'name': 'time_on_page', 'value': timeSpent, 'event_category': 'engagement' }); } }); } // Security Features function initSecurityFeatures() { // Prevent right-click on buttons (optional) document.querySelectorAll('.btn-primary').forEach(button => { button.addEventListener('contextmenu', e => { e.preventDefault(); return false; }); }); // Add rel="noopener noreferrer" to external links document.querySelectorAll('a[target="_blank"]').forEach(link => { link.rel = 'noopener noreferrer nofollow'; }); // Content Security Policy meta tag (if not server-side) const cspMeta = document.createElement('meta'); cspMeta.httpEquiv = 'Content-Security-Policy'; cspMeta.content = "default-src 'self'; script-src 'self' 'unsafe-inline' https://www.google-analytics.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' data:;"; document.head.appendChild(cspMeta); } // Accessibility Improvements function initAccessibility() { // Add keyboard navigation for FAQ items document.querySelectorAll('.faq-item summary').forEach(summary => { summary.setAttribute('tabindex', '0'); summary.addEventListener('keypress', function(e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this.click(); } }); }); // Skip to content link const skipLink = document.createElement('a'); skipLink.href = '#giris'; skipLink.className = 'skip-link'; skipLink.textContent = 'Ana içeriğe geç'; skipLink.style.cssText = 'position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;'; skipLink.addEventListener('focus', function() { this.style.left = '50%'; this.style.transform = 'translateX(-50%)'; this.style.top = '10px'; this.style.width = 'auto'; this.style.height = 'auto'; this.style.padding = '10px'; this.style.background = '#0ab737'; this.style.color = '#fff'; this.style.zIndex = '9999'; this.style.borderRadius = '5px'; }); skipLink.addEventListener('blur', function() { this.style.left = '-10000px'; }); document.body.insertBefore(skipLink, document.body.firstChild); // Announce dynamic content changes const announcer = document.createElement('div'); announcer.setAttribute('aria-live', 'polite'); announcer.setAttribute('aria-atomic', 'true'); announcer.style.position = 'absolute'; announcer.style.left = '-10000px'; announcer.style.width = '1px'; announcer.style.height = '1px'; announcer.style.overflow = 'hidden'; document.body.appendChild(announcer); } // Update Schema.org data with current date function initSchemaUpdater() { const today = new Date().toISOString(); const schemaScripts = document.querySelectorAll('script[type="application/ld+json"]'); schemaScripts.forEach(script => { try { const data = JSON.parse(script.textContent); // Update dateModified for WebPage if (data['@graph']) { data['@graph'].forEach(item => { if (item['@type'] === 'WebPage') { item.dateModified = today; } }); script.textContent = JSON.stringify(data); } } catch (e) { console.error('Schema update error:', e); } }); } // Progressive Enhancement - Add modern features for capable browsers if ('serviceWorker' in navigator && location.protocol === 'https:') { // Register service worker for offline functionality (create sw.js separately) navigator.serviceWorker.register('/sw.js').catch(() => { // Silent fail - service worker is enhancement only }); } // Add Web Vitals tracking function initWebVitals() { // Largest Contentful Paint (LCP) new PerformanceObserver((entryList) => { const entries = entryList.getEntries(); const lastEntry = entries[entries.length - 1]; console.log('LCP:', lastEntry.renderTime || lastEntry.loadTime); }).observe({ entryTypes: ['largest-contentful-paint'] }); // First Input Delay (FID) new PerformanceObserver((entryList) => { const entries = entryList.getEntries(); entries.forEach((entry) => { console.log('FID:', entry.processingStart - entry.startTime); }); }).observe({ entryTypes: ['first-input'] }); // Cumulative Layout Shift (CLS) let clsValue = 0; new PerformanceObserver((entryList) => { const entries = entryList.getEntries(); entries.forEach((entry) => { if (!entry.hadRecentInput) { clsValue += entry.value; console.log('CLS:', clsValue); } }); }).observe({ entryTypes: ['layout-shift'] }); } // Initialize Web Vitals if supported if (PerformanceObserver && PerformanceObserver.supportedEntryTypes) { if (PerformanceObserver.supportedEntryTypes.includes('largest-contentful-paint')) { initWebVitals(); } } // Dynamic copyright year const yearElement = document.querySelector('.footer-bottom p'); if (yearElement) { const currentYear = new Date().getFullYear(); yearElement.textContent = yearElement.textContent.replace(/2025/, currentYear); } // Add loading state for buttons document.querySelectorAll('.btn-primary').forEach(button => { button.addEventListener('click', function(e) { if (this.href && this.href.includes('http')) { this.classList.add('loading'); this.style.pointerEvents = 'none'; // Add loading spinner const spinner = document.createElement('span'); spinner.className = 'spinner'; spinner.style.cssText = 'display:inline-block;width:16px;height:16px;border:2px solid #fff;border-radius:50%;border-top-color:transparent;animation:spin 0.6s linear infinite;margin-left:10px;'; this.appendChild(spinner); // Add spinning animation const style = document.createElement('style'); style.textContent = '@keyframes spin { to { transform: rotate(360deg); } }'; document.head.appendChild(style); // Allow navigation after small delay setTimeout(() => { this.style.pointerEvents = 'auto'; }, 500); } }); }); })(); // Google Analytics is loaded in HTML head for better performance