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 partLeftPos = 0;
    var partRightPos = 0;
    var audioElement = document.getElementById('player');
    var hasPlayed = false;
    var scrollCount = 0;
    var maxScrolls = 8;
    var scrollInterval = 200;
    var scrollAmount = window.innerHeight / 6;

    // Function to handle smooth scrolling
    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; // 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 to play audio (if not already played)
    function playAudio() {
        if (!hasPlayed) {
            var playPromise = audioElement.play();

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

    // jQuery scroll event handling
    $(window).scroll(function() {
        var distance = $(this).scrollTop() * 2;
        var left = partLeftPos - distance;
        var right = partRightPos - 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');
        }
    });

    // Initially check visibility on page load
    $(window).trigger('scroll');

    // Event listener for click to show overlay after a delay
    document.addEventListener('click', function() {
        setTimeout(function() {
            document.getElementById('petalOverlay').style.display = 'block';
        }, 1000); // Delay of 1 second (1000 milliseconds)
    });

    // Event listener for scroll to reset audio and overlay if scrolled to top
    window.addEventListener('scroll', function() {
        if (window.pageYOffset === 0) {
            audioElement.pause();
            document.getElementById('petalOverlay').style.display = 'none';
            hasPlayed = false;
            document.body.classList.add('no-scroll');
        }
    });
});


// $(function() {
//     var partLeftPos = 0;
//     var partRightPos = 0;
    
//     $(window).scroll(function(event) {
//         var distance = $(this).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']);
//         }
//     });

//     // Initially check visibility on page load
//     $(window).trigger('scroll');

    
// });

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