nurafrinaalimi16
144 lines
3.5 KiB
Vue
144 lines
3.5 KiB
Vue
<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> |