smileos

src/dynamic_routes.py

@@ -1,7 +1,12 @@
 # Imports
-from flask import Blueprint, render_template, abort
+from flask import Blueprint, render_template, abort, request
 import os, markdown
 
+try:
+    from src.name import get_name
+except ImportError:
+    from name import get_name
+
 
 # Create blueprint
 bp = Blueprint('dynamic_routes', __name__)
@@ -33,20 +38,22 @@ def catch_all(filename):
             return render_template(
                 'bases/directory.html',
                 directory=filename + "/" if not filename.endswith('/') else filename,
-                pages=ListFiles(filename)
+                pages=ListFiles(filename), 
+                name=get_name(request)
             )
         
-        return render_template(f'pages/{filename}')
+        return render_template(f'pages/{filename}', name=get_name(request))
 
     elif os.path.exists(get_path(filename + '.html')):
-        return render_template(f'pages/{filename}.html')
+        return render_template(f'pages/{filename}.html', name=get_name(request))
 
     elif os.path.exists(get_path(filename + '.md')):
         output = markdown.markdown(open(get_path(filename + '.md'), "r").read())
         return render_template(
             f'bases/md.html',
             title = filename.split("/")[-1],
-            markdown = output
+            markdown = output,
+            name=get_name(request)
         )
 
     else:

src/errors.py

@@ -1,6 +1,10 @@
-from flask import Blueprint, render_template
+from flask import Blueprint, render_template, request
 from werkzeug.exceptions import HTTPException
-from os import getenv as env
+
+try:
+    from src.name import get_name
+except ImportError:
+    from name import get_name
 
 
 bp = Blueprint("errors", __name__)
@@ -9,19 +13,19 @@ bp = Blueprint("errors", __name__)
 @bp.route('/500')
 @bp.app_errorhandler(500)
 def internal_server_error(error:HTTPException=None):
-    return render_template('errors/500.html', error=error), 500
+    return render_template('errors/500.html', error=error, name=get_name(request)), 500
 
 
 @bp.route('/404')
 @bp.app_errorhandler(404)
 def not_found(error:HTTPException=None):
-    return render_template('errors/404.html', error=error), 404
+    return render_template('errors/404.html', error=error, name=get_name(request)), 404
 
 
 @bp.route('/400')
 @bp.app_errorhandler(400)
 def bad_request(error:HTTPException=None):
-    return render_template('errors/400.html', error=error), 400
+    return render_template('errors/400.html', error=error, name=get_name(request)), 400
 
 
 @bp.route('/idk')
@@ -35,5 +39,6 @@ def idk(error:HTTPException=None):
         'errors/error.html',
         code = error.code,
         description = error.description,
-        name = error.name
+        err_name = error.name,
+        name=get_name(request)
     ), error.code

src/main.py

@@ -1,5 +1,5 @@
 # IMPORTS
-from flask import Flask, render_template
+from flask import Flask, render_template, request
 from os import getenv as env
 import logging
 
@@ -7,8 +7,10 @@ try:
     import src.dynamic_routes as dynamic_routes
     import src.errors as errors
     import src.pg_log as pg_log
+    from src.name import get_name
 except ImportError:
     import dynamic_routes, errors, pg_log
+    from name import get_name
     from dotenv import load_dotenv
     load_dotenv()
 
@@ -60,11 +62,16 @@ log.info("Blueprints registered.")
 # ROUTES
 @app.route("/")
 def index():
-    return render_template("index.html")
+    return render_template("index.html", name=get_name(request))
 
 @app.route("/toaster")
 def toaster():
-    return render_template("toaster.html")
+    return render_template("toaster.html", name=get_name(request))
+
+@app.route("/terminal")
+def terminal():
+    return render_template("terminal.html", name=get_name(request))
+
 
 
 # DEBUG (DONT RUN LIKE THIS IN PROD)

src/name.py

@@ -0,0 +1,5 @@
+def get_name(req):
+    if req.headers.get("Host") == "proot.uk":
+        return "Toaster"
+    else:
+        return "Alfie King"

static/css/bases/base.css

@@ -11,6 +11,18 @@
     font-weight:normal;
     font-style:normal;
 }
