Web implementation appears

2025-04-23 18:57:33 +03:00
parent db8422a1fd
commit 72bea2b2e1
6 changed files with 553 additions and 0 deletions
@@ -0,0 +1,83 @@
+* {box-sizing: border-box; margin: 0; padding: 0}
+html, body {
+  width: 100%;
+  height: 100%;
+  font-family: "Noto Sans", Roboto, "Droid Sans", sans-serif;
+  font-size: 12pt;
+  text-align: center;
+  background: #111;
+  color: #eee;
+}
+
+#workspace {
+  padding: 1rem 0.6rem;
+}
+
+#screenfield {
+  display: inline-block;
+  min-width: 240px;
+  height: 50vh;
+  width: 100%;
+  max-width: 800px;
+  font-family: "Fira Code", "Droid Sans Mono", monospace;
+  font-size: inherit;
+  border: 1px solid #ccc;
+  border-radius: 2px;
+  overflow-y: scroll;
+  text-align: left;
+  text-wrap: auto;
+  white-space: pre-wrap;
+}
+
+#keypad {
+  display: inline-block;
+  width: 50vw;
+  min-width: 206px;
+  max-width: 400px;
+  height: 20vh;
+  min-height: 180px;
+}
+
+@media only screen and (max-width: 480px) {
+  #keypad, #keypad * {
+    display:none!important;
+  }
+#workspace {
+    padding: 0.5rem 0!important;
+  }
+}
+
+#keypad div {
+  padding: 1px 0;
+  height: 25%;
+}
+
+#keypad button {
+  background: inherit;
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  border: 1px solid #ddd;
+  border-radius: 3px;
+  width: calc(25% - 4px);
+  height: calc(100% - 4px);
+  cursor: pointer;
+}
+
+#keypad button:hover {
+  color: cyan;
+  border-color: cyan;
+}
+
+#keypad #bspc {
+  width: calc(50% - 4px);
+}
+
+header {padding: 0.6rem 0}
+footer {padding-top: 0.6rem}
+footer div {padding: 0.6em 0}
+
+#programloadfield {display:none}
+
+a,a:active,a:visited {color: inherit}
+a:hover {color:cyan}