Created
April 20, 2024 14:47
-
-
Save karljosefschneider/6e9b2771fbe261c0a791a8610e51e5b7 to your computer and use it in GitHub Desktop.
HTML-Code zum Treppenlift
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE HTML> | |
<html lang="de"> | |
<head> | |
<meta name="viewport" content= "width=device-width, user-scalable=no"> | |
<meta charset="UTF-8"> | |
<link rel="manifest" href="/manifest.json"> | |
<title>Treppenlift</title> | |
<style> | |
:root { | |
--white: #FFFFFF; | |
--green-neon: #06f2a1; | |
--red-darker: #FF6412; | |
--red: #FF955D; | |
--red-lighter: #FDCFB6; | |
--blue-dark: #0E1329; | |
--blue: #0326D6; | |
--blue-medium: #153CFD; | |
--blue-light: #3C5DFF; | |
--blue-lighter: #5D8DFF; | |
--blue-lightest: #DCE5FA; | |
} | |
html { | |
box-sizing: border-box; | |
} | |
*, *:before, *:after { | |
box-sizing: inherit; | |
} | |
input, a, button { | |
transition-property: color, background-color, opacity; | |
transition-duration: .125s; | |
transition-timing-function: ease-in; | |
} | |
body { | |
min-height: 100vh; | |
overflow: hidden; | |
margin: 0; | |
display: flex; | |
align-items: center; | |
flex-direction: column; | |
font-family: 'Nunito', sans-serif; | |
font-size: 100%; | |
letter-spacing: .05em; | |
color: var(--blue-dark); | |
background-color: var(--blue-light); | |
background: linear-gradient(0deg, var(--blue-lighter) 0%, var(--blue-light) 100%); | |
} | |
.header { | |
display: grid; | |
grid-template-columns: 4.5rem 1fr; | |
align-items: center; | |
width: 100%; | |
padding: 2rem 1rem; | |
font-size: .875rem; | |
color: var(--white); | |
} | |
.logo { | |
display: block; | |
width: 3rem; | |
justify-self: center; | |
color: var(--blue-lightest); | |
} | |
.small-data { | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
gap: .5rem; | |
} | |
.small-data div { | |
display: flex; | |
flex-wrap: nowrap; | |
align-items: center; | |
justify-content: center; | |
gap: .5rem; | |
} | |
.icon-clock, .icon-turtle { | |
height: 14px; | |
color: var(--blue-lightest); | |
} | |
.time { | |
display: flex; | |
gap: 1px; | |
margin-inline-end: 1rem; | |
} | |
.colon { | |
color: var(--blue-lightest); | |
} | |
.keypad { | |
position: relative; | |
width: 100%; | |
display: flex; | |
flex-direction: column; | |
gap: 2rem; | |
padding: 0 1rem 2rem 1rem; | |
} | |
.keypad:before { | |
content: ''; | |
display: block; | |
background: var(--blue-lighter); | |
width: 2px; | |
height: 100vh; | |
position: absolute; | |
left: calc(3.25rem - 1px); | |
top: 2rem; | |
} | |
.floors { | |
flex-grow: 1; | |
display: flex; | |
flex-direction: column; | |
gap: 1rem; | |
align-items: stretch; | |
justify-content: center; | |
} | |
.button-row { | |
position: relative; | |
display: grid; | |
grid-template-columns: 4.5rem 1fr 1fr; | |
justify-items: center; | |
align-items: center; | |
} | |
.button { | |
height: 4rem; | |
padding: 1rem; | |
font-size: 1.5rem; | |
cursor: pointer; | |
border: none; | |
border-radius: 3rem; | |
background-color: var(--white); | |
color: var(--blue-dark); | |
text-align: center; | |
} | |
.button:hover, .button:focus { | |
background-color: var(--white); | |
background-color: #DCFAEE; | |
color: var(--blue-dark); | |
} | |
.button.active { | |
background-color: var(--blue-dark); | |
box-shadow: 0 2px 1rem var(--green-neon); | |
color: var(--white); | |
} | |
.floor { | |
display: grid; | |
grid-template-columns: 4.5rem 1fr; | |
align-items: center; | |
} | |
.floor__input { | |
height: 4.5rem; | |
font-size: 1.25rem; | |
text-transform: uppercase; | |
letter-spacing: .02em; | |
} | |
.floor__light { | |
height: 20px; | |
width: 20px; | |
margin-left: auto; | |
margin-right: auto; | |
border-radius: 50%; | |
position: relative; | |
} | |
.floor__light.active { | |
background-color: #00C6D6; | |
box-shadow: | |
0 2px .25rem rgba(0,0,0,.15), | |
0 2px 1rem #00FFFF; | |
} | |
.floor__light::before { | |
content: ''; | |
display: block;; | |
position: absolute; | |
top: 3px; | |
left: 3px; | |
height: 14px; | |
width: 14px; | |
border-radius: 50%; | |
background-color: var(--blue-lighter); | |
} | |
.floor__light.active::before { | |
background-color: #BAFAFF; | |
} | |
.button--circle { | |
width: 5.5rem; | |
height: 5.5rem; | |
border-radius: 5.5rem; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
background-color: var(--blue-light); | |
color: var(--white); | |
} | |
.button--circle.active, | |
.button--circle:hover, .button--circle:focus { | |
background-color: var(--blue); | |
color: var(--white); | |
} | |
.button--circle svg { | |
width: 2.5rem; | |
} | |
.button--up svg { | |
transform: rotate(180deg); | |
} | |
.button--stop { | |
width: 4.25rem; | |
height: 4.25rem; | |
line-height: 2.5rem; | |
background-color: var(--red); | |
color: var(--white); | |
} | |
.button--stop svg { | |
width: 1.5rem; | |
} | |
.button--stop.active, | |
.button--stop:hover, .button--stop:focus { | |
background-color: var(--red-darker); | |
color: var(--white); | |
} | |
</style> | |
</head> | |
<body> | |
<header class="header"> | |
<svg class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"> | |
<path d="M24,0A24,24,0,1,0,48,24,24,24,0,0,0,24,0ZM17.74,23.43H15.41V11.91h2.33V17l4.7-5.11h3.12L21.23,16.4l4.57,7h-3L19.62,18,17.74,20Zm10.39,11a3.32,3.32,0,0,1-1.56,1.28,6.48,6.48,0,0,1-2.5.42,5,5,0,0,1-3.36-1,4.47,4.47,0,0,1-1.4-2.94l2.26-.22a2.83,2.83,0,0,0,.83,1.68,2.57,2.57,0,0,0,1.69.53,2.61,2.61,0,0,0,1.69-.48,1.42,1.42,0,0,0,.57-1.11,1.06,1.06,0,0,0-.24-.7,2,2,0,0,0-.84-.5c-.27-.09-.89-.26-1.86-.5a6.16,6.16,0,0,1-2.62-1.14,3,3,0,0,1-1.06-2.32,2.91,2.91,0,0,1,.5-1.64,3.14,3.14,0,0,1,1.43-1.17,5.88,5.88,0,0,1,2.27-.4,4.85,4.85,0,0,1,3.27.95,3.37,3.37,0,0,1,1.15,2.54l-2.33.1a2,2,0,0,0-.64-1.28,2.32,2.32,0,0,0-1.47-.39,2.63,2.63,0,0,0-1.59.42.87.87,0,0,0,0,1.41,6,6,0,0,0,2.14.77,11.92,11.92,0,0,1,2.51.83,3.27,3.27,0,0,1,1.27,1.18A3.64,3.64,0,0,1,28.13,34.38ZM32.58,19.2a7.44,7.44,0,0,1-.25,2.2A3.12,3.12,0,0,1,31.11,23a4,4,0,0,1-2.34.61,3.49,3.49,0,0,1-2.63-.95,4,4,0,0,1-.93-2.8l2.2-.25A3,3,0,0,0,27.7,21a1.25,1.25,0,0,0,1.14.62,1.28,1.28,0,0,0,1.1-.45,3.53,3.53,0,0,0,.32-1.84V11.91h2.32Z" style="fill:currentColor"/> | |
</svg> | |
<div class="small-data"> | |
<div> | |
<svg xmlns="http://www.w3.org/2000/svg" class="icon-clock" viewBox="0 0 512 512"><path d="M256 512C114.6 512 0 397.4 0 256S114.6 0 256 0S512 114.6 512 256s-114.6 256-256 256zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z" style="fill:currentColor"/></svg> | |
<span class="time"> | |
<span id="value1">0</span> | |
<span class="colon">:</span> | |
<span id="value2">0</span> | |
<span class="colon">:</span> | |
<span id="value3">0</span> | |
</span> | |
</div> | |
<div> | |
<svg xmlns="http://www.w3.org/2000/svg" class="icon-turtle" viewBox="0 0 576 512"><path d="M384 249.2c0 21.4-17.4 38.8-38.8 38.8H70.8C49.4 288 32 270.6 32 249.2V208c0-97.2 78.8-176 176-176s176 78.8 176 176v41.2zM480 288c-2 0-4-.1-5.9-.3c-16.3 53.3-64.3 92.7-122.1 96V440c0 22.1-17.9 40-40 40H264c-22.1 0-40-17.9-40-40V384H192v56c0 22.1-17.9 40-40 40H104c-22.1 0-40-17.9-40-40V384H32c-17.7 0-32-14.3-32-32s14.3-32 32-32h72 48H264h48 32c39.8 0 72-32.2 72-72V224 192 176c0-35.3 28.7-64 64-64c53 0 96 43 96 96v16c0 35.3-28.7 64-64 64H480zm16-64c8.8 0 16-7.2 16-16s-7.2-16-16-16s-16 7.2-16 16s7.2 16 16 16z" style="fill:currentColor"/></svg> | |
<span class="duration"> | |
<span id="value4">0</span> Sekunden | |
</span> | |
</div> | |
</div> | |
</header> | |
<div class="keypad"> | |
<div class="floors"> | |
<label class="floor"> | |
<span class="floor__light" id="8"></span> | |
<input value="Dach" class="button floor__input" type="button" id="1" onclick="btnPressed(id)"> | |
</label> | |
<label class="floor"> | |
<span class="floor__light" id="9"></span> | |
<input value="1. Etage" class="button floor__input" type="button" id="2" onclick="btnPressed(id)"> | |
</label> | |
<label class="floor"> | |
<span class="floor__light" id="10"></span> | |
<input value="Parterre" class="button floor__input" type="button" id="3" onclick="btnPressed(id)"> | |
</label> | |
<label class="floor"> | |
<span class="floor__light" id="11"></span> | |
<input value="Keller" class="button floor__input" type="button" id="4" onclick="btnPressed(id)"> | |
</label> | |
</div> | |
<div class="button-row"> | |
<button class="button button--circle button--stop" id="6" onclick="btnPressed(id)" title="Stop"> | |
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 23"><path d="M15.74,11.57l6-6A3,3,0,0,0,17.53,1.3l-6,6-6-6A3,3,0,0,0,1.23,5.55l6,6L1.38,17.45A3,3,0,0,0,5.62,21.7l5.88-5.88,5.88,5.88a3,3,0,0,0,4.24-4.25Z" style="fill:currentColor"/></svg> | |
</button> | |
<button class="button button--circle button--up" id="5" onclick="btnPressed(id)" title="Hochfahren"> | |
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 39 23"><path d="M37.77,1.3a3,3,0,0,0-4.24,0l-14,14-14-14A3,3,0,0,0,1.23,5.55L17.38,21.7a3,3,0,0,0,4.24,0L37.77,5.55A3,3,0,0,0,37.77,1.3Z" style="fill:currentColor"/></svg> | |
</button> | |
<button class="button button--circle button--down" id="7" onclick="btnPressed(id)" title="Runterfahren"> | |
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 39 23"><path d="M37.77,1.3a3,3,0,0,0-4.24,0l-14,14-14-14A3,3,0,0,0,1.23,5.55L17.38,21.7a3,3,0,0,0,4.24,0L37.77,5.55A3,3,0,0,0,37.77,1.3Z" style="fill:currentColor"/></svg> | |
</button> | |
</div> | |
</div> | |
<script> | |
setInterval(loadDaten, 500); | |
loadDaten(); | |
function loadDaten(){ | |
fetch('/daten') | |
.then( function(response){ | |
return response.json(); | |
}) | |
.then(function(myArr){ | |
document.getElementById("value1").innerHTML=myArr[0]; | |
document.getElementById("value2").innerHTML=myArr[1]; | |
document.getElementById("value3").innerHTML=myArr[2]; | |
buttonstate(1,myArr[3]); | |
buttonstate(2,myArr[4]); | |
buttonstate(3,myArr[5]); | |
buttonstate(4,myArr[6]); | |
buttonstate(5,myArr[7]); | |
buttonstate(6,myArr[8]); | |
buttonstate(7,myArr[9]); | |
buttonstate(8,myArr[10]); | |
buttonstate(9,myArr[11]); | |
buttonstate(10,myArr[12]); | |
buttonstate(11,myArr[13]); | |
document.getElementById("value4").innerHTML=myArr[14]; | |
}); | |
} | |
function btnPressed(btnId){ | |
fetch('/btnclick?id='+ btnId) | |
.then( function(response){ | |
return response.text(); | |
}) | |
} | |
function buttonstate(btnId,text){ | |
if (text=="0"){ | |
document.getElementById(btnId).classList.add("active"); | |
} | |
else{ | |
document.getElementById(btnId).classList.remove("active"); | |
} | |
} | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment