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

<!-- float button-->
<button
  type="button"
  sidebar-info-open
  class="dark:bg-gray-500 dark:brightness-110 hover:brightness-75 fixed p-3 text-xl bg-white shadow-sm cursor-pointer top-20 sm:top-3 right-4 sm:right-20 xl:right-4 z-990 rounded-circle text-slate-700"
>
  <svg
    fill="#0D6EFD"
    class="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
  sidebar-info
  class="translate-x-90 -right-0 transition z-sticky dark:bg-slate-850/80 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"
>
  <!-- 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">Stay up to date.</p>
    </div>
    <!-- close button -->
    <div class="float-right mt-6">
      <button
        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 class="flex-auto overflow-auto">
    {% if posts %} {% for post in posts %}

    <a
      class="transition hover:scale-102 bg-gray-100 rounded px-6 py-4 m-2 col-span-12 md:col-span-6 flex flex-col justify-between"
      href="{{ post['link'] }}"
      target="_blank"
    >
      <div>
        <h3 class="title text-base">{{ post['title'] }}</h3>

        <img
          class="rounded w-full h-30 m-0 object-cover"
          src="{{ post['image_url'] }}"
          alt="image"
        />
        <div class="text-sm">{{ post['description'] }}</div>
      </div>

      <div class="mt-4 flex justify-between items-center">
        <span class="text-xs font-semibold">{{ post['date'] }}</span
        ><span class="ml-3 text-xs italic"
          >{{ post['reading_time'] }} read</span
        >
      </div>
    </a>

    {% endfor %} {% else %}
    <p
      class="text-center col-span-12 relative w-full p-4 text-blue-500 rounded-lg"
    >
      Impossible to connect to blog news.
    </p>
    {% endif %}
  </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-8 pb-0 mb-0 border-b-0"
    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="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-3 py-2 font-normal text-gray-700 transition-all placeholder:text-gray-500"
        placeholder="John.doe@example.com"
        pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-z]{2,}$"
        required
      />
    </div>
    <div class="block pl-7 mt-2">
      <div class="relative">
        <input
          required
          id="newsletter-check"
          class="absolute w-5 h-5 ease text-base -ml-7 rounded-1.4 checked:bg-primary duration-250 float-left mt-1 cursor-pointer appearance-none border border-solid border-slate-150 bg-white bg-contain bg-center bg-no-repeat align-top transition-all after:absolute after:flex after:h-full after:w-full after:items-center after:justify-center after:text-white after:opacity-0 after:transition-all checked:border-0 checked:border-transparent checked:bg-transparent checked:after:opacity-100"
          type="checkbox"
        />
        <svg
          checkbox-handler="newsletter-check"
          class="absolute fill-white cursor-pointer -translate-x-6 translate-y-2 h-3 w-3"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 512 512"
        >
          <path
            checkbox-handler="newsletter-check"
            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"
          />
        </svg>
      </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/"
          _target="_blank"
          >privacy policy</a
        >
      </label>
    </div>
    <button
      type="submit"
      formtarget="_blank"
      type="button"
      class="flex w-full justify-center mt-4 mb-4 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 hover:bg-primary/80 focus:bg-primary/80 leading-normal text-xs ease-in tracking-tight-rem 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 -->