fix lag and ensure smooth scrolling, add kehadiran button

.env.example

@@ -11,7 +11,7 @@ LOG_LEVEL=debug
 DB_CONNECTION=mysql
 DB_HOST=127.0.0.1
 DB_PORT=3306
-DB_DATABASE=laravel
+DB_DATABASE=digitalcard
 DB_USERNAME=root
 DB_PASSWORD=
 

resources/css/app.css

@@ -14,7 +14,9 @@
 }
 
 @media (prefers-color-scheme: dark) {
-    html, body {
+
+    html,
+    body {
         background-color: #ffffff;
         color: #000000;
     }
@@ -23,6 +25,7 @@
     .dark\:bg-gray-900 {
         background-color: #ffffff !important;
     }
+
     .dark\:text-white {
         color: #000000 !important;
     }
@@ -36,30 +39,119 @@
 html {
     scroll-behavior: smooth;
 }
+
 body.no-scroll {
     overflow: hidden;
 }
-.fade-element {
-    opacity: 0;
-    transform: translateY(20px);
-    transition: opacity 3s ease-in-out, transform 3s ease-in-out;
-}
+
 .fade-in {
     opacity: 1;
 }
+
 .petal-overlay {
-    position: fixed; /* Fixes the position to the viewport */
+    position: fixed;
+    /* Fixes the position to the viewport */
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
-    pointer-events: none; /* Allows interactions through the overlay */
-    z-index: 9999; /* Ensures it is on top of other elements */
-    opacity: 0.3; /* Set the opacity to a lower value */
-    display: none; /* Initially hidden */
+    pointer-events: none;
+    /* Allows interactions through the overlay */
+    z-index: 1;
+    /* Ensures it is on top of other elements */
+    opacity: 0.3;
+    /* Set the opacity to a lower value */
+    display: block;
 }
+
 .petal-overlay img {
     width: 100%;
     height: 100%;
-    object-fit: cover; /* Ensures the image covers the entire container */
-}
+    object-fit: cover;
+    /* Ensures the image covers the entire container */
+}
+
+
+.loader {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    max-width: 6rem;
+    margin-top: 3rem;
+    margin-bottom: 3rem;
+}
+
+.loader:before,
+.loader:after {
+    content: "";
+    position: absolute;
+    border-radius: 50%;
+    animation: pulsOut 1.8s ease-in-out infinite;
+    filter: drop-shadow(0 0 1rem rgba(255, 255, 255, 0.75));
+}
+
+.loader:before {
+    width: 100%;
+    padding-bottom: 100%;
+    box-shadow: inset 0 0 0 1rem #fff;
+    animation-name: pulsIn;
+}
+
+.loader:after {
+    width: calc(100% - 2rem);
+    padding-bottom: calc(100% - 2rem);
+    box-shadow: 0 0 0 0 #fff;
+}
+
+.part{
+    transition: all 0.1s ease-in-out;
+}
+
+@keyframes pulsIn {
+    0% {
+        box-shadow: inset 0 0 0 1rem #fff;
+        opacity: 1;
+    }
+
+    50%,
+    100% {
+        box-shadow: inset 0 0 0 0 #fff;
+        opacity: 0;
+    }
+}
+
+@keyframes pulsOut {
+
+    0%,
+    50% {
+        box-shadow: 0 0 0 0 #fff;
+        opacity: 0;
+    }
+
+    100% {
+        box-shadow: 0 0 0 1rem #fff;
+        opacity: 1;
+    }
+}
+
+@keyframes to-right {
+    from {
+       transform: translateX(0)
+    }
+    to {
+        transform: translateX(100%)
+     }
+  }
+
+
+@media (prefers-reduced-motion: no-preference) {
+    @supports (animation-timeline: scroll()) {
+      #right-cover {
+        animation: to-right linear both;
+        animation-timeline: scroll();
+        animation-range: contain;
+      }
+    }
+  }

