Redesign HomeKit page, add design system reference

Rebuild homekit.html with centered layout, cleaner PIN input,
and consistent styling matching the rest of the frontend.
Add www/design-system.html as a living component reference
for all UI elements used across the Strix frontend.

www/homekit.html

@@ -42,103 +42,84 @@
         }
 
         .screen {
-            min-height: 100vh; padding: 1.5rem;
+            min-height: 100vh;
-            display: flex; align-items: flex-start; justify-content: center;
+            padding: 1.5rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
             animation: fadeIn var(--transition-base);
         }
 
-        .container { max-width: 520px; width: 100%; margin-top: 6vh; }
+        .container { max-width: 480px; width: 100%; }
 
         @media (min-width: 768px) {
             .screen { padding: 3rem 1.5rem; }
+            .container { max-width: 540px; }
         }
 
-        .btn-back {
+        .hero { text-align: center; margin-bottom: 3rem; }
-            display: inline-flex; align-items: center; gap: 0.5rem;
-            background: none; border: none;
-            color: var(--text-secondary); font-size: 0.875rem;
-            font-family: var(--font-primary); cursor: pointer;
-            padding: 0.5rem 0; margin-bottom: 2rem;
-            transition: color var(--transition-fast);
-        }
-        .btn-back:hover { color: var(--purple-primary); }
 
