поправь на форуме ошибки с позиционированием ответов и все ошибки и не коректности размещений форм вот мой код <!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Сервис Мероприятий</title>
  <!-- Подключение стилей и библиотек -->
  <!-- Leaflet CSS -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
  <!-- Font Awesome для иконок -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
  <!-- Стили -->
  <style>
    /* Основные стили */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: 'Roboto', sans-serif;
      background: linear-gradient(to right, #00b4db, #0083b0);
      color: #333;
      overflow-x: hidden;
      transition: background 0.5s;
    }
    header {
      background: linear-gradient(to right, #536976, #292E49);
      padding: 20px;
      color: white;
      text-align: center;
      position: sticky;
      top: 0;
      z-index: 1000;
      box-shadow: 0 2px 5px rgba(0,0,0,0.3);
      animation: slideDown 0.5s ease-out;
    }
    header h1 {
      font-size: 2em;
      animation: fadeInDown 1s;
    }
    nav {
      display: flex;
      justify-content: center;
      background-color: #333;
      box-shadow: 0 2px 5px rgba(0,0,0,0.3);
      animation: fadeIn 1s;
      flex-wrap: wrap;
    }
    nav a {
      color: white;
      padding: 14px 20px;
      text-decoration: none;
      transition: background-color 0.3s, transform 0.3s, color 0.3s;
      display: flex;
      align-items: center;
      position: relative;
      margin: 2px;
      border-radius: 4px;
    }
    nav a:hover {
      background-color: #575757;
      transform: scale(1.05);
    }
    nav a.active {
      background-color: #4CAF50;
      animation: bounce 0.5s;
    }
    nav a i {
      margin-right: 8px;
    }
    main {
      padding: 20px;
      min-height: calc(100vh - 120px); /* Учитывая высоту header и nav */
      animation: fadeInUp 0.5s;
      display: flex;
      flex-direction: column;
      gap: 40px;
    }
    section {
      display: none;
      animation: fadeIn 0.5s;
    }
    section.active {
      display: block;
      animation: fadeIn 0.5s;
    }
    h2, h3 {
      margin-bottom: 20px;
      text-align: center;
      color: #fff;
      text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
      animation: fadeInDown 1s;
    }
    /* Анимации */
    @keyframes fadeIn {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
    @keyframes slideIn {
      from { transform: translateY(20px); opacity: 0; }
      to   { transform: translateY(0); opacity: 1; }
    }
    @keyframes slideDown {
      from { transform: translateY(-100%); }
      to   { transform: translateY(0); }
    }
    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(20px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes fadeInDown {
      from { opacity: 0; transform: translateY(-20px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes bounce {
      0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
      40% {transform: translateY(-10px);}
      60% {transform: translateY(-5px);}
    }
    @keyframes fadeInLeft {
      from { opacity: 0; transform: translateX(-20px); }
      to   { opacity: 1; transform: translateX(0); }
    }
    @keyframes fadeInRight {
      from { opacity: 0; transform: translateX(20px); }
      to   { opacity: 1; transform: translateX(0); }
    }
    /* Карта */
    #mapid {
      height: 400px;
      width: 100%;
      border-radius: 10px;
      overflow: hidden;
      margin-bottom: 20px;
      animation: slideIn 0.5s;
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }
    /* Форма добавления мероприятия */
    #event-form {
      display: flex;
      flex-direction: column;
      max-width: 500px;
      margin: 0 auto;
      background-color: rgba(255,255,255,0.8);
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      animation: fadeIn 0.5s;
      transition: transform 0.3s;
    }
    #event-form:hover {
      transform: translateY(-5px);
    }
    #event-form input, #event-form button {
      padding: 12px;
      margin-bottom: 15px;
      border: none;
      border-radius: 5px;
      font-size: 1em;
    }
    #event-form input {
      background-color: #f0f0f0;
      transition: background-color 0.3s, border 0.3s;
    }
    #event-form input:focus {
      background-color: #e0e0e0;
      border: 1px solid #4CAF50;
      outline: none;
    }
    #event-form button {
      background-color: #4CAF50;
      color: white;
      cursor: pointer;
      transition: background-color 0.3s, transform 0.3s;
    }
    #event-form button:hover {
      background-color: #45a049;
      transform: scale(1.05);
    }
    /* Новостная лента */
    #news-feed {
      list-style-type: none;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 20px;
      animation: fadeInUp 1s;
    }
    #news-feed li {
      background: linear-gradient(to bottom right, #ffffff, #dcdde1);
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      animation: fadeIn 0.5s;
      position: relative;
      overflow: hidden;
      transition: transform 0.3s, box-shadow 0.3s;
    }
    #news-feed li:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    }
    #news-feed li::before {
      content: "";
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle at center, transparent, rgba(0,0,0,0.1));
      transform: rotate(45deg);
      transition: opacity 0.3s;
      opacity: 0;
    }
    #news-feed li:hover::before {
      opacity: 1;
    }
    #news-feed li h3 {
      margin-top: 0;
      margin-bottom: 10px;
      animation: fadeInDown 0.5s;
    }
    #news-feed li p {
      animation: fadeIn 0.5s;
    }
    /* Форум */
    #comments-section {
      margin-top: 20px;
      animation: fadeInUp 1s;
    }
    #comments-list {
      list-style-type: none;
      padding: 0;
      animation: fadeIn 0.5s;
    }
    #comments-list li {
      background: linear-gradient(to right, #ffecd2, #fcb69f);
      margin-bottom: 10px;
      padding: 15px;
      border-radius: 10px;
      animation: fadeIn 0.5s;
      position: relative;
      transition: transform 0.3s, background-color 0.3s;
      display: flex;
      align-items: flex-start;
    }
    #comments-list li:hover {
      transform: translateY(-3px);
      background: linear-gradient(to right, #ffecd2, #fcb69f, #ffecd2);
    }
    #comments-list li::before {
      content: "";
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle at center, transparent, rgba(0,0,0,0.1));
      transform: rotate(45deg);
      transition: opacity 0.3s;
      opacity: 0;
    }
    #comments-list li:hover::before {
      opacity: 1;
    }
    #comments-list li .avatar {
      width: 50px;
      height: 50px;
      background-color: #ccc;
      border-radius: 50%;
      margin-right: 15px;
      flex-shrink: 0;
      overflow: hidden;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
      animation: fadeIn 1s;
    }
    #comments-list li .avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    #comments-list li .comment-content {
      flex: 1;
    }
    #comments-list li .comment-content p {
      margin: 0;
      animation: fadeIn 0.5s;
    }
    #comments-list li .comment-content .meta {
      font-size: 0.8em;
      color: #555;
    }
    #comments-list li button.reply-btn {
      margin-top: 10px;
      padding: 5px 10px;
      background-color: #333;
      color: #fff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      transition: background-color 0.3s, transform 0.3s;
      font-size: 0.9em;
    }
    #comments-list li button.reply-btn:hover {
      background-color: #575757;
      transform: scale(1.05);
    }
    #comments-list li .like-btn {
      background: none;
      border: none;
      color: #ff4757;
      cursor: pointer;
      font-size: 1em;
      transition: color 0.3s;
      margin-left: 10px;
      display: flex;
      align-items: center;
    }
    #comments-list li .like-btn:hover {
      color: #ff6b81;
    }
    #comments-list li .like-btn.liked {
      color: #e84118;
    }
    #comments-list li textarea {
      width: 100%;
      padding: 10px;
      margin-top: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
      resize: vertical;
      animation: fadeIn 0.5s;
      transition: border-color 0.3s;
    }
    #comments-list li textarea:focus {
      border-color: #4CAF50;
      outline: none;
    }
    #comments-list ul.reply {
      margin-top: 15px;
      margin-left: 65px;
      animation: fadeInLeft 0.5s;
    }
    /* Трансляция */
    #live-stream {
      display: flex;
      flex-direction: column;
      align-items: center;
      animation: fadeIn 1s;
      gap: 20px;
    }
    #live-stream iframe {
      width: 100%;
      max-width: 800px;
      height: 450px;
      border: none;
      border-radius: 15px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
      transition: transform 0.3s;
    }
    #live-stream iframe:hover {
      transform: scale(1.02);
    }
    #stream-info {
      text-align: center;
      color: #fff;
      font-size: 1.1em;
      animation: fadeIn 0.5s;
    }
    #live-chat {
      width: 100%;
      max-width: 800px;
      background-color: rgba(255,255,255,0.9);
      padding: 15px;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      animation: fadeIn 0.5s;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    #live-chat-window {
      border: 1px solid #ccc;
      height: 200px;
      overflow-y: scroll;
      padding: 10px;
      background-color: white;
      border-radius: 5px;
      box-shadow: inset 0 2px 5px rgba(0,0,0,0.1);
      animation: fadeIn 1s;
    }
    #live-chat-window .message {
      margin-bottom: 10px;
      padding: 8px 12px;
      border-radius: 20px;
      max-width: 80%;
      position: relative;
      opacity: 0;
      animation-fill-mode: forwards;
      animation-duration: 0.5s;
    }
    #live-chat-window .message.user {
      background: #dff9fb;
      align-self: flex-end;
      text-align: right;
      margin-left: auto;
      animation-name: fadeInRight;
    }
    #live-chat-window .message.bot {
      background: #f1f2f6;
      align-self: flex-start;
      text-align: left;
      margin-right: auto;
      animation-name: fadeInLeft;
    }
    #live-chat-input {
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
      transition: border-color 0.3s;
      width: calc(100% - 22px);
    }
    #live-chat-input:focus {
      border-color: #4CAF50;
      outline: none;
    }
    #live-chat button {
      padding: 10px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s, transform 0.3s;
      width: 100%;
    }
    #live-chat button:hover {
      background-color: #45a049;
      transform: scale(1.02);
    }
    /* Совместные задания */
    #task-list {
      list-style-type: none;
      padding: 0;
      animation: fadeInUp 1s;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    #task-list li {
      background: linear-gradient(to right, #e0eafc, #cfdef3);
      margin-bottom: 10px;
      padding: 15px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      animation: fadeIn 0.5s;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      transition: background-color 0.3s, transform 0.3s;
    }
    #task-list li.completed {
      text-decoration: line-through;
      opacity: 0.6;
      background: linear-gradient(to right, #d3d3d3, #b0b0b0);
    }
    #task-list li:hover {
      transform: translateY(-3px);
      background: linear-gradient(to right, #c5d7f7, #a8cfff);
    }
    /* Чат */
    #chat-window {
      border: 1px solid #ccc;
      height: 300px;
      overflow-y: scroll;
      padding: 10px;
      background-color: white;
      margin-bottom: 10px;
      border-radius: 5px;
      box-shadow: inset 0 2px 5px rgba(0,0,0,0.1);
      animation: fadeIn 1s;
    }
    #chat-window .message {
      margin-bottom: 10px;
      padding: 8px 12px;
      border-radius: 20px;
      max-width: 80%;
      position: relative;
      opacity: 0;
      animation-fill-mode: forwards;
      animation-duration: 0.5s;
    }
    #chat-window .message.user {
      background: #dff9fb;
      align-self: flex-end;
      text-align: right;
      margin-left: auto;
      animation-name: fadeInRight;
    }
    #chat-window .message.bot {
      background: #f1f2f6;
      align-self: flex-start;
      text-align: left;
      margin-right: auto;
      animation-name: fadeInLeft;
    }
    #chat-input {
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
      transition: border-color 0.3s;
      width: calc(100% - 22px);
    }
    #chat-input:focus {
      border-color: #4CAF50;
      outline: none;
    }
    #chat button {
      padding: 10px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s, transform 0.3s;
      width: 100%;
    }
    #chat button:hover {
      background-color: #45a049;
      transform: scale(1.02);
    }
    /* Модальные окна */
    .modal {
      display: none;
      position: fixed;
      z-index: 2000;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgba(0,0,0,0.6);
      animation: fadeIn 0.5s;
    }
    .modal-content {
      background-color: #fefefe;
      margin: 5% auto;
      padding: 30px;
      border: none;
      border-radius: 10px;
      width: 90%;
      max-width: 500px;
      position: relative;
      animation: slideIn 0.5s;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }
    .close {
      color: #aaa;
      position: absolute;
      top: 15px;
      right: 25px;
      font-size: 30px;
      font-weight: bold;
      cursor: pointer;
      transition: color 0.3s;
    }
    .close:hover,
    .close:focus {
      color: black;
    }
    /* Профиль */
    #profile-section {
      display: flex;
      flex-direction: column;
      align-items: center;
      animation: fadeInUp 1s;
      gap: 20px;
    }
    #profile-section .avatar {
      width: 150px;
      height: 150px;
      background-color: #ccc;
      border-radius: 50%;
      position: relative;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
      transition: transform 0.3s;
    }
    #profile-section .avatar:hover {
      transform: scale(1.05);
    }
    #profile-section .avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      animation: fadeIn 1s;
    }
    #profile-section h2 {
      margin-bottom: 10px;
      animation: fadeIn 0.5s;
    }
    #profile-section .edit-btn {
      padding: 10px 20px;
      background-color: #FFA500;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s, transform 0.3s;
      animation: fadeIn 0.5s;
    }
    #profile-section .edit-btn:hover {
      background-color: #e69500;
      transform: scale(1.05);
    }
    /* Загрузка аватара */
    #profile-section input[type="file"] {
      display: none;
    }
    #profile-section label[for="avatar-upload"] {
      cursor: pointer;
      color: #FFA500;
      text-decoration: underline;
      transition: color 0.3s;
      animation: fadeIn 0.5s;
    }
    #profile-section label[for="avatar-upload"]:hover {
      color: #e69500;
    }
    /* Статистика пользователя */
    #user-stats p {
      font-size: 1.1em;
      animation: fadeIn 0.5s;
    }
    /* Список мероприятий пользователя */
    #user-events {
      width: 100%;
      max-width: 800px;
      margin-top: 20px;
      animation: fadeIn 0.5s;
    }
    #user-events h3 {
      text-align: left;
      margin-bottom: 15px;
      color: #fff;
    }
    #user-events ul {
      list-style-type: none;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    #user-events ul li {
      background: linear-gradient(to right, #dfe9f3, #ffffff);
      padding: 15px;
      border-radius: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      transition: background-color 0.3s, transform 0.3s;
      animation: fadeIn 0.5s;
    }
    #user-events ul li:hover {
      background: linear-gradient(to right, #c5d7f7, #a8cfff);
      transform: translateY(-2px);
    }
    #user-events ul li button {
      background-color: #ff4757;
      padding: 5px 10px;
      border: none;
      border-radius: 5px;
      color: white;
      cursor: pointer;
      transition: background-color 0.3s, transform 0.3s;
    }
    #user-events ul li button:hover {
      background-color: #e84118;
      transform: scale(1.05);
    }
    /* Редактирование профиля */
    #edit-profile {
      display: none;
      animation: fadeInUp 0.5s;
    }
    #edit-profile h2 {
      margin-bottom: 20px;
    }
    #edit-profile form {
      display: flex;
      flex-direction: column;
      gap: 15px;
    }
    #edit-profile form input {
      padding: 12px;
      border: 1px solid #ccc;
      border-radius: 5px;
      transition: border-color 0.3s;
      font-size: 1em;
    }
    #edit-profile form input:focus {
      border-color: #4CAF50;
      outline: none;
    }
    #edit-profile form button {
      padding: 12px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s, transform 0.3s;
    }
    #edit-profile form button:hover {
      background-color: #45a049;
      transform: scale(1.05);
    }
    #edit-profile form .cancel-btn {
      background-color: #ff4757;
      margin-top: 10px;
    }
    #edit-profile form .cancel-btn:hover {
      background-color: #e84118;
      transform: scale(1.05);
    }
    /* Адаптивный дизайн */
    @media (max-width: 1200px) {
      #live-stream iframe {
        height: 400px;
      }
    }
    @media (max-width: 800px) {
      #live-stream iframe {
        width: 100%;
        height: auto;
      }
      .modal-content {
        width: 90%;
        margin-top: 30%;
      }
      nav a {
        flex: 1 1 45%;
        text-align: center;
      }
    }
    @media (max-width: 500px) {
      nav a {
        flex: 1 1 100%;
        text-align: center;
      }
      #live-stream iframe {
        height: 250px;
      }
      #profile-section .avatar {
        width: 100px;
        height: 100px;
      }
    }
  </style>