resources/js/app.js

@@ -1,27 +1,27 @@
 import './bootstrap';
-// resources/js/app.js
+//import 'resources/js/app.js';
 import '@fortawesome/fontawesome-free/css/all.min.css';
 
 
-// Countdown date (adjust this date to your desired countdown target)
+//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
+//Update the countdown every second
 const countdownElement = document.getElementById('countdown');
 const countdownTimer = setInterval(() => {
-    // Get the current date and time
+    //Get the current date and time
     const now = new Date().getTime();
-    
-    // Calculate the time remaining
+
+    //Calculate the time remaining
     const distance = countdownDate - now;
-    
-    // Calculate days, hours, minutes, and seconds
+
+    //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
+
+    //Format the countdown into a string
     const countdownHTML = `
         <div class="flex flex-col">
             <div class="flex gap-8 justify-center">
@@ -41,18 +41,75 @@ const countdownTimer = setInterval(() => {
             </div>
         </div>
     `;
-    
-    // Display the countdown in the element
+
+    //Display the countdown in the element
     countdownElement.innerHTML = countdownHTML;
-    
-    // If the countdown is over, clear the timer and display a message
+
+    //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() {
+document.addEventListener('DOMContentLoaded', function () {
+    imageLoading()
+    scrollOpenCover()
+
+    reset() // reset everrything to ensure smooth
+    sessionStorage.setItem("initial-load", "true"); // will be used by click event
+
+});
+
+
+document.addEventListener('click', function () {
+
+    let initLoad = sessionStorage.getItem("initial-load")
+
+
+    // parts is intro cover
+    let parts = document.getElementsByClassName("part");
+    for (let part of parts) {
+        part.classList.add("shadow-lg")
+    }
+
+    let body = document.querySelector("body");
+    body.classList.remove("no-scroll");
+
+    // the intro - only done once and
+    if (initLoad == "true") {
+        playMusic();
+        sessionStorage.removeItem("initial-load")
+        // delay timer to have that umpph feels my G
+        setTimeout(() => {
+            // smooth scroll only happen for first render
+            smoothScrollBy(100, 3500);
+        }, 500)
+    }
+
+});
+
+function smoothScrollBy(distance, duration) {
+    const start = window.pageYOffset;
+    const startTime = performance.now();
+
+    function scroll() {
+        const now = performance.now();
+        const time = Math.min(1, (now - startTime) / duration);
+        const timeFunction = time * (2 - time); // Ease out effect
+        window.scrollTo(0, start + timeFunction * distance);
+
+        if (time < 1) {
+            requestAnimationFrame(scroll);
+        }
+    }
+
+    requestAnimationFrame(scroll);
+}
+
+
+// enable open close cover
+function scrollOpenCover() {
     var partLeftPos = 0;
     var partRightPos = 0;
 
@@ -64,13 +121,13 @@ $(function() {
         $('.left').css('left', left + "px");
         $('.right').css('right', right + "px");
 
-        // Calculate boundaries
+        //Calculate boundaries
         var leftPartRightEdge = $('.left').offset().left + $('.left').outerWidth();
 
-        // Check if both parts are completely off-screen
+        //Check if both parts are completely off-screen
         var isLeftOffScreen = leftPartRightEdge <= 0;
 
-        // Toggle visibility and z-index
+        //Toggle visibility and z-index
         if (isLeftOffScreen && left < 0) {
             $('.parent').removeClass('z-30');
         } else {
@@ -78,138 +135,83 @@ $(function() {
         }
     }
 
-    // Initial positions update
+    //Initial positions update
     updatePositions();
 
-    // Listen to scroll events using requestAnimationFrame for smooth animation
+    //Listen to scroll events using requestAnimationFrame for smooth animation
     var ticking = false;
-    $(window).scroll(function() {
+    $(window).scroll(function () {
         if (!ticking) {
-            window.requestAnimationFrame(function() {
+            window.requestAnimationFrame(function () {
                 updatePositions();
                 ticking = false;
             });
         }
         ticking = true;
     });
-});
+}
 
+// to ensure all images is loaded before starting animation and gimmick
+function imageLoading() {
+    const images = document.querySelectorAll("img");
+    let loadedCount = 0;
+    const totalImages = images.length;
 
-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);
-                });
-            }
+    images.forEach(image => {
+        if (image.complete) {
+            loadedCount++;
+        } else {
+            image.addEventListener("load", () => {
+                loadedCount++;
+                checkAllImagesLoaded();
+            });
+            image.addEventListener("error", () => {
+                loadedCount++;
+                checkAllImagesLoaded();
+            });
         }
-    }
+    });
 
-    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 = 8000; // 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 checkAllImagesLoaded() {
+        if (loadedCount === totalImages) {
+            let loading = document.getElementById("loading");
+            loading.remove();
+            // parts is intro cover
+            let parts = document.getElementsByClassName("part");
+            for (let part of parts) {
+                part.classList.remove("hidden")
             }
-        }
-    }
 
-    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
-    }
+function reset() {
+    // reset to top
+    let body = document.querySelector("body");
+    body.classList.remove("no-scroll");
+    window.scrollTo(0, 0);
 
-    // Listen for click or touch event to start auto-scrolling
-    window.addEventListener('click', handleInteraction);
+    setTimeout(() => {
+        body.classList.add("no-scroll");
+    }, 500)
+}
 
-    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');
+function playMusic(){
+    var audioElement = document.getElementById('player');
+    var hasPlayed = false;
+    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);
+            });
         }
