MyTelmi.html/js/script.js

$(document).ready(function() {
    // Watch slider animation
    let currentSlide = 0;
    const slides = $('.slide');
    const totalSlides = slides.length;
    
    function showSlide(n) {
        slides.removeClass('active');
        slides.eq(n).addClass('active');
    }
    
    function nextSlide() {
        currentSlide = (currentSlide + 1) % totalSlides;
        showSlide(currentSlide);
    }
    
    // Start auto-rotation every 3 seconds
    setInterval(nextSlide, 3000);
    
    // Initialize first slide
    showSlide(0);
});
// Mobile menu toggle
const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
const navLinks = document.querySelector('.nav-links');
mobileMenuBtn.addEventListener('click', () => {
    navLinks.classList.toggle('active');
});
// Close mobile menu when clicking on a link
document.querySelectorAll('.nav-link').forEach(link => {
    link.addEventListener('click', () => {
        navLinks.classList.remove('active');
    });
});
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function(e) {
        e.preventDefault();
        const targetId = this.getAttribute('href');
        if (targetId === '#') return;
        const targetElement = document.querySelector(targetId);
        if (targetElement) {
            window.scrollTo({
                top: targetElement.offsetTop - 90,
                behavior: 'smooth'
            });
        }
    });
});
// Scroll functionality for benefits cards
const scrollLeftBtn = document.querySelector('.scroll-btn.left');
const scrollRightBtn = document.querySelector('.scroll-btn.right');
const cardsWrapper = document.querySelector('.cards-wrapper');
scrollLeftBtn.addEventListener('click', () => {
    cardsWrapper.scrollBy({ left: -300, behavior: 'smooth' });
});
scrollRightBtn.addEventListener('click', () => {
    cardsWrapper.scrollBy({ left: 300, behavior: 'smooth' });
});
// Scroll functionality for reviews
const reviewLeftBtn = document.querySelector('.review-scroll-btn.left');
const reviewRightBtn = document.querySelector('.review-scroll-btn.right');
const reviewsWrapper = document.querySelector('.reviews-wrapper');
reviewLeftBtn.addEventListener('click', () => {
    reviewsWrapper.scrollBy({ left: -350, behavior: 'smooth' });
});
reviewRightBtn.addEventListener('click', () => {
    reviewsWrapper.scrollBy({ left: 350, behavior: 'smooth' });
});
// Auto-hide scroll buttons when at edge
function checkScrollPosition() {
    // For benefits cards
    if (cardsWrapper.scrollLeft <= 10) {
        scrollLeftBtn.style.opacity = '0.5';
        scrollLeftBtn.style.cursor = 'default';
    } else {
        scrollLeftBtn.style.opacity = '1';
        scrollLeftBtn.style.cursor = 'pointer';
    }
    if (cardsWrapper.scrollLeft >= cardsWrapper.scrollWidth - cardsWrapper.clientWidth - 10) {
        scrollRightBtn.style.opacity = '0.5';
        scrollRightBtn.style.cursor = 'default';
    } else {
        scrollRightBtn.style.opacity = '1';
        scrollRightBtn.style.cursor = 'pointer';
    }
    // For reviews
    if (reviewsWrapper.scrollLeft <= 10) {
        reviewLeftBtn.style.opacity = '0.5';
        reviewLeftBtn.style.cursor = 'default';
    } else {
        reviewLeftBtn.style.opacity = '1';
        reviewLeftBtn.style.cursor = 'pointer';
    }
    if (reviewsWrapper.scrollLeft >= reviewsWrapper.scrollWidth - reviewsWrapper.clientWidth - 10) {
        reviewRightBtn.style.opacity = '0.5';
        reviewRightBtn.style.cursor = 'default';
    } else {
        reviewRightBtn.style.opacity = '1';
        reviewRightBtn.style.cursor = 'pointer';
    }
}
cardsWrapper.addEventListener('scroll', checkScrollPosition);
reviewsWrapper.addEventListener('scroll', checkScrollPosition);
window.addEventListener('resize', checkScrollPosition);
// Initial check
checkScrollPosition();

// Watch slider functionality
$(document).ready(function() {
    const slider = $('.cta-image');
    const images = [
        'img/watch_slide_6.png',
        'img/watch_slide_7.png',
        'img/watch_slide_8.png',
        'img/watch_slide_9.png',
        'img/watch_slide_10.png',
        'img/watch_slide_11.png',
        'img/watch_slide_12.png',
        'img/watch_slide_13.png',
        'img/watch_slide_14.png',
        'img/watch_slide_15.png'
    ];
    
    // Replace img with slider container
    slider.html('<div class="slider-container"></div>');
    const container = $('.slider-container');
    
    // Add all images to slider (hidden except first)
    images.forEach((img, index) => {
        container.append(`<img src="${img}" class="slide ${index === 0 ? 'active' : ''}" alt="Telmi Watch">`);
    });
    
    // Auto-rotate slides
    let currentIndex = 0;
    setInterval(() => {
        currentIndex = (currentIndex + 1) % images.length;
        $('.slide.active').fadeOut(500, function() {
            $(this).removeClass('active');
            $(`.slide:eq(${currentIndex})`).fadeIn(500).addClass('active');
        });
    }, 3000);

    // Modal functionality
    let currentModalIndex = 0;
    
    $('.slide').click(function() {
        currentModalIndex = $(this).index('.slide');
        updateModalImage();
        $('.modal-overlay').addClass('active');
    });

    function updateModalImage() {
        const imgSrc = images[currentModalIndex];
        $('.modal-image').attr('src', imgSrc);
    }

    $('.modal-nav.prev').click(function(e) {
        e.stopPropagation();
        currentModalIndex = (currentModalIndex - 1 + images.length) % images.length;
        updateModalImage();
    });

    $('.modal-nav.next').click(function(e) {
        e.stopPropagation();
        currentModalIndex = (currentModalIndex + 1) % images.length;
        updateModalImage();
    });

    $('.close-modal').click(function() {
        $('.modal-overlay').removeClass('active');
    });

    // Close modal when clicking outside image
    $(document).click(function(e) {
        if ($(e.target).hasClass('modal-overlay')) {
            $('.modal-overlay').removeClass('active');
        }
    });

    // Close modal with ESC key
    $(document).keyup(function(e) {
        if (e.key === "Escape") {
            $('.modal-overlay').removeClass('active');
        }
    });
});