tgd-frontend/src/app/components/answer-notification/answer-notification.component.html

<div class="notification-container" *ngIf="isShown" [@inOutAnimation] [ngClass]="{ 'wrong': !answerIsValid }">
    <div class=" h-100 d-flex justify-content-center align-items-center">
        <div class="d-block justify-content-centers">
            <h1 *ngIf="answerIsValid">🎉 Ура, правильный ответ!</h1>
            <h1 *ngIf="!answerIsValid">❌ А вот и нет! ❌</h1>
            <div class="d-flex align-items-center justify-content-center">
                <app-participant-item *ngIf="participant" [participant]="participant"></app-participant-item>
            </div>
            <h2 class="text-center" *ngIf="!answerIsValid">выйграл наказание</h2>
            <audio *ngIf="!answerIsValid" src="assets/sfx/wrong_answer.mp3" autoplay></audio>
            <audio *ngIf="answerIsValid" src="assets/sfx/valid_answer.mp3" autoplay></audio>
            <app-countdown *ngIf="showCountdown" [countdown]="countdown" (completed)="countdownCompleted()"></app-countdown>
        </div>
    </div>
</div>