Microcontrollers
/
LEDLamp


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548
							/*
 * 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;
				}

			  .bar_white {
				background: white;
				width: 100%;
				height: 3px;
				margin-bottom: 20px;
			  }
	
			  .bar_red {
				background: red;
				width: 100%;
				height: 3px;
				margin-bottom: 20px;
			  }	

			  .bar_green {
				background: green;
				width: 100%;
				height: 3px;
				margin-bottom: 20px;
			  }	

			  .bar_blue {
				background: blue;
				width: 100%;
				height: 3px;
				margin-bottom: 20px;
			  }			
			  @keyframes fadeIn {
				from {opacity: 0; transform: translateY(10px);}
				to {opacity: 1; transform: translateY(0);}
			  }
			</style>
		</head>

		<body>

			<div class="card">
 				<div style="display: flex">
				  <div class="bar_green"></div>
			  	  <div class="bar_white"></div>
				  <div class="bar_red"></div>
				  <div class="bar_blue"></div>
			    </div>
			  <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>
			</div>

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

	return html;
}


const String getSTAControlPage(String macAddress) {
	String html =
			R"rawliteral(
	<!DOCTYPE html>
	
	<html>
		<head>
			<meta charset="UTF-8">
			<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-top: 8px;
				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;
				border: none;
				border-radius: 10px;
				background: #00c6ff;
				color: white;
				font-size: 16px;
				cursor: pointer;
				transition: 0.3s;
			  }
		
			  button:hover {
				background: #0072ff;
				transform: translateY(-1px) translateX(1px);
			  }

			  .btn-row {
				display: flex;
				gap: 10px;
				align-items: center;
				margin-top: 10px;
			  }	
		
			  .mac {
				font-size: 11px;
				text-align: center;
				margin-bottom: 15px;
				opacity: 0.7;
				word-break: break-all;
			  }

			  .bar_white {
				background: white;
				width: 100%;
				height: 3px;
				margin-bottom: 20px;
			  }
	
			  .bar_red {
				background: red;
				width: 100%;
				height: 3px;
				margin-bottom: 20px;
			  }	

			  .bar_green {
				background: green;
				width: 100%;
				height: 3px;
				margin-bottom: 20px;
			  }	

			  .bar_blue {
				background: blue;
				width: 100%;
				height: 3px;
				margin-bottom: 20px;
			  }	

			  @keyframes fadeIn {
				from {opacity: 0; transform: translateY(10px);}
				to {opacity: 1; transform: translateY(0);}
			  }
			</style>
		</head>

		<body>

			<div class="card">
			  <div style="display: flex">
				<div class="bar_green"></div>
			  	<div class="bar_white"></div>
				<div class="bar_red"></div>
				<div class="bar_blue"></div>
			  </div>
			  <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>
			    <div id="led_status">⚫</div>	
			    <button type="button" onclick="ledOff()">LED AUS</button>
			  </div>
			  <div class="btn-row">
			    <button type="button" onclick="resetWifiCfg()">Wifi-Konfiguration löschen</button>
			  </div>
			  <div id="reset_status" class="info">-</div>
			</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);
					
					if (e.data === "LED ON") {
					  document.getElementById("led_status").innerHTML = "🟢";
					}
						  
					if (e.data === "LED OFF") {
					  document.getElementById("led_status").innerHTML = "⚫";
					}

					if (e.data === "Wifi_Reset_Success") {
					  document.getElementById("reset_status").innerHTML = "Die Wifi-Konfiguration wurde erfolgreich zurückgesetzt.";
					}
				  };
				  
				  ws.onclose = () => {
					console.log("WS disconnected → reconnect");
					setTimeout(connectWS, 1000);
				  };
				}
	
				connectWS();
	
				function ledOn() {
				  if (ws && ws.readyState === 1) {
					ws.send("{\"cmd\":\"SWITCH_LED\",\"val\":\"on\"}");
				  }
				}
	
				function ledOff() {
				  if (ws && ws.readyState === 1) {
					ws.send("{\"cmd\":\"SWITCH_LED\",\"val\":\"off\"}");
				  }
				}

				function resetWifiCfg() {
				  if (ws && ws.readyState === 1) {
					ws.send("{\"cmd\":\"RESET_WIFI_CFG\",\"val\":\"\"}");
				  }
				}
	
			</script>

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

	return html;
}


const String getConnectionSuccessPage() {
	String html =
			R"rawliteral(
	<!DOCTYPE html>
	
	<html>
		<head>
			<meta charset="UTF-8">
			<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;
			  }
		
			  .bar_white {
				background: white;
				width: 100%;
				height: 3px;
				margin-bottom: 20px;
			  }
	
			  .bar_red {
				background: red;
				width: 100%;
				height: 3px;
				margin-bottom: 20px;
			  }	

			  .bar_green {
				background: green;
				width: 100%;
				height: 3px;
				margin-bottom: 20px;
			  }	

			  .bar_blue {
				background: blue;
				width: 100%;
				height: 3px;
				margin-bottom: 20px;
			  }	

			  @keyframes fadeIn {
				from {opacity: 0; transform: translateY(10px);}
				to {opacity: 1; transform: translateY(0);}
			  }
			</style>
		</head>

		<body>
			<div class="card">
			  <div style="display: flex">
				<div class="bar_green"></div>
			  	<div class="bar_white"></div>
				<div class="bar_red"></div>
				<div class="bar_blue"></div>
			  </div>
			  <h2>Wemos LEDLamp Setup gespeichert!</h2>
			  <div class="info">Wemos startet neu...</div>
			</div>
		</body>
	</html>
	)rawliteral";

	return html;
}


#endif /* HTMLPAGES_H_ */