+@font-face {
+    font-family:"Ultrafont";
+    src:url("/static/content/fonts/ultrakill-font.woff2") format("woff2");
+    font-weight:normal;
+    font-style:normal;
+}
+@font-face {
+    font-family:"Ultrafont2";
+    src:url("/static/content/fonts/ultrakill-font-2.woff2") format("woff2");
+    font-weight:normal;
+    font-style:normal;
+}
 
 :root {
     --primary-color: #5cdd8b;
@@ -24,6 +36,10 @@
     --title-font: 'Roboto Mono', sans-serif;
     --irken-font: 'Irken';
     --scratch-font: 'Scratch';
+    --ultrafont-font: 'Ultrafont';
+    --smileos2-box: url(/static/content/smileos/SmileOS_2_Box.webp) 17 3 3 fill / 51px 9px 9px;
+    --smileos2-font: 'Ultrafont2';
+    --smileos2-emphasis: #FF4343;
 }
 
 body {
@@ -227,6 +243,15 @@ main section a {
     text-decoration: none;
 }
 
+.smileos {
+    border-image: var(--smileos2-box);
+    padding: 54px 15px 12px;
+    image-rendering: pixelated;
+    font-size: 1.25rem;
+    font-family: var(--smileos2-font);
+    color: #fff;
+}
+
 #furry {
     position: fixed;
     left: 0;
@@ -255,6 +280,10 @@ main section a {
     font-family: var(--scratch-font);
 }
 
+.ultrafont {
+    font-family: var(--ultrafont-font);
+}
+
 #alt-nav {
     display: none;
     backdrop-filter: blur(2px) brightness(0.6);

static/css/terminal.css

@@ -0,0 +1,122 @@
+@font-face {
+    font-family:"Ultrafont2";
+    src:url("/static/content/fonts/ultrakill-font-2.woff2") format("woff2");
+    font-weight:normal;
+    font-style:normal;
+}
+
+#terminal {
+    aspect-ratio: 4/3;
+    padding: 0;
+    font-family: "Ultrafont2";
+    font-size: 1.2rem;
+    color: #ffffff;
+    border: none;
+}
+
+.smileos-header {
+    height: 9%;
+    border-image: url(/static/content/smileos/SmileOS_2_Header.webp) 3 fill / 9px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 0;
+    font-size: 1.4rem;
+    font-weight: 900;
+    padding-left: 7px;
+    padding-right: 7px;
+    image-rendering: pixelated;
+}
+
+.smileos-header img {
+    height: 100%;
+    object-fit: contain;
+}
+
+#terminal-container {
+    border-image: url(/static/content/smileos/SmileOS_2_Content.webp) 1 3 3 fill / 3px 9px 9px;
+    height: 100%;
+    display: grid;
+    grid-template-areas:
+        "logo window"
+        "buttons window";
+    grid-template-columns: 40% 1fr;
+    grid-template-rows: 25% 1fr;
+    padding: 15px;
+    box-sizing: border-box;
+    image-rendering: pixelated;
+}
+
+#smileos-logo {
+    width: 250px;
+    grid-area: logo;
+    margin: auto;
+    image-rendering: pixelated;
+}
+
+#terminal-window {
+    height: 100%;
+    grid-area: window;
+}
+
+#window-container {
+    border-image: url(/static/content/smileos/SmileOS_2_Content.webp) 1 3 3 fill / 3px 9px 9px;
+    height: 91%;
+    padding: 35px;
+    box-sizing: border-box;
+    image-rendering: pixelated;
+}
+
+#window-content {
+    border-image: url(/static/content/smileos/SmileOS_2_inset_panel.webp) 1 fill / 3px;
+    height: 100%;
+    box-sizing: border-box;
+    padding: 15px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    image-rendering: pixelated;
+}
+
+.red {
+    color: #ff4343;
+}
+
+#terminal-buttons {
+    grid-area: buttons;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+}
+
+.terminal-button {
+    border-image: url(/static/content/smileos/SmileOS_2_Button_transparent.png) 2 / 9px;
+    background: url(/static/content/smileos/SmileOS_2_Button_Background.png);
+    background-repeat: repeat-x;
+    background-size: 100% 100%;
+    border-radius: 15px;
+    height: 75px;
+    width: 270px;
+    image-rendering: pixelated;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    font-family: "Ultrafont2";
+    font-size: 1.2rem;
+    color: #ffffff;
+}
+
+.terminal-button:hover {
+    filter: contrast(110%);
+}
+
+.terminal-button:active {
+    filter: contrast(125%);
+}
+
+#smileos-window-content img {
+    width: 100%;
+}

