index.html

<!DOCTYPE html>
<html lang="ru">
<head>
    <!-- Установка кодировки и параметров отображения страницы -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ХельХейм</title>
    <!-- Подключение внешнего CSS файла для стилизации -->
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <!-- Шапка сайта -->
    <div class="header">
        <!-- Логотип и название проекта -->
        <div class="logo">
            <div class="logo-title">
                <!-- Логотип в виде изображения -->
                <img src="https://minecraft-theme.netlify.app/imgs/paintings/bust.png" alt="Logo">
                ХельХейм
            </div>
            <!-- Подзаголовок -->
            <div class="logo-subtitle">minecraft roleplay project</div>
        </div>
        
        <!-- Информация о пользователе -->
        <div class="user-info">
            <div class="user-name">pururin</div>
            <!-- Иконка раскрывающегося меню -->
            <img src="images/arrow-down.png" class="dropdown-arrow" alt="Arrow">
            <!-- Аватар пользователя -->
            <img src="https://mc-heads.net/avatar/notch" class="user-avatar" alt="User Avatar">
            
            <!-- Выпадающее меню пользователя -->
            <div class="dropdown-menu">
                <a href="#">Профиль</a>
                <a href="#">Настройки</a>
                <a href="#">Выход</a>
            </div>
        </div>
		
		<!-- Информация о пользователе -->
		<div class="authorization">
			<button id="show-modal-btn" class="login-button">Войти</button> <button class="signup-button">Зарегистироваться</button>
        </div>
    </div>

    <!-- Основной контейнер, содержащий боковую панель и контент -->
    <div class="container">
        <!-- Боковая панель с навигацией -->
        <div class="sidebar">
            <!-- Группа меню "Основные" -->
            <div class="menu-group open">
                <div class="menu-group-title">
                    Основные
                    <img src="images/arrow-down.png" alt="Arrow">
                </div>
                <div class="menu-items">
                    <!-- Ссылки на разделы внутри группы -->
                    <a data-url="page1.html"><img src="images/icon1.png" alt="Icon"> Приветствие</a>
                    <a data-url="page2.html"><img src="images/icon2.png" alt="Icon"> Землевладение</a>
                    <a data-url="page3.html"><img src="images/icon3.png" alt="Icon"> Налоги</a>
                </div>
            </div>
            
            <!-- Группа меню "Альтернативные" -->
            <div class="menu-group open">
                <div class="menu-group-title">
                    Альтернативные
                    <img src="images/arrow-down.png" alt="Arrow">
                </div>
                <div class="menu-items">
                    <!-- Ссылки на разделы внутри группы -->
                    <a data-url="https://emojidb.org/"><img src="images/icon4.png" alt="Icon"> Главная</a>
                    <a data-url="lottery.html"><img src="images/icon5.png" alt="Icon"> Вики</a>
                    <a data-url="https://donatstudios.com/PixelCircleGenerator"><img src="images/icon6.png" alt="Icon"> Карта</a>
                    <a data-url="page7.html"><img src="images/icon7.png" alt="Icon"> Нарушения</a>
                    <a data-url="page8.html"><img src="images/icon8.png" alt="Icon"> Правила</a>
                </div>
            </div>
        </div>

        <!-- Контентная область с фреймом для загрузки страниц -->
        <div class="content">
            <iframe id="contentFrame" src=""></iframe>		
        </div>
    </div>
	
    <!-- Блок уведомлений -->
    <div id="notifications" class="notifications">
        <!-- Уведомления будут появляться здесь -->
    </div>
	
    <!-- Modal Window -->
    <dialog class="modal" id="login-modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2>Авторизация</h2>
            </div>
            <button class="modal-button discord-login">Войти через Discord</button>
            <div class="modal-separator">или</div>
            <form class="modal-form">
                <input type="email" placeholder="Почта" required>
                <input type="password" placeholder="Пароль" required>
                <a href="#" class="forgot-password">Забыли пароль?</a>
                <button type="submit" class="modal-button signin-btn">Войти</button>
            </form>
            <div class="register-text">
                Нет аккаунта? <a href="#">Создайте сейчас!</a>
            </div>
        </div>
    </dialog>

    <!-- Registration Modal Window -->
    <dialog class="modal" id="register-modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2>Регистрация</h2>
            </div>
            <form class="modal-form">
                <input type="email" placeholder="Почта" required>
                <input type="password" placeholder="Пароль" required>
                <input type="password" placeholder="Повторите пароль" required>
                <button type="submit" class="modal-button signin-btn">Зарегистрироваться</button>
            </form>
            <div class="register-text">
                Уже есть аккаунт? <a href="#">Войдите</a>
            </div>
        </div>
    </dialog>

    <!-- Verification Code Modal Window -->
	<dialog id="verification-modal" class="modal">
		<div class="modal-content">
			<button class="close-modal-btn">&times;</button>
			<div class="modal-header">
				<h2>Проверьте почту</h2>
			</div>
			<p class="verification-text">Мы отправили Вам 6-значный код</p>
			<form class="modal-form">
				<input type="text" placeholder="Введите код" maxlength="6" required>
				<button type="submit" class="modal-button verify-btn">Подтвердить</button>
			</form>
			<button class="resend-code-btn">Отправить снова</button>
			<button class="back-btn">Вернуться обратно</button>
		</div>
	</dialog>



    <!-- Confirm Dialog Modal Window -->
    <dialog class="modal" id="confirm-modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2>Вы уверены?</h2>
            </div>
            <div class="modal-separator"></div>
            <div class="modal-buttons">
                <button class="modal-button signin-btn" id="confirm-yes">Да</button>
                <button class="modal-button signin-btn" id="confirm-no">Нет</button>
            </div>
        </div>
    </dialog>

	<button id="show-modal-btn">Показать модальное окно авторизации</button>
	<button id="show-register-modal-btn">Показать модальное окно регистрации</button>
	<button id="show-verification-modal-btn">Показать окно подтверждения кода</button>
	<button id="show-confirm-modal-btn">Показать окно подтверждения да/нет</button>

	
    <!-- Подключение внешнего JavaScript файла -->
    <script src="js/scripts.js"></script>
