From ab6ca080771b706a310ebfd8a4192841cdfef05c Mon Sep 17 00:00:00 2001
From: Private Island Networks Inc <opensource@privateisland.tech>
Date: Tue, 3 Mar 2026 15:56:53 -0500
Subject: initial commit of experimental code base for PI Explorer (PI-EXP)

---
 static/css/base.css | 440 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 static/css/ss.css   |  55 +++++++
 2 files changed, 495 insertions(+)
 create mode 100644 static/css/base.css
 create mode 100644 static/css/ss.css

(limited to 'static/css')

diff --git a/static/css/base.css b/static/css/base.css
new file mode 100644
index 0000000..702a034
--- /dev/null
+++ b/static/css/base.css
@@ -0,0 +1,440 @@
+:root {
+	--mc-color: #0072b0;
+	font-size: 1.0em;
+	box-sizing: border-box;
+}
+
+/* See 3.6 in CID.  */
+*, *::before, *::after {
+	box-sizing: inherit;
+}
+
+/* defaults */
+body {
+	font-family: Helvetica, Arial, sans-serif;
+	margin: 1rem;
+}
+
+form {
+	border: 1px solid black;
+	border-radius: 1em;
+	width: 50vw;
+}
+
+a:link {
+	text-decoration: none;
+}
+
+a:visited {
+	text-decoration: none;
+}
+
+button {
+	color: white;
+	border: 0.1px solid green;
+	border-radius: 0.2em;
+	background-color: green;
+}
+
+button.mc-quiet {
+	box-shadow: inherit;
+	padding: 5px;
+}
+
+input, select {
+	border-width: 1px;
+	border-color: black;
+	margin: 0.2em 0;
+}
+
+input[type="submit"] {
+	background-color: green;
+	color: white;
+}
+
+div#betsy {
+	width: 98vw;
+	height: 80vh;
+}
+
+#mc-main-window {
+	height: 800px;
+}
+
+#mc-header {
+	color: white;
+	background-color: var(--mc-color);
+}
+
+#mc-banner {
+	font-size: 2.0em;
+	padding: 0.5em;
+}
+
+/* 	top container for menu */
+#mc-menu {
+	position: relative;
+	width: 100%;
+}
+
+/* hamburger */
+#mc-menu-hamburger {
+	position: absolute;
+	top: -1.4em;
+	right: 0.1em;
+	border: 0;
+	background-color: transparent;
+	font-size: 2.5em;
+	width: 1em;
+	height: 1em;
+	line-height: 0.4;
+	text-indent: 4em;
+	white-space: nowrap;
+	overflow: hidden;
+}
+
+/* div parent for mc-menu-list */
+#mc-menu-dropdown {
+	z-index: 20;
+	display: none;
+	position: absolute;
+	right: 0;
+	margin: 0;
+}
+
+@media ( max-width : 35em) {
+	#mc-menu.is-open #mc-menu-dropdown {
+		display: block;
+	}
+}
+
+@media ( min-width : 35em) {
+	#mc-menu-dropdown {
+		display: block;
+		position: static;
+	}
+}
+
+#mc-menu-list {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+#mc-menu-list>li {
+	text-align: center;
+	border-bottom: 2px solid #185aa5;
+}
+
+#mc-menu-list>li a {
+	display: inline-block;
+	color: white;
+	font-size: 1.1rem;
+	font-weight: normal;
+	padding: 0.1em 1em 0.1em 1em;
+	margin: 0 auto;
+}
+
+@media ( min-width : 35em) {
+	#mc-menu-list {
+		display: flex;
+		position: static;
+		border: 0;
+	}
+	#mc-menu-list>li {
+		flex: 1;
+		padding-bottom: 0;
+	}
+	#mc-menu-list>li a {
+		display: inline-block;
+		border-top: 5px solid var(--mc-color);
+		border-bottom: 5px solid var(--mc-color);
+		transition: border-bottom 0.3s ease-out;
+	}
+	#mc-menu-list>li a:hover {
+		border-bottom: 5px solid #00cc00;
+	}
+}
+
+/* svg */
+.mc-divider {
+	padding: 0;
+	margin: 1em;
+	width: 90%;
+	height: 0.2em;
+	stroke: #185aa5;
+	stroke-width: 1.3px;
+	stroke-opacity: 0.6;
+}
+
+#mc-log-hdr {
+	display: flex;
+	flex-wrap: nowrap;
+	align-items: flext-start;
+	height: 5rem;
+}
+
+#mc-log {
+	max-height: 70%;
+	background-color: white;
+	overflow-x: hidden; /* Hide horizontal scrollbar */
+	overflow-y: scroll; /* Add vertical scrollbar */
+}
+
+.mc-log-row {
+	margin: 1 px;
+	padding: 1 px;
+	display: flex;
+	flex-wrap: nowrap;
+	align-items: flext-start;
+}
+
+.mc-log-col {
+	font-size: 1.5rem;
+}
+
+.mc-log-col-time {
+	padding: 1em 0px;
+	color: black;
+	flex-basis: 200px;
+}
+
+.mc-log-col-pc {
+	padding: 1em 0px;
+	color: green;
+	flex-basis: 300px;
+}
+
+.mc-log-col-phy0 {
+	padding: 1em 0px;
+	color: blue;
+	flex-basis: 300px;
+}
+
+.mc-log-col-phy1 {
+	padding: 1em 0px;
+	color: red;
+	flex-basis: 300px;
+}
+
+@media ( min-width : 80em) {
+	.mc-log-col-pc {
+		flex-basis: 600px;
+	}
+	.mc-log-col-phy0 {
+		flex-basis: 600px;
+	}
+}
+
+.mc-table-striped thead th {
+	border-bottom: 1px solid #d6d6d6; /* non-RGBA fallback */
+}
+
+.mc-table-striped tbody th, .mc-table-striped tbody td {
+	border-bottom: 1px solid #e6e6e6; /* non-RGBA fallback  */
+}
+
+.mc-table-striped tbody tr:nth-child(odd) td, .mc-table-striped tbody tr:nth-child(odd) th
+	{
+	background-color: rgba(0, 139, 0, 0.1);
+}
+
+.mc-table-striped th, .mc-table-striped td {
+	padding: 1.0em 2.0em;
+}
+
+/* Icons */
+.mc-icons {
+	margin: 0 auto;
+	display: block;
+	text-align: center;
+	vertical-align: center;
+}
+
+.mc-icon {
+	width: 28px;
+	height: 28px;
+	padding: 0.4em 0.7em;
+	margin: 1em 0.2em;
+	background-color: #f0f0f0;
+	border-radius: 2em;
+	cursor: pointer;
+}
+
+.mc-icon-small {
+	width: 14px;
+	height: 14px;
+	padding: 0.2em 0.35em;
+	background-color: #f0f0f0;
+	border-radius: 1em;
+	cursor: pointer;
+}
+
+h1 {
+	/* color: #185aa5; */
+	font-size: 2rem;
+	padding: 0.4em;
+}
+
+p {
+	color: #185aa5;
+	margin: 1.2em;
+	width: 90%;
+	line-height: 1.4em;
+	text-align: justify;
+}
+
+button.mc-action {
+	margin: 5px 5px;
+	border: 1px solid black;
+	color: white;
+	cursor: pointer;
+	padding: 10px 10px;
+	border-radius: 4px;
+	text-align: center;
+	text-decoration: none;
+	display: inline-block;
+	font-size: 0.8rem;
+}
+
+#mc-mode-box {
+	border: 1px solid black;
+	border-radius: 15px;
+	width: 700px;
+	padding: 1rem;
+}
+
+/* outer modal container */
+#mc-modal {
+	display: none;
+}
+
+/* disable the viewport behind the modal box */
+#mc-modal-backdrop {
+	position: fixed;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	background-color: rgba(0, 0, 0, 0.5);
+	z-index: 50;
+}
+
+/* modal box */
+#mc-modal-body {
+	position: fixed;
+	border-radius: 1em;
+	border: 2px #185aa5 solid;
+	top: 20%;
+	bottom: 20%;
+	right: 20%;
+	left: 20%;
+	padding: 2em 3em 2em 3em;
+	background-color: white;
+	overflow: auto;
+	z-index: 60;
+}
+
+/* offsets are calculated in js */
+#mc-modal-body.mc-image {
+	
+}
+
+#mc-modal-body.mc-large {
+	top: 10%;
+	bottom: 10%;
+	right: 10%;
+	left: 10%;
+}
+
+#mc-modal-body.mc-small {
+	padding: 1em 1.5em;
+	margin: 0;
+	top: 10%;
+	bottom: 10%;
+	right: 10%;
+	left: 10%;
+	overflow: scroll;
+}
+
+#mc-modal-body.mc-xtra-small {
+	padding: 1em 1.5em;
+	margin: 0;
+	top: 15%;
+	bottom: 15%;
+	right: 15%;
+	left: 15%;
+	overflow: scroll;
+}
+
+@media ( min-width : 45em) {
+	#mc-modal-body.mc-small {
+		top: 15%;
+		bottom: 15%;
+		right: 15%;
+		left: 15%;
+	}
+	#mc-modal-body.mc-xtra-small {
+		top: 35%;
+		bottom: 35%;
+		right: 25%;
+		left: 25%;
+	}
+}
+
+@media ( min-width : 80em) {
+	#mc-modal-body.mc-small {
+		top: 25%;
+		bottom: 25%;
+		right: 25%;
+		left: 25%;
+	}
+	#mc-modal-body.mc-xtra-small {
+		top: 35%;
+		bottom: 35%;
+		right: 30%;
+		left: 30%;
+	}
+}
+
+/* modal close button */
+button#mc-modal-close {
+	position: absolute;
+	background-color: white;
+	color: black;
+	top: 0.1em;
+	right: 0.1em;
+	cursor: pointer;
+	font-size: 2em;
+	height: 1em;
+	width: 1em;
+	text-indent: 10em;
+	overflow: hidden;
+	border: 0;
+}
+
+/* modal close button */
+#mc-modal-buttons {
+	position: absolute;
+	bottom: 1em;
+	left: 3em;
+	padding: 0.3em;
+	border: 0;
+}
+
+#mc-modal-close::after {
+	position: absolute;
+	line-height: 0.5;
+	top: 0.2em;
+	left: 0.1em;
+	text-indent: 0;
+	content: "\00D7";
+}
+
+/* spinner */
+#mc-loading {
+	position: fixed;
+	display: none;
+	top: 49%;
+	left: 49%;
+}
\ No newline at end of file
diff --git a/static/css/ss.css b/static/css/ss.css
new file mode 100644
index 0000000..09e0efb
--- /dev/null
+++ b/static/css/ss.css
@@ -0,0 +1,55 @@
+
+.mc-ss-input {
+	width: 90%;
+	font-size: 1.1rem;
+	min-height: 2.2em;
+	text-align: left;
+	margin: 0.5em;
+}
+
+.mc-ss-main-panel table {
+	margin: 2em 0;
+}
+
+.mc-ss-main-panel table td {
+	padding: 0.7em 0.3em;
+	font-size: 0.9rem;
+}
+
+.mc-ss-table th.mc-sortable:hover {
+	text-decoration: underline;
+	cursor: pointer;
+}
+
+.mc-table-bit-map, .mc-ss-table {
+	border-collapse: collapse;
+	width: 80%;
+	margin: 0 auto;
+}
+
+.mc-table-basic-no-border th, .mc-table-basic th {
+	font-weight: bold;
+}
+
+.mc-ss-table {
+	border: 1px solid black;
+	padding: 0.3em;
+	text-decoration: underline;
+	cursor: pointer;
+}
+
+.mc-ss-table th {
+	border: 1px solid black;
+	padding: 0.3em;
+}
+
+
+.mc-ss-table td {
+	border: 1px solid black;
+	padding: 0.3em;
+}
+
+.mc-table-bit-map td {
+	border: 1px solid black;
+	padding: 0.3em;
+}
\ No newline at end of file
-- 
cgit v1.2.3-8-gadcc