Merge commit '120593e84c'

resources/css/app.css

@@ -44,6 +44,12 @@ 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;
 }

resources/js/app.js

@@ -11,6 +11,11 @@ document.addEventListener('DOMContentLoaded', function () {
     reset() // reset everrything to ensure smooth
     sessionStorage.setItem("initial-load", "true"); // will be used by click event
 
+    let rsvpBtn = document.getElementById("rsvp-button");
+    rsvpBtn.addEventListener('click', function(){
+        this.classList.remove("animate__flash");
+    })
+
 });
 
 
@@ -18,6 +23,9 @@ document.addEventListener('click', function () {
 
     let initLoad = sessionStorage.getItem("initial-load")
 
+    let pointer = document.getElementById("pointer")
+    pointer.remove()
+
     // parts is intro cover
     let parts = document.getElementsByClassName("part");
     for (let part of parts) {
@@ -86,6 +94,11 @@ function imageLoading() {
             for (let part of parts) {
                 part.classList.remove("hidden")
             }
+
+            let pointer = document.getElementById("pointer")
+            setTimeout(() => {
+                pointer.classList.remove("hidden")
+            }, 1500);
         }
     }
 
@@ -216,3 +229,23 @@ function eventCountdown() {
         }
     }, 1000); // Update every second (1000 milliseconds)
 }
+
+
+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/views/components/countdown.blade.php

@@ -1,4 +1,4 @@
-<div class="flex flex-col gap-5 w-4/5 py-3">
+<div class="flex flex-col gap-5 w-4/5 py-3 fade-element">
     <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>

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

@@ -1,19 +1,19 @@
 <div class="flex flex-col gap-5 w-4/5 mt-10">
-    <div class="flex justify-center ">
+    <div class="flex justify-center fade-element">
         <img src="{{ asset('assets/bismillah.png') }}" alt="Logo">
     </div>
-    <div class="text-center ">
+    <div class="text-center fade-element">
         <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 ">
+    <div class="text-center fade-element">
         <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 ">
+    <div class="text-center fade-element">
         <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>
@@ -25,11 +25,11 @@
         <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 ">
+    <div class="text-center fade-element">
         <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 ">
+    <div class="text-center fade-element">
         <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>
@@ -38,7 +38,7 @@
     </div>
     <hr class="border-t-1 border-gray-300 my-5 w-4/5 self-center ">
     @if ($host == 'aliffayuna.com')
-    <div class="text-center ">
+    <div class="text-center fade-element">
         <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>

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

@@ -18,5 +18,6 @@
             <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">
+        <img id="pointer" src="{{asset('assets/tap.png')}}" alt="" class="absolute hidden animate__animated animate__flash animate__infinite" width="35" height="35" style="bottom: 35vh; left:10vw">
     </div>
 </div>

resources/views/components/guestbook.blade.php

@@ -10,14 +10,14 @@
             @endfor
         </div>
     </div>
-    <div class="text-center pb-2 ">
+    <div class="text-center pb-2 fade-element">
         <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>
-    <div class="text-center pb-2 ">
+    <div class="text-center pb-2 fade-element">
         <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>

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 ">
+    <div class="flex justify-center fade-element">
         <p class="font-semibold text-sm">WALIMATULURUS</p>
     </div>
-    <div class="flex flex-col gap-8 pt-8 pb-8 justify-center ">
+    <div class="flex flex-col gap-8 pt-8 pb-8 justify-center fade-element">
         <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 ">
+    <div class="flex flex-col justify-center fade-element">
         <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 ">
+    <div class="flex flex-col justify-center fade-element">
         <div class="flex justify-center">
             <p class="font-semibold text-sm">DEWAN JUBLI PERAK</p>
         </div>

resources/views/components/navbar.blade.php

@@ -1,6 +1,6 @@
 <div class="fixed bottom-0 left-0 w-full bg-navbarcolor shadow-lg rounded-t-xl">
     <div class="flex justify-around py-4">
-        <a onclick="rsvp.showModal()" class="text-babyblue text-xl">
+        <a id="rsvp-button" onclick="rsvp.showModal()" class="text-babyblue text-xl animate__animated animate__flash animate__infinite animate__delay-4s">
             <i class="fa-solid fa-envelope-open-text"></i>
         </a>
         <a onclick="emoney.showModal()" class="text-babyblue text-xl">
@@ -21,4 +21,4 @@
     @include('modals.contact-modal')
     @include('modals.location-modal')
     @include('modals.calendar-modal')
-</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 ">
+    <div class="flex justify-center fade-element">
         <img src="{{ asset('assets/bismillah.png') }}" alt="Logo">
     </div>
-    <div class="text-center ">
+    <div class="text-center fade-element">
         <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>

resources/views/digital-card.blade.php

@@ -10,7 +10,7 @@
         <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" />
-
+        <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
 
         <meta name="csrf-token" content="{{ csrf_token() }}">
 
@@ -57,6 +57,7 @@
 
         <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/>
+        <script src="https://unpkg.com/aos@2.3.1/dist/aos.js" defer></script>
 
         @stack('script')
     </body>