Merge commit '3f0824377c'

resources/css/app.css

@@ -60,8 +60,6 @@ body.no-scroll {
     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 {
@@ -105,10 +103,13 @@ body.no-scroll {
     box-shadow: 0 0 0 0 #fff;
 }
 
-.part{
+.part {
     transition: all 0.1s ease-in-out;
 }
 
+
+
+
 @keyframes pulsIn {
     0% {
         box-shadow: inset 0 0 0 1rem #fff;
@@ -136,22 +137,30 @@ body.no-scroll {
     }
 }
 
+@keyframes to-left {
+    from {
+        transform: translateX(0)
+    }
+
+    to {
+        transform: translateX(-100%)
+    }
+}
+
 @keyframes to-right {
     from {
-       transform: translateX(0)
+        transform: translateX(0)
     }
+
     to {
         transform: translateX(100%)
-     }
-  }
+    }
+}
 
+.to-left-animation{
+    animation: to-left 2s forwards;
+}
 
-@media (prefers-reduced-motion: no-preference) {
-    @supports (animation-timeline: scroll()) {
-      #right-cover {
-        animation: to-right linear both;
-        animation-timeline: scroll();
-        animation-range: contain;
-      }
-    }
-  }
+.to-right-animation{
+    animation: to-right 2s forwards;
+}

resources/js/app.js

@@ -3,59 +3,11 @@ import './bootstrap';
 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.addEventListener('DOMContentLoaded', function () {
-    imageLoading()
-    scrollOpenCover()
 
+    imageLoading()
+    scrollOpenCover();
     reset() // reset everrything to ensure smooth
     sessionStorage.setItem("initial-load", "true"); // will be used by click event
 
@@ -66,48 +18,82 @@ 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();
+
+        let leftCover = document.querySelector(".dummy-cover .left-dummy");
+        let rightCover = document.querySelector(".dummy-cover .right-dummy");
+        leftCover.classList.add("to-left-animation")
+        rightCover.classList.add("to-right-animation")
+        setTimeout(()=>{
+            //dummy-cover
+            let parts = document.querySelectorAll(".dummy-cover .part");
+            for (let part of parts) {
+                part.remove("hidden")
+            }
+
+            let body = document.querySelector("body");
+            body.classList.remove("no-scroll");
+
+        },2500)
+
         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)
     }
 
+    setTimeout(() => {
+        eventCountdown();
+        let petalOverlay = document.getElementById("petalOverlay");
+        petalOverlay.classList.remove("hidden");
+    }, 2000)
+
 });
 
-function smoothScrollBy(distance, duration) {
-    const start = window.pageYOffset;
-    const startTime = performance.now();
+// 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;
+
+    images.forEach(image => {
+        if (image.complete) {
+            loadedCount++;
+        } else {
+            image.addEventListener("load", () => {
+                loadedCount++;
+                checkAllImagesLoaded();
+            });
+            image.addEventListener("error", () => {
+                loadedCount++;
+                checkAllImagesLoaded();
+            });
+        }
+    });
 
-    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);
+    function checkAllImagesLoaded() {
 
-        if (time < 1) {
-            requestAnimationFrame(scroll);
+        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")
+            }
         }
     }
 
-    requestAnimationFrame(scroll);
+    //somehow the server work so fast, script doesn't have much time to set the load eventlistener
+    //thus we check here, to ensure checkAllImagesLoaded run
+    checkAllImagesLoaded();
 }
 
-
 // enable open close cover
 function scrollOpenCover() {
     var partLeftPos = 0;
@@ -151,53 +137,16 @@ function scrollOpenCover() {
     });
 }
 
-// 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;
-
-    images.forEach(image => {
-        if (image.complete) {
-            loadedCount++;
-        } else {
-            image.addEventListener("load", () => {
-                loadedCount++;
-                checkAllImagesLoaded();
-            });
-            image.addEventListener("error", () => {
-                loadedCount++;
-                checkAllImagesLoaded();
-            });
-        }
-    });
-
-    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 reset() {
+
     // reset to top
     let body = document.querySelector("body");
-    body.classList.remove("no-scroll");
-    window.scrollTo(0, 0);
+    window.scrollTo(0, document.body.scrollHeight * 0.05);
+    body.classList.add("no-scroll");
 
-    setTimeout(() => {
-        body.classList.add("no-scroll");
-    }, 500)
 }
 
-function playMusic(){
+function playMusic() {
     var audioElement = document.getElementById('player');
     var hasPlayed = false;
     if (!hasPlayed) {
@@ -205,13 +154,65 @@ function playMusic(){
         var playPromise = audioElement.play();
 
         if (playPromise !== undefined) {
-            playPromise.then(function() {
+            playPromise.then(function () {
                 // Automatic playback started!
                 hasPlayed = true; // Prevent further attempts to play
-            }).catch(function(error) {
+            }).catch(function (error) {
                 // Automatic playback failed.
                 console.log('Autoplay failed: ' + error);
             });
         }
     }
 }
+
+function eventCountdown() {
+
+    //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)
+}

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

@@ -0,0 +1,22 @@
+<div class="part left-dummy 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 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 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.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-dummy 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 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 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.webp')}}" alt="" class="absolute -right-2/4 top-32 h-96 w-96 animate__animated animate__fadeIn animate__delay-2s">
+    </div>
+</div>

resources/views/digital-card.blade.php

@@ -32,7 +32,10 @@
         <div class="parent absolute h-screen w-screen" style="z-index: 999">
             @include('components.front-cover')
         </div>
-        <div class="petal-overlay" id="petalOverlay">
+        <div class="parent absolute h-screen w-screen dummy-cover" style="z-index: 999">
+            @include('components.front-cover-intro-dummy')
+        </div>
+        <div class="petal-overlay hidden" 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">