mirfalah-tech
/
digital-card
ウォッチ 12
スター 0
フォーク 0

12 コミット
61f4562464 ... a72c1b4aeb

作成者 SHA1 メッセージ 日付
  farhan a72c1b4aeb shadow front cover 4ヶ月前
  farhan a133ea1216 flower position 4ヶ月前
  farhan e63b8073f4 insert flower to front page 4ヶ月前
  farhan 703757be6c hide all focus 4ヶ月前
  farhan 41901bccfe e-money ui fix 4ヶ月前
  farhan f83a243250 fix calendar 4ヶ月前
  farhan 3c7a756a95 remove dark mode for calendar 4ヶ月前
  farhan fa97073c97 reset form 4ヶ月前
  farhan 246ffea426 clear code for success message 4ヶ月前
  farhan 16fb3c7284 change success message to info color 4ヶ月前
  farhan 464ab57bba avoid auto zoom 4ヶ月前
  farhan 9782552d21 success message for action forms 4ヶ月前
11個のファイルの変更、88行の追加、128行の削除
分割表示 差分情報を表示
  1. 3
    6
      app/Http/Controllers/MainController.php
  2. バイナリ
      public/assets/qr-bank.jpeg
  3. 5
    0
      resources/css/app.css
  4. 4
    2
      resources/views/components/front-cover.blade.php
  5. 4
    2
      resources/views/digital-card.blade.php
  6. 39
    39
      resources/views/modals/calendar-modal.blade.php
  7. 7
    11
      resources/views/modals/emoney-modal.blade.php
  8. 8
    23
      resources/views/modals/guestbook-modal.blade.php
  9. 7
    20
      resources/views/modals/rsvp-modal.blade.php
  10. 10
    21
      resources/views/rsvp-digital-card.blade.php
  11. 1
    4
      routes/web.php

+ 3
- 6
app/Http/Controllers/MainController.php ファイルの表示 

@@ -19,6 +19,7 @@ class MainController extends Controller
19 19 
             return view('rsvp-digital-card');
20 20 
         } else {
21 21 
             return view('digital-card', compact(['rsvp', 'guestbook']));
22 
+            // return view('rsvp-digital-card');
22 23 
         }
23 24 
     }
24 25 
 
@@ -31,7 +32,7 @@ class MainController extends Controller
31 32
32 33 
         session()->flash('success', 'Terima kasih kerana sudi menghadirkan diri!');
33 34
34 
-        return response()->json(['message' => 'RSVP form submitted successfully']);
35 
+        return response()->json(['message' => 'Terima kasih kerana sudi menghadirkan diri!']);
35 36 
     }
36 37
37 38 
     public function saveSpeech(Request $request) {
 
@@ -42,10 +43,6 @@ class MainController extends Controller
42 43
43 44 
         session()->flash('success', 'Terima kasih atas ucapan anda!');
44 45
45 
-        return response()->json(['message' => 'Speech form submitted successfully']);
46 
-    }
47 
-
48 
-    public function rsvpmain() {
49 
-        return view('rsvp-digital-card');
46 
+        return response()->json(['message' => 'Terima kasih atas ucapan anda!']);
50 47 
     }
51 48 
 }

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


+ 5
- 0
resources/css/app.css ファイルの表示 

@@ -26,4 +26,9 @@
26 26 
     .dark\:text-white {
27 27 
         color: #000000 !important;
28 28 
     }
29 
+}
30 
+
31 
+/* Remove outline on focus for all elements */
32 
+*:focus {
33 
+    outline: none;
29 34 
 }

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

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

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

@@ -2,7 +2,7 @@
2 2 
 <html lang="{{ str_replace('_', '-', app()->getLocale()) }}" data-theme="light">
3 3 
     <head>
4 4 
         <meta charset="utf-8">
5 
-        <meta name="viewport" content="width=device-width, initial-scale=1">
5 
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
6 6 
         <meta name="color-scheme" content="light only">
7 7
8 8 
         <title>{{config('app.name')}}</title>
 
@@ -46,6 +46,9 @@
46 46 
         </style>
47 47 
     </head>
48 48 
     <body class="antialiased font-serif no-scroll">
49 
+        <div role="alert" class="alert alert-info hidden z-40 fixed w-1/2 top-3 right-3">
50 
+            <span></span>
51 
+        </div>
49 52 
         <div class="petal-overlay" id="petalOverlay">
