homebridge-appletv-enhanced
Version:
Plugin that exposes the Apple TV to HomeKit with much richer features than the vanilla Apple TV implementation of HomeKit.
202 lines (195 loc) • 7.12 kB
HTML
<html lang="en">
<head>
<title>Apple TV Pairing</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
height: 100vh;
}
.bg-image {
background-image: url(https://raw.githubusercontent.com/maxileith/homebridge-appletv-enhanced/main/static_html_content/background.jpg);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
height: calc(100vh + 60px);
width: calc(100% + 60px);
filter: blur(15px);
-webkit-filter: blur(15px);
position: absolute;
top: -30px;
left: -30px;
opacity: 0.8;
}
input {
padding: 0.5rem;
border: 0;
width: 2.5rem;
height: 4rem;
text-align: center;
font-size: 2rem;
border-radius: 0.75rem;
margin: 0.25rem;
background-color: rgba(0, 0, 0, 0.2);
}
.box {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.box div {
text-align: center;
max-width: 20rem;
margin-bottom: 5rem;
background-color: rgba(255, 255, 255, 0.4);
padding: 2rem;
border-radius: 1rem;
}
#appleTVLogo {
max-width: 10rem;
}
button {
padding: 0.5rem;
border: 0;
width: 100%;
height: 5rem;
font-size: 1.5rem;
border-radius: 0.75rem;
background-color: rgba(0, 0, 0, 0.2);
cursor: pointer;
margin: 3.5rem 0 0.25rem 0;
}
</style>
<script>
let secondsLeft = 30;
let countDownInterval = null;
function showRetry() {
document.getElementById("pinForm").style.display = "none";
document.getElementById("retryButton").style.display = "block";
}
function countDown() {
secondsLeft--;
if (secondsLeft === 0) {
clearInterval(countDownInterval);
showRetry();
} else {
document.getElementById("secondsLeft").innerHTML =
secondsLeft;
}
}
window.addEventListener("load", () => {
document.getElementById("secondsLeft").innerHTML = secondsLeft;
countDownInterval = setInterval(countDown, 1000);
setTimeout(() => {
fetch("/", { method: "GET" }).then((res) => {
res.text().then((t) => {
if (t.includes("Back off" + " timer")) {
window.location.replace("/");
}
});
});
}, 1000);
});
function moveOnMax(field, lastFieldID, nextFieldID) {
field.value = field.value.substring(field.value.length - 1);
if (
event.key.includes("Arrow") ||
event.code.includes("Arrow")
) {
return;
}
if (event.key === "Backspace" || event.code === "Backspace") {
if (lastFieldID !== "") {
document.getElementById(lastFieldID).value = "";
document.getElementById(lastFieldID).focus();
return;
}
}
if (field.value.length === 1) {
if (nextFieldID !== "") {
document.getElementById(nextFieldID).focus();
} else {
checkAndSubmit();
}
}
}
function checkAndSubmit() {
if (document.getElementById("a").value.length !== 1) {
return;
}
if (document.getElementById("b").value.length !== 1) {
return;
}
if (document.getElementById("c").value.length !== 1) {
return;
}
if (document.getElementById("d").value.length !== 1) {
return;
}
document.pin.submit();
}
</script>
</head>
<body>
<div class="bg-image"></div>
<div class="box">
<div>
<img
src="https://raw.githubusercontent.com/maxileith/homebridge-appletv-enhanced/main/static_html_content/appleTVLogo.png"
id="appleTVLogo"
/>
<h3>Enter the PIN on your Apple TV.</h3>
<form action="/" method="post" name="pin" id="pinForm">
<p><span id="secondsLeft"></span> seconds left</p>
<input
type="text"
id="a"
onkeyup="moveOnMax(this, '', 'b')"
autofocus
name="a"
inputmode="numeric"
/>
<input
type="text"
id="b"
onkeyup="moveOnMax(this, 'a', 'c')"
name="b"
inputmode="numeric"
/>
<input
type="text"
id="c"
onkeyup="moveOnMax(this, 'b', 'd')"
name="c"
inputmode="numeric"
/>
<input
type="text"
id="d"
onkeyup="moveOnMax(this, 'c', '')"
name="d"
inputmode="numeric"
/>
</form>
<button
id="retryButton"
style="display: none"
onClick="window.location.reload();"
>
Tap to retry
</button>
</div>
</div>
</body>
</html>