вот мой код <!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Игра Минер</title>
    <style>
        /* Встроенные стили CSS */

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #eef2f3;
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 100vh;
        }

        /* Верхняя картинка */
        .banner {
            width: 100%;
            max-width: 800px;
            padding: 20px;
            box-sizing: border-box;
        }

        .banner img {
            width: 100%;
            height: auto;
            border-radius: 10px;
        }

        /* Основной контейнер: минное поле и профиль */
        .main-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: flex-start;
            gap: 20px;
            width: 100%;
            max-width: 1200px;
            padding: 20px;
            box-sizing: border-box;
        }

        /* Левая колонка: Минное поле и таблица лидеров */
        .left-column {
            display: flex;
            flex-direction: column;
            gap: 15px;
            flex: 1 1 600px;
            max-width: 700px;
        }

        /* Таблица лидеров */
        .leaderboard {
            width: 100%;
            border-collapse: collapse;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        .leaderboard th, .leaderboard td {
            padding: 12px 15px;
            text-align: center;
        }

        .leaderboard th {
            background-color: #4a90e2;
            color: #fff;
            font-size: 16px;
        }

        .leaderboard tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        .leaderboard tr:hover {
            background-color: #f1f1f1;
        }

        /* Профиль пользователя */
        .profile {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 280px;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 10px;
            background-color: #fff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .avatar {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-image: url('https://via.placeholder.com/100');
            background-size: cover;
            background-position: center;
            margin-bottom: 15px;
            border: 2px solid #4a90e2;
        }

        .nickname {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 15px;
            color: #333;
        }

        .info {
            width: 100%;
            margin-bottom: 10px;
            text-align: left;
        }

        .info span {
            display: block;
            font-size: 14px;
            color: #555;
            margin-bottom: 3px;
        }

        .info-value {
            font-size: 16px;
            font-weight: bold;
            color: #000;
        }

        /* Игровое поле */
        #game {
            display: grid;
            grid-template-columns: repeat(5, 70px);
            grid-template-rows: repeat(3, 70px);
            gap: 4px;
            justify-content: center;
            background-color: #fff;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 10px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .cell {
            width: 70px;
            height: 70px;
            background-color: #4a90e2; /* Основной синий цвет */
            border: 2px solid #357ABD; /* Темно-синий бордер */
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 24px;
            color: #fff;
            user-select: none;
            transition: background-color 0.3s, transform 0.1s;
            position: relative;
            border-radius: 5px;
        }

        .cell:hover {
            background-color: #357ABD;
            transform: scale(1.05);
        }

        .cell.selected {
            background-color: #81c0ff; /* Светло-синий */
            cursor: default;
        }

        .cell.mine {
            background-color: #e74c3c; /* Красный для мины */
            color: #fff;
            font-weight: bold;
        }

        /* Изображение кристалла и мины */
        .cell .icon {
            width: 50px;
            height: 50px;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }

        .crystal {
            background-image: url('https://i.ibb.co/NxXLzhL/1008-00002.png');
        }

        .mine-icon {
            background-image: url('https://i.ibb.co/Q8cfYGp/1008-00003.png');
        }

        /* Стиль для подсветки текущего столбца */
        .current-column {
            background-color: #357ABD;
            border-color: #1F5FA8;
        }

        /* Сообщения об окончании игры */
        .end-message {
            margin-top: 10px;
            font-size: 16px;
            color: #e74c3c;
            text-align: center;
        }

        /* Адаптивность */
        @media (max-width: 1000px) {
            .main-container {
                flex-direction: column;
                align-items: center;
            }

            .left-column, .profile {
                max-width: 100%;
                width: 100%;
            }

            #game {
                justify-content: center;
            }
        }
    </style>
