110 lines
6.1 KiB
HTML
110 lines
6.1 KiB
HTML
<body>
|
|
<div class="content-top">
|
|
<div class="lc--layout-container lc--full">
|
|
<div class="l--layout l--full">
|
|
<div class="lr--layout-region lr--main">
|
|
<div class="cc--component-container cc--homepage-hero">
|
|
<div class="c--component c--homepage-hero" style="position: relative; overflow: hidden; height: 100vh; max-height: 38.125rem;">
|
|
|
|
<!-- ====== LỚP 1: ẢNH TĨNH (Nằm dưới cùng, sẽ hiện trên Mobile) ====== -->
|
|
<img class="static-fallback-image" src="https://res.cloudinary.com/ipufdhda/image/upload/v1784534008/BANNER-WEB-scaled_yeox4u.jpg" alt="Static Fallback" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1;" />
|
|
|
|
<!-- ====== LỚP 2: SLIDER (Chạy nếu không có Video, Ẩn trên Mobile) ====== -->
|
|
<div class="vanilla-slider desktop-slider" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2;">
|
|
|
|
<div class="v-slide" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 1; transition: opacity 1s ease-in-out;">
|
|
<img src="https://res.cloudinary.com/ipufdhda/image/upload/v1784534008/BANNER-WEB-01-scaled_epe5ui.jpg" style="width: 100%; height: 100%; object-fit: cover;" />
|
|
</div>
|
|
|
|
<div class="v-slide" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease-in-out;">
|
|
<img src="https://res.cloudinary.com/ipufdhda/image/upload/v1784534008/BANNER-WEB-scaled_yeox4u.jpg" style="width: 100%; height: 100%; object-fit: cover;" />
|
|
</div>
|
|
|
|
<div class="v-slide" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease-in-out;">
|
|
<img src="https://res.cloudinary.com/ipufdhda/image/upload/v1784534009/W2-01-scaled_jhmzlv.jpg" style="width: 100%; height: 100%; object-fit: cover;" />
|
|
</div>
|
|
|
|
<!-- Nút điều khiển Slider -->
|
|
<div class="v-btn v-prev" style="position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: white; font-size: 50px; font-weight: bold; cursor: pointer; z-index: 10; pointer-events: auto; text-shadow: 0 2px 4px rgba(0,0,0,0.5); user-select: none;">❮</div>
|
|
<div class="v-btn v-next" style="position: absolute; right: 20px; top: 50%; transform: translateY(-50%); color: white; font-size: 50px; font-weight: bold; cursor: pointer; z-index: 10; pointer-events: auto; text-shadow: 0 2px 4px rgba(0,0,0,0.5); user-select: none;">❯</div>
|
|
</div>
|
|
|
|
<!-- ====== LỚP 3: VIDEO (Nằm trên cùng, đè lên Slider, Ẩn trên Mobile) ====== -->
|
|
<div class="f--ambient-video desktop-video" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none;">
|
|
<video allowfullscreen="allowfullscreen" role="presentation" tabindex="-1" loop="loop" autoplay="autoplay" playsinline="playsinline" muted="muted" style="width: 100%; height: 100%; object-fit: cover;">
|
|
<source src="https://res.cloudinary.com/ipufdhda/video/upload/v1784530171/homepage_f4xed9.mp4" type="video/mp4" />
|
|
</video>
|
|
</div>
|
|
|
|
<!-- ====== LỚP 4: TEXT OVERLAY (Nội dung chữ nằm trên tất cả) ====== -->
|
|
<div class="text-container centered" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none;">
|
|
<div class="slide-text-container-inner" style="pointer-events: auto;">
|
|
<h3>
|
|
<a href="https://www.umass.edu/gateway/why-umass">Stroke International School.</a>
|
|
</h3>
|
|
<div class="f--field f--button">
|
|
<a href="https://www.umass.edu/gateway/why-umass" aria-label="Learn More" data-component-id="umass_base:button" class="button-secondary button-context-dark">
|
|
<span class="button-text"> Tìm Hiểu Thêm </span>
|
|
</a>
|
|
</div>
|
|
[menu:INFO:dropdown]
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
/* Ẩn Video và Slider trên điện thoại, chỉ chừa lại Lớp 1 (Ảnh tĩnh) */
|
|
@media (max-width: 767px) {
|
|
.desktop-slider,
|
|
.desktop-video {
|
|
display: none !important;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const slides = document.querySelectorAll('.vanilla-slider .v-slide');
|
|
const nextBtn = document.querySelector('.vanilla-slider .v-next');
|
|
const prevBtn = document.querySelector('.vanilla-slider .v-prev');
|
|
let currentSlide = 0;
|
|
let slideInterval;
|
|
|
|
function goToSlide(index) {
|
|
if (!slides.length) return;
|
|
slides[currentSlide].style.opacity = 0;
|
|
currentSlide = (index + slides.length) % slides.length;
|
|
slides[currentSlide].style.opacity = 1;
|
|
}
|
|
|
|
function nextSlide() { goToSlide(currentSlide + 1); }
|
|
function prevSlide() { goToSlide(currentSlide - 1); }
|
|
|
|
function startAutoPlay() {
|
|
if (slideInterval) clearInterval(slideInterval);
|
|
slideInterval = setInterval(nextSlide, 3000);
|
|
}
|
|
|
|
if (slides.length > 0 && nextBtn && prevBtn) {
|
|
nextBtn.addEventListener('click', function() { nextSlide(); startAutoPlay(); });
|
|
prevBtn.addEventListener('click', function() { prevSlide(); startAutoPlay(); });
|
|
startAutoPlay();
|
|
}
|
|
});
|
|
</script>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<style>
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
}
|
|
</style> |