ソースを参照

fix lag and ensure smooth scrolling, add kehadiran button

master
azri 4ヶ月前
コミット
e3ffe8a50a

+ 1
- 1
.env.example ファイルの表示

@@ -11,7 +11,7 @@ LOG_LEVEL=debug
11 11
 DB_CONNECTION=mysql
12 12
 DB_HOST=127.0.0.1
13 13
 DB_PORT=3306
14
-DB_DATABASE=laravel
14
+DB_DATABASE=digitalcard
15 15
 DB_USERNAME=root
16 16
 DB_PASSWORD=
17 17
 

バイナリ
public/assets/background-musicv2.mp3 ファイルの表示


バイナリ
public/assets/flower-left.webp ファイルの表示


バイナリ
public/assets/flower-right.webp ファイルの表示


バイナリ
public/assets/logo-left.webp ファイルの表示


バイナリ
public/assets/logo-right.webp ファイルの表示


バイナリ
public/assets/name-left.webp ファイルの表示


バイナリ
public/assets/name-right.webp ファイルの表示


バイナリ
public/assets/qr-bank.webp ファイルの表示


+ 105
- 13
resources/css/app.css ファイルの表示

@@ -14,7 +14,9 @@
14 14
 }
15 15
 
16 16
 @media (prefers-color-scheme: dark) {
17
-    html, body {
17
+
18
+    html,
19
+    body {
18 20
         background-color: #ffffff;
19 21
         color: #000000;
20 22
     }
@@ -23,6 +25,7 @@
23 25
     .dark\:bg-gray-900 {
24 26
         background-color: #ffffff !important;
25 27
     }
28
+
26 29
     .dark\:text-white {
27 30
         color: #000000 !important;
28 31
     }
@@ -36,30 +39,119 @@
36 39
 html {
37 40
     scroll-behavior: smooth;
38 41
 }
42
+
39 43
 body.no-scroll {
40 44
     overflow: hidden;
41 45
 }
42
-.fade-element {
43
-    opacity: 0;
44
-    transform: translateY(20px);
45
-    transition: opacity 3s ease-in-out, transform 3s ease-in-out;
46
-}
46
+
47 47
 .fade-in {
48 48
     opacity: 1;
49 49
 }
50
+
50 51
 .petal-overlay {
51
-    position: fixed; /* Fixes the position to the viewport */
52
+    position: fixed;
53
+    /* Fixes the position to the viewport */
52 54
     top: 0;
53 55
     left: 0;
54 56
     width: 100vw;
55 57
     height: 100vh;
56
-    pointer-events: none; /* Allows interactions through the overlay */
57
-    z-index: 9999; /* Ensures it is on top of other elements */
58
-    opacity: 0.3; /* Set the opacity to a lower value */
59
-    display: none; /* Initially hidden */
58
+    pointer-events: none;
59
+    /* Allows interactions through the overlay */
60
+    z-index: 1;
61
+    /* Ensures it is on top of other elements */
62
+    opacity: 0.3;
63
+    /* Set the opacity to a lower value */
64
+    display: block;
60 65
 }
66
+
61 67
 .petal-overlay img {
62 68
     width: 100%;
63 69
     height: 100%;
64
-    object-fit: cover; /* Ensures the image covers the entire container */
65
-}
70
+    object-fit: cover;
71
+    /* Ensures the image covers the entire container */
72
+}
73
+
74
+
75
+.loader {
76
+    position: relative;
77
+    display: flex;
78
+    align-items: center;
79
+    justify-content: center;
80
+    width: 100%;
81
+    max-width: 6rem;
82
+    margin-top: 3rem;
83
+    margin-bottom: 3rem;
84
+}
85
+
86
+.loader:before,
87
+.loader:after {
88
+    content: "";
89
+    position: absolute;
90
+    border-radius: 50%;
91
+    animation: pulsOut 1.8s ease-in-out infinite;
92
+    filter: drop-shadow(0 0 1rem rgba(255, 255, 255, 0.75));
93
+}
94
+
95
+.loader:before {
96
+    width: 100%;
97
+    padding-bottom: 100%;
98
+    box-shadow: inset 0 0 0 1rem #fff;
99
+    animation-name: pulsIn;
100
+}
101
+
102
+.loader:after {
103
+    width: calc(100% - 2rem);
104
+    padding-bottom: calc(100% - 2rem);
105
+    box-shadow: 0 0 0 0 #fff;
106
+}
107
+
108
+.part{
109
+    transition: all 0.1s ease-in-out;
110
+}
111
+
112
+@keyframes pulsIn {
113
+    0% {
114
+        box-shadow: inset 0 0 0 1rem #fff;
115
+        opacity: 1;
116
+    }
117
+
118
+    50%,
119
+    100% {
120
+        box-shadow: inset 0 0 0 0 #fff;
121
+        opacity: 0;
122
+    }
123
+}
124
+
125
+@keyframes pulsOut {
126
+
127
+    0%,
128
+    50% {
129
+        box-shadow: 0 0 0 0 #fff;
130
+        opacity: 0;
131
+    }
132
+
133
+    100% {
134
+        box-shadow: 0 0 0 1rem #fff;
135
+        opacity: 1;
136
+    }
137
+}
138
+
139
+@keyframes to-right {
140
+    from {
141
+       transform: translateX(0)
142
+    }
143
+    to {
144
+        transform: translateX(100%)
145
+     }
146
+  }
147
+
148
+
149
+@media (prefers-reduced-motion: no-preference) {
150
+    @supports (animation-timeline: scroll()) {
151
+      #right-cover {
152
+        animation: to-right linear both;
153
+        animation-timeline: scroll();
154
+        animation-range: contain;
155
+      }
156
+    }
157
+  }

