app-MAIL-temp/templates/footer.html

<!-- ========== FOOTER ========== -->
<footer class="gradient-half-primary-v1"
        id="footer"
        style="background-image: linear-gradient( 150deg ,#2d1582,#19a0ff);    background-repeat: repeat-x; list-style: none initial; ">
  <div class="container space-top-2 space-bottom-1 mt-7">
    <div class="row justify-content-lg-start mb-7">
      <div class="col-sm-7 col-lg-6">
        <!-- Logo -->
        <a href='https://simplelogin.io/' aria-label="SimpleLogin">
          <img src="/static/logo-white.svg"
               height="30px"
               class="mt-3 mb-3"
               alt="SimpleLogin logo">
        </a>
        <!-- End Logo -->
        <p class="small text-white">
          SimpleLogin is an <a href="https://github.com/simple-login">open source</a> email alias solution to protect your email address.
        </p>
        <p class="small text-white">
          SimpleLogin is the product of <a href="https://proton.me">Proton AG</a>, registered in Switzerland under number CHE-354.686.492.
        </p>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-4 col-lg-3 mb-4">
        <h3 class="h4 text-white">Developer</h3>
        <ul class="list-group list-group-transparent list-group-white list-group-flush list-group-borderless mb-0 footer-list-group">
          <li>
            <a class="list-group-item text-white footer-item "
               href="https://simplelogin.io/developer">Sign in with SimpleLogin</a>
          </li>
          <li>
            <a class="list-group-item text-white footer-item "
               href="https://github.com/simple-login/app">
              GitHub
              <img src="https://img.shields.io/github/stars/simple-login/app?style=social"
                   alt="GitHub">
            </a>
          </li>
          <li>
            <a class="list-group-item text-white footer-item "
               href="https://status.simplelogin.io/">Status</a>
          </li>
        </ul>
      </div>
      <div class="col-sm-4 col-lg-2 mb-4">
        <h3 class="h4 text-white">Company</h3>
        <ul class="list-group list-group-transparent list-group-white list-group-flush list-group-borderless mb-0 footer-list-group">
          <li>
            <a class="list-group-item text-white footer-item"
               href='https://simplelogin.io/pricing/'>Pricing</a>
          </li>
          <li>
            <a class="list-group-item text-white footer-item"
               href="https://simplelogin.io/blog/">Blog</a>
          </li>
          <li>
            <a class="list-group-item text-white footer-item"
               href="https://simplelogin.io/about/">About Us</a>
          </li>
          <li>
            <a class="list-group-item text-white footer-item"
               href="https://simplelogin.io/contact/">Contact Us</a>
          </li>
          <li>
            <a class="list-group-item text-white footer-item"
               href="https://simplelogin.io/imprint/">Imprint</a>
          </li>
        </ul>
      </div>
      <div class="col-sm-4 col-lg-2 mb-4">
        <h3 class="h4 text-white">Resources</h3>
        <ul class="list-group list-group-transparent list-group-white list-group-flush list-group-borderless mb-0 footer-list-group">
          <li>
            <a class="list-group-item text-white footer-item "
               href="https://simplelogin.io/terms/">Terms</a>
          </li>
          <li>
            <a class="list-group-item text-white footer-item "
               href="https://simplelogin.io/privacy/">Privacy</a>
          </li>
          <li>
            <a class="list-group-item text-white footer-item "
               href="https://simplelogin.io/security/">Security</a>
          </li>
          <li>
            <a class="list-group-item text-white footer-item"
               href='https://simplelogin.io/faq'>FAQ</a>
          </li>
          <li>
            <a class="list-group-item text-white footer-item "
               href="https://simplelogin.io/docs/">Documentation</a>
          </li>
          <li>
            <a class="list-group-item text-white footer-item "
               href="https://forum.simplelogin.io">Forum</a>
          </li>
        </ul>
      </div>
      <div class="col-sm-4 col-lg-2 mb-4">
        <h3 class="h4 text-white">Downloads</h3>
        <ul class="list-group list-group-transparent list-group-white list-group-flush list-group-borderless mb-0 footer-list-group">
          <li>
            <a class="list-group-item text-white footer-item "
               rel="noopener noreferrer"
               href="https://chrome.google.com/webstore/detail/dphilobhebphkdjbpfohgikllaljmgbn">
              Chrome Extension
            </a>
          </li>
          <li>
            <a class="list-group-item text-white footer-item "
               rel="noopener noreferrer"
               href="https://addons.mozilla.org/firefox/addon/simplelogin/">
              Firefox Add-on
            </a>
          </li>
          <li>
            <a class="list-group-item text-white footer-item "
               rel="noopener noreferrer"
               href="https://microsoftedge.microsoft.com/addons/detail/simpleloginreceive-sen/diacfpipniklenphgljfkmhinphjlfff">
              Edge Add-on
            </a>
          </li>
          <li>
            <a class="list-group-item text-white footer-item "
               rel="noopener noreferrer"
               href="https://apps.apple.com/app/id1494051017">
              Safari
              Extension
            </a>
          </li>
          <li>
            <a class="list-group-item text-white footer-item "
               rel="noopener noreferrer"
               href="https://apps.apple.com/app/id1494359858">
              iOS
              (App Store)
            </a>
          </li>
          <li>
            <a class="list-group-item text-white footer-item "
               rel="noopener noreferrer"
               href="https://play.google.com/store/apps/details?id=io.simplelogin.android">
              Android (Play Store)
            </a>
          </li>
          <li>
            <a class="list-group-item text-white footer-item "
               rel="noopener noreferrer"
               href="https://f-droid.org/en/packages/io.simplelogin.android.fdroid/">
              Android (F-Droid)
            </a>
          </li>
        </ul>
      </div>
    </div>
    <div class="row align-items-center">
      <div class="col-sm-6 mb-3 mb-sm-0">
        <!-- Social Networks -->
        <ul class="list-inline mb-0">
          <li class="list-inline-item">
            <a class="btn btn-sm btn-icon btn-soft-light btn-bg-transparent"
               href="https://twitter.com/simplelogin">
              <span class="fa fa-twitter btn-icon__inner text-white"></span>
            </a>
          </li>
          <li class="list-inline-item">
            <a class="btn btn-sm btn-icon btn-soft-light btn-bg-transparent"
               href="https://www.reddit.com/r/Simplelogin/">
              <span class="fa fa-reddit btn-icon__inner text-white"></span>
            </a>
          </li>
          <li class="list-inline-item">
            <a class="btn btn-sm btn-icon btn-soft-light btn-bg-transparent"
               href="https://www.producthunt.com/posts/simplelogin">
              <span class="fa fa-product-hunt btn-icon__inner text-white"></span>
            </a>
          </li>
        </ul>
        <!-- End Social Networks -->
      </div>
    </div>
  </div>
