Update online.html

online.html

@@ -34,36 +34,82 @@
 <style>
   /* Стили для блока с картинкой растения */
   .plant-image-container {
-    text-align: center; /* Центрируем содержимое */
-    margin: 20px auto; /* Отступы сверху/снизу и автоматические по бокам для центрирования */
-    max-width: 80%; /* Максимальная ширина блока */
+    text-align: center;
+    margin: 20px auto;
+    max-width: 80%;
     padding: 15px;
-    background-color: #f8f9fa; /* Светло-серый фон */
-    border-radius: 15px; /* Закругленные углы */
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Тень для "поднятия" блока */
+    background-color: #f8f9fa;
+    border-radius: 15px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    cursor: pointer; /* Добавляем курсор-указатель */
   }
 
-  /* Стили для самой картинки */
+  /* Стили для обычного размера картинки */
   #plantImage {
-    max-width: 80%; /* Уменьшаем размер картинки */
+    max-width: 60%;
     height: auto;
-    border: 3px solid #dee2e6; /* Серая рамка */
-    border-radius: 10px; /* Закругленные углы у картинки */
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Легкая тень */
-    display: block; /* Чтобы margin: auto работал */
-    margin: 0 auto 15px; /* Центрирование и отступ снизу */
+    border: 3px solid #dee2e6;
+    border-radius: 10px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+    display: block;
+    margin: 0 auto 15px;
+    transition: transform 0.3s ease; /* Анимация при наведении */
+  }
+
+  /* Увеличение при наведении */
+  #plantImage:hover {
+    transform: scale(1.03);
+  }
+
+  /* Стили для полноэкранного режима */
+  #plantImage.fullscreen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    max-width: 100%;
+    max-height: 100%;
+    width: auto;
+    height: auto;
+    margin: auto;
+    z-index: 1000;
+    background-color: rgba(0, 0, 0, 0.9);
+    border: none;
+    border-radius: 0;
+    cursor: grab;
+    object-fit: contain;
+    padding: 20px;
+    box-sizing: border-box;
+  }
+
+  /* Кнопка закрытия */
+  .close-fullscreen {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    color: white;
+    font-size: 30px;
+    z-index: 1001;
+    cursor: pointer;
+    display: none;
+    background: rgba(0, 0, 0, 0.5);
+    width: 40px;
+    height: 40px;
+    text-align: center;
+    line-height: 40px;
+    border-radius: 50%;
   }
 
   /* Заголовок над картинкой */
   .plant-image-container h1 {
     margin-bottom: 15px;
-    color: #343a40; /* Темно-серый цвет текста */
+    color: #343a40;
     font-size: 2.5rem;
   }
 </style>
 
 
-
       
 
       
@@ -298,9 +344,11 @@ document.addEventListener("DOMContentLoaded", function () {
   <br>
   
 
+<!-- HTML-блок с картинкой -->
 <div class="plant-image-container">
   <h1>Текущее состояние растения</h1>
   <img id="plantImage" src="/last_image" alt="Изображение растения">
+  <div class="close-fullscreen" id="closeFullscreen">×</div>
 </div>
 
    <br> 
@@ -1012,31 +1060,71 @@ function updateAlW(value) {
     setInterval(fetchValues, 10000);
   };
 </script>
-    <script>
-        function updateImage() {
-            // Добавляем timestamp для предотвращения кеширования
-            const timestamp = new Date().getTime();
-            const imgElement = document.getElementById("plantImage");
-            
-            // Показываем индикатор загрузки
-            imgElement.style.opacity = "0.9";
-            
-            // Обновляем источник изображения
-            imgElement.src = "/last_image?t=" + timestamp;
-            
-            // Возвращаем нормальную прозрачность после загрузки
-            imgElement.onload = function() {
-                imgElement.style.opacity = "1";
-            }
-        }
-        // Первичная загрузка при открытии страницы
-        document.addEventListener('DOMContentLoaded', function() {
-            updateImage();
-            
-            // Автоматическое обновление каждые 10 секунд
-            setInterval(updateImage, 10000);
-        });
-    </script>
+<script>
+  // Обработчик клика по картинке
+  document.getElementById('plantImage').addEventListener('click', function() {
+    this.classList.toggle('fullscreen');
+    document.getElementById('closeFullscreen').style.display = 
+      this.classList.contains('fullscreen') ? 'block' : 'none';
+    
+    // Блокируем скролл страницы при открытом изображении
+    document.body.style.overflow = 
+      this.classList.contains('fullscreen') ? 'hidden' : '';
+  });
+
+  // Обработчик закрытия по кнопке
+  document.getElementById('closeFullscreen').addEventListener('click', function() {
+    const img = document.getElementById('plantImage');
+    img.classList.remove('fullscreen');
+    this.style.display = 'none';
+    document.body.style.overflow = '';
+  });
+
+  // Функция для перетаскивания изображения
+  let isDragging = false;
+  let startY, startScrollTop;
+
+  document.getElementById('plantImage').addEventListener('mousedown', function(e) {
+    if (!this.classList.contains('fullscreen')) return;
+    
+    isDragging = true;
+    startY = e.clientY;
+    startScrollTop = window.scrollY;
+    this.style.cursor = 'grabbing';
+    e.preventDefault(); // Предотвращаем выделение текста
+  });
+
+  document.addEventListener('mousemove', function(e) {
+    const img = document.getElementById('plantImage');
+    if (!isDragging || !img.classList.contains('fullscreen')) return;
+    
+    window.scrollTo(0, startScrollTop - (e.clientY - startY));
+  });
+
+  document.addEventListener('mouseup', function() {
+    isDragging = false;
+    const img = document.getElementById('plantImage');
+    if (img.classList.contains('fullscreen')) {
+      img.style.cursor = 'grab';
+    }
+  });
+
+  // Обновление изображения (ваш существующий код)
+  function updateImage() {
+    const timestamp = new Date().getTime();
+    const imgElement = document.getElementById("plantImage");
+    imgElement.style.opacity = "0.9";
+    imgElement.src = "/last_image?t=" + timestamp;
+    imgElement.onload = function() {
+      imgElement.style.opacity = "1";
+    }
+  }
+  
+  document.addEventListener('DOMContentLoaded', function() {
+    updateImage();
+    setInterval(updateImage, 10000);
+  });
+</script>
   
 </body>
 </html>