Вывод виджетов с помощью свайп

<style>
    /* Общие стили для затемняющего фона */
    .adaptive-modal {
      display: none;
      position: fixed;
      z-index: 2000;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.4);
    }
 
    /* Стили для мобильных устройств (по умолчанию) */
    .adaptive-modal-container {
      position: fixed;
      left: 0;
      bottom: -100%;
      width: 100%;
      max-height: 95vh;       /* Максимальная высота 90% экрана */
      background-color: #fff;
      display: flex;
      flex-direction: column;
      box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      transition: bottom 0.2s ease, transform 0.05s ease;
      will-change: transform;
    }
    /* При открытии на мобильных: окно поднимается вверх */
    .adaptive-modal.show .adaptive-modal-container {
      bottom: 0;
    }
 
    /* Шапка окна: фиксированная, без прокрутки */
    .adaptive-modal-titlebar {
      position: relative;
      padding: 20px;
      padding-top: 40px; /* Отступ для полоски */
      flex-shrink: 0;
      cursor: grab;
    }
 
    /* Прокручиваемая область с содержимым */
    .adaptive-modal-body {
      padding: 0 20px 20px;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      flex: 1;
    }
 
    /* Кнопка закрытия (отображается в шапке) */
    .adaptive-modal-close {
      position: absolute;
      top: 20px;
      right: 20px;
      cursor: pointer;
      font-size: 24px;
    }
 
    /* Полоска для приглашения к свайпу (видна только на мобильных) */
    .adaptive-swipe-indicator {
      position: absolute;
      top: 10px;
      left: 50%;
      transform: translateX(-50%);
      width: 50px;
      height: 5px;
      background-color: #ccc;
      border-radius: 3px;
    }
 
    /* Стили для десктопных устройств */
    @media (min-width: 768px) {
      .adaptive-modal {
        justify-content: center;
        align-items: center;
      }
      .adaptive-modal-container {
        position: relative;
        max-height: none;
        max-width: 500px;
        width: 100%;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        bottom: auto;
        transform: none;
        transition: opacity 0.2s ease;
        opacity: 0;
        flex-direction: column;
      }
      .adaptive-modal.show .adaptive-modal-container {
        opacity: 1;
      }
      .adaptive-swipe-indicator {
        display: none;
      }
      .adaptive-modal-titlebar {
        padding-top: 20px;
        cursor: default;
      }
    }
</style>
 
  <!-- Пример кнопки для открытия окна (если требуется) -->
  <!--<button id="openAdaptiveModal">Открыть окно</button>-->
 
  <div id="adaptiveModal" class="adaptive-modal">
    <div class="adaptive-modal-container" id="adaptiveModalContainer">
      <div class="adaptive-modal-titlebar" id="adaptiveModalTitlebar">
        <div class="adaptive-swipe-indicator"></div>
        <span class="adaptive-modal-close"></span>
      </div>
      <div class="adaptive-modal-body" id="adaptiveModalBody">
        {body}
      </div>
    </div>
  </div>
 
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      const openModalButton = document.getElementById("openAdaptiveModal");
      const modal = document.getElementById("adaptiveModal");
      const modalContainer = document.getElementById("adaptiveModalContainer");
      const modalBody = document.getElementById("adaptiveModalBody");
      const titlebar = document.getElementById("adaptiveModalTitlebar");
      const closeButton = document.querySelector(".adaptive-modal .adaptive-modal-close");
 
      let startY = 0,
          translateY = 0,
          threshold = 200; // Порог для закрытия окна при свайпе по контейнеру
 
      // Переменные для свайпа по шапке
      let headerStartY = 0,
          headerTranslateY = 0,
          headerThreshold = 150; // Порог для свайпа по шапке (более чувствительный)
 
      /* Функция открытия модального окна */
      function openModal() {
        if (window.innerWidth >= 768) {
          modal.style.display = "flex";
        } else {
          modal.style.display = "block";
        }
        document.body.style.overflow = "hidden";
        setTimeout(() => {
          modal.classList.add("show");
        }, 10);
      }
 
      /* Функция закрытия модального окна */
      function closeModal() {
        modal.classList.remove("show");
        document.body.style.overflow = "";
        modalContainer.style.transform = "";
        setTimeout(() => {
          modal.style.display = "none";
        }, 200);
      }
 
      /* Сброс положения контейнера при свайпе по контейнеру */
      function resetModalContent() {
        modalContainer.style.transition = "transform 0.05s ease";
        modalContainer.style.transform = "translateY(0)";
        setTimeout(() => {
          modalContainer.style.transition = "transform 0.05s ease";
        }, 50);
      }
 
      /* Сброс положения контейнера при свайпе за шапку - минимальные задержки */
      function resetHeaderSwipe() {
        modalContainer.style.transition = "transform 0.05s ease";
        modalContainer.style.transform = "translateY(0)";
        setTimeout(() => {
          modalContainer.style.transition = "transform 0.05s ease";
        }, 50);
      }
 
      /* Обработчики для шапки (titlebar) для свайпа независимо от содержимого */
      titlebar.addEventListener("touchstart", function(e) {
        titlebar.style.transition = "none";
        headerStartY = e.touches[0].clientY;
        e.stopPropagation();
      });
 
      titlebar.addEventListener("touchmove", function(e) {
        const currentY = e.touches[0].clientY;
        headerTranslateY = currentY - headerStartY;
        if (headerTranslateY > 0) {
          modalContainer.style.transform = "translateY(" + headerTranslateY + "px)";
        }
        e.stopPropagation();
      });
 
      titlebar.addEventListener("touchend", function(e) {
        if (headerTranslateY > headerThreshold) {
          closeModal();
        } else {
          resetHeaderSwipe();
        }
        headerStartY = 0;
        headerTranslateY = 0;
        e.stopPropagation();
      });
 
      /* Обработчики для области контейнера, если касание происходит вне шапки */
      modalContainer.addEventListener("touchstart", function(e) {
        if (e.target.closest('.adaptive-modal-titlebar')) return;
        if (modalBody.scrollTop > 0) {
          startY = null;
          return;
        }
        modalContainer.style.transition = "none";
        startY = e.touches[0].clientY;
      });
 
      modalContainer.addEventListener("touchmove", function(e) {
        if (startY === null) return;
        const currentY = e.touches[0].clientY;
        translateY = currentY - startY;
        if (translateY > 0) {
          modalContainer.style.transform = "translateY(" + translateY + "px)";
        }
      });
 
      modalContainer.addEventListener("touchend", function() {
        if (startY === null) return;
        if (translateY > threshold) {
          closeModal();
        } else {
          resetModalContent();
        }
        startY = 0;
        translateY = 0;
      });
 
      if (openModalButton) {
        openModalButton.addEventListener("click", openModal);
      }
 
      closeButton.addEventListener("click", closeModal);
 
      window.addEventListener("click", function(event) {
        if (event.target === modal) {
          closeModal();
        }
      });
 
      // Если окно должно открываться автоматически, можно вызвать openModal() здесь
      // openModal();
    });
  </script>