diff --git a/anonstream/static/anonstream.js b/anonstream/static/anonstream.js
index 82ede0a..b549e53 100644
--- a/anonstream/static/anonstream.js
+++ b/anonstream/static/anonstream.js
@@ -34,6 +34,12 @@ const jsmarkup_chat_form = `\
+
+
+
`;
const insert_jsmarkup = () => {jsmarkup_info_float_viewership
@@ -96,6 +102,19 @@ const stylesheet_color = document.styleSheets[1];
const stylesheet_tripcode_display = document.styleSheets[2];
const stylesheet_tripcode_colors = document.styleSheets[3];
+/* override chat form notice button */
+const chat_form = document.getElementById("chat-form_js");
+const chat_form_notice_button = document.getElementById("chat-form_js__notice__button");
+const chat_form_notice_header = document.getElementById("chat-form_js__notice__button__header");
+chat_form_notice_button.addEventListener("click", (event) => {
+ chat_form.removeAttribute("data-notice");
+ chat_form_notice_header.innerText = "";
+});
+const show_notice = (text) => {
+ chat_form_notice_header.innerText = text;
+ chat_form.dataset.notice = "";
+}
+
/* create websocket */
const info_title = document.getElementById("info_js__title");
const info_viewership = document.getElementById("info_js__float__viewership");
@@ -594,6 +613,11 @@ const on_websocket_message = (event) => {
case "ack":
console.log("ws ack", receipt);
+
+ if (receipt.notice !== null) {
+ show_notice(receipt.notice);
+ }
+
const existing_nonce = chat_form_nonce.value;
if (receipt.clear && receipt.nonce === existing_nonce) {
chat_form_comment.value = "";
@@ -603,6 +627,7 @@ const on_websocket_message = (event) => {
chat_form_nonce.value = receipt.next;
receipt.digest === null ? disable_captcha() : enable_captcha(receipt.digest);
chat_form_submit.disabled = false;
+
break;
case "message":
@@ -709,7 +734,6 @@ stream.addEventListener("error", (event) => {
});
/* override js-only chat form */
-const chat_form = document.getElementById("chat-form_js");
const chat_form_nonce = document.getElementById("chat-form_js__nonce");
const chat_form_comment = document.getElementById("chat-form_js__comment");
const chat_form_submit = document.getElementById("chat-form_js__submit");
diff --git a/anonstream/static/style.css b/anonstream/static/style.css
index c6f722c..519104f 100644
--- a/anonstream/static/style.css
+++ b/anonstream/static/style.css
@@ -265,7 +265,8 @@ noscript {
grid-template-columns: 1fr min-content min-content 5rem;
grid-template-rows: auto var(--button-height);
grid-gap: 0.375rem;
- margin: 0 0.5rem 0.5rem 0.5rem;
+ padding: 0 0.5rem 0.5rem 0.5rem;
+ position: relative;
}
#chat-form_js__submit {
grid-column: 2 / span 1;
@@ -307,6 +308,33 @@ noscript {
#chat-form_js:not([data-captcha]) > #chat-form_js__captcha-answer {
display: none;
}
+#chat-form_js:not([data-notice]) > #chat-form_js__notice {
+ display: none;
+}
+#chat-form_js__notice {
+ position: absolute;
+ width: 100%;
+ background: linear-gradient(#2323277f 25%, #232327);
+ height: 100%;
+ display: grid;
+}
+#chat-form_js__notice__button {
+ color: inherit;
+ border-color: black;
+ background-color: #232327;
+ border-radius: 4px;
+ text-align: center;
+ margin: auto;
+ display: grid;
+ grid-gap: 0.375rem;
+ padding: 0.625rem 1.25rem;
+ box-shadow: 0 0 12px black;
+ cursor: pointer;
+}
+#chat-form_js__notice__button__header {
+ font-size: 14pt;
+ line-height: 1.5;
+}
#chat-form_nojs {
height: 13ch;
}