bunkerized-nginx/src/ui/templates/news.html

<!-- float button-->
<button
  type="button"
  data-sidebar-info-open
  class="scale-90 sm:scale-100 dark:brightness-95 dark:hover:brightness-105 hover:brightness-75 fixed p-3 text-xl bg-white shadow-sm cursor-pointer top-16 sm:top-3 right-5 sm:right-40 xl:right-6 z-990 rounded-circle text-slate-700"
>
  <svg
    class="fill-sky-500 h-6 w-6"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 512 512"
  >
    <path
      d="M96 96c0-35.3 28.7-64 64-64H448c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H80c-44.2 0-80-35.8-80-80V128c0-17.7 14.3-32 32-32s32 14.3 32 32V400c0 8.8 7.2 16 16 16s16-7.2 16-16V96zm64 24v80c0 13.3 10.7 24 24 24H424c13.3 0 24-10.7 24-24V120c0-13.3-10.7-24-24-24H184c-13.3 0-24 10.7-24 24zm0 184c0 8.8 7.2 16 16 16h96c8.8 0 16-7.2 16-16s-7.2-16-16-16H176c-8.8 0-16 7.2-16 16zm160 0c0 8.8 7.2 16 16 16h96c8.8 0 16-7.2 16-16s-7.2-16-16-16H336c-8.8 0-16 7.2-16 16zM160 400c0 8.8 7.2 16 16 16h96c8.8 0 16-7.2 16-16s-7.2-16-16-16H176c-8.8 0-16 7.2-16 16zm160 0c0 8.8 7.2 16 16 16h96c8.8 0 16-7.2 16-16s-7.2-16-16-16H336c-8.8 0-16 7.2-16 16z"
    />
  </svg>
</button>
<!-- end float button-->

<!-- right sidebar -->
<aside
  data-sidebar-info
  class="translate-x-90 -right-0 transition z-sticky dark:bg-slate-850 dark:brightness-110 shadow-3xl max-w-full w-90 ease fixed top-0 left-auto flex h-full min-w-0 flex-col break-words rounded-none border-0 bg-white bg-clip-border px-0.5"
>
  <!-- close btn-->
  <svg
    data-sidebar-info-close
    class="cursor-pointer fill-gray-600 dark:fill-gray-300 dark:opacity-80 absolute h-8 w-8 top-4 right-4"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 320 512"
  >
    <path
      d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z"
    />
  </svg>
  <!-- close btn-->

  <!-- header -->
  <div class="px-6 pt-4 pb-0 mb-0 border-b-0 rounded-t-2xl">
    <div class="float-left">
      <h5 class="mt-4 mb-0 dark:text-white font-bold">NEWS</h5>
      <p class="dark:text-white dark:opacity-80 mb-0">Stay up to date.</p>
    </div>
    <!-- close button -->
    <div class="float-right mt-6">
      <button
        data-sidebar-info-close
        class="inline-block p-0 mb-4 text-sm font-bold leading-normal text-center uppercase align-middle transition-all ease-in bg-transparent border-0 rounded-lg shadow-none cursor-pointer hover:-translate-y-px tracking-tight-rem bg-150 bg-x-25 active:opacity-85 dark:text-white text-slate-700"
      >
        <i class="fa fa-close"></i>
      </button>
    </div>
    <!-- end close button -->
  </div>
  <hr
    class="h-px mx-0 my-1 bg-transparent bg-gradient-to-r from-transparent via-black/40 to-transparent dark:bg-gradient-to-r dark:from-transparent dark:via-white dark:to-transparent"
  />
  <!-- end header -->
  <!-- news-->
  <div data-news-container class="flex-auto overflow-auto">
    <p
      class="text-center col-span-12 relative w-full p-4 text-blue-500 rounded-lg"
    >
      Impossible to connect to blog news.
    </p>
  </div>
  <!-- end news-->

  <!-- newsletter -->
  <hr
    class="h-px mx-0 my-1 bg-transparent bg-gradient-to-r from-transparent via-black/40 to-transparent dark:bg-gradient-to-r dark:from-transparent dark:via-white dark:to-transparent"
  />

  <form
    action="https://bunkerity.us1.list-manage.com/subscribe/post?u=ec5b1577cf427972b9bd491a6&amp;id=37076d9d67"
    method="POST"
    class="px-6 pt-4 pb-0 mb-0 border-b-0 min-h-52"
    id="subscribe-newsletter"
  >
    <h5 class="mb-4 dark:text-white font-bold">JOIN THE NEWSLETTER</h5>
    <div class="flex">
      <input
        type="text"
        id="newsletter-email"
        name="EMAIL"
        class="duration-300 ease-in-out dark:opacity-90 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 disabled:opacity-75 focus:valid:border-green-500 focus:invalid:border-red-500 outline-none focus:border-primary text-sm leading-5.6 ease block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-1.5 py-1 md:px-3 md:py-2 font-normal text-gray-700 transition-all placeholder:text-gray-500 disabled:bg-gray-400 dark:disabled:bg-gray-800 dark:disabled:border-gray-800 dark:disabled:text-gray-300 disabled:text-gray-700"
        placeholder="John.doe@example.com"
        pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-z]{2,}$"
        required
      />
    </div>
    <div class="block mt-2 mb-4">
      <div class="relative">
        <div
          data-checkbox-handler="newsletter-check"
          class="relative mb-7 md:mb-0"
        >
          <input
            id="newsletter-check"
            class="mr-2 relative cursor-pointer dark:border-slate-600 dark:bg-slate-700 z-10 checked:z-0 w-5 h-5 ease text-base rounded-1.4 checked:bg-primary checked:border-primary dark:checked:bg-primary dark:checked:border-primary duration-250 float-left mt-1 appearance-none border border-gray-300 bg-white bg-contain bg-center bg-no-repeat align-top transition-all disabled:bg-gray-400 disabled:border-gray-400 dark:disabled:bg-gray-800 dark:disabled:border-gray-800 disabled:text-gray-700 dark:disabled:text-gray-300"
            type="checkbox"
            data-pattern="^(yes|no)$"
            value="no"
          />
          <svg
            data-checkbox-handler="newsletter-check"
            class="pointer-events-none cursor-pointer absolute fill-white dark:fill-gray-300 left-0 top-0 translate-x-1 translate-y-2 h-3 w-3"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 512 512"
          >
            <path
              d="M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"
            ></path>
          </svg>
        </div>
      </div>
      <label class="text-sm" for="newsletter-check">
        I've read and agree to the
        <a
          class="italic"
          href="https://www.bunkerity.com/privacy-policy/?utm_campaign=self&utm_source=ui"
          target="_blank"
          >privacy policy</a
        >
      </label>
    </div>
    <button
      type="submit"
      formtarget="_blank"
      type="button"
      class="dark:brightness-125 hover:brightness-75 w-full inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-gradient-to-tl bg-primary leading-normal text-xs ease-in tracking-wide shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md"
    >
      Subscribe
    </button>
  </form>

  <!-- end newsletter -->
</aside>
<!-- end right sidebar -->