Wokwi - Online ESP32, STM32, Arduino Simulator

#include <WiFi.h>
#include <WebServer.h>
#include <ESP32Servo.h>

const char* ssid = "SmartLock_WIFI";
const char* password = "";

IPAddress local_ip(192,168,1,1);
IPAddress gateway(192,168,1,1);
IPAddress subnet(255,255,255,0);
WebServer server(80);

uint8_t servoPin = 14;
bool ServoStatus = false;

Servo servo;


void setup() {
  servo.attach(servoPin, 500, 2500);
  servo.write(0);
  Serial.begin(115200);
  WiFi.softAP(ssid, password);
  WiFi.softAPConfig(local_ip, gateway, subnet);

  server.on("/", handle_OnConnect);
  server.on("/servoon", handle_ServoOn);
  server.on("/servooff", handle_ServoOff);
  server.onNotFound(handle_NotFound);


  server.begin();
  Serial.println("HTTP server started!");

}

void loop() {
  server.handleClient();

  if(ServoStatus){
    servo.write(90);
  }
  else{
    servo.write(0);
  }
}

void handle_OnConnect() {
  ServoStatus = false;
  Serial.println("Door : Lock");
  server.send(200, "text/html", SendHTML(ServoStatus)); 
}

void handle_NotFound(){
  server.send(404, "text/plain", "Not found");
}

void handle_ServoOn() {
  ServoStatus = true;
  Serial.println("Door : Unlock");
  server.send(200, "text/html", SendHTML(ServoStatus)); 
}

void handle_ServoOff() {
  ServoStatus = false;
  Serial.println("Door : Lock");
  server.send(200, "text/html", SendHTML(ServoStatus)); 
}


String SendHTML(bool ServoStatus){
  String ptr = "<!DOCTYPE html> <html>\n";
  
  // step by step - add HTML to the end of this string (ptr)
  ptr +="<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
  ptr +="<title>Servo Control</title>\n";
  ptr +="<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";
  ptr +="body{margin-top: 50px;} h1 {color: #444444;margin: 50px auto 30px;} h3 {color: #444444;margin-bottom: 50px;}\n";
  ptr +=".button {display: block;width: 80px;background-color: #3498db;border: none;color: white;padding: 13px 30px;text-decoration: none;font-size: 25px;margin: 0px auto 35px;cursor: pointer;border-radius: 10px; box-shadow: 5px 10px 10px white;}\n";
  ptr +=".buttonRed {background-color: #db3498;}\n";
  ptr +=".button-on {background-color: #3498db;}\n";
  ptr +=".button-on:active {background-color: #2980b9;}\n";
  ptr +=".button-off {background-color: #34495e;}\n";
  ptr +=".button-off:active {background-color: #2c3e50;}\n";
  ptr +="p {font-size: 14px;color: #888;margin-bottom: 10px;}\n";
  ptr +="</style>\n";
  ptr +="</head>\n";
  ptr +="<body style='background-image: linear-gradient(to right, red, yellow);'>\n";
  ptr +="<h1>ESP32 Web Server</h1>\n";
  ptr +="<h3>Using Access Point(AP) Mode</h3>\n";
  
  if(ServoStatus)   {  ptr +="<p>Servo Status: ON</p><a class=\"button button-off\"     href=\"/servooff\">OFF</a>\n";  }
  else  {  ptr +="<p>Servo Status: OFF</p><a class=\"button button-on\" href=\"/servoon\">ON</a>\n";}

  ptr +="</body>\n";
  ptr +="</html>\n";
  return ptr;
}