</body>
</html>


styles.css

/* Подключение шрифта Monocraft */
@font-face {
  font-family: 'Monocraft';
  src: url(.\fonts\Monocraft\Monocraft.eot);
  src: url(.\fonts\Monocraft\Monocraft.eot?#iefix) format('embedded-opentype'),
       url(.\fonts\Monocraft\Monocraft.otf) format('otf'),
       url(.\fonts\Monocraft\Monocraft.svg#Monocraft) format('svg'),
       url(.\fonts\Monocraft\Monocraft.ttf) format('truetype'),
       url(.\fonts\Monocraft\Monocraft.woff) format('woff'),
       url(.\fonts\Monocraft\Monocraft.woff2) format('woff2');
  font-style: normal;
  font-weight: normal;
}

/* Общие стили для страницы */
body {
    margin: 0;
    font-family: 'Monocraft', sans-serif;
    background-color: #f0f0f0;
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* Стили для шапки сайта */
.header {
    background-color: #f8f8f8;
    padding: 1%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ccc;
    height: 7.5vw;
    box-sizing: border-box;
}

/* Стили для логотипа */
.logo {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.logo-title {
    display: flex;
    align-items: center;
    font-size: 2.5vw;
    font-weight: bold;
}

.logo-title img {
    height: 2.5vw;
    margin-right: 1vw;
}

.logo-subtitle {
    font-size: 1vw;
}

/* Стили для кнопок авторизации */
.authorization {
	display: flex; /* flex  none */
}

.signup-button {
	width:				15vw;
    height:				3vw;
	color:				black;
	background-color: 	white;
    border:				1px solid #ccc;
	font-family:		inherit;
	font-size:			1vw;
	cursor:				pointer;
	
	transition:
	color 				200ms,
	background-color 	200ms,
	border				200ms;
}

.signup-button:hover {
	color:				magenta;
	background-color:	#fff;
	border:				1px solid magenta;
    text-decoration:	underline;
}

.login-button {
	margin-right:		0.5vw;
	width:				8vw;
    height:				3vw;
	color:				black;
	background-color: 	white;
    border:				1px solid #ccc;
	font-family:		inherit;
	font-size:			1vw;
	cursor:				pointer;
	
	transition:
	color 				200ms,
	background-color 	200ms,
	border				200ms;
}

.login-button:hover {
	color:				magenta;
	background-color:	#fff;
	border:				1px solid magenta;
    text-decoration:	underline;
}

/* Стили для блока с информацией о пользователе */
.user-info {
	 display: none; /* flex  none */
    padding: 1vw 0;
    /* display: flex; */
    align-items: center;
    justify-content: flex-end;
    position: relative;
}

.user-avatar {
    width: 3vw;
    height: 3vw;
    margin-left: 1vw;
    border: 1px solid #ccc;
}

.user-name {
    font-size: 1vw;
    text-align: right;
    cursor: pointer;
}

/* Эффект при наведении на имя пользователя */
.user-name:hover {
    color: #f4f;
    text-decoration: underline;
}

/* Стили для стрелки выпадающего меню */
.dropdown-arrow {
    height: 1vw;
	width: 100%;
    margin-left: 0.5vw;
    transition: transform 0.3s;
}

/* Стили для выпадающего меню */
.dropdown-menu {
    display: none;
    font-size: 1vw;
    position: absolute;
    top: 100%;
    right: 0;
    background-color: white;
    border: 1px solid #ccc;
    padding: 1vw;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1;
    width: 10vw;
}

/* Стили для ссылок внутри выпадающего меню */
.dropdown-menu a {
    display: block;
    padding: 0.5vw 0;
    color: #000;
    text-decoration: none;
}

/* Эффект при наведении на ссылки выпадающего меню */
.dropdown-menu a:hover {
    color: #f4f;
    text-decoration: underline;
}

/* Показ меню и анимация стрелки при наведении на блок с информацией о пользователе */
.user-info:hover .dropdown-menu {
    display: block;
}

.user-info:hover .dropdown-arrow {
    transform: rotate(180deg);
}

/* Основной контейнер страницы */
.container {
    display: flex;
    height: 90%;
}

/* Стили для боковой панели */
.sidebar {
    width: 20%;
    background-color: #f8f8f8;
    padding: 0.75%;
    border-right: 1px solid #ccc;
    box-sizing: border-box;
    overflow-y: auto;
}

/* Стили для групп меню */
.menu-group {
    background-color: #e0e0e0;
    margin: 2% 0;
    padding: 2%;
}

/* Заголовок группы меню */
.menu-group-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    font-size: 1.2vw;
    user-select: none;
    cursor: pointer;
}

/* Анимация стрелки в заголовке меню */
.menu-group-title img {
    height: 1.2vw;
    transition: transform 0.3s;
}

/* Скрытые элементы меню по умолчанию */
.menu-items {
    display: none;
    background-color: #fff;
    padding: 2%;
    margin-top: 1%;
}

/* Стили для ссылок внутри меню */
.menu-items a {
    display: flex;
    align-items: center;
    padding: 1% 0;
    text-decoration: none;
    color: #000;
    font-size: 1vw;
    cursor: pointer;
}

/* Эффект при наведении на ссылки в меню */
.menu-items a:hover {
    color: #f4f;
    text-decoration: underline;
}

/* Стили для иконок внутри меню */
.menu-items a img {
    width: 1.2vw;
    height: 1.2vw;
    margin-right: 1vw;
}

/* Показ меню и анимация стрелки при открытии группы */
.menu-group.open .menu-items {
    display: block;
}

.menu-group.open .menu-group-title img {
    transform: rotate(180deg);
}

/* Основная область контента */
.content {
    flex-grow: 1;
    display: flex;
    padding: 0;
    margin: 0;
	user-select: none;
}

/* Стили для фрейма, отображающего контент */
iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Уведомления */
.notifications {
    position: fixed;
    bottom: 2vh;
    right: 1.5vw;
    z-index: 5000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 20vw;
    max-width: 20vw;
}

/* Стили для отдельных уведомлений */
.notification {
    display: flex;
    align-items: center;
    background-color: white;
    border-radius: 0.0vh;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 1vh;
    margin-bottom: 1vh;
	border: 1px solid;
    border-left: 0.7vw solid;
    width: 100%;
    max-width: 30vw;
}

/* Цветовая индикация успешных уведомлений */
.notification.success {
    border-color: #4CAF50;
}

/* Цветовая индикация уведомлений об ошибках */
.notification.error {
    border-color: #f44336;
}

/* Иконка уведомления */
.notification .icon {
    margin-right: 1vw;
    font-size: 1.5vw;
}

/* Текст сообщения в уведомлении */
.notification .message {
    flex: 1;
    font-size: 1vw;
}

/* Цвета для иконок уведомлений в зависимости от типа */
.notification .icon.success {
    color: #4CAF50;
}

.notification .icon.error {
    color: #f44336;
}

/* Адаптивные стили для уведомлений на экранах меньшего размера */
@media (max-width: 768px) {
    .notifications {
        width: 30vw; 
        max-width: 30vw;
    }

    .notification {
        padding: 0.8vh;
        border-left: 0.6vw solid;
    }

    .notification .icon {
        font-size: 1.75vw;
    }

    .notification .message {
        font-size: 1.5vw;
    }
}

@media (max-width: 480px) {
    .notifications {
        width: 40vw; 
        max-width: 40vw;
    }

    .notification {
        padding: 0.6vh;
        border-left: 0.5vw solid;
    }

    .notification .icon {
        font-size: 2vw;
    }

    .notification .message {
        font-size: 2vw;
    }
}


/* Основные стили для модального окна */
/* Основные стили для модального окна */
.modal {
    width: 30vw;
    padding: 0;
    border: 1px solid #ccc;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    background-color: white;
    font-family: inherit;
    text-align: center;
    position: relative;
}

.modal-content {
    padding: 2vw;
}

.close-modal-btn {
    background: none;
    border: none;
    font-size: 2vw;
    position: absolute;
    top: -2vw;    /* Смещение вверх, чтобы игнорировать padding */
    right: -2vw;  /* Смещение вправо, чтобы игнорировать padding */
    padding: 0.5vw; /* Внутренний отступ для кликабельности */
    cursor: pointer;
    color: #888;
    transition: color 200ms ease;
}

.close-modal-btn:hover {
    color: #f4f;
}

/* --- Стили для модального окна авторизации --- */

.modal-header {
    position: relative;
    padding-bottom: 2vh;
}

.modal-header h2 {
    color: #888;
    font-size: 2vw;
    margin: 0;
}

.modal-separator {
    margin: 1vw 0;
    color: #888;
}

.modal-form input[type="email"], 
.modal-form input[type="password"] {
    width: 100%;
    padding: 1vw;
    margin-bottom: 1vw;
    border: 1px solid #ccc;
    font-size: 1vw;
    font-family: inherit;
    box-sizing: border-box;
}

.forgot-password {
    font-size: 0.9vw;
    color: #888;
    text-decoration: none;
    margin-bottom: 1vw;
    display: block;
    text-align: right;
}

.forgot-password:hover {
    color: #f4f;
    text-decoration: underline;
}

.modal-button {
    padding: 1vw;
    width: 100%;
    font-size: 1vw;
    cursor: pointer;
    font-family: inherit;
    transition: all 200ms ease;
    margin-bottom: 0vw;
}

.discord-login {
    background-color: #5865F2;
    color: white;
    border: none;
}

.discord-login:hover {
    background-color: #4752c4;
}

.signin-btn {
    background-color: #f8f8f8;
    border: 1px solid #ccc;
    color: black;
}

.signin-btn:hover {
    color: magenta;
    background-color: #fff;
    border-color: magenta;
    text-decoration: underline;
}

.register-text {
    font-size: 1vw;
    color: #888;
    margin-top: 1vw;
}

.register-text a {
    color: #555;
    text-decoration: none;
}

.register-text a:hover {
    color: #f4f;
    text-decoration: underline;
}

/* --- Стили для модального окна регистрации --- */

.register-modal-header {
    color: #888;
    font-size: 2vw;
    margin: 0;
    padding-bottom: 2vh;
}

.modal-form input[type="text"],
.modal-form input[type="email"], 
.modal-form input[type="password"] {
    width: 100%;
    padding: 1vw;
    margin-bottom: 1vw;
    border: 1px solid #ccc;
    font-size: 1vw;
    font-family: inherit;
    box-sizing: border-box;
}

.register-btn {
    padding: 1vw;
    width: 100%;
    font-size: 1vw;
    cursor: pointer;
    font-family: inherit;
    background-color: #5865F2;
    color: white;
    border: none;
    transition: all 200ms ease;
    margin-bottom: 1vw;
}

.register-btn:hover {
    background-color: #4752c4;
}

/* --- Стили для модального окна подтверждения кода --- */

.verification-modal-header {
    color: #888;
    font-size: 2vw;
    margin: 0;
    text-align: center;
    padding-bottom: 2vh;
}

.verification-text {
    color: #555;
    font-size: 1vw;
    text-align: center;
    margin: 1vw 0;
}

.modal-form input[type="text"] {
    width: 100%;
    padding: 1vw;
    margin-bottom: 1vw;
    border: 1px solid #ccc;
    font-size: 1vw;
    font-family: inherit;
    box-sizing: border-box;
}

.verify-btn {
    padding: 1vw;
    width: 100%;
    font-size: 1vw;
    cursor: pointer;
    font-family: inherit;
    background-color: #5865F2;
    color: white;
    border: none;
    transition: all 200ms ease;
    margin-bottom: 1vw;
}

.verify-btn:hover {
    background-color: #4752c4;
}

.resend-code-btn,
.back-btn {
	font-family: inherit;
    background: none;
    border: none;
    color: #888;
    font-size: 0.9vw;
    text-decoration: underline;
    cursor: pointer;
    display: block;
    margin: 0.5vw 0;
    text-align: center;
}

.resend-code-btn:hover,
.back-btn:hover {
    color: #f4f;
}

/* --- Стили для диалогового окна с выбором да/нет --- */

.confirm-modal-header {
    color: #888;
    font-size: 2vw;
    margin: 0;
    text-align: center;
    padding-bottom: 2vh;
}

.confirm-text {
    color: #555;
    font-size: 1vw;
    text-align: center;
    margin: 1vw 0;
}

.confirm-buttons {
    display: flex;
    justify-content: space-around;
    padding-top: 1vw;
}

.confirm-yes,
.confirm-no {
    background: #f8f8f8;
    border: 1px solid #ccc;
    padding: 1vw 2vw;
    cursor: pointer;
    font-size: 1vw;
    transition: background-color 200ms ease, color 200ms ease;
}

.confirm-yes:hover {
    background-color: #d4edda;
    color: green;
}

.confirm-no:hover {
    background-color: #f8d7da;
    color: red;
}


scripts.js


// -- Скрипт для обработки кликов по ссылкам в меню
document.querySelectorAll('.menu-items a').forEach(link => {
    link.addEventListener('click', (event) => {
        event.preventDefault();  								// Предотвращаем стандартное действие ссылки
        const url = link.getAttribute('data-url');				// Получаем URL из атрибута
        document.getElementById('contentFrame').src = url;  	// Загружаем URL во фрейм
		showNotification('error', 'Opened ' + url);				// Отображаем уведомление об открытии ссылки
    });
});

// -- Скрипт для обработки кликов по заголовкам групп меню
document.querySelectorAll('.menu-group-title').forEach(title => {
    title.addEventListener('click', () => {
        const parent = title.parentElement;		// Находим родительский элемент (группу меню)
        parent.classList.toggle('open');		// Переключаем класс 'open' для группы меню
    });
});

// -- Функция для отображения уведомлений
function showNotification(type, message) {
    const notificationContainer = document.getElementById('notifications');  // Находим контейнер для уведомлений
    const notification = document.createElement('div');			// Создаем новый элемент для уведомления
    notification.classList.add('notification', type);			// Добавляем классы для уведомления

    const icon = document.createElement('span');  				// Создаем элемент для иконки
    icon.classList.add('icon', type);							// Добавляем классы для иконки
    icon.innerHTML = type === 'success' ? '✔️' : '❌';			// Устанавливаем иконку в зависимости от типа уведомления

    const text = document.createElement('div');  				// Создаем элемент для текста уведомления
    text.classList.add('message');  							// Добавляем класс для текста
    text.innerText = message;  									// Устанавливаем текст уведомления

    notification.appendChild(icon);  							// Добавляем иконку в уведомление
    notification.appendChild(text);  							// Добавляем текст в уведомление

    notificationContainer.appendChild(notification);  			// Добавляем уведомление в контейнер

    // -- Удаление уведомления через 5 секунд
    setTimeout(() => {
        notification.remove();  								// Удаляем уведомление
    }, 5000);
}

// МОДАЛЬНЫЕ ОКНА

const loginModal = document.getElementById('login-modal');
const registerModal = document.getElementById('register-modal');
const verificationModal = document.getElementById('verification-modal');
const confirmModal = document.getElementById('confirm-modal');

const showModalBtn = document.getElementById('show-modal-btn');
const showRegisterModalBtn = document.getElementById('show-register-modal-btn');
const showVerificationModalBtn = document.getElementById('show-verification-modal-btn');
const showConfirmModalBtn = document.getElementById('show-confirm-modal-btn');

const closeVerificationBtn = document.querySelector('.close-modal-btn');

// Переменные для отслеживания состояния окон
let isModalOpen = false;
let isRegisterModalOpen = false;
let isVerificationModalOpen = false;
let isConfirmModalOpen = false;

// Открытие окна авторизации
showModalBtn.addEventListener('click', (e) => {
    loginModal.showModal();
    isModalOpen = true;
    e.stopPropagation();  // Остановка всплытия события клика
});

// Открытие окна регистрации
showRegisterModalBtn.addEventListener('click', (e) => {
    registerModal.showModal();
    isRegisterModalOpen = true;
    e.stopPropagation();
});

// Открытие окна подтверждения кода
showVerificationModalBtn.addEventListener('click', () => {
    verificationModal.showModal();
    isVerificationModalOpen = true;
});

// Открытие окна подтверждения да/нет
showConfirmModalBtn.addEventListener('click', () => {
    confirmModal.showModal();
    isConfirmModalOpen = true;
});

// Закрытие окна подтверждения кода через кнопку закрытия
closeVerificationBtn.addEventListener('click', () => {
    verificationModal.close();
    isVerificationModalOpen = false;
});

// Закрытие окон при клике вне их
document.addEventListener('click', (e) => {
    if (isModalOpen && !loginModal.contains(e.target)) {
        loginModal.close();
        isModalOpen = false;
    }

    if (isRegisterModalOpen && !registerModal.contains(e.target)) {
        registerModal.close();
        isRegisterModalOpen = false;
    }

    // Важное замечание: окна подтверждения кода и да/нет НЕ закрываются при клике вне их,
    // поэтому здесь мы не добавляем для них соответствующую логику
});

// Остановка всплытия события клика для модальных окон, чтобы не закрывать их при клике внутри
loginModal.addEventListener('click', (e) => e.stopPropagation());
registerModal.addEventListener('click', (e) => e.stopPropagation());
verificationModal.addEventListener('click', (e) => e.stopPropagation());
confirmModal.addEventListener('click', (e) => e.stopPropagation());

// Логика обработки кнопок "Да" и "Нет" в диалоговом окне подтверждения
document.getElementById('confirm-yes').addEventListener('click', () => {
    confirmModal.close();
    isConfirmModalOpen = false;
    // Здесь можно добавить действия при выборе "Да"
});

document.getElementById('confirm-no').addEventListener('click', () => {
    confirmModal.close();
    isConfirmModalOpen = false;
    // Здесь можно добавить действия при выборе "Нет"
});



Отрефактори все это. Поменяй названия переменным, идентификаторам и классам на более понятные, что-то сгруппируй, что-то наоборот разбей по разным файлам. В общем, твоя цель - сделать код максимально понятным и читабельным, а также удобным для расширения(для этого можешь в каких-то местах менять и реализацию). А еще пофиксить тот баг, что нажатие мимо модального окна его не закрывает.