-    });
-
-     // 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);
-    });
-});
+    }
+}

resources/js/petals.js

@@ -0,0 +1,43 @@
+(function () {
+    var falling = true;
+
+    TweenLite.set("#container", { perspective: 600 })
+    //TweenLite.set("img",{xPercent:"-50%",yPercent:"-50%"})
+
+    var total = 10;
+    var container = document.getElementById("container"), w = window.innerWidth, h = window.innerHeight;
+
+    for (let i = 0; i < total; i++) {
+        var Div = document.createElement('div');
+        var Div2 = document.createElement('div');
+        var Div3 = document.createElement('div');
+        TweenLite.set(Div, { attr: { class: 'dot' }, x: R(0, w), y: R(-200, -150), z: R(-200, 200), xPercent: "-50%", yPercent: "-50%" });
+        TweenLite.set(Div2, { attr: { class: 'dot2' }, x: R(0, w), y: R(-200, -150), z: R(-200, 200), xPercent: "-50%", yPercent: "-50%" });
+        TweenLite.set(Div3, { attr: { class: 'dot3' }, x: R(0, w), y: R(-200, -150), z: R(-200, 200), xPercent: "-50%", yPercent: "-50%" });
+        container.appendChild(Div);
+        container.appendChild(Div2);
+        container.appendChild(Div3);
+        animm(Div);
+        animm2(Div2);
+        animm3(Div3);
+    }
+
+    function animm(elm) {
+        TweenMax.to(elm, R(6, 15), { y: h + 100, ease: Linear.easeNone, repeat: -1, delay: -15 });
+        TweenMax.to(elm, R(4, 8), { x: '+=100', rotationZ: R(0, 180), repeat: -1, yoyo: true, ease: Sine.easeInOut });
+        TweenMax.to(elm, R(2, 8), { repeat: -1, yoyo: true, ease: Sine.easeInOut, delay: -5 });
+    };
+    function animm2(elm) {
+        TweenMax.to(elm, R(6, 15), { y: h + 100, ease: Linear.easeNone, repeat: -1, delay: -25 });
+        TweenMax.to(elm, R(4, 8), { x: '+=100', rotationZ: R(0, 180), repeat: -1, yoyo: true, ease: Sine.easeInOut });
+        TweenMax.to(elm, R(2, 8), { repeat: -1, yoyo: true, ease: Sine.easeInOut, delay: -5 });
+    };
+    function animm3(elm) {
+        TweenMax.to(elm, R(6, 15), { y: h + 100, ease: Linear.easeNone, repeat: -1, delay: -5 });
+        TweenMax.to(elm, R(4, 8), { x: '+=100', rotationZ: R(0, 180), repeat: -1, yoyo: true, ease: Sine.easeInOut });
+        TweenMax.to(elm, R(2, 8), { repeat: -1, yoyo: true, ease: Sine.easeInOut, delay: -5 });
+    };
+
+    function R(min, max) { return min + Math.random() * (max - min) };
+
+})();

