diff --git a/package.json b/package.json index 6f9866d..ab2e9e9 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "version": "1.0.0", "license": "MIT", "scripts": { - "dev": "vite dev --host", + "dev": "vite dev --host --port 80", "build": "vite build", "preview": "vite preview --host --port 80", "deploy": "gh-pages -d build -t true", diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 5eeb889..122ad60 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -105,6 +105,14 @@ ws.send("off"); } + function overlay() { + window?.open(`${location.protocol}//${location.hostname}:8000`, "_blank")?.focus(); + } + + function update() { + ws.send("update"); + } + function reboot() { if (confirm("Reboot Camera?")) { ws.send("reboot"); @@ -175,7 +183,13 @@ >Camera {status ? "" : "is"} Off - + + +
+ + + +
@@ -261,7 +275,9 @@ border-radius: 0.5vw; } + #overlay, #reset, + #update, #reload, #reconnect, #reboot, @@ -270,6 +286,8 @@ padding: 0.375vw 0.75vw; } + #reset, + #update, #reload, #reconnect, #reboot, @@ -312,7 +330,9 @@ border-radius: 1vh; } + #overlay, #reset, + #update, #reload, #reconnect, #reboot, @@ -320,6 +340,9 @@ font-size: 2vh; padding: 0.75vh 1.5vh; } + + #reset, + #update, #reload, #reconnect, #reboot, @@ -367,6 +390,10 @@ background: rgba(99, 185, 71, 1); } + #overlay { + background: rgba(0, 123, 255, 0.2); + } + #on:hover { background: rgba(99, 185, 71, 0.8); } @@ -383,13 +410,19 @@ background: rgba(34, 34, 34, 0.8); } + #overlay:hover { + background: rgba(0, 123, 255, 1); + } + #reset, + #update, #reboot, #shutdown { background: rgba(224, 55, 63, 0.2); } #reset:hover, + #update:hover, #reboot:hover, #shutdown:hover { background: rgba(224, 55, 63, 1);