anonstream/anonstream/templates/nojs_chat_messages.html

182 行
5.0 KiB
HTML

{##
# SPDX-FileCopyrightText: 2022 n9k [https://git.076.ne.jp/ninya9k]
# SPDX-License-Identifier: AGPL-3.0-or-later
##}
{% from 'macros/user.html' import appearance with context %}
<!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="4">
<meta http-equiv="refresh" content="5; url={{ url_for('nojs_chat_messages_redirect', token=user.token) }}">
<style nonce="{{ csp }}">
html {
height: 100%;
}
body {
margin: 0;
padding: 0.5rem 0.5rem 0 0.5rem;
min-height: 100%;
box-sizing: border-box;
color: #ddd;
font-family: sans-serif;
font-size: 11pt;
transform: rotate(180deg);
}
.button {
display: block;
text-align: center;
background-color: #3674bf;
border: 4px outset #3584e4;
box-shadow: 0 0 5px #3584e4;
padding: 1.25ch 0;
box-sizing: border-box;
color: inherit;
font-size: 12pt;
font-weight: bold;
text-decoration: none;
transform: rotate(-180deg);
}
#timeout {
z-index: 1;
position: absolute;
top: 0.5rem;
width: calc(100% - 1rem);
visibility: hidden;
animation: appear 0s {{ timeout }}s forwards;
}
#timeout header {
font-size: 20pt;
}
#timeout-dismiss {
position: absolute;
bottom: 2px;
width: calc(100% - 1rem);
}
#timeout-dismiss > .button {
visibility: hidden;
height: 0;
padding: 0;
border: none;
animation:
appear 0s {{ timeout }}s forwards,
unskinny 0s {{ timeout }}s forwards;
}
#timeout-alt {
padding: 4px 0 2px 0;
}
#notimeout:target + #timeout,
#notimeout:target ~ #timeout-dismiss,
#notimeout:not(:target) ~ #timeout-alt {
display: none;
}
@keyframes appear {
to {
visibility: visible;
}
}
@keyframes unskinny {
to {
height: auto;
padding: 1.25ch 0;
border: 4px outset #3584e4;
}
}
#chat-messages {
list-style: none;
margin: 0;
padding: 0;
min-height: 100%;
}
.chat-message {
padding: 0.5ch 0.75ch;
width: 100%;
box-sizing: border-box;
border-radius: 4px;
transform: rotate(-180deg);
}
.chat-message:hover {
background-color: #434347;
}
.chat-message__time {
color: #b2b2b3;
font-size: 10pt;
cursor: default;
}
.chat-message__insignia {
text-shadow: 0 0 2px orangered;
cursor: help;
}
.chat-message__name {
overflow-wrap: anywhere;
font-weight: bold;
/* color: attr("data-color"); */
cursor: default;
}
.chat-message__name__tag {
font-family: monospace;
font-size: 9pt;
vertical-align: top;
}
.chat-message__markup {
overflow-wrap: anywhere;
line-height: 1.3125;
}
.tripcode {
padding: 0 5px;
border-radius: 7px;
font-family: monospace;
font-size: 9pt;
cursor: default;
}
{% for token in messages | map(attribute='token') | list | unique %}
{% with user = users_by_token[token] %}
[data-token-hash="{{ user.token_hash }}"] > .chat-message__name {
color: {{ user.color }};
}
{% if user.tripcode %}
[data-token-hash="{{ user.token_hash }}"] > .tripcode {
background-color: {{ user.tripcode.background_color }};
color: {{ user.tripcode.foreground_color }};
}
{% endif %}
{% endwith %}
{% endfor %}
</style>
</head>
<body>
<div id="end"></div>
<div id="notimeout"></div>
<aside id="timeout">
<a class="button" href="{{ url_for('nojs_chat_messages_redirect', token=user.token) }}">
<header>Timed out</header>
<small>Click to refresh</small>
</a>
</aside>
<ol id="chat-messages">
{% for message in messages | reverse %}
<li class="chat-message" data-seq="{{ message.seq }}" data-token-hash="{{ user.token_hash }}">
{% with user = users_by_token[message.token] %}
<time class="chat-message__time" datetime="{{ message.date }}T{{ message.time_seconds }}Z" title="{{ message.date }} {{ message.time_seconds }}">{{ message.time_minutes }}</time>
{{- '&nbsp;' | safe -}}
{{ appearance(user, insignia_class='chat-message__insignia', name_class='chat-message__name', tag_class='chat-message__name__tag') }}
{{- ': ' -}}
<span class="chat-message__markup">{{ message.markup }}</span>
{% endwith %}
</li>
{% endfor %}
</ol>
<aside id="timeout-dismiss">
<a class="button" href="#notimeout">Hide timeout notice</a>
</aside>
<aside id="timeout-alt">
<a class="button" href="{{ url_for('nojs_chat_messages_redirect', token=user.token) }}">Click to refresh</a>
</aside>
</body>
</html>