Add Animation

angular.json

@@ -31,10 +31,13 @@
               "src/assets"
             ],
             "styles": [
+              "node_modules/aos/dist/aos.css",
               "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
               "src/styles.scss"
             ],
-            "scripts": []
+            "scripts": [
+              "node_modules/aos/dist/aos.js"
+            ]
           },
           "configurations": {
             "production": {
@@ -95,10 +98,13 @@
               "src/assets"
             ],
             "styles": [
+              "node_modules/aos/dist/aos.css",
               "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
               "src/styles.scss"
             ],
-            "scripts": []
+            "scripts": [
+              "node_modules/aos/dist/aos.js"
+            ]
           }
         },
         "lint": {

package-lock.json

@@ -1585,6 +1585,11 @@
         "semver-intersect": "1.4.0"
       }
     },
+    "@types/aos": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/aos/-/aos-3.0.3.tgz",
+      "integrity": "sha512-H9YIQ8vcCv1F68vdxrZzKsyI5I82FfqJ/D+RTwehau/+FmfpPALtWTBM8OqbnLied4I6yd0f6bbIj3/EtEAHaA=="
+    },
     "@types/component-emitter": {
       "version": "1.2.10",
       "resolved": "https://registry.npmjs.org/@types/component-emitter/-/component-emitter-1.2.10.tgz",
@@ -2027,6 +2032,16 @@
         "picomatch": "^2.0.4"
       }
     },
+    "aos": {
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/aos/-/aos-2.3.4.tgz",
+      "integrity": "sha512-zh/ahtR2yME4I51z8IttIt4lC1Nw0ktsFtmeDzID1m9naJnWXhCoARaCgNOGXb5CLy3zm+wqmRAEgMYB5E2HUw==",
+      "requires": {
+        "classlist-polyfill": "^1.0.3",
+        "lodash.debounce": "^4.0.6",
+        "lodash.throttle": "^4.0.1"
+      }
+    },
     "app-root-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/app-root-path/-/app-root-path-3.0.0.tgz",
@@ -2951,6 +2966,11 @@
         }
       }
     },
+    "classlist-polyfill": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz",
+      "integrity": "sha1-k1vC39lFiodrJ5YXUUY4vKqWSi4="
+    },
     "clean-stack": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
@@ -7213,12 +7233,22 @@
       "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==",
       "dev": true
     },
+    "lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
+    },
     "lodash.memoize": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
       "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=",
       "dev": true
     },
+    "lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ="
+    },
     "lodash.uniq": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",

package.json

@@ -23,11 +23,13 @@
     "@angular/platform-browser": "~11.0.5",
     "@angular/platform-browser-dynamic": "~11.0.5",
     "@angular/router": "~11.0.5",
+    "@types/aos": "^3.0.3",
+    "aos": "^2.3.4",
     "rxjs": "~6.6.0",
     "socket.io": "^3.0.4",
+    "socket.io-client": "latest",
     "tslib": "^2.0.0",
-    "zone.js": "~0.10.2",
-    "socket.io-client": "latest"
+    "zone.js": "~0.10.2"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.1100.5",

src/app/app.component.ts

 import {Component, HostListener, OnInit} from '@angular/core';
 import {ViewModus} from './dao/viewModus';
