Add accessibility features including button and panel

- Introduced an accessibility button that toggles a panel with options.
- Implemented high contrast mode toggle functionality.
- Added CSS styles for accessibility button and panel.
- Created JavaScript to manage accessibility features and local storage for user preferences.
- Included necessary CSS and JS files in the theme's head template.

themes/InterBlue/assets/css/accessibility.css

@@ -0,0 +1 @@
+#accessibility-button{position:fixed;bottom:20px;right:20px;background:#6366f1;color:#fff;border-radius:50%;width:50px;height:50px;font-size:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:9999;box-shadow:0 0 10px rgba(0,0,0,.2)}#accessibility-panel{position:fixed;top:0;right:0;width:280px;height:100%;background:#f9f9f9;box-shadow:-2px 0 10px rgba(0,0,0,.1);transform:translateX(100%);transition:transform .3s ease;z-index:9998;display:flex;flex-direction:column}#accessibility-panel #close-accessibility-panel{border:0;height:30px;width:30px;border-radius:6px}#accessibility-panel.open{transform:translateX(0)}.panel-header{display:flex;justify-content:space-between;align-items:center;background:#6366f1;color:#fff;padding:1rem;font-weight:bold}.panel-body{padding:1rem;display:flex;flex-direction:column;gap:10px}#toggle-contrast{padding:10px;font-size:16px;cursor:pointer}/*# sourceMappingURL=accessibility.css.map */

themes/InterBlue/assets/css/accessibility.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["accessibility.scss"],"names":[],"mappings":"AAAA,sBACE,cAAA,CACA,WAAA,CACA,UAAA,CACA,kBAAA,CACA,UAAA,CACA,iBAAA,CACA,UAAA,CACA,WAAA,CACA,cAAA,CACA,YAAA,CACA,kBAAA,CACA,sBAAA,CACA,cAAA,CACA,YAAA,CACA,kCAAA,CAGF,qBACE,cAAA,CACA,KAAA,CACA,OAAA,CACA,WAAA,CACA,WAAA,CACA,kBAAA,CACA,qCAAA,CACA,0BAAA,CACA,6BAAA,CACA,YAAA,CACA,YAAA,CACA,qBAAA,CAEA,gDACE,QAAA,CACA,WAAA,CACA,UAAA,CACA,iBAAA,CAIJ,0BACE,uBAAA,CAGF,cACE,YAAA,CACA,6BAAA,CACA,kBAAA,CACA,kBAAA,CACA,UAAA,CACA,YAAA,CACA,gBAAA,CAGF,YACE,YAAA,CACA,YAAA,CACA,qBAAA,CACA,QAAA,CAGF,iBACE,YAAA,CACA,cAAA,CACA,cAAA","file":"accessibility.css","sourcesContent":["#accessibility-button {\r\n  position: fixed;\r\n  bottom: 20px;\r\n  right: 20px;\r\n  background: #6366f1;\r\n  color: white;\r\n  border-radius: 50%;\r\n  width: 50px;\r\n  height: 50px;\r\n  font-size: 24px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  cursor: pointer;\r\n  z-index: 9999;\r\n  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);\r\n}\r\n\r\n#accessibility-panel {\r\n  position: fixed;\r\n  top: 0;\r\n  right: 0;\r\n  width: 280px;\r\n  height: 100%;\r\n  background: #f9f9f9;\r\n  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);\r\n  transform: translateX(100%);\r\n  transition: transform 0.3s ease;\r\n  z-index: 9998;\r\n  display: flex;\r\n  flex-direction: column;\r\n\r\n  #close-accessibility-panel {\r\n    border: 0;\r\n    height: 30px;\r\n    width: 30px;\r\n    border-radius: 6px;\r\n  }\r\n}\r\n\r\n#accessibility-panel.open {\r\n  transform: translateX(0);\r\n}\r\n\r\n.panel-header {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  background: #6366f1;\r\n  color: white;\r\n  padding: 1rem;\r\n  font-weight: bold;\r\n}\r\n\r\n.panel-body {\r\n  padding: 1rem;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 10px;\r\n}\r\n\r\n#toggle-contrast {\r\n  padding: 10px;\r\n  font-size: 16px;\r\n  cursor: pointer;\r\n}"]}

themes/InterBlue/assets/css/accessibility.scss

