mirfalah-tech
/
digital-card
Watch 12
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

add front cover

am
farhan 4 months ago
parent
a1373b9053
commit
05d87ae67f
10 changed files with 61 additions and 8 deletions
Split View Show Diff Stats
  1. BIN
      public/assets/logo-left.png
  2. BIN
      public/assets/logo-right.png
  3. BIN
      public/assets/name-left.png
  4. BIN
      public/assets/name-right.png
  5. BIN
      public/assets/paper-ripping.mp3
  6. 1
    1
      resources/css/app.css
  7. 30
    0
      resources/js/app.js
  8. 17
    5
      resources/views/components/front-cover.blade.php
  9. 8
    0
      resources/views/components/main-event.blade.php
  10. 5
    2
      resources/views/digital-card.blade.php

BIN
public/assets/logo-left.png View File


BIN
public/assets/logo-right.png View File


BIN
public/assets/name-left.png View File


BIN
public/assets/name-right.png View File


BIN
public/assets/paper-ripping.mp3 View File


+ 1
- 1
resources/css/app.css View File 

@@ -4,4 +4,4 @@
4 4 
 /* Other CSS rules */
5 5 
 @tailwind base;
6 6 
 @tailwind components;
7 
-@tailwind utilities;
7 
+@tailwind utilities;

+ 30
- 0
resources/js/app.js View File 

@@ -51,3 +51,33 @@ const countdownTimer = setInterval(() => {
51 51 
         countdownElement.innerHTML = 'Majlis berlangsung';
52 52 
     }
53 53 
 }, 1000); // Update every second (1000 milliseconds)
54 
+
55 
+$(function() {
56 
+    var partLeftPos = 0;
57 
+    var partRightPos = 0;
58 
+
59 
+    $(window).scroll(function(event) {
60 
+        var distance = $(this).scrollTop() * 2;
61 
+        var left = partLeftPos - distance;
62 
+        var right = partRightPos - distance;
63 
+
64 
+        $('.left').css('left', left + "px");
65 
+        $('.right').css('right', right + "px");
66 
+
67 
+        // Calculate boundaries
68 
+        var leftPartRightEdge = $('.left').offset().left + $('.left').outerWidth();
69 
+
70 
+        // Check if both parts are completely off-screen
71 
+        var isLeftOffScreen = leftPartRightEdge <= 0;
72 
+
73 
+        // Toggle visibility and z-index
74 
+        if (isLeftOffScreen && left < 0) {
75 
+            $('.parent').removeClass(['z-30']);
76 
+        } else {
77 
+            $('.parent').addClass(['z-30']);
78 
+        }
79 
+    });
80 
+
81 
+    // Initially check visibility on page load
82 
+    $(window).trigger('scroll');
83 
+});

+ 17
- 5
resources/views/components/front-cover.blade.php View File 

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

+ 8
- 0
resources/views/components/main-event.blade.php View File 

@@ -0,0 +1,8 @@
1 
+<div class="flex flex-col gap-8 w-4/5">
2 
+    <div class="flex justify-center">
3 
+        <img src="{{ asset('assets/logo.png') }}" alt="Logo" class="logo-img">
4 
+    </div>
5 
+    <div class="flex justify-center">
6 
+        <img src="{{ asset('assets/name.png') }}" alt="Name" class="name-img">
7 
+    </div>
8 
+</div>

+ 5
- 2
resources/views/digital-card.blade.php View File 

@@ -11,14 +11,17 @@
11 11 
         <link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css" rel="stylesheet" type="text/css" />
12 12 
         <meta name="csrf-token" content="{{ csrf_token() }}">
13 13
14 
-
15 14 
         @vite(['resources/css/app.css','resources/js/app.js'])
16 15 
     </head>
17 16 
     <body class="antialiased font-serif">
18 17 
         <div id="alert-success"></div>
19 
-        <div class="section bg-babyblue h-screen flex justify-center items-center">
18 
+        <div class="parent absolute h-screen w-full">
19 
+            <audio src="{{asset('assets/paper-ripping.mp3')}}"></audio>
20 20 
             @include('components.front-cover')
21 21 
         </div>
22 
+        <div class="section bg-babyblue h-screen flex justify-center items-center">
23 
+            @include('components.main-event')
24 
+        </div>
22 25 
         <div class="section bg-babyblue min-h-screen flex justify-center">
23 26 
             @include('components.event-info')
24 27 
         </div>

Write Preview
Loading…
Cancel
Save