66 lines
4.1 KiB
YAML
66 lines
4.1 KiB
YAML
services:
|
|
wheelytho-welcome:
|
|
image: ${WELCOME_IMAGE:-nginx:1.27-alpine}
|
|
container_name: wheelytho-welcome
|
|
restart: unless-stopped
|
|
ports:
|
|
- "${WELCOME_HTTP_PORT:-8099}:80"
|
|
command:
|
|
- /bin/sh
|
|
- -c
|
|
- |
|
|
cat > /usr/share/nginx/html/index.html <<'HTML'
|
|
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Welcome to Wheelytho</title>
|
|
<style>
|
|
:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif; background: #090b10; color: #fff7e8; }
|
|
* { box-sizing: border-box; }
|
|
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 28px; background: radial-gradient(circle at 18% 12%, rgba(245,158,11,.22), transparent 34%), radial-gradient(circle at 84% 20%, rgba(59,130,246,.16), transparent 30%), linear-gradient(145deg, #080a0f 0%, #111827 48%, #050608 100%); }
|
|
main { width: min(940px, 100%); border: 1px solid rgba(245, 178, 81, .30); border-radius: 30px; padding: clamp(28px, 5vw, 58px); background: rgba(14, 19, 29, .88); box-shadow: 0 26px 90px rgba(0,0,0,.55); position: relative; overflow: hidden; }
|
|
main:before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size: 42px 42px; mask-image: radial-gradient(circle at top left, black, transparent 72%); pointer-events: none; }
|
|
.eyebrow { color: #f8c471; text-transform: uppercase; letter-spacing: .18em; font-size: .78rem; font-weight: 800; }
|
|
h1 { margin: 14px 0 14px; font-size: clamp(2.2rem, 7vw, 5.4rem); line-height: .92; letter-spacing: -.055em; }
|
|
p { color: #cbd5e1; font-size: clamp(1.02rem, 2.4vw, 1.25rem); line-height: 1.65; max-width: 68ch; }
|
|
.links { margin-top: 30px; }
|
|
.links h2 { margin: 0 0 14px; color: #fde68a; font-size: clamp(1.35rem, 3vw, 2rem); }
|
|
.link-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
|
|
.link-card { display: block; border: 1px solid rgba(148,163,184,.22); border-radius: 20px; padding: 18px; background: rgba(2,6,23,.52); color: #fff7e8; text-decoration: none; transition: transform .16s ease, border-color .16s ease, background .16s ease; }
|
|
.link-card:hover, .link-card:focus-visible { transform: translateY(-2px); border-color: rgba(251,191,36,.62); background: rgba(30,41,59,.72); outline: none; }
|
|
.link-card strong { display: block; color: #fbbf24; margin-bottom: 7px; }
|
|
.link-card span { color: #cbd5e1; line-height: 1.45; }
|
|
a { color: #fbbf24; }
|
|
footer { margin-top: 34px; color: #94a3b8; font-size: .95rem; }
|
|
@media (max-width: 760px) { body { padding: 16px; } main { border-radius: 24px; } }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<div class="eyebrow">Wheelytho access confirmed</div>
|
|
<h1>Welcome in.</h1>
|
|
<p>You made it through the protected gate. That means your Wheelytho account works, Authelia recognized your group membership, and two-factor authentication is ready for the friend/admin pages you are allowed to use.</p>
|
|
<section class="links" aria-label="Links">
|
|
<h2>Links</h2>
|
|
<div class="link-grid">
|
|
<a class="link-card" href="https://games-dashboard.wheelytho.com/">
|
|
<strong>Games Dashboard</strong>
|
|
<span>Open the Wheelytho games dashboard.</span>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
<footer>Protected by Authelia for approved Wheelytho access groups.</footer>
|
|
</main>
|
|
</body>
|
|
</html>
|
|
HTML
|
|
nginx -g 'daemon off;'
|
|
healthcheck:
|
|
test: ["CMD-SHELL", "wget -qO- http://127.0.0.1/ | grep -q 'Games Dashboard'"]
|
|
interval: 30s
|
|
timeout: 5s
|
|
retries: 3
|
|
start_period: 5s
|