static/js/smileos.js

@@ -0,0 +1,95 @@
+const tips_of_the_day = [
+    `The Revolver deals <span style="color:var(--smileos2-emphasis)">locational damage</span>.<br>A <span style="color:var(--smileos2-emphasis)">headshot</span> deals <span style="color:var(--smileos2-emphasis)">2x</span> damage and a <span style="color:var(--smileos2-emphasis)">limbshot</span> deals <span style="color:var(--smileos2-emphasis)">1.5x</span> damage.`,
+    `<span style="color:var(--smileos2-emphasis)">Dash</span>: Fully invincible, costs stamina<br><span style="color:var(--smileos2-emphasis)">Slide</span>: Greater distance, no invincibility<br><span style="color:var(--smileos2-emphasis)">Jump</span>: Quickly out of melee range, less control`,
+    `<span style="color:var(--smileos2-emphasis)">Shotgun parries</span>: A <span style="color:var(--smileos2-emphasis)">point-blank</span> Shotgun shot to the torso right before an enemy attack lands will deal massive damage.`,
+    `<span style="color:var(--smileos2-emphasis)">Attack sound cues</span> allow you to keep track of enemies who are off screen.`,
+    `Some enemies make <span style="color:var(--smileos2-emphasis)">idle sounds</span> to make them easier to track.`,
+    `Use the <span style="color:cyan">ATTRACTOR NAILGUN</span>'s magnets to form concentrated <span style="color:var(--smileos2-emphasis)">orbs</span> of nails that can be <span style="color:var(--smileos2-emphasis)">moved</span> around using the pull force of <span style="color:var(--smileos2-emphasis)">other magnets</span>.`,
+    `Enemies <span style="color:var(--smileos2-emphasis)">can hurt</span> other enemy types. With quick thinking and positioning, powerful enemies can turn into powerful weapons.`,
+    `The <span style="color:cyan">ATTRACTOR NAILGUN</span>'s magnets can be attached to enemies to make mobile targets easy to hit with nails.`,
+    `Enemies <span style="color:var(--smileos2-emphasis)">scream</span> when falling from a <span style="color:var(--smileos2-emphasis)">fatal height</span>.`,
+    `<span style="color:var(--smileos2-emphasis)">SLAM BOUNCING</span>: Jump immediately after landing from a <span style="color:var(--smileos2-emphasis)">ground slam</span> to jump higher. The longer the ground slam fall, the higher the bounce.`,
+    `<span style="color:var(--smileos2-emphasis)">RAILCANNON</span> variations all share the same cooldown. Choose wisely which variation best fits the situation.`,
+    `<span style="color:var(--smileos2-emphasis)">SLIDING</span> will retain previous momentum for a short amount of time. Chaining quick <span style="color:var(--smileos2-emphasis)">SLIDE JUMPS</span> after a <span style="color:var(--smileos2-emphasis)">DASH JUMP</span> will give you incredible sustained speed.`,
+    `<span style="color:var(--smileos2-emphasis)">Environmental hazards</span> such as harmful liquids will hurt enemies as well.`,
+    `If you're having trouble keeping up with a tough enemy, <span style="color:var(--smileos2-emphasis)">stand back and observe</span>. Every enemy has its <span style="color:var(--smileos2-emphasis)">tells</span> and <span style="color:var(--smileos2-emphasis)">patterns</span> and learning those can be your key to victory.`,
+    `<span style="color:var(--smileos2-emphasis)">HITSCAN</span> weapons can be used to hit the shotgun's <span style="color:cyan">CORE EJECT</span> in mid-air to increase its damage and blast radius.`,
+    `<span style="color:var(--smileos2-emphasis)">POWER-UPS</span> can be stacked.`,
+    `Hitting an enemy with only the <span style="color:var(--smileos2-emphasis)">edge</span> of an <span style="color:var(--smileos2-emphasis)">explosion</span> will launch them without dealing much damage, making it a risky but effective tool against <span style="color:var(--smileos2-emphasis)">Stalkers</span>.`,
+    `Airborne <span style="color:var(--smileos2-emphasis)">coins</span> can be shot with any <span style="color:var(--smileos2-emphasis)">hitscan</span> weapon.`,
+    `Falling <span style="color:var(--smileos2-emphasis)">underwater</span> is slow, but a <span style="color:var(--smileos2-emphasis)">ground slam</span> allows for a quick return to the ground.`,
+    `<span style="color:var(--smileos2-emphasis)">Sliding</span> onto water will cause one to <span style="color:var(--smileos2-emphasis)">skip across</span> its surface.`,
+    `If an enemy is <span style="color:var(--smileos2-emphasis)">blessed</span> by an <span style="color:var(--smileos2-emphasis)">Idol</span>, a direct visible connection is formed between the two, allowing one to easily <span style="color:var(--smileos2-emphasis)">track down</span> and destroy the protector.`,
+    `<span style="color:var(--smileos2-emphasis)">Explosions</span> deflect <span style="color:var(--smileos2-emphasis)">projectiles</span>.<br><br>If an explosion is caused right from where an enemy shoots a projectile, it can <span style="color:var(--smileos2-emphasis)">backfire</span> and <span style="color:var(--smileos2-emphasis)">hit them</span> instead.`,
+    `The space of a <span style="color:var(--smileos2-emphasis)">large</span> arena can be used to one's advantage. Using the environment to <span style="color:var(--smileos2-emphasis)">break line-of-sight</span> with enemies allows for some breathing room and time to consider <span style="color:var(--smileos2-emphasis)">target prioritization</span>.`,
+    `<span style="color:var(--smileos2-emphasis)">DON'T</span> WASTE STAMINA! Dashing <span style="color:var(--smileos2-emphasis)">needlessly</span> while fighting very <span style="color:var(--smileos2-emphasis)">aggressive foes</span> will quickly cause one to have none left when it is most needed.`,
+    `<span style="color:var(--smileos2-emphasis)">Homing projectiles</span> may be more difficult to dodge, but their tracking and slower speed makes them much <span style="color:var(--smileos2-emphasis)">easier</span> to <span style="color:var(--smileos2-emphasis)">parry</span>.`,
+    `<span style="color:var(--smileos2-emphasis)">Mannequins</span> can be hard to hit due to their speed, but they lose air control when <span style="color:var(--smileos2-emphasis)">launched</span> or <span style="color:var(--smileos2-emphasis)">shot down</span> from a surface, making them <span style="color:var(--smileos2-emphasis)">unable to move</span> for a short moment.`,
+    `The <span style="color:red">Knuckleblaster</span>'s <span style="color:var(--smileos2-emphasis)">blast wave</span> is also capable of breaking a <span style="color:var(--smileos2-emphasis)">Gutterman's shield</span>, and is much easier to land in a chaotic scenario.`,
+    `A <span style="color:var(--smileos2-emphasis)">direct hit</span> from the <span style="color:red">Knuckleblaster</span> has extremely powerful <span style="color:var(--smileos2-emphasis)">knockback</span>, making it extremely powerful for launching enemies into <span style="color:var(--smileos2-emphasis)">pits</span> and other <span style="color:var(--smileos2-emphasis)">environmental hazards</span>.`,
+    `Didn't expect me, huh?`,
+    `<span style="color:#FF0078">Magenta</span> colored attacks can <span style="color:var(--smileos2-emphasis)">not</span> be dashed through and must be <span style="color:var(--smileos2-emphasis)">avoided entirely</span>.`,
+    `<span style="color:var(--smileos2-emphasis)">Blood Puppets</span> do not grant kills or style points, but their <span style="color:var(--smileos2-emphasis)">blood</span> can still <span style="color:var(--smileos2-emphasis)">heal</span>.`,
+    `When facing down <span style="color:var(--smileos2-emphasis)">a difficult foe</span>, it may be beneficial to first get rid of the <span style="color:var(--smileos2-emphasis)">fodder</span> to reduce distractions.`,
+    `Sometimes it may be more beneficial to <span style="color:var(--smileos2-emphasis)">stay at a distance</span> and wait for an opening <span style="color:var(--smileos2-emphasis)">before</span> getting close.`,
+    `If you're having <span style="color:var(--smileos2-emphasis)">trouble</span> with a specific encounter, take a moment to <span style="color:var(--smileos2-emphasis)">weigh your options</span>. <br> There may be some <span style="color:var(--smileos2-emphasis)">trick</span>, <span style="color:var(--smileos2-emphasis)">tool</span> or <span style="color:var(--smileos2-emphasis)">alternative prioritization</span> that will tip the scales in your favor.`,
+    `<span style="color:var(--smileos2-emphasis)">ENEMY STEP</span>: Jump while in mid-air <span style="color:var(--smileos2-emphasis)">near an enemy</span> to jump off the enemy. This resets the amount of available walljumps without needing to land.`,
+    `<span style="color:var(--smileos2-emphasis)">Parries</span> can be used as a powerful healing tool.<br><br>Parrying any enemy projectile or melee attack will <span style="color:red">fully replenish your health</span> up to the hard damage limit.`,
+    `H a v e &nbsp; f u n .`,
+    `If blown too far off the arena, <span style="color:lime">PUMP CHARGE</span>'s overcharge is a good way to get back.`,
+    `<span style="color:var(--smileos2-emphasis)">CHEATS</span> can be enabled in other levels by inputting <span style="color:var(--smileos2-emphasis)">🡡 🡡 🡣 🡣 🡠 🡢 🡠 🡢 B A</span> Enabling cheats will disable ranks`,
+    `You can pick up the cut weapons on the second floor.`
+]
+
+
+var click = new Audio('/static/content/smileos/SmileOS2Click.ogx');
+
+document.getElementById("smileos-about").addEventListener("click", function() {
+    click.play();
+    document.getElementById("smileos-window-title").innerHTML = "About";
+    document.getElementById("smileos-window-content").innerHTML = `
+        <span class="red">SmileOS</span>: is the operating system found on most digital interfaces found throughout
+        <span class="red">Hell</span>. <span class="red">SmileOS 1.0</span> is employed on pannels despite its poor user and developer experience to conserve 
+        blood after the war, while <span class="red">SmileOS 2.0</span> is used for terminals requireing higher blood consumption.
+    `;
+});
+
+document.getElementById("smileos-snake").addEventListener("click", function() {
+    click.play();
+    document.getElementById("smileos-window-title").innerHTML = "Snake";
+    document.getElementById("smileos-window-content").innerHTML = `
+        <img src="/static/content/smileos/KITR_Build.webp" alt="under construction">
+    `;
+});
+
+document.getElementById("smileos-leaderboard").addEventListener("click", function() {
+    click.play();
+    document.getElementById("smileos-window-title").innerHTML = "Leaderboard";
+    document.getElementById("smileos-window-content").innerHTML = `
+        <img src="/static/content/smileos/KITR_Build.webp" alt="under construction">
+    `;
+});
+
+document.getElementById("smileos-tip").addEventListener("click", function() {
+    click.play();
+    document.getElementById("smileos-window-title").innerHTML = "Tip of the Day";
+    document.getElementById("smileos-window-content").innerHTML = tips_of_the_day[Math.floor(Math.random() * tips_of_the_day.length)];
+});
+
+async function playAudio(url) {
+  return new Promise((resolve) => {
+    const audio = new Audio(url);
+    audio.addEventListener('ended', resolve); // Resolve the promise when audio ends
+    audio.play();
+  });
+}
+
+document.addEventListener("DOMContentLoaded", async function() {
+    document.getElementById("smileos-window-title").innerHTML = "Tip of the Day";
+    document.getElementById("smileos-window-content").innerHTML = tips_of_the_day[Math.floor(Math.random() * tips_of_the_day.length)];
+    await playAudio('/static/content/smileos/SmileOS2Startup.ogx');
+
+    var music = new Audio('/static/content/smileos/Shopmusic.ogx');
+    music.loop = true;
+    music.play();
+});

