Spaces:

FR1Eyad
/

undefined

Running

File size: 10,975 Bytes

<!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);
        }
        
        /* Animation for game entrance */
        @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">
        <!-- Main Menu -->
        <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">
                <!-- Sound Controls -->
                <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>
                
                <!-- Language Selector -->
                <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>
        
        <!-- Game Screen (initially hidden) -->
        <div id="game-screen" class="h-full hidden relative overflow-hidden">
            <!-- Game UI -->
            <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>
            
            <!-- Game Elements -->
            <div class="absolute bottom-0 left-0 w-full h-1/3 bg-blue-900">
                <!-- River -->
                <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>
                    <!-- Water animation would be added here with CSS or JS -->
                </div>
                
                <!-- Stones -->
                <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>
                
                <!-- Player -->
                <div id="player" class="absolute bottom-20 left-1/2 w-16 h-16 bg-amber-600 rounded-sm shadow-md cursor-grab block">
                    <!-- Player block -->
                </div>
</div>
            
            <!-- Construction Area -->
            <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">
                <!-- Pyramid base would be built here -->
            </div>
            
            <!-- Collected Stones Area -->
            <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">
                <!-- Collected stones would appear here -->
            </div>
        </div>
    </div>

    <script>
        feather.replace();
        
        // Language translations
        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: "إعادة التشغيل"
            }
        };
        
        // DOM elements
        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');
        
        // Current language
        let currentLanguage = 'en';
        
        // Update UI language
        function updateLanguage(lang) {
            currentLanguage = lang;
            document.documentElement.lang = lang;
            document.documentElement.dir = lang === 'ar' ? 'rtl' : 'ltr';
            
            const texts = translations[lang];
            
            // Update main menu
            document.querySelector('#main-menu h1').textContent = texts.title;
            document.querySelector('#main-menu p').textContent = texts.subtitle;
            startBtn.textContent = texts.start;
            
            // Update game UI
            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();
            }
        }
        
        // Event listeners
        startBtn.addEventListener('click', () => {
            mainMenu.style.display = 'none';
            gameScreen.style.display = 'block';
            updateLanguage(currentLanguage);
            
            // Here you would initialize the game
            // For now we'll just simulate some blocks being collected
            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');
                // Mute audio
            } else {
                icon.setAttribute('data-feather', 'volume-2');
                // Unmute audio
            }
            feather.replace();
        });
        
        languageSelect.addEventListener('change', (e) => {
            updateLanguage(e.target.value);
        });
        
        // Initialize
        updateLanguage('en');
    </script>
</body>
</html>