улучши дизайн всего и анимации <!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>iOS Стиль Википедии</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Raleway:wght@400;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha384-k6RqeWeci5ZR/Lv4MR0sA0FfDOM4l7n6n8D7G7xY4b5y5G5zC5g5E6z5Wl4n6c" crossorigin="anonymous">
    <style>
        body {
            font-family: 'Inter', 'Raleway', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f7f9fc; /* Светлый фон */
            display: flex; /* Flexbox для расположения бокового меню */
            flex-direction: column; /* Вертикальное расположение */
        }

        header {
            background-color: #007aff; /* Основной цвет */
            padding: 20px;
            text-align: center;
            border-radius: 12px 12px 0 0; /* Круглые углы сверху */
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Легкая тень */
        }

        .header-title {
            font-size: 28px;
            color: white;
        }

        .navbar {
            display: flex;
            justify-content: center;
            background-color: #e7e7e7;
            padding: 10px;
            border-radius: 12px;
            margin-bottom: 20px;
        }

        .nav-item {
            margin: 0 15px;
            cursor: pointer;
            text-decoration: none;
            color: #333;
        }

        .nav-item:hover {
            text-decoration: underline; /* Подчеркивание при наведении */
        }

        .container {
            display: flex;
            max-width: 1200px;
            margin: 20px auto;
            padding: 10px;
        }

        .content {
            flex: 1; /* Контент занимает всю ширину */
            background-color: white;
            padding: 20px;
            border-radius: 12px; /* Круглые углы */
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Легкая тень */
        }

        h1 {
            font-size: 24px; /* Уменьшение размера заголовка для лучшего восприятия */
        }

        p {
            font-size: 16px;
            color: #333; /* Более темный цвет текста для лучшей читаемости */
            line-height: 1.6; /* Увеличение межстрочного интервала для удобства чтения */
        }

        .highlight { 
           background-color: #e7f3ff; /* Светло-голубой фон для выделения */
           padding: 5px; 
           border-radius: 8px; 
           display: inline-block; 
         }

        .search-section {
            margin-bottom: 20px;
        }

        .search-section input {
            padding: 12px;
            width: calc(80% - 22px); 
            font-size: 16px;
            margin-right: 10px; 
            border-radius: 12px; 
            border: none; 
        }

        .search-section button {
            padding: 12px;
            font-size: 16px;
            background-color: #007aff; 
            color: white;
            border-radius: 12px; 
            cursor: pointer;
        }

        .search-section button:hover {
           background-color :#005bb5 ; /* Темнее при наведении */ 
         }

         button {
           transition: background-color .3s ease; /* Плавный переход цвета фона */
         }
         
         footer { 
              background-color :white ; 
              text-align :center ; 
              padding :20 px ; 
              font-size :14 px ; 
              color :#808080 ; 
          }
          
          .toggle-content {
              display:none; /* Скрываем контент по умолчанию */
              margin-top:10px; /* Отступ сверху для контента */
              padding-left:15px; /* Отступ слева для вложенного контента */
          }
          
          .info-block {
              background-color: #f9f9f9; /* Светло-серый фон для блока информации */
              border-radius: 12px; /* Круглые углы блока информации */
              padding: 15px; /* Отступы внутри блока информации */
              margin-top: 10px; /* Отступ сверху между блоками информации */
              box-shadow: inset rgba(0,0,0,0.1) -1px -1px, inset rgba(255,255,255,0.5) -1px -1px; /* Внутренняя тень для блока информации */
          }
          
          table { 
              width :100%; 
              border-collapse :collapse ; 
              margin-bottom :20 px ; 
              border-radius :12 px ; 
              overflow :hidden ; 
              font-size :14 px ; /* Уменьшение размера шрифта в таблицах */
          }
          
          table, th, td { 
              border :1 px solid #ddd ; 
          }
          
          th, td { 
              padding :8 px ; /* Уменьшение отступов в ячейках таблицы */
              text-align :left ; 
          }
          
          th { 
              background-color :#f4f4f4 ; 
              font-family :'Inter', sans-serif ; 
          }

          .loading {
              display:flex ;
              justify-content:center ;
              align-items:center ;
              height :100 % ;
          }

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

          .result-item {
              animation-name: fadeIn;
              animation-duration: 0.5s;
              animation-fill-mode: forwards;
          }

          .image-container {
              display:flex ;
              flex-wrap :wrap ;
              gap :10 px ; /* Отступы между изображениями */
          }

          .image-container img {
              border-radius :12 px ; /* Круглые углы у изображений */
              cursor:pointer ; /* Указатель курсора при наведении на изображения */
              transition:.3 s ; /* Плавный переход для эффекта наведения */
          }

          .image-container img:hover {
             transform :scale(1.05); /* Увеличение изображения при наведении */
             box-shadow :rgba(0 ,123 ,255 ,0.5) -2 px -2 px , rgba(255 ,255 ,255 ,0.9) -2 px -2 px inset ; /* Тень при наведении */
         }

         .modal {
             display:none ;
             position:absolute ;
             top :50 % ;
             left :50 % ;
             transform :translate(-50 % ,-50 %) ;
             background-color:white ;
             border-radius :12 px ;
             box-shadow :rgba(0 ,0 ,0 ,0.2) -4 px -4 px , rgba(255 ,255 ,255 ,1) -4 px -4 px inset ;
             z-index :1000 ;
             width :80 % ;
             max-width :600 px ;
         }

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

         .modal-close {
             position:absolute ;
             top :10 px ;
             right :10 px ;
             cursor:pointer ;
             font-size :24 px ;
         }
    </style>
