Skip to content
Snippets Groups Projects
index.html 3.27 KiB
Newer Older
Louis's avatar
Louis committed
<!doctype html>
<html class="no-js" lang="">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title>SNAILS</title>
		<link rel="stylesheet" href="css/style.css" />
		<meta
			name="description"
			content="Snails are your friends, they help you make decisions"
		/>

		<meta property="og:title" content="SNAILS" />
		<meta property="og:type" content="website" />
		<meta property="og:url" content="https://snailrace.app" />
		<meta property="og:image" content="https://snailrace.app/icon.png" />

		<link rel="icon" href="/favicon.ico" sizes="any" />
		<link rel="apple-touch-icon" href="icon.png" />

		<link rel="preload" href="static/SNAIL.png" />
		<link rel="preload" href="static/snail.mp3" as="audio" type="audio/mp3" />

		<link rel="manifest" href="site.webmanifest" />
		<meta name="theme-color" content="#fafafa" />

		<script
			defer
			src="js/snailscript.js"
			type="application/javascript"
		></script>
	</head>

	<body>
		<main id="track">
			<aside class="top-controls">
				<button id="restart_race" onclick="api.resetCreatorState(false)">New Race</button>
				<button id="restart_race_but_not_aggressively" onclick="api.resetCreatorState(true)">New Race (Keep Snails)</button>
			</aside>
			<!-- Snails go here :3 -->
		</main>

		<template id="snail_track">
			<section class="lane">
				<figure class="snail">
					<img
						class="snail-image"
						src="static/SNAIL.png"
						alt="Snail (Placeholder)"
					/>
				</figure>
				<span class="lane-description"></span>
				<img
					src="static/FinishLine.png"
					width="30"
					height="100"
					class="lane-end"
					alt=""
					role="presentation"
				/>
			</section>
		</template>

		<template id="snail_namer">
			<div class="snail-input-row">
				<input class="snail_name_input" type="text" value="" placeholder="Name your snail" />
				<button class="remove-snail fill danger">Remove</button>
			</div>
		</template>

		<div class="assets">
			<audio src="static/snail.mp3" loop id="audio_track"></audio>
		</div>

		<div
			class="dialog-container"
			aria-labelledby="aria-dialog-title"
			role="dialog"
			aria-modal="true"
			id="dialog_setup"
		>
			<div class="backdrop coverage"></div>
			<div class="dialog-inner coverage">
				<div class="dialog-content-wrapper">
					<div class="dialog-content shadow">
						<h2 id="aria-dialog-title" class="dialog-title list-spacing">SNAILS</h2>
						<p class="list-spacing">
							Snails are your friends, and help you make decisions
						</p>
						<div id="dialog_input_list" class="dialog-inputs list-spacing">
							<div class="snail-input-row">
								<input
									class="snail_name_input"
									name="snail_0"
									id="snail_0"
									type="text"
									value=""
									placeholder="Name your snail"
								/>
								<button class="remove-snail fill danger">Remove</button>
							</div>
						</div>

						<div class="controls">
							<button id="button_race_snails">Race Those Snails</button>
							<button id="button_add_snail">Another Snail</button>
							<!--							<div class="hello_vspace_micheal_here"></div>-->
							<!--							<button id="button_speed_opt">x2</button>-->
							<!--							<button id="button_mute">Mute</button>-->
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>