Add files via upload

Author: xcontcom

3d/style.css

@@ -0,0 +1,160 @@
+:root {
+	--bg:#000;
+	--panel:#0a0a0a;
+	--cyan:#5ff;
+	--magenta:#f5f;
+	--white:#fff;
+	--dim:#777;
+}
+
+body {
+	background:var(--bg);
+	color:var(--white);
+	font-family:monospace;
+	padding:20px;
+}
+
+.panel {
+	border:1px solid var(--cyan);
+	background:var(--panel);
+	padding:14px 16px;
+	display:inline-block;
+}
+
+.panel-magenta { border-color:var(--magenta); }
+.panel-cyan { border-color:var(--cyan); }
+
+.panel-title {
+	color:var(--cyan);
+	font-weight:bold;
+	margin-bottom:10px;
+}
+
+label {
+	display:block;
+	margin-bottom:8px;
+}
+
+input, select, button {
+	background:#000;
+	color:var(--white);
+	border:1px solid var(--cyan);
+	font-family:monospace;
+	padding:4px 6px;
+}
+
+button {
+	cursor:pointer;
+}
+
+button:hover {
+	border-color:var(--magenta);
+	color:var(--magenta);
+}
+
+canvas {
+	display:block;
+	margin-top:18px;
+	border:1px solid var(--cyan);
+}
+
+#myCanvas {
+	margin-bottom: 12px;
+}
+
+.kernel-panel {
+	width: 100%;
+	max-width: 514px; /* 512 + 2px border */
+	margin: 0 auto;
+	box-sizing: border-box;
+}
+
+.kernel-grid {
+	display:grid;
+	grid-template-columns:1fr; /* 9 vertical rows */
+	gap:12px;
+}
+
+.kcell {
+	text-align:center;
+}
+
+.kcell input[type=range] {
+	width:100%;
+}
+
+.kcell div {
+	color:var(--dim);
+	font-size:12px;
+	margin-top:4px;
+}
+
+.kcell.center div {
+	color:var(--white);
+}
+
+.hint {
+	color:var(--dim);
+	font-size:12px;
+	margin-top:6px;
+}
+
+#kernelDump {
+	margin-top:14px;
+	font-family:monospace;
+	color:var(--dim);
+}
+
+/* --- squeeze kernel sliders vertically --- */
+.kernel-grid input[type="range"] {
+	padding: 0;
+	border: 0;
+	height: 16px;
+	margin: 0;
+}
+
+.kernel-grid .kcell {
+	padding: 0;
+	margin: 0;
+	line-height: 1;
+}
+
+.pad-switch {
+	display: flex;
+	gap: 12px;
+	margin-bottom: 6px;
+	font-family: monospace;
+	font-size: 12px;
+}
+
+.pad-switch input {
+	margin-right: 4px;
+}
+
+a{
+	color: var(--cyan);
+}
+
+.kslider {
+	margin-bottom: 12px;
+}
+
+.kslider-title {
+	color: var(--cyan);
+	font-size: 12px;
+	margin-bottom: 4px;
+}
+
+.kslider input[type="range"] {
+	width: 100%;
+	padding: 0;
+	border: 0;
+	height: 16px;
+	margin: 0;
+}
+
+.kslider.zslice {
+	margin-top: 10px;
+	padding-top: 8px;
+	border-top: 1px solid var(--dim);
+}