citywebshop_cms/application/views/main_footer.php

<section id="footer" class="section footer">
    <div class="container">
      <div class="footer-wrap">
        <p class="heading-jumbo white">Get in Touch</p>
        <div class="footer-infromation-wrapper">
          <h4 class="footer-heading">Contact information</h4>
          <div class="footer-links-and-icon"><img src="/images/Vector.png" loading="lazy" alt="" class="image">
            <a href="tel:<?=admin_utils::getSystemParam('PHONE')?>" class="footer-links"><?=admin_utils::getSystemParam('PHONE')?></a>
          </div>
          <div class="footer-links-and-icon"><img src="/images/Mail.png" loading="lazy" alt="" class="image">
            <a href="mailto:<?=admin_utils::getSystemParam('EMAIL')?>" class="footer-links"><?=admin_utils::getSystemParam('EMAIL')?></a>
          </div>
          <div class="footer-links-and-icon"><img src="/images/Map_Pin.png" loading="lazy" alt="" class="image">
            <a href="https://www.google.com/maps/place//data=!4m2!3m1!1s0x4741ddcf68df7d8b:0x84c42aec97a2c21a?sa=X&amp;ved=1t:8290&amp;ictx=111" target="_blank" class="footer-links">Budapest, Jane Haining rkp., 1051</a>
          </div>
        </div>
        <div class="footer-infromation-wrapper">
          <h4 class="footer-heading">Office Hours</h4>
          <div class="footer-links-and-icon">
            <div class="footer-links-copy"><?=admin_utils::getSystemParam('OPEN_WEEKDAYS')?></div>
          </div>
          <div class="footer-links-and-icon">
            <div class="footer-links-copy"><?=admin_utils::getSystemParam('OPEN_SATURDAY')?></div>
          </div>
          <div class="footer-links-and-icon">
            <div class="footer-links-copy"><?=admin_utils::getSystemParam('OPEN_SUNDAY')?></div>
          </div>
        </div>
        <div class="footer-infromation-wrapper">
          <h4 class="footer-heading">Follow us</h4>
          <div class="footer-links-and-icon">
          <a href="<?=admin_utils::getSystemParam('FACEBOOK')?>" target="_blank" class="w-inline-block"><img src="/images/fb684ca660ce4f30cb6b726204-2025-06-14-002918-1.PNG" loading="lazy" alt="" class="image-2"></a>
            <a href="<?=admin_utils::getSystemParam('INSTAGRAM')?>" target="_blank" class="w-inline-block"><img src="/images/instafb684ca660ce4f30cb6b726204-2025-06-14-002918-1.PNG" loading="lazy" alt="" class="image-2"></a>
            <a href="<?=admin_utils::getSystemParam('TIKTOK')?>" target="_blank" class="w-inline-block"><img src="/images/signal-2025-07-31-212542.png" loading="lazy" alt="" class="image-2"></a>
          </div>
        </div>
        <div class="footer-infromation-wrapper">
          <a href="/terms-and-conditions" class="footer-subpage">Terms and conditions</a>
          <a href="/privacy-policy" class="footer-subpage">Privacy Policy</a>
          <a href="/refund-policy" class="footer-subpage">Refund Policy</a>
          <a href="/data-management-information" class="footer-subpage">Data management information</a>
        </div>
      </div>
    </div>
  </section>
  <script>
    window.alert = function() {};
  </script>
  <script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=684c8b6bb3bcc579a89cb451" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/ui/1.14.0/jquery-ui.min.js" integrity="sha256-Fb0zP4jE3JHqu+IBB9YktLcSjI1Zc6J2b6gTjB0LpoM=" crossorigin="anonymous"></script>
  <script src="/js/webflow.js" type="text/javascript"></script><!-- 🟢 SHOW/HIDE PASSWORD CODE 🟢 -->
  <script src="/js/events.js" type="text/javascript"></script>
  <script>
//attach a click handler to the button to make it transform when clicked, via our transform() function below. Add right before your closing body tag.
document.querySelector("[data-transform]").addEventListener("click", transform);
//flag of whether or not it is a password field or text field
var isPassword = true;
//this function will toggle the input between being a password or a text input
function transform() {
    //copy the element itself, its html source, and value text to a variable
    var myInput = document.querySelector("[data-show]");
    var oldHtml = myInput.outerHTML;
    var text = myInput.value;
    if (isPassword) {
        //replace "password" with "text" in the html if it is a password field
        var newHtml = oldHtml.replace(/password/g, "text");
    } else {
        //replace "text" with "password" if it is a text field
        newHtml = oldHtml.replace(/text/g, "password");
    }
    //update the html
    myInput.outerHTML = newHtml;
    //restore the text value
    myInput = document.querySelector("[data-show]");
    myInput.value = text;
    //toggle the isPassword flag
    isPassword = !isPassword;
}
</script>
  <!-- 🟢 COLOR PICKER CODE 🟢 -->
  <script src="https://cdn.jsdelivr.net/npm/@jaames/iro/dist/iro.min.js"></script>
  <script>
    // Create a new color picker instance
    // https://iro.js.org/guide.html#getting-started
    var colorPicker = new iro.ColorPicker(".ms-colorpicker", {
        // color picker options
        // Option guide: https://iro.js.org/guide.html#color-picker-options
        width: 180,
        color: "rgb(255, 0, 0)",
        borderWidth: 5,
        borderColor: "#f5f5f5",
    });
    var values = document.getElementById("values");
    var hexInput = document.getElementById("hexInput");
    var swatch = document.getElementById("colorSwatch");
    // https://iro.js.org/guide.html#color-picker-events
    colorPicker.on(["color:init", "color:change"], function(color){
        // Show the current color in different formats
        // Using the selected color: https://iro.js.org/guide.html#selected-color-api
        values.innerHTML = [
            "hex: " + color.hexString,
            "rgb: " + color.rgbString,
            "hsl: " + color.hslString,
        ].join("<br>");
        hexInput.value = color.hexString;
        swatch.style.backgroundColor = color.hexString;
    });
    hexInput.addEventListener('change', function() {
        colorPicker.color.hexString = this.value;
        swatch.style.backgroundColor = this.value;
    });