50 53 
             <img src="{{ asset('assets/petal.gif') }}" alt="Falling Petals">
51 54 
         </div>
 
@@ -141,7 +144,6 @@
141 144 
                 });
142 145 
             });
143 146 
         </script>
144 
-        <div id="alert-success"></div>
145 147 
         <div class="parent absolute h-screen w-full">
146 148 
             {{-- <audio src="{{asset('assets/paper-ripping.mp3')}}"></audio> --}}
147 149 
             @include('components.front-cover')

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

@@ -3,9 +3,9 @@
3 3 
       <h3 class="text-lg font-bold">Kalendar</h3>
4 4 
       <div class="flex items-center justify-center py-8 px-4">
5 5 
           <div class="max-w-sm w-full shadow-lg">
6 
-              <div class="md:p-8 p-5 dark:bg-gray-800 bg-babyblue rounded-t">
6 
+              <div class="md:p-8 p-5 bg-babyblue rounded-t">
7 7 
                   <div class="flex items-center justify-center">
8 
-                      <span  tabindex="0" class="focus:outline-none  text-base font-bold dark:text-gray-100 text-gray-800">August 2024</span>
8 
+                      <span  tabindex="0" class="focus:outline-none  text-base font-bold text-gray-800">August 2024</span>
9 9 
                   </div>
10 10 
                   <div class="flex items-center justify-between pt-12 overflow-x-auto">
11 11 
                       <table class="w-full">
 
@@ -13,37 +13,37 @@
13 13 
                               <tr>
14 14 
                                   <th>
15 15 
                                       <div class="w-full flex justify-center">
16 
-                                          <p class="text-base font-medium text-center text-gray-800 dark:text-gray-100">Mo</p>
16 
+                                          <p class="text-base font-medium text-center text-gray-800">Mo</p>
17 17 
                                       </div>
18 18 
                                   </th>
19 19 
                                   <th>
20 20 
                                       <div class="w-full flex justify-center">
21 
-                                          <p class="text-base font-medium text-center text-gray-800 dark:text-gray-100">Tu</p>
21 
+                                          <p class="text-base font-medium text-center text-gray-800">Tu</p>
22 22 
                                       </div>
23 23 
                                   </th>
24 24 
                                   <th>
25 25 
                                       <div class="w-full flex justify-center">
26 
-                                          <p class="text-base font-medium text-center text-gray-800 dark:text-gray-100">We</p>
26 
+                                          <p class="text-base font-medium text-center text-gray-800">We</p>
27 27 
                                       </div>
28 28 
                                   </th>
29 29 
                                   <th>
30 30 
                                       <div class="w-full flex justify-center">
31 
-                                          <p class="text-base font-medium text-center text-gray-800 dark:text-gray-100">Th</p>
31 
+                                          <p class="text-base font-medium text-center text-gray-800">Th</p>
32 32 
                                       </div>
33 33 
                                   </th>
34 34 
                                   <th>
35 35 
                                       <div class="w-full flex justify-center">
36 
-                                          <p class="text-base font-medium text-center text-gray-800 dark:text-gray-100">Fr</p>
36 
+                                          <p class="text-base font-medium text-center text-gray-800">Fr</p>
37 37 
                                       </div>
38 38 
                                   </th>
39 39 
                                   <th>
40 40 
                                       <div class="w-full flex justify-center">
41 
-                                          <p class="text-base font-medium text-center text-gray-800 dark:text-gray-100">Sa</p>
41 
+                                          <p class="text-base font-medium text-center text-gray-800">Sa</p>
42 42 
                                       </div>
43 43 
                                   </th>
44 44 
                                   <th>
45 45 
                                       <div class="w-full flex justify-center">
46 
-                                          <p class="text-base font-medium text-center text-gray-800 dark:text-gray-100">Su</p>
46 
+                                          <p class="text-base font-medium text-center text-gray-800">Su</p>
47 47 
                                       </div>
48 48 
                                   </th>
49 49 
                               </tr>
 
@@ -61,86 +61,86 @@
61 61 
                                   </td>
62 62 
                                   <td class="pt-6">
63 63 
                                       <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
64 
-                                          <p class="text-base text-gray-500 dark:text-gray-100 font-medium">1</p>
64 
+                                          <p class="text-base text-gray-500 font-medium">1</p>
65 65 
                                       </div>
66 66 
                                   </td>
67 67 
                                   <td class="pt-6">