</head>
<body>
  <header>
    <h1>Добро пожаловать в сервис мероприятий</h1>
  </header>
  <nav id="main-nav">
    <!-- Навигация будет динамически обновляться -->
  </nav>
  <main id="main-content">
    <!-- Секции сайта -->

    <!-- Профиль пользователя -->
    <section id="profile">
      <h2>Профиль</h2>
      <div id="profile-section">
        <div class="avatar">
          <img src="https://via.placeholder.com/150" alt="Avatar" id="profile-avatar">
        </div>
        <input type="file" id="avatar-upload" accept="image/*" onchange="uploadAvatar(event)">
        <label for="avatar-upload">Изменить аватар</label>
        <h2 id="profile-username">Имя пользователя</h2>
        <button class="edit-btn" onclick="openProfileEdit()">Редактировать профиль</button>
        <div id="user-stats" style="margin-top: 20px; color: #fff; text-align: center;">
          <p>Событий: <span id="user-events-count">0</span></p>
          <p>Комментариев: <span id="user-comments-count">0</span></p>
          <p>Задач: <span id="user-tasks-count">0</span></p>
        </div>
        <div id="user-events">
          <h3>Мои мероприятия</h3>
          <ul id="user-events-list">
            <!-- Список мероприятий пользователя -->
          </ul>
        </div>
      </div>
    </section>

    <!-- Редактирование профиля -->
    <section id="edit-profile">
      <h2>Редактирование профиля</h2>
      <form id="edit-profile-form" onsubmit="saveProfile(event)">
        <input type="text" id="edit-username" placeholder="Имя пользователя" required>
        <input type="password" id="edit-password" placeholder="Новый пароль">
        <button type="submit">Сохранить изменения</button>
        <button type="button" class="cancel-btn" onclick="cancelEdit()">Отмена</button>
      </form>
    </section>

    <!-- Карта мероприятий -->
    <section id="map">
      <h2>Карта мероприятий</h2>
      <div id="mapid"></div>
      <h3>Добавить мероприятие</h3>
      <form id="event-form">
        <input type="text" id="event-name" placeholder="Название мероприятия" required>
        <input type="text" id="event-lat" placeholder="Широта" required>
        <input type="text" id="event-lng" placeholder="Долгота" required>
        <button type="button" onclick="addEvent()">Добавить</button>
      </form>
    </section>

    <!-- Новостная лента -->
    <section id="news">
      <h2>Последние новости</h2>
      <ul id="news-feed"></ul>
    </section>

    <!-- Форум -->
    <section id="forum">
      <h2>Форум</h2>
      <p>Обсуждайте актуальные темы и делитесь своим мнением.</p>
      <div id="comments-section">
        <h3>Комментарии</h3>
        <ul id="comments-list"></ul>
        <h3>Добавить комментарий</h3>
        <textarea id="comment-input" rows="4" placeholder="Ваш комментарий..."></textarea><br>
        <button onclick="addComment()">Отправить</button>
      </div>
    </section>

    <!-- Трансляция -->
    <section id="stream">
      <h2>Прямая трансляция мероприятия</h2>
      <div id="live-stream">
        <!-- Замените ссылку src на URL вашей трансляции -->
        <iframe src="https://www.youtube.com/embed/live_stream?channel=UCBR8-60-B28hp2BmDPdntcQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
      </div>
      <div id="stream-info">
        <p>Трансляция начала: <span id="stream-start-time">—</span></p>
      </div>
      <h3>Чат трансляции</h3>
      <div id="live-chat">
        <div id="live-chat-window">
          <!-- Сообщения чата трансляции -->
        </div>
        <input type="text" id="live-chat-input" placeholder="Введите сообщение">
        <button onclick="sendLiveChatMessage()">Отправить</button>
      </div>
    </section>

    <!-- Совместные задания -->
    <section id="tasks">
      <h2>Совместные задания</h2>
      <ul id="task-list"></ul>
      <input type="text" id="task-input" placeholder="Новая задача">
      <button onclick="addTask()">Добавить задачу</button>
    </section>

    <!-- Чат -->
    <section id="chat">
      <h2>Чат для общения</h2>
      <div id="chat-window">
        <!-- Сообщения чата -->
      </div>
      <input type="text" id="chat-input" placeholder="Введите сообщение">
      <button onclick="sendMessage()">Отправить</button>
    </section>
  </main>

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

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

  <!-- Подключение скриптов -->
  <!-- Leaflet JS -->
  <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
  <!-- Основной скрипт -->
  <script>
    // Объект текущего пользователя
    let currentUser = null;

    // Функция загрузки приложения
    function loadApp() {
      // Проверяем, есть ли текущий пользователь
      const user = localStorage.getItem('currentUser');
      if (user) {
        currentUser = JSON.parse(user);
        showMainApp();
      } else {
        showRegister();
      }
    }

    // Функция отображения навигационного меню
    function renderNav() {
      const nav = document.getElementById('main-nav');
      nav.innerHTML = '';
      if (currentUser) {
        nav.innerHTML = `
          <a href="#" onclick="openTab(event, 'profile')"><i class="fas fa-user"></i>Профиль</a>
          <a href="#" onclick="openTab(event, 'map')"><i class="fas fa-map-marker-alt"></i>Карта</a>
          <a href="#" onclick="openTab(event, 'news')"><i class="fas fa-newspaper"></i>Новости</a>
          <a href="#" onclick="openTab(event, 'forum')"><i class="fas fa-comments"></i>Форум</a>
          <a href="#" onclick="openTab(event, 'stream')"><i class="fas fa-video"></i>Трансляция</a>
          <a href="#" onclick="openTab(event, 'tasks')"><i class="fas fa-tasks"></i>Задачи</a>
          <a href="#" onclick="openTab(event, 'chat')"><i class="fas fa-comment"></i>Чат</a>
          <a href="#" onclick="logoutUser()"><i class="fas fa-sign-out-alt"></i>Выйти</a>
        `;
      }
    }

    // Функция переключения вкладок
    function openTab(evt, tabName) {
      var i, sections, navlinks;
      sections = document.querySelectorAll('section');
      for (i = 0; i < sections.length; i++) {
        sections[i].classList.remove('active');
      }
      navlinks = document.querySelectorAll('nav a');
      for (i = 0; i < navlinks.length; i++) {
        navlinks[i].classList.remove('active');
      }
      document.getElementById(tabName).classList.add('active');
      evt.currentTarget.classList.add('active');
      // Обновление карты при переключении на вкладку
      if (tabName === 'map') {
        setTimeout(function() {
          map.invalidateSize();
        }, 100);
      }
      // Обновление профиля
      if (tabName === 'profile') {
        updateProfileStats();
        renderUserEvents();
      }
    }

    // Функции для регистрации и входа
    function registerUser(event) {
      event.preventDefault();
      const username = document.getElementById('reg-username').value.trim();
      const password = document.getElementById('reg-password').value.trim();
      if (username && password) {
        // Проверяем, что пользователя с таким именем нет
        let users = JSON.parse(localStorage.getItem('users')) || [];
        if (users.find(user => user.username === username)) {
          alert('Пользователь с таким именем уже существует');
        } else {
          const newUser = { username: username, password: password, avatar: 'https://via.placeholder.com/150' };
          users.push(newUser);
          localStorage.setItem('users', JSON.stringify(users));
          currentUser = newUser;
          localStorage.setItem('currentUser', JSON.stringify(currentUser));
          closeModal('modal-register');
          showMainApp();
        }
      }
    }

    function loginUser(event) {
      event.preventDefault();
      const username = document.getElementById('login-username').value.trim();
      const password = document.getElementById('login-password').value.trim();
      let users = JSON.parse(localStorage.getItem('users')) || [];
      const user = users.find(user => user.username === username && user.password === password);
      if (user) {
        currentUser = user;
        localStorage.setItem('currentUser', JSON.stringify(currentUser));
        closeModal('modal-login');
        showMainApp();
      } else {
        alert('Неверное имя пользователя или пароль');
      }
    }

    function logoutUser() {
      currentUser = null;
      localStorage.removeItem('currentUser');
      showRegister();
    }

    // Функции отображения модальных окон
    function showRegister() {
      renderNav();
      hideAllSections();
      openModal('modal-register');
    }

    function showLogin() {
      closeModal('modal-register');
      openModal('modal-login');
    }

    function openModal(modalId) {
      document.getElementById(modalId).style.display = 'block';
    }

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

    function hideAllSections() {
      document.querySelectorAll('section').forEach(section => section.classList.remove('active'));
      document.getElementById('edit-profile').style.display = 'none';
    }

    function showMainApp() {
      renderNav();
      hideAllSections();
      document.getElementById('profile').classList.add('active');
      updateProfile();
    }

    // Обновление данных профиля
    function updateProfile() {
      document.getElementById('profile-username').textContent = currentUser.username;
      document.getElementById('profile-avatar').src = currentUser.avatar || 'https://via.placeholder.com/150';
      updateProfileStats();
      renderUserEvents();
    }

    function updateProfileStats() {
      const events = JSON.parse(localStorage.getItem('events')) || [];
      const comments = JSON.parse(localStorage.getItem('comments')) || [];
      const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
      const userEvents = events.filter(event => event.creator === currentUser.username);
      const userComments = comments.filter(comment => comment.username === currentUser.username);
      const userTasks = tasks.filter(task => task.assignedTo === currentUser.username);
      document.getElementById('user-events-count').textContent = userEvents.length;
      document.getElementById('user-comments-count').textContent = userComments.length;
      document.getElementById('user-tasks-count').textContent = userTasks.length;
    }

    // Редактирование профиля
    function openProfileEdit() {
      document.getElementById('profile').style.display = 'none';
      document.getElementById('edit-profile').style.display = 'block';
      document.getElementById('edit-username').value = currentUser.username;
    }

    function saveProfile(event) {
      event.preventDefault();
      const newUsername = document.getElementById('edit-username').value.trim();
      const newPassword = document.getElementById('edit-password').value.trim();
      if (newUsername) {
        let users = JSON.parse(localStorage.getItem('users')) || [];
        const userIndex = users.findIndex(user => user.username === currentUser.username);
        if (userIndex !== -1) {
          // Проверка на уникальность нового имени пользователя
          if (newUsername !== currentUser.username && users.find(user => user.username === newUsername)) {
            alert('Пользователь с таким именем уже существует');
            return;
          }
          users[userIndex].username = newUsername;
          if (newPassword) {
            users[userIndex].password = newPassword;
          }
          localStorage.setItem('users', JSON.stringify(users));
          currentUser = users[userIndex];
          localStorage.setItem('currentUser', JSON.stringify(currentUser));
          updateProfile();
          document.getElementById('edit-profile-form').reset();
          alert('Профиль обновлен!');
          document.getElementById('edit-profile').style.display = 'none';
          document.getElementById('profile').style.display = 'block';
          openTab({currentTarget: document.querySelector('nav a[href="#profile"]')}, 'profile');
        }
      }
    }

    function cancelEdit() {
      document.getElementById('edit-profile').style.display = 'none';
      document.getElementById('profile').style.display = 'block';
    }

    // Загрузка аватара
    function uploadAvatar(event) {
      const file = event.target.files[0];
      if (file && file.type.startsWith('image/')) {
        const reader = new FileReader();
        reader.onload = function(e) {
          document.getElementById('profile-avatar').src = e.target.result;
          currentUser.avatar = e.target.result;
          let users = JSON.parse(localStorage.getItem('users')) || [];
          const userIndex = users.findIndex(user => user.username === currentUser.username);
          if (userIndex !== -1) {
            users[userIndex].avatar = e.target.result;
            localStorage.setItem('users', JSON.stringify(users));
            localStorage.setItem('currentUser', JSON.stringify(currentUser));
          }
        }
        reader.readAsDataURL(file);
      } else {
        alert('Пожалуйста, выберите изображение.');
      }
    }

    // Инициализация приложения
    document.addEventListener('DOMContentLoaded', function() {
      loadApp();
      // Закрытие модальных окон при клике вне их
      window.onclick = function(event) {
        if (event.target.classList.contains('modal')) {
          event.target.style.display = 'none';
        }
      };
    });

    // ================== Карта ==================
    var map = L.map('mapid').setView([55.751244, 37.618423], 10);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '&copy; OpenStreetMap contributors'
    }).addTo(map);
    var events = JSON.parse(localStorage.getItem('events')) || [
      { id: generateId(), name: "Концерт", coords: [55.751244, 37.618423], creator: "admin" },
      { id: generateId(), name: "Выставка", coords: [55.752023, 37.617499], creator: "admin" },
      { id: generateId(), name: "Марафон", coords: [55.755814, 37.617635], creator: "admin" }
    ];
    events.forEach(function(event) {
      addMarker(event);
    });

    function addMarker(event) {
      L.marker(event.coords)
        .addTo(map)
        .bindPopup(`<strong>${event.name}</strong><br>Создал: ${event.creator}`);
    }

    function generateId() {
      return Date.now() + Math.floor(Math.random() * 1000);
    }

    function addEvent() {
      var name = document.getElementById('event-name').value.trim();
      var lat = parseFloat(document.getElementById('event-lat').value);
      var lng = parseFloat(document.getElementById('event-lng').value);
      if (name && !isNaN(lat) && !isNaN(lng)) {
        var event = { 
          id: generateId(),
          name: name, 
          coords: [lat, lng], 
          creator: currentUser.username 
        };
        addMarker(event);
        map.setView([lat, lng], 12);
        document.getElementById('event-form').reset();
        events.push(event);
        localStorage.setItem('events', JSON.stringify(events));
        renderUserEvents();
        // Увеличение статистики профиля
        updateProfileStats();
        alert('Мероприятие добавлено!');
      } else {
        alert('Пожалуйста, введите корректные данные.');
      }
    }

    // ================== Лента новостей ==================
    function fetchNews() {
      // Здесь можно использовать реальный API для получения новостей
      // Для примера используем статические данные
      var newsData = [
        { title: "Анонс мероприятия А", date: "2023-10-01", content: "Описание мероприятия А..." },
        { title: "Перенос мероприятия Б", date: "2023-10-02", content: "Мероприятие Б перенесено на другую дату..." },
        { title: "Новая активность", date: "2023-10-03", content: "Присоединяйтесь к новой активности..." }
      ];
      renderNewsFeed(newsData);
    }
    function renderNewsFeed(newsItems) {
      var newsFeed = document.getElementById('news-feed');
      newsFeed.innerHTML = '';
      newsItems.forEach(function(item) {
        var listItem = document.createElement('li');
        listItem.innerHTML = '<h3>' + item.title + '</h3><small>' + item.date + '</small><p>' + item.content + '</p>';
        newsFeed.appendChild(listItem);
      });
    }
    fetchNews();

    // ================== Форум ==================
    var comments = JSON.parse(localStorage.getItem('comments')) || [];
    function addComment(parentId = null) {
      var commentText = parentId ? document.getElementById('reply-input-' + parentId).value.trim() : document.getElementById('comment-input').value.trim();
      if (commentText) {
        var comment = { 
          id: generateId(),
          text: commentText, 
          replies: [], 
          parentId: parentId, 
          username: currentUser.username, 
          avatar: currentUser.avatar || 'https://via.placeholder.com/50',
          timestamp: new Date().toLocaleString(),
          likes: 0
        };
        comments.push(comment);
        if (parentId) {
          document.getElementById('reply-input-' + parentId).value = '';
        } else {
          document.getElementById('comment-input').value = '';
        }
        saveComments();
        renderComments();
        // Увеличение статистики профиля
        updateProfileStats();
      }
    }
    function renderComments() {
      var commentsList = document.getElementById('comments-list');
      commentsList.innerHTML = '';
      var rootComments = comments.filter(function(comment) { return !comment.parentId; });
      rootComments.forEach(function(comment) {
        var listItem = createCommentElement(comment);
        commentsList.appendChild(listItem);
      });
    }
    function createCommentElement(comment) {
      var listItem = document.createElement('li');

      // Аватарка
      var avatarDiv = document.createElement('div');
      avatarDiv.className = 'avatar';
      var avatarImg = document.createElement('img');
      avatarImg.src = comment.avatar;
      avatarImg.alt = 'Avatar';
      avatarDiv.appendChild(avatarImg);
      listItem.appendChild(avatarDiv);

      // Содержимое комментария
      var contentDiv = document.createElement('div');
      contentDiv.className = 'comment-content';
      
      var commentP = document.createElement('p');
      commentP.innerHTML = '<strong>' + comment.username + ':</strong> ' + comment.text;
      contentDiv.appendChild(commentP);
      
      var metaP = document.createElement('p');
      metaP.className = 'meta';
      metaP.textContent = comment.timestamp;
      contentDiv.appendChild(metaP);

      // Кнопка "Ответить"
      var replyBtn = document.createElement('button');
      replyBtn.className = 'reply-btn';
      replyBtn.textContent = 'Ответить';
      replyBtn.onclick = function() {
        toggleReplyInput(comment.id);
      };
      contentDiv.appendChild(replyBtn);

      // Кнопка "Лайк"
      var likeBtn = document.createElement('button');
      likeBtn.className = 'like-btn';
      likeBtn.innerHTML = '<i class="fas fa-heart"></i> ' + comment.likes;
      likeBtn.onclick = function() {
        toggleLike(comment.id, likeBtn);
      };
      contentDiv.appendChild(likeBtn);

      listItem.appendChild(contentDiv);

      // Поле для ответа
      var replyInput = document.createElement('textarea');
      replyInput.id = 'reply-input-' + comment.id;
      replyInput.placeholder = 'Ваш ответ...';
      replyInput.style.display = 'none';
      listItem.appendChild(replyInput);

      // Кнопка отправки ответа
      var replySubmit = document.createElement('button');
      replySubmit.textContent = 'Отправить';
      replySubmit.style.display = 'none';
      replySubmit.onclick = function() {
        addComment(comment.id);
      };
      listItem.appendChild(replySubmit);

      // Рендер вложенных комментариев
      var childComments = comments.filter(function(c) { return c.parentId === comment.id; });
      if (childComments.length > 0) {
        var replyList = document.createElement('ul');
        replyList.className = 'reply';
        childComments.forEach(function(childComment) {
          var childItem = createCommentElement(childComment);
          replyList.appendChild(childItem);
        });
        listItem.appendChild(replyList);
      }

      return listItem;
    }

    function toggleReplyInput(commentId) {
      var replyInput = document.getElementById('reply-input-' + commentId);
      var replySubmit = replyInput.nextElementSibling;
      if (replyInput.style.display === 'none' || !replyInput.style.display) {
        replyInput.style.display = 'block';
        replySubmit.style.display = 'block';
      } else {
        replyInput.style.display = 'none';
        replySubmit.style.display = 'none';
      }
    }

    function toggleLike(commentId, btn) {
      let commentsData = JSON.parse(localStorage.getItem('comments')) || [];
      let comment = commentsData.find(c => c.id === commentId);
      if (comment) {
        comment.likes += 1;
        localStorage.setItem('comments', JSON.stringify(commentsData));
        btn.innerHTML = `<i class="fas fa-heart"></i> ${comment.likes}`;
        // Увеличение статистики профиля, если пользователь лайкает свой комментарий
        if (comment.username === currentUser.username) {
          updateProfileStats();
        }
      }
    }

    function saveComments() {
      localStorage.setItem('comments', JSON.stringify(comments));
    }
    renderComments();

    // ================== Совместные задания ==================
    var tasks = JSON.parse(localStorage.getItem('tasks')) || [];
    function addTask() {
      var taskInput = document.getElementById('task-input');
      var taskText = taskInput.value.trim();
      if (taskText) {
        tasks.push({ id: generateId(), text: taskText, completed: false, assignedTo: currentUser.username });
        taskInput.value = '';
        saveTasks();
        renderTasks();
        // Увеличение статистики профиля
        updateProfileStats();
      }
    }
    function toggleTask(index) {
      tasks[index].completed = !tasks[index].completed;
      saveTasks();
      renderTasks();
      // Увеличение статистики профиля
      updateProfileStats();
    }
    function renderTasks() {
      var taskList = document.getElementById('task-list');
      taskList.innerHTML = '';
      tasks.forEach(function(task, index) {
        if (task.assignedTo === currentUser.username) {
          var listItem = document.createElement('li');
          listItem.className = task.completed ? 'completed' : '';
          listItem.innerHTML = `
            <div>
              <input type="checkbox" ${task.completed ? 'checked' : ''} onclick="toggleTask(${index})">
              <span>${task.text}</span>
            </div>
            `;
          taskList.appendChild(listItem);
        }
      });
    }
    function saveTasks() {
      localStorage.setItem('tasks', JSON.stringify(tasks));
    }
    renderTasks();

    // ================== Чат ==================
    var messages = JSON.parse(localStorage.getItem('messages')) || [];
    function sendMessage() {
      var chatInput = document.getElementById('chat-input');
      var message = chatInput.value.trim();
      if (message) {
        messages.push({ 
          id: generateId(),
          text: message, 
          sender: 'user', 
          username: currentUser.username, 
          timestamp: new Date().toLocaleTimeString() 
        });
        chatInput.value = '';
        saveMessages();
        renderMessages();
        // Имитируем ответ от бота
        setTimeout(function() {
          messages.push({ 
            id: generateId(),
            text: 'Спасибо за сообщение!', 
            sender: 'bot', 
            username: 'Bot', 
            timestamp: new Date().toLocaleTimeString() 
          });
          saveMessages();
          renderMessages();
        }, 1000);
      }
    }
    function renderMessages() {
      var chatWindow = document.getElementById('chat-window');
      chatWindow.innerHTML = '';
      messages.forEach(function(msg) {
        var messageDiv = document.createElement('div');
        messageDiv.className = 'message ' + msg.sender;
        messageDiv.innerHTML = `<strong>${msg.username}:</strong> ${msg.text} <span style="font-size: 0.8em; color: #555;">${msg.timestamp}</span>`;
        chatWindow.appendChild(messageDiv);
      });
      chatWindow.scrollTop = chatWindow.scrollHeight;
    }
    function saveMessages() {
      localStorage.setItem('messages', JSON.stringify(messages));
    }
    renderMessages();

    // ================== Трансляция ==================
    var liveMessages = JSON.parse(localStorage.getItem('liveMessages')) || [];
    function sendLiveChatMessage() {
      var liveChatInput = document.getElementById('live-chat-input');
      var message = liveChatInput.value.trim();
      if (message) {
        liveMessages.push({ 
          id: generateId(),
          text: message, 
          sender: 'user', 
          username: currentUser.username, 
          timestamp: new Date().toLocaleTimeString() 
        });
        liveChatInput.value = '';
        saveLiveMessages();
        renderLiveMessages();
        // Имитируем ответ от бота
        setTimeout(function() {
          liveMessages.push({ 
            id: generateId(),
            text: 'Спасибо за участие в трансляции!', 
            sender: 'bot', 
            username: 'Bot', 
            timestamp: new Date().toLocaleTimeString() 
          });
          saveLiveMessages();
          renderLiveMessages();
        }, 1000);
      }
    }
    function renderLiveMessages() {
      var liveChatWindow = document.getElementById('live-chat-window');
      liveChatWindow.innerHTML = '';
      liveMessages.forEach(function(msg) {
        var messageDiv = document.createElement('div');
        messageDiv.className = 'message ' + msg.sender;
        messageDiv.innerHTML = `<strong>${msg.username}:</strong> ${msg.text} <span style="font-size: 0.8em; color: #555;">${msg.timestamp}</span>`;
        liveChatWindow.appendChild(messageDiv);
      });
      liveChatWindow.scrollTop = liveChatWindow.scrollHeight;
    }
    function saveLiveMessages() {
      localStorage.setItem('liveMessages', JSON.stringify(liveMessages));
    }
    renderLiveMessages();

    // ================== Список мероприятий пользователя ==================
    function renderUserEvents() {
      var userEventsList = document.getElementById('user-events-list');
      userEventsList.innerHTML = '';
      var userEvents = events.filter(event => event.creator === currentUser.username);
      userEvents.forEach(function(event) {
        var listItem = document.createElement('li');
        listItem.textContent = event.name;
        var deleteBtn = document.createElement('button');
        deleteBtn.textContent = 'Удалить';
        deleteBtn.onclick = function() {
          deleteEvent(event.id);
        };
        listItem.appendChild(deleteBtn);
        userEventsList.appendChild(listItem);
      });
    }

    function deleteEvent(eventId) {
      if (confirm('Вы уверены, что хотите удалить это мероприятие?')) {
        events = events.filter(event => event.id !== eventId);
        localStorage.setItem('events', JSON.stringify(events));
        // Удаление маркера с карты невозможно без сохранения ссылок на маркеры
        renderUserEvents();
        updateProfileStats();
        alert('Мероприятие удалено!');
      }
    }

    // ================== Интерактивные функции ==================
    // Генерация уникальных ID для мероприятий, комментариев и сообщений
    function generateId() {
      return Date.now() + Math.floor(Math.random() * 1000);
    }
  </script>
</body>
</html>   напиши в ответе исправленый 1 файлом целиком