</script>
  <!-- 🟢 CUSTOM SELECT CODE 🟢 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/js/jquery.nice-select.min.js"></script>
  <script>
	$(document).ready(function() {
  	$('.nice-select').niceSelect();
	});
</script>
  <!-- 🟢 COPY BUTTON CODE 🟢 -->
  <script>
const copyBtns = document.querySelectorAll('[data-copy-button]');
copyBtns.forEach(copyBtn => {
  const inputId = copyBtn.getAttribute('data-copy-button');
  const input = document.querySelector(`[data-input="${inputId}"]`);
  copyBtn.addEventListener('click', async () => {
    try {
      await navigator.clipboard.writeText(input.value);
      console.log('Text copied to clipboard');
      // Change button text to "Copied" and add class "success" for 3 seconds
      const originalBtnText = copyBtn.innerHTML;
      copyBtn.innerHTML = 'Copied';
      copyBtn.classList.add('success');
      setTimeout(() => {
        copyBtn.innerHTML = originalBtnText;
        copyBtn.classList.remove('success');
      }, 3000);
    } catch (err) {
      console.error('Failed to copy text: ', err);
    }
  });
});
</script>
  <!-- 🟢 SEARCH MULTISELECT CODE 🟢 -->
  <script>
$('[data-search="multi-select"]').on("keyup", function() {
  var v = $(this).val();
  $(".results").removeClass("results");
  $(".noresults").removeClass("noresults");
  $(".search-result").each(function() {
    if (v != "" && $(this).text().search(new RegExp(v, 'gi')) != -1) {
      $(this).addClass("results");
    } else if (v != "" && $(this).text().search(v) != 1) {
      $(this).addClass("noresults");
    }
  });
});
</script>
  <!-- 🟢 DRAG N DROP 🟢 -->
  <script>
document.addEventListener('DOMContentLoaded', (event) => {
  var dragSrcEl = null;
  function handleDragStart(e) {
    this.style.opacity = '0.4';
    dragSrcEl = this;
    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text/html', this.innerHTML);
  }
  function handleDragOver(e) {
    if (e.preventDefault) {
      e.preventDefault();
    }
    e.dataTransfer.dropEffect = 'move';
    return false;
  }
  function handleDragEnter(e) {
    this.classList.add('over');
  }
  function handleDragLeave(e) {
    this.classList.remove('over');
  }
  function handleDrop(e) {
    if (e.stopPropagation) {
      e.stopPropagation(); // stops the browser from redirecting.
    }
    if (dragSrcEl != this) {
      dragSrcEl.innerHTML = this.innerHTML;
      this.innerHTML = e.dataTransfer.getData('text/html');
    }
    let orderedBoxes = document.querySelectorAll('.ms-box div[data-value="true"]');
    let orderList = Array.from(orderedBoxes).map(function(box) {
      return box.innerHTML;
    }).join(',');
    let input = document.querySelector('input[data-input="drag-order"]');
    input.value = orderList;
    return false;
  }
  function handleDragEnd(e) {
    this.style.opacity = '1';
    items.forEach(function (item) {
      item.classList.remove('over');
    });
  }
  let items = document.querySelectorAll('.ms-boxes .ms-box');
  items.forEach(function(item) {
    item.addEventListener('dragstart', handleDragStart, false);
    item.addEventListener('dragenter', handleDragEnter, false);
    item.addEventListener('dragover', handleDragOver, false);
    item.addEventListener('dragleave', handleDragLeave, false);
    item.addEventListener('drop', handleDrop, false);
    item.addEventListener('dragend', handleDragEnd, false);
  });
  // Set initial value of the input field
  let orderedBoxes = document.querySelectorAll('.ms-box div[data-value="true"]');
  let orderList = Array.from(orderedBoxes).map(function(box) {
    return box.innerHTML;
  }).join(',');
  let input = document.querySelector('input[data-input="drag-order"]');
  input.value = orderList;
});
</script>
  <!-- 🟢 RANGE SLIDERS 🟢 -->
  <script>
function rangeSlider() {
  var sliders = document.querySelectorAll('.ms-range-slider');
  sliders.forEach(function(slider) {
    var range = slider.querySelector('.ms-range-slider-bar'),
        value = slider.querySelector('.ms-range-slider-value');
    value.innerHTML = range.value;
    range.addEventListener('input', function() {
      value.innerHTML = this.value;
    });
  });
}
rangeSlider();
</script>
</body>
</html>