← Kapat

main.js

// Navbar background/blur toggle on scroll - optimized with throttling
document.addEventListener('DOMContentLoaded', function () {
    var navbar = document.querySelector('.navbar');
    var isScrolling = false;
    
    function toggleNavbarTop() {
        if (window.scrollY === 0) {
            navbar.classList.add('top');
        } else {
            navbar.classList.remove('top');
        }
        isScrolling = false;
    }
    
    function handleScroll() {
        if (!isScrolling) {
            requestAnimationFrame(toggleNavbarTop);
            isScrolling = true;
        }
    }
    
    toggleNavbarTop();
    window.addEventListener('scroll', handleScroll, { passive: true });
});
// Mobile navigation toggle
document.addEventListener('DOMContentLoaded', function() {
    const navToggle = document.getElementById('navToggle');
    const navMenu = document.querySelector('.nav-menu');
    
    if (navToggle && navMenu) {
        navToggle.addEventListener('click', function() {
            navMenu.classList.toggle('active');
            document.body.classList.toggle('nav-open');
        });

        // Close menu when clicking on a link (but not dropdown buttons)
        const navLinks = document.querySelectorAll('.nav-link');
        navLinks.forEach(link => {
            link.addEventListener('click', function() {
                navMenu.classList.remove('active');
                document.body.classList.remove('nav-open');
            });
        });

        // Handle mobile dropdown toggles
        const dropdownBtns = document.querySelectorAll('.nav-dropdown-btn');
        dropdownBtns.forEach(btn => {
            btn.addEventListener('click', function(e) {
                e.preventDefault();
                e.stopPropagation();
                
                // On mobile, toggle the dropdown
                if (window.innerWidth <= 767) {
                    const dropdown = btn.parentElement;
                    const isActive = dropdown.classList.contains('active');
                    
                    // Close all other dropdowns
                    document.querySelectorAll('.nav-dropdown').forEach(dd => {
                        dd.classList.remove('active');
                    });
                    
                    // Toggle current dropdown
                    if (!isActive) {
                        dropdown.classList.add('active');
                    }
                }
            });
        });

        // Handle dropdown item clicks in mobile
        const dropdownItems = document.querySelectorAll('.nav-dropdown-item');
        dropdownItems.forEach(item => {
            item.addEventListener('click', function() {
                if (window.innerWidth <= 767) {
                    navMenu.classList.remove('active');
                    document.body.classList.remove('nav-open');
                }
            });
        });

        // Close menu when clicking outside
        document.addEventListener('click', function(event) {
            if (!navToggle.contains(event.target) && !navMenu.contains(event.target)) {
                navMenu.classList.remove('active');
                document.body.classList.remove('nav-open');
                // Also close all dropdowns
                document.querySelectorAll('.nav-dropdown').forEach(dd => {
                    dd.classList.remove('active');
                });
            }
        });

        // Handle window resize to reset mobile dropdown states
        window.addEventListener('resize', function() {
            if (window.innerWidth > 767) {
                document.querySelectorAll('.nav-dropdown').forEach(dd => {
                    dd.classList.remove('active');
                });
                navMenu.classList.remove('active');
                document.body.classList.remove('nav-open');
            }
        });
    }

    // Smooth scrolling for anchor links
    const anchors = document.querySelectorAll('a[href^="#"]');
    anchors.forEach(anchor => {
        anchor.addEventListener('click', function(e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                target.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
        });
    });

    // Simple fade-in animation for elements
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    };

    const observer = new IntersectionObserver(function(entries) {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.style.opacity = '1';
                entry.target.style.transform = 'translateY(0)';
            }
        });
    }, observerOptions);

    // Observe elements for animation
    const animatedElements = document.querySelectorAll('.stat-card, .feature-card, .nav-card');
    animatedElements.forEach(el => {
        el.style.opacity = '0';
        el.style.transform = 'translateY(20px)';
        el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
        observer.observe(el);
    });
});

// Ultra Fast Navigation - Minimal Code
let currentPage = '';
let pageElements = {};

// Page titles
const pageTitles = {
    'home': 'Zeynep Ersöz - Online Personal Trainer',
    'hakkimda': 'Hakkımda - Zeynep Ersöz',
    'sertifikalar': 'Sertifikalar - Zeynep Ersöz',
    'gorevlerim': 'Görevlerim - Zeynep Ersöz',
    'hizmetler': 'Hizmetlerim - Zeynep Ersöz',
    'paketler': 'Paketlerim - Zeynep Ersöz',
    'iletisim': 'İletişim - Zeynep Ersöz',
    'sss': 'SSS - Zeynep Ersöz',
    'bmi': 'BMI Hesaplayıcı - Zeynep Ersöz',
    'body-fat-analysis': 'Vücut Yağ Analizi - Zeynep Ersöz',
    '1rm': '1RM Hesaplayıcı - Zeynep Ersöz',
    'calorie-calculator': 'Kalori Hesaplayıcı - Zeynep Ersöz',
    'water-calculator': 'Su İhtiyacı Hesaplayıcı - Zeynep Ersöz'
};

