digital-card/resources/js/app.js

import './bootstrap';
// resources/js/app.js
import '@fortawesome/fontawesome-free/css/all.min.css';


// Countdown date (adjust this date to your desired countdown target)
const countdownDate = new Date('2024-08-17T11:00:00').getTime();

// Update the countdown every second
const countdownElement = document.getElementById('countdown');
const countdownTimer = setInterval(() => {
    // Get the current date and time
    const now = new Date().getTime();
    
    // Calculate the time remaining
    const distance = countdownDate - now;
    
    // Calculate days, hours, minutes, and seconds
    const days = Math.floor(distance / (1000 * 60 * 60 * 24));
    const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((distance % (1000 * 60)) / 1000);
    
    // Format the countdown into a string
    const countdownHTML = `
        <div class="flex flex-col">
            <div class="flex gap-8 justify-center">
                <div class="font-medium text-gray-500">${days}</div>
                <div class="font-medium text-gray-500">:</div>
                <div class="font-medium text-gray-500">${hours.toString().padStart(2, '0')}</div>
                <div class="font-medium text-gray-500">:</div>
                <div class="font-medium text-gray-500">${minutes.toString().padStart(2, '0')}</div>
                <div class="font-medium text-gray-500">:</div>
                <div class="font-medium text-gray-500">${seconds.toString().padStart(2, '0')}</div>
            </div>
            <div class="flex gap-14 justify-center">
                <div class="font-medium text-gray-600">Hari</div>
                <div class="font-medium text-gray-600">Jam</div>
                <div class="font-medium text-gray-600">Minit</div>
                <div class="font-medium text-gray-600">Saat</div>
            </div>
        </div>
    `;
    
    // Display the countdown in the element
    countdownElement.innerHTML = countdownHTML;
    
    // If the countdown is over, clear the timer and display a message
    if (distance < 0) {
        clearInterval(countdownTimer);
        countdownElement.innerHTML = 'Majlis berlangsung';
    }
}, 1000); // Update every second (1000 milliseconds)

$(function() {
    var partLeftPos = 0;
    var partRightPos = 0;
    var isScrolling = false;
    var lastScrollTop = 0;

    function updatePositions() {
        var scrollTop = $(window).scrollTop();
        var distance = scrollTop * 2;
        var left = partLeftPos - distance;
        var right = partRightPos - distance;

        $('.left').css('left', left + "px");
        $('.right').css('right', right + "px");

        // Calculate boundaries
        var leftPartRightEdge = $('.left').offset().left + $('.left').outerWidth();

        // Check if both parts are completely off-screen
        var isLeftOffScreen = leftPartRightEdge <= 0;

        // Toggle visibility and z-index
        if (isLeftOffScreen && left < 0) {
            $('.parent').removeClass('z-30');
        } else {
            $('.parent').addClass('z-30');
        }
    }

    // Initial positions update
    updatePositions();

    // Debounce function for scroll events
    function debounce(func, delay) {
        var timeout;
        return function() {
            var context = this;
            var args = arguments;
            var later = function() {
                timeout = null;
                func.apply(context, args);
            };
            clearTimeout(timeout);
            timeout = setTimeout(later, delay);
        };
    }

    // Update positions on scroll using requestAnimationFrame for smoother animation
    function scrollHandler() {
        if (!isScrolling) {
            window.requestAnimationFrame(function() {
                updatePositions();
                isScrolling = false;
            });
        }
        isScrolling = true;
    }

    // Listen to scroll events and debounce them for better performance
    $(window).scroll(debounce(scrollHandler, 20));

    // Handle window resize to recalculate positions if needed
    $(window).resize(function() {
        updatePositions();
    });
});


document.addEventListener('click', function () {
    setTimeout(function () {
        document.getElementById('petalOverlay').style.display = 'block';
    }, 1000); // Delay of 1 second (1000 milliseconds)
});

document.addEventListener('DOMContentLoaded', function() {
    var audioElement = document.getElementById('player');
    var hasPlayed = false; // To ensure audio only plays once upon clicking and scrolling
    var scrollCount = 0;
    var maxScrolls = 8;
    var scrollInterval = 200; // Time in milliseconds between each scroll
    var scrollAmount = window.innerHeight / 6; // Amount to scroll per interval

    function playAudio() {
        if (!hasPlayed) {
            console.log('play')
            var playPromise = audioElement.play();

            if (playPromise !== undefined) {
                playPromise.then(function() {
                    // Automatic playback started!
                    hasPlayed = true; // Prevent further attempts to play
                }).catch(function(error) {
                    // Automatic playback failed.
                    console.log('Autoplay failed: ' + error);
                });
            }
        }
    }

    function smoothScroll() {
        if (!hasPlayed) {
            playAudio();
            scrollCount++;
            if (scrollCount >= maxScrolls) {
                playAudio();
            } else {
                var start = window.pageYOffset;
                var target = start + scrollAmount;
                 // Set duration based on screen size
                var screenWidth = window.innerWidth;
                var duration;
                if (screenWidth < 600) {
                    duration = 5000; // Smaller screen
                } else if (screenWidth < 1200) {
                    duration = 12000; // Medium screen
                } else {
                    duration = 15000; // Larger screen
                }
                var startTime = null;

                function scrollStep(timestamp) {
                    if (!startTime) startTime = timestamp;
                    var progress = timestamp - startTime;
                    var currentPosition = start + ((target - start) * (progress / duration));
                    window.scrollTo(0, currentPosition);
                    if (progress < duration) {
                        requestAnimationFrame(scrollStep);
                    } else {
                        setTimeout(smoothScroll, scrollInterval); // Continues scrolling after a delay
                    }
                }

                requestAnimationFrame(scrollStep);
            }
        }
    }

    function playOnly() {
        if (!hasPlayed) {
            playAudio();
            scrollCount++;
            if (scrollCount >= maxScrolls) {
                playAudio();
            } else {
                setTimeout(playOnly, scrollInterval);
            }
        }
    }

    function handleInteraction() {
        document.body.classList.remove('no-scroll'); // Enable scrolling
        setTimeout(smoothScroll, scrollInterval); // Start smooth scrolling after initial delay
    }

    // Listen for click or touch event to start auto-scrolling
    window.addEventListener('click', handleInteraction);

    window.addEventListener('scroll', function() {
        if (window.pageYOffset === 0) {
            audioElement.pause();
            document.getElementById('petalOverlay').style.display = 'none';
            hasPlayed = false; // Reset to allow replay
            document.body.classList.add('no-scroll');
        }
    });

     // Intersection Observer for fading in elements
    const observerOptions = {
        root: null,
        rootMargin: '0px',
        threshold: 0.1
    };

    const observer = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('fade-in');
                observer.unobserve(entry.target);
            }
        });
    }, observerOptions);

    document.querySelectorAll('.fade-element').forEach(element => {
        observer.observe(element);
    });
});