Polish cookie consent modal and add i18n translations

locale/en/LC_MESSAGES/django.po

@@ -0,0 +1,48 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: mandelstudio\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2026-05-14 01:00+0200\n"
+"PO-Revision-Date: 2026-05-14 01:00+0200\n"
+"Last-Translator: \n"
+"Language-Team: English\n"
+"Language: en\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+
+msgid "Privacy & Cookies"
+msgstr "Privacy & Cookies"
+
+msgid ""
+"We use cookies to make sure our website works as well as possible. If you "
+"continue using this website, we assume you agree."
+msgstr ""
+"We use cookies to make sure our website works as well as possible. If you "
+"continue using this website, we assume you agree."
+
+msgid "Accept"
+msgstr "Accept"
+
+msgid "Settings"
+msgstr "Settings"
+
+msgid "You can update your cookie preferences at any time."
+msgstr "You can update your cookie preferences at any time."
+
+msgid "Back"
+msgstr "Back"
+
+msgid "Cookie settings"
+msgstr "Cookie settings"
+
+msgid ""
+"Choose which cookie categories you allow. Functional cookies are always "
+"enabled because they are required for the website to work."
+msgstr ""
+"Choose which cookie categories you allow. Functional cookies are always "
+"enabled because they are required for the website to work."
+
+msgid "Save preferences"
+msgstr "Save preferences"

locale/nl/LC_MESSAGES/django.po

@@ -0,0 +1,49 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: mandelstudio\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2026-05-14 01:00+0200\n"
+"PO-Revision-Date: 2026-05-14 01:00+0200\n"
+"Last-Translator: \n"
+"Language-Team: Dutch\n"
+"Language: nl\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+
+msgid "Privacy & Cookies"
+msgstr "Privacy & Cookies"
+
+msgid ""
+"We use cookies to make sure our website works as well as possible. If you "
+"continue using this website, we assume you agree."
+msgstr ""
+"We maken gebruik van cookies om er zeker van te zijn dat onze website zo "
+"goed mogelijk werkt. Als u deze website blijft gebruiken, gaan we ervan uit "
+"dat u akkoord gaat."
+
+msgid "Accept"
+msgstr "Accepteer"
+
+msgid "Settings"
+msgstr "Instellingen"
+
+msgid "You can update your cookie preferences at any time."
+msgstr "U kunt uw cookievoorkeuren op elk moment wijzigen."
+
+msgid "Back"
+msgstr "Terug"
+
+msgid "Cookie settings"
+msgstr "Cookie instellingen"
+
+msgid ""
+"Choose which cookie categories you allow. Functional cookies are always "
+"enabled because they are required for the website to work."
+msgstr ""
+"Kies welke cookiecategorieën u toestaat. Functionele cookies zijn altijd "
+"ingeschakeld omdat ze nodig zijn om de website te laten werken."
+
+msgid "Save preferences"
+msgstr "Voorkeuren opslaan"

mandelstudio/settings/base.py

@@ -150,6 +150,7 @@ LANGUAGES = [
     ("pt", "Português"),
     ("ru", "Русский"),
 ]
+LOCALE_PATHS = [str(BASE_PATH / "locale")]
 
 STATIC_ROOT = str(BASE_PATH / "static")
 MEDIA_ROOT = str(BASE_PATH / "media")

mandelstudio/static/mandelstudio/scss/layout_overrides.scss

@@ -101,6 +101,14 @@ header {
     -webkit-backdrop-filter: blur(16px);
   }
 
+  .cookie-consent-panel {
+    display: none;
+
+    &.is-active {
+      display: block;
+    }
+  }
+
   .cookie-banner-title {
     display: flex;
     align-items: center;
@@ -126,7 +134,9 @@ header {
   }
 
   #cookie_popup_acceptButton,
-  #cookie_popup_settingsButton {
+  #cookie_popup_settingsToggle,
+  #cookie_popup_acceptButton_settings,
+  #cookie_model_saveButton {
     flex: 1 1 0;
     height: 46px;
     border-radius: 10px;
@@ -149,7 +159,8 @@ header {
     }
   }
 
