PLG_Development/PLG-MuDiCS
3
0
Fork 0
mirror of https://codeberg.org/PLG-Development/PLG-MuDiCS synced 2026-07-05 16:37:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: share splash screen project wide

Browse Source
This commit is contained in:
2mal3
2025-10-26 13:34:55 +01:00
parent b7255b5576
commit d92d8abc77
7 changed files with 19 additions and 279 deletions
Download Patch File Download Diff File Expand all files Collapse all files
control/frontend/src/routes/+page.svelte
+2 -2
View File
@@ -31,7 +31,7 @@
X
} from 'lucide-svelte';
import Button from '../components/Button.svelte';
import SplashScreen from '../components/SplashScreen.svelte';
import SplashScreen from './../../../../shared/splash_screen.html?raw';
import {
change_display_screen_height,
display_screen_height,
@@ -94,7 +94,7 @@
<svelte:window on:wheel={on_wheel} />
<main class="bg-stone-900 h-dvh w-dvw text-stone-200 p-4 gap-4 grid grid-rows-[3rem_auto]">
<!-- <SplashScreen></SplashScreen> -->
<!-- {@html SplashScreen} -->
<div class="w-[calc(100dvw-(8*var(--spacing)))] flex justify-between">
<span class="text-4xl font-bold content-center h-full"> PLG MuDiCS </span>
display/web/main.go
+4
View File
@@ -11,6 +11,7 @@ import (
"os"
"os/exec"
"path/filepath"
shared "plg-mudics/shared"
"strings"
"github.com/labstack/echo/v4"
@@ -42,6 +43,9 @@ func StartWebServer(v string) {
e.GET("/", indexRoute)
e.GET("/sse", sseRoute)
e.GET("/splash", func(ctx echo.Context) error {
return ctx.HTML(http.StatusOK, shared.SplashScreenTemplate)
})
apiGroup := e.Group("/api")
apiGroup.GET("/ping", pingRoute)
display/web/main.templ
+1 -277
View File
@@ -56,7 +56,7 @@ templ indexTemplate() {
</script>
</head>
<bod>
@animationTemplate()
<div hx-get="/splash" hx-trigger="load"></div>
<main hx-ext="sse" sse-connect="/sse" sse-swap="message"></main>
</bod>
</html>
@@ -79,279 +79,3 @@ templ deviceInfoTemplate(ip string, mac string) {
<span style="text-transform: uppercase;">{ mac }</span>
</p>
}
templ animationTemplate() {
<div id="splash">
<svg id="splash-svg" viewBox="0 0 950 550">
<!-- Paths -->
<!-- Disabled Paths -->
<path class="splash-stroke" d="M 385 350 V 270 H 100 V 112.5"></path>
<path class="splash-stroke" d="M 445 350 V 210 H 350 V 112.5"></path>
<path class="splash-stroke" d="M 505 350 V 210 H 600 V 112.5"></path>
<path class="splash-stroke" d="M 565 350 V 270 H 850 V 112.5"></path>
<!-- Masks -->
<defs>
<mask id="m1" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">
<path class="splash-mask" pathLength="100" d="M 385 350 V 270 H 100 V 112.5"></path>
</mask>
<mask id="m2" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">
<path class="splash-mask" pathLength="100" d="M 445 350 V 210 H 350 V 112.5"></path>
</mask>
<mask id="m3" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">
<path class="splash-mask" pathLength="100" d="M 505 350 V 210 H 600 V 112.5"></path>
</mask>
<mask id="m4" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">
<path class="splash-mask" pathLength="100" d="M 565 350 V 270 H 850 V 112.5"></path>
</mask>
</defs>
<!-- Active Paths -->
<path class="splash-stroke-active" mask="url(#m1)" d="M 385 350 V 270 H 100 V 112.5"></path>
<path class="splash-stroke-active" mask="url(#m2)" d="M 445 350 V 210 H 350 V 112.5"></path>
<path class="splash-stroke-active" mask="url(#m3)" d="M 505 350 V 210 H 600 V 112.5"></path>
<path class="splash-stroke-active" mask="url(#m4)" d="M 565 350 V 270 H 850 V 112.5"></path>
<!-- Displays -->
<rect x="0" y="0" width="200" height="112.5" rx="8" ry="8" class="splash-monitor"></rect>
<rect x="250" y="0" width="200" height="112.5" rx="8" ry="8" class="splash-monitor"></rect>
<rect x="500" y="0" width="200" height="112.5" rx="8" ry="8" class="splash-monitor"></rect>
<rect x="750" y="0" width="200" height="112.5" rx="8" ry="8" class="splash-monitor"></rect>
<!-- Text -->
<text class="splash-text" x="100" y="66.25" font-size="90">Mu</text>
<text class="splash-text" x="350" y="66.25" font-size="90">Di</text>
<text class="splash-text" x="600" y="66.25" font-size="90">C</text>
<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>
<rect x="335" y="390" width="135" height="120" rx="8" ry="8" class="splash-other-button"></rect>
<rect x="480" y="390" width="135" height="55" rx="8" ry="8" class="splash-other-button"></rect>
<rect x="480" y="455" width="135" height="55" rx="8" ry="8" class="splash-start-button"></rect>
<!-- Window Controls -->
<path class="window-controls" d="M 600 360 L 615 375"></path>
<path class="window-controls" d="M 600 375 L 615 360"></path>
<path class="window-controls" fill="none" d="M 575 360 H 590 V 375 H 575 V 360"></path>
<path class="window-controls" d="M 550 375 H 565"></path>
<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>
<path d="M22 14a8 8 0 0 1-8 8"></path>
<path d="M18 11v-1a2 2 0 0 0-2-2a2 2 0 0 0-2 2"></path>
<path d="M14 10V9a2 2 0 0 0-2-2a2 2 0 0 0-2 2v1"></path>
<path d="M10 9.5V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2v10"></path>
<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"
></path>
</g>
</svg>
</svg>
</div>
<style>
:root {
--base-stroke: #444444;
--base-stroke-active: #109e00;
--splash-bg: oklch(21.6% 0.006 56.043);
--monitor-dark: #000000;
--monitor-active: #ffffff;
--window-controls: #cccccc;
--start-button-inactive: #cccccc;
--start-button-hover: #77a3b1;
--start-button-active: #2c819b;
--other-button: oklch(55.3% 0.013 58.071);
--splash-control-monitor: oklch(44.4% 0.011 73.639);
--stroke-strength: 8;
--dash: 16;
--gap: 20;
}
#splash {
position: fixed;
inset: 0;
background: var(--splash-bg);
color: white;
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
animation: splash-fade 1s ease 4s forwards;
height: 100vh;
width: 100vw;
}
#splash-svg {
max-height: 40vh;
max-width: 80vw;
opacity: 0;
animation: fade-in 1s ease 500ms forwards;
}
.splash-monitor {
aspect-ratio: 16/9;
rx: 8;
ry: 8;
width: 200;
fill: var(--monitor-dark);
}
.splash-control-monitor {
fill: var(--splash-control-monitor);
}
.splash-other-button {
fill: var(--other-button);
}
.splash-stroke,
.splash-stroke-active {
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: var(--stroke-strength);
stroke-dasharray: var(--dash) var(--gap);
}
.window-controls {
stroke: var(--window-controls);
stroke-width: 3;
}
.splash-stroke {
stroke: var(--base-stroke);
}
.splash-stroke-active {
stroke: var(--base-stroke-active);
}
.splash-mask {
fill: none;
stroke: #fff;
stroke-linecap: round;
stroke-width: var(--stroke-strength);
stroke-dasharray: 100;
stroke-dashoffset: 100;
animation: draw 1s ease-in-out 1.35s forwards;
}
.splash-text {
text-anchor: middle;
dominant-baseline: middle;
fill: var(--monitor-dark);
user-select: none;
}
.splash-monitor {
fill: var(--monitor-dark);
animation: activate-monitor 0ms ease 2.35s forwards;
}
.splash-start-button {
fill: var(--start-button-inactive);
animation: start-button-hover-press 1s ease-in-out 450ms forwards;
}
.cursor {
animation: move-mouse 1s ease-in-out 0ms forwards;
}
@keyframes fade-in {
to {
opacity: 1;
}
}
@keyframes move-mouse {
0% {
transform: translateX(-100px);
}
50% {
transform: translateX(-100px);
}
100% {
transform: translateX(0px);
}
}
@keyframes start-button-hover-press {
0% {
fill: var(--start-button-inactive);
}
30% {
fill: var(--start-button-inactive);
}
40% {
fill: var(--start-button-hover);
}
70% {
fill: var(--start-button-hover);
}
80% {
fill: var(--start-button-active);
}
90% {
fill: var(--start-button-active);
}
100% {
fill: var(--start-button-hover);
}
}
@keyframes draw {
to {
stroke-dashoffset: 0;
}
}
@keyframes activate-monitor {
to {
fill: var(--monitor-active);
}
}
@keyframes splash-fade {
to {
opacity: 0;
visibility: hidden;
}
}
rect {
vector-effect: non-scaling-stroke;
}
/* verhindert, dass die Linien beim Skalieren dicker werden */
.cursor * {
vector-effect: non-scaling-stroke;
}
</style>
}
go.work
+1
View File
@@ -1,6 +1,7 @@
go 1.25.2
use (
./shared
./display
./control
)
shared/go.mod
+3
View File
@@ -0,0 +1,3 @@
module plg-mudics/shared
go 1.25.2
shared/main.go
+8
View File
@@ -0,0 +1,8 @@
package shared
import (
_ "embed"
)
//go:embed splash_screen.html
var SplashScreenTemplate string
control/frontend/src/components/SplashScreen.svelte → shared/splash_screen.html
View File