feat: update charity project assets, add livestream media, and clean up temporary migration scripts
This commit is contained in:
@@ -1,20 +0,0 @@
|
||||
import java.sql.Connection;
|
||||
import java.sql.DriverManager;
|
||||
import java.sql.ResultSet;
|
||||
import java.sql.Statement;
|
||||
|
||||
public class CheckNewsGrid {
|
||||
public static void main(String[] args) {
|
||||
try {
|
||||
Connection conn = DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521/sisvietnam", "sisvietnam", "sisvietnam");
|
||||
Statement stmt = conn.createStatement();
|
||||
ResultSet rs = stmt.executeQuery("SELECT html_template FROM sis_component_template WHERE slug = 'news-grid'");
|
||||
if (rs.next()) {
|
||||
System.out.println("TEMPLATE:");
|
||||
System.out.println(rs.getString("html_template"));
|
||||
}
|
||||
} catch (Exception e) {
|
||||
e.printStackTrace();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
import java.sql.Connection;
|
||||
import java.sql.DriverManager;
|
||||
import java.sql.ResultSet;
|
||||
import java.sql.Statement;
|
||||
|
||||
public class CheckPosts {
|
||||
public static void main(String[] args) {
|
||||
try {
|
||||
Connection conn = DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521/sisvietnam", "sisvietnam", "sisvietnam");
|
||||
Statement stmt = conn.createStatement();
|
||||
ResultSet rs = stmt.executeQuery("SELECT id, slug, featured_image FROM sis_post WHERE featured_image IS NOT NULL");
|
||||
while (rs.next()) {
|
||||
System.out.println("ID: " + rs.getLong("id") + " Slug: " + rs.getString("slug") + " IMG: " + rs.getString("featured_image"));
|
||||
}
|
||||
} catch (Exception e) {
|
||||
e.printStackTrace();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,32 +0,0 @@
|
||||
import com.fasterxml.jackson.databind.ObjectMapper;
|
||||
import java.io.InputStream;
|
||||
import java.net.HttpURLConnection;
|
||||
import java.net.URL;
|
||||
import java.util.Scanner;
|
||||
|
||||
public class CheckRender {
|
||||
public static void main(String[] args) {
|
||||
try {
|
||||
URL url = new URL("http://localhost:8080/");
|
||||
HttpURLConnection conn = (HttpURLConnection) url.openConnection();
|
||||
conn.setRequestMethod("GET");
|
||||
conn.connect();
|
||||
if (conn.getResponseCode() == 200) {
|
||||
InputStream is = conn.getInputStream();
|
||||
Scanner scanner = new Scanner(is, "UTF-8").useDelimiter("\\A");
|
||||
String html = scanner.hasNext() ? scanner.next() : "";
|
||||
|
||||
int idx = html.indexOf("news-card__image");
|
||||
if (idx != -1) {
|
||||
System.out.println(html.substring(idx, Math.min(idx + 300, html.length())));
|
||||
} else {
|
||||
System.out.println("Could not find news-card__image in HTML");
|
||||
}
|
||||
} else {
|
||||
System.out.println("HTTP " + conn.getResponseCode());
|
||||
}
|
||||
} catch (Exception e) {
|
||||
e.printStackTrace();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,21 +0,0 @@
|
||||
import java.sql.Connection;
|
||||
import java.sql.DriverManager;
|
||||
import java.sql.ResultSet;
|
||||
import java.sql.Statement;
|
||||
|
||||
public class CheckSnippets {
|
||||
public static void main(String[] args) {
|
||||
try {
|
||||
Connection conn = DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521/sisvietnam", "sisvietnam", "sisvietnam");
|
||||
Statement stmt = conn.createStatement();
|
||||
ResultSet rs = stmt.executeQuery("SELECT slug, content FROM html_snippet");
|
||||
while (rs.next()) {
|
||||
if (rs.getString("content") != null && rs.getString("content").contains("news-grid")) {
|
||||
System.out.println("Snippet with news-grid: " + rs.getString("slug"));
|
||||
}
|
||||
}
|
||||
} catch (Exception e) {
|
||||
e.printStackTrace();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,162 +0,0 @@
|
||||
import java.sql.Connection;
|
||||
import java.sql.DriverManager;
|
||||
import java.sql.PreparedStatement;
|
||||
|
||||
public class UpdateLivestreamTemplate {
|
||||
public static void main(String[] args) {
|
||||
try {
|
||||
Class.forName("oracle.jdbc.OracleDriver");
|
||||
Connection conn = DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521/sisvietnam", "sisvietnam", "sisvietnam");
|
||||
|
||||
// 1. Update the Post's meta_description (YouTube URL)
|
||||
PreparedStatement updatePost = conn.prepareStatement(
|
||||
"UPDATE sis_post SET meta_description = ? WHERE slug = 'sis-vi-suc-khoe-cong-dong-ky-134'"
|
||||
);
|
||||
updatePost.setString(1, "https://www.youtube.com/embed/j63kT9Bjrb4?si=N5JwIcuRn-iRxkYu");
|
||||
updatePost.executeUpdate();
|
||||
|
||||
// 2. Update the template's iframe attributes
|
||||
String htmlTemplate =
|
||||
"<style>\n" +
|
||||
" .tabbed-media-content-media-item { width: 100%; aspect-ratio: 16/9; position: relative; display: flex; align-items: center; justify-content: center; }\n" +
|
||||
" .tabbed-media-content-media-item .f--video-embed { display: none; width: 100%; height: 100%; position: absolute; top: 0; left: 0; }\n" +
|
||||
" .tabbed-media-content-media-item .f--video-embed iframe { width: 100%; height: 100%; }\n" +
|
||||
" .tabbed-media-content-media-item .f--image { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }\n" +
|
||||
" .tabbed-media-content-media-item .button-play { z-index: 10; }\n" +
|
||||
"</style>\n" +
|
||||
"<div class=\"cc--component-container cc--tabbed-media-content\" style=\"background-color: var(--color-gray-100);\">\n" +
|
||||
" <div class=\"c--component c--tabbed-media-content\">\n" +
|
||||
" <div class=\"tabbed-media-content-text-col\">\n" +
|
||||
" <div data-component-id=\"umass_base:section-title\" class=\"f--section-title\">\n" +
|
||||
" <h2 style=\"color: var(--color-brand);\">LiveStream</h2>\n" +
|
||||
" </div>\n" +
|
||||
" <div data-component-id=\"umass_base:tabbed-container\" data-once=\"tabbed-container\">\n" +
|
||||
" <div class=\"tab-labels-container\" role=\"tablist\">\n" +
|
||||
" <div class=\"tab-labels-inner\">\n" +
|
||||
" {{#each livestream_posts}}\n" +
|
||||
" <a href=\"#tabbed-content-{{index}}\" class=\"tab-label link-context-dark\" role=\"tab\" aria-selected=\"false\" aria-controls=\"tabbed-content-{{index}}\">{{title}}</a>\n" +
|
||||
" {{/each}}\n" +
|
||||
" </div>\n" +
|
||||
" </div>\n" +
|
||||
" <div class=\"tab-content-container\">\n" +
|
||||
" {{#each livestream_posts}}\n" +
|
||||
" <div class=\"tab-content-panel\" id=\"tabbed-content-{{index}}\" role=\"tabpanel\" aria-live=\"polite\">\n" +
|
||||
" <div class=\"f--field f--cta-title\">\n" +
|
||||
" <h2 style=\"color: var(--color-black);\"> {{excerpt}} </h2>\n" +
|
||||
" </div>\n" +
|
||||
" <div data-component-id=\"umass_base:description\" class=\"f--description\">\n" +
|
||||
" <div style=\"color:var(--color-black);\">{{content}}</div>\n" +
|
||||
" </div>\n" +
|
||||
" <div class=\"cta-container\">\n" +
|
||||
" <div class=\"f--field f--button\">\n" +
|
||||
" <a href=\"/post/{{slug}}\" class=\"button-primary button-context-light \" aria-label=\"Tìm Hiểu Thêm\" data-component-id=\"umass_base:button\">\n" +
|
||||
" <span class=\"button-text\"> Tìm Hiểu Thêm </span>\n" +
|
||||
" </a>\n" +
|
||||
" </div>\n" +
|
||||
" </div>\n" +
|
||||
" </div>\n" +
|
||||
" {{/each}}\n" +
|
||||
" </div>\n" +
|
||||
" </div>\n" +
|
||||
" </div>\n" +
|
||||
" <div class=\"tabbed-media-content-media-col\">\n" +
|
||||
" {{#each livestream_posts}}\n" +
|
||||
" <div class=\"tabbed-media-content-media-item with-video\" data-tab-id=\"tabbed-content-{{index}}\">\n" +
|
||||
" <div class=\"f--field f--image\">\n" +
|
||||
" <img src=\"{{featuredImageUrl}}\" data-src=\"{{featuredImageUrl}}\" class=\"lazyload\" alt=\"{{title}}\" style=\"width:100%;height:100%;object-fit:cover;\">\n" +
|
||||
" </div>\n" +
|
||||
" <div class=\"f--field f--button\">\n" +
|
||||
" <a href=\"#\" class=\"button-play button-context-light \" aria-label=\"Play video\" data-component-id=\"umass_base:button\">\n" +
|
||||
" <span class=\"button-icon button-icon-play\">\n" +
|
||||
" <svg width=\"18\" height=\"27\" viewBox=\"0 0 18 27\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\n" +
|
||||
" <path d=\"M18 13.5L0 0V27L18 13.5Z\"></path>\n" +
|
||||
" </svg>\n" +
|
||||
" </span>\n" +
|
||||
" <span class=\"button-text visually-hidden\"> Play </span>\n" +
|
||||
" </a>\n" +
|
||||
" </div>\n" +
|
||||
" <div data-component-id=\"umass_base:video-embed\" class=\"f--field f--video-embed\">\n" +
|
||||
" <iframe title=\"YouTube video player\" src=\"{{metaDescription}}\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen></iframe>\n" +
|
||||
" </div>\n" +
|
||||
" </div>\n" +
|
||||
" {{/each}}\n" +
|
||||
" </div>\n" +
|
||||
" </div>\n" +
|
||||
"</div>\n" +
|
||||
"<script>\n" +
|
||||
" document.addEventListener(\"DOMContentLoaded\", function() {\n" +
|
||||
" var tabs = document.querySelectorAll('.tabbed-media-content-media-item[data-tab-id=\"tabbed-content-0\"]');\n" +
|
||||
" if(tabs.length > 0) tabs[0].classList.add('is-active');\n" +
|
||||
" \n" +
|
||||
" var panels = document.querySelectorAll('#tabbed-content-0.tab-content-panel');\n" +
|
||||
" if(panels.length > 0) panels[0].classList.add('is-active');\n" +
|
||||
"\n" +
|
||||
" var labels = document.querySelectorAll('a.tab-label[aria-controls=\"tabbed-content-0\"]');\n" +
|
||||
" if(labels.length > 0) labels[0].setAttribute('aria-selected', 'true');\n" +
|
||||
"\n" +
|
||||
" var allLabels = document.querySelectorAll('.tab-labels-inner .tab-label');\n" +
|
||||
" allLabels.forEach(function(label) {\n" +
|
||||
" label.addEventListener('click', function(e) {\n" +
|
||||
" e.preventDefault();\n" +
|
||||
" allLabels.forEach(function(l) { l.setAttribute('aria-selected', 'false'); });\n" +
|
||||
" this.setAttribute('aria-selected', 'true');\n" +
|
||||
" \n" +
|
||||
" var targetId = this.getAttribute('aria-controls');\n" +
|
||||
" document.querySelectorAll('.tab-content-panel').forEach(function(p) { p.classList.remove('is-active'); });\n" +
|
||||
" document.querySelectorAll('.tabbed-media-content-media-item').forEach(function(m) { \n" +
|
||||
" m.classList.remove('is-active'); \n" +
|
||||
" var vEmbed = m.querySelector('.f--video-embed');\n" +
|
||||
" if(vEmbed) vEmbed.style.display = 'none';\n" +
|
||||
" var img = m.querySelector('.f--image');\n" +
|
||||
" if(img) img.style.display = 'block';\n" +
|
||||
" var btn = m.querySelector('.button-play');\n" +
|
||||
" if(btn) btn.style.display = 'flex';\n" +
|
||||
" var iframe = m.querySelector('iframe');\n" +
|
||||
" if(iframe) { \n" +
|
||||
" var src = iframe.src;\n" +
|
||||
" iframe.src = src.replace('&autoplay=1', '').replace('?autoplay=1', '');\n" +
|
||||
" }\n" +
|
||||
" });\n" +
|
||||
" \n" +
|
||||
" var targetPanel = document.getElementById(targetId);\n" +
|
||||
" if(targetPanel) targetPanel.classList.add('is-active');\n" +
|
||||
" var targetMedia = document.querySelector('.tabbed-media-content-media-item[data-tab-id=\"' + targetId + '\"]');\n" +
|
||||
" if(targetMedia) targetMedia.classList.add('is-active');\n" +
|
||||
" });\n" +
|
||||
" });\n" +
|
||||
"\n" +
|
||||
" var playButtons = document.querySelectorAll('.tabbed-media-content-media-item .button-play');\n" +
|
||||
" playButtons.forEach(function(btn) {\n" +
|
||||
" btn.addEventListener('click', function(e) {\n" +
|
||||
" e.preventDefault();\n" +
|
||||
" var mediaItem = this.closest('.tabbed-media-content-media-item');\n" +
|
||||
" var img = mediaItem.querySelector('.f--image');\n" +
|
||||
" var videoEmbed = mediaItem.querySelector('.f--video-embed');\n" +
|
||||
" \n" +
|
||||
" if(img) img.style.display = 'none';\n" +
|
||||
" this.style.display = 'none';\n" +
|
||||
" if(videoEmbed) videoEmbed.style.display = 'block';\n" +
|
||||
" \n" +
|
||||
" var iframe = mediaItem.querySelector('iframe');\n" +
|
||||
" if(iframe && iframe.src.indexOf('autoplay=1') === -1) {\n" +
|
||||
" iframe.src = iframe.src + (iframe.src.indexOf('?') > -1 ? '&' : '?') + 'autoplay=1';\n" +
|
||||
" }\n" +
|
||||
" });\n" +
|
||||
" });\n" +
|
||||
" });\n" +
|
||||
"</script>";
|
||||
|
||||
PreparedStatement updateTemplate = conn.prepareStatement(
|
||||
"UPDATE sis_component_template SET html_template = ? WHERE slug = 'tabbed-livestream'"
|
||||
);
|
||||
updateTemplate.setString(1, htmlTemplate);
|
||||
updateTemplate.executeUpdate();
|
||||
|
||||
System.out.println("Update complete!");
|
||||
|
||||
conn.close();
|
||||
} catch (Exception e) {
|
||||
e.printStackTrace();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,161 +0,0 @@
|
||||
import java.sql.Connection;
|
||||
import java.sql.DriverManager;
|
||||
import java.sql.PreparedStatement;
|
||||
|
||||
public class UpdateLivestreamTemplate2 {
|
||||
public static void main(String[] args) {
|
||||
try {
|
||||
Class.forName("oracle.jdbc.OracleDriver");
|
||||
Connection conn = DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521/sisvietnam", "sisvietnam", "sisvietnam");
|
||||
|
||||
// We append &autoplay=1 to the URL in the database so it's ready to play
|
||||
PreparedStatement updatePost = conn.prepareStatement(
|
||||
"UPDATE sis_post SET meta_description = ? WHERE slug = 'sis-vi-suc-khoe-cong-dong-ky-134'"
|
||||
);
|
||||
updatePost.setString(1, "https://www.youtube.com/embed/j63kT9Bjrb4?si=N5JwIcuRn-iRxkYu&autoplay=1");
|
||||
updatePost.executeUpdate();
|
||||
|
||||
// 2. Update the template to use data-src instead of src.
|
||||
String htmlTemplate =
|
||||
"<style>\n" +
|
||||
" .tabbed-media-content-media-item { width: 100%; aspect-ratio: 16/9; position: relative; display: flex; align-items: center; justify-content: center; background: #000; overflow: hidden; }\n" +
|
||||
" .tabbed-media-content-media-item .f--video-embed { display: none; width: 100%; height: 100%; }\n" +
|
||||
" .tabbed-media-content-media-item .f--video-embed iframe { width: 100%; height: 100%; border: none; }\n" +
|
||||
" .tabbed-media-content-media-item .f--image { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }\n" +
|
||||
" .tabbed-media-content-media-item .button-play { z-index: 10; }\n" +
|
||||
"</style>\n" +
|
||||
"<div class=\"cc--component-container cc--tabbed-media-content\" style=\"background-color: var(--color-gray-100);\">\n" +
|
||||
" <div class=\"c--component c--tabbed-media-content\">\n" +
|
||||
" <div class=\"tabbed-media-content-text-col\">\n" +
|
||||
" <div data-component-id=\"umass_base:section-title\" class=\"f--section-title\">\n" +
|
||||
" <h2 style=\"color: var(--color-brand);\">LiveStream</h2>\n" +
|
||||
" </div>\n" +
|
||||
" <div data-component-id=\"umass_base:tabbed-container\" data-once=\"tabbed-container\">\n" +
|
||||
" <div class=\"tab-labels-container\" role=\"tablist\">\n" +
|
||||
" <div class=\"tab-labels-inner\">\n" +
|
||||
" {{#each livestream_posts}}\n" +
|
||||
" <a href=\"#tabbed-content-{{index}}\" class=\"tab-label link-context-dark\" role=\"tab\" aria-selected=\"false\" aria-controls=\"tabbed-content-{{index}}\">{{title}}</a>\n" +
|
||||
" {{/each}}\n" +
|
||||
" </div>\n" +
|
||||
" </div>\n" +
|
||||
" <div class=\"tab-content-container\">\n" +
|
||||
" {{#each livestream_posts}}\n" +
|
||||
" <div class=\"tab-content-panel\" id=\"tabbed-content-{{index}}\" role=\"tabpanel\" aria-live=\"polite\">\n" +
|
||||
" <div class=\"f--field f--cta-title\">\n" +
|
||||
" <h2 style=\"color: var(--color-black);\"> {{excerpt}} </h2>\n" +
|
||||
" </div>\n" +
|
||||
" <div data-component-id=\"umass_base:description\" class=\"f--description\">\n" +
|
||||
" <div style=\"color:var(--color-black);\">{{content}}</div>\n" +
|
||||
" </div>\n" +
|
||||
" <div class=\"cta-container\">\n" +
|
||||
" <div class=\"f--field f--button\">\n" +
|
||||
" <a href=\"/post/{{slug}}\" class=\"button-primary button-context-light \" aria-label=\"Tìm Hiểu Thêm\" data-component-id=\"umass_base:button\">\n" +
|
||||
" <span class=\"button-text\"> Tìm Hiểu Thêm </span>\n" +
|
||||
" </a>\n" +
|
||||
" </div>\n" +
|
||||
" </div>\n" +
|
||||
" </div>\n" +
|
||||
" {{/each}}\n" +
|
||||
" </div>\n" +
|
||||
" </div>\n" +
|
||||
" </div>\n" +
|
||||
" <div class=\"tabbed-media-content-media-col\">\n" +
|
||||
" {{#each livestream_posts}}\n" +
|
||||
" <div class=\"tabbed-media-content-media-item with-video\" data-tab-id=\"tabbed-content-{{index}}\">\n" +
|
||||
" <div class=\"f--field f--image\">\n" +
|
||||
" <img src=\"{{featuredImageUrl}}\" data-src=\"{{featuredImageUrl}}\" class=\"lazyload\" alt=\"{{title}}\" style=\"width:100%;height:100%;object-fit:cover;\">\n" +
|
||||
" </div>\n" +
|
||||
" <div class=\"f--field f--button\">\n" +
|
||||
" <a href=\"#\" class=\"button-play button-context-light \" aria-label=\"Play video\" data-component-id=\"umass_base:button\">\n" +
|
||||
" <span class=\"button-icon button-icon-play\">\n" +
|
||||
" <svg width=\"18\" height=\"27\" viewBox=\"0 0 18 27\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\n" +
|
||||
" <path d=\"M18 13.5L0 0V27L18 13.5Z\"></path>\n" +
|
||||
" </svg>\n" +
|
||||
" </span>\n" +
|
||||
" <span class=\"button-text visually-hidden\"> Play </span>\n" +
|
||||
" </a>\n" +
|
||||
" </div>\n" +
|
||||
" <div data-component-id=\"umass_base:video-embed\" class=\"f--field f--video-embed\">\n" +
|
||||
" <iframe title=\"YouTube video player\" data-src=\"{{metaDescription}}\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen></iframe>\n" +
|
||||
" </div>\n" +
|
||||
" </div>\n" +
|
||||
" {{/each}}\n" +
|
||||
" </div>\n" +
|
||||
" </div>\n" +
|
||||
"</div>\n" +
|
||||
"<script>\n" +
|
||||
" document.addEventListener(\"DOMContentLoaded\", function() {\n" +
|
||||
" var tabs = document.querySelectorAll('.tabbed-media-content-media-item[data-tab-id=\"tabbed-content-0\"]');\n" +
|
||||
" if(tabs.length > 0) tabs[0].classList.add('is-active');\n" +
|
||||
" \n" +
|
||||
" var panels = document.querySelectorAll('#tabbed-content-0.tab-content-panel');\n" +
|
||||
" if(panels.length > 0) panels[0].classList.add('is-active');\n" +
|
||||
"\n" +
|
||||
" var labels = document.querySelectorAll('a.tab-label[aria-controls=\"tabbed-content-0\"]');\n" +
|
||||
" if(labels.length > 0) labels[0].setAttribute('aria-selected', 'true');\n" +
|
||||
"\n" +
|
||||
" var allLabels = document.querySelectorAll('.tab-labels-inner .tab-label');\n" +
|
||||
" allLabels.forEach(function(label) {\n" +
|
||||
" label.addEventListener('click', function(e) {\n" +
|
||||
" e.preventDefault();\n" +
|
||||
" allLabels.forEach(function(l) { l.setAttribute('aria-selected', 'false'); });\n" +
|
||||
" this.setAttribute('aria-selected', 'true');\n" +
|
||||
" \n" +
|
||||
" var targetId = this.getAttribute('aria-controls');\n" +
|
||||
" document.querySelectorAll('.tab-content-panel').forEach(function(p) { p.classList.remove('is-active'); });\n" +
|
||||
" document.querySelectorAll('.tabbed-media-content-media-item').forEach(function(m) { \n" +
|
||||
" m.classList.remove('is-active'); \n" +
|
||||
" var vEmbed = m.querySelector('.f--video-embed');\n" +
|
||||
" if(vEmbed) vEmbed.style.display = 'none';\n" +
|
||||
" var img = m.querySelector('.f--image');\n" +
|
||||
" if(img) img.style.display = 'block';\n" +
|
||||
" var btn = m.querySelector('.button-play');\n" +
|
||||
" if(btn) btn.style.display = 'flex';\n" +
|
||||
" var iframe = m.querySelector('iframe');\n" +
|
||||
" if(iframe) { \n" +
|
||||
" iframe.src = '';\n" +
|
||||
" }\n" +
|
||||
" });\n" +
|
||||
" \n" +
|
||||
" var targetPanel = document.getElementById(targetId);\n" +
|
||||
" if(targetPanel) targetPanel.classList.add('is-active');\n" +
|
||||
" var targetMedia = document.querySelector('.tabbed-media-content-media-item[data-tab-id=\"' + targetId + '\"]');\n" +
|
||||
" if(targetMedia) targetMedia.classList.add('is-active');\n" +
|
||||
" });\n" +
|
||||
" });\n" +
|
||||
"\n" +
|
||||
" var playButtons = document.querySelectorAll('.tabbed-media-content-media-item .button-play');\n" +
|
||||
" playButtons.forEach(function(btn) {\n" +
|
||||
" btn.addEventListener('click', function(e) {\n" +
|
||||
" e.preventDefault();\n" +
|
||||
" var mediaItem = this.closest('.tabbed-media-content-media-item');\n" +
|
||||
" var img = mediaItem.querySelector('.f--image');\n" +
|
||||
" var videoEmbed = mediaItem.querySelector('.f--video-embed');\n" +
|
||||
" \n" +
|
||||
" if(img) img.style.display = 'none';\n" +
|
||||
" this.style.display = 'none';\n" +
|
||||
" if(videoEmbed) videoEmbed.style.display = 'block';\n" +
|
||||
" \n" +
|
||||
" var iframe = mediaItem.querySelector('iframe');\n" +
|
||||
" if(iframe && iframe.getAttribute('data-src')) {\n" +
|
||||
" iframe.src = iframe.getAttribute('data-src');\n" +
|
||||
" }\n" +
|
||||
" });\n" +
|
||||
" });\n" +
|
||||
" });\n" +
|
||||
"</script>";
|
||||
|
||||
PreparedStatement updateTemplate = conn.prepareStatement(
|
||||
"UPDATE sis_component_template SET html_template = ? WHERE slug = 'tabbed-livestream'"
|
||||
);
|
||||
updateTemplate.setString(1, htmlTemplate);
|
||||
updateTemplate.executeUpdate();
|
||||
|
||||
System.out.println("Update complete!");
|
||||
|
||||
conn.close();
|
||||
} catch (Exception e) {
|
||||
e.printStackTrace();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,146 +0,0 @@
|
||||
import java.sql.Connection;
|
||||
import java.sql.DriverManager;
|
||||
import java.sql.PreparedStatement;
|
||||
|
||||
public class UpdateLivestreamTemplate3 {
|
||||
public static void main(String[] args) {
|
||||
try {
|
||||
Class.forName("oracle.jdbc.OracleDriver");
|
||||
Connection conn = DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521/sisvietnam", "sisvietnam", "sisvietnam");
|
||||
|
||||
// We ensure it is just the standard embed without JS tampering
|
||||
String htmlTemplate =
|
||||
"<style>\n" +
|
||||
" .tabbed-media-content-media-item { width: 100%; aspect-ratio: 16/9; position: relative; display: flex; align-items: center; justify-content: center; background: #000; overflow: hidden; }\n" +
|
||||
" .tabbed-media-content-media-item .f--video-embed { display: none; width: 100%; height: 100%; }\n" +
|
||||
" .tabbed-media-content-media-item .f--video-embed iframe { width: 100%; height: 100%; border: none; }\n" +
|
||||
" .tabbed-media-content-media-item .f--image { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 5; }\n" +
|
||||
" .tabbed-media-content-media-item .button-play { z-index: 10; }\n" +
|
||||
"</style>\n" +
|
||||
"<div class=\"cc--component-container cc--tabbed-media-content\" style=\"background-color: var(--color-gray-100);\">\n" +
|
||||
" <div class=\"c--component c--tabbed-media-content\">\n" +
|
||||
" <div class=\"tabbed-media-content-text-col\">\n" +
|
||||
" <div data-component-id=\"umass_base:section-title\" class=\"f--section-title\">\n" +
|
||||
" <h2 style=\"color: var(--color-brand);\">LiveStream</h2>\n" +
|
||||
" </div>\n" +
|
||||
" <div data-component-id=\"umass_base:tabbed-container\" data-once=\"tabbed-container\">\n" +
|
||||
" <div class=\"tab-labels-container\" role=\"tablist\">\n" +
|
||||
" <div class=\"tab-labels-inner\">\n" +
|
||||
" {{#each livestream_posts}}\n" +
|
||||
" <a href=\"#tabbed-content-{{index}}\" class=\"tab-label link-context-dark\" role=\"tab\" aria-selected=\"false\" aria-controls=\"tabbed-content-{{index}}\">{{title}}</a>\n" +
|
||||
" {{/each}}\n" +
|
||||
" </div>\n" +
|
||||
" </div>\n" +
|
||||
" <div class=\"tab-content-container\">\n" +
|
||||
" {{#each livestream_posts}}\n" +
|
||||
" <div class=\"tab-content-panel\" id=\"tabbed-content-{{index}}\" role=\"tabpanel\" aria-live=\"polite\">\n" +
|
||||
" <div class=\"f--field f--cta-title\">\n" +
|
||||
" <h2 style=\"color: var(--color-black);\"> {{excerpt}} </h2>\n" +
|
||||
" </div>\n" +
|
||||
" <div data-component-id=\"umass_base:description\" class=\"f--description\">\n" +
|
||||
" <div style=\"color:var(--color-black);\">{{content}}</div>\n" +
|
||||
" </div>\n" +
|
||||
" <div class=\"cta-container\">\n" +
|
||||
" <div class=\"f--field f--button\">\n" +
|
||||
" <a href=\"/post/{{slug}}\" class=\"button-primary button-context-light \" aria-label=\"Tìm Hiểu Thêm\" data-component-id=\"umass_base:button\">\n" +
|
||||
" <span class=\"button-text\"> Tìm Hiểu Thêm </span>\n" +
|
||||
" </a>\n" +
|
||||
" </div>\n" +
|
||||
" </div>\n" +
|
||||
" </div>\n" +
|
||||
" {{/each}}\n" +
|
||||
" </div>\n" +
|
||||
" </div>\n" +
|
||||
" </div>\n" +
|
||||
" <div class=\"tabbed-media-content-media-col\">\n" +
|
||||
" {{#each livestream_posts}}\n" +
|
||||
" <div class=\"tabbed-media-content-media-item with-video\" data-tab-id=\"tabbed-content-{{index}}\">\n" +
|
||||
" <div class=\"f--field f--image\">\n" +
|
||||
" <img src=\"{{featuredImageUrl}}\" data-src=\"{{featuredImageUrl}}\" class=\"lazyload\" alt=\"{{title}}\" style=\"width:100%;height:100%;object-fit:cover;\">\n" +
|
||||
" </div>\n" +
|
||||
" <div class=\"f--field f--button\" style=\"position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10;\">\n" +
|
||||
" <a href=\"#\" class=\"button-play button-context-light \" aria-label=\"Play video\" data-component-id=\"umass_base:button\">\n" +
|
||||
" <span class=\"button-icon button-icon-play\">\n" +
|
||||
" <svg width=\"18\" height=\"27\" viewBox=\"0 0 18 27\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\n" +
|
||||
" <path d=\"M18 13.5L0 0V27L18 13.5Z\"></path>\n" +
|
||||
" </svg>\n" +
|
||||
" </span>\n" +
|
||||
" <span class=\"button-text visually-hidden\"> Play </span>\n" +
|
||||
" </a>\n" +
|
||||
" </div>\n" +
|
||||
" <div data-component-id=\"umass_base:video-embed\" class=\"f--field f--video-embed\">\n" +
|
||||
" <iframe title=\"YouTube video player\" src=\"{{metaDescription}}\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen></iframe>\n" +
|
||||
" </div>\n" +
|
||||
" </div>\n" +
|
||||
" {{/each}}\n" +
|
||||
" </div>\n" +
|
||||
" </div>\n" +
|
||||
"</div>\n" +
|
||||
"<script>\n" +
|
||||
" document.addEventListener(\"DOMContentLoaded\", function() {\n" +
|
||||
" var tabs = document.querySelectorAll('.tabbed-media-content-media-item[data-tab-id=\"tabbed-content-0\"]');\n" +
|
||||
" if(tabs.length > 0) tabs[0].classList.add('is-active');\n" +
|
||||
" \n" +
|
||||
" var panels = document.querySelectorAll('#tabbed-content-0.tab-content-panel');\n" +
|
||||
" if(panels.length > 0) panels[0].classList.add('is-active');\n" +
|
||||
"\n" +
|
||||
" var labels = document.querySelectorAll('a.tab-label[aria-controls=\"tabbed-content-0\"]');\n" +
|
||||
" if(labels.length > 0) labels[0].setAttribute('aria-selected', 'true');\n" +
|
||||
"\n" +
|
||||
" var allLabels = document.querySelectorAll('.tab-labels-inner .tab-label');\n" +
|
||||
" allLabels.forEach(function(label) {\n" +
|
||||
" label.addEventListener('click', function(e) {\n" +
|
||||
" e.preventDefault();\n" +
|
||||
" allLabels.forEach(function(l) { l.setAttribute('aria-selected', 'false'); });\n" +
|
||||
" this.setAttribute('aria-selected', 'true');\n" +
|
||||
" \n" +
|
||||
" var targetId = this.getAttribute('aria-controls');\n" +
|
||||
" document.querySelectorAll('.tab-content-panel').forEach(function(p) { p.classList.remove('is-active'); });\n" +
|
||||
" document.querySelectorAll('.tabbed-media-content-media-item').forEach(function(m) { \n" +
|
||||
" m.classList.remove('is-active'); \n" +
|
||||
" var vEmbed = m.querySelector('.f--video-embed');\n" +
|
||||
" if(vEmbed) vEmbed.style.display = 'none';\n" +
|
||||
" var img = m.querySelector('.f--image');\n" +
|
||||
" if(img) img.style.display = 'block';\n" +
|
||||
" var btnContainer = m.querySelector('.f--field.f--button');\n" +
|
||||
" if(btnContainer) btnContainer.style.display = 'block';\n" +
|
||||
" });\n" +
|
||||
" \n" +
|
||||
" var targetPanel = document.getElementById(targetId);\n" +
|
||||
" if(targetPanel) targetPanel.classList.add('is-active');\n" +
|
||||
" var targetMedia = document.querySelector('.tabbed-media-content-media-item[data-tab-id=\"' + targetId + '\"]');\n" +
|
||||
" if(targetMedia) targetMedia.classList.add('is-active');\n" +
|
||||
" });\n" +
|
||||
" });\n" +
|
||||
"\n" +
|
||||
" var playButtons = document.querySelectorAll('.tabbed-media-content-media-item .button-play');\n" +
|
||||
" playButtons.forEach(function(btn) {\n" +
|
||||
" btn.addEventListener('click', function(e) {\n" +
|
||||
" e.preventDefault();\n" +
|
||||
" var mediaItem = this.closest('.tabbed-media-content-media-item');\n" +
|
||||
" var img = mediaItem.querySelector('.f--image');\n" +
|
||||
" var videoEmbed = mediaItem.querySelector('.f--video-embed');\n" +
|
||||
" var btnContainer = mediaItem.querySelector('.f--field.f--button');\n" +
|
||||
" \n" +
|
||||
" if(img) img.style.display = 'none';\n" +
|
||||
" if(btnContainer) btnContainer.style.display = 'none';\n" +
|
||||
" if(videoEmbed) videoEmbed.style.display = 'block';\n" +
|
||||
" });\n" +
|
||||
" });\n" +
|
||||
" });\n" +
|
||||
"</script>";
|
||||
|
||||
PreparedStatement updateTemplate = conn.prepareStatement(
|
||||
"UPDATE sis_component_template SET html_template = ? WHERE slug = 'tabbed-livestream'"
|
||||
);
|
||||
updateTemplate.setString(1, htmlTemplate);
|
||||
updateTemplate.executeUpdate();
|
||||
|
||||
System.out.println("Update complete!");
|
||||
|
||||
conn.close();
|
||||
} catch (Exception e) {
|
||||
e.printStackTrace();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,155 +0,0 @@
|
||||
import java.sql.Connection;
|
||||
import java.sql.DriverManager;
|
||||
import java.sql.PreparedStatement;
|
||||
|
||||
public class UpdateLivestreamTemplate4 {
|
||||
public static void main(String[] args) {
|
||||
try {
|
||||
Class.forName("oracle.jdbc.OracleDriver");
|
||||
Connection conn = DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521/sisvietnam", "sisvietnam", "sisvietnam");
|
||||
|
||||
// Re-apply the URL to be just the embed URL without autoplay so we can append it cleanly in data-src
|
||||
PreparedStatement updatePost = conn.prepareStatement(
|
||||
"UPDATE sis_post SET meta_description = ? WHERE slug = 'sis-vi-suc-khoe-cong-dong-ky-134'"
|
||||
);
|
||||
updatePost.setString(1, "https://www.youtube.com/embed/j63kT9Bjrb4?si=N5JwIcuRn-iRxkYu");
|
||||
updatePost.executeUpdate();
|
||||
|
||||
// We ensure it is just the standard embed without JS tampering
|
||||
String htmlTemplate =
|
||||
"<style>\n" +
|
||||
" .tabbed-media-content-media-item { width: 100%; aspect-ratio: 16/9; position: relative; display: block; background: #000; overflow: hidden; }\n" +
|
||||
" .tabbed-media-content-media-item .f--video-embed { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }\n" +
|
||||
" .tabbed-media-content-media-item .f--video-embed iframe { width: 100%; height: 100%; border: none; }\n" +
|
||||
" .tabbed-media-content-media-item .f--image { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 5; }\n" +
|
||||
" .tabbed-media-content-media-item .f--button { z-index: 10; }\n" +
|
||||
"</style>\n" +
|
||||
"<div class=\"cc--component-container cc--tabbed-media-content\" style=\"background-color: var(--color-gray-100);\">\n" +
|
||||
" <div class=\"c--component c--tabbed-media-content\">\n" +
|
||||
" <div class=\"tabbed-media-content-text-col\">\n" +
|
||||
" <div data-component-id=\"umass_base:section-title\" class=\"f--section-title\">\n" +
|
||||
" <h2 style=\"color: var(--color-brand);\">LiveStream</h2>\n" +
|
||||
" </div>\n" +
|
||||
" <div data-component-id=\"umass_base:tabbed-container\" data-once=\"tabbed-container\">\n" +
|
||||
" <div class=\"tab-labels-container\" role=\"tablist\">\n" +
|
||||
" <div class=\"tab-labels-inner\">\n" +
|
||||
" {{#each livestream_posts}}\n" +
|
||||
" <a href=\"#tabbed-content-{{index}}\" class=\"tab-label link-context-dark\" role=\"tab\" aria-selected=\"false\" aria-controls=\"tabbed-content-{{index}}\">{{title}}</a>\n" +
|
||||
" {{/each}}\n" +
|
||||
" </div>\n" +
|
||||
" </div>\n" +
|
||||
" <div class=\"tab-content-container\">\n" +
|
||||
" {{#each livestream_posts}}\n" +
|
||||
" <div class=\"tab-content-panel\" id=\"tabbed-content-{{index}}\" role=\"tabpanel\" aria-live=\"polite\">\n" +
|
||||
" <div class=\"f--field f--cta-title\">\n" +
|
||||
" <h2 style=\"color: var(--color-black);\"> {{excerpt}} </h2>\n" +
|
||||
" </div>\n" +
|
||||
" <div data-component-id=\"umass_base:description\" class=\"f--description\">\n" +
|
||||
" <div style=\"color:var(--color-black);\">{{content}}</div>\n" +
|
||||
" </div>\n" +
|
||||
" <div class=\"cta-container\">\n" +
|
||||
" <div class=\"f--field f--button\">\n" +
|
||||
" <a href=\"/post/{{slug}}\" class=\"button-primary button-context-light \" aria-label=\"Tìm Hiểu Thêm\" data-component-id=\"umass_base:button\">\n" +
|
||||
" <span class=\"button-text\"> Tìm Hiểu Thêm </span>\n" +
|
||||
" </a>\n" +
|
||||
" </div>\n" +
|
||||
" </div>\n" +
|
||||
" </div>\n" +
|
||||
" {{/each}}\n" +
|
||||
" </div>\n" +
|
||||
" </div>\n" +
|
||||
" </div>\n" +
|
||||
" <div class=\"tabbed-media-content-media-col\">\n" +
|
||||
" {{#each livestream_posts}}\n" +
|
||||
" <div class=\"tabbed-media-content-media-item with-video\" data-tab-id=\"tabbed-content-{{index}}\">\n" +
|
||||
" <div class=\"f--field f--image\">\n" +
|
||||
" <img src=\"{{featuredImageUrl}}\" data-src=\"{{featuredImageUrl}}\" class=\"lazyload\" alt=\"{{title}}\" style=\"width:100%;height:100%;object-fit:cover;\">\n" +
|
||||
" </div>\n" +
|
||||
" <div class=\"f--field f--button\" style=\"position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10;\">\n" +
|
||||
" <a href=\"#\" class=\"button-play button-context-light \" aria-label=\"Play video\" data-component-id=\"umass_base:button\">\n" +
|
||||
" <span class=\"button-icon button-icon-play\">\n" +
|
||||
" <svg width=\"18\" height=\"27\" viewBox=\"0 0 18 27\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\n" +
|
||||
" <path d=\"M18 13.5L0 0V27L18 13.5Z\"></path>\n" +
|
||||
" </svg>\n" +
|
||||
" </span>\n" +
|
||||
" <span class=\"button-text visually-hidden\"> Play </span>\n" +
|
||||
" </a>\n" +
|
||||
" </div>\n" +
|
||||
" <div data-component-id=\"umass_base:video-embed\" class=\"f--field f--video-embed\">\n" +
|
||||
" <iframe title=\"YouTube video player\" data-src=\"{{metaDescription}}&autoplay=1\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen></iframe>\n" +
|
||||
" </div>\n" +
|
||||
" </div>\n" +
|
||||
" {{/each}}\n" +
|
||||
" </div>\n" +
|
||||
" </div>\n" +
|
||||
"</div>\n" +
|
||||
"<script>\n" +
|
||||
" document.addEventListener(\"DOMContentLoaded\", function() {\n" +
|
||||
" var tabs = document.querySelectorAll('.tabbed-media-content-media-item[data-tab-id=\"tabbed-content-0\"]');\n" +
|
||||
" if(tabs.length > 0) tabs[0].classList.add('is-active');\n" +
|
||||
" \n" +
|
||||
" var panels = document.querySelectorAll('#tabbed-content-0.tab-content-panel');\n" +
|
||||
" if(panels.length > 0) panels[0].classList.add('is-active');\n" +
|
||||
"\n" +
|
||||
" var labels = document.querySelectorAll('a.tab-label[aria-controls=\"tabbed-content-0\"]');\n" +
|
||||
" if(labels.length > 0) labels[0].setAttribute('aria-selected', 'true');\n" +
|
||||
"\n" +
|
||||
" var allLabels = document.querySelectorAll('.tab-labels-inner .tab-label');\n" +
|
||||
" allLabels.forEach(function(label) {\n" +
|
||||
" label.addEventListener('click', function(e) {\n" +
|
||||
" e.preventDefault();\n" +
|
||||
" allLabels.forEach(function(l) { l.setAttribute('aria-selected', 'false'); });\n" +
|
||||
" this.setAttribute('aria-selected', 'true');\n" +
|
||||
" \n" +
|
||||
" var targetId = this.getAttribute('aria-controls');\n" +
|
||||
" document.querySelectorAll('.tab-content-panel').forEach(function(p) { p.classList.remove('is-active'); });\n" +
|
||||
" document.querySelectorAll('.tabbed-media-content-media-item').forEach(function(m) { \n" +
|
||||
" m.classList.remove('is-active'); \n" +
|
||||
" var img = m.querySelector('.f--image');\n" +
|
||||
" if(img) img.style.display = 'block';\n" +
|
||||
" var btnContainer = m.querySelector('.f--field.f--button');\n" +
|
||||
" if(btnContainer) btnContainer.style.display = 'block';\n" +
|
||||
" var iframe = m.querySelector('iframe');\n" +
|
||||
" if(iframe) iframe.removeAttribute('src'); // Stop video playing if they switch tabs\n" +
|
||||
" });\n" +
|
||||
" \n" +
|
||||
" var targetPanel = document.getElementById(targetId);\n" +
|
||||
" if(targetPanel) targetPanel.classList.add('is-active');\n" +
|
||||
" var targetMedia = document.querySelector('.tabbed-media-content-media-item[data-tab-id=\"' + targetId + '\"]');\n" +
|
||||
" if(targetMedia) targetMedia.classList.add('is-active');\n" +
|
||||
" });\n" +
|
||||
" });\n" +
|
||||
"\n" +
|
||||
" var playButtons = document.querySelectorAll('.tabbed-media-content-media-item .button-play');\n" +
|
||||
" playButtons.forEach(function(btn) {\n" +
|
||||
" btn.addEventListener('click', function(e) {\n" +
|
||||
" e.preventDefault();\n" +
|
||||
" var mediaItem = this.closest('.tabbed-media-content-media-item');\n" +
|
||||
" var img = mediaItem.querySelector('.f--image');\n" +
|
||||
" var btnContainer = mediaItem.querySelector('.f--field.f--button');\n" +
|
||||
" var iframe = mediaItem.querySelector('iframe');\n" +
|
||||
" \n" +
|
||||
" if(img) img.style.display = 'none';\n" +
|
||||
" if(btnContainer) btnContainer.style.display = 'none';\n" +
|
||||
" if(iframe && iframe.getAttribute('data-src')) {\n" +
|
||||
" iframe.setAttribute('src', iframe.getAttribute('data-src'));\n" +
|
||||
" }\n" +
|
||||
" });\n" +
|
||||
" });\n" +
|
||||
" });\n" +
|
||||
"</script>";
|
||||
|
||||
PreparedStatement updateTemplate = conn.prepareStatement(
|
||||
"UPDATE sis_component_template SET html_template = ? WHERE slug = 'tabbed-livestream'"
|
||||
);
|
||||
updateTemplate.setString(1, htmlTemplate);
|
||||
updateTemplate.executeUpdate();
|
||||
|
||||
System.out.println("Update complete!");
|
||||
|
||||
conn.close();
|
||||
} catch (Exception e) {
|
||||
e.printStackTrace();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,117 +0,0 @@
|
||||
import java.sql.Connection;
|
||||
import java.sql.DriverManager;
|
||||
import java.sql.PreparedStatement;
|
||||
|
||||
public class UpdateLivestreamTemplate5 {
|
||||
public static void main(String[] args) {
|
||||
try {
|
||||
Class.forName("oracle.jdbc.OracleDriver");
|
||||
Connection conn = DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521/sisvietnam", "sisvietnam", "sisvietnam");
|
||||
|
||||
// Revert the URL in the database to exactly what the user requested, without autoplay
|
||||
PreparedStatement updatePost = conn.prepareStatement(
|
||||
"UPDATE sis_post SET meta_description = ? WHERE slug = 'sis-vi-suc-khoe-cong-dong-ky-134'"
|
||||
);
|
||||
updatePost.setString(1, "https://www.youtube.com/embed/j63kT9Bjrb4?si=N5JwIcuRn-iRxkYu");
|
||||
updatePost.executeUpdate();
|
||||
|
||||
// We remove the custom image and play button entirely and let YouTube handle it!
|
||||
String htmlTemplate =
|
||||
"<style>\n" +
|
||||
" .tabbed-media-content-media-item { width: 100%; aspect-ratio: 16/9; position: relative; display: block; overflow: hidden; }\n" +
|
||||
" .tabbed-media-content-media-item .f--video-embed { width: 100%; height: 100%; }\n" +
|
||||
" .tabbed-media-content-media-item .f--video-embed iframe { width: 100%; height: 100%; border: none; }\n" +
|
||||
"</style>\n" +
|
||||
"<div class=\"cc--component-container cc--tabbed-media-content\" style=\"background-color: var(--color-gray-100);\">\n" +
|
||||
" <div class=\"c--component c--tabbed-media-content\">\n" +
|
||||
" <div class=\"tabbed-media-content-text-col\">\n" +
|
||||
" <div data-component-id=\"umass_base:section-title\" class=\"f--section-title\">\n" +
|
||||
" <h2 style=\"color: var(--color-brand);\">LiveStream</h2>\n" +
|
||||
" </div>\n" +
|
||||
" <div data-component-id=\"umass_base:tabbed-container\" data-once=\"tabbed-container\">\n" +
|
||||
" <div class=\"tab-labels-container\" role=\"tablist\">\n" +
|
||||
" <div class=\"tab-labels-inner\">\n" +
|
||||
" {{#each livestream_posts}}\n" +
|
||||
" <a href=\"#tabbed-content-{{index}}\" class=\"tab-label link-context-dark\" role=\"tab\" aria-selected=\"false\" aria-controls=\"tabbed-content-{{index}}\">{{title}}</a>\n" +
|
||||
" {{/each}}\n" +
|
||||
" </div>\n" +
|
||||
" </div>\n" +
|
||||
" <div class=\"tab-content-container\">\n" +
|
||||
" {{#each livestream_posts}}\n" +
|
||||
" <div class=\"tab-content-panel\" id=\"tabbed-content-{{index}}\" role=\"tabpanel\" aria-live=\"polite\">\n" +
|
||||
" <div class=\"f--field f--cta-title\">\n" +
|
||||
" <h2 style=\"color: var(--color-black);\"> {{excerpt}} </h2>\n" +
|
||||
" </div>\n" +
|
||||
" <div data-component-id=\"umass_base:description\" class=\"f--description\">\n" +
|
||||
" <div style=\"color:var(--color-black);\">{{content}}</div>\n" +
|
||||
" </div>\n" +
|
||||
" <div class=\"cta-container\">\n" +
|
||||
" <div class=\"f--field f--button\">\n" +
|
||||
" <a href=\"/post/{{slug}}\" class=\"button-primary button-context-light \" aria-label=\"Tìm Hiểu Thêm\" data-component-id=\"umass_base:button\">\n" +
|
||||
" <span class=\"button-text\"> Tìm Hiểu Thêm </span>\n" +
|
||||
" </a>\n" +
|
||||
" </div>\n" +
|
||||
" </div>\n" +
|
||||
" </div>\n" +
|
||||
" {{/each}}\n" +
|
||||
" </div>\n" +
|
||||
" </div>\n" +
|
||||
" </div>\n" +
|
||||
" <div class=\"tabbed-media-content-media-col\">\n" +
|
||||
" {{#each livestream_posts}}\n" +
|
||||
" <div class=\"tabbed-media-content-media-item with-video\" data-tab-id=\"tabbed-content-{{index}}\">\n" +
|
||||
" <div data-component-id=\"umass_base:video-embed\" class=\"f--field f--video-embed\">\n" +
|
||||
" <iframe title=\"YouTube video player\" src=\"{{metaDescription}}\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen></iframe>\n" +
|
||||
" </div>\n" +
|
||||
" </div>\n" +
|
||||
" {{/each}}\n" +
|
||||
" </div>\n" +
|
||||
" </div>\n" +
|
||||
"</div>\n" +
|
||||
"<script>\n" +
|
||||
" document.addEventListener(\"DOMContentLoaded\", function() {\n" +
|
||||
" var tabs = document.querySelectorAll('.tabbed-media-content-media-item[data-tab-id=\"tabbed-content-0\"]');\n" +
|
||||
" if(tabs.length > 0) tabs[0].classList.add('is-active');\n" +
|
||||
" \n" +
|
||||
" var panels = document.querySelectorAll('#tabbed-content-0.tab-content-panel');\n" +
|
||||
" if(panels.length > 0) panels[0].classList.add('is-active');\n" +
|
||||
"\n" +
|
||||
" var labels = document.querySelectorAll('a.tab-label[aria-controls=\"tabbed-content-0\"]');\n" +
|
||||
" if(labels.length > 0) labels[0].setAttribute('aria-selected', 'true');\n" +
|
||||
"\n" +
|
||||
" var allLabels = document.querySelectorAll('.tab-labels-inner .tab-label');\n" +
|
||||
" allLabels.forEach(function(label) {\n" +
|
||||
" label.addEventListener('click', function(e) {\n" +
|
||||
" e.preventDefault();\n" +
|
||||
" allLabels.forEach(function(l) { l.setAttribute('aria-selected', 'false'); });\n" +
|
||||
" this.setAttribute('aria-selected', 'true');\n" +
|
||||
" \n" +
|
||||
" var targetId = this.getAttribute('aria-controls');\n" +
|
||||
" document.querySelectorAll('.tab-content-panel').forEach(function(p) { p.classList.remove('is-active'); });\n" +
|
||||
" document.querySelectorAll('.tabbed-media-content-media-item').forEach(function(m) { \n" +
|
||||
" m.classList.remove('is-active'); \n" +
|
||||
" });\n" +
|
||||
" \n" +
|
||||
" var targetPanel = document.getElementById(targetId);\n" +
|
||||
" if(targetPanel) targetPanel.classList.add('is-active');\n" +
|
||||
" var targetMedia = document.querySelector('.tabbed-media-content-media-item[data-tab-id=\"' + targetId + '\"]');\n" +
|
||||
" if(targetMedia) targetMedia.classList.add('is-active');\n" +
|
||||
" });\n" +
|
||||
" });\n" +
|
||||
" });\n" +
|
||||
"</script>";
|
||||
|
||||
PreparedStatement updateTemplate = conn.prepareStatement(
|
||||
"UPDATE sis_component_template SET html_template = ? WHERE slug = 'tabbed-livestream'"
|
||||
);
|
||||
updateTemplate.setString(1, htmlTemplate);
|
||||
updateTemplate.executeUpdate();
|
||||
|
||||
System.out.println("Update complete!");
|
||||
|
||||
conn.close();
|
||||
} catch (Exception e) {
|
||||
e.printStackTrace();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
SELECT data_json FROM sis_page_component WHERE component_id IN (SELECT id FROM sis_component_template WHERE slug = 'tabbed-livestream');
|
||||
@@ -0,0 +1 @@
|
||||
SELECT id, slug, title, content FROM sis_post WHERE category_id = (SELECT id FROM sis_category WHERE slug = 'livestream');
|
||||
@@ -0,0 +1 @@
|
||||
SELECT table_name FROM user_tables;
|
||||
@@ -0,0 +1,748 @@
|
||||
<style>
|
||||
.charity-hero {
|
||||
--red: #d7193f;
|
||||
--red-dark: #a90f2d;
|
||||
--red-soft: #fff0f4;
|
||||
--pink: #ffe3ec;
|
||||
--ink: #36363a;
|
||||
--muted: #74747a;
|
||||
--paper: #f7f7f8;
|
||||
--white: #ffffff;
|
||||
--shadow: 0 24px 70px rgba(174, 23, 55, .18);
|
||||
--shadow-strong: 0 32px 90px rgba(100, 10, 30, .28);
|
||||
}
|
||||
|
||||
.charity-hero {
|
||||
font-family: "Segoe UI", Arial, sans-serif;
|
||||
color: var(--ink);
|
||||
background: #f1f1f2;
|
||||
position: relative;
|
||||
min-height: 546px;
|
||||
overflow: hidden;
|
||||
isolation: isolate;
|
||||
background:
|
||||
radial-gradient(circle at 72% 22%, rgba(255,255,255,.92), transparent 28%),
|
||||
linear-gradient(110deg, #ffeaf0 0%, #f4f4f5 42%, #f9f9fa 100%);
|
||||
}
|
||||
|
||||
.charity-hero * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.charity-hero a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.charity-hero .hero-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: -2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.charity-hero .blob {
|
||||
position: absolute;
|
||||
border-radius: 999px;
|
||||
filter: blur(3px);
|
||||
opacity: .72;
|
||||
animation: blobFloat 13s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
.charity-hero .blob-1 {
|
||||
width: 460px;
|
||||
height: 460px;
|
||||
background: rgba(255,207,221,.75);
|
||||
left: -150px;
|
||||
top: -170px;
|
||||
}
|
||||
|
||||
.charity-hero .blob-2 {
|
||||
width: 520px;
|
||||
height: 520px;
|
||||
background: rgba(255,236,241,.9);
|
||||
right: -180px;
|
||||
bottom: -220px;
|
||||
animation-delay: -3s;
|
||||
}
|
||||
|
||||
.charity-hero .blob-3 {
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
background: rgba(215,25,63,.12);
|
||||
left: 48%;
|
||||
top: 48%;
|
||||
animation-delay: -6s;
|
||||
}
|
||||
|
||||
.charity-hero .soft-grid {
|
||||
position: absolute;
|
||||
inset: 22px 150px;
|
||||
border: 5px solid rgba(255,206,218,.68);
|
||||
border-radius: 6px;
|
||||
mask: linear-gradient(90deg,transparent,black 4%,black 96%,transparent);
|
||||
-webkit-mask: linear-gradient(90deg,transparent,black 4%,black 96%,transparent);
|
||||
opacity: .76;
|
||||
}
|
||||
|
||||
.charity-hero .soft-grid:before,
|
||||
.charity-hero .soft-grid:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
background: var(--red);
|
||||
border-radius: 50% 50% 48% 48%;
|
||||
transform: rotate(45deg);
|
||||
opacity: .9;
|
||||
}
|
||||
|
||||
.charity-hero .soft-grid:before {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
left: 22px;
|
||||
bottom: -13px;
|
||||
box-shadow: 34px -1px 0 var(--red);
|
||||
}
|
||||
|
||||
.charity-hero .soft-grid:after {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
right: 18px;
|
||||
top: 285px;
|
||||
opacity: .55;
|
||||
box-shadow: 20px 19px 0 rgba(215,25,63,.9);
|
||||
}
|
||||
|
||||
.charity-hero .hero-shell {
|
||||
width: min(1580px, calc(100% - 44px));
|
||||
min-height: 546px;
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(640px, 1.1fr) minmax(470px, .9fr);
|
||||
gap: 42px;
|
||||
align-items: center;
|
||||
padding: 22px 0;
|
||||
}
|
||||
|
||||
.charity-hero .gallery-panel {
|
||||
position: relative;
|
||||
min-height: 500px;
|
||||
padding: 18px 12px 0;
|
||||
}
|
||||
|
||||
.charity-hero .gallery-title {
|
||||
position: absolute;
|
||||
left: 22px;
|
||||
top: 10px;
|
||||
z-index: 22;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
padding: 10px 16px;
|
||||
border-radius: 18px;
|
||||
background: rgba(255,255,255,.72);
|
||||
box-shadow: 0 12px 30px rgba(70,40,50,.08);
|
||||
backdrop-filter: blur(10px);
|
||||
transform: translateY(-12px);
|
||||
opacity: 0;
|
||||
animation: fadeDown .7s ease forwards .25s;
|
||||
}
|
||||
|
||||
.charity-hero .gallery-title .eyebrow {
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
color: var(--red);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.charity-hero .gallery-title strong {
|
||||
font-size: 16px;
|
||||
color: #313136;
|
||||
}
|
||||
|
||||
.charity-hero .gallery-stage {
|
||||
position: relative;
|
||||
height: 464px;
|
||||
width: 100%;
|
||||
overflow: visible;
|
||||
perspective: 1200px;
|
||||
}
|
||||
|
||||
.charity-hero .gallery-light {
|
||||
position: absolute;
|
||||
left: 34%;
|
||||
top: 35%;
|
||||
width: 310px;
|
||||
height: 210px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(255,255,255,.88), rgba(255,255,255,0) 66%);
|
||||
pointer-events: none;
|
||||
opacity: .45;
|
||||
mix-blend-mode: screen;
|
||||
animation: lightPulse 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.charity-hero .focus-frame {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 402px;
|
||||
height: 238px;
|
||||
transform: translate(-50%,-50%) scale(.86);
|
||||
border-radius: 22px;
|
||||
border: 1px solid rgba(215,25,63,.25);
|
||||
box-shadow: 0 0 0 10px rgba(255,255,255,.16), inset 0 0 42px rgba(215,25,63,.07);
|
||||
opacity: 0;
|
||||
transition: .7s ease;
|
||||
pointer-events: none;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.charity-hero .gallery-stage.is-playing .focus-frame {
|
||||
opacity: 1;
|
||||
transform: translate(-50%,-50%) scale(1);
|
||||
}
|
||||
|
||||
.charity-hero .photo-card {
|
||||
position: absolute;
|
||||
left: var(--x);
|
||||
top: var(--y);
|
||||
width: var(--w);
|
||||
background: #fff;
|
||||
border: 4px solid var(--red);
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 14px 36px rgba(61,26,34,.22);
|
||||
transform: translate3d(0,0,0) rotate(var(--r)) scale(.92);
|
||||
opacity: 0;
|
||||
z-index: 5;
|
||||
will-change: transform,opacity,filter;
|
||||
animation: cardIntro .85s cubic-bezier(.2,.9,.25,1.12) forwards, microFloat 6s ease-in-out infinite;
|
||||
animation-delay: var(--delay), calc(var(--delay) + 1s);
|
||||
transition:
|
||||
opacity .75s ease,
|
||||
filter .75s ease,
|
||||
box-shadow .75s ease,
|
||||
border-color .75s ease,
|
||||
left .75s ease,
|
||||
top .75s ease,
|
||||
width .75s ease,
|
||||
transform .95s cubic-bezier(.18,.82,.18,1);
|
||||
}
|
||||
|
||||
.charity-hero .photo-card img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
transform: scale(1.035);
|
||||
transition: transform 1s cubic-bezier(.18,.82,.18,1), filter .8s ease;
|
||||
}
|
||||
|
||||
.charity-hero .photo-card:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.34) 45%, transparent 70%);
|
||||
transform: translateX(-130%);
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.charity-hero .photo-card.is-active:before {
|
||||
animation: shine 1.3s ease .25s;
|
||||
}
|
||||
|
||||
.charity-hero .photo-card.is-active {
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: min(480px, 58vw);
|
||||
transform: translate(-50%,-50%) rotate(0deg) scale(1.06) !important;
|
||||
opacity: 1;
|
||||
z-index: 30;
|
||||
border-color: #fff;
|
||||
border-width: 8px;
|
||||
border-radius: 18px;
|
||||
box-shadow: var(--shadow-strong);
|
||||
filter: saturate(1.08) contrast(1.03);
|
||||
}
|
||||
|
||||
.charity-hero .photo-card.is-active img {
|
||||
transform: scale(1.08);
|
||||
}
|
||||
|
||||
.charity-hero .photo-card.is-dim {
|
||||
opacity: .28;
|
||||
filter: grayscale(.08) saturate(.8) blur(.2px);
|
||||
transform: translate3d(0,0,0) rotate(var(--r)) scale(.82);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.charity-hero .photo-card.is-next {
|
||||
opacity: .74;
|
||||
box-shadow: 0 17px 45px rgba(92,24,42,.18);
|
||||
}
|
||||
|
||||
.charity-hero .photo-card.is-exit {
|
||||
opacity: 0;
|
||||
transform: translateY(28px) scale(.74) rotate(var(--r));
|
||||
}
|
||||
|
||||
.charity-hero .photo-card:hover {
|
||||
transform: translateY(-8px) rotate(0deg) scale(1.03);
|
||||
z-index: 35;
|
||||
box-shadow: 0 24px 70px rgba(100,10,30,.24);
|
||||
}
|
||||
|
||||
.charity-hero .photo-card:hover img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.charity-hero .gallery-controls {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 2px;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
z-index: 40;
|
||||
}
|
||||
|
||||
.charity-hero .dot {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 999px;
|
||||
background: rgba(215,25,63,.22);
|
||||
transition: .35s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.charity-hero .dot.is-active {
|
||||
width: 28px;
|
||||
background: var(--red);
|
||||
box-shadow: 0 0 0 6px rgba(215,25,63,.09);
|
||||
}
|
||||
|
||||
.charity-hero .content-panel {
|
||||
position: relative;
|
||||
min-height: 430px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 26px 24px 26px 8px;
|
||||
}
|
||||
|
||||
.charity-hero .content-panel:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 28px 0 18px 0;
|
||||
border-radius: 34px;
|
||||
background: linear-gradient(145deg, rgba(255,255,255,.54), rgba(255,255,255,.08));
|
||||
border: 1px solid rgba(255,255,255,.55);
|
||||
box-shadow: 0 20px 70px rgba(62,45,54,.06);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.charity-hero .brand-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 170px;
|
||||
gap: 24px;
|
||||
align-items: start;
|
||||
margin-bottom: 54px;
|
||||
}
|
||||
|
||||
.charity-hero .logo-mark {
|
||||
width: 165px;
|
||||
justify-self: end;
|
||||
filter: drop-shadow(0 10px 16px rgba(215,25,63,.15));
|
||||
animation: logoBreath 3.6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.charity-hero .brand-text {
|
||||
text-align: center;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.charity-hero .brand-text h1 {
|
||||
margin: 0 0 8px;
|
||||
text-transform: uppercase;
|
||||
line-height: 1.18;
|
||||
font-size: clamp(20px,1.72vw,30px);
|
||||
letter-spacing: -.3px;
|
||||
color: var(--red);
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.charity-hero .brand-text p {
|
||||
margin: 0;
|
||||
color: #67676c;
|
||||
text-transform: uppercase;
|
||||
font-size: clamp(16px,1.2vw,22px);
|
||||
font-weight: 800;
|
||||
letter-spacing: .3px;
|
||||
}
|
||||
|
||||
.charity-hero .slogan-card {
|
||||
width: min(560px,100%);
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
padding: 20px 18px 28px;
|
||||
}
|
||||
|
||||
.charity-hero .slogan-card:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 86%;
|
||||
height: 86%;
|
||||
transform: translate(-50%,-50%);
|
||||
border-radius: 38px;
|
||||
background: linear-gradient(90deg,rgba(255,255,255,.18),rgba(255,237,243,.72),rgba(255,255,255,.12));
|
||||
filter: blur(.2px);
|
||||
z-index: -1;
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
.charity-hero .quote-mark {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: -16px;
|
||||
font-size: 74px;
|
||||
line-height: 1;
|
||||
color: rgba(215,25,63,.18);
|
||||
font-family: Georgia,serif;
|
||||
}
|
||||
|
||||
.charity-hero .slogan-card h2 {
|
||||
margin: 0;
|
||||
color: #e13b5e;
|
||||
font-size: clamp(29px,2.2vw,42px);
|
||||
line-height: 1.42;
|
||||
font-family: "Segoe Script","Brush Script MT",cursive;
|
||||
font-weight: 600;
|
||||
text-shadow: 0 8px 20px rgba(215,25,63,.12);
|
||||
}
|
||||
|
||||
.charity-hero .slogan-card h2 em {
|
||||
font-style: normal;
|
||||
font-size: .86em;
|
||||
color: #d9284c;
|
||||
}
|
||||
|
||||
.charity-hero .heart-line {
|
||||
display: block;
|
||||
width: 160px;
|
||||
height: 22px;
|
||||
margin: 12px auto 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.charity-hero .heart-line:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 34px;
|
||||
top: 11px;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg,transparent,var(--red));
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.charity-hero .heart-line:after {
|
||||
content: "♡";
|
||||
position: absolute;
|
||||
right: 6px;
|
||||
top: -8px;
|
||||
color: var(--red);
|
||||
font-size: 32px;
|
||||
transform: rotate(18deg);
|
||||
animation: heartBeat 1.7s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.charity-hero .action-row {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
justify-content: center;
|
||||
margin-top: 26px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.charity-hero .btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 44px;
|
||||
padding: 0 20px;
|
||||
border-radius: 999px;
|
||||
font-weight: 800;
|
||||
font-size: 14px;
|
||||
letter-spacing: .2px;
|
||||
transition: .3s ease;
|
||||
box-shadow: 0 12px 30px rgba(115,21,43,.12);
|
||||
}
|
||||
|
||||
.charity-hero .btn.primary {
|
||||
background: linear-gradient(135deg,var(--red),#ef4769);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.charity-hero .btn.secondary {
|
||||
background: rgba(255,255,255,.74);
|
||||
color: var(--red);
|
||||
border: 1px solid rgba(215,25,63,.18);
|
||||
}
|
||||
|
||||
.charity-hero .btn:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 18px 42px rgba(115,21,43,.18);
|
||||
}
|
||||
|
||||
.charity-hero .reveal-up {
|
||||
opacity: 0;
|
||||
transform: translateY(24px);
|
||||
animation: revealUp .8s ease forwards;
|
||||
}
|
||||
|
||||
.charity-hero .brand-text.reveal-up {
|
||||
animation-delay: .2s;
|
||||
}
|
||||
|
||||
.charity-hero .logo-mark.reveal-up {
|
||||
animation-delay: .38s;
|
||||
}
|
||||
|
||||
.charity-hero .slogan-card.reveal-up {
|
||||
animation-delay: .62s;
|
||||
}
|
||||
|
||||
.charity-hero .action-row.reveal-up {
|
||||
animation-delay: .86s;
|
||||
}
|
||||
|
||||
@keyframes cardIntro {
|
||||
from { opacity: 0; transform: translate3d(-28px,22px,0) rotate(calc(var(--r) - 7deg)) scale(.78); }
|
||||
to { opacity: 1; transform: translate3d(0,0,0) rotate(var(--r)) scale(.92); }
|
||||
}
|
||||
@keyframes microFloat {
|
||||
0%,100% { margin-top: 0; }
|
||||
50% { margin-top: -8px; }
|
||||
}
|
||||
@keyframes shine {
|
||||
to { transform: translateX(130%); }
|
||||
}
|
||||
@keyframes revealUp {
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes fadeDown {
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes logoBreath {
|
||||
0%,100% { transform: translateY(0) scale(1); }
|
||||
50% { transform: translateY(-6px) scale(1.025); }
|
||||
}
|
||||
@keyframes heartBeat {
|
||||
0%,100% { transform: rotate(18deg) scale(1); }
|
||||
20% { transform: rotate(18deg) scale(1.18); }
|
||||
38% { transform: rotate(18deg) scale(1); }
|
||||
}
|
||||
@keyframes blobFloat {
|
||||
to { transform: translate(26px,20px) scale(1.05); }
|
||||
}
|
||||
@keyframes lightPulse {
|
||||
0%,100% { opacity: .25; transform: scale(.96); }
|
||||
50% { opacity: .58; transform: scale(1.08); }
|
||||
}
|
||||
|
||||
@media (max-width:1200px) {
|
||||
.charity-hero .hero-shell {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 10px;
|
||||
padding: 18px 0 34px;
|
||||
}
|
||||
.charity-hero { min-height: auto; }
|
||||
.charity-hero .content-panel { min-height: auto; }
|
||||
.charity-hero .gallery-panel { min-height: 470px; }
|
||||
.charity-hero .gallery-stage { height: 430px; }
|
||||
.charity-hero .brand-row { grid-template-columns: 1fr 130px; margin-bottom: 20px; }
|
||||
.charity-hero .logo-mark { width: 130px; }
|
||||
}
|
||||
|
||||
@media (max-width:720px) {
|
||||
.charity-hero .hero-shell { width: calc(100% - 24px); }
|
||||
.charity-hero .soft-grid { inset: 12px; border-width: 3px; }
|
||||
.charity-hero .gallery-panel { padding: 12px 0; min-height: 390px; }
|
||||
.charity-hero .gallery-title { display: none; }
|
||||
.charity-hero .gallery-stage { height: 370px; overflow: hidden; }
|
||||
.charity-hero .photo-card { width: calc(var(--w) * .72); }
|
||||
.charity-hero .photo-card.is-active { width: min(86vw,380px); }
|
||||
.charity-hero .content-panel { padding: 8px; }
|
||||
.charity-hero .brand-row { display: flex; flex-direction: column-reverse; align-items: center; gap: 10px; }
|
||||
.charity-hero .brand-text h1 { text-align: center; }
|
||||
.charity-hero .slogan-card h2 { font-size: 29px; }
|
||||
.charity-hero .btn { height: 42px; padding: 0 16px; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion:reduce) {
|
||||
.charity-hero *,
|
||||
.charity-hero *::before,
|
||||
.charity-hero *::after {
|
||||
animation-duration: .01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
scroll-behavior: auto !important;
|
||||
transition-duration: .01ms !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="charity-hero" aria-label="Quỹ từ thiện bệnh nhân nghèo bị đột quỵ">
|
||||
<div class="hero-bg">
|
||||
<span class="blob blob-1"></span>
|
||||
<span class="blob blob-2"></span>
|
||||
<span class="blob blob-3"></span>
|
||||
<span class="soft-grid"></span>
|
||||
</div>
|
||||
|
||||
<section class="hero-shell">
|
||||
<div class="gallery-panel" aria-label="Hình ảnh hoạt động quỹ từ thiện">
|
||||
<div class="gallery-title">
|
||||
<span class="eyebrow">S.I.S Charity Foundation</span>
|
||||
<strong>Những khoảnh khắc sẻ chia</strong>
|
||||
</div>
|
||||
|
||||
<div class="gallery-stage" id="galleryStage">
|
||||
<article class="photo-card p1" data-index="0" style="--x: -4%; --y: 2%; --r: -2.5deg; --w: 205px; --delay: 0.05s;">
|
||||
<img src="/upload/charity_v4/photo-01.jpg" alt="Trao hỗ trợ bệnh nhân 1" />
|
||||
</article>
|
||||
<article class="photo-card p2" data-index="1" style="--x: 18%; --y: -2%; --r: 1.6deg; --w: 298px; --delay: 0.16s;">
|
||||
<img src="/upload/charity_v4/photo-02.jpg" alt="Trao hỗ trợ bệnh nhân 2" />
|
||||
</article>
|
||||
<article class="photo-card p3" data-index="2" style="--x: 63%; --y: 0%; --r: -1.2deg; --w: 410px; --delay: 0.27s;">
|
||||
<img src="/upload/charity_v4/photo-05.jpg" alt="Trao hỗ trợ bệnh nhân 3" />
|
||||
</article>
|
||||
<article class="photo-card p4" data-index="3" style="--x: 0%; --y: 27%; --r: 2.2deg; --w: 245px; --delay: 0.38s">
|
||||
<img src="/upload/charity_v4/photo-03.jpg" alt="Trao hỗ trợ bệnh nhân 4" />
|
||||
</article>
|
||||
<article class="photo-card p5" data-index="4" style="--x: 32%; --y: 32%; --r: -1.8deg; --w: 260px; --delay: 0.49s;">
|
||||
<img src="/upload/charity_v4/photo-04.jpg" alt="Trao hỗ trợ bệnh nhân 5" />
|
||||
</article>
|
||||
<article class="photo-card p6" data-index="5" style="--x: 57%; --y: 35%; --r: 1deg; --w: 195px; --delay: 0.6s">
|
||||
<img src="/upload/charity_v4/photo-06.jpg" alt="Trao hỗ trợ bệnh nhân 6" />
|
||||
</article>
|
||||
<article class="photo-card p7" data-index="6" style="--x: 4%; --y: 62%; --r: -1.4deg; --w: 270px; --delay: 0.71s;">
|
||||
<img src="/upload/charity_v4/photo-07.jpg" alt="Trao hỗ trợ bệnh nhân 7" />
|
||||
</article>
|
||||
<article class="photo-card p8" data-index="7" style="--x: 42%; --y: 73%; --r: 1.2deg; --w: 255px; --delay: 0.82s;">
|
||||
<img src="/upload/charity_v4/photo-08.jpg" alt="Trao hỗ trợ bệnh nhân 8" />
|
||||
</article>
|
||||
<article class="photo-card p9" data-index="8" style="--x: 77%; --y: 66%; --r: -1deg; --w: 338px; --delay: 0.93s">
|
||||
<img src="/upload/charity_v4/photo-09.jpg" alt="Trao hỗ trợ bệnh nhân 9" />
|
||||
</article>
|
||||
<div class="gallery-light" aria-hidden="true"></div>
|
||||
</div>
|
||||
|
||||
<div class="gallery-controls" aria-hidden="true">
|
||||
<span class="dot is-active"></span>
|
||||
<span class="dot"></span>
|
||||
<span class="dot"></span>
|
||||
<span class="dot"></span>
|
||||
<span class="dot"></span>
|
||||
<span class="dot"></span>
|
||||
<span class="dot"></span>
|
||||
<span class="dot"></span>
|
||||
<span class="dot"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-panel">
|
||||
<div class="brand-row">
|
||||
<div class="brand-text reveal-up">
|
||||
<h1>Quỹ từ thiện bệnh nhân nghèo bị đột quỵ<br />khu vực Đồng bằng sông Cửu Long</h1>
|
||||
<p>S.I.S Charity Foundation</p>
|
||||
</div>
|
||||
<img class="logo-mark reveal-up" src="/upload/charity_v4/logo.png" alt="Stroke International Services Charity Foundation" />
|
||||
</div>
|
||||
|
||||
<div class="slogan-card reveal-up">
|
||||
<span class="quote-mark">“</span>
|
||||
<h2>Sẻ chia yêu thương<br /><em>đến bệnh nhân nghèo bị đột quỵ</em></h2>
|
||||
<span class="heart-line" aria-hidden="true"></span>
|
||||
</div>
|
||||
|
||||
<div class="action-row reveal-up">
|
||||
<a class="btn primary" href="#">Lan tỏa yêu thương</a>
|
||||
<a class="btn secondary" href="#">Xem hoạt động quỹ</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function(){
|
||||
const container = document.querySelector('.charity-hero');
|
||||
if(!container) return;
|
||||
const stage = container.querySelector('.gallery-stage');
|
||||
const cards = Array.from(container.querySelectorAll('.photo-card'));
|
||||
const dots = Array.from(container.querySelectorAll('.dot'));
|
||||
if(!stage || cards.length === 0) return;
|
||||
|
||||
let active = 0;
|
||||
let timer = null;
|
||||
const duration = 2800;
|
||||
|
||||
function setActive(index){
|
||||
active = index % cards.length;
|
||||
stage.classList.add('is-playing');
|
||||
|
||||
cards.forEach((card, i) => {
|
||||
card.classList.remove('is-active','is-dim','is-next','is-exit');
|
||||
const diff = (i - active + cards.length) % cards.length;
|
||||
if(i === active){
|
||||
card.classList.add('is-active');
|
||||
}else if(diff === 1 || diff === 2){
|
||||
card.classList.add('is-next');
|
||||
}else if(diff === cards.length - 1){
|
||||
card.classList.add('is-exit');
|
||||
}else{
|
||||
card.classList.add('is-dim');
|
||||
}
|
||||
});
|
||||
|
||||
dots.forEach((dot, i) => dot.classList.toggle('is-active', i === active));
|
||||
}
|
||||
|
||||
function next(){
|
||||
setActive(active + 1);
|
||||
}
|
||||
|
||||
function start(){
|
||||
stop();
|
||||
timer = setInterval(next, duration);
|
||||
}
|
||||
|
||||
function stop(){
|
||||
if(timer) clearInterval(timer);
|
||||
}
|
||||
|
||||
cards.forEach((card, i) => {
|
||||
card.addEventListener('mouseenter', () => {
|
||||
stop();
|
||||
setActive(i);
|
||||
});
|
||||
card.addEventListener('mouseleave', start);
|
||||
});
|
||||
|
||||
dots.forEach((dot, i) => {
|
||||
dot.addEventListener('click', () => {
|
||||
setActive(i);
|
||||
start();
|
||||
});
|
||||
});
|
||||
|
||||
// Start immediately or on load if part of a bigger page
|
||||
setTimeout(() => {
|
||||
setActive(0);
|
||||
start();
|
||||
}, 900);
|
||||
})();
|
||||
</script>
|
||||
@@ -1,180 +1,172 @@
|
||||
<body>
|
||||
<div class="cc--component-container cc--tabbed-media-content" style="background-color: var(--color-gray-100);">
|
||||
<div class="c--component c--tabbed-media-content">
|
||||
<div class="tabbed-media-content-text-col">
|
||||
<div data-component-id="umass_base:section-title" class="f--section-title">
|
||||
<h2 style="color: var(--color-brand);">LiveStream tháng 07</h2>
|
||||
</div>
|
||||
<div data-component-id="umass_base:tabbed-container" data-once="tabbed-container">
|
||||
<div class="tab-labels-container" role="tablist">
|
||||
<div class="tab-labels-inner">
|
||||
<a href="https://www.umass.edu/#tabbed-content-campus-life" class="tab-label link-context-dark" role="tab" aria-selected="true" aria-controls="tabbed-content-campus-life">Tuần 1</a>
|
||||
<a href="https://www.umass.edu/#tabbed-content-campus-housing" class="tab-label link-context-dark" role="tab" aria-selected="false" aria-controls="tabbed-content-campus-housing">Tuần 2</a>
|
||||
<a href="https://www.umass.edu/#tabbed-content-dining" class="tab-label link-context-dark" role="tab" aria-selected="false" aria-controls="tabbed-content-dining">Tuần 3</a>
|
||||
<a href="https://www.umass.edu/#tabbed-content-around-amherst" class="tab-label link-context-dark" role="tab" aria-selected="false" aria-controls="tabbed-content-around-amherst">Tuần 4</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-content-container">
|
||||
<div class="tab-content-panel is-active" id="tabbed-content-campus-life" role="tabpanel" aria-live="polite">
|
||||
<div class="f--field f--cta-title">
|
||||
<h2 style="color: var(--color-black);"> Tầm soát và phòng ngừa ung thư gan </h2>
|
||||
</div>
|
||||
<div data-component-id="umass_base:description" class="f--description">
|
||||
<p style="color:var(--color-black);">Ung thư gan là một trong những bệnh ung thư có tỷ lệ tử vong hàng đầu tại Việt Nam. Đáng lo ngại, phần lớn người bệnh chỉ được phát hiện khi bệnh đã ở giai đoạn muộn, khi các cơ hội điều trị hiệu quả đã bị thu hẹp đáng kể.</p>
|
||||
</div>
|
||||
<div class="cta-container">
|
||||
<div class="f--field f--button">
|
||||
<a href="https://www.umass.edu/gateway/campus-life/student-activities" class="button-primary button-context-light " aria-label="Tìm Hiểu Thêm" data-component-id="umass_base:button">
|
||||
<span class="button-text"> Tìm Hiểu Thêm </span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-content-panel" id="tabbed-content-campus-housing" role="tabpanel" aria-live="polite">
|
||||
<div class="f--field f--cta-title">
|
||||
<h3> Your Campus Home </h3>
|
||||
</div>
|
||||
<div data-component-id="umass_base:description" class="f--description">
|
||||
<p>Choose from vibrant residential communities where students live, study, and build lasting friendships steps from the classroom.</p>
|
||||
</div>
|
||||
<div class="cta-container">
|
||||
<div class="f--field f--button">
|
||||
<a href="https://www.umass.edu/gateway/campus-life/living-and-dining" class="button-primary button-context-light " aria-label="Learn About Living at UMass" data-component-id="umass_base:button">
|
||||
<span class="button-text"> Tìm hiểu thêm </span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-content-panel" id="tabbed-content-dining" role="tabpanel" aria-live="polite">
|
||||
<div class="f--field f--cta-title">
|
||||
<h3> Food Worth Talking About </h3>
|
||||
</div>
|
||||
<div data-component-id="umass_base:description" class="f--description">
|
||||
<p>Discover why UMass dining is ranked #1 nationally—recognized for quality, variety, and sustainability.</p>
|
||||
</div>
|
||||
<div class="cta-container">
|
||||
<div class="f--field f--button">
|
||||
<a href="https://www.umassdining.com/" class="button-primary button-context-light ext" aria-label="Learn Why UMass is #1 in Dining" data-component-id="umass_base:button" data-extlink="">
|
||||
<span class="button-text"> Learn Why UMass is #1 in Dining </span>
|
||||
<svg focusable="false" width="1em" height="1em" class="ext" data-extlink-placement="append" aria-label="(link is external)" viewBox="0 0 80 40" role="img" aria-hidden="false">
|
||||
<title>(link is external)</title>
|
||||
<path d="M48 26c-1.1 0-2 0.9-2 2v26H10V18h26c1.1 0 2-0.9 2-2s-0.9-2-2-2H8c-1.1 0-2 0.9-2 2v40c0 1.1 0.9 2 2 2h40c1.1 0 2-0.9 2-2V28C50 26.9 49.1 26 48 26z"></path>
|
||||
<path d="M56 6H44c-1.1 0-2 0.9-2 2s0.9 2 2 2h7.2L30.6 30.6c-0.8 0.8-0.8 2 0 2.8C31 33.8 31.5 34 32 34s1-0.2 1.4-0.6L54 12.8V20c0 1.1 0.9 2 2 2s2-0.9 2-2V8C58 6.9 57.1 6 56 6z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-content-panel" id="tabbed-content-around-amherst" role="tabpanel" aria-live="polite">
|
||||
<div class="f--field f--cta-title">
|
||||
<h3> Amherst, Uncommon </h3>
|
||||
</div>
|
||||
<div data-component-id="umass_base:description" class="f--description">
|
||||
<p>A vibrant creative culture, great food, and the natural beauty of the Pioneer Valley come together to shape this town’s distinctive, welcoming spirit.</p>
|
||||
</div>
|
||||
<div class="cta-container">
|
||||
<div class="f--field f--button">
|
||||
<a href="https://www.umass.edu/gateway/student-life/life-amherst" class="button-primary button-context-light " aria-label="Learn More About Amherst" data-component-id="umass_base:button">
|
||||
<span class="button-text"> Learn More About Amherst </span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tabbed-media-content-media-col">
|
||||
<div class="tabbed-media-content-media-item is-active with-video" data-tab-id="tabbed-content-campus-life">
|
||||
<div class="f--field f--image">
|
||||
<img data-src="https://www.umass.edu/sites/default/files/styles/9_16_720x1280/public/2026-03/medium_jpg-2026_Vertical_Assets_5179_John_Solem_.jpg?h=7c5befa5&itok=DZUe-3fS" class=" ls-is-cached lazyloaded" alt="A UMass student plays ping pong." src="/UMass%20Amherst%20_%20UMass%20Amherst_files/medium_jpg-2026_Vertical_Assets_5179_John_Solem_.jpg">
|
||||
</div>
|
||||
<div class="f--field f--button">
|
||||
<a href="https://www.umass.edu/#" class="button-play button-context-light " aria-label="Play video" data-component-id="umass_base:button">
|
||||
<span class="button-icon button-icon-play">
|
||||
<svg width="18" height="27" viewBox="0 0 18 27" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18 13.5L0 0V27L18 13.5Z"></path>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="button-text visually-hidden"> Play </span>
|
||||
</a>
|
||||
</div>
|
||||
<div data-component-id="umass_base:video-embed" class="f--field f--video-embed">
|
||||
<iframe title="Video Content" id="video-132086-1" width="900" height="1600" src="https://www.youtube.com/embed/q0ZxZVbnMqs" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tabbed-media-content-media-item with-video" data-tab-id="tabbed-content-campus-housing">
|
||||
<div class="f--field f--image">
|
||||
<img data-src="https://www.umass.edu/sites/default/files/styles/9_16_720x1280/public/2026-03/FY26_Vertical-Campus-Housing.jpg?h=75081741&itok=6kDcYqy3" class="lazyload" alt="A UMass student sits on her bed in a dorm room.">
|
||||
</div>
|
||||
<div class="f--field f--button">
|
||||
<a href="https://www.umass.edu/#" class="button-play button-context-light " aria-label="Play video" data-component-id="umass_base:button">
|
||||
<span class="button-icon button-icon-play">
|
||||
<svg width="18" height="27" viewBox="0 0 18 27" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18 13.5L0 0V27L18 13.5Z"></path>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="button-text visually-hidden"> Play </span>
|
||||
</a>
|
||||
</div>
|
||||
<div data-component-id="umass_base:video-embed" class="f--field f--video-embed">
|
||||
<iframe title="Video Content" id="video-132086-2" width="900" height="1600" src="https://www.youtube.com/embed/7D_TnBztQhU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tabbed-media-content-media-item with-video" data-tab-id="tabbed-content-dining">
|
||||
<div class="f--field f--image">
|
||||
<img data-src="https://www.umass.edu/sites/default/files/styles/9_16_720x1280/public/2026-03/FY26_Vertical-Dining2.jpg?h=75081741&itok=_34BDcqA" class="lazyload" alt="A student gets food at a UMass Amherst dining hall.">
|
||||
</div>
|
||||
<div class="f--field f--button">
|
||||
<a href="https://www.umass.edu/#" class="button-play button-context-light " aria-label="Play video" data-component-id="umass_base:button">
|
||||
<span class="button-icon button-icon-play">
|
||||
<svg width="18" height="27" viewBox="0 0 18 27" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18 13.5L0 0V27L18 13.5Z"></path>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="button-text visually-hidden"> Play </span>
|
||||
</a>
|
||||
</div>
|
||||
<div data-component-id="umass_base:video-embed" class="f--field f--video-embed">
|
||||
<iframe title="Video Content" id="video-132086-3" width="900" height="1600" src="https://www.youtube.com/embed/YRzZ9aRZ69w" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tabbed-media-content-media-item with-video" data-tab-id="tabbed-content-around-amherst">
|
||||
<div class="f--field f--image">
|
||||
<img data-src="https://www.umass.edu/sites/default/files/styles/9_16_720x1280/public/2026-03/FY26_Vertical-Downtown-Amherst.jpg?h=75081741&itok=irWjha4q" class="lazyload" alt="A UMass student holds a hote bag that reads "I Love Amherst."">
|
||||
</div>
|
||||
<div class="f--field f--button">
|
||||
<a href="https://www.umass.edu/#" class="button-play button-context-light " aria-label="Play video" data-component-id="umass_base:button">
|
||||
<span class="button-icon button-icon-play">
|
||||
<svg width="18" height="27" viewBox="0 0 18 27" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18 13.5L0 0V27L18 13.5Z"></path>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="button-text visually-hidden"> Play </span>
|
||||
</a>
|
||||
</div>
|
||||
<div data-component-id="umass_base:video-embed" class="f--field f--video-embed">
|
||||
<iframe title="Video Content" id="video-132086-4" width="900" height="1600" src="https://www.youtube.com/embed/agqIJlJpbAY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<style>* { box-sizing: border-box; } body {margin: 0;}
|
||||
.tab-labels-inner {
|
||||
border-bottom-color: var(--color-gray-800);
|
||||
.tab-label {
|
||||
font-weight: var(--font-weight-bold) !important;
|
||||
color: var(--color-black) !important;
|
||||
}
|
||||
.tab-label {
|
||||
&[aria-selected="true"] {
|
||||
font-weight: 700;
|
||||
color: var(--color-black);
|
||||
border-bottom: 2px solid var(--color-brand) !important;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
<style>
|
||||
.stroke-book-banner {
|
||||
background-color: #f8f9fa;
|
||||
padding: 50px 20px;
|
||||
font-family: var(--font-family-base, 'Inter', 'Segoe UI', sans-serif);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.sbb-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
max-width: 1200px;
|
||||
width: 100%;
|
||||
gap: 50px;
|
||||
/* Faint brain background pattern placeholder */
|
||||
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 24 24" fill="none" stroke="%23ffe6e6" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.96-3.08 3 3 0 0 1-.34-5.58 2.5 2.5 0 0 1 1.32-4.24 2.5 2.5 0 0 1 1.98-3A2.5 2.5 0 0 1 9.5 2Z"/><path d="M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.96-3.08 3 3 0 0 0 .34-5.58 2.5 2.5 0 0 0-1.32-4.24 2.5 2.5 0 0 0-1.98-3A2.5 2.5 0 0 0 14.5 2Z"/></svg>');
|
||||
background-position: right center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 350px;
|
||||
}
|
||||
|
||||
.sbb-left {
|
||||
flex: 1.2;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.sbb-left img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
filter: drop-shadow(0 15px 25px rgba(0,0,0,0.15));
|
||||
}
|
||||
|
||||
.sbb-right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.sbb-subtitle {
|
||||
font-size: 1.4rem;
|
||||
font-weight: 700;
|
||||
color: #222;
|
||||
margin-bottom: 5px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.sbb-title {
|
||||
font-size: 3.2rem;
|
||||
font-weight: 800;
|
||||
color: #c0272d;
|
||||
margin: 0 0 15px 0;
|
||||
text-transform: uppercase;
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.sbb-tagline {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.sbb-features {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 0 35px 0;
|
||||
}
|
||||
|
||||
.sbb-features li {
|
||||
font-size: 1.1rem;
|
||||
color: #444;
|
||||
margin-bottom: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.sbb-features li::before {
|
||||
content: '✓';
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
border: 1.5px solid #c0272d;
|
||||
color: #c0272d;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
margin-right: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sbb-btn {
|
||||
display: inline-block;
|
||||
background: linear-gradient(180deg, #d81b32 0%, #a11122 100%);
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
font-size: 1.15rem;
|
||||
padding: 16px 40px;
|
||||
border-radius: 6px;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
box-shadow: 0 4px 10px rgba(161, 17, 34, 0.4);
|
||||
transition: all 0.3s ease;
|
||||
letter-spacing: 0.5px;
|
||||
border: 1px solid #8e0b1b;
|
||||
}
|
||||
|
||||
.sbb-btn:hover {
|
||||
background: linear-gradient(180deg, #ee1f38 0%, #b81427 100%);
|
||||
box-shadow: 0 6px 15px rgba(161, 17, 34, 0.5);
|
||||
transform: translateY(-2px);
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.sbb-container {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
gap: 30px;
|
||||
background-image: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
.sbb-left {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.sbb-right {
|
||||
align-items: center;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.sbb-title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.sbb-features li {
|
||||
text-align: left;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="stroke-book-banner">
|
||||
<div class="sbb-container">
|
||||
<div class="sbb-left">
|
||||
<img src="/upload/sach-dot-quy-ngang.png" alt="Cẩm nang sức khỏe phòng chống đột quỵ">
|
||||
</div>
|
||||
<div class="sbb-right">
|
||||
<div class="sbb-subtitle">CẨM NANG SỨC KHỎE</div>
|
||||
<h2 class="sbb-title">PHÒNG CHỐNG ĐỘT QUỴ</h2>
|
||||
<div class="sbb-tagline">Hiểu đúng – Phòng sớm – Sống khỏe mỗi ngày</div>
|
||||
<ul class="sbb-features">
|
||||
<li>Kiến thức khoa học, dễ hiểu</li>
|
||||
<li>Nhận biết sớm dấu hiệu – Xử trí kịp thời</li>
|
||||
<li>Phòng ngừa hiệu quả – Giảm thiểu nguy cơ</li>
|
||||
<li>Dành cho mọi lứa tuổi</li>
|
||||
</ul>
|
||||
<a href="#" class="sbb-btn">TÌM HIỂU NGAY</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
+1
-1
@@ -56,7 +56,7 @@ public class SecurityConfiguration {
|
||||
authz
|
||||
.requestMatchers(HttpMethod.GET, "/", "/about", "/flex-finish", "/tin-tuc", "/tin-tuc/**", "/lien-he",
|
||||
"/manage/login", "/css/**", "/images/**", "/js/**", "/vendor/**", "/fonts/**", "/login-assets/**", "/UMass*/**", "/Undergraduate*/**",
|
||||
"/favicon.ico", "/favicons/**", "/flex-finish/**", "/contact-us/**", "/uploads/**", "/api/manage/snippets/**", "/page/**", "/news/article/**", "/post/**", "/error",
|
||||
"/favicon.ico", "/favicons/**", "/flex-finish/**", "/contact-us/**", "/uploads/**", "/upload/**", "/api/manage/snippets/**", "/page/**", "/news/article/**", "/post/**", "/error",
|
||||
"/about-us", "/specialty", "/doctor", "/service", "/health-library", "/news-and-events", "/patient-support", "/medical-expert", "/umcers", "/bidding", "/contact-us", "/theme-assets/**")
|
||||
.permitAll()
|
||||
.requestMatchers(HttpMethod.POST, "/api/manage/media/upload").permitAll()
|
||||
|
||||
+1
@@ -224,6 +224,7 @@ public class ComponentTemplateService {
|
||||
itemHtml = itemHtml.replace("{{excerpt}}", safeExcerpt);
|
||||
itemHtml = itemHtml.replace("{{content}}", post.getContent() != null ? parseContentToHtml(post.getContent()) : "");
|
||||
itemHtml = itemHtml.replace("{{metaDescription}}", post.getMetaDescription() != null ? org.springframework.web.util.HtmlUtils.htmlEscape(post.getMetaDescription()) : "");
|
||||
itemHtml = itemHtml.replace("{{{metaDescriptionRaw}}}", post.getMetaDescription() != null ? post.getMetaDescription() : "");
|
||||
itemHtml = itemHtml.replace("{{featuredImageUrl}}", post.getFeaturedImage() != null ? post.getFeaturedImage() : "");
|
||||
String dateStr = post.getCreatedDate() != null ? formatter.format(post.getCreatedDate()) : "";
|
||||
itemHtml = itemHtml.replace("{{date}}", dateStr);
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
/* Custom CSS - This file has the highest priority and will override other styles */
|
||||
|
||||
/* ==========================================================================
|
||||
Design System Tokens (Project-wide CSS Variables)
|
||||
1. Design System Tokens (Project-wide CSS Variables)
|
||||
========================================================================== */
|
||||
:root {
|
||||
/* Primary brand colors */
|
||||
@@ -36,11 +36,27 @@
|
||||
--radius-lg: 8px;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
2. Global / Base Overrides
|
||||
========================================================================== */
|
||||
[data-component-id="umass_base:tophat"] {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
/* Creates an overlay gradient on top of the ambient video */
|
||||
/* Navigation Container (Base) */
|
||||
.navigation-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 1.5rem;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
3. Component Styles (Global)
|
||||
========================================================================== */
|
||||
|
||||
/* --- Ambient Video --- */
|
||||
.f--ambient-video {
|
||||
position: relative;
|
||||
}
|
||||
@@ -60,266 +76,7 @@
|
||||
/* Ensures it sits above the video */
|
||||
}
|
||||
|
||||
/* News Grid Tablet Layout */
|
||||
@media screen and (min-width: 769px) and (max-width: 1024px) {
|
||||
.news-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 24px;
|
||||
align-items: stretch;
|
||||
}
|
||||
.featured-grid__item {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
}
|
||||
.featured-grid__item .news-card--featured {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
border: 1px solid #881C1C;
|
||||
border-radius: 16px;
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
gap: 16px;
|
||||
background: #fff;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
.featured-grid__item .news-card__image {
|
||||
flex: none;
|
||||
width: 100%;
|
||||
aspect-ratio: 1 / 1;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
.featured-grid__item .news-card__image > div {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.featured-grid__item .news-card__image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.featured-grid__item .news-card__content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
min-width: 0;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
.featured-grid__item .featured-grid__category {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.featured-grid__item .featured-grid__category a {
|
||||
display: inline-block;
|
||||
background-color: #f2f2f2;
|
||||
color: #881C1C;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.featured-grid__item .news-card__title {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
margin-top: 0;
|
||||
margin-bottom: 12px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.featured-grid__item .news-card__title a {
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
}
|
||||
.featured-grid__item .news-card__title a:hover {
|
||||
color: #881C1C;
|
||||
}
|
||||
.featured-grid__item .news-card__date {
|
||||
margin-top: auto;
|
||||
color: #881C1C;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
/* News Grid Desktop Layout */
|
||||
@media screen and (min-width: 1025px){
|
||||
.news-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 24px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.education-column .news-list {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
.featured-grid__item {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
}
|
||||
.featured-grid__item .news-card--featured {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
border: 1px solid #881C1C;
|
||||
border-radius: 16px;
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
gap: 16px;
|
||||
background: #fff;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
.featured-grid__item .news-card__image {
|
||||
flex: 0 0 170px;
|
||||
width: 100%;
|
||||
height: 170px;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
.featured-grid__item .news-card__image > div {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.featured-grid__item .news-card__image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.featured-grid__item .news-card__content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
min-width: 0;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
.featured-grid__item .featured-grid__category {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.featured-grid__item .featured-grid__category a {
|
||||
display: inline-block;
|
||||
background-color: #f2f2f2;
|
||||
color: #881C1C;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.featured-grid__item .news-card__title {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
margin-top: 0;
|
||||
margin-bottom: 12px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.featured-grid__item .news-card__title a {
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
}
|
||||
.featured-grid__item .news-card__title a:hover {
|
||||
color: #881C1C;
|
||||
}
|
||||
.featured-grid__item .news-card__date {
|
||||
margin-top: auto;
|
||||
color: #881C1C;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Desktop Layouts (>= 1024px)
|
||||
========================================================================== */
|
||||
@media screen and (min-width: 1025px) {
|
||||
/* Side-by-side layout for News and Events */
|
||||
.news-events-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 40px;
|
||||
align-items: stretch;
|
||||
}
|
||||
.news-events-row > .news-column {
|
||||
flex: 1.8;
|
||||
min-width: 0;
|
||||
}
|
||||
.news-events-row > .events-column {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Navigation Container & Mobile Menu
|
||||
========================================================================== */
|
||||
|
||||
/* --- Desktop (>1024px) --- */
|
||||
.navigation-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 1.5rem;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
/* Desktop: show horizontal menu, hide hamburger */
|
||||
@media (min-width: 1025px) {
|
||||
#mobile-hamburger {
|
||||
display: none !important;
|
||||
}
|
||||
#mobile-flyout-container {
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
}
|
||||
.primary-navigation {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
/* Desktop: hide arrow toggles and back buttons */
|
||||
.mc--main-menu .arrow-toggle,
|
||||
.mc--main-menu .button-back,
|
||||
.mc--main-menu .navigation-title {
|
||||
display: none !important;
|
||||
}
|
||||
/* Desktop: horizontal main menu */
|
||||
.m--main-menu {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.m--main-menu > .menu-item > .link-arrow-wrapper > a {
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
padding: 10px 15px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Mobile (<= 768px) --- */
|
||||
@media (max-width: 768px) {
|
||||
/* Hide ambient video on mobile to save bandwidth and use image fallback */
|
||||
.f--ambient-video,
|
||||
.video-controls {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Override Tabbed Media Content text colors since background was changed to light gray */
|
||||
/* --- Tabbed Media Content --- */
|
||||
.cc--tabbed-media-content .f--description p {
|
||||
color: #000000 !important;
|
||||
}
|
||||
@@ -327,7 +84,6 @@
|
||||
color: var(--color-brand) !important;
|
||||
}
|
||||
|
||||
/* Style tab labels and borders to black */
|
||||
.cc--tabbed-media-content .tab-labels-inner {
|
||||
border-bottom-color: #cccccc !important; /* light gray line for the tab row */
|
||||
}
|
||||
@@ -340,13 +96,37 @@
|
||||
border-bottom: 3px solid #000000 !important; /* solid black underline for active tab */
|
||||
}
|
||||
|
||||
/* Center children inside tabbed-media-content-media-col */
|
||||
.cc--tabbed-media-content .tabbed-media-content-media-col {
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
/* --- Mobile & Tablet (<=1024px) --- */
|
||||
|
||||
/* ==========================================================================
|
||||
4. Media Queries
|
||||
========================================================================== */
|
||||
|
||||
/* --- Mobile (<= 768px) --- */
|
||||
@media (max-width: 768px) {
|
||||
/* Hide ambient video on mobile to save bandwidth and use image fallback */
|
||||
.f--ambient-video,
|
||||
.video-controls {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Mobile & Tablet (<= 1024px) --- */
|
||||
@media (max-width: 1024px) {
|
||||
.navigation-container {
|
||||
gap: 0.5rem;
|
||||
@@ -454,8 +234,6 @@
|
||||
.arrow-toggle {
|
||||
background: none;
|
||||
border: none;
|
||||
/* border-left: 1px solid #e0e0e0; */
|
||||
/* padding: 15px 20px; */
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -469,8 +247,6 @@
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Submenu list */
|
||||
.submenu {
|
||||
list-style: none;
|
||||
@@ -516,8 +292,239 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* On Desktop, hide mobile-only elements */
|
||||
@media (min-width: 1366) {
|
||||
/* --- Tablet Only (769px to 1024px) --- */
|
||||
@media screen and (min-width: 769px) and (max-width: 1024px) {
|
||||
.news-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 24px;
|
||||
align-items: stretch;
|
||||
}
|
||||
.featured-grid__item {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
}
|
||||
.featured-grid__item .news-card--featured {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
border: 1px solid #881C1C;
|
||||
border-radius: 16px;
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
gap: 16px;
|
||||
background: #fff;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
.featured-grid__item .news-card__image {
|
||||
flex: none;
|
||||
width: 100%;
|
||||
aspect-ratio: 1 / 1;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
.featured-grid__item .news-card__image > div {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.featured-grid__item .news-card__image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.featured-grid__item .news-card__content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
min-width: 0;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
.featured-grid__item .featured-grid__category {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.featured-grid__item .featured-grid__category a {
|
||||
display: inline-block;
|
||||
background-color: #f2f2f2;
|
||||
color: #881C1C;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.featured-grid__item .news-card__title {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
margin-top: 0;
|
||||
margin-bottom: 12px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.featured-grid__item .news-card__title a {
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
}
|
||||
.featured-grid__item .news-card__title a:hover {
|
||||
color: #881C1C;
|
||||
}
|
||||
.featured-grid__item .news-card__date {
|
||||
margin-top: auto;
|
||||
color: #881C1C;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Desktop (>= 1025px) --- */
|
||||
@media screen and (min-width: 1025px) {
|
||||
/* News Grid */
|
||||
.news-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 24px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.education-column .news-list {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
.featured-grid__item {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
}
|
||||
.featured-grid__item .news-card--featured {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
border: 1px solid #881C1C;
|
||||
border-radius: 16px;
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
gap: 16px;
|
||||
background: #fff;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
.featured-grid__item .news-card__image {
|
||||
flex: 0 0 170px;
|
||||
width: 100%;
|
||||
height: 170px;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
.featured-grid__item .news-card__image > div {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.featured-grid__item .news-card__image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.featured-grid__item .news-card__content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
min-width: 0;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
.featured-grid__item .featured-grid__category {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.featured-grid__item .featured-grid__category a {
|
||||
display: inline-block;
|
||||
background-color: #f2f2f2;
|
||||
color: #881C1C;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.featured-grid__item .news-card__title {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
margin-top: 0;
|
||||
margin-bottom: 12px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.featured-grid__item .news-card__title a {
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
}
|
||||
.featured-grid__item .news-card__title a:hover {
|
||||
color: #881C1C;
|
||||
}
|
||||
.featured-grid__item .news-card__date {
|
||||
margin-top: auto;
|
||||
color: #881C1C;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Side-by-side layout for News and Events */
|
||||
.news-events-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 40px;
|
||||
align-items: stretch;
|
||||
}
|
||||
.news-events-row > .news-column {
|
||||
flex: 1.8;
|
||||
min-width: 0;
|
||||
}
|
||||
.news-events-row > .events-column {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* Navigation Container */
|
||||
#mobile-hamburger {
|
||||
display: none !important;
|
||||
}
|
||||
#mobile-flyout-container {
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
}
|
||||
.primary-navigation {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
/* Hide arrow toggles and back buttons */
|
||||
.mc--main-menu .arrow-toggle,
|
||||
.mc--main-menu .button-back,
|
||||
.mc--main-menu .navigation-title {
|
||||
display: none !important;
|
||||
}
|
||||
/* Horizontal main menu */
|
||||
.m--main-menu {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.m--main-menu > .menu-item > .link-arrow-wrapper > a {
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
padding: 10px 15px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Large Desktop (>= 1366px) --- */
|
||||
@media screen and (min-width: 1366px) {
|
||||
.mobile-only {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
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.
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: 19 KiB |
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.7 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
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.
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: 19 KiB |
BIN
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.7 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 176 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 191 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 170 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 196 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 812 KiB |
@@ -4,189 +4,190 @@
|
||||
<div class="region region-footer r--region r--footer">
|
||||
<div class="lc--layout-container lc--full">
|
||||
<div class="l--layout l--full">
|
||||
<section class="cc-component-container cc--footer" aria-label="Site Footer">
|
||||
<section class="cc-component-container cc--footer" aria-label="Site Footer" style="background-color: var(--color-brand);">
|
||||
<div class="c--component c--footer">
|
||||
<div class="footer-top">
|
||||
<div class="branding-container">
|
||||
<div id="block-footerbranding" class="block block-fixed-block-content block-fixed-block-contentfooter-branding cc--component-container cc--footer-branding">
|
||||
<div class="c--component c--footer-branding">
|
||||
<a class="logo" href="/" aria-label="Sisvietnamvn">
|
||||
<div>
|
||||
<img th:src="@{/theme-assets/umass/images/logo.png}" alt="Sisvietnamvn" style="height: 180px ; width: auto;" />
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.sis-footer-custom {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 40px 20px;
|
||||
gap: 60px;
|
||||
color: #fff;
|
||||
font-family: var(--font-family-base, 'Inter', sans-serif);
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
}
|
||||
.sis-footer-left {
|
||||
flex: 0 0 320px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
.sis-footer-logo {
|
||||
max-width: 250px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.sis-social-text {
|
||||
font-size: 0.95rem;
|
||||
margin-bottom: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.sis-social-icons {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.sis-social-icons img, .sis-social-icons svg {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
}
|
||||
.sis-social-icons a {
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
.sis-social-icons a:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.sis-app-stores {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
.sis-app-stores img {
|
||||
height: 36px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.sis-footer-right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.sis-hospital-box {
|
||||
flex: 1;
|
||||
min-width: 260px;
|
||||
border: 1px solid rgba(255,255,255,0.4);
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
.sis-hospital-box h3 {
|
||||
font-size: 1.15rem;
|
||||
font-weight: 700;
|
||||
margin: 0 0 10px 0;
|
||||
color: #fff;
|
||||
}
|
||||
.sis-hospital-box p {
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
color: #f8f9fa;
|
||||
}
|
||||
.sis-hospital-icons {
|
||||
margin-top: 10px;
|
||||
padding-top: 10px;
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
}
|
||||
.sis-hospital-icons svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
fill: #fff;
|
||||
opacity: 0.8;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
.sis-hospital-icons svg:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.sis-footer-custom {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.sis-footer-right {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="sis-footer-custom">
|
||||
<div class="sis-footer-left">
|
||||
<img th:src="@{/theme-assets/umass/images/logo.png}" alt="Stroke International Services" class="sis-footer-logo" />
|
||||
<div class="sis-social-text">Theo dõi thông tin chính thức tại</div>
|
||||
<div class="sis-social-icons">
|
||||
<a href="#" aria-label="Facebook">
|
||||
<!-- Facebook Icon -->
|
||||
<svg viewBox="0 0 24 24" width="32" height="32"><circle cx="12" cy="12" r="12" fill="#1877F2"/><path d="M14.5 12h-2v7h-3v-7h-1.5v-2.5H11v-1.5c0-1.2.7-2.5 2.5-2.5h2v2.5h-1.3c-.4 0-.7.3-.7.8v.7h2l-.5 2.5z" fill="#FFF"/></svg>
|
||||
</a>
|
||||
<a href="#" aria-label="YouTube">
|
||||
<!-- YouTube Icon -->
|
||||
<svg viewBox="0 0 24 24" width="32" height="32"><circle cx="12" cy="12" r="12" fill="#FF0000"/><path d="M16 12l-6 3.5v-7L16 12z" fill="#FFF"/></svg>
|
||||
</a>
|
||||
<a href="#" aria-label="Zalo">
|
||||
<!-- Zalo Icon Placeholder -->
|
||||
<svg viewBox="0 0 24 24" width="32" height="32"><circle cx="12" cy="12" r="12" fill="#0068FF"/><path d="M12 5.5c-4.4 0-8 3.2-8 7 0 2.2 1.2 4 3 5.3v3.2l3-1.7c.6.2 1.3.2 2 .2 4.4 0 8-3.2 8-7s-3.6-7-8-7zm-1 9l-2-2 4 2 2-2-4-2z" fill="#FFF"/></svg>
|
||||
</a>
|
||||
<a href="#" aria-label="TikTok">
|
||||
<!-- TikTok Icon -->
|
||||
<svg viewBox="0 0 24 24" width="32" height="32"><circle cx="12" cy="12" r="12" fill="#000000"/><path d="M15 9.5c-.7 0-1.3-.2-1.9-.5V14c0 1.9-1.5 3.5-3.5 3.5S6 15.9 6 14s1.5-3.5 3.5-3.5c.3 0 .7.1 1 .2v2.1c-.3-.1-.6-.2-1-.2-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5 1.5-.7 1.5-1.5v-8h2c0 1.3 1 2.5 2 2.5v2z" fill="#FFF"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
<div id="block-footersocial" class="block block-fixed-block-content block-fixed-block-contentfooter-social cc--component-container cc--footer-social">
|
||||
<div class="c--component c--footer-social">
|
||||
<nav aria-label="UMass Social Media Links">
|
||||
<div>
|
||||
<nav aria-label="Social media links">
|
||||
<ul class="social-media-links--platforms platforms">
|
||||
<li>
|
||||
<a href="https://www.facebook.com/UMassAmherst/" class="ext" target="_blank" rel="noopener noreferrer" aria-label="Facebook (opens in new window)">
|
||||
<svg height="16" viewBox="0 0 16 16" width="16" aria-hidden="true" focusable="false">
|
||||
<path d="m19.9593333 5h-14.0853333c-.48269687 0-.874.39130313-.874.874v14.0853333c0 .4826969.39130313.874.874.874h7.5835333v-6.1230666h-2.0564333v-2.3965334h2.0564333v-1.7625666c0-2.04503337 1.2489334-3.15843337 3.0735667-3.15843337.6158056-.00219435 1.23127.02930829 1.8436333.09436667v2.13623333h-1.2616c-.9899 0-1.1811666.47119997-1.1811666 1.16343337v1.5263333h2.3731l-.3090667 2.3965333h-2.0640333v6.1237h4.0273666c.4826969 0 .874-.3913031.874-.874v-14.0853333c0-.48269687-.3913031-.874-.874-.874z" fill="#fff" fill-rule="evenodd" transform="translate(-5 -5)"></path>
|
||||
</svg>
|
||||
<span class="visually-hidden">Facebook</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://twitter.com/UMassAmherst" class="ext" target="_blank" rel="noopener noreferrer" aria-label="X (formerly Twitter) (opens in new window)">
|
||||
<svg style="fill:#FFFFFF;" width="24" height="24" y="0px" x="0px" viewBox="0 -2 50 50" aria-hidden="true" focusable="false">
|
||||
<path d="M 5.9199219 6 L 20.582031 27.375 L 6.2304688 44 L 9.4101562 44 L 21.986328 29.421875 L 31.986328 44 L 44 44 L 28.681641 21.669922 L 42.199219 6 L 39.029297 6 L 27.275391 19.617188 L 17.933594 6 L 5.9199219 6 z M 9.7167969 8 L 16.880859 8 L 40.203125 42 L 33.039062 42 L 9.7167969 8 z"></path>
|
||||
</svg>
|
||||
<span class="visually-hidden">X (formerly Twitter)</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.youtube.com/user/UMass" class="ext" target="_blank" rel="noopener noreferrer" aria-label="YouTube (opens in new window)">
|
||||
<svg height="15" viewBox="0 0 23 15" width="23" aria-hidden="true" focusable="false">
|
||||
<path d="m22.935049 8.18627451s-.2389706-1.43382353-.8762255-2.07107843c-.7965686-.87622549-1.752451-.87622549-2.1507353-.87622549-2.9473039-.23897059-7.4877451-.23897059-7.4877451-.23897059s-4.54044114 0-7.48774506.23897059c-.47794118 0-1.35416667 0-2.23039216.87622549-.6372549.6372549-.79656863 2.07107843-.79656863 2.07107843s-.23897058 1.67279412-.23897058 3.42524509v1.5931373c0 1.6727941.23897058 3.4252451.23897058 3.4252451s.23897059 1.4338235.8762255 2.0710784c.79656862.8762255 1.9117647.7965686 2.38970588.8762255 1.75245098.1593137 7.32843137.2389706 7.32843137.2389706s4.5404412 0 7.567402-.2389706c.3982843-.0796569 1.3541666-.0796569 2.1507353-.8762255.6372549-.6372549.8762254-2.0710784.8762254-2.0710784s.2389706-1.6727942.2389706-3.4252451v-1.5931373c-.1593137-1.75245097-.3982843-3.42524509-.3982843-3.42524509zm-12.745098 7.16911769v-5.97426475l5.7352941 2.86764705z" fill="#fff" fill-rule="evenodd" transform="translate(-1 -5)"></path>
|
||||
</svg>
|
||||
<span class="visually-hidden">YouTube</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.instagram.com/umass/" class="ext" target="_blank" rel="noopener noreferrer" aria-label="Instagram (opens in new window)">
|
||||
<svg height="16" viewBox="0 0 16 16" width="16" aria-hidden="true" focusable="false">
|
||||
<path d="m12.9166667 5c-2.1666667 0-2.4166667 0-3.25000003.08333333-.83333334 0-1.41666667.16666667-1.91666667.33333334-.5.16666666-1 .5-1.41666667.91666666-.41666666.41666667-.75.91666667-.91666666 1.41666667-.16666667.5-.33333334 1.08333333-.33333334 1.91666667-.08333333.83333333-.08333333 1.08333333-.08333333 3.25000003 0 2.1666666 0 2.4166666.08333333 3.25 0 .8333333.16666667 1.4166666.33333334 1.9166666.16666666.5.5 1 .91666666 1.4166667.41666667.4166667.91666667.75 1.41666667.9166667.5.1666666 1.08333333.3333333 1.91666667.3333333.83333333 0 1.08333333.0833333 3.25000003.0833333 2.1666666 0 2.4166666 0 3.25-.0833333.8333333 0 1.4166666-.1666667 1.9166666-.3333333.5-.1666667 1-.5 1.4166667-.9166667s.75-.9166667.9166667-1.4166667c.1666666-.5.3333333-1.0833333.3333333-1.9166666 0-.8333334.0833333-1.0833334.0833333-3.25 0-2.1666667 0-2.4166667-.0833333-3.25000003 0-.83333334-.1666667-1.41666667-.3333333-1.91666667-.1666667-.5-.5-1-.9166667-1.41666667-.4166667-.41666666-.9166667-.75-1.4166667-.91666666-.5-.16666667-1.0833333-.33333334-1.9166666-.33333334-.8333334-.08333333-1.0833334-.08333333-3.25-.08333333m0 1.41666667c2.0833333 0 2.3333333 0 3.1666666.08333333.75 0 1.1666667.16666667 1.5.25.3333334.16666667.6666667.33333333.9166667.58333333s.4166667.58333334.5833333.91666667c.0833334.25.25.66666667.25 1.5 0 .8333333.0833334 1.0833333.0833334 3.25 0 2.0833333 0 2.3333333-.0833334 3.1666667 0 .75-.1666666 1.1666666-.25 1.5-.1666666.3333333-.3333333.6666666-.5833333.9166666s-.5.4166667-.9166667.5833334c-.25.0833333-.6666666.25-1.5.25-.8333333 0-1.0833333.0833333-3.1666666.0833333-2.0833334 0-2.3333334 0-3.1666667-.0833333-.75 0-1.16666667-.1666667-1.5-.25-.33333333-.1666667-.66666667-.3333334-.91666667-.5833334s-.41666666-.5833333-.58333333-.9166666c-.08333333-.25-.25-.6666667-.25-1.5 0-.8333334-.08333333-1.0833334-.08333333-3.1666667s0-2.3333333.08333333-3.25c0-.75.16666667-1.16666667.25-1.5.16666667-.33333333.33333333-.66666667.58333333-.91666667s.5-.41666666.91666667-.58333333c.25-.08333333.66666667-.25 1.5-.25.8333333-.08333333 1.0833333-.08333333 3.1666667-.08333333m0 9.16666663c-1.4166667 0-2.6666667-1.1666666-2.6666667-2.6666666s1.1666667-2.6666667 2.6666667-2.6666667 2.6666666 1.1666667 2.6666666 2.6666667-1.25 2.6666666-2.6666666 2.6666666m0-6.74999997c-2.25 0-4.08333337 1.83333337-4.08333337 4.08333337s1.83333337 4.0833333 4.08333337 4.0833333 4.0833333-1.8333333 4.0833333-4.0833333-1.8333333-4.08333337-4.0833333-4.08333337m5.1666666-.16666666c0 .5-.4166666.91666666-.9166666.91666666s-.9166667-.41666666-.9166667-.91666666.4166667-.91666667.9166667-.91666667.9166666.41666667.9166666.91666667" fill="#fff" fill-rule="evenodd" transform="translate(-5 -5)"></path>
|
||||
</svg>
|
||||
<span class="visually-hidden">Instagram</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.linkedin.com/school/umassamherst/" class="ext" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn (opens in new window)">
|
||||
<svg height="16" viewBox="0 0 16 16" width="16" aria-hidden="true" focusable="false">
|
||||
<path d="m20.8333333 17.8517316c0 1.6450216-1.3365801 2.9816017-2.9816017 2.9816017h-9.87012987c-1.64502164 0-2.98160173-1.3365801-2.98160173-2.9816017v-9.87012987c0-1.64502164 1.33658009-2.98160173 2.98160173-2.98160173h9.87012987c1.6450216 0 2.9816017 1.33658009 2.9816017 2.98160173zm-12.1320346-10.17857143c-.82251082 0-1.33658009.51406927-1.33658009 1.23376624-.10281385.71969697.41125542 1.23376619 1.23376624 1.23376619.82251082 0 1.33658009-.51406922 1.33658009-1.23376619s-.51406927-1.23376624-1.23376624-1.23376624zm1.13095238 10.58982683v-7.1969697h-2.36471861v7.1969697zm8.53354982 0v-4.1125541c0-2.1590909-1.1309524-3.1872294-2.7759741-3.1872294-1.2337662 0-1.7478355.7196969-2.056277 1.2337662v-1.0281385h-2.3647186v7.1969697h2.3647186v-4.1125541c0-.2056278 0-.4112555.1028138-.6168832.1028139-.4112554.5140693-.8225108 1.2337663-.8225108.8225108 0 1.2337662.6168831 1.2337662 1.6450217v3.8041125z" fill="#fff" fill-rule="evenodd" transform="translate(-5 -5)"></path>
|
||||
</svg>
|
||||
<span class="visually-hidden">LinkedIn</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.snapchat.com/add/umassamherst" class="ext" target="_blank" rel="noopener noreferrer" aria-label="Snapchat (opens in new window)">
|
||||
<svg height="17" viewBox="0 0 18 17" width="18" aria-hidden="true" focusable="false">
|
||||
<path d="m12.8333333 20.3333333c-.0833333 0-.0833333 0-.1666666 0h-.0833334c-1.0833333 0-1.6666666-.3333333-2.25-.75-.41666663-.3333333-.74999997-.5833333-1.16666663-.5833333-.25 0-.41666667-.0833333-.66666667-.0833333-.33333333 0-.66666667.0833333-.91666667.0833333-.16666666 0-.33333333.0833333-.41666666.0833333-.33333334 0-.5-.25-.5-.4166666 0-.1666667-.08333334-.25-.08333334-.4166667 0-.0833333-.08333333-.25-.08333333-.3333333-1.33333333-.25-2.08333333-.5-2.25-1-.08333333 0-.08333333-.0833334-.08333333-.1666667 0-.25.16666666-.4166667.41666666-.5 2.25-.3333333 3.33333334-2.75 3.33333334-2.8333333.08333333-.25.16666666-.4166667.08333333-.5833334-.08333333-.1666666-.58333333-.3333333-.91666667-.4166666-.08333333 0-.16666666-.0833334-.25-.0833334-.83333333-.3333333-1-.75-.91666666-1.0833333.08333333-.5.83333333-.75 1.25-.5833333.33333333.1666666.58333333.1666666.75.1666666h.25c0-.0833333 0-.25 0-.3333333-.08333334-1.16666667-.25-2.66666667.16666666-3.5 1.16666667-2.66666667 3.66666667-2.83333333 4.33333337-2.83333333h.3333333c.75 0 3.1666667.16666666 4.3333333 2.83333333.4166667.91666667.3333334 2.33333333.25 3.5v.0833333.25h.1666667c.1666667 0 .4166667-.0833333.6666667-.1666666.1666666-.0833334.25-.0833334.4166666-.0833334.1666667 0 .25 0 .4166667.0833334.3333333.0833333.5833333.4166666.5833333.6666666 0 .4166667-.3333333.6666667-.9166666.9166667-.0833334 0-.1666667.0833333-.25.0833333-.3333334.0833334-.8333334.25-.9166667.5-.0833333.1666667 0 .3333334.0833333.5.0833334.25 1.0833334 2.5 3.25 2.8333334.25 0 .4166667.25.4166667.5 0 .0833333 0 .1666666-.0833333.1666666-.1666667.4166667-.9166667.75-2.25 1 0 .0833334-.0833334.25-.0833334.3333334 0 .1666666-.0833333.25-.0833333.4166666-.0833333.25-.25.4166667-.5.4166667-.0833333 0-.25 0-.4166667-.0833333-.25-.0833334-.5-.0833334-.9166666-.0833334-.1666667 0-.4166667 0-.6666667.0833334-.4166667.0833333-.75.3333333-1.1666667.5833333-.6666666.5833333-1.5.8333333-2.5.8333333" fill="#fff" fill-rule="evenodd" transform="translate(-4 -4)"></path>
|
||||
</svg>
|
||||
<span class="visually-hidden">Snapchat</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="sis-app-stores">
|
||||
<a href="#">
|
||||
<img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Download_on_the_App_Store_Badge.svg" alt="Tải trên App Store" />
|
||||
</a>
|
||||
<a href="#">
|
||||
<img src="https://upload.wikimedia.org/wikipedia/commons/7/78/Google_Play_Store_badge_EN.svg" alt="Tải trên Google Play" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-container">
|
||||
<div id="block-footer" class="block block-system block-system-menu-blockfooter cc--component-container cc--footer-menu">
|
||||
<div class="c--component c--footer-menu">
|
||||
<nav class="mc--menu mc--menu-footer" aria-label="UMass Amherst Footer Menu">
|
||||
<ul class="menu m--menu m--menu-footer">
|
||||
<li class="menu-item menu-item--expanded">
|
||||
<span class="navigation-title">Info for...</span>
|
||||
<div class="submenu-wrapper">
|
||||
<ul class="submenu">
|
||||
<li class="menu-item">
|
||||
<a href="https://www.umass.edu/gateway/info/prospective-students" data-drupal-link-system-path="node/42831">Prospective Students</a>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<a href="https://www.umass.edu/gateway/info/current-students" title="Click here for info for current students" data-drupal-link-system-path="node/61">Current Students</a>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<a href="https://www.umass.edu/gateway/info/faculty-and-staff" title="Click here for info for faculty and staff" data-drupal-link-system-path="node/66">Faculty and Staff</a>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<a href="https://www.umass.edu/gateway/info/parents-and-families" title="Click here for info for parents and families" data-drupal-link-system-path="node/81">Parents and Families</a>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<a href="https://www.umass.edu/hr/careers" title="Info for Job Seekers">Job Seekers</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="menu-item menu-item--expanded">
|
||||
<span class="navigation-title">Resources</span>
|
||||
<div class="submenu-wrapper">
|
||||
<ul class="submenu">
|
||||
<li class="menu-item">
|
||||
<a href="https://www.umass.edu/registrar/academic-calendar">Academic Calendar</a>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<a href="https://www.umass.edu/admissions/visit/visitor-info">Campus Maps</a>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<a href="https://www.umass.edu/peoplefinder/">People Finder</a>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<a href="https://www.umass.edu/policy/">Policies</a>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<a href="https://www.umass.edu/gateway/atoz" title="A-Z Directory" data-drupal-link-system-path="node/3931">Sites A-Z Directory</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="menu-item menu-item--expanded">
|
||||
<span class="navigation-title">Connect</span>
|
||||
<div class="submenu-wrapper">
|
||||
<ul class="submenu">
|
||||
<li class="menu-item">
|
||||
<a href="https://www.umassalumni.com/">Alumni</a>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<a href="https://umassathletics.com/">Athletics</a>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<a href="https://www.uma-foundation.org/">Giving</a>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<a href="https://www.library.umass.edu/">Libraries</a>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<a href="https://www.umass.edu/gateway/contact-us" data-drupal-link-system-path="node/256">Contact Us</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sis-hospital-box">
|
||||
<h3>Bệnh viện 2</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>
|
||||
<div class="sis-hospital-icons">
|
||||
<svg viewBox="0 0 24 24"><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"><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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sis-hospital-box">
|
||||
<h3>Bệnh viện 3</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>
|
||||
<div class="sis-hospital-icons">
|
||||
<svg viewBox="0 0 24 24"><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"><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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<div class="cc--component-container cc--footer-copyright ">
|
||||
<div class="c--component c--footer-copyright">
|
||||
<div class="f--field f--description">
|
||||
<p>© 2026 University of Massachusetts Amherst</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="block-footerutility" class="block block-system block-system-menu-blockfooter-utility cc--component-container cc--footer-menu">
|
||||
<div class="c--component c--footer-menu">
|
||||
<nav class="mc--menu mc--menu-footer-utility" aria-label="UMass Amherst Footer Utility Menu">
|
||||
<ul class="menu m--menu m--menu-footer-utility">
|
||||
<li class="menu-item">
|
||||
<a href="https://www.umass.edu/gateway/site-policies" data-drupal-link-system-path="node/3861">Site Policies</a>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<a href="https://www.umass.edu/policy/information-privacy-policy" title="UMass Amherst privacy policy">Privacy</a>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<a href="https://www.umass.edu/policy/affirmative-action-non-discrimination-and-title-ix-non-discrimination-policy" title="UMass Amherst non-discrimination policies">Non-Discrimination Notice</a>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<a href="https://www.umass.edu/accessibility/" title="UMass Amherst Accessibility Resources">Accessibility</a>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<a href="https://www.umass.edu/it/policies/it-policy-acceptable-use-interpretation-guidelines" title="UMass Amherst terms of use">Terms of Use</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@@ -1,10 +0,0 @@
|
||||
<style>
|
||||
.tabbed-media-content-media-item { width: 100%; aspect-ratio: 16/9; position: relative; display: flex; align-items: center; justify-content: center; background: red;}
|
||||
.tabbed-media-content-media-item .f--video-embed { display: none; width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
|
||||
.tabbed-media-content-media-item .f--video-embed iframe { width: 100%; height: 100%; }
|
||||
</style>
|
||||
<div class="tabbed-media-content-media-item">
|
||||
<div class="f--video-embed" style="display:block;">
|
||||
<iframe title="YouTube video player" src="https://www.youtube.com/embed/j63kT9Bjrb4?si=N5JwIcuRn-iRxkYu" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user