Add Angular Material Design Modules and design startpage

package.json

@@ -7,7 +7,8 @@
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",
-    "e2e": "ng e2e"
+    "e2e": "ng e2e",
+    "postinstall": "ngcc"
   },
   "private": true,
   "dependencies": {

src/app/app.component.html

-<div style="background-color: azure" fxLayout="column" fxFlexFill>
+<div fxLayout="column" fxFlexFill style="background-color: #e7e7e7">
   <app-header>
   </app-header>
   <div fxFlex>

src/app/app.module.ts

@@ -9,6 +9,10 @@ import { HeaderComponent } from './header/header.component';
 import { FooterComponent } from './footer/footer.component';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { SelectGameComponent } from './select-game/select-game.component';
+import {MatButtonModule} from '@angular/material/button';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatInputModule} from '@angular/material/input';
+import {MatCardModule} from '@angular/material/card';
 
 @NgModule({
   declarations: [
@@ -22,7 +26,11 @@ import { SelectGameComponent } from './select-game/select-game.component';
     AppRoutingModule,
     BrowserAnimationsModule,
     MatToolbarModule,
-    FlexLayoutModule
+    FlexLayoutModule,
+    MatButtonModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatCardModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/select-game/select-game.component.html

-<p>select-game works!</p>
+<div style="text-align: center; margin-left: 15em; margin-right: 15em; margin-top: 5em;">
+  <h1>Willkommen bei Tabu im Online-Multiplayer-Modus</h1>
+  <h2>Ideal im Lockdown!</h2>
+  <br>
+  <br>
+  <br>
+  <mat-card>
+    <mat-card-title>Spielsuche</mat-card-title>
+    <mat-card-subtitle>Finde oder erstelle ein Spiel über den Spielnamen</mat-card-subtitle>
+    <mat-card-content>
+      <form>
+        <mat-form-field>
+          <mat-label>Spielname</mat-label>
+          <input type="text" matInput>
+        </mat-form-field>
+      </form>
+    </mat-card-content>
+    <mat-card-actions>
+      <button mat-raised-button color="primary">Spiel erstellen</button>
+      <button mat-raised-button color="primary">Spiel beitreten</button>
+    </mat-card-actions>
+  </mat-card>
+</div>

src/app/select-game/select-game.component.scss

+.example-form {
+  min-width: 150px;
+  max-width: 500px;
+  width: 100%;
+}
+
+.example-full-width {
+  width: 100%;
+}