mirror of
https://codeberg.org/PLG-Development/PLG-MuDiCS
synced 2026-07-05 16:37:09 +00:00
149 lines
4.1 KiB
Plaintext
149 lines
4.1 KiB
Plaintext
package pkg
|
|
|
|
templ basicTemplate() {
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8"/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
<title>PLG MuDiCS Display</title>
|
|
<style>
|
|
:root {
|
|
--background-color: black;
|
|
--foreground-color: oklch(92.3% 0.003 48.717);
|
|
--font-size: 5rem;
|
|
}
|
|
|
|
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';
|
|
cursor: none;
|
|
}
|
|
|
|
video,
|
|
img {
|
|
width: 100vw;
|
|
/* Viewport width */
|
|
height: 100vh;
|
|
/* Viewport height */
|
|
object-fit: contain;
|
|
}
|
|
|
|
p,
|
|
li {
|
|
font-size: var(--font-size);
|
|
line-height: 1.2;
|
|
text-wrap: balance;
|
|
max-width: 90vw;
|
|
word-break: break-word;
|
|
margin: 0 0 calc(var(--font-size) * 0.4) 0;
|
|
}
|
|
|
|
ul,
|
|
ol {
|
|
padding-left: calc(var(--font-size)*1.5);
|
|
}
|
|
</style>
|
|
</head>
|
|
<bod>
|
|
{ children... }
|
|
</bod>
|
|
</html>
|
|
}
|
|
|
|
templ videoTemplate(path string) {
|
|
@basicTemplate() {
|
|
<video autoplay>
|
|
<source src={ "file://" + path } type="video/mp4"/>
|
|
</video>
|
|
}
|
|
}
|
|
|
|
templ htmlTemplate(html string) {
|
|
@basicTemplate() {
|
|
@templ.Raw(html)
|
|
}
|
|
}
|
|
|
|
templ imageTemplate(path string) {
|
|
@basicTemplate() {
|
|
<img src={ "file://" + path }/>
|
|
}
|
|
}
|
|
|
|
templ deviceInfoTemplate(ip string, mac string, showQR bool) {
|
|
@basicTemplate() {
|
|
<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 }
|
|
<span style="text-transform: uppercase;">{ mac }</span>
|
|
</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>
|
|
}
|
|
}
|
|
|
|
templ startScreenTemplate(splashScreenHtml string, ip string, mac string, qrPath string) {
|
|
@basicTemplate() {
|
|
<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 }
|
|
<span style="text-transform: uppercase;">{ mac }</span>
|
|
</div>
|
|
if qrPath != "" {
|
|
<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={ "file://" + qrPath }
|
|
alt="QR-Code"
|
|
/>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
@templ.Raw(splashScreenHtml)
|
|
<style>
|
|
:root {
|
|
--splash-bg: transparent !important;
|
|
--splash-fade-out-state: paused !important;
|
|
--background-color: oklch(21.6% 0.006 56.043);
|
|
}
|
|
</style>
|
|
}
|
|
}
|