privatecoffee-website/templates/index.html

{% extends "base.html" %}
{% block content %}
<div class="container text-mauve">
  <h1>Welcome to Private.coffee</h1>
  <p>
    Private.coffee is a collection of services that respect your privacy.
  </p>
  <p>
    Click on a service to go to it. Some services are also available using
    Tor and/or I2P. Click the arrow behind the "Go to" link to see all
    available versions.
  </p>

  <div class="row" id="services">
    {% for service in services.services %}
    {% if not service.exclude_from_index %}
    <div class="service col-sm-4 d-flex flex-column mb-4">
      <h3>{{ service.name }}</h3>
      <p>
        {{ service.long_description }}
      </p>
      {% for link in service.links %}
      <div class="btn-group mt-auto">
      <a href="{{ link.url }}" class="btn mb-1
        {% if service.status == "OK" %}btn-primary{% else %}btn-danger{% endif %}"
        >{{ link.name }}</a
      >
      {% if link.alternatives %}
      <button
      type="button"
      class="btn dropdown-toggle dropdown-toggle-split mb-1
        {% if service.status == "OK" %}btn-primary{% else %}btn-danger{% endif %}"
      data-bs-toggle="dropdown"
      aria-expanded="false"
    >
      <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul
      class="dropdown-menu"
      x-placement="bottom-start"
      style="
        position: absolute;
        transform: translate3d(80px, 38px, 0px);
        top: 0px;
        left: 0px;
        will-change: transform;
      "
    >
      {% for alternative in link.alternatives %}
      <a class="dropdown-item" href="{{ alternative.url }}"
        >{{ alternative.name }}</a
      >
      {% endfor %}
      </ul>
      {% endif %}
      </div>
      {% endfor %}
    </div>
    {% endif %}
    {% endfor %}

    <div class="service col-sm-4 d-flex flex-column mb-4">
      <h3>Hosting</h3>
      <p>
        Need hosting for your privacy-related, social or wholesome
        project? We might be able to share our resources with you for
        free!
      </p>
      <a href="mailto:support@private.coffee" class="btn btn-primary mt-auto"
        >Get in touch!</a
      >
    </div>
    <div class="service col-sm-4 d-flex flex-column mb-4">
      <h3>More?</h3>
      <p>
        We are working on more services. If you have any suggestions,
        please let us know!
      </p>
      <a href="mailto:support@private.coffee" class="btn btn-primary mt-auto"
        >Get in touch!</a
      >
    </div>
  </div>
</div>
{% endblock %}