mirror of
https://codeberg.org/PLG-Development/PLG-MuDiCS
synced 2026-07-06 00:47:09 +00:00
chore(display): improve display startup behavior with qr-code
This commit is contained in:
E44
@@ -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>
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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=
|
||||
|
||||
+39
-1
@@ -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
|
||||
}
|
||||
|
||||
+54
-28
@@ -1,42 +1,52 @@
|
||||
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"/>
|
||||
<!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%);
|
||||
--background-color: black;
|
||||
--foreground-color: oklch(92.3% 0.003 48.717)
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
justify-content: center; /* centers horizontally */
|
||||
align-items: center; /* centers vertically */
|
||||
width: 100vw; /* Viewport width */
|
||||
height: 100vh; /* Viewport height */
|
||||
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%);
|
||||
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';
|
||||
}
|
||||
|
||||
video, img, iframe {
|
||||
width: 100vw; /* Viewport width */
|
||||
height: 100vh; /* Viewport height */
|
||||
video,
|
||||
img,
|
||||
iframe {
|
||||
width: 100vw;
|
||||
/* Viewport width */
|
||||
height: 100vh;
|
||||
/* Viewport height */
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
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;
|
||||
@@ -44,7 +54,7 @@ templ indexTemplate() {
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
document.addEventListener('keydown', function(event) {
|
||||
document.addEventListener('keydown', function (event) {
|
||||
if (event.code === 'Space') {
|
||||
event.preventDefault();
|
||||
var video = document.querySelector('video');
|
||||
@@ -58,28 +68,44 @@ templ indexTemplate() {
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<bod>
|
||||
</head>
|
||||
<bod>
|
||||
<div hx-get="/splash" hx-trigger="load"></div>
|
||||
<main hx-ext="sse" sse-connect="/sse" sse-swap="message"></main>
|
||||
</bod>
|
||||
</html>
|
||||
</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>
|
||||
}
|
||||
+16
-29
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user