new zoom link

resources/assets/js/components/demo/voter/home/zoom.vue

@@ -2,19 +2,26 @@
     <div class="row col-md-10 col-md-offset-1">
         <div class="col-md-12">
          
-            <h6 class="text-center">Pautan Zoom</h6>
-           <div>
-            <img :src="imageUrl" alt="Centered Image " class="centered-image" />
-          
-            </div><hr>
+            <div class="centered-container">
+    <!-- <h6 class="text-center">Pautan Zoom</h6> -->
+    <div class="image-container">
+      <img :src="imageUrl" alt="meeting apps" />
+    </div>
+</div>
 
-                    <CENTER><h4>SELAMAT DATANG KE MESYUARAT AGUNG TAHUNAN KoPKB 
-                    <br> KALI KE-27/2023  </h4></CENTER>
+            <div class="centered-container">
+    <h3>SELAMAT DATANG KE MESYUARAT AGUNG TAHUNAN
+        <br>  KoPKB <br>KALI KE-28/2024
+    </h3>
 
-                    <div class ="centered-button">
-                        <button class="btn btn-primary" @click=" navigateToURL" target="_blank">Klik pada pautan berikut >></button>
-                     </div>
+    <div class="centered-button">
+        <button class="btn-interactive" @click="navigateToURL" target="_blank">
+            Klik pada pautan berikut
+        </button>
+    </div>
+</div>
 
+</div>
 
 <!-- 
                     <div>
@@ -57,7 +64,7 @@ export default {
 
     data() {
     return {
-        imageUrl:'https://th.bing.com/th/id/OIP.vCNlpyR-8eSN6qHGGIQemAHaCr?w=338&h=126&c=7&r=0&o=5&dpr=2&pid=1.7'
+       imageUrl: 'https://th.bing.com/th/id/OIP.TGLvYXfe4xq5MTZe4UnTDgHaEy?w=255&h=180&c=7&r=0&o=5&dpr=1.8&pid=1.7'
     }
   
     }
@@ -73,39 +80,65 @@ export default {
 // }
 };
 </script>
+
+
 <style>
-
-.centered-image {
-    /* Styles for the image */
-    max-width: 20%; /* Ensure the image does not exceed container width */
-    max-height: 20%; /* Ensure the image does not exceed container height */
-    position: relative;
-     /* top: 50%; */
-     left: 50%;
-     transform: translate(-50%, -50%);
-
+  /* Ensure the page takes the full height of the viewport */
+  html, {
+    height: 100%;
+    margin: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-family: Arial, sans-serif; /* Optional: for a cleaner font */
   }
-  .centered-button {
-  /* Button styles */
-    align-items: center; 
-  /* background-color: #4CAF50; Green */
-  border-color:rgb(219, 222, 226);
-  padding: 20px 40px;
-  text-align: center;
-  color: #fff;
-  border-radius: 15px;
-  cursor: pointer;
-  
-}
-.centered-button:hover {
-  /* Button styles on hover */
-  outline-color: #045415;
- 
-}
 
+  /* Center the container */
+  .centered-container {
+    text-align: center; /* Center the text horizontally */
+    display: flex;
+    flex-direction: column; /* Stack the elements vertically */
+    justify-content: center;
+    align-items: center;
+    height: 100%; /* Full viewport height */
+  }
 
- 
-</style>
+  /* Styling for the heading */
+  h3 {
+    font-size: 24px; /* Optional: set a specific font size */
+    font-weight: bold; /* Optional: make the heading bold */
+    margin-bottom: 20px; /* Optional: space between heading and button */
+  }
 
+  /* Styling for the button */
+  .btn-interactive {
+    padding: 12px 25px;
+    background-color: #007bff; /* Blue background color */
+    color: white;
+    border: none;
+    border-radius: 5px; /* Rounded corners */
+    font-size: 16px;
+    font-weight: bold;
+    cursor: pointer;
+    transition: background-color 0.3s ease, transform 0.2s ease;
+    outline: none; /* Remove outline */
+  }
 
-  
+  /* Hover effect for the button */
+  .btn-interactive:hover {
+    background-color: #0056b3; /* Darker blue background on hover */
+    transform: scale(1.05); /* Slightly enlarge the button on hover */
+  }
+
+  /* Active effect for when the button is clicked */
+  .btn-interactive:active {
+    background-color: #004085; /* Even darker blue when clicked */
+    transform: scale(0.98); /* Slightly shrink the button when clicked */
+  }
+
+  /* Focus effect (when tabbing through elements) */
+  .btn-interactive:focus {
+    outline: none;
+    box-shadow: 0 0 5px 2px rgba(0, 123, 255, 0.5); /* Blue glow on focus */
+  }
+</style>