68 68 
                                       <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
69 
-                                          <p class="text-base text-gray-500 dark:text-gray-100 font-medium">2</p>
69 
+                                          <p class="text-base text-gray-500 font-medium">2</p>
70 70 
                                       </div>
71 71 
                                   </td>
72 72 
                                   <td class="pt-6">
73 73 
                                       <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
74 
-                                          <p class="text-base text-gray-500 dark:text-gray-100">3</p>
74 
+                                          <p class="text-base text-gray-500">3</p>
75 75 
                                       </div>
76 76 
                                   </td>
77 77 
                                   <td class="pt-6">
78 78 
                                       <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
79 
-                                          <p class="text-base text-gray-500 dark:text-gray-100">4</p>
79 
+                                          <p class="text-base text-gray-500">4</p>
80 80 
                                       </div>
81 81 
                                   </td>
82 82 
                               </tr>
83 83 
                               <tr>
84 84 
                                   <td>
85 85 
                                       <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
86 
-                                          <p class="text-base text-gray-500 dark:text-gray-100 font-medium">5</p>
86 
+                                          <p class="text-base text-gray-500 font-medium">5</p>
87 87 
                                       </div>
88 88 
                                   </td>
89 89 
                                   <td>
90 90 
                                       <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
91 
-                                          <p class="text-base text-gray-500 dark:text-gray-100 font-medium">6</p>
91 
+                                          <p class="text-base text-gray-500 font-medium">6</p>
92 92 
                                       </div>
93 93 
                                   </td>
94 94 
                                   <td>
95 95 
                                       <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
96 
-                                          <p class="text-base text-gray-500 dark:text-gray-100 font-medium">7</p>
96 
+                                          <p class="text-base text-gray-500 font-medium">7</p>
97 97 
                                       </div>
98 98 
                                   </td>
99 99 
                                   <td>
100 100 
                                     <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
101 
-                                        <p class="text-base text-gray-500 dark:text-gray-100 font-medium">8</p>
101 
+                                        <p class="text-base text-gray-500 font-medium">8</p>
102 102 
                                     </div>
103 103 
                                   </td>
104 104 
                                   <td>
105 105 
                                       <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
106 
-                                          <p class="text-base text-gray-500 dark:text-gray-100 font-medium">9</p>
106 
+                                          <p class="text-base text-gray-500 font-medium">9</p>
107 107 
                                       </div>
108 108 
                                   </td>
109 109 
                                   <td>
110 110 
                                       <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
111 
-                                          <p class="text-base text-gray-500 dark:text-gray-100">10</p>
111 
+                                          <p class="text-base text-gray-500">10</p>
112 112 
                                       </div>
113 113 
                                   </td>
114 114 
                                   <td>
115 115 
                                       <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
116 
-                                          <p class="text-base text-gray-500 dark:text-gray-100">11</p>
116 
+                                          <p class="text-base text-gray-500">11</p>
117 117 
                                       </div>
118 118 
                                   </td>
119 119 
                               </tr>
120 120 
                               <tr>
121 121 
                                   <td>
122 122 
                                       <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
123 
-                                          <p class="text-base text-gray-500 dark:text-gray-100 font-medium">12</p>
123 
+                                          <p class="text-base text-gray-500 font-medium">12</p>
124 124 
                                       </div>
125 125 
                                   </td>
126 126 
                                   <td>
127 127 
                                       <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
128 
-                                          <p class="text-base text-gray-500 dark:text-gray-100 font-medium">13</p>
128 
+                                          <p class="text-base text-gray-500 font-medium">13</p>
129 129 
                                       </div>
130 130 
                                   </td>
131 131 
                                   <td>
132 132 
                                       <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
133 
-                                          <p class="text-base text-gray-500 dark:text-gray-100 font-medium">14</p>
133 
+                                          <p class="text-base text-gray-500 font-medium">14</p>
134 134 
                                       </div>
135 135 
                                   </td>
136 136 
                                   <td>
137 137 
                                       <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
138 
-                                          <p class="text-base text-gray-500 dark:text-gray-100 font-medium">15</p>
138 
+                                          <p class="text-base text-gray-500 font-medium">15</p>
139 139 
                                       </div>
140 140 
                                   </td>
141 141 
                                   <td>
142 142 
                                       <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
