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