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>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>
<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="card">
<span>Signalstärke</span>
<!-- placeholder for wifi icon -->
<span><span class="rssi"></span> dBm</span>
<span class="centered-vertical">
<img
class="connection-icon small"
src=""
alt=""
/>
<span><span class="rssi"></span> dBm</span>
</span>
</div>
<div class="card">
@ -108,10 +123,6 @@
<span class="sdk-version"></span>
</div>
</div>
<form method="dialog">
<button type="submit">Schließen</button>
</form>
</dialog>
<form class="config">

29
data/style.css
View file

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