Skip to content

Instantly share code, notes, and snippets.

@karljosefschneider

karljosefschneider/index.html

Created April 20, 2024 14:47
Show Gist options
  • Save karljosefschneider/6e9b2771fbe261c0a791a8610e51e5b7 to your computer and use it in GitHub Desktop.
Save karljosefschneider/6e9b2771fbe261c0a791a8610e51e5b7 to your computer and use it in GitHub Desktop.
Download ZIP
HTML-Code zum Treppenlift
Raw
index.html
<!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