basketballcantho/sisvietnamvn_01
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: update charity project assets, add livestream media, and clean up temporary migration scripts

Browse Source
This commit is contained in:
Victor Phan
2026-07-15 16:37:05 +07:00
parent f4e24a0e00
commit fd4ad87a32
168 changed files with 3596 additions and 717 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sisvietnamvn_main/html_snippets/content_main_blocks/temp
+171 -179
View File
@@ -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&amp;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&amp;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&amp;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&amp;itok=irWjha4q" class="lazyload" alt="A UMass student holds a hote bag that reads &quot;I Love Amherst.&quot;">
</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>