<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wave</title>
    <link rel="stylesheet" href="dashboard.css">
    <link rel="icon" href="../img/icon-2.png" type="image/png">
            <script src="https://kit.fontawesome.com/ff772dd04d.js" crossorigin="anonymous"></script>
    <style>
        /* Стиль для модального окна */
        .modal {
            display: none; /* Изначально скрыто */
            position: fixed;
            z-index: 9999; /* Выше, чем остальной контент */
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5); /* Полупрозрачный фон */
            align-items: center;
            justify-content: center;
            opacity: 0; /* Изначальная непрозрачность 0 */
            transition: opacity 0.5s ease-in-out; /* Плавное изменение прозрачности */
        }

        .modal.show {
            display: flex;
            opacity: 1; /* Прозрачность при показе */
        }
progress {
    width: 100%;
    height: 20px;
}
        .modal-content {
            background-color: #101010;
            border-top: 1px solid #252525;
            border-bottom: 1px solid #161616;
            border-radius: 20px;
            padding: 20px;
            text-align: center;
            width: 90px;
        }
        .modal-content2 {
            background-color: #101010;
            border-top: 1px solid #252525;
            border-bottom: 1px solid #161616;
            border-radius: 20px;
            padding: 20px;
            text-align: center;
            width: 300px;
        }
        #memoryInput {
    width: 100%;
    padding: 10px;
    background-color: #2f2f2f;
    border-radius: 10px;
    border: 1px solid #252525;
    color: white;
    font-size: 16px;
}
        .loader {
            border: 8px solid #fff;
            border-top: 8px solid #3498db;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 2s linear infinite;
        }
.profile-block p {
    transition: filter 0.5s ease-in-out; /* Плавное изменение фильтра */
}
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .checkmark {
            font-size: 32px;
            color: white;
            display: none; /* Изначально скрыта */
        }

        /* Стиль для Header и Navbar */
        .header {
            width: 720px;
            height: 64px;
            background-color: #101010;
            border-top: 1px solid #252525;
            border-bottom: 1px solid #161616;
            border-radius: 20px;
            margin: 20px auto;
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            padding: 0 20px;
        }

        .header img {
            width: 50px;
            height: 50px;
        }

        .social-links {
            display: flex; 
            gap: 25px; 
            color: #434343; 
            font-family: 'Neometric'; 
            font-size: 10px; 
        }

        .social-link {
            font-size: 24px;
            color: white;
            cursor: pointer;
        }

        /* Стиль для формы выбора версии */
        .select-version {
            width: 100%;
            margin: 20px 0;
            padding: 5px;
            background-color: #2f2f2f;
            border-radius: 10px;
            border: 1px solid #252525;
            color: white;
            font-size: 16px;
        }


    </style>
</head>
<body>
    <div class="background-image">
        <!-- Header -->
        <div class="header">
            <img align="center" src="../img/icon-2.png" style="pointer-events: auto;">
        </div>

        <div style="margin-top: 45px; text-align: center;">
            <h1 style="color: white;">Добро пожаловать!</h1>
        </div>

        <div style="display: flex; justify-content: center; margin-top: 20px;">
            <div class="profile-block" style="width: 720px; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; height: 200px;">
                <div style="display: flex; gap: 20px; flex-grow: 1; flex-direction: row-reverse;">
                    <div style="flex-grow: 1;">
                        <h2 style="color: whitesmoke;">Информация об аккаунте</h2>
                        <p style="color: whitesmoke;">Ваш логин: <span id="login">Unknown</span></p>
                        <p style="color: whitesmoke;">UID: <span id="uid">Unknown</span></p>
                        <p style="color: whitesmoke;">Тип подписки: <span id="subscription-type">Unknown</span></p>
                        <p style="color: whitesmoke;">Подписка истечёт: <span id="subscription-expiry">Unknown</span></p>
                        <p style="color: whitesmoke;">HWID: <span id="hwid">Unknown</span></p>
                        <p style="color: whitesmoke;">Выбранная версия: 1.21.1</p>
                        <p style="color: whitesmoke;">Память для запуска: <span id="memory">2048</span> MB</p>
                    </div>
                    <img id="avatar" src="http://localhost/uploads/avatars/logo.png" alt="Аватар" width="150" height="150" style="border-radius: 75px; border: 2px solid #252525;">
                </div>
                                <!-- Кнопки -->
                <div style="display: flex; flex-direction: column; align-items: flex-end; margin-top: -165px;">
                    <button id="startClientButton" class="button-white" style="margin-bottom: 10px;" onclick="launchMinecraft()">Запустить Клиент</button>
                    <button id="changeVersionButton" class="button-white" style="margin-bottom: 10px;">Изменить Версию</button>
                    <button id="MemoryButton" class="button-white" style="margin-bottom: 10px;">Изменить Память</button>
                </div>
<div style="display: flex; justify-content: center; margin-top: 80px;">
    <div class="profile-block" style="width: 319px; padding: 20px; height: 72px;">
        <div style="display: flex; gap: 20px; flex-grow: 1; flex-direction: row-reverse;">
            <div style="flex-grow: 1;">
                <h2 style="color: whitesmoke; margin-top: 13px;">
                    <p style="color: whitesmoke; margin-top: -10px;">RaveProtection - 2024</p>
                </h2>
            </div>
        </div>
    </div>