-        .card {
+        .title {
-            background: var(--bg-secondary);
+            font-size: 4rem; font-weight: 700;
-            border: 1px solid var(--border-color);
+            letter-spacing: 0.1em; margin-bottom: 0.5rem;
-            border-radius: 12px;
+            background: linear-gradient(135deg, var(--purple-light), var(--purple-primary));
-            padding: 2rem;
+            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
-            text-align: center;
+            background-clip: text;
         }
 
-        .card-icon {
+        .subtitle { font-size: 0.875rem; color: var(--text-secondary); }
-            width: 48px; height: 48px;
+
-            margin: 0 auto 1.25rem;
+        .form-group { margin-bottom: 1.5rem; }
-            color: var(--purple-light);
+
+        .label {
+            display: flex; align-items: center; gap: 0.5rem;
+            font-size: 0.875rem; font-weight: 500;
+            color: var(--text-secondary); margin-bottom: 0.75rem;
+            justify-content: center;
         }
 
-        .card-title {
+        /* Info icon + tooltip */
-            font-size: 1.25rem; font-weight: 600;
+        .info-icon {
-            margin-bottom: 0.5rem;
+            position: relative; display: inline-flex;
+            align-items: center; justify-content: center;
+            width: 16px; height: 16px; cursor: help;
+            color: var(--text-tertiary); transition: color var(--transition-fast);
         }
 
-        .card-badge {
+        .info-icon:hover { color: var(--purple-primary); }
-            display: inline-block;
+        .info-icon svg { width: 16px; height: 16px; }
-            padding: 0.25rem 0.75rem;
+
-            background: rgba(139, 92, 246, 0.15);
+        .tooltip {
-            border: 1px solid rgba(139, 92, 246, 0.3);
+            position: absolute; top: calc(100% + 8px); left: 50%;
-            border-radius: 6px;
+            transform: translateX(-50%);
-            font-size: 0.75rem; font-weight: 600;
+            background: var(--bg-elevated);
-            color: var(--purple-light);
+            border: 1px solid var(--purple-primary);
-            text-transform: uppercase;
+            border-radius: 8px; padding: 1rem;
-            letter-spacing: 0.05em;
+            width: 320px; max-width: 90vw;
-            margin-bottom: 1.5rem;
+            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--purple-glow);
+            z-index: 1000; opacity: 0; visibility: hidden;
+            transition: opacity var(--transition-fast), visibility var(--transition-fast);
+            pointer-events: none;
         }
 
-        .device-info {
+        .tooltip::after {
-            background: var(--bg-tertiary);
+            content: ''; position: absolute; bottom: 100%; left: 50%;
-            border: 1px solid var(--border-color);
+            transform: translateX(-50%);
-            border-radius: 8px;
+            border: 6px solid transparent; border-bottom-color: var(--purple-primary);
-            padding: 1rem;
-            margin-bottom: 1.5rem;
-            text-align: left;
         }
 
-        .device-row {
+        .info-icon:hover .tooltip { opacity: 1; visibility: visible; }
-            display: flex; justify-content: space-between;
-            padding: 0.375rem 0;
-            font-size: 0.8125rem;
-        }
 
-        .device-row:not(:last-child) {
+        .tooltip-title { font-weight: 600; color: var(--purple-primary); margin-bottom: 0.5rem; font-size: 0.875rem; }
-            border-bottom: 1px solid rgba(139, 92, 246, 0.07);
+        .tooltip-text { font-size: 0.75rem; line-height: 1.5; color: var(--text-secondary); }
-        }
-
-        .device-label { color: var(--text-tertiary); }
-        .device-value { color: var(--text-primary); font-family: var(--font-mono); font-size: 0.75rem; }
 
         /* PIN input */
-        .pin-section { margin-bottom: 1.5rem; }
-
-        .pin-label {
-            font-size: 0.875rem; font-weight: 500;
-            color: var(--text-secondary);
-            margin-bottom: 0.75rem;
-        }
-
-        .pin-hint {
-            font-size: 0.75rem; color: var(--text-tertiary);
-            margin-top: 0.625rem;
-        }
-
         .pin-row {
             display: flex; align-items: center; justify-content: center;
             gap: 0;
         }
 
-        .pin-group {
+        .pin-group { display: flex; gap: 0.375rem; }
-            display: flex; gap: 0.375rem;
-        }
 
         .pin-separator {
             font-size: 1.5rem; font-weight: 300;
@@ -149,8 +130,8 @@
         }
 
         .pin-digit {
-            width: 44px; height: 56px;
+            width: 57px; height: 69px;
-            background: var(--bg-primary);
+            background: var(--bg-secondary);
             border: 2px solid var(--border-color);
             border-radius: 8px;
             color: var(--text-primary);
@@ -195,27 +176,28 @@
             .pin-group { gap: 0.25rem; }
         }
 
-        /* Error message */
+        /* Error */
-        .error-msg {
+        .error-box {
-            margin-top: 1rem; padding: 0.75rem 1rem;
+            padding: 1rem;
-            background: rgba(239, 68, 68, 0.08);
+            background: rgba(239, 68, 68, 0.1);
-            border: 1px solid rgba(239, 68, 68, 0.2);
+            border: 1px solid rgba(239, 68, 68, 0.3);
             border-radius: 8px;
-            font-size: 0.8125rem; color: var(--error);
+            color: var(--error);
-            text-align: left;
+            font-size: 0.875rem;
+            margin-bottom: 1.5rem;
             display: none;
             animation: fadeIn var(--transition-fast);
         }
 
-        .error-msg.visible { display: block; }
+        .error-box.visible { display: block; }
 
         /* Buttons */
         .btn {
             display: inline-flex; align-items: center; justify-content: center;
             gap: 0.5rem; padding: 1rem 1.5rem; border-radius: 8px;
-            font-size: 0.9375rem; font-weight: 600; font-family: var(--font-primary);
+            font-size: 1rem; font-weight: 600; font-family: var(--font-primary);
             cursor: pointer; transition: all var(--transition-fast);
-            border: none; outline: none; width: 100%;
+            border: none; outline: none;
         }
 
         .btn-primary {
@@ -229,14 +211,20 @@
         .btn-primary:active:not(:disabled) { transform: translateY(0); }
         .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
 
+        .btn-large { width: 100%; padding: 1.5rem; font-size: 1.125rem; }
+
         .btn-outline {
+            display: inline-flex; align-items: center; justify-content: center;
+            gap: 0.5rem; padding: 1rem 1.5rem; border-radius: 8px;
+            font-size: 1rem; font-weight: 600; font-family: var(--font-primary);
+            cursor: pointer; transition: all var(--transition-fast);
             background: transparent; color: var(--text-secondary);
-            border: 1px solid var(--border-color);
+            border: 1px solid var(--border-color); width: 100%;
             margin-top: 0.75rem;
         }
         .btn-outline:hover { border-color: var(--purple-primary); color: var(--purple-light); }
 
-        /* Pairing state */
+        /* Pairing spinner */
         .pairing-spinner {
             width: 20px; height: 20px;
             border: 2px solid rgba(255, 255, 255, 0.3);
@@ -258,26 +246,24 @@
 
 <div class="screen">
     <div class="container">
-        <button class="btn-back" id="btn-back">
+        <div class="hero">
-            <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+            <h1 class="title" style="-webkit-text-fill-color:var(--text-primary); background:none;">HOME KIT</h1>
-                <path d="M12 4L6 10l6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+        </div>
+
+        <div class="form-group">
+            <label class="label">
+                Pairing Code
+                <span class="info-icon">
+                    <svg viewBox="0 0 16 16" fill="none">
+                        <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.5"/>
+                        <path d="M8 7v4M8 5v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                     </svg>
-            Back
+                    <div class="tooltip">
-        </button>
+                        <div class="tooltip-title">HomeKit Pairing Code</div>
-
+                        <p class="tooltip-text">The 8-digit code is usually printed on a label on the camera itself, on the packaging, or in the setup manual. It looks like XXX-XX-XXX.</p>
-        <div class="card">
+                    </div>
-            <svg class="card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                </span>
-                <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/>
+            </label>
-                <polyline points="9 22 9 12 15 12 15 22"/>
-            </svg>
-
-            <h2 class="card-title" id="card-title">HomeKit Camera</h2>
-            <div class="card-badge">Apple HomeKit</div>
-
-            <div id="device-info" class="device-info"></div>
-
-            <div class="pin-section">
-                <div class="pin-label">Enter the 8-digit code from your camera</div>
 
             <div class="pin-row" id="pin-row">
                 <div class="pin-group" id="group-0"></div>
@@ -286,15 +272,12 @@
                 <span class="pin-separator">-</span>
                 <div class="pin-group" id="group-2"></div>
             </div>
-
-                <div class="pin-hint">Printed on the camera or in the manual</div>
         </div>
 
-            <div class="error-msg" id="error-msg"></div>
+        <div class="error-box" id="error-box"></div>
 
-            <button class="btn btn-primary" id="btn-pair" disabled>Pair Device</button>
+        <button class="btn btn-primary btn-large" id="btn-pair" disabled>Pair Device</button>
-            <button class="btn btn-outline" id="btn-standard">Try Standard Discovery</button>
+        <button class="btn-outline" id="btn-standard">Skip, use Standard Discovery</button>
-        </div>
     </div>
 </div>
 
@@ -315,34 +298,6 @@
     var mdnsPaired = params.get('mdns_paired') || '';
     var mdnsDeviceId = params.get('mdns_device_id') || '';
 
-    // title
-    if (mdnsName) document.getElementById('card-title').textContent = mdnsName;
-
-    // device info
-    var infoDiv = document.getElementById('device-info');
-    var rows = [];
-    if (ip) rows.push(['IP Address', ip]);
-    if (mdnsModel) rows.push(['Model', mdnsModel]);
-    if (mdnsCategory) rows.push(['Category', mdnsCategory]);
-    if (vendor) rows.push(['Vendor', vendor]);
-    if (mac) rows.push(['MAC', mac]);
-
-    rows.forEach(function(r) {
-        var row = document.createElement('div');
-        row.className = 'device-row';
-        var label = document.createElement('span');
-        label.className = 'device-label';
-        label.textContent = r[0];
-        var value = document.createElement('span');
-        value.className = 'device-value';
-        value.textContent = r[1];
-        row.appendChild(label);
-        row.appendChild(value);
-        infoDiv.appendChild(row);
-    });
-
-    if (rows.length === 0) infoDiv.style.display = 'none';
-
     // PIN input -- 8 digits: 3-2-3
     var pinGroups = [3, 2, 3];
     var inputs = [];
@@ -444,14 +399,14 @@
     }
 
     function showError(msg) {
-        var el = document.getElementById('error-msg');
+        var el = document.getElementById('error-box');
         el.textContent = msg;
         el.classList.add('visible');
         inputs.forEach(function(input) { input.classList.add('error'); });
     }
 
     function hideError() {
-        document.getElementById('error-msg').classList.remove('visible');
+        document.getElementById('error-box').classList.remove('visible');
     }
 
     function showSuccess() {
@@ -515,9 +470,7 @@
             var data = await r.json();
 
             showSuccess();
-            btnPair.textContent = '';
+            btnPair.textContent = 'Paired!';
-            var check = document.createTextNode('Paired!');
-            btnPair.appendChild(check);
 
             // redirect to create.html with the homekit URL
             setTimeout(function() {
@@ -540,10 +493,6 @@
     }
 
     // navigation
-    document.getElementById('btn-back').addEventListener('click', function() {
-        window.location.href = 'index.html';
-    });
-
     document.getElementById('btn-standard').addEventListener('click', function() {
         var p = new URLSearchParams();
         if (ip) p.set('ip', ip);