133 lines
3.6 KiB
HTML
133 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta
|
|
name="viewport"
|
|
content="width=device-width, initial-scale=1.0, maximum-scale=1.0,
|
|
user-scalable=0"
|
|
/>
|
|
<meta name="theme-color" content="#b7455e" />
|
|
|
|
<meta property="og:url" content="https://decla.red" />
|
|
<meta property="og:image" content="https://decla.red/og-image.png" />
|
|
<meta property="og:image:width" content="2086" />
|
|
<meta property="og:image:height" content="940" />
|
|
<meta
|
|
property="og:image:alt"
|
|
content="Dimly lit planets surrounding a text saying 'decla.red'"
|
|
/>
|
|
<meta name="theme-color" content="#b33951" />
|
|
<meta
|
|
name="description"
|
|
content="Conquer the planets, work as part of a team, and play with your friends online through this browser game."
|
|
/>
|
|
|
|
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
|
|
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
|
|
|
|
<title>decla.red</title>
|
|
</head>
|
|
|
|
<body>
|
|
<noscript>Javascript is required for this website.</noscript>
|
|
|
|
<canvas></canvas>
|
|
<div id="overlay"></div>
|
|
|
|
<section id="landing-ui">
|
|
<h1>decla.<span class="red">red</span></h1>
|
|
<form id="join-game-form">
|
|
<fieldset class="content">
|
|
<legend>Join a game</legend>
|
|
|
|
<div class="name-group">
|
|
<input
|
|
required
|
|
minlength="1"
|
|
maxlength="20"
|
|
placeholder=" "
|
|
id="playerName"
|
|
name="playerName"
|
|
type="text"
|
|
/>
|
|
<label for="playerName">Choose a name</label>
|
|
</div>
|
|
|
|
<div id="server-container"></div>
|
|
<button id="join-game" type="submit">Join</button>
|
|
</fieldset>
|
|
</form>
|
|
</section>
|
|
|
|
<div id="settings-container">
|
|
<section id="settings">
|
|
<label for="enable-relative-movement">
|
|
<input id="enable-relative-movement" type="checkbox" />
|
|
<img
|
|
title="Make movement be relative to the gravitational field"
|
|
alt="a dashed circle"
|
|
src="../static/circle.svg"
|
|
/>
|
|
</label>
|
|
|
|
<label for="enable-vibration">
|
|
<input id="enable-vibration" type="checkbox" />
|
|
<img
|
|
title="Enable vibration on mobile"
|
|
alt="vibrating mobile"
|
|
src="../static/vibrate.svg"
|
|
/>
|
|
</label>
|
|
|
|
<label for="enable-sounds">
|
|
<input id="enable-sounds" type="checkbox" />
|
|
<img
|
|
title="Enable sounds"
|
|
alt="speaker with sound waves"
|
|
src="../static/volume.svg"
|
|
/>
|
|
</label>
|
|
|
|
<label for="enable-music">
|
|
<input id="enable-music" type="checkbox" />
|
|
<img title="Enable music" alt="music note" src="../static/music.svg" />
|
|
</label>
|
|
|
|
<img
|
|
title="Exit from current game"
|
|
id="logout"
|
|
alt="logout"
|
|
src="../static/logout.svg"
|
|
/>
|
|
</section>
|
|
</div>
|
|
|
|
<div id="toggle-settings-container">
|
|
<img
|
|
title="Toggle settings"
|
|
id="toggle-settings"
|
|
class="icon"
|
|
alt="toggle-settings"
|
|
src="../static/settings.svg"
|
|
/>
|
|
</div>
|
|
|
|
<img
|
|
class="full-screen-controllers"
|
|
id="minimize"
|
|
alt="minimize-application"
|
|
src="../static/minimize.svg"
|
|
/>
|
|
<img
|
|
class="full-screen-controllers"
|
|
id="maximize"
|
|
alt="maximize-application"
|
|
src="../static/maximize.svg"
|
|
/>
|
|
|
|
<div id="spinner-container">
|
|
<img id="spinner" alt="waiting" src="../static/spinner.svg" />
|
|
</div>
|
|
</body>
|
|
</html>
|