<template>
    <div class="row col-md-10 col-md-offset-1">
        <div class="col-md-12">
         
            <div class="centered-container">
    <!-- <h6 class="text-center">Pautan Zoom</h6> -->
    <div class="image-container">
      <img :src="imageUrl" alt="meeting apps" />
    </div>
</div>

            <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-interactive" @click="navigateToURL" target="_blank">
            Klik pada pautan berikut
        </button>
    </div>
</div>

</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://meet.google.com/paa-tpck-ssq';
    }
  },

    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.TGLvYXfe4xq5MTZe4UnTDgHaEy?w=255&h=180&c=7&r=0&o=5&dpr=1.8&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>
  /* 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 */
  }

  /* 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 */
  }

  /* 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>