|
206 | 206 | </div> |
207 | 207 | </main> |
208 | 208 | <%- include("../../partials/_footer.ejs") %> |
209 | | - <div class="modal fade" |
210 | | - id="birthdayModal" |
211 | | - tabindex="-1" |
212 | | - role="dialog" |
213 | | - aria-labelledby="birthdayModalLabel" |
214 | | - aria-hidden="true"> |
215 | | - <div class="modal-dialog modal-dialog-centered" |
216 | | - role="document"> |
217 | | - <div class="modal-content"> |
218 | | - <div class="modal-header"> |
219 | | - <h5 class="modal-title" |
220 | | - id="birthdayModalLabel">Feliz Aniversário António!</h5> |
221 | | - <button type="button" |
222 | | - class="close" |
223 | | - data-dismiss="modal" |
224 | | - aria-label="Close"> |
225 | | - <span aria-hidden="true">×</span> |
226 | | - </button> |
227 | | - </div> |
228 | | - </div> |
229 | | - </div> |
230 | | - </div> |
231 | 209 | </div> |
232 | 210 |
|
233 | 211 | <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> |
234 | 212 | <script> |
235 | | - AOS.init() |
236 | | -</script> |
237 | | - |
238 | | -<script> |
239 | | - $(document).ready(() => { |
240 | | - const today = new Date(); |
241 | | - const isBirthday = today.getDate() === 21 && today.getMonth() === 9; |
242 | | -
|
243 | | - if (!isBirthday) { |
244 | | - return; |
245 | | - } |
246 | | -
|
247 | | - const birthdayCanvas = document.createElement('canvas'); |
248 | | - birthdayCanvas.style.position = 'fixed'; |
249 | | - birthdayCanvas.style.top = 0; |
250 | | - birthdayCanvas.style.left = 0; |
251 | | - birthdayCanvas.style.width = '100vw'; |
252 | | - birthdayCanvas.style.height = '100vh'; |
253 | | - birthdayCanvas.style.zIndex = 1045; |
254 | | - document.body.appendChild(birthdayCanvas); |
255 | | -
|
256 | | - const animation = confetti.create(birthdayCanvas, { |
257 | | - resize: true, |
258 | | - useWorker: true |
259 | | - }); |
260 | | -
|
261 | | - let duration = 10000; |
262 | | - let animationEnd = Date.now() + duration; |
263 | | - let defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 1045 }; |
264 | | -
|
265 | | - function randomInRange(min, max) { |
266 | | - return Math.random() * (max - min) + min; |
267 | | - } |
268 | | -
|
269 | | - let interval; |
270 | | - function startConfetti() { |
271 | | - interval = setInterval(function () { |
272 | | - let timeLeft = animationEnd - Date.now(); |
273 | | -
|
274 | | - if (timeLeft <= 0) { |
275 | | - stopAndCleanup(); |
276 | | - return; |
277 | | - } |
278 | | -
|
279 | | - let particleCount = 50 * (timeLeft / duration); |
280 | | - animation({ ...defaults, particleCount, origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 } }); |
281 | | - animation({ ...defaults, particleCount, origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 } }); |
282 | | - }, 250); |
283 | | - } |
284 | | -
|
285 | | - function stopAndCleanup() { |
286 | | - if (interval) { |
287 | | - clearInterval(interval); |
288 | | - } |
289 | | - $('#birthdayModal').modal('hide'); |
290 | | - if (document.body.contains(birthdayCanvas)) { |
291 | | - document.body.removeChild(birthdayCanvas); |
292 | | - } |
293 | | - } |
294 | | -
|
295 | | - $('#birthdayModal').on('hidden.bs.modal', function () { |
296 | | - stopAndCleanup(); |
297 | | - }); |
298 | | -
|
299 | | - $('#birthdayModal').modal('show'); |
300 | | - startConfetti(); |
301 | | -
|
302 | | - setTimeout(() => { |
303 | | - $('#birthdayModal').modal('hide'); |
304 | | - }, duration); |
305 | | - }); |
| 213 | + AOS.init() |
306 | 214 | </script> |
0 commit comments