login page

www/src/App.svelte

@@ -1,21 +1,16 @@
-<script lang="ts">
-  // export let name: string;
+<script>
+  import 'papercss/dist/paper.min.css';
+
+  import { Router, Route, Link } from 'svelte-navigator';
   import Test3D from './components/test3D.svelte';
+  import Login from './pages/Login.svelte';
 </script>
 
-<main>
-  <Test3D />
-</main>
-
-<style>
-  main {
-    text-align: center;
-    max-width: 240px;
-  }
-
-  @media (min-width: 640px) {
-    main {
-      max-width: none;
-    }
-  }
-</style>
+<Router>
+  <Route path="/">
+    <Test3D />
+  </Route>
+  <Route path="/login">
+    <Login />
+  </Route>
+</Router>

www/src/pages/Login.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { Form, Input, Button } from 'spaper';
+</script>
+
+<main>
+  <div class="row" id="container">
+    <Form class="">
+      <Input placeholder="email" class="row" />
+      <Input placeholder="password" type="password" class="row" />
+
+      <Button type="secondary" class="row" id="button">Sign in</Button>
+    </Form>
+  </div>
+</main>
+
+<style>
+  main {
+    height: 100%;
+  }
+  #button {
+    display: flex;
+  }
+  #container {
+    height: inherit;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+</style>