Untitled

<main>
	<!-- Header section -->
	<!-- <header class="header-section">
		<h2 class="header-title">Your Header Title</h2>
	</header> -->

	<!-- Content section -->
	<section class="content-container" id="content-container">
		<div class="main-content">
			<div [class.modal-overlay]="isUserWinner || (!isUserWinner && !remainingTime)">
				<!-- Background Overlay -->
				<span class="bg-overlay"></span>

				<!-- Header section -->

				<h2 class="header-title">
					{{ HeaderTextLocal }}
				</h2>

				<div class="content-timer">
					<h4>TEMPS RESTANT</h4>

					<div class="content-remaining-time">
						<h5>
							<countdown [config]="config" (event)="handleEvent($event)" />
							sec
						</h5>

						<div class="time-steps">
							@for (item of gameImageData; track $index) {
								<span [class.active]="clickCount >= $index + 1"></span>
							}
						</div>
					</div>
				</div>

				<!-- Here you can change the text displayed in the modal -->
				<div class="content-img">
					<div class="content-img-box">
						<img [src]="backendURL + playBgimg" alt="Game image" class="content-img-main" />

						@for (axis of gameImageData; track $index) {
							<img src="assets/user/images/box.png" alt="box" class="box-img" (click)="handleBoxImg($event)" [style.left.px]="axis.x" [style.top.px]="axis.y" />
						}
					</div>

					<img [src]="backendURL + playBgimg" alt="Game image result" class="content-img-end" />

					<!-- Choose which text to display by adding and removing the class "content-text-display" -->
					<div class="content-img-text" [class.content-text-display]="isUserWinner" (click)="onFooterBtnClick()">
						<h2>
							Bravo ! Tu as réussi<br />
							à trouver tous les<br />
							paquets
						</h2>

						<img src="assets/user/images/iconThumsUp.svg" alt="Icon thums up" />
					</div>

					<div class="content-img-text" [class.content-text-display]="!isUserWinner && !remainingTime" (click)="handleGameReset()">
						<h2>Ton temps est<br />écoulé</h2>

						<img src="assets/user/images/iconTimeMachine.svg" alt="Icon time machine" />

						<h3>REJOUER</h3>
					</div>
				</div>
			</div>
		</div>
	</section>

	<!-- Footer section -->
	<footer class="footer-section">
		<div class="footer-btn-next">
			<button class="btn btn-danger footer-btn" [disabled]="!isUserWinner" (click)="onFooterBtnClick()">{{ footerBtnText }}</button>
		</div>
		<div class="footer-text-section">
			<h5 class="footer-text">Fumer tue</h5>
		</div>
	</footer>
</main>