исправь ошибки стилей  в моем коде, и коректное отоброжения модельного окна где регистрация и авторизация 
<!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;
        }

        /* Улучшенные стили для постов */
        .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: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.5); /* Полупрозрачный фон */
            align-items: center;
            justify-content: center;
        }

        .modal-content {
            background-color: #fefefe;
            margin: auto;
            padding: 20px;
            border-radius: 8px;
            width: 90%;
            max-width: 400px;
            position: relative;
        }

        .close-btn {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }

        .close-btn:hover,
        .close-btn:focus {
            color: black;
            text-decoration: none;
        }

        .auth-tabs {
            display: flex;
            justify-content: space-around;
            margin-bottom: 20px;
        }

        .auth-tabs button {
            background: none;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
            font-size: 16px;
        }

        .auth-tabs button.active {
            border-bottom: 2px solid #007BFF;
            color: #007BFF;
        }

        .auth-form input {
            width: 100%;
            padding: 10px;
            margin: 8px 0;
            box-sizing: border-box;
        }

        .auth-form button {
            width: 100%;
            padding: 10px;
            background-color: #007BFF;
            color: white;
            border: none;
            cursor: pointer;
            margin-top: 10px;
            border-radius: 4px;
        }

        .auth-form button:hover {
            background-color: #0056b3;
        }

        .auth-form p {
            text-align: center;
            margin-top: 10px;
        }

        .auth-form a {
            color: #007BFF;
            text-decoration: none;
        }

        .auth-form a:hover {
            text-decoration: underline;
        }

        /* Дополнительные стили для групп, видео-плеера и профиля можно добавить здесь */
    </style>
</head>
<body>

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

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

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

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

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

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

    <!-- Форма создания сообщества (Модальное окно) -->
    <div class="modal" id="createGroupModal">
        <div class="modal-content">
            <span class="close-btn" onclick="closeModal('createGroupModal')">&times;</span>
            <h2>Создать новое сообщество</h2>
            <input type="text" id="groupName" placeholder="Название сообщества">
            <textarea id="groupDescription" placeholder="Описание сообщества"></textarea>
            <div style="display: flex; justify-content: flex-end; width: 100%;">
                <button onclick="createGroup()">Создать</button>
                <button onclick="closeModal('createGroupModal')" class="cancel-btn">Отмена</button>
            </div>
        </div>
    </div>

    <!-- Объединённая Форма Входа и Регистрации (Модальное окно) -->
    <div class="modal" id="authModal">
        <div class="modal-content">
            <span class="close-btn" onclick="closeModal('authModal')">&times;</span>
            <div class="auth-tabs">
                <button id="loginTab" class="active" onclick="showAuthForm('login')">Вход</button>
                <button id="registerTab" onclick="showAuthForm('register')">Регистрация</button>
            </div>
            <div id="loginForm" class="auth-form">
                <h2>Вход</h2>
                <input type="text" id="loginUsername" placeholder="Имя пользователя">
                <input type="password" id="loginPassword" placeholder="Пароль">
                <button onclick="login()">Войти</button>
                <p>Нет аккаунта? <a href="#" onclick="showAuthForm('register')">Зарегистрироваться</a></p>
            </div>
            <div id="registerForm" class="auth-form" style="display: none;">
                <h2>Регистрация</h2>
                <input type="text" id="registerUsername" placeholder="Имя пользователя">
                <input type="password" id="registerPassword" placeholder="Пароль">
                <button onclick="register()">Зарегистрироваться</button>
                <p>Уже есть аккаунт? <a href="#" onclick="showAuthForm('login')">Войти</a></p>
            </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>
        <h3>События</h3>
        <div class="events-list" id="groupEvents">
            <!-- События будут загружаться здесь -->
        </div>
        <!-- Карта события -->
        <div id="eventMap" class="event-map">
            <!-- Встроенная карта будет отображаться здесь -->
        </div>
    </div>

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

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

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

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

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

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

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

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

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

            // Проверка авторизации для определённых секций
            const authRequiredSections = ['createPost', 'animeWatch', 'community', 'profile', 'groupSection'];
            if (authRequiredSections.includes(sectionId) && !currentUser) {
                openModal('authModal');
                showAuthForm('login'); // По умолчанию показываем форму входа
                return;
            }

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

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

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

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

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

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

        // Функция для переключения между формами в authModal
        function showAuthForm(formType) {
            if (formType === 'login') {
                document.getElementById('loginForm').style.display = 'block';
                document.getElementById('registerForm').style.display = 'none';
                document.getElementById('loginTab').classList.add('active');
                document.getElementById('registerTab').classList.remove('active');
            } else if (formType === 'register') {
                document.getElementById('loginForm').style.display = 'none';
                document.getElementById('registerForm').style.display = 'block';
                document.getElementById('loginTab').classList.remove('active');
                document.getElementById('registerTab').classList.add('active');
            }
        }

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

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

            fetch('/api/register', {  // Используем относительный путь
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ username, password })
            })
            .then(response => response.json())
            .then(data => {
                if (data.error) {
                    alert(data.error);
                } else {
                    alert(data.message);
                    closeModal('authModal');
                    showAuthForm('login'); // Переключаемся на форму входа
                    openModal('authModal');
                }
            })
            .catch(error => {
                console.error('Error:', error);
            });
        }

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

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

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

        // Выход пользователя
        function logout() {
            currentUser = null;
            authToken = null;
            localStorage.removeItem('authToken');
            localStorage.removeItem('currentUser');
            showSection('feed'); // Переключаемся на ленту после выхода
        }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

            markers.push(marker);
        }

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

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

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

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

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

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

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

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

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

</body>
</html>