Added simple home screen

src/app/home/home.component.html

@@ -1,2 +1,40 @@
-<h1>Home</h1>
+<div class="d-flex w-100 h-100 flex-column justify-content-center align-items-center" style="background-color: #1976d2">
-<a routerLink="/map">Temp</a>
+    <div>
+        <img src="assets/images/logo.png">
+    </div>
+    <div class="my-5">
+        <h3 class="text-white">Collaborative map making... {{typedText | async}}</h3>
+    </div>
+    <div>
+        <div class="row">
+            <div class="col border-right border-white">
+                <button mat-flat-button class="w-100 text-white" style="background-color: #dd4b39">
+                    <i class="fab fa-google mr-2"></i> Sign in with Google
+                </button>
+                <button mat-flat-button class="w-100 mt-2 text-white" style="background-color: #00acee">
+                    <i class="fab fa-twitter mr-2"></i> Sign in with Twitter
+                </button>
+                <button mat-flat-button class="w-100 mt-2 text-white" style="background-color: #3b5998">
+                    <i class="fab fa-facebook mr-2"></i>Sign in with Facebook
+                </button>
+            </div>
+            <div class="col border-left border-white">
+                <button mat-flat-button class="w-100 text-white" style="background-color: #dd0330" (click)="new()">
+                    <mat-icon>add</mat-icon> New Map
+                </button>
+                <div class="d-flex mt-2 align-items-baseline">
+                    <div class="flex-grow-1">
+                        <mat-form-field appearance="fill" class="w-100 text-white mat-padding-0">
+                            <input #mapCode matInput placeholder="Map Code">
+                        </mat-form-field>
+                    </div>
+                    <div class="ml-2">
+                        <button mat-flat-button class="w-100 text-white" style="background-color: #dd0330" [routerLink]="['/', mapCode.value]">
+                            <mat-icon>explore</mat-icon> Open
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

src/app/home/home.component.ts

@@ -1,9 +1,27 @@
 import {Component} from "@angular/core";
+import {Observable, timer} from "rxjs";
+import {map, take} from "rxjs/operators";
+import {Router} from "@angular/router";
+
+const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
 
 @Component({
     selector: 'home',
-    templateUrl: 'home.component.html',
+    templateUrl: 'home.component.html'
 })
 export class HomeComponent {
+    phrase = 'If you\'re into that';
+    typedText: Observable<string>;
 
+    constructor(private router: Router) {
+        this.typedText = timer(750, 50).pipe(take(this.phrase.length), map((i: number) => this.phrase.substring(0, i + 1)));
+    }
+
+    async new() {
+        let mapCode: string;
+        do {
+            mapCode = Array(16).fill(0).map(() => chars[Math.round(Math.random() * chars.length)]).join('');
+        } while (false);
+        this.router.navigate(['/', mapCode]);
+    }
 }

src/styles.scss

@@ -1,3 +1,4 @@
+@import url('https://use.fontawesome.com/releases/v5.8.1/css/all.css');
 @import '~bootstrap-scss/bootstrap.scss';
 
 :focus {
@@ -22,3 +23,9 @@ a[href^="https://maps.google.com/maps"]{display:none !important}
 .gmnoprint div {
   background:none !important;
 }
+
+.mat-padding-0 {
+  .mat-form-field-infix {
+    border: 0 !important;
+  }
+}