2021-04-10 02:31:14 +09:00
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<meta http-equiv="conent-security-policy" content="default-src 'none'">
|
2021-04-11 13:18:32 +09:00
|
|
|
{% if not debug %}<meta http-equiv="refresh" content="5">{% endif %}
|
2021-04-10 02:31:14 +09:00
|
|
|
<style>
|
2021-04-11 13:18:32 +09:00
|
|
|
div.comment {color: white;margin-bottom:0.375em;overflow:hidden;}
|
2021-04-10 02:31:14 +09:00
|
|
|
.rotate {transform: rotate(-180deg);}
|
|
|
|
|
.reverse {direction: rtl;}
|
|
|
|
|
span.name {font-weight: bold;}
|
|
|
|
|
span.tripcode {
|
|
|
|
|
margin-left: 0.625em;
|
|
|
|
|
padding: 0 5px;
|
|
|
|
|
border-radius: 6px;
|
|
|
|
|
font-size: 90%;
|
|
|
|
|
font-family: monospace;
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
}
|
|
|
|
|
span.message {margin-left: 0.625em;word-wrap: break-word;}
|
|
|
|
|
span.camera {transform: scaleX(-1);text-shadow: 0px 0px 6px #ff8280;cursor: help;margin-right:0.25em;}
|
2021-04-10 14:56:00 +09:00
|
|
|
span.time {font-size: 80%;color: gray;vertical-align:middle;margin-right:0.5em;}
|
2021-04-11 13:18:32 +09:00
|
|
|
body {margin: 0.5em;margin-bottom: 0;min-height: calc(100vh - 1em);transform: scaleX(-1);}
|
|
|
|
|
input[type="submit"] {padding: 0;margin-bottom: 0.5em;}
|
|
|
|
|
div#refresh {
|
|
|
|
|
color: white;
|
|
|
|
|
background-color: gray;
|
|
|
|
|
position: sticky;
|
|
|
|
|
top: 100vh;
|
|
|
|
|
padding: 1em;
|
|
|
|
|
text-align: center;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
box-shadow: 0px 2px 4px black;
|
|
|
|
|
}
|
|
|
|
|
div#refresh {
|
2021-04-11 15:11:58 +09:00
|
|
|
animation: unhide 0s forwards 30s;
|
2021-04-11 13:18:32 +09:00
|
|
|
height: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
visibility: hidden;
|
|
|
|
|
}
|
|
|
|
|
@keyframes unhide {
|
|
|
|
|
to {
|
|
|
|
|
height: revert;
|
|
|
|
|
padding: 1em;
|
|
|
|
|
visibility: visible;
|
|
|
|
|
}
|
2021-04-11 13:19:59 +09:00
|
|
|
}
|
2021-04-10 02:31:14 +09:00
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
{% if broadcaster %}
|
|
|
|
|
<form action="/mod" method="post">
|
|
|
|
|
<div class="reverse">
|
|
|
|
|
<input class="rotate" type="submit" name="ban" value="Ban">
|
|
|
|
|
<input class="rotate" type="submit" name="hide" value="Hide">
|
|
|
|
|
<input class="rotate" type="submit" name="ban_purge" value="Ban and hide all">
|
|
|
|
|
</div>
|
|
|
|
|
{% endif %}
|
|
|
|
|
|
|
|
|
|
{% for message in messages %}
|
2021-04-11 13:18:32 +09:00
|
|
|
<div class="comment rotate">
|
2021-04-10 02:31:14 +09:00
|
|
|
{% if not message['hidden'] %}
|
|
|
|
|
{% if broadcaster %}
|
|
|
|
|
<input type="checkbox" name="message_id[]" value="{{ message['id'] }}">
|
|
|
|
|
{% endif %}
|
2021-04-10 14:51:18 +09:00
|
|
|
<span class="time" title="{{ message['date'] }}">{{ message['time'] }}</span>⁠<!--
|
2021-04-10 02:31:14 +09:00
|
|
|
{% if message['viewer']['broadcaster'] %}
|
2021-04-10 14:43:52 +09:00
|
|
|
--><span class="camera" title="Broadcaster">🎥</span>⁠<!--
|
2021-04-10 14:51:18 +09:00
|
|
|
{% endif %}--><span class="name" style="color:#{{ message['viewer']['colour'].hex() }};">{{ message['viewer']['nickname'] }}</span>⁠<!--
|
2021-04-10 02:31:14 +09:00
|
|
|
-->{% if message['viewer']['tripcode']['string'] %}<span class="tripcode" style="background-color:#{{ message['viewer']['tripcode']['background_colour'].hex() }};color:#{{ message['viewer']['tripcode']['foreground_colour'].hex() }};">{{ message['viewer']['tripcode']['string'] }}</span>⁠<!--
|
|
|
|
|
-->{% endif %}<span class="message">{{ message['text'] }}</span>
|
|
|
|
|
{% endif %}
|
|
|
|
|
</div>
|
|
|
|
|
{% endfor %}
|
2021-04-11 13:18:32 +09:00
|
|
|
<div id="refresh" class="rotate">Manual refresh required</div>
|
2021-04-10 02:31:14 +09:00
|
|
|
|
|
|
|
|
{% if broadcaster %}
|
|
|
|
|
</form>
|
|
|
|
|
{% endif %}
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
