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)

$(document).ready(function() {
    var audioElement = document.getElementById('player');
    var hasPlayed = false;
    var scrollCount = 0;
    var maxScrolls = 8;
    var scrollInterval = 200;
    var scrollAmount = window.innerHeight / 6;

    function playAudio() {
        if (!hasPlayed) {
            var playPromise = audioElement.play();
            if (playPromise !== undefined) {
                playPromise.then(function() {
                    hasPlayed = true;
                }).catch(function(error) {
                    console.log('Autoplay failed: ' + error);
                });
            }
        }
    }

    function smoothScroll() {
        if (!hasPlayed) {
            playAudio();
            scrollCount++;
            if (scrollCount >= maxScrolls) {
                playAudio();
            } else {
                var start = window.pageYOffset;
                var target = start + scrollAmount;
                var screenWidth = window.innerWidth;
                var duration;
                if (screenWidth < 600) {
                    duration = 5000;
                } else if (screenWidth < 1200) {
                    duration = 12000;
                } else {
                    duration = 15000;
                }
                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);
                    }
                }

                requestAnimationFrame(scrollStep);
            }
        }
    }

    function handleInteraction() {
        document.body.classList.remove('no-scroll');
        setTimeout(smoothScroll, scrollInterval);
    }

    window.addEventListener('click', function() {
        setTimeout(function() {
            document.getElementById('petalOverlay').style.display = 'block';
        }, 1000);
    });

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

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

    $(window).scroll(function(event) {
        var distance = $(this).scrollTop() * 2;
        var left = 0 - distance;
        var right = 0 - distance;
        
        $('.left').css('left', left + "px");
        $('.right').css('right', right + "px");

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

        var isLeftOffScreen = leftPartRightEdge <= 0;

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

    $(window).trigger('scroll');
});