feat: about tab
This commit is contained in:
parent
c427cb4829
commit
8593a58645
GPG key ID:
09BB24C34C2F3204
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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -55,6 +63,26 @@ ol, ul {
|
|||
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 {
|
||||
max-width: 1100px;
|
||||
|
||||
|
|
@ -197,6 +225,8 @@ ol, ul {
|
|||
|
||||
border-bottom: 1px solid $colorBorderLight1;
|
||||
|
||||
z-index: 999999999;
|
||||
|
||||
> .container {
|
||||
display: flex;
|
||||
|
||||
|
|
@ -569,3 +599,92 @@ ol, ul {
|
|||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
47
index.php
47
index.php
|
|
@ -5,6 +5,7 @@
|
|||
|
||||
use Bramus\Router\Router;
|
||||
use anlutro\cURL\cURL;
|
||||
use Twig\TwigFilter;
|
||||
use Twig\TwigFunction;
|
||||
|
||||
$curl = new cURL();
|
||||
|
|
@ -38,31 +39,45 @@
|
|||
$iconData = preg_replace('/(class="\b[^"]*)"/i', '$1 ' . $value . '"', $iconData);
|
||||
else
|
||||
$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);
|
||||
}
|
||||
|
||||
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->addGlobal('git', $buildData->git);
|
||||
$twig->addFilter($mergeOverride);
|
||||
|
||||
$twig->addGlobal('git', $buildData->git);
|
||||
$twig->addGlobal('server', [
|
||||
'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', [
|
||||
'name' => 'John Doe'
|
||||
]);
|
||||
*/
|
||||
|
||||
$router->get('/', function() {
|
||||
global $twig;
|
||||
|
|
@ -71,6 +86,22 @@
|
|||
'page' => [
|
||||
'title' => 'Home',
|
||||
'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>';
|
||||
});
|
||||
|
||||
$router->set404(function() {
|
||||
global $twig;
|
||||
|
||||
echo $twig->render('404.twig', [
|
||||
'page' => [
|
||||
'title' => '404 Not Found',
|
||||
'path' => $_SERVER['REQUEST_URI'],
|
||||
'id' => '404'
|
||||
]
|
||||
]);
|
||||
});
|
||||
|
||||
$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="stylesheet" href="/css/style.min.css" />
|
||||
|
||||
{% if is_dev %}
|
||||
<script async data-id="five-server" src="http://localhost:5500/fiveserver.js"></script>
|
||||
{% endif %}
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -9,21 +9,21 @@
|
|||
<div class="navCollapse">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#" class="active">
|
||||
<a {% if page.id == 'home' %} href="#" class="active" {% else %} href="/" {% endif %}>
|
||||
{{ icon('lucide.home', { 'class': 'icon' }) | raw }}
|
||||
|
||||
Home
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/about">
|
||||
<a {% if page.id == 'about' %} href="#" class="active" {% else %} href="/about" {% endif %}>
|
||||
{{ icon('lucide.at-sign', { 'class': 'icon' }) | raw }}
|
||||
|
||||
About
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/gallery">
|
||||
<a {% if page.id == 'gallery' %} href="#" class="active" {% else %} href="/gallery" {% endif %}>
|
||||
{{ icon('lucide.images', { 'class': 'icon' }) | raw }}
|
||||
|
||||
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