-  #cookie_popup_settingsButton {
+  #cookie_popup_settingsToggle,
+  #cookie_popup_acceptButton_settings {
     background: rgba(255, 255, 255, 0.16);
     border-color: rgba(255, 255, 255, 0.48);
     color: #fff;
@@ -160,6 +171,31 @@ header {
     }
   }
 
+  #cookie_model_saveButton {
+    background: #2f80ed;
+    border-color: #2f80ed;
+    color: #fff;
+
+    &:hover,
+    &:focus-visible {
+      background: #1f6fd8;
+      border-color: #1f6fd8;
+    }
+  }
+
+  .cookie-consent-back {
+    border: 0;
+    background: transparent;
+    color: rgba(255, 255, 255, 0.95);
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 0;
+    margin-bottom: 10px;
+    font-size: 14px;
+    font-weight: 600;
+  }
+
   .cookie-consent-hint {
     margin-top: 10px;
     font-size: 13px;

mandelstudio/templates/cookie_jar/cookie_banner.html

@@ -6,47 +6,108 @@
         {% if cookie_jar.needs_display or cookie_jar.site_settings.strict_cookies and not cookie_jar.cookie %}
         <div id="cookie_popup_body" class="cookie-consent-overlay" role="region" aria-label="{% trans 'Cookie settings' %}">
             <div class="cookie-consent-modal" role="dialog" aria-modal="true" aria-labelledby="cookie-consent-title">
-                <div class="cookie-banner-title" id="cookie-consent-title">
+                <div class="cookie-consent-panel is-active" id="cookie-consent-main-panel">
-                    <i class="fa fa-shield-halved" aria-hidden="true"></i>
+                    <div class="cookie-banner-title" id="cookie-consent-title">
-                    <span>{% trans 'Privacy & Cookies' %}</span>
+                        <i class="fa fa-shield-halved" aria-hidden="true"></i>
+                        <span>{% trans 'Privacy & Cookies' %}</span>
+                    </div>
+                    <div id="cookie_popup_content">
+                        <p>
+                            {% blocktrans %}
+                            We use cookies to make sure our website works as well as possible. If you continue using this website, we assume you agree.
+                            {% endblocktrans %}
+                        </p>
+                    </div>
+                    <div id="cookie_buttons" class="cookie-consent-actions">
+                        <button type="button" id="cookie_popup_acceptButton" data-cookie-key="{{ cookie_jar.cookie_key }}">{% trans 'Accept' %}</button>
+                        <button type="button" id="cookie_popup_settingsToggle">{% trans 'Settings' %}</button>
+                    </div>
+                    <div class="cookie-consent-hint">
+                        {% trans 'You can update your cookie preferences at any time.' %}
+                    </div>
                 </div>
-                <div id="cookie_popup_content">
+
-                    {% if cookie_settings.cookie_message %}{{ cookie_settings.cookie_message|richtext }}{% endif %}
+                <div class="cookie-consent-panel" id="cookie-consent-settings-panel">
-                </div>
+                    <button type="button" class="cookie-consent-back" id="cookie_popup_backButton">
-                <div id="cookie_buttons" class="cookie-consent-actions">
+                        <i class="fa fa-arrow-left" aria-hidden="true"></i>
-                    <button type="button" id="cookie_popup_acceptButton" data-cookie-key="{{ cookie_jar.cookie_key }}">{% trans 'Accept' %}</button>
+                        <span>{% trans 'Back' %}</span>
-                    <button type="button" data-toggle="modal" data-bs-toggle="modal" data-bs-target="#CookiesOptions" id="cookie_popup_settingsButton" data-backdrop="static" data-keyboard="false">{% trans 'Settings' %}</button>
+                    </button>
-                </div>
+                    <div class="cookie-banner-title">
-                <div class="cookie-consent-hint">
+                        <i class="fa fa-sliders" aria-hidden="true"></i>
-                    {% trans 'You can update your cookie preferences at any time.' %}
+                        <span>{% trans 'Cookie settings' %}</span>
+                    </div>
+                    <div id="cookie_popup_content_modal">
+                        {% if cookie_settings.popup_cookie_message %}
+                            {{ cookie_settings.popup_cookie_message|richtext }}
+                        {% else %}
+                            <p>
+                                {% blocktrans %}
+                                Choose which cookie categories you allow. Functional cookies are always enabled because they are required for the website to work.
+                                {% endblocktrans %}
+                            </p>
+                        {% endif %}
+                    </div>
+                    {% include "cookie_jar/partials/cookie_checkboxes.html" %}
+                    <div class="cookie-consent-actions cookie-consent-actions-settings">
+                        <button type="button" id="cookie_popup_acceptButton_settings">{% trans 'Accept' %}</button>
+                        <button type="button" id="cookie_model_saveButton" data-cookie-key="{{ cookie_jar.cookie_key }}">{% trans 'Save preferences' %}</button>
+                    </div>
                 </div>
             </div>
         </div>
         {% endif %}
-
-    <div class="modal fade" id="CookiesOptions" tabindex="-1" role="dialog" aria-labelledby="CookiesOptionsLabel" aria-hidden="true">
-        <div class="modal-dialog modal-lg" role="document">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <p class="h2 modal-title modal_cookie_header" id="CookiesOptionsLabel">{% trans 'Cookie settings' %}</p>
-                </div>
-
-                <div class="modal-body">
-
-                    <div id="cookie_popup_content_modal">
-                        {% if cookie_settings.popup_cookie_message %}{{ cookie_settings.popup_cookie_message|richtext }}{% endif %}
-                    </div>
-
-                    {% include "cookie_jar/partials/cookie_checkboxes.html" %}
-                </div>
-
-                <div class="modal-footer" data-cookie-key="{{ cookie_jar.cookie_key }}" id="cookie_model_saveButton">
-                    <button type="button"  data-bs-dismiss="modal" data-dismiss="modal" aria-label="Close" class="btn  btn-primary">
-                        {% trans 'Save and accept' %}
-                    </button>
-                </div>
-            </div>
-        </div>
-    </div>
     {% endif %}
 {% endwith %}
+
+<script>
+  (function () {
+    function byId(id) {
+      return document.getElementById(id);
+    }
+
+    function showSettings(event) {
+      if (event) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+      var main = byId("cookie-consent-main-panel");
+      var settings = byId("cookie-consent-settings-panel");
+      if (main && settings) {
+        main.classList.remove("is-active");
+        settings.classList.add("is-active");
+      }
+    }
+
+    function showMain(event) {
+      if (event) {
+        event.preventDefault();
+      }
+      var main = byId("cookie-consent-main-panel");
+      var settings = byId("cookie-consent-settings-panel");
+      if (main && settings) {
+        settings.classList.remove("is-active");
+        main.classList.add("is-active");
+      }
+    }
+
+    document.addEventListener("DOMContentLoaded", function () {
+      var settingsBtn = byId("cookie_popup_settingsToggle");
+      var backBtn = byId("cookie_popup_backButton");
+      var acceptSettingsBtn = byId("cookie_popup_acceptButton_settings");
+      var acceptBtn = byId("cookie_popup_acceptButton");
+
+      if (settingsBtn) {
+        settingsBtn.addEventListener("click", showSettings);
+      }
+      if (backBtn) {
+        backBtn.addEventListener("click", showMain);
+      }
+      if (acceptSettingsBtn && acceptBtn) {
+        acceptSettingsBtn.addEventListener("click", function (event) {
+          event.preventDefault();
+          acceptBtn.click();
+        });
+      }
+    });
+  })();
+</script>