</footer>
<!-- ========== END FOOTER ========== -->
<script>
  function startIntro() {
    introJs().setOption('showProgress', true).start();
    introJs().start();
  }
</script>
<script src="{{ url_for('static', filename='node_modules/vue/dist/vue.min.js') }}"></script>
<script>
  var app = new Vue({
    el: '#notification-app',
    delimiters: ["[[", "]]"], // necessary to avoid conflict with jinja
    data: {
      notifications: [],
      page: 0,
      loading: true,
      canLoadMore: false,
      showNotification: false,
    },
    computed: {
      has_non_read_notification: function () {
        for (let i = 0; i < this.notifications.length; i++) {
          if (!this.notifications[i].read) return true;
        }
        return false;
      }
    },
    methods: {
      markAsRead: async function (notification) {
        notification.read = true;
        let res = await fetch(`/api/notifications/${notification.id}/read`, {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          }
        });

        if (!res.ok) {
          toastr.error("Sorry for the inconvenience! Could you refresh the page & retry please?", "Unknown Error");
        }
      },

      loadMore: async function () {
        let that = this;
        that.page += 1;

        let res = await fetch(`/api/notifications?page=${that.page}`, {
          method: "GET",
          headers: {
            "Content-Type": "application/json",
          }
        });
        if (res.ok) {
          let json = await res.json();
          that.canLoadMore = json.more;
          that.notifications = that.notifications.concat(json.notifications);
        }
      }

    },
    async mounted() {
      Object.freeze(Object.prototype);
      let that = this;
      let res = await fetch(`/api/notifications?page=${that.page}`, {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
        }
      });
      if (res.ok) {
        let json = await res.json();
        that.notifications = json.notifications;
        that.loading = false;
        that.canLoadMore = json.more
        if (that.notifications.length > 0)
          that.showNotification = true;
      }
    }
  })
</script>