</head>
<body>

    <!-- Верхняя картинка -->
    <div class="banner">
        <a href="https://ibb.co/SytNdkB">
            <img src="https://i.ibb.co/Bf9wXh7/1008-00005.png" alt="banner" border="0">
        </a>
    </div>

    <div class="main-container">
        <!-- Левая колонка: Минное поле и таблица лидеров -->
        <div class="left-column">
            <!-- Игровое поле -->
            <div id="game">
                <!-- Клетки будут сгенерированы с помощью JavaScript -->
            </div>

            <!-- Таблица лидеров -->
            <table class="leaderboard" id="leaderboard">
                <thead>
                    <tr>
                        <th>Место</th>
                        <th>Игрок</th>
                        <th>Заработано</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>Player1</td>
                        <td>100</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Player2</td>
                        <td>80</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>Player3</td>
                        <td>60</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- Профиль пользователя -->
        <div class="profile">
            <div class="avatar"></div>
            <div class="nickname">Player1</div>
            <div class="info">
                <span>Попытки:</span>
                <div id="attempts" class="info-value">3</div>
            </div>
            <div class="info">
                <span>Баланс (текущая попытка):</span>
                <div id="currentBalance" class="info-value">0</div>
            </div>
            <div class="info">
                <span>Баланс на кошельке:</span>
                <div id="walletBalance" class="info-value">100</div>
            </div>
            <div id="endMessage" class="end-message"></div>
        </div>
    </div>

    <script>
        // Встроенный JavaScript

        const ROWS = 3;
        const COLS = 5;
        const MINE_COUNT = 3; // Количество мин на поле
        const MAX_ATTEMPTS = 3;

        let mines = new Set();
        let currentStep = 0;
        let attemptsLeft = MAX_ATTEMPTS;
        let walletBalance = 100;
        let currentBalance = 0;
        let gameActive = false;

        const gameContainer = document.getElementById('game');
        const attemptsDisplay = document.getElementById('attempts');
        const currentBalanceDisplay = document.getElementById('currentBalance');
        const walletBalanceDisplay = document.getElementById('walletBalance');
        const endMessage = document.getElementById('endMessage');
        const leaderboardTable = document.getElementById('leaderboard').getElementsByTagName('tbody')[0];

        // Функция для инициализации таблицы лидеров из localStorage
        function loadLeaderboard() {
            const storedLeaderboard = JSON.parse(localStorage.getItem('leaderboard')) || [];
            // Если нет данных, инициализируем стандартными значениями
            if (storedLeaderboard.length === 0) {
                const defaultLeaderboard = [
                    { name: 'Player1', earnings: 100 },
                    { name: 'Player2', earnings: 80 },
                    { name: 'Player3', earnings: 60 }
                ];
                localStorage.setItem('leaderboard', JSON.stringify(defaultLeaderboard));
                return defaultLeaderboard;
            }
            return storedLeaderboard;
        }

        // Функция для сохранения таблицы лидеров в localStorage
        function saveLeaderboard(leaderboard) {
            localStorage.setItem('leaderboard', JSON.stringify(leaderboard));
        }

        // Функция для обновления таблицы лидеров в интерфейсе
        function updateLeaderboardUI() {
            const leaderboard = loadLeaderboard();
            // Очистить текущие строки
            leaderboardTable.innerHTML = '';
            // Добавить строки
            leaderboard.slice(0, 3).forEach((player, index) => {
                const row = leaderboardTable.insertRow();
                const cellRank = row.insertCell(0);
                const cellName = row.insertCell(1);
                const cellEarnings = row.insertCell(2);
                cellRank.textContent = index + 1;
                cellName.textContent = player.name;
                cellEarnings.textContent = player.earnings;
            });
        }

        // Создание игрового поля при загрузке страницы
        window.onload = function() {
            createGameField();
            initGame();
            // Инициализация отображения баланса и попыток
            attemptsDisplay.textContent = attemptsLeft;
            walletBalanceDisplay.textContent = walletBalance;
            currentBalanceDisplay.textContent = currentBalance;
            updateLeaderboardUI();
        };

        // Функция для создания игрового поля
        function createGameField() {
            for (let i = 0; i < ROWS * COLS; i++) {
                const cell = document.createElement('div');
                cell.classList.add('cell');
                cell.dataset.index = i;
                cell.dataset.col = i % COLS; // Добавляем информацию о столбце
                cell.addEventListener('click', onCellClick);
                gameContainer.appendChild(cell);
            }
        }

        // Функция для инициализации нового раунда игры
        function initGame() {
            if (attemptsLeft <= 0) {
                endMessage.textContent = 'У вас закончились попытки. Игра окончена.';
                disableAllCells();
                return;
            }

            // Сброс состояния клеток
            resetCells();

            mines.clear();
            currentStep = 0;
            currentBalance = 0;
            currentBalanceDisplay.textContent = currentBalance;
            endMessage.textContent = '';
            gameActive = true;

            // Генерация мин
            while (mines.size < MINE_COUNT) {
                const minePosition = Math.floor(Math.random() * ROWS * COLS);
                mines.add(minePosition);
            }

            highlightCurrentColumn();
        }

        // Функция для сброса состояний клеток
        function resetCells() {
            const cells = document.querySelectorAll('.cell');
            cells.forEach(cell => {
                cell.classList.remove('selected', 'mine', 'current-column');
                cell.style.pointerEvents = 'auto'; // Включаем клики
                cell.style.cursor = 'pointer';
                cell.textContent = ''; // Очистка текста
                // Удаляем иконки, если есть
                const icon = cell.querySelector('.icon');
                if (icon) {
                    cell.removeChild(icon);
                }
            });
        }

        // Функция для подсветки текущего столбца
        function highlightCurrentColumn() {
            // Удаляем подсветку со всех столбцов
            const allCells = document.querySelectorAll('.cell');
            allCells.forEach(cell => {
                cell.classList.remove('current-column');
            });

            // Подсвечиваем клетки текущего столбца
            const cells = document.querySelectorAll(`.cell[data-col='${currentStep}']`);
            cells.forEach(cell => {
                if (!cell.classList.contains('selected') && !cell.classList.contains('mine')) {
                    cell.classList.add('current-column');
                }
            });
        }

        // Обработчик клика по клетке
        function onCellClick(e) {
            if (!gameActive) return;

            const index = parseInt(e.target.dataset.index, 10);
            const col = parseInt(e.target.dataset.col, 10);

            // Проверяем, что игрок выбирает клетку в правильном порядке
            if (col !== currentStep) {
                return; // Игнорируем выбор клетки, если это не текущий столбец
            }

            // Помечаем клетку как выбранную
            e.target.classList.add('selected');
            e.target.style.pointerEvents = 'none'; // Отключаем возможность клика
            e.target.style.cursor = 'default';
            e.target.classList.remove('current-column'); // Убираем подсветку

            // Создаём элемент для иконки
            const icon = document.createElement('div');
            icon.classList.add('icon');
            e.target.appendChild(icon);

            // Проверяем, есть ли мина
            if (mines.has(index)) {
                icon.classList.add('mine-icon');
                revealMines();
                processFailure();
            } else {
                icon.classList.add('crystal');
                currentBalance += 10; // Добавляем 10 к текущему балансу за безопасную клетку
                currentBalanceDisplay.textContent = currentBalance;
                currentStep++;
                if (currentStep === COLS) {
                    processSuccess();
                } else {
                    highlightCurrentColumn();
                }
            }
        }

        // Функция для отображения всех мин после поражения
        function revealMines() {
            mines.forEach((mineIndex) => {
                const mineCell = document.querySelector(`.cell[data-index='${mineIndex}']`);
                if (mineCell && !mineCell.classList.contains('mine')) {
                    mineCell.classList.add('mine');
                    mineCell.style.pointerEvents = 'none'; // Отключаем клики
                    mineCell.style.cursor = 'default';
                    // Добавляем иконку мины
                    const icon = document.createElement('div');
                    icon.classList.add('icon', 'mine-icon');
                    mineCell.appendChild(icon);
                }
            });
        }

        // Функция для отключения всех клеток (после выигрыша или поражения)
        function disableAllCells() {
            const cells = document.querySelectorAll('.cell');
            cells.forEach((cell) => {
                cell.style.pointerEvents = 'none';
                cell.style.cursor = 'default';
            });
        }

        // Функция обработки успешного прохождения игры
        function processSuccess() {
            currentBalanceDisplay.textContent = currentBalance;
            walletBalance += currentBalance;
            walletBalanceDisplay.textContent = walletBalance;
            disableAllCells();
            gameActive = false;
            endMessage.textContent = 'Поздравляем! Вы прошли поле. Игра начнётся заново через 3 секунды.';

            // Обновление таблицы лидеров
            updateLeaderboard('Player1', currentBalance);

            // Автоматический перезапуск игры через 3 секунды
            setTimeout(initGame, 3000);
        }

        // Функция обработки поражения
        function processFailure() {
            attemptsLeft--;
            attemptsDisplay.textContent = attemptsLeft;
            walletBalance -= 20; // Вычитаем 20 за поражение
            if (walletBalance < 0) walletBalance = 0;
            walletBalanceDisplay.textContent = walletBalance;
            disableAllCells();
            gameActive = false;

            if (attemptsLeft > 0) {
                endMessage.textContent = 'Вы наткнулись на мину! Игра начнётся заново через 3 секунды.';
                // Автоматический перезапуск игры через 3 секунды
                setTimeout(initGame, 3000);
            } else {
                endMessage.textContent = 'У вас закончились попытки. Игра прекращена.';
            }
        }

        // Функция обновления таблицы лидеров
        function updateLeaderboard(playerName, earnings) {
            let leaderboard = loadLeaderboard();

            // Проверяем, нужно ли добавить текущего игрока в лидеры
            const existingPlayer = leaderboard.find(player => player.name === playerName);
            if (existingPlayer) {
                if (earnings > existingPlayer.earnings) {
                    existingPlayer.earnings = earnings;
                }
            } else {
                leaderboard.push({ name: playerName, earnings: earnings });
            }

            // Сортируем по убыванию заработка
            leaderboard.sort((a, b) => b.earnings - a.earnings);

            // Оставляем только топ-3
            if (leaderboard.length > 3) {
                leaderboard = leaderboard.slice(0, 3);
            }

            // Сохраняем обновлённую таблицу
            saveLeaderboard(leaderboard);

            // Обновляем интерфейс
            updateLeaderboardUI();
        }
    </script>
</body>
</html> картинки которые имеются они не работают поэтому их нужно заменить и положить в корень кода а не ссылками давай это сделаем ты исправь код и скажи как мне назвать картинки