дезигн

src/app/src/app/app.component.html

@@ -16,6 +16,6 @@
     </div>
   </mat-toolbar-row>
 </mat-toolbar>
-<div class="main">
+<div [ngClass]="mainClass">
   <router-outlet></router-outlet>
 </div>

src/app/src/app/app.component.ts

@@ -3,7 +3,7 @@ import {Observable} from "rxjs";
 import {PersonService} from "./person/person.service";
 import {map} from "rxjs/operators";
 import * as _ from 'underscore'
-import {Router} from "@angular/router";
+import {ActivatedRoute, Router} from "@angular/router";
 import {Title} from "@angular/platform-browser";
 
 @Component({
@@ -15,7 +15,9 @@ export class AppComponent {
 
   public title = "FREIGELD"
 
-  constructor(private titleService: Title, private personService: PersonService, private router: Router) {
+  public mainClass = "main"
+
+  constructor(private titleService: Title, private personService: PersonService, private router: Router, private activatedRoute: ActivatedRoute) {
 
   }
 
@@ -30,5 +32,10 @@ export class AppComponent {
 
   setTitle(title: string) {
     this.titleService.setTitle(`${title} :: ${this.title}`);
+    this.mainClass = "main"
+  }
+
+  setMain(clazz: string) {
+    this.mainClass = clazz
   }
 }

src/app/src/app/app.index.component.html

@@ -1,7 +1,48 @@
-<div>
-  <mat-card fxFlex="33">
-    <mat-card-content>
-      Только те деньги, которые приходят в негодность, как вчерашние газеты, как прошлогодний картофель, как железяка, пролежавшая в земле сто лет, и могут быть настоящими деньгами, т. е. инструментом для обмена тех же газет, картофеля, железа и т. д. Потому что такие деньги никто не будет отличать от собственно товаров, которые потребляет человек, никто их не будет никоим образом отличать, как нечто лучшее. Никто: ни покупатель, ни продавец. И тогда, и только тогда деньги станут тем, что они есть в их самом чистом виде: средством обмена, помощником при обмене товарами.
-    </mat-card-content>
-  </mat-card>
+<div fxLayout="column" fxLayoutAlign="start stretch">
+  <div #land fxLayout="column" fxLayoutAlign="space-around center" id="land">
+    <div fxLayout="row" fxLayoutAlign="center center">
+      <div>
+        <p style="font-size: 5em; color: white; font-weight: bold;">
+          <span style="text-shadow: 1px 1px 2px black, 0 0 1em darkmagenta;">₣reigeld - свободные деньги</span>
+        </p>
+      </div>
+    </div>
+    <div fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="10px">
+      <mat-card fxFlex="33">
+        <mat-card-title>
+          <h2>Почему свободные?</h2>
+        </mat-card-title>
+        <mat-card-content>
+          <p style="font-size: large; text-indent: 1em;">Потому что такие деньги никто не будет отличать от собственно товаров, которые потребляет человек, никто их не будет никоим образом отличать, как нечто лучшее. Никто: ни покупатель, ни продавец. </p>
+        </mat-card-content>
+        <mat-card-actions fxLayout="row" fxLayoutAlign="center stretch">
+          <button mat-raised-button>О ПРОЕКТЕ</button>
+        </mat-card-actions>
+      </mat-card>
+      <mat-card fxFlex="33">
+        <mat-card-title>
+          <h2>Cвободные?</h2>
+
+        </mat-card-title>
+        <mat-card-content>
+          <p style="font-size: large; text-indent: 1em;">Только те деньги, которые приходят в негодность, как вчерашние газеты, как прошлогодний картофель, как железяка, пролежавшая в земле сто лет, и могут быть <strong>настоящими деньгами</strong>, т. е. инструментом для обмена тех же газет, картофеля, железа и т. д. </p>
+
+        </mat-card-content>
+        <mat-card-actions fxLayout="row" fxLayoutAlign="center stretch">
+          <button [routerLink]="['/login']" color="primary" mat-raised-button>ПОПРОБОВАТЬ СЕЙЧАС</button>
+        </mat-card-actions>
+      </mat-card>
+      <mat-card fxFlex="33">
+        <mat-card-title>
+          <h2>Зачем свободные?</h2>
+        </mat-card-title>
+        <mat-card-content>
+          <p style="font-size: large;  text-indent: 1em;">И тогда, и только тогда деньги станут тем, что они есть в их самом чистом виде: средством обмена, помощником при обмене товарами.</p>
+        </mat-card-content>
+        <mat-card-actions fxLayout="row" fxLayoutAlign="center stretch">
+          <button color="accent" mat-raised-button>УЗНАТЬ БОЛЬШЕ</button>
+        </mat-card-actions>
+      </mat-card>
+    </div>
+  </div>
 </div>

src/app/src/app/app.index.component.scss

@@ -0,0 +1,7 @@
+#land {
+  background-image: url("../assets/1969841.jpg");
+  background-repeat: no-repeat;
+  background-size: auto;
+  height: calc(100vh - 64px);
+  padding: 1em;
+}

src/app/src/app/app.index.component.ts

@@ -1,9 +1,38 @@
-import {Component} from "@angular/core";
+import {Component, ElementRef, OnDestroy, OnInit, ViewChild} from "@angular/core";
+import {AppComponent} from "./app.component";
 
 @Component({
   selector: 'app-index',
-  templateUrl: 'app.index.component.html'
+  templateUrl: 'app.index.component.html',
+  styleUrls: ['app.index.component.scss']
 })
-export class AppIndexComponent {
+export class AppIndexComponent implements OnDestroy, OnInit {
+
+  @ViewChild("land") landRef: ElementRef
+  private tick;
+
+  constructor(appComponent: AppComponent) {
+    appComponent.setMain("land")
+  }
+
+  adjustScreen() {
+    return this.landRef
+  }
+
+  startScreen() {
+    this.tick = setTimeout(() => {
+      window.requestAnimationFrame(() => this.adjustScreen());
+      this.startScreen()
+    }, 100)
+  }
+
+  ngOnDestroy(): void {
+    if (this.tick != null)
+      clearTimeout(this.tick)
+  }
+
+  ngOnInit(): void {
+    this.startScreen();
+  }
 
 }

src/app/src/app/app.login.component.ts

@@ -7,6 +7,7 @@ import {Router} from "@angular/router";
 import {RxStompService} from "@stomp/ng2-stompjs";
 import {MatDialog, MatDialogRef} from "@angular/material/dialog";
 import {PersonDebitDialogComponent} from "./person/person.page.component";
+import {AppComponent} from "./app.component";
 
 @Component({
   selector: 'app-login',
@@ -18,8 +19,9 @@ export class AppLoginComponent implements OnInit {
   public code: string
   public valid: number = null;
 
-  constructor(private personService: PersonService, private router: Router, private httpClient: HttpClient, private snackBar: MatSnackBar, private rxStompService: RxStompService, @Inject("_") public _: any, private matDialog: MatDialog) {
+  constructor(private appComponent: AppComponent, private personService: PersonService, private router: Router, private httpClient: HttpClient, private snackBar: MatSnackBar, private rxStompService: RxStompService, @Inject("_") public _: any, private matDialog: MatDialog) {
     this.qr = new ReplaySubject<QrResponse>();
+    appComponent.setTitle("ВХОД")
   }
 
   ngOnInit(): void {

src/app/src/styles.scss

@@ -1,7 +1,7 @@
 /* You can add global styles to this file, and also import other style files */
 
 html, body {
-  height: 100%;
+  height: 100vh;
 }
 
 body {
@@ -17,3 +17,7 @@ body {
 .main {
   margin: 10px;
 }
+
+.land {
+  margin: 0;
+}