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/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();
+});