User: Сделай интерфейс более современным и красивым в оранжевых тонах

const char htmlPage[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
  <title>Управление шаговым двигателем</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta charset="utf-8">
</head>
<body>
  <h1>Веб-интерфейс шагового двигателя</h1>
  <button onclick="controlMotor('left')">Повернуть влево</button>
  <button onclick="controlMotor('right')">Повернуть вправо</button>
  <input type="number" id="customSteps" value="200" step="10">
  <button onclick="updateParameter('customSteps')">Задать шаги</button>
  <div id="stepCounter">Всего шагов: 0</div>
  <div id="degreeCounter">Угол поворота: 0</div>
  <br>
  <h3>Настройки:</h3>
  <label for="maxSpeed">Макс. Скорость:</label>
  <input type="number" id="maxSpeed" value="1000" step="10">
  <button onclick="updateParameter('maxSpeed')">Обновить скорость</button>
  <br>
  <label for="acceleration">Ускорение:</label>
  <input type="number" id="acceleration" value="500" step="10">
  <button onclick="updateParameter('acceleration')">Обновить ускорение</button>
  <br>
  <label for="stepSize">Шаг:</label>
  <input type="number" id="stepSize" value="200" step="10">
  <button onclick="updateParameter('stepSize')">Обновить шаг</button>
  <br>
  <label for="degrees">Угол (градусы):</label>
  <input type="number" id="degrees" value="90" step="1">
  <button onclick="setDegrees()">Задать угол</button>
  <script>
    function controlMotor(action) {
      var xhr = new XMLHttpRequest();
      xhr.open("GET", "/control?direction=" + action, true);
      xhr.send();
      xhr.onload = function() {
        updateStepCounter(); // Обновляем счётчик шагов после управления
      };
    }

    function updateStepCounter() {
      var xhr = new XMLHttpRequest();
      xhr.open("GET", "/steps", true);
      xhr.onload = function() {
        document.getElementById('stepCounter').innerText = "Всего шагов: " + xhr.responseText;
        
        // Обновляем угол поворота
        var totalSteps = parseInt(xhr.responseText);
        var degrees = totalSteps * (360 / 200);
        document.getElementById('degreeCounter').innerText = "Угол поворота: " + degrees.toFixed(2) + " градусов";
      };
      xhr.send();
    }

    function updateParameter(param) {
      var value = document.getElementById(param).value;
      var xhr = new XMLHttpRequest();
      xhr.open("GET", "/update?param=" + param + "&value=" + value, true);
      xhr.send();
    }

    function setDegrees() {
      var degrees = document.getElementById('degrees').value;
      var steps = Math.round(degrees / (360 / 200));
      var xhr = new XMLHttpRequest();
      xhr.open("GET", "/update?param=customSteps&value=" + steps, true);
      xhr.send();
    }
  </script>
</body>
</html>)rawliteral";
Assistant: Вот обновленный вариант интерфейса с использованием оранжевых тонов и более современного стиля. Я также добавил некоторую кастомизацию кнопок и фонов:

```cpp
const char htmlPage[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
  <title>Управление шаговым двигателем</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta charset="utf-8">
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #FFFAF0; /* Светло-оранжевый фон */
      color: #333;
      text-align: center;
      padding: 20px;
    }
    h1 {
      color: #FF8C00; /* Темно-оранжевый цвет заголовка */
    }
    button {
      background-color: #FFA500; /* Оранжевый цвет кнопок */
      color: white;
      border: none;
      padding: 15px 30px;
      text-align: center;
      font-size: 16px;
      margin: 10px;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s;
    }
    button:hover {
      background-color: #FF4500; /* Темно-оранжевый цвет при наведении */
    }
    input[type="number"] {
      width: 80px;
      padding: 5px;
      margin: 10px;
      border-radius: 5px;
      border: 1px solid #FFA07A;
    }
    div {
      margin-top: 20px;
      font-size: 18px;
    }
    label {
      display: block;
      font-weight: bold;
      margin-top: 20px;
      color: #FF8C00;
    }
  </style>
</head>
<body>
  <h1>Веб-интерфейс шагового двигателя</h1>
  <button onclick="controlMotor('left')">Повернуть влево</button>
  <button onclick="controlMotor('right')">Повернуть вправо</button>
  <input type="number" id="customSteps" value="200" step="10">
  <button onclick="updateParameter('customSteps')">Задать шаги</button>
  <div id="stepCounter">Всего шагов: 0</div>
  <div id="degreeCounter">Угол поворота: 0 градусов</div>
  <br>
  <h3>Настройки:</h3>
  <label for="maxSpeed">Макс. Скорость:</label>
  <input type="number" id="maxSpeed" value="1000" step="10">
  <button onclick="updateParameter('maxSpeed')">Обновить скорость</button>
  <br>
  <label for="acceleration">Ускорение:</label>
  <input type="number" id="acceleration" value="500" step="10">
  <button onclick="updateParameter('acceleration')">Обновить ускорение</button>
  <br>
  <label for="stepSize">Шаг:</label>
  <input type="number" id="stepSize" value="200" step="10">
  <button onclick="updateParameter('stepSize')">Обновить шаг</button>
  <br>
  <label for="degrees">Угол (градусы):</label>
  <input type="number" id="degrees" value="90" step="1">
  <button onclick="setDegrees()">Задать угол</button>
  <script>
    function controlMotor(action) {
      var xhr = new XMLHttpRequest();
      xhr.open("GET", "/control?direction=" + action, true);
      xhr.send();
      xhr.onload = function() {
        updateStepCounter(); // Обновляем счётчик шагов после управления
      };
    }

    function updateStepCounter() {
      var xhr = new XMLHttpRequest();
      xhr.open("GET", "/steps", true);
      xhr.onload = function() {
        document.getElementById('stepCounter').innerText = "Всего шагов: " + xhr.responseText;
        
        // Обновляем угол поворота
        var totalSteps = parseInt(xhr.responseText);
        var degrees = totalSteps * (360 / 200);
        document.getElementById('degreeCounter').innerText = "Угол поворота: " + degrees.toFixed(2) + " градусов";
      };
      xhr.send();
    }

    function updateParameter(param) {
      var value = document.getElementById(param).value;
      var xhr = new XMLHttpRequest();
      xhr.open("GET", "/update?param=" + param + "&value=" + value, true);
      xhr.send();
    }

    function setDegrees() {
      var degrees = document.getElementById('degrees').value;
      var steps = Math.round(degrees / (360 / 200));
      var xhr = new XMLHttpRequest();
      xhr.open("GET", "/update?param=customSteps&value=" + steps, true);
      xhr.send();
    }
  </script>
</body>
</html>)rawliteral";
```

Я добавил стили, чтобы интерфейс выглядел более современно и использовал оранжевые тона. Кнопки и другие элементы интерфейса теперь более заметны и приятны для восприятия.
User: var steps = Math.round(degrees / (360 / 3200));

что это делает?
Assistant: