если я не авторизован  и нажимаю на профиль или действие которое предполагает авторизование пользователя открываеться модеьное окно с авторизацией или кнопкой для регистрации  все в 1 модельном окне 
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Хика Морi - АнимеСообщество</title>
    <!-- Подключение Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Noto+Sans+JP:wght@400;500;700&display=swap" rel="stylesheet">
    <style>
 
    </style>
</head>
<body>

    <!-- Навигационная панель -->
    <div class="navbar">
        <div class="logo" onclick="showSection('feed')">Хика Морi</div>
        <div class="nav-icons">
            <span onclick="showSection('feed')">🏠 Лента</span>
            <span onclick="showSection('createPost')">➕ Создать</span>
            <span onclick="showSection('animeWatch')">🎥 Просмотр</span>
            <span onclick="showSection('community')">👥 Сообщества</span>
            <span onclick="showSection('profile')">👤 Профиль</span>
            <span onclick="logout()">🚪 Выйти</span>
        </div>
    </div>

    <!-- Главная лента -->
    <div id="feed" class="section active feed">
        <h2>Лента Постов</h2>
        <div id="postsContainer">
            <!-- Посты будут загружаться здесь -->
        </div>
    </div>

    <!-- Форма создания поста -->
    <div id="createPost" class="section create-post">
        <h2>Создать новый пост</h2>
        <textarea id="postContent" placeholder="Что у вас на уме?"></textarea>
        <input type="file" id="postImages" accept="image/*" multiple>
        <button onclick="createPost()">Опубликовать</button>
    </div>

    <!-- Раздел просмотра аниме -->
    <div id="animeWatch" class="section anime-watch">
        <h2>Просмотр Аниме</h2>
        <!-- Поиск аниме -->
        <div class="search-bar">
            <input type="text" id="searchAnime" placeholder="Поиск аниме...">
            <button onclick="searchAnime()">🔍</button>
        </div>
        <!-- Список аниме -->
        <div class="anime-list" id="animeList">
            <!-- Пример аниме -->
            <!-- Добавьте динамическую загрузку аниме через API -->
        </div>

        <!-- Видео-плеер -->
        <div class="video-player" id="videoPlayer" style="display:none;">
            <div class="player-content">
                <button class="close-btn" onclick="closeVideoPlayer()">✖</button>
                <video controls id="animeVideo" width="600">
                    <source src="" type="video/mp4">
                    Ваш браузер не поддерживает видео.
                </video>
            </div>
        </div>
    </div>

    <!-- Раздел Сообщества -->
    <div id="community" class="section community">
        <div class="community-header">
            <h2>Сообщества</h2>
            <button onclick="openModal('createGroupModal')">Создать сообщество</button>
        </div>
        <div class="groups-list" id="groupsList">
            <!-- Сообщества будут загружаться здесь -->
        </div>
    </div>

    <!-- Форма создания сообщества (Модальное окно) -->
    <div class="modal" id="createGroupModal">
        <div class="modal-content">
            <span class="close-btn" onclick="closeModal('createGroupModal')">&times;</span>
            <h2>Создать новое сообщество</h2>
            <input type="text" id="groupName" placeholder="Название сообщества">
            <textarea id="groupDescription" placeholder="Описание сообщества"></textarea>
            <div style="display: flex; justify-content: flex-end; width: 100%;">
                <button onclick="createGroup()">Создать</button>
                <button onclick="closeModal('createGroupModal')" class="cancel-btn">Отмена</button>
            </div>
        </div>
    </div>
<!-- Форма входа (Модальное окно) -->
<div class="modal" id="loginModal">
    <div class="modal-content">
        <span class="close-btn" onclick="closeModal('loginModal')">&times;</span>
        <h2>Вход</h2>
        <input type="text" id="loginUsername" placeholder="Имя пользователя">
        <input type="password" id="loginPassword" placeholder="Пароль">
        <button onclick="login()">Войти</button>
        <p>Нет аккаунта? <a href="#" onclick="showRegister()">Зарегистрироваться</a></p>
    </div>