143 
-                                          <p class="text-base text-gray-500 dark:text-gray-100 font-medium">16</p>
143 
+                                          <p class="text-base text-gray-500 font-medium">16</p>
144 144 
                                       </div>
145 145 
                                   </td>
146 146 
                                   <td>
 
@@ -152,76 +152,76 @@
152 152 
                                   </td>
153 153 
                                   <td>
154 154 
                                       <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
155 
-                                          <p class="text-base text-gray-500 dark:text-gray-100">18</p>
155 
+                                          <p class="text-base text-gray-500">18</p>
156 156 
                                       </div>
157 157 
                                   </td>
158 158 
                               </tr>
159 159 
                               <tr>
160 160 
                                   <td>
161 161 
                                       <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
162 
-                                          <p class="text-base text-gray-500 dark:text-gray-100 font-medium">19</p>
162 
+                                          <p class="text-base text-gray-500 font-medium">19</p>
163 163 
                                       </div>
164 164 
                                   </td>
165 165 
                                   <td>
166 166 
                                       <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
167 
-                                          <p class="text-base text-gray-500 dark:text-gray-100 font-medium">20</p>
167 
+                                          <p class="text-base text-gray-500 font-medium">20</p>
168 168 
                                       </div>
169 169 
                                   </td>
170 170 
                                   <td>
171 171 
                                       <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
172 
-                                          <p class="text-base text-gray-500 dark:text-gray-100 font-medium">21</p>
172 
+                                          <p class="text-base text-gray-500 font-medium">21</p>
173 173 
                                       </div>
174 174 
                                   </td>
175 175 
                                   <td>
176 176 
                                       <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
177 
-                                          <p class="text-base text-gray-500 dark:text-gray-100 font-medium">22</p>
177 
+                                          <p class="text-base text-gray-500 font-medium">22</p>
178 178 
                                       </div>
179 179 
                                   </td>
180 180 
                                   <td>
181 181 
                                       <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
182 
-                                          <p class="text-base text-gray-500 dark:text-gray-100 font-medium">23</p>
182 
+                                          <p class="text-base text-gray-500 font-medium">23</p>
183 183 
                                       </div>
184 184 
                                   </td>
185 185 
                                   <td>
186 186 
                                       <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
187 
-                                          <p class="text-base text-gray-500 dark:text-gray-100">24</p>
187 
+                                          <p class="text-base text-gray-500">24</p>
188 188 
                                       </div>
189 189 
                                   </td>
190 190 
                                   <td>
191 191 
                                       <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
192 
-                                          <p class="text-base text-gray-500 dark:text-gray-100">25</p>
192 
+                                          <p class="text-base text-gray-500">25</p>
193 193 
                                       </div>
194 194 
                                   </td>
195 195 
                               </tr>
196 196 
                               <tr>
197 197 
                                   <td>
198 198 
                                       <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
199 
-                                          <p class="text-base text-gray-500 dark:text-gray-100 font-medium">26</p>
199 
+                                          <p class="text-base text-gray-500 font-medium">26</p>
200 200 
                                       </div>
201 201 
                                   </td>
202 202 
                                   <td>
203 203 
                                       <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
204 
-                                          <p class="text-base text-gray-500 dark:text-gray-100 font-medium">27</p>
204 
+                                          <p class="text-base text-gray-500 font-medium">27</p>
205 205 
                                       </div>
206 206 
                                   </td>
207 207 
                                   <td>
208 208 
                                       <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
209 
-                                          <p class="text-base text-gray-500 dark:text-gray-100 font-medium">28</p>
209 
+                                          <p class="text-base text-gray-500 font-medium">28</p>
210 210 
                                       </div>
211 211 
                                   </td>
212 212 
                                   <td>
213 213 
                                       <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
214 
-                                          <p class="text-base text-gray-500 dark:text-gray-100 font-medium">29</p>
214 
+                                          <p class="text-base text-gray-500 font-medium">29</p>
215 215 
                                       </div>
216 216 
                                   </td>
217 217 
                                   <td>
218 218 
                                       <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
219 
-                                          <p class="text-base text-gray-500 dark:text-gray-100 font-medium">30</p>
219 
+                                          <p class="text-base text-gray-500 font-medium">30</p>
220 220 
                                       </div>
221 221 
                                   </td>
222 222 
                                   <td>
223 223 
                                     <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
224 
-                                        <p class="text-base text-gray-500 dark:text-gray-100">31</p>
224 
+                                        <p class="text-base text-gray-500">31</p>
225 225 
                                     </div>
