Add mobile on-screen keyboard for touch devices with visual feedback

2026-01-14 06:57:24 +00:00
parent 759d032e7c
commit 7330090ea3
3 changed files with 271 additions and 1 deletions
@@ -104,3 +104,157 @@ html, body {
  font-size: 12px;
  letter-spacing: 0.02em;
 }
+
+/* Mobile on-screen keyboard */
+.mobile-keyboard {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: linear-gradient(180deg, rgba(10, 13, 18, 0.98) 0%, rgba(7, 8, 11, 0.98) 100%);
+  backdrop-filter: blur(12px);
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  padding: 12px 8px 12px 8px;
+  display: none;
+  flex-direction: column;
+  gap: 8px;
+  z-index: 1000;
+  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.7);
+}
+
+.mobile-keyboard.active {
+  display: flex;
+}
+
+.keyboard-row {
+  display: flex;
+  gap: 6px;
+  justify-content: center;
+}
+
+.keyboard-key {
+  flex: 1;
+  max-width: 46px;
+  height: 44px;
+  background: linear-gradient(180deg, #1a2233 0%, #0f1621 100%);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 6px;
+  color: #d7e7ff;
+  font-family: ui-monospace, SFMono-Regular, monospace;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  touch-action: manipulation;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.keyboard-key:active {
+  background: linear-gradient(180deg, #0f1621 0%, #1a2233 100%);
+  transform: translateY(1px);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+.keyboard-key.wide {
+  flex: 2;
+  max-width: none;
+}
+
+.keyboard-key.space {
+  flex: 4;
+  max-width: none;
+}
+
+.keyboard-key.enter {
+  background: linear-gradient(180deg, #0a84ff 0%, #0766cc 100%);
+  border-color: rgba(10, 132, 255, 0.4);
+}
+
+.keyboard-key.enter:active {
+  background: linear-gradient(180deg, #0766cc 0%, #0a84ff 100%);
+}
+
+.keyboard-key.backspace {
+  background: linear-gradient(180deg, #cc3333 0%, #992222 100%);
+  border-color: rgba(204, 51, 51, 0.4);
+}
+
+.keyboard-key.backspace:active {
+  background: linear-gradient(180deg, #992222 0%, #cc3333 100%);
+}
+
+/* Mobile-specific adjustments */
+@media (max-width: 768px) {
+  .wrap {
+    padding: 12px;
+    padding-bottom: 0;
+  }
+
+  .crt-shell {
+    width: 100%;
+    max-width: 100%;
+    aspect-ratio: 4 / 3;
+    border-radius: 12px;
+    padding: 8px;
+    box-shadow:
+      0 8px 24px rgba(0, 0, 0, 0.6),
+      0 0 0 1px rgba(255, 255, 255, 0.06) inset;
+  }
+
+  .crt-overlay {
+    inset: 8px;
+    border-radius: 8px;
+  }
+
+  #crt {
+    border-radius: 8px;
+  }
+
+  .hint {
+    margin-top: 8px;
+    font-size: 10px;
+  }
+}
+
+@media (max-width: 480px) {
+  .wrap {
+    padding: 8px;
+    padding-bottom: 0;
+  }
+
+  .crt-shell {
+    border-radius: 8px;
+    padding: 6px;
+  }
+
+  .crt-overlay {
+    inset: 6px;
+    border-radius: 6px;
+  }
+
+  #crt {
+    border-radius: 6px;
+  }
+
+  .keyboard-key {
+    max-width: 38px;
+    height: 38px;
+    font-size: 14px;
+  }
+}
+
+/* Landscape mobile adjustments */
+@media (max-width: 900px) and (max-height: 500px) {
+  .wrap {
+    padding: 8px;
+  }
+
+  .crt-shell {
+    width: auto;
+    height: calc(100vh - 16px);
+    aspect-ratio: 4 / 3;
+  }
+}