|
|
|
@@ -49,6 +49,22 @@ void handleRoot() { |
|
|
|
R"rawliteral( |
|
|
|
<!DOCTYPE html> |
|
|
|
<html> |
|
|
|
|
|
|
|
<script> |
|
|
|
function togglePassword() { |
|
|
|
const pass = document.getElementById("pass"); |
|
|
|
const eye = document.querySelector(".toggle-eye"); |
|
|
|
|
|
|
|
if (pass.type === "password") { |
|
|
|
pass.type = "text"; |
|
|
|
eye.textContent = "❌"; |
|
|
|
} else { |
|
|
|
pass.type = "password"; |
|
|
|
eye.textContent = "👁"; |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<head> |
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|
|
|
<title>Wemos Setup</title> |
|
|
|
@@ -133,6 +149,38 @@ void handleRoot() { |
|
|
|
word-break: break-all; |
|
|
|
} |
|
|
|
|
|
|
|
.pw-wrapper { |
|
|
|
position: relative; |
|
|
|
width: 100%; |
|
|
|
margin: 8px 0; |
|
|
|
} |
|
|
|
|
|
|
|
.pw-wrapper input { |
|
|
|
width: 100%; |
|
|
|
padding: 12px 40px 12px 12px; /* Platz für Icon rechts */ |
|
|
|
border-radius: 10px; |
|
|
|
border: none; |
|
|
|
outline: none; |
|
|
|
font-size: 14px; |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
|
|
|
|
.toggle-eye { |
|
|
|
position: absolute; |
|
|
|
right: 12px; |
|
|
|
top: 50%; |
|
|
|
transform: translateY(-50%); |
|
|
|
cursor: pointer; |
|
|
|
font-size: 16px; |
|
|
|
opacity: 0.6; |
|
|
|
user-select: none; |
|
|
|
transition: 0.2s; |
|
|
|
} |
|
|
|
|
|
|
|
.toggle-eye:hover { |
|
|
|
opacity: 1; |
|
|
|
} |
|
|
|
|
|
|
|
@keyframes fadeIn { |
|
|
|
from {opacity: 0; transform: translateY(10px);} |
|
|
|
to {opacity: 1; transform: translateY(0);} |
|
|
|
@@ -151,8 +199,10 @@ void handleRoot() { |
|
|
|
|
|
|
|
<form action="/save" method="POST"> |
|
|
|
<input name="ssid" placeholder="WLAN Name (SSID)"> |
|
|
|
<input name="pass" type="password" placeholder="Passwort"> |
|
|
|
|
|
|
|
<div class="pw-wrapper"> |
|
|
|
<input id="pass" name="pass" type="password" placeholder="Passwort"> |
|
|
|
<span class="toggle-eye" onclick="togglePassword()">👁</span> |
|
|
|
</div> |
|
|
|
<button type="submit">Verbinden</button> |
|
|
|
</form> |
|
|
|
|