+ 133
- 131
resources/js/app.js ファイルの表示

@@ -1,27 +1,27 @@
1 1
 import './bootstrap';
2
-// resources/js/app.js
2
+//import 'resources/js/app.js';
3 3
 import '@fortawesome/fontawesome-free/css/all.min.css';
4 4
 
5 5
 
6
-// Countdown date (adjust this date to your desired countdown target)
6
+//Countdown date (adjust this date to your desired countdown target)
7 7
 const countdownDate = new Date('2024-08-17T11:00:00').getTime();
8 8
 
9
-// Update the countdown every second
9
+//Update the countdown every second
10 10
 const countdownElement = document.getElementById('countdown');
11 11
 const countdownTimer = setInterval(() => {
12
-    // Get the current date and time
12
+    //Get the current date and time
13 13
     const now = new Date().getTime();
14
-    
15
-    // Calculate the time remaining
14
+
15
+    //Calculate the time remaining
16 16
     const distance = countdownDate - now;
17
-    
18
-    // Calculate days, hours, minutes, and seconds
17
+
18
+    //Calculate days, hours, minutes, and seconds
19 19
     const days = Math.floor(distance / (1000 * 60 * 60 * 24));
20 20
     const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
21 21
     const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
22 22
     const seconds = Math.floor((distance % (1000 * 60)) / 1000);
23
-    
24
-    // Format the countdown into a string
23
+
24
+    //Format the countdown into a string
25 25
     const countdownHTML = `
26 26
         <div class="flex flex-col">
27 27
             <div class="flex gap-8 justify-center">
@@ -41,18 +41,75 @@ const countdownTimer = setInterval(() => {
41 41
             </div>
42 42
         </div>
43 43
     `;
44
-    
45
-    // Display the countdown in the element
44
+
45
+    //Display the countdown in the element
46 46
     countdownElement.innerHTML = countdownHTML;
47
-    
48
-    // If the countdown is over, clear the timer and display a message
47
+
48
+    //If the countdown is over, clear the timer and display a message
49 49
     if (distance < 0) {
50 50
         clearInterval(countdownTimer);
51 51
         countdownElement.innerHTML = 'Majlis berlangsung';
52 52
     }
53 53
 }, 1000); // Update every second (1000 milliseconds)
