Just some finessing

routes/_private.html

@@ -0,0 +1,18 @@
+<h1>You are now logged in!</h1>
+
+<figure>
+	{#if $user.username === 'general-zod'}
+		<img alt='Zod' src='zod.png'>
+		<figcaption>Kneel before Zod!</figcaption>
+	{:else}
+		<img alt='Super' src='super.png'>
+		<figcaption>Up, up, and away!</figcaption>
+	{/if}
+</figure>
+
+<style>
+	h1, figure, p {
+		text-align: center;
+		margin: 0 auto;
+	}
+</style>

routes/_public.html

@@ -0,0 +1,43 @@
+<h1>Great success!</h1>
+
+<figure>
+	<img alt='Borat' src='great-success.png'>
+	<figcaption>HIGH FIVE!</figcaption>
+</figure>
+
+<p><strong>Try editing this file (routes/index.html) to test live reloading.</strong></p>
+<p><strong>Also, try <a href="/login">logging</a> in or <a href="/signup">signing</a> up.</strong></p>
+
+<style>
+	h1, figure, p {
+		text-align: center;
+		margin: 0 auto;
+	}
+
+	h1 {
+		font-size: 2.8em;
+		text-transform: uppercase;
+		font-weight: 700;
+		margin: 0 0 0.5em 0;
+	}
+
+	figure {
+		margin: 0 0 1em 0;
+	}
+
+	img {
+		width: 100%;
+		max-width: 400px;
+		margin: 0 0 1em 0;
+	}
+
+	p {
+		margin: 1em auto;
+	}
+
+	@media (min-width: 480px) {
+		h1 {
+			font-size: 4em;
+		}
+	}
+</style>

routes/index.html

@@ -2,45 +2,17 @@
 	<title>Sapper project template</title>
 </svelte:head>
 
-<h1>Great success!</h1>
+{#if $user}
+	<Private/>
+{:else}
+	<Public/>
+{/if}
 
-<figure>
+<script>
-	<img alt='Borat' src='great-success.png'>
+	export default {
-	<figcaption>HIGH FIVE!</figcaption>
+		components: {
-</figure>
+			Private: './_private.html',
-
+			Public: './_public.html',
-<p><strong>Try editing this file (routes/index.html) to test live reloading.</strong></p>
+		},
-
-<style>
-	h1, figure, p {
-		text-align: center;
-		margin: 0 auto;
 	}
-
+</script>
-	h1 {
-		font-size: 2.8em;
-		text-transform: uppercase;
-		font-weight: 700;
-		margin: 0 0 0.5em 0;
-	}
-
-	figure {
-		margin: 0 0 1em 0;
-	}
-
-	img {
-		width: 100%;
-		max-width: 400px;
-		margin: 0 0 1em 0;
-	}
-
-	p {
-		margin: 1em auto;
-	}
-
-	@media (min-width: 480px) {
-		h1 {
-			font-size: 4em;
-		}
-	}
-</style>

routes/login.html

@@ -14,6 +14,21 @@
 		</label>
 	</div>
 	<button type="submit" class="button">Log In</button>
+	<p><strong>Hint, if you haven't signed up, temporary usernames and passwords are:</strong></p>
+	<table>
+		<tr>
+			<th>Username</th>
+			<th>Password</th>
+		</tr>
+		<tr>
+			<td>general-zod</td>
+			<td>password</td>
+		</tr>
+		<tr>
+			<td>kal-el</td>
+			<td>password</td>
+		</tr>
+	</table>
 </form>
 
 <script>
@@ -56,4 +71,9 @@
 		padding: 1.2em;
 		font-size: 1em;
 	}
+	table th,
+	table td {
+		padding: 5px 5px 0 0;
+		text-align: left;
+	}
 </style>