mandalore/gateway-gamers.net
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add hero carousel with 5 images, enlarge logo, fix Pathfinder references

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
mandalore
2026-05-28 17:15:42 -05:00
co-authored by Claude Sonnet 4.6
parent e84624d8f6
commit 5318c00b1c
9 changed files with 74 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
header.html
+55 -31
View File
@@ -1,39 +1,63 @@
<div class="navbar bg-base-300 shadow-lg px-4">
<div class="navbar-start">
<a href="/index.html">
<img src="/images/logo.png" alt="Gateway Gamers" class="h-10 w-auto" />
</a>
<header class="bg-base-300 shadow-lg">
<!-- Hero: carousel background + centered logo -->
<div class="relative overflow-hidden min-h-64 py-10 flex items-center justify-center">
<!-- Carousel images -->
<div id="hero-carousel" class="absolute inset-0">
<img src="/images/photo1.jpg" class="carousel-slide absolute inset-0 w-full h-full object-cover opacity-0 transition-opacity duration-1000" />
<img src="/images/photo2.jpg" class="carousel-slide absolute inset-0 w-full h-full object-cover opacity-0 transition-opacity duration-1000" />
<img src="/images/photo3.jpg" class="carousel-slide absolute inset-0 w-full h-full object-cover opacity-0 transition-opacity duration-1000" />
<img src="/images/photo4.jpg" class="carousel-slide absolute inset-0 w-full h-full object-cover opacity-0 transition-opacity duration-1000" />
<img src="/images/photo5.jpg" class="carousel-slide absolute inset-0 w-full h-full object-cover opacity-0 transition-opacity duration-1000" />
</div>
<!-- Overlay so logo stays readable over busy images -->
<div class="absolute inset-0 bg-black/40"></div>
<!-- Logo -->
<div class="relative z-10">
<a href="/index.html">
<img src="/images/logo.png" alt="Gateway Gamers" class="h-48 w-auto drop-shadow-2xl" />
</a>
</div>
</div>
<div class="navbar-center hidden lg:flex">
<ul class="menu menu-horizontal px-1 gap-1">
<li><a href="/index.html">Home</a></li>
<li><a href="/signups.html">Sign-ups</a></li>
<li><a href="/reporting.html">Game Reporting</a></li>
<li><a href="/stats.html">Stats</a></li>
</ul>
</div>
<div class="navbar-end gap-2">
<label class="swap swap-rotate btn btn-ghost btn-circle" title="Toggle light/dark">
<input type="checkbox" class="theme-controller" value="light" />
<svg class="swap-off h-5 w-5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M21.64 13a1 1 0 0 0-1.27-.66 8.5 8.5 0 0 1-10.71-10.71 1 1 0 0 0-1.32-1.27A10 10 0 1 0 22 14.29a1 1 0 0 0-.36-1.29z"/>
</svg>
<svg class="swap-on h-5 w-5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M5.64 17l-.71.71a1 1 0 0 0 1.41 1.41l.71-.71A1 1 0 0 0 5.64 17zM5 12a1 1 0 0 0-1-1H3a1 1 0 0 0 0 2h1a1 1 0 0 0 1-1zm7-7a1 1 0 0 0 1-1V3a1 1 0 0 0-2 0v1a1 1 0 0 0 1 1zM5.64 7.05a1 1 0 0 0 .7.29 1 1 0 0 0 .71-.29 1 1 0 0 0 0-1.41l-.71-.71a1 1 0 0 0-1.41 1.41zm12 .29a1 1 0 0 0 .7-.29l.71-.71a1 1 0 0 0-1.41-1.41l-.71.71a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29zM21 11h-1a1 1 0 0 0 0 2h1a1 1 0 0 0 0-2zm-9 8a1 1 0 0 0-1 1v1a1 1 0 0 0 2 0v-1a1 1 0 0 0-1-1zm6.36-2a1 1 0 0 0-1.41 1.41l.71.71a1 1 0 0 0 1.41-1.41zM12 6.5a5.5 5.5 0 1 0 5.5 5.5A5.51 5.51 0 0 0 12 6.5z"/>
</svg>
</label>
<div class="dropdown dropdown-end lg:hidden">
<label tabindex="0" class="btn btn-ghost btn-circle">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</label>
<ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-200 rounded-box w-52">
<!-- Nav row -->
<div class="navbar bg-base-200 px-4 min-h-0 py-2">
<div class="navbar-center flex flex-1 justify-center">
<ul class="menu menu-horizontal px-1 gap-1">
<li><a href="/index.html">Home</a></li>
<li><a href="/signups.html">Sign-ups</a></li>
<li><a href="/reporting.html">Game Reporting</a></li>
<li><a href="/stats.html">Stats</a></li>
</ul>
</div>
<div class="navbar-end gap-2">
<label class="swap swap-rotate btn btn-ghost btn-circle" title="Toggle light/dark">
<input type="checkbox" class="theme-controller" value="light" />
<svg class="swap-off h-5 w-5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M21.64 13a1 1 0 0 0-1.27-.66 8.5 8.5 0 0 1-10.71-10.71 1 1 0 0 0-1.32-1.27A10 10 0 1 0 22 14.29a1 1 0 0 0-.36-1.29z"/>
</svg>
<svg class="swap-on h-5 w-5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M5.64 17l-.71.71a1 1 0 0 0 1.41 1.41l.71-.71A1 1 0 0 0 5.64 17zM5 12a1 1 0 0 0-1-1H3a1 1 0 0 0 0 2h1a1 1 0 0 0 1-1zm7-7a1 1 0 0 0 1-1V3a1 1 0 0 0-2 0v1a1 1 0 0 0 1 1zM5.64 7.05a1 1 0 0 0 .7.29 1 1 0 0 0 .71-.29 1 1 0 0 0 0-1.41l-.71-.71a1 1 0 0 0-1.41 1.41zm12 .29a1 1 0 0 0 .7-.29l.71-.71a1 1 0 0 0-1.41-1.41l-.71.71a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29zM21 11h-1a1 1 0 0 0 0 2h1a1 1 0 0 0 0-2zm-9 8a1 1 0 0 0-1 1v1a1 1 0 0 0 2 0v-1a1 1 0 0 0-1-1zm6.36-2a1 1 0 0 0-1.41 1.41l.71.71a1 1 0 0 0 1.41-1.41zM12 6.5a5.5 5.5 0 1 0 5.5 5.5A5.51 5.51 0 0 0 12 6.5z"/>
</svg>
</label>
<div class="dropdown dropdown-end lg:hidden">
<label tabindex="0" class="btn btn-ghost btn-circle">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</label>
<ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-200 rounded-box w-52">
<li><a href="/index.html">Home</a></li>
<li><a href="/signups.html">Sign-ups</a></li>
<li><a href="/reporting.html">Game Reporting</a></li>
<li><a href="/stats.html">Stats</a></li>
</ul>
</div>
</div>
</div>
</div>
</header>
images/logo.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 113 KiB

