web template?

This commit is contained in:
root 2024-02-16 19:42:02 +01:00
parent 9d7d545228
commit 6eb4130a50
3 changed files with 262 additions and 1 deletions

View File

@ -7,4 +7,8 @@ Needed Libraries
- ESPAsyncWebServer
- Adafruit_NeoPixel
- Arduino-List
```
```
Screenshot:
![](screenshot.png)

BIN
screenshot.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 50 KiB

257
template.html Normal file
View File

@ -0,0 +1,257 @@
<!DOCTYPE html>
<html>
<head>
<title>Augen-Ohren-Katze Web</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.eyes {
width: 800px;
height: 312px;
margin-left: auto;
margin-right: auto;
}
.eyes .left {
float: left;
}
.eyes .right {
float: right;
}
.eyes .uwu {
width: 176px;
height: 312px;
line-height: 400px;
font-size: 108px;
display: inline-block;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.led-circle {
width: 312px;
height: 312px;
position: relative;
}
.led-circle .petal {
border: 0;
position: absolute;
top: 0;
left: 124px; // 156 - 32 = 124px
display: inline-block;
width: 64px;
height: 156px;
transform-origin: bottom center;
}
.led-circle .petal .led {
width: 64px;
height: 64px;
border-radius: 50%;
text-align: center;
background: red;
color: white;
display: flex;
justify-content: center; /* Align horizontal */
align-items: center; /* Align vertical */
}
.led-circle .petal .ledcenter {
position: absolute;
bottom: -32px;
}
.led-circle .petal:nth-child(1) {
rotate: 30deg;
}
.led-circle .petal:nth-child(1) .led, .led-circle .petal:nth-child(1) .ledcenter {
rotate: -30deg;
}
.led-circle .petal:nth-child(2) {
rotate: 60deg;
}
.led-circle .petal:nth-child(2) .led, .led-circle .petal:nth-child(2) .ledcenter {
rotate: -60deg;
}
.led-circle .petal:nth-child(3) {
rotate: 90deg;
}
.led-circle .petal:nth-child(3) .led, .led-circle .petal:nth-child(3) .ledcenter {
rotate: -90deg;
}
.led-circle .petal:nth-child(4) {
rotate: 120deg;
}
.led-circle .petal:nth-child(4) .led, .led-circle .petal:nth-child(4) .ledcenter {
rotate: -120deg;
}
.led-circle .petal:nth-child(5) {
rotate: 150deg;
}
.led-circle .petal:nth-child(5) .led, .led-circle .petal:nth-child(5) .ledcenter {
rotate: -150deg;
}
.led-circle .petal:nth-child(6) {
rotate: 180deg;
}
.led-circle .petal:nth-child(6) .led, .led-circle .petal:nth-child(6) .ledcenter {
rotate: -180deg;
}
.led-circle .petal:nth-child(7) {
rotate: 210deg;
}
.led-circle .petal:nth-child(7) .led, .led-circle .petal:nth-child(7) .ledcenter {
rotate: -210deg;
}
.led-circle .petal:nth-child(8) {
rotate: 240deg;
}
.led-circle .petal:nth-child(8) .led, .led-circle .petal:nth-child(8) .ledcenter {
rotate: -240deg;
}
.led-circle .petal:nth-child(9) {
rotate: 270deg;
}
.led-circle .petal:nth-child(9) .led, .led-circle .petal:nth-child(9) .ledcenter {
rotate: -270deg;
}
.led-circle .petal:nth-child(10) {
rotate: 300deg;
}
.led-circle .petal:nth-child(10) .led, .led-circle .petal:nth-child(10) .ledcenter {
rotate: -300deg;
}
.led-circle .petal:nth-child(11) {
rotate: 330deg;
}
.led-circle .petal:nth-child(11) .led, .led-circle .petal:nth-child(11) .ledcenter {
rotate: -330deg;
}
.led-circle .petal:nth-child(12) {
rotate: 360deg;
}
.led-circle .petal:nth-child(12) .led, .led-circle .petal:nth-child(12) .ledcenter {
rotate: -360deg;
}
/*
TODO: https://codepen.io/kolypto/pen/LYBvJdb
https://stackoverflow.com/questions/12813573/position-icons-into-circle
@for $n from 1 through 12 {
&:nth-child(#{$n}) {
// Petal rotation
$angle: (360deg / 12) * $n;
rotate: $angle;
// Icon anti-rotation
.icon, .iconcenter { rotate: -$angle; }
}
}
*/
.frame-list {
margin-left: auto;
margin-right: auto;
width: 600px;
height: 96px;
}
.frame-list .box {
display: inline-block;
}
.frame-list .box.add {
display: inline-block;
float: right;
}
.frame-list .box.add .frame {
border-radius: 50%;
}
.frame-list .frame {
width: 64px;
height: 64px;
margin: 16px;
border: 2px solid black;
display: flex;
justify-content: center; /* Align horizontal */
align-items: center; /* Align vertical */
}
.frame-list .frame.selected {
border: 4px solid green;
color: green;
}
.profiles {
margin-left: auto;
margin-right: auto;
width: 600px;
height: 96px;
text-align: center;
padding: 32px;
}
.profiles .profile {
width: 60%;
height: 32px;
}
</style>
</head>
<body>
<div class="eyes">
<div class="led-circle left">
<div class="petal"><div class="led">1</div></div>
<div class="petal"><div class="led">2</div></div>
<div class="petal"><div class="led">3</div></div>
<div class="petal"><div class="led">4</div></div>
<div class="petal"><div class="led">5</div></div>
<div class="petal"><div class="led">6</div></div>
<div class="petal"><div class="led">7</div></div>
<div class="petal"><div class="led">8</div></div>
<div class="petal"><div class="led">9</div></div>
<div class="petal"><div class="led">10</div></div>
<div class="petal"><div class="led">11</div></div>
<div class="petal"><div class="led">12</div><div class="led ledcenter">13</div></div>
</div>
<span class="uwu">w</span>
<div class="led-circle right">
<div class="petal"><div class="led">1</div></div>
<div class="petal"><div class="led">2</div></div>
<div class="petal"><div class="led">3</div></div>
<div class="petal"><div class="led">4</div></div>
<div class="petal"><div class="led">5</div></div>
<div class="petal"><div class="led">6</div></div>
<div class="petal"><div class="led">7</div></div>
<div class="petal"><div class="led">8</div></div>
<div class="petal"><div class="led">9</div></div>
<div class="petal"><div class="led">10</div></div>
<div class="petal"><div class="led">11</div></div>
<div class="petal"><div class="led">12</div><div class="led ledcenter">13</div></div>
</div>
</div>
<center>Frame:</center>
<div class="frame-list">
<div class="box"><div class="frame selected">1</div></div>
<div class="box"><div class="frame">2</div></div>
<div class="box"><div class="frame">3</div></div>
<div class="box add"><div class="frame">New</div></div>
</div>
<form action="select.html" class="profiles">
<label>Profile:
<select name="profile" class="profile">
<option>Nyaaa</option>
<option>Kitty cat</option>
<option>Hehe</option>
<option>Starr</option>
<option>Mlem</option>
</select>
</label>
</form>
</body>
</html>