templates/bases/base.html

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{% block title %}Alfie's basement{% endblock %}</title>
+    <title>{% block title %}{{ name }}'s basement{% endblock %}</title>
     <link rel="icon" href="/static/content/general_images/icon.webp">
     <link rel="stylesheet" href="/static/css/bases/base.css">
     <meta name="description" content="{% block description %}server backend survivor{% endblock %}">
@@ -11,11 +11,11 @@
     <meta name="author" content="Alfie King">
     <meta name="robots" content="all">
     <meta name="theme-color" content="#63de90" data-react-helmet="true">
-    <meta property="og:site_name" content="Alfieking.dev">
-    <meta property="og:url" content="https://alfieking.dev/">
+    <meta property="og:site_name" content="{% if name == 'Toaster' %}proot.uk{% else %}alfieking.dev{% endif %}">
+    <meta property="og:url" content="https://{% if name == 'Toaster' %}proot.uk{% else %}alfieking.dev{% endif %}/">
     <meta property="og:title" content="{{ self.title() }}">
     <meta property="og:description" content="{{ self.description() }}">
-    <meta property="og:image" content="{% block og_image %}/static/content/general_images/icon.webp{% endblock %}">
+    <meta property="og:image" content="{% block og_image %}/static/content/{% if name == 'Toaster' %}toaster/Toaster_v1.0_sticker.png{% else %}general_images/icon.webp{% endif %}{% endblock %}">
     {% block head %}
     {% endblock %}
 </head>
