Stirling-PDF/src/main/resources/templates/fragments/multi-toolAdvert.html

<div th:fragment="multi-toolAdvert" class="mx-auto">
  <div id="multi-toolAdvert" class="multi-toolAdvert">
    <div>
      <span th:utext="#{multiTool-advert.message(|/multi-tool|)}"></span>
      <button id="closeMultiToolAdvert" style="position: absolute;
  inset-inline-end: 12px;
  inset-block-start: 10px;
    border: none;
    background: transparent;
    color: white;
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;" aria-label="Close">&times;</button>
    </div>
  </div>
  <style>
    .multi-toolAdvert {
      margin-bottom: 10px;
      margin-inline-start: 50%;
      max-width: 52rem;
      z-index: 0;
      background-color: var(--md-sys-color-surface-5);
      border-radius: 2rem;
      padding-block: 10px;
      padding-inline: 20px 27px;
      font-size: 0.9rem;
      display: none;
      justify-content: center;
    }

    .multi-toolAdvert a {
      color: #007bff;
      font-weight: bold;
    }

    .multi-toolAdvert a:hover {
      text-decoration: underline;
    }
  </style>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const advert = document.getElementById('multi-toolAdvert');
      const closeBtn = document.getElementById('closeMultiToolAdvert');

      const cacheKey = `closeMultiToolAdvert_${window.location.pathname}`;
      const isRTL = document.documentElement.dir === 'rtl';

      if (localStorage.getItem(cacheKey) !== 'true') {
        advert.style.display = 'flex';
      }

      closeBtn.addEventListener('click', () => {
        advert.style.display = 'none';
        localStorage.setItem(cacheKey, 'true');
      });


      if (isRTL) {
        advert.style.transform = 'translateX(50%)'; // Flip direction for RTL
      } else {
        advert.style.transform = 'translateX(-50%)';
      }
    });
  </script>
</div>