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

Compare commits

base: intrusive:62cd811a723dd3208aa0a45d8d37815473bb3a65
Branches Tags
intrusive:main
..
compare: intrusive:1677c414c1e0cbaa586a25d6776d77644d1f0fd6
Branches Tags
intrusive:main

No commits in common. "62cd811a723dd3208aa0a45d8d37815473bb3a65" and "1677c414c1e0cbaa586a25d6776d77644d1f0fd6" have entirely different histories.
62cd811a72 ... 1677c414c1

3 changed files with 45 additions and 34 deletions
Show Stats Expand all files Collapse all files

BIN
www/images/grunk_1.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 588 KiB

BIN
www/images/grunk_2.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 MiB

79
www/index.html
View File

@ -10,6 +10,8 @@
<link href="style.css" rel="stylesheet">
</head>
<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">
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark border-bottom">
<div class="container-fluid">
@ -42,48 +44,29 @@
</div>
</nav>
<div class="mt-5"></div>
<div id="gameDemoCarousel" class="mt-3 carousel slide" data-bs-ride="carousel" data-bs-interval="6000">
<div id="gameDemoCarousel" class="mt-3 carousel slide" data-bs-ride="carousel" data-bs-interval="8000">
<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="Grunk"></button>
<button type="button" data-bs-target="#gameDemoCarousel" data-bs-slide-to="1" aria-label="Grunk"></button>
<button type="button" data-bs-target="#gameDemoCarousel" data-bs-slide-to="2" aria-label="The House Always Wins"></button>
<button type="button" data-bs-target="#gameDemoCarousel" data-bs-slide-to="3" aria-label="The House Always Wins"></button>
<button type="button" data-bs-target="#gameDemoCarousel" data-bs-slide-to="4" aria-label="Coyote Summer"></button>
<button type="button" data-bs-target="#gameDemoCarousel" data-bs-slide-to="5" aria-label="Coyote Summer"></button>
<button type="button" data-bs-target="#gameDemoCarousel" data-bs-slide-to="6" aria-label="The Great I Am"></button>
<button type="button" data-bs-target="#gameDemoCarousel" data-bs-slide-to="7" aria-label="The Great I Am"></button>
<button type="button" data-bs-target="#gameDemoCarousel" data-bs-slide-to="8" aria-label="GFOLF"></button>
<button type="button" data-bs-target="#gameDemoCarousel" data-bs-slide-to="9" aria-label="GFOLF"></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="2" 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="4" 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="6" 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="8" aria-label="GFOLF 2"></button>
</div>
<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-fit">
<img src="/images/grunk_1.png" class="d-block">
<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">Grunk <a class="fa-brands fa-itch-io" href="https://tetramorph.itch.io/grunk"></a></span> <span class="fs-6 text-secondary">by Rob Kelly</span></em>
<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">
<img src="/images/grunk_2.png" class="d-block">
</div>
<div class="carousel-caption d-none d-md-block text-light bg-black mb-3">
<em><span class="h5">Grunk <a class="fa-brands fa-itch-io" href="https://tetramorph.itch.io/grunk"></a></span> <span class="fs-6 text-secondary">by Rob Kelly</span></em>
</div>
</div>
<div class="carousel-item">
<div class="carousel-fit">
<img src="/images/thaw_1.png" class="d-block">
@ -195,7 +178,6 @@
</footer>
</div>
</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>
document.querySelectorAll('.fading').forEach(el => {
const words = el.textContent.trim().split(/,/);
@ -205,4 +187,33 @@
}
});
</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>