Spaces:

ZMaxAIru
/

ppl

Running

App Files Files Community

ZMaxAIru commited on Mar 28

Commit

fde372b

verified ·

1 Parent(s): 98fb3ce

Add 1 files

Browse files

Files changed (1) hide show

index.html +821 -1148

index.html CHANGED Viewed

@@ -3,1334 +3,1007 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Пиксельный Майнинг</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         :root {
             --bg-color: #1a1a2e;
-            --primary-color: #4ecca3;
-            --secondary-color: #eeeeee;
-            --danger-color: #f05454;
-            --silver-color: #c0c0c0;
-            --gold-color: #ffd700;
-            --diamond-color: #b9f2ff;
-            --canvas-bg: #16213e;
-            --card-bg: #0f3460;
             --text-color: #e6e6e6;
         }
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
-            font-family: 'Courier New', monospace;
         }
         body {
             background-color: var(--bg-color);
             color: var(--text-color);
             min-height: 100vh;
             overflow-x: hidden;
         }
         .container {
-            max-width: 1200px;
             margin: 0 auto;
-            padding: 20px;
         }
         header {
             display: flex;
             justify-content: space-between;
             align-items: center;
-            padding: 15px 0;
-            border-bottom: 2px solid var(--primary-color);
-            margin-bottom: 20px;
         }
         .logo {
-            display: flex;
-            align-items: center;
-            gap: 10px;
-            font-size: 24px;
-            font-weight: bold;
-            color: var(--primary-color);
-        }
-        .logo img {
-            width: 40px;
-            height: 40px;
-        }
-        .nav-tabs {
-            display: flex;
-            gap: 15px;
-        }
-        .tab {
-            padding: 8px 15px;
-            border-radius: 20px;
-            cursor: pointer;
-            transition: all 0.3s;
             font-weight: bold;
         }
-        .tab:hover {
-            background-color: var(--card-bg);
-        }
-        .tab.active {
-            background-color: var(--primary-color);
-            color: var(--bg-color);
-        }
-        .user-profile {
             display: flex;
             align-items: center;
-            gap: 10px;
         }
-        .avatar {
-            width: 40px;
-            height: 40px;
             border-radius: 50%;
-            border: 2px solid var(--primary-color);
-        }
-        .pix-balance {
-            background-color: var(--card-bg);
-            padding: 5px 10px;
-            border-radius: 20px;
-            font-weight: bold;
-            display: flex;
-            align-items: center;
-            gap: 5px;
-        }
-        .pix-balance i {
-            color: var(--gold-color);
-        }
-        .main-content {
-            display: flex;
-            flex-direction: column;
-            gap: 30px;
         }
-        .section-title {
-            font-size: 22px;
-            margin-bottom: 15px;
-            color: var(--primary-color);
-            display: flex;
-            align-items: center;
-            gap: 10px;
-        }
-        /* Mining Section */
         .mining-section {
-            background-color: var(--card-bg);
-            border-radius: 15px;
-            padding: 20px;
-            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
-        }
-        .block-info {
             display: flex;
-            justify-content: space-between;
             margin-bottom: 20px;
-            flex-wrap: wrap;
-            gap: 15px;
-        }
-        .info-card {
-            background-color: var(--bg-color);
-            padding: 15px;
-            border-radius: 10px;
-            flex: 1;
-            min-width: 150px;
-        }
-        .info-card h3 {
-            font-size: 14px;
-            margin-bottom: 5px;
-            color: var(--primary-color);
         }
-        .info-card p {
-            font-size: 18px;
-            font-weight: bold;
-        }
-        .pixel-canvas-container {
             position: relative;
-            margin: 20px auto;
-            max-width: 600px;
         }
         .pixel-canvas {
             display: grid;
-            background-color: var(--canvas-bg);
-            border: 4px solid var(--primary-color);
-            border-radius: 5px;
-            overflow: hidden;
         }
         .pixel {
-            aspect-ratio: 1/1;
-            background-color: #2b2b3a;
-            border: 1px solid rgba(0, 0, 0, 0.1);
             cursor: pointer;
-            transition: all 0.2s;
-            position: relative;
-            overflow: hidden;
         }
         .pixel:hover {
-            filter: brightness(1.2);
         }
-        .pixel.mined {
-            background-color: #4ecca3;
         }
-        .pixel.silver {
-            background-color: var(--silver-color);
         }
-        .pixel.gold {
-            background-color: var(--gold-color);
         }
-        .pixel.diamond {
-            background-color: var(--diamond-color);
         }
-        .pixel-value {
-            position: absolute;
-            bottom: 2px;
-            right: 2px;
-            font-size: 8px;
-            font-weight: bold;
-            color: #000;
-            opacity: 0.7;
         }
-        .mine-button-container {
             display: flex;
-            justify-content: center;
-            margin-top: 20px;
         }
-        .mine-btn {
-            background-color: var(--primary-color);
-            color: var(--bg-color);
             border: none;
-            padding: 15px 30px;
-            font-size: 18px;
-            border-radius: 50px;
-            cursor: pointer;
-            transition: all 0.3s;
             font-weight: bold;
             display: flex;
             align-items: center;
-            gap: 10px;
-            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
         }
-        .mine-btn:hover {
-            transform: translateY(-3px);
-            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
         }
-        .mine-btn:active {
-            transform: translateY(0);
         }
-        .mine-btn i {
-            animation: pulse 2s infinite;
         }
-        @keyframes pulse {
-            0% { transform: scale(1); }
-            50% { transform: scale(1.2); }
-            100% { transform: scale(1); }
         }
-        /* Leaderboard Section */
-        .leaderboard-section {
-            background-color: var(--card-bg);
-            border-radius: 15px;
-            padding: 20px;
-            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
         }
         .leaderboard {
             width: 100%;
             border-collapse: collapse;
         }
-        .leaderboard th, .leaderboard td {
-            padding: 12px 15px;
             text-align: left;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
         }
-        .leaderboard th {
-            color: var(--primary-color);
-            font-size: 16px;
         }
-        .leaderboard tr:hover {
-            background-color: rgba(255, 255, 255, 0.05);
         }
-        .leaderboard .rank {
-            font-weight: bold;
-            width: 50px;
         }
-        .leaderboard .user {
             display: flex;
-            align-items: center;
-            gap: 10px;
         }
-        .leaderboard .user-avatar {
-            width: 30px;
-            height: 30px;
-            border-radius: 50%;
         }
-        .leaderboard .pix {
-            display: flex;
-            align-items: center;
-            gap: 5px;
-            color: var(--gold-color);
-            font-weight: bold;
         }
-        /* Blocks History */
-        .history-section {
-            background-color: var(--card-bg);
-            border-radius: 15px;
-            padding: 20px;
-            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
-            margin-bottom: 50px;
         }
-        .blocks-grid {
             display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-            gap: 15px;
-            margin-top: 20px;
         }
-        .block-card {
-            background-color: var(--bg-color);
-            border-radius: 10px;
-            overflow: hidden;
             cursor: pointer;
-            transition: all 0.3s;
-            position: relative;
-        }
-        .block-card:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
-        }
-        .block-preview {
-            width: 100%;
-            height: 150px;
-        }
-        .block-info-overlay {
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0, 0, 0, 0.7);
-            padding: 10px;
-        }
-        .block-number {
-            font-size: 14px;
-            font-weight: bold;
-            color: var(--primary-color);
-        }
-        .block-creator {
-            font-size: 12px;
-            display: -webkit-box;
-            -webkit-line-clamp: 1;
-            -webkit-box-orient: vertical;
             overflow: hidden;
-            text-overflow: ellipsis;
         }
-        /* Modal */
-        .modal {
-            display: none;
-            position: fixed;
-            top: 0;
-            left: 0;
             width: 100%;
             height: 100%;
-            background-color: rgba(0, 0, 0, 0.8);
-            z-index: 1000;
-            justify-content: center;
-            align-items: center;
         }
-        .modal-content {
-            background-color: var(--card-bg);
-            border-radius: 15px;
-            padding: 30px;
-            max-width: 500px;
-            width: 90%;
-            position: relative;
-            max-height: 90vh;
-            overflow-y: auto;
         }
-        .close-modal {
-            position: absolute;
-            top: 15px;
-            right: 15px;
-            font-size: 24px;
-            cursor: pointer;
-            color: var(--text-color);
-            transition: all 0.3s;
-        }
-        .close-modal:hover {
-            color: var(--danger-color);
-        }
-        .modal-title {
-            font-size: 24px;
-            margin-bottom: 20px;
-            color: var(--primary-color);
-            text-align: center;
         }