@@ -0,0 +1,66 @@
+#accessibility-button {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  background: #6366f1;
+  color: white;
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  font-size: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  z-index: 9999;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+}
+
+#accessibility-panel {
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 280px;
+  height: 100%;
+  background: #f9f9f9;
+  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
+  transform: translateX(100%);
+  transition: transform 0.3s ease;
+  z-index: 9998;
+  display: flex;
+  flex-direction: column;
+
+  #close-accessibility-panel {
+    border: 0;
+    height: 30px;
+    width: 30px;
+    border-radius: 6px;
+  }
+}
+
+#accessibility-panel.open {
+  transform: translateX(0);
+}
+
+.panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #6366f1;
+  color: white;
+  padding: 1rem;
+  font-weight: bold;
+}
+
+.panel-body {
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+#toggle-contrast {
+  padding: 10px;
+  font-size: 16px;
+  cursor: pointer;
+}

themes/InterBlue/assets/js/accessibility.js

@@ -0,0 +1,64 @@
+document.addEventListener('DOMContentLoaded', function () {
+  // Tworzenie przycisku
+  const accessBtn = document.createElement('div');
+  accessBtn.id = 'accessibility-button';
+  accessBtn.setAttribute('aria-label', 'Opcje dostępności');
+  accessBtn.innerHTML = `
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="24" height="24">
+      <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+      <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
+      <g id="SVGRepo_iconCarrier">
+        <circle cx="12" cy="12" r="10" stroke="#ffffff" stroke-width="1.5"></circle>
+        <path d="M14 7C14 8.10457 13.1046 9 12 9C10.8954 9 10 8.10457 10 7C10 5.89543 10.8954 5 12 5C13.1046 5 14 5.89543 14 7Z" stroke="#ffffff" stroke-width="1.5"></path>
+        <path d="M18 10C18 10 14.4627 11.5 12 11.5C9.53727 11.5 6 10 6 10" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round"></path>
+        <path d="M12 12V13.4522M12 13.4522C12 14.0275 12.1654 14.5906 12.4765 15.0745L15 19M12 13.4522C12 14.0275 11.8346 14.5906 11.5235 15.0745L9 19" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round"></path>
+      </g>
+    </svg>
+  `;
+  document.body.appendChild(accessBtn);
+
+
+  // Tworzenie panelu
+  const accessPanel = document.createElement('div');
+  accessPanel.id = 'accessibility-panel';
+  accessPanel.innerHTML = `
+    <div class="panel-header">
+      <span>Opcje dostępności</span>
+      <button id="close-accessibility-panel">×</button>
+    </div>
+    <div class="panel-body">
+      <button id="toggle-contrast">Wysoki kontrast: OFF</button>
+    </div>
+  `;
+  document.body.appendChild(accessPanel);
+
+  // Logika
+  const panel = document.getElementById('accessibility-panel');
+  const contrastBtn = document.getElementById('toggle-contrast');
+
+  accessBtn.addEventListener('click', () => {
+    panel.classList.toggle('open');
+  });
+
+  document.getElementById('close-accessibility-panel').addEventListener('click', () => {
+    panel.classList.remove('open');
+  });
+
+  function updateContrastButton() {
+    const isOn = document.body.classList.contains('high-contrast');
+    contrastBtn.textContent = isOn ? 'Wyłącz wysoki kontrast' : 'Włącz wysoki kontrast';
+  }
+
+  contrastBtn.addEventListener('click', () => {
+    document.body.classList.toggle('high-contrast');
+    const isHigh = document.body.classList.contains('high-contrast');
+    localStorage.setItem('highContrast', isHigh ? '1' : '0');
+    updateContrastButton();
+  });
+
+  if (localStorage.getItem('highContrast') === '1') {
+    document.body.classList.add('high-contrast');
+  }
+
+  updateContrastButton();
+});

themes/InterBlue/templates/_partials/head.tpl

@@ -101,4 +101,6 @@ height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
 <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KF4K52D"
 height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
 <!-- End Google Tag Manager (noscript) -->
-{/literal}
+{/literal}
+<script type="text/javascript" src="/themes/InterBlue/assets/js/accessibility.js"></script>
+<link rel="stylesheet" href="/themes/InterBlue/assets/css/accessibility.css">