226 226 
                                 </td>
227 227 
                               </tr>

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

@@ -1,11 +1,3 @@
1 
-<style>
2 
-  .copy-link {
3 
-            color: blue;
4 
-            text-decoration: underline;
5 
-            cursor: pointer;
6 
-            float: right;
7 
-        }
8 
-</style>
9 1 
 <dialog id="emoney" class="modal">
10 2 
   <div class="modal-box w-11/12 max-w-5xl">
11 3 
     <h3 class="text-lg font-bold">Hadiah</h3>
 
@@ -13,15 +5,19 @@
13 5 
       <div class="label">
14 6 
         <span class="label-text">Nama Bank</span>
15 7 
       </div>
16 
-      <input type="text" value="RHB Bank Berhad" class="input input-bordered input-sm input-accent w-full max-w-xs" disabled/>
8 
+      <p class="input input-bordered input-sm input-accent w-full max-w-xs">
9 
+        RHB Bank Berhad
10 
+      </p>
17 11 
     </label>
18 12 
     <label class="form-control w-full max-w-xs">
19 13 
       <div class="label">
20 14 
         <span class="label-text">No. Akaun</span>
21 15 
       </div>
22 16 
       <p class="input input-bordered input-sm input-accent w-full max-w-xs">
23 
-        15601700275298
24 
-          <span id="copyText" class="copy-link">(copy)</span>
17 
+          15601700275298
18 
+          <span id="copyText" class="copy-link cursor-pointer float-end">
19 
+            <i class="fa-regular fa-copy"></i>
20 
+          </span>
25 21 
       </p>
26 22 
       <p id="copyMessage" class="text-green-500" style="display:none;">Copied to clipboard!</p>
27 23 
     </label>

+ 8
- 23
resources/views/modals/guestbook-modal.blade.php ファイルの表示 

@@ -42,34 +42,19 @@
42 42 
             data: formData,
43 43 
             success: function(response) {
44 44 
               $('#closeSpeechForm').submit();
45 
-              if ('{{ session('success') }}') {
46 
-                  showSuccessMessage('{{ session('success') }}');
47 
-              }
45 
+              $('#speechForm')[0].reset();
46 
+              var alertContainer = $('.alert-info');
47 
+              alertContainer.find('span').text(response.message); // Set message text
48 
+              alertContainer.fadeIn().removeClass('hidden'); // Show the alert
49 
+              setTimeout(function() {
50 
+                  alertContainer.fadeOut().addClass('hidden'); // Hide the alert after 5 seconds
51 
+              }, 3000);
48 52 
             },
49 53 
             error: function(xhr, status, error) {
50 54 
               console.error('Error submitting form:', error);
51 55 
             }
52 56 
           });
53 57 
         });
54 
-      })
55 
-
56 
-      function showSuccessMessage(message) {
57 
-          // Create a dynamic success message element
58 
-          var successAlert = $('<div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative" role="alert">' +
59 
-              '<span class="block sm:inline">' + message + '</span>' +
60 
-              '</div>');
61 
-
62 
-          // Append the message to a suitable container in your HTML (e.g., modal, form, or body)
63 
-          $('#alert-success').append(successAlert);
64 
-
65 
-          // Automatically remove the message after 3 seconds
66 
-          setTimeout(function() {
67 
-              successAlert.fadeOut('slow', function() {
68 
-                  $(this).remove();
69 
-              });
70 
-          }, 3000); // 3 seconds
71 
-
72 
-          // session()->forget('success');
73 
-      }
58 
+      });
74 59 
     </script>
75 60 
 @endpush

+ 7
- 20
resources/views/modals/rsvp-modal.blade.php ファイルの表示 

@@ -48,9 +48,13 @@
48 48 
           data: formData,
49 49 
           success: function(response) {
50 50 
             $('#closeRsvpForm').submit();
51 
-            if ('{{ session('success') }}') {
52 
-                showSuccessMessage('{{ session('success') }}');
53 
-            }
51 
+            $('#rsvpForm')[0].reset();
52 
+            var alertContainer = $('.alert-info');
53 
+            alertContainer.find('span').text(response.message); // Set message text
54 
+            alertContainer.fadeIn().removeClass('hidden'); // Show the alert
55 
+            setTimeout(function() {
56 
+                alertContainer.fadeOut().addClass('hidden'); // Hide the alert after 5 seconds
57 
+            }, 3000);
54 58 
           },