</head>
<body>

<header>
    <div class="header-title">РУВИКИ</div>
</header>

<!-- Навигационная панель -->
<div class="navbar">
    <a class="nav-item" href="#">Главная</a>
    <a class="nav-item" href="#">Избранное</a>
    <a class="nav-item" href="#">Настройки</a>
</div>

<div class="container">
     <div class="content">
         <h1>Поиск информации</h1>
         
         <div class="search-section">
             <input type="text" id="searchTerm" placeholder="Введите запрос для поиска">
             <button onclick="searchWiki()">Поиск</button>
             <button onclick="refreshResults()" style="margin-left:auto;">Обновить</button> <!-- Кнопка обновления -->
         </div>

         <!-- Контент результатов -->
         <div id="result" class="article-info"></div>

      </div>
</div>

<!-- Модальное окно -->
<div id="modal" class="modal">
    <span class="modal-close" onclick="closeModal()">&times;</span>
    <img id="modalImage" src="" alt="">
</div>

<footer>
    ©2024 Рувики. Все права защищены.
</footer>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Переменные для хранения предыдущего поиска
let previousSearch = '';

// Функция поиска в Википедии
function searchWiki() {
    const searchTerm = document.getElementById('searchTerm').value.trim();
    if (!searchTerm) return alert('Пожалуйста, введите запрос для поиска.');

    previousSearch = searchTerm; // Сохраняем предыдущий запрос
    const apiUrl = `https://ru.wikipedia.org/w/api.php?action=query&list=search&srsearch=${encodeURIComponent(searchTerm)}&utf8=&format=json&origin=*`;

    document.getElementById('result').innerHTML = '<div class="loading">Загрузка...</div>'; // Индикатор загрузки

    fetch(apiUrl)
      .then(response => {
          if (!response.ok) { throw new Error('Network response was not ok'); }
          return response.json();
      })
      .then(data => { 
          const resultDiv = document.getElementById('result'); 
          resultDiv.innerHTML = '';

          if (data.error) { 
              resultDiv.innerHTML = '<p>Ошибка в запросе API:' + data.error.info + '</p>'; 
          } else if (data.query.search.length === 0) { 
              resultDiv.innerHTML = '<p>Ничего не найдено.</p>'; 
          } else { 
              const pageTitle = data.query.search[0].title; 
              getWikiPage(pageTitle); // Получаем страницу по заголовку
          } 
      })
      .catch(error => { 
          console.error('Ошибка при запросе:', error); 
          document.getElementById('result').innerHTML = '<p>Ошибка при запросе:' + error.message + '</p>'; 
      });
}

// Функция обновления результатов
function refreshResults() {
    searchWiki(); // Повторяем последний поиск
}

