Spaces:
Sleeping
Sleeping
| <!-- show_image.html --> | |
| <html lang="ru"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Мониторинг растения</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| text-align: center; | |
| padding: 20px; | |
| } | |
| img { | |
| max-width: 90%; | |
| height: auto; | |
| border: 2px solid #000; | |
| margin-bottom: 20px; | |
| } | |
| .stats { | |
| font-size: 1.2em; | |
| margin-top: 10px; | |
| } | |
| .green { color: green; } | |
| .yellow { color: goldenrod; } | |
| .brown { color: brown; } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Последнее изображение растения</h1> | |
| <img id="plantImage" src="/last_image" alt="Растение"> | |
| <div class="stats"> | |
| <div class="green">Зелёный: <span id="green">0</span>%</div> | |
| <div class="yellow">Жёлтый: <span id="yellow">0</span>%</div> | |
| <div class="brown">Коричневый: <span id="brown">0</span>%</div> | |
| </div> | |
| <script> | |
| function updateImageAndStats() { | |
| const timestamp = new Date().getTime(); | |
| document.getElementById("plantImage").src = "/last_image?t=" + timestamp; | |
| fetch("/color_stats") | |
| .then(response => response.json()) | |
| .then(data => { | |
| document.getElementById("green").textContent = data.green; | |
| document.getElementById("yellow").textContent = data.yellow; | |
| document.getElementById("brown").textContent = data.brown; | |
| }); | |
| } | |
| // Первичная загрузка | |
| updateImageAndStats(); | |
| // Обновление каждые 10 секунд | |
| setInterval(updateImageAndStats, 10000); | |
| </script> | |
| </body> | |
| </html> | |