resources/views/components/countdown.blade.php

@@ -1,6 +1,6 @@
-<div class="flex flex-col gap-5 w-4/5 py-3 fade-element">
+<div class="flex flex-col gap-5 w-4/5 py-3">
     <hr class="border-t-1 border-gray-300 mt-3 mb-5 w-4/5 self-center">
     <h1 class="font-medium text-gray-600 self-center">Majlis Bermula</h1>
     <div class="flex justify-center" id="countdown"></div>
     <hr class="border-t-1 border-gray-300 mt-5 mb-3 w-4/5 self-center">
-</div>
+</div>

resources/views/components/event-info.blade.php

@@ -1,43 +1,43 @@
 <div class="flex flex-col gap-5 w-4/5 mt-10">
-    <div class="flex justify-center fade-element">
+    <div class="flex justify-center ">
         <img src="{{ asset('assets/bismillah.png') }}" alt="Logo">
     </div>
-    <div class="text-center fade-element">
+    <div class="text-center ">
         <p class="font-medium text-sm text-gray-500 pb-3">Dengan penuh rasa kesyukuran, kami</p>
         <p class="font-medium text-gray-600">DATO' HAJI AMIRUDDIN BIN MOHD SAID</p>
         <p class="font-medium text-gray-600">&</p>
         <p class="font-medium text-gray-600">DATIN HAJAH NOR ALINA BINTI ALIAS</p>
     </div>
-    <div class="text-center fade-element">
+    <div class="text-center ">
         <p class="font-medium text-sm text-gray-500">ingin mempersilakan</p>
         <p class="font-medium text-sm text-gray-500">Tan Sri/Dato' Sri/Datin Sri/Dato'/</p>
         <p class="font-medium text-sm text-gray-500">Datin/Tuan/Puan/Encik/Cik</p>
     </div>
-    <div class="text-center fade-element">
+    <div class="text-center ">
         <p class="font-medium text-sm text-gray-500 pb-3">Ke Majlis Resepsi Perkahwinan Putera Kami</p>
         <p class="font-medium text-gray-600">ALIFF BIN DATO' HAJI AMIRUDDIN</p>
         <p class="font-medium text-gray-600">&</p>
         <p class="font-medium text-gray-600">ANIZA AYUNA BINTI CHE JANI</p>
     </div>
-    <hr class="border-t-1 border-gray-300 my-5 w-4/5 self-center fade-element">
-    <div class="text-center fade-element">
+    <hr class="border-t-1 border-gray-300 my-5 w-4/5 self-center ">
+    <div class="text-center ">
         <p class="font-medium text-gray-600 pb-2">Tarikh</p>
         <p class="font-medium text-sm text-gray-500">Sabtu, 17 Ogos 2024</p>
         <p class="font-medium text-sm text-gray-500">(12 Safar 1446H)</p>
     </div>
-    <div class="text-center fade-element">
+    <div class="text-center ">
         <p class="font-medium text-gray-600 pb-2">Masa</p>
         <p class="font-medium text-sm text-gray-500">11.00 Pagi - 4.00 Petang</p>
     </div>
