{% extends "default.html" %}
{% block title %}
    About
{% endblock %}
{% block breadcrumbs %}
    <li><a href="/about">Information</a></li>
{% endblock %}
{% block content %}
    <style>
        main {
            height: 100%;
            flex: 1 0 auto;
        }
        #about-page {
            background-image: radial-gradient(circle, #2196F3 0%, #1976D2 50%, #0D47A1 100%);
            height: 100vh;
            width: 100vw;
            top: 0;
            position: fixed;
            color: #ffffff;
            padding: 96px;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
        body {
            display: flex;
            flex-direction: column;
        }
        #global-nav {
            position: fixed;
            z-index: 2;
            background: #00000040;
        }
        #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);
            }
        }

        #infos {
            position: relative;
            z-index: 1;
        }

        html {
            scroll-behavior: smooth;
        }

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

        body > footer {
            position: relative;
            background: #00000040;
        }
    </style>
    <x-vbox id="about-page">
        <div id="logo-shadow">
            <div id="logo" onmousedown="waitForAnimation(this, 'spinning');"></div>
        </div>
        <h1 class="headline"><b>Roundabout</b> alpha testing</h1>
        <span id="tagline">Repository hosting for everyone.</span>
    </x-vbox>
        <x-frame style="--width: 100vw; --height: calc(100vh - 48px);" id="clear"></x-frame>
        <x-frame style="--width: 768px; --height: auto;" id="infos">
            <x-hbox class="box-center" style="justify-content: center;">
                <a href="#infos">
                    <iconify-icon icon="mdi-light:chevron-double-up" style="color: #ffffff; font-size: 48px;"></iconify-icon>
                </a>
            </x-hbox>
            <article class="card">
                <section class="card-main">
                    <h2>Licensing</h2>
                    <p>
                        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.
                    </p>
                    <h5 style="display: inline;">Copyright 2023, Roundabout contributors</h5>
                    <p>
                        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.
                    </p>
                    <p>
                        This program is distributed in the hope that it will be useful,
                        but <b>without any warranty</b>; without even the implied warranty of
                        <b>merchantability</b> or <b>fitness for a particular purpose</b>. See the
                        GNU General Public License for more details.
                    </p>
                    <p>
                        You should have received a copy of the GNU General Public License
                        along with this program. If not, see
                        <a href="https://www.gnu.org/licenses/">the GNU website</a>.
                    </p>
                    <a href="https://www.gnu.org/licenses/agpl-3.0.html">Click to view a copy of the GNU AGPL</a>
                </section>
            </article>
            <article class="card">
                <section class="card-main">
                    <h2>Server information</h2>
                    <ul>
                        <li><b>Operating System:</b> {{ platform.platform() }}</li>
                    </ul>
                </section>
            </article>
        </x-frame>
    <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 %}