177 行
4.7 KiB
HTML
177 行
4.7 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="content-security-policy" content="default-src 'none'; style-src 'nonce-{{ csp }}';">
|
|
<meta http-equiv="refresh" content="6">
|
|
<style nonce="{{ csp }}">
|
|
body {
|
|
overflow-y: auto;
|
|
margin: 0.75ch 1.25ch;
|
|
font-family: sans-serif;
|
|
color: #ddd;
|
|
}
|
|
#float {
|
|
float: right;
|
|
font-size: 11pt;
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
grid-gap: 2.5ch;
|
|
}
|
|
#float__form {
|
|
display: block;
|
|
margin: 0;
|
|
}
|
|
#float__uptime {
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
#uptime-static[data-hidden], #uptime-static__label {
|
|
display: none;
|
|
}
|
|
|
|
{% if uptime is not none and uptime < 360000 %}
|
|
#s0::before, #s1::before,
|
|
#m0::before, #m1::before,
|
|
#h0::before, #h1::before {
|
|
animation-timing-function: step-end;
|
|
animation-delay: {{ -uptime }}s;
|
|
animation-iteration-count: infinite;
|
|
content: "";
|
|
}
|
|
#m0::after, #h0::after {
|
|
content: ":";
|
|
}
|
|
#s0::before {
|
|
animation-name: tick10;
|
|
animation-duration: 10s;
|
|
}
|
|
#s1::before {
|
|
animation-name: tick6;
|
|
animation-duration: 60s;
|
|
}
|
|
#m0::before {
|
|
animation-name: tick10;
|
|
animation-duration: 600s;
|
|
}
|
|
#m1::before {
|
|
animation-name: tick6;
|
|
animation-duration: 3600s;
|
|
}
|
|
#h0::before {
|
|
animation-name: tick10;
|
|
animation-duration: 36000s;
|
|
}
|
|
#h1::before {
|
|
animation-name: tick10;
|
|
animation-duration: 360000s;
|
|
}
|
|
#m1, #h0, #h1 {
|
|
display: inline-block;
|
|
animation: appear step-end both;
|
|
}
|
|
#m1 {
|
|
animation-duration: {{ 600 - uptime }}s;
|
|
}
|
|
#h0 {
|
|
animation-duration: {{ 3600 - uptime }}s;
|
|
}
|
|
#h1 {
|
|
animation-duration: {{ 36000 - uptime }}s;
|
|
}
|
|
#uptime-dynamic-overflow {
|
|
animation: appear step-end {{ 360000 - uptime }}s backwards;
|
|
}
|
|
#uptime-dynamic {
|
|
animation: disappear step-end {{ 360000 - uptime }}s forwards;
|
|
}
|
|
@keyframes appear {
|
|
from {
|
|
width: 0;
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
@keyframes disappear {
|
|
to {
|
|
height: 0;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
@keyframes tick6 {
|
|
00.0000% { content: "0"; }
|
|
16.6667% { content: "1"; }
|
|
33.3333% { content: "2"; }
|
|
50.0000% { content: "3"; }
|
|
66.6667% { content: "4"; }
|
|
83.3333% { content: "5"; }
|
|
}
|
|
@keyframes tick10 {
|
|
00% { content: "0"; }
|
|
10% { content: "1"; }
|
|
20% { content: "2"; }
|
|
30% { content: "3"; }
|
|
40% { content: "4"; }
|
|
50% { content: "5"; }
|
|
60% { content: "6"; }
|
|
70% { content: "7"; }
|
|
80% { content: "8"; }
|
|
90% { content: "9"; }
|
|
}
|
|
{% endif %}
|
|
|
|
#title > h1 {
|
|
margin: 0;
|
|
font-size: 18pt;
|
|
line-height: 1.125;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
{% if uptime is not none %}
|
|
<aside id="float">
|
|
{% if user.presence != Presence.WATCHING %}
|
|
<form id="float__form" action="{{ url_for('nojs_stream') }}" target="stream_nojs">
|
|
<input type="hidden" name="token" value="{{ user.token }}">
|
|
<input type="submit" value="Reload stream">
|
|
</form>
|
|
{% endif %}
|
|
<div id="float__viewership">{{ viewership }} viewers</div>
|
|
<div id="float__uptime">
|
|
<div id="uptime-static"{% if uptime < 360000 %} data-hidden=""{% endif %}>
|
|
<span id="uptime-static__label">Uptime:</span>
|
|
<span>
|
|
{%- if uptime >= 3600 -%}
|
|
{{- (uptime // 3600) | int -}}
|
|
{{- ':' -}}
|
|
{{- '%02.0f' | format(uptime % 3600 // 60) -}}
|
|
{%- else -%}
|
|
{{- uptime % 3600 // 60 | int -}}
|
|
{%- endif -%}
|
|
{{- ':' -}}
|
|
{{- '%02.0f' | format(uptime % 60) -}}
|
|
</span>
|
|
</div>
|
|
{% if uptime < 360000 %}
|
|
<div id="uptime-dynamic">
|
|
<span id="h1"></span>
|
|
{{- '' -}}
|
|
<span id="h0"></span>
|
|
{{- '' -}}
|
|
<span id="m1"></span>
|
|
{{- '' -}}
|
|
<span id="m0"></span>
|
|
{{- '' -}}
|
|
<span id="s1"></span>
|
|
{{- '' -}}
|
|
<span id="s0"></span>
|
|
</div>
|
|
<div id="uptime-dynamic-overflow">100+ hours</div>
|
|
{% endif %}
|
|
</div>
|
|
</aside>
|
|
{% endif %}
|
|
<header id="title"><h1>{{ title }}</h1></header>
|
|
</body>
|
|
</html>
|