mirror of
https://codeberg.org/JasterV/MEMORY-CARD-GAME.git
synced 2026-04-26 18:20:03 +00:00
99 lines
2.9 KiB
HTML
99 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<script
|
|
src="https://kit.fontawesome.com/56942480bb.js"
|
|
crossorigin="anonymous"
|
|
></script>
|
|
|
|
<title>Memory Game!</title>
|
|
|
|
<!-- import the webpage's stylesheet -->
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
<i id="score-toggle" class="fas fa-trophy"></i>
|
|
|
|
<div class="cards-row">
|
|
<div class="left-card card">
|
|
<div class="choose-username">
|
|
<h1>Choose a username</h1>
|
|
<div class="username-container">
|
|
<input
|
|
type="text"
|
|
id="username"
|
|
name="username"
|
|
autocomplete="off"
|
|
spellcheck="false"
|
|
/>
|
|
<p class="placeholder" id="placeholder">Username</p>
|
|
</div>
|
|
<button id="play" class="game-button">
|
|
<i class="fas fa-gamepad"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div id="images-grid" class="hide images-grid"></div>
|
|
|
|
<div id="mode-container" class="hide">
|
|
<h1>Choose the difficulty</h1>
|
|
<div class="mode-btns">
|
|
<button id="easy-btn" class="game-button">
|
|
Easy
|
|
</button>
|
|
<button id="hard-btn" class="game-button">
|
|
Hard
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="congrats-container" class="final-container hide">
|
|
<h1>
|
|
You win! 🎉
|
|
</h1>
|
|
<h3>You won in <strong id="user-seconds"></strong></h3>
|
|
<button class="play-again-btn game-button">
|
|
<i class="fas fa-undo-alt"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div id="loose-container" class="final-container hide">
|
|
<h1>
|
|
You loose! 😵
|
|
</h1>
|
|
<h3>You did <strong id="tries-span"></strong> pairs in a row </h3>
|
|
<button class="play-again-btn game-button">
|
|
<i class="fas fa-undo-alt"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="score-container" class="card score-container">
|
|
|
|
<i class="fas fa-trophy" id="scores-trophy"></i>
|
|
<h2 class="user-scores score-title">
|
|
Leaderboard
|
|
</h2>
|
|
<div class="ribbon-wrapper">
|
|
<img
|
|
class="ribbon-tail"
|
|
src="https://cdn.glitch.com/56d96ce9-5171-477f-8560-558ec3af0051%2Fribbon-tail.svg?v=1596043434209"
|
|
alt=""
|
|
/>
|
|
<img
|
|
class="ribbon-score"
|
|
src="https://cdn.glitch.com/56d96ce9-5171-477f-8560-558ec3af0051%2Fribbon-score.svg?v=1596046610666"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
|
|
<div id="user-scores" class="user-scores"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="script.js" defer></script>
|
|
</body>
|
|
</html>
|