-        /* Responsive */
-        @media (max-width: 768px) {
-            .nav-tabs {
-                display: none;
             }
-            .user-profile {
-                margin-left: auto;
-            }
-            .block-info {
-                flex-direction: column;
-            }
-            .info-card {
-                min-width: 100%;
-            }
-            .leaderboard th, .leaderboard td {
-                padding: 10px 12px;
-                font-size: 14px;
             }
-            .blocks-grid {
-                grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
             }
         }
-        /* Pixel animation */
-        @keyframes reveal {
-            0% { transform: scale(0); opacity: 0; }
-            100% { transform: scale(1); opacity: 1; }
-        }
-        .pixel.reveal {
-            animation: reveal 0.3s ease-out;
-        }
-        /* Badges */
-        .badge {
-            padding: 2px 5px;
-            border-radius: 3px;
-            font-size: 10px;
-            font-weight: bold;
-            margin-left: 5px;
-        }
-        .badge.silver {
-            background-color: var(--silver-color);
-            color: #000;
-        }
-        .badge.gold {
-            background-color: var(--gold-color);
-            color: #000;
-        }
-        .badge.diamond {
-            background-color: var(--diamond-color);
-            color: #000;
-        }
-        /* Notification */
-        .notification {
-            position: fixed;
-            bottom: 20px;
-            right: 20px;
-            background-color: var(--primary-color);
-            color: var(--bg-color);
-            padding: 15px 20px;
-            border-radius: 10px;
-            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
-            transform: translateY(100px);
-            opacity: 0;
-            transition: all 0.3s;
-            z-index: 100;
-        }
-        .notification.show {
-            transform: translateY(0);
-            opacity: 1;
-        }
-        .notification-title {
-            font-weight: bold;
-            margin-bottom: 5px;
-        }
-        /* Tutorial tooltip */
-        .tooltip {
-            position: relative;
-            display: inline-block;
-            margin-left: 10px;
-        }
-        .tooltip .tooltip-text {
-            visibility: hidden;
-            width: 200px;
-            background-color: var(--bg-color);
-            color: var(--text-color);
-            text-align: center;
-            border-radius: 6px;
-            padding: 10px;
-            position: absolute;
-            z-index: 1;
-            bottom: 125%;
-            left: 50%;
-            margin-left: -100px;
-            opacity: 0;
-            transition: opacity 0.3s;
-            border: 1px solid var(--primary-color);
-        }
-        .tooltip:hover .tooltip-text {
-            visibility: visible;
-            opacity: 1;
-        }
     </style>
 </head>
 <body>
     <div class="container">
         <header>
-            <div class="logo">
-                <i class="fas fa-cubes"></i>
-                <span>Пиксельный Майнинг</span>
             </div>
-            <div class="nav-tabs">
-                <div class="tab active" onclick="showTab('mining')">
-                    <i class="fas fa-digging"></i> Майнинг
-                </div>
-                <div class="tab" onclick="showTab('profile')">
-                    <i class="fas fa-user"></i> Профиль
-                </div>
-                <div class="tab" onclick="showTab('wallet')">
-                    <i class="fas fa-wallet"></i> Кошелек
-                </div>
-                <div class="tab" onclick="showTab('leaderboard')">
-                    <i class="fas fa-trophy"></i> Топ игроков
-                </div>
-                <div class="tab" onclick="showTab('history')">
-                    <i class="fas fa-history"></i> История блоков
-                </div>
             </div>
-            <div class="user-profile">
-                <div class="pix-balance">
-                    <i class="fas fa-coins"></i>
-                    <span id="userBalance">1,240</span> ПИКС
                 </div>
-                <img src="https://i.pravatar.cc/150?img=5" alt="Avatar" class="avatar">
             </div>
-        </header>
-        <div class="main-content">
-            <div id="mining-tab" class="tab-content">
-                <section class="mining-section">
-                    <h2 class="section-title">
-                        <i class="fas fa-digging"></i> Текущий Блок
-                        <div class="tooltip">
-                            <i class="fas fa-question-circle"></i>
-                            <span class="tooltip-text">Добывайте пиксели вместе с другими игроками! Чем больше пикселей вы откроете, тем больше очков получите.</span>
-                        </div>
-                    </h2>
-                    <div class="block-info">
-                        <div class="info-card">
-                            <h3>Текущий Блок</h3>
-                            <p>#42</p>
-                        </div>
-                        <div class="info-card">
-                            <h3>Прогресс</h3>
-                            <p>76%</p>
-                        </div>
-                        <div class="info-card">
-                            <h3>Пикселей</h3>
-                            <p>76/100</p>
-                        </div>
-                        <div class="info-card">
-                            <h3>Создатель</h3>
-                            <p>-</p>
-                        </div>
                     </div>
-                    <div class="pixel-canvas-container">
-                        <div id="pixelCanvas" class="pixel-canvas"></div>
                     </div>
-                    <div class="mine-button-container">
-                        <button id="mineBtn" class="mine-btn" onclick="minePixel()">
-                            <i class="fas fa-hammer"></i> Добыть Пиксель
-                        </button>
                     </div>
-                </section>
-                <section class="leaderboard-section">
-                    <h2 class="section-title"><i class="fas fa-trophy"></i> Топ Блока</h2>
-                    <div class="table-responsive">
-                        <table class="leaderboard">
-                            <thead>
-                                <tr>
-                                    <th class="rank">#</th>
-                                    <th>Игрок</th>
-                                    <th>Пикселей</th>
-                                    <th>Очки</th>
-                                </tr>
-                            </thead>
-                            <tbody id="blockLeaderboard">
-                                <!-- Filled by JS -->
-                            </tbody>
-                        </table>
                     </div>
-                </section>
-            </div>
-            <div id="leaderboard-tab" class="tab-content" style="display: none;">
-                <section class="leaderboard-section">
-                    <h2 class="section-title"><i class="fas fa-trophy"></i> Топ Игроков</h2>
-                    <div class="table-responsive">
-                        <table class="leaderboard">
-                            <thead>
-                                <tr>
-                                    <th class="rank">#</th>
-                                    <th>Игрок</th>
-                                    <th>Блоков</th>
-                                    <th>Очки</th>
-                                </tr>
-                            </thead>
-                            <tbody id="globalLeaderboard">
-                                <!-- Filled by JS -->
-                            </tbody>
-                        </table>
                     </div>
-                </section>
-            </div>
-            <div id="history-tab" class="tab-content" style="display: none;">
-                <section class="history-section">
-                    <h2 class="section-title"><i class="fas fa-history"></i> История Блоков</h2>
-                    <div class="blocks-grid" id="blocksGrid">
-                        <!-- Filled by JS -->
                     </div>
-                </section>
-            </div>
-        </div>
-    </div>
-    <!-- Block Details Modal -->
-    <div id="blockModal" class="modal">
-        <div class="modal-content">
-            <span class="close-modal" onclick="closeModal('blockModal')">&times;</span>
-            <h2 class="modal-title">Блок #<span id="modalBlockNumber"></span></h2>
-            <div class="block-info" style="margin-bottom: 20px;">
-                <div class="info-card">
-                    <h3>Создатель</h3>
-                    <p id="modalCreator">Username</p>
-                </div>
-                <div class="info-card">
-                    <h3>Дата завершения</h3>
-                    <p id="modalDate">01.01.2023</p>
-                </div>
-                <div class="info-card">
-                    <h3>Всего пикселей</h3>
-                    <p id="modalPixels">100</p>
-                </div>
-                <div class="info-card">
-                    <h3>Редкие пиксели</h3>
-                    <p id="modalRare">3</p>
                 </div>
             </div>
-            <div style="text-align: center; margin: 20px 0;">
-                <div id="modalBlockPreview" class="pixel-canvas" style="display: inline-grid; width: 200px;"></div>
-            </div>
-            <div class="section-title" style="margin-top: 30px;">
-                <i class="fas fa-crown"></i> Топ игроков блока
-            </div>
-            <div class="table-responsive">
                 <table class="leaderboard">
                     <thead>
                         <tr>
-                            <th class="rank">#</th>
-                            <th>Игрок</th>
-                            <th>Пикселей</th>
                             <th>Очки</th>
                         </tr>
                     </thead>
-                    <tbody id="modalLeaderboard">
-                        <!-- Filled by JS -->
                     </tbody>
                 </table>
             </div>
