ctbk/dmx-interface
1
0
Fork 0
mirror of https://github.com/HendrikRauh/dmx-interface.git synced 2025-05-18 21:55:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge branch 'HendrikRauh/issue33' of https://github.com/HendrikRauh/dmx-interface into HendrikRauh/issue33

Browse source
This commit is contained in:
Hendrik Rauh 2024-12-20 22:09:52 +01:00
commit fc30a22b84
2 changed files with 42 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
data/index.html
View file

@ -40,17 +40,32 @@
<span>PSRAM: <span class="psram-percentage"></span> %</span> <span>PSRAM: <span class="psram-percentage"></span> %</span>
<span>Uptime: <span class="uptime"></span></span> <span>Uptime: <span class="uptime"></span></span>
<button type="button" class="expand-status">Mehr</button> <button type="button" class="expand-status icon-button">
<img src="/icons/open.svg" alt="Mehr" />
</button>
</div> </div>
<dialog class="dialog-status"> <dialog class="dialog-status">
<h2 class="model"></h2> <div class="dialog-header">
<h2 class="model"></h2>
<form method="dialog">
<button type="submit" class="icon-button">
<img src="/icons/close.svg" alt="Schließen" />
</button>
</form>
</div>
<div class="dialog-status-content"> <div class="dialog-status-content">
<div class="card"> <div class="card">
<span>Signalstärke</span> <span>Signalstärke</span>
<!-- placeholder for wifi icon --> <span class="centered-vertical">
<span><span class="rssi"></span> dBm</span> <img
class="connection-icon small"
src=""
alt=""
/>
<span><span class="rssi"></span> dBm</span>
</span>
</div> </div>
<div class="card"> <div class="card">
@ -108,10 +123,6 @@
<span class="sdk-version"></span> <span class="sdk-version"></span>
</div> </div>
</div> </div>
<form method="dialog">
<button type="submit">Schließen</button>
</form>
</dialog> </dialog>
<form class="config"> <form class="config">

29
data/style.css
View file

@ -168,6 +168,17 @@ dialog::backdrop {
background-color: #000a; background-color: #000a;
} }
.dialog-header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
& button {
margin: 0;
}
}
.card { .card {
background-color: var(--color-surface); background-color: var(--color-surface);
padding: 8px; padding: 8px;
@ -297,14 +308,20 @@ div:has(.range-value) {
gap: 8px; gap: 8px;
} }
.dialog-status button {
display: block;
margin: 0 auto;
margin-top: 32px;
}
.connection-icon { .connection-icon {
width: 24px; width: 24px;
height: 24px; height: 24px;
padding: 8px; padding: 8px;
} }
.connection-icon.small {
padding: 0;
height: 1em;
}
.centered-vertical {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
}