<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Xelora Coin</title>
    <script src="https://telegram.org/js/telegram-web-app.js"></script>
    <style>
        :root {
            --bg-color: #1a0033;
            --card-bg: rgba(26, 0, 51, 0.5);
            --accent: #9333EA;
            --text: #fff;
            --text-secondary: #a78bfa;
            --border-color: rgba(255, 255, 255, 0.1);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        }

        body {
            background: var(--bg-color);
            color: var(--text);
            min-height: 100vh;
        }

        .header {
            background: rgba(0, 0, 0, 0.2);
            padding: 1rem;
            border-bottom: 1px solid var(--border-color);
        }

        .container {
            max-width: 600px;
            margin: 0 auto;
            padding: 1rem;
        }

        .nav-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: var(--text);
            text-decoration: none;
            font-weight: 600;
            font-size: 1.25rem;
        }

        .nav {
            background: rgba(255, 255, 255, 0.1);
            padding: 0.5rem;
            border-radius: 999px;
            display: inline-flex;
            gap: 0.5rem;
        }

        .nav-item {
            padding: 0.5rem 1rem;
            border-radius: 999px;
            color: var(--text);
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            cursor: pointer;
            font-size: 0.875rem;
        }

        .nav-item.active {
            background: rgba(255, 255, 255, 0.1);
        }

        .card {
            background: var(--card-bg);
            border-radius: 1rem;
            padding: 1.5rem;
            margin-bottom: 1rem;
            backdrop-filter: blur(10px);
            border: 1px solid var(--border-color);
        }

        .profile-card {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .avatar {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            background: var(--accent);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            overflow: hidden;
        }

        .avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .user-info {
            flex: 1;
        }

        .username {
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 0.25rem;
        }

        .balance {
            color: var(--text-secondary);
            font-family: monospace;
        }

        .game-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
        }

        .game-title {
            font-size: 1.25rem;
            font-weight: 600;
        }

        .game-stats {
            display: flex;
            gap: 0.5rem;
        }

        .stat {
            background: rgba(147, 51, 234, 0.1);
            padding: 0.5rem 1rem;
            border-radius: 999px;
            color: var(--text-secondary);
            font-size: 0.875rem;
        }

        .game-area {
            position: relative;
            height: 400px;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 1rem;
            overflow: hidden;
            display: none;
        }

        .game-start {
            text-align: center;
            padding: 3rem 1rem;
        }

        .game-start h2 {
            font-size: 1.5rem;
            margin-bottom: 1rem;
        }

        .game-start p {
            color: var(--text-secondary);
            margin-bottom: 0.5rem;
        }

        .game-start p.subtitle {
            font-size: 0.875rem;
            opacity: 0.7;
            margin-bottom: 2rem;
        }

        .xelora-coin {
            position: absolute;
            width: 48px;
            height: 48px;
            background: linear-gradient(135deg, var(--accent), #7c3aed);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            cursor: pointer;
            transition: transform 0.2s;
            box-shadow: 0 4px 12px rgba(147, 51, 234, 0.3);
        }

        .xelora-coin:hover {
            transform: scale(1.1);
        }

        .mining-card {
            text-align: center;
            padding: 2rem;
        }

        .mining-icon {
            width: 64px;
            height: 64px;
            margin: 0 auto 2rem;
        }

        .mining-stats {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
            color: var(--text-secondary);
        }

        .progress-bar {
            width: 100%;
            height: 4px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 2px;
            margin: 1rem 0;
            overflow: hidden;
        }

        .progress-bar-fill {
            height: 100%;
            background: var(--accent);
            width: 0%;
            transition: width 0.3s ease;
        }

        .mining-status {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            color: var(--text-secondary);
            margin: 1rem 0;
        }

        .button {
            background: var(--accent);
            color: var(--text);
            border: none;
            padding: 0.75rem 2rem;
            border-radius: 999px;
            font-weight: 500;
            cursor: pointer;
            transition: opacity 0.2s;
            width: 100%;
            font-size: 0.875rem;
        }

        .button:hover {
            opacity: 0.9;
        }

        .session-time {
            color: var(--text-secondary);
            margin-top: 1rem;
            font-family: monospace;
        }

        .wallet-section h2 {
            font-size: 1.5rem;
            margin-bottom: 1rem;
        }

        .wallet-section p {
            color: var(--text-secondary);
            margin-bottom: 1.5rem;
        }

        .token-list {
            margin-top: 1rem;
        }

        .token-item {
            display: flex;
            justify-content: space-between;
            padding: 1rem 0;
            border-bottom: 1px solid var(--border-color);
        }

        .token-item:last-child {
            border-bottom: none;
        }

        .token-name {
            color: var(--text);
        }

        .token-price {
            color: var(--text-secondary);
        }

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
        }
    </style>