-            <div style="text-align: center; margin-top: 20px;">
-                <button class="mine-btn" style="padding: 10px 20px;">
-                    <i class="fas fa-user-astronaut"></i> Сделать Аватаром
-                </button>
             </div>
         </div>
-    </div>
-    <!-- Notification -->
-    <div id="notification" class="notification">
-        <div class="notification-title">Пиксель добыт!</div>
-        <div class="notification-message">Вы получили <span class="pix-earned">15</span> ПИКС</div>
     </div>
     <script>
-        // Game configuration
-        const config = {
-            currentBlock: 42,
-            blockSize: 100,
-            minedPixels: 76,
-            baseReward: 10,
-            rewards: {
-                common: 10,
-                silver: 30,
-                gold: 75,
-                diamond: 200
-            },
-            rareChances: {
-                silver: 0.1,
-                gold: 0.025,
-                diamond: 0.005
-            }
-        };
-        // Sample data
-        const sampleUsers = [
-            { id: 1, name: "User1", avatar: "https://i.pravatar.cc/150?img=1", pixels: 24, points: 420 },
-            { id: 2, name: "User2", avatar: "https://i.pravatar.cc/150?img=2", pixels: 18, points: 315 },
-            { id: 3, name: "User3", avatar: "https://i.pravatar.cc/150?img=3", pixels: 12, points: 210 },
-            { id: 4, name: "User4", avatar: "https://i.pravatar.cc/150?img=4", pixels: 10, points: 175 },
-            { id: 5, name: "User5", avatar: "https://i.pravatar.cc/150?img=5", pixels: 8, points: 140 }
-        ];
-        const globalLeaders = [
-            { id: 1, name: "TopMiner", avatar: "https://i.pravatar.cc/150?img=6", blocks: 12, points: 12450 },
-            { id: 2, name: "PixMaster", avatar: "https://i.pravatar.cc/150?img=7", blocks: 9, points: 9860 },
-            { id: 3, name: "BlockCreator", avatar: "https://i.pravatar.cc/150?img=8", blocks: 7, points: 7820 },
-            { id: 4, name: "User5", avatar: "https://i.pravatar.cc/150?img=5", blocks: 6, points: 6540 },
-            { id: 5, name: "Newbie", avatar: "https://i.pravatar.cc/150?img=9", blocks: 5, points: 5210 },
-            { id: 6, name: "ProMiner", avatar: "https://i.pravatar.cc/150?img=10", blocks: 4, points: 4320 },
-            { id: 7, name: "PixelKing", avatar: "https://i.pravatar.cc/150?img=11", blocks: 3, points: 3210 },
-            { id: 8, name: "DiamondHunter", avatar: "https://i.pravatar.cc/150?img=12", blocks: 2, points: 2450 },
-            { id: 9, name: "SilverCollector", avatar: "https://i.pravatar.cc/150?img=13", blocks: 2, points: 1980 },
-            { id: 10, name: "LuckyOne", avatar: "https://i.pravatar.cc/150?img=14", blocks: 1, points: 1250 }
-        ];
-        const blocksHistory = [
-            { id: 41, creator: "TopMiner", date: "20.05.2023", pixels: 90, rare: 4, image: generateFakeBlock(10, 9, 41) },
-            { id: 40, creator: "PixMaster", date: "18.05.2023", pixels: 81, rare: 3, image: generateFakeBlock(9, 9, 40) },
-            { id: 39, creator: "BlockCreator", date: "15.05.2023", pixels: 64, rare: 2, image: generateFakeBlock(8, 8, 39) },
-            { id: 38, creator: "User5", date: "12.05.2023", pixels: 49, rare: 1, image: generateFakeBlock(7, 7, 38) },
-            { id: 37, creator: "ProMiner", date: "10.05.2023", pixels: 36, rare: 1, image: generateFakeBlock(6, 6, 37) },
-            { id: 36, creator: "Newbie", date: "08.05.2023", pixels: 25, rare: 0, image: generateFakeBlock(5, 5, 36) }
-        ];
-        // Generate a fake block image for the history
-        function generateFakeBlock(width, height, seed) {
-            const types = ['common', 'silver', 'gold', 'diamond'];
-            const pixels = [];
-            // Simple seeded random function
-            function random(min, max) {
-                const x = Math.sin(seed++) * 10000;
-                return Math.floor((x - Math.floor(x)) * (max - min + 1) + min);
-            }
-            for (let y = 0; y < height; y++) {
-                const row = [];
-                for (let x = 0; x < width; x++) {
-                    const rand = random(0, 100);
-                    let type = 'common';
-                    if (rand > 99) type = 'diamond';
-                    else if (rand > 97) type = 'gold';
-                    else if (rand > 90) type = 'silver';
-                    row.push(type);
                 }
-                pixels.push(row);
-            }
-            return {
-                width,
-                height,
-                pixels
             };
-        }
-        // Current state
-        let currentUser = {
-            id: 5,
-            name: "User5",
-            avatar: "https://i.pravatar.cc/150?img=5",
-            balance: 1240,
-            mined: 0,
-            points: 0
-        };
-        let blockPixels = generateInitialBlock(10, 10);
-        // Initialize the game
-        document.addEventListener('DOMContentLoaded', function() {
-            renderCanvas();
-            renderBlockLeaderboard();
-            renderGlobalLeaderboard();
-            renderBlocksHistory();
-            // Simulate some mined pixels (for demo purposes)
-            setTimeout(() => {
-                simulateMinedPixels();
-            }, 1000);
-        });
-        // Generate initial block with given width and height
-        function generateInitialBlock(width, height) {
-            const pixels = [];
-            const total = width * height;
-            const minedCount = Math.floor(total * 0.76); // 76% mined
-            // Create empty pixel grid
-            for (let y = 0; y < height; y++) {
-                const row = [];
-                for (let x = 0; x < width; x++) {
-                    row.push({
-                        x,
-                        y,
-                        mined: false,
-                        type: 'common',
-                        miner: null,
-                        value: 0
-                    });
-                }
-                pixels.push(row);
-            }
-            // Mark some pixels as mined (for demo)
-            for (let i = 0; i < minedCount; i++) {
-                const x = Math.floor(Math.random() * width);
-                const y = Math.floor(Math.random() * height);
-                if (!pixels[y][x].mined) {
-                    const rand = Math.random() * 100;
-                    let type = 'common';
-                    let value = config.rewards.common;
-                    if (rand > 99.5) {
-                        type = 'diamond';
-                        value = config.rewards.diamond;
-                    } else if (rand > 97.5) {
-                        type = 'gold';
-                        value = config.rewards.gold;
-                    } else if (rand > 90) {
-                        type = 'silver';
-                        value = config.rewards.silver;
-                    }
-                    const miner = sampleUsers[Math.floor(Math.random() * sampleUsers.length)];
-                    pixels[y][x] = {
-                        x,
-                        y,
-                        mined: true,
-                        type,
-                        miner,
-                        value
-                    };
-                } else {
-                    i--; // Try again if this pixel is already mined
                 }
             }
-            return pixels;
-        }
-        // Render the pixel canvas
-        function renderCanvas() {
-            const canvas = document.getElementById('pixelCanvas');
-            canvas.innerHTML = '';
-            const width = blockPixels[0].length;
-            const height = blockPixels.length;
-            canvas.style.gridTemplateColumns = `repeat(${width}, 1fr)`;
-            canvas.style.gridTemplateRows = `repeat(${height}, 1fr)`;
-            blockPixels.forEach(row => {
-                row.forEach(pixel => {
-                    const pixelEl = document.createElement('div');
-                    pixelEl.className = 'pixel' + (pixel.mined ? ` mined ${pixel.type}` : '');
-                    if (pixel.mined) {
-                        pixelEl.innerHTML = `<div class="pixel-value">${pixel.value}</div>`;
-                        if (pixel.miner.id === currentUser.id) {
-                            pixelEl.style.boxShadow = 'inset 0 0 0 2px var(--primary-color)';
-                        }
-                    }
-                    canvas.appendChild(pixelEl);
-                });
-            });
-        }
-        // Simulate some mined pixels (for demo)
-        function simulateMinedPixels() {
-            const width = blockPixels[0].length;
-            const height = blockPixels.length;
-            const unmined = [];
-            // Find all unmined pixels
-            for (let y = 0; y < height; y++) {
-                for (let x = 0; x < width; x++) {
-                    if (!blockPixels[y][x].mined) {
-                        unmined.push({x, y});
-                    }
                 }
-            }
-            // "Mine" a few pixels
-            for (let i = 0; i < 3; i++) {
-                if (unmined.length === 0) break;
-                const idx = Math.floor(Math.random() * unmined.length);
-                const {x, y} = unmined[idx];
-                unmined.splice(idx, 1);
-                const rand = Math.random() * 100;
-                let type = 'common';
-                let value = config.rewards.common;
-                if (rand > 99.5) {
-                    type = 'diamond';
-                    value = config.rewards.diamond;
-                } else if (rand > 97.5) {
-                    type = 'gold';
-                    value = config.rewards.gold;
-                } else if (rand > 90) {
-                    type = 'silver';
-                    value = config.rewards.silver;
                 }
-                const miner = sampleUsers[Math.floor(Math.random() * sampleUsers.length)];
-                blockPixels[y][x] = {x, y, mined: true, type, miner, value};
-                // Animate the pixel
-                setTimeout(() => {
-                    const canvas = document.getElementById('pixelCanvas');
-                    const pixelEl = canvas.children[y * width + x];
-                    pixelEl.className = 'pixel mined ' + type + ' reveal';
-                    pixelEl.innerHTML = `<div class="pixel-value">${value}</div>`;
-                    if (miner.id === currentUser.id) {
-                        pixelEl.style.boxShadow = 'inset 0 0 0 2px var(--primary-color)';
-                        showNotification(`Вы получили ${value} ПИКС!`, type);
-                    }
-                }, i * 300);
             }
-            // Update progress
-            updateProgress();
-        }
-        // Mine a pixel
-        function minePixel() {
-            const btn = document.getElementById('mineBtn');
-            btn.disabled = true;
-            btn.innerHTML = '<i class="fas fa-circle-notch fa-spin"></i> Добыча...';
-            // Simulate mining delay
-            setTimeout(() => {
-                const width = blockPixels[0].length;
-                const height = blockPixels.length;
-                const unmined = [];
-                // Find all unmined pixels
-                for (let y = 0; y < height; y++) {
-                    for (let x = 0; x < width; x++) {
-                        if (!blockPixels[y][x].mined) {
-                            unmined.push({x, y});
-                        }
-                    }
-                }
-                if (unmined.length === 0) {
-                    // Block is completed
-                    alert('Этот блок уже полностью добыт!');
-                    btn.disabled = false;
-                    btn.innerHTML = '<i class="fas fa-hammer"></i> Добыть Пиксель';
-                    return;
-                }
-                // Randomly select a pixel to mine
-                const idx = Math.floor(Math.random() * unmined.length);
-                const {x, y} = unmined[idx];
-                // Determine pixel type
-                const rand = Math.random() * 100;
-                let type = 'common';
-                let value = config.rewards.common;
-                if (rand > 99.5) {
-                    type = 'diamond';
-                    value = config.rewards.diamond;
-                } else if (rand > 97.5) {
-                    type = 'gold';
-                    value = config.rewards.gold;
-                } else if (rand > 90) {
-                    type = 'silver';
-                    value = config.rewards.silver;
-                }
-                // Mine the pixel
-                blockPixels[y][x] = {
-                    x,
-                    y,
-                    mined: true,
-                    type,
-                    miner: currentUser,
-                    value
-                };
-                // Update user stats
-                currentUser.balance += value;
-                currentUser.mined++;
-                currentUser.points += value;
-                // Update UI
-                updateUserBalance();
-                updateProgress();
-                const canvas = document.getElementById('pixelCanvas');
-                const pixelEl = canvas.children[y * width + x];
-                pixelEl.className = 'pixel mined ' + type + ' reveal';
-                pixelEl.innerHTML = `<div class="pixel-value">${value}</div>`;
-                pixelEl.style.boxShadow = 'inset 0 0 0 2px var(--primary-color)';
-                // Show notification
-                showNotification(`Вы получили ${value} ПИКС!`, type);
-                // Update leaderboard
-                renderBlockLeaderboard();
-                // Re-enable button
-                btn.disabled = false;
-                btn.innerHTML = '<i class="fas fa-hammer"></i> Добыть Пиксель';
-                // Check if block is completed
-                if (unmined.length === 1) { // We just mined the last one
-                    setTimeout(() => {
-                        alert(`Блок #${config.currentBlock} завершен! Вы заработали ${currentUser.points} ПИКС в этом блоке.`);
-                        // Here you would typically move to the next block
-                    }, 500);
                 }
-            }, 1000);
-        }
-        // Update mining progress
-        function updateProgress() {
-            const width = blockPixels[0].length;
-            const height = blockPixels.length;
-            let mined = 0;
-            for (let y = 0; y < height; y++) {
-                for (let x = 0; x < width; x++) {
-                    if (blockPixels[y][x].mined) mined++;
                 }
             }
-            config.minedPixels = mined;
-            // In a real app, you would update the progress display here
-        }
-        // Update user balance display
-        function updateUserBalance() {
-            document.getElementById('userBalance').textContent = currentUser.balance.toLocaleString();
-        }
-        // Render block leaderboard
-        function renderBlockLeaderboard() {
-            const leaderboard = document.getElementById('blockLeaderboard');
-            leaderboard.innerHTML = '';
-            // Sort users by points in this block
-            const sortedUsers = [...sampleUsers].sort((a, b) => b.points - a.points);
-            sortedUsers.forEach((user, index) => {
-                const row = document.createElement('tr');
-                if (user.id === currentUser.id) {
-                    row.style.backgroundColor = 'rgba(78, 204, 163, 0.1)';
                 }
-                row.innerHTML = `
-                    <td class="rank">${index + 1}</td>
-                    <td class="user">
-                        <img src="${user.avatar}" alt="${user.name}" class="user-avatar">
-                        ${user.name} ${user.id === currentUser.id ? '<span style="color: var(--primary-color)">(Вы)</span>' : ''}
-                    </td>
-                    <td>${user.pixels}</td>
-                    <td class="pix">
-                        <i class="fas fa-coins"></i> ${user.points}
-                    </td>
-                `;
-                leaderboard.appendChild(row);
-            });
-        }
-        // Render global leaderboard
-        function renderGlobalLeaderboard() {
-            const leaderboard = document.getElementById('globalLeaderboard');
-            leaderboard.innerHTML = '';
-            globalLeaders.forEach((user, index) => {
-                const row = document.createElement('tr');
-                if (user.id === currentUser.id) {
-                    row.style.backgroundColor = 'rgba(78, 204, 163, 0.1)';
                 }
-                row.innerHTML = `
-                    <td class="rank">${index + 1}</td>
-                    <td class="user">
-                        <img src="${user.avatar}" alt="${user.name}" class="user-avatar">
-                        ${user.name} ${user.id === currentUser.id ? '<span style="color: var(--primary-color)">(Вы)</span>' : ''}
-                    </td>
-                    <td>${user.blocks}</td>
-                    <td class="pix">
-                        <i class="fas fa-coins"></i> ${user.points.toLocaleString()}
-                    </td>
-                `;
-                leaderboard.appendChild(row);
-            });
-        }
-        // Render blocks history
-        function renderBlocksHistory() {
-            const grid = document.getElementById('blocksGrid');
-            grid.innerHTML = '';
-            blocksHistory.forEach(block => {
-                const blockEl = document.createElement('div');
-                blockEl.className = 'block-card';
-                blockEl.onclick = () => openBlockModal(block);
-                // Create block preview
-                const preview = document.createElement('div');
-                preview.className = 'block-preview';
-                // Create a small grid to show the block
-                const blockGrid = document.createElement('div');
-                blockGrid.className = 'pixel-canvas';
-                blockGrid.style.width = '100%';
-                blockGrid.style.height = '100%';
-                blockGrid.style.gridTemplateColumns = `repeat(${block.image.width}, 1fr)`;
-                blockGrid.style.gridTemplateRows = `repeat(${block.image.height}, 1fr)`;
-                // Add pixels to the grid
-                block.image.pixels.forEach((row, y) => {
-                    row.forEach((type, x) => {
-                        const pixel = document.createElement('div');
-                        pixel.className = 'pixel mined ' + type;
-                        pixel.style.width = '100%';
-                        pixel.style.height = '100%';
-                        blockGrid.appendChild(pixel);
                     });
                 });
-                preview.appendChild(blockGrid);
-                blockEl.appendChild(preview);
-                // Add block info
-                const info = document.createElement('div');
-                info.className = 'block-info-overlay';
-                info.innerHTML = `
-                    <div class="block-number">Блок #${block.id}</div>
-                    <div class="block-creator">Создатель: ${block.creator}</div>
-                `;
-                blockEl.appendChild(info);
-                grid.appendChild(blockEl);
-            });
-        }
-        // Show notification
-        function showNotification(message, type) {
-            const notif = document.getElementById('notification');
-            const messageEl = notif.querySelector('.notification-message');
-            notif.style.backgroundColor = type === 'diamond' ? 'var(--diamond-color)' :
-                                          type === 'gold' ? 'var(--gold-color)' :
-                                          type === 'silver' ? 'var(--silver-color)' : 'var(--primary-color)';
-            if (type === 'diamond' || type === 'gold' || type === 'silver') {
-                notif.style.color = '#000';
-                messageEl.innerHTML = `Редкий пиксель! ${message} <span class="badge ${type}">${type === 'silver' ? 'Серебро' : type === 'gold' ? 'Золото' : 'Бриллиант'}</span>`;
-            } else {
-                notif.style.color = '#fff';
-                messageEl.innerHTML = message;
-            }
-            notif.classList.add('show');
-            setTimeout(() => {
-                notif.classList.remove('show');
-            }, 3000);
-        }
-        // Tab switching
-        function showTab(tabName) {
-            // Hide all tabs
-            document.querySelectorAll('.tab-content').forEach(tab => {
-                tab.style.display = 'none';
-            });
-            // Deactivate all tab buttons
-            document.querySelectorAll('.tab').forEach(tab => {
-                tab.classList.remove('active');
-            });
-            // Show selected tab
-            document.getElementById(`${tabName}-tab`).style.display = 'block';
-            // Activate selected tab button
-            const tabButtons = document.querySelectorAll('.tab');
-            let found = false;
-            tabButtons.forEach(tab => {
-                if (tab.textContent.includes(tabName === 'mining' ? 'Майнинг' :
-                                            tabName === 'profile' ? 'Профиль' :
-                                            tabName === 'wallet' ? 'Кошелек' :
-                                            tabName === 'leaderboard' ? 'Топ' :
-                                            'История')) {
-                    tab.classList.add('active');
-                    found = true;
-                }
-            });
-            if (!found && tabButtons.length > 0) {
-                tabButtons[0].classList.add('active');
-            }
-            // For leaderboard tab, ensure it's rendered (in case of updates)
-            if (tabName === 'leaderboard') {
-                renderGlobalLeaderboard();
-            }
-        }
-        // Open block modal
-        function openBlockModal(block) {
-            const modal = document.getElementById('blockModal');
-            const preview = document.getElementById('modalBlockPreview');
-            // Set block info
-            document.getElementById('modalBlockNumber').textContent = block.id;
-            document.getElementById('modalCreator').textContent = block.creator;
-            document.getElementById('modalDate').textContent = block.date;
-            document.getElementById('modalPixels').textContent = block.pixels;
-            document.getElementById('modalRare').textContent = block.rare;
-            // Create block preview
-            preview.innerHTML = '';
-            preview.style.gridTemplateColumns = `repeat(${block.image.width}, 1fr)`;
-            preview.style.gridTemplateRows = `repeat(${block.image.height}, 1fr)`;
-            block.image.pixels.forEach((row, y) => {
-                row.forEach((type, x) => {
-                    const pixel = document.createElement('div');
-                    pixel.className = 'pixel mined ' + type;
-                    pixel.style.width = '100%';
-                    pixel.style.height = '100%';
-                    preview.appendChild(pixel);
                 });
-            });
-            // Update leaderboard in modal (mock data)
-            const modalLeaderboard = document.getElementById('modalLeaderboard');
-            modalLeaderboard.innerHTML = '';
-            const topMiners = [
-                { name: block.creator, avatar: "https://i.pravatar.cc/150?img=6", pixels: Math.floor(block.pixels * 0.3), points: 1250 },
-                { name: "OtherUser", avatar: "https://i.pravatar.cc/150?img=3", pixels: Math.floor(block.pixels * 0.2), points: 850 },
-                { name: "PixCollector", avatar: "https://i.pravatar.cc/150?img=7", pixels: Math.floor(block.pixels * 0.15), points: 640 },
-                { name: "Miner123", avatar: "https://i.pravatar.cc/150?img=4", pixels: Math.floor(block.pixels * 0.1), points: 420 }
-            ];
-            topMiners.forEach((user, index) => {
-                const row = document.createElement('tr');
-                row.innerHTML = `
-                    <td class="rank">${index + 1}</td>
-                    <td class="user">
-                        <img src="${user.avatar}" alt="${user.name}" class="user-avatar">
-                        ${user.name}
-                    </td>
-                    <td>${user.pixels}</td>
-                    <td class="pix">
-                        <i class="fas fa-coins"></i> ${user.points}
-                    </td>
-                `;
-                modalLeaderboard.appendChild(row);
-            });
-            modal.style.display = 'flex';
-        }
-        // Close modal
-        function closeModal(modalId) {
-            document.getElementById(modalId).style.display = 'none';
-        }
     </script>
