Increase usability

public/static/js/snow.js

@@ -0,0 +1,97 @@
+
+// Cool snow that was TOTALLY NOT stolen from someone else :-)
+
+// Amount of Snowflakes
+var snowMax = 64;
+
+// Snowflake Colours
+var snowColor = ["#fff"];
+
+// Snow Entity
+var snowEntity = "*";
+
+// Falling Velocity
+var snowSpeed = 0.75;
+
+// Minimum Flake Size
+var snowMinSize = 16;
+
+// Maximum Flake Size
+var snowMaxSize = 32;
+
+// 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,10 +1,15 @@
+html, body {
+    height: 100%;
+}
+
 body {
-    color: #111;
+    background: darkblue;
-    background: #fff;
+    background: url('../img/99.png');
+    font-weight: bold;
+    text-align: center;
+    color: white;
     line-height: 1.5;
-    font-size: 1rem;
+    font-family: serif;
-    font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
-    margin: 0;
 }
 
 hr {
@@ -12,76 +17,27 @@ hr {
 }
 
 a {
-    color: #00f;
+    color: yellow;
 }
 
-header {
+h1 {
-    background: #77f;
+    border-bottom: 4px double yellow;
-}
+    color: yellow;
-header > nav {
-    padding: .75rem;
-    margin: auto;
-    max-width: 36rem;
-}
-header > nav > a {
-    text-decoration: none;
-    color: #fff;
-}
-
-main {
-    padding: 0 .75rem 0 .75rem;
-    margin: auto;
-    max-width: 36rem;
 }
 
 img {
-    display: block;
     height: auto;
     max-width: 100%;
 }
 
-table {
-    display: block;
-    border-collapse: collapse;
-    overflow: auto;
-}
-tbody {
-    display: table;
-    width: 100%;
-}
-td, th {
-    text-align: left;
-    padding: .75rem;
-}
-tr:nth-child(even) {
-    background: #eee;
-}
-
 pre, code {
-    font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
+    margin: auto;
-    background: #eee;
+    font-family: monospace;
-    padding: .75rem;
+    background: darkblue;
-    max-width: 100%;
+    border: 4px double yellow;
+    padding: 8px;
+    max-width: min-content;
     display: block;
     overflow-x: auto;
     overflow-y: hidden;
 }
-
-@media (prefers-color-scheme: dark) {
-    body {
-        color: #fff;
-        background: #000;
-    }
-    header {
-        background: #111;
-    }
-    a {
-        color: #aaf;
-    }
-    tr:nth-child(even) {
-        background: #111;
-    }
-    pre, code {
-        background: #111;
-    }
-}

routes/start.php

@@ -9,8 +9,6 @@ ErrorHandler::register(function($error_messages) {
 
 Route::get('/', fn() => view('pages/home'));
 
-Route::get('/matrix', fn() => view('pages/matrix'));
-
 Route::get('/test/$whatever?', function($whatever = 'Default Value') {
     echo htmlspecialchars($whatever);
 });

views/errors/404.php

@@ -1,5 +1,5 @@
 <?=view('templates/header', ['title' => 'Page not found'])?>
 <h1>Page not found</h1>
-<p>The page you requested could not be found on this server</p>
+<p>Sorry the page you requested could not be found on this server</p>
 <a href="<?=url('/')?>">Go home</a>
 <?=view('templates/footer')?>

views/pages/home.php

@@ -1,37 +1,42 @@
 <?=view('templates/header', ['title' => 'Welcome to the Willy Club'])?>
 
-<h1>Welcome to the Willy Club</h1>
+<h1>More than just willies! Most of the time.</h1>
-
-<p>More than just willies! Most of the time.</p>
 
 <p>Not at all associated with thewilly.club ASSHOLES squatting my domain name with their shitty NFTs, this is the original.</p>
 
+<img src="<?=url('/static/img/3d-spinning-toilet-smiley-emoticon-small.gif')?>" alt="the Willy Club(WC)">
+
+<h1>Service list</h1>
+
 <p>This space hosts some services for me and friends, maybe it will host some other stuff down the line if I'm not too lazy.</p>
 
-<table>
+<h2>Gitea server</h2>
-    <tr>
+
-        <th>Name</th>
+<p>Software and stuffs</p>
-        <th>Status</th>
+
-    </tr>
+<a href="//git.willy.club">Click here to open</a>
-    <tr>
+
-        <td><a href="//git.willy.club">Gitea</a></td>
+<h2>Matrix homeserver</h2>
-        <td>TBD</td>
+
-    </tr>
+<p style="color: red;">REGISTRATIONS CLOSED FOR THE TIME BEING!</p>
-    <tr>
+
-        <td><a href="<?=url('/matrix')?>">Matrix</a></td>
+<p>Come hang out with the other terminally online losers on the Willy Club matrix homeserver. You can also use it to communicate freely or whatever.</p>
-        <td>TBD</td>
+
-    </tr>
+<p>You can register on a client that supports it by adding:</p>
-    <tr>
+
-        <td><a href="mumble://mumble.willy.club">Mumble</a></td>
+<code>https://matrix.willy.club</code>
-        <td>TBD</td>
+
-    </tr>
+<p>as the homeserver, have fun and be nice!</p>
-</table>
+
+<h2>Mumble server</h2>
+
+<a href="mumble://mumble.willy.club">Click here to open in your client</a>
 
 <h1>Flirt with the webmaster</h1>
 
 <p>Send me a nice and positive message on matrix: <a href="https://matrix.to/#/@william:willy.club">@william:willy.club</a></p>
 
-<h1>Awesome webring or something</h1>
+<h1>Awesome webring</h1>
 
 <p>Check out any of these other aweeesome websites!</p>
 

views/pages/matrix.php

@@ -1,15 +0,0 @@
-<?=view('templates/header', ['title' => 'Matrix Homeserver'])?>
-
-<h1>Matrix Homeserver</h1>
-
-<p>REGISTRATIONS CLOSED FOR THE TIME BEING!</p>
-
-<p>Come hang out with the other terminally online losers on the Willy Club matrix homeserver. You can also use it to communicate freely or whatever.</p>
-
-<p>You can register on a client that supports it by adding:</p>
-
-<code>https://matrix.willy.club</code>
-
-<p>as the homeserver, have fun and be nice!</p>
-
-<?=view('templates/footer')?>

views/templates/footer.php

@@ -1,3 +1,9 @@
     </main>
+
+    <hr>
+    <br>
+    <img src="<?=url('/static/img/3d-spinning-toilet-smiley-emoticon-small.gif')?>" alt="the Willy Club(WC)">
+    <br>
+    <small>Copyeverything © 2020 - 2194</small>
 </body>
 </html>

views/templates/header.php

@@ -1,3 +1,11 @@
+<?php
+function special_events(): string {
+    if (in_array(date('m'), ['12', '1', '2'])) {
+        return 'Winter';
+    }
+    return 'Nothing';
+}
+?>
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -9,10 +17,21 @@
 </head>
 <body>
 
+    <?php if (special_events() === 'Winter'): ?> 
+        <script src="<?=url('/static/js/snow.js')?>"></script> 
+    <?php endif; ?> 
+
     <header>
-        <nav>
+        <audio controls>
-            <a href="<?=url('/')?>">the Willy Club</a>
+            <source src="http://radio.hbr1.com/stream/trance.ogg" type="audio/ogg">
-        </nav>
+        </audio>
+
+        <br>
+        <br>
+
+        <a href="<?=url('/')?>">
+            <img src="<?=url('/static/img/welcome-to-willy-club.png')?>" alt="Click here to go to the homepage!">
+        </a>
     </header>
 
     <hr>