update-ui,zoom

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

@@ -1,16 +1,42 @@
 <template>
     <div class="row col-md-10 col-md-offset-1">
         <div class="col-md-12">
-            <h2 class="text-center">Pautan Zoom</h2>
-           
-        </div>
+            <h3 class="text-center">Pautan Zoom</h3>
+           <div>
+            <img :src="imageUrl" alt="Centered Image " class="centered-image" />
+          
+            </div><hr>
+
+                    <CENTER><h4>SELAMAT DATANG KE MESYUARAT AGUNG TAHUNAN KoPKB KALI KE-27/2023</h4></CENTER>
+
+                    <div class ="centered-button">
+                        <button class="btn btn-primary" @click=" navigateToURL">Klik pada pautan berikut >></button>
+                     </div>
+
+
+<!-- 
+                    <div>
+                     <button class="centered-button" @click="handleClick">Klik pada pautan berikut >> </button>
+                    </div> -->
+
+             </div>
 
        
     </div>
 </template>
 
 <script>
+
+
 export default {
+
+    methods: {
+    navigateToURL() {
+      // Navigate to the desired URL
+      window.location.href = 'https://us06web.zoom.us/j/87138156396?pwd=JEakXmAZjRnPeXbPN7K8ajnbL0X77a.1';
+    }
+  },
+
     created: function () {
         //console.log(this)
     },
@@ -21,12 +47,63 @@ export default {
         }
     },
 
-    
-
     computed: {
         header: function () {
             return this.x.name + ' for ' + this.getPosition(this.x.position_id);
         }
+    },
+
+    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'
     }
+  
+    }
+
+   
+//     CustomButton {
+//   }
+//  methods: {
+//   goToDestination() {
+//     // Replace 'destinationURL' with the URL you want to navigate to
+//     window.location.href = 'https://us06web.zoom.us/j/87138156396?pwd=JEakXmAZjRnPeXbPN7K8ajnbL0X77a.1';
+//   }
+// }
+};
+</script>
+<style>
+
+.centered-image {
+    /* Styles for the image */
+    max-width: 30%; /* Ensure the image does not exceed container width */
+    max-height: 30%; /* Ensure the image does not exceed container height */
+    position: relative;
+     /* top: 50%; */
+     left: 50%;
+     transform: translate(-50%, -50%);
+
+  }
+  .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: 5px;
+  cursor: pointer;
+  
 }
-</script>
+.centered-button:hover {
+  /* Button styles on hover */
+  outline-color: #045415;
+ 
+}
+
+
+ 
+</style>
+
+
+