chore(display): improve display startup behavior with qr-code

control/frontend/src/routes/+page.svelte

@@ -215,8 +215,14 @@
 	</div>
 {/snippet}
 
+<style>
+	:root {
+		--splash-fade-out-delay: 4s !important;
+	}
+</style>
+
 <main class="bg-stone-900 h-dvh w-dvw text-stone-200 px-4 py-2 gap-2 grid grid-rows-[3rem_auto]">
-	<!-- {@html SplashScreen} -->
+	{@html SplashScreen}
 
 	<div class="w-[calc(100dvw-(8*var(--spacing)))] flex justify-between">
 		<span class="text-4xl font-bold content-center pl-1"> PLG MuDiCS </span>

display/go.mod

@@ -14,14 +14,21 @@ require (
 	github.com/cenkalti/backoff/v4 v4.3.0 // indirect
 	github.com/cli/browser v1.3.0 // indirect
 	github.com/fatih/color v1.16.0 // indirect
+	github.com/fogleman/gg v1.3.0 // indirect
 	github.com/fsnotify/fsnotify v1.7.0 // indirect
+	github.com/golang/freetype v0.0.0-20170609003504-e2365dfdc4a0 // indirect
 	github.com/labstack/gommon v0.4.2 // indirect
 	github.com/mattn/go-colorable v0.1.14 // indirect
 	github.com/mattn/go-isatty v0.0.20 // indirect
 	github.com/natefinch/atomic v1.0.1 // indirect
+	github.com/pkg/errors v0.9.1 // indirect
+	github.com/skip2/go-qrcode v0.0.0-20200617195104-da1b6568686e // indirect
 	github.com/valyala/bytebufferpool v1.0.0 // indirect
 	github.com/valyala/fasttemplate v1.2.2 // indirect
+	github.com/yeqown/go-qrcode v1.5.10 // indirect
+	github.com/yeqown/reedsolomon v1.0.0 // indirect
 	golang.org/x/crypto v0.40.0 // indirect
+	golang.org/x/image v0.10.0 // indirect
 	golang.org/x/mod v0.26.0 // indirect
 	golang.org/x/net v0.42.0 // indirect
 	golang.org/x/sync v0.16.0 // indirect

display/go.sum

@@ -12,8 +12,12 @@ github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c
 github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 github.com/fatih/color v1.16.0 h1:zmkK9Ngbjj+K0yRhTVONQh1p/HknKYSlNT+vZCzyokM=
 github.com/fatih/color v1.16.0/go.mod h1:fL2Sau1YI5c0pdGEVCbKQbLXB6edEj1ZgiY4NijnWvE=
+github.com/fogleman/gg v1.3.0 h1:/7zJX8F6AaYQc57WQCyN9cAIz+4bCJGO9B+dyW29am8=
+github.com/fogleman/gg v1.3.0/go.mod h1:R/bRT+9gY/C5z7JzPU0zXsXHKM4/ayA+zqcVNZzPa1k=
 github.com/fsnotify/fsnotify v1.7.0 h1:8JEhPFa5W2WU7YfeZzPNqzMP6Lwt7L2715Ggo0nosvA=
 github.com/fsnotify/fsnotify v1.7.0/go.mod h1:40Bi/Hjc2AVfZrqy+aj+yEI+/bRxZnMJyTJwOpGvigM=
+github.com/golang/freetype v0.0.0-20170609003504-e2365dfdc4a0 h1:DACJavvAHhabrF08vX0COfcOBJRhZ8lUbR+ZWIs0Y5g=
+github.com/golang/freetype v0.0.0-20170609003504-e2365dfdc4a0/go.mod h1:E/TSTwGwJL78qG/PmXZO1EjYhfJinVAhrmmHX6Z8B9k=
 github.com/google/go-cmp v0.6.0 h1:ofyhxvXcZhMsU5ulbFiLKl/XBFqE1GSq7atu8tAmTRI=
 github.com/google/go-cmp v0.6.0/go.mod h1:17dUlkBOakJ0+DkrSSNjCkIjxS6bF9zb3elmeNGIjoY=
 github.com/labstack/echo/v4 v4.13.4 h1:oTZZW+T3s9gAu5L8vmzihV7/lkXGZuITzTQkTEhcXEA=
@@ -28,30 +32,77 @@ github.com/micmonay/keybd_event v1.1.2 h1:RpgvPJKOh4Jc+ZYe0OrVzGd2eNMCfuVg3dFTCs
 github.com/micmonay/keybd_event v1.1.2/go.mod h1:CGMWMDNgsfPljzrAWoybUOSKafQPZpv+rLigt2LzNGI=
 github.com/natefinch/atomic v1.0.1 h1:ZPYKxkqQOx3KZ+RsbnP/YsgvxWQPGxjC0oBt2AhwV0A=
 github.com/natefinch/atomic v1.0.1/go.mod h1:N/D/ELrljoqDyT3rZrsUmtsuzvHkeB/wWjHV22AZRbM=
+github.com/pkg/errors v0.9.1 h1:FEBLx1zS214owpjy7qsBeixbURkuhQAwrK5UwLGTwt4=
+github.com/pkg/errors v0.9.1/go.mod h1:bwawxfHBFNV+L2hUp1rHADufV3IMtnDRdf1r5NINEl0=
 github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
 github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
+github.com/skip2/go-qrcode v0.0.0-20200617195104-da1b6568686e h1:MRM5ITcdelLK2j1vwZ3Je0FKVCfqOLp5zO6trqMLYs0=
+github.com/skip2/go-qrcode v0.0.0-20200617195104-da1b6568686e/go.mod h1:XV66xRDqSt+GTGFMVlhk3ULuV0y9ZmzeVGR4mloJI3M=
 github.com/stretchr/testify v1.10.0 h1:Xv5erBjTwe/5IxqUQTdXv5kgmIvbHo3QQyRwhJsOfJA=
 github.com/stretchr/testify v1.10.0/go.mod h1:r2ic/lqez/lEtzL7wO/rwa5dbSLXVDPFyf8C91i36aY=
 github.com/valyala/bytebufferpool v1.0.0 h1:GqA5TC/0021Y/b9FG4Oi9Mr3q7XYx6KllzawFIhcdPw=
 github.com/valyala/bytebufferpool v1.0.0/go.mod h1:6bBcMArwyJ5K/AmCkWv1jt77kVWyCJ6HpOuEn7z0Csc=
 github.com/valyala/fasttemplate v1.2.2 h1:lxLXG0uE3Qnshl9QyaK6XJxMXlQZELvChBOCmQD0Loo=
 github.com/valyala/fasttemplate v1.2.2/go.mod h1:KHLXt3tVN2HBp8eijSv/kGJopbvo7S+qRAEEKiv+SiQ=
+github.com/yeqown/go-qrcode v1.5.10 h1:87GCtypY9oOadB7yGRW4qlgAoDOop8G4JEdqOQwu1WI=
+github.com/yeqown/go-qrcode v1.5.10/go.mod h1:0FVyJ3MV9fF5lfAgTr0INcy+3rupmJhjp0mL3Z9eYXk=
+github.com/yeqown/go-qrcode/v2 v2.2.5 h1:HCOe2bSjkhZyYoyyNaXNzh4DJZll6inVJQQw+8228Zk=
+github.com/yeqown/go-qrcode/v2 v2.2.5/go.mod h1:uHpt9CM0V1HeXLz+Wg5MN50/sI/fQhfkZlOM+cOTHxw=
+github.com/yeqown/go-qrcode/writer/standard v1.3.0 h1:chdyhEfRtUPgQtuPeaWVGQ/TQx4rE1PqeoW3U+53t34=
+github.com/yeqown/go-qrcode/writer/standard v1.3.0/go.mod h1:O4MbzsotGCvy8upYPCR91j81dr5XLT7heuljcNXW+oQ=
+github.com/yeqown/reedsolomon v1.0.0 h1:x1h/Ej/uJnNu8jaX7GLHBWmZKCAWjEJTetkqaabr4B0=
+github.com/yeqown/reedsolomon v1.0.0/go.mod h1:P76zpcn2TCuL0ul1Fso373qHRc69LKwAw/Iy6g1WiiM=
+github.com/yuin/goldmark v1.4.13/go.mod h1:6yULJ656Px+3vBD8DxQVa3kxgyrAnzto9xy5taEt/CY=
+golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACkg1iLfiJU5Ep61QUkGW8qpdssI0+w=
+golang.org/x/crypto v0.0.0-20210921155107-089bfa567519/go.mod h1:GvvjBRRGRdwPK5ydBHafDWAxML/pGHZbMvKqRZ5+Abc=
 golang.org/x/crypto v0.40.0 h1:r4x+VvoG5Fm+eJcxMaY8CQM7Lb0l1lsmjGBQ6s8BfKM=
 golang.org/x/crypto v0.40.0/go.mod h1:Qr1vMER5WyS2dfPHAlsOj01wgLbsyWtFn/aY+5+ZdxY=
+golang.org/x/image v0.0.0-20200927104501-e162460cd6b5 h1:QelT11PB4FXiDEXucrfNckHoFxwt8USGY1ajP1ZF5lM=
+golang.org/x/image v0.0.0-20200927104501-e162460cd6b5/go.mod h1:FeLwcggjj3mMvU+oOTbSwawSJRM1uh48EjtB4UJZlP0=
+golang.org/x/image v0.10.0 h1:gXjUUtwtx5yOE0VKWq1CH4IJAClq4UGgUA3i+rpON9M=
+golang.org/x/image v0.10.0/go.mod h1:jtrku+n79PfroUbvDdeUWMAI+heR786BofxrbiSF+J0=
+golang.org/x/mod v0.6.0-dev.0.20220419223038-86c51ed26bb4/go.mod h1:jJ57K6gSWd91VN4djpZkiMVwK6gcyfeH4XE8wZrZaV4=
+golang.org/x/mod v0.8.0/go.mod h1:iBbtSCu2XBx23ZKBPSOrRkjjQPZFPuis4dIYUhu/chs=
 golang.org/x/mod v0.26.0 h1:EGMPT//Ezu+ylkCijjPc+f4Aih7sZvaAr+O3EHBxvZg=
 golang.org/x/mod v0.26.0/go.mod h1:/j6NAhSk8iQ723BGAUyoAcn7SlD7s15Dp9Nd/SfeaFQ=
+golang.org/x/net v0.0.0-20190620200207-3b0461eec859/go.mod h1:z5CRVTTTmAJ677TzLLGU+0bjPO0LkuOLi4/5GtJWs/s=
+golang.org/x/net v0.0.0-20210226172049-e18ecbb05110/go.mod h1:m0MpNAwzfU5UDzcl9v0D8zg8gWTRqZa9RBIspLL5mdg=
+golang.org/x/net v0.0.0-20220722155237-a158d28d115b/go.mod h1:XRhObCWvk6IyKnWLug+ECip1KBveYUHfp+8e9klMJ9c=
+golang.org/x/net v0.6.0/go.mod h1:2Tu9+aMcznHK/AK1HMvgo6xiTLG5rD5rZLDS+rp2Bjs=
 golang.org/x/net v0.42.0 h1:jzkYrhi3YQWD6MLBJcsklgQsoAcw89EcZbJw8Z614hs=
 golang.org/x/net v0.42.0/go.mod h1:FF1RA5d3u7nAYA4z2TkclSCKh68eSXtiFwcWQpPXdt8=
+golang.org/x/sync v0.0.0-20190423024810-112230192c58/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
+golang.org/x/sync v0.0.0-20220722155255-886fb9371eb4/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
+golang.org/x/sync v0.1.0/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sync v0.16.0 h1:ycBJEhp9p4vXvUZNszeOq0kGTPghopOL8q0fq3vstxw=
 golang.org/x/sync v0.16.0/go.mod h1:1dzgHSNfp02xaA81J2MS99Qcpr2w7fw1gpm99rleRqA=
+golang.org/x/sys v0.0.0-20190215142949-d0b11bdaac8a/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
+golang.org/x/sys v0.0.0-20201119102817-f84b799fce68/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
+golang.org/x/sys v0.0.0-20210615035016-665e8c7367d1/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.0.0-20220520151302-bc2c85ada10a/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.0.0-20220722155257-8c9f86f7a55f/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.5.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.34.0 h1:H5Y5sJ2L2JRdyv7ROF1he/lPdvFsd0mJHFw2ThKHxLA=
 golang.org/x/sys v0.34.0/go.mod h1:BJP2sWEmIv4KK5OTEluFJCKSidICx8ciO85XgH3Ak8k=
+golang.org/x/term v0.0.0-20201126162022-7de9c90e9dd1/go.mod h1:bj7SfCRtBDWHUb9snDiAeCFNEtKQo2Wmx5Cou7ajbmo=
+golang.org/x/term v0.0.0-20210927222741-03fcf44c2211/go.mod h1:jbD1KX2456YbFQfuXm/mYQcufACuNUgVhRMnK/tPxf8=
+golang.org/x/term v0.5.0/go.mod h1:jMB1sMXY+tzblOD4FWmEbocvup2/aLOaQEp7JmGp78k=
+golang.org/x/text v0.3.0/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
+golang.org/x/text v0.3.3/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
+golang.org/x/text v0.3.7/go.mod h1:u+2+/6zg+i71rQMx5EYifcz6MCKuco9NR6JIITiCfzQ=
+golang.org/x/text v0.7.0/go.mod h1:mrYo+phRRbMaCq/xk9113O4dZlRixOauAjOtrjsXDZ8=
+golang.org/x/text v0.11.0/go.mod h1:TvPlkZtksWOMsz7fbANvkp4WM8x/WCo/om8BMLbz+aE=
 golang.org/x/text v0.27.0 h1:4fGWRpyh641NLlecmyl4LOe6yDdfaYNrGb2zdfo4JV4=
 golang.org/x/text v0.27.0/go.mod h1:1D28KMCvyooCX9hBiosv5Tz/+YLxj0j7XhWjpSUF7CU=
 golang.org/x/time v0.11.0 h1:/bpjEDfN9tkoN/ryeYHnv5hcMlc8ncjMcM4XBk5NWV0=
 golang.org/x/time v0.11.0/go.mod h1:CDIdPxbZBQxdj6cxyCIdrNogrJKMJ7pr37NYpMcMDSg=
+golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
+golang.org/x/tools v0.0.0-20191119224855-298f0cb1881e/go.mod h1:b+2E5dAYhXwXZwtnZ6UAqBI28+e2cm9otk0dWdXHAEo=
+golang.org/x/tools v0.1.12/go.mod h1:hNGJHUnrk76NpqgfD5Aqm5Crs+Hm0VOH/i9J2+nxYbc=
+golang.org/x/tools v0.6.0/go.mod h1:Xwgl3UAJ/d3gWutnCtw505GrjyAbvKui8lOU390QaIU=
 golang.org/x/tools v0.35.0 h1:mBffYraMEf7aa0sB+NuKnuCy8qI/9Bughn8dC2Gu5r0=
 golang.org/x/tools v0.35.0/go.mod h1:NKdj5HkL/73byiZSJjqJgKn3ep7KjFkBOkR/Hps3VPw=
+golang.org/x/xerrors v0.0.0-20190717185122-a985d3407aa7/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
 gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
 gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=

display/web/main.go

@@ -5,8 +5,10 @@ import (
 	"context"
 	"errors"
 	"fmt"
+	"image/color"
 	"io"
 	"log/slog"
+	"net"
 	"net/http"
 	"os"
 	"os/exec"
@@ -17,6 +19,7 @@ import (
 	"github.com/labstack/echo/v4"
 	"github.com/labstack/echo/v4/middleware"
 	"github.com/micmonay/keybd_event"
+	"github.com/skip2/go-qrcode"
 
 	"plg-mudics/display/pkg"
 )
@@ -44,6 +47,7 @@ func StartWebServer(v string, port string) {
 	e.GET("/splash", func(ctx echo.Context) error {
 		return ctx.HTML(http.StatusOK, shared.SplashScreenTemplate)
 	})
+	e.GET("/qr", qrRoute)
 
 	staticGroup := e.Group("/static")
 	staticGroup.Use(middleware.StaticWithConfig(middleware.StaticConfig{
@@ -97,8 +101,9 @@ func sseRoute(ctx echo.Context) error {
 	if err != nil {
 		slog.Error("Failed to get device MAC address", "error", err)
 	}
+	showQR := !isPortFree(8080)
 	var status bytes.Buffer
-	deviceInfoTemplate(ip, mac).Render(context.Background(), &status)
+	deviceInfoTemplate(ip, mac, showQR).Render(context.Background(), &status)
 	connectedEvent := Event{
 		Data: status.Bytes(),
 	}
@@ -127,6 +132,29 @@ func sseRoute(ctx echo.Context) error {
 	}
 }
 
+func qrRoute(c echo.Context) error {
+	data := c.QueryParam("data")
+	if data == "" {
+		return c.String(http.StatusBadRequest, "missing data")
+	}
+
+	qr, err := qrcode.New(data, qrcode.Medium)
+	if err != nil {
+		return c.String(http.StatusInternalServerError, "could not generate qr")
+	}
+
+	qr.DisableBorder = true
+	qr.ForegroundColor = color.RGBA{R: 0x1c, G: 0x19, B: 0x17, A: 0xff}
+	qr.BackgroundColor = color.RGBA{R: 0xe7, G: 0xe5, B: 0xe4, A: 0xff}
+
+	png, err := qr.PNG(-1)
+	if err != nil {
+		return c.String(http.StatusInternalServerError, "could not encode png")
+	}
+
+	return c.Blob(http.StatusOK, "image/png", png)
+}
+
 func extractFilePathMiddleware(next echo.HandlerFunc) echo.HandlerFunc {
 	return func(ctx echo.Context) error {
 		pathParam := ctx.Param("path")
@@ -354,3 +382,13 @@ func resetView() error {
 
 	return nil
 }
+
+func isPortFree(port int) bool {
+	addr := fmt.Sprintf("127.0.0.1:%d", port)
+	l, err := net.Listen("tcp", addr)
+	if err != nil {
+		return false
+	}
+	_ = l.Close()
+	return true
+}

display/web/main.templ

@@ -1,85 +1,111 @@
 package web
 
 templ indexTemplate() {
-	<!DOCTYPE html>
-	<html lang="en">
-		<head>
-			<meta charset="UTF-8"/>
-			<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-			<title>PLG Connect Display</title>
-			<script src="/static/htmx.min.js"></script>
-			<script src="/static/htmx-ext-sse.min.js"></script>
-			<style>
-				:root {
-					--background-color: hsl(256, 10%, 10%);
-				}
+<!DOCTYPE html>
+<html lang="en">
 
-				body {
-				    display: flex;
-	                justify-content: center; /* centers horizontally */
-	                align-items: center;     /* centers vertically */
-	     			width: 100vw;    /* Viewport width */
-	                height: 100vh;   /* Viewport height */
-	                margin: 0;
-	                padding: 0;
-	                overflow: hidden;
-					background-color: var(--background-color);
-					color: hsl(256, 90%, 95%);
-				}
+<head>
+	<meta charset="UTF-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<title>PLG Connect Display</title>
+	<script src="/static/htmx.min.js"></script>
+	<script src="/static/htmx-ext-sse.min.js"></script>
+	<style>
+		:root {
+			--background-color: black;
+			--foreground-color: oklch(92.3% 0.003 48.717)
+		}
 
-				video, img, iframe {
-	    			width: 100vw;    /* Viewport width */
-	                height: 100vh;   /* Viewport height */
-	    			object-fit: contain;
-				}
+		body {
+			display: flex;
+			justify-content: center;
+			/* centers horizontally */
+			align-items: center;
+			/* centers vertically */
+			width: 100vw;
+			/* Viewport width */
+			height: 100vh;
+			/* Viewport height */
+			margin: 0;
+			padding: 0;
+			overflow: hidden;
+			background-color: var(--background-color);
+			color: var(--foreground-color);
+			font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+		}
 
-				p {
-				    font-size: 6rem;
-					line-height: 1;
-					font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-					text-wrap: balance;
-					max-width: 90vw;
-					word-break: break-word;
-					display: block;
+		video,
+		img,
+		iframe {
+			width: 100vw;
+			/* Viewport width */
+			height: 100vh;
+			/* Viewport height */
+			object-fit: contain;
+		}
+
+		p {
+			font-size: 6rem;
+			line-height: 1;
+			text-wrap: balance;
+			max-width: 90vw;
+			word-break: break-word;
+			display: block;
+		}
+	</style>
+	<script>
+		document.addEventListener('keydown', function (event) {
+			if (event.code === 'Space') {
+				event.preventDefault();
+				var video = document.querySelector('video');
+				if (video) {
+					if (video.paused) {
+						video.play();
+					} else {
+						video.pause();
+					}
 				}
-			</style>
-			<script>
-				document.addEventListener('keydown', function(event) {
-				    if (event.code === 'Space') {
-				        event.preventDefault();
-				        var video = document.querySelector('video');
-				        if (video) {
-				            if (video.paused) {
-				                video.play();
-				            } else {
-				                video.pause();
-				            }
-				        }
-				    }
-				});
-			</script>
-		</head>
-		<bod>
-			<div hx-get="/splash" hx-trigger="load"></div>
-			<main hx-ext="sse" sse-connect="/sse" sse-swap="message"></main>
-		</bod>
-	</html>
+			}
+		});
+	</script>
+</head>
+<bod>
+	<div hx-get="/splash" hx-trigger="load"></div>
+	<main hx-ext="sse" sse-connect="/sse" sse-swap="message"></main>
+</bod>
+
+</html>
 }
 
 templ videoTemplate(path string) {
-	<video autoplay>
-		<source src={ "/api/file/" + path } type="video/mp4"/>
-	</video>
+<video autoplay>
+	<source src={ "/api/file/" + path } type="video/mp4" />
+</video>
 }
 
 templ imageTemplate(path string) {
-	<img src={ "/api/file/" + path }/>
+<img src={ "/api/file/" + path } />
 }
 
-templ deviceInfoTemplate(ip string, mac string) {
-	<p>
+templ deviceInfoTemplate(ip string, mac string, showQR bool) {
+<div style="width: 100vw; height: 100vh; display: flex; flex-direction: row; justify-content: space-between;">
+	<div style="display: flex; flex-direction: column; gap: 1rem; justify-content: end; padding: 2rem; font-size: 4rem;">
 		{ ip }
-		<br/>
 		<span style="text-transform: uppercase;">{ mac }</span>
-	</p>
-}
+	</div>
+	if showQR {
+		<div style="display: flex; justify-content: end; align-items: end; padding: 2rem;">
+			<div style="padding: 1rem; background-color: var(--foreground-color); border-radius: 1rem;">
+				<img style="height: 30vh; width: auto; image-rendering: pixelated; image-rendering: crisp-edges;" src={"/qr?data=http://" + ip + ":8080" } alt="QR-Code" />
+			</div>
+		</div>
+	}
+</div>
+<style>
+	:root {
+		--splash-bg: transparent !important;
+		--splash-fade-out-state: paused !important;
+		--background-color: oklch(21.6% 0.006 56.043);
+	}
+</style>
+}

shared/splash_screen.html

@@ -40,15 +40,7 @@
 		<text class="splash-text" x="850" y="66.25" font-size="90">S</text>
 
 		<!-- Controller -->
-		<rect
-			x="325"
-			y="350"
-			width="300"
-			height="168.75"
-			rx="8"
-			ry="8"
-			class="splash-control-monitor"
-		/>
+		<rect x="325" y="350" width="300" height="168.75" rx="8" ry="8" class="splash-control-monitor" />
 		<rect x="335" y="390" width="135" height="120" rx="8" ry="8" class="splash-other-button" />
 		<rect x="480" y="390" width="135" height="55" rx="8" ry="8" class="splash-other-button" />
 		<rect x="480" y="455" width="135" height="55" rx="8" ry="8" class="splash-start-button" />
@@ -59,30 +51,15 @@
 		<path class="window-controls" fill="none" d="M 575 360 H 590 V 375 H 575 V 360" />
 		<path class="window-controls" d="M 550 375 H 565" />
 
-		<svg
-			class="cursor"
-			width="50"
-			height="50"
-			viewBox="0 0 24 24"
-			x="510"
-			y="480"
-			aria-hidden="true"
-		>
-			<g
-				stroke="#ffffff"
-				fill="#000000"
-				stroke-width="2"
-				stroke-linecap="round"
-				stroke-linejoin="round"
-			>
+		<svg class="cursor" width="50" height="50" viewBox="0 0 24 24" x="510" y="480" aria-hidden="true">
+			<g stroke="#ffffff" fill="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 				<path stroke="#000000" d="M 6.5 10 H 18 V 19 H 6" />
 				<path d="M22 14a8 8 0 0 1-8 8" />
 				<path d="M18 11v-1a2 2 0 0 0-2-2a2 2 0 0 0-2 2" />
 				<path d="M14 10V9a2 2 0 0 0-2-2a2 2 0 0 0-2 2v1" />
 				<path d="M10 9.5V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2v10" />
 				<path
-					d="M18 11a2 2 0 1 1 4 0v3a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15"
-				/>
+					d="M18 11a2 2 0 1 1 4 0v3a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15" />
 			</g>
 		</svg>
 	</svg>
@@ -90,6 +67,9 @@
 
 <style>
 	:root {
+		--splash-fade-out-delay: 0s;
+		--splash-fade-out-state: running;
+
 		--base-stroke: #444444;
 		--base-stroke-active: #109e00;
 
@@ -118,13 +98,20 @@
 		align-items: center;
 		justify-content: center;
 		z-index: 9999;
-		animation: splash-fade 1s ease 4s forwards;
+		/* animation: splash-fade 1s ease 4s forwards; */
 		height: 100vh;
 		width: 100vw;
+
+		animation-name: splash-fade;
+		animation-duration: 1s;
+		animation-timing-function: ease;
+		animation-fill-mode: forwards;
+		animation-delay: var(--splash-fade-out-delay);
+		animation-play-state: var(--splash-fade-out-state);
 	}
 
 	#splash-svg {
-		max-height: 40vh;
+		max-height: 50vh;
 		max-width: 80vw;
 		opacity: 0;
 		animation: fade-in 1s ease 500ms forwards;
@@ -277,4 +264,4 @@
 	.cursor * {
 		vector-effect: non-scaling-stroke;
 	}
-</style>
+</style>