ztimson/map-alliance
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases 1 Activity

Dope new landing page

Browse Source
This commit is contained in:
Zakary Timson
2019-08-24 21:59:34 -04:00
parent 8e0a2e966f
commit 05654fa1e4
11 changed files with 3518 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/app/views/home/home.component.html
View File

@ -1,40 +1,13 @@
<div class="d-flex w-100 h-100 flex-column justify-content-center align-items-center px-4" style="background-color: #1976d2">
<div>
<img src="assets/images/logo.png" width="100%" height="auto">
</div>
<div class="my-5 text-center">
<h3 class="text-white">Collaborative map making... {{typedText | async}}</h3>
</div>
<div>
<div class="row">
<div class="col">
<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 mt-5 mt-md-0">
<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>
<animated-background></animated-background>
<div class="badge">
<img src="assets/images/logo.png" width="200px" height="auto">
</div>
<div class="controls">
<div class="row">
<div class="col-12 col-md-6">
<button mat-flat-button class="w-100 text-white" style="background-color: #dd0330" (click)="new()">
<mat-icon>add</mat-icon> New Map
</button>
</div>
</div>
</div>

15
src/app/views/home/home.component.scss Normal file
View File

@ -0,0 +1,15 @@
.badge {
position: absolute;
top: 15%;
left: 50%;
z-index: 500;
transform: translateX(-50%);
}
.controls {
position: absolute;
bottom: 10%;
left: 50%;
z-index: 500;
transform: translateX(-50%);
}

3
src/app/views/home/home.component.ts
View File

@ -8,7 +8,8 @@ const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
@Component({
selector: 'home',
templateUrl: 'home.component.html'
templateUrl: 'home.component.html',
styleUrls: ['home.component.scss']
})
export class HomeComponent {
phrase = 'If you\'re into that';