55 59 
           error: function(xhr, status, error) {
56 60 
             console.error('Error submitting form:', error);
 
@@ -58,22 +62,5 @@
58 62 
         });
59 63 
       });
60 64 
     });
61 
-
62 
-    function showSuccessMessage(message) {
63 
-        // Create a dynamic success message element
64 
-        var successAlert = $('<div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative" role="alert">' +
65 
-            '<span class="block sm:inline">' + message + '</span>' +
66 
-            '</div>');
67 
-
68 
-        // Append the message to a suitable container in your HTML (e.g., modal, form, or body)
69 
-        $('#alert-success').append(successAlert);
70 
-
71 
-        // Automatically remove the message after 3 seconds
72 
-        setTimeout(function() {
73 
-            successAlert.fadeOut('slow', function() {
74 
-                $(this).remove();
75 
-            });
76 
-        }, 3000); // 3 seconds
77 
-    }
78 65 
   </script>
79 66 
 @endpush

+ 10
- 21
resources/views/rsvp-digital-card.blade.php ファイルの表示 

@@ -2,7 +2,7 @@
2 2 
 <html lang="en" data-theme="light">
3 3 
 <head>
4 4 
     <meta charset="UTF-8">
5 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
5 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6 6 
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 7 
     <meta name="color-scheme" content="light only">
8 8 
     <title>{{config('app.name')}}</title>
 
@@ -15,6 +15,9 @@
15 15 
     @vite(['resources/css/app.css'])
16 16 
 </head>
17 17 
 <body class="antialiased font-serif">
18 
+    <div role="alert" class="alert alert-info hidden z-40 fixed w-1/2 top-3 right-3">
19 
+        <span></span>
20 
+    </div>
18 21 
     <audio id="player" autoplay="autoplay" loop>
19 22 
         <source src="{{asset('assets/background-musicv2.mp3')}}" type="audio/mp3">
20 23 
     </audio>
 
@@ -77,33 +80,19 @@
77 80 
               type: 'POST',
78 81 
               data: formData,
79 82 
               success: function(response) {
80 
-                if ('{{ session('success') }}') {
81 
-                    showSuccessMessage('{{ session('success') }}');
82 
-                }
83 83 
                 $('#RSVPForm')[0].reset();
84 
+                var alertContainer = $('.alert-info');
85 
+                alertContainer.find('span').text(response.message); // Set message text
86 
+                alertContainer.fadeIn().removeClass('hidden'); // Show the alert
87 
+                setTimeout(function() {
88 
+                    alertContainer.fadeOut().addClass('hidden'); // Hide the alert after 5 seconds
89 
+                }, 3000);
84 90 
               },
85 91 
               error: function(xhr, status, error) {
86 92 
                 console.error('Error submitting form:', error);
87 93 
               }
88 94 
             });
89 95 
           });
90 
-
91 
-          function showSuccessMessage(message) {
92 
-                // Create a dynamic success message element
93 
-                var successAlert = $('<div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative" role="alert">' +
94 
-                    '<span class="block sm:inline">' + message + '</span>' +
95 
-                    '</div>');
96 
-
97 
-                // Append the message to a suitable container in your HTML (e.g., modal, form, or body)
98 
-                $('#alert-success').append(successAlert);
99 
-
100 
-                // Automatically remove the message after 3 seconds
101 
-                setTimeout(function() {
102 
-                    successAlert.fadeOut('slow', function() {
103 
-                        $(this).remove();
104 
-                    });
105 
-                }, 3000); // 3 seconds
106 
-            }
107 96 
         });
108 97 
     </script>
109 98 
 </body>

+ 1
- 4
routes/web.php ファイルの表示 

@@ -16,7 +16,4 @@ use App\Http\Controllers\MainController;
16 16
17 17 
 Route::get('/', [MainController::class, 'main']);
18 18 
 Route::post('/saveRsvp', [MainController::class, 'saveRsvp'])->name('rsvp.save');
19 
-Route::post('/saveSpeech', [MainController::class, 'saveSpeech'])->name('speech.save');
20 
-
21 
-
22 
-Route::get('/rsvp', [MainController::class, 'rsvpmain']);
19 
+Route::post('/saveSpeech', [MainController::class, 'saveSpeech'])->name('speech.save');

書き込み プレビュー
読み込み中…
キャンセル
保存