faercol/http-boot-server
1
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages Wiki Activity

use catppuccin-mocha
Some checks failed
continuous-integration/drone/push Build is failing
Details

Browse source
This commit is contained in:
Melora Hugues 2023-09-16 13:48:21 +02:00
parent 0318d5caf4
commit 19b863e5ca
2 changed files with 120 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

121
bootserver/static/stylesheets/main.css
View file

@ -1,55 +1,108 @@
:root {
--page-background: #000000;
--background: #121212;
--surface: #181818;
--surface-active: #303030;
--surface-hover: #aaaaaa;
--primary: #3b80c9;
--primary-variant: #c9953b;
--secondary: #c94e3b;
--text-main: #ffffff;
--text-variant: #9B9B9B;
/* Base colours */
--base: #1e1e2e;
--mantle: #181825;
--crust: #11111b;
/* Surface colours */
--surface0: #313244;
--surface1: #45475a;
--surface2: #585b70;
--overlay0: #6c7086;
--overlay1: #7f849c;
--overlay2: #9399b2;
/* Text colours */
--text: #cdd6f4;
--subtext0: #a6adc8;
--subtext1: #bac2de;
/* Main colours */
--rosewater: #f5e0dc;
--flamingo: #f2cdcd;
--pink: #f5c2e7;
--mauve: #cba6f7;
--red: #f38ba8;
--maroon: #eba0ac;
--peach: #fab387;
--yellow: #f9e2af;
--green: #a6e3a1;
--teal: #94e2d5;
--sky: #89dceb;
--sapphire: #74c7ec;
--blue: #89b4fa;
--lavender: #b4befe;
}
body {
background-color: var(--page-background);
color: var(--text-main);
background-color: var(--crust);
color: var(--text);
}
.page-content {
width: 90%;
max-width: 1200px;
max-width: 1500px;
margin: auto;
}
.container {
border-radius: 5px;
background-color: var(--surface);
padding: 5px;
border-radius: 5px 5px;
border-radius: 20px;
background-color: var(--base);
padding: 5px 10px;
margin: 5px auto;
}
.header-grid {
display: grid;
grid-template-columns: 1fr 3fr;
align-items: stretch;
justify-items: stretch;
column-gap: 10px;
margin: 5px auto;
.container {
padding: 10px;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
}
.client-list-grid {
display: grid;
grid-template-columns: 1fr;
justify-items: stretch;
margin: 5px auto;
row-gap: 5px;
.container {
margin: 0;
}
}
.stat-container {
h2 {
margin: auto;
width: 100%;
vertical-align: middle;
}
}
.main-container {
padding: 20px;
}
.title-container {
background-color: var(--primary);
}
color: var(--blue);
.client-list-container {
border-radius: 0px 0px 5px 5px;
padding: 10px;
background-color: var(--surface);
}
.client-container {
border-radius: 5px;
padding: 4px;
margin-top: 2px;
margin-bottom: 2px;
h1 {
margin: auto;
padding: auto;
vertical-align: middle;
width: 100%;
}
}
.client-header {
@ -60,7 +113,7 @@ body {
.client-uuid {
font-size: smaller;
color: var(--text-variant);
color: var(--subtext1);
}
}
@ -75,12 +128,12 @@ body {
cursor: pointer;
&.selected {
background-color: var(--surface-active);
background-color: var(--overlay0);
cursor: default;
}
&:hover {
background-color: var(--surface-hover);
background-color: var(--overlay2);
--text-variant: #000000;
}
}
@ -92,7 +145,7 @@ body {
.boot-option-uuid {
font-size: smaller;
color: var(--text-variant);
color: var(--subtext0);
}
.boot-option-path {

14
bootserver/templates/index.html
View file

@ -11,16 +11,21 @@
<body>
<div class="page-content">
<div class="header-grid">
<div class="stat-container container">
<h2>{{len .Clients}} enrolled clients</h2>
</div>
<div class="title-container container">
<h1>HTTP boot server admin page</h1>
</div>
<div class="main-container container">
<div class="client-list">
<h2>{{len .Clients}} enrolled clients</h2>
</div>
<div class="client-list-grid">
{{range .Clients}}
<div class="client-container">
<div class="client-container container">
<div class="client-header">
<span class="client-name">{{.Name}}</span>
<span class="client-uuid">{{.ID}}</span>
@ -46,7 +51,6 @@
</div>
</div>
</div>
</body>
</html>