From 699ddda39bf2a81e6073c483637832e211da056a Mon Sep 17 00:00:00 2001 From: eduard256 Date: Wed, 8 Apr 2026 09:39:36 +0000 Subject: [PATCH] Update design system with centered layout, PIN input, floating back button Add true-center layout pattern, back-wrapper for floating navigation, PIN digit input component with all states, and centered page demo with HomeKit logo example. Document PIN input JS pattern. --- www/design-system.html | 216 ++++++++++++++++++++++++++++++++++++++++- 1 file changed, 214 insertions(+), 2 deletions(-) diff --git a/www/design-system.html b/www/design-system.html index 7c80c4d..739463f 100644 --- a/www/design-system.html +++ b/www/design-system.html @@ -88,8 +88,8 @@ 2. PAGE LAYOUTS ============================================================ */ - /* --- 2a. Centered layout (index.html, homekit.html) --- - For single-purpose pages: one form, one action. */ + /* --- 2a. Centered layout (index.html) --- + For entry pages: one form, one action. Content near top. */ .screen-centered { min-height: 100vh; padding: 1.5rem; @@ -110,6 +110,43 @@ .container-narrow { max-width: 540px; } } + /* --- 2a-alt. True-centered layout (homekit.html) --- + For single-action pages: content vertically centered on screen. + Back button floats outside the container via .back-wrapper. */ + .screen-true-center { + min-height: 100vh; + padding: 1.5rem; + display: flex; + align-items: center; + justify-content: center; + animation: fadeIn var(--transition-base); + } + + .container-true-center { + max-width: 480px; + width: 100%; + } + + @media (min-width: 768px) { + .screen-true-center { padding: 3rem 1.5rem; } + .container-true-center { max-width: 540px; } + } + + /* --- 2e. Floating back button (for centered layouts) --- + Positioned at top, horizontally aligned wider than container + so it sits outside the content area. */ + .back-wrapper { + position: absolute; top: 1.5rem; + left: 50%; transform: translateX(-50%); + width: 100%; max-width: 600px; + padding: 0 1.5rem; + z-index: 10; + } + + @media (min-width: 768px) { + .back-wrapper { max-width: 660px; } + } + /* --- 2b. Standard layout (most pages) --- For content pages with back button and scrollable content. */ .screen { @@ -451,6 +488,70 @@ .toggle.on::after { transform: translateX(16px); } + /* --- 5i. PIN digit input (homekit.html) --- */ + .pin-row { + display: flex; align-items: center; justify-content: center; + gap: 0; + } + + .pin-group { display: flex; gap: 0.375rem; } + + .pin-separator { + font-size: 1.5rem; font-weight: 300; + color: var(--text-tertiary); + padding: 0 0.5rem; + line-height: 1; + user-select: none; + } + + .pin-digit { + width: 57px; height: 69px; + background: var(--bg-secondary); + border: 2px solid var(--border-color); + border-radius: 8px; + color: var(--text-primary); + font-family: var(--font-mono); + font-size: 1.375rem; font-weight: 600; + text-align: center; + outline: none; + transition: all var(--transition-fast); + caret-color: var(--purple-primary); + -moz-appearance: textfield; + } + + .pin-digit::-webkit-inner-spin-button, + .pin-digit::-webkit-outer-spin-button { + -webkit-appearance: none; margin: 0; + } + + .pin-digit:focus { + border-color: var(--purple-primary); + box-shadow: 0 0 0 3px var(--purple-glow); + } + + .pin-digit.filled { + border-color: var(--purple-light); + background: rgba(139, 92, 246, 0.06); + } + + .pin-digit.error { + border-color: var(--error); + box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2); + animation: shake 0.4s ease; + } + + .pin-digit.success { + border-color: var(--success); + box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2); + } + + @media (max-width: 400px) { + .pin-digit { width: 36px; height: 48px; font-size: 1.125rem; } + .pin-separator { padding: 0 0.25rem; font-size: 1.25rem; } + .pin-group { gap: 0.25rem; } + } + + /* ============================================================ 6. TOOLTIPS & INFO ICONS ============================================================ */ @@ -1397,6 +1498,46 @@ + +
+
4b. PIN Digit Input
+
Segmented code entry (homekit.html pairing)
+ +
+
PIN Input (3-2-3 format)
+
+
+ + + +
+ - +
+ + +
+ - +
+ + + +
+
+ +
States
+
+ + empty + + filled + + error + + success +
+
+
+
5. Badges & Tags
@@ -1800,6 +1941,37 @@ cameras:
+ +
+
15. Centered Page Pattern
+
True-center layout with floating back button (homekit.html)
+ +
+ +
+ +
+ + +
+
+ + + + + + + +
Apple HomeKit
+
+
Content centered on screen, back button floats at top
+
+
+
+
15. SVG Icons
@@ -2030,6 +2202,46 @@ cameras: document.getElementById('btn-back').addEventListener('click', function() { history.back(); }); + + For centered layouts (homekit.html), the back button is placed + OUTSIDE the container in a .back-wrapper div with position:absolute, + aligned wider than the content so it floats at the top-left of + the content area but not the screen edge. + ================================================================ */ + + /* ================================================================ + PIN INPUT PATTERN + For segmented code entry. Each digit is a separate . + Auto-advance on input, backspace goes to previous field. + Supports paste (distributes digits across fields). + + HTML structure: +
+
+ - +
+ - +
+
+ + JS creates inputs dynamically: + var pinGroups = [3, 2, 3]; // digits per group + var inputs = []; + pinGroups.forEach(function(count, gi) { + var group = document.getElementById('group-' + gi); + for (var i = 0; i < count; i++) { + var input = document.createElement('input'); + input.type = 'text'; + input.inputMode = 'numeric'; + input.maxLength = 1; + input.className = 'pin-digit'; + input.autocomplete = 'off'; + group.appendChild(input); + inputs.push(input); + } + }); + + States: .filled (has value), .error (wrong), .success (paired) ================================================================ */