</head>
<body>
    <header class="header">
        <div class="container nav-container">
            <div class="logo">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                    <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="#9333EA" stroke-width="2"/>
                    <path d="M8 12L12 8L16 12L12 16L8 12Z" fill="#9333EA"/>
                </svg>
                XELORA
            </div>
            <div class="nav">
                <div class="nav-item" data-tab="home">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
                    </svg>
                    Home
                </div>
                <div class="nav-item active" data-tab="mining">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M12 3h7a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-7m0-18H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h7m0-18v18"></path>
                    </svg>
                    Mining
                </div>
                <div class="nav-item" data-tab="wallet">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <rect x="2" y="4" width="20" height="16" rx="2"></rect>
                        <path d="M16 12h.01"></path>
                    </svg>
                    Wallet
                </div>
            </div>
        </div>
    </header>

    <main class="container">
        <!-- Home Tab -->
        <div id="homeTab" class="tab-content">
            <div class="card profile-card">
                <div id="userAvatar" class="avatar">X</div>
                <div class="user-info">
                    <div id="userName" class="username">@username</div>
                    <div class="balance">
                        <span id="userHomeBalance">0.0000</span> XEL
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="game-header">
                    <div class="game-title">Xelora Collector</div>
                    <div class="game-stats">
                        <div class="stat" id="timeLeft">Time: 30s</div>
                        <div class="stat" id="score">Score: 0</div>
                    </div>
                </div>

                <div id="gameStart" class="game-start">
                    <h2>Collect Xelora Coins!</h2>
                    <p>Click on the Xelora coins as fast as you can</p>
                    <p class="subtitle">You have 30 seconds - how many can you catch?</p>
                    <button id="startButton" class="button">Start Game</button>
                </div>

                <div id="gameArea" class="game-area"></div>
            </div>
        </div>

        <!-- Mining Tab -->
        <div id="miningTab" class="tab-content active">
            <div class="card mining-card">
                <svg class="mining-icon" viewBox="0 0 24 24" fill="none" stroke="#9333EA" stroke-width="2">
                    <path d="M2.5 8.5L12 2L21.5 8.5L12 22L2.5 8.5Z"/>
                </svg>
                
                <div class="mining-stats">
                    <span>Hash Rate:</span>
                    <span id="hashRate">0.00 H/s</span>
                </div>
                
                <div class="progress-bar">
                    <div id="miningProgress" class="progress-bar-fill"></div>
                </div>
                
                <div class="mining-status">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
                    </svg>
                    <span id="miningStatus">Mining Stopped</span>
                </div>
                
                <button id="startMining" class="button">Start Mining</button>
                
                <div class="session-time">
                    Session Time: <span id="sessionTime">00:00:00</span>
                </div>
            </div>
        </div>

        <!-- Wallet Tab -->
        <div id="walletTab" class="tab-content">
            <div class="card wallet-section">
                <h2>Connect Wallet</h2>
                <p>Connect your wallet to convert your mined XEL tokens into real cryptocurrency.</p>
                <button id="connectWallet" class="button">Connect Wallet</button>
            </div>

            <div class="card wallet-section">
                <h2>Your Balance</h2>
                <div class="wallet-balance">
                    <div class="balance-item">
                        <div>Available XEL</div>
                        <div class="balance-value" id="xelBalance">0.0000</div>
                    </div>
                    <div class="balance-item">
                        <div>Value in USD</div>
                        <div class="balance-value" id="usdBalance">$0.00</div>
                    </div>
                </div>
            </div>

            <div class="card wallet-section">
                <h2>Available Tokens</h2>
                <div class="token-list">
                    <div class="token-item">
                        <span class="token-name">ETH</span>
                        <span class="token-price">100 XEL</span>
                    </div>
                    <div class="token-item">
                        <span class="token-name">BNB</span>
                        <span class="token-price">50 XEL</span>
                    </div>
                    <div class="token-item">
                        <span class="token-name">MATIC</span>
                        <span class="token-price">25 XEL</span>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <script>
        // Initialize Telegram WebApp
        let tg = window.Telegram.WebApp;
        tg.expand();

        // Constants
        const WALLET_URL = "YOUR_WALLET_URL_HERE"; // Replace with your wallet URL
        const XEL_TO_USD_RATE = 0.1; // 1 XEL = $0.1 USD

        // Get user data from Telegram
        const userId = tg.initDataUnsafe?.user?.id || 'anonymous';
        const username = tg.initDataUnsafe?.user?.username || 'Guest';

        // Load saved balance from localStorage
        let userBalance = parseFloat(localStorage.getItem(`${userId}_balance`) || '0');
        updateBalanceDisplay();

        // Set user data
        document.getElementById('userName').textContent = '@' + username;
        if (tg.initDataUnsafe?.user?.photo_url) {
            document.getElementById('userAvatar').innerHTML = `
                <img src="${tg.initDataUnsafe.user.photo_url}" alt="Profile">
            `;
        }

        // Mining variables
        let isMining = false;
        let miningInterval;
        let sessionStart = null;
        let sessionInterval;

        // Game variables
        let isPlaying = false;
        let timeLeft = 30;
        let score = 0;
        let gameInterval;

        // Navigation
        document.querySelectorAll('.nav-item').forEach(item => {
            item.addEventListener('click', () => {
                document.querySelectorAll('.nav-item').forEach(tab => tab.classList.remove('active'));
                document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
                
                item.classList.add('active');
                document.getElementById(`${item.dataset.tab}Tab`).classList.add('active');
            });
        });

        // Mining functions
        function startMining() {
            isMining = true;
            document.getElementById('startMining').textContent = 'Stop Mining';
            document.getElementById('miningStatus').textContent = 'Mining Active';
            document.getElementById('miningStatus').style.color = '#10B981';
            sessionStart = new Date();
            
            miningInterval = setInterval(() => {
                const hashRate = (15 + Math.random() * 10).toFixed(2);
                document.getElementById('hashRate').textContent = `${hashRate} H/s`;
                
                const progress = parseInt(document.getElementById('miningProgress').style.width) || 0;
                const newProgress = (progress + 1) % 101;
                document.getElementById('miningProgress').style.width = `${newProgress}%`;
                
                if (newProgress === 100) {
                    userBalance += 0.0001;
                    localStorage.setItem(`${userId}_balance`, userBalance.toString());
                    updateBalanceDisplay();
                }
            }, 100);

            sessionInterval = setInterval(updateSessionTime, 1000);
        }

        function stopMining() {
            isMining = false;
            clearInterval(miningInterval);
            clearInterval(sessionInterval);
            document.getElementById('startMining').textContent = 'Start Mining';
            document.getElementById('miningStatus').textContent = 'Mining Stopped';
            document.getElementById('miningStatus').style.color = 'var(--text-secondary)';
            document.getElementById('hashRate').textContent = '0.00 H/s';
            document.getElementById('miningProgress').style.width = '0%';
            sessionStart = null;
        }

        function updateSessionTime() {
            if (!sessionStart) return;
            
            const now = new Date();
            const diff = now - sessionStart;
            const hours = Math.floor(diff / 3600000).toString().padStart(2, '0');
            const minutes = Math.floor((diff % 3600000) / 60000).toString().padStart(2, '0');
            const seconds = Math.floor((diff % 60000) / 1000).toString().padStart(2, '0');
            
            document.getElementById('sessionTime').textContent = `${hours}:${minutes}:${seconds}`;
        }

        // Game functions
        function createCoin() {
            const coin = document.createElement('div');
            coin.className = 'xelora-coin';
            coin.textContent = 'X';
            
            const gameArea = document.getElementById('gameArea');
            const maxX = gameArea.clientWidth - 48;
            const maxY = gameArea.clientHeight - 48;
            
            coin.style.left = `${Math.random() * maxX}px`;
            coin.style.top = `${Math.random() * maxY}px`;
            
            coin.onclick = () => {
                score++;
                document.getElementById('score').textContent = `Score: ${score}`;
                gameArea.removeChild(coin);
                createCoin();
            };
            
            gameArea.appendChild(coin);
        }

        function startGame() {
            isPlaying = true;
            score = 0;
            timeLeft = 30;
            document.getElementById('gameStart').style.display = 'none';
            document.getElementById('gameArea').style.display = 'block';
            document.getElementById('score').textContent = `Score: ${score}`;
            
            createCoin();
            
            gameInterval = setInterval(() => {
                timeLeft--;
                document.getElementById('timeLeft').textContent = `Time: ${timeLeft}s`;
                
                if (timeLeft <= 0) {
                    endGame();
                }
            }, 1000);
        }

        function endGame() {
            isPlaying = false;
            clearInterval(gameInterval);
            document.getElementById('gameArea').innerHTML = '';
            document.getElementById('gameArea').style.display = 'none';
            document.getElementById('gameStart').style.display = 'block';
            
            const reward = score * 0.0001;
            userBalance += reward;
            localStorage.setItem(`${userId}_balance`, userBalance.toString());
            updateBalanceDisplay();
            
            tg.sendData(JSON.stringify({
                type: 'game_complete',
                score: score,
                reward: reward
            }));
        }

        function updateBalanceDisplay() {
            const xelBalance = userBalance.toFixed(4);
            const usdBalance = (userBalance * XEL_TO_USD_RATE).toFixed(2);
            
            document.getElementById('xelBalance').textContent = xelBalance;
            document.getElementById('userHomeBalance').textContent = xelBalance;
            document.getElementById('usdBalance').textContent = `$${usdBalance}`;
        }

        // Event listeners
        document.getElementById('startMining').addEventListener('click', () => {
            if (isMining) {
                stopMining();
            } else {
                startMining();
            }
        });

        document.getElementById('startButton').addEventListener('click', startGame);

        document.getElementById('connectWallet').addEventListener('click', () => {
            window.open(WALLET_URL, '_blank');
        });

        // Handle Telegram theme changes
        tg.onEvent('themeChanged', function() {
            // Update theme colors if needed
        });
    </script>
</body>
</html>