gilles/Strix
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add frontend pages, move static to www/, add resolution to tester

Browse Source 
Frontend:
- index.html: probe device, navigate to standard/homekit by type
- standard.html: camera config, model search with multi-select
- create.html: stream URL list, custom URL input, create test session
- homekit.html: HomeKit device info, contact links, fallback to standard

Backend:
- Move static files to www/ package with embed (go2rtc pattern)
- Add initStatic() in api with FileServer
- Add width/height to test results from H264 SPS parsing
- Contribute links to gostrix.github.io with auto-filled params
This commit is contained in:
eduard256
2026-03-26 10:18:40 +00:00
parent 0ecf1eb75f
commit 74b4b61198
10 changed files with 2163 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
internal/api/api.go
+1 -9
View File
@@ -1,9 +1,7 @@
package api
import (
"embed"
"encoding/json"
"io/fs"
"net"
"net/http"
"time"
@@ -25,10 +23,7 @@ func Init() {
HandleFunc("api/health", apiHealth)
HandleFunc("api/log", apiLog)
// serve frontend from embedded web/ directory
if sub, err := fs.Sub(webFS, "web"); err == nil {
http.Handle("/", http.FileServer(http.FS(sub)))
}
initStatic()
Handler = middlewareCORS(http.DefaultServeMux)
@@ -39,9 +34,6 @@ func Init() {
go listen_serve("tcp", listen)
}
//go:embed web
var webFS embed.FS
func listen_serve(network, address string) {
ln, err := net.Listen(network, address)
if err != nil {
internal/api/static.go
+16
View File
@@ -0,0 +1,16 @@
package api
import (
"net/http"
"github.com/eduard256/strix/www"
)
func initStatic() {
root := http.FS(www.Static)
fileServer := http.FileServer(root)
HandleFunc("", func(w http.ResponseWriter, r *http.Request) {
fileServer.ServeHTTP(w, r)
})
}
internal/api/web/index.html
-16
View File
@@ -1,16 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Strix</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: monospace; background: #1a1a1a; color: #e0e0e0; display: flex; align-items: center; justify-content: center; height: 100vh; }
h1 { font-size: 24px; color: #888; }
</style>
</head>
<body>
<h1>Strix 2.0</h1>
</body>
</html>
pkg/tester/session.go
+2
View File
@@ -27,6 +27,8 @@ type Result struct {
Source string `json:"source"`
Screenshot string `json:"screenshot,omitempty"`
Codecs []string `json:"codecs,omitempty"`
Width uint16 `json:"width,omitempty"`
Height uint16 `json:"height,omitempty"`
LatencyMs int64 `json:"latency_ms,omitempty"`
Skipped bool `json:"skipped,omitempty"`
}
pkg/tester/worker.go
+14
View File
@@ -7,6 +7,7 @@ import (
"time"
"github.com/AlexxIT/go2rtc/pkg/core"
"github.com/AlexxIT/go2rtc/pkg/h264"
"github.com/AlexxIT/go2rtc/pkg/magic"
)
@@ -66,18 +67,31 @@ func testURL(s *Session, rawURL string) {
latency := time.Since(start).Milliseconds()
var codecs []string
var width, height uint16
for _, media := range prod.GetMedias() {
if media.Direction != core.DirectionRecvonly {
continue
}
for _, codec := range media.Codecs {
codecs = append(codecs, codec.Name)
// extract resolution from first video codec SPS
if width == 0 && codec.Name == core.CodecH264 {
if spsBytes, _ := h264.GetParameterSet(codec.FmtpLine); spsBytes != nil {
if sps := h264.DecodeSPS(spsBytes); sps != nil {
width, height = sps.Width(), sps.Height()
}
}
}
}
}
r := &Result{
Source: rawURL,
Codecs: codecs,
Width: width,
Height: height,
LatencyMs: latency,
}
www/create.html
+665
View File
@@ -0,0 +1,665 @@
<!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 - Stream URLs</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;
--warning: #f59e0b;
--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;
padding-bottom: 5rem;
}
.screen { padding: 1.5rem; animation: fadeIn var(--transition-base); }
.container { max-width: 600px; margin: 0 auto; width: 100%; }
@media (min-width: 768px) {
.screen { padding: 3rem 1.5rem; }
.container { max-width: 700px; }
}
.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: 1.5rem;
transition: color var(--transition-fast);
}
.btn-back:hover { color: var(--purple-primary); }
.screen-title { font-size: 1.5rem; font-weight: 600; margin-bottom: 0.5rem; }
.screen-subtitle {
font-size: 0.875rem; color: var(--text-secondary);
margin-bottom: 2rem;
}
.screen-subtitle span { color: var(--purple-light); font-family: var(--font-mono); }
/* Loading */
.loading {
text-align: center; padding: 3rem;
color: var(--text-tertiary); font-size: 0.875rem;
}
.loading-spinner {
width: 24px; height: 24px;
border: 2px solid var(--border-color);
border-top-color: var(--purple-primary);
border-radius: 50%;
margin: 0 auto 1rem;
animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* Stream list */
.stream-count {
font-size: 0.75rem; color: var(--text-tertiary);
font-family: var(--font-mono);
margin-bottom: 0.75rem;
display: flex; align-items: center; justify-content: space-between;
}
.streams-box {
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 8px;
max-height: 60vh; overflow-y: auto;
}
.stream-url {
padding: 0.5rem 0.75rem;
font-family: var(--font-mono); font-size: 0.6875rem;
color: var(--text-secondary);
border-bottom: 1px solid rgba(139, 92, 246, 0.07);
word-break: break-all; line-height: 1.5;
}
.stream-url:last-child { border-bottom: none; }
.stream-url .scheme { color: var(--purple-light); }
.stream-url .creds { color: var(--text-tertiary); }
.stream-url.custom {
display: flex; align-items: center; justify-content: space-between;
gap: 0.5rem;
background: rgba(139, 92, 246, 0.05);
}
.stream-url.custom .url-text { flex: 1; min-width: 0; }
.btn-remove-url {
background: none; border: none; cursor: pointer;
color: var(--text-tertiary); padding: 0.25rem;
display: flex; flex-shrink: 0;
transition: color var(--transition-fast);
}
.btn-remove-url:hover { color: var(--error); }
/* Custom scrollbar */
.streams-box::-webkit-scrollbar { width: 6px; }
.streams-box::-webkit-scrollbar-track { background: transparent; }
.streams-box::-webkit-scrollbar-thumb { background: var(--purple-primary); border-radius: 3px; }
/* Add custom stream */
.add-section { margin-top: 1rem; }
.add-row {
display: flex; gap: 0.5rem;
}
.add-input {
flex: 1; padding: 0.75rem;
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 8px;
color: var(--text-primary);
font-size: 0.875rem; font-family: var(--font-mono);
outline: none;
transition: all var(--transition-fast);
}
.add-input:focus {
border-color: var(--purple-primary);
box-shadow: 0 0 0 3px var(--purple-glow);
}
.add-input::placeholder { color: var(--text-tertiary); }
.btn-add {
padding: 0.75rem 1rem;
background: var(--bg-tertiary);
border: 1px solid var(--border-color);
border-radius: 8px;
color: var(--purple-primary);
font-size: 1.125rem; font-weight: 600;
cursor: pointer;
transition: all var(--transition-fast);
display: flex; align-items: center; justify-content: center;
}
.btn-add:hover { border-color: var(--purple-primary); background: var(--bg-elevated); }
/* Error */
.error-box {
padding: 1rem;
background: rgba(239, 68, 68, 0.1);
border: 1px solid rgba(239, 68, 68, 0.3);
border-radius: 8px;
color: var(--error);
font-size: 0.875rem;
}
/* Sticky bottom bar */
.bottom-bar {
position: fixed; bottom: 0; left: 0; right: 0;
padding: 1rem 1.5rem;
background: var(--bg-primary);
border-top: 1px solid var(--border-color);
display: flex; justify-content: center;
z-index: 100;
}
.bottom-bar .btn {
max-width: 700px; width: 100%;
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-count {
font-size: 0.75rem; opacity: 0.8;
font-weight: 400;
}
/* Contribute banner */
.contribute-banner {
margin-top: 0.75rem;
padding: 0.75rem 1rem;
background: rgba(139, 92, 246, 0.08);
border: 1px solid rgba(139, 92, 246, 0.25);
border-radius: 8px;
animation: fadeIn var(--transition-base);
}
.contribute-text {
font-size: 0.8125rem; color: var(--text-secondary);
margin-bottom: 0.625rem; line-height: 1.5;
}
.contribute-actions {
display: flex; gap: 0.5rem;
}
.contribute-actions button {
padding: 0.375rem 0.75rem;
border-radius: 6px;
font-size: 0.75rem; font-weight: 600;
font-family: var(--font-primary);
cursor: pointer;
transition: all var(--transition-fast);
border: none;
}
.btn-contribute-yes {
background: var(--purple-primary); color: white;
}
.btn-contribute-yes:hover { background: var(--purple-light); }
.btn-contribute-no {
background: var(--bg-tertiary); color: var(--text-secondary);
border: 1px solid var(--border-color);
}
.btn-contribute-no:hover { color: var(--text-primary); }
/* Toast */
.toast {
position: fixed; bottom: 5.5rem; left: 50%;
transform: translateX(-50%) translateY(100px);
padding: 1rem 1.5rem;
background: var(--bg-elevated);
border: 1px solid var(--border-color);
border-radius: 8px; box-shadow: var(--shadow-lg);
font-size: 0.875rem; color: var(--text-primary);
z-index: 1001; transition: transform var(--transition-base);
}
.toast.show { transform: translateX(-50%) translateY(0); }
.toast.hidden { display: none; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
</style>
</head>
<body>
<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>
<h2 class="screen-title">Stream URLs</h2>
<p class="screen-subtitle" id="subtitle"></p>
<div id="content">
<div class="loading">
<div class="loading-spinner"></div>
Building stream URLs...
</div>
</div>
</div>
</div>
<div class="bottom-bar">
<button class="btn btn-primary" id="btn-test" disabled>
Test Streams <span class="btn-count" id="btn-count"></span>
</button>
</div>
<div id="toast" class="toast hidden"></div>
<script>
var params = new URLSearchParams(location.search);
var ip = params.get('ip') || '';
var ids = params.get('ids') || '';
var user = params.get('user') || '';
var pass = params.get('pass') || '';
var channel = params.get('channel') || '';
var ports = params.get('ports') || '';
var mac = params.get('mac') || '';
var vendor = params.get('vendor') || '';
var model = params.get('model') || '';
var server = params.get('server') || '';
var hostname = params.get('hostname') || '';
var dbStreams = []; // from /api/streams
var customStreams = []; // user-added
// subtitle
document.getElementById('subtitle').textContent = ip ? 'Target: ' + ip : '';
// back
document.getElementById('btn-back').addEventListener('click', function() {
history.back();
});
// load streams on open
loadStreams();
async function loadStreams() {
if (!ids || !ip) {
renderError('Missing required parameters (ids, ip)');
return;
}
var url = 'api/streams?ids=' + encodeURIComponent(ids) + '&ip=' + encodeURIComponent(ip);
if (user) url += '&user=' + encodeURIComponent(user);
if (pass) url += '&pass=' + encodeURIComponent(pass);
if (channel) url += '&channel=' + encodeURIComponent(channel);
if (ports) url += '&ports=' + encodeURIComponent(ports);
try {
var r = await fetch(url);
if (!r.ok) {
var text = await r.text();
renderError(text || 'Error ' + r.status);
return;
}
var data = await r.json();
dbStreams = data.streams || [];
renderAll();
} catch (e) {
renderError('Connection error: ' + e.message);
}
}
// keep input value across re-renders
var pendingInput = '';
function renderAll() {
var content = document.getElementById('content');
while (content.firstChild) content.removeChild(content.firstChild);
var total = dbStreams.length + customStreams.length;
// add custom section (top)
var addSection = document.createElement('div');
addSection.className = 'add-section';
var addRow = document.createElement('div');
addRow.className = 'add-row';
var addInput = document.createElement('input');
addInput.className = 'add-input';
addInput.type = 'text';
addInput.placeholder = 'rtsp://user:pass@host/path or bubble://...';
addInput.spellcheck = false;
addInput.value = pendingInput;
var addBtn = document.createElement('button');
addBtn.className = 'btn-add';
addBtn.type = 'button';
addBtn.textContent = '+';
function addCustom() {
var v = addInput.value.trim();
if (!v) 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);
pendingInput = '';
renderAll();
// focus input for next entry
var newInput = content.querySelector('.add-input');
if (newInput) newInput.focus();
// show contribute banner
showContributeBanner(v);
}
addBtn.addEventListener('click', addCustom);
addInput.addEventListener('keypress', function(e) {
if (e.key === 'Enter') addCustom();
});
addInput.addEventListener('input', function() {
pendingInput = addInput.value;
});
addRow.appendChild(addInput);
addRow.appendChild(addBtn);
addSection.appendChild(addRow);
content.appendChild(addSection);
// count
var countDiv = document.createElement('div');
countDiv.className = 'stream-count';
var countText = document.createElement('span');
countText.textContent = total + ' stream' + (total !== 1 ? 's' : '');
countDiv.appendChild(countText);
content.appendChild(countDiv);
// streams box
var box = document.createElement('div');
box.className = 'streams-box';
// custom streams first (highlighted, removable)
customStreams.forEach(function(url, idx) {
var div = document.createElement('div');
div.className = 'stream-url custom';
var urlSpan = document.createElement('span');
urlSpan.className = 'url-text';
formatURL(urlSpan, url);
var btn = document.createElement('button');
btn.className = 'btn-remove-url';
btn.type = 'button';
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('width', '14');
svg.setAttribute('height', '14');
svg.setAttribute('viewBox', '0 0 12 12');
svg.setAttribute('fill', 'none');
var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
path.setAttribute('d', 'M3 3l6 6M9 3l-6 6');
path.setAttribute('stroke', 'currentColor');
path.setAttribute('stroke-width', '1.5');
path.setAttribute('stroke-linecap', 'round');
svg.appendChild(path);
btn.appendChild(svg);
btn.addEventListener('click', function() {
customStreams.splice(idx, 1);
renderAll();
});
div.appendChild(urlSpan);
div.appendChild(btn);
box.appendChild(div);
});
// db streams
dbStreams.forEach(function(url) {
var div = document.createElement('div');
div.className = 'stream-url';
formatURL(div, url);
box.appendChild(div);
});
content.appendChild(box);
// update button
updateButton();
}
function formatURL(el, url) {
var schemeEnd = url.indexOf('://');
if (schemeEnd === -1) {
el.textContent = url;
return;
}
var scheme = document.createElement('span');
scheme.className = 'scheme';
scheme.textContent = url.substring(0, schemeEnd + 3);
el.appendChild(scheme);
el.appendChild(document.createTextNode(url.substring(schemeEnd + 3)));
}
function updateButton() {
var total = dbStreams.length + customStreams.length;
var btn = document.getElementById('btn-test');
var count = document.getElementById('btn-count');
btn.disabled = total === 0;
count.textContent = total > 0 ? '(' + total + ')' : '';
}
function renderError(msg) {
var content = document.getElementById('content');
while (content.firstChild) content.removeChild(content.firstChild);
var div = document.createElement('div');
div.className = 'error-box';
div.textContent = msg;
content.appendChild(div);
}
// test button
document.getElementById('btn-test').addEventListener('click', startTest);
async function startTest() {
var btn = document.getElementById('btn-test');
btn.disabled = true;
btn.textContent = 'Creating session...';
var allStreams = customStreams.concat(dbStreams);
try {
var r = await fetch('api/test', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ sources: { streams: allStreams } })
});
if (!r.ok) {
var text = await r.text();
showToast(text || 'Error ' + r.status);
btn.disabled = false;
updateButton();
return;
}
var data = await r.json();
var sid = data.session_id;
// navigate to test page with all known params
var tp = new URLSearchParams();
tp.set('id', sid);
if (ip) tp.set('ip', ip);
if (mac) tp.set('mac', mac);
if (vendor) tp.set('vendor', vendor);
if (model) tp.set('model', model);
if (server) tp.set('server', server);
if (hostname) tp.set('hostname', hostname);
if (ports) tp.set('ports', ports);
if (user) tp.set('user', user);
if (channel) tp.set('channel', channel);
if (ids) tp.set('ids', ids);
window.location.href = 'test.html?' + tp.toString();
} catch (e) {
showToast('Connection error: ' + e.message);
btn.disabled = false;
updateButton();
}
}
function showContributeBanner(rawURL) {
// remove previous banner if any
var old = document.querySelector('.contribute-banner');
if (old) old.remove();
var addSection = document.querySelector('.add-section');
if (!addSection) return;
var banner = document.createElement('div');
banner.className = 'contribute-banner';
var text = document.createElement('div');
text.className = 'contribute-text';
text.textContent = 'Want to add this URL to the Strix camera database so others can find it?';
banner.appendChild(text);
var actions = document.createElement('div');
actions.className = 'contribute-actions';
var btnYes = document.createElement('button');
btnYes.className = 'btn-contribute-yes';
btnYes.type = 'button';
btnYes.textContent = 'Yes, contribute';
btnYes.addEventListener('click', function() {
window.open(buildContributeURL(rawURL), '_blank');
banner.remove();
});
var btnNo = document.createElement('button');
btnNo.className = 'btn-contribute-no';
btnNo.type = 'button';
btnNo.textContent = 'No thanks';
btnNo.addEventListener('click', function() {
banner.remove();
});
actions.appendChild(btnYes);
actions.appendChild(btnNo);
banner.appendChild(actions);
addSection.appendChild(banner);
}
var defaultPorts = { rtsp: '554', rtsps: '322', http: '80', https: '443', rtmp: '1935', bubble: '80' };
function buildContributeURL(rawURL) {
var base = 'https://gostrix.github.io/#/contribute?';
var p = new URLSearchParams();
try {
var u = new URL(rawURL);
var proto = u.protocol.replace(':', '');
p.set('protocol', proto);
p.set('port', u.port || defaultPorts[proto] || '');
var path = u.pathname + u.search;
if (path && path !== '/') p.set('url', path);
} catch (e) {
var i = rawURL.indexOf('://');
if (i > 0) {
var proto = rawURL.substring(0, i);
p.set('protocol', proto);
p.set('port', defaultPorts[proto] || '');
}
}
if (vendor) p.set('brand', vendor);
if (model) p.set('model', model);
if (mac && mac.length >= 8) p.set('mac_prefix', mac.substring(0, 8));
// auto-build comment from probe data
var comments = [];
if (server) comments.push('Server: ' + server);
if (hostname) comments.push('Hostname: ' + hostname);
if (ip) comments.push('IP: ' + ip);
if (ports) comments.push('Open ports: ' + ports);
if (comments.length > 0) p.set('comment', comments.join(', '));
return base + p.toString();
}
function showToast(msg, duration) {
var t = document.getElementById('toast');
t.textContent = msg;
t.classList.remove('hidden');
t.classList.add('show');
setTimeout(function() {
t.classList.remove('show');
setTimeout(function() { t.classList.add('hidden'); }, 250);
}, duration || 3000);
}
</script>
</body>
</html>
www/homekit.html
+323
View File
@@ -0,0 +1,323 @@
<!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 - HomeKit Device</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;
--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: flex-start; justify-content: center;
animation: fadeIn var(--transition-base);
}
.container { max-width: 520px; width: 100%; margin-top: 6vh; }
@media (min-width: 768px) {
.screen { padding: 3rem 1.5rem; }
}
.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); }
.card {
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 2rem;
text-align: center;
}
.card-icon {
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;
}
.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;
}
.card-text {
font-size: 0.9375rem;
color: var(--text-secondary);
line-height: 1.7;
margin-bottom: 1.25rem;
text-align: left;
}
.card-text strong { color: var(--text-primary); }
.device-info {
background: var(--bg-tertiary);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 1rem;
margin-bottom: 1.5rem;
text-align: left;
}
.device-row {
display: flex; justify-content: space-between;
padding: 0.375rem 0;
font-size: 0.8125rem;
}
.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; }
.contact-links {
display: flex; flex-direction: column; gap: 0.5rem;
margin-bottom: 1.5rem;
text-align: left;
}
.contact-link {
display: flex; align-items: center; gap: 0.5rem;
padding: 0.75rem 1rem;
background: var(--bg-tertiary);
border: 1px solid var(--border-color);
border-radius: 8px;
color: var(--purple-light);
text-decoration: none;
font-size: 0.875rem;
transition: all var(--transition-fast);
}
.contact-link:hover {
border-color: var(--purple-primary);
background: rgba(139, 92, 246, 0.08);
}
.contact-link svg { width: 18px; height: 18px; flex-shrink: 0; }
.divider {
display: flex; align-items: center; gap: 1rem;
margin: 1.5rem 0;
color: var(--text-tertiary);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.divider::before, .divider::after {
content: ''; flex: 1; height: 1px;
background: var(--border-color);
}
.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);
cursor: pointer; transition: all var(--transition-fast);
border: none; outline: none; width: 100%;
}
.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 {
transform: translateY(-2px);
box-shadow: 0 8px 20px var(--purple-glow-strong);
}
.btn-primary:active { transform: translateY(0); }
.btn-outline {
background: transparent; color: var(--text-secondary);
border: 1px solid var(--border-color);
margin-top: 0.75rem;
}
.btn-outline:hover { border-color: var(--purple-primary); color: var(--purple-light); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
</style>
</head>
<body>
<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">HomeKit Device Detected</h2>
<div class="card-badge">Apple HomeKit</div>
<div id="device-info" class="device-info"></div>
<p class="card-text">
We are working on adding <strong>Apple HomeKit camera support</strong> to Strix, but we don't have HomeKit cameras available for testing.
</p>
<p class="card-text">
The device at this IP supports HomeKit protocol. If you'd like to help us add support for HomeKit cameras, please reach out. Your contribution would be greatly appreciated.
</p>
<div class="contact-links">
<a class="contact-link" href="mailto:ceo@webaweba.com">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<rect x="2" y="4" width="20" height="16" rx="2"/>
<path d="M22 4l-10 8L2 4"/>
</svg>
ceo@webaweba.com
</a>
<a class="contact-link" href="https://github.com/eduard256/Strix/issues/new/choose" target="_blank">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.166 6.839 9.489.5.092.682-.217.682-.482 0-.237-.009-.866-.013-1.7-2.782.604-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.463-1.11-1.463-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0112 6.836c.85.004 1.705.115 2.504.337 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C19.138 20.161 22 16.416 22 12c0-5.523-4.477-10-10-10z"/>
</svg>
Create GitHub Issue
</a>
</div>
<div class="divider">or</div>
<button class="btn btn-primary" id="btn-standard">
Try Standard Discovery
</button>
<button class="btn btn-outline" id="btn-skip">
Back to Home
</button>
</div>
</div>
</div>
<script>
var params = new URLSearchParams(location.search);
// all probe data passed through
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 mdnsName = params.get('mdns_name') || '';
var mdnsModel = params.get('mdns_model') || '';
var mdnsCategory = params.get('mdns_category') || '';
// render device info
var infoDiv = document.getElementById('device-info');
var rows = [];
if (ip) rows.push(['IP Address', ip]);
if (mdnsName) rows.push(['Device Name', mdnsName]);
if (mdnsModel) rows.push(['Model', mdnsModel]);
if (mdnsCategory) rows.push(['Category', mdnsCategory]);
if (vendor) rows.push(['Vendor', vendor]);
if (mac) rows.push(['MAC', mac]);
if (hostname) rows.push(['Hostname', hostname]);
if (latency) rows.push(['Latency', latency + 'ms']);
if (ports) rows.push(['Open Ports', ports]);
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';
// back
document.getElementById('btn-back').addEventListener('click', function() {
window.location.href = 'index.html';
});
document.getElementById('btn-skip').addEventListener('click', function() {
window.location.href = 'index.html';
});
// try standard discovery -- pass all params to standard.html
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();
});
</script>
</body>
</html>
www/index.html
+454
View File
@@ -0,0 +1,454 @@
<!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 - Camera Stream Discovery</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;
--warning: #f59e0b;
--error: #ef4444;
--border-color: rgba(139, 92, 246, 0.15);
--border-focus: rgba(139, 92, 246, 0.5);
--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: flex-start;
justify-content: center;
animation: fadeIn var(--transition-base);
}
.container { max-width: 480px; width: 100%; margin-top: 8vh; }
@media (min-width: 768px) {
.screen { padding: 3rem 1.5rem; }
.container { max-width: 540px; }
}
.hero { text-align: center; margin-bottom: 3rem; }
.logo {
width: 64px; height: 64px;
color: var(--purple-primary);
margin: 0 auto 1rem;
filter: drop-shadow(0 4px 12px var(--purple-glow));
}
.title {
font-size: 2rem; font-weight: 700;
letter-spacing: 0.05em; 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;
}
.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.5rem;
}
.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-large { padding: 1.5rem; font-size: 1.125rem; }
.hint { margin-top: 0.5rem; font-size: 0.875rem; color: var(--text-tertiary); }
.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; }
.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); margin-bottom: 0.75rem; }
.tooltip-text:last-child { margin-bottom: 0; }
.tooltip-examples { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--border-color); }
.tooltip-examples-title { font-weight: 600; color: var(--text-primary); font-size: 0.75rem; margin-bottom: 0.5rem; }
.tooltip-example {
font-family: var(--font-mono); font-size: 0.75rem;
color: var(--purple-light); background: var(--bg-secondary);
padding: 0.25rem 0.5rem; border-radius: 4px;
margin-bottom: 0.25rem; display: block;
}
.examples { margin-top: 3rem; text-align: center; }
.examples-title { font-size: 0.875rem; color: var(--text-tertiary); margin-bottom: 0.75rem; font-weight: 500; }
.examples-list { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.examples-list li { font-size: 0.875rem; color: var(--text-secondary); font-family: var(--font-mono); }
.probe-result {
margin-top: 1.5rem; padding: 1rem;
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 8px;
font-family: var(--font-mono); font-size: 0.75rem;
color: var(--text-secondary);
white-space: pre-wrap; word-break: break-all;
line-height: 1.6;
display: none;
}
.probe-result.visible { display: block; animation: fadeIn var(--transition-base); }
.type-badge {
display: inline-block; padding: 0.125rem 0.5rem;
border-radius: 4px; font-weight: 600; font-size: 0.6875rem;
text-transform: uppercase; letter-spacing: 0.05em;
}
.type-standard { background: var(--success); color: #000; }
.type-homekit { background: var(--purple-primary); color: #fff; }
.type-unreachable { background: var(--error); color: #fff; }
.toast {
position: fixed; bottom: 1.5rem; left: 50%;
transform: translateX(-50%) translateY(100px);
padding: 1rem 1.5rem;
background: var(--bg-elevated);
border: 1px solid var(--border-color);
border-radius: 8px; box-shadow: var(--shadow-lg);
font-size: 0.875rem; color: var(--text-primary);
z-index: 1000; transition: transform var(--transition-base);
}
.toast.show { transform: translateX(-50%) translateY(0); }
.toast.hidden { display: none; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
</style>
</head>
<body>
<div class="screen">
<div class="container">
<div class="hero">
<svg class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512.001 512.001">
<g><path style="fill:#7E57C2;" d="M124.477,378.183L9.347,495.779c21.628,21.628,56.695,21.628,78.324,0L119,464.45c21.628,21.628,56.696,21.628,78.324,0l28.375-28.375C187.373,426.203,151.825,405.106,124.477,378.183z"/><path style="fill:#7E57C2;" d="M447.27,55.383h-55.383V177.22c0.002-40.997,22.277-76.788,55.383-95.939c16.293-9.425,35.207-14.822,55.383-14.822c0-6.982,0-11.077,0-11.077V0C472.065,0,447.27,24.796,447.27,55.383z"/></g>
<path style="fill:#9575CD;" d="M336.504,55.383C336.504,24.796,311.708,0,281.121,0v66.46c20.176,0,39.091,5.397,55.383,14.822c33.107,19.153,55.383,54.946,55.383,95.945V55.383H336.504z"/>
<path style="fill:#E8E0F5;" d="M391.887,209.772v-27.116c0-3.312,0-5.432,0-5.432c0-40.997-22.276-76.791-55.383-95.942c-16.293-9.425-35.207-14.822-55.383-14.822v155.073C311.213,191.443,357.554,187.532,391.887,209.772z M314.351,143.996c0-12.234,9.918-22.153,22.153-22.153s22.153,9.919,22.153,22.153c0,12.235-9.918,22.153-22.153,22.153S314.351,156.231,314.351,143.996z"/>
<path style="fill:#D1C4E9;" d="M391.887,177.221v32.551c5.151,3.336,10.037,7.246,14.55,11.76h96.216V66.46c-20.176,0-39.091,5.397-55.383,14.822C414.164,100.434,391.888,136.225,391.887,177.221z M469.423,143.996c0,12.235-9.918,22.153-22.153,22.153s-22.153-9.918-22.153-22.153c0-12.234,9.918-22.153,22.153-22.153C459.504,121.843,469.423,131.762,469.423,143.996z"/>
<path style="fill:#B39DDB;" d="M406.438,221.533c34.606,34.606,34.606,90.712,0,125.319c-69.21,69.21-181.422,69.21-250.633,0.002l-31.329,31.33c27.348,26.923,62.896,48.02,101.221,57.892c17.714,4.562,36.285,6.989,55.423,6.989c122.349,0,221.532-99.182,221.532-221.531C502.653,221.533,406.437,221.532,406.438,221.533z"/>
<path style="fill:#9575CD;" d="M281.121,221.532l125.318,125.319c34.606-34.606,34.606-90.713,0-125.319c-4.515-4.514-9.401-8.425-14.551-11.761C357.554,187.532,311.213,191.443,281.121,221.532z"/>
<path style="fill:#7E57C2;" d="M406.438,346.851L281.12,221.533l-10.199,10.2L155.802,346.851C225.017,416.062,337.228,416.061,406.438,346.851z"/>
<circle style="fill:#9575CD;" cx="336.507" cy="143.996" r="22.153"/>
<circle style="fill:#7E57C2;" cx="447.274" cy="143.996" r="22.153"/>
</svg>
<h1 class="title">STRIX</h1>
<p class="subtitle">Camera Stream Discovery</p>
</div>
<div class="form-group">
<label class="label">
Network Address
<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">Network Address</div>
<p class="tooltip-text">Enter the IP address of your camera. Strix will probe the device to detect its type and capabilities.</p>
<div class="tooltip-examples">
<div class="tooltip-examples-title">Accepted formats:</div>
<code class="tooltip-example">192.168.1.100</code>
<code class="tooltip-example">10.0.0.50</code>
</div>
</div>
</span>
</label>
<input type="text" id="ip" class="input input-large" placeholder="192.168.1.100" autocomplete="off" spellcheck="false">
<p class="hint">IP address of the camera</p>
</div>
<button id="btn-check" class="btn btn-primary btn-large">Check Address</button>
<div id="probe-result" class="probe-result"></div>
<div class="examples">
<p class="examples-title">Examples</p>
<ul class="examples-list">
<li>192.168.1.100</li>
<li>10.0.0.50</li>
<li>172.16.0.10</li>
</ul>
</div>
</div>
</div>
<div id="toast" class="toast hidden"></div>
<script>
const ipInput = document.getElementById('ip');
const btnCheck = document.getElementById('btn-check');
const probeResult = document.getElementById('probe-result');
// prefill network prefix from server IP
(function() {
const h = location.hostname;
if (!h || h === 'localhost' || h === '127.0.0.1' || h === '0.0.0.0') return;
const m = h.match(/^(\d{1,3}\.\d{1,3}\.\d{1,3}\.)\d{1,3}$/);
if (m) { ipInput.value = m[1]; ipInput.placeholder = m[1] + '100'; }
})();
ipInput.addEventListener('keypress', function(e) { if (e.key === 'Enter') checkAddress(); });
btnCheck.addEventListener('click', checkAddress);
async function checkAddress() {
const ip = ipInput.value.trim();
if (!ip) { showToast('Enter an IP address'); return; }
btnCheck.disabled = true;
btnCheck.textContent = 'Checking...';
probeResult.classList.remove('visible');
try {
const r = await fetch('api/probe?ip=' + encodeURIComponent(ip));
if (!r.ok) {
const text = await r.text();
showToast(text || 'Error ' + r.status);
return;
}
const data = await r.json();
if (data.type === 'standard' || (data.reachable && data.type !== 'homekit')) {
navigateStandard(ip, data);
return;
}
if (data.type === 'homekit') {
navigateHomeKit(ip, data);
return;
}
if (data.type === 'unreachable') {
showUnreachable(ip);
return;
}
} catch (e) {
showToast('Connection error: ' + e.message);
} finally {
btnCheck.disabled = false;
btnCheck.textContent = 'Check Address';
}
}
function navigateStandard(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));
}
window.location.href = 'standard.html?' + p.toString();
}
function navigateHomeKit(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.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);
}
window.location.href = 'homekit.html?' + p.toString();
}
function showUnreachable(ip) {
probeResult.textContent = '';
probeResult.classList.add('visible');
var box = document.createElement('div');
box.style.cssText = 'text-align:center; padding:1.5rem 0;';
var title = document.createElement('div');
title.style.cssText = 'font-size:1.125rem; font-weight:600; color:var(--error); margin-bottom:0.75rem;';
title.textContent = 'Device Unreachable';
var msg = document.createElement('div');
msg.style.cssText = 'font-size:0.875rem; color:var(--text-secondary); margin-bottom:1.5rem; line-height:1.6;';
msg.textContent = 'The device at ' + ip + ' is not responding. It may be offline, on a different network, or the IP address may be incorrect.';
var actions = document.createElement('div');
actions.style.cssText = 'display:flex; gap:0.75rem; justify-content:center;';
var btnRetry = document.createElement('button');
btnRetry.className = 'btn btn-primary';
btnRetry.style.cssText = 'padding:0.75rem 1.5rem; font-size:0.875rem;';
btnRetry.textContent = 'Try Again';
btnRetry.addEventListener('click', function() {
probeResult.classList.remove('visible');
ipInput.focus();
ipInput.select();
});
var btnContinue = document.createElement('button');
btnContinue.style.cssText = 'padding:0.75rem 1.5rem; font-size:0.875rem; background:var(--bg-tertiary); border:1px solid var(--border-color); border-radius:8px; color:var(--text-secondary); cursor:pointer; font-family:var(--font-primary); font-weight:600; transition:all 150ms;';
btnContinue.textContent = 'Continue Anyway';
btnContinue.addEventListener('click', function() {
var p = new URLSearchParams();
p.set('ip', ip);
window.location.href = 'standard.html?' + p.toString();
});
actions.appendChild(btnRetry);
actions.appendChild(btnContinue);
box.appendChild(title);
box.appendChild(msg);
box.appendChild(actions);
probeResult.appendChild(box);
}
function showToast(msg, duration) {
var t = document.getElementById('toast');
t.textContent = msg;
t.classList.remove('hidden');
t.classList.add('show');
setTimeout(function() {
t.classList.remove('show');
setTimeout(function() { t.classList.add('hidden'); }, 250);
}, duration || 3000);
}
</script>
</body>
</html>
www/standard.html
+682
View File
@@ -0,0 +1,682 @@
<!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 - Camera Configuration</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;
--text-disabled: #404050;
--success: #10b981;
--warning: #f59e0b;
--error: #ef4444;
--border-color: rgba(139, 92, 246, 0.15);
--border-focus: rgba(139, 92, 246, 0.5);
--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;
animation: fadeIn var(--transition-base);
}
.container { max-width: 480px; margin: 0 auto; width: 100%; }
@media (min-width: 768px) {
.screen { padding: 3rem 1.5rem; }
.container { max-width: 540px; }
}
/* Back button */
.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: 1.5rem;
transition: color var(--transition-fast);
}
.btn-back:hover { color: var(--purple-primary); }
.screen-title { font-size: 1.5rem; font-weight: 600; margin-bottom: 2rem; }
/* 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;
}
.optional { color: var(--text-tertiary); font-weight: 400; }
.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:disabled { opacity: 0.6; cursor: not-allowed; }
.hint { margin-top: 0.5rem; font-size: 0.875rem; color: var(--text-tertiary); }
/* Validated input with checkmark */
.input-validated { position: relative; }
.input-validated .input { padding-right: 3rem; }
.icon-check {
position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
color: var(--success);
}
/* Password toggle */
.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); }
/* 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);
}
.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); margin-bottom: 0.75rem; }
.tooltip-text:last-child { margin-bottom: 0; }
/* Autocomplete dropdown */
.autocomplete-wrapper { position: relative; }
.autocomplete-dropdown {
position: absolute; top: 100%; left: 0; right: 0;
margin-top: 0.5rem;
background: var(--bg-elevated);
border: 1px solid var(--border-color);
border-radius: 8px;
max-height: 300px; overflow-y: auto;
z-index: 100; box-shadow: var(--shadow-lg);
display: none;
}
.autocomplete-dropdown.open { display: block; }
.autocomplete-item {
padding: 0.75rem 1rem; cursor: pointer;
transition: background-color var(--transition-fast);
font-size: 0.875rem;
display: flex; align-items: center; gap: 0.5rem;
}
.autocomplete-item:hover { background: var(--bg-tertiary); }
.autocomplete-item.selected { background: var(--bg-tertiary); border-left: 2px solid var(--purple-primary); }
.autocomplete-item.disabled { opacity: 0.3; cursor: not-allowed; pointer-events: none; }
.autocomplete-item.contribute {
color: var(--purple-light); font-size: 0.8125rem;
border-bottom: 1px solid var(--border-color);
gap: 0.375rem;
}
.autocomplete-item.contribute:hover { background: rgba(139, 92, 246, 0.1); }
.autocomplete-item.contribute svg { width: 14px; height: 14px; flex-shrink: 0; }
.autocomplete-item:first-child { border-radius: 8px 8px 0 0; }
.autocomplete-item:last-child { border-radius: 0 0 8px 8px; }
.autocomplete-item .item-type {
font-size: 0.6875rem; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.05em;
padding: 0.125rem 0.375rem; border-radius: 3px;
flex-shrink: 0; min-width: 48px; text-align: center;
}
.item-type-preset { background: rgba(245, 158, 11, 0.15); color: var(--warning); }
.item-type-brand { background: rgba(16, 185, 129, 0.15); color: var(--success); }
.item-type-model { background: rgba(139, 92, 246, 0.15); color: var(--purple-primary); }
.autocomplete-loading {
padding: 1rem; text-align: center;
color: var(--text-tertiary); font-size: 0.875rem;
}
/* Selected tags inside dropdown */
.dropdown-tags {
display: flex; flex-wrap: wrap; gap: 0.375rem;
padding: 0.625rem 0.75rem;
border-bottom: 1px solid var(--border-color);
}
.tag {
display: inline-flex; align-items: center; gap: 0.375rem;
padding: 0.375rem 0.625rem;
background: var(--bg-primary);
border: 1px solid var(--border-color);
border-radius: 6px;
font-size: 0.75rem; color: var(--text-primary);
}
.tag .tag-type {
font-size: 0.625rem; font-weight: 600;
text-transform: uppercase; color: var(--text-tertiary);
}
.tag .tag-remove {
background: none; border: none; cursor: pointer;
color: var(--text-tertiary); padding: 0;
display: flex; align-items: center;
transition: color var(--transition-fast);
}
.tag .tag-remove:hover { color: var(--error); }
/* Advanced section */
.advanced-section { margin-bottom: 1.5rem; }
.advanced-toggle {
display: flex; align-items: center; gap: 0.5rem;
cursor: pointer; user-select: none;
font-size: 1rem; font-weight: 500;
color: var(--text-secondary);
padding: 0.75rem 0;
transition: color var(--transition-fast);
}
.advanced-toggle:hover { color: var(--purple-primary); }
.advanced-chevron {
transition: transform var(--transition-fast);
width: 12px; height: 12px;
}
.advanced-section[open] .advanced-chevron { transform: rotate(90deg); }
.advanced-content { padding-top: 1rem; }
/* 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; }
/* Toast */
.toast {
position: fixed; bottom: 1.5rem; left: 50%;
transform: translateX(-50%) translateY(100px);
padding: 1rem 1.5rem;
background: var(--bg-elevated);
border: 1px solid var(--border-color);
border-radius: 8px; box-shadow: var(--shadow-lg);
font-size: 0.875rem; color: var(--text-primary);
z-index: 1000; transition: transform var(--transition-base);
}
.toast.show { transform: translateX(-50%) translateY(0); }
.toast.hidden { display: none; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
</style>
</head>
<body>
<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>
<h2 class="screen-title">Camera Configuration</h2>
<!-- IP (readonly, from params) -->
<div class="form-group">
<label class="label">
Network Address
<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">Network Address</div>
<p class="tooltip-text">Detected from the previous probe. This is the IP address of your camera.</p>
</div>
</span>
</label>
<div class="input-validated">
<input type="text" id="f-ip" class="input" readonly>
<svg class="icon-check" width="20" height="20" viewBox="0 0 20 20" fill="none">
<path d="M4 10l4 4 8-8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</div>
</div>
<!-- Camera search -->
<div class="form-group">
<label class="label">
Camera Model <span class="optional">(optional)</span>
<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">Camera Model</div>
<p class="tooltip-text">Search for your camera brand, model, or use a preset. You can select multiple items to combine stream patterns.</p>
</div>
</span>
</label>
<div class="autocomplete-wrapper">
<input type="text" id="f-model" class="input" placeholder="Search brand, model or preset..." autocomplete="off" spellcheck="false">
<div id="dropdown" class="autocomplete-dropdown"></div>
</div>
</div>
<!-- Username -->
<div class="form-group">
<label class="label">Username</label>
<input type="text" id="f-user" class="input" value="admin" autocomplete="off" spellcheck="false">
</div>
<!-- Password -->
<div class="form-group">
<label class="label">Password</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>
<!-- Advanced -->
<details class="advanced-section" id="advanced">
<summary class="advanced-toggle">
<svg class="advanced-chevron" viewBox="0 0 12 12" fill="none">
<path d="M4.5 2l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
</svg>
Advanced
</summary>
<div class="advanced-content">
<div class="form-group">
<label class="label">Channel</label>
<input type="text" id="f-channel" class="input" value="0" autocomplete="off">
<p class="hint">Camera channel number (0 for most cameras, 1+ for NVR)</p>
</div>
<div class="form-group">
<label class="label">Ports Filter <span class="optional">(optional)</span></label>
<input type="text" id="f-ports" class="input" placeholder="e.g. 554,80" autocomplete="off">
<p class="hint">Only test streams on these ports. Leave empty to test all.</p>
</div>
</div>
</details>
<!-- Discover button -->
<button id="btn-discover" class="btn btn-primary btn-large">Discover Streams</button>
</div>
</div>
<div id="toast" class="toast hidden"></div>
<script>
// parse URL params
var params = new URLSearchParams(location.search);
var probeIP = params.get('ip') || '';
var probePorts = params.get('ports') || '';
var probeMAC = params.get('mac') || '';
var probeVendor = params.get('vendor') || '';
var probeServer = params.get('server') || '';
var probeHostname = params.get('hostname') || '';
var probeLatency = params.get('latency') || '';
// fill fields from params
document.getElementById('f-ip').value = probeIP;
if (probePorts) document.getElementById('f-ports').value = probePorts;
// if vendor from OUI, prefill search
if (probeVendor) {
document.getElementById('f-model').value = probeVendor;
// trigger search after load
setTimeout(function() { searchModels(probeVendor); }, 300);
}
// back button
document.getElementById('btn-back').addEventListener('click', function() {
window.location.href = 'index.html';
});
// password toggle
document.getElementById('btn-toggle-pass').addEventListener('click', function() {
var input = document.getElementById('f-pass');
input.type = input.type === 'password' ? 'text' : 'password';
});
// advanced toggle (details/summary handles it natively)
// -- search / autocomplete --
var selected = new Map(); // id -> {type, name}
// default: top-1000 preset
selected.set('p:top-1000', { type: 'preset', name: 'Top 1000 Stream Patterns' });
var searchTimer = null;
var modelInput = document.getElementById('f-model');
var dropdown = document.getElementById('dropdown');
modelInput.addEventListener('input', function() {
clearTimeout(searchTimer);
var q = modelInput.value.trim();
if (q.length >= 1) {
searchTimer = setTimeout(function() { searchModels(q); }, 150);
} else {
dropdown.classList.remove('open');
}
});
modelInput.addEventListener('focus', function() {
if (modelInput.value.trim().length >= 1) {
searchModels(modelInput.value.trim());
}
});
// close dropdown on outside click
var dropdownClicked = false;
dropdown.addEventListener('mousedown', function() {
dropdownClicked = true;
});
document.addEventListener('click', function(e) {
if (dropdownClicked) {
dropdownClicked = false;
return;
}
if (!e.target.closest('.autocomplete-wrapper')) {
dropdown.classList.remove('open');
}
});
async function searchModels(q) {
try {
var r = await fetch('api/search?q=' + encodeURIComponent(q));
var data = await r.json();
renderDropdown(data.results || []);
} catch (e) {
dropdown.classList.remove('open');
}
}
var lastResults = []; // cache for re-rendering
function renderDropdown(results) {
lastResults = results;
rebuildDropdown();
}
function rebuildDropdown() {
while (dropdown.firstChild) dropdown.removeChild(dropdown.firstChild);
// render tags inside dropdown if any selected
if (selected.size > 0) {
var tagsDiv = document.createElement('div');
tagsDiv.className = 'dropdown-tags';
selected.forEach(function(item, id) {
var tag = document.createElement('span');
tag.className = 'tag';
var type = document.createElement('span');
type.className = 'tag-type';
type.textContent = item.type;
tag.appendChild(type);
tag.appendChild(document.createTextNode(item.name));
var btn = document.createElement('button');
btn.className = 'tag-remove';
btn.type = 'button';
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('width', '12');
svg.setAttribute('height', '12');
svg.setAttribute('viewBox', '0 0 12 12');
svg.setAttribute('fill', 'none');
var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
path.setAttribute('d', 'M3 3l6 6M9 3l-6 6');
path.setAttribute('stroke', 'currentColor');
path.setAttribute('stroke-width', '1.5');
path.setAttribute('stroke-linecap', 'round');
svg.appendChild(path);
btn.appendChild(svg);
btn.addEventListener('click', function(e) {
e.stopPropagation();
selected.delete(id);
rebuildDropdown();
});
tag.appendChild(btn);
tagsDiv.appendChild(tag);
});
dropdown.appendChild(tagsDiv);
}
// "Add new model" link -- always first
var contribItem = document.createElement('div');
contribItem.className = 'autocomplete-item contribute';
var contribSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
contribSvg.setAttribute('viewBox', '0 0 16 16');
contribSvg.setAttribute('fill', 'none');
var contribPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
contribPath.setAttribute('d', 'M8 3v10M3 8h10');
contribPath.setAttribute('stroke', 'currentColor');
contribPath.setAttribute('stroke-width', '1.5');
contribPath.setAttribute('stroke-linecap', 'round');
contribSvg.appendChild(contribPath);
contribItem.appendChild(contribSvg);
contribItem.appendChild(document.createTextNode('Add new model to Strix DB'));
contribItem.addEventListener('click', function() {
var p = new URLSearchParams();
var q = modelInput.value.trim();
if (q) p.set('model', q);
if (probeVendor) p.set('brand', probeVendor);
if (probeMAC && probeMAC.length >= 8) p.set('mac_prefix', probeMAC.substring(0, 8));
if (probeServer) p.set('comment', 'Server: ' + probeServer);
window.open('https://gostrix.github.io/#/contribute?' + p.toString(), '_blank');
});
dropdown.appendChild(contribItem);
if (lastResults.length === 0 && selected.size === 0) {
var empty = document.createElement('div');
empty.className = 'autocomplete-loading';
empty.textContent = 'No results found in database';
dropdown.appendChild(empty);
dropdown.classList.add('open');
return;
}
// collect selected brand IDs to disable their models
var selectedBrands = new Set();
selected.forEach(function(item, id) {
if (item.type === 'brand') selectedBrands.add(id.slice(2));
});
lastResults.forEach(function(r) {
var isSelected = selected.has(r.id);
var isDisabled = r.type === 'model' && selectedBrands.has(r.id.split(':')[1]);
var item = document.createElement('div');
item.className = 'autocomplete-item';
if (isSelected) item.classList.add('selected');
if (isDisabled) item.classList.add('disabled');
var badge = document.createElement('span');
badge.className = 'item-type item-type-' + r.type;
badge.textContent = r.type;
item.appendChild(badge);
item.appendChild(document.createTextNode(r.name));
if (!isDisabled) {
item.addEventListener('click', function() {
toggleItem(r);
});
}
dropdown.appendChild(item);
});
dropdown.classList.add('open');
}
function toggleItem(r) {
if (selected.has(r.id)) {
// deselect
selected.delete(r.id);
} else {
// if selecting brand, remove its individual models
if (r.type === 'brand') {
var prefix = 'm:' + r.id.slice(2) + ':';
selected.forEach(function(_, id) {
if (id.indexOf(prefix) === 0) selected.delete(id);
});
}
selected.set(r.id, { type: r.type, name: r.name });
}
rebuildDropdown();
}
// -- discover button -> navigate to create.html --
document.getElementById('btn-discover').addEventListener('click', function() {
if (selected.size === 0) {
showToast('Select at least one preset, brand or model');
return;
}
var ids = Array.from(selected.keys()).join(',');
var ip = document.getElementById('f-ip').value.trim();
var user = document.getElementById('f-user').value.trim();
var pass = document.getElementById('f-pass').value;
var channel = document.getElementById('f-channel').value.trim();
var portsVal = document.getElementById('f-ports').value.trim();
if (!ip) { showToast('IP address is required'); return; }
var p = new URLSearchParams();
p.set('ip', ip);
p.set('ids', ids);
if (user) p.set('user', user);
if (pass) p.set('pass', pass);
if (channel && channel !== '0') p.set('channel', channel);
if (portsVal) p.set('ports', portsVal);
if (probeMAC) p.set('mac', probeMAC);
if (probeVendor) p.set('vendor', probeVendor);
if (probeServer) p.set('server', probeServer);
if (probeHostname) p.set('hostname', probeHostname);
// pass selected model name if exactly one model/brand selected
var names = [];
selected.forEach(function(item) {
if (item.type === 'model' || item.type === 'brand') names.push(item.name);
});
if (names.length > 0) p.set('model', names.join(', '));
window.location.href = 'create.html?' + p.toString();
});
// -- toast --
function showToast(msg, duration) {
var t = document.getElementById('toast');
t.textContent = msg;
t.classList.remove('hidden');
t.classList.add('show');
setTimeout(function() {
t.classList.remove('show');
setTimeout(function() { t.classList.add('hidden'); }, 250);
}, duration || 3000);
}
</script>
</body>
</html>
www/static.go
+6
View File
@@ -0,0 +1,6 @@
package www
import "embed"
//go:embed *.html
var Static embed.FS