flipdot/licht24
23
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add minimal style and on-off buttons

Browse source
This commit is contained in:
Elouin 2025-03-28 15:42:50 +01:00
parent 34b8807b6d
commit 2ba6208877
1 changed files with 73 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
src/main.rs
View file

@ -55,15 +55,86 @@ function post_brightness() {
} }
}) })
} }
function post_on(state) {
fetch("/lights", {
method: "POST",
body: JSON.stringify({
on: state,
}),
headers: {
"Content-type": "application/json; charset=UTF-8"
}
})
}
</script> </script>
<style> <style>
body {
max-width: 960px;
margin: auto;
height: 100%;
color: #f5c600;
background-color: #000000;
}
button {
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 12px;
}
.button-on {
background-color: #04AA6D;
}
.button-off {
background-color: #f44336;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #f5c600;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #f5c600;
cursor: pointer;
}
</style> </style>
</head> </head>
<body> <body>
<h1>Lichtschirmsteuerung</h1>
<div>
<button class="button-on" onclick="post_on(true)">An</button>
<button class="button-off" onclick="post_on(false)">Aus</button>
</div>
<div> <div>
<h3>Helligkeit</h3> <h3>Helligkeit</h3>
<input type="range" id="brightness" name="brightness" min="1" max="255" onmouseup="post_brightness()" ontouchend="post_brightness()" /> <input type="range" id="brightness" name="brightness" min="1" max="255" class="slider" onmouseup="post_brightness()" ontouchend="post_brightness()" />
</div> </div>
</body> </body>