mmo-project/common/html/index.html

92 lines
2.3 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MMO Testing Game</title>
<style>
input,
body {
background-color: black;
color: white;
}
input:invalid {
border: 2px dashed white;
}
input:valid {
border: 2px solid white;
}
@media screen and (prefers-color-scheme: light) {
input,
body {
background-color: white;
color: black;
}
input:invalid {
border: 2px dashed black;
}
input:valid {
border: 2px solid black;
}
}
</style>
</head>
<body>
<header>
<h1>MMO Testing Game</h1>
</header>
<main>
<p>
I wanted to create this design document to better define the style and
what features will be in the testing game. The testing game is going to
be a extremely simplified 3D MMORPG in the spirit of Runescape 2. An
environment where players can move around the environment and chat with
each other.
</p>
<form method="post" action="/">
<h5>Signup Form</h5>
<label for="username">Username: (max length 32 characters)</label><br />
<input
required
type="text"
id="username"
name="username"
maxlength="32"
value=""
/><br />
<label for="password"
>Password: (Must be between 8 and 24 characters and include 1
Lowercase Character, 1 Capital, 1 Number, and 1 Symbol)</label
><br />
<input
required
pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$"
minlength="8"
maxlength="24"
type="password"
id="password"
name="password"
value=""
/><br />
<label for="appearance">Appearance:</label><br />
<input
required
type="color"
value="#000000"
id="appearance"
name="appearance"
/>
<br /><br />
<button type="submit">Submit</button>
</form>
</main>
</body>
</html>