-    <div class="text-center fade-element">
+    <div class="text-center ">
         <p class="font-medium text-gray-600 pb-2">Tempat</p>
         <p class="font-medium text-sm text-gray-500">Dewan Jubli Perak</p>
         <p class="font-medium text-sm text-gray-500">Sultan Haji Ahmad Shah,</p>
         <p class="font-medium text-sm text-gray-500">Jalan Teluk Sisek,</p>
         <p class="font-medium text-sm text-gray-500">Kuantan, Pahang.</p>
     </div>
-    <hr class="border-t-1 border-gray-300 my-5 w-4/5 self-center fade-element">
-    <div class="text-center fade-element">
+    <hr class="border-t-1 border-gray-300 my-5 w-4/5 self-center ">
+    <div class="text-center ">
         <p class="font-medium text-gray-600 pb-2">Aturcara Majlis</p>
         <p class="font-medium text-sm text-gray-600">11.00 Pagi :</p>
         <p class="font-medium text-sm text-gray-500 pb-4">Majlis Bermula</p>
@@ -58,4 +58,4 @@
             <span>Waze</span>
         </a>
     </div> --}}
-</div>
+</div>

resources/views/components/front-cover.blade.php

@@ -1,22 +1,22 @@
-<div class="part left fixed left-0 w-1/2 h-screen bg-babyblue shadow-lg">
+<div class="part left fixed left-0 w-1/2 h-screen bg-babyblue hidden">
     <div class="flex flex-col justify-center h-full gap-10">
-        <div class="flex justify-end items-center">
-            <img src="{{ asset('assets/logo-left.png') }}" alt="Logo" class="logo-img">
+        <div class="flex justify-end items-center animate__animated animate__fadeIn animate__delay-1s">
+            <img src="{{ asset('assets/logo-left.webp') }}" alt="Logo" class="logo-img">
         </div>
-        <div class="flex justify-end items-center">
-            <img src="{{ asset('assets/name-left.png') }}" alt="Name Left" class="logo-img">
+        <div class="flex justify-end items-center animate__animated animate__fadeIn animate__delay-1s">
+            <img src="{{ asset('assets/name-left.webp') }}" alt="Name Left" class="logo-img">
         </div>
-        <img src="{{asset('assets/flower-left.png')}}" alt="" class="absolute -left-2/4 top-72 h-96 w-96">
+        <img src="{{asset('assets/flower-left.webp')}}" alt="" class="absolute -left-2/4 top-72 h-96 w-96 animate__animated animate__fadeIn animate__delay-2s">
     </div>
 </div>
-<div class="part right fixed right-0 w-1/2 h-screen bg-babyblue shadow-lg">
+<div class="part right fixed right-0 w-1/2 h-screen bg-babyblue hidden">
     <div class="flex flex-col justify-center h-full gap-10">
-        <div class="flex justify-start items-center">
-            <img src="{{ asset('assets/logo-right.png') }}" alt="Logo" class="logo-img">
+        <div class="flex justify-start items-center animate__animated animate__fadeIn animate__delay-1s">
+            <img src="{{ asset('assets/logo-right.webp') }}" alt="Logo" class="logo-img">
         </div>
-        <div class="flex justify-start items-center">
-            <img src="{{ asset('assets/name-right.png') }}" alt="Name Right" class="logo-img">
+        <div class="flex justify-start items-center animate__animated animate__fadeIn animate__delay-1s">
+            <img src="{{ asset('assets/name-right.webp') }}" alt="Name Right" class="logo-img">
         </div>
-        <img src="{{asset('assets/flower-right.png')}}" alt="" class="absolute -right-2/4 top-32 h-96 w-96">
+        <img src="{{asset('assets/flower-right.webp')}}" alt="" class="absolute -right-2/4 top-32 h-96 w-96 animate__animated animate__fadeIn animate__delay-2s">
     </div>
-</div>
+</div>

resources/views/components/guestbook.blade.php

@@ -1,15 +1,22 @@
 <div class="flex flex-col gap-5 w-4/5">
