diff --git a/mafiasi/base/static/css/main.css b/mafiasi/base/static/css/main.css index 0ca2504..1983f7a 100644 --- a/mafiasi/base/static/css/main.css +++ b/mafiasi/base/static/css/main.css @@ -81,6 +81,26 @@ body { border-radius: 10px; } +/* ------- Stabile Message ------*/ +#stabile-message { + position: fixed; + bottom: 1vw; + left: auto; + right: 1vw; + margin: 0; + cursor: pointer; + user-select: none; + + border: none; + padding: 10px 16px; + background: #23527c; + color: white; + border-radius: 4px; + letter-spacing: 0ch; + font-size: large; + font-style: normal; +} + /* ------- MISC -------*/ .clickable { cursor: pointer; diff --git a/mafiasi/base/static/js/stabile_message.mjs b/mafiasi/base/static/js/stabile_message.mjs new file mode 100644 index 0000000..f40a641 --- /dev/null +++ b/mafiasi/base/static/js/stabile_message.mjs @@ -0,0 +1,10 @@ +document.addEventListener("DOMContentLoaded", () => { + const dialog = document.getElementById("stabile-message"); + + // close dialog when clicked + const close = () => dialog.style.display = "none"; + dialog.addEventListener("click", close); + + // alternatively, also close dialog after 20 seconds + setTimeout(close, 20 * 1000); +}) diff --git a/mafiasi/base/templates/base.html b/mafiasi/base/templates/base.html index 0e68bf4..6f65561 100644 --- a/mafiasi/base/templates/base.html +++ b/mafiasi/base/templates/base.html @@ -2,6 +2,7 @@ {% load group_tags %} {% load settings_value %} {% load static %} +{% load stabile_message %} {% value_from_settings BANNER_IMG as banner_img %} {% value_from_settings FAVICON_PATH as favicon_path %} @@ -129,11 +130,16 @@