147 lines
5.8 KiB
HTML
147 lines
5.8 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
|
|
<title>The Living World</title>
|
|
<link rel="icon" href="data:," />
|
|
</head>
|
|
<body>
|
|
<div id="menu" class="screen screen--menu">
|
|
<div class="menu">
|
|
<header class="menu__header">
|
|
<div class="menu__titles">
|
|
<h1 data-i18n="app.title">The Living World</h1>
|
|
<p class="menu__subtitle" data-i18n="app.subtitle">Generate a world from OpenStreetMap</p>
|
|
</div>
|
|
<div class="menu__actions">
|
|
<div id="locale-switch" class="locale-switch"></div>
|
|
<button id="menu-theme-toggle" type="button" class="theme-button" title="Switch theme">
|
|
Night
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<button id="continue-button" type="button" class="continue" hidden>
|
|
<span class="continue__kicker" data-i18n="menu.continue">Continue</span>
|
|
<span id="continue-name" class="continue__name"></span>
|
|
<span class="continue__arrow" aria-hidden="true">→</span>
|
|
</button>
|
|
|
|
<div class="menu__body">
|
|
<section class="worlds">
|
|
<div class="worlds__header">
|
|
<h2 data-i18n="menu.worlds">Worlds</h2>
|
|
<span id="slot-count" class="slot-count"></span>
|
|
</div>
|
|
<p id="worlds-empty" class="worlds__empty" hidden data-i18n="menu.worldsEmpty">
|
|
Worlds you generate will show up here. A small town takes a few seconds.
|
|
</p>
|
|
<ul id="world-list" class="world-list"></ul>
|
|
</section>
|
|
|
|
<form id="generate-form" class="form">
|
|
<h2 class="form__title" data-i18n="form.newWorld">New world</h2>
|
|
|
|
<label class="field">
|
|
<span data-i18n="form.name">Name</span>
|
|
<input id="field-name" type="text" data-i18n-placeholder="form.namePlaceholder" placeholder="Optional — defaults to the coordinates" autocomplete="off" />
|
|
</label>
|
|
|
|
<label class="field">
|
|
<span class="field__label">
|
|
<span data-i18n="form.location">Location</span>
|
|
<button id="use-location" type="button" class="link-button" data-i18n="form.useMyLocation">Use my location</button>
|
|
</span>
|
|
<input
|
|
id="field-coords"
|
|
type="text"
|
|
inputmode="decimal"
|
|
spellcheck="false"
|
|
autocapitalize="off"
|
|
autocomplete="off"
|
|
value="31.8966010, -100.4858591"
|
|
data-i18n-placeholder="form.coordsPlaceholder"
|
|
placeholder="Latitude, longitude"
|
|
required
|
|
/>
|
|
</label>
|
|
|
|
<label class="field">
|
|
<span><span data-i18n="form.size">Size</span> <output id="field-size-value">10 km</output></span>
|
|
<input id="field-size" type="range" min="1" max="20" step="1" value="10" />
|
|
</label>
|
|
|
|
<label class="field">
|
|
<span data-i18n="form.start">Start date & time</span>
|
|
<input
|
|
id="field-start"
|
|
type="datetime-local"
|
|
value="2012-04-12T06:00"
|
|
required
|
|
/>
|
|
</label>
|
|
|
|
<label class="field">
|
|
<span data-i18n="form.climate">Climate</span>
|
|
<select id="field-climate">
|
|
<option value="" data-i18n="form.climateFromLocation">From the location</option>
|
|
</select>
|
|
<small id="climate-hint" class="field__hint"></small>
|
|
</label>
|
|
|
|
<p id="form-hint" class="form__hint" hidden></p>
|
|
<button id="generate-button" type="submit" class="button" data-i18n="form.generate">Generate world</button>
|
|
</form>
|
|
</div>
|
|
|
|
<footer id="status" class="status"></footer>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="game" class="screen screen--game" hidden>
|
|
<div id="stage"></div>
|
|
|
|
<header class="game-bar">
|
|
<button id="back-button" type="button" class="icon-button" data-i18n-title="game.back" data-i18n-aria="game.back" title="Back to menu" aria-label="Back to menu">
|
|
←
|
|
</button>
|
|
<span id="world-title" class="game-bar__title"></span>
|
|
<div id="sim-controls" class="sim-controls" hidden>
|
|
<span id="game-clock" class="sim-controls__clock" aria-live="polite"></span>
|
|
<span id="game-weather" class="sim-controls__weather" aria-live="polite"></span>
|
|
<button
|
|
id="play-pause"
|
|
type="button"
|
|
class="icon-button"
|
|
title="Pause"
|
|
aria-label="Pause"
|
|
>⏸</button>
|
|
<div class="sim-controls__speeds" role="group" data-i18n-aria="game.speed" aria-label="Simulation speed">
|
|
<button type="button" class="speed-button" data-scale="1">x1</button>
|
|
<button type="button" class="speed-button" data-scale="2">x2</button>
|
|
<button type="button" class="speed-button" data-scale="3">x3</button>
|
|
<button type="button" class="speed-button" data-scale="4">x4</button>
|
|
</div>
|
|
</div>
|
|
<button
|
|
id="weather-toggle"
|
|
type="button"
|
|
class="icon-button"
|
|
title="Hide weather effects"
|
|
data-i18n-aria="game.weatherAria"
|
|
aria-label="Weather effects"
|
|
aria-pressed="true"
|
|
>🌦</button>
|
|
<button id="game-theme-toggle" type="button" class="icon-button" title="Switch theme" aria-label="Switch theme">
|
|
☾
|
|
</button>
|
|
</header>
|
|
|
|
<div id="hud" class="hud"></div>
|
|
</div>
|
|
|
|
<script type="module" src="/src/main.ts"></script>
|
|
</body>
|
|
</html>
|