-    <div class="text-center pb-3 fade-element">
+    <div class="text-center pb-3 ">
         <p class="font-medium text-gray-600 pb-3">Ruangan Ucapan</p>
         <p class="font-medium text-sm text-gray-600 italic">Ucapan kepada kedua mempelai</p>
         <p class="font-medium text-sm text-gray-600 italic">-Nama-</p>
     </div>
-    <div class="text-center pb-2 fade-element">
+    <div class="text-center pb-2 ">
         <a onclick="guestbook.showModal()" class="rounded-full border-solid border-2 border-navbarcolor py-1 px-3 font-medium text-gray-600">
             <i class="fa-solid fa-pen-fancy"></i>
             <span>Ucapan</span>
         </a>
+
     </div>
-    <hr class="border-t-1 border-gray-300 my-5 w-4/5 self-center fade-element">
+    <div class="text-center pb-2 ">
+        <a onclick="rsvp.showModal()" class="rounded-full border-solid border-2 border-navbarcolor py-1 px-3 font-medium text-gray-600">
+            <i class="fa-solid fa-clipboard"></i>
+            <span>Sahkan Kehadiran</span>
+        </a>
+    </div>
+    <hr class="border-t-1 border-gray-300 my-5 w-4/5 self-center ">
     @include('modals.guestbook-modal')
-</div>
+</div>

resources/views/components/main-event.blade.php

@@ -1,8 +1,8 @@
 <div class="flex flex-col gap-5 w-4/5 mt-44 mb-40 text-navbarcolor">
-    <div class="flex justify-center fade-element">
+    <div class="flex justify-center ">
         <p class="font-semibold text-sm">WALIMATULURUS</p>
     </div>
-    <div class="flex flex-col gap-8 pt-8 pb-8 justify-center fade-element">
+    <div class="flex flex-col gap-8 pt-8 pb-8 justify-center ">
         <div class="flex justify-center">
             <p class="font-tan-pearl font-semibold text-5xl"><span class="text-6xl">A</span>liff</p>
         </div>
@@ -13,7 +13,7 @@
             <p class="font-tan-pearl font-semibold text-5xl"><span class="text-6xl">A</span>yuna</p>
         </div>
     </div>
-    <div class="flex flex-col justify-center fade-element">
+    <div class="flex flex-col justify-center ">
         <div class="flex justify-center">
             <p class="font-bold text-base">SABTU</p>
         </div>
@@ -21,7 +21,7 @@
             <p class="font-bold text-base">17 OGOS 2024</p>
         </div>
     </div>
-    <div class="flex flex-col justify-center fade-element">
+    <div class="flex flex-col justify-center ">
         <div class="flex justify-center">
             <p class="font-semibold text-sm">DEWAN JUBLI PERAK</p>
         </div>
@@ -29,4 +29,4 @@
             <p class="font-semibold text-sm">SULTAN HAJI AHMAD SHAH</p>
         </div>
     </div>
-</div>
+</div>

resources/views/components/prayer.blade.php

@@ -1,8 +1,8 @@
 <div class="flex flex-col gap-5 w-4/5">
-    <div class="flex justify-center fade-element">
+    <div class="flex justify-center ">
         <img src="{{ asset('assets/bismillah.png') }}" alt="Logo">
     </div>
-    <div class="text-center fade-element">
+    <div class="text-center ">
         <p class="font-medium text-sm text-gray-500 pb-1">Ya Allah, Ya Tuhan kami. Kami memohon restuMu</p>
         <p class="font-medium text-sm text-gray-500 pb-1">berkatilah majlis kami ini dengan keberkatan dari</p>
         <p class="font-medium text-sm text-gray-500 pb-1">permulaan hingga pengakhirannya. Sesungguhnya</p>
@@ -11,4 +11,4 @@
         <p class="font-medium text-sm text-gray-500 pb-1">hidayahMu di dunia dan di akhirat kelak.</p>
         <p class="font-medium text-sm text-gray-500 pb-1">Amin Ya Rabbal Alamin.</p>
     </div>