images/photo1.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 MiB

images/photo2.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 MiB

images/photo3.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.1 MiB

images/photo4.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 MiB

images/photo5.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.4 MiB

index.html
+1 -1
View File
@@ -34,7 +34,7 @@
<section class="mb-8">
<h2 class="text-2xl font-semibold mb-3">About the Campaign</h2>
<p class="mb-4">Kingmaker is a Pathfinder campaign set in the Stolen Lands of Golarion. Players explore, conquer, and eventually rule a burgeoning nation in the wild frontier.</p>
<p class="mb-4">Kingmaker is a Warhammer 40k league run by a local club. Players compete across a series of games to claim dominance over the battlefield.</p>
<p>Update this section with your campaign's specific details — setting, house rules, session schedule, and anything else players should know.</p>
</section>
src/main.js
+18 -3
View File
@@ -1,9 +1,9 @@
function loadHTML(file, elementId) {
function loadHTML(file, elementId, callback) {
fetch(file)
.then(r => r.text())
.then(html => {
document.getElementById(elementId).innerHTML = html;
if (elementId === 'header') highlightActiveNav();
if (callback) callback();
})
.catch(err => console.error('Error loading:', file, err));
}
@@ -17,5 +17,20 @@ function highlightActiveNav() {
});
}
loadHTML('/header.html', 'header');
function startCarousel() {
const slides = document.querySelectorAll('#hero-carousel .carousel-slide');
if (!slides.length) return;
let current = 0;
slides[current].style.opacity = '1';
setInterval(() => {
slides[current].style.opacity = '0';
current = (current + 1) % slides.length;
slides[current].style.opacity = '1';
}, 5000);
}
loadHTML('/header.html', 'header', () => {
highlightActiveNav();
startCarousel();
});
loadHTML('/footer.html', 'footer');