homebridge-appletv-enhanced
Version:
Plugin that exposes the Apple TV to HomeKit with much richer features than the vanilla Apple TV implementation of HomeKit.
103 lines (102 loc) • 3.72 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;
}
.box {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
#success {
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;
}
#homeApp {
max-width: 7rem;
margin-top: 1rem;
}
</style>
</head>
<body>
<div class="bg-image"></div>
<div class="box">
<div id="success" style="display: none">
<img
src="https://raw.githubusercontent.com/maxileith/homebridge-appletv-enhanced/main/static_html_content/appleTVLogo.png"
id="appleTVLogo"
/>
<h3>The PIN was transmitted successfully.</h3>
<p>Check the logs to see if pairing succeeded.</p>
<a
href="com.apple.home://launch"
style="color: black; text-decoration-color: black"
>
<img
src="https://raw.githubusercontent.com/maxileith/homebridge-appletv-enhanced/main/static_html_content/homeAppIcon.png"
id="homeApp"
/>
<p style="margin-top: 0; font-weight: bold">
Continue by adding your Apple TV in the Home app
</p>
</a>
</div>
<div id="loading">
<img
src="https://raw.githubusercontent.com/maxileith/homebridge-appletv-enhanced/main/static_html_content/loading.svg"
id="appleTVLogo"
/>
</div>
</div>
<script>
setTimeout(() => {
fetch("/", { method: "GET" })
.then(() => {
window.location.replace("/");
})
.catch(() => {
document.getElementById("loading").style.display =
"none";
document.getElementById("success").style.display =
"unset";
});
}, 5000);
</script>
</body>
</html>