feat: update footer hospital information, adjust CSS breakpoints, and reorganize main content blocks with new news and events sections.
This commit is contained in:
Binary file not shown.
|
After Width: | Height: | Size: 314 KiB |
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 195 KiB |
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 309 KiB |
Binary file not shown.
+27
-34
@@ -1,35 +1,28 @@
|
||||
<body>
|
||||
<div data-component-id="umass_base:block-multiple-ctas" data-background="solid" data-layout-variant="default">
|
||||
<div class="container">
|
||||
<div class="text-container">
|
||||
<div data-component-id="umass_base:section-title" class="f--section-title">
|
||||
<h2>TÌM HIỂU<span class="highlight">KHOA ĐIỀU TRỊ</span>
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="links-container">
|
||||
<div class="f--field f--button">
|
||||
<a href="https://www.umass.edu/admissions/apply" class="button-text-link button-context-light " aria-label="Apply" target="_self" data-component-id="umass_base:button">
|
||||
<span class="button-text"> Apply </span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="f--field f--button">
|
||||
<a href="https://www.umass.edu/gateway/academics/explore-our-programs" class="button-text-link button-context-light " aria-label="Majors & Minors" target="_self" data-component-id="umass_base:button">
|
||||
<span class="button-text"> Majors & Minors </span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="f--field f--button">
|
||||
<a href="https://www.umass.edu/admissions/undergraduate-admissions/costs-aid" class="button-text-link button-context-light " aria-label="Tuition & Costs" target="_self" data-component-id="umass_base:button">
|
||||
<span class="button-text"> Tuition & Costs </span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="f--field f--button">
|
||||
<a href="https://www.umass.edu/admissions/visit" class="button-text-link button-context-light " aria-label="Take a Tour" target="_self" data-component-id="umass_base:button">
|
||||
<span class="button-text"> Take a Tour </span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<style>* { box-sizing: border-box; } body {margin: 0;}</style>
|
||||
<div class="container" th:unless="${ctaMenu != null and not #lists.isEmpty(ctaMenu.items)}">
|
||||
<div class="text-container">
|
||||
<div data-component-id="umass_base:section-title" class="f--section-title">
|
||||
<h2>TÌM HIỂU<span class="highlight">CHUYÊN KHOA</span></h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="links-container">
|
||||
[menu:CTA]
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.links-container {
|
||||
display: grid !important;
|
||||
grid-template-columns: repeat(2, 1fr) !important;
|
||||
gap: 1rem;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.links-container {
|
||||
grid-template-columns: 1fr !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,115 +1,142 @@
|
||||
<style>
|
||||
.education-slider-wrapper {
|
||||
position: relative;
|
||||
padding: 0 30px; /* Space for buttons */
|
||||
}
|
||||
.education-slider-container {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
.education-slider-wrapper .news-grid,
|
||||
.education-slider-wrapper .row,
|
||||
.education-slider-track {
|
||||
display: flex !important;
|
||||
flex-wrap: nowrap !important;
|
||||
gap: 20px;
|
||||
margin: 0 !important;
|
||||
transition: transform 0.4s ease;
|
||||
}
|
||||
/* Force children to be fixed width cards */
|
||||
.education-slider-wrapper .news-grid > *,
|
||||
.education-slider-wrapper .row > *,
|
||||
.education-slider-track > * {
|
||||
flex: 0 0 calc(33.333% - 14px) !important; /* show 3 cards at a time */
|
||||
max-width: none !important;
|
||||
}
|
||||
@media (max-width: 992px) {
|
||||
.education-slider-wrapper .news-grid > *,
|
||||
.education-slider-wrapper .row > *,
|
||||
.education-slider-track > * {
|
||||
flex: 0 0 calc(50% - 10px) !important;
|
||||
}
|
||||
}
|
||||
@media (max-width: 576px) {
|
||||
.education-slider-wrapper .news-grid > *,
|
||||
.education-slider-wrapper .row > *,
|
||||
.education-slider-track > * {
|
||||
flex: 0 0 100% !important;
|
||||
}
|
||||
}
|
||||
<div class="cc--component-container cc--news-events">
|
||||
<div class="c--component c--news-events">
|
||||
|
||||
.edu-slider-btn {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(200,200,200,0.5); /* mờ / transparent */
|
||||
color: #333;
|
||||
border: none;
|
||||
font-size: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
z-index: 10;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
line-height: 1;
|
||||
}
|
||||
.edu-slider-btn:hover {
|
||||
background-color: rgba(0,0,0,0.7);
|
||||
color: #fff;
|
||||
}
|
||||
.edu-slider-btn.prev-btn {
|
||||
left: -10px;
|
||||
}
|
||||
.edu-slider-btn.next-btn {
|
||||
right: -10px;
|
||||
}
|
||||
.edu-slider-btn:disabled {
|
||||
opacity: 0.2;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<div class="cc--component-container cc--news-events">
|
||||
<div class="c--component c--news-events"><!-- Header -->
|
||||
<div class="news-events-row">
|
||||
<div class="education-column news-column" style="width: 100%;">
|
||||
<div style="display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid var(--color-brand); margin-bottom: 16px;">
|
||||
<!-- Thêm flex-grow: 1 vào style của h2 -->
|
||||
<h2 class="section-title--news" style="font-size: 2rem; margin: 0; padding-bottom: 4px; border-bottom: unset;">ĐÀO TẠO</h2>
|
||||
<a href="/news/education" class="news-events-section__cta news-events-section__cta--desktop" style="color: var(--color-brand); font-weight: 800; font-size: 16px; text-transform: uppercase; text-decoration: none; border-bottom: unset;">XEM THÊM</a>
|
||||
</div>
|
||||
<div class="news-list education-slider-wrapper" style="padding-right: 0;">
|
||||
<button class="edu-slider-btn prev-btn" aria-label="Previous">‹</button>
|
||||
<div class="education-slider-container">
|
||||
<div class="education-slider-track">
|
||||
[component:news-grid data-source="posts:tag=education,limit=5,collection=news_posts"]
|
||||
</div>
|
||||
</div>
|
||||
<button class="edu-slider-btn next-btn" aria-label="Next">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- Mobile Footer CTA -->
|
||||
<div class="news-events-section__footer"><a href="/news/education" class="news-events-section__cta news-events-section__cta--mobile">Xem Thêm</a></div>
|
||||
<!-- Phần 2 cột: Tin mới (Trái) và Sự kiện (Phải) -->
|
||||
<div class="news-events-row">
|
||||
|
||||
<div class="news-column">
|
||||
<h2 class="section-title--news" style="font-size: 2rem;">
|
||||
TIN TỨC MỚI
|
||||
</h2>
|
||||
<div class="news-slider-wrapper">
|
||||
<button class="news-slider-btn prev-btn" aria-label="Previous">‹</button>
|
||||
<div class="news-slider-container">
|
||||
<div class="news-slider-track">
|
||||
<!-- Shortcode Tin Tức hiển thị dạng list (limit tăng lên 6 để có thể trượt) -->
|
||||
[component:news-grid data-source="posts:tag=news,limit=6,collection=news_posts"]
|
||||
</div>
|
||||
</div>
|
||||
<button class="news-slider-btn next-btn" aria-label="Next">›</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="events-column">
|
||||
<h2 class="events-title" style="font-size: 2rem;">
|
||||
SỰ KIỆN
|
||||
</h2>
|
||||
<div class="events-widget">
|
||||
<!-- Shortcode Sự kiện -->
|
||||
[component:events-list data-source="posts:tag=event,limit=4,collection=event_posts"]
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<!-- Header chung (Mobile) -->
|
||||
<div class="news-events-section__footer">
|
||||
<a href="/news/news-events" class="news-events-section__cta news-events-section__cta--mobile">
|
||||
Xem Thêm
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.news-slider-wrapper {
|
||||
position: relative;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.news-slider-container {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.news-slider-wrapper .news-grid,
|
||||
.news-slider-wrapper .row,
|
||||
.news-slider-track {
|
||||
display: flex !important;
|
||||
flex-wrap: nowrap !important;
|
||||
gap: 20px;
|
||||
margin: 0 !important;
|
||||
transition: transform 0.4s ease;
|
||||
}
|
||||
|
||||
/* Force children to be fixed width cards - 2 cards at a time because this column is narrow */
|
||||
.news-slider-wrapper .news-grid > *,
|
||||
.news-slider-wrapper .row > *,
|
||||
.news-slider-track > * {
|
||||
flex: 0 0 calc(50% - 10px) !important;
|
||||
max-width: none !important;
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.news-slider-wrapper .news-grid > *,
|
||||
.news-slider-wrapper .row > *,
|
||||
.news-slider-track > * {
|
||||
flex: 0 0 calc(50% - 10px) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.news-slider-wrapper .news-grid > *,
|
||||
.news-slider-wrapper .row > *,
|
||||
.news-slider-track > * {
|
||||
flex: 0 0 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.news-slider-btn {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(200, 200, 200, 0.5);
|
||||
color: #333;
|
||||
border: none;
|
||||
font-size: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
z-index: 10;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.news-slider-btn:hover {
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.news-slider-btn.prev-btn {
|
||||
left: -15px;
|
||||
}
|
||||
|
||||
.news-slider-btn.next-btn {
|
||||
right: -15px;
|
||||
}
|
||||
|
||||
.news-slider-btn:disabled {
|
||||
opacity: 0.2;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
const wrappers = document.querySelectorAll('.education-slider-wrapper');
|
||||
const wrappers = document.querySelectorAll('.news-slider-wrapper');
|
||||
wrappers.forEach(wrapper => {
|
||||
const prevBtn = wrapper.querySelector('.prev-btn');
|
||||
const nextBtn = wrapper.querySelector('.next-btn');
|
||||
|
||||
let track = wrapper.querySelector('.education-slider-track');
|
||||
let track = wrapper.querySelector('.news-slider-track');
|
||||
if (track && track.children.length === 1 && (track.children[0].classList.contains('news-grid') || track.children[0].classList.contains('row'))) {
|
||||
track = track.children[0];
|
||||
track.classList.add('education-slider-track');
|
||||
track.classList.add('news-slider-track');
|
||||
}
|
||||
|
||||
if (!track) return;
|
||||
@@ -124,7 +151,7 @@ document.addEventListener("DOMContentLoaded", function() {
|
||||
const gap = parseFloat(window.getComputedStyle(track).gap) || 20;
|
||||
track.style.transform = `translateX(-${currentIndex * (itemWidth + gap)}px)`;
|
||||
|
||||
const containerWidth = wrapper.querySelector('.education-slider-container').getBoundingClientRect().width;
|
||||
const containerWidth = wrapper.querySelector('.news-slider-container').getBoundingClientRect().width;
|
||||
const visibleCount = Math.max(1, Math.floor((containerWidth + gap) / (itemWidth + gap)));
|
||||
|
||||
prevBtn.disabled = currentIndex === 0;
|
||||
@@ -142,7 +169,7 @@ document.addEventListener("DOMContentLoaded", function() {
|
||||
const items = track.children;
|
||||
const itemWidth = items[0].getBoundingClientRect().width;
|
||||
const gap = parseFloat(window.getComputedStyle(track).gap) || 20;
|
||||
const containerWidth = wrapper.querySelector('.education-slider-container').getBoundingClientRect().width;
|
||||
const containerWidth = wrapper.querySelector('.news-slider-container').getBoundingClientRect().width;
|
||||
const visibleCount = Math.max(1, Math.floor((containerWidth + gap) / (itemWidth + gap)));
|
||||
|
||||
if (currentIndex < items.length - visibleCount) {
|
||||
@@ -156,7 +183,7 @@ document.addEventListener("DOMContentLoaded", function() {
|
||||
if(items.length === 0) return;
|
||||
const itemWidth = items[0].getBoundingClientRect().width;
|
||||
const gap = parseFloat(window.getComputedStyle(track).gap) || 20;
|
||||
const containerWidth = wrapper.querySelector('.education-slider-container').getBoundingClientRect().width;
|
||||
const containerWidth = wrapper.querySelector('.news-slider-container').getBoundingClientRect().width;
|
||||
const visibleCount = Math.max(1, Math.floor((containerWidth + gap) / (itemWidth + gap)));
|
||||
|
||||
if (currentIndex > items.length - visibleCount) {
|
||||
@@ -168,4 +195,4 @@ document.addEventListener("DOMContentLoaded", function() {
|
||||
setTimeout(updateSlider, 200);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</script>
|
||||
File diff suppressed because one or more lines are too long
@@ -4,75 +4,96 @@
|
||||
<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">
|
||||
<div class="slides-container">
|
||||
<div class="image-video-container has-video">
|
||||
<img src="https://www.umass.edu/sites/default/files/styles/1_1_1920x1920/public/2025-09/250616_UMASS_4515.jpg" alt="Students collaborate using a driving simulator in the UMass Center for Transportation." srcset="https://www.umass.edu/sites/default/files/styles/1_1_1920x1920/public/2025-09/250616_UMASS_4515.jpg?h=9855f42d&itok=d27r8GaT 1920w" />
|
||||
<div class="f--ambient-video">
|
||||
<video allowfullscreen="allowfullscreen" role="presentation" tabindex="-1" loop autoplay playsinline="" muted controls>
|
||||
<source src="https://api-files.sproutvideo.com/file/aa9ad8b61e11ebc420/de09e4945c49091f/1080.mp4" type="video/mp4" />
|
||||
</video>
|
||||
</div>
|
||||
<div data-once="ambientVideo" class="video-controls">
|
||||
<div class="video-controls-inner">
|
||||
<button aria-labelledby="pauseBtn" class="video-button video-pause-button">
|
||||
<svg height="14" viewBox="0 0 10 14" width="10" xmlns="http://www.w3.org/2000/svg">
|
||||
<title id="pauseBtn">Pause Background Video</title>
|
||||
<path d="m1143 711v14h-3v-14zm7 0v14h-3v-14z" fill="#fff" fill-rule="evenodd" transform="translate(-1140 -711)"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<button aria-labelledby="playBtn" class="video-button video-play-button">
|
||||
<svg height="29" viewBox="0 0 29 29" width="29" xmlns="http://www.w3.org/2000/svg">
|
||||
<title id="playBtn">Play Background Video</title>
|
||||
<path d="m17.5 3c-7.99789474 0-14.5 6.50210526-14.5 14.5 0 7.9978947 6.50210526 14.5 14.5 14.5 7.9978947 0 14.5-6.5021053 14.5-14.5 0-7.99789474-6.5021053-14.5-14.5-14.5zm5.6763936 15.2939067-7.3503366 4.5939604c-.6635721.408352-1.5313202-.051044-1.5313202-.8422261v-9.1879207c0-.7911821.8677481-1.2761001 1.5313202-.8422261l7.3503366 4.5939604c.612528.38283.612528 1.3016221 0 1.6844521z" fill="#fff" fill-rule="evenodd" transform="translate(-3 -3)"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<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="text-container centered">
|
||||
<div class="slide-text-container-inner">
|
||||
<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 Learn more about UMass Amherst." data-component-id="umass_base:button" class="button-secondary button-context-dark">
|
||||
<span class="button-text"> Learn More </span>
|
||||
</a>
|
||||
</div>
|
||||
<nav class="mc--menu mc--info-menu" th:if="${infoMenu != null and not #lists.isEmpty(infoMenu.items)}">
|
||||
<ul class="menu m--menu m--info-menu">
|
||||
<li class="menu-item menu-item--expanded">
|
||||
<details class="utility-button-wrapper mc--info-menu-container">
|
||||
<summary type="button" aria-label="Display submenu for Information menu" aria-expanded="false" aria-haspopup="true" class="utility-button arrow-toggle information-for-toggle">
|
||||
<span th:text="${infoMenu.name}">Info For</span>
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 7" enable-background="new 0 0 16 7" xml:space="preserve" width="16" height="7" class="arrow">
|
||||
<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#ffffff" points="7,7 0,0 16,0 "></polygon>
|
||||
</svg>
|
||||
</summary>
|
||||
<div class="submenu-wrapper">
|
||||
<ul class="submenu">
|
||||
<li class="menu-item" th:each="item : ${infoMenu.items}">
|
||||
<a th:href="${item.url}" th:text="${item.label}">Prospective Students</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</details>
|
||||
<div class="submenu-wrapper-desktop">
|
||||
<ul class="submenu">
|
||||
<li class="menu-item" th:each="item : ${infoMenu.items}">
|
||||
<a th:href="${item.url}" th:text="${item.label}">Prospective Students</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<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>
|
||||
|
||||
Binary file not shown.
@@ -111,8 +111,8 @@ body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
|
||||
4. Media Queries
|
||||
========================================================================== */
|
||||
|
||||
/* --- Mobile (<= 768px) --- */
|
||||
@media (max-width: 768px) {
|
||||
/* --- Mobile (< 768px) --- */
|
||||
@media (max-width: 767px) {
|
||||
/* Hide ambient video on mobile to save bandwidth and use image fallback */
|
||||
.f--ambient-video,
|
||||
.video-controls {
|
||||
@@ -120,15 +120,19 @@ body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
|
||||
}
|
||||
|
||||
.cc--tabbed-media-content {
|
||||
.c--tabbed-media-content {
|
||||
max-width: var(--max-width);
|
||||
margin: 0 auto;
|
||||
padding: var(--s2) var(--s1);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--s2);
|
||||
.c--tabbed-media-content {
|
||||
max-width: var(--max-width);
|
||||
margin: 0 auto;
|
||||
padding: var(--s2) var(--s1);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--s2);
|
||||
}
|
||||
}
|
||||
}
|
||||
.header-hospital-name {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* --- Mobile & Tablet (<= 1024px) --- */
|
||||
|
||||
BIN
Binary file not shown.
BIN
Binary file not shown.
BIN
Binary file not shown.
BIN
Binary file not shown.
BIN
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 3.0 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.0 MiB After Width: | Height: | Size: 7.0 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 MiB After Width: | Height: | Size: 7.8 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.1 MiB After Width: | Height: | Size: 6.5 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 MiB After Width: | Height: | Size: 6.7 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.7 MiB After Width: | Height: | Size: 6.4 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 MiB After Width: | Height: | Size: 3.2 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 MiB After Width: | Height: | Size: 3.1 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 MiB After Width: | Height: | Size: 2.1 MiB |
BIN
Binary file not shown.
BIN
Binary file not shown.
BIN
Binary file not shown.
BIN
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 314 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 195 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 309 KiB |
@@ -154,18 +154,18 @@
|
||||
|
||||
<div class="sis-footer-right">
|
||||
<div class="sis-hospital-box">
|
||||
<h3>Bệnh viện 1</h3>
|
||||
<p>215 Hồng Bàng, Phường 11, Quận 5,<br>TP. Hồ Chí Minh</p>
|
||||
<p><strong>Hotline:</strong> (84.28) 3855 4269</p>
|
||||
<p><strong>Email:</strong> bvdhyd@umc.edu.vn</p>
|
||||
<h3>Bệnh viện Đa khoa Quốc Tế S.I.S Cần Thơ</h3>
|
||||
<p>397 Nguyễn Văn Cừ, P. An Bình, <br>TP. Cần Thơ</p>
|
||||
<p><strong>Hotline:</strong> 18001115</p>
|
||||
<p><strong>Email:</strong> cskh@dotquy.vn</p>
|
||||
<div class="sis-hospital-icons">
|
||||
<svg viewBox="0 0 24 24" aria-label="Website"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>
|
||||
<svg viewBox="0 0 24 24" aria-label="Bản đồ"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>
|
||||
<a href="https://www.google.com/maps?cid=6717580334500129934&g_mp=CiVnb29nbGUubWFwcy5wbGFjZXMudjEuUGxhY2VzLkdldFBsYWNlEAMYASAF&hl=vi&gl=GB&source=embed" target="_blank"><svg viewBox="0 0 24 24" aria-label="Bản đồ"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sis-hospital-box">
|
||||
<h3>Bệnh viện 2</h3>
|
||||
<h3>Bệnh viện Đa khoa Quốc Tế S.I.S Đà Nẵng</h3>
|
||||
<p>201 Nguyễn Chí Thanh, Phường 12, Quận 5,<br>TP. Hồ Chí Minh</p>
|
||||
<p><strong>Hotline:</strong> (84.28) 3955 5548</p>
|
||||
<p><strong>Email:</strong> bvdaihoccoso2@umc.edu.vn</p>
|
||||
@@ -176,7 +176,7 @@
|
||||
</div>
|
||||
|
||||
<div class="sis-hospital-box">
|
||||
<h3>Bệnh viện 3</h3>
|
||||
<h3>Bệnh viện Đa khoa Quốc Tế S.I.S Nha Trang</h3>
|
||||
<p>221B Hoàng Văn Thụ, Phường 8, Q. Phú Nhuận,<br>TP. Hồ Chí Minh</p>
|
||||
<p><strong>Hotline:</strong> (84.28) 3842 0070</p>
|
||||
<p><strong>Email:</strong> bvdaihoccoso3@umc.edu.vn</p>
|
||||
|
||||
@@ -211,94 +211,98 @@
|
||||
<img th:src="@{/theme-assets/umass/images/logo_white.png}" alt="Sisvietnamvn" style="height: auto; max-width: 250px;" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="navigation-container">
|
||||
<div id="mobile-flyout-container">
|
||||
<div class="primary-navigation">
|
||||
<nav class="mc--menu mc--main-menu">
|
||||
<ul class="menu m--menu m--main-menu" th:if="${primaryMenu != null and not #lists.isEmpty(primaryMenu.items)}">
|
||||
<th:block th:each="item : ${primaryMenu.items}" th:if="${item.parent == null}">
|
||||
|
||||
<!-- Flat item -->
|
||||
<li class="megamenu menu-item" th:if="${#lists.isEmpty(item.children)}">
|
||||
<div class="link-arrow-wrapper">
|
||||
<a th:href="${item.url}" th:text="${item.label}">Menu Item</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- Expanded item (has children) -->
|
||||
<li class="megamenu menu-item menu-item--expanded" th:if="${not #lists.isEmpty(item.children)}">
|
||||
<div class="link-arrow-wrapper">
|
||||
<a th:href="${item.url}" th:text="${item.label}">Menu Item</a>
|
||||
<button type="button" class="has-submenu arrow-toggle" aria-expanded="false" aria-haspopup="true" data-once="site-header-arrow">
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 7" width="16" height="7">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" fill="#881c1c" d="M7.88,7L15.75,0H0s7.88,7,7.88,7Z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="submenu-wrapper">
|
||||
<button class="button-back">
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5 10" width="5" height="10">
|
||||
<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#881c1c" points="0,5 5,0 5,10 "></polygon>
|
||||
</svg> Back </button>
|
||||
<span class="navigation-title" th:text="${item.label}">Menu Item</span>
|
||||
|
||||
<!-- Mobile Submenu Layout (Simple List) -->
|
||||
<ul class="submenu mobile-only">
|
||||
<li class="menu-item" th:each="child : ${item.children}">
|
||||
<a th:href="${child.url}" th:text="${child.label}">Child Item</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- Mega Menu Content Layout -->
|
||||
<div class="mega-menu-content desktop-only">
|
||||
<!-- Column 1: Info (Title and Text) -->
|
||||
<div class="mega-col-info">
|
||||
<h3 th:text="${item.label}">Về Bệnh viện</h3>
|
||||
<p th:if="${item.label == 'Về Bệnh viện' or item.label == 'VỀ BỆNH VIỆN'}" style="text-transform: math-auto;">Bệnh viện Đột quỵ Quốc tế tự hào là đơn vị tiên phong trong việc cung cấp dịch vụ khám chữa bệnh chất lượng cao, mang lại sự tin cậy và an tâm cho bệnh nhân.</p>
|
||||
<p th:if="${item.label == 'Chuyên khoa' or item.label == 'CHUYÊN KHOA'}" style="text-transform: math-auto;">Khám phá các chuyên khoa hàng đầu với đội ngũ bác sĩ chuyên môn cao, trang thiết bị y tế hiện đại đạt tiêu chuẩn quốc tế.</p>
|
||||
<p th:if="${item.label != 'Về Bệnh viện' and item.label != 'VỀ BỆNH VIỆN' and item.label != 'Chuyên khoa' and item.label != 'CHUYÊN KHOA'}" style="text-transform: math-auto;">Khám phá thêm thông tin chi tiết về các dịch vụ, chuyên gia và hoạt động của chúng tôi để bảo vệ sức khỏe của bạn.</p>
|
||||
</div>
|
||||
|
||||
<!-- Column 2: The actual Submenu Links -->
|
||||
<div class="mega-col-links">
|
||||
<ul class="submenu">
|
||||
<li class="menu-item" th:each="child : ${item.children}">
|
||||
<a th:href="${child.url}" th:text="${child.label}">Child Item</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Column 3: Featured Image -->
|
||||
<div class="mega-col-image">
|
||||
<!-- Try to use a hospital-like image if we can, or fallback to logo -->
|
||||
<img th:src="@{/theme-assets/umass/images/logo.png}" alt="Featured Image" style="object-fit: contain; background: white; padding: 20px;"/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Mega Menu Layout -->
|
||||
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</th:block>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="header-right" style="display: flex; flex-direction: column; align-items: start; flex-grow: 1;">
|
||||
<div class="header-hospital-name" style="color: var(--color-brand); font-size: 1.4rem; font-weight: bold; text-transform: uppercase; margin-bottom: 5px; -webkit-text-stroke: 1px white;">
|
||||
Bệnh viện đa khoa quốc tế S.I.S Cần thơ
|
||||
</div>
|
||||
<button id="search-drawer-trigger" aria-label="Open Search" data-once="header-search">
|
||||
<svg class="search-trigger-open" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 25 25">
|
||||
<title>Open Search</title>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M10.03,2.67c-4.07,0-7.36,3.29-7.36,7.36s3.29,7.36,7.36,7.36,7.36-3.29,7.36-7.36c-.01-4.07-3.3-7.36-7.36-7.36ZM10.03,0c5.54,0,10.03,4.49,10.03,10.03,0,2.29-.76,4.39-2.05,6.08l7,7-1.89,1.89-7.01-7.01c-1.68,1.29-3.79,2.05-6.08,2.05C4.49,20.04,0,15.55,0,10.03S4.49,0,10.03,0Z"></path>
|
||||
</svg>
|
||||
<svg class="search-trigger-close" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 22 22">
|
||||
<title>Close Search</title>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M3.64,1.2l-1.21-1.2L0,2.39l1.21,1.19,7.36,7.25-7.36,7.25-1.21,1.19,2.43,2.39,1.21-1.2,7.36-7.24,7.36,7.24,1.22,1.2,2.42-2.39-1.21-1.19-7.36-7.25,7.36-7.25,1.21-1.19-2.42-2.39-1.22,1.2-7.36,7.24L3.64,1.2Z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<button id="mobile-hamburger" class="mobile-hamburger hamburger--squeeze" aria-label="Open Main Navigation" data-once="site-header-hamburger">
|
||||
<span class="hamburger-box">
|
||||
<span class="hamburger-inner"></span>
|
||||
</span>
|
||||
</button>
|
||||
<div class="navigation-container" style="width: 100%; display: flex; justify-content: flex-end;">
|
||||
<div id="mobile-flyout-container">
|
||||
<div class="primary-navigation">
|
||||
<nav class="mc--menu mc--main-menu">
|
||||
<ul class="menu m--menu m--main-menu" th:if="${primaryMenu != null and not #lists.isEmpty(primaryMenu.items)}">
|
||||
<th:block th:each="item : ${primaryMenu.items}" th:if="${item.parent == null}">
|
||||
|
||||
<!-- Flat item -->
|
||||
<li class="megamenu menu-item" th:if="${#lists.isEmpty(item.children)}">
|
||||
<div class="link-arrow-wrapper">
|
||||
<a th:href="${item.url}" th:text="${item.label}">Menu Item</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- Expanded item (has children) -->
|
||||
<li class="megamenu menu-item menu-item--expanded" th:if="${not #lists.isEmpty(item.children)}">
|
||||
<div class="link-arrow-wrapper">
|
||||
<a th:href="${item.url}" th:text="${item.label}">Menu Item</a>
|
||||
<button type="button" class="has-submenu arrow-toggle" aria-expanded="false" aria-haspopup="true" data-once="site-header-arrow">
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 7" width="16" height="7">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" fill="#881c1c" d="M7.88,7L15.75,0H0s7.88,7,7.88,7Z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="submenu-wrapper">
|
||||
<button class="button-back">
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5 10" width="5" height="10">
|
||||
<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#881c1c" points="0,5 5,0 5,10 "></polygon>
|
||||
</svg> Back </button>
|
||||
<span class="navigation-title" th:text="${item.label}">Menu Item</span>
|
||||
|
||||
<!-- Mobile Submenu Layout (Simple List) -->
|
||||
<ul class="submenu mobile-only">
|
||||
<li class="menu-item" th:each="child : ${item.children}">
|
||||
<a th:href="${child.url}" th:text="${child.label}">Child Item</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- Mega Menu Content Layout -->
|
||||
<div class="mega-menu-content desktop-only">
|
||||
<!-- Column 1: Info (Title and Text) -->
|
||||
<div class="mega-col-info">
|
||||
<h3 th:text="${item.label}">Về Bệnh viện</h3>
|
||||
<p th:if="${item.label == 'Về Bệnh viện' or item.label == 'VỀ BỆNH VIỆN'}" style="text-transform: math-auto;">Bệnh viện Đột quỵ Quốc tế tự hào là đơn vị tiên phong trong việc cung cấp dịch vụ khám chữa bệnh chất lượng cao, mang lại sự tin cậy và an tâm cho bệnh nhân.</p>
|
||||
<p th:if="${item.label == 'Chuyên khoa' or item.label == 'CHUYÊN KHOA'}" style="text-transform: math-auto;">Khám phá các chuyên khoa hàng đầu với đội ngũ bác sĩ chuyên môn cao, trang thiết bị y tế hiện đại đạt tiêu chuẩn quốc tế.</p>
|
||||
<p th:if="${item.label != 'Về Bệnh viện' and item.label != 'VỀ BỆNH VIỆN' and item.label != 'Chuyên khoa' and item.label != 'CHUYÊN KHOA'}" style="text-transform: math-auto;">Khám phá thêm thông tin chi tiết về các dịch vụ, chuyên gia và hoạt động của chúng tôi để bảo vệ sức khỏe của bạn.</p>
|
||||
</div>
|
||||
|
||||
<!-- Column 2: The actual Submenu Links -->
|
||||
<div class="mega-col-links">
|
||||
<ul class="submenu">
|
||||
<li class="menu-item" th:each="child : ${item.children}">
|
||||
<a th:href="${child.url}" th:text="${child.label}">Child Item</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Column 3: Featured Image -->
|
||||
<div class="mega-col-image">
|
||||
<!-- Try to use a hospital-like image if we can, or fallback to logo -->
|
||||
<img th:src="@{/theme-assets/umass/images/logo.png}" alt="Featured Image" style="object-fit: contain; background: white; padding: 20px;"/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Mega Menu Layout -->
|
||||
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</th:block>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<button id="search-drawer-trigger" aria-label="Open Search" data-once="header-search">
|
||||
<svg class="search-trigger-open" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 25 25">
|
||||
<title>Open Search</title>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M10.03,2.67c-4.07,0-7.36,3.29-7.36,7.36s3.29,7.36,7.36,7.36,7.36-3.29,7.36-7.36c-.01-4.07-3.3-7.36-7.36-7.36ZM10.03,0c5.54,0,10.03,4.49,10.03,10.03,0,2.29-.76,4.39-2.05,6.08l7,7-1.89,1.89-7.01-7.01c-1.68,1.29-3.79,2.05-6.08,2.05C4.49,20.04,0,15.55,0,10.03S4.49,0,10.03,0Z"></path>
|
||||
</svg>
|
||||
<svg class="search-trigger-close" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 22 22">
|
||||
<title>Close Search</title>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M3.64,1.2l-1.21-1.2L0,2.39l1.21,1.19,7.36,7.25-7.36,7.25-1.21,1.19,2.43,2.39,1.21-1.2,7.36-7.24,7.36,7.24,1.22,1.2,2.42-2.39-1.21-1.19-7.36-7.25,7.36-7.25,1.21-1.19-2.42-2.39-1.22,1.2-7.36,7.24L3.64,1.2Z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<button id="mobile-hamburger" class="mobile-hamburger hamburger--squeeze" aria-label="Open Main Navigation" data-once="site-header-hamburger">
|
||||
<span class="hamburger-box">
|
||||
<span class="hamburger-inner"></span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<div data-component-id="umass_base:header-search">
|
||||
@@ -351,6 +355,7 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
Binary file not shown.
Reference in New Issue
Block a user