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