Merge develop into main for v2.1.0 release

.claude/skills/frontend_design_strix/SKILL.md

@@ -0,0 +1,211 @@
+---
+name: frontend_design_strix
+description: Create or redesign frontend pages for Strix. Use when building new HTML pages, redesigning existing ones, or working on any UI task in the www/ directory. Covers design principles, layout patterns, and component usage.
+disable-model-invocation: true
+---
+
+# Strix Frontend Design
+
+You are creating or modifying a frontend page for Strix. Your goal is to produce a page that looks **identical in quality** to the existing pages, especially `www/homekit.html` which is the design reference.
+
+## Before you start
+
+Read these files completely:
+
+1. **`www/design-system.html`** -- All CSS variables, every component, JS patterns. This is your component library.
+2. **`www/homekit.html`** -- The design reference. This page is the gold standard. Study its structure, spacing, how little text it uses, how the back button is positioned.
+3. **`www/index.html`** -- The entry point. Understand the probe flow and how data is passed between pages via URL params.
+
+If you need to understand backend APIs or the probe system, read:
+- `www/standard.html` -- how probe data flows into a configuration page
+- `www/test.html` -- how polling and real-time updates work
+- `www/config.html` -- complex two-column layout with live preview
+
+## Design Philosophy
+
+### Radical minimalism
+
+Every element on screen must earn its place. If something doesn't help the user complete their task, remove it.
+
+- **10% text, 90% meaning.** A label that says "Pairing Code" with an info-icon is better than a paragraph explaining what a pairing code is.
+- **Hide details behind info-icons.** Long explanations go into tooltips (the `(i)` icon pattern). The user who needs the explanation can hover. The user who doesn't is not bothered.
+- **No decorative elements without function.** No ornamental icons, no badges that don't convey information, no cards-as-decoration.
+- **One action per screen.** Each page should have one primary thing the user does. Everything else is secondary.
+
+### How we think about design decisions
+
+When building homekit.html, we went through this process:
+
+1. **Started with all the data** -- device info table, long descriptions, badges, decorative icons
+2. **Asked "does the user need this?"** for every element
+3. **Removed everything that wasn't essential** -- the device info table (IP, MAC, vendor) was removed because the user doesn't need it to enter a PIN code
+4. **Moved explanations into tooltips** -- "This camera supports Apple HomeKit. Enter the 8-digit pairing code printed on your camera or included in the manual" became just a label "Pairing Code" with a tooltip
+5. **Removed format hints** -- "Format: XXX-XX-XXX" was removed because the input fields themselves make the format obvious
+6. **Made the primary action obvious** -- big button, full width, impossible to miss
+
+Apply this same thinking to every page you create.
+
+### Visual rules
+
+- Dark theme with purple accent -- never deviate from the color palette in `:root`
+- All icons are inline SVG -- never use emoji, never use icon fonts, never use external icon libraries
+- Fonts: system font stack for UI, monospace for technical values (URLs, IPs, codes)
+- Borders are subtle: `rgba(139, 92, 246, 0.15)` -- barely visible purple tint
+- Glow effects on focus and hover, never on static elements (except logos)
+- Animations are fast (150ms) and subtle -- translateY(-2px) on hover, fadeIn on page load
+- No rounded corners larger than 8px (except special cases like toggle switches)
+
+## Layout Patterns
+
+### Pages after probe (like homekit.html) -- TRUE CENTER
+
+This is the most common case for new pages. Content is vertically centered on screen.
+
+```
+.screen {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;    /* TRUE CENTER -- not flex-start */
+    justify-content: center;
+}
+.container { max-width: 480px; width: 100%; }
+```
+
+**Back button** is positioned OUTSIDE the container, wider than content, using `.back-wrapper`:
+
+```
+.back-wrapper {
+    position: absolute; top: 1.5rem;
+    left: 50%; transform: translateX(-50%);
+    width: 100%; max-width: 600px;    /* wider than container */
+    padding: 0 1.5rem;
+    z-index: 10;
+}
+```
+
+This is MANDATORY for all centered layout pages. The back button must NOT be inside the centered container.
+
+### Entry page (like index.html) -- TOP CENTER
+
+Content is near the top with `margin-top: 8vh`. Used for the main entry point only.
+
+### Content pages (like standard.html, create.html) -- STANDARD
+
+Back button at top, then title, then content flowing down. `max-width: 600px`, no vertical centering.
+
+### Data-heavy pages (like test.html) -- WIDE
+
+`max-width: 1200px` with card grids.
+
+### Two-column (like config.html) -- SPLIT
+
+Settings left, live preview right. Collapses to tabs on mobile.
+
+## Hero Section Pattern
+
+For centered pages, the hero contains a logo/icon + short title:
+
+```html
+<div class="hero">
+    <svg class="logo-icon">...</svg>    <!-- 48-72px, with glow filter -->
+    <h1 class="title">Short Name</h1>   <!-- 1.25rem, white, font-weight 600 -->
+</div>
+```
+
+- The icon should be recognizable and relevant (Strix owl for main, HomeKit house for HomeKit)
+- The title is SHORT -- one or two words max
+- No subtitles unless absolutely necessary
+- Glow effect on the icon via `filter: drop-shadow()`
+
+## Component Usage
+
+All components are documented with live examples in `www/design-system.html`. Key ones:
+
+- **Buttons**: `.btn .btn-primary .btn-large` for primary action (full width), `.btn-outline` for secondary
+- **Inputs**: `.input` with `.label` and optional `.info-icon` with `.tooltip`
+- **Toast**: Every page needs `<div id="toast" class="toast hidden"></div>` and the `showToast()` function
+- **Error box**: `.error-box` with `.visible` class toggled
+- **Info icon + tooltip**: For hiding explanations -- always prefer this over visible text
+
+## Navigation -- CRITICAL
+
+### Always pass ALL known data forward
+
+When navigating to another page, pass every piece of data you have. This is non-negotiable. Future pages may need any of these values.
+
+```javascript
+function navigateNext() {
+    var p = new URLSearchParams();
+    p.set('primary_data', value);
+    // Pass through EVERYTHING known:
+    if (ip) p.set('ip', ip);
+    if (mac) p.set('mac', mac);
+    if (vendor) p.set('vendor', vendor);
+    if (model) p.set('model', model);
+    if (server) p.set('server', server);
+    if (hostname) p.set('hostname', hostname);
+    if (ports) p.set('ports', ports);
+    if (user) p.set('user', user);
+    if (channel) p.set('channel', channel);
+    // ... any other params from probe
+    window.location.href = 'next.html?' + p.toString();
+}
+```
+
+### Page init always reads all params
+
+```javascript
+var params = new URLSearchParams(location.search);
+var ip = params.get('ip') || '';
+var mac = params.get('mac') || '';
+var vendor = params.get('vendor') || '';
+// ... read ALL possible params even if this page doesn't use them
+// They need to be available for passing to the next page
+```
+
+## JavaScript Rules
+
+- Use `var`, not `let`/`const` -- ES5 compatible
+- Build DOM with `document.createElement`, not innerHTML
+- Use `async function` + `fetch()` for API calls
+- Always handle errors: check `!r.ok`, catch exceptions, show toast
+- Debounce input handlers if they trigger API calls (300ms)
+- Use `addEventListener`, never inline event handlers in HTML
+
+## API Pattern
+
+```javascript
+async function doSomething() {
+    try {
+        var r = await fetch('api/endpoint', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(payload)
+        });
+        if (!r.ok) {
+            var text = await r.text();
+            showToast(text || 'Error ' + r.status);
+            return;
+        }
+        var data = await r.json();
+        // success...
+    } catch (e) {
+        showToast('Connection error: ' + e.message);
+    }
+}
+```
+
+## Checklist before finishing
+
+- [ ] Page uses correct layout pattern for its type
+- [ ] Back button positioned correctly (`.back-wrapper` for centered, inline for standard)
+- [ ] All CSS variables from `:root` -- no hardcoded colors
+- [ ] No unnecessary text -- everything possible hidden behind info-icons
+- [ ] All known URL params are read at init and passed forward on navigation
+- [ ] Toast element present, showToast function included
+- [ ] Error states handled (API errors, validation)
+- [ ] Mobile responsive (test at 375px width)
+- [ ] No emoji anywhere
+- [ ] All icons are inline SVG
+- [ ] Primary action is obvious and full-width
+- [ ] Page looks like it belongs with homekit.html and index.html

CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## [2.1.0] - 2026-04-08
+
+### Added
+- ONVIF protocol support: auto-discovery via unicast WS-Discovery, stream resolution through ONVIF profiles
+- ONVIF probe detector: detects ONVIF cameras during network probe (4-7ms response time, no auth required)
+- ONVIF camera page (onvif.html): credentials form with option to also test popular stream patterns
+- ONVIF stream handler: resolves all camera profiles, tests each via RTSP, returns paired results (onvif:// + rtsp://) with shared screenshots
+- Design system reference (design-system.html) with all UI components documented
+
+### Changed
+- ONVIF has highest probe priority (above HomeKit and Standard)
+- JPEG-only streams (no H264/H265) are classified as Alternative in test results
+- HomeKit page redesigned: Apple HomeKit logo, centered layout, floating back button
+- Hardened create.html against undefined/null URL values in query parameters
+
 ## [2.0.0] - 2025-04-05
 
 ### Added

internal/probe/probe.go

@@ -33,6 +33,14 @@ func Init() {
 	}
 
 	ports = loadPorts()
+	// ONVIF detector (highest priority -- auto-discovers all streams)
+	detectors = append(detectors, func(r *probe.Response) string {
+		if r.Probes.ONVIF != nil {
+			return "onvif"
+		}
+		return ""
+	})
+
 	// HomeKit detector
 	detectors = append(detectors, func(r *probe.Response) string {
 		if r.Probes.MDNS != nil {
@@ -115,6 +123,12 @@ func runProbe(parent context.Context, ip string) *probe.Response {
 		resp.Probes.HTTP = r
 		mu.Unlock()
 	})
+	run(func() {
+		r, _ := probe.ProbeONVIF(fastCtx, ip)
+		mu.Lock()
+		resp.Probes.ONVIF = r
+		mu.Unlock()
+	})
 
 	wg.Wait()
 

pkg/probe/models.go

@@ -14,6 +14,7 @@ type Probes struct {
 	ARP   *ARPResult   `json:"arp"`
 	MDNS  *MDNSResult  `json:"mdns"`
 	HTTP  *HTTPResult  `json:"http"`
+	ONVIF *ONVIFResult `json:"onvif"`
 }
 
 type PortsResult struct {
@@ -43,3 +44,10 @@ type HTTPResult struct {
 	StatusCode int    `json:"status_code"`
 	Server     string `json:"server"`
 }
+
+type ONVIFResult struct {
+	URL      string `json:"url"`
+	Port     int    `json:"port"`
+	Name     string `json:"name,omitempty"`
+	Hardware string `json:"hardware,omitempty"`
+}

pkg/probe/onvif.go

@@ -0,0 +1,126 @@
+package probe
+
+import (
+	"context"
+	"crypto/rand"
+	"encoding/hex"
+	"fmt"
+	"net"
+	"net/url"
+	"regexp"
+	"strings"
+	"time"
+)
+
+// ProbeONVIF sends unicast WS-Discovery probe to ip:3702.
+// Returns nil, nil if the device does not support ONVIF.
+func ProbeONVIF(ctx context.Context, ip string) (*ONVIFResult, error) {
+	conn, err := net.ListenPacket("udp4", ":0")
+	if err != nil {
+		return nil, err
+	}
+	defer conn.Close()
+
+	deadline, ok := ctx.Deadline()
+	if !ok {
+		deadline = time.Now().Add(100 * time.Millisecond)
+	}
+	_ = conn.SetDeadline(deadline)
+
+	// WS-Discovery Probe message
+	// https://www.onvif.org/wp-content/uploads/2016/12/ONVIF_Feature_Discovery_Specification_16.07.pdf
+	msg := `<?xml version="1.0" ?>
+<s:Envelope xmlns:s="http://www.w3.org/2003/05/soap-envelope">
+	<s:Header xmlns:a="http://schemas.xmlsoap.org/ws/2004/08/addressing">
+		<a:Action>http://schemas.xmlsoap.org/ws/2005/04/discovery/Probe</a:Action>
+		<a:MessageID>urn:uuid:` + randUUID() + `</a:MessageID>
+		<a:To>urn:schemas-xmlsoap-org:ws:2005:04:discovery</a:To>
+	</s:Header>
+	<s:Body>
+		<d:Probe xmlns:d="http://schemas.xmlsoap.org/ws/2005/04/discovery">
+			<d:Types />
+			<d:Scopes />
+		</d:Probe>
+	</s:Body>
+</s:Envelope>`
+
+	addr := &net.UDPAddr{IP: net.ParseIP(ip), Port: 3702}
+	if _, err = conn.WriteTo([]byte(msg), addr); err != nil {
+		return nil, err
+	}
+
+	buf := make([]byte, 8192)
+	for {
+		n, _, err := conn.ReadFrom(buf)
+		if err != nil {
+			return nil, nil // timeout -- device doesn't support ONVIF
+		}
+
+		body := string(buf[:n])
+		if !strings.Contains(body, "onvif") {
+			continue
+		}
+
+		xaddrs := findXMLTag(body, "XAddrs")
+		if xaddrs == "" {
+			continue
+		}
+
+		// fix buggy cameras reporting 0.0.0.0
+		// ex. <wsdd:XAddrs>http://0.0.0.0:8080/onvif/device_service</wsdd:XAddrs>
+		if s, ok := strings.CutPrefix(xaddrs, "http://0.0.0.0"); ok {
+			xaddrs = "http://" + ip + s
+		}
+
+		port := 80
+		if u, err := url.Parse(xaddrs); err == nil && u.Port() != "" {
+			fmt.Sscanf(u.Port(), "%d", &port)
+		}
+
+		scopes := findXMLTag(body, "Scopes")
+
+		return &ONVIFResult{
+			URL:      xaddrs,
+			Port:     port,
+			Name:     findScope(scopes, "onvif://www.onvif.org/name/"),
+			Hardware: findScope(scopes, "onvif://www.onvif.org/hardware/"),
+		}, nil
+	}
+}
+
+// internals
+
+var reXMLTag = map[string]*regexp.Regexp{}
+
+func findXMLTag(s, tag string) string {
+	re, ok := reXMLTag[tag]
+	if !ok {
+		re = regexp.MustCompile(`(?s)<(?:\w+:)?` + tag + `\b[^>]*>([^<]+)`)
+		reXMLTag[tag] = re
+	}
+	m := re.FindStringSubmatch(s)
+	if len(m) != 2 {
+		return ""
+	}
+	return m[1]
+}
+
+func findScope(s, prefix string) string {
+	i := strings.Index(s, prefix)
+	if i < 0 {
+		return ""
+	}
+	s = s[i+len(prefix):]
+	if j := strings.IndexByte(s, ' '); j >= 0 {
+		s = s[:j]
+	}
+	s, _ = url.QueryUnescape(s)
+	return s
+}
+
+func randUUID() string {
+	b := make([]byte, 16)
+	rand.Read(b)
+	s := hex.EncodeToString(b)
+	return s[:8] + "-" + s[8:12] + "-" + s[12:16] + "-" + s[16:20] + "-" + s[20:]
+}

pkg/tester/source_onvif.go

@@ -0,0 +1,104 @@
+package tester
+
+import (
+	"fmt"
+	"time"
+
+	"github.com/AlexxIT/go2rtc/pkg/core"
+	"github.com/AlexxIT/go2rtc/pkg/onvif"
+)
+
+// testOnvif resolves all ONVIF profiles, tests each via RTSP,
+// and adds two Results per profile (onvif:// + rtsp://).
+// ex. "onvif://admin:pass@10.0.20.111" or "onvif://admin:pass@10.0.20.119:2020"
+func testOnvif(s *Session, rawURL string) {
+	client, err := onvif.NewClient(rawURL)
+	if err != nil {
+		return
+	}
+
+	tokens, err := client.GetProfilesTokens()
+	if err != nil {
+		return
+	}
+
+	for _, token := range tokens {
+		profileURL := rawURL + "?subtype=" + token
+
+		pc, err := onvif.NewClient(profileURL)
+		if err != nil {
+			continue
+		}
+
+		rtspURI, err := pc.GetURI()
+		if err != nil {
+			continue
+		}
+
+		testOnvifProfile(s, profileURL, rtspURI)
+	}
+}
+
+// testOnvifProfile tests a single RTSP stream and adds two Results (onvif + rtsp)
+func testOnvifProfile(s *Session, onvifURL, rtspURL string) {
+	start := time.Now()
+
+	prod, err := rtspHandler(rtspURL)
+	if err != nil {
+		return
+	}
+	defer func() { _ = prod.Stop() }()
+
+	latency := time.Since(start).Milliseconds()
+
+	var codecs []string
+	for _, media := range prod.GetMedias() {
+		if media.Direction != core.DirectionRecvonly {
+			continue
+		}
+		for _, codec := range media.Codecs {
+			codecs = append(codecs, codec.Name)
+		}
+	}
+
+	// capture screenshot
+	var screenshotPath string
+	var width, height int
+
+	if raw, codecName := getScreenshot(prod); raw != nil {
+		var jpeg []byte
+
+		switch codecName {
+		case core.CodecH264, core.CodecH265:
+			jpeg = toJPEG(raw)
+		default:
+			jpeg = raw
+		}
+
+		if jpeg != nil {
+			idx := s.AddScreenshot(jpeg)
+			screenshotPath = fmt.Sprintf("api/test/screenshot?id=%s&i=%d", s.ID, idx)
+			width, height = jpegSize(jpeg)
+		}
+	}
+
+	// add onvif:// result
+	s.AddResult(&Result{
+		Source:     onvifURL,
+		Screenshot: screenshotPath,
+		Codecs:     codecs,
+		Width:      width,
+		Height:     height,
+		LatencyMs:  latency,
+	})
+
+	// add rtsp:// result (same screenshot, same codecs)
+	s.AddResult(&Result{
+		Source:     rtspURL,
+		Screenshot: screenshotPath,
+		Codecs:     codecs,
+		Width:      width,
+		Height:     height,
+		LatencyMs:  latency,
+	})
+}

pkg/tester/worker.go

@@ -56,6 +56,11 @@ func testURL(s *Session, rawURL string) {
 		return
 	}
 
+	if strings.HasPrefix(rawURL, "onvif://") {
+		testOnvif(s, rawURL)
+		return
+	}
+
 	handler := GetHandler(rawURL)
 	if handler == nil {
 		return

www/create.html

@@ -328,8 +328,9 @@
 
     // Pre-populate custom streams from "url" query parameter (supports multiple)
     params.getAll('url').forEach(function(u) {
+        if (!u || typeof u !== 'string') return;
         u = u.trim();
-        if (u && u.indexOf('://') !== -1 && customStreams.indexOf(u) === -1) {
+        if (u && u !== 'undefined' && u !== 'null' && u.indexOf('://') !== -1 && customStreams.indexOf(u) === -1) {
             customStreams.push(u);
         }
     });
@@ -395,7 +396,7 @@
         addInput.type = 'text';
         addInput.placeholder = 'rtsp://user:pass@host/path or bubble://...';
         addInput.spellcheck = false;
-        addInput.value = pendingInput;
+        addInput.value = pendingInput || '';
 
         var addBtn = document.createElement('button');
         addBtn.className = 'btn-add';
@@ -404,7 +405,7 @@
 
         function addCustom() {
             var v = addInput.value.trim();
-            if (!v) return;
+            if (!v || v === 'undefined' || v === 'null') return;
             if (v.indexOf('://') === -1) {
                 showToast('URL must include protocol (rtsp://, http://, bubble://, ...)');
                 return;
@@ -592,7 +593,7 @@
         addInput.type = 'text';
         addInput.placeholder = 'rtsp://user:pass@host/path or bubble://...';
         addInput.spellcheck = false;
-        addInput.value = pendingInput;
+        addInput.value = pendingInput || '';
         var addBtn = document.createElement('button');
         addBtn.className = 'btn-add';
         addBtn.type = 'button';
@@ -600,7 +601,7 @@
 
         function addCustom() {
             var v = addInput.value.trim();
-            if (!v) return;
+            if (!v || v === 'undefined' || v === 'null') return;
             if (v.indexOf('://') === -1) { showToast('URL must include protocol (rtsp://, http://, bubble://, ...)'); return; }
             if (customStreams.indexOf(v) !== -1 || dbStreams.indexOf(v) !== -1) { showToast('This URL is already in the list'); return; }
             customStreams.push(v);

www/homekit.html

@@ -42,15 +42,31 @@
         }
 
         .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; }
+        }
+
+        .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; }
         }
 
         .btn-back {
@@ -58,87 +74,75 @@
             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;
+            padding: 0.5rem 0;
             transition: color var(--transition-fast);
         }
         .btn-back:hover { color: var(--purple-primary); }
 
-        .card {
+        .hero { text-align: center; margin-bottom: 2.5rem; }
-            background: var(--bg-secondary);
-            border: 1px solid var(--border-color);
-            border-radius: 12px;
-            padding: 2rem;
-            text-align: center;
-        }
 
-        .card-icon {
+        .title {
-            width: 48px; height: 48px;
-            margin: 0 auto 1.25rem;
-            color: var(--purple-light);
-        }
-
-        .card-title {
             font-size: 1.25rem; font-weight: 600;
-            margin-bottom: 0.5rem;
+            letter-spacing: 0.03em;
+            color: var(--text-primary);
         }
 
-        .card-badge {
+        .homekit-logo {
-            display: inline-block;
+            width: 72px; height: 72px;
-            padding: 0.25rem 0.75rem;
+            margin: 0 auto;
-            background: rgba(139, 92, 246, 0.15);
+            filter: drop-shadow(0 4px 16px rgba(255, 171, 31, 0.3));
-            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;
         }
 
-        .device-info {
+        .form-group { margin-bottom: 1.5rem; }
-            background: var(--bg-tertiary);
+
-            border: 1px solid var(--border-color);
+        .label {
-            border-radius: 8px;
+            display: flex; align-items: center; gap: 0.5rem;
-            padding: 1rem;
+            font-size: 0.875rem; font-weight: 500;
-            margin-bottom: 1.5rem;
+            color: var(--text-secondary); margin-bottom: 0.75rem;
-            text-align: left;
         }
 
-        .device-row {
+        /* Info icon + tooltip */
-            display: flex; justify-content: space-between;
+        .info-icon {
-            padding: 0.375rem 0;
+            position: relative; display: inline-flex;
-            font-size: 0.8125rem;
+            align-items: center; justify-content: center;
+            width: 16px; height: 16px; cursor: help;
+            color: var(--text-tertiary); transition: color var(--transition-fast);
         }
 
-        .device-row:not(:last-child) {
+        .info-icon:hover { color: var(--purple-primary); }
-            border-bottom: 1px solid rgba(139, 92, 246, 0.07);
+        .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-label { color: var(--text-tertiary); }
+        .tooltip::after {
-        .device-value { color: var(--text-primary); font-family: var(--font-mono); font-size: 0.75rem; }
+            content: ''; position: absolute; bottom: 100%; left: 50%;
+            transform: translateX(-50%);
+            border: 6px solid transparent; border-bottom-color: var(--purple-primary);
+        }
+
+        .info-icon:hover .tooltip { opacity: 1; visibility: visible; }
+
+        .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 {
+        .pin-group { display: flex; gap: 0.375rem; }
-            display: flex; gap: 0.375rem;
-        }
 
         .pin-separator {
             font-size: 1.5rem; font-weight: 300;
@@ -149,8 +153,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 +199,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 +234,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);
@@ -256,45 +267,56 @@
 </head>
 <body>
 
+<div class="back-wrapper">
+    <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>
+
 <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">
+            <svg class="homekit-logo" viewBox="100 120 824 780" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M12 4L6 10l6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                <path fill="#FA9012" d="M883.2,413.1l-70.4-55.6l0,0V231.1c0-8.6-3.4-11-9.5-11h-64.4c-7,0-11.3,1.4-11.3,11v59.1l0,0 C634.5,216.7,533.6,137,529.8,134c-7.6-6-12.3-7.6-17.8-7.6c-5.4,0-10.1,1.6-17.8,7.6c-7.6,6-343.2,271.1-353.4,279.1 c-12.4,9.8-8.9,23.9,4.9,23.9h65.5v355.6c0,23,9.2,32.2,31.1,32.2h539.4c21.9,0,31.1-9.2,31.1-32.2V436.9h65.5 C892.1,436.9,895.6,422.9,883.2,413.1z M757.6,742.6c0,15.9-8.2,26.9-24.8,26.9H291.1c-16.6,0-24.8-11-24.8-26.9V410.3 c0-19.3,8.4-31.6,18.1-39.2l212.4-167.7c5.6-4.4,10.4-6.3,15.1-6.3s9.5,1.9,15.1,6.4l212.4,167.7c9.6,7.6,18.1,19.9,18.1,39.2 V742.6z"/>
+                <path fill="#FFAB1F" d="M739.6,371.1L527.1,203.3c-5.6-4.4-10.6-6.3-15.1-6.3c-4.6,0-9.5,1.9-15.1,6.4L284.4,371.1 c-9.6,7.6-18.1,19.9-18.1,39.2v332.3c0,15.9,8.2,26.9,24.8,26.9h441.7c16.6,0,24.8-11,24.8-26.9V410.3 C757.6,391,749.2,378.7,739.6,371.1z M702.6,692.7c0,14.8-8.4,21.7-20.7,21.7H342.2c-12.3,0-20.7-6.9-20.7-21.7V433.2 c0-14.4,3.4-22.6,13.6-30.7c5.8-4.6,160.3-126.6,164.4-129.8c4.1-3.3,8.5-4.9,12.5-4.9c4,0,8.4,1.7,12.5,4.9 c4.1,3.3,158.6,125.3,164.4,129.8c10.2,8.1,13.6,16.4,13.6,30.7L702.6,692.7z"/>
+                <path fill="#FFBE41" d="M688.9,402.5c-5.8-4.5-160.3-126.6-164.4-129.8c-4.1-3.3-8.5-4.9-12.5-4.9c-4,0-8.4,1.7-12.5,4.9 c-4.1,3.3-158.6,125.3-164.4,129.8c-10.2,8.1-13.6,16.4-13.6,30.7v259.5c0,14.8,8.4,21.7,20.7,21.7h339.7 c12.3,0,20.7-6.9,20.7-21.7V433.2C702.5,418.9,699.1,410.6,688.9,402.5z M647.4,642.8c0,11.9-6.6,16.5-15.6,16.5H392.2 c-9,0-15.6-4.6-15.6-16.5V456.2c0-8.3,0-14.9,9.1-22.2c6-4.8,113.2-89.4,116.4-91.9s6.4-3.8,9.9-3.8c3.6,0.1,7.1,1.5,9.9,3.8 c3.2,2.5,110.4,87.1,116.4,91.9c9.1,7.3,9.1,13.9,9.1,22.2L647.4,642.8z"/>
+                <path fill="#FFD260" d="M638.3,434c-6-4.8-113.2-89.4-116.4-91.9c-2.8-2.4-6.3-3.7-9.9-3.8c-3.5,0-6.7,1.3-9.9,3.8 S391.6,429.2,385.7,434c-9.1,7.3-9.1,13.9-9.1,22.2v186.6c0,11.9,6.6,16.5,15.6,16.5h239.5c9,0,15.6-4.6,15.6-16.5V456.2 C647.4,447.8,647.4,441.2,638.3,434z M592.3,593c0,9.2-4.6,11.2-11,11.2H442.8c-6.4,0-11-2.1-11-11.2V479.1 c0-6.4,2.9-12.6,7.8-16.6c2.8-2.3,63-49.4,65.1-51.1c4.2-3.5,10.4-3.5,14.6,0c2.2,1.7,62.3,48.8,65.1,51.1 c5,4.1,7.9,10.2,7.8,16.6L592.3,593z"/>
+                <path fill="#FFE780" d="M512,604.1h69.2c6.4,0,11-2.1,11-11.2V479.1c0-6.4-2.9-12.6-7.8-16.6c-2.8-2.3-63-49.4-65.1-51.1 c-4.2-3.5-10.4-3.5-14.6,0c-2.1,1.7-62.3,48.8-65.1,51.1c-5,4.1-7.9,10.2-7.8,16.6v113.8c0,9.2,4.6,11.2,11,11.2L512,604.1z"/>
             </svg>
-            Back
+            <h1 class="title">Apple HomeKit</h1>
-        </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>
+
+        <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 +337,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 +438,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 +509,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() {

www/index.html

@@ -317,8 +317,8 @@
 
             const data = await r.json();
 
-            if (data.type === 'standard' || (data.reachable && data.type !== 'homekit')) {
+            if (data.type === 'onvif') {
-                navigateStandard(ip, data);
+                navigateOnvif(ip, data);
                 return;
             }
 
@@ -327,6 +327,11 @@
                 return;
             }
 
+            if (data.type === 'standard' || data.reachable) {
+                navigateStandard(ip, data);
+                return;
+            }
+
             if (data.type === 'unreachable') {
                 showUnreachable(ip);
                 return;
@@ -340,6 +345,46 @@
         }
     }
 
+    function navigateOnvif(ip, data) {
+        var p = new URLSearchParams();
+        p.set('ip', ip);
+
+        var probes = data.probes || {};
+
+        if (probes.ports && probes.ports.open && probes.ports.open.length) {
+            p.set('ports', probes.ports.open.join(','));
+        }
+        if (probes.arp) {
+            if (probes.arp.mac) p.set('mac', probes.arp.mac);
+            if (probes.arp.vendor) p.set('vendor', probes.arp.vendor);
+        }
+        if (probes.http && probes.http.server) {
+            p.set('server', probes.http.server);
+        }
+        if (probes.dns && probes.dns.hostname) {
+            p.set('hostname', probes.dns.hostname);
+        }
+        if (probes.ping && probes.ping.latency_ms) {
+            p.set('latency', Math.round(probes.ping.latency_ms));
+        }
+        if (probes.onvif) {
+            if (probes.onvif.url) p.set('onvif_url', probes.onvif.url);
+            if (probes.onvif.port) p.set('onvif_port', probes.onvif.port);
+            if (probes.onvif.name) p.set('onvif_name', probes.onvif.name);
+            if (probes.onvif.hardware) p.set('onvif_hardware', probes.onvif.hardware);
+        }
+        if (probes.mdns) {
+            if (probes.mdns.name) p.set('mdns_name', probes.mdns.name);
+            if (probes.mdns.model) p.set('mdns_model', probes.mdns.model);
+            if (probes.mdns.category) p.set('mdns_category', probes.mdns.category);
+            if (probes.mdns.device_id) p.set('mdns_device_id', probes.mdns.device_id);
+            if (probes.mdns.port) p.set('mdns_port', probes.mdns.port);
+            p.set('mdns_paired', probes.mdns.paired ? '1' : '0');
+        }
+
+        window.location.href = 'onvif.html?' + p.toString();
+    }
+
     function navigateStandard(ip, data) {
         var p = new URLSearchParams();
         p.set('ip', ip);

www/onvif.html

@@ -0,0 +1,469 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <meta name="theme-color" content="#0a0a0f">
+    <title>Strix - ONVIF Camera</title>
+    <style>
+        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+        :root {
+            --bg-primary: #0a0a0f;
+            --bg-secondary: #1a1a24;
+            --bg-tertiary: #24242f;
+            --bg-elevated: #2a2a38;
+            --purple-primary: #8b5cf6;
+            --purple-light: #a78bfa;
+            --purple-dark: #7c3aed;
+            --purple-glow: rgba(139, 92, 246, 0.3);
+            --purple-glow-strong: rgba(139, 92, 246, 0.5);
+            --text-primary: #e0e0e8;
+            --text-secondary: #a0a0b0;
+            --text-tertiary: #606070;
+            --success: #10b981;
+            --error: #ef4444;
+            --border-color: rgba(139, 92, 246, 0.15);
+            --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+            --font-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
+            --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+            --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
+            --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
+        }
+
+        html { font-size: 16px; -webkit-font-smoothing: antialiased; }
+
+        body {
+            font-family: var(--font-primary);
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.5;
+            min-height: 100vh;
+        }
+
+        .screen {
+            min-height: 100vh;
+            padding: 1.5rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            animation: fadeIn var(--transition-base);
+        }
+
+        .container { max-width: 480px; width: 100%; }
+
+        @media (min-width: 768px) {
+            .screen { padding: 3rem 1.5rem; }
+            .container { max-width: 540px; }
+        }
+
+        .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; }
+        }
+
+        .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;
+            transition: color var(--transition-fast);
+        }
+        .btn-back:hover { color: var(--purple-primary); }
+
+        .hero { text-align: center; margin-bottom: 2.5rem; }
+
+        .onvif-word {
+            font-size: 2.5rem; font-weight: 700;
+            letter-spacing: 0.08em;
+            margin-bottom: 1rem;
+        }
+
+        .onvif-o {
+            background: linear-gradient(180deg, #00a0e9 0%, #1a237e 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+
+        .onvif-nvif {
+            color: var(--text-primary);
+        }
+
+        .title {
+            font-size: 1.25rem; font-weight: 600;
+            letter-spacing: 0.03em;
+            color: var(--text-primary);
+        }
+
+        .subtitle {
+            font-size: 0.8125rem; color: var(--text-tertiary);
+            margin-top: 0.375rem;
+            font-family: var(--font-mono);
+        }
+
+        .subtitle .highlight {
+            color: var(--purple-light);
+        }
+
+        /* Form */
+        .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.5rem;
+        }
+
+        .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);
+        }
+        .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;
+        }
+
+        .tooltip::after {
+            content: ''; position: absolute; bottom: 100%; left: 50%;
+            transform: translateX(-50%);
+            border: 6px solid transparent; border-bottom-color: var(--purple-primary);
+        }
+
+        .info-icon:hover .tooltip { opacity: 1; visibility: visible; }
+
+        .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); }
+
+        .input {
+            width: 100%; padding: 1rem;
+            background: var(--bg-secondary);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 1rem; font-family: var(--font-primary);
+            transition: all var(--transition-fast);
+            outline: none;
+        }
+
+        .input:focus {
+            border-color: var(--purple-primary);
+            box-shadow: 0 0 0 3px var(--purple-glow);
+        }
+
+        .input::placeholder { color: var(--text-tertiary); }
+
+        .input-password { position: relative; }
+        .input-password .input { padding-right: 3rem; }
+        .btn-toggle-pass {
+            position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%);
+            background: none; border: none; padding: 0.5rem; cursor: pointer;
+            color: var(--text-tertiary); display: flex;
+            transition: color var(--transition-fast);
+        }
+        .btn-toggle-pass:hover { color: var(--purple-primary); }
+
+        /* Buttons */
+        .btn {
+            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);
+            border: none; outline: none;
+        }
+
+        .btn-primary {
+            background: linear-gradient(135deg, var(--purple-primary), var(--purple-dark));
+            color: white; box-shadow: 0 4px 12px var(--purple-glow);
+        }
+        .btn-primary:hover:not(:disabled) {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 20px var(--purple-glow-strong);
+        }
+        .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); width: 100%;
+            margin-top: 0.75rem;
+        }
+        .btn-outline:hover { border-color: var(--purple-primary); color: var(--purple-light); }
+
+        /* Checkbox */
+        .checkbox-row {
+            margin-bottom: 1.5rem;
+        }
+
+        .checkbox-label {
+            display: flex; align-items: center; gap: 0.625rem;
+            font-size: 0.875rem; color: var(--text-secondary);
+            cursor: pointer; user-select: none;
+        }
+
+        .checkbox-label input { display: none; }
+
+        .checkbox-custom {
+            width: 18px; height: 18px; flex-shrink: 0;
+            border: 2px solid var(--border-color);
+            border-radius: 4px;
+            background: var(--bg-secondary);
+            transition: all var(--transition-fast);
+            position: relative;
+        }
+
+        .checkbox-label input:checked + .checkbox-custom {
+            background: var(--purple-primary);
+            border-color: var(--purple-primary);
+        }
+
+        .checkbox-label input:checked + .checkbox-custom::after {
+            content: '';
+            position: absolute; top: 2px; left: 5px;
+            width: 5px; height: 9px;
+            border: solid white; border-width: 0 2px 2px 0;
+            transform: rotate(45deg);
+        }
+
+        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
+    </style>
+</head>
+<body>
+
+<div class="back-wrapper">
+    <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>
+
+<div class="screen">
+    <div class="container">
+        <div class="hero">
+            <div class="onvif-word"><span class="onvif-o">O</span><span class="onvif-nvif">nvif</span></div>
+            <h1 class="title" id="title">ONVIF Camera</h1>
+            <p class="subtitle" id="subtitle"></p>
+        </div>
+
+        <div class="form-group">
+            <label class="label">
+                Username
+                <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">ONVIF Username</div>
+                        <p class="tooltip-text">The username for your camera's ONVIF service. Usually the same as the web interface login. Common defaults: admin, root.</p>
+                    </div>
+                </span>
+            </label>
+            <input type="text" id="f-user" class="input" value="admin" autocomplete="off" spellcheck="false">
+        </div>
+
+        <div class="form-group">
+            <label class="label">
+                Password
+                <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">ONVIF Password</div>
+                        <p class="tooltip-text">The password for your camera's ONVIF service. Some cameras allow ONVIF access without a password -- leave empty to try.</p>
+                    </div>
+                </span>
+            </label>
+            <div class="input-password">
+                <input type="password" id="f-pass" class="input" placeholder="Camera password" autocomplete="off">
+                <button class="btn-toggle-pass" id="btn-toggle-pass" type="button">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+                        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
+                        <circle cx="12" cy="12" r="3"/>
+                    </svg>
+                </button>
+            </div>
+        </div>
+
+        <div class="checkbox-row" id="checkbox-row">
+            <label class="checkbox-label">
+                <input type="checkbox" id="cb-top1000" checked>
+                <span class="checkbox-custom"></span>
+                Also test popular stream patterns
+            </label>
+        </div>
+
+        <button class="btn btn-primary btn-large" id="btn-discover">Discover Streams</button>
+        <button class="btn-outline" id="btn-standard">Skip, use Standard Discovery</button>
+        <button class="btn-outline" id="btn-homekit" style="display:none">Try HomeKit Pairing</button>
+    </div>
+</div>
+
+<script>
+    var params = new URLSearchParams(location.search);
+
+    var ip = params.get('ip') || '';
+    var ports = params.get('ports') || '';
+    var mac = params.get('mac') || '';
+    var vendor = params.get('vendor') || '';
+    var server = params.get('server') || '';
+    var hostname = params.get('hostname') || '';
+    var latency = params.get('latency') || '';
+    var onvifUrl = params.get('onvif_url') || '';
+    var onvifPort = params.get('onvif_port') || '';
+    var onvifName = params.get('onvif_name') || '';
+    var onvifHardware = params.get('onvif_hardware') || '';
+    var mdnsName = params.get('mdns_name') || '';
+    var mdnsModel = params.get('mdns_model') || '';
+    var mdnsCategory = params.get('mdns_category') || '';
+    var mdnsPort = params.get('mdns_port') || '';
+    var mdnsPaired = params.get('mdns_paired') || '';
+    var mdnsDeviceId = params.get('mdns_device_id') || '';
+
+    // title from ONVIF name
+    if (onvifName) {
+        document.getElementById('title').textContent = onvifName;
+    }
+
+    // subtitle with IP and hardware
+    var subtitleEl = document.getElementById('subtitle');
+    var parts = [];
+    if (ip) parts.push(ip);
+    if (onvifHardware && onvifHardware !== onvifName) parts.push(onvifHardware);
+    if (parts.length) {
+        while (subtitleEl.firstChild) subtitleEl.removeChild(subtitleEl.firstChild);
+        parts.forEach(function(text, i) {
+            if (i > 0) {
+                var sep = document.createElement('span');
+                sep.textContent = ' / ';
+                subtitleEl.appendChild(sep);
+            }
+            var span = document.createElement('span');
+            span.className = 'highlight';
+            span.textContent = text;
+            subtitleEl.appendChild(span);
+        });
+    }
+
+    // show HomeKit button only if mDNS data present
+    if (mdnsName && mdnsDeviceId) {
+        document.getElementById('btn-homekit').style.display = '';
+    }
+
+    // password toggle
+    document.getElementById('btn-toggle-pass').addEventListener('click', function() {
+        var input = document.getElementById('f-pass');
+        input.type = input.type === 'password' ? 'text' : 'password';
+    });
+
+    // discover streams -> build onvif:// URL and go to create.html
+    document.getElementById('btn-discover').addEventListener('click', function() {
+        var user = document.getElementById('f-user').value.trim();
+        var pass = document.getElementById('f-pass').value;
+
+        var auth = '';
+        if (user || pass) {
+            auth = encodeURIComponent(user) + ':' + encodeURIComponent(pass) + '@';
+        }
+
+        var host = ip;
+        var port = parseInt(onvifPort, 10) || 80;
+        if (port !== 80) {
+            host = ip + ':' + port;
+        }
+
+        var onvifStreamUrl = 'onvif://' + auth + host;
+
+        var p = new URLSearchParams();
+        p.set('url', onvifStreamUrl);
+        if (ip) p.set('ip', ip);
+        if (mac) p.set('mac', mac);
+        if (vendor) p.set('vendor', vendor);
+        if (onvifName) p.set('model', onvifName);
+        if (server) p.set('server', server);
+        if (hostname) p.set('hostname', hostname);
+        if (ports) p.set('ports', ports);
+
+        if (document.getElementById('cb-top1000').checked) {
+            p.set('ids', 'p:top-1000');
+            p.set('user', user);
+            if (pass) p.set('pass', pass);
+        }
+
+        window.location.href = 'create.html?' + p.toString();
+    });
+
+    // standard discovery
+    document.getElementById('btn-standard').addEventListener('click', function() {
+        var p = new URLSearchParams();
+        if (ip) p.set('ip', ip);
+        if (ports) p.set('ports', ports);
+        if (mac) p.set('mac', mac);
+        if (vendor) p.set('vendor', vendor);
+        if (server) p.set('server', server);
+        if (hostname) p.set('hostname', hostname);
+        if (latency) p.set('latency', latency);
+        window.location.href = 'standard.html?' + p.toString();
+    });
+
+    // homekit pairing
+    document.getElementById('btn-homekit').addEventListener('click', function() {
+        var p = new URLSearchParams();
+        if (ip) p.set('ip', ip);
+        if (ports) p.set('ports', ports);
+        if (mac) p.set('mac', mac);
+        if (vendor) p.set('vendor', vendor);
+        if (server) p.set('server', server);
+        if (hostname) p.set('hostname', hostname);
+        if (latency) p.set('latency', latency);
+        if (mdnsName) p.set('mdns_name', mdnsName);
+        if (mdnsModel) p.set('mdns_model', mdnsModel);
+        if (mdnsCategory) p.set('mdns_category', mdnsCategory);
+        if (mdnsPort) p.set('mdns_port', mdnsPort);
+        if (mdnsPaired) p.set('mdns_paired', mdnsPaired);
+        if (mdnsDeviceId) p.set('mdns_device_id', mdnsDeviceId);
+        window.location.href = 'homekit.html?' + p.toString();
+    });
+
+    // back
+    document.getElementById('btn-back').addEventListener('click', function() {
+        window.location.href = 'index.html';
+    });
+
+    // autofocus password field (user is prefilled)
+    document.getElementById('f-pass').focus();
+</script>
+
+</body>
+</html>

www/test.html

@@ -423,11 +423,13 @@
 
     function classifyResult(r) {
         var scheme = r.source.split('://')[0] || '';
-        var isRtsp = scheme === 'rtsp' || scheme === 'rtsps';
+        var isRecommended = scheme === 'rtsp' || scheme === 'rtsps' || scheme === 'onvif';
+        var isJpegOnly = r.codecs && r.codecs.length > 0 && r.codecs.indexOf('H264') === -1 && r.codecs.indexOf('H265') === -1;
         var isHD = r.width >= 1280;
 
-        if (isRtsp && isHD) return 'rec-main';
+        if (isJpegOnly) return 'alt';
-        if (isRtsp) return 'rec-sub';
+        if (isRecommended && isHD) return 'rec-main';
+        if (isRecommended) return 'rec-sub';
         return 'alt';
     }