682 أسطر
24 KiB
HTML
682 أسطر
24 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ar" dir="rtl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>🚀 لعبة رائد الفضاء الصغير</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
font-family: 'Segoe UI', 'Arial', sans-serif;
|
|
}
|
|
|
|
body {
|
|
min-height: 100vh;
|
|
background: radial-gradient(circle at bottom, #2c3e50, #0d0d2b);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 10px;
|
|
}
|
|
|
|
.game-container {
|
|
max-width: 500px;
|
|
width: 100%;
|
|
background: rgba(52, 73, 94, 0.9);
|
|
backdrop-filter: blur(10px);
|
|
border-radius: 60px;
|
|
padding: 20px 15px;
|
|
border: 5px solid #f1c40f;
|
|
box-shadow: 0 20px 40px rgba(0,0,0,0.5);
|
|
}
|
|
|
|
/* Header */
|
|
.header-game {
|
|
background: linear-gradient(145deg, #3498db, #9b59b6);
|
|
border-radius: 50px;
|
|
padding: 12px 20px;
|
|
margin-bottom: 15px;
|
|
border: 3px solid #f1c40f;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.level-badge {
|
|
background: #2c3e50;
|
|
color: #f1c40f;
|
|
padding: 8px 25px;
|
|
border-radius: 40px;
|
|
font-size: 1.2rem;
|
|
font-weight: bold;
|
|
border: 2px solid #f39c12;
|
|
}
|
|
|
|
.stars-display {
|
|
background: #f39c12;
|
|
color: #2c3e50;
|
|
padding: 8px 25px;
|
|
border-radius: 40px;
|
|
font-size: 1.3rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Progress bar */
|
|
.progress-area {
|
|
background: #2c3e50;
|
|
padding: 8px;
|
|
border-radius: 30px;
|
|
margin-bottom: 15px;
|
|
border: 2px solid #f1c40f;
|
|
}
|
|
|
|
.progress-bar {
|
|
height: 20px;
|
|
background: #34495e;
|
|
border-radius: 30px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progress-fill {
|
|
height: 100%;
|
|
width: 0%;
|
|
background: linear-gradient(90deg, #f1c40f, #e67e22);
|
|
transition: width 0.3s;
|
|
}
|
|
|
|
/* Hero area */
|
|
.hero-area {
|
|
background: linear-gradient(145deg, #e67e22, #e74c3c);
|
|
padding: 12px;
|
|
border-radius: 50px;
|
|
margin-bottom: 15px;
|
|
border: 3px solid #f1c40f;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.hero-icon {
|
|
background: #f1c40f;
|
|
width: 55px;
|
|
height: 55px;
|
|
border-radius: 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 2rem;
|
|
border: 3px solid #2c3e50;
|
|
}
|
|
|
|
.hero-name {
|
|
background: #f1c40f;
|
|
padding: 12px 20px;
|
|
border-radius: 40px;
|
|
font-size: 1.3rem;
|
|
font-weight: bold;
|
|
color: #2c3e50;
|
|
border: 3px solid #2c3e50;
|
|
min-width: 170px;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Challenge card */
|
|
.challenge-card {
|
|
background: rgba(52, 73, 94, 0.7);
|
|
border-radius: 50px;
|
|
padding: 20px 15px;
|
|
border: 3px solid #f1c40f;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.challenge-title {
|
|
background: #3498db;
|
|
color: white;
|
|
font-size: 1.5rem;
|
|
padding: 10px 25px;
|
|
border-radius: 40px;
|
|
display: inline-block;
|
|
margin-bottom: 15px;
|
|
border: 2px solid #f1c40f;
|
|
}
|
|
|
|
.story-box {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
padding: 15px;
|
|
border-radius: 40px;
|
|
font-size: 1.2rem;
|
|
color: white;
|
|
border: 2px solid #f1c40f;
|
|
margin-bottom: 15px;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Timer */
|
|
.timer-box {
|
|
background: #2c3e50;
|
|
color: #f1c40f;
|
|
padding: 10px;
|
|
border-radius: 40px;
|
|
text-align: center;
|
|
font-size: 2rem;
|
|
margin-bottom: 15px;
|
|
border: 3px solid #f1c40f;
|
|
}
|
|
|
|
/* Memory show area */
|
|
.memory-show {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 15px;
|
|
justify-content: center;
|
|
margin: 15px 0;
|
|
padding: 15px;
|
|
background: rgba(241, 196, 15, 0.2);
|
|
border-radius: 40px;
|
|
}
|
|
|
|
.memory-icon {
|
|
background: #3498db;
|
|
width: 70px;
|
|
height: 70px;
|
|
border-radius: 35px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 2.5rem;
|
|
border: 3px solid #f1c40f;
|
|
}
|
|
|
|
/* Options */
|
|
.options-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
justify-content: center;
|
|
margin: 15px 0;
|
|
}
|
|
|
|
.option-btn {
|
|
background: #e67e22;
|
|
padding: 15px 20px;
|
|
border-radius: 40px;
|
|
font-size: 1.5rem;
|
|
color: white;
|
|
border: 3px solid #f1c40f;
|
|
cursor: pointer;
|
|
min-width: 80px;
|
|
text-align: center;
|
|
}
|
|
|
|
.option-btn.selected {
|
|
background: #27ae60;
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
/* Drop zone */
|
|
.drop-zone {
|
|
background: rgba(0, 0, 0, 0.3);
|
|
min-height: 70px;
|
|
border-radius: 40px;
|
|
padding: 15px;
|
|
margin: 10px 0;
|
|
border: 3px dashed #f1c40f;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
align-items: center;
|
|
color: white;
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
.drop-item {
|
|
background: #3498db;
|
|
color: white;
|
|
padding: 10px 20px;
|
|
border-radius: 40px;
|
|
font-size: 1.3rem;
|
|
border: 2px solid #f1c40f;
|
|
}
|
|
|
|
/* Buttons */
|
|
.action-buttons {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin: 15px 0;
|
|
}
|
|
|
|
.btn-next, .btn-clear {
|
|
flex: 1;
|
|
padding: 15px;
|
|
font-size: 1.3rem;
|
|
font-weight: bold;
|
|
border-radius: 50px;
|
|
cursor: pointer;
|
|
border: 3px solid #f1c40f;
|
|
}
|
|
|
|
.btn-next {
|
|
background: #27ae60;
|
|
color: white;
|
|
}
|
|
|
|
.btn-clear {
|
|
background: #e74c3c;
|
|
color: white;
|
|
}
|
|
|
|
/* Mom message */
|
|
.mom-message {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
padding: 15px;
|
|
border-radius: 50px;
|
|
font-size: 1.2rem;
|
|
color: white;
|
|
border: 3px solid #f1c40f;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Certificate */
|
|
.certificate {
|
|
background: linear-gradient(145deg, #f1c40f, #f39c12);
|
|
padding: 30px;
|
|
border-radius: 60px;
|
|
text-align: center;
|
|
color: #2c3e50;
|
|
font-weight: bold;
|
|
border: 5px solid white;
|
|
margin: 15px 0;
|
|
}
|
|
|
|
.certificate h1 {
|
|
font-size: 2rem;
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.pattern-display {
|
|
font-size: 2.5rem;
|
|
text-align: center;
|
|
background: #2c3e50;
|
|
padding: 15px;
|
|
border-radius: 40px;
|
|
color: #f1c40f;
|
|
margin: 10px 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="game-container">
|
|
<!-- Header -->
|
|
<div class="header-game">
|
|
<div class="level-badge" id="levelDisplay">🚀 مهمة 1/5</div>
|
|
<div class="stars-display" id="starDisplay">🌟 0</div>
|
|
</div>
|
|
|
|
<!-- Progress bar -->
|
|
<div class="progress-area">
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" id="progressFill" style="width: 0%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hero name -->
|
|
<div class="hero-area" onclick="changeHeroName()">
|
|
<div class="hero-icon" id="heroIcon">👶</div>
|
|
<div class="hero-name" id="heroNameDisplay">اضغط لاسمك</div>
|
|
</div>
|
|
|
|
<!-- Challenge content -->
|
|
<div id="challengeContent"></div>
|
|
|
|
<!-- Mom message -->
|
|
<div class="mom-message" id="momMessage">💬 مرحباً! اضغط على اسمك أولاً</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Game state
|
|
let currentLevel = 0;
|
|
let starsEarned = [0, 0, 0, 0, 0];
|
|
let completed = [false, false, false, false, false];
|
|
let heroName = "";
|
|
|
|
// Level state
|
|
let selectedItem = "";
|
|
let memoryItems = [];
|
|
let timerInterval = null;
|
|
let timeLeft = 15;
|
|
let showMemory = true;
|
|
let patternChoice = "";
|
|
|
|
// Update display
|
|
function updateDisplay() {
|
|
let total = starsEarned.reduce((a, b) => a + b, 0);
|
|
document.getElementById('starDisplay').innerText = '🌟 ' + total;
|
|
let percent = (total / 15) * 100;
|
|
document.getElementById('progressFill').style.width = percent + '%';
|
|
document.getElementById('levelDisplay').innerText = `🚀 مهمة ${currentLevel + 1}/5`;
|
|
}
|
|
|
|
// Change hero name
|
|
window.changeHeroName = function() {
|
|
let name = prompt("ما اسمك؟", heroName || "بطل");
|
|
if (name && name.trim() !== "") {
|
|
heroName = name.trim();
|
|
document.getElementById('heroNameDisplay').innerText = heroName;
|
|
document.getElementById('heroIcon').innerText = heroName.charAt(0);
|
|
document.getElementById('momMessage').innerText = `💬 أهلاً ${heroName}! هيا نلعب!`;
|
|
}
|
|
};
|
|
|
|
// Timer function
|
|
function startTimer(seconds) {
|
|
if (timerInterval) clearInterval(timerInterval);
|
|
timeLeft = seconds;
|
|
let timerDiv = document.getElementById('timerDisplay');
|
|
if (!timerDiv) return;
|
|
|
|
timerInterval = setInterval(() => {
|
|
timeLeft--;
|
|
timerDiv.innerText = `⏱️ ${timeLeft}`;
|
|
|
|
if (timeLeft <= 0) {
|
|
clearInterval(timerInterval);
|
|
timerDiv.innerText = "⏰ انتهى الوقت!";
|
|
if (currentLevel === 0) {
|
|
showMemory = false;
|
|
renderChallenge();
|
|
}
|
|
}
|
|
}, 1000);
|
|
}
|
|
|
|
// Clear level
|
|
window.clearLevel = function() {
|
|
if (timerInterval) clearInterval(timerInterval);
|
|
selectedItem = "";
|
|
memoryItems = [];
|
|
patternChoice = "";
|
|
showMemory = true;
|
|
renderChallenge();
|
|
document.getElementById('momMessage').innerText = "💬 جرب مرة أخرى!";
|
|
};
|
|
|
|
// Render current challenge
|
|
function renderChallenge() {
|
|
let content = document.getElementById('challengeContent');
|
|
let html = "";
|
|
|
|
if (currentLevel === 0) {
|
|
// Memory game
|
|
html = `
|
|
<div class="challenge-card">
|
|
<div class="challenge-title">🐶 تذكر الحيوانات</div>
|
|
<div class="story-box">👀 شاهد الحيوانات ثم اخترها</div>
|
|
<div class="timer-box" id="timerDisplay">⏱️ 15</div>
|
|
|
|
${showMemory ? `
|
|
<div class="memory-show">
|
|
<span class="memory-icon">🐶</span>
|
|
<span class="memory-icon">🐱</span>
|
|
<span class="memory-icon">🐼</span>
|
|
</div>
|
|
<div style="color:white; text-align:center;">🐶 🐱 🐼</div>
|
|
` : `
|
|
<div class="story-box">🔍 أي الحيوانات رأيت؟</div>
|
|
<div class="options-container">
|
|
<div class="option-btn ${memoryItems.includes('🐶') ? 'selected' : ''}" onclick="toggleMemory('🐶')">🐶</div>
|
|
<div class="option-btn ${memoryItems.includes('🐱') ? 'selected' : ''}" onclick="toggleMemory('🐱')">🐱</div>
|
|
<div class="option-btn ${memoryItems.includes('🐼') ? 'selected' : ''}" onclick="toggleMemory('🐼')">🐼</div>
|
|
<div class="option-btn ${memoryItems.includes('🐸') ? 'selected' : ''}" onclick="toggleMemory('🐸')">🐸</div>
|
|
<div class="option-btn ${memoryItems.includes('🐨') ? 'selected' : ''}" onclick="toggleMemory('🐨')">🐨</div>
|
|
</div>
|
|
<div class="drop-zone">
|
|
${memoryItems.length > 0 ? memoryItems.map(i => `<span class="drop-item">${i}</span>`).join('') : 'اختر الحيوانات'}
|
|
</div>
|
|
`}
|
|
|
|
<div class="action-buttons">
|
|
<button class="btn-clear" onclick="clearLevel()">🔄 مسح</button>
|
|
${!showMemory ? '<button class="btn-next" onclick="checkMemory()">✅ تحقق</button>' : ''}
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
else if (currentLevel === 1) {
|
|
// Color game
|
|
html = `
|
|
<div class="challenge-card">
|
|
<div class="challenge-title">🎨 اختر اللون</div>
|
|
<div class="story-box">🚀 الصاروخ لونه أحمر! اختر الأحمر</div>
|
|
<div class="timer-box" id="timerDisplay">⏱️ 15</div>
|
|
|
|
<div class="options-container">
|
|
<div class="option-btn ${selectedItem === '🔴' ? 'selected' : ''}" onclick="selectItem('🔴')">🔴 أحمر</div>
|
|
<div class="option-btn ${selectedItem === '🔵' ? 'selected' : ''}" onclick="selectItem('🔵')">🔵 أزرق</div>
|
|
<div class="option-btn ${selectedItem === '🟢' ? 'selected' : ''}" onclick="selectItem('🟢')">🟢 أخضر</div>
|
|
<div class="option-btn ${selectedItem === '🟡' ? 'selected' : ''}" onclick="selectItem('🟡')">🟡 أصفر</div>
|
|
</div>
|
|
|
|
<div class="drop-zone">
|
|
${selectedItem ? `<span class="drop-item">${selectedItem}</span>` : 'اختر اللون الأحمر'}
|
|
</div>
|
|
|
|
<div class="action-buttons">
|
|
<button class="btn-clear" onclick="clearLevel()">🔄 مسح</button>
|
|
<button class="btn-next" onclick="checkColor()">✅ تحقق</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
else if (currentLevel === 2) {
|
|
// Pattern game
|
|
html = `
|
|
<div class="challenge-card">
|
|
<div class="challenge-title">🧩 أكمل النمط</div>
|
|
<div class="story-box">🔴 🔵 🔴 🔵 ماذا بعد؟</div>
|
|
<div class="timer-box" id="timerDisplay">⏱️ 15</div>
|
|
|
|
<div class="pattern-display">
|
|
🔴 🔵 🔴 🔵 <span style="color:#f1c40f;">?</span>
|
|
</div>
|
|
|
|
<div class="options-container">
|
|
<div class="option-btn ${patternChoice === '🔴' ? 'selected' : ''}" onclick="setPattern('🔴')">🔴 أحمر</div>
|
|
<div class="option-btn ${patternChoice === '🔵' ? 'selected' : ''}" onclick="setPattern('🔵')">🔵 أزرق</div>
|
|
</div>
|
|
|
|
<div class="drop-zone">
|
|
${patternChoice ? `<span class="drop-item">${patternChoice}</span>` : 'اختر الإجابة'}
|
|
</div>
|
|
|
|
<div class="action-buttons">
|
|
<button class="btn-clear" onclick="clearLevel()">🔄 مسح</button>
|
|
<button class="btn-next" onclick="checkPattern()">✅ تحقق</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
else if (currentLevel === 3) {
|
|
// Big/Small game
|
|
html = `
|
|
<div class="challenge-card">
|
|
<div class="challenge-title">🐘 كبير أم صغير؟</div>
|
|
<div class="story-box">أيهما أكبر؟ اختر الفيل</div>
|
|
<div class="timer-box" id="timerDisplay">⏱️ 15</div>
|
|
|
|
<div class="options-container">
|
|
<div class="option-btn ${selectedItem === '🐘' ? 'selected' : ''}" onclick="selectItem('🐘')">🐘 فيل</div>
|
|
<div class="option-btn ${selectedItem === '🐭' ? 'selected' : ''}" onclick="selectItem('🐭')">🐭 فأر</div>
|
|
</div>
|
|
|
|
<div class="drop-zone">
|
|
${selectedItem ? `<span class="drop-item">${selectedItem}</span>` : 'اختر الفيل'}
|
|
</div>
|
|
|
|
<div class="action-buttons">
|
|
<button class="btn-clear" onclick="clearLevel()">🔄 مسح</button>
|
|
<button class="btn-next" onclick="checkBigSmall()">✅ تحقق</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
else if (currentLevel === 4) {
|
|
// Reward game
|
|
html = `
|
|
<div class="challenge-card">
|
|
<div class="challenge-title">🎁 اختر هديتك</div>
|
|
<div class="story-box">أحسنت! اختر مكافأتك</div>
|
|
<div class="timer-box" id="timerDisplay">⏱️ 15</div>
|
|
|
|
<div class="options-container">
|
|
<div class="option-btn ${selectedItem === '🍦' ? 'selected' : ''}" onclick="selectItem('🍦')">🍦 آيس كريم</div>
|
|
<div class="option-btn ${selectedItem === '🎈' ? 'selected' : ''}" onclick="selectItem('🎈')">🎈 بالون</div>
|
|
<div class="option-btn ${selectedItem === '🧸' ? 'selected' : ''}" onclick="selectItem('🧸')">🧸 دبدوب</div>
|
|
<div class="option-btn ${selectedItem === '🚗' ? 'selected' : ''}" onclick="selectItem('🚗')">🚗 سيارة</div>
|
|
</div>
|
|
|
|
<div class="drop-zone">
|
|
${selectedItem ? `<span class="drop-item">${selectedItem}</span>` : 'اختر هدية'}
|
|
</div>
|
|
|
|
<div class="action-buttons">
|
|
<button class="btn-clear" onclick="clearLevel()">🔄 مسح</button>
|
|
<button class="btn-next" onclick="finishGame()">🎉 نهاية</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
content.innerHTML = html;
|
|
|
|
// Start timer
|
|
if (currentLevel !== 0 || !showMemory) {
|
|
startTimer(15);
|
|
} else {
|
|
startTimer(15);
|
|
setTimeout(() => {
|
|
if (currentLevel === 0) {
|
|
showMemory = false;
|
|
renderChallenge();
|
|
}
|
|
}, 15000);
|
|
}
|
|
}
|
|
|
|
// Helper functions
|
|
window.toggleMemory = function(animal) {
|
|
if (memoryItems.includes(animal)) {
|
|
memoryItems = memoryItems.filter(a => a !== animal);
|
|
} else {
|
|
memoryItems.push(animal);
|
|
}
|
|
renderChallenge();
|
|
};
|
|
|
|
window.selectItem = function(item) {
|
|
selectedItem = item;
|
|
renderChallenge();
|
|
};
|
|
|
|
window.setPattern = function(choice) {
|
|
patternChoice = choice;
|
|
renderChallenge();
|
|
};
|
|
|
|
// Check functions
|
|
window.checkMemory = function() {
|
|
if (memoryItems.includes('🐶') && memoryItems.includes('🐱') && memoryItems.includes('🐼')) {
|
|
completeLevel(3);
|
|
} else {
|
|
document.getElementById('momMessage').innerText = "💬 الحيوانات كانت: 🐶 🐱 🐼";
|
|
memoryItems = [];
|
|
renderChallenge();
|
|
}
|
|
};
|
|
|
|
window.checkColor = function() {
|
|
if (selectedItem === '🔴') {
|
|
completeLevel(3);
|
|
} else {
|
|
document.getElementById('momMessage').innerText = "💬 الصاروخ أحمر! اختر 🔴";
|
|
selectedItem = "";
|
|
renderChallenge();
|
|
}
|
|
};
|
|
|
|
window.checkPattern = function() {
|
|
if (patternChoice === '🔴') {
|
|
completeLevel(3);
|
|
} else {
|
|
document.getElementById('momMessage').innerText = "💬 بعد 🔵 يأتي 🔴";
|
|
patternChoice = "";
|
|
renderChallenge();
|
|
}
|
|
};
|
|
|
|
window.checkBigSmall = function() {
|
|
if (selectedItem === '🐘') {
|
|
completeLevel(3);
|
|
} else {
|
|
document.getElementById('momMessage').innerText = "💬 الفيل هو الأكبر!";
|
|
selectedItem = "";
|
|
renderChallenge();
|
|
}
|
|
};
|
|
|
|
window.finishGame = function() {
|
|
if (selectedItem) {
|
|
completeLevel(3);
|
|
showCertificate();
|
|
} else {
|
|
document.getElementById('momMessage').innerText = "💬 اختر هديتك أولاً!";
|
|
}
|
|
};
|
|
|
|
function completeLevel(earned) {
|
|
if (completed[currentLevel]) return;
|
|
|
|
completed[currentLevel] = true;
|
|
starsEarned[currentLevel] = earned;
|
|
|
|
clearInterval(timerInterval);
|
|
document.getElementById('momMessage').innerText = `🌟 ممتاز! حصلت على ${earned} نجوم!`;
|
|
|
|
updateDisplay();
|
|
|
|
if (currentLevel < 4) {
|
|
setTimeout(() => {
|
|
currentLevel++;
|
|
selectedItem = "";
|
|
memoryItems = [];
|
|
patternChoice = "";
|
|
showMemory = true;
|
|
renderChallenge();
|
|
}, 1500);
|
|
} else {
|
|
showCertificate();
|
|
}
|
|
}
|
|
|
|
function showCertificate() {
|
|
let cert = `
|
|
<div class="certificate">
|
|
<h1>🏆 شهادة رائد الفضاء</h1>
|
|
<h2>${heroName || 'البطل'}</h2>
|
|
<p>أنت بطل الفضاء العظيم!</p>
|
|
<div style="font-size: 3rem; margin: 15px;">🌟🌟🌟</div>
|
|
<p>ذكي - شجاع - قوي</p>
|
|
</div>
|
|
`;
|
|
document.getElementById('challengeContent').innerHTML = cert;
|
|
document.getElementById('momMessage').innerHTML = "💬 ألف مبروك! أنت بطل حقيقي! 🚀";
|
|
}
|
|
|
|
// Start game
|
|
renderChallenge();
|
|
updateDisplay();
|
|
</script>
|
|
</body>
|
|
</html> |