<template>
    <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>

                    <CENTER><h4>SELAMAT DATANG KE MESYUARAT AGUNG TAHUNAN KoPKB 
                    <br> KALI KE-27/2023  </h4></CENTER>

                    <div class ="centered-button">
                        <button class="btn btn-primary" @click=" navigateToURL" target="_blank">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)
    },

    data: function () {
        return {
            x: {}
        }
    },

    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: 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%);

  }
  .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;
 
}


 
</style>


  