2022-03-07 23:51:59 +09:00
{##
# SPDX-FileCopyrightText: 2022 n9k [https://git.076.ne.jp/ninya9k]
# 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'; img-src 'self'; style-src 'nonce-{{ csp }}';" >
< style nonce = "{{ csp }}" >
2022-02-14 19:16:09 +09:00
:root {
2022-02-15 19:11:53 +09:00
--link-color: #42a5d7;
2022-02-18 21:24:19 +09:00
--padding-size: 0.5rem;
2022-02-16 18:55:30 +09:00
}
html {
height: 100%;
2022-02-14 19:16:09 +09:00
}
body {
margin: 0;
2022-02-16 18:55:30 +09:00
height: 100%;
color: #ddd;
font-family: sans-serif;
2022-02-14 19:16:09 +09:00
}
a {
2022-02-15 19:11:53 +09:00
color: var(--link-color);
2022-02-14 19:16:09 +09:00
}
2022-02-16 19:30:00 +09:00
input:not([type]), input[type="password"] {
min-width: 20ch;
}
2022-02-15 19:11:53 +09:00
.pseudolink {
color: var(--link-color);
2022-02-14 19:16:09 +09:00
cursor: pointer;
}
2022-02-15 19:11:53 +09:00
.pseudolink:hover {
text-decoration: underline;
}
2022-02-14 19:16:09 +09:00
.tripcode {
2022-02-17 21:51:09 +09:00
padding: 0 5px;
2022-02-14 19:16:09 +09:00
border-radius: 7px;
font-family: monospace;
2022-02-18 14:16:54 +09:00
font-size: 9pt;
2022-02-15 19:11:53 +09:00
cursor: default;
}
2022-02-17 06:34:31 +09:00
.tripcode:not(#tripcode) {
padding: 0;
}
2022-02-15 19:11:53 +09:00
#tripcode {
2022-03-07 16:11:49 +09:00
background-color: {{ user.tripcode.background_color }};
color: {{ user.tripcode.foreground_color }};
2022-02-15 19:11:53 +09:00
cursor: pointer;
2022-02-14 19:16:09 +09:00
}
2022-02-16 18:55:30 +09:00
.x {
font-size: 14pt;
}
2022-02-14 19:16:09 +09:00
#notice {
2022-02-15 19:11:53 +09:00
display: grid;
2022-02-16 18:55:30 +09:00
padding: 0 var(--padding-size);
2022-02-14 19:16:09 +09:00
text-align: center;
color: white;
text-decoration: none;
height: 100%;
box-sizing: border-box;
align-items: center;
2022-03-05 20:03:46 +09:00
cursor: pointer;
2022-02-14 19:16:09 +09:00
}
2022-02-22 19:36:59 +09:00
#notice h2 {
2022-02-14 19:16:09 +09:00
margin: 0;
2022-02-16 18:55:30 +09:00
font-size: 18pt;
2022-02-15 19:11:53 +09:00
line-height: 1.25;
2022-02-14 19:16:09 +09:00
}
2022-02-22 19:36:59 +09:00
#notice.verbose h2 {
2022-02-17 21:51:09 +09:00
font-size: 14pt;
}
2022-02-14 19:16:09 +09:00
#chat-form, #appearance-form {
2022-02-16 18:55:30 +09:00
padding: 0 var(--padding-size) var(--padding-size) var(--padding-size);
2022-02-14 19:16:09 +09:00
height: 100%;
box-sizing: border-box;
2022-02-16 18:55:30 +09:00
grid-gap: 0.375rem;
2022-02-14 19:16:09 +09:00
}
2022-02-16 18:55:30 +09:00
#chat-form__exit,
2022-03-05 20:03:46 +09:00
#appearance-form__buttons__exit,
2022-02-16 18:55:30 +09:00
#appearance-form__label-name,
#appearance-form__label-password {
font-size: 11pt;
align-self: center;
}
2022-02-14 19:16:09 +09:00
#chat-form {
display: grid;
2022-02-20 13:23:32 +09:00
grid: auto 2rem / auto min-content min-content 5rem;
2022-02-14 19:16:09 +09:00
}
2022-02-15 19:11:53 +09:00
#chat-form__comment {
2022-02-14 19:16:09 +09:00
resize: none;
2022-02-20 13:23:32 +09:00
grid-column: 1 / span 4;
2022-02-14 19:16:09 +09:00
background-color: #434347;
border-radius: 4px;
border: 2px solid transparent;
transition: 0.25s;
2022-02-16 18:55:30 +09:00
padding: 0.675rem;
2022-02-14 19:16:09 +09:00
color: #c3c3c7;
}
2022-02-15 19:11:53 +09:00
#chat-form__comment:not(:focus):hover {
2022-02-14 19:16:09 +09:00
border-color: #737377;
}
2022-02-15 19:11:53 +09:00
#chat-form__comment:focus {
2022-02-14 19:16:09 +09:00
background-color: black;
border-color: #3584e4;
}
2022-02-21 08:05:37 +09:00
#chat-form__exit,
#chat-form__captcha-image,
#chat-form__captcha-answer {
grid-row: 2;
}
2022-02-20 13:23:32 +09:00
#chat-form__captcha-image {
align-self: center;
font-size: 8pt;
color: inherit;
}
#chat-form__captcha-answer {
min-width: auto;
width: 8ch;
}
#chat-form__submit {
grid-column: 4;
}
2022-02-14 19:16:09 +09:00
#appearance-form {
2022-03-05 20:03:46 +09:00
display: grid;
2022-02-14 19:16:09 +09:00
grid-auto-rows: 1fr 1fr 2rem;
grid-auto-columns: min-content 1fr min-content;
}
#appearance-form__buttons {
grid-column: 1 / span 3;
display: grid;
2022-02-16 18:55:30 +09:00
grid-template-columns: auto 5rem;
}
#password-column {
display: grid;
grid-template-columns: auto auto 1fr;
2022-02-17 21:51:09 +09:00
grid-gap: 0.375rem;
2022-02-16 18:55:30 +09:00
align-items: center;
}
#appearance-form label:not(.tripcode):not(.x) {
font-size: 11pt;
2022-02-14 19:16:09 +09:00
}
2022-02-16 19:30:00 +09:00
#hide-password {
align-self: center;
}
2022-02-14 19:16:09 +09:00
#password-toggle,
#appearance-form__password {
display: none;
}
#hide-password {
visibility: hidden;
}
#password-toggle:checked + #cleared-toggle:not(:checked) ~ #appearance-form__password {
display: inline;
}
#password-toggle:checked + #cleared-toggle:not(:checked) ~ #hide-password {
visibility: visible;
}
#password-toggle:checked + #cleared-toggle:not(:checked) + #password-column {
display: none;
}
#cleared-toggle,
#cleared,
#hide-cleared {
display: none;
}
#cleared-toggle:checked + #password-column > #cleared,
#cleared-toggle:checked + #password-column > #hide-cleared {
display: inline;
}
#cleared-toggle:checked + #password-column > #tripcode,
#cleared-toggle:checked + #password-column > #show-cleared {
display: none;
}
2022-03-05 20:03:46 +09:00
#toggle {
opacity: 0;
position: absolute;
pointer-events: none;
2022-02-14 19:16:09 +09:00
}
2022-03-05 20:03:46 +09:00
#chat-form__exit > label,
#appearance-form__buttons__exit > label {
padding: 1px;
2022-02-14 19:16:09 +09:00
}
2022-03-05 20:03:46 +09:00
#toggle:focus-visible ~ #chat-form > #chat-form__exit > label,
#toggle:focus-visible ~ #appearance-form #appearance-form__buttons__exit > label {
padding: 0;
border: 1px dotted;
}
#notice-radio {
2022-02-15 19:11:53 +09:00
display: none;
2022-02-14 19:16:09 +09:00
}
2022-03-05 20:03:46 +09:00
#toggle:checked ~ #chat-form,
#toggle:not(:checked) ~ #appearance-form {
display: none;
}
#notice-radio:checked + #notice,
#notice-radio:not(:checked) ~ #chat-form,
#notice-radio:not(:checked) ~ #appearance-form {
2022-02-14 19:16:09 +09:00
display: none;
}
< / style >
< / head >
2022-02-15 19:11:53 +09:00
< body >
2022-03-07 16:07:24 +09:00
< input id = "toggle" type = "checkbox" { % if not prefer_chat_form % } checked { % endif % } accesskey = "x" >
2022-02-20 13:23:32 +09:00
{% if state.notice %}
2022-03-07 16:07:24 +09:00
< input id = "notice-radio" type = "radio" accesskey = "z" >
2022-03-05 20:03:46 +09:00
< label id = "notice" for = "notice-radio" { % if state . verbose % } class = "verbose" { % endif % } >
2022-02-22 19:36:59 +09:00
< header > < h2 > {{ state.notice }}< / h2 > < / header >
2022-02-15 19:11:53 +09:00
< small > Click to dismiss< / small >
2022-03-05 20:03:46 +09:00
< / label >
2022-02-15 19:11:53 +09:00
{% endif %}
< form id = "chat-form" action = "{{ url_for('nojs_submit_message', token=user.token) }}" method = "post" >
< input type = "hidden" name = "nonce" value = "{{ nonce }}" >
2022-03-07 16:07:24 +09:00
< textarea id = "chat-form__comment" name = "comment" maxlength = "512" { % if digest is none % } required { % endif % } placeholder = "Send a message..." rows = "1" tabindex = "1" autofocus accesskey = "m" > {{ state.comment }}< / textarea >
2022-02-21 08:05:37 +09:00
< input id = "chat-form__submit" type = "submit" value = "Chat" tabindex = "4" accesskey = "p" >
2022-03-05 20:03:46 +09:00
< div id = "chat-form__exit" > < label for = "toggle" class = "pseudolink" > Settings< / label > < / div >
2022-02-20 13:23:32 +09:00
{% if digest %}
< input type = "hidden" name = "captcha-digest" value = "{{ digest }}" >
2022-03-04 15:15:56 +09:00
< input id = "chat-form__captcha-image" type = "image" formaction = "{{ url_for('nojs_chat_form_redirect', token=user.token) }}" formnovalidate src = "{{ url_for('captcha', token=user.token, digest=digest) }}" width = "72" height = "30" alt = "Captcha failed to load" title = "Click for a new captcha" tabindex = "2" >
2022-02-20 13:23:32 +09:00
< input id = "chat-form__captcha-answer" name = "captcha-answer" required placeholder = "Captcha" tabindex = "3" >
{% endif %}
2022-02-14 19:16:09 +09:00
< / form >
2022-02-16 19:30:00 +09:00
< form id = "appearance-form" action = "{{ url_for('nojs_submit_appearance', token=user.token) }}" method = "post" >
2022-02-16 18:55:30 +09:00
< label id = "appearance-form__label-name" for = "appearance-form__name" > Name:< / label >
2022-02-18 17:28:31 +09:00
< input id = "appearance-form__name" name = "name" value = "{{ user.name or '' }}" placeholder = "{{ default_name }}" maxlength = "24" >
2022-02-16 19:30:00 +09:00
< input type = "color" name = "color" value = "{{ user.color }}" >
2022-02-14 19:16:09 +09:00
< label id = "appearance-form__label-password" for = "appearance-form__password" > Tripcode:< / label >
2022-02-15 19:19:11 +09:00
< input id = "password-toggle" name = "set-tripcode" type = "checkbox" accesskey = "s" >
2022-02-16 18:55:30 +09:00
< input id = "cleared-toggle" name = "clear-tripcode" type = "checkbox" { % if user . tripcode ! = none % } accesskey = "c" { % endif % } >
2022-02-14 19:16:09 +09:00
< div id = "password-column" >
2022-03-07 16:11:49 +09:00
{% if user.tripcode is none %}
2022-02-15 19:11:53 +09:00
< span class = "tripcode" > (no tripcode)< / span >
2022-02-15 19:19:11 +09:00
< label for = "password-toggle" class = "show-password pseudolink" > set< / label >
2022-02-14 19:16:09 +09:00
{% else %}
2022-03-07 16:11:49 +09:00
< label id = "tripcode" for = "password-toggle" class = "show-password tripcode" > {{ user.tripcode.digest }}< / label >
2022-03-14 18:47:59 +09:00
< label id = "show-cleared" for = "cleared-toggle" class = "pseudolink x" > × < / label >
2022-02-14 19:16:09 +09:00
< div id = "cleared" class = "tripcode" > (cleared)< / div >
2022-02-15 19:19:11 +09:00
< label id = "hide-cleared" for = "cleared-toggle" class = "pseudolink" > undo< / label >
2022-02-14 19:16:09 +09:00
{% endif %}
< / div >
2022-02-17 21:51:09 +09:00
< input id = "appearance-form__password" name = "password" type = "password" placeholder = "(tripcode password)" maxlength = "1024" >
2022-03-14 18:47:59 +09:00
< div id = "hide-password" > < label for = "password-toggle" class = "pseudolink x" > × < / label > < / div >
2022-02-14 19:16:09 +09:00
< div id = "appearance-form__buttons" >
2022-03-05 20:03:46 +09:00
< div id = "appearance-form__buttons__exit" > < label for = "toggle" class = "pseudolink" > Return to chat< / label > < / div >
2022-02-14 19:16:09 +09:00
< input type = "submit" value = "Update" >
< / div >
< / form >
< / body >
< / html >