{% extends "default.html" %}
{% block title %}
    {% trans %}About{% endtrans %}
{% endblock %}
{% block breadcrumbs %}
    <li><a href="/about">{% trans %}Information{% endtrans %}</a></li>
{% endblock %}
{% block seo %}
    <meta name="description" content="{% trans %}Repository hosting for everyone.{% endtrans %}">
{% endblock %}
{% block content %}
<style>
    main {
        height: 100%;
        flex: 1 0 auto;
    }
    #about-page {
        background-image: linear-gradient(to bottom, #2196F3 0%, #1976D2 50%, #0D47A1 100%);
        top: 0;
        color: #ffffff;
        padding: 96px;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    #logo {
        position: absolute;
        width: 100%;
        height: 100%;
        background-image: url("/static/logo.svg");
        background-size: contain;
        z-index: 1;
    }
    #logo-shadow {
        width: clamp(240px, 15vw, 512px);
        aspect-ratio: 1/1;
        position: relative;
        filter:
            drop-shadow(0 48px 64px #00000040)
            drop-shadow(0 16px 16px #00000020)
            drop-shadow(0 0 4px #00000030);
    }
    #logo.spinning {
        animation: spin 625ms cubic-bezier(0.16, 1, 0.3, 1);
    }
    @keyframes spin {
        0% {
            transform: rotate(120deg);
        }
        100% {
            transform: rotate(0deg);
        }
    }

    #tagline {
        font-style: italic;
        font-size: 1.25em;
    }

    footer {
        display: none;
    }

    .navrail {
        display: none;
    }
</style>
<x-vbox id="about-page">
    <div id="logo-shadow">
        <div id="logo" onmousedown="waitForAnimation(this, 'spinning');"></div>
    </div>
    <h1 class="headline"><b>{% trans %}Roundabout{% endtrans %}</b> β {{ version }}</h1>
    <span id="tagline">{% trans %}Repository hosting for everyone.{% endtrans %}
        <br>{% trans %}Beta version; features and polish may be missing.{% endtrans %}
    </span>
    <x-frame style="--width: 768px; --height: auto; text-align: initial;" id="infos">
        <article class="card">
            <section class="card-main">
                <h2>{% trans %}Licensing{% endtrans %}</h2>
                <p>
                    {% trans %}Roundabout is free software available under the GNU AGPLv3. You are free to use, study, modify and/or distribute both the server and client programs, and to host your own instance.{% endtrans %}
                </p>
                <h5 style="display: inline;">{% trans %}Copyright 2024, Roundabout contributors{% endtrans %}</h5>
                <p>
                    {% trans %}This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.{% endtrans %}
                </p>
                <p>
                    {% trans %}This program is distributed in the hope that it will be useful, but without any warranty; without even the implied warranty of merchantability or fitness for a particular purpose. See the GNU General Public License for more details.{% endtrans %}
                </p>
                <p>
                    {% trans %}You should have received a copy of the GNU General Public License along with this program. If not, see the GNU website.{% endtrans %} <a href="https://www.gnu.org/licenses/">the GNU website</a>.
                </p>
                <a href="https://www.gnu.org/licenses/agpl-3.0.html">{% trans %}Click to view a copy of the GNU AGPL{% endtrans %}</a>
            </section>
        </article>
        <article class="card">
            <section class="card-main">
                <h2>{% trans %}Server information{% endtrans %}</h2>
                <ul>
                    <li><b>{% trans %}Operating System:{% endtrans %}</b> {{ platform.platform() }}</li>
                </ul>
            </section>
        </article>
    </x-frame>
</x-vbox>
<script>
    function waitForAnimation(element, className) {
        element.classList.add(className);

        const stop = () => {
            element.classList.remove(className);
            element.removeEventListener("animationend", stop);
        };

        element.addEventListener("animationend", stop);
    }
</script>
{% endblock %}