ghaymah_dev/space_young
1
0
نسخ 0
الشفرة المشكلات طلبات السحب Actions Packages المشاريع الإصدارات الويكي النشاط

Add index.html

تصفح المصدر
هذا الالتزام موجود في:
ghaymah_dev
2026-03-03 07:27:47 +00:00
التزام bdf8505a36
1 ملفات معدلة مع 682 إضافات و0 حذوفات
تنزيل ملف التصحيح تنزيل ملف الاختلاف توسيع جميع الملفات طي جميع الملفات

682
index.html Normal file
عرض الملف

@@ -0,0 +1,682 @@
<!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>