Глупые статусы, окно настроек

src/html/button.html

@@ -0,0 +1 @@
+<button class="april-fools__button">🎉</button>

src/html/styles.html

@@ -0,0 +1,66 @@
+<style class="april-fools__styles">
+.april-fools__button {
+    position: fixed;
+    bottom: 0.2rem;
+    right: 0.2rem;
+    padding: 0;
+    font-size: 3rem;
+    border: 0 solid;
+    background: transparent none;
+    opacity: 0.3;
+    transition: 0.4s all;
+    cursor: pointer;
+}
+.april-fools__button:hover {
+    opacity: 1;
+}
+.april-fools__joke-row {
+    border-bottom: 1px solid black;
+}
+.april-fools__joke-row:first-of-type {
+    border-top: 1px solid black;
+}
+.april-fools__joke {
+    display: flex;
+    flex-flow: row wrap;
+    padding: 10px;
+    opacity: 0.5;
+    justify-content: space-between;
+    align-items: center;
+    gap: 1ch;
+    cursor: pointer;
+}
+.april-fools__joke:hover {
+    text-shadow: 0 0 black;
+}
+.april-fools__joke:before {
+    display: block;
+    content: "";
+    flex: 0 0 2ch;
+    text-align: center;
+    content: "✔";
+    opacity: 0;
+}
+input.april-fools__joke-input:checked + .april-fools__joke {
+    opacity: 1;
+}
+input.april-fools__joke-input:checked + .april-fools__joke:before {
+    opacity: 1;
+}
+.april-fools__joke .april-fools__joke-title {
+    flex: 1 auto;
+    font-weight: bold;
+}
+.april-fools__joke .april-fools__joke-description {
+    flex: 1 auto;
+    text-align: right;
+}
+.april-fools__joke .april-fools__joke-chance {
+    flex: 0 0 4ch;
+    text-align: right;
+}
+.april-fools__content .april-fools__reset-button {
+    display: block;
+    margin: 10px auto;
+}
+</style>

src/html/window.html

@@ -0,0 +1,15 @@
+<div class="april-fools__content">
+    <div class="april-fools__jokes"></div>
+
+    <button class="april-fools__reset-button">Вернуться к настройкам форума (страница будет перезагружена!)</button>
+</div>
+<template class="april-fools__template" id="april-fools__window-row">
+    <div class="april-fools__joke-row">
+        <input type="checkbox" class="april-fools__joke-input" name="april-fools__joke-${joke.id}" id="april-fools__joke-${joke.id}" style="display: none;" />
+        <label class="april-fools__joke" for="april-fools__joke-${joke.id}">
+            <p class="april-fools__joke-title">${joke.title}</p>
+            <p class="april-fools__joke-description">${joke.description}</p>
+            <p class="april-fools__joke-chance">${joke.settings.chance}%</p>
+        </label>
+    </div>
+</template>