-</div>
+</div>

resources/views/digital-card.blade.php

@@ -10,23 +10,31 @@
         <link rel="preconnect" href="https://fonts.bunny.net">
         <link href="https://fonts.bunny.net/css?family=figtree:400,600&display=swap" rel="stylesheet" />
         <link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css" rel="stylesheet" type="text/css" />
+
+
         <meta name="csrf-token" content="{{ csrf_token() }}">
 
         @vite(['resources/css/app.css','resources/js/app.js'])
     </head>
-    <body class="antialiased font-serif no-scroll">
+    <body class="antialiased font-serif relative" style="overflow-x: hidden">
+
+        <!-- Gimmicks -->
+        <div id="loading" class="fixed flex bg-cyan-200" style="top:0;left:0;z-index:9999;width:100%;height:100vh">
+            <span class="loader mx-auto my-auto"></span>
+        </div>
         <div role="alert" class="alert alert-info hidden z-40 fixed w-1/2 top-3 right-3">
             <span></span>
         </div>
-        <div class="petal-overlay" id="petalOverlay">
-            <img src="{{ asset('assets/petal.gif') }}" alt="Falling Petals">
-        </div>
         <audio id="player" loop>
             <source src="{{ asset('assets/background-musicv2.mp3') }}" type="audio/mp3">
         </audio>
-        <div class="parent absolute h-screen w-screen">
+
+        <div class="parent absolute h-screen w-screen" style="z-index: 999">
             @include('components.front-cover')
         </div>
+        <div class="petal-overlay" id="petalOverlay">
+            <img src="{{ asset('assets/petal.gif') }}" alt="Falling Petals">
+        </div>
         <div class="section bg-babyblue min-h-screen flex justify-center items-center pb-20">
             @include('components.main-event')
         </div>
@@ -39,12 +47,13 @@
         <div class="section bg-babyblue flex justify-center pt-5 pb-5">
             @include('components.guestbook')
         </div>
-        <div class="section bg-babyblue flex justify-center pt-5 pb-20">
+        <div  class="section bg-babyblue flex justify-center pt-5 pb-20">
             @include('components.prayer')
         </div>
         @include('components.navbar')
 
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" defer/>
 
         @stack('script')
     </body>

resources/views/modals/emoney-modal.blade.php

@@ -25,7 +25,7 @@
       <div class="label">
         <span class="label-text">Kod QR</span>
       </div>
-      <img src="{{asset('assets/qr-bank.jpeg')}}" alt="">
+      <img src="{{asset('assets/qr-bank.webp')}}" alt="">
     </label>
     <div class="modal-action">
       <form method="dialog">
@@ -37,7 +37,7 @@
 <script>
         document.getElementById('copyText').addEventListener('click', function() {
             var textToCopy = "15601700275298";
-            
+
             if (navigator.clipboard && window.isSecureContext) {
                 // navigator.clipboard API method
                 navigator.clipboard.writeText(textToCopy).then(function() {
@@ -55,7 +55,7 @@
                 var tempTextArea = document.createElement('textarea');
                 tempTextArea.value = textToCopy;
                 document.body.appendChild(tempTextArea);
-                
+
                 // Select the text
                 tempTextArea.select();
                 tempTextArea.setSelectionRange(0, 99999); // For mobile devices
@@ -74,4 +74,4 @@
                 document.body.removeChild(tempTextArea);
             }
         });
-    </script>
+    </script>

vite.config.js

@@ -4,7 +4,7 @@ import laravel from 'laravel-vite-plugin';
 export default defineConfig({
     plugins: [
         laravel({
-            input: ['resources/css/app.css', 'resources/js/app.js'],
+            input: ['resources/css/app.css', 'resources/js/app.js','resources/js/petals.js'],
             refresh: true,
         }),
     ],