Connect to Wi-Fi Networks to ESP32 with button control - Wokwi ESP32, STM32, Arduino Simulator

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

// Wokwi WiFi settings
const char* ssid = "Wokwi-GUEST";
const char* password = "";

WebServer server(80);

// LED pin
const int ledPin = 27;
bool ledState = false;

void setup() {
  Serial.begin(115200);
  
  // Setup LED pin
  pinMode(ledPin, OUTPUT);
  digitalWrite(ledPin, LOW);
  
  // Connect to WiFi
  WiFi.begin(ssid, password);
  Serial.print("Connecting to WiFi");
  
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  
  Serial.println("\n✅ Connected to WiFi");
  Serial.print("📡 IP address: ");
  Serial.println(WiFi.localIP());
  Serial.println("🌐 Open this in browser tab or add /esp32 to your project URL");

  // Setup web server routes
  server.on("/", []() {
    String html = "<!DOCTYPE html><html>";
    html += "<head><meta name='viewport' content='width=device-width, initial-scale=1.0'>";
    html += "<style>";
    html += "body{font-family:Arial;text-align:center;margin-top:50px;}";
    html += "h1{color:#333;}";
    html += ".status{font-size:24px;margin:20px;}";
    html += ".on{color:green;font-weight:bold;}";
    html += ".off{color:red;font-weight:bold;}";
    html += "button{padding:12px 24px;margin:10px;font-size:18px;cursor:pointer;}";
    html += ".btn-on{background-color:green;color:white;border:none;border-radius:5px;}";
    html += ".btn-off{background-color:red;color:white;border:none;border-radius:5px;}";
    html += "</style>";
    html += "<meta http-equiv='refresh' content='2'>";
    html += "</head><body>";
    html += "<h1>ESP32 LED Control - Wokwi</h1>";
    html += "<div class='status'>LED Status: <span class='" + String(ledState ? "on" : "off") + "'>";
    html += ledState ? "🔴 ON" : "⚫ OFF";
    html += "</span></div>";
    html += "<button class='btn-on' onclick=\"location.href='/on'\">Turn ON</button>";
    html += "<button class='btn-off' onclick=\"location.href='/off'\">Turn OFF</button>";
    html += "<p><small>Control via Serial Monitor: type 'on' or 'off'</small></p>";
    html += "</body></html>";
    server.send(200, "text/html", html);
  });
  
  server.on("/on", []() {
    ledState = true;
    digitalWrite(ledPin, HIGH);
    Serial.println("💡 LED turned ON via web");
    server.sendHeader("Location", "/");
    server.send(303);
  });
  
  server.on("/off", []() {
    ledState = false;
    digitalWrite(ledPin, LOW);
    Serial.println("💡 LED turned OFF via web");
    server.sendHeader("Location", "/");
    server.send(303);
  });
  
  server.onNotFound([]() {
    server.send(404, "text/plain", "Not found");
  });
  
  server.begin();
  Serial.println("✅ HTTP server started");
}

void loop() {
  server.handleClient();
  
  // Handle serial commands
  if (Serial.available() > 0) {
    String command = Serial.readString();
    command.trim();
    command.toLowerCase();
    
    if (command == "on") {
      ledState = true;
      digitalWrite(ledPin, HIGH);
      Serial.println("💡 LED turned ON via serial");
    }
    else if (command == "off") {
      ledState = false;
      digitalWrite(ledPin, LOW);
      Serial.println("💡 LED turned OFF via serial");
    }
  }
}