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 scrollTimeout;
    
    function debounceScroll() {
        var distance = $(window).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');
        }
    }

    $(window).scroll(function(event) {
        clearTimeout(scrollTimeout);
        scrollTimeout = setTimeout(debounceScroll, 100); // Debounce scroll event
    });

    // Initially check visibility on page load
    debounceScroll();

    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 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);
        });
    });
});