Initial P-Touch web editor

2026-06-21 23:07:20 +02:00
commit 7029ee9519
16 changed files with 1983 additions and 0 deletions
@@ -0,0 +1,183 @@
+:root {
+  color-scheme: dark;
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  background: #171717;
+  color: #f1f1f1;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: #171717;
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
+
+.mobile-shell {
+  width: min(100%, 620px);
+  min-height: 100vh;
+  margin: 0 auto;
+  padding: max(14px, env(safe-area-inset-top)) 14px calc(96px + env(safe-area-inset-bottom));
+}
+
+header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 14px;
+}
+
+h1 {
+  margin: 0;
+  font-size: 24px;
+}
+
+header p {
+  margin: 3px 0 0;
+  color: #aaa;
+}
+
+header a {
+  color: #9fc5ff;
+  text-decoration: none;
+  font-weight: 700;
+}
+
+.card {
+  display: grid;
+  gap: 14px;
+  background: #252525;
+  border: 1px solid #383838;
+  border-radius: 8px;
+  padding: 14px;
+  margin-bottom: 12px;
+}
+
+label {
+  display: grid;
+  gap: 7px;
+  color: #ddd;
+  font-weight: 700;
+}
+
+textarea,
+input,
+select {
+  width: 100%;
+  min-height: 44px;
+  border: 1px solid #555;
+  border-radius: 7px;
+  background: #303030;
+  color: #fff;
+  padding: 10px;
+}
+
+textarea {
+  resize: vertical;
+  line-height: 1.35;
+}
+
+button {
+  min-height: 44px;
+  border: 1px solid #575757;
+  border-radius: 7px;
+  background: #3a3a3a;
+  color: #fff;
+  padding: 10px 12px;
+  font-weight: 800;
+}
+
+button.primary {
+  background: #2374e1;
+  border-color: #2374e1;
+}
+
+.grid-2 {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+}
+
+.input-action {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 8px;
+}
+
+.check-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+}
+
+.check-row label {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  min-height: 44px;
+  padding: 0 10px;
+  border: 1px solid #494949;
+  border-radius: 7px;
+  background: #303030;
+}
+
+.check-row input {
+  width: 20px;
+  min-height: 20px;
+}
+
+.preview {
+  min-height: 132px;
+  display: grid;
+  place-items: center;
+  overflow: auto;
+  background: #1f1f1f;
+  border: 1px dashed #555;
+  border-radius: 7px;
+  padding: 12px;
+}
+
+.preview img {
+  max-width: 100%;
+  image-rendering: crisp-edges;
+}
+
+.message {
+  min-height: 22px;
+  margin: 0;
+  color: #d5d5d5;
+  line-height: 1.35;
+}
+
+.message.error {
+  color: #ffb4b4;
+}
+
+.message.success {
+  color: #a7e8af;
+}
+
+.bottom-actions {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+  width: min(100%, 620px);
+  margin: 0 auto;
+  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
+  background: rgba(23, 23, 23, 0.96);
+  border-top: 1px solid #333;
+}