Commit

public/static/js/snow.js

@@ -0,0 +1,98 @@
+/**
+ * Pretty cool snow that was TOTALLY not stolen from soneone else ;-)
+ */
+
+// Amount of Snowflakes
+var snowMax = 100;
+
+// Snowflake Colours
+var snowColor = ["#fff"];
+
+// Snow Entity
+var snowEntity = "*";
+
+// Falling Velocity
+var snowSpeed = 0.75;
+
+// Minimum Flake Size
+var snowMinSize = 8;
+
+// Maximum Flake Size
+var snowMaxSize = 24;
+
+// Refresh Rate (in milliseconds)
+var snowRefresh = 75;
+
+// Additional Styles
+var snowStyles = "z-index: 0; cursor: default; user-select: none;";
+
+/*
+// End of Configuration
+// ----------------------------------------
+// Do not modify the code below this line
+*/
+
+var snow = [],
+	pos = [],
+	coords = [],
+	lefr = [],
+	marginBottom,
+	marginRight;
+
+function randomise(range) {
+	rand = Math.floor(range * Math.random());
+	return rand;
+}
+
+function initSnow() {
+	var snowSize = snowMaxSize - snowMinSize;
+	marginBottom = document.body.scrollHeight - 5;
+	marginRight = document.body.clientWidth - 15;
+
+	for (i = 0; i <= snowMax; i++) {
+		coords[i] = 0;
+		lefr[i] = Math.random() * 15;
+		pos[i] = 0.03 + Math.random() / 10;
+		snow[i] = document.getElementById("flake" + i);
+		snow[i].style.fontFamily = "inherit";
+		snow[i].size = randomise(snowSize) + snowMinSize;
+		snow[i].style.fontSize = snow[i].size + "px";
+		snow[i].style.color = snowColor[randomise(snowColor.length)];
+		snow[i].style.zIndex = -1;
+		snow[i].sink = snowSpeed * snow[i].size / 5;
+		snow[i].posX = randomise(marginRight - snow[i].size);
+		snow[i].posY = randomise(2 * marginBottom - marginBottom - 2 * snow[i].size);
+		snow[i].style.left = snow[i].posX + "px";
+		snow[i].style.top = snow[i].posY + "px";
+	}
+
+	moveSnow();
+}
+
+function resize() {
+	marginBottom = document.body.scrollHeight - 5;
+	marginRight = document.body.clientWidth - 15;
+}
+
+function moveSnow() {
+	for (i = 0; i <= snowMax; i++) {
+		coords[i] += pos[i];
+		snow[i].posY += snow[i].sink;
+		snow[i].style.left = snow[i].posX + lefr[i] * Math.sin(coords[i]) + "px";
+		snow[i].style.top = snow[i].posY + "px";
+
+		if (snow[i].posY >= marginBottom - 2 * snow[i].size || parseInt(snow[i].style.left) > (marginRight - 3 * lefr[i])) {
+			snow[i].posX = randomise(marginRight - snow[i].size);
+			snow[i].posY = 0;
+		}
+	}
+
+	setTimeout("moveSnow()", snowRefresh);
+}
+
+for (i = 0; i <= snowMax; i++) {
+	document.write("<span id='flake" + i + "' style='" + snowStyles + "position:absolute;top:-" + snowMaxSize + "'>" + snowEntity + "</span>");
+}
+
+window.addEventListener('resize', resize);
+window.addEventListener('load', initSnow);

public/static/style/main.css

