добавь сообщество - группа где могут писать посты люди , человек который создал может создовать события с указанием на место на карте с описанием для совместных встреч . сайт аниме любителей называться будет хика мори 
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>АнимеСообщество</title>
    <style>
        /* Основные стили */
        body {
            margin: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f0f0f0;
            overflow-x: hidden;
            background-image: url('https://i.imgur.com/oPz4cZC.jpg'); /* Замените на вашу ссылку */
            background-size: cover;
            background-repeat: no-repeat;
            background-attachment: fixed;
            transition: background-color 0.5s ease;
            /* Добавим анимированный градиентный фон */
            animation: gradientBackground 15s ease infinite;
        }

        @keyframes gradientBackground {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        /* Навигационная панель */
        .navbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background-color: rgba(255, 64, 129, 0.95);
            padding: 10px 20px;
            color: white;
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            transition: background-color 0.3s ease, box-shadow 0.3s ease;
        }

        .navbar:hover {
            background-color: rgba(255, 64, 129, 1);
            box-shadow: 0 6px 12px rgba(0,0,0,0.2);
        }

        .navbar .logo {
            font-size: 24px;
            font-weight: bold;
            cursor: pointer;
            transition: transform 0.3s ease, color 0.3s ease;
        }

        .navbar .logo:hover {
            transform: scale(1.1);
            color: #ffe6f0;
        }

        .navbar .nav-icons {
            display: flex;
            gap: 20px;
            cursor: pointer;
            font-size: 20px;
        }

        .navbar .nav-icons span {
            display: flex;
            align-items: center;
            gap: 5px;
            transition: color 0.3s ease, transform 0.3s ease;
        }

        .navbar .nav-icons span:hover {
            color: #e62770;
            transform: scale(1.1);
        }

        /* Секции */
        .section {
            display: none;
            padding: 20px;
            animation: fadeIn 0.5s ease-in;
            background-color: rgba(255, 255, 255, 0.85);
            border-radius: 12px;
            margin: 20px auto;
            max-width: 1200px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            backdrop-filter: blur(10px);
            transition: all 0.3s ease;
        }

        .active {
            display: block;
        }

        /* Главная лента */
        .feed .post {
            background-color: rgba(255, 255, 255, 0.95);
            padding: 15px;
            margin-bottom: 15px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
            animation: fadeInUp 0.5s ease-out;
            display: flex;
            flex-direction: column;
            transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
        }

        .feed .post:hover {
            transform: translateY(-5px) scale(1.01);
            box-shadow: 0 8px 16px rgba(0,0,0,0.2);
            background-color: rgba(255, 255, 255, 1);
        }

        .feed .post .post-header {
            display: flex;
            align-items: center;
            gap: 10px;
            animation: fadeIn 0.5s ease-in;
        }

        .feed .post .post-header img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            transition: transform 0.3s ease, filter 0.3s ease;
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
        }

        .feed .post .post-header img:hover {
            transform: scale(1.1) rotate(5deg);
            filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
        }

        .feed .post .post-content {
            margin-top: 10px;
            animation: slideIn 0.3s ease-out;
            position: relative;
        }

        .feed .post .post-content img {
            width: 100%;
            max-height: 300px;
            object-fit: cover;
            border-radius: 8px;
            margin-top: 10px;
            transition: transform 0.3s ease, filter 0.3s ease;
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
        }

        .feed .post .post-content img:hover {
            transform: scale(1.05);
            filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
        }

        .feed .post .post-actions {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-top: 10px;
            animation: fadeIn 0.5s ease-in;
        }

        .feed .post .post-actions span {
            display: flex;
            align-items: center;
            gap: 5px;
            cursor: pointer;
            color: #555;
            transition: color 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
            padding: 5px 10px;
            border-radius: 20px;
        }

        .feed .post .post-actions span:hover {
            color: #fff;
            background-color: #ff4081;
            transform: scale(1.1);
        }

        /* Форма создания поста */
        .create-post h2,
        .anime-watch h2,
        .profile h2 {
            margin-top: 0;
            color: #ff4081;
            animation: fadeIn 0.5s ease-in;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
        }

        .create-post textarea,
        .anime-watch .search-bar input,
        .comments-section .comment-input {
            width: 100%;
            padding: 10px;
            border-radius: 4px;
            border: 1px solid #ccc;
            resize: none;
            font-size: 16px;
            box-sizing: border-box;
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
            background-color: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(5px);
        }

        .create-post textarea:focus,
        .anime-watch .search-bar input:focus,
        .comments-section .comment-input:focus {
            border-color: #ff4081;
            box-shadow: 0 0 5px rgba(255, 64, 129, 0.5);
            outline: none;
        }

        .create-post button,
        .anime-watch .search-bar button,
        .comments-section button {
            margin-top: 10px;
            padding: 10px 20px;
            background-color: #ff4081;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
            font-size: 16px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }

        .create-post button:hover,
        .anime-watch .search-bar button:hover,
        .comments-section button:hover {
            background-color: #e62770;
            transform: scale(1.05);
            box-shadow: 0 4px 8px rgba(0,0,0,0.3);
        }

        /* Профиль пользователя */
        .profile .profile-header {
            display: flex;
            align-items: center;
            gap: 20px;
            animation: fadeIn 0.5s ease-in;
        }

        .profile .profile-header img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            transition: transform 0.3s ease, filter 0.3s ease;
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
        }

        .profile .profile-header img:hover {
            transform: scale(1.1) rotate(5deg);
            filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
        }

        .profile .profile-content h3 {
            margin-bottom: 10px;
            color: #ff4081;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
        }

        .profile .profile-content p {
            line-height: 1.5;
            animation: fadeIn 0.5s ease-in;
        }

        /* Раздел просмотра аниме */
        .anime-watch .anime-list {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            animation: fadeIn 0.5s ease-in;
        }

        .anime-watch .anime-item {
            background-color: rgba(255, 255, 255, 0.95);
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
            width: calc(33.333% - 20px);
            display: flex;
            flex-direction: column;
            transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
            cursor: pointer;
        }

        .anime-watch .anime-item:hover {
            transform: scale(1.02);
            box-shadow: 0 8px 16px rgba(0,0,0,0.2);
            background-color: rgba(255, 255, 255, 1);
        }

        .anime-watch .anime-item img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            transition: transform 0.3s ease, filter 0.3s ease;
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
        }

        .anime-watch .anime-item:hover img {
            transform: scale(1.05);
            filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
        }

        .anime-watch .anime-item .anime-info {
            padding: 10px;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }

        .anime-watch .anime-item .anime-info h3 {
            margin: 0 0 10px 0;
            font-size: 18px;
            color: #333;
            transition: color 0.3s ease;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
        }

        .anime-watch .anime-item:hover .anime-info h3 {
            color: #ff4081;
        }

        .anime-watch .anime-item .anime-info p {
            flex-grow: 1;
            font-size: 14px;
            color: #666;
            animation: fadeIn 0.5s ease-in;
        }

        .anime-watch .anime-item .anime-info .anime-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10px;
            animation: fadeIn 0.5s ease-in;
        }

        .anime-watch .anime-item .anime-info .anime-actions span {
            cursor: pointer;
            color: #555;
            display: flex;
            align-items: center;
            gap: 5px;
            transition: color 0.3s ease, transform 0.3s ease;
            padding: 5px 10px;
            border-radius: 20px;
        }

        .anime-watch .anime-item .anime-info .anime-actions span:hover {
            color: #fff;
            background-color: #ff4081;
            transform: scale(1.1);
        }

        /* Видео-плеер */
        .anime-watch .video-player {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.8);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 2000;
            animation: fadeIn 0.5s ease-in;
        }

        .anime-watch .video-player .player-content {
            background-color: rgba(255, 255, 255, 0.95);
            padding: 20px;
            border-radius: 8px;
            width: 90%;
            max-width: 800px;
            position: relative;
            animation: slideIn 0.5s ease-out;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            backdrop-filter: blur(5px);
        }

        .anime-watch .video-player .player-content video {
            width: 100%;
            height: auto;
            border-radius: 8px;
            transition: transform 0.3s ease;
        }

        .anime-watch .video-player .player-content video:hover {
            transform: scale(1.02);
        }

        .anime-watch .video-player .player-content .close-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            background-color: #ff4081;
            color: white;
            border: none;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
        }

        .anime-watch .video-player .player-content .close-btn:hover {
            background-color: #e62770;
            transform: scale(1.1);
            box-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }

        /* Поиск аниме */
        .anime-watch .search-bar {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
            animation: fadeIn 0.5s ease-in;
        }

        .anime-watch .search-bar input {
            flex: 1;
            background-color: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(5px);
        }

        .anime-watch .search-bar button {
            background-color: #ff4081;
            transition: background-color 0.3s ease;
        }

        .anime-watch .search-bar button:hover {
            background-color: #e62770;
        }

        /* Рейтинги */
        .rating {
            display: flex;
            align-items: center;
            gap: 5px;
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        .rating:hover {
            transform: scale(1.05);
        }

        .rating .star {
            font-size: 20px;
            color: #ccc;
            transition: color 0.3s ease;
        }

        .rating .star.hover,
        .rating .star.selected {
            color: #ff4081;
        }

        /* Избранные аниме */
        .favorite {
            color: #ff4081;
            animation: popIn 0.3s ease-in;
        }

        .favorite:hover {
            color: #e62770;
        }

        /* Адаптивные стили */
        @media (max-width: 900px) {
            .anime-watch .anime-item {
                width: calc(50% - 20px);
            }
        }

        @media (max-width: 600px) {
            .navbar .logo {
                font-size: 20px;
            }

            .navbar .nav-icons {
                gap: 10px;
                font-size: 16px;
            }

            .section {
                margin: 10px;
                padding: 10px;
            }

            .feed .post .post-header img {
                width: 35px;
                height: 35px;
            }

            .profile .profile-header {
                flex-direction: column;
                align-items: flex-start;
            }

            .profile .profile-header img {
                width: 80px;
                height: 80px;
            }

            .anime-watch .anime-list {
                flex-direction: column;
            }

            .anime-watch .anime-item {
                width: 100%;
            }

            .anime-watch .video-player .player-content {
                width: 95%;
            }
        }

        /* Анимации */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes slideIn {
            from { transform: translateX(-100%); }
            to { transform: translateX(0); }
        }

        @keyframes popIn {
            from { transform: scale(0.8); opacity: 0; }
            to { transform: scale(1); opacity: 1; }
        }

        /* Кастомные скроллы для лучшего визуального эффекта */
        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: #f1f1f1; 
        }

        ::-webkit-scrollbar-thumb {
            background: #ff4081; 
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #e62770; 
        }
    </style>
