add icons

assets/global.css

@@ -32,8 +32,51 @@ a:visited {
 	color: royalblue;
 }
 
+input {
+	border: 1px solid #dadada;
+	padding: 5px;
+}
+
+label {
+	font-size: 1.1em;
+}
+
+input {
+	font-size: 1.1em;
+}
+
+button {
+	font-size: 1.2em;
+	border: 1px solid #333;
+	background: #ededed;
+	border-radius: 2px;
+	padding: 10px 15px;
+}
+
+button:hover {
+	background: #ddd;
+}
+
+button:active {
+	background: #fafafa;
+}
+
+button.primary {
+	border: 1px solid #1e3066;
+	background: #668cff;
+	color: white;
+}
+
+button.primary:hover {
+	background: #446add;
+}
+
+button.primary:active {
+	background: #99b3ff;
+}
+
 @media (max-width: 767px) {
-	p {
+	p, label, input {
 		font-size: 1.3em;
 	}
 }

assets/manifest.json

@@ -7,14 +7,9 @@
 	"start_url": "/",
 	"icons": [
 		{
-			"src": "svelte-logo-192.png",
+			"src": "icon-192.png",
 			"sizes": "192x192",
 			"type": "image/png"
-		},
-		{
-			"src": "svelte-logo-512.png",
-			"sizes": "512x512",
-			"type": "image/png"
 		}
 	]
 }

assets/sailboat.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 100 100" x="0px" y="0px"><title>Artboard 1</title><path d="M92.12,59.93H59.87V8.23C70.4,14.9,87.34,30,92.12,59.93ZM31,26.9A122.4,122.4,0,0,1,9.39,60.35H31ZM37.76,99H62.24A30.67,30.67,0,0,0,92.91,68.33H50.52V6.27A5.27,5.27,0,0,0,40,6.27V68.33H7.09A30.67,30.67,0,0,0,37.76,99Z" fill="#ffffff"/></svg>

routes/index.html

@@ -7,7 +7,7 @@
 
   <p>Pinafore is a web client for <a href="https://joinmastodon.org">Mastodon</a>, optimized for performance and simplicity.</p>
 
-	<p>To get started, <a href="/settings/instance-wizard">log in to an instance</a>.</p>
+	<p>To get started, <a href="/settings/add-instance">log in to an instance</a>.</p>
 
   <p>Don't have an instance? <a href="https://joinmastodon.org">Join Mastodon!</a></p>
 </Layout>

routes/settings/add-instance.html

@@ -0,0 +1,52 @@
+<:Head>
+  <title>Instance Wizard</title>
+</:Head>
+
+<Layout page='settings'>
+  <h1>Add an instance</h1>
+
+  <p>Log in to your instance to use Pinafore.</p>
+
+  <form on:submit='handleSubmit(event)'>
+    <label for="instanceInput">Instance name:</label>
+    <input type="text" id="instanceInput" bind:value='instanceName' placeholder=''>
+    <button class="primary" type="submit" id="submitButton">Add instance</button>
+  </form>
+
+  <p>Don't have an instance? <a href="https://joinmastodon.org">Join Mastodon!</a></p>
+</Layout>
+<style>
+  input {
+  }
+
+  form {
+    background: #fafafa;
+    padding: 5px 10px 15px;
+    border: 1px solid #ccc;
+    margin: 0 auto;
+  }
+
+  form label, form input, form button {
+    display: block;
+    margin: 20px 5px;
+  }
+</style>
+<script>
+  import Layout from '../_components/Layout.html';
+
+  export default {
+    components: {
+      Layout
+    },
+    data: () => ({
+      instanceName: ''
+    }),
+    methods: {
+      handleSubmit(event) {
+        event.preventDefault()
+        let instanceName = this.get('instanceName')
+        alert(instanceName)
+      }
+    }
+  }
+</script>

routes/settings/instance-wizard.html

@@ -1,19 +0,0 @@
-<:Head>
-  <title>Instance Wizard</title>
-</:Head>
-
-<Layout page='settings'>
-  <h1>Instance Wizard</h1>
-
-  <p>Add an instance!</p>
-</Layout>
-
-<script>
-  import Layout from '../_components/Layout.html';
-
-  export default {
-    components: {
-      Layout
-    }
-  };
-</script>

templates/2xx.html

@@ -10,7 +10,7 @@
 	<link rel='icon' type='image/png' href='/favicon.png'>
 
 	<script>
-		if ('serviceWorker' in navigator) {
+		if (!location.origin.match('localhost') && 'serviceWorker' in navigator) {
 			navigator.serviceWorker.register('/service-worker.js');
 		}
 	</script>
@@ -33,5 +33,6 @@
 	     and anything else it needs to hydrate the app and
 	     initialise the router -->
 	<script src='%sapper.main%'></script>
+<!-- Icon thanks to sailboat by Gregor Cresnar from the Noun Project -->
 </body>
 </html>