исправь все ошибки добавь анимации вот код <!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;
    }
    body {
      font-family: 'Roboto', sans-serif;
      margin: 0;
      padding: 0;
      background: linear-gradient(to right, #00b4db, #0083b0);
      color: #333;
    }
    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);
    }
    nav {
      display: flex;
      justify-content: center;
      background-color: #333;
      box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    }
    nav a {
      color: white;
      padding: 14px 20px;
      text-decoration: none;
      transition: background-color 0.3s, transform 0.3s;
      display: flex;
      align-items: center;
    }
    nav a:hover {
      background-color: #575757;
      transform: scale(1.05);
    }
    nav a.active {
      background-color: #4CAF50;
    }
    nav a i {
      margin-right: 8px;
    }
    main {
      padding: 20px;
      min-height: calc(100vh - 120px); /* Учитывая высоту header и nav */
    }
    section {
      display: none;
      animation: fadeIn 0.5s;
    }
    section.active {
      display: block;
    }
    h2 {
      margin-top: 0;
      text-align: center;
      color: #fff;
      text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    }
    /* Анимации */
    @keyframes fadeIn {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
    @keyframes slideIn {
      from { transform: translateY(20px); opacity: 0; }
      to   { transform: translateY(0); opacity: 1; }
    }
    /* Карта */
    #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: 400px;
      margin: 0 auto 20px;
      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;
    }
    #event-form input, #event-form button {
      padding: 10px;
      margin-bottom: 10px;
      border: none;
      border-radius: 5px;
    }
    #event-form input {
      background-color: #f0f0f0;
    }
    #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;
    }
    #news-feed li {
      background: linear-gradient(to bottom right, #ffffff, #dcdde1);
      padding: 15px;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      animation: fadeIn 0.5s;
      position: relative;
      overflow: hidden;
    }
    #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);
    }
    #news-feed li h3 {
      margin-top: 0;
    }
    /* Форум */
    #comments-section {
      margin-top: 20px;
    }
    #comments-list {
      list-style-type: none;
      padding: 0;
    }
    #comments-list li {
      background: linear-gradient(to right, #ffecd2, #fcb69f);
      margin-bottom: 10px;
      padding: 10px;
      border-radius: 5px;
      animation: fadeIn 0.5s;
      position: relative;
      overflow: hidden;
    }
    #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);
    }
    .reply {
      margin-left: 20px;
    }
    /* Трансляция */
    #live-stream {
      display: flex;
      justify-content: center;
      animation: fadeIn 0.5s;
    }
    /* Совместные задания */
    #task-list {
      list-style-type: none;
      padding: 0;
    }
    #task-list li {
      background: linear-gradient(to right, #e0eafc, #cfdef3);
      margin-bottom: 10px;
      padding: 10px;
      border-radius: 5px;
      display: flex;
      align-items: center;
      animation: fadeIn 0.5s;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    #task-list li.completed {
      text-decoration: line-through;
      opacity: 0.6;
    }
    /* Чат */
    #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);
    }
    #chat-window .message {
      margin-bottom: 10px;
      animation: fadeIn 0.5s;
      padding: 5px 10px;
      border-radius: 15px;
      max-width: 70%;
      position: relative;
    }
    #chat-window .message.user {
      background: #dff9fb;
      align-self: flex-end;
      text-align: right;
      margin-left: auto;
    }
    #chat-window .message.bot {
      background: #f1f2f6;
      align-self: flex-start;
      margin-right: auto;
    }
    /* Формы и кнопки */
    input[type="text"], input[type="password"], textarea {
      width: 100%;
      padding: 10px;
      margin-top: 10px;
      margin-bottom: 10px;
      box-sizing: border-box;
      border: none;
      border-radius: 4px;
      background-color: #f0f0f0;
    }
    button {
      padding: 10px 20px;
      background-color: #4CAF50;
      color: white;
      border: none;
      cursor: pointer;
      transition: background-color 0.3s, transform 0.3s;
      border-radius: 4px;
      align-self: flex-start;
    }
    button:hover {
      background-color: #45a049;
      transform: scale(1.05);
    }
    /* Модальные окна */
    .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.5);
      animation: fadeIn 0.5s;
    }
    .modal-content {
      background-color: #fefefe;
      margin: 10% auto;
      padding: 20px;
      border: none;
      border-radius: 10px;
      width: 80%;
      max-width: 400px;
      position: relative;
    }
    .close {
      color: #aaa;
      position: absolute;
      top: 10px;
      right: 20px;
      font-size: 28px;
      font-weight: bold;
      cursor: pointer;
    }
    .close:hover,
    .close:focus {
      color: black;
    }
    /* Профиль */
    #profile-section {
      display: flex;
      flex-direction: column;
      align-items: center;
      animation: fadeIn 0.5s;
    }
    #profile-section .avatar {
      width: 100px;
      height: 100px;
      background-color: #ccc;
      border-radius: 50%;
      margin-bottom: 20px;
      position: relative;
      overflow: hidden;
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }
    #profile-section .avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    #profile-section h2 {
      margin-bottom: 10px;
    }
    /* Адаптивный дизайн */
    @media (max-width: 600px) {
      nav {
        flex-wrap: wrap;
      }
      nav a {
        flex: 1 1 100%;
        text-align: center;
      }
      #live-stream iframe {
        width: 100%;
        height: auto;
      }
      .modal-content {
        width: 90%;
        margin-top: 30%;
      }
    }
  </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="" alt="Avatar" id="profile-avatar">
        </div>
        <h2 id="profile-username"></h2>
        <button onclick="logoutUser()">Выйти</button>
      </div>
    </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 width="560" height="315" src="https://www.youtube.com/embed/live_stream?channel=UCBR8-60-B28hp2BmDPdntcQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
      </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')" class="active"><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>
        \`;
      }
    }

    // Функция переключения вкладок
    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') {
        updateProfile();
      }
    }

    // Функции для регистрации и входа
    function registerUser(event) {
      event.preventDefault();
      const username = document.getElementById('reg-username').value;
      const password = document.getElementById('reg-password').value;
      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 };
          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;
      const password = document.getElementById('login-password').value;
      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'));
    }

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

    // Обновление данных профиля
    function updateProfile() {
      document.getElementById('profile-username').textContent = currentUser.username;
      // Можно добавить загрузку и отображение аватара
    }

    // Инициализация приложения
    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')) || [
      { name: "Концерт", coords: [55.751244, 37.618423] },
      { name: "Выставка", coords: [55.752023, 37.617499] },
      { name: "Марафон", coords: [55.755814, 37.617635] }
    ];
    events.forEach(function(event) {
      addMarker(event);
    });
    function addMarker(event) {
      L.marker(event.coords)
        .addTo(map)
        .bindPopup(event.name);
    }
    function addEvent() {
      var name = document.getElementById('event-name').value;
      var lat = parseFloat(document.getElementById('event-lat').value);
      var lng = parseFloat(document.getElementById('event-lng').value);
      if (name && !isNaN(lat) && !isNaN(lng)) {
        var event = { name: name, coords: [lat, lng] };
        addMarker(event);
        map.setView([lat, lng], 12);
        document.getElementById('event-form').reset();
        events.push(event);
        localStorage.setItem('events', JSON.stringify(events));
      } else {
        alert('Пожалуйста, введите корректные данные.');
      }
    }
    // ================== Новости ==================
    function fetchNews() {
      // Имитируем получение новостей через Fetch 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) {
      var commentText = parentId ? document.getElementById('reply-input-' + parentId).value : document.getElementById('comment-input').value;
      if (commentText) {
        var comment = { id: Date.now(), text: commentText, replies: [], parentId: parentId || null, username: currentUser.username };
        comments.push(comment);
        if (parentId) {
          document.getElementById('reply-input-' + parentId).value = '';
        } else {
          document.getElementById('comment-input').value = '';
        }
        saveComments();
        renderComments();
      }
    }
    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');
      listItem.innerHTML = '<p><strong>' + comment.username + ':</strong> ' + comment.text + '</p>';
      var replyBtn = document.createElement('button');
      replyBtn.textContent = 'Ответить';
      replyBtn.onclick = function() {
        var replyInput = document.getElementById('reply-input-' + comment.id);
        if (replyInput.style.display === 'none' || !replyInput.style.display) {
          replyInput.style.display = 'block';
        } else {
          replyInput.style.display = 'none';
        }
      };
      listItem.appendChild(replyBtn);
      var replyInput = document.createElement('textarea');
      replyInput.id = 'reply-input-' + comment.id;
      replyInput.style.display = 'none';
      replyInput.placeholder = 'Ваш ответ...';
      listItem.appendChild(replyInput);
      var replySubmit = document.createElement('button');
      replySubmit.textContent = 'Отправить';
      replySubmit.onclick = function() {
        addComment(comment.id);
      };
      replyInput.insertAdjacentElement('afterend', 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 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;
      if (taskText) {
        tasks.push({ text: taskText, completed: false });
        taskInput.value = '';
        saveTasks();
        renderTasks();
      }
    }
    function toggleTask(index) {
      tasks[index].completed = !tasks[index].completed;
      saveTasks();
      renderTasks();
    }
    function renderTasks() {
      var taskList = document.getElementById('task-list');
      taskList.innerHTML = '';
      tasks.forEach(function(task, index) {
        var listItem = document.createElement('li');
        listItem.className = task.completed ? 'completed' : '';
        listItem.innerHTML = '<input type="checkbox" ' + (task.completed ? 'checked' : '') +
                             ' onclick="toggleTask(' + index + ')"> ' + task.text;
        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;
      if (message) {
        messages.push({ text: message, sender: 'user', username: currentUser.username });
        chatInput.value = '';
        saveMessages();
        renderMessages();
        // Имитируем ответ от бота
        setTimeout(function() {
          messages.push({ text: 'Спасибо за сообщение!', sender: 'bot', username: 'Bot' });
          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.textContent = msg.username + ': ' + msg.text;
        chatWindow.appendChild(messageDiv);
      });
      chatWindow.scrollTop = chatWindow.scrollHeight;
    }
    function saveMessages() {
      localStorage.setItem('messages', JSON.stringify(messages));
    }
    renderMessages();
  </script>
</body>
</html>