-<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: absolute; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">This website has been generated by <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Пиксельный майнинг</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         :root {
             --bg-color: #1a1a2e;
+            --panel-bg: #16213e;
             --text-color: #e6e6e6;
+            --accent-color: #4cc9f0;
+            --rare-silver: #c0c0c0;
+            --rare-gold: #ffd700;
+            --rare-diamond: #b9f2ff;
+            --pixel-size: 16px;
         }
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
+            -webkit-tap-highlight-color: transparent;
         }
         body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
             background-color: var(--bg-color);
             color: var(--text-color);
             min-height: 100vh;
             overflow-x: hidden;
         }
         .container {
+            max-width: 100%;
+            padding: 12px;
             margin: 0 auto;
         }
         header {
             display: flex;
             justify-content: space-between;
             align-items: center;
+            padding: 8px 12px;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+            margin-bottom: 12px;
         }
         .logo {
             font-weight: bold;
+            font-size: 1.2rem;
+            color: var(--accent-color);
         }
+        .user-info {
             display: flex;
             align-items: center;
+            gap: 8px;
         }
+        .user-avatar {
+            width: 32px;
+            height: 32px;
             border-radius: 50%;
+            background-color: var(--panel-bg);
         }
         .mining-section {
             display: flex;
+            flex-direction: column;
+            gap: 16px;
             margin-bottom: 20px;
         }
