125 lines
3.4 KiB
HTML
125 lines
3.4 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 a team, and play with your friends online through this browser game."
|
|
/>
|
|
|
|
<link rel="apple-touch-icon" sizes="180x180" href="static/apple-touch-icon.png" />
|
|
<link rel="icon" type="image/png" sizes="32x32" href="static/favicon-32x32.png" />
|
|
<link rel="icon" type="image/png" sizes="16x16" href="static/favicon-16x16.png" />
|
|
|
|
<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="name"
|
|
name="name"
|
|
type="text"
|
|
/>
|
|
<label for="name">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-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>
|
|
|
|
<label for="enable-vibration">
|
|
<input id="enable-vibration" type="checkbox" />
|
|
<img
|
|
title="Enable vibration on mobile"
|
|
alt="vibrating mobile"
|
|
src="static/vibrate.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>
|