// Функция получения страницы из Википедии
function getWikiPage(pageTitle) { 
    const pageUrl = `https://ru.wikipedia.org/w/api.php?action=parse&page=${encodeURIComponent(pageTitle)}&format=json&origin=*`;

    fetch(pageUrl)
      .then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); })
      .then(data => { const resultDiv = document.getElementById('result'); resultDiv.innerHTML = '';

          if (data.error) { resultDiv.innerHTML = '<p>Ошибка при получении данных страницы:' + data.error.info + '</p>'; } else if (data.parse) { let pageContent = data.parse.text['*']; 

               // Заменяем теги <b>, <strong>, и ссылки на нежно-голубой фон
               pageContent = pageContent.replace(/<b>(.*?)<\/b>/g, '<span class="highlight">$1</span>');
               pageContent = pageContent.replace(/<strong>(.*?)<\/strong>/g, '<span class="highlight">$1</span>');
               pageContent = pageContent.replace(/<a href=["'](.*?)["']>(.*?)<\/a>/g, '<span class="highlight"><a href="$1" style="color:#007aff;text-decoration:none;">$2</a></span>');
               
               // Извлекаем изображения (если есть)
               const images = data.parse.images || [];
               const imageElements = images.map(image => `<img src="//commons.wikimedia.org/wiki/Special:%20FilePath/${encodeURIComponent(image)}?width=200" alt="${image}" onclick="openModal(this.src)" style="border-radius:12px;margin-right:.5rem;" />`).join('');

               const container = document.createElement('div'); 

               // Вставляем контент страницы
               container.innerHTML = `<div class='info-block'>${imageElements}<br>${pageContent}</div>`;

               // Вставляем содержимое в результат
               resultDiv.appendChild(container);

               // Добавляем класс для анимации появления
               const items = resultDiv.querySelectorAll('.highlight, a');
               items.forEach(item => item.classList.add('result-item'));

               // Добавляем кнопку для копирования
               addCopyButton(resultDiv);
               
               // Добавляем кнопку "Назад"
               addBackButton(resultDiv);
               
               // Обновляем содержание бокового меню
               updateTOC(container);
          }
      })
      .catch(error => { console.error('Ошибка при запросе страницы:', error); document.getElementById('result').innerHTML = '<p>Ошибка при запросе страницы:' + error.message + '</p>'; });
}

// Функция добавления кнопки копирования
function addCopyButton(resultDiv) {
    const copyButton = document.createElement('button');
    copyButton.innerText = 'Скопировать статью';
    copyButton.style.marginTop = '20px';
    copyButton.style.padding = '10px';
    copyButton.style.borderRadius = '12px'; // Круглые углы
    copyButton.style.backgroundColor = '#007aff'; // Однотонный цвет
    copyButton.style.color = 'white';
    copyButton.style.border = 'none';
    copyButton.style.cursor = 'pointer';

    copyButton.onclick = () => {
        const articleContent = resultDiv.innerText; // Получаем текст статьи
        navigator.clipboard.writeText(articleContent).then(() => {
           alert('Статья скопирована в буфер обмена!'); // Уведомление об успешном копировании
       }).catch(err => {
           console.error('Ошибка при копировании:', err);
       });
   };

   resultDiv.appendChild(copyButton);
}

// Функция добавления кнопки "Назад"
function addBackButton(resultDiv) {
    const backButton = document.createElement('button');
    backButton.innerText = 'Назад к результатам';
    backButton.style.marginTop = '10px';
    backButton.style.padding = '10px';
    backButton.style.borderRadius = '12px'; // Круглые углы
    backButton.style.backgroundColor = '#007aff'; // Однотонный цвет
    backButton.style.color = 'white';
    backButton.style.border = 'none';
    backButton.style.cursor = 'pointer';

    backButton.onclick = () => {
       document.getElementById('searchTerm').value = previousSearch; // Восстанавливаем предыдущий запрос
       searchWiki(); // Повторяем поиск
   };

   resultDiv.appendChild(backButton);
}

// Функция обновления содержания бокового меню
function updateTOC(container) {
   const tocList = document.getElementById('toc');
   tocList.innerHTML = ''; // Очищаем текущее содержание

   const headings = container.querySelectorAll('h2'); // Находим все заголовки h2

   headings.forEach((heading, index) => {
       const listItem = document.createElement('li');
       listItem.innerHTML = `<a href="#${index}">${heading.innerText}</a>`;
       
       heading.id = index; // Присваиваем уникальный ID каждому заголовку

       tocList.appendChild(listItem);
   });
}

// Функция переключения видимости контента
function toggleContent(id) {
   const contentDiv = document.getElementById(id);
   contentDiv.classList.toggle("collapsed");
   contentDiv.classList.toggle("expanded");
}

// Функция открытия модального окна с изображением
function openModal(src) {
   const modalImage = document.getElementById("modalImage");
   modalImage.src = src;

   const modal = document.getElementById("modal");
   modal.style.display = "block"; // Показываем модальное окно
}

// Функция закрытия модального окна
function closeModal() {
   const modal = document.getElementById("modal");
   modal.style.display = "none"; // Скрываем модальное окно
}

// Функция для отображения выбранной вкладки
function showTab(tabId) {
   const tabsContent = document.querySelectorAll('.tab-content');
   tabsContent.forEach(tab => tab.classList.remove('active')); // Скрываем все вкладки

   const activeTabContent = document.getElementById(tabId);
   activeTabContent.classList.add('active'); // Показываем выбранную вкладку

   // Обновляем стиль кнопок вкладок
   const tabButtons = document.querySelectorAll('.tab-button');
   tabButtons.forEach(button => button.classList.remove('active-tab'));
   
   document.querySelector(`.tab-button[onclick*="${tabId}"]`).classList.add('active-tab'); // Активируем текущую кнопку
}
</script>

</body>
</html>