уулчши дизайн <!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Биолюмос Ультра</title>
  <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
  <style>
    /* Общие стили */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: 'Open Sans', sans-serif;
      background: linear-gradient(135deg, #f0f4f8, #d9e2ec);
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      animation: fadeIn 1s ease-in-out;
    }

    .container {
      width: 95%;
      max-width: 1000px;
      background-color: #ffffff;
      border-radius: 16px;
      box-shadow: 0 16px 24px rgba(0, 0, 0, 0.1);
      padding: 40px;
      animation: slideIn 0.8s ease-out;
    }

    h1 {
      text-align: center;
      margin-bottom: 40px;
      font-size: 2.5rem;
      color: #2d8cf0;
      font-family: 'Rubik', sans-serif;
      transition: color 0.3s;
    }

    h1:hover {
      color: #1366d6;
    }

    .block {
      display: flex;
      flex-wrap: wrap;
      gap: 30px;
      margin-bottom: 30px;
    }

    .inner-block {
      flex: 1 1 45%;
      background: linear-gradient(145deg, #e3f2fd, #bbdefb);
      padding: 25px;
      border-radius: 12px;
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.05);
      transition: transform 0.3s, box-shadow 0.3s;
      position: relative;
    }

    .inner-block:hover {
      transform: translateY(-5px);
      box-shadow: 0 16px 32px rgba(0, 0, 0, 0.15);
    }

    .inner-block h2 {
      margin-bottom: 20px;
      color: #1565c0;
      font-size: 1.5rem;
      font-family: 'Rubik', sans-serif;
    }

    table {
      width: 100%;
      border-collapse: collapse;
    }

    th,
    td {
      padding: 12px 15px;
      text-align: left;
      border-bottom: 1px solid #e0e0e0;
    }

    th {
      background-color: #90caf9;
      color: #0d47a1;
      font-weight: 600;
    }

    tr:nth-child(even) td {
      background-color: #e3f2fd;
    }

    input[type="checkbox"] {
      transform: scale(1.3);
      cursor: pointer;
      accent-color: #1565c0;
    }

    input[type="number"],
    select {
      width: 100%;
      padding: 10px 14px;
      margin-top: 8px;
      border: 1px solid #90caf9;
      border-radius: 8px;
      transition: border-color 0.3s, box-shadow 0.3s;
      font-size: 1rem;
      font-family: 'Open Sans', sans-serif;
    }

    input[type="number"]:focus,
    select:focus {
      border-color: #42a5f5;
      outline: none;
      box-shadow: 0 0 8px rgba(66, 165, 245, 0.5);
    }

    .save-button {
      display: inline-block;
      padding: 14px 40px;
      background-color: #2d8cf0;
      color: #ffffff;
      border: none;
      border-radius: 30px;
      font-size: 1.1rem;
      cursor: pointer;
      text-align: center;
      transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
      margin: 30px auto 0;
      display: block;
      font-family: 'Rubik', sans-serif;
      position: relative;
      overflow: hidden;
    }

    .save-button::after {
      content: '';
      position: absolute;
      left: -50%;
      top: 0;
      width: 200%;
      height: 100%;
      background: rgba(255, 255, 255, 0.2);
      transform: translateX(-100%);
      transition: transform 0.5s;
    }

    .save-button:hover::after {
      transform: translateX(0);
    }

    .save-button:hover {
      background-color: #1366d6;
      transform: translateY(-4px);
      box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
    }

    /* Модальное окно */
    .modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.6);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      animation: fadeIn 0.5s ease-in-out;
    }

    .modal.active {
      display: flex;
    }

    .modal-content {
      background-color: #ffffff;
      padding: 35px 40px;
      border-radius: 16px;
      text-align: center;
      box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
      max-width: 450px;
      width: 90%;
      animation: scaleUp 0.5s ease-out;
      position: relative;
    }

    .modal-content h2 {
      margin-bottom: 25px;
      color: #2d8cf0;
      font-size: 1.8rem;
      font-family: 'Rubik', sans-serif;
    }

    .close-modal {
      padding: 12px 30px;
      background-color: #2d8cf0;
      color: #ffffff;
      border: none;
      border-radius: 25px;
      cursor: pointer;
      transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
      font-size: 1rem;
      font-family: 'Rubik', sans-serif;
      margin-top: 20px;
    }

    .close-modal:hover {
      background-color: #1366d6;
      transform: translateY(-2px);
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    }

    /* Анимации */
    @keyframes fadeIn {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

    @keyframes slideIn {
      from {
        transform: translateY(-30px);
        opacity: 0;
      }

      to {
        transform: translateY(0);
        opacity: 1;
      }
    }

    @keyframes scaleUp {
      from {
        transform: scale(0.8);
        opacity: 0;
      }

      to {
        transform: scale(1);
        opacity: 1;
      }
    }

    /* Дополнительные стили */
    .info-text {
      font-size: 1rem;
      color: #555555;
      line-height: 1.5;
      margin-top: 10px;
    }

    /* Адаптивность */
    @media (max-width: 768px) {
      .inner-block {
        flex: 1 1 100%;
      }

      .save-button {
        padding: 14px 35px;
      }

      .modal-content {
        padding: 30px 25px;
      }
    }
  </style>
</head>

<body>
  <div class="container">
    <h1>Биолюмос Ультра</h1>
    <div class="block">
      <div class="inner-block">
        <h2>Состояние</h2>
        <p id="set" style="font-size:1.5rem; color:#1565c0;">0</p>
      </div>
      <div class="inner-block">
        <h2>Информация</h2>
        <p class="info-text">Здесь можно разместить дополнительную информацию или подсказки для пользователей.</p>
      </div>
    </div>
    <div class="block">
      <div class="inner-block" id="1">
        <h2>1-й канал</h2>
        <table>
          <tr>
            <th>Включить</th>
            <td>
              <input type="checkbox" name="on">
            </td>
          </tr>
          <tr>
            <th>Частота (Гц)</th>
            <td>
              <input type="number" name="frequency" list="frequencyVer" value="10" />
              <datalist id="frequencyVer">
                <option value="10">10</option>
                <option value="100">100</option>
                <option value="150">150</option>
              </datalist>
            </td>
          </tr>
          <tr>
            <th>Мощность</th>
            <td>
              <select name="power">
                <option>10</option>
                <option>20</option>
                <option>30</option>
                <option>40</option>
                <option>50</option>
                <option>60</option>
                <option>70</option>
                <option>80</option>
                <option>90</option>
                <option>100</option>
              </select>
            </td>
          </tr>
        </table>
      </div>
      <div class="inner-block">
        <h2>2-й канал</h2>
        <p class="info-text">Настройки второго канала. Здесь можно управлять различными параметрами для второго канала.</p>
      </div>
    </div>
    <div class="block">
      <div class="inner-block">
        <h2>3-й канал</h2>
        <p class="info-text">Настройки третьего канала. Установите необходимые параметры для оптимальной работы.</p>
      </div>
      <div class="inner-block">
        <h2>4-й канал</h2>
        <p class="info-text">Настройки четвертого канала. Управляйте мощностью и частотой для достижения лучших результатов.</p>
      </div>
    </div>
    <button class="save-button" onclick="sendGetRequest()">Сохранить</button>
  </div>

  <!-- Модальное окно -->
  <div class="modal" id="modal">
    <div class="modal-content">
      <h2>Данные сохранены!</h2>
      <button class="close-modal" onclick="closeModal()">Закрыть</button>
    </div>
  </div>

  <script>
    function sendGetRequest() {
      const formElements = document.querySelectorAll('input, select, textarea');
      const inputs = Array.from(formElements);
      let out = "core?";
      inputs.forEach((element, index) => {
        const parentDiv = element.closest('.inner-block');
        if (parentDiv && parentDiv.id) {
          out += parentDiv.id + "_";
        }
        out += element.name;
        if (element.type === "checkbox") {
          out += "=" + (element.checked ? "1" : "0");
        } else {
          out += "=" + (element.value.trim() !== "" ? element.value : "0");
        }
        if (index < inputs.length - 1) out += "&";
      });

      console.log(out);

      // Показать модальное окно
      showModal();
    }

    // Обновление данных на странице
    let a = 0;
    function upDate() {
      setTimeout(upDate, 1000);
      a += 1;
      const element = document.getElementById('set');
      element.textContent = a;
    }
    setTimeout(upDate, 1000);

    // Функции для модального окна
    function showModal() {
      const modal = document.getElementById('modal');
      modal.classList.add('active');
    }

    function closeModal() {
      const modal = document.getElementById('modal');
      modal.classList.remove('active');
    }

    // Закрытие модального окна при клике вне его
    window.onclick = function(event) {
      const modal = document.getElementById('modal');
      if (event.target == modal) {
        modal.classList.remove('active');
      }
    }
  </script>
</body>

</html>