@@ -28,6 +28,7 @@
                 <ul>
                     <li><a href="/">Home</a></li>
                     <li><a href="/toaster">Toaster</a></li>
+                    <li><a href="/terminal" class="ultrafont">Terminal</a></li>
                     <li><a href="/events">Events</a></li>
                     <li><a href="https://git.alfieking.dev/acetheking987">Gitea</a></li>
                     <li><a href="https://www.last.fm/user/acetheking987">LastFm</a></li>
@@ -76,6 +77,15 @@
             <a href="https://stellophiliac.github.io/roboring/Toaster/previous"><--</a>
             <a href="https://stellophiliac.github.io/roboring/Toaster/next">--></a> 
         </section>
+        <section>
+            <div id='ultraring'>
+                <script type="text/javascript" src="https://jack-dawlia.neocities.org/page/shrines/ultrakill/ULTRARING/onionring-variables.js"></script>
+                <script type="text/javascript" src="https://jack-dawlia.neocities.org/page/shrines/ultrakill/ULTRARING/onionring-widget-1.js"></script>
+                <noscript>
+                This site is part of <a href="https://jack-dawlia.neocities.org/page/shrines/ultrakill/ULTRARING">ULTRARING</a>!
+                </noscript>
+            </div>
+        </section>
         <section class="webring">
             <a href="https://keithhacks.cyou/furryring.php">Furryring</a><br>
             <a href="https://keithhacks.cyou/furryring.php?prev=alfieking.dev"><--</a>
