feat(worker): auth gate, Dutch login screen, router and 3-tab shell

2026-06-17 16:11:18 +02:00
parent 3511fd8a89
commit 75679256cd
11 changed files with 465 additions and 4 deletions
--- a/apps/worker/src/styles.css
+++ b/apps/worker/src/styles.css
@@ -22,3 +22,131 @@ body {
  color: var(--text);
  background: #ffffff;
 }
+
+/* ---- App shell layout (mobile-first) ---- */
+.app-main {
+  min-height: 100vh;
+  padding: 16px 16px 80px; /* leave room for the fixed bottom tab bar */
+}
+
+.screen {
+  max-width: 640px;
+  margin: 0 auto;
+}
+
+.screen-title {
+  font-size: 28px;
+  font-weight: 600;
+  margin: 8px 0 16px;
+}
+
+/* ---- Bottom tab bar ---- */
+.tabbar {
+  position: fixed;
+  inset: auto 0 0 0;
+  display: flex;
+  background: #ffffff;
+  border-top: 1px solid var(--border);
+  padding-top: 4px;
+}
+
+.tab {
+  flex: 1;
+  text-align: center;
+  padding: 12px 4px;
+  font-size: 12px;
+  font-weight: 500;
+  text-decoration: none;
+  color: var(--text-muted);
+}
+
+.tab-active {
+  color: var(--primary);
+}
+
+/* ---- Login screen (mobile-first) ---- */
+.login {
+  max-width: 420px;
+  margin: 0 auto;
+  padding: 48px 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  min-height: 100vh;
+  justify-content: center;
+}
+
+.login-title {
+  font-size: 36px;
+  font-weight: 600;
+  text-align: center;
+  color: var(--primary);
+  margin: 0;
+}
+
+.login-form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.field-label {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text-muted);
+}
+
+.field-input {
+  width: 100%;
+  padding: 14px 16px;
+  font-size: 16px;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background: #ffffff;
+  color: var(--text);
+}
+
+.field-input:focus {
+  outline: none;
+  border-color: var(--primary);
+}
+
+.btn-primary {
+  width: 100%;
+  padding: 16px;
+  font-size: 16px;
+  font-weight: 600;
+  color: #ffffff;
+  background: var(--primary);
+  border: none;
+  border-radius: 16px;
+  cursor: pointer;
+}
+
+.btn-primary:disabled {
+  background: var(--border);
+  color: var(--text-muted);
+  cursor: not-allowed;
+}
+
+.login-error {
+  color: var(--danger);
+  font-size: 14px;
+  margin: 0;
+  text-align: center;
+}
+
+.login-toggle {
+  background: none;
+  border: none;
+  color: var(--primary);
+  font-size: 14px;
+  cursor: pointer;
+  padding: 8px;
+}