Microcontrollers
/
LEDLamp


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340
							/*
 * HtmlPage.h
 *
 *  Created on: 08.06.2026
 *      Author: FSmilari
 */

#ifndef HTMLPAGES_H_
#define HTMLPAGES_H_

#include <WString.h>

const String getSetupPage(String macAddress) {

	String html =
			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 LEDLamp Setup</title>

			<style>
			  body {
				margin: 0;
				font-family: Arial, sans-serif;
				background: linear-gradient(135deg, #1e1e2f, #2b5876);
				color: white;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100vh;
			  }
		
			  * {
				box-sizing: border-box;
			  }
		
			  .card {
				background: rgba(255,255,255,0.08);
				backdrop-filter: blur(10px);
				padding: 25px;
				border-radius: 16px;
				width: 90%;
				max-width: 360px;
				box-shadow: 0 8px 20px rgba(0,0,0,0.3);
				animation: fadeIn 0.8s ease;
			  }
		
			  h2 {
				margin-top: 0;
				text-align: center;
			  }
		
			  .info {
				font-size: 12px;
				opacity: 0.8;
				margin-top: 8px;
				margin-bottom: 15px;
				text-align: center;
			  }
		
			  input {
				width: 100%;
				padding: 12px;
				margin: 8px 0px;
				border-radius: 10px;
				border: none;
				outline: none;
				font-size: 14px;
				transition: 0.2s;
			  }
		
			  input:focus {
				transform: scale(1.02);
			  }
		
			  button {
				width: 100%;
				padding: 12px;
				margin-top: 10px;
				border: none;
				border-radius: 10px;
				background: #00c6ff;
				color: white;
				font-size: 16px;
				cursor: pointer;
				transition: 0.3s;
			  }
		
			  button:hover {
				background: #0072ff;
				transform: translateY(-2px);
			  }
		
			  .mac {
				font-size: 11px;
				text-align: center;
				margin-bottom: 15px;
				opacity: 0.7;
				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);}
			  }
			</style>
		</head>

		<body>

			<div class="card">
			  <h2>Wemos LEDLamp Setup</h2>
		    <div class="mac">Device: )rawliteral"
					+ macAddress
					+ R"rawliteral(</div>

	  		<form action="/save" method="POST">
			    <input name="ssid" placeholder="WLAN Name (SSID)">

				<div class="pw-wrapper">
				  <input id="pass" name="pass" type="password" placeholder="Passwort">
				  <span class="toggle-eye" onclick="togglePassword()">👁</span>
				</div>

			    <button type="submit">Speichern & Verbinden</button>
	  		</form>
			<div class="info">Verbinde den LEDLamp Wemos mit einem WLAN Netzwerk</div>

		</body>
	</html>
	)rawliteral";

	return html;
}


const String getSTAControlPage(String macAddress) {
	String html =
			R"rawliteral(
	<!DOCTYPE html>
	
	<html>

		<head>
			<meta name="viewport" content="width=device-width, initial-scale=1">
			<title>Wemos LEDLamp Control</title>

			<style>
			  body {
				margin: 0;
				font-family: Arial, sans-serif;
				background: linear-gradient(135deg, #1e1e2f, #2b5876);
				color: white;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100vh;
			  }
		
			  * {
				box-sizing: border-box;
			  }
		
			  .card {
				background: rgba(255,255,255,0.08);
				backdrop-filter: blur(10px);
				padding: 25px;
				border-radius: 16px;
				width: 90%;
				max-width: 360px;
				box-shadow: 0 8px 20px rgba(0,0,0,0.3);
				animation: fadeIn 0.8s ease;
			  }
		
			  h2 {
				margin-top: 0;
				text-align: center;
			  }
		
			  .info {
				font-size: 12px;
				opacity: 0.8;
				margin-bottom: 15px;
				text-align: center;
			  }
		
			  input {
				width: 100%;
				padding: 12px;
				margin: 8px 0;
				border-radius: 10px;
				border: none;
				outline: none;
				font-size: 14px;
				transition: 0.2s;
			  }
		
			  input:focus {
				transform: scale(1.02);
			  }
		
			  button {
				width: 100%;
				padding: 12px;
				margin-top: 10px;
				border: none;
				border-radius: 10px;
				background: #00c6ff;
				color: white;
				font-size: 16px;
				cursor: pointer;
				transition: 0.3s;
			  }
		
			  button:hover {
				background: #0072ff;
				transform: translateY(-2px);
			  }
		
			  .mac {
				font-size: 11px;
				text-align: center;
				margin-bottom: 15px;
				opacity: 0.7;
				word-break: break-all;
			  }
		
			  @keyframes fadeIn {
				from {opacity: 0; transform: translateY(10px);}
				to {opacity: 1; transform: translateY(0);}
			  }
			</style>
		</head>

		<body>

			<div class="card">
			  <h2>Wemos LEDLamp Control</h2>
		    <div class="mac">Device: )rawliteral"
					+ macAddress
					+ R"rawliteral(</div>

			<div class="btn-row">
			  <button type="button" onclick="ledOn()">LED EIN</button>
			  <button type="button" onclick="ledOff()">LED AUS</button>
			</div>

			<script>
				let ws;
	
				function connectWS() {
				  ws = new WebSocket("ws://" + location.hostname + ":81/");
				  ws.onopen = () => {
					console.log("WebSocket connected");
				  };
				  ws.onmessage = (e) => {
					console.log("ESP:", e.data);
				  };
				  ws.onclose = () => {
					console.log("WS disconnected → reconnect");
					setTimeout(connectWS, 1000);
				  };
				}
	
				connectWS();
	
				function ledOn() {
				  if (ws && ws.readyState === 1) {
					ws.send("/ledOn");
				  }
				}
	
				function ledOff() {
				  if (ws && ws.readyState === 1) {
					ws.send("/ledOff");
				  }
				}
	
			</script>

		</body>
	</html>
	)rawliteral";

	return html;
}


#endif /* HTMLPAGES_H_ */