about.html
HTML document, ASCII text
1{% extends "default.html" %} 2{% block title %} 3About 4{% endblock %} 5{% block breadcrumbs %} 6<li><a href="/about">Information</a></li> 7{% endblock %} 8{% block content %} 9<style> 10main { 11height: 100%; 12flex: 1 0 auto; 13} 14#about-page { 15background-image: radial-gradient(circle, #2196F3 0%, #1976D2 50%, #0D47A1 100%); 16height: 100vh; 17width: 100vw; 18top: 0; 19position: fixed; 20color: #ffffff; 21padding: 96px; 22align-items: center; 23justify-content: center; 24text-align: center; 25} 26body { 27display: flex; 28flex-direction: column; 29} 30#global-nav { 31position: fixed; 32z-index: 2; 33background: #00000040; 34} 35#logo { 36position: absolute; 37width: 100%; 38height: 100%; 39background-image: url("/static/logo.svg"); 40background-size: contain; 41z-index: 1; 42} 43#logo-shadow { 44width: clamp(240px, 15vw, 512px); 45aspect-ratio: 1/1; 46position: relative; 47filter: 48drop-shadow(0 48px 64px #00000040) 49drop-shadow(0 16px 16px #00000020) 50drop-shadow(0 0 4px #00000030); 51} 52#logo.spinning { 53animation: spin 625ms cubic-bezier(0.16, 1, 0.3, 1); 54} 55@keyframes spin { 560% { 57transform: rotate(120deg); 58} 59100% { 60transform: rotate(0deg); 61} 62} 63 64#infos { 65position: relative; 66z-index: 1; 67} 68 69html { 70scroll-behavior: smooth; 71} 72 73#tagline { 74font-style: italic; 75font-size: 1.25em; 76} 77</style> 78<x-vbox id="about-page"> 79<div id="logo-shadow"> 80<div id="logo" onmousedown="waitForAnimation(this, 'spinning');"></div> 81</div> 82<h1 class="headline"><b>Roundabout</b> alpha testing</h1> 83<span id="tagline">Repository hosting for everyone.</span> 84</x-vbox> 85<x-frame style="--width: 100vw; --height: calc(100vh - 48px);" id="clear"></x-frame> 86<x-frame style="--width: 768px; --height: auto;" id="infos"> 87<x-hbox class="box-center" style="justify-content: center;"> 88<a href="#infos"> 89<iconify-icon icon="mdi-light:chevron-double-up" style="color: #ffffff; font-size: 48px;"></iconify-icon> 90</a> 91</x-hbox> 92<article class="card"> 93<section class="card-main"> 94<h2>Licensing</h2> 95<p> 96Roundabout is free software available under the GNU AGPLv3. You are free to 97use, study, modify and/or distribute both the server and client programs, and to 98host your own instance. 99</p> 100<h5 style="display: inline;">Copyright 2023, Roundabout contributors</h5> 101<p> 102This program is free software: you can redistribute it and/or modify 103it under the terms of the GNU Affero General Public License as published by 104the Free Software Foundation, either version 3 of the License, or 105(at your option) any later version. 106</p> 107<p> 108This program is distributed in the hope that it will be useful, 109but <b>without any warranty</b>; without even the implied warranty of 110<b>merchantability</b> or <b>fitness for a particular purpose</b>. See the 111GNU General Public License for more details. 112</p> 113<p> 114You should have received a copy of the GNU General Public License 115along with this program. If not, see 116<a href="https://www.gnu.org/licenses/">the GNU website</a>. 117</p> 118<a href="https://www.gnu.org/licenses/agpl-3.0.html">Click to view a copy of the GNU AGPL</a> 119</section> 120</article> 121<article class="card"> 122<section class="card-main"> 123<h2>Server information</h2> 124<ul> 125<li><b>Operating System:</b> {{ platform.platform() }}</li> 126</ul> 127</section> 128</article> 129</x-frame> 130<script> 131function waitForAnimation(element, className) { 132element.classList.add(className); 133 134const stop = () => { 135element.classList.remove(className); 136element.removeEventListener("animationend", stop); 137}; 138 139element.addEventListener("animationend", stop); 140} 141</script> 142{% endblock %}