|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Pyramid Builder Adventure</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
background-color: #1a1a2e; |
|
|
color: #e6e6e6; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.game-container { |
|
|
perspective: 1000px; |
|
|
} |
|
|
|
|
|
.btn-primary { |
|
|
background: linear-gradient(135deg, #6e45e2 0%, #88d3ce 100%); |
|
|
box-shadow: 0 4px 15px rgba(110, 69, 226, 0.4); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.btn-primary:hover { |
|
|
transform: translateY(-3px); |
|
|
box-shadow: 0 6px 20px rgba(110, 69, 226, 0.6); |
|
|
} |
|
|
|
|
|
.btn-primary:active { |
|
|
transform: translateY(1px); |
|
|
} |
|
|
|
|
|
.volume-slider::-webkit-slider-thumb { |
|
|
-webkit-appearance: none; |
|
|
width: 20px; |
|
|
height: 20px; |
|
|
border-radius: 50%; |
|
|
background: #6e45e2; |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
.language-dropdown { |
|
|
background-color: #16213e; |
|
|
border: 1px solid #6e45e2; |
|
|
} |
|
|
|
|
|
.language-option { |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
|
|
|
.language-option:hover { |
|
|
background-color: rgba(110, 69, 226, 0.2); |
|
|
} |
|
|
|
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: scale(0.9); } |
|
|
to { opacity: 1; transform: scale(1); } |
|
|
} |
|
|
|
|
|
.fade-in { |
|
|
animation: fadeIn 0.5s ease-out forwards; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="flex items-center justify-center h-screen"> |
|
|
<div class="game-container w-full max-w-4xl h-[600px] bg-gradient-to-br from-gray-900 to-gray-800 rounded-2xl overflow-hidden shadow-2xl fade-in"> |
|
|
|
|
|
<div id="main-menu" class="h-full flex flex-col items-center justify-center p-8"> |
|
|
<h1 class="text-5xl font-bold mb-6 text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-cyan-300"> |
|
|
Pyramid Builder Adventure |
|
|
</h1> |
|
|
|
|
|
<p class="text-xl mb-12 text-gray-300 text-center max-w-2xl"> |
|
|
Collect stones from the river and stack them to build an ancient pyramid! |
|
|
</p> |
|
|
<button id="start-btn" class="btn-primary px-12 py-4 rounded-full text-xl font-semibold mb-16"> |
|
|
Start Game |
|
|
</button> |
|
|
<a href="game.html" class="btn-primary px-12 py-4 rounded-full text-xl font-semibold mb-16 hidden" id="direct-start-btn"> |
|
|
Play Directly |
|
|
</a> |
|
|
<div class="w-full max-w-md space-y-8"> |
|
|
|
|
|
<div class="flex items-center space-x-4"> |
|
|
<i data-feather="volume-2" class="text-gray-300"></i> |
|
|
<input type="range" min="0" max="100" value="70" class="volume-slider w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"> |
|
|
<button id="mute-btn" class="text-gray-300 hover:text-white"> |
|
|
<i data-feather="volume-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="relative"> |
|
|
<select id="language-select" class="language-dropdown w-full py-3 px-4 pr-8 rounded-lg text-gray-300 appearance-none focus:outline-none focus:ring-2 focus:ring-purple-500"> |
|
|
<option value="en" class="language-option flex items-center"> |
|
|
<img src="https://flagcdn.com/w20/gb.png" class="w-5 h-5 mr-2"> English |
|
|
</option> |
|
|
<option value="ar" class="language-option flex items-center"> |
|
|
<img src="https://flagcdn.com/w20/sa.png" class="w-5 h-5 mr-2"> العربية |
|
|
</option> |
|
|
</select> |
|
|
<div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none"> |
|
|
<i data-feather="chevron-down" class="text-gray-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="game-screen" class="h-full hidden relative overflow-hidden"> |
|
|
|
|
|
<div class="absolute top-4 left-4 z-10 bg-black bg-opacity-50 rounded-lg p-3 flex items-center"> |
|
|
<span id="blocks-counter" class="font-bold text-white">Blocks: 0/10</span> |
|
|
</div> |
|
|
|
|
|
<div class="absolute top-4 right-4 z-10 flex space-x-3"> |
|
|
<button id="pause-btn" class="bg-black bg-opacity-50 p-2 rounded-lg text-white hover:bg-opacity-70"> |
|
|
<i data-feather="pause"></i> |
|
|
</button> |
|
|
<button id="restart-btn" class="bg-black bg-opacity-50 p-2 rounded-lg text-white hover:bg-opacity-70"> |
|
|
<i data-feather="refresh-cw"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="absolute bottom-0 left-0 w-full h-1/3 bg-blue-900"> |
|
|
|
|
|
<div class="absolute inset-0 overflow-hidden"> |
|
|
<div class="water absolute bottom-0 left-0 right-0 h-full bg-blue-700 opacity-70"></div> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="absolute bottom-20 left-1/4 w-16 h-16 bg-gray-500 rounded-lg transform rotate-12"></div> |
|
|
<div class="absolute bottom-16 right-1/3 w-14 h-14 bg-gray-600 rounded-lg transform -rotate-6"></div> |
|
|
<div class="absolute bottom-24 left-2/3 w-12 h-12 bg-gray-400 rounded-lg transform rotate-3"></div> |
|
|
|
|
|
|
|
|
<div id="player" class="absolute bottom-20 left-1/2 w-16 h-16 bg-amber-600 rounded-sm shadow-md cursor-grab block"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="absolute bottom-1/3 right-1/4 w-32 h-32 bg-yellow-900 bg-opacity-30 rounded-lg border-2 border-dashed border-yellow-500"> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="absolute bottom-1/3 left-1/4 w-32 h-16 bg-gray-800 bg-opacity-50 rounded-lg flex items-end justify-center space-x-1"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
feather.replace(); |
|
|
|
|
|
|
|
|
const translations = { |
|
|
en: { |
|
|
title: "Pyramid Builder Adventure", |
|
|
subtitle: "Collect stones from the river and stack them to build an ancient pyramid!", |
|
|
start: "Start Game", |
|
|
blocks: "Blocks", |
|
|
pause: "Pause", |
|
|
restart: "Restart" |
|
|
}, |
|
|
ar: { |
|
|
title: "مغامرة بناء الهرم", |
|
|
subtitle: "اجمع الحجارة من النهر وقم بترتيبها لبناء هرم قديم!", |
|
|
start: "ابدأ اللعبة", |
|
|
blocks: "الكتل", |
|
|
pause: "إيقاف مؤقت", |
|
|
restart: "إعادة التشغيل" |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
const mainMenu = document.getElementById('main-menu'); |
|
|
const gameScreen = document.getElementById('game-screen'); |
|
|
const startBtn = document.getElementById('start-btn'); |
|
|
const muteBtn = document.getElementById('mute-btn'); |
|
|
const languageSelect = document.getElementById('language-select'); |
|
|
const blocksCounter = document.getElementById('blocks-counter'); |
|
|
const pauseBtn = document.getElementById('pause-btn'); |
|
|
const restartBtn = document.getElementById('restart-btn'); |
|
|
|
|
|
|
|
|
let currentLanguage = 'en'; |
|
|
|
|
|
|
|
|
function updateLanguage(lang) { |
|
|
currentLanguage = lang; |
|
|
document.documentElement.lang = lang; |
|
|
document.documentElement.dir = lang === 'ar' ? 'rtl' : 'ltr'; |
|
|
|
|
|
const texts = translations[lang]; |
|
|
|
|
|
|
|
|
document.querySelector('#main-menu h1').textContent = texts.title; |
|
|
document.querySelector('#main-menu p').textContent = texts.subtitle; |
|
|
startBtn.textContent = texts.start; |
|
|
|
|
|
|
|
|
if (gameScreen.style.display !== 'none') { |
|
|
blocksCounter.textContent = `${texts.blocks}: 0/10`; |
|
|
pauseBtn.innerHTML = `<i data-feather="pause"></i>`; |
|
|
restartBtn.innerHTML = `<i data-feather="refresh-cw"></i>`; |
|
|
feather.replace(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
startBtn.addEventListener('click', () => { |
|
|
mainMenu.style.display = 'none'; |
|
|
gameScreen.style.display = 'block'; |
|
|
updateLanguage(currentLanguage); |
|
|
|
|
|
|
|
|
|
|
|
let blocks = 0; |
|
|
const interval = setInterval(() => { |
|
|
if (blocks >= 10) { |
|
|
clearInterval(interval); |
|
|
return; |
|
|
} |
|
|
blocks++; |
|
|
blocksCounter.textContent = `${translations[currentLanguage].blocks}: ${blocks}/10`; |
|
|
}, 1000); |
|
|
}); |
|
|
|
|
|
muteBtn.addEventListener('click', () => { |
|
|
const icon = muteBtn.querySelector('i'); |
|
|
if (icon.getAttribute('data-feather') === 'volume-2') { |
|
|
icon.setAttribute('data-feather', 'volume-x'); |
|
|
|
|
|
} else { |
|
|
icon.setAttribute('data-feather', 'volume-2'); |
|
|
|
|
|
} |
|
|
feather.replace(); |
|
|
}); |
|
|
|
|
|
languageSelect.addEventListener('change', (e) => { |
|
|
updateLanguage(e.target.value); |
|
|
}); |
|
|
|
|
|
|
|
|
updateLanguage('en'); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
