mkg20001/index.html

## 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>