From 1fe602679ebeb08c94ddcbafa8b5d2650c26aae8 Mon Sep 17 00:00:00 2001 From: Alex X Date: Sat, 15 Nov 2025 21:08:00 +0300 Subject: [PATCH] Update WebUI design --- www/add.html | 641 +++++++++++++++---------------- www/{editor.html => config.html} | 38 +- www/index.html | 79 ++-- www/links.html | 331 ++++++++-------- www/log.html | 88 ++--- www/main.js | 294 ++++++-------- www/{network.html => net.html} | 21 +- 7 files changed, 700 insertions(+), 792 deletions(-) rename www/{editor.html => config.html} (75%) rename www/{network.html => net.html} (87%) diff --git a/www/add.html b/www/add.html index 17c05059..75f7b996 100644 --- a/www/add.html +++ b/www/add.html @@ -1,41 +1,37 @@ + + go2rtc - Add Stream - - + + - - -
-
- - - -
-
- - - - -
-
-
- - - - -
-
- - - - -
-
- - -
-
-
- + const r = await fetch(url, {method: 'PUT'}); + alert(r.ok ? 'OK' : 'ERROR: ' + await r.text()); + }); + - -
-
-
- + +
+
+
+ - -
-
-
- + +
+
+ + + + +
+
+ + +
+
+
+ - - - -
-
- - - - - -
-
-
- - - -
-
- - - - -
-
- - -
-
-
- + + + +
+
+
+ + + + +
+
+
+ + + + +
+
+
+ + + + +
+
+ + + + + +
+
+
+ + + +
+
+
+ + + + +
+
+
+ + + + +
+
+ + +
+
+
+ + + + +
+
+ + + + +
+
+ + +
+
+
+ - - -
-
-
- + document.getElementById('ring-credentials-form').addEventListener('submit', handleRingAuth); + document.getElementById('ring-token-form').addEventListener('submit', handleRingAuth); + - -
-
-
- + +
+
+ + + +
+ +
+
+ - -
-
- - -
-
-
- + +
+
+
+ - -
-
- - - -
- -
-
- - - - -
-
-
- - - - -
-
-
- - + +
+
+
+ + diff --git a/www/editor.html b/www/config.html similarity index 75% rename from www/editor.html rename to www/config.html index cb455f4d..9e1853c2 100644 --- a/www/editor.html +++ b/www/config.html @@ -1,41 +1,36 @@ - go2rtc - File Editor - - + + + go2rtc - Config - -
- -
-
-
- + +
+
+ +
+
+
+ + + diff --git a/www/index.html b/www/index.html index 63fedcec..2f7ac967 100644 --- a/www/index.html +++ b/www/index.html @@ -1,61 +1,49 @@ - - - - - - + + go2rtc + -
-
- - - - - -
- - - - - - - - - - -
OnlineCommands
+ +
+
+ + modes + + + + +
+ + + + + + + + + + +
onlinecommands
+
+
+ + diff --git a/www/links.html b/www/links.html index 3b651762..a54fcf8f 100644 --- a/www/links.html +++ b/www/links.html @@ -1,27 +1,10 @@ + + go2rtc - links - - - - - + +
+ + + }); + -
-

Play audio

-
-
-
-
- - send / cameras with two way audio support -
- +
+

Play audio

+ + + +
+ + + / cameras with two way audio support +
+ -
-

Publish stream

- 
YouTube:  rtmps://xxx.rtmp.youtube.com/live2/xxxx-xxxx-xxxx-xxxx-xxxx
+    

+        
Publish stream

+        
YouTube:  rtmps://xxx.rtmp.youtube.com/live2/xxxx-xxxx-xxxx-xxxx-xxxx
 Telegram: rtmps://xxx-x.rtmp.t.me/s/xxxxxxxxxx:xxxxxxxxxxxxxxxxxxxxxx

-    
-    send / Telegram RTMPS server
-

-
+        
+        
+        / Telegram RTMPS server
+
+ -
-

WebRTC Magic

-
-
-
-
+
+

WebRTC Magic

+ + + + -
-
  • webrtc.html local WebRTC viewer
    • +
    +
  • webrtc.html local WebRTC viewer
    • -
  • - share link - copy link - delete - external WebRTC viewer -
    • -
    - + +
    diff --git a/www/log.html b/www/log.html index 84ec0675..67476603 100644 --- a/www/log.html +++ b/www/log.html @@ -1,69 +1,64 @@ + + go2rtc - Logs - - + -
    - - - -
    -
    - - - - - - - - - - -
    TimeLevelMessage
    + +
    +
    + + + +
    + + + + + + + + + + +
    TimeLevelMessage
    +
    + + diff --git a/www/main.js b/www/main.js index 714c9127..36b04495 100644 --- a/www/main.js +++ b/www/main.js @@ -1,200 +1,134 @@ -// main menu -document.body.innerHTML = ` +document.head.innerHTML += ` - +`; + +document.body.innerHTML = ` +
    + +
    ` + document.body.innerHTML; - -const sunIcon = '☀️'; -const moonIcon = '🌕'; - -document.addEventListener('DOMContentLoaded', () => { - const darkModeToggle = document.getElementById('darkModeToggle'); - const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)'); - - const isDarkModeEnabled = () => document.body.classList.contains('dark-mode'); - - // Update the toggle button based on the dark mode state - const updateToggleButton = () => { - if (isDarkModeEnabled()) { - darkModeToggle.innerHTML = sunIcon; - darkModeToggle.setAttribute('aria-label', 'Enable light mode'); - } else { - darkModeToggle.innerHTML = moonIcon; - darkModeToggle.setAttribute('aria-label', 'Enable dark mode'); - } - }; - - const updateDarkMode = () => { - if (localStorage.getItem('darkMode') === 'enabled' || prefersDarkScheme.matches && localStorage.getItem('darkMode') !== 'disabled') { - document.body.classList.add('dark-mode'); - } else { - document.body.classList.remove('dark-mode'); - } - updateEditorTheme(); - updateToggleButton(); - }; - - // Update the editor theme based on the dark mode state - const updateEditorTheme = () => { - if (typeof editor !== 'undefined') { - editor.setTheme(isDarkModeEnabled() ? 'ace/theme/tomorrow_night_eighties' : 'ace/theme/github'); - } - }; - - // Initial update for dark mode and toggle button - updateDarkMode(); - - // Listen for changes in the system's color scheme preference - prefersDarkScheme.addEventListener('change', updateDarkMode); // Modern approach - - // Toggle dark mode and update local storage on button click - darkModeToggle.addEventListener('click', () => { - const enabled = document.body.classList.toggle('dark-mode'); - localStorage.setItem('darkMode', enabled ? 'enabled' : 'disabled'); - updateToggleButton(); // Update the button after toggling - updateEditorTheme(); - }); -}); diff --git a/www/network.html b/www/net.html similarity index 87% rename from www/network.html rename to www/net.html index 79875012..8f0f91ac 100644 --- a/www/network.html +++ b/www/net.html @@ -2,31 +2,21 @@ + go2rtc - Network -
    + + +
    + +