@octopan/telegram-green-house
Version:
Monitor & control green-house with Telegram & Raspberry Pi
72 lines (70 loc) • 3.27 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>Эмулятор умной теплички</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.1/socket.io.js" type="text/javascript"></script>
<script src="/script.js" type="text/javascript"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@media (max-width: 500px) {
#forkMeImg {
width: 80px;
}
}
#handle-temperature, #handle-humidity {
width: 3em;
height: 1.6em;
top: 50%;
margin-top: -.8em;
text-align: center;
line-height: 1.6em;
}
</style>
</head>
<body style="padding: 10px;">
<a id="forkMeLink" style="display: none;">
<img id="forkMeImg" style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png" alt="Fork me on GitHub">
</a>
<h3>Эмулятор умной теплички</h3>
<table cellspacing="10">
<tr>
<td>Температура <i class="fas fa-thermometer-three-quarters"></i>:</td>
<td>
<div id="slider-temperature" style="width: 200px;">
<div id="handle-temperature" class="ui-slider-handle"></div>
</div>
</td>
</tr>
<tr>
<td>Влажность <i class="fas fa-tint"></i>:</td>
<td>
<div id="slider-humidity" style="width: 200px;">
<div id="handle-humidity" class="ui-slider-handle"></div>
</div>
</td>
</tr>
<tr>
<td>Полив <i class="fas fa-umbrella"></i>:</td>
<td>
<div id="water-state">Загрузка...</div>
</td>
</tr>
<tr>
<td>Свет <i class="fas fa-lightbulb"></i>:</td>
<td>
<div id="lights-state">Загрузка...</div>
</td>
</tr>
</table>
<div style="margin: 10px;">
<a id="panelLink" style="display: none; text-decoration: none;"><i class="fas fa-gamepad"></i> Веб-панель</a>
<a id="botLink" style="display: none; text-decoration: none;"><i class="fab fa-telegram"></i> Telegram бот</a>
</div>
</body>
</html>