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/css/custom.scss

@@ -71,7 +71,7 @@ section#slider {
   border-bottom: 1px solid #c4c4c4;
 }
 
-.block-categories .category-sub-menu li[data-depth='0'] > a {
+.block-categories .category-sub-menu li[data-depth='0']>a {
   padding-top: 13px;
   padding-bottom: 13px;
   position: relative;
@@ -623,10 +623,7 @@ section.sposoby-dostawy .carrier-price {
   }
 
   #onepagecheckoutps #customer_container .row,
-	#onepagecheckoutps
+  #onepagecheckoutps #customer_container .row .form-group.col-xs-6.col-6.required {
-		#customer_container
-		.row
-		.form-group.col-xs-6.col-6.required {
     max-width: 110%;
     width: 100%;
     padding-right: 0px;
@@ -636,17 +633,11 @@ section.sposoby-dostawy .carrier-price {
     display: none !important;
   }
 
-	#onepagecheckoutps
+  #onepagecheckoutps #onepagecheckoutps_step_two_container .delivery_option_delay {
-		#onepagecheckoutps_step_two_container
-		.delivery_option_delay {
     display: none;
   }
 
-	div#onepagecheckoutps
+  div#onepagecheckoutps div#onepagecheckoutps_step_two #shipping_container .delivery_option_logo img {
-		div#onepagecheckoutps_step_two
-		#shipping_container
-		.delivery_option_logo
-		img {
     max-width: 50px;
   }
 }
@@ -737,7 +728,7 @@ body {
 
 article.product-miniature {
   .product-description {
-		> a {
+    >a {
       width: 100%;
     }
   }
@@ -831,8 +822,8 @@ article.product-miniature {
 
 #header {
   .header-top {
-		> .container {
+    >.container {
-			> .row {
+      >.row {
         display: flex;
         align-items: center;
         flex-wrap: wrap;
@@ -870,8 +861,7 @@ footer#footer {
           display: block !important;
           padding: 0.625rem;
 
-					.block-contact-title {
+          .block-contact-title {}
-					}
         }
 
         .hidden-md-up {
@@ -922,6 +912,7 @@ header#header {
     @media (max-width: 767px) {
       padding-left: 10px;
     }
+
     .newsletter-form-fields {
       display: flex;
       flex-direction: row;
@@ -937,6 +928,7 @@ header#header {
           opacity: 1;
           left: 10px;
         }
+
         &.slick-next {
           opacity: 1;
           right: 10px;
@@ -963,23 +955,104 @@ header#header {
         font-size: 20px;
       }
     }
+
     &.slick-prev {
       @media (min-width: 767px) {
         opacity: 0;
         left: -10px;
       }
+
       @media (max-width: 767px) {
         left: 10px;
       }
     }
+
     &.slick-next {
       @media (min-width: 767px) {
         opacity: 0;
         right: -10px;
       }
+
       @media (max-width: 767px) {
         right: 10px;
       }
     }
   }
 }
+
+
+
+$cYellow: #f8e110;
+
+// high-contrast
+body.high-contrast {
+
+  header#header {
+    background: #000;
+    height: auto;
+    padding-bottom: 0;
+
+    .header-top {
+      padding-top: 10px;
+
+      .top-menu {
+        a {
+          color: #FFF;
+          text-decoration: underline;
+        }
+      }
+
+      #search_widget {
+        input[type="text"] {
+          background: $cYellow;
+          border: 0;
+          color: #000;
+        }
+
+        i {
+          color: #000;
+        }
+      }
+    }
+
+    .header-nav {
+      background: #000;
+      color: #FFF;
+
+      #_desktop_cart {
+        .blockcart {
+          background: $cYellow;
+          color: #000;
+
+          i,
+          a,
+          span {
+            color: #000;
+          }
+        }
+      }
+
+      .material-icons {
+        color: #fff;
+      }
+
+      a {
+        color: #fff !important;
+        font-weight: 600;
+        text-decoration: underline;
+      }
+    }
+
+    .header-banner {
+      border-bottom: 1px solid #FFF;
+
+      .html-block-content {
+        background-color: #000;
+      }
+    }
+  }
+
+  section#wrapper {
+    background: #000;
+  }
+}

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

@@ -102,3 +102,5 @@ height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
 height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
 <!-- End Google Tag Manager (noscript) -->
 {/literal}
+<script type="text/javascript" src="/themes/InterBlue/assets/js/accessibility.js"></script>
+<link rel="stylesheet" href="/themes/InterBlue/assets/css/accessibility.css">