495 lines
11 KiB
Vue
495 lines
11 KiB
Vue
<template>
|
|
<div class="contact-page-container">
|
|
<div class="logo-section-contact">
|
|
<div class="logo-group-contact">
|
|
<v-img
|
|
src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/Coat_of_arms_of_East_Java.svg/1456px-Coat_of_arms_of_East_Java.svg.png"
|
|
width="50"
|
|
height="50"
|
|
class="logo-img-contact"
|
|
contain
|
|
/>
|
|
<v-img
|
|
src="https://static.wikia.nocookie.net/logopedia/images/1/15/Rumah_Sakit_Umum_Daerah_Dr._Saiful_Anwar.png"
|
|
width="50"
|
|
height="50"
|
|
class="logo-img-contact"
|
|
contain
|
|
/>
|
|
<v-img
|
|
src="https://www.menpan.go.id/site/images/berita_foto_backup/2021/sipanday_berakhlak_bangga-melayani-bangsa/Logo_BerAKHLAK.png"
|
|
width="50"
|
|
height="50"
|
|
class="logo-img-contact"
|
|
contain
|
|
/>
|
|
<v-img
|
|
src="https://rsusaifulanwar.jatimprov.go.id/v2/img/KARS_RSSA.png"
|
|
width="50"
|
|
height="50"
|
|
class="logo-img-contact"
|
|
contain
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-section-contact">
|
|
<div class="title-section-contact">
|
|
<h1 class="main-title-contact">With Love We Serve</h1>
|
|
<p class="subtitle-contact">
|
|
Kami Menyediakan Layanan Medis yang Dapat Anda Percayai
|
|
</p>
|
|
</div>
|
|
|
|
<div class="banner-carousel-container">
|
|
<v-carousel
|
|
v-model="currentSlide"
|
|
:show-arrows="true"
|
|
:hide-delimiters="false"
|
|
:cycle="false"
|
|
:interval="0"
|
|
class="banner-carousel"
|
|
height="300"
|
|
:continuous="false"
|
|
>
|
|
<v-carousel-item
|
|
v-for="(item, index) in carouselItems"
|
|
:key="index"
|
|
class="carousel-item"
|
|
>
|
|
<template v-if="item.isImage">
|
|
<v-img :src="item.src" :alt="item.alt" cover class="fill-height">
|
|
<div class="carousel-overlay">
|
|
<div class="overlay-content">
|
|
<h3 class="overlay-title">{{ item.title }}</h3>
|
|
<p class="overlay-description">{{ item.description }}</p>
|
|
</div>
|
|
</div>
|
|
</v-img>
|
|
</template>
|
|
<template v-else>
|
|
<div class="video-container">
|
|
<iframe
|
|
v-if="currentSlide === index"
|
|
:src="getYouTubeEmbedUrl(item.videoId)"
|
|
width="100%"
|
|
height="100%"
|
|
frameborder="0"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
allowfullscreen
|
|
class="youtube-iframe"
|
|
@load="onVideoLoad"
|
|
@error="onVideoError"
|
|
></iframe>
|
|
|
|
<div
|
|
v-else
|
|
class="video-thumbnail"
|
|
@click="currentSlide = index"
|
|
>
|
|
<img
|
|
:src="`https://img.youtube.com/vi/${item.videoId}/maxresdefault.jpg`"
|
|
alt="Video thumbnail"
|
|
class="thumbnail-img"
|
|
/>
|
|
<div class="play-button-overlay">
|
|
<v-icon color="white" size="48">mdi-play-circle</v-icon>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</v-carousel-item>
|
|
</v-carousel>
|
|
|
|
<div class="custom-indicators">
|
|
<span
|
|
v-for="(item, index) in carouselItems"
|
|
:key="index"
|
|
:class="['indicator-dot', { active: currentSlide === index }]"
|
|
@click="currentSlide = index"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="orange-background-contact">
|
|
<div class="contact-info-section-contact">
|
|
<div class="contact-item-contact">
|
|
<div class="contact-icon-contact whatsapp-icon">
|
|
<v-icon color="#25D366" size="24">mdi-whatsapp</v-icon>
|
|
</div>
|
|
<div class="contact-text-contact">+62 815-5560-6668</div>
|
|
</div>
|
|
<div class="contact-item-contact">
|
|
<div class="contact-icon-contact instagram-icon">
|
|
<v-icon color="#E1306C" size="24">mdi-instagram</v-icon>
|
|
</div>
|
|
<div class="contact-text-contact">rssasaifulanwar</div>
|
|
</div>
|
|
<div class="contact-item-contact">
|
|
<div class="contact-icon-contact phone-icon">
|
|
<v-icon color="#FF9248" size="24">mdi-phone</v-icon>
|
|
</div>
|
|
<div class="contact-text-contact">0341-362101</div>
|
|
</div>
|
|
<div class="contact-item-contact">
|
|
<div class="contact-icon-contact web-icon">
|
|
<v-icon color="#2196F3" size="24">mdi-web</v-icon>
|
|
</div>
|
|
<div class="contact-text-contact">rsusaifulanwar.jatimprov.go.id</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, watch, nextTick } from "vue";
|
|
import { usePaymentStore } from "~/stores/payment";
|
|
|
|
const paymentStore = usePaymentStore();
|
|
const currentSlide = ref(0);
|
|
const videoLoaded = ref({});
|
|
|
|
const carouselItems = ref([
|
|
{
|
|
src: "https://i.ytimg.com/vi/4LRCHhepGmw/maxresdefault.jpg",
|
|
alt: "RSUD Dr. Saiful Anwar Main Building",
|
|
title: "Fasilitas Modern",
|
|
description: "Rumah sakit dengan teknologi medis terdepan",
|
|
isImage: true,
|
|
},
|
|
{
|
|
videoId: "KQZFfRtMHe0",
|
|
isImage: false,
|
|
loaded: false,
|
|
},
|
|
{
|
|
src: "https://rsusaifulanwar.jatimprov.go.id/v2/img/slider/slide1.jpg",
|
|
alt: "Medical Services",
|
|
title: "Pelayanan Terbaik",
|
|
description: "Tim medis profesional siap melayani 24 jam",
|
|
isImage: true,
|
|
},
|
|
]);
|
|
|
|
const getYouTubeEmbedUrl = (videoId) => {
|
|
const baseUrl = 'https://www.youtube.com/embed/';
|
|
const params = new URLSearchParams({
|
|
autoplay: '1',
|
|
mute: '0',
|
|
controls: '1',
|
|
modestbranding: '1',
|
|
rel: '0',
|
|
showinfo: '0',
|
|
fs: '1',
|
|
cc_load_policy: '0',
|
|
iv_load_policy: '3',
|
|
autohide: '0'
|
|
});
|
|
return `${baseUrl}${videoId}?${params.toString()}`;
|
|
};
|
|
|
|
const onVideoLoad = () => {
|
|
console.log('Video iframe loaded successfully');
|
|
};
|
|
|
|
const onVideoError = (error) => {
|
|
console.error('Video iframe error:', error);
|
|
};
|
|
|
|
const navigateToQrisPayment = () => {
|
|
console.log("Navigating to QRIS Payment...");
|
|
|
|
};
|
|
|
|
const navigateToDebugPage = () => {
|
|
console.log("Navigating to Debug Page...");
|
|
|
|
};
|
|
|
|
watch(currentSlide, (newSlide, oldSlide) => {
|
|
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.contact-page-container {
|
|
min-height:auto;
|
|
width: 100%;
|
|
background: white;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.orange-background-contact {
|
|
width: 100%;
|
|
height: clamp(80px, 12vh, 180px);
|
|
background: #ff9248;
|
|
border-top-left-radius: 40px;
|
|
border-top-right-radius: 40px;
|
|
z-index: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding-bottom: 10px;
|
|
margin-top: auto;
|
|
}
|
|
|
|
.logo-section-contact {
|
|
position: relative;
|
|
z-index: 2;
|
|
padding: 8px 12px;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.logo-group-contact {
|
|
display: flex;
|
|
gap: 1rem;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
|
|
.logo-img-contact {
|
|
transition: transform 0.3s ease;
|
|
width: clamp(20px, 5vw, 50px) !important;
|
|
height: clamp(20px, 5vw, 50px) !important;
|
|
}
|
|
|
|
.logo-img-contact:hover {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.content-section-contact {
|
|
position: relative;
|
|
z-index: 2;
|
|
flex-grow: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
padding: 5px 15px;
|
|
}
|
|
|
|
.title-section-contact {
|
|
text-align: center;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.main-title-contact {
|
|
color: #ff9248;
|
|
font-size: clamp(2rem, 2vw, 1.5rem);
|
|
font-family: "Roboto", sans-serif;
|
|
font-weight: 800;
|
|
margin-bottom: 8px;
|
|
line-height: 0.8;
|
|
}
|
|
|
|
.subtitle-contact {
|
|
color: black;
|
|
font-size: clamp(0.8rem, 1.8vw, 1rem);
|
|
font-family: "Roboto", sans-serif;
|
|
font-weight: 500;
|
|
margin: 0;
|
|
max-width: 500px;
|
|
}
|
|
|
|
.banner-carousel-container {
|
|
width: 95%;
|
|
max-width: 800px;
|
|
margin-bottom: 20px;
|
|
position: relative;
|
|
border-radius: 15px;
|
|
overflow: hidden;
|
|
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.banner-carousel {
|
|
border-radius: 15px;
|
|
overflow: hidden;
|
|
height: clamp(300px, 45vh, 400px);
|
|
}
|
|
|
|
.carousel-item {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 350px;
|
|
}
|
|
|
|
.video-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
background: #000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.youtube-iframe {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: none;
|
|
border-radius: 15px;
|
|
}
|
|
|
|
.video-thumbnail {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.thumbnail-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
border-radius: 15px;
|
|
}
|
|
|
|
.play-button-overlay {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: rgba(0, 0, 0, 0.7);
|
|
border-radius: 50%;
|
|
padding: 15px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.play-button-overlay:hover {
|
|
background: rgba(0, 0, 0, 0.9);
|
|
transform: translate(-50%, -50%) scale(1.1);
|
|
}
|
|
|
|
.carousel-overlay {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
|
|
color: white;
|
|
padding: 30px 20px 20px;
|
|
z-index: 2;
|
|
}
|
|
|
|
.overlay-content {
|
|
max-width: 500px;
|
|
}
|
|
|
|
.overlay-title {
|
|
font-size: clamp(1.2rem, 1.8vw, 1.6rem);
|
|
font-weight: 700;
|
|
margin-bottom: 6px;
|
|
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.overlay-description {
|
|
font-size: clamp(0.8rem, 1.3vw, 1rem);
|
|
font-weight: 400;
|
|
margin: 0;
|
|
opacity: 0.9;
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.custom-indicators {
|
|
position: absolute;
|
|
bottom: 10px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
display: flex;
|
|
gap: 10px;
|
|
z-index: 3;
|
|
}
|
|
|
|
.indicator-dot {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.5);
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.indicator-dot.active {
|
|
background: #ff9248;
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
.indicator-dot:hover {
|
|
background: rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
.contact-info-section-contact {
|
|
display: flex;
|
|
gap: 1.5rem;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
width: 100%;
|
|
}
|
|
|
|
.contact-item-contact {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.contact-icon-contact {
|
|
width: 35px;
|
|
height: 35px;
|
|
border-radius: 80%;
|
|
background: white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.contact-icon-contact:hover {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.contact-text-contact {
|
|
color: white;
|
|
font-size: 12px;
|
|
font-family: "Roboto", sans-serif;
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.cta-section-contact {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.cta-button {
|
|
width: 100%;
|
|
max-width: 250px;
|
|
font-weight: 700;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.debug-button {
|
|
background: #808080 !important;
|
|
}
|
|
|
|
:deep(.v-carousel__controls) {
|
|
display: none;
|
|
}
|
|
|
|
:deep(.v-carousel__controls--bottom) {
|
|
bottom: 40px !important;
|
|
}
|
|
</style> |