Visitor sign in kiosk: multi-site, badge printing, WWCC expiry warnings, admin accounts with 2FA

public/css/admin.css

@@ -351,3 +351,52 @@ tr.row-bad td { background: #fdf0f2; }
 /* The confirmation for a destructive action should not look like a Save. */
 #modal.destructive { border-top-color: var(--alert); }
 #modal.destructive .primary { border-color: var(--alert); background: var(--alert); }
+
+/* ----------------------------------------------------- branding editor */
+
+.banner-frame {
+  /* A checkerboard, so a transparent PNG reads as transparent rather than white. */
+  background-color: #fff;
+  background-image:
+    linear-gradient(45deg, #e3e8ed 25%, transparent 25%, transparent 75%, #e3e8ed 75%),
+    linear-gradient(45deg, #e3e8ed 25%, transparent 25%, transparent 75%, #e3e8ed 75%);
+  background-size: 14px 14px;
+  background-position: 0 0, 7px 7px;
+  border: 1px solid var(--rule);
+  border-radius: 3px;
+  padding: 10px;
+  margin-bottom: 12px;
+  min-height: 76px;
+  display: grid;
+  place-items: center;
+}
+.banner-frame img { max-width: 100%; max-height: 90px; display: block; }
+.banner-empty { margin: 0; color: var(--muted); font-size: 13px; }
+
+.colour-row { display: flex; gap: 8px; align-items: center; }
+.colour-row input[type="color"] {
+  width: 42px;
+  height: 40px;
+  padding: 2px;
+  border: 1px solid var(--rule);
+  border-radius: 3px;
+  background: none;
+  cursor: pointer;
+}
+.colour-row input[type="text"] {
+  flex: 1 1 auto;
+  min-width: 0;
+  font-family: ui-monospace, Menlo, Consolas, monospace;
+  font-size: 13px;
+}
+.modal-row-3 { grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
+
+.swatch {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  border-radius: 2px;
+  border: 1px solid var(--rule);
+  vertical-align: -2px;
+  margin-right: 2px;
+}

public/css/kiosk.css

@@ -6,8 +6,10 @@
   --rule: #c9d3dc;
   --deep: #0b4f4a;
   --deep-dark: #083a36;
+  --on-brand: #ffffff;
   --exit: #2c4a6b;
   --exit-dark: #1f3650;
+  --on-exit: #ffffff;
   --alert: #96162f;
   --focus: #0b4f4a;
 }
@@ -45,7 +47,17 @@ body {
   gap: 16px;
   padding: 14px 22px;
   background: var(--deep);
-  color: #eef5f3;
+  color: var(--on-brand);
+}
+
+/* An uploaded banner sits in the bar in place of the site name. Transparent PNGs
+   are the point, so nothing is painted behind it. */
+.banner {
+  max-height: 64px;
+  max-width: min(70%, 460px);
+  width: auto;
+  object-fit: contain;
+  display: block;
 }
 
 .site { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
@@ -108,11 +120,11 @@ h2 { font-size: 25px; margin: 4px 0 20px; }
   border-left: 7px solid var(--deep-dark);
   border-radius: 3px;
   background: var(--deep);
-  color: #fff;
+  color: var(--on-brand);
   font: inherit;
   cursor: pointer;
 }
-.door-out { background: var(--exit); border-left-color: var(--exit-dark); }
+.door-out { background: var(--exit); border-left-color: var(--exit-dark); color: var(--on-exit); }
 .door:active { transform: translateY(1px); }
 
 .door-title { display: block; font-size: 27px; font-weight: 650; letter-spacing: -0.01em; }
@@ -131,6 +143,7 @@ h2 { font-size: 25px; margin: 4px 0 20px; }
   cursor: pointer;
 }
 .text-action:hover { background: var(--card); }
+.text-action, .field input, .picker, .choice, .host-option { color: var(--ink); }
 
 /* ------------------------------------------------------- step rail */
 
@@ -280,11 +293,11 @@ a:focus-visible {
   padding: 7px 14px;
   border-radius: 2px;
   background: var(--deep);
-  color: #fff;
+  color: var(--on-brand);
   font-size: 14px;
   font-weight: 600;
 }
-#screen-done-out .mark { background: var(--exit); }
+#screen-done-out .mark { background: var(--exit); color: var(--on-exit); }
 
 /* ------------------------------------------------------------ buttons */
 
@@ -306,7 +319,7 @@ a:focus-visible {
 .nav .primary {
   border: 1px solid var(--deep);
   background: var(--deep);
-  color: #fff;
+  color: var(--on-brand);
   font-weight: 600;
 }
 .nav .ghost {