From e9f94ebaf6b1d79f92ca203b046e5e76cd19900e Mon Sep 17 00:00:00 2001
From: Mandel Olaiya <mandeleolaiya15@icloud.com>
Date: Thu, 14 May 2026 01:05:50 +0200
Subject: [PATCH] Polish cookie consent modal and add i18n translations

---
 locale/en/LC_MESSAGES/django.mo               | Bin 0 -> 1283 bytes
 locale/en/LC_MESSAGES/django.po               |  48 +++++++
 locale/nl/LC_MESSAGES/django.mo               | Bin 0 -> 1346 bytes
 locale/nl/LC_MESSAGES/django.po               |  49 +++++++
 mandelstudio/settings/base.py                 |   1 +
 .../mandelstudio/scss/layout_overrides.scss   |  40 +++++-
 .../templates/cookie_jar/cookie_banner.html   | 135 +++++++++++++-----
 7 files changed, 234 insertions(+), 39 deletions(-)
 create mode 100644 locale/en/LC_MESSAGES/django.mo
 create mode 100644 locale/en/LC_MESSAGES/django.po
 create mode 100644 locale/nl/LC_MESSAGES/django.mo
 create mode 100644 locale/nl/LC_MESSAGES/django.po

diff --git a/locale/en/LC_MESSAGES/django.mo b/locale/en/LC_MESSAGES/django.mo
new file mode 100644
index 0000000000000000000000000000000000000000..31340e83a4c90af61eee753aaa5ec8adc90781c2
GIT binary patch
literal 1283
zcmeHF%We}f6dj<vMnXI`EMRfj@DNOxgonyhS<uo-MXiY10AlHQZYL&=J=mUxhz(-J
z4i@kO`~utl1Ao9bz>W<P#|fqU0UNG#bUeP-=bpLt*K-RW6GRGJ1T=68*aKpG1C9aT
zfd$|P@CNt^oCaPWN|LkS_uw<&Pv8^a&)`?!J@75?;^8E@fVBoky|+i^dhftd?*lmM
zokx?XcLf~v?t!D;LvYmF21mUwV93pKkemf1l9Rwu0O{m75dSMi>^Y13QgR)VWg$n&
z%FtTRG#M&6Bx&tPF-Z})vQDw5sclGTZ6_^SYm5xa8livJc@mD1ortL?He#T;qybCO
zKrjq>I?FqL(I|(^j&*UDCOq&epu*C`x=|}xnRoRZf-;p)dQR;MIi<@q&-i3p>@wAk
zci6F!jE();r%bWi+_;aLV=-d#4V>A={b?3E!LP@L){$%Ly@KNwt?$hKQd)!dP1J)6
zI90KDX7vUZIOCf!&j(UD=2r3yvysA3Q<oT6%((pt{^gZKAYrBy)EH-a&OT=uvh^~1
z!p>uy1st1_wGU0HY`Vp@bs^jIl`6C4rt(?e7L@iLWm~+f;(_b|x)s#PJ9o4EPS(Cn
zdArE->v<>7(+%N6)_1~qErNA8xgku|h>Ej5i*Z4#rqap}|7;hyxpZ@VbM?SayOpOa
zm<Ah2O>6WD{4(6EwNPe><WM+VRrhg!En7UOi!E_I*{YGY!~hFg9H@}?bmN51)~p-*
ff=oU8^xe)9&6nM)hAwrfeQhaC{y)oq_AGw^z1e`T

literal 0
HcmV?d00001

diff --git a/locale/en/LC_MESSAGES/django.po b/locale/en/LC_MESSAGES/django.po
new file mode 100644
index 0000000..9bbcc9d
--- /dev/null
+++ b/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"
diff --git a/locale/nl/LC_MESSAGES/django.mo b/locale/nl/LC_MESSAGES/django.mo
new file mode 100644
index 0000000000000000000000000000000000000000..7ac57fbfe3a8f5c25a31e62ce678c6c041299dab
GIT binary patch
literal 1346
zcmZuw&yN&E6fPA+ClCZrCLW#_Bat3^2Q-`6>|u9dlZ|ZL-~i!R)BUEWrmL&k`Z2>S
z7vsUi8yEcpJehd(%8mbnzX5JsNc^gY*_{KGy#BhYUcK+DS6{!pe&J7n(L;QR(1<ID
z=ZG|3AwEXDMqEI=LHvezi@1vT^#dWU0iOXs1O5&C1o$8DDeyV)7I6DRA-=%727Zd~
z-#-%KBJdgT58z+G&w&JzRPQ$MI`9y98Tc6Z4{!n;0Iy;*%5_{Q*$tHFYNxtL6PFO_
zTxp~;bYrh5xD8@o7PUB-TI-n>Q&mi<u(noAg$!I-r`XfdMv_|FMV}6%DT1;_>UVjb
zq+_fu<kAxxIo4d#m<t(EFid&btvmiDDu<Pcb!nCsJoYLe!_vaKx-Sk^te!(qrt;#%
zsktnc^fj$ky!ctpnOesac5Dj9#5(s8Q({{Q_o-$hYbGC|%tm)cmYAT|V?yhMt@U0(
zai5MR-6;!eKp#^*sDM(Hk~^t4@q#@*HoR&`<(T{8F?v%-L$NK<u(aaV9o*1LGLSS&
z3aY`L6K7{!gzTuy9<uXj=Maib$=ZilD%-oyt#u(g_LVBL{aE>IWQWu{`6;{4bCot^
zcfdBJK|c5)%fHXIZd1NB%=2&aL7w;SNguM2lg4Wqti#TG(o|7aoQ+sEL%I_~F+H0c
zlF_~6qvN~hYPR}$?*P4EgF?#|Oo5+-?^-RD*`Z=89WHA3!RRpCKF>>pxSZ^+DQt=M
z4QYF<LhnRJCv|pcUE@L3cAtKCutTfY-ERziwM$z!c6wrEN@gcU>|!N;O!mWV;Wk&d
zd*;d)|Dxx(YW6|OaBfW2>r_vtYGz=~pk^gO4|@o&S(juRTo#=&83?UbdA6Z)!<S6x
z9UG9ln$4L%mGJ@QN!84IJo?bWVhrCIvMstVjX2ue0jDNw8mf5gqN-^Q>#ThX1?-@z
z#xu>sPTdKTR%@Vk{nMOUsw{q{##XG=tnNgj2YcG1CnayBj<G%oYdSVJse&kM09E3M
rDp0DAAH1$1zD(<(FCI`G4W<|G)Xg^!Mz|1=H*g0n)a+ED8GZ3Tf0&rr

literal 0
HcmV?d00001

diff --git a/locale/nl/LC_MESSAGES/django.po b/locale/nl/LC_MESSAGES/django.po
new file mode 100644
index 0000000..83a626e
--- /dev/null
+++ b/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"
diff --git a/mandelstudio/settings/base.py b/mandelstudio/settings/base.py
index b17177a..affc2b0 100644
--- a/mandelstudio/settings/base.py
+++ b/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")
diff --git a/mandelstudio/static/mandelstudio/scss/layout_overrides.scss b/mandelstudio/static/mandelstudio/scss/layout_overrides.scss
index e454a40..fccf083 100644
--- a/mandelstudio/static/mandelstudio/scss/layout_overrides.scss
+++ b/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;
diff --git a/mandelstudio/templates/cookie_jar/cookie_banner.html b/mandelstudio/templates/cookie_jar/cookie_banner.html
index e4944c2..8df27ab 100644
--- a/mandelstudio/templates/cookie_jar/cookie_banner.html
+++ b/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">
-                    <i class="fa fa-shield-halved" aria-hidden="true"></i>
-                    <span>{% trans 'Privacy & Cookies' %}</span>
+                <div class="cookie-consent-panel is-active" id="cookie-consent-main-panel">
+                    <div class="cookie-banner-title" id="cookie-consent-title">
+                        <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>
-                <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" data-toggle="modal" data-bs-toggle="modal" data-bs-target="#CookiesOptions" id="cookie_popup_settingsButton" data-backdrop="static" data-keyboard="false">{% trans 'Settings' %}</button>
-                </div>
-                <div class="cookie-consent-hint">
-                    {% trans 'You can update your cookie preferences at any time.' %}
+
+                <div class="cookie-consent-panel" id="cookie-consent-settings-panel">
+                    <button type="button" class="cookie-consent-back" id="cookie_popup_backButton">
+                        <i class="fa fa-arrow-left" aria-hidden="true"></i>
+                        <span>{% trans 'Back' %}</span>
+                    </button>
+                    <div class="cookie-banner-title">
+                        <i class="fa fa-sliders" aria-hidden="true"></i>
+                        <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>