function initFastNav() {
    // Cache page elements
    const pages = ['home', 'hakkimda', 'sertifikalar', 'gorevlerim', 'hizmetler',
                  'paketler', 'iletisim', 'sss', 'bmi', 'body-fat-analysis',
                  '1rm', 'calorie-calculator', 'water-calculator'];
    
    pages.forEach(page => {
        const element = document.getElementById(`page-${page}`);
        if (element) {
            pageElements[page] = element;
            console.log(`Cached element: page-${page}`);
        } else {
            console.error(`Element not found: page-${page}`);
        }
    });

    console.log('Page elements cached:', Object.keys(pageElements));

    // Set initial page from clean URL
    const path = window.location.pathname;
    const pathParts = path.split('/').filter(p => p);
    
    let initialPage = 'home';
    
    if (pathParts.length === 0 || pathParts[pathParts.length - 1] === 'ogz3') {
        initialPage = 'home';
    } else if (pathParts[pathParts.length - 2] === 'tools') {
        // URL like /tools/bmi
        initialPage = pathParts[pathParts.length - 1];
    } else {
        // URL like /hakkimda
        initialPage = pathParts[pathParts.length - 1];
    }
    
    // Fallback to query parameter if clean URL doesn't work
    if (!pageElements[initialPage]) {
        initialPage = new URLSearchParams(window.location.search).get('page') || 'home';
    }
    
    currentPage = initialPage;
    console.log('Initial page:', currentPage, 'from path:', path);

    // Bind navigation links
    document.addEventListener('click', (e) => {
        const link = e.target.closest('.fast-link');
        if (link) {
            e.preventDefault();
            const targetPage = link.dataset.page;
            console.log('Navigation link clicked:', targetPage);
            showPage(targetPage);
            
            // Close mobile menu
            const navMenu = document.querySelector('.nav-menu');
            if (navMenu) navMenu.classList.remove('active');
        }
    });

    // Browser back/forward
    window.addEventListener('popstate', (e) => {
        const page = e.state?.page || getCurrentPageFromURL();
        console.log('Popstate event:', page);
        showPage(page, false);
    });

    // Ensure initial page is visible
    if (pageElements[currentPage]) {
        // Hide all pages first
        Object.values(pageElements).forEach(element => {
            if (element) {
                element.style.display = 'none';
                element.classList.remove('active');
            }
        });
        // Show current page with animation
        pageElements[currentPage].style.display = 'block';
        requestAnimationFrame(() => {
            pageElements[currentPage].classList.add('active');
        });
        console.log(`Initial page shown: ${currentPage}`);
    }

    // Set initial history state
    if (!window.history.state) {
        window.history.replaceState({ page: currentPage }, '', window.location.pathname);
    }
}

function showPage(page, updateHistory = true) {
    if (!page || page === currentPage) return;
    
    // Check if target page element exists
    if (!pageElements[page]) {
        console.error(`Page element not found: page-${page}`);
        return;
    }

    console.log(`Switching from ${currentPage} to ${page}`);

    // Animate page transition
    const currentPageElement = currentPage && pageElements[currentPage];
    const newPageElement = pageElements[page];

    if (currentPageElement) {
        // Fade out current page
        currentPageElement.classList.remove('active');
        
        setTimeout(() => {
            currentPageElement.style.display = 'none';
            
            // Show and fade in new page
            newPageElement.style.display = 'block';
            
            // Force reflow to ensure display change is applied
            newPageElement.offsetHeight;
            
            // Fade in new page
            requestAnimationFrame(() => {
                newPageElement.classList.add('active');
            });
            
            // Scroll to top after animation starts
            setTimeout(() => {
                window.scrollTo({ top: 0, behavior: 'smooth' });
            }, 50);
            
            console.log(`Animated transition: ${currentPage} -> ${page}`);
        }, 200); // Half of transition duration
    } else {
        // First page load - just show it
        newPageElement.style.display = 'block';
        requestAnimationFrame(() => {
            newPageElement.classList.add('active');
        });
        // Immediate scroll for first load
        window.scrollTo({ top: 0, behavior: 'smooth' });
    }

    // Update title and URL
    document.title = pageTitles[page] || pageTitles.home;
    currentPage = page;

    if (updateHistory) {
        let url;
        
        if (page === 'home') {
            url = './';
        } else if (['bmi', 'body-fat-analysis', '1rm', 'calorie-calculator', 'water-calculator'].includes(page)) {
            url = `tools/${page}`;
        } else {
            url = page;
        }
        
        window.history.pushState({ page }, document.title, url);
    }
}

// Helper function to get current page from URL
function getCurrentPageFromURL() {
    const path = window.location.pathname;
    const pathParts = path.split('/').filter(p => p);
    
    if (pathParts.length === 0 || pathParts[pathParts.length - 1] === 'ogz3') {
        return 'home';
    } else if (pathParts[pathParts.length - 2] === 'tools') {
        return pathParts[pathParts.length - 1];
    } else {
        return pathParts[pathParts.length - 1];
    }
}

// Initialize page
// Loading Screen Control
function hideLoadingScreen() {
    const loadingScreen = document.getElementById('loadingScreen');
    const mainContent = document.getElementById('main-content');
    
    if (loadingScreen) {
        loadingScreen.classList.add('hidden');
        
        // Show main content
        if (mainContent) {
            mainContent.classList.add('loaded');
        }
        
        // Remove loading screen completely after transition
        setTimeout(() => {
            loadingScreen.remove();
        }, 500);
    }
}

function initializePage() {
    initFastNav();
    console.log('Ultra-Fast Navigation loaded');
    
    // Hide loading screen after a minimum time and when everything is loaded
    const minimumLoadTime = 1000; // Minimum 1 second to show loading
    const startTime = performance.now();
    
    // Wait for all content to be fully loaded
    const hideLoading = () => {
        const elapsedTime = performance.now() - startTime;
        const remainingTime = Math.max(0, minimumLoadTime - elapsedTime);
        
        setTimeout(() => {
            hideLoadingScreen();
        }, remainingTime);
    };
    
    // Hide loading when window is fully loaded
    if (document.readyState === 'complete') {
        hideLoading();
    } else {
        window.addEventListener('load', hideLoading);
    }
}

// Call initialization when DOM is ready
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initializePage);
} else {
    initializePage();
}