intrusive/web
8
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Removed YouTube embed from carousel due to compatability issues.

Browse Source
This commit is contained in:
Rob Kelly 2025-12-21 01:24:39 -07:00
parent 1677c414c1
commit 77e66b3d86
1 changed files with 21 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
www/index.html
View File

@ -10,8 +10,6 @@
<link href="style.css" rel="stylesheet"> <link href="style.css" rel="stylesheet">
</head> </head>
<body> <body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<div class="overflow-auto d-flex flex-column dvh-100"> <div class="overflow-auto d-flex flex-column dvh-100">
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark border-bottom"> <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark border-bottom">
<div class="container-fluid"> <div class="container-fluid">
@ -44,30 +42,30 @@
</div> </div>
</nav> </nav>
<div class="mt-5"></div> <div class="mt-5"></div>
<div id="gameDemoCarousel" class="mt-3 carousel slide" data-bs-ride="carousel" data-bs-interval="8000"> <div id="gameDemoCarousel" class="mt-3 carousel slide" data-bs-ride="carousel" data-bs-interval="6000">
<div class="carousel-indicators"> <div class="carousel-indicators">
<button type="button" data-bs-target="#gameDemoCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="The House Always Wins 1"></button> <!-- <button type="button" data-bs-target="#gameDemoCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="The House Always Wins 1"></button> -->
<button type="button" data-bs-target="#gameDemoCarousel" data-bs-slide-to="1" aria-label="The House Always Wins 2"></button> <button type="button" data-bs-target="#gameDemoCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="The House Always Wins 2"></button>
<button type="button" data-bs-target="#gameDemoCarousel" data-bs-slide-to="2" aria-label="The House Always Wins 3"></button> <button type="button" data-bs-target="#gameDemoCarousel" data-bs-slide-to="1" aria-label="The House Always Wins 3"></button>
<button type="button" data-bs-target="#gameDemoCarousel" data-bs-slide-to="3" aria-label="Coyote Summer 1"></button> <button type="button" data-bs-target="#gameDemoCarousel" data-bs-slide-to="2" aria-label="Coyote Summer 1"></button>
<button type="button" data-bs-target="#gameDemoCarousel" data-bs-slide-to="4" aria-label="Coyote Summer 2"></button> <button type="button" data-bs-target="#gameDemoCarousel" data-bs-slide-to="3" aria-label="Coyote Summer 2"></button>
<button type="button" data-bs-target="#gameDemoCarousel" data-bs-slide-to="5" aria-label="The Great I Am 1"></button> <button type="button" data-bs-target="#gameDemoCarousel" data-bs-slide-to="4" aria-label="The Great I Am 1"></button>
<button type="button" data-bs-target="#gameDemoCarousel" data-bs-slide-to="6" aria-label="The Great I Am 2"></button> <button type="button" data-bs-target="#gameDemoCarousel" data-bs-slide-to="5" aria-label="The Great I Am 2"></button>
<button type="button" data-bs-target="#gameDemoCarousel" data-bs-slide-to="7" aria-label="GFOLF 1"></button> <button type="button" data-bs-target="#gameDemoCarousel" data-bs-slide-to="6" aria-label="GFOLF 1"></button>
<button type="button" data-bs-target="#gameDemoCarousel" data-bs-slide-to="8" aria-label="GFOLF 2"></button> <button type="button" data-bs-target="#gameDemoCarousel" data-bs-slide-to="7" aria-label="GFOLF 2"></button>
</div> </div>
<div class="carousel-inner"> <div class="carousel-inner">
<!-- <div class="carousel-item active"> -->
<!-- <div class="carousel-fit"> -->
<!-- <div class="ratio ratio-16x9 d-block"> -->
<!-- <iframe src="https://www.youtube.com/embed/XxUMn7iG4YM?si=ER9NUp7lmwWF25rx&enablejsapi=1&rel=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen anonymous></iframe> -->
<!-- </div> -->
<!-- </div> -->
<!-- <div class="carousel-caption d-none d-md-block text-light bg-black mb-3"> -->
<!-- <em><span class="h5">The House Always Wins <a class="fa-brands fa-itch-io" href="https://duncangibbs.itch.io/thaw"></a></span> <span class="fs-6 text-secondary">by Duncan Gibbs</span></em> -->
<!-- </div> -->
<!-- </div> -->
<div class="carousel-item active"> <div class="carousel-item active">
<div class="carousel-fit">
<div class="ratio ratio-16x9 d-block">
<iframe src="https://www.youtube.com/embed/XxUMn7iG4YM?si=ER9NUp7lmwWF25rx&enablejsapi=1&rel=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen anonymous></iframe>
</div>
</div>
<div class="carousel-caption d-none d-md-block text-light bg-black mb-3">
<em><span class="h5">The House Always Wins <a class="fa-brands fa-itch-io" href="https://duncangibbs.itch.io/thaw"></a></span> <span class="fs-6 text-secondary">by Duncan Gibbs</span></em>
</div>
</div>
<div class="carousel-item">
<div class="carousel-fit"> <div class="carousel-fit">
<img src="/images/thaw_1.png" class="d-block"> <img src="/images/thaw_1.png" class="d-block">
</div> </div>
@ -178,6 +176,7 @@
</footer> </footer>
</div> </div>
</body> </body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz " crossorigin="anonymous"></script>
<script> <script>
document.querySelectorAll('.fading').forEach(el => { document.querySelectorAll('.fading').forEach(el => {
const words = el.textContent.trim().split(/,/); const words = el.textContent.trim().split(/,/);
@ -187,33 +186,4 @@
} }
}); });
</script> </script>
<script>
$(document).ready(function() {
$('#gameDemoCarousel').on('slide.bs.carousel', function(event) {
players[event.from].pauseVideo();
});
});
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var players = [];
function onYouTubeIframeAPIReady() {
var allMovieIframes = document.getElementById("gameDemoCarousel").getElementsByTagName('iframe');
for (currentIFrame of allMovieIframes) {
players.push(new YT.Player(
currentIFrame.id,
{ events: { 'onStateChange': onPlayerStateChange}}
));
}
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING || event.data == YT.PlayerState.BUFFERING) {
$("#gameDemoCarousel").carousel('pause');
} else {
$("#gameDemoCarousel").carousel();
}
}
</script>
</html> </html>