+        .canvas-container {
             position: relative;
+            margin: 0 auto;
+            border: 2px solid var(--panel-bg);
+            border-radius: 8px;
+            overflow: hidden;
+            background-color: #111;
         }
         .pixel-canvas {
             display: grid;
+            grid-template-columns: repeat(var(--cols), var(--pixel-size));
+            grid-template-rows: repeat(var(--rows), var(--pixel-size));
         }
         .pixel {
+            background-color: #222;
+            border: 1px solid #111;
             cursor: pointer;
+            transition: background-color 0.2s;
         }
         .pixel:hover {
+            opacity: 0.9;
         }
+        .pixel-mined {
+            background-color: #444;
         }
+        .pixel-special {
+            position: relative;
         }
+        .pixel-silver {
+            background-color: var(--rare-silver);
         }
+        .pixel-gold {
+            background-color: var(--rare-gold);
         }
+        .pixel-diamond {
+            background-color: var(--rare-diamond);
         }
+        .mining-info {
+            background-color: var(--panel-bg);
+            border-radius: 8px;
+            padding: 12px;
             display: flex;
+            flex-direction: column;
+            gap: 12px;
         }
+        .block-info {
+            display: flex;
+            justify-content: space-between;
+        }
+        .progress-container {
+            background-color: #333;
+            border-radius: 999px;
+            height: 8px;
+            margin-top: 4px;
+            overflow: hidden;
+        }
+        .progress-bar {
+            height: 100%;
+            background-color: var(--accent-color);
+            border-radius: 999px;
+            transition: width 0.3s;
+        }
+        .mining-button {
+            background-color: var(--accent-color);
+            color: #111;
             border: none;
+            border-radius: 8px;
+            padding: 12px;
             font-weight: bold;
+            font-size: 1rem;
+            cursor: pointer;
+            transition: transform 0.2s, background-color 0.2s;
             display: flex;
             align-items: center;
+            justify-content: center;
+            gap: 8px;
+        }
+        .mining-button:active {
+            transform: scale(0.98);
+            background-color: #3aa8d8;
+        }
+        .mining-button i {
+            font-size: 1.2rem;
+        }
+        .stats-section {
+            background-color: var(--panel-bg);
+            border-radius: 8px;
+            padding: 12px;
+            margin-bottom: 16px;
+        }
+        .stats-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 12px;
+            margin-top: 12px;
         }
