<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>My static Space</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <style> input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: inner-spin-button; opacity: 1; } input[type="number"] { -moz-appearance: textfield; } </style> </head> <body> <div class="container mt-3"> <div class="container text-center"> <h1>Настройки системы</h1> </div> <br> <h4>Уроыень pH</h4> <p>EEPROM : <span id="pH_eep"></span></p> <form> <label for="pH_set">Новое : </label> <input type="number" id="pH_set" value="5.6" min="1" max="14" step="0.05"> </form> <br> <h4>pH доз. ON sec.</h4> <p>EEPROM : <span id="ph_on_eep"></span></p> <form> <label for="ph_on_eep_set">Новое : </label> <input type="number" id="ph_on_eep_set" value="2.5" min="0.1" max="20" step="0.01"> </form> </div> <script> function updateValues(data) { document.getElementById("pH_eep").textContent = data.ph_eep; document.getElementById("ph_on_eep").textContent = data.ph_on_eep; } function fetchValues() { var xhr = new XMLHttpRequest(); xhr.open("GET", "/settings_api", true); xhr.setRequestHeader("Content-Type", "application/json"); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { var response = JSON.parse(xhr.responseText); updateValues(response); } }; xhr.send(); } fetchValues(); setInterval(fetchValues, 10000); </script> </body> </html>