Add ms rounding to stopwatch, style login/register

public/css/dragon.css

@@ -24,13 +24,12 @@ body {
 	}
 
 	footer {
-		margin-top: 1rem;
+		margin-top: 4rem;
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
-		background-color: rgba(0, 0, 0, 0.25);
 		padding: 0.5rem;
-		color: rgba(0, 0, 0, 0.75);
+		color: rgba(0, 0, 0, 0.65);
 		font-size: 0.75rem;
 	}
 
@@ -66,6 +65,20 @@ body {
     input {
         width: 100%;
     }
+
+	&.checkbox {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+
+		input {
+			width: auto;
+		}
+
+		label {
+			display: inline;
+		}
+	}
 }
 
 .text-red {

server/boot/Library.php

@@ -1,8 +1,9 @@
 <?php // library.php :: Common functions used throughout the program.
 
 // Diff two times in seconds.
-function stopwatch(float $start, int $roundTo = 3): float
+function stopwatch(float $start, int $roundTo = 3, bool $ms = false): float
 {
+	if ($ms) return round(microtime(true) - $start, $roundTo) * 1000;
     return round(microtime(true) - $start, $roundTo);
 }
 

server/templates/gate/login.php

@@ -1,7 +1,24 @@
+<h1>Return to your Adventure</h1>
+<p>
+	Log in here to return to the world and carry on fighting and looting! If you do not
+	have an account, you can <a href="/gate/register">register here</a>.
+</p>
+
 <form action="/gate/login" method="post">
-	<input type="text" name="id" placeholder="Email or Username">
+	<div class="form-group">
-	<input type="password" name="pw" placeholder="Password">
+		<label for="id">User</label>
+		<input type="text" name="id" placeholder="Username/Email" required>
+	</div>
+
+	<div class="form-group">
+		<label for="pw">Password</label>
+		<input type="password" name="pw" placeholder="Password" required>
+	</div>
+
+	<div class="form-group checkbox">
 		<input type="checkbox" name="remember" id="remember">
 		<label for="remember">Remember me</label>
+	</div>
+
 	<button>Login</button>
 </form>

server/templates/gate/register.php

@@ -1,18 +1,43 @@
-<?php
+<h1>Become an Adventurer</h1>
-	if (App::flash('errors')) {
+<p>
+	Register with the Guild to become an adventurer; you can starting battling and looting
+	the world! If you're already an adventurer, <a href="/gate/login">login</a>.
+</p>
+
+<?php if (App::flash('errors')) {
 	print_r(App::flash('errors'));
-	}
+} ?>
-?>
+
 
 <form action="/gate/register" method="post">
+	<div class="form-group">
+		<label for="username">Username</label>
 		<input type="text" name="username" placeholder="Username">
-	<input type="text" name="email" placeholder="Email">
+	</div>
+
+	<div class="form-group">
+		<label for="email">Email</label>
+		<input type="email" name="email" placeholder="Email">
+	</div>
+
+	<div class="form-group">
+		<label for="password">Password</label>
 		<input type="password" name="password" placeholder="Password">
+	</div>
+
+	<div class="form-group">
+		<label for="password">Confirm Password</label>
 		<input type="password" name="password2" placeholder="Confirm Password">
+	</div>
+
+	<div class="form-group">
+		<label for="class">Class</label>
 		<select name="class">
 			<?php foreach (Classes::all() as $class): ?>
 				<option value="<?= $class['id'] ?>"><?= $class['name'] ?></option>
 			<?php endforeach; ?>
 		</select>
+	</div>
+
 	<button>Register</button>
 </form>

server/templates/layout.php

@@ -20,7 +20,16 @@
 			</aside>
 
 			<main>
-				<?= render($content, $data) ?>
+				<div>
+					<?php
+						if (!empty(App::$flashes)) {
+							foreach (App::$flashes as $type => $flash) {
+								echo '<div class="alert ' . $type . '">' . $flash . '</div>';
+							}
+						}
+					?>
+				</div>
+				<div><?= render($content, $data) ?></div>
 			</main>
 
 			<aside id="right">

server/templates/partials/footer.php

@@ -7,5 +7,9 @@
 </div>
 
 <div>
-	<?= App::$db->queries() ?> queries in <?= round(App::$db->time(), 2) ?> seconds
+	Rendered in <?= stopwatch(START, 3, true) ?>ms
+</div>
+
+<div>
+	<?= App::$db->queries() ?> queries in <?= round(App::$db->time() * 1000, 2) ?>ms
 </div>