</div>
    <!-- Форма регистрации (Модальное окно) -->
<div class="modal" id="registerModal">
    <div class="modal-content">
        <span class="close-btn" onclick="closeModal('registerModal')">&times;</span>
        <h2>Регистрация</h2>
        <input type="text" id="registerUsername" placeholder="Имя пользователя">
        <input type="password" id="registerPassword" placeholder="Пароль">
        <button onclick="register()">Зарегистрироваться</button>
        <p>Уже есть аккаунт? <a href="#" onclick="showLogin()">Войти</a></p>
    </div>
</div>
    <!-- Секция группы -->
    <div id="groupSection" class="section group-section">
        <div class="group-header">
            <h2 id="currentGroupName">Название Сообщества</h2>
            <button id="createEventBtn" onclick="openModal('createEventModal')">Создать событие</button>
        </div>
        <div id="groupPosts" class="feed">
            <!-- Посты внутри группы будут загружаться здесь -->
        </div>
        <h3>События</h3>
        <div class="events-list" id="groupEvents">
            <!-- События будут загружаться здесь -->
        </div>
        <!-- Карта события -->
        <div id="eventMap" class="event-map">
            <!-- Встроенная карта будет отображаться здесь -->
        </div>
    </div>

    <!-- Форма создания события (Модальное окно) -->
    <div class="modal" id="createEventModal">
        <div class="modal-content">
            <span class="close-btn" onclick="closeModal('createEventModal')">&times;</span>
            <h2>Создать событие</h2>
            <input type="text" id="eventName" placeholder="Название события">
            <textarea id="eventDescription" placeholder="Описание события"></textarea>
            <input type="text" id="eventLocation" placeholder="Местоположение (адрес)">
            <input type="date" id="eventDate" placeholder="Дата события">
            <input type="time" id="eventTime" placeholder="Время события">
            <div style="display: flex; justify-content: flex-end; width: 100%;">
                <button onclick="createEvent()">Создать</button>
                <button onclick="closeModal('createEventModal')" class="cancel-btn">Отмена</button>
            </div>
        </div>
    </div>

    <!-- Профиль пользователя -->
    <div id="profile" class="section profile">
        <h2>Профиль</h2>
        <div class="profile-header">
            <img id="profileAvatar" src="https://i.imgur.com/8Km9tLL.jpg" alt="Аватар">
            <div>
                <h2 id="profileName">Имя Пользователя</h2>
                <p id="profileUsername">@nik_name</p>
            </div>
        </div>
        <div class="profile-content">
            <h3>О себе</h3>
            <p id="profileBio">Любитель аниме, манги и всего японского! 🎌</p>
            <h3>Мои посты</h3>
            <div id="userPosts">
                <!-- Пользовательские посты будут загружаться здесь -->
            </div>
        </div>
    </div>

    <!-- Видео-плеер -->
    <div class="video-player" id="videoPlayer" style="display:none;">
        <div class="player-content">
            <button class="close-btn" onclick="closeVideoPlayer()">✖</button>
            <video controls id="animeVideo" width="600">
                <source src="" type="video/mp4">
                Ваш браузер не поддерживает видео.
            </video>
        </div>
    </div>

    <!-- Форма входа (Модальное окно) -->
    <div class="modal" id="loginModal">
        <div class="modal-content">
            <span class="close-btn" onclick="closeModal('loginModal')">&times;</span>
            <h2>Вход</h2>
            <input type="text" id="loginUsername" placeholder="Имя пользователя">
            <input type="password" id="loginPassword" placeholder="Пароль">
            <button onclick="login()">Войти</button>
            <p>Нет аккаунта? <a href="#" onclick="showRegister()">Зарегистрироваться</a></p>
        </div>
    </div>

    <!-- Форма регистрации (Модальное окно) -->
    <div class="modal" id="registerModal">
        <div class="modal-content">
            <span class="close-btn" onclick="closeModal('registerModal')">&times;</span>
            <h2>Регистрация</h2>
            <input type="text" id="registerUsername" placeholder="Имя пользователя">
            <input type="password" id="registerPassword" placeholder="Пароль">
            <button onclick="register()">Зарегистрироваться</button>
            <p>Уже есть аккаунт? <a href="#" onclick="showLogin()">Войти</a></p>
        </div>
    </div>

    <!-- Подключение Google Maps API -->
    <script async
        src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_MAPS_API_KEY&callback=initMap">
    </script>

    <!-- JavaScript для взаимодействия -->
    <script>
        let currentUser = null;
        let authToken = null;

        // Инициализация карты
        let map;
        let markers = [];

        function initMap() {
            map = new google.maps.Map(document.getElementById('eventMap'), {
                center: { lat: 55.7558, lng: 37.6173 }, // Центр карты, например, Москва
                zoom: 10
            });
        }

        // Функция для переключения секций
        function showSection(sectionId) {
            const sections = document.querySelectorAll('.section');
            sections.forEach(section => {
                if (section.id === sectionId) {
                    section.classList.add('active');
                } else {
                    section.classList.remove('active');
                }
            });

            // Скрываем модальные окна при переключении секций
            const modals = document.querySelectorAll('.modal');
            modals.forEach(modal => {
                modal.style.display = 'none';
            });

            // Если не группа, скрываем секцию группы
            if (sectionId !== 'groupSection') {
                document.getElementById('groupSection').style.display = 'none';
            }

            // Если секция - лента, загружаем посты
            if (sectionId === 'feed') {
                loadPosts();
            }

            // Если секция - сообщества, загружаем группы
            if (sectionId === 'community') {
                loadGroups();
            }

            // Если секция - профиль, загружаем профиль
            if (sectionId === 'profile') {
                loadProfile();
            }
        }

        // Функции для открытия и закрытия модальных окон
        function openModal(modalId) {
            document.getElementById(modalId).style.display = 'flex';
        }

        function closeModal(modalId) {
            document.getElementById(modalId).style.display = 'none';
        }

        // Регистрация пользователя
        function register() {
            const username = document.getElementById('registerUsername').value.trim();
            const password = document.getElementById('registerPassword').value.trim();

            if (username === "" || password === "") {
                alert("Пожалуйста, заполните все поля.");
                return;
            }

            fetch('/api/register', {  // Используем относительный путь
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ username, password })
            })
            .then(response => response.json())
            .then(data => {
                if (data.error) {
                    alert(data.error);
                } else {
                    alert(data.message);
                    closeModal('registerModal');
                    openModal('loginModal');
                }
            })
            .catch(error => {
                console.error('Error:', error);
            });
        }

        // Показать форму регистрации
        function showRegister() {
            closeModal('loginModal');
            openModal('registerModal');
        }

        // Показать форму входа
        function showLogin() {
            closeModal('registerModal');
            openModal('loginModal');
        }

        // Вход пользователя
        function login() {
            const username = document.getElementById('loginUsername').value.trim();
            const password = document.getElementById('loginPassword').value.trim();

            if (username === "" || password === "") {
                alert("Пожалуйста, заполните все поля.");
                return;
            }

            fetch('/api/login', {  // Используем относительный путь
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ username, password })
            })
            .then(response => response.json())
            .then(data => {
                if (data.error) {
                    alert(data.error);
                } else {
                    authToken = data.access_token;
                    currentUser = data.user;
                    localStorage.setItem('authToken', authToken);
                    localStorage.setItem('currentUser', JSON.stringify(currentUser));
                    closeModal('loginModal');
                    showSection('feed');
                }
            })
            .catch(error => {
                console.error('Error:', error);
            });
        }

        // Выход пользователя
        function logout() {
            currentUser = null;
            authToken = null;
            localStorage.removeItem('authToken');
            localStorage.removeItem('currentUser');
            showSection('loginModal');
        }

        // Функция для создания нового поста
        function createPost() {
            if (!currentUser) {
                alert("Пожалуйста, войдите в систему, чтобы создавать посты.");
                return;
            }

            const content = document.getElementById('postContent').value.trim();
            const imagesInput = document.getElementById('postImages');
            const imageFiles = imagesInput.files;

            if (content === "" && imageFiles.length === 0) {
                alert("Пожалуйста, введите текст поста или выберите изображения.");
                return;
            }

            // Обработка изображений (предполагается, что изображение может быть загружено на сервер или хостинг)
            // В данном примере мы будем использовать Base64 строки
            if (imageFiles.length > 0) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const imageData = e.target.result; // Base64 строка изображения

                    fetch('/api/posts', {  // Используем относительный путь
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'Authorization': `Bearer ${authToken}`
                        },
                        body: JSON.stringify({
                            author_id: currentUser.user_id,
                            content: content,
                            image: imageData
                        })
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.error) {
                            alert(data.error);
                        } else {
                            alert(data.message);
                            document.getElementById('postContent').value = "";
                            imagesInput.value = "";
                            loadPosts();
                            showSection('feed');
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                    });
                }
                reader.readAsDataURL(imageFiles[0]);
            } else {
                fetch('/api/posts', {  // Используем относительный путь
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': `Bearer ${authToken}`
                    },
                    body: JSON.stringify({
                        author_id: currentUser.user_id,
                        content: content,
                        image: null
                    })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.error) {
                        alert(data.error);
                    } else {
                        alert(data.message);
                        document.getElementById('postContent').value = "";
                        imagesInput.value = "";
                        loadPosts();
                        showSection('feed');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                });
            }
        }

        // Функция для загрузки постов
        function loadPosts() {
            fetch('/api/posts', {  // Используем относительный путь
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${authToken}`
                }
            })
                .then(response => response.json())
                .then(data => {
                    const postsContainer = document.getElementById('postsContainer');
                    postsContainer.innerHTML = "";

                    data.forEach(post => {
                        const postElement = document.createElement('div');
                        postElement.className = 'post';
                        postElement.innerHTML = `
                            <div class="post-header">
                                <img src="${post.avatar}" alt="Аватар">
                                <strong>${post.username}</strong>
                            </div>
                            <div class="post-content">
                                ${post.content ? `<p>${post.content}</p>` : ''}
                                ${post.image ? `<img src="${post.image}" alt="Изображение поста">` : ''}
                            </div>
                            <div class="post-actions">
                                <span onclick="likePost(${post.id}, this)">👍 <span class="like-count">${post.likes}</span></span>
                                <span onclick="toggleComments(this, ${post.id})">💬 Комментарии</span>
                            </div>
                            <div class="comments-section" style="display: none; margin-top: 15px;">
                                <input type="text" placeholder="Написать комментарий..." class="comment-input" id="commentInput-${post.id}">
                                <button onclick="addComment(${post.id})">Отправить</button>
                                <div class="comments-list" id="commentsList-${post.id}"></div>
                            </div>
                        `;
                        postsContainer.appendChild(postElement);
                    });
                })
                .catch(error => {
                    console.error('Error:', error);
                });
        }

        // Функция для лайка поста
        function likePost(postId, element) {
            fetch(`/api/posts/${postId}/like`, {  // Используем относительный путь
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${authToken}`
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.likes !== undefined) {
                    element.querySelector('.like-count').textContent = data.likes;
                }
            })
            .catch(error => {
                console.error('Error:', error);
            });
        }

        // Функция для переключения секции комментариев
        function toggleComments(element, postId) {
            const commentsSection = element.parentElement.nextElementSibling;
            if (commentsSection.style.display === 'none') {
                commentsSection.style.display = 'block';
                loadComments(postId);
            } else {
                commentsSection.style.display = 'none';
            }
        }

        // Функция для загрузки комментариев
        function loadComments(postId) {
            fetch(`/api/posts/${postId}/comments`, {  // Используем относительный путь
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${authToken}`
                }
            })
                .then(response => response.json())
                .then(data => {
                    const commentsList = document.getElementById(`commentsList-${postId}`);
                    commentsList.innerHTML = "";

                    data.forEach(comment => {
                        const commentElement = document.createElement('div');
                        commentElement.style.padding = '10px 0';
                        commentElement.style.borderBottom = '1px solid #eee';
                        commentElement.innerHTML = `
                            <img src="${comment.avatar}" alt="Аватар" style="width:30px; height:30px; border-radius:50%; vertical-align: middle; margin-right:10px;">
                            <strong>${comment.username}</strong>
                            <p>${comment.content}</p>
                        `;
                        commentsList.appendChild(commentElement);
                    });
                })
                .catch(error => {
                    console.error('Error:', error);
                });
        }

        // Функция для добавления комментария
        function addComment(postId) {
            if (!currentUser) {
                alert("Пожалуйста, войдите в систему, чтобы оставлять комментарии.");
                return;
            }

            const commentInput = document.getElementById(`commentInput-${postId}`);
            const commentText = commentInput.value.trim();
            if (commentText === "") {
                alert("Пожалуйста, введите комментарий.");
                return;
            }

            fetch(`/api/posts/${postId}/comments`, {  // Используем относительный путь
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${authToken}`
                },
                body: JSON.stringify({
                    user_id: currentUser.user_id,
                    content: commentText
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.error) {
                    alert(data.error);
                } else {
                    alert(data.message);
                    commentInput.value = "";
                    loadComments(postId);
                }
            })
            .catch(error => {
                console.error('Error:', error);
            });
        }

        // Функция для создания сообщества
        function createGroup() {
            if (!currentUser) {
                alert("Пожалуйста, войдите в систему, чтобы создавать сообщества.");
                return;
            }

            const name = document.getElementById('groupName').value.trim();
            const description = document.getElementById('groupDescription').value.trim();

            if (name === "" || description === "") {
                alert("Пожалуйста, заполните все поля.");
                return;
            }

            fetch('/api/groups', {  // Используем относительный путь
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${authToken}`
                },
                body: JSON.stringify({ name, description })
            })
            .then(response => response.json())
            .then(data => {
                if (data.error) {
                    alert(data.error);
                } else {
                    alert(data.message);
                    closeModal('createGroupModal');
                    loadGroups();
                }
            })
            .catch(error => {
                console.error('Error:', error);
            });
        }

        // Функция для загрузки сообществ
        function loadGroups() {
            fetch('/api/groups', {  // Используем относительный путь
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${authToken}`
                }
            })
                .then(response => response.json())
                .then(data => {
                    const groupsList = document.getElementById('groupsList');
                    groupsList.innerHTML = "";

                    data.forEach(group => {
                        const groupElement = document.createElement('div');
                        groupElement.className = 'group-item';
                        groupElement.style.padding = '15px';
                        groupElement.style.backgroundColor = '#fff';
                        groupElement.style.marginBottom = '10px';
                        groupElement.style.borderRadius = '8px';
                        groupElement.style.boxShadow = '0 2px 5px rgba(0,0,0,0.1)';
                        groupElement.style.cursor = 'pointer';
                        groupElement.onclick = () => openGroup(group.id);
                        groupElement.innerHTML = `
                            <h3>${group.name}</h3>
                            <p>${group.description}</p>
                        `;
                        groupsList.appendChild(groupElement);
                    });
                })
                .catch(error => {
                    console.error('Error:', error);
                });
        }

        // Функция для открытия группы
        function openGroup(groupId) {
            fetch(`/api/groups/${groupId}`, {  // Используем относительный путь
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${authToken}`
                }
            })
                .then(response => response.json())
                .then(data => {
                    if (data.error) {
                        alert(data.error);
                    } else {
                        showSection('groupSection');
                        document.getElementById('currentGroupName').textContent = data.name;
                        loadGroupPosts(data.id);
                        loadGroupEvents(data.id);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                });
        }

        // Функция для загрузки постов группы
        function loadGroupPosts(groupId) {
            // В данном примере посты групп не реализованы на бэкенде
            // Вам нужно добавить соответствующие маршруты и логику на бэкенде
            // Ниже представлен пример заполнения dummy данных

            const groupPostsContainer = document.getElementById('groupPosts');
            groupPostsContainer.innerHTML = "<p>Посты группы будут загружены сюда.</p>";
        }

        // Функция для загрузки событий группы
        function loadGroupEvents(groupId) {
            // В данном примере события групп уже загружены при открытии группы
            // Поэтому дополнительно загружать не нужно
            // Однако, для полноты вы можете реализовать загрузку через отдельный маршрут
        }

        // Функция для создания события
        function createEvent() {
            if (!currentUser) {
                alert("Пожалуйста, войдите в систему, чтобы создавать события.");
                return;
            }

            const name = document.getElementById('eventName').value.trim();
            const description = document.getElementById('eventDescription').value.trim();
            const location = document.getElementById('eventLocation').value.trim();
            const date = document.getElementById('eventDate').value;
            const time = document.getElementById('eventTime').value;

            if (name === "" || description === "" || location === "" || date === "" || time === "") {
                alert("Пожалуйста, заполните все поля.");
                return;
            }

            // Преобразование адреса в координаты (используя Geocoding API)
            fetch(`https://maps.googleapis.com/maps/api/geocode/json?address=${encodeURIComponent(location)}&key=YOUR_GOOGLE_MAPS_API_KEY`)
                .then(response => response.json())
                .then(data => {
                    if (data.status === "OK") {
                        const locationData = data.results[0].geometry.location;
                        const currentGroupName = document.getElementById('currentGroupName').textContent;

                        // Получение ID группы по ее названию
                        fetch(`/api/groups`, {  // Используем относительный путь
                            method: 'GET',
                            headers: {
                                'Content-Type': 'application/json',
                                'Authorization': `Bearer ${authToken}`
                            }
                        })
                            .then(resp => resp.json())
                            .then(groups => {
                                const group = groups.find(g => g.name === currentGroupName);
                                if (!group) {
                                    alert("Группа не найдена.");
                                    return;
                                }

                                fetch(`/api/groups/${group.id}/events`, {  // Используем относительный путь
                                    method: 'POST',
                                    headers: {
                                        'Content-Type': 'application/json',
                                        'Authorization': `Bearer ${authToken}`
                                    },
                                    body: JSON.stringify({
                                        name,
                                        description,
                                        location,
                                        latitude: locationData.lat,
                                        longitude: locationData.lng,
                                        date,
                                        time
                                    })
                                })
                                    .then(resp => resp.json())
                                    .then(eventData => {
                                        if (eventData.error) {
                                            alert(eventData.error);
                                        } else {
                                            alert(eventData.message);
                                            closeModal('createEventModal');
                                            loadGroupEvents(group.id);
                                            addMarkerToMap({
                                                name,
                                                description,
                                                latitude: locationData.lat,
                                                longitude: locationData.lng,
                                                date,
                                                time
                                            });
                                        }
                                    })
                                    .catch(error => {
                                        console.error('Error:', error);
                                    });
                            });

                    } else {
                        alert("Не удалось найти указанное местоположение.");
                    }
                })
                .catch(error => {
                    console.error("Ошибка при получении координат:", error);
                    alert("Произошла ошибка при создании события.");
                });
        }

        // Функция для добавления маркера на карту
        function addMarkerToMap(event) {
            const marker = new google.maps.Marker({
                position: { lat: event.latitude, lng: event.longitude },
                map: map,
                title: event.name
            });

            const infoWindow = new google.maps.InfoWindow({
                content: `<h3>${event.name}</h3><p>${event.description}</p><p>${event.date} ${event.time}</p>`
            });

            marker.addListener('click', () => {
                infoWindow.open(map, marker);
            });

            markers.push(marker);
        }

        // Функция для отображения списка серий (может быть реализована через дополнительный API)
        function showEpisodes(element) {
            // Реализация зависит от вашего API или данных
        }

        // Функция для открытия видео-плеера
        function openVideoPlayer(videoUrl) {
            const videoPlayer = document.getElementById('videoPlayer');
            const videoElement = document.getElementById('animeVideo');
            videoElement.src = videoUrl;
            videoPlayer.style.display = 'flex';
            videoElement.play();
        }

        // Функция для закрытия видео-плеера
        function closeVideoPlayer() {
            const videoPlayer = document.getElementById('videoPlayer');
            const videoElement = document.getElementById('animeVideo');
            videoElement.pause();
            videoElement.src = '';
            videoPlayer.style.display = 'none';
        }

        // Функция для поиска аниме (может быть реализована через внешний API)
        function searchAnime() {
            const query = document.getElementById('searchAnime').value.toLowerCase();
            const animeItems = document.querySelectorAll('.anime-item');

            animeItems.forEach(item => {
                const title = item.querySelector('.anime-info h3').textContent.toLowerCase();
                if (title.includes(query)) {
                    item.style.display = 'flex';
                } else {
                    item.style.display = 'none';
                }
            });
        }

        // Функция для загрузки профиля пользователя
        function loadProfile() {
            if (!currentUser) {
                alert("Пожалуйста, войдите в систему, чтобы просмотреть профиль.");
                showSection('loginModal');
                return;
            }

            fetch(`/api/users/${currentUser.user_id}`, {  // Используем относительный путь
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${authToken}`
                }
            })
                .then(response => response.json())
                .then(data => {
                    if (data.error) {
                        alert(data.error);
                    } else {
                        document.getElementById('profileName').textContent = data.username;
                        document.getElementById('profileUsername').textContent = `@${data.username}`;
                        document.getElementById('profileAvatar').src = data.avatar;
                        document.getElementById('userPosts').innerHTML = "";

                        data.posts.forEach(post => {
                            const postElement = document.createElement('div');
                            postElement.className = 'post';
                            postElement.innerHTML = `
                                <div class="post-header">
                                    <img src="${currentUser.avatar}" alt="Аватар">
                                    <strong>Вы</strong>
                                </div>
                                <div class="post-content">
                                    ${post.content ? `<p>${post.content}</p>` : ''}
                                    ${post.image ? `<img src="${post.image}" alt="Изображение поста">` : ''}
                                </div>
                                <div class="post-actions">
                                    <span onclick="likePost(${post.id}, this)">👍 <span class="like-count">${post.likes}</span></span>
                                    <span onclick="toggleComments(this, ${post.id})">💬 Комментарии</span>
                                </div>
                                <div class="comments-section" style="display: none; margin-top: 15px;">
                                    <input type="text" placeholder="Написать комментарий..." class="comment-input" id="commentInput-${post.id}">
                                    <button onclick="addComment(${post.id})">Отправить</button>
                                    <div class="comments-list" id="commentsList-${post.id}"></div>
                                </div>
                            `;
                            document.getElementById('userPosts').appendChild(postElement);
                        });
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                });
        }

        // Функция для загрузки профиля при загрузке страницы
        document.addEventListener('DOMContentLoaded', () => {
            // Проверяем, есть ли токен в localStorage
            authToken = localStorage.getItem('authToken');
            const storedUser = localStorage.getItem('currentUser');
            if (authToken && storedUser) {
                currentUser = JSON.parse(storedUser);
                showSection('feed');
            } else {
                showSection('loginModal');
            }
        });


    </script>

</body>
</html>