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;
    
    $(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('DOMContentLoaded', function() {
        const observer = new IntersectionObserver(entries => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('animate-fadeUp');
                    entry.target.classList.remove('opacity-0');
                }
            });
        }, {
            threshold: 0.1
        });

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