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.
This commit is contained in:
eduard256
File diff suppressed because it is too large
Load Diff
+106
-157
@@ -42,103 +42,84 @@
|
||||
}
|
||||
|
||||
.screen {
|
||||
min-height: 100vh; padding: 1.5rem;
|
||||
display: flex; align-items: flex-start; justify-content: center;
|
||||
min-height: 100vh;
|
||||
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 {
|
||||
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); }
|
||||
.hero { text-align: center; margin-bottom: 3rem; }
|
||||
|
||||
.card {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 12px;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
.title {
|
||||
font-size: 4rem; font-weight: 700;
|
||||
letter-spacing: 0.1em; margin-bottom: 0.5rem;
|
||||
background: linear-gradient(135deg, var(--purple-light), var(--purple-primary));
|
||||
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
width: 48px; height: 48px;
|
||||
margin: 0 auto 1.25rem;
|
||||
color: var(--purple-light);
|
||||
.subtitle { font-size: 0.875rem; color: var(--text-secondary); }
|
||||
|
||||
.form-group { margin-bottom: 1.5rem; }
|
||||
|
||||
.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 {
|
||||
font-size: 1.25rem; font-weight: 600;
|
||||
margin-bottom: 0.5rem;
|
||||
/* Info icon + tooltip */
|
||||
.info-icon {
|
||||
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 {
|
||||
display: inline-block;
|
||||
padding: 0.25rem 0.75rem;
|
||||
background: rgba(139, 92, 246, 0.15);
|
||||
border: 1px solid rgba(139, 92, 246, 0.3);
|
||||
border-radius: 6px;
|
||||
font-size: 0.75rem; font-weight: 600;
|
||||
color: var(--purple-light);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
margin-bottom: 1.5rem;
|
||||
.info-icon:hover { color: var(--purple-primary); }
|
||||
.info-icon svg { width: 16px; height: 16px; }
|
||||
|
||||
.tooltip {
|
||||
position: absolute; top: calc(100% + 8px); left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: var(--bg-elevated);
|
||||
border: 1px solid var(--purple-primary);
|
||||
border-radius: 8px; padding: 1rem;
|
||||
width: 320px; max-width: 90vw;
|
||||
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 {
|
||||
background: var(--bg-tertiary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
text-align: left;
|
||||
.tooltip::after {
|
||||
content: ''; position: absolute; bottom: 100%; left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border: 6px solid transparent; border-bottom-color: var(--purple-primary);
|
||||
}
|
||||
|
||||
.device-row {
|
||||
display: flex; justify-content: space-between;
|
||||
padding: 0.375rem 0;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
.info-icon:hover .tooltip { opacity: 1; visibility: visible; }
|
||||
|
||||
.device-row:not(:last-child) {
|
||||
border-bottom: 1px solid rgba(139, 92, 246, 0.07);
|
||||
}
|
||||
|
||||
.device-label { color: var(--text-tertiary); }
|
||||
.device-value { color: var(--text-primary); font-family: var(--font-mono); font-size: 0.75rem; }
|
||||
.tooltip-title { font-weight: 600; color: var(--purple-primary); margin-bottom: 0.5rem; font-size: 0.875rem; }
|
||||
.tooltip-text { font-size: 0.75rem; line-height: 1.5; color: var(--text-secondary); }
|
||||
|
||||
/* 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 {
|
||||
display: flex; gap: 0.375rem;
|
||||
}
|
||||
.pin-group { display: flex; gap: 0.375rem; }
|
||||
|
||||
.pin-separator {
|
||||
font-size: 1.5rem; font-weight: 300;
|
||||
@@ -149,8 +130,8 @@
|
||||
}
|
||||
|
||||
.pin-digit {
|
||||
width: 44px; height: 56px;
|
||||
background: var(--bg-primary);
|
||||
width: 57px; height: 69px;
|
||||
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-msg {
|
||||
margin-top: 1rem; padding: 0.75rem 1rem;
|
||||
background: rgba(239, 68, 68, 0.08);
|
||||
border: 1px solid rgba(239, 68, 68, 0.2);
|
||||
/* Error */
|
||||
.error-box {
|
||||
padding: 1rem;
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
border: 1px solid rgba(239, 68, 68, 0.3);
|
||||
border-radius: 8px;
|
||||
font-size: 0.8125rem; color: var(--error);
|
||||
text-align: left;
|
||||
color: var(--error);
|
||||
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,43 +246,38 @@
|
||||
|
||||
<div class="screen">
|
||||
<div class="container">
|
||||
<button class="btn-back" id="btn-back">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M12 4L6 10l6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
Back
|
||||
</button>
|
||||
|
||||
<div class="card">
|
||||
<svg class="card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/>
|
||||
<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>
|
||||
<span class="pin-separator">-</span>
|
||||
<div class="pin-group" id="group-1"></div>
|
||||
<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>
|
||||
|
||||
<button class="btn btn-primary" id="btn-pair" disabled>Pair Device</button>
|
||||
<button class="btn btn-outline" id="btn-standard">Try Standard Discovery</button>
|
||||
<div class="hero">
|
||||
<h1 class="title" style="-webkit-text-fill-color:var(--text-primary); background:none;">HOME KIT</h1>
|
||||
</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>
|
||||
<div class="tooltip">
|
||||
<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>
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<div class="pin-row" id="pin-row">
|
||||
<div class="pin-group" id="group-0"></div>
|
||||
<span class="pin-separator">-</span>
|
||||
<div class="pin-group" id="group-1"></div>
|
||||
<span class="pin-separator">-</span>
|
||||
<div class="pin-group" id="group-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="error-box" id="error-box"></div>
|
||||
|
||||
<button class="btn btn-primary btn-large" id="btn-pair" disabled>Pair Device</button>
|
||||
<button class="btn-outline" id="btn-standard">Skip, use Standard Discovery</button>
|
||||
</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 = '';
|
||||
var check = document.createTextNode('Paired!');
|
||||
btnPair.appendChild(check);
|
||||
btnPair.textContent = 'Paired!';
|
||||
|
||||
// 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);
|
||||
|
||||
Reference in New Issue
Block a user