Spaces:
Running
Running
File size: 3,020 Bytes
37b358c 7858726 228e63f 37b358c 5b0cefa 7858726 228e63f 7858726 37b358c 7858726 37b358c 7858726 228e63f 37b358c 228e63f 7858726 228e63f 37b358c 7c48504 7858726 7c48504 228e63f 7c48504 7858726 228e63f 7858726 7c48504 e290abe 7858726 7c48504 228e63f 7858726 7c48504 228e63f 37b358c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 |
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Мониторинг растения</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
text-align: center;
}
h1 {
color: #2e7d32;
}
#plantImage {
max-width: 100%;
height: auto;
border: 2px solid #ddd;
border-radius: 8px;
margin-bottom: 20px;
}
.stats {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 15px;
margin-top: 20px;
}
.stat-item {
padding: 10px 15px;
border-radius: 5px;
font-weight: bold;
min-width: 120px;
}
.green {
background-color: #e8f5e9;
color: #2e7d32;
border: 1px solid #a5d6a7;
}
.yellow {
background-color: #fffde7;
color: #f9a825;
border: 1px solid #fff59d;
}
.orange {
background-color: #fff3e0;
color: #ef6c00;
border: 1px solid #ffcc80;
}
.brown {
background-color: #efebe9;
color: #6d4c41;
border: 1px solid #d7ccc8;
}
.color-value {
font-size: 1.2em;
}
</style>
</head>
<body>
<h1>Текущее состояние растения</h1>
<img id="plantImage" src="/last_image" alt="Изображение растения">
<button class="refresh-btn" onclick="updateImage()">Обновить изображение</button>
<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>
</body>
</html>
|