WebRemoteRcBot

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Remote Control</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
    }
    .btn {
      display: inline-block;
      padding: 10px 20px;
      margin: 10px;
      font-size: 18px;
      cursor: pointer;
      background-color: #007bff;
      color: #fff;
      border: none;
      border-radius: 5px;
    }
    .btn:hover {
      background-color: #0056b3;
    }
    input[type="number"] {
      width: 60px;
      font-size: 16px;
      padding: 5px;
    }
  </style>
</head>
<body>
  <h1>Remote Control</h1>
  <div>
    <button class="btn" onclick="sendCommand('forward')">Forward</button>
  </div>
  <div>
    <button class="btn" onclick="sendCommand('left')">Left</button>
    <img src="chatbot.gif" alt="EspRCarBot" width="100">
    <button class="btn" onclick="sendCommand('right')">Right</button>
  </div>
<div>
    <button class="btn" onclick="sendCommand('backward')">Backward</button>
  </div>
  <div>
    <input type="number" id="speed" value="100" min="0" max="255">
    <button class="btn" onclick="SetSpeed()"> Speed</button>
    <button class="btn" onclick="sendCommand('netral')">Netral</button>
  </div>
  <script>
    var ipAddress = "192.168.4.1:80"; // Ubah sesuai dengan alamat IP ESP8266 dalam mode AP

    function sendCommand(command) {
      fetch('http://' + ipAddress + '/' + command, { method: 'POST' })
        .then(response => console.log('Command sent:', command))
        .catch(error => console.error('Error sending command:', error));
    }

    function setSpeed() {
      var speed = document.getElementById('speed').value;
      fetch('http://' + ipAddress + '/speed', { method: 'POST', body: 'speed=' + speed })
        .then(response => console.log('Speed set to:', speed))
        .catch(error => console.error('Error setting speed:', error));
    }
  </script>
</body>
<body>
    <p>Mau tanya apa d^_^b:</p>

    <input id="input" type="text" placeholder="Type here">
    <button onclick="askQuestion()">Ask</button>

    <p id="response"></p>

</script>

    <script>
        // Load data from localStorage
        var storedAnswers = JSON.parse(localStorage.getItem("chatbotAnswers")) || {};

        function saveToLocalStorage() {
            localStorage.setItem("chatbotAnswers", JSON.stringify(storedAnswers));
        }

        function askQuestion() {
            // get the question from the user
            var question = document.getElementById("input").value;

            // your extended AI logic goes here
            if (storedAnswers.hasOwnProperty(question)) {
                document.getElementById("response").innerHTML = storedAnswers[question];
            } else {
                var userAnswer = prompt("Maaf, aku enggak mengerti pertanyaan kamu. Aku harus jawab apa ya? :");
                storedAnswers[question] = "d^_^b  " + userAnswer;
                document.getElementById("response").innerHTML = storedAnswers[question];
                // Save updated data to localStorage
                saveToLocalStorage();
            }
        }
    </script>

</body>
</html>