Kumi
ac9286bf7e
Replaced the services list layout with a new accordion component. This allows for a more organized and user-friendly display of services, facilitating better content management and improved user interaction. The CSS was updated to include styles for the accordion structure.
215 lines
7.6 KiB
HTML
215 lines
7.6 KiB
HTML
{% extends "base.html" %} {% block title %}Home{% endblock %} {% block content
|
|
%}
|
|
<header class="bg-primary-gradient">
|
|
<div class="container pt-4 pt-xl-5 pb-4 pb-xl-5">
|
|
<div class="row gy-5 pt-5">
|
|
<div class="col-md-8 col-xl-6 text-center text-md-start mx-auto">
|
|
<div class="text-center">
|
|
<h2>Empowering Privacy with Open Source</h2>
|
|
</div>
|
|
<p
|
|
class="text-center special-header fancy-text-primary mb-0"
|
|
style="font-weight: 500"
|
|
>
|
|
Private.coffee
|
|
</p>
|
|
</div>
|
|
<div class="col-12 col-lg-10 mx-auto justify-content-center d-flex">
|
|
<img
|
|
class="mx-auto"
|
|
src="assets/img/logo-inv_grad.svg"
|
|
style="max-width: 400px; width: 80vw"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<section class="bg-white">
|
|
<div class="container bg-white py-5">
|
|
<div class="row">
|
|
<div class="col-md-8 col-xl-6 text-center mx-auto">
|
|
<p class="fw-bold mb-2 text-primary">Our self-hosted Services</p>
|
|
<h3 class="fw-bold">
|
|
Private.coffee provides a collection of services that respect your
|
|
privacy.
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
<div class="py-5 p-lg-5">
|
|
<div class="accordion" id="servicesAccordion">
|
|
{% for service in services.services %} {% if not
|
|
service.exclude_from_index %}
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header" id="heading{{ loop.index }}">
|
|
<button
|
|
class="accordion-button"
|
|
type="button"
|
|
data-bs-toggle="collapse"
|
|
data-bs-target="#collapse{{ loop.index }}"
|
|
aria-expanded="true"
|
|
aria-controls="collapse{{ loop.index }}"
|
|
>
|
|
{{ service.name }}
|
|
</button>
|
|
</h2>
|
|
<div
|
|
id="collapse{{ loop.index }}"
|
|
class="accordion-collapse collapse"
|
|
aria-labelledby="heading{{ loop.index }}"
|
|
data-bs-parent="#servicesAccordion"
|
|
>
|
|
<div class="accordion-body">
|
|
{% if service.icon %}
|
|
<div
|
|
class="bs-icon-lg d-flex justify-content-center align-items-center mb-3 bs-icon"
|
|
title="{{ service.name }}"
|
|
>
|
|
{{ service.icon | icon | safe }} {% if service.homemade %}
|
|
<div
|
|
class="bs-icon-sm bs-icon-circle bs-icon-primary shadow d-flex flex-shrink-0 justify-content-center align-items-center d-inline-block bs-icon bs-icon-sm homemade"
|
|
title="Made by Private.coffee"
|
|
>
|
|
{{ "coffee" | icon | safe }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
<p class="text-muted card-text mb-4">
|
|
{{ service.long_description }}
|
|
</p>
|
|
{% for link in service.links %} {% if link.alternatives %}
|
|
<div class="dropdown">
|
|
<div class="btn btn-primary shadow">
|
|
<a class="main-link" href="{{ link.url }}">{{ link.name }}</a>
|
|
<div class="dropdown-toggle-area">▼</div>
|
|
</div>
|
|
<div class="dropdown-content">
|
|
{% for alternative in link.alternatives %}
|
|
<a href="{{ alternative.url }}">{{ alternative.name }}</a>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<a
|
|
class="btn btn-primary shadow w-100 text-center"
|
|
href="{{ link.url }}"
|
|
>{{ link.name }}</a
|
|
>
|
|
{% endif %} {% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %} {% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="bg-primary-gradient">
|
|
<div class="container py-5">
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<p class="text-end special-header fancy-text-primary mb-0">Privacy</p>
|
|
</div>
|
|
<div class="col">
|
|
<p class="text-start mb-1" style="font-size: 1.6rem">
|
|
from the <strong>community</strong>
|
|
</p>
|
|
<p class="text-start mb-0" style="font-size: 1.6rem">
|
|
for the <strong>community</strong>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="mx-auto" style="max-width: 900px">
|
|
<div class="row row-cols-1 row-cols-md-2 d-flex justify-content-center">
|
|
<div class="col mb-4">
|
|
<div class="card bg-primary-subtle">
|
|
<div class="card-body text-center px-4 py-5 px-md-5">
|
|
<p class="fw-bold text-primary card-text mb-2">Join or donate</p>
|
|
<h5 class="fw-bold card-title mb-3">
|
|
Be a part of the open source community!
|
|
</h5>
|
|
<a class="btn btn-primary btn-sm" href="/membership.html"
|
|
>Learn more</a
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col mb-4">
|
|
<div class="card bg-secondary-subtle">
|
|
<div class="card-body text-center px-4 py-5 px-md-5">
|
|
<p class="fw-bold text-secondary card-text mb-2">
|
|
Private Hosting
|
|
</p>
|
|
<h5 class="fw-bold card-title mb-3">
|
|
Interested in Hosting Services?
|
|
</h5>
|
|
<a
|
|
class="btn btn-secondary btn-sm"
|
|
href="mailto:support@private.coffee"
|
|
>Get in touch</a
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="py-5">
|
|
<div class="container">
|
|
<div class="row mb-5">
|
|
<div class="col-md-8 col-xl-6 text-center mx-auto">
|
|
<p class="fw-bold mb-2 text-primary">Contacts</p>
|
|
<h2 class="fw-bold">How you can reach us</h2>
|
|
</div>
|
|
</div>
|
|
<div class="row d-flex justify-content-center">
|
|
<div
|
|
class="col-md-4 col-xl-4 d-flex justify-content-center justify-content-xl-start"
|
|
>
|
|
<div
|
|
class="d-flex flex-wrap flex-md-column justify-content-md-start align-items-md-start h-100"
|
|
>
|
|
<div class="d-flex align-items-center p-3">
|
|
<div
|
|
class="bs-icon-md bs-icon-circle bs-icon-primary shadow d-flex flex-shrink-0 justify-content-center align-items-center d-inline-block bs-icon bs-icon-md"
|
|
>
|
|
{{ "envelope" | icon | safe }}
|
|
</div>
|
|
<div class="px-2">
|
|
<h6 class="fw-bold mb-0">Email</h6>
|
|
<p class="text-muted mb-0">support@private.coffee</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row d-flex justify-content-center">
|
|
<div
|
|
class="col-md-4 col-xl-4 d-flex justify-content-center justify-content-xl-start"
|
|
>
|
|
<div
|
|
class="d-flex flex-wrap flex-md-column justify-content-md-start align-items-md-start h-100"
|
|
>
|
|
<div class="d-flex align-items-center p-3">
|
|
<div
|
|
class="bs-icon-md bs-icon-circle bs-icon-primary shadow d-flex flex-shrink-0 justify-content-center align-items-center d-inline-block bs-icon bs-icon-md"
|
|
>
|
|
{{ "matrix-logo" | icon | safe }}
|
|
</div>
|
|
<div class="px-2">
|
|
<h6 class="fw-bold mb-0">Matrix</h6>
|
|
<p class="text-muted mb-0">
|
|
<a
|
|
href="https://matrix.pcof.fi/#/#private.coffee:private.coffee"
|
|
>#private.coffee:private.coffee</a
|
|
>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{% endblock %}
|