+        .stat-item {
+            background-color: rgba(0, 0, 0, 0.2);
+            border-radius: 6px;
+            padding: 8px;
+            text-align: center;
         }
+        .stat-value {
+            font-size: 1.2rem;
+            font-weight: bold;
+            margin-top: 4px;
+            color: var(--accent-color);
         }
+        .tab-container {
+            display: flex;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+            margin-bottom: 12px;
         }
+        .tab {
+            padding: 8px 12px;
+            cursor: pointer;
+            position: relative;
         }
+        .tab.active {
+            color: var(--accent-color);
         }
+        .tab.active::after {
+            content: '';
+            position: absolute;
+            bottom: -1px;
+            left: 0;
+            width: 100%;
+            height: 2px;
+            background-color: var(--accent-color);
+        }
+        .tab-content {
+            display: none;
+        }
+        .tab-content.active {
+            display: block;
+        }
         .leaderboard {
             width: 100%;
             border-collapse: collapse;
         }
+        .leaderboard th {
             text-align: left;
+            padding: 8px 12px;
+            background-color: rgba(0, 0, 0, 0.2);
+        }
+        .leaderboard td {
+            padding: 8px 12px;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+        }
+        .leaderboard tr:last-child td {
+            border-bottom: none;
+        }
+        .medal {
+            width: 18px;
+            height: 18px;
+            border-radius: 50%;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            margin-right: 6px;
         }
+        .medal-gold {
+            background-color: var(--rare-gold);
+            color: #333;
         }
+        .medal-silver {
+            background-color: var(--rare-silver);
+            color: #333;
         }
+        .medal-bronze {
+            background-color: #cd7f32;
+            color: #333;
         }
+        .history-item {
             display: flex;
+            justify-content: space-between;
+            padding: 8px 0;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
         }
+        .history-item:last-child {
+            border-bottom: none;
         }
+        .rare-icon {
+            font-size: 0.8rem;
+            margin-left: 4px;
         }
+        .pixel-tooltip {
+            position: absolute;
+            top: -30px;
+            left: 50%;
+            transform: translateX(-50%);
+            background-color: rgba(0, 0, 0, 0.8);
+            padding: 4px 8px;
+            border-radius: 4px;
+            font-size: 0.8rem;
+            white-space: nowrap;
+            z-index: 10;
+            opacity: 0;
+            transition: opacity 0.2s;
         }
+        .pixel:hover .pixel-tooltip {
+            opacity: 1;
+        }
+        .avatar-grid {
             display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 8px;
+            margin-top: 12px;
         }
+        .avatar-item {
+            aspect-ratio: 1/1;
+            background-color: #333;
+            border-radius: 8px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
             cursor: pointer;
+            transition: transform 0.2s;
             overflow: hidden;
         }
+        .avatar-item img {
             width: 100%;
             height: 100%;
+            object-fit: cover;
         }
+        .avatar-item:active {
+            transform: scale(0.95);
         }
+        .avatar-item.selected {
+            border: 2px solid var(--accent-color);
         }
+        @media (min-width: 500px) {
+            :root {
+                --pixel-size: 20px;
             }
+            .container {
+                max-width: 500px;
             }
+            .stats-grid {
+                grid-template-columns: repeat(4, 1fr);
             }
         }
     </style>
 </head>
 <body>
     <div class="container">
         <header>
+            <div class="logo">PixelMiner</div>
+            <div class="user-info">
+                <span id="user-coins">0 PX</span>
+                <div class="user-avatar" id="user-avatar"></div>
             </div>
+        </header>
+        <div class="mining-section">
+            <div class="canvas-container">
+                <div class="pixel-canvas" id="pixel-canvas"></div>
             </div>
+            <div class="mining-info">
+                <div class="block-info">
+                    <div>
+                        <div>Блок #<span id="current-block">1</span></div>
+                        <div class="progress-container">
+                            <div class="progress-bar" id="block-progress" style="width: 0%"></div>
+                        </div>
+                    </div>
+                    <div style="text-align: right;">
+                        <div>Пикселей: <span id="mined-pixels">0</span>/<span id="total-pixels">0</span></div>
+                        <div>Игроков: <span id="online-players">0</span></div>
+                    </div>
                 </div>
+                <button class="mining-button" id="mine-button">
+                    <i class="fas fa-hammer"></i>
+                    <span>Добыть пиксель</span>
+                </button>
             </div>
+        </div>
+        <div class="tab-container">
+            <div class="tab active" data-tab="stats">Статистика</div>
+            <div class="tab" data-tab="leaderboard">Лидеры</div>
+            <div class="tab" data-tab="history">История</div>
+            <div class="tab" data-tab="profile">Про��иль</div>
+        </div>
+        <div class="tab-content active" id="stats-content">
+            <div class="stats-section">
+                <div class="stats-grid">
+                    <div class="stat-item">
+                        <div>Ваши очки</div>
+                        <div class="stat-value" id="user-score">0</div>
                     </div>
+                    <div class="stat-item">
+                        <div>Добыто</div>
+                        <div class="stat-value" id="user-mined">0</div>
                     </div>
+                    <div class="stat-item">
+                        <div>Серебряных</div>
+                        <div class="stat-value" id="user-silver">0</div>
                     </div>
+                    <div class="stat-item">
+                        <div>Золотых</div>
+                        <div class="stat-value" id="user-gold">0</div>
                     </div>
+                    <div class="stat-item">
+                        <div>Бриллиантов</div>
+                        <div class="stat-value" id="user-diamond">0</div>
                     </div>
+                    <div class="stat-item">
+                        <div>Создано блоков</div>
+                        <div class="stat-value" id="user-created">0</div>
+                    </div>
+                    <div class="stat-item">
+                        <div>Место в топе</div>
+                        <div class="stat-value" id="user-rank">-</div>
                     </div>
                 </div>
             </div>
+        </div>
+        <div class="tab-content" id="leaderboard-content">
+            <div class="stats-section">
                 <table class="leaderboard">
                     <thead>
                         <tr>
+                            <th>#</th>
+                            <th>Имя</th>
                             <th>Очки</th>
                         </tr>
                     </thead>
+                    <tbody id="leaderboard-body">
+                        <!-- заполняется JS -->
                     </tbody>
                 </table>
             </div>
+        </div>
+        <div class="tab-content" id="history-content">
+            <div class="stats-section">
+                <div id="history-list">
+                    <!-- заполняется JS -->
+                </div>
+            </div>
+        </div>
+        <div class="tab-content" id="profile-content">
+            <div class="stats-section">
+                <div>
+                    <div style="text-align: center; margin-bottom: 12px;">
+                        <div class="user-avatar" style="width: 80px; height: 80px; margin: 0 auto 8px;" id="profile-avatar"></div>
+                        <div id="profile-name">Имя пользователя</div>
+                        <div style="font-size: 0.9rem; color: var(--accent-color);" id="profile-pix">0 PX</div>
+                    </div>
+                    <div style="margin-top: 16px;">Созданные блоки:</div>
+                    <div class="avatar-grid" id="avatar-grid">
+                        <!-- заполняется JS -->
+                    </div>
+                </div>
             </div>
         </div>
     </div>
     <script>
