Jesse
3a5a909ec0
Splash page only: the box art thumbnail opens a full-size lightbox on click, a new "Play multiplayer" (coming soon) card balances the bottom row to three cards, and the footer's "runs entirely in your browser" claim is now scoped to solitaire.
113 lines
5.3 KiB
HTML
113 lines
5.3 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>Station Master</title>
|
|
<style>
|
|
:root{--bg:#12151a;--fg:#e6e9ee;--dim:#8b94a3;--line:#2c333d;--panel:#1a1f26}
|
|
*{box-sizing:border-box}
|
|
body{margin:0;background:var(--bg);color:var(--fg);
|
|
font:15px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
|
|
min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px}
|
|
main{width:100%;max-width:760px}
|
|
.hero{display:flex;gap:24px;align-items:flex-start}
|
|
.hero-image{width:230px;flex:none;border-radius:9px;overflow:hidden;border:1px solid var(--line);cursor:zoom-in}
|
|
.hero-image img{display:block;width:100%;height:auto}
|
|
.hero-content{flex:1;min-width:0}
|
|
@media(max-width:640px){.hero{flex-direction:column}.hero-image{width:100%;max-width:280px}}
|
|
h1{font-size:32px;margin:0 0 2px;letter-spacing:.02em}
|
|
.tag{color:var(--dim);margin:0;font-size:14px}
|
|
.blurb{color:#c6ccd6;margin:16px 0 0;max-width:66ch}
|
|
.rule{height:1px;background:var(--line);margin:22px 0}
|
|
.doors{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-top:26px}
|
|
@media(max-width:640px){.doors{grid-template-columns:1fr}}
|
|
.door{display:block;text-decoration:none;color:inherit;background:var(--panel);
|
|
border:1px solid var(--line);border-radius:9px;padding:18px 18px 16px;transition:.12s}
|
|
a.door:hover{border-color:#4d6fa8;background:#1f2733;transform:translateY(-1px)}
|
|
.door h2{font-size:17px;margin:0 0 5px;color:#9fb6d8}
|
|
.door p{margin:0;color:var(--dim);font-size:13px;line-height:1.5}
|
|
.door .go{display:inline-block;margin-top:11px;font-size:12px;color:#5aa9e6}
|
|
.door.disabled .go{color:var(--dim)}
|
|
.lightbox{position:fixed;inset:0;background:rgba(8,10,13,.92);display:flex;
|
|
align-items:center;justify-content:center;padding:32px;z-index:10;cursor:zoom-out}
|
|
.lightbox[hidden]{display:none}
|
|
.lightbox img{display:block;max-width:90vw;max-height:90vh;border-radius:6px;box-shadow:0 12px 40px rgba(0,0,0,.5)}
|
|
/* the rule between title and blurb is drawn as rail, not decorated */
|
|
svg.trackline{width:100%;height:24px;display:block;margin:10px 0 0}
|
|
.rail{stroke:#4a5361;stroke-width:1.6}
|
|
.tie{stroke:#39424e;stroke-width:1.1}
|
|
footer{margin-top:26px;color:var(--dim);font-size:11px;display:flex;gap:18px;flex-wrap:wrap}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<div class="hero">
|
|
<div class="hero-image" id="hero-image" tabindex="0" role="button" aria-label="View full-size box art">
|
|
<img src="./images/station-master-splash.jpg"
|
|
alt="Station Master — TimeTable & Train Order Railroading, 1840–1950. Box art: two trains meet at a junction beside a train order office."
|
|
width="560" height="700">
|
|
</div>
|
|
<div class="hero-content">
|
|
<h1>Station Master</h1>
|
|
<p class="tag">TimeTable and Train Order (TT&TO) railroading, 1840–1950.</p>
|
|
|
|
<svg class="trackline" viewBox="0 0 700 24" preserveAspectRatio="none" aria-hidden="true">
|
|
<line class="rail" x1="0" y1="10" x2="700" y2="10"/>
|
|
<line class="rail" x1="0" y1="15" x2="700" y2="15"/>
|
|
<g id="ties"></g>
|
|
</svg>
|
|
|
|
<p class="blurb">
|
|
As Station Master in your line-side office, you manage the town's railroad connection. You are
|
|
responsible for all track between your Limits, a district of industries hanging beneath it, and
|
|
trains that arrive whether or not you are ready for them. Spot the right cars, work the loads,
|
|
and get every train away again — a train with nowhere to stand is a collision, and a
|
|
collision costs more than the freight was worth.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="doors">
|
|
<div class="door disabled">
|
|
<h2>Play multiplayer</h2>
|
|
<p>Play with your friends across the internet. You each run your own office area within the
|
|
entire division. You can play a normal game, or choose co-op or cutthroat. This requires
|
|
a Station Master server to be running.</p>
|
|
<span class="go">Coming soon</span>
|
|
</div>
|
|
|
|
<a class="door" href="./play.html">
|
|
<h2>Play solitaire</h2>
|
|
<p>Play by yourself and run the entire division for five full days. Your goal is 20 Revenue.
|
|
Your game data is saved in your browser — if you close the tab and reopen this site
|
|
without clearing your cache, your game is preserved and you can continue automatically.
|
|
During the game you can also explicitly save your progress for later replay.</p>
|
|
<span class="go">Start a game →</span>
|
|
</a>
|
|
|
|
<a class="door" href="./replays.html">
|
|
<h2>Replays</h2>
|
|
<p>Replay a saved game, step by step or advancing automatically through phases, Stages and
|
|
Days. Open one saved on the site, or a saved file that someone has sent you.</p>
|
|
<span class="go">Browse replays →</span>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="rule"></div>
|
|
|
|
<footer>
|
|
<span>build <span id="build">__BUILD__</span></span>
|
|
<span>solitaire runs entirely in your browser — no server code required</span>
|
|
</footer>
|
|
</main>
|
|
|
|
<div class="lightbox" id="lightbox" hidden>
|
|
<img src="./images/station-master-splash.jpg"
|
|
alt="Station Master — TimeTable & Train Order Railroading, 1840–1950. Box art: two trains meet at a junction beside a train order office.">
|
|
</div>
|
|
|
|
<script type="module" src="./web/splash.js"></script>
|
|
</body>
|
|
</html>
|