2023-09-02 19:16:55 -04:00
|
|
|
<!doctype html>
|
2023-08-26 13:58:47 -04:00
|
|
|
<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>
|
2023-09-02 19:16:55 -04:00
|
|
|
input,
|
|
|
|
|
body {
|
|
|
|
|
background-color: black;
|
|
|
|
|
color: white;
|
|
|
|
|
}
|
|
|
|
|
|
2023-08-26 13:58:47 -04:00
|
|
|
input:invalid {
|
2023-09-02 19:16:55 -04:00
|
|
|
border: 2px dashed white;
|
2023-08-26 13:58:47 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
input:valid {
|
2023-09-02 19:16:55 -04:00
|
|
|
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;
|
|
|
|
|
}
|
2023-08-26 13:58:47 -04:00
|
|
|
}
|
|
|
|
|
</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>
|
