157 lines
7.5 KiB
HTML
157 lines
7.5 KiB
HTML
<div class="content-top">
|
|
<div class="lc--layout-container lc--full">
|
|
<div class="l--layout l--full">
|
|
<div class="lr--layout-region lr--main">
|
|
<div class="cc--component-container cc--homepage-hero">
|
|
<div class="c--component c--homepage-hero">
|
|
<div class="slides-container">
|
|
<div class="image-video-container has-video">
|
|
<img
|
|
src="/uploads/2026/07/dotquy201.webp"
|
|
alt="Students collaborate using a driving simulator in the UMass Center for Transportation."
|
|
srcset="/uploads/2026/07/dotquy201.webp 1920w"
|
|
/>
|
|
<div class="f--ambient-video" id="hero-ambient-video">
|
|
<video
|
|
role="presentation"
|
|
tabindex="-1"
|
|
loop=""
|
|
autoplay=""
|
|
playsinline=""
|
|
muted=""
|
|
id="hero-video"
|
|
onerror="handleVideoError()"
|
|
>
|
|
<source
|
|
src="http://localhost:8080/uploads/2026/07/9375f45b-027a-4fb4-bd18-66889309280d.mp4"
|
|
type="video/mp4"
|
|
onerror="handleVideoError()"
|
|
/>
|
|
</video>
|
|
</div>
|
|
|
|
<div
|
|
id="hero-video-fallback"
|
|
style="display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2"
|
|
>
|
|
<th:block th:utext="${@hookManager.applyFilters('the_content', '[plugin:swiper-slider slug=''video-fallback-slider'']')}">
|
|
</th:block>
|
|
</div>
|
|
|
|
<script>
|
|
function handleVideoError() {
|
|
var vidContainer = document.getElementById('hero-ambient-video');
|
|
if (vidContainer) vidContainer.style.display = 'none';
|
|
|
|
var controls = document.querySelector('.video-controls');
|
|
if (controls) controls.style.display = 'none';
|
|
|
|
var fallback = document.getElementById('hero-video-fallback');
|
|
if (fallback) fallback.style.display = 'block';
|
|
}
|
|
|
|
window.addEventListener('DOMContentLoaded', function () {
|
|
var v = document.getElementById('hero-video');
|
|
if (v && v.error) {
|
|
handleVideoError();
|
|
}
|
|
});
|
|
</script>
|
|
<div class="video-controls" data-once="ambientVideo">
|
|
<div class="video-controls-inner">
|
|
<button aria-labelledby="pauseBtn" class="video-button video-pause-button">
|
|
<svg height="14" viewBox="0 0 10 14" width="10" xmlns="http://www.w3.org/2000/svg">
|
|
<title id="pauseBtn">Pause Background Video</title>
|
|
<path
|
|
d="m1143 711v14h-3v-14zm7 0v14h-3v-14z"
|
|
fill="#fff"
|
|
fill-rule="evenodd"
|
|
transform="translate(-1140 -711)"
|
|
></path>
|
|
</svg>
|
|
</button>
|
|
<button aria-labelledby="playBtn" class="video-button video-play-button">
|
|
<svg height="29" viewBox="0 0 29 29" width="29" xmlns="http://www.w3.org/2000/svg">
|
|
<title id="playBtn">Play Background Video</title>
|
|
<path
|
|
d="m17.5 3c-7.99789474 0-14.5 6.50210526-14.5 14.5 0 7.9978947 6.50210526 14.5 14.5 14.5 7.9978947 0 14.5-6.5021053 14.5-14.5 0-7.99789474-6.5021053-14.5-14.5-14.5zm5.6763936 15.2939067-7.3503366 4.5939604c-.6635721.408352-1.5313202-.051044-1.5313202-.8422261v-9.1879207c0-.7911821.8677481-1.2761001 1.5313202-.8422261l7.3503366 4.5939604c.612528.38283.612528 1.3016221 0 1.6844521z"
|
|
fill="#fff"
|
|
fill-rule="evenodd"
|
|
transform="translate(-3 -3)"
|
|
></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="text-container centered">
|
|
<div class="slide-text-container-inner">
|
|
<h3>
|
|
<a href="https://www.umass.edu/gateway/why-umass">Stroke International School 2026.</a>
|
|
</h3>
|
|
<div class="f--field f--button">
|
|
<a
|
|
href="https://www.umass.edu/gateway/why-umass"
|
|
class="button-secondary button-context-dark"
|
|
aria-label="Learn More Learn more about UMass Amherst."
|
|
data-component-id="umass_base:button"
|
|
>
|
|
<span class="button-text"> Learn More </span>
|
|
</a>
|
|
</div>
|
|
<nav class="mc--menu mc--info-menu" th:if="${infoMenu != null and not #lists.isEmpty(infoMenu.items)}">
|
|
<ul class="menu m--menu m--info-menu">
|
|
<li class="menu-item menu-item--expanded">
|
|
<details class="utility-button-wrapper mc--info-menu-container">
|
|
<summary
|
|
type="button"
|
|
aria-label="Display submenu for Information menu"
|
|
aria-expanded="false"
|
|
aria-haspopup="true"
|
|
class="utility-button arrow-toggle information-for-toggle"
|
|
>
|
|
<span th:text="${infoMenu.name}">Info For</span>
|
|
<svg
|
|
version="1.1"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
x="0px"
|
|
y="0px"
|
|
viewBox="0 0 16 7"
|
|
enable-background="new 0 0 16 7"
|
|
xml:space="preserve"
|
|
width="16"
|
|
height="7"
|
|
class="arrow"
|
|
>
|
|
<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#ffffff" points="7,7 0,0 16,0 "></polygon>
|
|
</svg>
|
|
</summary>
|
|
<div class="submenu-wrapper">
|
|
<ul class="submenu">
|
|
<li class="menu-item" th:each="item : ${infoMenu.items}">
|
|
<a th:href="${item.url}" th:text="${item.label}">Prospective Students</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</details>
|
|
<div class="submenu-wrapper-desktop">
|
|
<ul class="submenu">
|
|
<li class="menu-item" th:each="item : ${infoMenu.items}">
|
|
<a th:href="${item.url}" th:text="${item.label}">Prospective Students</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|