UNPKG

@octopan/telegram-green-house

Version:

Monitor & control green-house with Telegram & Raspberry Pi

72 lines (70 loc) 3.27 kB
<!doctype 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>