Вот мой фронт <!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>
        </div>
    </div>

    <!-- Главная лента -->
    <div id="feed" class="section active feed">
        <!-- Пример поста -->
        <div class="post" data-post-id="1">
            <div class="post-header">
                <img src="https://i.imgur.com/8Km9tLL.jpg" alt="Аватар">
                <strong>Anko_Lover</strong>
            </div>
            <div class="post-content">
                <img src="https://cdn.myanimelist.net/images/anime/10/47347.jpg" alt="Attack on Titan">
                Обожаю новый сезон "Attack on Titan"! Как вам развитие сюжета?
            </div>
            <div class="post-actions">
                <span onclick="likePost(this)">👍 <span class="like-count">0</span></span>
                <span onclick="toggleComments(this)">💬 Комментарии</span>
            </div>
            <div class="comments-section" style="display: none; margin-top: 15px;">
                <input type="text" placeholder="Написать комментарий..." class="comment-input">
                <button onclick="addComment(this)">Отправить</button>
                <div class="comments-list"></div>
            </div>
        </div>
        <!-- Дополнительные посты -->
        <div class="post" data-post-id="2">
            <div class="post-header">
                <img src="https://i.imgur.com/8Km9tLL.jpg" alt="Аватар">
                <strong>Otaku_Girl</strong>
            </div>
            <div class="post-content">
                <img src="https://cdn.myanimelist.net/images/anime/1322/128099.jpg" alt="Naruto Shippuden">
                Новые серии "Naruto Shippuden" просто супер! Нравится ли вам развитие сюжета?
            </div>
            <div class="post-actions">
                <span onclick="likePost(this)">👍 <span class="like-count">0</span></span>
                <span onclick="toggleComments(this)">💬 Комментарии</span>
            </div>
            <div class="comments-section" style="display: none; margin-top: 15px;">
                <input type="text" placeholder="Написать комментарий..." class="comment-input">
                <button onclick="addComment(this)">Отправить</button>
                <div class="comments-list"></div>
            </div>
        </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">
            <!-- Пример аниме -->
            <div class="anime-item">
                <img src="https://cdn.myanimelist.net/images/anime/1552/108717.jpg" alt="Attack on Titan">
                <div class="anime-info">
                    <h3>Attack on Titan</h3>
                    <p>Эпическая история о борьбе человечества за выживание против титанических существ.</p>
                    <div class="anime-actions">
                        <span onclick="toggleFavorite(this)">⭐ <span class="favorite-count">0</span></span>
                        <span onclick="showEpisodes(this)">📺 Серии</span>
                        <div class="rating" onclick="rateAnime(event, this)">
                            <span class="star">&#9734;</span>
                            <span class="star">&#9734;</span>
                            <span class="star">&#9734;</span>
                            <span class="star">&#9734;</span>
                            <span class="star">&#9734;</span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Другие аниме -->
            <div class="anime-item">
                <img src="https://cdn.myanimelist.net/images/anime/13/17405.jpg" alt="Naruto Shippuden">
                <div class="anime-info">
                    <h3>Naruto Shippuden</h3>
                    <p>Продолжение приключений Наруто Узумаки и его друзей в мире ниндзя.</p>
                    <div class="anime-actions">
                        <span onclick="toggleFavorite(this)">⭐ <span class="favorite-count">0</span></span>
                        <span onclick="showEpisodes(this)">📺 Серии</span>
                        <div class="rating" onclick="rateAnime(event, this)">
                            <span class="star">&#9734;</span>
                            <span class="star">&#9734;</span>
                            <span class="star">&#9734;</span>
                            <span class="star">&#9734;</span>
                            <span class="star">&#9734;</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="anime-item">
                <img src="https://cdn.myanimelist.net/images/anime/5/73245.jpg" alt="One Piece">
                <div class="anime-info">
                    <h3>One Piece</h3>
                    <p>Эпическое путешествие Лаффи и его команды в поисках легендарного сокровища - One Piece.</p>
                    <div class="anime-actions">
                        <span onclick="toggleFavorite(this)">⭐ <span class="favorite-count">0</span></span>
                        <span onclick="showEpisodes(this)">📺 Серии</span>
                        <div class="rating" onclick="rateAnime(event, this)">
                            <span class="star">&#9734;</span>
                            <span class="star">&#9734;</span>
                            <span class="star">&#9734;</span>
                            <span class="star">&#9734;</span>
                            <span class="star">&#9734;</span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Добавьте больше аниме по необходимости -->
        </div>

        <!-- Видео-плеер -->
        <div class="video-player" id="videoPlayer">
            <div class="player-content">
                <button class="close-btn" onclick="closeVideoPlayer()">✖</button>
                <video controls id="animeVideo">
                    <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 class="group-item" onclick="openGroup('Атака титанов')">
                <h3>Атака титанов</h3>
                <p>Обсуждаем всё, что связано с "Атакой Титанов"!</p>
                <div class="group-actions">
                    <span title="Подробнее">🔍</span>
                </div>
            </div>
            <div class="group-item" onclick="openGroup('Наруто Шиппуден')">
                <h3>Наруто Шиппуден</h3>
                <p>Приключения Наруто и его друзей в мире ниндзя.</p>
                <div class="group-actions">
                    <span title="Подробнее">🔍</span>
                </div>
            </div>
            <!-- Добавьте больше сообществ по необходимости -->
        </div>
    </div>

    <!-- Форма создания сообщества (Модальное окно) -->
    <div class="modal" id="createGroupModal">
        <div class="modal-content">
            <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 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 class="post" data-post-id="group1">
                <div class="post-header">
                    <img src="https://i.imgur.com/8Km9tLL.jpg" alt="Аватар">
                    <strong>Админ группы</strong>
                </div>
                <div class="post-content">
                    Добро пожаловать в сообщество "Название Сообщества"! Давайте обсудим всё, что связано с этим аниме.
                </div>
                <div class="post-actions">
                    <span onclick="likePost(this)">👍 <span class="like-count">0</span></span>
                    <span onclick="toggleComments(this)">💬 Комментарии</span>
                </div>
                <div class="comments-section" style="display: none; margin-top: 15px;">
                    <input type="text" placeholder="Написать комментарий..." class="comment-input">
                    <button onclick="addComment(this)">Отправить</button>
                    <div class="comments-list"></div>
                </div>
            </div>
            <!-- Добавьте больше постов по необходимости -->
        </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">
            <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 src="https://i.imgur.com/8Km9tLL.jpg" alt="Аватар">
            <div>
                <h2>Имя Пользователя</h2>
                <p>@nik_name</p>
            </div>
        </div>
        <div class="profile-content">
            <h3>О себе</h3>
            <p>Любитель аниме, манги и всего японского! 🎌</p>
            <h3>Мои посты</h3>
            <!-- Пользовательские посты будут отображаться здесь -->
            <!-- Пример поста пользователя -->
            <div class="post" data-post-id="user1">
                <div class="post-header">
                    <img src="https://i.imgur.com/8Km9tLL.jpg" alt="Аватар">
                    <strong>Вы</strong>
                </div>
                <div class="post-content">
                    <p>Сегодня посмотрел новый эпизод "One Piece" — невероятно!</p>
                </div>
                <div class="post-actions">
                    <span onclick="likePost(this)">👍 <span class="like-count">0</span></span>
                    <span onclick="toggleComments(this)">💬 Комментарии</span>
                </div>
                <div class="comments-section" style="display: none; margin-top: 15px;">
                    <input type="text" placeholder="Написать комментарий..." class="comment-input">
                    <button onclick="addComment(this)">Отправить</button>
                    <div class="comments-list"></div>
                </div>
            </div>
            <!-- Добавьте больше постов по необходимости -->
        </div>
    </div>

    <!-- Видео-плеер -->
    <div class="video-player" id="videoPlayer">
        <div class="player-content">
            <button class="close-btn" onclick="closeVideoPlayer()">✖</button>
            <video controls id="animeVideo">
                <source src="" type="video/mp4">
                Ваш браузер не поддерживает видео.
            </video>
        </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 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';
            }
        }

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

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

        // Функция для создания нового поста
        function createPost() {
            const content = document.getElementById('postContent').value.trim();
            const imagesInput = document.getElementById('postImages');
            const imageFiles = imagesInput.files;

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

            // Генерация уникального ID для поста
            const postId = Date.now().toString();

            // Создание элементов поста
            const post = document.createElement('div');
            post.className = 'post';
            post.setAttribute('data-post-id', postId);
            post.style.opacity = '0';

            const postHeader = document.createElement('div');
            postHeader.className = 'post-header';
            postHeader.innerHTML = `
                <img src="https://i.imgur.com/8Km9tLL.jpg" alt="Аватар">
                <strong>Вы</strong>
            `;

            const postContent = document.createElement('div');
            postContent.className = 'post-content';
            if (content !== "") {
                const text = document.createElement('p');
                text.textContent = content;
                postContent.appendChild(text);
            }

            if (imageFiles.length > 0) {
                Array.from(imageFiles).forEach(file => {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        const img = document.createElement('img');
                        img.src = e.target.result;
                        img.alt = "Пользовательское изображение";
                        postContent.appendChild(img);
                    }
                    reader.readAsDataURL(file);
                });
            }

            const postActions = document.createElement('div');
            postActions.className = 'post-actions';
            postActions.innerHTML = `
                <span onclick="likePost(this)">👍 <span class="like-count">0</span></span>
                <span onclick="toggleComments(this)">💬 Комментарии</span>
            `;

            const commentsSection = document.createElement('div');
            commentsSection.className = 'comments-section';
            commentsSection.style.display = 'none';
            commentsSection.innerHTML = `
                <input type="text" placeholder="Написать комментарий..." class="comment-input">
                <button onclick="addComment(this)">Отправить</button>
                <div class="comments-list"></div>
            `;

            post.appendChild(postHeader);
            post.appendChild(postContent);
            post.appendChild(postActions);
            post.appendChild(commentsSection);

            // Добавление поста в начало ленты
            const feed = document.getElementById('feed');
            feed.insertBefore(post, feed.firstChild);

            // Сохранение поста в LocalStorage (для демонстрации)
            let posts = JSON.parse(localStorage.getItem('posts')) || [];
            const newPost = {
                id: postId,
                author: "Вы",
                content: content,
                images: [],
                likes: 0
            };
            if (imageFiles.length > 0) {
                Array.from(imageFiles).forEach(file => {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        newPost.images.push(e.target.result);
                        // Отображение изображений
                        const img = document.createElement('img');
                        img.src = e.target.result;
                        img.alt = "Пользовательское изображение";
                        postContent.appendChild(img);
                        // Обновление LocalStorage
                        localStorage.setItem('posts', JSON.stringify(posts));
                    }
                    reader.readAsDataURL(file);
                });
            }
            posts.unshift(newPost);
            localStorage.setItem('posts', JSON.stringify(posts));

            // Анимация появления поста
            setTimeout(() => {
                post.style.opacity = '1';
            }, 100);

            // Очистка формы и переключение на ленту
            document.getElementById('postContent').value = "";
            imagesInput.value = "";
            showSection('feed');
        }

        // Функция для лайка поста
        function likePost(element) {
            const likeCountSpan = element.querySelector('.like-count');
            let count = parseInt(likeCountSpan.textContent);
            count++;
            likeCountSpan.textContent = count;
            // Анимация увеличения сердца
            element.style.transform = 'scale(1.2)';
            setTimeout(() => {
                element.style.transform = 'scale(1)';
            }, 200);

            // Сохранение лайка в LocalStorage
            const post = element.closest('.post');
            const postId = post.getAttribute('data-post-id');
            let posts = JSON.parse(localStorage.getItem('posts')) || [];
            const currentPost = posts.find(p => p.id === postId);
            if (currentPost) {
                currentPost.likes = count;
                localStorage.setItem('posts', JSON.stringify(posts));
            }
        }

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

        // Функция для добавления комментария
        function addComment(button) {
            const commentsSection = button.parentElement;
            const commentInput = commentsSection.querySelector('.comment-input');
            const commentText = commentInput.value.trim();
            if (commentText === "") {
                alert("Пожалуйста, введите комментарий.");
                return;
            }

            const commentsList = commentsSection.querySelector('.comments-list');
            const comment = document.createElement('div');
            comment.style.padding = '10px 0';
            comment.style.borderBottom = '1px solid #eee';
            comment.textContent = commentText;
            comment.style.opacity = '0';
            comment.style.animation = 'fadeIn 0.3s forwards';
            commentsList.appendChild(comment);

            // Сохранение комментария в LocalStorage
            const post = button.closest('.post');
            const postId = post.getAttribute('data-post-id');
            let comments = JSON.parse(localStorage.getItem(`comments-${postId}`)) || [];
            comments.push(commentText);
            localStorage.setItem(`comments-${postId}`, JSON.stringify(comments));

            commentInput.value = "";
        }

        // Функция для загрузки комментариев из LocalStorage
        function loadComments(commentsSection) {
            const post = commentsSection.closest('.post');
            const postId = post.getAttribute('data-post-id');
            const comments = JSON.parse(localStorage.getItem(`comments-${postId}`)) || [];
            const commentsList = commentsSection.querySelector('.comments-list');
            commentsList.innerHTML = "";
            comments.forEach(text => {
                const comment = document.createElement('div');
                comment.style.padding = '10px 0';
                comment.style.borderBottom = '1px solid #eee';
                comment.textContent = text;
                comment.style.opacity = '0';
                comment.style.animation = 'fadeIn 0.3s forwards';
                commentsList.appendChild(comment);
            });
        }

        // Функция для поиска аниме
        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 showEpisodes(element) {
            const animeItem = element.closest('.anime-item');
            const animeTitle = animeItem.querySelector('.anime-info h3').textContent;
            let episodes = [];

            // Пример данных серий, можно заменить на реальные данные
            if (animeTitle === "Attack on Titan") {
                episodes = [
                    {number: 1, title: "To You, in 2000 Years: The Fall of Shiganshina, Part 1", video: "https://www.w3schools.com/html/mov_bbb.mp4"},
                    {number: 2, title: "That Day: The Fall of Shiganshina, Part 2", video: "https://www.w3schools.com/html/mov_bbb.mp4"},
                    {number: 3, title: "A Dim Light Amid Despair: Humanity’s Comeback, Part 1", video: "https://www.w3schools.com/html/mov_bbb.mp4"},
                    // Добавьте больше серий по необходимости
                ];
            } else if (animeTitle === "Naruto Shippuden") {
                episodes = [
                    {number: 1, title: "Homecoming", video: "https://www.w3schools.com/html/mov_bbb.mp4"},
                    {number: 2, title: "The Akatsuki Makes Its Move", video: "https://www.w3schools.com/html/mov_bbb.mp4"},
                    {number: 3, title: "The Results of Training", video: "https://www.w3schools.com/html/mov_bbb.mp4"},
                    // Добавьте больше серий по необходимости
                ];
            } else if (animeTitle === "One Piece") {
                episodes = [
                    {number: 1, title: "I'm Luffy! The Man Who's Gonna Be King of the Pirates!", video: "https://www.w3schools.com/html/mov_bbb.mp4"},
                    {number: 2, title: "Enter the Great Swordsman! Pirate Hunter Roronoa Zoro!", video: "https://www.w3schools.com/html/mov_bbb.mp4"},
                    {number: 3, title: "Morgan vs. Luffy! Who’s the Mysterious Pretty Girl?", video: "https://www.w3schools.com/html/mov_bbb.mp4"},
                    // Добавьте больше серий по необходимости
                ];
            }

            // Создание всплывающего окна со списком серий
            const episodesModal = document.createElement('div');
            episodesModal.style.position = 'fixed';
            episodesModal.style.top = '0';
            episodesModal.style.left = '0';
            episodesModal.style.width = '100%';
            episodesModal.style.height = '100%';
            episodesModal.style.backgroundColor = 'rgba(0,0,0,0.8)';
            episodesModal.style.display = 'flex';
            episodesModal.style.justifyContent = 'center';
            episodesModal.style.alignItems = 'center';
            episodesModal.style.zIndex = '3000';
            episodesModal.style.animation = 'fadeIn 0.5s ease-in';

            const modalContent = document.createElement('div');
            modalContent.style.backgroundColor = 'var(--modal-bg-color)';
            modalContent.style.padding = '25px 30px';
            modalContent.style.borderRadius = '12px';
            modalContent.style.width = '90%';
            modalContent.style.maxWidth = '700px';
            modalContent.style.maxHeight = '80%';
            modalContent.style.overflowY = 'auto';
            modalContent.style.position = 'relative';
            modalContent.style.animation = 'slideIn 0.5s ease-out';
            modalContent.style.boxShadow = '0 4px 8px var(--shadow-color)';
            modalContent.style.backdropFilter = 'blur(5px)';

            const closeBtn = document.createElement('button');
            closeBtn.textContent = '✖';
            closeBtn.style.position = 'absolute';
            closeBtn.style.top = '15px';
            closeBtn.style.right = '15px';
            closeBtn.style.backgroundColor = 'var(--primary-color)';
            closeBtn.style.color = '#fff';
            closeBtn.style.border = 'none';
            closeBtn.style.borderRadius = '50%';
            closeBtn.style.width = '35px';
            closeBtn.style.height = '35px';
            closeBtn.style.fontSize = '18px';
            closeBtn.style.cursor = 'pointer';
            closeBtn.style.transition = 'background-color var(--transition-speed) ease, transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease';
            closeBtn.onclick = () => {
                document.body.removeChild(episodesModal);
            };

            closeBtn.onmouseover = () => {
                closeBtn.style.backgroundColor = 'var(--secondary-color)';
                closeBtn.style.transform = 'scale(1.1)';
                closeBtn.style.boxShadow = '0 2px 4px rgba(0,0,0,0.3)';
            }

            closeBtn.onmouseout = () => {
                closeBtn.style.backgroundColor = 'var(--primary-color)';
                closeBtn.style.transform = 'scale(1)';
                closeBtn.style.boxShadow = 'none';
            }

            modalContent.appendChild(closeBtn);

            const episodesList = document.createElement('ul');
            episodesList.style.listStyle = 'none';
            episodesList.style.padding = '0';
            episodesList.style.width = '100%';

            episodes.forEach(ep => {
                const li = document.createElement('li');
                li.style.marginBottom = '15px';

                const btn = document.createElement('button');
                btn.textContent = `Эпизод ${ep.number}: ${ep.title}`;
                btn.style.width = '100%';
                btn.style.padding = '15px';
                btn.style.border = 'none';
                btn.style.borderRadius = '8px';
                btn.style.backgroundColor = 'var(--primary-color)';
                btn.style.color = '#fff';
                btn.style.cursor = 'pointer';
                btn.style.transition = 'background-color var(--transition-speed) ease, transform var(--transition-speed) ease';
                btn.style.fontSize = '16px';
                btn.style.fontFamily = 'Roboto, sans-serif';

                btn.onclick = () => {
                    openVideoPlayer(ep.video);
                    document.body.removeChild(episodesModal);
                };

                btn.onmouseover = () => {
                    btn.style.backgroundColor = 'var(--secondary-color)';
                    btn.style.transform = 'scale(1.05)';
                }

                btn.onmouseout = () => {
                    btn.style.backgroundColor = 'var(--primary-color)';
                    btn.style.transform = 'scale(1)';
                }

                li.appendChild(btn);
                episodesList.appendChild(li);
            });

            modalContent.appendChild(episodesList);
            episodesModal.appendChild(modalContent);
            document.body.appendChild(episodesModal);
        }

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

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

        // Функция для добавления аниме в избранное
        function toggleFavorite(element) {
            const favoriteCountSpan = element.querySelector('.favorite-count');
            let count = parseInt(favoriteCountSpan.textContent);
            const animeItem = element.closest('.anime-item');

            if (!element.classList.contains('favorite')) {
                count++;
                favoriteCountSpan.textContent = count;
                element.classList.add('favorite');
                // Анимация "звезды"
                element.style.transform = 'scale(1.2)';
                setTimeout(() => {
                    element.style.transform = 'scale(1)';
                }, 200);
            } else {
                if (count > 0) {
                    count--;
                    favoriteCountSpan.textContent = count;
                }
                element.classList.remove('favorite');
                // Анимация "звезды"
                element.style.transform = 'scale(0.8)';
                setTimeout(() => {
                    element.style.transform = 'scale(1)';
                }, 200);
            }
        }

        // Функция для рейтинга аниме
        function rateAnime(event, element) {
            const stars = element.querySelectorAll('.star');
            const rating = Array.from(stars).indexOf(event.target) + 1;

            stars.forEach((star, index) => {
                if (index < rating) {
                    star.classList.add('selected');
                } else {
                    star.classList.remove('selected');
                }
            });

            // Можно добавить сохранение рейтинга в базе данных или локальном хранилище
        }

        // Закрытие видео-плеера и модальных окон при нажатии вне контента
        window.onclick = function(event) {
            const videoPlayer = document.getElementById('videoPlayer');
            if (event.target == videoPlayer) {
                closeVideoPlayer();
            }

            const modals = document.querySelectorAll('.modal');
            modals.forEach(modal => {
                if (event.target == modal) {
                    modal.style.display = 'none';
                }
            });
        }

        // Функция для создания сообщества
        function createGroup() {
            const groupName = document.getElementById('groupName').value.trim();
            const groupDescription = document.getElementById('groupDescription').value.trim();

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

            // Проверка на существование группы с таким же названием
            const existingGroups = document.querySelectorAll('.group-item h3');
            for (let group of existingGroups) {
                if (group.textContent.toLowerCase() === groupName.toLowerCase()) {
                    alert("Сообщество с таким названием уже существует.");
                    return;
                }
            }

            // Генерация уникального ID для группы
            const groupId = Date.now().toString();

            // Создание элементов сообщества
            const groupItem = document.createElement('div');
            groupItem.className = 'group-item';
            groupItem.setAttribute('data-group-id', groupId);
            groupItem.onclick = () => openGroup(groupName);
            groupItem.innerHTML = `
                <h3>${groupName}</h3>
                <p>${groupDescription}</p>
                <div class="group-actions">
                    <span title="Подробнее">🔍</span>
                </div>
            `;

            document.getElementById('groupsList').appendChild(groupItem);

            // Сохранение группы в LocalStorage
            let groups = JSON.parse(localStorage.getItem('groups')) || [];
            groups.push({
                id: groupId,
                name: groupName,
                description: groupDescription,
                posts: [],
                events: []
            });
            localStorage.setItem('groups', JSON.stringify(groups));

            // Закрытие модального окна и очистка полей
            closeModal('createGroupModal');
            document.getElementById('groupName').value = "";
            document.getElementById('groupDescription').value = "";
        }

        // Функция для открытия группы
        function openGroup(groupName) {
            // Показываем секцию группы и скрываем другие секции
            const sections = document.querySelectorAll('.section');
            sections.forEach(section => {
                if (section.id === 'groupSection') {
                    section.classList.add('active');
                } else {
                    section.classList.remove('active');
                }
            });

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

            // Заполняем название текущей группы
            document.getElementById('currentGroupName').textContent = groupName;

            // Очищаем предыдущие посты и события
            document.getElementById('groupPosts').innerHTML = "";
            document.getElementById('groupEvents').innerHTML = "";
            document.getElementById('eventMap').innerHTML = "";

            // Получение информации о группе из LocalStorage
            let groups = JSON.parse(localStorage.getItem('groups')) || [];
            let currentGroup = groups.find(g => g.name === groupName);

            if (!currentGroup) {
                alert("Сообщество не найдено.");
                showSection('community');
                return;
            }

            // Отображение постов группы
            currentGroup.posts.forEach(postData => {
                const post = document.createElement('div');
                post.className = 'post';
                post.setAttribute('data-post-id', postData.id);

                const postHeader = document.createElement('div');
                postHeader.className = 'post-header';
                postHeader.innerHTML = `
                    <img src="${postData.avatar || 'https://i.imgur.com/8Km9tLL.jpg'}" alt="Аватар">
                    <strong>${postData.author}</strong>
                `;

                const postContent = document.createElement('div');
                postContent.className = 'post-content';
                if (postData.content) {
                    const text = document.createElement('p');
                    text.textContent = postData.content;
                    postContent.appendChild(text);
                }

                if (postData.images && postData.images.length > 0) {
                    postData.images.forEach(imgSrc => {
                        const img = document.createElement('img');
                        img.src = imgSrc;
                        img.alt = "Изображение сообщества";
                        postContent.appendChild(img);
                    });
                }

                const postActions = document.createElement('div');
                postActions.className = 'post-actions';
                postActions.innerHTML = `
                    <span onclick="likePost(this)">👍 <span class="like-count">${postData.likes || 0}</span></span>
                    <span onclick="toggleComments(this)">💬 Комментарии</span>
                `;

                const commentsSection = document.createElement('div');
                commentsSection.className = 'comments-section';
                commentsSection.style.display = 'none';
                commentsSection.innerHTML = `
                    <input type="text" placeholder="Написать комментарий..." class="comment-input">
                    <button onclick="addComment(this)">Отправить</button>
                    <div class="comments-list"></div>
                `;

                post.appendChild(postHeader);
                post.appendChild(postContent);
                post.appendChild(postActions);
                post.appendChild(commentsSection);

                document.getElementById('groupPosts').appendChild(post);
            });

            // Отображение событий группы
            currentGroup.events.forEach(eventData => {
                const eventItem = document.createElement('div');
                eventItem.className = 'event-item';
                eventItem.innerHTML = `
                    <h3>${eventData.name}</h3>
                    <p>${eventData.description}</p>
                    <p><strong>Место:</strong> ${eventData.location}</p>
                    <p><strong>Дата и время:</strong> ${eventData.date} ${eventData.time}</p>
                `;
                document.getElementById('groupEvents').appendChild(eventItem);

                // Добавление метки на карту
                if (eventData.latitude && eventData.longitude) {
                    const marker = new google.maps.Marker({
                        position: { lat: eventData.latitude, lng: eventData.longitude },
                        map: map,
                        title: eventData.name
                    });

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

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

                    markers.push(marker);
                }
            });

            // Центрирование карты на последнем событии или на Москве
            if (currentGroup.events.length > 0) {
                const lastEvent = currentGroup.events[currentGroup.events.length - 1];
                if (lastEvent.latitude && lastEvent.longitude) {
                    map.setCenter({ lat: lastEvent.latitude, lng: lastEvent.longitude });
                }
            } else {
                map.setCenter({ lat: 55.7558, lng: 37.6173 }); // Москва
            }
        }

        // Функция для создания события
        function createEvent() {
            const eventName = document.getElementById('eventName').value.trim();
            const eventDescription = document.getElementById('eventDescription').value.trim();
            const eventLocation = document.getElementById('eventLocation').value.trim();
            const eventDate = document.getElementById('eventDate').value;
            const eventTime = document.getElementById('eventTime').value;

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

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

                        // Создание метки на карте
                        const marker = new google.maps.Marker({
                            position: location,
                            map: map,
                            title: eventName
                        });

                        const infoWindow = new google.maps.InfoWindow({
                            content: `<h3>${eventName}</h3><p>${eventDescription}</p><p>${eventDate} ${eventTime}</p>`
                        });

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

                        markers.push(marker);

                        // Получение текущей группы
                        const currentGroupName = document.getElementById('currentGroupName').textContent;
                        let groups = JSON.parse(localStorage.getItem('groups')) || [];
                        let currentGroup = groups.find(g => g.name === currentGroupName);

                        if (!currentGroup) {
                            alert("Ошибка: группа не найдена.");
                            return;
                        }

                        // Добавление события в группу
                        const newEvent = {
                            id: Date.now().toString(),
                            name: eventName,
                            description: eventDescription,
                            location: eventLocation,
                            date: eventDate,
                            time: eventTime,
                            latitude: location.lat,
                            longitude: location.lng
                        };
                        currentGroup.events.push(newEvent);
                        localStorage.setItem('groups', JSON.stringify(groups));

                        // Добавление события в список событий
                        const eventItem = document.createElement('div');
                        eventItem.className = 'event-item';
                        eventItem.innerHTML = `
                            <h3>${eventName}</h3>
                            <p>${eventDescription}</p>
                            <p><strong>Место:</strong> ${eventLocation}</p>
                            <p><strong>Дата и время:</strong> ${eventDate} ${eventTime}</p>
                        `;
                        document.getElementById('groupEvents').appendChild(eventItem);

                        // Центрирование карты на новом событии
                        map.setCenter(location);

                        // Закрытие модального окна и очистка полей
                        closeModal('createEventModal');
                        document.getElementById('eventName').value = "";
                        document.getElementById('eventDescription').value = "";
                        document.getElementById('eventLocation').value = "";
                        document.getElementById('eventDate').value = "";
                        document.getElementById('eventTime').value = "";
                    } else {
                        alert("Не удалось найти указанное местоположение.");
                    }
                })
                .catch(error => {
                    console.error("Ошибка при получении координат:", error);
                    alert("Произошла ошибка при создании события.");
                });
        }

        // Функция для загрузки сохранённых постов и комментариев при загрузке страницы
        document.addEventListener('DOMContentLoaded', () => {
            loadPostsFromLocalStorage();
            loadGroupsFromLocalStorage();
        });

        // Функция для загрузки постов из LocalStorage
        function loadPostsFromLocalStorage() {
            let posts = JSON.parse(localStorage.getItem('posts')) || [];
            const feed = document.getElementById('feed');

            posts.forEach(postData => {
                const post = document.createElement('div');
                post.className = 'post';
                post.setAttribute('data-post-id', postData.id);

                const postHeader = document.createElement('div');
                postHeader.className = 'post-header';
                postHeader.innerHTML = `
                    <img src="https://i.imgur.com/8Km9tLL.jpg" alt="Аватар">
                    <strong>${postData.author}</strong>
                `;

                const postContent = document.createElement('div');
                postContent.className = 'post-content';
                if (postData.content) {
                    const text = document.createElement('p');
                    text.textContent = postData.content;
                    postContent.appendChild(text);
                }

                if (postData.images && postData.images.length > 0) {
                    postData.images.forEach(imgSrc => {
                        const img = document.createElement('img');
                        img.src = imgSrc;
                        img.alt = "Пользовательское изображение";
                        postContent.appendChild(img);
                    });
                }

                const postActions = document.createElement('div');
                postActions.className = 'post-actions';
                postActions.innerHTML = `
                    <span onclick="likePost(this)">👍 <span class="like-count">${postData.likes || 0}</span></span>
                    <span onclick="toggleComments(this)">💬 Комментарии</span>
                `;

                const commentsSection = document.createElement('div');
                commentsSection.className = 'comments-section';
                commentsSection.style.display = 'none';
                commentsSection.innerHTML = `
                    <input type="text" placeholder="Написать комментарий..." class="comment-input">
                    <button onclick="addComment(this)">Отправить</button>
                    <div class="comments-list"></div>
                `;

                post.appendChild(postHeader);
                post.appendChild(postContent);
                post.appendChild(postActions);
                post.appendChild(commentsSection);

                feed.appendChild(post);
            });
        }

        // Функция для загрузки групп из LocalStorage
        function loadGroupsFromLocalStorage() {
            let groups = JSON.parse(localStorage.getItem('groups')) || [];
            const groupsList = document.getElementById('groupsList');

            groups.forEach(group => {
                const groupItem = document.createElement('div');
                groupItem.className = 'group-item';
                groupItem.setAttribute('data-group-id', group.id);
                groupItem.onclick = () => openGroup(group.name);
                groupItem.innerHTML = `
                    <h3>${group.name}</h3>
                    <p>${group.description}</p>
                    <div class="group-actions">
                        <span title="Подробнее">🔍</span>
                    </div>
                `;
                groupsList.appendChild(groupItem);
            });
        }

        // Функция для сохранения комментариев в LocalStorage
        function saveComments(postId, comments) {
            localStorage.setItem(`comments-${postId}`, JSON.stringify(comments));
        }
    </script>

</body>
</html>
напиши на пайтоне используя фласк и litelsql бэк и напиши весь код фронта и бэка