</head>
<body>

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

    <!-- Главная лента -->
    <div id="feed" class="section active feed">
        <div class="post">
            <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: 10px;">
                <input type="text" placeholder="Написать комментарий..." class="comment-input">
                <button onclick="addComment(this)">Отправить</button>
                <div class="comments-list"></div>
            </div>
        </div>
        <!-- Дополнительные посты -->
        <div class="post">
            <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: 10px;">
                <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="postImage" accept="image/*">
        <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="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>
    </div>

    <!-- JavaScript для взаимодействия -->
    <script>
        // Функция для переключения секций
        function showSection(sectionId) {
            const sections = document.querySelectorAll('.section');
            sections.forEach(section => {
                if (section.id === sectionId) {
                    section.classList.add('active');
                } else {
                    section.classList.remove('active');
                }
            });
        }

        // Функция для создания нового поста
        function createPost() {
            const content = document.getElementById('postContent').value.trim();
            const imageInput = document.getElementById('postImage');
            const imageFile = imageInput.files[0];

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

            // Создание элементов поста
            const post = document.createElement('div');
            post.className = 'post';
            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';
            postContent.textContent = content;

            if (imageFile) {
                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(imageFile);
            }

            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);

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

            // Очистка формы и переключение на ленту
            document.getElementById('postContent').value = "";
            imageInput.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);
        }

        // Функция для переключения секции комментариев
        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';
            } 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 = '5px 0';
            comment.style.borderBottom = '1px solid #eee';
            comment.textContent = commentText;
            comment.style.opacity = '0';
            comment.style.animation = 'fadeIn 0.3s forwards';
            commentsList.appendChild(comment);

            commentInput.value = "";
        }

        // Функция для поиска аниме
        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 = 'rgba(255, 255, 255, 0.95)';
            modalContent.style.padding = '20px';
            modalContent.style.borderRadius = '8px';
            modalContent.style.width = '90%';
            modalContent.style.maxWidth = '600px';
            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 rgba(0,0,0,0.2)';
            modalContent.style.backdropFilter = 'blur(5px)';

            const closeBtn = document.createElement('button');
            closeBtn.textContent = '✖';
            closeBtn.style.position = 'absolute';
            closeBtn.style.top = '10px';
            closeBtn.style.right = '10px';
            closeBtn.style.backgroundColor = '#ff4081';
            closeBtn.style.color = '#fff';
            closeBtn.style.border = 'none';
            closeBtn.style.borderRadius = '50%';
            closeBtn.style.width = '30px';
            closeBtn.style.height = '30px';
            closeBtn.style.cursor = 'pointer';
            closeBtn.style.transition = 'background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease';
            closeBtn.onclick = () => {
                document.body.removeChild(episodesModal);
            };

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

            closeBtn.onmouseout = () => {
                closeBtn.style.backgroundColor = '#ff4081';
                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';

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

                const btn = document.createElement('button');
                btn.textContent = `Эпизод ${ep.number}: ${ep.title}`;
                btn.style.width = '100%';
                btn.style.padding = '10px';
                btn.style.border = 'none';
                btn.style.borderRadius = '4px';
                btn.style.backgroundColor = '#ff4081';
                btn.style.color = '#fff';
                btn.style.cursor = 'pointer';
                btn.style.transition = 'background-color 0.3s ease, transform 0.3s ease';
                
                btn.onclick = () => {
                    openVideoPlayer(ep.video);
                    document.body.removeChild(episodesModal);
                };

                btn.onmouseover = () => {
                    btn.style.backgroundColor = '#e62770';
                    btn.style.transform = 'scale(1.05)';
                }

                btn.onmouseout = () => {
                    btn.style.backgroundColor = '#ff4081';
                    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();
            }
        }
    </script>

</body>
</html>