Initial version of in-proc HTML dashboard

1 files changed, 187 insertions, 0 deletions

diff --git a/src/zenserver/frontend/html/zen.css b/src/zenserver/frontend/html/zen.css
new file mode 100644
index 000000000..e764d02ce
--- /dev/null
+++ b/src/zenserver/frontend/html/zen.css
@@ -0,0 +1,187 @@
+/* page --------------------------------------------------------------------- */
+
+body, input {
+	font-family:	consolas, monospace;
+	font-size:		11pt;
+}
+
+body {
+	overflow-y:		scroll;
+	margin:			0;
+}
+
+* {
+	box-sizing: border-box;
+}
+
+#container {
+	margin:			1.0em 2.2em 1.5em 2.2em;
+}
+
+/* links -------------------------------------------------------------------- */
+
+.zen_action, a {
+	all:		unset;
+	cursor:		pointer;
+	color:		#069;
+}
+
+.zen_action:hover, a:hover {
+	text-decoration:	underline #c88;
+}
+
+/* sector ------------------------------------------------------------------- */
+
+h1 {
+	font-size:		1.5em;
+	width:			100%;
+	border-bottom:	1px solid #ccc;
+}
+
+h2 {
+	font-size:		1.25em;
+	margin-bottom:	0.5em;
+}
+
+h3 {
+	font-size:			1.1em;
+	margin:				0em;
+	padding:			0.4em;
+	background-color:	#eef;
+	border-left:		5px solid #cce;
+	font-weight:		normal;
+}
+
+.zen_sector {
+	margin-bottom:	3em;
+}
+
+.zen_sector > *:not(h1) {
+	margin-left:	2em;
+}
+
+/* table -------------------------------------------------------------------- */
+
+.zen_table {
+	display:				grid;
+	grid-template-columns:	max-content repeat(calc(var(--zen_columns) - 1), 1fr);
+	border:					1px solid #aaa;
+	border-left-style:		none;
+}
+
+.zen_table > .zen_row {
+	display: contents;
+}
+
+.zen_table > .zen_row:nth-child(odd) > .zen_cell {
+	background-color: #f4f4f4;
+}
+
+.zen_table > .zen_row:first-child > .zen_cell {
+	font-weight:		bold;
+	background-color:	#dde;
+}
+
+.zen_table > .zen_row > .zen_cell {
+	padding:			0.3em;
+	padding-left:		0.75em;
+	padding-right:		0.75em;
+	border-left:		1px solid #aaa;
+}
+
+/* modal -------------------------------------------------------------------- */
+
+.zen_modal {
+	position:			fixed;
+	z-index:			1;
+	top:				0;
+	left:				0;
+	width:				100%;
+	height:				100%;
+	background-color:	#0018;
+	display:			flex;
+	justify-content:	center;
+	align-items:		center;
+}
+
+.zen_modal > div {
+	border-radius:		0.5em;
+	background-color:	white;
+	width:				35em;
+	padding:			0em 2em 2em 2em;
+}
+
+.zen_modal > div > div {
+	text-align:			center;
+}
+
+.zen_modal .zen_modal_title {
+	font-size:			1.2em;
+	border-bottom:		1px solid #ccc;
+	padding:			1.2em 0em 0.5em 0em;
+	color:				#444;
+}
+
+.zen_modal .zen_modal_buttons {
+	display:			flex;
+	justify-content:	center;
+	padding-bottom:		0em;
+}
+
+.zen_modal .zen_modal_buttons > div {
+	margin:				0em 1em 0em 1em;
+	padding:			1em;
+	border-radius:		0.3em;
+	background-color:	#dde;
+	width:				6em;
+	cursor:				pointer;
+}
+
+.zen_modal .zen_modal_buttons > div:hover {
+	background-color:	#eef;
+}
+
+.zen_modal .zen_modal_message {
+	padding:			2em;
+	min-height:			8em;
+	align-content:		center;
+}
+
+/* branding ----------------------------------------------------------------- */
+
+#branding {
+	font-size:		10pt;
+	font-weight:	bolder;
+	margin-bottom:	2.6em;
+}
+
+#logo {
+	width:			min-content;
+	margin:			auto;
+}
+
+#ue_logo {
+	position:		absolute;
+	top:			2em;
+	right:			2em;
+	width:			5em;
+	margin:			auto;
+}
+
+/* error -------------------------------------------------------------------- */
+
+#error {
+	position:			fixed;
+	bottom:				0;
+	z-index:			1;
+	color:				#000;
+	background-color:	#fcc;
+	padding:			1.0em 2em 2em 2em;
+	width:				100%;
+	border-top:			1px solid black;
+}
+
+#error > pre:nth-child(2) {
+	font-size:	0.8em;
+	color:		#555;
+};