marantz-night-mode
Version:
Controls a Marantz AMP via Telnet by either a local web site or infrared commands from a LG remote control.
170 lines (149 loc) • 4.07 kB
HTML
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Night Mode Toggler</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html,
body {
height: 100%;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
background-color: #f5bb06;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
button {
background-color: white;
text-align: center;
outline: none;
padding: 30px;
font-size: 35px;
-webkit-appearance: none;
border: 4px solid lightgrey;
}
.container {
background-color: white;
text-align: center;
outline: none;
padding: 30px;
font-size: 33px;
width: 310px;
margin-top: 30px;
}
.container:first-child {
margin-top: 0;
}
.switch {
position: relative;
height: 34px;
padding-right: 80px;
display: flex;
align-items: center;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
width: 60px;
opacity: 0;
}
.slider.show {
opacity: 1;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
</style>
</head>
<body>
<div class="container">
<label class="switch">
<span>Enhance Voice</span>
<input type="checkbox" id="toggleVoice">
<span class="slider round"></span>
</label>
</div>
<div class="container">
<label class="switch">
<span>Night Mode</span>
<input type="checkbox" id="toggleNightMode">
<span class="slider round"></span>
</label>
</div>
<script>
const toggleVoice = document.getElementById('toggleVoice');
const toggleNightModeButton = document.getElementById('toggleNightMode');
let nightModeEnabled;
let enhanceVoiceEnabled;
fetch('/status').then((response) => {
response.json().then((status) => {
console.log(status);
enhanceVoiceEnabled = status.voice;
toggleVoice.checked = enhanceVoiceEnabled;
nightModeEnabled = status.night;
toggleNightModeButton.checked = nightModeEnabled;
const sliderElements = document.getElementsByClassName('slider');
sliderElements[0].classList.add('show');
sliderElements[1].classList.add('show');
});
});
toggleVoice.addEventListener('click', () => {
if (enhanceVoiceEnabled !== undefined) {
fetch((enhanceVoiceEnabled) ? '/disableVoice' : '/enableVoice');
enhanceVoiceEnabled = !enhanceVoiceEnabled;
toggleNightModeButton.innerText = 'Night Mode: ' + ((enhanceVoiceEnabled) ? 'On' : 'Off');
}
});
toggleNightModeButton.addEventListener('click', () => {
if (nightModeEnabled !== undefined) {
fetch((nightModeEnabled) ? '/disableNightMode' : '/enableNightMode');
nightModeEnabled = !nightModeEnabled;
toggleNightModeButton.innerText = 'Night Mode: ' + ((nightModeEnabled) ? 'On' : 'Off');
}
});
</script>
</body>
</html>