Wedding Invitation
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

digital-card.blade.php 7.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170
  1. <!DOCTYPE html>
  2. <html lang="{{ str_replace('_', '-', app()->getLocale()) }}" data-theme="light">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <meta name="color-scheme" content="light only">
  7. <title>{{config('app.name')}}</title>
  8. <link rel="preconnect" href="https://fonts.bunny.net">
  9. <link href="https://fonts.bunny.net/css?family=figtree:400,600&display=swap" rel="stylesheet" />
  10. <link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css" rel="stylesheet" type="text/css" />
  11. <meta name="csrf-token" content="{{ csrf_token() }}">
  12. @vite(['resources/css/app.css','resources/js/app.js'])
  13. <style>
  14. html {
  15. scroll-behavior: smooth;
  16. }
  17. body.no-scroll {
  18. overflow: hidden;
  19. }
  20. .fade-element {
  21. opacity: 0;
  22. transition: opacity 3s ease-in-out;
  23. }
  24. .fade-in {
  25. opacity: 1;
  26. }
  27. .petal-overlay {
  28. position: fixed; /* Fixes the position to the viewport */
  29. top: 0;
  30. left: 0;
  31. width: 100vw;
  32. height: 100vh;
  33. pointer-events: none; /* Allows interactions through the overlay */
  34. z-index: 9999; /* Ensures it is on top of other elements */
  35. opacity: 0.3; /* Set the opacity to a lower value */
  36. display: none; /* Initially hidden */
  37. }
  38. .petal-overlay img {
  39. width: 100%;
  40. height: 100%;
  41. object-fit: cover; /* Ensures the image covers the entire container */
  42. }
  43. </style>
  44. </head>
  45. <body class="antialiased font-serif no-scroll">
  46. <div class="petal-overlay" id="petalOverlay">
  47. <img src="{{ asset('assets/petal.gif') }}" alt="Falling Petals">
  48. </div>
  49. <audio id="player" loop>
  50. <source src="{{ asset('assets/background-musicv2.mp3') }}" type="audio/mp3">
  51. Your browser does not support the audio element.
  52. </audio>
  53. <script>
  54. document.addEventListener('click', function () {
  55. setTimeout(function () {
  56. document.getElementById('petalOverlay').style.display = 'block';
  57. }, 1000); // Delay of 1 second (1000 milliseconds)
  58. });
  59. </script>
  60. <script>
  61. document.addEventListener('DOMContentLoaded', function() {
  62. var audioElement = document.getElementById('player');
  63. var hasPlayed = false; // To ensure audio only plays once upon clicking and scrolling
  64. var scrollCount = 0;
  65. var maxScrolls = 7;
  66. var scrollInterval = 500; // Time in milliseconds between each scroll
  67. var scrollAmount = window.innerHeight / 7; // Amount to scroll per interval
  68. function playAudio() {
  69. if (!hasPlayed) {
  70. console.log('play')
  71. var playPromise = audioElement.play();
  72. if (playPromise !== undefined) {
  73. playPromise.then(function() {
  74. // Automatic playback started!
  75. hasPlayed = true; // Prevent further attempts to play
  76. }).catch(function(error) {
  77. // Automatic playback failed.
  78. console.log('Autoplay failed: ' + error);
  79. });
  80. }
  81. }
  82. }
  83. function smoothScroll() {
  84. if (!hasPlayed) {
  85. playAudio();
  86. scrollCount++;
  87. if (scrollCount >= maxScrolls) {
  88. playAudio();
  89. } else {
  90. window.scrollBy(0, scrollAmount); // Smooth scroll a fraction of the window height
  91. setTimeout(playOnly, scrollInterval);
  92. }
  93. }
  94. }
  95. function playOnly() {
  96. if (!hasPlayed) {
  97. playAudio();
  98. scrollCount++;
  99. if (scrollCount >= maxScrolls) {
  100. playAudio();
  101. } else {
  102. setTimeout(playOnly, scrollInterval);
  103. }
  104. }
  105. }
  106. function handleInteraction() {
  107. document.body.classList.remove('no-scroll'); // Enable scrolling
  108. setTimeout(smoothScroll, scrollInterval); // Start smooth scrolling after initial delay
  109. }
  110. // Listen for click or touch event to start auto-scrolling
  111. window.addEventListener('click', handleInteraction, { once: true });
  112. // Intersection Observer for fading in elements
  113. const observerOptions = {
  114. root: null,
  115. rootMargin: '0px',
  116. threshold: 0.1
  117. };
  118. const observer = new IntersectionObserver((entries, observer) => {
  119. entries.forEach(entry => {
  120. if (entry.isIntersecting) {
  121. entry.target.classList.add('fade-in');
  122. observer.unobserve(entry.target);
  123. }
  124. });
  125. }, observerOptions);
  126. document.querySelectorAll('.fade-element').forEach(element => {
  127. observer.observe(element);
  128. });
  129. });
  130. </script>
  131. <div id="alert-success"></div>
  132. <div class="parent absolute h-screen w-full">
  133. {{-- <audio src="{{asset('assets/paper-ripping.mp3')}}"></audio> --}}
  134. @include('components.front-cover')
  135. </div>
  136. <div class="section bg-babyblue min-h-screen flex justify-center items-center pb-20 fade-element">
  137. @include('components.main-event')
  138. </div>
  139. <div class="section bg-babyblue min-h-screen flex justify-center pb-20 fade-element">
  140. @include('components.event-info')
  141. </div>
  142. <div class="section bg-babyblue flex justify-center pb-20 fade-element">
  143. @include('components.countdown')
  144. </div>
  145. <div class="section bg-babyblue flex justify-center pt-5 pb-20 fade-element">
  146. @include('components.guestbook')
  147. </div>
  148. <div class="section bg-babyblue flex justify-center pt-5 pb-20 fade-element">
  149. @include('components.prayer')
  150. </div>
  151. @include('components.navbar')
  152. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  153. @stack('script')
  154. </body>
  155. </html>