web template?
This commit is contained in:
parent
9d7d545228
commit
6eb4130a50
@ -7,4 +7,8 @@ Needed Libraries
|
||||
- ESPAsyncWebServer
|
||||
- Adafruit_NeoPixel
|
||||
- Arduino-List
|
||||
```
|
||||
```
|
||||
|
||||
Screenshot:
|
||||
|
||||
![](screenshot.png)
|
BIN
screenshot.png
Normal file
BIN
screenshot.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 50 KiB |
257
template.html
Normal file
257
template.html
Normal 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>
|
Loading…
Reference in New Issue
Block a user