2022-03-07 23:51:59 +09:00
|
|
|
{##
|
2022-07-24 11:24:40 +09:00
|
|
|
# SPDX-FileCopyrightText: 2022 n9k <https://git.076.ne.jp/ninya9k>
|
2022-03-07 23:51:59 +09:00
|
|
|
# SPDX-License-Identifier: AGPL-3.0-or-later
|
|
|
|
##}
|
2022-02-14 19:16:09 +09:00
|
|
|
<!doctype html>
|
|
|
|
<html>
|
|
|
|
<head>
|
|
|
|
<meta charset="utf-8">
|
2022-03-03 19:38:55 +09:00
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
2022-03-07 16:11:49 +09:00
|
|
|
<meta http-equiv="content-security-policy" content="default-src 'none'; style-src 'nonce-{{ csp }}';">
|
2022-06-17 08:39:38 +09:00
|
|
|
<meta http-equiv="refresh" content="{{ refresh }}">
|
2022-03-07 16:11:49 +09:00
|
|
|
<style nonce="{{ csp }}">
|
2022-02-14 19:16:09 +09:00
|
|
|
body {
|
2022-02-16 19:30:00 +09:00
|
|
|
overflow-y: auto;
|
2022-02-26 08:06:36 +09:00
|
|
|
margin: 0.75ch 1.25ch;
|
2022-02-16 18:55:30 +09:00
|
|
|
font-family: sans-serif;
|
2022-02-17 06:34:31 +09:00
|
|
|
color: #ddd;
|
2022-02-14 19:16:09 +09:00
|
|
|
}
|
2022-02-26 08:06:36 +09:00
|
|
|
#float {
|
2022-02-22 19:36:59 +09:00
|
|
|
float: right;
|
|
|
|
font-size: 11pt;
|
2022-02-26 08:06:36 +09:00
|
|
|
display: grid;
|
|
|
|
grid-auto-flow: column;
|
|
|
|
grid-gap: 2.5ch;
|
|
|
|
}
|
2022-03-02 19:13:07 +09:00
|
|
|
#float__form {
|
|
|
|
display: block;
|
|
|
|
margin: 0;
|
|
|
|
}
|
2022-02-26 08:06:36 +09:00
|
|
|
#float__uptime {
|
|
|
|
font-variant-numeric: tabular-nums;
|
2022-02-22 19:36:59 +09:00
|
|
|
}
|
2022-03-04 21:42:39 +09:00
|
|
|
#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 {
|
2022-06-15 19:14:21 +09:00
|
|
|
animation-delay: {{ 600 - uptime }}s;
|
2022-03-04 21:42:39 +09:00
|
|
|
}
|
|
|
|
#h0 {
|
2022-06-15 19:14:21 +09:00
|
|
|
animation-delay: {{ 3600 - uptime }}s;
|
2022-03-04 21:42:39 +09:00
|
|
|
}
|
|
|
|
#h1 {
|
2022-06-15 19:14:21 +09:00
|
|
|
animation-delay: {{ 36000 - uptime }}s;
|
2022-03-04 21:42:39 +09:00
|
|
|
}
|
2022-03-14 17:21:38 +09:00
|
|
|
#uptime-dynamic {
|
|
|
|
animation: disappear step-end {{ 360000 - uptime }}s forwards;
|
|
|
|
}
|
2022-03-04 21:42:39 +09:00
|
|
|
#uptime-dynamic-overflow {
|
|
|
|
animation: appear step-end {{ 360000 - uptime }}s backwards;
|
|
|
|
}
|
2022-03-14 17:21:38 +09:00
|
|
|
#uptime-dynamic-overflow::after {
|
|
|
|
content: "100+ hours";
|
2022-03-04 21:42:39 +09:00
|
|
|
}
|
|
|
|
@keyframes appear {
|
|
|
|
from {
|
|
|
|
width: 0;
|
2022-06-15 19:14:21 +09:00
|
|
|
height: 0;
|
2022-03-04 21:42:39 +09:00
|
|
|
visibility: hidden;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@keyframes disappear {
|
|
|
|
to {
|
2022-06-15 19:14:21 +09:00
|
|
|
width: 0;
|
2022-03-04 21:42:39 +09:00
|
|
|
height: 0;
|
2022-06-15 19:14:21 +09:00
|
|
|
visibility: hidden;
|
2022-03-04 21:42:39 +09:00
|
|
|
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 %}
|
|
|
|
|
2022-02-22 19:36:59 +09:00
|
|
|
#title > h1 {
|
|
|
|
margin: 0;
|
2022-02-14 19:16:09 +09:00
|
|
|
font-size: 18pt;
|
2022-02-22 19:43:09 +09:00
|
|
|
line-height: 1.125;
|
2022-02-17 06:34:31 +09:00
|
|
|
overflow-wrap: anywhere;
|
2022-02-14 19:16:09 +09:00
|
|
|
}
|
|
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
2022-02-26 08:06:36 +09:00
|
|
|
{% if uptime is not none %}
|
|
|
|
<aside id="float">
|
2022-03-02 19:13:07 +09:00
|
|
|
{% 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 }}">
|
2022-06-12 07:57:23 +09:00
|
|
|
<input type="submit" value="Reload stream" accesskey="r">
|
2022-03-02 19:13:07 +09:00
|
|
|
</form>
|
|
|
|
{% endif %}
|
2022-02-26 08:06:36 +09:00
|
|
|
<div id="float__viewership">{{ viewership }} viewers</div>
|
2022-03-04 21:42:39 +09:00
|
|
|
<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 -%}
|
2022-03-14 17:21:38 +09:00
|
|
|
{{- uptime | int // 3600 -}}
|
2022-03-04 21:42:39 +09:00
|
|
|
{{- ':' -}}
|
|
|
|
{{- '%02.0f' | format(uptime % 3600 // 60) -}}
|
|
|
|
{%- else -%}
|
2022-03-14 17:21:38 +09:00
|
|
|
{{- uptime | int % 3600 // 60 -}}
|
2022-03-04 21:42:39 +09:00
|
|
|
{%- 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>
|
2022-03-14 17:21:38 +09:00
|
|
|
<div id="uptime-dynamic-overflow"></div>
|
2022-03-04 21:42:39 +09:00
|
|
|
{% endif %}
|
|
|
|
</div>
|
2022-02-26 08:06:36 +09:00
|
|
|
</aside>
|
|
|
|
{% endif %}
|
2022-02-22 19:36:59 +09:00
|
|
|
<header id="title"><h1>{{ title }}</h1></header>
|
2022-02-14 19:16:09 +09:00
|
|
|
</body>
|
|
|
|
</html>
|