81 lines
3.5 KiB
HTML
81 lines
3.5 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}
|
|
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 26px;max-width:66ch}
|
|
.rule{height:1px;background:var(--line);margin:22px 0}
|
|
.doors{display:grid;grid-template-columns:1fr 1fr;gap:14px}
|
|
@media(max-width:640px){.doors{grid-template-columns:1fr}}
|
|
a.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)}
|
|
a.door h2{font-size:17px;margin:0 0 5px;color:#9fb6d8}
|
|
a.door p{margin:0;color:var(--dim);font-size:13px;line-height:1.5}
|
|
a.door .go{display:inline-block;margin-top:11px;font-size:12px;color:#5aa9e6}
|
|
/* 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>
|
|
<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 class="doors">
|
|
<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>runs entirely in your browser — no server code required</span>
|
|
</footer>
|
|
</main>
|
|
|
|
<script type="module" src="./web/splash.js"></script>
|
|
</body>
|
|
</html>
|