+        // Инициализация игры
+        document.addEventListener('DOMContentLoaded', function() {
+            // Конфигурация
+            const config = {
+                cols: 16,
+                rows: 16,
+                blockSizeIncrease: 2,
+                initialBlockSize: 16*16,
+                baseScore: 1,
+                rareChances: {
+                    silver: 0.1,
+                    gold: 0.03,
+                    diamond: 0.01
+                },
+                rareScores: {
+                    silver: 5,
+                    gold: 15,
+                    diamond: 50
+                },
+                updateInterval: 2000,
+                fakePlayers: 25
+            };
+            // Состояние игры
+            const state = {
+                currentBlock: 1,
+                canvasSize: config.initialBlockSize,
+                minedPixels: 0,
+                onlinePlayers: 0,
+                playerData: {
+                    score: 0,
+                    mined: 0,
+                    silver: 0,
+                    gold: 0,
+                    diamond: 0,
+                    createdBlocks: 0,
+                    pix: 0,
+                    avatar: '',
+                    name: 'Игрок'
+                },
+                leaderboard: [],
+                blockHistory: [],
+                createdBlocks: []
+            };
+            // DOM элементы
+            const elements = {
+                canvas: document.getElementById('pixel-canvas'),
+                currentBlock: document.getElementById('current-block'),
+                minedPixels: document.getElementById('mined-pixels'),
+                totalPixels: document.getElementById('total-pixels'),
+                onlinePlayers: document.getElementById('online-players'),
+                mineButton: document.getElementById('mine-button'),
+                blockProgress: document.getElementById('block-progress'),
+                userScore: document.getElementById('user-score'),
+                userMined: document.getElementById('user-mined'),
+                userSilver: document.getElementById('user-silver'),
+                userGold: document.getElementById('user-gold'),
+                userDiamond: document.getElementById('user-diamond'),
+                userCreated: document.getElementById('user-created'),
+                userRank: document.getElementById('user-rank'),
+                userCoins: document.getElementById('user-coins'),
+                userAvatar: document.getElementById('user-avatar'),
+                profileAvatar: document.getElementById('profile-avatar'),
+                profileName: document.getElementById('profile-name'),
+                profilePix: document.getElementById('profile-pix'),
+                leaderboardBody: document.getElementById('leaderboard-body'),
+                historyList: document.getElementById('history-list'),
+                avatarGrid: document.getElementById('avatar-grid'),
+                tabs: document.querySelectorAll('.tab'),
+                tabContents: document.querySelectorAll('.tab-content')
+            };
+            // Симуляция WebSocket соединения
+            let socket = {
+                connect: () => {
+                    console.log('Connecting to WebSocket server...');
+                    // Здесь будет реальное подключение через WebSocket
+                    // Пока используем setTimeout для имитации сетевых событий
+                    // Имитация получения данных от сервера
+                    setInterval(() => {
+                        updateOnlinePlayers();
+                        updateBlockProgress();
+                        updateLeaderboard();
+                    }, config.updateInterval);
+                    // Для демонстрации - имитация других игроков
+                    setInterval(() => {
+                        simulateOtherPlayers();
+                    }, 1000);
+                },
+                send: (data) => {
+                    console.log('Sending data:', data);
+                    // Здесь будет отправка данных на сервер через WebSocket
                 }
             };
+            // Инициализация канваса
+            function initCanvas() {
+                elements.canvas.style.setProperty('--cols', config.cols);
+                elements.canvas.style.setProperty('--rows', config.rows);
+                elements.totalPixels.textContent = config.cols * config.rows;
+                // Очищаем канвас
+                elements.canvas.innerHTML = '';
+                // Создаем пиксели
+                for (let i = 0; i < config.cols * config.rows; i++) {
+                    const pixel = document.createElement('div');
+                    pixel.className = 'pixel';
+                    pixel.dataset.index = i;
+                    // Добавляем tooltip
+                    const tooltip = document.createElement('div');
+                    tooltip.className = 'pixel-tooltip';
+                    tooltip.textContent = 'Не добыт';
+                    pixel.appendChild(tooltip);
+                    elements.canvas.appendChild(pixel);
                 }
             }
+            // Обновление счетчиков
+            function updateUI() {
+                elements.currentBlock.textContent = state.currentBlock;
+                elements.minedPixels.textContent = state.minedPixels;
+                elements.totalPixels.textContent = config.cols * config.rows;
+                elements.onlinePlayers.textContent = state.onlinePlayers;
+                elements.userScore.textContent = state.playerData.score;
+                elements.userMined.textContent = state.playerData.mined;
+                elements.userSilver.textContent = state.playerData.silver;
+                elements.userGold.textContent = state.playerData.gold;
+                elements.userDiamond.textContent = state.playerData.diamond;
+                elements.userCreated.textContent = state.playerData.createdBlocks;
+                elements.userCoins.textContent = state.playerData.pix + ' PX';
+                elements.profilePix.textContent = state.playerData.pix + ' PX';
+                // Обновление прогресса блока
+                const progress = (state.minedPixels / (config.cols * config.rows)) * 100;
+                elements.blockProgress.style.width = progress + '%';
+            }
+            // Добыча пикселя
+            function minePixel(index = null) {
+                // Если индекс не указан, выбираем случайный неподобранный пиксель
+                if (index === null) {
+                    const unminedPixels = Array.from(document.querySelectorAll('.pixel:not(.pixel-mined)'));
+                    if (unminedPixels.length === 0) return false;
+                    const randomIndex = Math.floor(Math.random() * unminedPixels.length);
+                    index = parseInt(unminedPixels[randomIndex].dataset.index);
                 }
+                const pixel = elements.canvas.children[index];
+                if (!pixel || pixel.classList.contains('pixel-mined')) return false;
+                // Определяем, является ли пиксель редким
+                const random = Math.random();
+                let pixelType = 'normal';
+                let score = config.baseScore;
+                if (random < config.rareChances.diamond) {
+                    pixelType = 'diamond';
+                    score = config.rareScores.diamond;
+                    state.playerData.diamond++;
+                } else if (random < config.rareChances.gold) {
+                    pixelType = 'gold';
+                    score = config.rareScores.gold;
+                    state.playerData.gold++;
+                } else if (random < config.rareChances.silver) {
+                    pixelType = 'silver';
+                    score = config.rareScores.silver;
+                    state.playerData.silver++;
+                }
+                // Обновляем состояние
+                state.minedPixels++;
+                state.playerData.mined++;
+                state.playerData.score += score;
+                state.playerData.pix += score;
+                // Обновляем пиксель
+                pixel.classList.add('pixel-mined');
+                if (pixelType !== 'normal') {
+                    pixel.classList.add('pixel-special', `pixel-${pixelType}`);
+                    pixel.querySelector('.pixel-tooltip').innerHTML =
+                        pixelType === 'silver' ? 'Серебряный ✨' :
+                        pixelType === 'gold' ? 'Золотой ⭐' : 'Бриллиантовый 💎';
+                } else {
+                    pixel.querySelector('.pixel-tooltip').textContent = 'Добыт';
                 }
+                // Проверяем, завершен ли блок
+                if (state.minedPixels >= config.cols * config.rows) {
+                    completeBlock();
+                }
+                updateUI();
+                return true;
             }
+            // Завершение блока
+            function completeBlock() {
+                // Находим игрока с максимальным количеством очков
+                // В реальном приложении это будет определяться сервером
+                state.playerData.createdBlocks++;
+                // Добавляем блок в историю
+                const blockData = {
+                    id: state.currentBlock,
+                    creator: state.playerData.name,
+                    score: state.playerData.score,
+                    pixels: state.minedPixels,
+                    silver: state.playerData.silver,
+                    gold: state.playerData.gold,
+                    diamond: state.playerData.diamond,
+                    completedAt: new Date()
+                };
+                state.blockHistory.unshift(blockData);
+                state.createdBlocks.push({
+                    id: state.currentBlock,
+                    // В реальном приложении здесь будет ссылка на изображение холста
+                    image: generateBlockImage()
+                });
+                // Переходим к следующему блоку
+                state.currentBlock++;
+                state.minedPixels = 0;
+                // Увеличиваем размер холста для следующего блока
+                config.cols += config.blockSizeIncrease;
+                config.rows += config.blockSizeIncrease;
+                // Инициализируем новый холст
+                initCanvas();
+                // Показываем уведомление
+                showBlockCompleteNotification(blockData);
+            }
+            // Генерация изображения блока (для демонстрации)
+            function generateBlockImage() {
+                // В реальном приложении это будет canvas.toDataURL()
+                return `https://picsum.photos/200/200?random=${state.currentBlock}`;
+            }
+            // Показать уведомление о завершении блока
+            function showBlockCompleteNotification(blockData) {
+                const notification = document.createElement('div');
+                notification.style.position = 'fixed';
+                notification.style.bottom = '20px';
+                notification.style.left = '50%';
+                notification.style.transform = 'translateX(-50%)';
+                notification.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
+                notification.style.color = 'white';
+                notification.style.padding = '12px 20px';
+                notification.style.borderRadius = '8px';
+                notification.style.zIndex = '1000';
+                notification.style.display = 'flex';
+                notification.style.alignItems = 'center';
+                notification.style.gap = '8px';
+                notification.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.3)';
+                notification.innerHTML = `
+                    <div style="font-weight: bold; color: var(--accent-color)">Блок #${blockData.id} завершен!</div>
+                    <div style="font-size: 0.9rem;">Создатель: ${blockData.creator}</div>
+                `;
+                document.body.appendChild(notification);
+                setTimeout(() => {
+                    notification.style.transition = 'opacity 0.5s';
+                    notification.style.opacity = '0';
+                    setTimeout(() => notification.remove(), 500);
+                }, 3000);
+            }
+            // Обновление списка игроков онлайн
+            function updateOnlinePlayers() {
+                // В реальном приложении это будет получаться с сервера
+                state.onlinePlayers = Math.floor(Math.random() * 50) + config.fakePlayers;
+                updateUI();
+            }
+            // Обновление прогресса блока
+            function updateBlockProgress() {
+                // В реальном приложении это будет получаться с сервера
+                if (state.minedPixels < config.cols * config.rows) {
+                    state.minedPixels += Math.floor(Math.random() * 5) + 1;
+                    // Ограничиваем максимумом
+                    if (state.minedPixels > config.cols * config.rows) {
+                        state.minedPixels = config.cols * config.rows;
+                    }
+                    updateUI();
+                }
+            }
+            // Обновление таблицы лидеров
+            function updateLeaderboard() {
+                // В реальном приложении это будет получаться с сервера
+                const fakeData = Array.from({length: 10}, (_, i) => ({
+                    id: i+1,
+                    name: ['Игрок1', 'Игрок2', 'Игрок3', 'Игрок4', 'Игрок5', 'Игрок6', 'Игрок7', 'Игрок8'][i] || `Игрок${i+1}`,
+                    score: Math.floor(Math.random() * 10000) + 1000,
+                    avatar: `https://picsum.photos/200/200?random=${i+100}`
+                }));
+                // Добавляем текущего игрока, если его нет в топе
+                if (!fakeData.some(p => p.id === 999)) {
+                    fakeData.push({
+                        id: 999,
+                        name: state.playerData.name,
+                        score: state.playerData.score,
+                        avatar: state.playerData.avatar
+                    });
+                }
+                // Сортируем по очкам
+                fakeData.sort((a, b) => b.score - a.score);
+                state.leaderboard = fakeData.slice(0, 10);
+                // Обновляем UI
+                elements.leaderboardBody.innerHTML = '';
+                state.leaderboard.forEach((player, index) => {
+                    const isCurrentUser = player.id === 999;
+                    const row = document.createElement('tr');
+                    row.style.background = isCurrentUser ? 'rgba(76, 201, 240, 0.2)' : 'transparent';
+                    row.innerHTML = `
+                        <td>
+                            ${index < 3 ?
+                                `<span class="medal ${index === 0 ? 'medal-gold' : index === 1 ? 'medal-silver' : 'medal-bronze'}">
+                                    ${index + 1}
+                                </span>` :
+                                index + 1
+                            }
+                        </td>
+                        <td>
+                            <div style="display: flex; align-items: center; gap: 8px;">
+                                <img src="${player.avatar}" style="width: 24px; height: 24px; border-radius: 50%;">
+                                ${player.name}
+                            </div>
+                        </td>
+                        <td>${player.score.toLocaleString()}</td>
+                    `;
+                    elements.leaderboardBody.appendChild(row);
+                    // Обновляем место текущего игрока
+                    if (isCurrentUser) {
+                        const rank = index + 1;
+                        elements.userRank.textContent = rank;
+                    }
+                });
+                // Если текущего ��грока нет в топе, показываем его место
+                if (!state.leaderboard.some(p => p.id === 999)) {
+                    elements.userRank.textContent = '>10';
                 }
+            }
+            // Имитация других игроков
+            function simulateOtherPlayers() {
+                const unminedPixels = Array.from(document.querySelectorAll('.pixel:not(.pixel-mined)'));
+                if (unminedPixels.length === 0) return;
+                const simultaneousMining = Math.floor(Math.random() * 5);
+                for (let i = 0; i < simultaneousMining; i++) {
+                    if (Math.random() < 0.7) { // 70% шанс, что другой игрок добудет пиксель
+                        const randomIndex = Math.floor(Math.random() * unminedPixels.length);
+                        minePixel(parseInt(unminedPixels[randomIndex].dataset.index));
+                        // Обновляем список неподобранных пикселей
+                        unminedPixels.splice(randomIndex, 1);
+                        if (unminedPixels.length === 0) break;
+                    }
                 }
             }
+            // Обновление истории блоков
+            function updateHistory() {
+                elements.historyList.innerHTML = '';
+                if (state.blockHistory.length === 0) {
+                    elements.historyList.innerHTML = '<div style="text-align: center; padding: 12px; color: #666;">История блоков пуста</div>';
+                    return;
                 }
+                state.blockHistory.forEach(block => {
+                    const item = document.createElement('div');
+                    item.className = 'history-item';
+                    item.innerHTML = `
+                        <div>
+                            <div style="font-weight: bold;">Блок #${block.id}</div>
+                            <div style="font-size: 0.8rem; color: #aaa;">${block.completedAt.toLocaleTimeString()}</div>
+                        </div>
+                        <div style="text-align: right;">
+                            <div>${block.creator}</div>
+                            <div style="font-size: 0.8rem;">
+                                <span>${block.score} PX</span>
+                                ${block.silver > 0 ? `<span class="rare-icon">✨${block.silver}</span>` : ''}
+                                ${block.gold > 0 ? `<span class="rare-icon">⭐${block.gold}</span>` : ''}
+                                ${block.diamond > 0 ? `<span class="rare-icon">💎${block.diamond}</span>` : ''}
+                            </div>
+                        </div>
+                    `;
+                    elements.historyList.appendChild(item);
+                });
+            }
+            // Обновление профиля
+            function updateProfile() {
+                elements.profileName.textContent = state.playerData.name;
+                if (state.playerData.avatar) {
+                    elements.userAvatar.style.backgroundImage = `url(${state.playerData.avatar})`;
+                    elements.userAvatar.style.backgroundSize = 'cover';
+                    elements.profileAvatar.style.backgroundImage = `url(${state.playerData.avatar})`;
+                    elements.profileAvatar.style.backgroundSize = 'cover';
                 }
+                // Обновляем сетку созданных блоков
+                elements.avatarGrid.innerHTML = '';
+                if (state.createdBlocks.length === 0) {
+                    elements.avatarGrid.innerHTML = '<div style="grid-column: 1 / -1; text-align: center; padding: 12px;">Нет созданных блоков</div>';
+                    return;
+                }
+                state.createdBlocks.forEach(block => {
+                    const item = document.createElement('div');
+                    item.className = 'avatar-item';
+                    item.dataset.blockId = block.id;
+                    const img = document.createElement('img');
+                    img.src = block.image;
+                    img.alt = `Блок ${block.id}`;
+                    item.appendChild(img);
+                    elements.avatarGrid.appendChild(item);
+                });
+            }
+            // Обработчики событий
+            function setupEventListeners() {
+                // Кнопка добычи пикселя
+                elements.mineButton.addEventListener('click', () => {
+                    minePixel();
+                });
+                // Переключение вкладок
+                elements.tabs.forEach(tab => {
+                    tab.addEventListener('click', () => {
+                        elements.tabs.forEach(t => t.classList.remove('active'));
+                        tab.classList.add('active');
+                        const tabName = tab.dataset.tab;
+                        elements.tabContents.forEach(content => {
+                            content.classList.remove('active');
+                            if (content.id === `${tabName}-content`) {
+                                content.classList.add('active');
+                                // Обновляем данные при открытии вкладки
+                                if (tabName === 'leaderboard') {
+                                    updateLeaderboard();
+                                } else if (tabName === 'history') {
+                                    updateHistory();
+                                } else if (tabName === 'profile') {
+                                    updateProfile();
+                                }
+                            }
+                        });
                     });
                 });
+                // Клик по пикселю
+                elements.canvas.addEventListener('click', (e) => {
+                    if (e.target.classList.contains('pixel')) {
+                        const index = parseInt(e.target.dataset.index);
+                        if (!e.target.classList.contains('pixel-mined')) {
+                            if (Math.random() < 0.5) { // 50% шанс успешной добычи при клике
+                                minePixel(index);
+                            }
+                        }
+                    }
                 });
+            }
+            // Инициализация игры
+            function initGame() {
+                // Устанавливаем имя игрока из Telegram WebApp.initData
+                // В демо-версии используем случайное имя
+                const randomName = `Игрок${Math.floor(Math.random() * 1000)}`;
+                state.playerData.name = randomName;
+                state.playerData.avatar = `https://picsum.photos/200/200?random=${Math.floor(Math.random() * 1000)}`;
+                initCanvas();
+                updateUI();
+                setupEventListeners();
+                socket.connect();
+                // Инициализация демо-данных
+                setTimeout(() => {
+                    updateLeaderboard();
+                    updateHistory();
+                    updateProfile();
+                }, 500);
+            }
+            // Запуск игры
+            initGame();
+        });
     </script>
+</body>
 </html>