ctucx.git: mqtt-webui

webui for mqtt, can be used to control/display data in mqtt-topics

1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29 
30 
31 
32 
33 
34 
35 
36 
37 
38 
39 
40 
41 
42 
43 
44 
45 
46 
47 
48 
49 
50 
51 
52 
53 
54 
<!doctype html>
<html lang="en">
	<head>
		<title>mqtt-webui</title>

		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-title" content="mqtt-webui">
		<link rel="apple-touch-icon" href="./favicon-512x512.png">

		<meta name="theme-color" content="#f8f9fa" media="(prefers-color-scheme: light)">
		<meta name="theme-color" content="#2c2c2e" media="(prefers-color-scheme: dark)">

		<link rel="stylesheet" href="./bundle.css">
		<link rel="manifest" href="./manifest.json">
		<style>
			body {
				background-color: #f8f9fa;
			}

			@media screen and (prefers-color-scheme: dark) {
				body {
					background-color: #2c2c2e;
				}
			}

			#loading {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				border: 4px solid #ccc;
				border-top: 4px solid #6c757d;
				border-radius: 50%;
				width: 32px;
				height: 32px;
				animation: spin 1.5s linear infinite;
			}

			@keyframes spin {
				0% { transform: rotate(0deg); }
				100% { transform: rotate(360deg); }
			}
		</style>
	</head>
	<body>
		<div id="loading"></div>
		<script src="bundle.js" type="module"></script>
	</body>
</html>