Untitled

void handleRoot() {
  String html =
      "<!DOCTYPE html><html><head><meta charset='UTF-8'><meta name='viewport' "
      "content='width=device-width, initial-scale=1.0'>";
  html += "<title>ESP32-EVB Control</title>";
  html += "<style>";
  html += "body { font-family: 'Segoe UI', Arial, sans-serif; background: "
          "#f0f2f5; color: #1c1e21; display: flex; flex-direction: column; "
          "align-items: center; min-height: 100vh; margin: 0; padding: 20px; }";
  html += ".card { background: white; border-radius: 12px; box-shadow: 0 4px "
          "6px rgba(0,0,0,0.1); width: 100%; max-width: 400px; padding: 24px; "
          "margin-bottom: 20px; text-align: center; }";
  html += "h1 { color: #0066cc; margin-top: 0; font-weight: 600; }";
  html += ".status { display: inline-block; padding: 4px 12px; border-radius: "
          "20px; font-size: 0.9em; font-weight: bold; margin-bottom: 16px; }";
  html += ".connected { background: #e7f3ff; color: #1877f2; }";
  html += ".relay-group { display: flex; justify-content: space-around; gap: "
          "15px; margin-top: 20px; }";
  html += ".btn { border: none; border-radius: 8px; padding: 12px 24px; "
          "font-size: 1em; font-weight: 600; cursor: pointer; transition: "
          "transform 0.1s, background 0.3s; color: white; flex: 1; }";
  html += ".btn:active { transform: scale(0.95); }";
  html += ".on { background: #42b72a; } .off { background: #f02849; }";
  html += ".footer { color: #65676b; font-size: 0.85em; margin-top: auto; }";
  html += "</style></head><body>";

  html += "<div class='card'>";
  html += "<h1>ESP32-EVB</h1>";
  html += "<div class='status connected'>Ethernet Connected</div>";
  html += "<p>Uptime: <span id='uptime'>" + String(millis() / 1000) +
          "</span>s</p>";

  html += "<div class='relay-group'>";
  html +=
      "<button id='r1' class='btn " + String(relay1State ? "on" : "off") +
      "' onclick='toggle(1)'>Relay 1: " + String(relay1State ? "ON" : "OFF") +
      "</button>";
  html +=
      "<button id='r2' class='btn " + String(relay2State ? "on" : "off") +
      "' onclick='toggle(2)'>Relay 2: " + String(relay2State ? "ON" : "OFF") +
      "</button>";
  html += "</div>";
  html += "</div>";

  html += "<div class='footer'>Olimex ESP32-EVB Control Panel</div>";

  html += "<script>";
  html += "function toggle(id) {";
  html +=
      "  fetch('/relay/' + id + '/toggle').then(r => r.json()).then(data => {";
  html += "    const btn = document.getElementById('r' + id);";
  html += "    btn.className = 'btn ' + (data.state ? 'on' : 'off');";
  html +=
      "    btn.innerText = 'Relay ' + id + ': ' + (data.state ? 'ON' : 'OFF');";
  html += "  });";
  html += "}";
  html += "setInterval(() => { fetch('/uptime').then(r => r.text()).then(t => "
          "document.getElementById('uptime').innerText = t); }, 5000);";
  html += "</script>";

  html += "</body></html>";
  server.send(200, "text/html", html);
}