<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>