mkg20001 · February 27, 2023 21:42
diff --git a/index.html b/index.html

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width">

 <style>
  body {
    font-family: sans-serif;
    background: #2f2f2f;
    color: #afafaf;
    text-align: center;
    margin: 0;
  }
  
  .header {
    color: #dfdfdf;
    background: #66aabb;
    display: block;
  }
  
  button {
    background: #448899;
    color: #0f0f0f;
    border-radius: 4px;
    border: 1px solid #226677;
    cursor: pointer;
    transition: .2s;
    font-size: 1.5em;
  }

  button:hover {
    color: #0f0f0f;
    background: #66aabb;
    border: 1px solid #337788;
  }
  
  button:active {
    color: #0f0f0f;
    background: #226677;
    border: 1px solid black;
  }

  button:disabled {
    background: #888;
    color: #666;
    border: 1px solid #666;
    cursor: inherit;
  }
 </style>

 </head>

 <body>

 <div class="header">
 <br>
 <h1>Einstellungen</h1>
 <hr>
 </div>

 <h2>Status: <span id="state"></span></h2>
 <br>
 <button onclick="activate('a')" data-value="a">Aktivieren (Modus a)</button> <button onclick="activate('b')" data-value="b">Aktivieren (Modus b)</button> <button onclick="deactivate()" data-value="undefined">Deaktivieren</button>

 <script async>

 if (typeof String.prototype.trimLeft !== "function") {
    String.prototype.trimLeft = function() {
        return this.replace(/^\s+/, "");
    };
 }
 if (typeof String.prototype.trimRight !== "function") {
    String.prototype.trimRight = function() {
        return this.replace(/\s+$/, "");
    };
 }
 if (typeof Array.prototype.map !== "function") {
    Array.prototype.map = function(callback, thisArg) {
        for (var i=0, n=this.length, a=[]; i<n; i++) {
            if (i in this) a[i] = callback.call(thisArg, this[i]);
        }
        return a;
    };
 }
 function getCookies() {
    var c = document.cookie, v = 0, cookies = {};
    if (document.cookie.match(/^\s*\$Version=(?:"1"|1);\s*(.*)/)) {
        c = RegExp.$1;
        v = 1;
    }
    if (v === 0) {
        c.split(/[,;]/).map(function(cookie) {
            var parts = cookie.split(/=/, 2),
                name = decodeURIComponent(parts[0].trimLeft()),
                value = parts.length > 1 ? decodeURIComponent(parts[1].trimRight()) : null;
            cookies[name] = value;
        });
    } else {
        c.match(/(?:^|\s+)([!#$%&'*+\-.0-9A-Z^`a-z|~]+)=([!#$%&'*+\-.0-9A-Z^`a-z|~]*|"(?:[\x20-\x7E\x80\xFF]|\\[\x00-\x7F])*")(?=\s*[,;]|$)/g).map(function($0, $1) {
            var name = $0,
                value = $1.charAt(0) === '"'
                          ? $1.substr(1, -1).replace(/\\(.)/g, "$1")
                          : $1;
            cookies[name] = value;
        });
    }
    return cookies;
 }
 function getCookie(name) {
    return getCookies()[name];
 }
 function deleteCookie(cookie) {
  document.cookie = cookie + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"
 }
 function setCookie(cookie, val, age) {
  document.cookie = cookie + "=" + val + "; expires=" + new Date(Date.now() + age).toUTCString() + "; path=/;"
 }

 function render(toggle, mode) {
  const value = getCookie('cookiename')
  const enabled = Boolean(value)
  document.getElementById("state").textContent = enabled ? ("aktiv, modus " + JSON.stringify(value)) : "inaktiv"
  Array.from(document.querySelectorAll("button")).forEach(el => {
    el.disabled = el.dataset.value === String(value)
  })
 }

 function deactivate() {
  deleteCookie('cookiename')
  render()
 }

 function activate(mode) {
  setCookie('cookiename', mode, 1000 * 60 * 60 * 24 * 30 * 12)
  render()
 }

 render()

 </script>

 </body>

 </html>

	<!doctype html>

	<html>

	<head>

	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">

	<style>
	body {
	font-family: sans-serif;
	background: #2f2f2f;
	color: #afafaf;
	text-align: center;
	margin: 0;
	}

	.header {
	color: #dfdfdf;
	background: #66aabb;
	display: block;
	}

	button {
	background: #448899;
	color: #0f0f0f;
	border-radius: 4px;
	border: 1px solid #226677;
	cursor: pointer;
	transition: .2s;
	font-size: 1.5em;
	}

	button:hover {
	color: #0f0f0f;
	background: #66aabb;
	border: 1px solid #337788;
	}

	button:active {
	color: #0f0f0f;
	background: #226677;
	border: 1px solid black;
	}

	button:disabled {
	background: #888;
	color: #666;
	border: 1px solid #666;
	cursor: inherit;
	}
	</style>

	</head>

	<body>

	<div class="header">
	<br>
	<h1>Einstellungen</h1>
	<hr>
	</div>

	<h2>Status: <span id="state"></span></h2>
	<br>
	<button onclick="activate('a')" data-value="a">Aktivieren (Modus a)</button> <button onclick="activate('b')" data-value="b">Aktivieren (Modus b)</button> <button onclick="deactivate()" data-value="undefined">Deaktivieren</button>

	<script async>

	if (typeof String.prototype.trimLeft !== "function") {
	String.prototype.trimLeft = function() {
	return this.replace(/^\s+/, "");
	};
	}
	if (typeof String.prototype.trimRight !== "function") {
	String.prototype.trimRight = function() {
	return this.replace(/\s+$/, "");
	};
	}
	if (typeof Array.prototype.map !== "function") {
	Array.prototype.map = function(callback, thisArg) {
	for (var i=0, n=this.length, a=[]; i<n; i++) {
	if (i in this) a[i] = callback.call(thisArg, this[i]);
	}
	return a;
	};
	}
	function getCookies() {
	var c = document.cookie, v = 0, cookies = {};
	if (document.cookie.match(/^\s\$Version=(?:"1"\|1);\s(.*)/)) {
	c = RegExp.$1;
	v = 1;
	}
	if (v === 0) {
	c.split(/[,;]/).map(function(cookie) {
	var parts = cookie.split(/=/, 2),
	name = decodeURIComponent(parts[0].trimLeft()),
	value = parts.length > 1 ? decodeURIComponent(parts[1].trimRight()) : null;
	cookies[name] = value;
	});
	} else {
	c.match(/(?:^\|\s+)([!#$%&'+\-.0-9A-Z^`a-z\|~]+)=([!#$%&'+\-.0-9A-Z^`a-z\|~]\|"(?:[\x20-\x7E\x80\xFF]\|\\[\x00-\x7F])")(?=\s*[,;]\|$)/g).map(function($0, $1) {
	var name = $0,
	value = $1.charAt(0) === '"'
	? $1.substr(1, -1).replace(/\\(.)/g, "$1")
	: $1;
	cookies[name] = value;
	});
	}
	return cookies;
	}
	function getCookie(name) {
	return getCookies()[name];
	}
	function deleteCookie(cookie) {
	document.cookie = cookie + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"
	}
	function setCookie(cookie, val, age) {
	document.cookie = cookie + "=" + val + "; expires=" + new Date(Date.now() + age).toUTCString() + "; path=/;"
	}

	function render(toggle, mode) {
	const value = getCookie('cookiename')
	const enabled = Boolean(value)
	document.getElementById("state").textContent = enabled ? ("aktiv, modus " + JSON.stringify(value)) : "inaktiv"
	Array.from(document.querySelectorAll("button")).forEach(el => {
	el.disabled = el.dataset.value === String(value)
	})
	}

	function deactivate() {
	deleteCookie('cookiename')
	render()
	}

	function activate(mode) {
	setCookie('cookiename', mode, 1000 * 60 * 60 * 24 * 30 * 12)
	render()
	}

	render()

	</script>

	</body>

	</html>