</div>
        <!-- Модальное окно для изменения версии -->
        <div id="versionModal" class="modal" >
            <div class="modal-content2">
                <h2 style="color: whitesmoke;">Выберите версию</h2>
                <select class="select-version" id="versionSelect">
                    <option value="1.21.1">1.21.1</option>
                    <option value="Beta" disabled>Beta</option>
                    <option value="Alpha" disabled>Alpha</option>
                </select>
                <button id="selectVersionButton" class="button-white" style="margin-top: 10px;">Выбрать</button>
            </div>
        </div>
<!-- Модальное окно для изменения памяти -->
<div id="memoryModal" class="modal">
    <div class="modal-content2">
        <h2 style="color: whitesmoke;">Введите количество памяти (в MB)</h2>
        <input type="number" id="memoryInput" class="select-version" placeholder="Введите память" min="512">
        <button id="applyMemoryButton" class="button-white" style="margin-top: 10px;">Применить</button>
    </div>
</div>

        <!-- Модальное окно -->
        <div id="modal" class="modal">
            <div class="modal-content">
                <div id="loader" class="loader">
                    <div id="loader2" class="loader2"></div>
                </div>
                <div id="checkmark" class="checkmark">&#10004;</div> <!-- Галочка -->
            </div>
        </div>
    </div>

    <script>


        const { ipcRenderer } = require('electron');

function launchMinecraft() {
    const memoryElement = document.getElementById('memory');
    
    if (memoryElement) {
        const memory = memoryElement.textContent.trim(); // Извлекаем значение памяти из span
        console.log(memory);
        ipcRenderer.send('launch-minecraft', memory); // Отправляем запрос на запуск клиента с параметром памяти
    } else {
        console.error('Элемент с id "memory" не найден!');
    }
}

document.addEventListener('DOMContentLoaded', async () => {
    try {
        const userData = JSON.parse(localStorage.getItem('userData'));

        if (userData.status === "success") {
            document.querySelector('.profile-block p:nth-child(2)').textContent = `Ваш логин: ${userData.username}`;
            document.querySelector('.profile-block p:nth-child(3)').textContent = `UID: ${userData.user_id}`;
            document.querySelector('.profile-block p:nth-child(4)').textContent = `Тип подписки: ${userData.subscription_name}`;
            document.querySelector('.profile-block p:nth-child(5)').textContent = `Подписка истечёт: ${userData.expires_at}`;
            document.querySelector('.profile-block p:nth-child(6)').textContent = `HWID: ${userData.hwid}`;
            document.querySelector('#avatar').src = `http://localhost/uploads/avatars/${userData.avatar}`;
        } else {
            console.error("Ошибка загрузки данных:", userData.message);
        }
    } catch (err) {
        console.error("Ошибка при получении данных:", err);
    }
});

        function showModal() {
            const modal = document.getElementById('modal');
            const loader = document.getElementById('loader');
            const checkmark = document.getElementById('checkmark');

            modal.classList.add('show');

            setTimeout(function() {
                loader.style.display = 'none';
                checkmark.style.display = 'block'; 

                setTimeout(function() {
                    modal.classList.remove('show'); 
                }, 2000);
            }, 3000);
        }

        document.getElementById('startClientButton').addEventListener('click', function() {
            showModal(); 
        });

        document.getElementById('changeVersionButton').addEventListener('click', function() {
            const modal = document.getElementById('versionModal');
            modal.classList.add('show');
        });

document.getElementById('selectVersionButton').addEventListener('click', function() {
    const version = document.getElementById('versionSelect').value;
    const versionText = document.querySelector('.profile-block p:nth-child(7)'); // Элемент с текстом версии
    const modal = document.getElementById('versionModal');

    modal.classList.remove('show');

    setTimeout(function() {

        versionText.style.filter = 'blur(5px)';

        setTimeout(function() {
            versionText.textContent = `Выбранная версия: ${version}`;
            versionText.style.filter = 'none'; 
        }, 500); 
    }, 200);
});

document.getElementById('MemoryButton').addEventListener('click', function() {
    const modal = document.getElementById('memoryModal');
    modal.classList.add('show');
});


document.getElementById('applyMemoryButton').addEventListener('click', function() {
    const memory = document.getElementById('memoryInput').value;
    const memoryParagraph = document.querySelector('.profile-block p:nth-child(8)');

    memoryParagraph.style.filter = 'blur(5px)';
   
    setTimeout(function() {
        memoryParagraph.innerText = `Память для запуска: ${memory} MB`;
        
        setTimeout(function() {
            memoryParagraph.style.filter = 'none';
        }, 500);
    }, 500); 

    const modal = document.getElementById('memoryModal');
    modal.classList.remove('show');
});


document.getElementById('close').addEventListener('click', () => {
    console.log('Close button clicked');
    window.electronAPI.closeWindow();
});

document.getElementById('minimize').addEventListener('click', () => {
    console.log('Minimize button clicked');
    window.electronAPI.minimizeWindow();
});

document.getElementById('maximize').addEventListener('click', () => {
    console.log('Maximize button clicked');
    window.electronAPI.maximizeWindow();
});
    </script>
    
</body>
</html>
