feat: Scan-Ansicht und Treffer-Rueckmeldung

2026-07-28 17:00:44 +02:00
parent 78592d03a1
commit 4aaff0b08d
4 changed files with 224 additions and 28 deletions
@@ -1,2 +1,110 @@
-:root { color-scheme: dark; }
-body { margin: 0; font-family: system-ui, sans-serif; }
+:root {
+  color-scheme: dark;
+  --bg: #14161a;
+  --fg: #f2f4f7;
+  --muted: #9aa3af;
+  --green: #1f8a4c;
+  --yellow: #b8860b;
+  --red: #a02c2c;
+  --line: #2a2e36;
+}
+
+* { box-sizing: border-box; }
+
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--fg);
+  font-family: system-ui, -apple-system, sans-serif;
+  overscroll-behavior: none;
+}
+
+#app { display: flex; flex-direction: column; height: 100dvh; }
+
+.camera { position: relative; flex: 1; overflow: hidden; background: #000; }
+.camera video { width: 100%; height: 100%; object-fit: cover; }
+
+.frame {
+  position: absolute;
+  inset: 20% 8%;
+  border: 3px solid rgba(255, 255, 255, 0.7);
+  border-radius: 8px;
+  pointer-events: none;
+}
+
+.stacks {
+  display: flex;
+  gap: 8px;
+  padding: 10px 12px;
+  overflow-x: auto;
+  border-top: 1px solid var(--line);
+  min-height: 56px;
+  align-items: center;
+}
+
+.stacks button {
+  flex: none;
+  min-height: 44px;
+  padding: 0 14px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: #1c2027;
+  color: var(--fg);
+  font-size: 17px;
+  font-weight: 600;
+}
+
+.last {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 12px;
+  border-top: 1px solid var(--line);
+  min-height: 56px;
+  font-size: 15px;
+  color: var(--muted);
+}
+
+.last span { flex: 1; }
+
+.action {
+  min-height: 56px;
+  border: none;
+  border-radius: 10px;
+  background: #2b6cb0;
+  color: #fff;
+  font-size: 18px;
+  font-weight: 600;
+  padding: 0 18px;
+}
+
+.action.secondary { background: #2a2e36; }
+
+.capture { margin: 12px; }
+
+.overlay {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 18px;
+  padding: 24px;
+  text-align: center;
+  z-index: 10;
+}
+
+.overlay.green { background: var(--green); }
+.overlay.yellow { background: var(--yellow); }
+.overlay.red { background: var(--red); }
+
+.overlay .stack-id { font-size: 68px; font-weight: 800; letter-spacing: 2px; }
+.overlay .detail { font-size: 20px; line-height: 1.5; }
+.overlay .pn { font-size: 15px; opacity: 0.85; word-break: break-all; }
+
+.choices { display: grid; gap: 12px; width: 100%; max-width: 420px; }
+.choices button { min-height: 64px; font-size: 20px; }
+
+.status { padding: 8px 12px; font-size: 14px; color: var(--muted); }
+.status.warn { color: #f0b429; }