Added simple home screen
This commit is contained in:
parent
9b8474a037
commit
6c260c303c
@ -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>
|
||||||
|
@ -1,9 +1,27 @@
|
|||||||
import {Component} from "@angular/core";
|
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({
|
@Component({
|
||||||
selector: 'home',
|
selector: 'home',
|
||||||
templateUrl: 'home.component.html',
|
templateUrl: 'home.component.html'
|
||||||
})
|
})
|
||||||
export class HomeComponent {
|
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]);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,3 +1,4 @@
|
|||||||
|
@import url('https://use.fontawesome.com/releases/v5.8.1/css/all.css');
|
||||||
@import '~bootstrap-scss/bootstrap.scss';
|
@import '~bootstrap-scss/bootstrap.scss';
|
||||||
|
|
||||||
:focus {
|
:focus {
|
||||||
@ -22,3 +23,9 @@ a[href^="https://maps.google.com/maps"]{display:none !important}
|
|||||||
.gmnoprint div {
|
.gmnoprint div {
|
||||||
background:none !important;
|
background:none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mat-padding-0 {
|
||||||
|
.mat-form-field-infix {
|
||||||
|
border: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user