<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Eid al-Adha Matching Game</title>
<link href="https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2&display=swap" rel="stylesheet">
<style>
body {
margin: 0;
font-family: 'Baloo Bhaijaan 2', cursive;
background: linear-gradient(to bottom right, #fff7e6, #ffe4cc);
overflow: hidden;
}
.intro, .game, .level-select, .popup {
display: none;
justify-content: center;
align-items: center;
height: 100vh;
flex-direction: column;
text-align: center;
}
.intro.active, .game.active, .level-select.active, .popup.active {
display: flex;
}
.button {
background-color: #ff9900;
padding: 10px 20px;
margin: 10px;
border: none;
border-radius: 12px;
font-size: 1.2em;
cursor: pointer;
color: white;
box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
}
.grid {
display: grid;
grid-template-columns: repeat(4, 100px);
gap: 10px;
margin-top: 20px;
}
.card {
width: 100px;
height: 100px;
background-color: white;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
perspective: 1000px;
cursor: pointer;
}
.card-inner {
width: 100%;
height: 100%;
position: relative;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.card.flipped .card-inner {
transform: rotateY(180deg);
}
.card-front, .card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
}
.card-back {
background: #ffcc80;
border-radius: 10px;
transform: rotateY(180deg);
}
.card-front {
background: #fff;
border-radius: 10px;
}
.correct {
border: 4px solid green;
}
.wrong {
border: 4px solid red;
}
.popup {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255,255,255,0.9);
z-index: 1000;
}
.confetti {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
background-image: url('https://cdn.pixabay.com/photo/2017/08/30/07/51/confetti-2696858_960_720.png');
background-size: cover;
animation: fade 2s ease forwards;
}
@keyframes fade {
0% { opacity: 0; }
100% { opacity: 1; }
}
</style>
</head>
<body>
<div class="intro active">
<h1>🎉 Eid al-Adha Memory Game 🎉</h1>
<p>Match the flashcards to learn about Qurbani and Hajj!</p>
<button class="button" onclick="showLevels()">Start</button>
</div>
<div class="level-select">
<h2>Select a Level</h2>
<button class="button" onclick="startGame('qurbani')">🕋 Qurbani</button>
<button class="button" onclick="startGame('hajj')">🕋 Hajj</button>
</div>
<div class="game">
<h2 id="game-title"></h2>
<div class="grid" id="grid"></div>
<button class="button" onclick="location.reload()">Play Again</button>
</div>
<div class="popup" id="popup">
<h1>🎉 MashaAllah, well played! 🎉</h1>
<div class="confetti"></div>
<button class="button" onclick="location.reload()">Play Again</button>
</div>
<audio id="flipSound" src="https://cdn.pixabay.com/download/audio/2022/03/15/audio_ae29352b3e.mp3?filename=card-flip-110019.mp3"></audio>
<audio id="correctSound" src="https://cdn.pixabay.com/download/audio/2022/03/21/audio_5e292c0e47.mp3?filename=correct-2-46134.mp3"></audio>
<audio id="wrongSound" src="https://cdn.pixabay.com/download/audio/2022/03/15/audio_6bff8ab9b2.mp3?filename=error-126627.mp3"></audio>
<script>
const qurbaniItems = ['🐐','🐑','🐪','🥩','🎁','🕌'];
const hajjItems = ['🕋','⛺','🧎♂️','⛰️','🪨','🚶♂️'];
let firstCard = null;
let lockBoard = false;
let matches = 0;
function showLevels() {
document.querySelector('.intro').classList.remove('active');
document.querySelector('.level-select').classList.add('active');
}
function startGame(level) {
document.querySelector('.level-select').classList.remove('active');
document.querySelector('.game').classList.add('active');
const title = level === 'qurbani' ? 'Qurbani Level' : 'Hajj Level';
document.getElementById('game-title').innerText = title;
const items = level === 'qurbani' ? qurbaniItems : hajjItems;
const grid = document.getElementById('grid');
const allItems = [...items, ...items].sort(() => 0.5 - Math.random());
grid.innerHTML = '';
matches = 0;
allItems.forEach(icon => {
const card = document.createElement('div');
card.classList.add('card');
const inner = document.createElement('div');
inner.classList.add('card-inner');
const front = document.createElement('div');
front.classList.add('card-front');
front.textContent = '?';
const back = document.createElement('div');
back.classList.add('card-back');
back.textContent = icon;
inner.appendChild(front);
inner.appendChild(back);
card.appendChild(inner);
card.addEventListener('click', () => flipCard(card, icon));
grid.appendChild(card);
});
}
function flipCard(card, icon) {
if (lockBoard || card.classList.contains('flipped')) return;
document.getElementById('flipSound').play();
card.classList.add('flipped');
if (!firstCard) {
firstCard = { card, icon };
} else {
if (firstCard.icon === icon) {
document.getElementById('correctSound').play();
firstCard.card.classList.add('correct');
card.classList.add('correct');
firstCard = null;
matches++;
if (matches === 6) {
setTimeout(() => {
document.getElementById('popup').classList.add('active');
}, 800);
}
} else {
lockBoard = true;
document.getElementById('wrongSound').play();
card.classList.add('wrong');
firstCard.card.classList.add('wrong');
setTimeout(() => {
card.classList.remove('flipped', 'wrong');
firstCard.card.classList.remove('flipped', 'wrong');
firstCard = null;
lockBoard = false;
}, 1000);
}
}
}
</script>
</body>
</html>