+import * as AOS from 'aos';
 
 @Component({
   selector: 'app-root',
@@ -11,6 +12,7 @@ export class AppComponent implements OnInit {
   view = 'desktopView';
 
   ngOnInit(): void {
+    AOS.init();
     const width = window.innerWidth;
     this.setView(width);
   }

src/app/app.module.ts

@@ -63,7 +63,7 @@ import {ViewModus} from './dao/viewModus';
     MatIconModule,
     MatTooltipModule,
     MatTableModule,
-    MatTreeModule
+    MatTreeModule,
   ],
   providers: [
     IsAllowedToPlay,

src/app/error/error.component.html

-<mat-card class="transparent">
-  <h3>
-    Leider konnte die Seite nicht erreicht werden, bitte überprüfen Sie den Link oder kehren Sie auf die <a (click)="toStartpage()">Startseite</a>  zurück
-  </h3>
-</mat-card>
+<div data-aos="zoom-out" data-aos-duration="500">
+  <mat-card class="transparent">
+    <mat-card-title>Ups... Error 404</mat-card-title>
+    <mat-card-subtitle>Leider konnte die Seite nicht erreicht werden. Bitte überprüfen Sie den Link oder kehren Sie auf die Startseite zurück.</mat-card-subtitle>
+    <mat-card-content>
+      <button mat-raised-button color="primary" (click)="goToStartpage()">Zur Startseite</button>
+    </mat-card-content>
+  </mat-card>
+</div>
 <br>
 <mat-progress-spinner color="primary" mode="determinate" value="value">
 </mat-progress-spinner>

src/app/error/error.component.ts

@@ -13,7 +13,7 @@ export class ErrorComponent implements OnInit {
   ngOnInit(): void {
   }
 
-  toStartpage(): void {
+  goToStartpage(): void {
     this.router.navigate(['']);
   }
 }

src/app/game/game.component.html

-<div *ngIf="view !== 'desktopView'" style="margin-top: -4.25em;">
-  <mat-progress-spinner style="border-radius: 50%;" class = "center white transparent" color="primary" mode="determinate" value={{timeLeft}} aria-label="Rating">
-  </mat-progress-spinner>
-  <mat-card-content class = "timer">{{timeRemaining}}</mat-card-content>
-  <br>
-</div>
-<div *ngIf="view === 'desktopView'" class="TimerLeft" style="margin-top: -4.25em; margin-right: -11.5em; margin-left: auto">
-  <mat-progress-spinner style="border-radius: 50%;" class = "white transparent" color="primary" mode="determinate" value={{timeLeft}} aria-label="Rating">
-  </mat-progress-spinner>
-  <mat-card-content class = "timer">{{timeRemaining}}</mat-card-content>
+<div data-aos="zoom-out" data-aos-duration="250">
+  <div *ngIf="view !== 'desktopView'" style="margin-top: -4.25em;">
+    <mat-progress-spinner style="border-radius: 50%;" class = "center white transparent" color="primary" mode="determinate" value={{timeLeft}} aria-label="Rating">
+    </mat-progress-spinner>
+    <mat-card-content class = "timer">{{timeRemaining}}</mat-card-content>
+    <br>
+  </div>
+  <div *ngIf="view === 'desktopView'" class="TimerLeft" style="margin-top: -4.25em; margin-right: -11.5em; margin-left: auto">
+    <mat-progress-spinner style="border-radius: 50%;" class = "white transparent" color="primary" mode="determinate" value={{timeLeft}} aria-label="Rating">
+    </mat-progress-spinner>
+    <mat-card-content class = "timer">{{timeRemaining}}</mat-card-content>
+  </div>
 </div>
-<div style="text-align: center; margin-top: -3em;">
-  <mat-card>
-    <mat-card-title>
-      {{cardInfo.solution}}
-    </mat-card-title>
-  </mat-card>
+<div data-aos="zoom-out" data-aos-duration="250">
+  <div style="text-align: center; margin-top: -3em;">
+    <mat-card>
+      <mat-card-title>
+        {{cardInfo.solution}}
+      </mat-card-title>
+    </mat-card>
 
-  <br>
-  <mat-card>
-    <h2>
-      {{cardInfo.tabu1}}
-    </h2>
-  </mat-card>
-  <mat-card>
-    <h2>
-      {{cardInfo.tabu2}}
-    </h2>
-  </mat-card>
-  <mat-card>
-    <h2>
-      {{cardInfo.tabu3}}
-    </h2>
-  </mat-card>
-  <mat-card>
-    <h2>
-      {{cardInfo.tabu4}}
-    </h2>
-  </mat-card>
-  <mat-card>
-    <h2>
-      {{cardInfo.tabu5}}
-    </h2>
-  </mat-card>
-  <br>
-  <div class="marginButtons">
-    <button class="marginButtonRight" *ngIf="isExplainer" mat-raised-button color="primary" (click)="rightAnswer()">Richtig &#10004;</button>
-    <button class="marginButtonLeft marginButtonRight" *ngIf="isExplainer" mat-raised-button color="accent" (click)="skipCard()">Überspringen &#187;</button>
-    <a *ngIf="!isExplainer" class="marginButtonRight"></a>
-    <button class="marginButtonLeft" mat-raised-button color="warn" [disabled]="PressTaboohDisabled" (click)="wrongAnswer()">Tabooh &#10008;</button>
+    <br>
+    <mat-card>
+      <h2>
+        {{cardInfo.tabu1}}
+      </h2>
+    </mat-card>
+    <mat-card>
+      <h2>
+        {{cardInfo.tabu2}}
+      </h2>
+    </mat-card>
+    <mat-card>
+      <h2>
+        {{cardInfo.tabu3}}
+      </h2>
+    </mat-card>
+    <mat-card>
+      <h2>
+        {{cardInfo.tabu4}}
+      </h2>
+    </mat-card>
+    <mat-card>
+      <h2>
+        {{cardInfo.tabu5}}
+      </h2>
+    </mat-card>
+    <br>
+    <div class="marginButtons" data-aos="zoom-out" data-aos-duration="1000">
+      <button class="marginButtonRight" *ngIf="isExplainer" mat-raised-button color="primary" (click)="rightAnswer()">Richtig &#10004;</button>
+      <button class="marginButtonLeft marginButtonRight" *ngIf="isExplainer" mat-raised-button color="accent" (click)="skipCard()">Überspringen &#187;</button>
+      <a *ngIf="!isExplainer" class="marginButtonRight"></a>
+      <button class="marginButtonLeft" mat-raised-button color="warn" [disabled]="PressTaboohDisabled" (click)="wrongAnswer()">Tabooh &#10008;</button>
+    </div>
+    <br>
+    <br>
+    <mat-card class="transparent">
+      <mat-card-title>Spielstand</mat-card-title>
+      <mat-card-content>
+        <table>
+          <tr>
+            <th>Team rot</th>
+            <th>Team blau</th>
+          </tr>
+          <tr>
+            <th class = "red">{{gameStatus.red}}</th>
+            <th class = "blue">{{gameStatus.blue}}</th>
+          </tr>
+        </table>
+      </mat-card-content>
+    </mat-card>
   </div>
-  <br>
-  <br>
-  <mat-card class="transparent">
-    <mat-card-title>Spielstand</mat-card-title>
-    <mat-card-content>
-      <table>
-        <tr>
-          <th>Team rot</th>
-          <th>Team blau</th>
-        </tr>
-        <tr>
-          <th class = "red">{{gameStatus.red}}</th>
-          <th class = "blue">{{gameStatus.blue}}</th>
-        </tr>
-      </table>
-    </mat-card-content>
-  </mat-card>
 </div>
 <br>
 <br>

src/app/guesser/guesser.component.html

-<mat-card class="transparent">
-  <mat-card-title> Du musst raten!
+<div data-aos="zoom-out" data-aos-duration="250">
+  <mat-card class="transparent">
+    <mat-card-title> Du musst raten!
+      <br>
+      <br>
+      <br>
+      Spielstand</mat-card-title>
+    <mat-card-content>
+      <br>
+      <table>
+        <tr>
+          <th>Team rot</th>
+          <th>Team blau</th>
+        </tr>
+        <tr>
+          <th class = "red">{{gameStatus.red}}</th>
+          <th class = "blue">{{gameStatus.blue}}</th>
+        </tr>
+      </table>
+    </mat-card-content>
     <br>
-    <br>
-    <br>
-    Spielstand</mat-card-title>
-  <mat-card-content>
-    <br>
-    <table>
-      <tr>
-        <th>Team rot</th>
-        <th>Team blau</th>
-      </tr>
-      <tr>
-        <th class = "red">{{gameStatus.red}}</th>
-        <th class = "blue">{{gameStatus.blue}}</th>
-      </tr>
-    </table>
-  </mat-card-content>
-  <br>
-  <mat-progress-spinner style="border-radius: 50%;" class = "center" color="primary" mode="determinate" value={{timeLeft}} aria-label="Rating">
+    <mat-progress-spinner style="border-radius: 50%;" class = "center" color="primary" mode="determinate" value={{timeLeft}} aria-label="Rating">
 
-  </mat-progress-spinner>
-  <mat-card-content class = "timer">{{timeRemaining}}</mat-card-content>
-</mat-card>
+    </mat-progress-spinner>
+    <mat-card-content class = "timer">{{timeRemaining}}</mat-card-content>
+  </mat-card>
+</div>
 <br>
 <br>
 <br>

src/app/impressum/impressum.component.html

-<mat-card class="transparent">
-  <mat-card-title>
-    Impressum
-  </mat-card-title>
-  <mat-card-subtitle>
-    Angaben gemäß § 5 TMG
-  </mat-card-subtitle>
-  <mat-card-content>
-    <p>
-      Dennis Willers<br>
-      Waldstraße 1<br>
-      53842 Troisdorf<br>
-    </p>
+<div data-aos="zoom-in" data-aos-duration="250">
+  <mat-card class="transparent">
+    <mat-card-title>
+      Impressum
+    </mat-card-title>
+    <mat-card-subtitle>
+      Angaben gemäß § 5 TMG
+    </mat-card-subtitle>
+    <mat-card-content>
+      <p>
+        Dennis Willers<br>
+        Waldstraße 1<br>
+        53842 Troisdorf<br>
+      </p>
 
-    <p>
-      <b>Vertreten durch:<br></b>
-      Dennis Willers<br>
-      Isabell Heider<br>
-    </p>
+      <p>
+        <b>Vertreten durch:<br></b>
+        Dennis Willers<br>
+        Isabell Heider<br>
+      </p>
 
-    <p><b>Kontakt:</b><br>
-      Telefon: 02241-3963477<br>
-      E-Mail: dennis@willers.digital<br>
-    </p>
-  </mat-card-content>
-</mat-card>
+      <p><b>Kontakt:</b><br>
+        Telefon: 02241-3963477<br>
+        E-Mail: dennis@willers.digital<br>
+      </p>
+    </mat-card-content>
+  </mat-card>
+</div>
 <br>
 <br>
 <br>
-<mat-card class="transparent">
-  <mat-card-title>
-    <h2>Haftungsausschluss:</h2>
-  </mat-card-title>
-  <mat-card-subtitle>
-    Haftung für Inhalte
-  </mat-card-subtitle>
-  <mat-card-content>
-    Die Inhalte unserer Seiten wurden mit größter Sorgfalt erstellt. Für die Richtigkeit, Vollständigkeit und Aktualität der Inhalte können wir jedoch keine Gewähr übernehmen. Als Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG sind wir als Diensteanbieter jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen oder nach Umständen zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen. Verpflichtungen zur Entfernung oder Sperrung der Nutzung von Informationen nach den allgemeinen Gesetzen bleiben hiervon unberührt. Eine diesbezügliche Haftung ist jedoch erst ab dem Zeitpunkt der Kenntnis einer konkreten Rechtsverletzung möglich. Bei Bekanntwerden von entsprechenden Rechtsverletzungen werden wir diese Inhalte umgehend entfernen.
-  </mat-card-content>
-  <mat-card-subtitle>
-    Urheberrecht
-  </mat-card-subtitle>
-  <mat-card-content>
-    Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen dem deutschen Urheberrecht. Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen der schriftlichen Zustimmung des jeweiligen Autors bzw. Erstellers. Downloads und Kopien dieser Seite sind nur für den privaten, nicht kommerziellen Gebrauch gestattet. Soweit die Inhalte auf dieser Seite nicht vom Betreiber erstellt wurden, werden die Urheberrechte Dritter beachtet. Insbesondere werden Inhalte Dritter als solche gekennzeichnet. Sollten Sie trotzdem auf eine Urheberrechtsverletzung aufmerksam werden, bitten wir um einen entsprechenden Hinweis. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Inhalte umgehend entfernen.
-  </mat-card-content>
-  <mat-card-subtitle>
-    Datenschutz
-  </mat-card-subtitle>
-  <mat-card-content>
-    <p>Die Nutzung unserer Webseite ist in der Regel ohne Angabe personenbezogener Daten möglich. Soweit auf unseren Seiten personenbezogene Daten (beispielsweise Name, Anschrift oder eMail-Adressen) erhoben werden, erfolgt dies, soweit möglich, stets auf freiwilliger Basis. Diese Daten werden ohne Ihre ausdrückliche Zustimmung nicht an Dritte weitergegeben.<br>
-    Wir weisen darauf hin, dass die Datenübertragung im Internet (z.B. bei der Kommunikation per E-Mail) Sicherheitslücken aufweisen kann. Ein lückenloser Schutz der Daten vor dem Zugriff durch Dritte ist nicht möglich.<br>
-      Der Nutzung von im Rahmen der Impressumspflicht veröffentlichten Kontaktdaten durch Dritte zur Übersendung von nicht ausdrücklich angeforderter Werbung und Informationsmaterialien wird hiermit ausdrücklich widersprochen. Die Betreiber der Seiten behalten sich ausdrücklich rechtliche Schritte im Falle der unverlangten Zusendung von Werbeinformationen, etwa durch Spam-Mails, vor.</p>
+<div data-aos="zoom-out-left" data-aos-duration="500">
+  <mat-card class="transparent">
+    <mat-card-title>
+      <h2>Haftungsausschluss:</h2>
+    </mat-card-title>
+    <mat-card-subtitle>
+      Haftung für Inhalte
+    </mat-card-subtitle>
+    <mat-card-content>
+      Die Inhalte unserer Seiten wurden mit größter Sorgfalt erstellt. Für die Richtigkeit, Vollständigkeit und Aktualität der Inhalte können wir jedoch keine Gewähr übernehmen. Als Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG sind wir als Diensteanbieter jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen oder nach Umständen zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen. Verpflichtungen zur Entfernung oder Sperrung der Nutzung von Informationen nach den allgemeinen Gesetzen bleiben hiervon unberührt. Eine diesbezügliche Haftung ist jedoch erst ab dem Zeitpunkt der Kenntnis einer konkreten Rechtsverletzung möglich. Bei Bekanntwerden von entsprechenden Rechtsverletzungen werden wir diese Inhalte umgehend entfernen.
+    </mat-card-content>
+    <mat-card-subtitle>
+      Urheberrecht
+    </mat-card-subtitle>
+    <mat-card-content>
+      Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen dem deutschen Urheberrecht. Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen der schriftlichen Zustimmung des jeweiligen Autors bzw. Erstellers. Downloads und Kopien dieser Seite sind nur für den privaten, nicht kommerziellen Gebrauch gestattet. Soweit die Inhalte auf dieser Seite nicht vom Betreiber erstellt wurden, werden die Urheberrechte Dritter beachtet. Insbesondere werden Inhalte Dritter als solche gekennzeichnet. Sollten Sie trotzdem auf eine Urheberrechtsverletzung aufmerksam werden, bitten wir um einen entsprechenden Hinweis. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Inhalte umgehend entfernen.
+    </mat-card-content>
+    <mat-card-subtitle>
+      Datenschutz
+    </mat-card-subtitle>
+    <mat-card-content>
+      <p>Die Nutzung unserer Webseite ist in der Regel ohne Angabe personenbezogener Daten möglich. Soweit auf unseren Seiten personenbezogene Daten (beispielsweise Name, Anschrift oder eMail-Adressen) erhoben werden, erfolgt dies, soweit möglich, stets auf freiwilliger Basis. Diese Daten werden ohne Ihre ausdrückliche Zustimmung nicht an Dritte weitergegeben.<br>
+        Wir weisen darauf hin, dass die Datenübertragung im Internet (z.B. bei der Kommunikation per E-Mail) Sicherheitslücken aufweisen kann. Ein lückenloser Schutz der Daten vor dem Zugriff durch Dritte ist nicht möglich.<br>
+        Der Nutzung von im Rahmen der Impressumspflicht veröffentlichten Kontaktdaten durch Dritte zur Übersendung von nicht ausdrücklich angeforderter Werbung und Informationsmaterialien wird hiermit ausdrücklich widersprochen. Die Betreiber der Seiten behalten sich ausdrücklich rechtliche Schritte im Falle der unverlangten Zusendung von Werbeinformationen, etwa durch Spam-Mails, vor.</p>
 
-    Impressum vom <a href="https://www.impressum-generator.de">Impressum Generator</a> der <a href="https://www.kanzlei-hasselbach.de/standorte/bonn/">Kanzlei Hasselbach, Bonn</a>
-  </mat-card-content>
-</mat-card>
+      Impressum vom <a href="https://www.impressum-generator.de">Impressum Generator</a> der <a href="https://www.kanzlei-hasselbach.de/standorte/bonn/">Kanzlei Hasselbach, Bonn</a>
+    </mat-card-content>
+  </mat-card>
+</div>
 <br>
 <br>
 <br>
-<mat-card class="transparent">
-  <mat-card-subtitle>Tabooh-Version: 2.0</mat-card-subtitle>
-  <mat-card-subtitle>Zuletzt geändert am: 15.02.2021</mat-card-subtitle>
-  <mat-card-content>
-    <button mat-raised-button color="primary" (click)="goToStartpage()">Zur Startseite</button>
-  </mat-card-content>
-</mat-card>
+<div data-aos="zoom-out-right" data-aos-duration="250">
+  <mat-card class="transparent">
+    <mat-card-subtitle>Tabooh-Version: 2.0</mat-card-subtitle>
+    <mat-card-subtitle>Zuletzt geändert am: 15.02.2021</mat-card-subtitle>
+    <mat-card-content>
+      <button mat-raised-button color="primary" (click)="goToStartpage()">Zur Startseite</button>
+    </mat-card-content>
+  </mat-card>
+</div>
 <br>
 <br>
 <br>

src/app/overview/overview.component.html

-<mat-card *ngIf="scrolled === 1" class="fixed-content transparent" [ngStyle]="{'width.px': matCard.offsetWidth}">
-  <mat-card-title>Spielstand</mat-card-title>
-  <mat-card-content>
-    <br>
-    <table>
-      <tr>
-        <th>Team rot</th>
-        <th>Team blau</th>
-      </tr>
-      <tr>
-        <th class = "redfont">{{gameStatus.red}}</th>
-        <th class = "bluefont">{{gameStatus.blue}}</th>
-      </tr>
-    </table>
-  </mat-card-content>
-</mat-card>
+<div data-aos="zoom-out" data-aos-duration="750">
+  <mat-card *ngIf="scrolled === 1" class="fixed-content transparent" [ngStyle]="{'width.px': matCard.offsetWidth}">
+    <mat-card-title>Spielstand</mat-card-title>
+    <mat-card-content>
+      <br>
+      <table>
+        <tr>
+          <th>Team rot</th>
+          <th>Team blau</th>
+        </tr>
+        <tr>
+          <th class = "redfont">{{gameStatus.red}}</th>
+          <th class = "bluefont">{{gameStatus.blue}}</th>
+        </tr>
+      </table>
+    </mat-card-content>
+  </mat-card>
 
-<mat-card class="transparent">
-  <div class="FloatLeftAndCenterElement">
-    <div *ngIf="view === 'mobileView'" class="textMobileView">
-      <button matTooltip="Neues Spiel starten" [disabled]="buttonNewGameDisabled || gameStatus.activeExplainer == 1" mat-raised-button color="primary" (click)="startGame()">
-        <mat-icon color = "white" aria-hidden="false">autorenew</mat-icon>
-      </button>
+  <mat-card class="transparent">
+    <div class="FloatLeftAndCenterElement">
+      <div *ngIf="view === 'mobileView'" class="textMobileView">
+        <button matTooltip="Neues Spiel starten" [disabled]="buttonNewGameDisabled || gameStatus.activeExplainer == 1" mat-raised-button color="primary" (click)="startGame()">
+          <mat-icon color = "white" aria-hidden="false">autorenew</mat-icon>
+        </button>
+      </div>
+      <br *ngIf="view === 'mobileView'">
+      <br *ngIf="view === 'mobileView'">
+      <div *ngIf="view !== 'mobileView'" class="newStartButtonLeft">
+        <button matTooltip="Neues Spiel starten" [disabled]="buttonNewGameDisabled || gameStatus.activeExplainer == 1" mat-raised-button color="primary" (click)="startGame()">
+          <mat-icon color = "white" aria-hidden="false">autorenew</mat-icon>
+        </button>
+      </div>
+      <div class="CenterText">
+        <h2 *ngIf="view === 'mobileView'" class="textMobileView">{{membership}}</h2>
+        <h2 *ngIf="view !== 'mobileView'">{{membership}}</h2>
+      </div>
     </div>
-    <br *ngIf="view === 'mobileView'">
-    <br *ngIf="view === 'mobileView'">
-    <div *ngIf="view !== 'mobileView'" class="newStartButtonLeft">
-      <button matTooltip="Neues Spiel starten" [disabled]="buttonNewGameDisabled || gameStatus.activeExplainer == 1" mat-raised-button color="primary" (click)="startGame()">
-        <mat-icon color = "white" aria-hidden="false">autorenew</mat-icon>
-      </button>
-    </div>
-    <div class="CenterText">
-      <h2 *ngIf="view === 'mobileView'" class="textMobileView">{{membership}}</h2>
-      <h2 *ngIf="view !== 'mobileView'">{{membership}}</h2>
-    </div>
-  </div>
-  <button mat-raised-button class = "{{red}}" (click)="joinTeam('red')">
-    <mat-icon color = "warn" aria-hidden="false" aria-label="home icon red">home</mat-icon>
-  </button>
-  <button mat-raised-button class = "{{blue}}" (click)="joinTeam('blue')">
-    <mat-icon style="color: darkblue" aria-hidden="false" aria-label="home icon blue">home</mat-icon>
-  </button>
-</mat-card>
-<br>
-<br>
-<br>
-<mat-card class="transparent">
-  <mat-card-title #matCard >Spielstand</mat-card-title>
-  <mat-card-content>
-    <br>
-    <table>
-      <tr>
-        <th>Team rot</th>
-        <th>Team blau</th>
-      </tr>
-      <tr>
-        <th class = "redfont">{{gameStatus.red}}</th>
-        <th class = "bluefont">{{gameStatus.blue}}</th>
-      </tr>
-    </table>
-  </mat-card-content>
-  <mat-card-actions>
-    <br>
-    <br>
-    <div *ngIf="isActiveRound" class="spinner-wrapper">
-      <mat-card-title class="rightPlace">Warten auf nächste Runde</mat-card-title>
-      <mat-spinner diameter="30"></mat-spinner>
-    </div>
-    <mat-card-title *ngIf="!isActiveRound">{{nextTeam}} ist am Zug:</mat-card-title>
-    <br>
-    <button [disabled]="buttonNextRoundDisabled || gameStatus.activeExplainer == 1" mat-raised-button color="primary" (click)="nextRound()">Ich erkläre und los!</button>
-  </mat-card-actions>
-</mat-card>
+    <button mat-raised-button class = "{{red}}" (click)="joinTeam('red')">
+      <mat-icon color = "warn" aria-hidden="false" aria-label="home icon red">home</mat-icon>
+    </button>
+    <button mat-raised-button class = "{{blue}}" (click)="joinTeam('blue')">
+      <mat-icon style="color: darkblue" aria-hidden="false" aria-label="home icon blue">home</mat-icon>
+    </button>
+  </mat-card>
+  <br>
+  <br>
+  <br>
+  <mat-card class="transparent">
+    <mat-card-title #matCard >Spielstand</mat-card-title>
+    <mat-card-content>
+      <br>
+      <table>
+        <tr>
+          <th>Team rot</th>
+          <th>Team blau</th>
+        </tr>
+        <tr>
+          <th class = "redfont">{{gameStatus.red}}</th>
+          <th class = "bluefont">{{gameStatus.blue}}</th>
+        </tr>
+      </table>
+    </mat-card-content>
+    <mat-card-actions>
+      <br>
+      <br>
+      <div *ngIf="isActiveRound" class="spinner-wrapper">
+        <mat-card-title class="rightPlace">Warten auf nächste Runde</mat-card-title>
+        <mat-spinner diameter="30"></mat-spinner>
+      </div>
+      <mat-card-title *ngIf="!isActiveRound">{{nextTeam}} ist am Zug:</mat-card-title>
+      <br>
+      <button [disabled]="buttonNextRoundDisabled || gameStatus.activeExplainer == 1" mat-raised-button color="primary" (click)="nextRound()">Ich erkläre und los!</button>
+    </mat-card-actions>
+  </mat-card>
+</div>
 <br>
 <br>
 <br>
-<mat-card class="transparent" *ngIf="history.length > 0">
-  <mat-card-title>Spielverlauf</mat-card-title>
-  <mat-card-subtitle>Stimmt das Ergebnis nicht?<br>Dann überprüfe den Spielverlauf und passe die Antworten gegebenenfalls an</mat-card-subtitle>
-</mat-card>
+<div *ngIf="history.length > 0" data-aos="zoom-out" data-aos-duration="750">
+  <mat-card class="transparent" *ngIf="history.length > 0">
+    <mat-card-title>Spielverlauf</mat-card-title>
+    <mat-card-subtitle>Stimmt das Ergebnis nicht?<br>Dann überprüfe den Spielverlauf und passe die Antworten gegebenenfalls an</mat-card-subtitle>
+  </mat-card>
+</div>
 <a *ngFor="let r of getArrayRounds(); let i = index;">
   <br>
   <app-round-history

src/app/overview/overview.component.ts

-import {Component, HostListener, Input, OnChanges, OnDestroy, OnInit, SimpleChanges} from '@angular/core';
+import {Component, HostListener, OnDestroy, OnInit} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
 import {TabuMiddlewareService} from '../dao/TabuMiddlewareService';
 import {GameStatus} from '../interface/gameStatus';
@@ -7,6 +7,7 @@ import {SocketDataService} from '../dao/socketDataService';
 import {Subject} from 'rxjs';
 import {takeUntil} from 'rxjs/operators';
 import {ViewModus} from '../dao/viewModus';
+import {Location} from '@angular/common';
 
 @Component({
   selector: 'app-overview',
@@ -48,6 +49,7 @@ export class OverviewComponent implements OnInit, OnDestroy {
   scrollLimit = 290;
 
   constructor(private router: Router,
+              private location: Location,
               private activatedRoute: ActivatedRoute,
               private service: TabuMiddlewareService,
               private isAllowedToPlay: IsAllowedToPlay,
@@ -71,25 +73,7 @@ export class OverviewComponent implements OnInit, OnDestroy {
         if (!JSON.parse(value.status)) {
           this.router.navigate(['error']);
         } else {
-          if (this.team === 'red'){
-            this.membership = 'Du gehörst zu Team rot!';
-            this.buttonNewGameDisabled = false;
-            this.red = 'red';
-            this.blue = 'choose';
-          }
-          else if (this.team === 'blue'){
-            this.membership = 'Du gehörst zu Team blau!';
-            this.buttonNewGameDisabled = false;
-            this.blue = 'blue';
-            this.red = 'choose';
-          }
-          else if (this.team === 'null'){
-            this.membership = 'Wähle dein Team';
-          }
-          else {
-            this.router.navigate(['error']);
-            return;
-          }
+          this.selectTeam();
           this.getGameStatus();
         }
       });
@@ -142,6 +126,39 @@ export class OverviewComponent implements OnInit, OnDestroy {
       });
   }
 
+  selectTeam(): void {
+    if (this.team === 'red'){
+      this.membership = 'Du gehörst zu Team rot!';
+      this.buttonNewGameDisabled = false;
+      this.red = 'red';
+      this.blue = 'choose';
+    }
+    else if (this.team === 'blue'){
+      this.membership = 'Du gehörst zu Team blau!';
+      this.buttonNewGameDisabled = false;
+      this.blue = 'blue';
+      this.red = 'choose';
+    }
+    else if (this.team === 'null'){
+      this.membership = 'Wähle dein Team';
+    }
+    else {
+      this.router.navigate(['error']);
+      return;
+    }
+  }
+
+  canStartGame(): void {
+    if (this.gameStatus.redTurn){
+      this.nextTeam = 'Rot';
+      this.buttonNextRoundDisabled = this.team !== 'red';
+    }
+    else{
+      this.nextTeam = 'Blau';
+      this.buttonNextRoundDisabled = this.team !== 'blue';
+    }
+  }
+
   startGame(): void {
     if (this.team === 'red' || this.team === 'blue') {
       this.service.newGame({spielname: this.sessionName}).then(value => {
@@ -168,7 +185,9 @@ export class OverviewComponent implements OnInit, OnDestroy {
   joinTeam(team: string): void {
     this.team = team;
     this.unsubscribeAll();
-    this.router.navigate([this.sessionName + '/' + team]);
+    this.location.replaceState(this.sessionName + '/' + team);
+    this.selectTeam();
+    this.canStartGame();
   }
 
   getGameStatus(): void {
@@ -188,15 +207,8 @@ export class OverviewComponent implements OnInit, OnDestroy {
       this.gameStatus.redTurn = JSON.parse(value.redTurn);
       this.gameStatus.activeExplainer = JSON.parse(value.activeExplainer);
       this.gameStatus.activeCard = JSON.parse(value.activeCard);
-      if (this.gameStatus.redTurn){
-        this.nextTeam = 'Rot';
-        this.buttonNextRoundDisabled = this.team !== 'red';
-      }
-      else{
-        this.nextTeam = 'Blau';
-        this.buttonNextRoundDisabled = this.team !== 'blue';
-      }
       this.isActiveRound = this.gameStatus.activeExplainer === 1;
+      this.canStartGame();
     }
   }
 

src/app/round-history/round-history.component.html

-<mat-card *ngIf="roundHistory.length > 0" class="transparent {{redTurn}}">
-  <mat-card-title>Runde {{round}}</mat-card-title>
-</mat-card>
-<div class="example-container mat-elevation-z8">
-  <mat-table #table [dataSource]="dataSource">
+<div *ngIf="roundHistory.length > 0" data-aos="fade-up" data-aos-duration="750">
+  <mat-card *ngIf="roundHistory.length > 0" class="transparent {{redTurn}}">
+    <mat-card-title>Runde {{round}}</mat-card-title>
+  </mat-card>
+  <div class="example-container mat-elevation-z8">
+    <mat-table #table [dataSource]="dataSource">
 
-    <!-- Answer Column -->
-    <ng-container matColumnDef="answer">
-      <mat-cell *matCellDef="let element">
-        <button class="volleBreite" *ngIf="element.answer === answer.zeitLaueft" mat-raised-button>Zeit läuft &#9201;</button>
-        <button class="volleBreite" *ngIf="element.answer === answer.zeitAbgelaufen" mat-raised-button>Zeit abgelaufen &#9201;</button>
-        <button class="volleBreite" *ngIf="element.answer === answer.richtig" mat-raised-button color="primary">Richtig &#10004;</button>
-        <button class="volleBreite" *ngIf="element.answer === answer.uebersprungen" mat-raised-button color="accent">Überspringen &#187;</button>
-        <button class="volleBreite" *ngIf="element.answer === answer.tabooh" mat-raised-button color="warn">Tabooh &#10008;</button>
-        <button class="volleBreite" *ngIf="element.answer === answer.KeineEingabe" mat-raised-button>Keine Eingabe &#10008;</button>
-      </mat-cell>
-    </ng-container>
+      <!-- Answer Column -->
+      <ng-container matColumnDef="answer">
+        <mat-cell *matCellDef="let element">
+          <button class="volleBreite" *ngIf="element.answer === answer.zeitLaueft" mat-raised-button>Zeit läuft &#9201;</button>
+          <button class="volleBreite" *ngIf="element.answer === answer.zeitAbgelaufen" mat-raised-button>Zeit abgelaufen &#9201;</button>
+          <button class="volleBreite" *ngIf="element.answer === answer.richtig" mat-raised-button color="primary">Richtig &#10004;</button>
+          <button class="volleBreite" *ngIf="element.answer === answer.uebersprungen" mat-raised-button color="accent">Überspringen &#187;</button>
+          <button class="volleBreite" *ngIf="element.answer === answer.tabooh" mat-raised-button color="warn">Tabooh &#10008;</button>
+          <button class="volleBreite" *ngIf="element.answer === answer.KeineEingabe" mat-raised-button>Keine Eingabe &#10008;</button>
+        </mat-cell>
+      </ng-container>
 
-    <!-- Solution Column -->
-    <ng-container *ngIf="view === 'mobileView'" matColumnDef="solution">
-      <mat-cell *matCellDef="let element" class="marginButtons"> <b *ngIf="element.answer !== answer.zeitLaueft">{{element.solution}}</b></mat-cell>
-    </ng-container>
-    <ng-container *ngIf="view !== 'mobileView'" matColumnDef="solution">
-      <mat-cell *matCellDef="let element"> <b *ngIf="element.answer !== answer.zeitLaueft">{{element.solution}}</b></mat-cell>
-    </ng-container>
+      <!-- Solution Column -->
+      <ng-container *ngIf="view === 'mobileView'" matColumnDef="solution">
+        <mat-cell *matCellDef="let element" class="marginButtons"> <b *ngIf="element.answer !== answer.zeitLaueft">{{element.solution}}</b></mat-cell>
+      </ng-container>
+      <ng-container *ngIf="view !== 'mobileView'" matColumnDef="solution">
+        <mat-cell *matCellDef="let element"> <b *ngIf="element.answer !== answer.zeitLaueft">{{element.solution}}</b></mat-cell>
+      </ng-container>
 
-    <!-- Tabu1 Column -->
-    <ng-container matColumnDef="tabu1">
-      <mat-cell *matCellDef="let element"> <a *ngIf="element.answer !== answer.zeitLaueft" class="tabuColor">{{element.tabu1}}</a></mat-cell>
-    </ng-container>
+      <!-- Tabu1 Column -->
+      <ng-container matColumnDef="tabu1">
+        <mat-cell *matCellDef="let element"> <a *ngIf="element.answer !== answer.zeitLaueft" class="tabuColor">{{element.tabu1}}</a></mat-cell>
+      </ng-container>
 
-    <!-- Tabu2 Column -->
-    <ng-container matColumnDef="tabu2">
-      <mat-cell *matCellDef="let element"> <a *ngIf="element.answer !== answer.zeitLaueft" class="tabuColor">{{element.tabu2}}</a></mat-cell>
-    </ng-container>
+      <!-- Tabu2 Column -->
+      <ng-container matColumnDef="tabu2">
+        <mat-cell *matCellDef="let element"> <a *ngIf="element.answer !== answer.zeitLaueft" class="tabuColor">{{element.tabu2}}</a></mat-cell>
+      </ng-container>
 
-    <!-- Tabu3 Column -->
-    <ng-container matColumnDef="tabu3">
-      <mat-cell *matCellDef="let element"> <a *ngIf="element.answer !== answer.zeitLaueft" class="tabuColor">{{element.tabu3}}</a></mat-cell>
-    </ng-container>
+      <!-- Tabu3 Column -->
+      <ng-container matColumnDef="tabu3">
+        <mat-cell *matCellDef="let element"> <a *ngIf="element.answer !== answer.zeitLaueft" class="tabuColor">{{element.tabu3}}</a></mat-cell>
+      </ng-container>
 
-    <!-- Tabu4 Column -->
-    <ng-container matColumnDef="tabu4">
-      <mat-cell *matCellDef="let element"> <a *ngIf="element.answer !== answer.zeitLaueft" class="tabuColor">{{element.tabu4}}</a></mat-cell>
-    </ng-container>
+      <!-- Tabu4 Column -->
+      <ng-container matColumnDef="tabu4">
+        <mat-cell *matCellDef="let element"> <a *ngIf="element.answer !== answer.zeitLaueft" class="tabuColor">{{element.tabu4}}</a></mat-cell>
+      </ng-container>
 
-    <!-- Tabu5 Column -->
-    <ng-container matColumnDef="tabu5">
-      <mat-cell *matCellDef="let element"> <a *ngIf="element.answer !== answer.zeitLaueft" class="tabuColor">{{element.tabu5}}</a></mat-cell>
-    </ng-container>
+      <!-- Tabu5 Column -->
+      <ng-container matColumnDef="tabu5">
+        <mat-cell *matCellDef="let element"> <a *ngIf="element.answer !== answer.zeitLaueft" class="tabuColor">{{element.tabu5}}</a></mat-cell>
+      </ng-container>
 
-    <!-- Expanded Content Column - The detail row is made up of this one column -->
-    <ng-container *ngIf="view === 'mobileView'" matColumnDef="expandedDetail">
-      <mat-cell *matCellDef="let detail" class="marginButtons">
-        <div class="noSpaceWaste">
-          <div>
-            <mat-card-subtitle>{{detail.element.tabu1}}</mat-card-subtitle>
-          </div>
-          <div>
-            <mat-card-subtitle>{{detail.element.tabu2}}</mat-card-subtitle>
-          </div>
-          <div>
-            <mat-card-subtitle>{{detail.element.tabu3}}</mat-card-subtitle>
-          </div>
-          <div>
-            <mat-card-subtitle>{{detail.element.tabu4}}</mat-card-subtitle>
-          </div>
-          <div>
-            <mat-card-subtitle>{{detail.element.tabu5}}</mat-card-subtitle>
+      <!-- Expanded Content Column - The detail row is made up of this one column -->
+      <ng-container *ngIf="view === 'mobileView'" matColumnDef="expandedDetail">
+        <mat-cell *matCellDef="let detail" class="marginButtons">
+          <div class="noSpaceWaste">
+            <div>
+              <mat-card-subtitle>{{detail.element.tabu1}}</mat-card-subtitle>
+            </div>
+            <div>
+              <mat-card-subtitle>{{detail.element.tabu2}}</mat-card-subtitle>
+            </div>
+            <div>
+              <mat-card-subtitle>{{detail.element.tabu3}}</mat-card-subtitle>
+            </div>
+            <div>
+              <mat-card-subtitle>{{detail.element.tabu4}}</mat-card-subtitle>
+            </div>
+            <div>
+              <mat-card-subtitle>{{detail.element.tabu5}}</mat-card-subtitle>
+            </div>
+            <div class="marginButtons">
+              <!-- Richtig -->
+              <button
+                mat-stroked-button *ngIf="detail.element.answer !== answer.richtig"
+                color="primary" class="marginButtonRight"
+                (click)="updateAnswer(detail.element, answer.richtig)"
+              >
+                Richtig &#10004;
+              </button>
+              <button
+                mat-raised-button
+                *ngIf="detail.element.answer === answer.richtig"
+                color="primary" class="marginButtonRight"
+              >
+                Richtig &#10004;
+              </button>
+              <!-- Tabooh -->
+              <button
+                mat-stroked-button
+                *ngIf="detail.element.answer !== answer.tabooh"
+                color="warn" class="marginButtonLeft"
+                (click)="updateAnswer(detail.element, answer.tabooh)"
+              >
+                Tabooh &#10008;
+              </button>
+              <button
+                mat-raised-button
+                *ngIf="detail.element.answer === answer.tabooh"
+                color="warn" class="marginButtonLeft"
+              >
+                Tabooh &#10008;
+              </button>
+            </div>
+            <div class="marginButtons marginButtonTopDown">
+              <!-- Zeit abgelaufen -->
+              <button
+                mat-stroked-button
+                *ngIf="detail.element.answer !== answer.zeitAbgelaufen
+            && detail.element.s2cID === lastS2CID"
+                class="marginButtonLeft marginButtonRight"
+                (click)="updateAnswer(detail.element, answer.zeitAbgelaufen)"
+              >
+                Zeit abgelaufen &#9201;
+              </button>
+              <button
+                mat-raised-button
+                *ngIf="detail.element.answer === answer.zeitAbgelaufen
+            && detail.element.s2cID === lastS2CID"
+                class="marginButtonLeft marginButtonRight"
+              >
+                Zeit abgelaufen &#9201;
+              </button>
+              <!-- Uebersprungen -->
+              <button
+                mat-stroked-button
+                *ngIf="detail.element.answer !== answer.uebersprungen
+            && detail.element.s2cID !== lastS2CID"
+                color="accent" class="marginButtonLeft marginButtonRight"
+                (click)="updateAnswer(detail.element, answer.uebersprungen)"
+              >
+                Überspringen &#187;
+              </button>
+              <button
+                mat-raised-button
+                *ngIf="detail.element.answer === answer.uebersprungen
+            && detail.element.s2cID !== lastS2CID"
+                color="accent" class="marginButtonLeft marginButtonRight"
+              >
+                Überspringen &#187;
+              </button>
+            </div>
           </div>
-          <div class="marginButtons">
+        </mat-cell>
+      </ng-container>
+      <ng-container *ngIf="view !== 'mobileView'" matColumnDef="expandedDetail" class="volleBreite">
+          <mat-cell *matCellDef="let detail" class="marginButtons">
             <!-- Richtig -->
             <button
               mat-stroked-button *ngIf="detail.element.answer !== answer.richtig"
@@ -84,24 +160,6 @@
             >
               Richtig &#10004;
             </button>
-            <!-- Tabooh -->
-            <button
-              mat-stroked-button
-              *ngIf="detail.element.answer !== answer.tabooh"
-              color="warn" class="marginButtonLeft"
-              (click)="updateAnswer(detail.element, answer.tabooh)"
-            >
-              Tabooh &#10008;
-            </button>
-            <button
-              mat-raised-button
-              *ngIf="detail.element.answer === answer.tabooh"
-              color="warn" class="marginButtonLeft"
-            >
-              Tabooh &#10008;
-            </button>
-          </div>
-          <div class="marginButtons marginButtonTopDown">
             <!-- Zeit abgelaufen -->
             <button
               mat-stroked-button
@@ -138,91 +196,35 @@
             >
               Überspringen &#187;
             </button>
-          </div>
-        </div>
-      </mat-cell>
-    </ng-container>
-    <ng-container *ngIf="view !== 'mobileView'" matColumnDef="expandedDetail" class="volleBreite">
-        <mat-cell *matCellDef="let detail" class="marginButtons">
-          <!-- Richtig -->
-          <button
-            mat-stroked-button *ngIf="detail.element.answer !== answer.richtig"
-            color="primary" class="marginButtonRight"
-            (click)="updateAnswer(detail.element, answer.richtig)"
-          >
-            Richtig &#10004;
-          </button>
-          <button
-            mat-raised-button
-            *ngIf="detail.element.answer === answer.richtig"
-            color="primary" class="marginButtonRight"
-          >
-            Richtig &#10004;
-          </button>
-          <!-- Zeit abgelaufen -->
-          <button
-            mat-stroked-button
-            *ngIf="detail.element.answer !== answer.zeitAbgelaufen
-        && detail.element.s2cID === lastS2CID"
-            class="marginButtonLeft marginButtonRight"
-            (click)="updateAnswer(detail.element, answer.zeitAbgelaufen)"
-          >
-            Zeit abgelaufen &#9201;
-          </button>
-          <button
-            mat-raised-button
-            *ngIf="detail.element.answer === answer.zeitAbgelaufen
-        && detail.element.s2cID === lastS2CID"
-            class="marginButtonLeft marginButtonRight"
-          >
-            Zeit abgelaufen &#9201;
-          </button>
-          <!-- Uebersprungen -->
-          <button
-            mat-stroked-button
-            *ngIf="detail.element.answer !== answer.uebersprungen
-        && detail.element.s2cID !== lastS2CID"
-            color="accent" class="marginButtonLeft marginButtonRight"
-            (click)="updateAnswer(detail.element, answer.uebersprungen)"
-          >
-            Überspringen &#187;
-          </button>
-          <button
-            mat-raised-button
-            *ngIf="detail.element.answer === answer.uebersprungen
-        && detail.element.s2cID !== lastS2CID"
-            color="accent" class="marginButtonLeft marginButtonRight"
-          >
-            Überspringen &#187;
-          </button>
-          <!-- Tabooh -->
-          <button
-            mat-stroked-button
-            *ngIf="detail.element.answer !== answer.tabooh"
-            color="warn" class="marginButtonLeft"
-            (click)="updateAnswer(detail.element, answer.tabooh)"
-          >
-            Tabooh &#10008;
-          </button>
-          <button
-            mat-raised-button
-            *ngIf="detail.element.answer === answer.tabooh"
-            color="warn" class="marginButtonLeft"
-          >
-            Tabooh &#10008;
-          </button>
-        </mat-cell>
-    </ng-container>
+            <!-- Tabooh -->
+            <button
+              mat-stroked-button
+              *ngIf="detail.element.answer !== answer.tabooh"
+              color="warn" class="marginButtonLeft"
+              (click)="updateAnswer(detail.element, answer.tabooh)"
+            >
+              Tabooh &#10008;
+            </button>
+            <button
+              mat-raised-button
+              *ngIf="detail.element.answer === answer.tabooh"
+              color="warn" class="marginButtonLeft"
+            >
+              Tabooh &#10008;
+            </button>
+          </mat-cell>
+      </ng-container>
 
-    <mat-row *matRowDef="let row; columns: displayedColumns;"
-             matRipple
-             class="{{elementRowStyle}}"
-             [class.expanded]="expandedElement == row"
-             (click)="expandedElement = row">
-    </mat-row>
-    <mat-row *matRowDef="let row; columns: ['expandedDetail']; when: isExpansionDetailRow"
-             [@detailExpand]="canEdit && row.element == expandedElement ? 'expanded' : 'collapsed'"
-             style="overflow: hidden">
-    </mat-row>
-  </mat-table>
+      <mat-row *matRowDef="let row; columns: displayedColumns;"
+               matRipple
+               class="{{elementRowStyle}}"
+               [class.expanded]="expandedElement == row"
+               (click)="expandedElement = row">
+      </mat-row>
+      <mat-row *matRowDef="let row; columns: ['expandedDetail']; when: isExpansionDetailRow"
+               [@detailExpand]="canEdit && row.element == expandedElement ? 'expanded' : 'collapsed'"
+               style="overflow: hidden">
+      </mat-row>
+    </mat-table>
+  </div>
 </div>

src/app/rules/rules.component.html

-<mat-card class="transparent">
-  <mat-card-title>Spielregeln</mat-card-title>
-</mat-card>
+<div data-aos="zoom-in" data-aos-duration="250">
+  <mat-card class="transparent">
+    <mat-card-title>Spielregeln</mat-card-title>
+  </mat-card>
+</div>
 <br>
 <br>
-<mat-card class="transparent">
-  <mat-card-title>Voraussetzungen</mat-card-title>
-  <mat-card-subtitle>Um Tabooh sinnvoll spielen zu können, müsst ihr</mat-card-subtitle>
-  <mat-card-content>
-    <ul class="stichpunktenTextLinksbündig">
-      <li>
-        mindestens <b>vier Spieler</b> sein.
-      </li>
-      <li>
-        in einem <b>Gruppenanruf</b> und/oder im <b>gleichen Raum</b> sein.
-      </li>
-    </ul>
-  </mat-card-content>
-</mat-card>
+<div data-aos="zoom-out-left" data-aos-duration="500">
+  <mat-card class="transparent">
+    <mat-card-title>Voraussetzungen</mat-card-title>
+    <mat-card-subtitle>Um Tabooh sinnvoll spielen zu können, müsst ihr</mat-card-subtitle>
+    <mat-card-content>
+      <ul class="stichpunktenTextLinksbündig">
+        <li>
+          mindestens <b>vier Spieler</b> sein.
+        </li>
+        <li>
+          in einem <b>Gruppenanruf</b> und/oder im <b>gleichen Raum</b> sein.
+        </li>
+      </ul>
+    </mat-card-content>
+  </mat-card>
+</div>
 <br>
 <br>
-<mat-card class="transparent">
-  <mat-card-title>Neues Spiel erstellen</mat-card-title>
-  <mat-card-subtitle>Zur Spielvorbereitung solltet ihr wiefolgt vorgehen:</mat-card-subtitle>
-  <mat-card-content>
-    <ol class="stichpunktenTextLinksbündig">
-      <li>
-        <b>Ein Spieler</b> erstellt auf der Startseite mithilfe eines <b>neuen Raumnamens</b> ein <b>Spiel</b><br>
-      </li>
-      <li>
-        <b>Alle Spieler</b> treten dem Spiel durch <b>Eingabe des Raumnamens</b> bei.
-      </li>
-      <li>
-        <b>Jeder Spieler</b> muss entweder dem Team <a class="redfont">Rot</a> oder dem Team <a class="bluefont">Blau</a> beitreten.<br>
-        Die Aufteilung der Teams klärt ihr untereinander ab.
-      </li>
-      <li>
-        Das <b>Spiel beginnt</b>, sobald einer aus dem <b>Team</b>, das am Zug ist, <br>
-        den Button <button mat-raised-button color="primary" class="mat-small">Ich erkläre und los!</button> drückt. Damit startet der <b><a class="primaryfont">Erklärer</a></b> eine <b>neue Spielrunde</b>.
-      </li>
-    </ol>
-  </mat-card-content>
-</mat-card>
+<div data-aos="zoom-out-right" data-aos-duration="750">
+  <mat-card class="transparent">
+    <mat-card-title>Neues Spiel erstellen</mat-card-title>
+    <mat-card-subtitle>Zur Spielvorbereitung solltet ihr wiefolgt vorgehen:</mat-card-subtitle>
+    <mat-card-content>
+      <ol class="stichpunktenTextLinksbündig">
+        <li>
+          <b>Ein Spieler</b> erstellt auf der Startseite mithilfe eines <b>neuen Raumnamens</b> ein <b>Spiel</b><br>
+        </li>
+        <li>
+          <b>Alle Spieler</b> treten dem Spiel durch <b>Eingabe des Raumnamens</b> bei.
+        </li>
+        <li>
+          <b>Jeder Spieler</b> muss entweder dem Team <a class="redfont">Rot</a> oder dem Team <a class="bluefont">Blau</a> beitreten.<br>
+          Die Aufteilung der Teams klärt ihr untereinander ab.
+        </li>
+        <li>
+          Das <b>Spiel beginnt</b>, sobald einer aus dem <b>Team</b>, das am Zug ist, <br>
+          den Button <button mat-raised-button color="primary" class="mat-small">Ich erkläre und los!</button> drückt. Damit startet der <b><a class="primaryfont">Erklärer</a></b> eine <b>neue Spielrunde</b>.
+        </li>
+      </ol>
+    </mat-card-content>
+  </mat-card>
+</div>
 <br>
 <br>
-<mat-card class="transparent">
-  <mat-card-title>Prinzip einer Spielrunde</mat-card-title>
-  <mat-card-subtitle>Tabooh wird in mehreren Spielrunden gespielt</mat-card-subtitle>
-  <mat-card-content>
-    <ul class="stichpunktenTextLinksbündig">
-      <li>
-        Eine <b>Spielrunde</b> dauert <b>eine Minute</b>.
-      </li>
-      <li>
-        In einer <b>Spielrunde</b> gibt es das <a class="primaryfont">aktive</a> und das <a class="primaryfont">passive</a> Team.
-      </li>
-      <li>
-        Das <a class="primaryfont">aktive</a> Team besteht aus einem <b><a class="primaryfont">Erklärer</a></b> und aus <b>mindestens</b> einem <b><a class="primaryfont">Ratenden</a></b>.
-      </li>
-      <li>
-        <b>Stimmt</b> euch im Team vor Beginn der Spielrunde <b>ab</b>, wer als nächstes der <b><a class="primaryfont">Erklärer</a></b> ist.<br>
-        Am besten sollte jeder <b>gleich oft</b> die Rolle des <b><a class="primaryfont">Erklärers</a></b> besetzt haben.
-      </li>
-      <li>
-        Dem <b><a class="primaryfont">Erklärer</a></b> wird ein <b>Begriff</b> und <b>fünf <a class="redfont">Tabooh</a></b> Wörter angezeigt.<br>
-      </li>
-      <li>
-        Die <b>angezeigten Wörter</b> darf der <b><a class="primaryfont">Erklärer </a></b> <b><a class="redfont">nicht</a> verwenden</b>.<br>
-      </li>
-      <li>
-        Auch <b>Teilwörter</b> darf der <b><a class="primaryfont">Erklärer </a></b> nicht verwenden.<br>
-        Beispielsweise darf das Wort <b><i>Bahn</i></b> bei <b><i>Hauptbahnhof</i></b> <b><a class="redfont"> nicht </a></b> <b>erwähnt</b> werden.
-      </li>
-      <li>
-        Sämtliche Konjugationen von <b><a class="redfont">Tabooh</a></b> Wörter sind ebenfalls <b><a class="redfont">nicht</a> erlaubt</b>.<br>
-        Beispielsweise darf beim <b><a class="redfont">Tabooh</a></b> Wort <b><i>Spiel</i></b> auch <b><a class="redfont">nicht</a></b> die Wörter<br>
-        <b><i>spielen</i></b>, <b><i>Spieler</i></b>, <b><i>spielte</i></b> oder ähnliches erwähnt werden.
-      </li>
-      <li>
-        <b><a class="redfont">Tabooh</a></b> Wörter dürfen <b><a class="redfont">nicht</a></b> in eine <b>andere Sprache</b> übersetzt werden.<br>
-        Beispielsweise darf beim Wort <b><i>Spiel</i></b> auch <b><a class="redfont">nicht</a></b> das englische Wort <b><i>Play</i></b> verwendet werden.
-      </li>
-      <li>
-        Das <a class="primaryfont">aktive</a> Team hat das <b>Ziel</b> möglichst <b>viele Punkte</b> zu sammeln.
-      </li>
-      <li>
-        Ein <b>Punkt</b> erhält das <a class="primaryfont">aktive</a> Team, wenn die <b><a class="primaryfont">Ratenden</a></b> den <b>Begriff nennen</b>, welches der <b><a class="primaryfont">Erklärer</a> beschreibt</b>.<br>
-        Erst wenn der <b><a class="primaryfont">Erklärer</a></b> auf den Button <button mat-raised-button color="primary" class="mat-small">Richtig &#10004;</button> drückt, wird der <b>Punkt gutgeschrieben</b>. <br>
-        Danach erscheint ein <b>neuer Begriff</b> und <b>neue <a class="redfont">Tabooh</a></b> Wörter.
-        <br>
-      </li>
-      <li>
-        Falls der <b><a class="primaryfont">Erklärer</a></b> beim aktuellen Wort hängt, kann er den Begriff <b><a class="warnfont">überspringen</a></b>,<br>
-        indem er auf den Button <button mat-raised-button color="accent" class="mat-small">Überspringen &#187;</button> drückt.
-      </li>
-      <li>
-        Das <a class="primaryfont">passive</a> Team besteht aus <b>mindestens zwei </b> <b><a class="primaryfont">Aufpasser</a></b>.
-      </li>
-      <li>
-        <b><a class="primaryfont">Aufpasser</a></b> sehen <b>dieselben Wörter</b> wie der <b><a class="primaryfont">Erklärer</a></b>.
-      </li>
-      <li>
-        Das <a class="primaryfont">passive</a> Team hat das <b>Ziel</b> gesagte <b><a class="redfont">Tabooh</a></b> Wörter zu melden,<br>
-        indem ein <b><a class="primaryfont">Aufpasser</a></b> auf den Button <button mat-raised-button color="warn" class="mat-small">Tabooh &#10008;</button> drückt.
-      </li>
-      <li>
-        Ein gemeldetes <b><a class="redfont">Tabooh</a></b> Wort führt zu einem <b><a class="redfont">Minuspunkt</a></b> für das <a class="primaryfont">aktive</a> Team.<br>
-        Danach wird ein <b>neuer Begriff</b> und <b>neue <a class="redfont">Tabooh</a></b> Wörter angezeigt.
-      </li>
-      <li>
-        Auch der <b><a class="primaryfont">Erklärer</a></b> hat die Möglichkeit auf den <button mat-raised-button color="warn" class="mat-small">Tabooh &#10008;</button> Button zu drücken.
-      </li>
-      <li>
-        <b>Nach</b> einer <b>Spielrunde</b> ist das <b>andere Team</b> an der <b>Reihe</b>.
-      </li>
-      <li>
-        Bei einer <b><a class="redfont">falschen Eingabe</a></b> habt ihr die <b>Möglichkeit</b>,<br>
-        <b>nach</b> einer <b>Runde</b> die <b>Antworten</b> im dargestellten <b>Spielverlauf anzupassen</b>.
-      </li>
-    </ul>
-  </mat-card-content>
-</mat-card>
+<div data-aos="zoom-out-left" data-aos-duration="1000">
+  <mat-card class="transparent">
+    <mat-card-title>Prinzip einer Spielrunde</mat-card-title>
+    <mat-card-subtitle>Tabooh wird in mehreren Spielrunden gespielt</mat-card-subtitle>
+    <mat-card-content>
+      <ul class="stichpunktenTextLinksbündig">
+        <li>
+          Eine <b>Spielrunde</b> dauert <b>eine Minute</b>.
+        </li>
+        <li>
+          In einer <b>Spielrunde</b> gibt es das <a class="primaryfont">aktive</a> und das <a class="primaryfont">passive</a> Team.
+        </li>
+        <li>
+          Das <a class="primaryfont">aktive</a> Team besteht aus einem <b><a class="primaryfont">Erklärer</a></b> und aus <b>mindestens</b> einem <b><a class="primaryfont">Ratenden</a></b>.
+        </li>
+        <li>
+          <b>Stimmt</b> euch im Team vor Beginn der Spielrunde <b>ab</b>, wer als nächstes der <b><a class="primaryfont">Erklärer</a></b> ist.<br>
+          Am besten sollte jeder <b>gleich oft</b> die Rolle des <b><a class="primaryfont">Erklärers</a></b> besetzt haben.
+        </li>
+        <li>
+          Dem <b><a class="primaryfont">Erklärer</a></b> wird ein <b>Begriff</b> und <b>fünf <a class="redfont">Tabooh</a></b> Wörter angezeigt.<br>
+        </li>
+        <li>
+          Die <b>angezeigten Wörter</b> darf der <b><a class="primaryfont">Erklärer </a></b> <b><a class="redfont">nicht</a> verwenden</b>.<br>
+        </li>
+        <li>
+          Auch <b>Teilwörter</b> darf der <b><a class="primaryfont">Erklärer </a></b> nicht verwenden.<br>
+          Beispielsweise darf das Wort <b><i>Bahn</i></b> bei <b><i>Hauptbahnhof</i></b> <b><a class="redfont"> nicht </a></b> <b>erwähnt</b> werden.
+        </li>
+        <li>
+          Sämtliche Konjugationen von <b><a class="redfont">Tabooh</a></b> Wörter sind ebenfalls <b><a class="redfont">nicht</a> erlaubt</b>.<br>
+          Beispielsweise darf beim <b><a class="redfont">Tabooh</a></b> Wort <b><i>Spiel</i></b> auch <b><a class="redfont">nicht</a></b> die Wörter<br>
+          <b><i>spielen</i></b>, <b><i>Spieler</i></b>, <b><i>spielte</i></b> oder ähnliches erwähnt werden.
+        </li>
+        <li>
+          <b><a class="redfont">Tabooh</a></b> Wörter dürfen <b><a class="redfont">nicht</a></b> in eine <b>andere Sprache</b> übersetzt werden.<br>
+          Beispielsweise darf beim Wort <b><i>Spiel</i></b> auch <b><a class="redfont">nicht</a></b> das englische Wort <b><i>Play</i></b> verwendet werden.
+        </li>
+        <li>
+          Das <a class="primaryfont">aktive</a> Team hat das <b>Ziel</b> möglichst <b>viele Punkte</b> zu sammeln.
+        </li>
+        <li>
+          Ein <b>Punkt</b> erhält das <a class="primaryfont">aktive</a> Team, wenn die <b><a class="primaryfont">Ratenden</a></b> den <b>Begriff nennen</b>, welches der <b><a class="primaryfont">Erklärer</a> beschreibt</b>.<br>
+          Erst wenn der <b><a class="primaryfont">Erklärer</a></b> auf den Button <button mat-raised-button color="primary" class="mat-small">Richtig &#10004;</button> drückt, wird der <b>Punkt gutgeschrieben</b>. <br>
+          Danach erscheint ein <b>neuer Begriff</b> und <b>neue <a class="redfont">Tabooh</a></b> Wörter.
+          <br>
+        </li>
+        <li>
+          Falls der <b><a class="primaryfont">Erklärer</a></b> beim aktuellen Wort hängt, kann er den Begriff <b><a class="warnfont">überspringen</a></b>,<br>
+          indem er auf den Button <button mat-raised-button color="accent" class="mat-small">Überspringen &#187;</button> drückt.
+        </li>
+        <li>
+          Das <a class="primaryfont">passive</a> Team besteht aus <b>mindestens zwei </b> <b><a class="primaryfont">Aufpasser</a></b>.
+        </li>
+        <li>
+          <b><a class="primaryfont">Aufpasser</a></b> sehen <b>dieselben Wörter</b> wie der <b><a class="primaryfont">Erklärer</a></b>.
+        </li>
+        <li>
+          Das <a class="primaryfont">passive</a> Team hat das <b>Ziel</b> gesagte <b><a class="redfont">Tabooh</a></b> Wörter zu melden,<br>
+          indem ein <b><a class="primaryfont">Aufpasser</a></b> auf den Button <button mat-raised-button color="warn" class="mat-small">Tabooh &#10008;</button> drückt.
+        </li>
+        <li>
+          Ein gemeldetes <b><a class="redfont">Tabooh</a></b> Wort führt zu einem <b><a class="redfont">Minuspunkt</a></b> für das <a class="primaryfont">aktive</a> Team.<br>
+          Danach wird ein <b>neuer Begriff</b> und <b>neue <a class="redfont">Tabooh</a></b> Wörter angezeigt.
+        </li>
+        <li>
+          Auch der <b><a class="primaryfont">Erklärer</a></b> hat die Möglichkeit auf den <button mat-raised-button color="warn" class="mat-small">Tabooh &#10008;</button> Button zu drücken.
+        </li>
+        <li>
+          <b>Nach</b> einer <b>Spielrunde</b> ist das <b>andere Team</b> an der <b>Reihe</b>.
+        </li>
+        <li>
+          Bei einer <b><a class="redfont">falschen Eingabe</a></b> habt ihr die <b>Möglichkeit</b>,<br>
+          <b>nach</b> einer <b>Runde</b> die <b>Antworten</b> im dargestellten <b>Spielverlauf anzupassen</b>.
+        </li>
+      </ul>
+    </mat-card-content>
+  </mat-card>
+</div>
 <br>
 <br>
-<mat-card class="transparent">
-  <mat-card-title>Spielende</mat-card-title>
-  <mat-card-subtitle>Ihr entscheidet wie das Spiel endet</mat-card-subtitle>
-  <mat-card-content>
-    <b>Gewonnen</b> hat das <b>Team</b>, das die <b>meisten Punkte</b> hat.<br>
-    Es gibt verschiedene Möglichkeiten, wie das Spiel beendet wird. Hier ein paar Vorschläge:<br>
-    <ol class="stichpunktenTextLinksbündig">
-      <li>
-        Ihr spielt <b>alle Begriffe</b> durch <i>(Das könnte etwas dauern...)</i>
-      </li>
-      <li>
-        <b>Alle Spieler</b> waren mindestens <b>einmal </b> <b><a class="primaryfont">Erklärer</a></b>.<br>
-        Die <b>Spiellänge</b> kann auf mehrere <b><a class="primaryfont">Erklärerrunden</a></b> erhöht werden.
-      </li>
-      <li>
-        Ihr definiert einen <b>Punktewert</b>, der zuerst erreicht werden soll. Beispielsweise <b>gewinnt</b> das <b>Team</b>,<br>
-        das zuerst die <b>20 Punktemarke</b> erreicht hat. Falls die Marke von dem zuerst angefangenen Team erreicht wurde,<br>
-        darf das <b>andere Team fairness halber</b> versuchen mit einer <b>weiteren Spielrunde</b> den <b>Punktestand</b> zu <b>überbieten</b>.<br>
-        Bei <b>Gleichstand</b> geht es in die <b>Verlängerung</b>.
-      </li>
-    </ol>
-  </mat-card-content>
-</mat-card>
+<div data-aos="zoom-out-right" data-aos-duration="500">
+  <mat-card class="transparent">
+    <mat-card-title>Spielende</mat-card-title>
+    <mat-card-subtitle>Ihr entscheidet wie das Spiel endet</mat-card-subtitle>
+    <mat-card-content>
+      <b>Gewonnen</b> hat das <b>Team</b>, das die <b>meisten Punkte</b> hat.<br>
+      Es gibt verschiedene Möglichkeiten, wie das Spiel beendet wird. Hier ein paar Vorschläge:<br>
+      <ol class="stichpunktenTextLinksbündig">
+        <li>
+          Ihr spielt <b>alle Begriffe</b> durch <i>(Das könnte etwas dauern...)</i>
+        </li>
+        <li>
+          <b>Alle Spieler</b> waren mindestens <b>einmal </b> <b><a class="primaryfont">Erklärer</a></b>.<br>
+          Die <b>Spiellänge</b> kann auf mehrere <b><a class="primaryfont">Erklärerrunden</a></b> erhöht werden.
+        </li>
+        <li>
+          Ihr definiert einen <b>Punktewert</b>, der zuerst erreicht werden soll. Beispielsweise <b>gewinnt</b> das <b>Team</b>,<br>
+          das zuerst die <b>20 Punktemarke</b> erreicht hat. Falls die Marke von dem zuerst angefangenen Team erreicht wurde,<br>
+          darf das <b>andere Team fairness halber</b> versuchen mit einer <b>weiteren Spielrunde</b> den <b>Punktestand</b> zu <b>überbieten</b>.<br>
+          Bei <b>Gleichstand</b> geht es in die <b>Verlängerung</b>.
+        </li>
+      </ol>
+    </mat-card-content>
+  </mat-card>
+</div>
 <br>
 <br>
-<mat-card class="transparent">
-  <mat-card-title>Alles verstanden?</mat-card-title>
-  <mat-card-subtitle>Dann mal los!</mat-card-subtitle>
-  <mat-card-content>
-    <button mat-raised-button color="primary" (click)="goToStartpage()">Zur Startseite</button>
-  </mat-card-content>
-</mat-card>
+<div data-aos="zoom-out-left" data-aos-duration="250">
+  <mat-card class="transparent">
+    <mat-card-title>Alles verstanden?</mat-card-title>
+    <mat-card-subtitle>Dann mal los!</mat-card-subtitle>
+    <mat-card-content>
+      <button mat-raised-button color="primary" (click)="goToStartpage()">Zur Startseite</button>
+    </mat-card-content>
+  </mat-card>
+</div>
 <br>
 <br>
 <br>

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

-<mat-card class="transparent">
-  <h1>Willkommen bei Tabooh im Online-Multiplayer-Modus</h1>
-  <h2>Ideal im Lockdown!</h2>
-</mat-card>
-<br>
-<br>
-<br>
-<mat-card class="transparent">
-  <mat-card-title>Spielsuche</mat-card-title>
-  <mat-card-subtitle>Finde ein Spiel über den Raumnamen oder erstelle einen neuen Raum</mat-card-subtitle>
-  <mat-card-content>
-    <form>
-      <mat-form-field>
-        <mat-label>Raumname</mat-label>
-        <input #sessionName type="text" matInput (keyup)="checkSpielname(sessionName.value)" (keypress)="keyPressAlphaNumeric($event)" (keyup.enter)="enter(sessionName.value)">
-      </mat-form-field>
-    </form>
-  </mat-card-content>
-  <mat-card-actions>
-    <button [disabled]="buttonCreateGameDisabled" mat-raised-button color="primary" (click)="createGame(sessionName.value)">Spiel erstellen</button>
-    <button [disabled]="buttonJoinGameDisabled" mat-raised-button color="primary" (click)="joinGame(sessionName.value)">Spiel beitreten</button>
-  </mat-card-actions>
-</mat-card>
-<br>
-<br>
-<br>
-<mat-card class="transparent">
-  <mat-card-title>Spielregeln</mat-card-title>
-  <mat-card-subtitle>Du kennst Tabooh nicht? Mach dich in weniger als drei Minuten mit den Spielregeln vertraut</mat-card-subtitle>
-  <mat-card-content>
-    <button mat-raised-button color="primary" (click)="goToRules()">Zu den Spielregeln</button>
-  </mat-card-content>
-</mat-card>
+<div data-aos="zoom-in" data-aos-duration="250">
+  <mat-card class="transparent">
+    <h1>Willkommen bei Tabooh im Online-Multiplayer-Modus</h1>
+    <h2>Ideal im Lockdown!</h2>
+  </mat-card>
+</div>
+<br>
+<br>
+<br>
+<div data-aos="zoom-out-left" data-aos-duration="500">
+  <mat-card class="transparent">
+    <mat-card-title>Spielsuche</mat-card-title>
+    <mat-card-subtitle>Finde ein Spiel über den Raumnamen oder erstelle einen neuen Raum</mat-card-subtitle>
+    <mat-card-content>
+      <form>
+        <mat-form-field>
+          <mat-label>Raumname</mat-label>
+          <input #sessionName type="text" matInput (keyup)="checkSpielname(sessionName.value)" (keypress)="keyPressAlphaNumeric($event)" (keyup.enter)="enter(sessionName.value)">
+        </mat-form-field>
+      </form>
+    </mat-card-content>
+    <mat-card-actions>
+      <button [disabled]="buttonCreateGameDisabled" mat-raised-button color="primary" (click)="createGame(sessionName.value)">Spiel erstellen</button>
+      <button [disabled]="buttonJoinGameDisabled" mat-raised-button color="primary" (click)="joinGame(sessionName.value)">Spiel beitreten</button>
+    </mat-card-actions>
+  </mat-card>
+</div>
+<br>
+<br>
+<br>
+<div data-aos="zoom-out-right" data-aos-duration="750">
+  <mat-card class="transparent">
+    <mat-card-title>Spielregeln</mat-card-title>
+    <mat-card-subtitle>Du kennst Tabooh nicht? Mach dich in weniger als drei Minuten mit den Spielregeln vertraut</mat-card-subtitle>
+    <mat-card-content>
+      <button mat-raised-button color="primary" (click)="goToRules()">Zu den Spielregeln</button>
+    </mat-card-content>
+  </mat-card>
+</div>
 <br>
 <br>
 <br>