📄 web/index_web.html

⬅️ Назад ⬇️ Скачать
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🌤 ESP8266 — Погода</title>
<link rel="stylesheet" href="/web/style.css">
<style>
body { background: #1a1f2e !important; color: #e8eaf0 !important; }
h1 { color: #e8eaf0 !important; }
#timer { color: #b0b8cc !important; }
.progress-container { background: #2e3650 !important; }
.links a { color: #4da6ff !important; }
.history-box { background: #252b3b !important; border-color: #3a4257 !important; }
.history-title { color: #b0b8cc !important; }
#historyTable table tr:first-child { background: #2e3650 !important; color: #e8eaf0 !important; }
#historyTable table th { border-bottom-color: #3a4257 !important; color: #e8eaf0 !important; }
#historyTable table td { border-bottom-color: #2e3650 !important; color: #d0d6e8 !important; }
#historyTable table td:first-child { color: #9aa5c0 !important; }
#historyTable table td:nth-child(2) { color: #ff5c5c !important; }
#historyTable table td:nth-child(3) { color: #4da6ff !important; }
#historyTable table td:nth-child(4) { color: #4cdd7a !important; }
#historyTable table th:nth-child(2) { color: #ff5c5c !important; }
#historyTable table th:nth-child(3) { color: #4da6ff !important; }
#historyTable table th:nth-child(4) { color: #4cdd7a !important; }
#historyTable table tr:hover td { background: #2e3650 !important; }
</style>
</head>
<body>
<h1>🌤 Температура на улице</h1>
<div class="data">🌡 Температура: <span id="temp" class="value" style="color: #ff5c5c; font-weight: bold;">--</span> °C</div>
<div class="data">💧 Влажность: <span id="hum" class="value" style="color: #4da6ff; font-weight: bold;">--</span> %</div>
<div class="data">📊 Давление: <span id="press" class="value" style="color: #4cdd7a; font-weight: bold;">--</span> мм рт.ст.</div>
<div class="history-box">
<div class="history-title" id="historyTitle">🕒 История</div>
<div id="historyTable"></div>
</div>
<div id="timer">🕘 Следующее обновление через: --</div>
<div class="progress-container">
<div id="progress-bar"></div>
</div>
<div class="links">
<a href="/" target="_blank"> Главная </a>
<a href="/info" target="_blank">⚙️ Настройки</a>
<a href="/scan" target="_blank">🔍 Скан. I2C</a>
<a href="/files" target="_blank">📁 Файлы на SD</a>
<a href="/archive" class="btn btn-info"> 📚 </a>
<a href="/charts" target="_blank"> 📊 </a>
</div>
<script src="/web/script.js"></script>
</body>
</html>

🏠 Главная