feat: about tab
This commit is contained in:
parent
c427cb4829
commit
8593a58645
43
.data/team.json
Normal file
43
.data/team.json
Normal file
|
@ -0,0 +1,43 @@
|
||||||
|
[
|
||||||
|
{
|
||||||
|
"role": 0,
|
||||||
|
"name": "Blurryface (aka Clyde)",
|
||||||
|
"picture": "https://crss.fra1.cdn.digitaloceanspaces.com/avatars/786634586452787201.png",
|
||||||
|
"banner": "linear-gradient(40deg, #a657fa, #7447e4)",
|
||||||
|
"links": [
|
||||||
|
{
|
||||||
|
"icon": {
|
||||||
|
"id": "lucide.globe"
|
||||||
|
},
|
||||||
|
"name": "Website",
|
||||||
|
"url": "https://blurryface.xyz/"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"role": 1,
|
||||||
|
"name": "TheClashFruit",
|
||||||
|
"picture": "https://crss.fra1.cdn.digitaloceanspaces.com/avatars/394888268446957569.png",
|
||||||
|
"links": [
|
||||||
|
{
|
||||||
|
"icon": {
|
||||||
|
"id": "lucide.globe"
|
||||||
|
},
|
||||||
|
"name": "Website",
|
||||||
|
"url": "https://theclashfruit.me/"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon": {
|
||||||
|
"id": "simpleicons.mastodon",
|
||||||
|
"extra": {
|
||||||
|
"width": "24",
|
||||||
|
"height": "24",
|
||||||
|
"fill": "currentColor"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"name": "Mastodon",
|
||||||
|
"url": "https://wetdry.world/@TheClashFruit"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
18
README.md
18
README.md
|
@ -1,5 +1,17 @@
|
||||||
# Website
|
# CRSS Server's Website
|
||||||
|
|
||||||
> Newer version of the CRSS site written with PHP!
|
This is the official website for the CRSS Server.
|
||||||
|
|
||||||
# why did I choose php help me
|
## Documentation
|
||||||
|
|
||||||
|
### Contributing
|
||||||
|
|
||||||
|
tba
|
||||||
|
|
||||||
|
## License
|
||||||
|
|
||||||
|
```
|
||||||
|
This work is licensed under CC BY 4.0.
|
||||||
|
```
|
||||||
|
|
||||||
|
See the [LICENSE](LICENSE) file for more information.
|
|
@ -14,6 +14,14 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
*::selection {
|
||||||
|
background: rgba($colorPrimary, 0.75);
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
background: rgba($colorPrimary, 0.65);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
@ -55,6 +63,26 @@ ol, ul {
|
||||||
margin-left: 1rem;
|
margin-left: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
overflow-x: scroll;
|
||||||
|
|
||||||
|
max-width: 100%;
|
||||||
|
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
padding: 1rem;
|
||||||
|
|
||||||
|
background: $colorSurfaceLight2;
|
||||||
|
|
||||||
|
border: 1px solid $colorBorderLight1;
|
||||||
|
border-radius: .5rem;
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
background: $colorSurfaceDark2;
|
||||||
|
border-color: $colorBorderDark1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
max-width: 1100px;
|
max-width: 1100px;
|
||||||
|
|
||||||
|
@ -197,6 +225,8 @@ ol, ul {
|
||||||
|
|
||||||
border-bottom: 1px solid $colorBorderLight1;
|
border-bottom: 1px solid $colorBorderLight1;
|
||||||
|
|
||||||
|
z-index: 999999999;
|
||||||
|
|
||||||
> .container {
|
> .container {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
|
@ -569,3 +599,92 @@ ol, ul {
|
||||||
border-color: $colorBorderDark1;
|
border-color: $colorBorderDark1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.teamList {
|
||||||
|
display: grid;
|
||||||
|
|
||||||
|
gap: 1rem;
|
||||||
|
|
||||||
|
grid-template-columns: repeat(3, minmax(200px, 1fr));
|
||||||
|
|
||||||
|
> .teamCard {
|
||||||
|
border: 1px solid $colorBorderLight1;
|
||||||
|
border-radius: 1rem;
|
||||||
|
|
||||||
|
background: $colorSurfaceLight2;
|
||||||
|
|
||||||
|
> .memberBanner {
|
||||||
|
height: 150px;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
background: $colorPrimary;
|
||||||
|
|
||||||
|
border-top-left-radius: calc(1rem - 1px);
|
||||||
|
border-top-right-radius: calc(1rem - 1px);
|
||||||
|
|
||||||
|
> img {
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
bottom: -52px;
|
||||||
|
left: 16px;
|
||||||
|
|
||||||
|
border-radius: 1rem;
|
||||||
|
border: 4px solid $colorSurfaceLight2;
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
border-color: $colorSurfaceDark2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&[data-has-background] {
|
||||||
|
background: var(--background);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> .memberContent {
|
||||||
|
padding: 0 1rem 1rem;
|
||||||
|
|
||||||
|
> h3 {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
> .memberLinks {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
justify-content: end;
|
||||||
|
align-items: end;
|
||||||
|
|
||||||
|
gap: .5rem;
|
||||||
|
|
||||||
|
list-style: none;
|
||||||
|
|
||||||
|
margin: 1rem 0 .5rem;
|
||||||
|
|
||||||
|
> li > a {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
padding: 4px;
|
||||||
|
|
||||||
|
color: $colorBorderLight3;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $colorPrimary;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
color: $colorBorderDark3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
border-color: $colorBorderDark1;
|
||||||
|
|
||||||
|
background: $colorSurfaceDark2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
63
index.php
63
index.php
|
@ -5,6 +5,7 @@
|
||||||
|
|
||||||
use Bramus\Router\Router;
|
use Bramus\Router\Router;
|
||||||
use anlutro\cURL\cURL;
|
use anlutro\cURL\cURL;
|
||||||
|
use Twig\TwigFilter;
|
||||||
use Twig\TwigFunction;
|
use Twig\TwigFunction;
|
||||||
|
|
||||||
$curl = new cURL();
|
$curl = new cURL();
|
||||||
|
@ -38,31 +39,45 @@
|
||||||
$iconData = preg_replace('/(class="\b[^"]*)"/i', '$1 ' . $value . '"', $iconData);
|
$iconData = preg_replace('/(class="\b[^"]*)"/i', '$1 ' . $value . '"', $iconData);
|
||||||
else
|
else
|
||||||
$iconData = preg_replace('/(<svg\b[^><]*)>/i', '$1 ' . $key . '="' . $value . '">', $iconData);
|
$iconData = preg_replace('/(<svg\b[^><]*)>/i', '$1 ' . $key . '="' . $value . '">', $iconData);
|
||||||
|
|
||||||
$dom = new DOMDocument('1.0');
|
|
||||||
$dom->preserveWhiteSpace = false;
|
|
||||||
$dom->formatOutput = false;
|
|
||||||
$dom->loadXML($iconData);
|
|
||||||
|
|
||||||
$iconData = $dom->saveHTML();
|
|
||||||
$iconData = preg_replace('/(<!--\s.*)-->/i', '', $iconData);
|
|
||||||
$iconData = preg_replace('/\n/', ' ', $iconData);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
$dom = new DOMDocument('1.0');
|
||||||
|
|
||||||
|
$dom->preserveWhiteSpace = false;
|
||||||
|
$dom->formatOutput = false;
|
||||||
|
$dom->loadXML($iconData);
|
||||||
|
|
||||||
|
$iconData = $dom->saveHTML();
|
||||||
|
|
||||||
|
$iconData = preg_replace('/(<!--\s.*)-->/i', '', $iconData);
|
||||||
|
$iconData = preg_replace('/\n/', ' ', $iconData);
|
||||||
|
|
||||||
return $iconData;
|
return $iconData;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// override the default merge filter to add type casting
|
||||||
|
$mergeOverride = new TwigFilter('merge', function($array1, $array2) {
|
||||||
|
return array_merge((array) $array1, (array) $array2);
|
||||||
|
});
|
||||||
|
|
||||||
$twig->addFunction($iconsFun);
|
$twig->addFunction($iconsFun);
|
||||||
|
|
||||||
$twig->addGlobal('git', $buildData->git);
|
$twig->addFilter($mergeOverride);
|
||||||
|
|
||||||
|
$twig->addGlobal('git', $buildData->git);
|
||||||
$twig->addGlobal('server', [
|
$twig->addGlobal('server', [
|
||||||
'version' => '1.11.2',
|
'version' => '1.11.2',
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
// recommended to start a five-server server for live reloading
|
||||||
|
if (isset($_ENV['IS_DEV']))
|
||||||
|
$twig->addGlobal('is_dev', true);
|
||||||
|
|
||||||
|
/*
|
||||||
$twig->addGlobal('user', [
|
$twig->addGlobal('user', [
|
||||||
'name' => 'John Doe'
|
'name' => 'John Doe'
|
||||||
]);
|
]);
|
||||||
|
*/
|
||||||
|
|
||||||
$router->get('/', function() {
|
$router->get('/', function() {
|
||||||
global $twig;
|
global $twig;
|
||||||
|
@ -71,6 +86,22 @@
|
||||||
'page' => [
|
'page' => [
|
||||||
'title' => 'Home',
|
'title' => 'Home',
|
||||||
'path' => '/',
|
'path' => '/',
|
||||||
|
'id' => 'home'
|
||||||
|
]
|
||||||
|
]);
|
||||||
|
});
|
||||||
|
|
||||||
|
$router->get('/about', function() {
|
||||||
|
global $twig;
|
||||||
|
|
||||||
|
echo $twig->render('about.twig', [
|
||||||
|
'page' => [
|
||||||
|
'title' => 'About Us',
|
||||||
|
'path' => '/about',
|
||||||
|
'id' => 'about'
|
||||||
|
],
|
||||||
|
'props' => [
|
||||||
|
'team' => json_decode(file_get_contents('.data/team.json'))
|
||||||
]
|
]
|
||||||
]);
|
]);
|
||||||
});
|
});
|
||||||
|
@ -80,4 +111,16 @@
|
||||||
echo '<h1>Hello World!!</h1>';
|
echo '<h1>Hello World!!</h1>';
|
||||||
});
|
});
|
||||||
|
|
||||||
|
$router->set404(function() {
|
||||||
|
global $twig;
|
||||||
|
|
||||||
|
echo $twig->render('404.twig', [
|
||||||
|
'page' => [
|
||||||
|
'title' => '404 Not Found',
|
||||||
|
'path' => $_SERVER['REQUEST_URI'],
|
||||||
|
'id' => '404'
|
||||||
|
]
|
||||||
|
]);
|
||||||
|
});
|
||||||
|
|
||||||
$router->run();
|
$router->run();
|
21
template/404.twig
Normal file
21
template/404.twig
Normal file
|
@ -0,0 +1,21 @@
|
||||||
|
{% include 'includes/head.twig' %}
|
||||||
|
|
||||||
|
{% include 'includes/hero.twig' %}
|
||||||
|
{% include 'includes/nav.twig' %}
|
||||||
|
|
||||||
|
<main class="pageContent">
|
||||||
|
<div class="container">
|
||||||
|
<h1 id="404-not-found">404 Not Found</h1>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
We couldn't find this page :(
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2 id="debug-info">Debug Info</h2>
|
||||||
|
|
||||||
|
<pre><code class="language-json">{{ { 'page': page, 'git': git, 'server': server, 'user': user } | json_encode(constant('JSON_PRETTY_PRINT')) | format }}</code></pre>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
{% include 'includes/footer.twig' %}
|
||||||
|
{% include 'includes/foot.twig' %}
|
54
template/about.twig
Normal file
54
template/about.twig
Normal file
|
@ -0,0 +1,54 @@
|
||||||
|
{% include 'includes/head.twig' %}
|
||||||
|
|
||||||
|
{% include 'includes/hero.twig' %}
|
||||||
|
{% include 'includes/nav.twig' %}
|
||||||
|
|
||||||
|
<main class="pageContent">
|
||||||
|
<div class="container">
|
||||||
|
<h1>About Us</h1>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
We are a small team running this server.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2 id="rules">Team</h2>
|
||||||
|
|
||||||
|
<div class="teamList">
|
||||||
|
{% for member in props.team %}
|
||||||
|
<div class="teamCard">
|
||||||
|
<div class="memberBanner" {% if member.banner %}data-has-background="yes" style="--background: {{ member.banner }}"{% endif %}>
|
||||||
|
<img src="{{ member.picture }}" width="104" height="104" alt="{{ member.name }}'s Profile Picture" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="memberContent">
|
||||||
|
<ul class="memberLinks">
|
||||||
|
{% for link in member.links %}
|
||||||
|
<li>
|
||||||
|
{% set attributes = ({ 'class': 'icon' } | merge((link.icon.extra ? link.icon.extra : {}))) %}
|
||||||
|
|
||||||
|
<a href="{{ link.url }}" title="{{ link.name }}">
|
||||||
|
{{ icon(link.icon.id, attributes) | raw }}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h3>{{ member.name }}</h3>
|
||||||
|
<label>
|
||||||
|
{% if member.role == 0 %}
|
||||||
|
Owner
|
||||||
|
{% elseif member.role == 1 %}
|
||||||
|
Admin
|
||||||
|
{% else %}
|
||||||
|
N/A
|
||||||
|
{% endif %}
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
{% include 'includes/footer.twig' %}
|
||||||
|
{% include 'includes/foot.twig' %}
|
|
@ -49,5 +49,9 @@
|
||||||
|
|
||||||
<link rel="icon" href="/favicon.ico" />
|
<link rel="icon" href="/favicon.ico" />
|
||||||
<link rel="stylesheet" href="/css/style.min.css" />
|
<link rel="stylesheet" href="/css/style.min.css" />
|
||||||
|
|
||||||
|
{% if is_dev %}
|
||||||
|
<script async data-id="five-server" src="http://localhost:5500/fiveserver.js"></script>
|
||||||
|
{% endif %}
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
|
@ -9,21 +9,21 @@
|
||||||
<div class="navCollapse">
|
<div class="navCollapse">
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<a href="#" class="active">
|
<a {% if page.id == 'home' %} href="#" class="active" {% else %} href="/" {% endif %}>
|
||||||
{{ icon('lucide.home', { 'class': 'icon' }) | raw }}
|
{{ icon('lucide.home', { 'class': 'icon' }) | raw }}
|
||||||
|
|
||||||
Home
|
Home
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="/about">
|
<a {% if page.id == 'about' %} href="#" class="active" {% else %} href="/about" {% endif %}>
|
||||||
{{ icon('lucide.at-sign', { 'class': 'icon' }) | raw }}
|
{{ icon('lucide.at-sign', { 'class': 'icon' }) | raw }}
|
||||||
|
|
||||||
About
|
About
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="/gallery">
|
<a {% if page.id == 'gallery' %} href="#" class="active" {% else %} href="/gallery" {% endif %}>
|
||||||
{{ icon('lucide.images', { 'class': 'icon' }) | raw }}
|
{{ icon('lucide.images', { 'class': 'icon' }) | raw }}
|
||||||
|
|
||||||
Gallery
|
Gallery
|
||||||
|
|
4
util/DatabaseUtil.php
Normal file
4
util/DatabaseUtil.php
Normal file
|
@ -0,0 +1,4 @@
|
||||||
|
<?php
|
||||||
|
class DatabaseUtil {
|
||||||
|
// TODO: Add Database Stuff
|
||||||
|
}
|
4
util/DiscordUtil.php
Normal file
4
util/DiscordUtil.php
Normal file
|
@ -0,0 +1,4 @@
|
||||||
|
<?php
|
||||||
|
class DiscordUtil {
|
||||||
|
// TODO: Add Discord Stuff
|
||||||
|
}
|
Loading…
Reference in a new issue