| <!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> |
|
|
