+
+
Strix Design System
+
All components used across the Strix frontend
+
+
+
+
+
1. Colors
+
CSS variables from :root
+
+
+
+
+
+
Text Hierarchy
+
--text-primary: Main content text
+
--text-secondary: Labels, descriptions
+
--text-tertiary: Hints, placeholders
+
--text-disabled: Disabled elements
+
+
+
+
+
+
+
2. Typography
+
Headings, labels, mono text
+
+
+
STRIX
+
Page Title (.page-title)
+
Screen Title (.screen-title)
+
Section Title (.section-title)
+
Label (.label)
+
Field Label (.field-label)
+
+
Monospace text (--font-mono)
+
+
+
+
+
+
3. Buttons
+
All button variants
+
+
+
Primary
+
+
+
+
+
+
Primary Large (full width)
+
+
+
+
+
Outline
+
+
+
+
+
Small Buttons
+
+
+
+
+
+
Stop / Danger
+
+
+
+
+
+
Add Sub / Secondary Action
+
+
+
Save (Green)
+
+
+
+
+
Back Navigation
+
+
+
+
+
Add (+) Button
+
+
+
+
+
Use as Stream Button (card action)
+
+
+
+
+
+
+
+
+
4. Form Elements
+
Inputs, selects, toggles
+
+
+
+
+
+
+
Validated Input (readonly)
+
+
+
+
Password with Toggle
+
+
+
+
+
+
+
+
Small Inputs in Row
+
+
+
+
+
Add Row (input + button)
+
+
+
+
+
+
Toggle Switches
+
+
+
+
Optional Label
+
+
+
+
+
+
+
+
+
+
5. Badges & Tags
+
Status indicators, type labels
+
+
+
Type Badges
+
+ standard
+ homekit
+ unreachable
+
+
+
Status Badges
+
+
+
Mode Badge
+
+ Stream Testing
+ sub
+
+
+
Tags (selected items)
+
+
+ preset
+ Top 1000 Stream Patterns
+
+
+
+ brand
+ Hikvision
+
+
+
+
+
Card Tags (codec overlays)
+
+ H264
+ AAC
+ MJPEG
+
+
+
Latency Colors
+
+ 42ms (fast)
+ 320ms (medium)
+ 850ms (slow)
+
+
+
+
+
+
+
6. Cards
+
Stream cards, media cards
+
+
+
Stream Card (info)
+
+
+
Main Stream
+
rtsp://admin:pass@192.168.1.100:554/stream1
+
+
+
Sub Stream
+
rtsp://admin:pass@192.168.1.100:554/stream2
+
+
+
+
Media Card (test result)
+
+
+
+
+
+ H264
+ AAC
+
+
1920x1080
+
+
+
rtsp://admin:***@192.168.1.100:554/stream1
+
+ 42ms
+ 1920x1080
+
+
+
+
+
+
+
+
+
+
+
rtsp://admin:***@192.168.1.100:554/stream2
+
+ 280ms
+ 640x480
+
+
+
+
+
+
+
+
+
+
+
+
+
7. Progress & Status
+
Status bars, counters, progress, spinners
+
+
+
Status Bar (complete component)
+
+
+
+
+
Loading Spinner
+
+
+ Building stream URLs...
+
+
+
+
+
+
+
8. Collapsible Sections
+
Expandable settings, grouped results
+
+
+
Expand Button (settings)
+
+
+
+
+
+
Group with Collapse (results)
+
+
+
+
Cards would go here...
+
+
+
+
+
+
+
+
9. Feedback
+
Toasts, errors, results, info boxes, notices
+
+
+
+
+
Error Box
+
Connection error: timeout after 5s
+
+
+
Info Box
+
+
How to use
+
Add these URLs to your NVR software.
+
+
+
+
+
+
+
+
+
+
Result Error
+
camera_main: go2rtc not found
+
+
+
+
+
+
Notice Banner
+
+
Frigate NVR not detected
+
If you have Frigate NVR, we recommend running Strix on the same server.
+
+
+
+
+
Toast (click to demo)
+
+
+
+
+
+
+
10. Config Panel
+
Code display with diff highlighting
+
+
+
+
go2rtc:
+ streams:
+ camera_main:
+ - rtsp://admin:pass@192.168.1.100:554/stream1
+ camera_sub:
+ - rtsp://admin:pass@192.168.1.100:554/stream2
+
+cameras:
+ camera:
+ ffmpeg:
+ inputs:
+ - path: rtsp://127.0.0.1:8554/camera_sub
+ input_args: preset-rtsp-restream
+ roles:
+ - detect
+ - path: rtsp://127.0.0.1:8554/camera_main
+ input_args: preset-rtsp-restream
+ roles:
+ - record
+
+
+
+
+
Config Example Block (copyable)
+
+
go2rtc.yaml
+
streams:
+ 'camera_main':
+ - rtsp://admin:pass@192.168.1.100:554/stream1
+
+
+
+
+
+
+
11. Lists & Tables
+
Stream lists, device info tables
+
+
+
+
+
Streams Box (scrollable list)
+
3 streams
+
+
rtsp://admin:pass@192.168.1.100:554/stream1
+
rtsp://admin:pass@192.168.1.100:554/stream2
+
http://192.168.1.100:80/video.cgi
+
+
+
+
Device Info Table
+
+
IP Address192.168.1.100
+
ModelDS-2CD2043G2-I
+
VendorHikvision
+
MACAA:BB:CC:DD:EE:FF
+
+
+
+
+
+
+
Stream URL with Copy Button
+
+
Main Stream
+
+
rtsp://admin:pass@192.168.1.100:554/stream1
+
+
+
+
+
+
+
+
+
12. Mobile Tabs
+
Tab switcher for two-column layouts on mobile
+
+
+
+
+
+
+
+
+
+
+
+
+
+
13. Sticky Bottom Bar
+
Fixed action bar at page bottom (not shown fixed in this demo)
+
+
+
+
+
+
+
+
+
+
+
14. Autocomplete Dropdown
+
Searchable dropdown with type badges
+
+
+
+
+
+
+
+ preset
+ Top 1000
+
+
+
+
+ brand
+ Hikvision
+
+
+ model
+ Hikvision DS-2CD2043G2-I
+
+
+ model
+ Hikvision DS-2CD2347G2-LU
+
+
+
+
+
+
+
+
+
15. SVG Icons
+
All inline SVG icons used across pages (never use emoji or icon fonts)
+
+
+
+
-
-
-
-
-
-
HomeKit Camera
-
Apple HomeKit
-
-
-
-
-
Enter the 8-digit code from your camera
-
-
-
-
Printed on the camera or in the manual
-
-
-
-
-
-
+
+
HOME KIT
+
+
+
+
+
+
+
@@ -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);