@@ -89,9 +99,9 @@
     <main id="main">
         <header id="home">
             <div class="row">
-                <img src="/static/content/general_images/icon.webp">
+                <img src="/static/content/{% if name == 'Toaster' %}toaster/Toaster_v1.0_sticker.png{% else %}general_images/icon.webp{% endif %}">
                 <div>
-                    <h1>Alfie King</h1>
+                    <h1>{{ name }}</h1>
                     <h2 id="typing">server backend survivor</h2>
                 </div>
             </div>

templates/errors/error.html

@@ -1,6 +1,6 @@
 {% extends "bases/base.html" %}
 
-{% block title %}{{ code }} - {{ name }}{% endblock %}
+{% block title %}{{ code }} - {{ err_name }}{% endblock %}
 {% block description %}The page you are looking for does not exist.{% endblock %}
 
 {% block content %}

templates/index.html

@@ -1,6 +1,6 @@
 {% extends "bases/base.html" %}
 
-{% block title %}Home - Alfie's basement{% endblock %}
+{% block title %}Home - {{ name }}'s basement{% endblock %}
 {% block description %}server backend survivor{% endblock %}
 
 {% block head %}
@@ -63,12 +63,17 @@
         <img src="https://adriansblinkiecollection.neocities.org/stamps/e43.gif" alt="">
     </section>
 </div>
+<section class="smileos">
+    <span style="margin: auto;">
+        Try going to the <span style="color: #ff4343;">Terminal</span> for more information
+    </span>
+</section>
 <section>
     <h1>Projects & stuff</h1>
     <p>just some projects ive worked on over time</p>
     <ul>
         <li>
