106 lines
5.2 KiB
HTML
106 lines
5.2 KiB
HTML
<!doctype html>
|
||
<html lang="en-NZ">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<meta name="color-scheme" content="dark">
|
||
<meta name="robots" content="noindex,nofollow,noarchive,nosnippet,noimageindex">
|
||
<meta name="googlebot" content="noindex,nofollow,noarchive,nosnippet,noimageindex">
|
||
<meta name="bingbot" content="noindex,nofollow,noarchive,nosnippet,noimageindex">
|
||
<meta name="referrer" content="no-referrer">
|
||
<title>{{if .Authenticated}}Install Memby{{else}}Sign in{{end}}</title>
|
||
<style>
|
||
:root { color-scheme: dark; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
|
||
* { box-sizing: border-box; }
|
||
body {
|
||
min-height: 100vh; margin: 0; padding: 32px 20px; display: grid; place-items: center;
|
||
color: #f2f5f7; background:
|
||
radial-gradient(circle at 50% 5%, rgba(82,181,75,.18), transparent 42%),
|
||
#0b0e11;
|
||
}
|
||
main {
|
||
width: min(680px, 100%); padding: clamp(28px, 6vw, 56px);
|
||
border: 1px solid rgba(255,255,255,.11); border-radius: 22px;
|
||
background: rgba(20,27,33,.94); box-shadow: 0 24px 80px rgba(0,0,0,.42);
|
||
}
|
||
.mark {
|
||
width: 68px; height: 68px; display: grid; place-items: center; margin-bottom: 26px;
|
||
border-radius: 18px; background: #52b54b; color: #08230a;
|
||
font-size: 34px; font-weight: 900;
|
||
}
|
||
.subtle-mark { width: 42px; height: 42px; margin-bottom: 20px; border-radius: 12px; font-size: 21px; }
|
||
.login-title { font-size: 26px; letter-spacing: -.025em; }
|
||
.login-intro { margin-bottom: 22px; font-size: 15px; }
|
||
h1 { margin: 0 0 10px; font-size: clamp(32px, 7vw, 48px); letter-spacing: -.04em; }
|
||
.intro { margin: 0 0 28px; color: #b6c0c8; font-size: 18px; line-height: 1.55; }
|
||
.download {
|
||
display: block; padding: 17px 24px; border-radius: 12px; text-align: center;
|
||
color: #08230a; background: #63c85b; text-decoration: none;
|
||
font-size: 19px; font-weight: 750;
|
||
}
|
||
.download:hover, .download:focus { background: #7bd973; outline: 3px solid #d7ffd4; outline-offset: 4px; }
|
||
form { display: grid; gap: 17px; }
|
||
label { display: grid; gap: 7px; color: #c8d0d6; font-size: 15px; font-weight: 650; }
|
||
input {
|
||
width: 100%; min-height: 54px; padding: 12px 14px; border: 1px solid #52606b;
|
||
border-radius: 10px; color: #f2f5f7; background: #0d1217; font: inherit;
|
||
}
|
||
input:focus { outline: 3px solid #86dc80; outline-offset: 2px; border-color: transparent; }
|
||
button {
|
||
min-height: 54px; padding: 13px 20px; border: 0; border-radius: 10px;
|
||
color: #08230a; background: #63c85b; font: inherit; font-size: 17px; font-weight: 750;
|
||
cursor: pointer;
|
||
}
|
||
button:hover, button:focus { background: #7bd973; outline: 3px solid #d7ffd4; outline-offset: 3px; }
|
||
.error { margin: 0; padding: 12px 14px; border-radius: 9px; color: #ffd4d4; background: #3b2020; }
|
||
.logout { margin-top: 24px; }
|
||
.logout button { min-height: 42px; color: #c9d1d7; background: #26313a; font-size: 14px; }
|
||
.meta { margin: 13px 0 0; color: #8f9ba5; text-align: center; font-size: 14px; }
|
||
ol { margin: 34px 0 0; padding-left: 24px; color: #c8d0d6; line-height: 1.65; }
|
||
li + li { margin-top: 10px; }
|
||
.notes { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); color: #9faab3; }
|
||
.unavailable { padding: 18px; border-radius: 12px; background: #33251b; color: #ffd7b0; line-height: 1.5; }
|
||
code { color: #d9ffd6; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<main>
|
||
{{if not .Authenticated}}
|
||
<div class="mark subtle-mark">M</div>
|
||
<h1 class="login-title">Sign in</h1>
|
||
<p class="intro login-intro">Login required to continue.</p>
|
||
<form method="post" action="/install/login">
|
||
<input name="next" type="hidden" value="{{.LoginNext}}">
|
||
{{if .Error}}<p class="error" role="alert">{{.Error}}</p>{{end}}
|
||
<label>
|
||
Username
|
||
<input name="username" type="text" autocomplete="username" autocapitalize="none" required autofocus>
|
||
</label>
|
||
<label>
|
||
Password
|
||
<input name="password" type="password" autocomplete="current-password" required>
|
||
</label>
|
||
<button type="submit">Sign in</button>
|
||
</form>
|
||
{{else}}
|
||
<div class="mark">M</div>
|
||
<h1>Install Memby</h1>
|
||
{{if .Ready}}
|
||
<p class="intro">The private Android TV client for this household’s Emby library.</p>
|
||
<a class="download" href="{{.DownloadURL}}">Download Memby {{.Version}}</a>
|
||
<p class="meta">Signed Android APK · {{.Size}}</p>
|
||
<ol>
|
||
<li>Open this page on the TV using a browser or the Downloader app.</li>
|
||
<li>Choose <strong>Download</strong>. If Android asks, allow that app to install unknown apps.</li>
|
||
<li>Open the downloaded APK and choose <strong>Install</strong>, then launch Memby and sign in.</li>
|
||
</ol>
|
||
{{if .Notes}}<p class="notes"><strong>Latest release:</strong> {{.Notes}}</p>{{end}}
|
||
<form class="logout" method="post" action="/install/logout"><button type="submit">Sign out</button></form>
|
||
{{else}}
|
||
<p class="unavailable">The installer is not available yet. Publish a signed Memby release, then refresh this page.</p>
|
||
{{end}}
|
||
{{end}}
|
||
</main>
|
||
</body>
|
||
</html>
|