<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ImagiPuzzle Game</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="app">
        <!-- Модальное окно авторизации -->
        <div id="auth-modal" class="modal">
            <div class="modal-content">
                <h2 id="auth-title">Авторизация</h2>
                <input type="text" id="username" placeholder="Имя пользователя">
                <input type="password" id="password" placeholder="Пароль">
                <div class="auth-buttons">
                    <button id="login-btn">Войти</button>
                    <button id="register-btn">Регистрация</button>
                </div>
            </div>
        </div>

        <!-- Главное меню -->
        <div id="main-menu" class="hidden">
            <div class="menu-background"></div>
            <div class="menu-content">
                <h1>ImagePuzzle</h1>
                <div class="menu-buttons">
                    <button id="play-btn">Play</button>
                    <button id="settings-btn">Settings</button>
                    <button id="donate-btn">Donate</button>
                    <button id="gallery-btn">Gallery</button>
                </div>
                
                <div class="language-selector">
                    <img src="flags/us.png" data-lang="en" alt="English">
                    <img src="flags/cn.png" data-lang="zh" alt="Chinese">
                    <img src="flags/jp.png" data-lang="ja" alt="Japanese">
                    <img src="flags/ru.png" data-lang="ru" alt="Russian">
                    <img src="flags/de.png" data-lang="de" alt="German">
                </div>
            </div>
        </div>

        <!-- Окно настроек -->
        <div id="settings-modal" class="modal hidden">
            <div class="modal-content">
                <h2>Настройки</h2>
                <div class="setting">
                    <label for="music-volume">Громкость музыки</label> <input type="range" id="music-volume" min="0" max="100" value="50">
                </div>
                <div class="setting">
                    <label for="sound-volume">Громкость звуков</label>
                    <input type="range" id="sound-volume" min="0" max="100" value="50">
                </div>
                <div class="setting">
                    <label for="default-difficulty">Сложность по умолчанию</label>
                    <select id="default-difficulty">
                        <option>Easy</option>
                        <option>Medium</option>
                        <option>Hard</option>
                    </select>
                </div>
                <button id="save-settings">Сохранить</button>
            </div>
        </div>

        <!-- Окно выбора сложности -->
        <div id="difficulty-modal" class="modal hidden">
            <div class="modal-content">
                <h2>Выберите сложность</h2>
                <div class="difficulty-options">
                    <button data-difficulty="easy">Easy</button>
                    <button data-difficulty="medium">Medium</button>
                    <button data-difficulty="hard">Hard</button>
                    <button data-difficulty="custom">Custom</button>
                </div>
            </div>
        </div>

        <!-- Окно генерации пазла -->
        <div id="puzzle-generation" class="modal hidden">
            <div class="modal-content">
                <h2>Создание пазла</h2>
                <textarea id="puzzle-prompt" placeholder="Опишите фотографию для своей головоломки"></textarea>
                <div class="puzzle-actions">
                    <button id="random-prompt">Random</button>
                    <button id="generate-puzzle">Сгенерировать</button>
                </div>
            </div>
        </div>

        <!-- Игровое поле пазла -->

        <div id="puzzle-game" class="hidden">
            <canvas id="canvas"></canvas> <div id="puzzle-controls">
                <button id="check-puzzle">Проверить</button>
            </div>
        </div>
    </div>

    <script src="app.js"></script>
    <script src="puzzle.js"></script> <script src="puzzle.js"></script> </body>

</body>
</html>