54 54
 
55
-$(function() {
55
+document.addEventListener('DOMContentLoaded', function () {
56
+    imageLoading()
57
+    scrollOpenCover()
58
+
59
+    reset() // reset everrything to ensure smooth
60
+    sessionStorage.setItem("initial-load", "true"); // will be used by click event
61
+
62
+});
63
+
64
+
65
+document.addEventListener('click', function () {
66
+
67
+    let initLoad = sessionStorage.getItem("initial-load")
68
+
69
+
70
+    // parts is intro cover
71
+    let parts = document.getElementsByClassName("part");
72
+    for (let part of parts) {
73
+        part.classList.add("shadow-lg")
74
+    }
75
+
76
+    let body = document.querySelector("body");
77
+    body.classList.remove("no-scroll");
78
+
79
+    // the intro - only done once and
80
+    if (initLoad == "true") {
81
+        playMusic();
82
+        sessionStorage.removeItem("initial-load")
83
+        // delay timer to have that umpph feels my G
84
+        setTimeout(() => {
85
+            // smooth scroll only happen for first render
86
+            smoothScrollBy(100, 3500);
87
+        }, 500)
88
+    }
89
+
90
+});
91
+
92
+function smoothScrollBy(distance, duration) {
93
+    const start = window.pageYOffset;
94
+    const startTime = performance.now();
95
+
96
+    function scroll() {
97
+        const now = performance.now();
98
+        const time = Math.min(1, (now - startTime) / duration);
99
+        const timeFunction = time * (2 - time); // Ease out effect
100
+        window.scrollTo(0, start + timeFunction * distance);
101
+
102
+        if (time < 1) {
103
+            requestAnimationFrame(scroll);
104
+        }
105
+    }
106
+
107
+    requestAnimationFrame(scroll);
108
+}
109
+
110
+
111
+// enable open close cover
112
+function scrollOpenCover() {
56 113
     var partLeftPos = 0;
57 114
     var partRightPos = 0;
58 115
 
@@ -64,13 +121,13 @@ $(function() {
64 121
         $('.left').css('left', left + "px");
65 122
         $('.right').css('right', right + "px");
66 123
 
67
-        // Calculate boundaries
124
+        //Calculate boundaries
68 125
         var leftPartRightEdge = $('.left').offset().left + $('.left').outerWidth();
69 126
 
70
-        // Check if both parts are completely off-screen
127
+        //Check if both parts are completely off-screen
71 128
         var isLeftOffScreen = leftPartRightEdge <= 0;
72 129
 
73
-        // Toggle visibility and z-index
130
+        //Toggle visibility and z-index
74 131
         if (isLeftOffScreen && left < 0) {
75 132
             $('.parent').removeClass('z-30');
76 133
         } else {
@@ -78,138 +135,83 @@ $(function() {
78 135
         }
79 136
     }
80 137
 
81
-    // Initial positions update
138
+    //Initial positions update
82 139
     updatePositions();
83 140
 
84
-    // Listen to scroll events using requestAnimationFrame for smooth animation
141
+    //Listen to scroll events using requestAnimationFrame for smooth animation
85 142
     var ticking = false;
86
-    $(window).scroll(function() {
143
+    $(window).scroll(function () {
87 144
         if (!ticking) {
88
-            window.requestAnimationFrame(function() {
145
+            window.requestAnimationFrame(function () {
89 146
                 updatePositions();
90 147
                 ticking = false;
91 148
             });
92 149
         }
93 150
         ticking = true;
94 151
     });
95
-});
152
+}
96 153
 
154
+// to ensure all images is loaded before starting animation and gimmick
155
+function imageLoading() {
156
+    const images = document.querySelectorAll("img");
157
+    let loadedCount = 0;
158
+    const totalImages = images.length;
97 159
 
98
-document.addEventListener('click', function () {
99
-    setTimeout(function () {
100
-        document.getElementById('petalOverlay').style.display = 'block';
101
-    }, 1000); // Delay of 1 second (1000 milliseconds)
102
-});
103
-
104
-document.addEventListener('DOMContentLoaded', function() {
105
-    var audioElement = document.getElementById('player');
106
-    var hasPlayed = false; // To ensure audio only plays once upon clicking and scrolling
107
-    var scrollCount = 0;
108
-    var maxScrolls = 8;
109
-    var scrollInterval = 200; // Time in milliseconds between each scroll
110
-    var scrollAmount = window.innerHeight / 6; // Amount to scroll per interval
111
-
112
-    function playAudio() {
113
-        if (!hasPlayed) {
114
-            console.log('play')
115
-            var playPromise = audioElement.play();
116
-
117
-            if (playPromise !== undefined) {
118
-                playPromise.then(function() {
119
-                    // Automatic playback started!
120
-                    hasPlayed = true; // Prevent further attempts to play
121
-                }).catch(function(error) {
122
-                    // Automatic playback failed.
123
-                    console.log('Autoplay failed: ' + error);
124
-                });
125
-            }
160
+    images.forEach(image => {
161
+        if (image.complete) {
162
+            loadedCount++;
163
+        } else {
164
+            image.addEventListener("load", () => {
165
+                loadedCount++;
166
+                checkAllImagesLoaded();
167
+            });
168
+            image.addEventListener("error", () => {
169
+                loadedCount++;
170
+                checkAllImagesLoaded();
171
+            });
126 172
         }
127
-    }
173
+    });
128 174
 
129
-    function smoothScroll() {
130
-        if (!hasPlayed) {
131
-            playAudio();
132
-            scrollCount++;
133
-            if (scrollCount >= maxScrolls) {
134
-                playAudio();
135
-            } else {
136
-                var start = window.pageYOffset;
137
-                var target = start + scrollAmount;
138
-                 // Set duration based on screen size
139
-                var screenWidth = window.innerWidth;
140
-                var duration;
141
-                if (screenWidth < 600) {
142
-                    duration = 8000; // Smaller screen
143
-                } else if (screenWidth < 1200) {
144
-                    duration = 12000; // Medium screen
145
-                } else {
146
-                    duration = 15000; // Larger screen
147
-                }
148
-                var startTime = null;
149
-
150
-                function scrollStep(timestamp) {
151
-                    if (!startTime) startTime = timestamp;
152
-                    var progress = timestamp - startTime;
153
-                    var currentPosition = start + ((target - start) * (progress / duration));
154
-                    window.scrollTo(0, currentPosition);
155
-                    if (progress < duration) {
156
-                        requestAnimationFrame(scrollStep);
157
-                    } else {
158
-                        setTimeout(smoothScroll, scrollInterval); // Continues scrolling after a delay
159
-                    }
160
-                }
161
-
162
-                requestAnimationFrame(scrollStep);
175
+    function checkAllImagesLoaded() {
176
+        if (loadedCount === totalImages) {
177
+            let loading = document.getElementById("loading");
178
+            loading.remove();
179
+            // parts is intro cover
180
+            let parts = document.getElementsByClassName("part");
181
+            for (let part of parts) {
182
+                part.classList.remove("hidden")
163 183
             }
164
-        }
165
-    }
166 184
 
167
-    function playOnly() {
168
-        if (!hasPlayed) {
169
-            playAudio();
170
-            scrollCount++;
171
-            if (scrollCount >= maxScrolls) {
172
-                playAudio();
173
-            } else {
174
-                setTimeout(playOnly, scrollInterval);
175
-            }
176 185
         }
177 186
     }
187
+}
178 188
 
179
-    function handleInteraction() {
180
-        document.body.classList.remove('no-scroll'); // Enable scrolling
181
-        setTimeout(smoothScroll, scrollInterval); // Start smooth scrolling after initial delay
182
-    }
189
+function reset() {
190
+    // reset to top
191
+    let body = document.querySelector("body");
192
+    body.classList.remove("no-scroll");
193
+    window.scrollTo(0, 0);
183 194
 
184
-    // Listen for click or touch event to start auto-scrolling
185
-    window.addEventListener('click', handleInteraction);
195
+    setTimeout(() => {
196
+        body.classList.add("no-scroll");
197
+    }, 500)
198
+}
186 199
 
187
-    window.addEventListener('scroll', function() {
188
-        if (window.pageYOffset === 0) {
189
-            audioElement.pause();
190
-            document.getElementById('petalOverlay').style.display = 'none';
191
-            hasPlayed = false; // Reset to allow replay
192
-            document.body.classList.add('no-scroll');
200
+function playMusic(){
201
+    var audioElement = document.getElementById('player');
202
+    var hasPlayed = false;
203
+    if (!hasPlayed) {
204
+        console.log('play')
205
+        var playPromise = audioElement.play();
206
+
207
+        if (playPromise !== undefined) {
208
+            playPromise.then(function() {
209
+                // Automatic playback started!
210
+                hasPlayed = true; // Prevent further attempts to play
211
+            }).catch(function(error) {
212
+                // Automatic playback failed.
213
+                console.log('Autoplay failed: ' + error);
214
+            });
193 215
         }
194
-    });
195
-
196
-     // Intersection Observer for fading in elements
197
-    const observerOptions = {
198
-        root: null,
199
-        rootMargin: '0px',
200
-        threshold: 0.1
201
-    };
202
-
203
-    const observer = new IntersectionObserver((entries, observer) => {
204
-        entries.forEach(entry => {
205
-            if (entry.isIntersecting) {
206
-                entry.target.classList.add('fade-in');
207
-                observer.unobserve(entry.target);
208
-            }
209
-        });
210
-    }, observerOptions);
211
-
212
-    document.querySelectorAll('.fade-element').forEach(element => {
213
-        observer.observe(element);
214
-    });
215
-});
216
+    }
217
+}

+ 43
- 0
resources/js/petals.js ファイルの表示

@@ -0,0 +1,43 @@
1
+(function () {
2
+    var falling = true;
3
+
4
+    TweenLite.set("#container", { perspective: 600 })
5
+    //TweenLite.set("img",{xPercent:"-50%",yPercent:"-50%"})
6
+
7
+    var total = 10;
8
+    var container = document.getElementById("container"), w = window.innerWidth, h = window.innerHeight;
9
+
10
+    for (let i = 0; i < total; i++) {
11
+        var Div = document.createElement('div');
12
+        var Div2 = document.createElement('div');
13
+        var Div3 = document.createElement('div');
14
+        TweenLite.set(Div, { attr: { class: 'dot' }, x: R(0, w), y: R(-200, -150), z: R(-200, 200), xPercent: "-50%", yPercent: "-50%" });
15
+        TweenLite.set(Div2, { attr: { class: 'dot2' }, x: R(0, w), y: R(-200, -150), z: R(-200, 200), xPercent: "-50%", yPercent: "-50%" });
16
+        TweenLite.set(Div3, { attr: { class: 'dot3' }, x: R(0, w), y: R(-200, -150), z: R(-200, 200), xPercent: "-50%", yPercent: "-50%" });
17
+        container.appendChild(Div);
18
+        container.appendChild(Div2);
19
+        container.appendChild(Div3);
20
+        animm(Div);
21
+        animm2(Div2);
22
+        animm3(Div3);
23
+    }
24
+
25
+    function animm(elm) {
26
+        TweenMax.to(elm, R(6, 15), { y: h + 100, ease: Linear.easeNone, repeat: -1, delay: -15 });
27
+        TweenMax.to(elm, R(4, 8), { x: '+=100', rotationZ: R(0, 180), repeat: -1, yoyo: true, ease: Sine.easeInOut });
28
+        TweenMax.to(elm, R(2, 8), { repeat: -1, yoyo: true, ease: Sine.easeInOut, delay: -5 });
29
+    };
30
+    function animm2(elm) {
31
+        TweenMax.to(elm, R(6, 15), { y: h + 100, ease: Linear.easeNone, repeat: -1, delay: -25 });
32
+        TweenMax.to(elm, R(4, 8), { x: '+=100', rotationZ: R(0, 180), repeat: -1, yoyo: true, ease: Sine.easeInOut });
33
+        TweenMax.to(elm, R(2, 8), { repeat: -1, yoyo: true, ease: Sine.easeInOut, delay: -5 });
34
+    };
35
+    function animm3(elm) {
36
+        TweenMax.to(elm, R(6, 15), { y: h + 100, ease: Linear.easeNone, repeat: -1, delay: -5 });
37
+        TweenMax.to(elm, R(4, 8), { x: '+=100', rotationZ: R(0, 180), repeat: -1, yoyo: true, ease: Sine.easeInOut });
38
+        TweenMax.to(elm, R(2, 8), { repeat: -1, yoyo: true, ease: Sine.easeInOut, delay: -5 });
39
+    };
40
+
41
+    function R(min, max) { return min + Math.random() * (max - min) };
42
+
43
+})();

+ 2
- 2
resources/views/components/countdown.blade.php ファイルの表示

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

+ 11
- 11
resources/views/components/event-info.blade.php ファイルの表示

@@ -1,43 +1,43 @@
1 1
 <div class="flex flex-col gap-5 w-4/5 mt-10">
2
-    <div class="flex justify-center fade-element">
2
+    <div class="flex justify-center ">
3 3
         <img src="{{ asset('assets/bismillah.png') }}" alt="Logo">
4 4
     </div>
5
-    <div class="text-center fade-element">
5
+    <div class="text-center ">
6 6
         <p class="font-medium text-sm text-gray-500 pb-3">Dengan penuh rasa kesyukuran, kami</p>
7 7
         <p class="font-medium text-gray-600">DATO' HAJI AMIRUDDIN BIN MOHD SAID</p>
8 8
         <p class="font-medium text-gray-600">&</p>
9 9
         <p class="font-medium text-gray-600">DATIN HAJAH NOR ALINA BINTI ALIAS</p>
10 10
     </div>
11
-    <div class="text-center fade-element">
11
+    <div class="text-center ">
12 12
         <p class="font-medium text-sm text-gray-500">ingin mempersilakan</p>
13 13
         <p class="font-medium text-sm text-gray-500">Tan Sri/Dato' Sri/Datin Sri/Dato'/</p>
14 14
         <p class="font-medium text-sm text-gray-500">Datin/Tuan/Puan/Encik/Cik</p>
15 15
     </div>
16
-    <div class="text-center fade-element">
16
+    <div class="text-center ">
17 17
         <p class="font-medium text-sm text-gray-500 pb-3">Ke Majlis Resepsi Perkahwinan Putera Kami</p>
18 18
         <p class="font-medium text-gray-600">ALIFF BIN DATO' HAJI AMIRUDDIN</p>
19 19
         <p class="font-medium text-gray-600">&</p>
20 20
         <p class="font-medium text-gray-600">ANIZA AYUNA BINTI CHE JANI</p>
21 21
     </div>
22
-    <hr class="border-t-1 border-gray-300 my-5 w-4/5 self-center fade-element">
23
-    <div class="text-center fade-element">
22
+    <hr class="border-t-1 border-gray-300 my-5 w-4/5 self-center ">
23
+    <div class="text-center ">
24 24
         <p class="font-medium text-gray-600 pb-2">Tarikh</p>
25 25
         <p class="font-medium text-sm text-gray-500">Sabtu, 17 Ogos 2024</p>
26 26
         <p class="font-medium text-sm text-gray-500">(12 Safar 1446H)</p>
27 27
     </div>
28
-    <div class="text-center fade-element">
28
+    <div class="text-center ">
29 29
         <p class="font-medium text-gray-600 pb-2">Masa</p>
30 30
         <p class="font-medium text-sm text-gray-500">11.00 Pagi - 4.00 Petang</p>
31 31
     </div>
32
-    <div class="text-center fade-element">
32
+    <div class="text-center ">
33 33
         <p class="font-medium text-gray-600 pb-2">Tempat</p>
34 34
         <p class="font-medium text-sm text-gray-500">Dewan Jubli Perak</p>
35 35
         <p class="font-medium text-sm text-gray-500">Sultan Haji Ahmad Shah,</p>
36 36
         <p class="font-medium text-sm text-gray-500">Jalan Teluk Sisek,</p>
37 37
         <p class="font-medium text-sm text-gray-500">Kuantan, Pahang.</p>
38 38
     </div>
39
-    <hr class="border-t-1 border-gray-300 my-5 w-4/5 self-center fade-element">
40
-    <div class="text-center fade-element">
39
+    <hr class="border-t-1 border-gray-300 my-5 w-4/5 self-center ">
40
+    <div class="text-center ">
41 41
         <p class="font-medium text-gray-600 pb-2">Aturcara Majlis</p>
42 42
         <p class="font-medium text-sm text-gray-600">11.00 Pagi :</p>
43 43
         <p class="font-medium text-sm text-gray-500 pb-4">Majlis Bermula</p>
@@ -58,4 +58,4 @@
58 58
             <span>Waze</span>
59 59
         </a>
60 60
     </div> --}}
61
-</div>
61
+</div>

+ 13
- 13
resources/views/components/front-cover.blade.php ファイルの表示

@@ -1,22 +1,22 @@
1
-<div class="part left fixed left-0 w-1/2 h-screen bg-babyblue shadow-lg">
1
+<div class="part left fixed left-0 w-1/2 h-screen bg-babyblue hidden">
2 2
     <div class="flex flex-col justify-center h-full gap-10">
3
-        <div class="flex justify-end items-center">
4
-            <img src="{{ asset('assets/logo-left.png') }}" alt="Logo" class="logo-img">
3
+        <div class="flex justify-end items-center animate__animated animate__fadeIn animate__delay-1s">
4
+            <img src="{{ asset('assets/logo-left.webp') }}" alt="Logo" class="logo-img">
5 5
         </div>
6
-        <div class="flex justify-end items-center">
7
-            <img src="{{ asset('assets/name-left.png') }}" alt="Name Left" class="logo-img">
6
+        <div class="flex justify-end items-center animate__animated animate__fadeIn animate__delay-1s">
7
+            <img src="{{ asset('assets/name-left.webp') }}" alt="Name Left" class="logo-img">
8 8
         </div>
9
-        <img src="{{asset('assets/flower-left.png')}}" alt="" class="absolute -left-2/4 top-72 h-96 w-96">
9
+        <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">
10 10
     </div>
11 11
 </div>
12
-<div class="part right fixed right-0 w-1/2 h-screen bg-babyblue shadow-lg">
12
+<div class="part right fixed right-0 w-1/2 h-screen bg-babyblue hidden">
13 13
     <div class="flex flex-col justify-center h-full gap-10">
14
-        <div class="flex justify-start items-center">
15
-            <img src="{{ asset('assets/logo-right.png') }}" alt="Logo" class="logo-img">
14
+        <div class="flex justify-start items-center animate__animated animate__fadeIn animate__delay-1s">
15
+            <img src="{{ asset('assets/logo-right.webp') }}" alt="Logo" class="logo-img">
16 16
         </div>
17
-        <div class="flex justify-start items-center">
18
-            <img src="{{ asset('assets/name-right.png') }}" alt="Name Right" class="logo-img">
17
+        <div class="flex justify-start items-center animate__animated animate__fadeIn animate__delay-1s">
18
+            <img src="{{ asset('assets/name-right.webp') }}" alt="Name Right" class="logo-img">
19 19
         </div>
20
-        <img src="{{asset('assets/flower-right.png')}}" alt="" class="absolute -right-2/4 top-32 h-96 w-96">
20
+        <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">
21 21
     </div>
22
-</div>
22
+</div>

+ 11
- 4
resources/views/components/guestbook.blade.php ファイルの表示

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

+ 5
- 5
resources/views/components/main-event.blade.php ファイルの表示

@@ -1,8 +1,8 @@
1 1
 <div class="flex flex-col gap-5 w-4/5 mt-44 mb-40 text-navbarcolor">
2
-    <div class="flex justify-center fade-element">
2
+    <div class="flex justify-center ">
3 3
         <p class="font-semibold text-sm">WALIMATULURUS</p>
4 4
     </div>
5
-    <div class="flex flex-col gap-8 pt-8 pb-8 justify-center fade-element">
5
+    <div class="flex flex-col gap-8 pt-8 pb-8 justify-center ">
6 6
         <div class="flex justify-center">
7 7
             <p class="font-tan-pearl font-semibold text-5xl"><span class="text-6xl">A</span>liff</p>
8 8
         </div>
@@ -13,7 +13,7 @@
13 13
             <p class="font-tan-pearl font-semibold text-5xl"><span class="text-6xl">A</span>yuna</p>
14 14
         </div>
15 15
     </div>
16
-    <div class="flex flex-col justify-center fade-element">
16
+    <div class="flex flex-col justify-center ">
17 17
         <div class="flex justify-center">
18 18
             <p class="font-bold text-base">SABTU</p>
19 19
         </div>
@@ -21,7 +21,7 @@
21 21
             <p class="font-bold text-base">17 OGOS 2024</p>
22 22
         </div>
23 23
     </div>
24
-    <div class="flex flex-col justify-center fade-element">
24
+    <div class="flex flex-col justify-center ">
25 25
         <div class="flex justify-center">
26 26
             <p class="font-semibold text-sm">DEWAN JUBLI PERAK</p>
27 27
         </div>
@@ -29,4 +29,4 @@
29 29
             <p class="font-semibold text-sm">SULTAN HAJI AHMAD SHAH</p>
30 30
         </div>
31 31
     </div>
32
-</div>
32
+</div>

+ 3
- 3
resources/views/components/prayer.blade.php ファイルの表示

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

+ 15
- 6
resources/views/digital-card.blade.php ファイルの表示

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

+ 4
- 4
resources/views/modals/emoney-modal.blade.php ファイルの表示

@@ -25,7 +25,7 @@
25 25
       <div class="label">
26 26
         <span class="label-text">Kod QR</span>
27 27
       </div>
28
-      <img src="{{asset('assets/qr-bank.jpeg')}}" alt="">
28
+      <img src="{{asset('assets/qr-bank.webp')}}" alt="">
29 29
     </label>
30 30
     <div class="modal-action">
31 31
       <form method="dialog">
@@ -37,7 +37,7 @@
37 37
 <script>
38 38
         document.getElementById('copyText').addEventListener('click', function() {
39 39
             var textToCopy = "15601700275298";
40
-            
40
+
41 41
             if (navigator.clipboard && window.isSecureContext) {
42 42
                 // navigator.clipboard API method
43 43
                 navigator.clipboard.writeText(textToCopy).then(function() {
@@ -55,7 +55,7 @@
55 55
                 var tempTextArea = document.createElement('textarea');
56 56
                 tempTextArea.value = textToCopy;
57 57
                 document.body.appendChild(tempTextArea);
58
-                
58
+
59 59
                 // Select the text
60 60
                 tempTextArea.select();
61 61
                 tempTextArea.setSelectionRange(0, 99999); // For mobile devices
@@ -74,4 +74,4 @@
74 74
                 document.body.removeChild(tempTextArea);
75 75
             }
76 76
         });
77
-    </script>
77
+    </script>

+ 1
- 1
vite.config.js ファイルの表示

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

読み込み中…
キャンセル
保存