Spaces:

ZMaxAIru
/

ppl

Running

App Files Files Community

ZMaxAIru commited on Mar 28, 2025

Commit

98fb3ce

verified ·

1 Parent(s): fff96f0

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +1336 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Ppl
-emoji: 🌍
-colorFrom: indigo
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: ppl
+emoji: 🐳
+colorFrom: blue
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,1336 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="ru">
+<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>