add kingmaker-style header, full pagination, and CI/CD deployment

- Hero carousel header with logo and photos matching kingmaker site
- Renamed "League Rank" to "ITC Rank"
- Full cursor-paginated standings scan with circular-cursor detection
  to handle BCP API's pagination bug at the end of results; incremental
  rendering shows results as each page arrives
- credentials:omit on all BCP fetches to prevent session cookie 500s
- GitLab CI pipeline: npm ci + vite build, rsync dist/ to
  /var/www/domains/gateway-gamers.net/rankings/ on push to main
- nginx config for rankings.gateway-gamers.net with CSP allowing
  connect-src to newprod-api.bestcoastpairings.com

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-06-26 17:34:48 -05:00
co-authored by Claude Sonnet 4.6
parent 2304764d5d
commit 14e117a823
11 changed files with 162 additions and 64 deletions
+29 -5
View File
@@ -1,14 +1,37 @@
<header class="bg-base-300 shadow-lg">
<div class="navbar bg-base-200 px-4 min-h-0 py-2">
<div class="navbar-start">
<a href="/index.html" class="text-xl font-bold tracking-wide uppercase">Gateway Gamers</a>
<!-- 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>
<div class="navbar-center hidden lg:flex">
<!-- 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>
<!-- Nav row -->
<div class="navbar bg-base-200 px-4 min-h-0 py-2">
<div class="navbar-center hidden lg:flex flex-1 justify-center">
<ul class="menu menu-horizontal px-1 gap-1">
<li><a href="/index.html">ITC Standings</a></li>
</ul>
</div>
<div class="navbar-end gap-2">
<div class="navbar-end gap-2 ml-auto">
<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">
@@ -30,4 +53,5 @@
</div>
</div>
</div>
</header>