-            <h2>alfieking.dev</h2>
+            <h2>alfieking.dev/proot.uk</h2>
             <p>
                 This website is a project that I have been working on for a while now. I have made a few versions of it, but I have 
                 never been happy with them. I am quite happy with this version atm since it is more organized and has a design that I

templates/pages/events/crittersmk.html

@@ -1,6 +1,6 @@
 {% extends "bases/base.html" %}
 
-{% block title %}Critters MK - Alfie's basement{% endblock %}
+{% block title %}Critters MK - {{ name }}'s basement{% endblock %}
 {% block description %}furry corner{% endblock %}
 {% block og_image %}/static/content/Toaster_v1.0_Dark.png{% endblock %}
 {% block keywords %}

templates/pages/events/paws-n-pistons.html

@@ -1,6 +1,6 @@
 {% extends "bases/base.html" %}
 
-{% block title %}Paws'N'Pistons - Alfie's basement{% endblock %}
+{% block title %}Paws'N'Pistons - {{ name }}'s basement{% endblock %}
 {% block description %}furry corner{% endblock %}
 {% block og_image %}/static/content/Toaster_v1.0_Dark.png{% endblock %}
 {% block keywords %}

templates/terminal.html

@@ -0,0 +1,58 @@
+{% extends "bases/base.html" %}
+
+{% block title %}SmileOS 2.0{% endblock %}
+{% block description %}SmileOS 2.0{% endblock %}
+
+{% block head %}
+<link rel="stylesheet" href="/static/css/terminal.css">
+{% endblock %}
+
+{% block content %}
+<section id="terminal">
+    <div class="smileos-header">
+        <img src="/static/content/smileos/SmileOS_2_icon_smile.webp" alt="smile">
+        SmileOS 2.0
+        <img src="/static/content/smileos/SmileOS_2_top_button_5.png" alt="minimize" style="margin-left: auto;">
+        <img src="/static/content/smileos/SmileOS_2_top_button_4.png" alt="maximize">
+        <img src="/static/content/smileos/SmileOS_2_top_button_3.png" alt="close">
+    </div>
+    <div id="terminal-container">
+        <img src="/static/content/smileos/SmileOS2.webp" alt="logo" id="smileos-logo">
+        <div id="terminal-buttons">
+            <button class="terminal-button" id="smileos-tip">
+                Tip of the Day
+            </button>
+            <button class="terminal-button" id="smileos-snake">
+                Snake
+            </button>
+            <button class="terminal-button" id="smileos-leaderboard">
+                Leaderboard
+            </button>
+            <button class="terminal-button" id="smileos-about">
+                About
+            </button>
+        </div>
+        <div id="terminal-window">
+            <div class="smileos-header">
+                <img src="/static/content/smileos/SmileOS_2_icon_tip.webp" alt="tip">
+                <span id="smileos-window-title">Tip of the Day</span>
+                <img src="/static/content/smileos/SmileOS_2_top_button_5.png" alt="minimize" style="margin-left: auto;">
+                <img src="/static/content/smileos/SmileOS_2_top_button_4.png" alt="maximize">
+                <img src="/static/content/smileos/SmileOS_2_top_button_3.png" alt="close">
+            </div>
+            <div id="window-container">
+                <div id="window-content">
+                    <span id="smileos-window-content"><span class="red">SLAM BOUNCING</span>: Jump immediately after landing from a <span class="red">ground slam</span> to jump higher. The longer the ground slam fall, the higher the bounce.</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+<section>
+    Note: this page has background music, you may have to allow the music in the browser and refesh to let it play :P
+</section>
+{% endblock %}
+
+{% block scripts %}
+<script src="/static/js/smileos.js"></script>
+{% endblock %}

templates/toaster.html

@@ -1,6 +1,6 @@
 {% extends "bases/base.html" %}
 
-{% block title %}Toaster - Alfie's basement{% endblock %}
+{% block title %}Toaster - {{ name }}'s basement{% endblock %}
 {% block description %}furry corner{% endblock %}
 {% block og_image %}/static/content/Toaster_v1.0_Dark.png{% endblock %}
 {% block keywords %}