оптимизируй страницу просмотра видио <!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>
        /* Переменные для цветовой схемы */
        :root {
            --primary-color: #ff4081;
            --secondary-color: #e62770;
            --background-color: #f0f0f0;
            --navbar-bg-color: rgba(255, 64, 129, 0.95);
            --navbar-hover-bg-color: rgba(255, 64, 129, 1);
            --text-color: #333;
            --light-text-color: #666;
            --card-bg-color: rgba(255, 255, 255, 0.95);
            --modal-bg-color: rgba(255, 255, 255, 0.95);
            --shadow-color: rgba(0, 0, 0, 0.1);
            --transition-speed: 0.3s;
        }

        /* Основные стили */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Roboto', sans-serif;
            background-color: var(--background-color);
            overflow-x: hidden;
            background-image: url('https://cdn1.epicgames.com/ue/product/Screenshot/6-1920x1080-7f74273417687ea1382ea51445325736.jpg?resize=1&w=1920'); /* Замените на вашу ссылку */
            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: var(--navbar-bg-color);
            padding: 15px 30px;
            color: white;
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 4px 6px var(--shadow-color);
            transition: background-color var(--transition-speed), box-shadow var(--transition-speed);
        }

        .navbar:hover {
            background-color: var(--navbar-hover-bg-color);
            box-shadow: 0 6px 12px rgba(0,0,0,0.2);
        }

        .navbar .logo {
            font-family: 'Noto Sans JP', sans-serif;
            font-size: 28px;
            font-weight: 700;
            cursor: pointer;
            transition: transform var(--transition-speed), color var(--transition-speed);
        }

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

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

        .navbar .nav-icons span {
            display: flex;
            align-items: center;
            gap: 5px;
            transition: color var(--transition-speed), transform var(--transition-speed);
        }

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

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

        .active {
            display: block !important;
        }

        /* Улучшенные стили для постов */
        .feed .post {
            background-color: var(--card-bg-color);
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 8px var(--shadow-color);
            animation: fadeInUp 0.5s ease-out;
            display: flex;
            flex-direction: column;
            transition: transform var(--transition-speed), box-shadow var(--transition-speed), background-color var(--transition-speed);
        }

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

        .feed .post .post-header {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .feed .post .post-header img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            transition: transform var(--transition-speed), filter var(--transition-speed);
            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-header strong {
            font-size: 18px;
            color: var(--text-color);
            font-weight: 500;
        }

        .feed .post .post-content {
            margin-top: 15px;
            animation: slideIn 0.3s ease-out;
            position: relative;
            font-size: 16px;
            color: var(--text-color);
        }

        .feed .post .post-content img {
            width: 100%;
            max-height: 350px;
            object-fit: cover;
            border-radius: 8px;
            margin-top: 15px;
            transition: transform var(--transition-speed), filter var(--transition-speed);
            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: 20px;
            margin-top: 15px;
        }

        .feed .post .post-actions span {
            display: flex;
            align-items: center;
            gap: 5px;
            cursor: pointer;
            color: #555;
            transition: color var(--transition-speed), transform var(--transition-speed), background-color var(--transition-speed);
            padding: 5px 15px;
            border-radius: 25px;
            background-color: rgba(255, 255, 255, 0.3);
        }

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

        /* Форма создания поста */
        .create-post h2,
        .anime-watch h2,
        .profile h2,
        .community h2 {
            margin-top: 0;
            color: var(--primary-color);
            font-family: 'Noto Sans JP', sans-serif;
            font-size: 28px;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
        }

        .create-post textarea,
        .anime-watch .search-bar input,
        .comments-section .comment-input,
        .modal-content input,
        .modal-content textarea {
            width: 100%;
            padding: 15px;
            border-radius: 8px;
            border: 1px solid #ccc;
            resize: none;
            font-size: 16px;
            box-sizing: border-box;
            transition: border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
            background-color: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(5px);
            margin-bottom: 15px;
            font-family: 'Roboto', sans-serif;
        }

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

        .create-post button,
        .anime-watch .search-bar button,
        .comments-section button,
        .modal-content button {
            padding: 12px 25px;
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            transition: background-color var(--transition-speed) ease, transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
            font-size: 16px;
            font-family: 'Roboto', sans-serif;
            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,
        .modal-content button:hover {
            background-color: var(--secondary-color);
            transform: scale(1.05);
            box-shadow: 0 4px 8px rgba(0,0,0,0.3);
        }

        /* Профиль пользователя */
        .profile .profile-header {
            display: flex;
            align-items: center;
            gap: 25px;
            margin-bottom: 20px;
        }

        .profile .profile-header img {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            transition: transform var(--transition-speed) ease, filter var(--transition-speed) 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-header h2 {
            margin: 0;
            color: var(--text-color);
            font-size: 24px;
        }

        .profile .profile-header p {
            color: var(--light-text-color);
            font-size: 16px;
        }

        .profile .profile-content h3 {
            margin-bottom: 10px;
            color: var(--primary-color);
            text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
            font-size: 22px;
        }

        .profile .profile-content p {
            line-height: 1.6;
            font-size: 16px;
            color: var(--text-color);
        }

        /* Раздел просмотра аниме */
        .anime-watch .anime-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 25px;
            animation: fadeIn 0.5s ease-in;
        }

        .anime-watch .anime-item {
            background-color: var(--card-bg-color);
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 8px var(--shadow-color);
            display: flex;
            flex-direction: column;
            transition: transform var(--transition-speed), box-shadow var(--transition-speed), background-color var(--transition-speed);
            cursor: pointer;
        }

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

        .anime-watch .anime-item img {
            width: 100%;
            height: 300px;
            object-fit: cover;
            transition: transform var(--transition-speed) ease;
        }

        .anime-watch .anime-item:hover img {
            transform: scale(1.05);
        }

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

        .anime-watch .anime-info h3 {
            margin: 0 0 10px 0;
            font-size: 20px;
            color: var(--text-color);
            transition: color var(--transition-speed) ease;
        }

        .anime-watch .anime-info h3:hover {
            color: var(--primary-color);
        }

        .anime-watch .anime-info p {
            flex-grow: 1;
            font-size: 14px;
            color: var(--light-text-color);
            margin-bottom: 15px;
        }

        .anime-watch .anime-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .anime-watch .anime-actions span {
            display: flex;
            align-items: center;
            gap: 5px;
            cursor: pointer;
            color: #555;
            transition: color var(--transition-speed) ease, transform var(--transition-speed) ease;
            padding: 5px 15px;
            border-radius: 25px;
            background-color: rgba(255, 255, 255, 0.3);
            font-size: 14px;
        }

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

        /* Видео-плеер */
        .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;
        }

        .video-player .player-content {
            background-color: var(--modal-bg-color);
            padding: 25px;
            border-radius: 10px;
            width: 90%;
            max-width: 800px;
            position: relative;
            animation: slideIn 0.5s ease-out;
            box-shadow: 0 4px 8px var(--shadow-color);
            backdrop-filter: blur(5px);
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .video-player .player-content video {
            width: 100%;
            height: auto;
            border-radius: 8px;
            transition: transform var(--transition-speed) ease;
        }

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

        .video-player .player-content .close-btn {
            position: absolute;
            top: -15px;
            right: -15px;
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: 50%;
            width: 35px;
            height: 35px;
            font-size: 18px;
            cursor: pointer;
            transition: background-color var(--transition-speed) ease, transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
        }

        .video-player .player-content .close-btn:hover {
            background-color: var(--secondary-color);
            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: 25px;
            animation: fadeIn 0.5s ease-in;
        }

        .anime-watch .search-bar input {
            flex: 1;
            border: 1px solid #ccc;
            border-radius: 8px;
            padding: 12px 15px;
            font-size: 16px;
            background-color: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(5px);
            transition: border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
        }

        .anime-watch .search-bar input:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 5px rgba(255, 64, 129, 0.5);
            outline: none;
        }

        .anime-watch .search-bar button {
            padding: 12px 20px;
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            transition: background-color var(--transition-speed) ease, transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
            font-size: 16px;
        }

        .anime-watch .search-bar button:hover {
            background-color: var(--secondary-color);
            transform: scale(1.05);
            box-shadow: 0 4px 8px rgba(0,0,0,0.3);
        }

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

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

        .rating .star {
            font-size: 20px;
            color: #ccc;
            transition: color var(--transition-speed) ease;
        }

        .rating .star.hover,
        .rating .star.selected {
            color: var(--primary-color);
        }

        /* Избранные аниме */
        .favorite {
            color: var(--primary-color);
            transition: color var(--transition-speed) ease;
        }

        .favorite:hover {
            color: var(--secondary-color);
        }

        /* Сообщества */
        .community-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
        }

        .community-header h2 {
            font-family: 'Noto Sans JP', sans-serif;
            font-size: 28px;
            color: var(--primary-color);
            text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
        }

        .community-header button {
            padding: 12px 25px;
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            transition: background-color var(--transition-speed) ease, transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
            font-size: 16px;
            font-family: 'Roboto', sans-serif;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }

        .community-header button:hover {
            background-color: var(--secondary-color);
            transform: scale(1.05);
            box-shadow: 0 4px 8px rgba(0,0,0,0.3);
        }

        .groups-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 25px;
        }

        .group-item {
            background-color: var(--card-bg-color);
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 4px 8px var(--shadow-color);
            transition: transform var(--transition-speed), box-shadow var(--transition-speed), background-color var(--transition-speed);
            cursor: pointer;
            position: relative;
        }

        .group-item:hover {
            transform: scale(1.02);
            box-shadow: 0 8px 16px rgba(0,0,0,0.2);
            background-color: #ffffff;
        }

        .group-item h3 {
            margin-top: 0;
            font-size: 22px;
            color: var(--text-color);
            font-family: 'Noto Sans JP', sans-serif;
            margin-bottom: 10px;
        }

        .group-item p {
            color: var(--light-text-color);
            font-size: 16px;
            margin-bottom: 15px;
        }

        .group-item .group-actions {
            position: absolute;
            top: 15px;
            right: 15px;
        }

        .group-item .group-actions span {
            font-size: 20px;
            color: #555;
            transition: color var(--transition-speed) ease, transform var(--transition-speed) ease;
        }

        .group-item .group-actions span:hover {
            color: var(--primary-color);
            transform: scale(1.2);
        }

        /* Модальные окна */
        .modal {
            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: 3000;
            animation: fadeIn 0.5s ease-in;
        }

        .modal-content {
            background-color: var(--modal-bg-color);
            padding: 30px 40px;
            border-radius: 12px;
            width: 90%;
            max-width: 600px;
            position: relative;
            animation: slideIn 0.5s ease-out;
            box-shadow: 0 4px 8px var(--shadow-color);
            backdrop-filter: blur(5px);
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .modal-content h2 {
            margin-top: 0;
            color: var(--primary-color);
            font-family: 'Noto Sans JP', sans-serif;
            font-size: 26px;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
            margin-bottom: 20px;
        }

        .modal-content input,
        .modal-content textarea {
            width: 100%;
            padding: 12px 15px;
            border-radius: 8px;
            border: 1px solid #ccc;
            margin-bottom: 20px;
            font-size: 16px;
            transition: border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
            background-color: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(5px);
            font-family: 'Roboto', sans-serif;
        }

        .modal-content input:focus,
        .modal-content textarea:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 5px rgba(255, 64, 129, 0.5);
            outline: none;
        }

        .modal-content button {
            padding: 12px 25px;
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            transition: background-color var(--transition-speed) ease, transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
            font-size: 16px;
            font-family: 'Roboto', sans-serif;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }

        .modal-content button:hover {
            background-color: var(--secondary-color);
            transform: scale(1.05);
            box-shadow: 0 4px 8px rgba(0,0,0,0.3);
        }

        .modal-content .cancel-btn {
            background-color: #ccc;
            color: #333;
            margin-left: 10px;
        }

        /* Секция группы */
        .group-section {
            display: none;
        }

        .group-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
        }

        .group-header h2 {
            font-family: 'Noto Sans JP', sans-serif;
            font-size: 28px;
            color: var(--primary-color);
            text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
        }

        .group-header button {
            padding: 12px 25px;
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            transition: background-color var(--transition-speed) ease, transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
            font-size: 16px;
            font-family: 'Roboto', sans-serif;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }

        .group-header button:hover {
            background-color: var(--secondary-color);
            transform: scale(1.05);
            box-shadow: 0 4px 8px rgba(0,0,0,0.3);
        }

        #groupPosts .post {
            background-color: var(--card-bg-color);
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 8px var(--shadow-color);
            animation: fadeInUp 0.5s ease-out;
            display: flex;
            flex-direction: column;
            transition: transform var(--transition-speed), box-shadow var(--transition-speed), background-color var(--transition-speed);
        }

        #groupPosts .post:hover {
            transform: translateY(-5px) scale(1.02);
            box-shadow: 0 8px 16px rgba(0,0,0,0.2);
            background-color: #ffffff;
        }

        #groupPosts .post .post-header {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        #groupPosts .post .post-header img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            transition: transform var(--transition-speed), filter var(--transition-speed);
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
        }

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

        #groupPosts .post .post-header strong {
            font-size: 18px;
            color: var(--text-color);
            font-weight: 500;
        }

        #groupPosts .post .post-content {
            margin-top: 15px;
            animation: slideIn 0.3s ease-out;
            position: relative;
            font-size: 16px;
            color: var(--text-color);
        }

        #groupPosts .post .post-content img {
            width: 100%;
            max-height: 350px;
            object-fit: cover;
            border-radius: 8px;
            margin-top: 15px;
            transition: transform var(--transition-speed), filter var(--transition-speed);
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
        }

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

        #groupPosts .post .post-actions {
            display: flex;
            align-items: center;
            gap: 20px;
            margin-top: 15px;
        }

        #groupPosts .post .post-actions span {
            display: flex;
            align-items: center;
            gap: 5px;
            cursor: pointer;
            color: #555;
            transition: color var(--transition-speed) ease, transform var(--transition-speed) ease, background-color var(--transition-speed) ease;
            padding: 5px 15px;
            border-radius: 25px;
            background-color: rgba(255, 255, 255, 0.3);
        }

        #groupPosts .post .post-actions span:hover {
            color: #fff;
            background-color: var(--primary-color);
            transform: scale(1.1);
        }

        /* События */
        .events-list {
            display: flex;
            flex-direction: column;
            gap: 20px;
            margin-bottom: 30px;
        }

        .event-item {
            background-color: var(--card-bg-color);
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 8px var(--shadow-color);
            transition: transform var(--transition-speed), box-shadow var(--transition-speed), background-color var(--transition-speed);
        }

        .event-item:hover {
            transform: scale(1.01);
            box-shadow: 0 6px 12px rgba(0,0,0,0.2);
            background-color: #ffffff;
        }

        .event-item h3 {
            margin-top: 0;
            font-size: 20px;
            color: var(--text-color);
            font-family: 'Noto Sans JP', sans-serif;
        }

        .event-item p {
            color: var(--light-text-color);
            font-size: 16px;
            margin-bottom: 10px;
        }

        .event-map iframe {
            width: 100%;
            height: 400px;
            border: none;
            border-radius: 10px;
            box-shadow: 0 4px 8px var(--shadow-color);
        }

        /* Адаптивные стили */
        @media (max-width: 1200px) {
            .navbar {
                padding: 15px 20px;
            }

            .navbar .logo {
                font-size: 24px;
            }

            .navbar .nav-icons {
                gap: 15px;
                font-size: 18px;
            }

            .section {
                padding: 25px 30px;
                margin: 25px auto;
            }

            .community-header h2,
            .group-header h2,
            .feed .post .post-header strong {
                font-size: 24px;
            }

            .community-header button,
            .group-header button,
            .create-post button,
            .anime-watch .search-bar button,
            .comments-section button,
            .modal-content button {
                padding: 10px 20px;
                font-size: 14px;
            }

            .groups-list {
                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            }

            .anime-watch .anime-list {
                grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            }

            #eventMap iframe {
                height: 300px;
            }
        }

        @media (max-width: 768px) {
            .navbar {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }

            .navbar .logo {
                font-size: 20px;
            }

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

            .section {
                padding: 20px 15px;
                margin: 20px auto;
            }

            .community-header h2,
            .group-header h2 {
                font-size: 22px;
            }

            .groups-list,
            .anime-watch .anime-list {
                grid-template-columns: 1fr;
            }

            #eventMap iframe {
                height: 250px;
            }
        }

        @media (max-width: 480px) {
            .navbar {
                padding: 10px 15px;
            }

            .navbar .logo {
                font-size: 18px;
            }

            .navbar .nav-icons {
                gap: 8px;
                font-size: 14px;
            }

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

            .community-header h2,
            .group-header h2 {
                font-size: 20px;
            }

            .modal-content {
                padding: 20px 25px;
            }

            .modal-content h2 {
                font-size: 24px;
            }

            .modal-content button {
                padding: 10px 20px;
                font-size: 14px;
            }

            .anime-watch .anime-list {
                grid-template-columns: 1fr;
            }

            #groupPosts .post .post-content img,
            .feed .post .post-content img {
                max-height: 250px;
            }

            #eventMap iframe {
                height: 200px;
            }
        }

        /* Анимации */
        @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: translateY(-50px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }

        @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: var(--primary-color); 
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--secondary-color); 
        }

        /* Местоположение на карте */
        .event-map {
            margin-top: 20px;
        }
        /* Модальное окно для деталей аниме */
        .modal {
            display: none; /* Скрыто по умолчанию */
            position: fixed; 
            z-index: 3000; 
            left: 0;
            top: 0;
            width: 100%; 
            height: 100%; 
            overflow: auto; 
            background-color: rgba(0,0,0,0.8); 
            justify-content: center;
            align-items: center;
        }

        .modal-content {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            width: 90%;
            max-width: 800px;
            position: relative;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .modal-content img {
            width: 100%;
            height: auto;
            border-radius: 8px;
        }

        .modal-content h2 {
            margin: 0;
            font-size: 24px;
        }

        .modal-content p {
            font-size: 16px;
            color: #2c3e50;
        }

        .close-modal {
            position: absolute;
            top: 15px;
            right: 20px;
            font-size: 24px;
            font-weight: bold;
            color: #7f8c8d;
            cursor: pointer;
        }

        /* Стили для списка серий внутри модального окна */
        .episodes-list {
            list-style: none;
            padding: 0;
            max-height: 200px;
            overflow-y: auto;
            margin: 0;
        }

        .episodes-list li {
            margin-bottom: 10px;
        }

        .episodes-list button {
            width: 100%;
            padding: 10px;
            background-color: #3498db;
            border: none;
            border-radius: 4px;
            color: #fff;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .episodes-list button:hover {
            background-color: #2980b9;
        }

        /* Стили для видео-плеера внутри модального окна */
        .video-container {
            width: 100%;
            max-height: 450px;
            background-color: #000;
            position: relative;
            padding-top: 56.25%; /* 16:9 Aspect Ratio */
        }

        .video-container video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

    </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>
                <div class="anime-actions">
                    <span onclick="toggleFavorite(this)">⭐ <span class="favorite-count">0</span></span>
                    <span onclick="showEpisodes(this)">📺 Серии</span>
                    <span onclick="viewAnime(this)" title="Подробнее">🔍 Подробнее</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 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>
                <div class="anime-actions">
                    <span onclick="toggleFavorite(this)">⭐ <span class="favorite-count">0</span></span>
                    <span onclick="showEpisodes(this)">📺 Серии</span>
                    <span onclick="viewAnime(this)" title="Подробнее">🔍 Подробнее</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 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>
                <div class="anime-actions">
                    <span onclick="toggleFavorite(this)">⭐ <span class="favorite-count">0</span></span>
                    <span onclick="showEpisodes(this)">📺 Серии</span>
                    <span onclick="viewAnime(this)" title="Подробнее">🔍 Подробнее</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="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 class="modal" id="animeDetailModal">
        <div class="modal-content">
            <span class="close-modal" onclick="closeAnimeModal()">✖</span>
            <img id="detailImage" src="" alt="Аниме изображение">
            <h2 id="detailTitle">Название Аниме</h2>
            <p id="detailDescription">Краткое описание аниме...</p>
            <h3>Серии</h3>
            <ul class="episodes-list" id="episodesList">
                <!-- Список серий будет динамически добавлен здесь -->
            </ul>
            <div class="video-container" id="detailVideoContainer" style="display: none;">
                <video controls id="detailAnimeVideo">
                    <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>

    <!-- Подключение 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));
        }

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

        // Функция для открытия модального окна деталей аниме
        function viewAnime(element) {
            const animeItem = element.closest('.anime-item');
            const title = animeItem.querySelector('.anime-info h3').textContent;
            const description = animeItem.querySelector('.anime-info p').textContent;
            const imageSrc = animeItem.querySelector('img').src;

            // Пример данных серий, можно заменить на реальные данные или получить из базы данных
            let episodes = [];
            if (title === "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 (title === "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 (title === "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"},
                    // Добавьте больше серий по необходимости
                ];
            }

            // Заполнение модального окна деталями аниме
            document.getElementById('detailImage').src = imageSrc;
            document.getElementById('detailTitle').textContent = title;
            document.getElementById('detailDescription').textContent = description;

            const episodesList = document.getElementById('episodesList');
            episodesList.innerHTML = '';
            episodes.forEach(ep => {
                const li = document.createElement('li');
                const btn = document.createElement('button');
                btn.textContent = `Эпизод ${ep.number}: ${ep.title}`;
                btn.onclick = () => {
                    document.getElementById('detailAnimeVideo').src = ep.video;
                    document.getElementById('detailVideoContainer').style.display = 'block';
                };
                li.appendChild(btn);
                episodesList.appendChild(li);
            });

            // Очистка видео-плеера при открытии нового аниме
            document.getElementById('detailAnimeVideo').src = '';
            document.getElementById('detailVideoContainer').style.display = 'none';

            // Открытие модального окна
            const animeDetailModal = document.getElementById('animeDetailModal');
            animeDetailModal.style.display = 'flex';
            animeDetailModal.style.animation = 'fadeIn 0.5s ease-in';
        }
    </script>

</body>
</html>