DONE: enhance UI on admin and voter side, add docker config, fix delete button modal not showing
This commit is contained in:
ISMAIL MASSERAN
@@ -1,144 +1,247 @@
|
||||
<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 class="row col-md-10 col-md-offset-1 zoom-page">
|
||||
<div class="col-md-12">
|
||||
<div class="zoom-hero-card">
|
||||
<div class="zoom-section-kicker">Pautan Mesyuarat</div>
|
||||
<h3 class="zoom-title">SELAMAT DATANG KE MESYUARAT AGUNG TAHUNAN</h3>
|
||||
<p class="zoom-subtitle">
|
||||
Sertai Mesyuarat Agung Tahunan KoPKB kali ke-28/2024 melalui pautan rasmi di bawah.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="zoom-main-card">
|
||||
<div class="centered-container zoom-image-section">
|
||||
<div class="image-container zoom-image-card">
|
||||
<img :src="imageUrl" alt="meeting apps" class="zoom-image" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="centered-container zoom-content-section">
|
||||
<div class="zoom-meeting-badge">
|
||||
KoPKB KALI KE-28/2024
|
||||
</div>
|
||||
<h4 class="zoom-content-title">Google Meet Rasmi</h4>
|
||||
<p class="zoom-content-text">
|
||||
Pastikan anda telah mendaftar kehadiran dan bersedia dengan sambungan internet yang stabil sebelum menyertai
|
||||
mesyuarat.
|
||||
</p>
|
||||
|
||||
<div class="zoom-action-panel">
|
||||
<button class="btn-interactive" @click="navigateToURL" type="button">
|
||||
<i class="fa fa-video-camera"></i> Klik pada pautan berikut
|
||||
</button>
|
||||
<div class="zoom-link-note">
|
||||
Pautan akan dibuka terus ke sesi mesyuarat rasmi.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
export default {
|
||||
|
||||
methods: {
|
||||
navigateToURL() {
|
||||
// Navigate to the desired URL
|
||||
window.location.href = 'https://meet.google.com/paa-tpck-ssq';
|
||||
}
|
||||
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',
|
||||
meetingUrl: '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'
|
||||
methods: {
|
||||
navigateToURL() {
|
||||
window.open(this.meetingUrl, '_blank');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// 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;
|
||||
<style scoped>
|
||||
.zoom-page {
|
||||
font-family: Arial, sans-serif;
|
||||
margin-top: 18px;
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
|
||||
.zoom-hero-card {
|
||||
margin-bottom: 22px;
|
||||
padding: 26px 28px;
|
||||
border-radius: 22px;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #eef6ff 100%);
|
||||
border: 1px solid #e2ebf5;
|
||||
box-shadow: 0 16px 34px rgba(35, 64, 97, 0.08);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.zoom-section-kicker {
|
||||
margin-bottom: 8px;
|
||||
color: #2f80ed;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.zoom-title {
|
||||
margin: 0 0 10px;
|
||||
color: #17324d;
|
||||
font-size: 2.8rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.zoom-subtitle {
|
||||
max-width: 720px;
|
||||
margin: 0 auto;
|
||||
color: #5f7388;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.zoom-main-card {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
|
||||
gap: 24px;
|
||||
padding: 24px;
|
||||
border-radius: 22px;
|
||||
background: #fff;
|
||||
border: 1px solid #e2ebf5;
|
||||
box-shadow: 0 16px 34px rgba(35, 64, 97, 0.08);
|
||||
}
|
||||
|
||||
.centered-container {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 40vh;
|
||||
}
|
||||
|
||||
.zoom-image-card {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 18px;
|
||||
border: 1px solid #dbe7f3;
|
||||
background: #f4f8fd;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.zoom-image {
|
||||
width: 100%;
|
||||
max-height: 420px;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.zoom-content-section {
|
||||
align-items: flex-start;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.zoom-meeting-badge {
|
||||
margin-bottom: 12px;
|
||||
padding: 8px 12px;
|
||||
border-radius: 999px;
|
||||
background: #e8f1ff;
|
||||
color: #215db8;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.zoom-content-title {
|
||||
margin: 0 0 10px;
|
||||
color: #17324d;
|
||||
font-size: 2.4rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.zoom-content-text {
|
||||
margin-bottom: 18px;
|
||||
color: #5f7388;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.zoom-action-panel {
|
||||
width: 100%;
|
||||
padding: 18px;
|
||||
border-radius: 18px;
|
||||
background: linear-gradient(180deg, #f8fbff 0%, #eef6ff 100%);
|
||||
border: 1px solid #d9e8fb;
|
||||
box-shadow: 0 12px 28px rgba(35, 64, 97, 0.07);
|
||||
}
|
||||
|
||||
.btn-interactive {
|
||||
padding: 14px 26px;
|
||||
background: linear-gradient(135deg, #0d6efd, #2f80ed);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 999px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
|
||||
outline: none;
|
||||
box-shadow: 0 12px 24px rgba(13, 110, 253, 0.25);
|
||||
}
|
||||
|
||||
.btn-interactive:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 16px 28px rgba(13, 110, 253, 0.3);
|
||||
}
|
||||
|
||||
.btn-interactive:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.btn-interactive:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 5px 2px rgba(0, 123, 255, 0.5);
|
||||
}
|
||||
|
||||
.zoom-link-note {
|
||||
margin-top: 12px;
|
||||
color: #5f7388;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.zoom-main-card {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.zoom-content-section {
|
||||
align-items: center;
|
||||
font-family: Arial, sans-serif; /* Optional: for a cleaner font */
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.zoom-hero-card,
|
||||
.zoom-main-card {
|
||||
padding: 18px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
/* 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 */
|
||||
.zoom-title {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
/* 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 */
|
||||
.zoom-subtitle,
|
||||
.zoom-content-text {
|
||||
font-size: 1.35rem;
|
||||
}
|
||||
|
||||
.zoom-content-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
/* 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 */
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user