@@ -1,5 +1,62 @@
-body {
-    background-color: black;
-    background-image: url('../img/stars.gif');
-    color: bisque;
+html, body {
+    height: 100%;
+}
+
+body {
+    margin: 0;
+    background: #560707;
+    color: #431718;
+    font-size: 1rem;
+    font-family: 'Times New Roman', Times, serif;
+    line-height: 1.5;
+}
+
+header {
+    image-rendering: pixelated;
+}
+
+h1 {
+    margin-top: .5rem;
+    margin-bottom: .5rem;
+    border-bottom: 1px solid;
+}
+
+a {
+    color: blue;
+}
+
+.container {
+    margin: auto;
+    max-width: 600px;
+    background: bisque;
+}
+
+main {
+    padding: 1rem;
+    padding-top: 0;
+}
+
+img {
+    display: block;
+    max-width: 100%;
+    max-height: 10rem;
+    height: auto;
+}
+
+table {
+    border-collapse: collapse;
+    width: 100%;
+}
+td, th {
+    text-align: left;
+    padding: 8px;
+}
+tr:nth-child(even) {
+    background: #eed3b3;
+}
+
+@media (max-width: 600px) {
+    .container {
+        min-height: 100%;
+    }
 }

routes/start.php

@@ -8,6 +8,7 @@ ErrorHandler::register(function($error_messages) {
 });
 
 Route::get('/', fn() => view('pages/home'));
+Route::get('/matrix', fn() => view('pages/matrix'));
 
 // since no route was matched we show a page not found error
 http_response_code(404);

views/pages/home.php

@@ -1,4 +1,46 @@
-<?=view('templates/header', ['title' => 'Home'])?>
+<?=view('templates/header', ['title' => 'Welcome to the willy club'])?>
 
+<h1>Welcome to the willy club</h1>
+
+<p>Theres more than just willies! This site hosts some of my personal projects and services for me and acquaintances.</p>
+
+<table>
+    <tr>
+        <th>Name</th>
+        <th>Status</th>
+    </tr>
+    <tr>
+        <td><a href="//element.willy.club">Element</a></td>
+        <td>Online</td>
+    </tr>
+    <tr>
+        <td><a href="//git.willy.club">Gitea</a></td>
+        <td>Online</td>
+    </tr>
+    <tr>
+        <td><a href="<?=url('/matrix')?>">Matrix</a></td>
+        <td>Online</td>
+    </tr>
+    <tr>
+        <td><a href="mumble://mumble.willy.club">Mumble</a></td>
+        <td>Unknown</td>
+    </tr>
+</table>
+
+<h1>Contact</h1>
+
+<p>You can find me on Matrix at <a href="#">@william:willy.club</a></p>
+
+<h1>Webring</h1>
+
+<p>Check out any of these other websites</p>
+
+<p>... nothingness</p>
+
+<p>Well maybe there will be a webring here in the future.</p>
+
+<h1>I don't know what more to put here</h1>
+
+<p>This is just some text to make the page feel more complete? Yeah</p>
 
 <?=view('templates/footer')?>

views/pages/matrix.php

@@ -0,0 +1,13 @@
+<?=view('templates/header', ['title' => 'Matrix Homeserver'])?>
+
+<h1>Matrix Homeserver</h1>
+
+<p>Come solve all of the worlds problems on the willy club public matrix homeserver.</p>
+
+<p>You can register on a client that supports it by adding:</p>
+
+<code>https://matrix.willy.club</code>
+
+<p>as the homeserver, enjoy!</p>
+
+<?=view('templates/footer')?>

views/templates/footer.php

@@ -1,3 +1,4 @@
 </main>
+</div>
 </body>
 </html>

views/templates/header.php

@@ -1,16 +1,27 @@
+<?php
+function special_events(): string {
+    return 'Christmas';
+}
+?>
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title><?=$title?></title>
-    <link rel="stylesheet" href="static/style/main.css">
+    <title><?=htmlspecialchars($title)?></title>
+    <link rel="stylesheet" href="<?=url('/static/style/main.css')?>">
 </head>
 <body>
 
-<a href="<?=url('/')?>">
-    <img src="<?=url('/static/img/welcome-to-willy.club.gif')?>" alt="Welcome to willy.club">
-</a>
+<?php if (special_events() === 'Christmas'): ?>
+    <script src="<?=url('/static/js/snow.js')?>"></script>
+<?php endif; ?>
+
+<div class="container">
+
+    <header>
+        <img src="<?=url('/static/img/banner.png')?>" width="600" height="150">
+    </header>
 
     <main>