update

Reviewed-on: #1

.gitea/workflows/deploy.yaml

@@ -0,0 +1,33 @@
+name: Build and push container image
+run-name: ${{ gitea.actor }} is building and pushing container image
+on:
+  push:
+    branches:
+      - main
+
+env:
+  GITEA_DOMAIN: git.alfieking.dev
+  GITEA_REGISTRY_USER: acetheking987
+  RESULT_IMAGE_NAME: acetheking987/alfieking.dev
+
+jobs:
+  build-and-push-image:
+    runs-on: ubuntu-latest
+    container:
+      image: catthehacker/ubuntu:act-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+      - name: Log in to registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.GITEA_DOMAIN }}
+          username: ${{ env.GITEA_REGISTRY_USER }}
+          password: ${{ secrets.CONTAINER_REGISTRY_TOKEN }}
+      - name: Build and push image
+        uses: docker/build-push-action@v6
+        with:
+          push: true
+          tags: ${{ env.GITEA_DOMAIN }}/${{ env.RESULT_IMAGE_NAME }}:latest

.gitignore

@@ -2,3 +2,6 @@
 .env
 db.sqlite
 flask_session
+__pycache__
+app.log
+.vscode

dockerfile

@@ -18,8 +18,5 @@ COPY static static
 # Expose the port the app runs on
 EXPOSE 5000
 
-# Set environment variables
-ENV FLASK_APP=main.py
-
 # run the application
-ENTRYPOINT [ "gunicorn",  "-b", ":5000", "--access-logfile", "-", "--error-logfile", "-", "src.main:app" ]
+ENTRYPOINT [ "gunicorn",  "-b", ":5000", "--access-logfile", "-", "--error-logfile", "-", "src.wsgi:app" ]

requirements.txt

@@ -1,3 +1,4 @@
+psycopg2-binary
 python-dotenv
 flask-session
 requests

run.sh

@@ -0,0 +1,5 @@
+#!/bin/bash
+
+[ ! -f .env ] || export $(grep -v '^#' .env | xargs)
+
+flask --app src.wsgi.py --debug run 

src/database.py

@@ -1,42 +0,0 @@
-import sqlite3
-
-class Database:
-    def __init__(self, db_name='db.sqlite'):
-        self.connection = sqlite3.connect(db_name, check_same_thread=False)
-        self.cursor = self.connection.cursor()
-        self.create_snake_table()
-
-    def create_snake_table(self):
-        self.cursor.execute('''
-            CREATE TABLE IF NOT EXISTS snake (
-                id INTEGER PRIMARY KEY AUTOINCREMENT,
-                name TEXT NOT NULL,
-                score INTEGER NOT NULL
-            )
-        ''')
-        self.connection.commit()
-
-    def insert_snake(self, name, score):
-        old_score = self.get_snake_score(name)
-        print(f"Old score for {name}: {old_score}")
-        print(f"New score for {name}: {score}")
-        if old_score is not None and score <= old_score:
-            return
-        
-        self.cursor.execute('''
-            INSERT INTO snake (name, score)
-            VALUES (?, ?)
-        ''', (name, score))
-        self.connection.commit()
-
-    def get_snake_score(self, name):
-        self.cursor.execute('SELECT score FROM snake WHERE name = ? ORDER BY score DESC LIMIT 1', (name,))
-        result = self.cursor.fetchone()
-        return result[0] if result else None
-
-    def get_snake_scores(self):
-        self.cursor.execute('SELECT * FROM snake ORDER BY score DESC')
-        return self.cursor.fetchall()
-    
-    def close(self):
-        self.connection.close()

src/main.py

@@ -1,110 +0,0 @@
-from flask import Flask, request, render_template, send_from_directory
-from flask_session import Session
-from dotenv import load_dotenv
-from os import getenv as env
-import logging, requests
-try:
-    import src.database as database
-except ImportError:
-    import database
-
-
-logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(levelname)s - %(message)s')
-load_dotenv()
-
-
-app = Flask(
-    __name__,
-    template_folder=env('TEMPLATE_FOLDER', default='../templates'),
-    static_folder=env('STATIC_FOLDER', default='../static'),
-    static_url_path=env('STATIC_URL_PATH', default='/static')
-)
-app.config["SESSION_PERMANENT"] = True
-app.config["SESSION_TYPE"] = "filesystem"
-Session(app)
-
-
-db = database.Database(db_name=env('DB_NAME', default='db.sqlite'))
-
-
-@app.route('/')
-def index():
-    logging.info("Rendering index page")
-    return render_template('index.html')
-
-
-@app.route('/robots.txt')
-@app.route('/sitemap.xml')
-@app.route('/favicon.ico')
-def web_stuffs():
-    return send_from_directory(
-        app.static_folder,
-        request.path[1:],
-    )
-
-
-@app.route('/404')
-@app.errorhandler(404)
-def not_found():
-    unformatted_scores = db.get_snake_scores()
-    scores = [{'position': i + 1, 'name': score[1], 'score': score[2]} for i, score in enumerate(unformatted_scores)]
-    return render_template('404.html', scores=scores)
-
-
-@app.route('/404/submit', methods=['POST'])
-def snake_submit():
-    unformatted_scores = db.get_snake_scores()
-    scores = [{'position': i + 1, 'name': score[1], 'score': score[2]} for i, score in enumerate(unformatted_scores)]
-
-    data = request.form
-    username = data.get('username', '').strip()
-    score = data.get('snake-score', '').strip()
-    token = data.get('cap-token', '').strip()
-
-    if not username or not score or not token:
-        logging.error("Missing required fields: username=%s, score=%s, token=%s", username, score, token)
-        return render_template('404.html', scores=scores, error='Missing required fields'), 400
-    
-    try:
-        score = int(score)
-    except ValueError:
-        logging.error("Invalid score value: %s", score)
-        return render_template('404.html', scores=scores, error='Invalid score value'), 400
-    
-    if score <= 0 or score > 10000 or len(username) < 3 or len(username) > 20:
-        logging.error("Invalid score or username length: score=%s, username=%s", score, username)
-        return render_template('404.html', scores=scores, error='Invalid score or username length'), 400
-
-    cap_response = requests.post(
-        env('CAP_VERIFY_URL', default='https://<instance_url>/<key_id>/siteverify'),
-        json={
-            'secret': env('CAP_SECRET', default=''),
-            'response': token,
-        }
-    )
-
-    if cap_response.status_code != 200 or not cap_response.json().get('success', "false") != "true":
-        logging.error("Captcha verification failed: %s", cap_response.json())
-        return render_template('404.html', scores=scores, error='Captcha verification failed'), 400
-    
-    db.insert_snake(name=username, score=int(score))
-    logging.info("Snake submitted: name=%s, score=%d", username, score)
-
-    unformatted_scores = db.get_snake_scores()
-    scores = [{'position': i + 1, 'name': score[1], 'score': score[2]} for i, score in enumerate(unformatted_scores)]
-    return render_template('404.html', scores=scores, success='Score submitted successfully!')
-
-
-@app.route('/500')
-@app.errorhandler(500)
-def internal_error(error="An internal server error occurred."):
-    logging.error("Internal server error: %s", error)
-    return render_template('500.html'), 500
-
-
-if __name__ == '__main__':
-    app.run(
-        host=env('HOST', default='0.0.0.0'), 
-        port=env('PORT', default=5000),
-        debug=env('DEBUG', default=False).lower() == 'true'
-    )

src/routes/error_handlers.py

@@ -0,0 +1,48 @@
+# Imports
+from flask import Blueprint, render_template
+from os import getenv as env
+import logging
+
+import src.routes.snake as snake
+
+
+# Create blueprint
+bp = Blueprint(
+    'error_handlers',
+    __name__,
+    template_folder=env('TEMPLATE_FOLDER', default='../templates'),
+    static_folder=env('STATIC_FOLDER', default='../static')
+)
+
+
+# Create logger
+log = logging.getLogger(__name__)
+
+
+# Route for 500 error
+@bp.route('/500')
+@bp.app_errorhandler(500)
+def internal_server_error(error=None):
+    if error is not None:
+        log.error("Internal server error: %s", error)
+    return render_template('errors/500.html'), 500
+
+
+# Route for 404 error
+@bp.route('/404')
+@bp.app_errorhandler(404)
+def not_found(error=None):
+    if error is not None:
+        log.warning("Page not found: %s", error)
+    scores = snake.get_leaderboard()
+    token = snake.generate_start_token()
+    return render_template('errors/404.html', scores=scores, token=token, cap_key=env('CAP_KEY', default='')), 404 if error is not None else 200
+
+
+# Route for 400 error
+@bp.route('/400')
+@bp.app_errorhandler(400)
+def bad_request(error=None):
+    if error is not None:
+        log.warning("Bad request: %s", error)
+    return render_template('errors/400.html', error=error), 400

src/routes/generic.py

@@ -0,0 +1,65 @@
+# Imports
+from flask import Blueprint, render_template, request, abort, send_file
+from os import getenv as env
+import logging, os
+
+
+# Create blueprint
+bp = Blueprint(
+    'generic',
+    __name__,
+    template_folder=env('TEMPLATE_FOLDER', default='../templates'),
+    static_folder=env('STATIC_FOLDER', default='../static')
+)
+
+
+# Create logger
+log = logging.getLogger(__name__)
+
+
+# Route for index page
+@bp.route('/')
+def index():
+    return render_template('index.html')
+
+
+# Route for favicon
+@bp.route('/favicon.ico')
+def favicon():
+    return send_file('../static/content/other/favicon.ico')
+
+
+# Route for robots.txt
+@bp.route('/robots.txt')
+def robots():
+    return send_file('../static/content/other/robots.txt')
+
+
+# Route for sitemap.xml
+@bp.route('/sitemap.xml')
+def sitemap():
+    return send_file('../static/content/other/sitemap.xml')
+
+
+# Catch-all route for generic pages
+@bp.route('/<path:filename>')
+def catch_all(filename):
+    try: return render_template(f'pages/{filename if filename.endswith(".html") else filename + ".html"}')
+    except Exception as e:
+        # If the template is not found, check if it is a directory
+        os_path = os.path.join(bp.template_folder, 'pages', filename)[3:]
+        if os.path.isdir(os_path):
+            # walk through the directory and find all files
+            pages = []
+            for root, dirs, files_in_dir in os.walk(os_path):
+                for file in files_in_dir:
+                    pages.append(os.path.relpath(os.path.join(root, file), os_path))
+                for dir in dirs:
+                    pages.append(os.path.relpath(os.path.join(root, dir), os_path) + '/')
+
+            # If it is a directory, render a directory page
+            if not filename.endswith('/'): filename += '/'
+            return render_template('bases/directory.html', directory=filename, pages=pages)
+        
+        # If it is a file, return a 404 error
+        abort(404, f"Template '{filename}' not found: {e}")

src/routes/snake.py

@@ -0,0 +1,153 @@
+# Imports
+from flask import Blueprint, abort, request, redirect
+from os import urandom, getenv as env
+import src.utils.database as database
+import src.utils.cap as cap
+import logging, datetime, threading, time
+
+
+# Create blueprint
+bp = Blueprint(
+    'snake', 
+    __name__,
+    template_folder=env('TEMPLATE_FOLDER', default='../templates'),
+    static_folder=env('STATIC_FOLDER', default='../static')
+)
+
+
+# Create logger
+log = logging.getLogger(__name__)
+
+
+# Create database instance
+db = database.Database(
+    host=env('DB_HOST', default='localhost'),
+    port=env('DB_PORT', default=5432),
+    user=env('DB_USER', default='user'),
+    password=env('DB_PASSWORD', default='password'),
+    db_name=env('DB_NAME', default='db_name')
+)
+
+db.execute('CREATE TABLE IF NOT EXISTS snake_scores (id SERIAL PRIMARY KEY, name TEXT, score INTEGER)')
+db.execute('''CREATE TABLE IF NOT EXISTS snake_tokens (
+    id SERIAL PRIMARY KEY,
+    token TEXT UNIQUE NOT NULL,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    ip TEXT UNIQUE NOT NULL
+)''')
+
+# Input validation function
+def valid_length(value, min_length=1, max_length=100):
+    if not isinstance(value, str):
+        return False
+    return min_length <= len(value) <= max_length
+
+
+def valid_score(score, game_token):
+    start_time = db.execute('SELECT created_at FROM snake_tokens WHERE token = %s', (game_token,)).fetchone()
+    if not start_time:
+        log.error("Game token not found.")
+        return False
+    
+    start_time = datetime.datetime.fromisoformat(start_time[0])
+    current_time = datetime.datetime.now()
+    elapsed_time = (current_time - start_time).total_seconds()
+
+    if elapsed_time < score / 10 * 3 + 10: # assuming that each point takes 3 seconds to achieve and 10 seconds to start the game and do captcha
+        log.error("Score is too high for the elapsed time.")
+        return False
+    
+    if score <= 0 or score > 10000:  # Arbitrary upper limit for scores
+        log.error("Score is out of valid range.")
+        return False
+    
+    if score % 10 != 0:
+        log.error("Score is not a multiple of 10.")
+        return False
+    
+    # delete the token after score validation
+    db.execute('DELETE FROM snake_tokens WHERE token = %s', (game_token,))
+    log.info(f"Score {score} validated successfully for token {game_token}.")
+
+    return True
+
+
+# Route for score submission
+@bp.route('/snake/submit', methods=['POST'])
+def submit_score():
+    name = request.form.get('name')
+    score = request.form.get('score')
+    captcha_token = request.form.get('cap-token')
+    game_token = request.form.get('game_token')
+
+    if not cap.verify_captcha(captcha_token):
+        log.error("Captcha verification failed.")
+        abort(400, "Captcha verification failed")
+
+    if not name or not score or not captcha_token or not game_token:
+        log.error("Name, score, captcha token, or game token is missing.")
+        abort(400, "Missing required fields")
+    
+    if not valid_length(name, min_length=3, max_length=15):
+        log.error("Invalid name length.")
+        abort(400, "Name must be between 3 and 15 characters long.")
+    
+    if not valid_score(int(score), game_token):
+        log.error("Invalid score.")
+        abort(400, "Score not vilid, so either you are trying to cheat the leaderboard or something is seriously wrong.")
+
+    try:
+        db.execute('INSERT INTO snake_scores (name, score) VALUES (%s, %s)', (name, int(score)))
+        db.execute('DELETE FROM snake_tokens WHERE token = %s', (game_token,))
+        log.info(f"Score submitted: {name} - {score}")
+        return redirect('/404')
+    
+    except Exception as e:
+        log.error(f"Database error: {e}")
+        abort(500, "Internal server error while submitting score.")
+
+
+# Generate a unique game token
+def generate_start_token():
+    """Generate a unique start token for the game."""
+    token = urandom(16).hex()
+    ip = request.headers.get('X-Forwarded-For', request.remote_addr)
+
+    ip_token = db.execute('SELECT token FROM snake_tokens WHERE ip = %s', (ip,)).fetchone()
+    if ip_token:
+        log.info(f"Token already exists for IP: {ip}, reusing token.")
+        return ip_token[0]
+
+    log.info(f"Generated start token: {token}")
+    db.execute('INSERT INTO snake_tokens (token, ip) VALUES (%s, %s)', (token, ip))
+    return token
+
+
+# Get leaderboard scores
+def get_leaderboard():
+    """Fetch scores from the leaderboard."""
+    try:
+        scores = db.execute('SELECT name, score FROM snake_scores ORDER BY score DESC').fetchall()
+        leaderboard = [{'position': i + 1, 'name': score[0], 'score': score[1]} for i, score in enumerate(scores)]
+        log.info("Leaderboard fetched successfully.")
+        return leaderboard
+    except Exception as e:
+        log.error(f"Error fetching leaderboard: {e}")
+        return []
+
+
+# Clear all tokens older than 1 hour
+def clear_old_tokens():
+    while True:
+        try:
+            one_hour_ago = datetime.datetime.now() - datetime.timedelta(hours=1)
+            db.execute('DELETE FROM snake_tokens WHERE created_at < %s', (one_hour_ago,))
+            log.info("Old tokens cleared.")
+        except Exception as e:
+            log.error(f"Error clearing old tokens: {e}")
+        time.sleep(3600)  # Run every hour
+
+
+# Start the token clearing thread
+token_thread = threading.Thread(target=clear_old_tokens, daemon=True)
+token_thread.start()

src/utils/cap.py

@@ -0,0 +1,42 @@
+# Imports
+from os import getenv as env
+import requests, logging
+
+
+# Create logger
+log = logging.getLogger(__name__)
+
+
+# Function to verify CAPTCHA response
+def verify_captcha(token: str) -> bool:
+    """
+    Verify the CAP response token with the CAP server.
+    
+    Args:
+        token (str): The CAP response token to verify.
+
+    Returns:
+        bool: True if the token is valid, False otherwise.
+    """
+    if not token:
+        return False
+
+    try:
+        response = requests.post(
+            f"https://cap.alfieking.dev/{env('CAP_KEY', default='')}/siteverify",
+            json={
+                'secret': env('CAP_SECRET', default=''),
+                'response': token,
+            },
+            timeout=10
+        )
+
+        response.raise_for_status()
+        if response.status_code != 200:
+            log.error("CAPTCHA verification failed with status code: %s", response.status_code)
+            return False
+        return response.json().get('success', False)
+    
+    except Exception as e:
+        log.error("Error verifying CAPTCHA: %s", e)
+        return False

src/utils/database.py

@@ -0,0 +1,23 @@
+# Imports
+import psycopg2
+
+class Database:
+    def __init__(self, host, port, user, password, db_name):
+        self.connection = psycopg2.connect(
+            host=host,
+            port=port,
+            user=user,
+            password=password,
+            database=db_name
+        )
+        self.cursor = self.connection.cursor()
+
+    def execute(self, query, params=None):
+        if params is None:
+            params = []
+        self.cursor.execute(query, params)
+        self.connection.commit()
+        return self.cursor
+
+    def close(self):
+        self.connection.close()

src/wsgi.py

@@ -0,0 +1,58 @@
+# Imports
+from flask import Flask
+from flask_session import Session
+
+from dotenv import load_dotenv
+from os import getenv as env, listdir
+import logging, importlib
+
+
+# Load env
+load_dotenv()
+
+
+# Create console log handler
+console_log = logging.StreamHandler()
+console_log.setFormatter(logging.Formatter("\033[1;32m%(asctime)s\033[0m - \033[1;34m%(levelname)s\033[0m - \033[1;31m%(name)s\033[0m - %(message)s"))
+console_log.setLevel(logging.INFO)
+
+# Create file log handler
+file_log = logging.FileHandler(env('LOG_FILE', default='app.log'), mode=env('LOG_MODE', default='a'))
+file_log.setFormatter(logging.Formatter("%(asctime)s - %(levelname)s - %(name)s - %(message)s"))
+file_log.setLevel(logging.DEBUG)
+
+# Add handlers to the logger
+log = logging.getLogger()
+log.setLevel(logging.DEBUG)
+log.addHandler(console_log)
+log.addHandler(file_log)
+log.info("Logging initialized")
+
+
+# Create flask app
+app = Flask(
+    __name__,
+    template_folder=env('TEMPLATE_FOLDER', default='../templates'),
+    static_folder=env('STATIC_FOLDER', default='../static')
+)
+
+# Configure sessions
+app.config["SESSION_PERMANENT"] = True
+app.config["SESSION_TYPE"] = "filesystem"
+Session(app)
+
+
+# Load routes
+routes_dir = env('ROUTES_DIR', default='src/routes')
+for filename in listdir(routes_dir):
+    if not filename.endswith('.py') and filename.startswith('__'):
+        continue
+
+    module_name = f"{routes_dir.replace('/', '.')}.{filename[:-3]}"
+    try:
+        module = importlib.import_module(module_name)
+        if hasattr(module, 'bp'):
+            app.register_blueprint(module.bp)
+            log.info(f"Registered blueprint: {module_name}")
+    except Exception as e:
+        log.error(f"Failed to register blueprint {module_name}: {e}")

static/content/other/robots.txt

@@ -1,6 +1,8 @@
 User-agent: *
 Allow: /
-Disallow: /404.html
+Disallow: /404
+Disallow: /500
+Disallow: /400
 
 Sitemap: https://alfieking.dev/sitemap.xml
 

static/content/other/sitemap.xml

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://alfieking.dev/</loc>
+  </url>
+  <url>
+    <loc>https://alfieking.dev/toaster</loc>
+  </url>
+  <url>
+    <loc>https://alfieking.dev/events</loc>
+  </url>
+  <url>
+    <loc>https://alfieking.dev/events/paws-n-pistons</loc>
+  </url>
+  <url>
+    <loc>https://alfieking.dev/events/crittersmk</loc>
+  </url>
+</urlset>

static/css/400.css

@@ -0,0 +1,3 @@
+section h2 {
+    margin-top: 2rem !important;
+}

static/css/404.css

@@ -1,8 +1,12 @@
+#snakeContainer {
+    padding: 15px;
+}
+
 canvas#snakeCanvas {
-    margin: 15px;
     box-sizing: border-box;
     border: 2px solid var(--secondary-background-color);
     border-radius: 10px;
+    width: 100%;
 }
 
 form {
@@ -111,3 +115,41 @@ dialog p {
     margin: 0;
     font-size: 1rem;
 }
+
+@media screen and (max-width: 850px) {
+    .flex-row {
+        flex-direction: column;
+    }
+
+    form {
+        align-items: center;
+        width: 100%;
+    }
+
+    .min-width {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+}
+
+@media screen and (max-width: 650px) {
+    .mobileOnly {
+        display: flex;
+    }
+    
+    .pcOnly {
+        display: none;
+    }
+}
+
+@media screen and (min-width: 651px) {
+    .mobileOnly {
+        display: none !important;
+    }
+    
+    .pcOnly {
+        display: flex;
+    }
+}

static/css/base.css

@@ -1,7 +1,7 @@
 @import url('https://fonts.googleapis.com/css2?family=Fredoka:wdth,wght@125,700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
 @font-face {
     font-family:"Irken";
-    src:url("/static/content/Irken-Like-AllCaps.woff") format("woff");
+    src:url("/static/content/fonts/Irken-Like-AllCaps.woff") format("woff");
     font-weight:normal;
     font-style:normal;
 }
@@ -227,7 +227,7 @@ main section a {
     right: 0;
     bottom: 0;
     opacity: 0.1;
-    background-image: url('/static/content/background.png');
+    background-image: url('/static/content/general_images/background.png');
     background-repeat: no-repeat;
     background-position: 50% 0;
     background-size: cover;
@@ -235,100 +235,6 @@ main section a {
     display: none;
 }
 
-.blinkies {
-    justify-content: center;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-}
-
-.blinkies img {
-    width: 150px;
-    height: 20px;
-    transition: all 0.2s ease-in-out;
-}
-
-.blinkies img:hover {
-    transform: scale(1.1) rotate(5deg);
-}
-
-.blinkies img:nth-child(odd):hover {
-    transform: scale(1.1) rotate(-5deg);
-}
-
-section.rowsect {
-    width: 100%;
-    display: grid;
-    grid-template-columns: auto auto;
-    gap: 1rem;
-    backdrop-filter: none;
-    border: none;
-    padding: 0;
-}
-
-section.rowsect>div {
-    backdrop-filter: blur(2px) brightness(0.6);
-    border: var(--secondary-background-color) 2px solid;
-    border-radius: 10px;
-}
-
-.stamps {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    padding: 10px;
-    gap: 5px;
-    justify-content: center;
-    align-content: center;
-}
-
-.stamps img {
-    width: 99px;
-    height: 56px;
-    transition: all 0.2s ease-in-out;
-}
-
-.stamps img:hover {
-    transform: scale(1.1) rotate(5deg);
-}
-
-.stamps img:nth-child(odd):hover {
-    transform: scale(1.1) rotate(-5deg);
-}
-
-#spotify {
-    background-image: none;
-    backdrop-filter: blur(2px) brightness(0.6);
-    border: var(--secondary-background-color) 2px solid;
-    border-radius: 10px;
-    padding: 15px;
-    box-sizing: border-box;
-    background-repeat: no-repeat;
-    background-size: contain;
-    height: 300px;
-    width: 300px;
-    display: flex;
-    flex-direction: column;
-}
-
-#spotify-title {
-    font-size: 1.5rem;
-    font-weight: 900;
-    margin: 0;
-    padding: 0;
-    mix-blend-mode: difference;
-    color: white;
-}
-
-#spotify-artist {
-    color: white;
-    font-size: 1rem;
-    font-weight: 900;
-    margin: 0;
-    padding: 0;
-    mix-blend-mode: difference;
-}
-
 .haj {
     width: 100%;
     filter: drop-shadow(0 0 0.5rem rgb(88, 214, 245));
@@ -338,25 +244,6 @@ section.rowsect>div {
     font-family: var(--irken-font);
 }
 
-#button-collection {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    flex-wrap: wrap;
-}
-
-#button-collection img {
-    transition: all 0.2s ease-in-out;
-}
-
-#button-collection img:hover {
-    transform: scale(1.1) rotate(5deg);
-}
-
-#button-collection img:nth-child(odd):hover {
-    transform: scale(1.1) rotate(-5deg);
-}
-
 #alt-nav {
     display: none;
     backdrop-filter: blur(2px) brightness(0.6);
@@ -393,6 +280,34 @@ section.rowsect>div {
     font-weight: 900;
 }
 
+.title-font {
+    font-family: var(--title-font);
+}
+
+.flex-col {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.flex-row {
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+}
+
+.no-sect {
+    backdrop-filter: none;
+    border: none;
+    border-radius: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+a {
+    text-decoration: none;
+}
+
 @media screen and (max-width: 1000px) {
     body {
         background-color: var(--background-color);
@@ -426,6 +341,14 @@ section.rowsect>div {
 }
 
 @media screen and (max-width: 650px) {
+    .flex-row {
+        flex-direction: column;
+    }
+    
+    .flex-col {
+        flex-direction: row;
+    }
+
     header img {
         display: none;
     }
@@ -434,14 +357,12 @@ section.rowsect>div {
         justify-content: center;
     }
 
-    section.rowsect {
+    header div {
-        width: 100%;
+        text-align: center;
-        display: flex;
+    }
-        flex-direction: column;
+
-        gap: 1rem;
+    header h2 {
-        backdrop-filter: none;
+        display: none;
-        border: none;
-        padding: 0;
     }
 
     div#spotify {

static/css/cap.css

@@ -2,7 +2,6 @@ cap-widget {
   --cap-background: var(--secondary-background-color-but-slightly-transparent);
   --cap-border-color: var(--secondary-background-color);
   --cap-border-radius: 14px;
-  --cap-widget-height: 30px;
   --cap-widget-width: 230px;
   --cap-widget-padding: 14px;
   --cap-gap: 15px;

static/css/directory.css

@@ -0,0 +1,13 @@
+section#directory ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+section#directory li {
+    margin: 0.5rem 0;
+}
+
+section#directory a:hover {
+    scale: 1.05;
+}

static/css/gallery.css

@@ -0,0 +1,17 @@
+.gallery {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: 1rem;
+}
+
+.gallery img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 10px;
+}
+
+.gallery-date {
+    margin: 1rem 0 .25rem 0;
+    font-size: 2rem;
+}

static/css/index.css

@@ -0,0 +1,109 @@
+.blinkies {
+    justify-content: center;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+.blinkies img {
+    width: 150px;
+    height: 20px;
+    transition: all 0.2s ease-in-out;
+}
+
+.blinkies img:hover {
+    transform: scale(1.1) rotate(5deg);
+}
+
+.blinkies img:nth-child(odd):hover {
+    transform: scale(1.1) rotate(-5deg);
+}
+
+.stamps {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    padding: 10px;
+    gap: 5px;
+    justify-content: center;
+    align-content: center;
+}
+
+.stamps img {
+    width: 99px;
+    height: 56px;
+    transition: all 0.2s ease-in-out;
+}
+
+.stamps img:hover {
+    transform: scale(1.1) rotate(5deg);
+}
+
+.stamps img:nth-child(odd):hover {
+    transform: scale(1.1) rotate(-5deg);
+}
+
+#spotify {
+    background-image: none;
+    backdrop-filter: blur(2px) brightness(0.6);
+    border: var(--secondary-background-color) 2px solid;
+    border-radius: 10px;
+    padding: 15px;
+    box-sizing: border-box;
+    background-repeat: no-repeat;
+    background-size: contain;
+    height: 300px;
+    width: 300px;
+    display: flex;
+    flex-direction: column;
+}
+
+#spotify-title {
+    font-size: 1.5rem;
+    font-weight: 900;
+    margin: 0;
+    padding: 0;
+    mix-blend-mode: difference;
+    color: white;
+}
+
+#spotify-artist {
+    color: white;
+    font-size: 1rem;
+    font-weight: 900;
+    margin: 0;
+    padding: 0;
+    mix-blend-mode: difference;
+}
+
+#button-collection {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+#button-collection img {
+    transition: all 0.2s ease-in-out;
+}
+
+#button-collection img:hover {
+    transform: scale(1.1) rotate(5deg);
+}
+
+#button-collection img:nth-child(odd):hover {
+    transform: scale(1.1) rotate(-5deg);
+}
+
+@media screen and (max-width: 650px) {
+    div#spotify {
+        box-sizing: border-box;
+        background-repeat: no-repeat;
+        background-size: contain;
+        height: 100%;
+        width: auto;
+        aspect-ratio: 1/1;
+        display: flex;
+        flex-direction: column;
+    }
+}

static/css/toaster.css

@@ -0,0 +1,84 @@
+ul#toaster-specs {
+    padding: 0;
+    margin: 5px 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 400px;
+}
+
+ul#toaster-specs li {
+    display: flex;
+    justify-content: space-between;
+    gap: 2rem;
+    height: 35px;
+    align-items: center;
+}
+
+.color {
+    border-radius: 10px;
+    border: 2px solid var(--secondary-background-color);
+    padding: 1px 5px;
+    box-sizing: border-box;
+    height: min-content;
+}
+
+#toaster-img {
+    max-width: 100%;
+    object-fit: contain;
+    border-radius: 10px;
+    border: 2px solid var(--secondary-background-color);
+}
+
+.fill-height {
+    height: 100%;
+}
+
+.fur-meet-gallery-small {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 5px;
+}
+
+.fur-meet-gallery-small img {
+    width: 150px;
+    height: 150px;
+    object-fit: cover;
+    border-radius: 10px;
+    border: 2px solid var(--secondary-background-color);
+}
+
+.fur-meet-gallery-small img:hover {
+    transform: scale(1.05);
+    transition: transform 0.2s ease-in-out;
+    cursor: pointer;
+}
+
+#fur-meets {
+    list-style: none;
+    padding: 0;
+    margin: 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+@media screen and (max-width: 740px) {
+    .flex-row {
+        flex-direction: column;
+    }
+    
+    .flex-col {
+        flex-direction: row;
+    }
+
+    #toaster-img {
+        width: 100%;
+    }
+}
+
+@media screen and (max-width: 690px) {
+    .flex-col {
+        flex-direction: column;
+    }
+}

static/js/base.js

@@ -20,12 +20,12 @@ const values = [
     "Loud Music enjoyer",
     "part time femboy :<",
 ];
-var direction = 1;
+let typing_direction = 1;
-var text = "";
+let text = "";
-var speed = 100; 
+let speed = 100; 
-var selectedValue = 0;
+let selectedValue = 0;
-var currentValueIndex = 0;
+let currentValueIndex = 0;
-var pause = false;
+let pause = false;
 
 function randomValue() {
     selectedValue = Math.floor(Math.random() * values.length);
@@ -33,12 +33,12 @@ function randomValue() {
 }
 
 function type() {
-    if (direction == 1) {
+    if (typing_direction == 1) {
         if (currentValueIndex < values[selectedValue].length) {
             text += values[selectedValue][currentValueIndex];
             currentValueIndex++;
         } else {
-            direction = -1;
+            typing_direction = -1;
             pause = true;
         }
     } else {
@@ -46,7 +46,7 @@ function type() {
             text = text.slice(0, -1);
             currentValueIndex--;
         } else {
-            direction = 1;
+            typing_direction = 1;
             randomValue();
         }
     }
@@ -55,7 +55,7 @@ function type() {
 function typing() {
     type();
     document.getElementById("typing").innerHTML = "$ " + text;
-    if (direction == 1) {
+    if (typing_direction == 1) {
         speed = 80 + Math.random() * 100;
     } else {
         speed = 60 + (Math.random() * 100) / 2;
@@ -72,7 +72,7 @@ typing();
 
 // HIDDEN STUFF (shh don't tell anyone >:3)
 
-var last5Chars = "";
+let last5Chars = "";
 
 document.addEventListener('keydown', function(event) {
     last5Chars += event.key;
@@ -118,7 +118,7 @@ if (document.getElementById('spotify')) {
 // load buttons
 
 function loadButtons() {
-    fetch('/static/content/buttons.txt').then(response => {
+    fetch('/static/content/other/buttons.txt').then(response => {
         return response.text();
     }).then(data => {
         container = document.getElementById('button-collection');

static/js/snake.js

@@ -154,7 +154,7 @@ function gameLoop() {
         setTimeout(gameLoop, 100);
     } else {
         document.removeEventListener('keydown', changeDirection);
-        document.getElementById('snake-score').value = score;
+        document.getElementById('score').value = score;
         alert(`Game Over! Your score: ${score}`);
         menu();
     }

static/sitemap.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
-  <url>
-    <loc>https://www.example.com/index.html</loc>
-  </url>
-</urlset>

templates/bases/base.html

@@ -4,18 +4,18 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{% block title %}Alfie's basement{% endblock %}</title>
-    <link rel="icon" href="/static/content/icon.webp">
+    <link rel="icon" href="/static/content/general_images/icon.webp">
     <link rel="stylesheet" href="/static/css/base.css">
     <meta name="description" content="{% block description %}server backend survivor{% endblock %}">
-    <meta name="keywords" content="Alfie King, Alfie, King, Alfieking, Alfieking.dev, dev, server">
+    <meta name="keywords" content="{% block keywords %}Alfie King, Alfie, King, Alfieking, Alfieking.dev, dev, server, developer, backend, selfhost, homelab{% endblock %}">
     <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:url" content="https://alfieking.dev/">
     <meta property="og:title" content="{{ self.title() }}">
     <meta property="og:description" content="{{ self.description() }}">
-    <meta property="og:image" content="static/content/icon.webp">
+    <meta property="og:image" content="{% block og_image %}/static/content/general_images/icon.webp{% endblock %}">
     {% block head %}
     {% endblock %}
 </head>
@@ -27,6 +27,8 @@
                 <h1>Things to see :3</h1>
                 <ul>
                     <li><a href="/">Home</a></li>
+                    <li><a href="/toaster">Toaster</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>
                     <li><a href="https://prismic.alfieking.dev">Prismic</a></li>
@@ -45,28 +47,29 @@
         <section id="buttons">
             <h1>BUTTONS</h1>
             <ul>
-                <li><a href="https://dimden.dev/"><img src="https://dimden.dev/services/images/88x31.gif" alt="dimden"></a></li>
+                <li><a href="https://emmixis.net/"><img src="/static/content/buttons/emmixis.gif" alt="emmixis"></a></li>
-                <li><a href="https://ne0nbandit.neocities.org/"><img src="https://ne0nbandit.github.io/assets/img/btn/mine/nbbanner.png" alt="ne0nbandit"></a></li>
+                <li><a href="https://dimden.dev/"><img src="https://dimden.dev/services/images/88x31.gif" alt="dimden"></a></li><!-- hotlink on purpose -->
-                <li><a href="https://thinliquid.dev"><img src="https://thinliquid.dev/thnlqd.png" alt="thinliquid"></a></li>
+                <li><a href="https://ne0nbandit.neocities.org/"><img src="/static/content/buttons/ne0nbandit.png" alt="ne0nbandit"></a></li>
-                <li><a href="https://nekoweb.org/"><img src="https://nekoweb.org/assets/buttons/button6.gif" alt="nekoweb"></a><!-- button by s1nez.nekoweb.org --></li>
+                <li><a href="https://thinliquid.dev"><img src="/static/content/buttons/thnlqd.png" alt="thinliquid"></a></li>
-                <li><a href="https://s1nez.nekoweb.org/"><img src="https://s1nez.nekoweb.org/BUTTON.gif" alt="s1nez"></a></li>
+                <li><a href="https://nekoweb.org/"><img src="/static/content/buttons/nekoweb.gif" alt="nekoweb"></a><!-- button by s1nez.nekoweb.org --></li>
-                <li><a href="https://beeps.website"><img src="https://beeps.website/assets/images/88x31-d.gif" alt="beeps"></a></li>
+                <li><a href="https://s1nez.nekoweb.org/"><img src="/static/content/buttons/s1nez.gif" alt="s1nez"></a></li>
-                <li><a href="https://itsnotstupid.com"><img src="https://itsnotstupid.com/pics/button1.gif" alt="itsnotstupid"></a></li>
+                <li><a href="https://beeps.website"><img src="/static/content/buttons/beeps.gif" alt="beeps"></a></li>
-                <li><a href='https://blinkies.cafe'><img src='https://blinkies.cafe/b/display/blinkiesCafe-badge.gif' alt='blinkies.cafe | make your own blinkies!'></a></li>
+                <li><a href="https://itsnotstupid.com"><img src="/static/content/buttons/insia.gif" alt="itsnotstupid"></a></li>
-                <li><a href="https://eightyeightthirty.one"><img src="https://eightyeightthirty.one/88x31.png" alt="88x31"></a></li>
+                <li><a href='https://blinkies.cafe'><img src='/static/content/buttons/blinkiescafe.gif' alt='blinkies.cafe | make your own blinkies!'></a></li>
-                <li><a href="https://neocities.org"><img src="https://cyber.dabamos.de/88x31/neocities-now.gif" alt="neocities"></a></li>
+                <li><a href="https://eightyeightthirty.one"><img src="/static/content/buttons/8831.png" alt="88x31"></a></li>
-                <li><a href="https://tuxedodragon.art"><img src="https://tuxedodragon.art/tuxedodragon%2088x31.gif" alt="tuxedodragon"></a></li>
+                <li><a href="https://neocities.org"><img src="/static/content/buttons/neocities.gif" alt="neocities"></a></li>
+                <li><a href="https://tuxedodragon.art"><img src="/static/content/buttons/tuxedodragon.gif" alt="tuxedodragon"></a></li>
             </ul>
         </section>
         <section>
             <pre class="vsmoltext">      |\      _,,,---,,_<br>ZZZzz /,`.-'`'    -.  ;-;;,_<br>     |,4-  ) )-,_. ,\ (  `'-'<br>    '---''(_/--'  `-'\_)</pre>
         </section>
-        <img src="/static/content/haj.gif" alt="haj" class="haj">
+        <img src="/static/content/general_images/haj.gif" alt="haj" class="haj">
     </div>
     <main id="main">
         <header id="home">
             <div class="row">
-                <img src="/static/content/icon.webp">
+                <img src="/static/content/general_images/icon.webp">
                 <div>
                     <h1>Alfie King</h1>
                     <h2 id="typing">server backend survivor</h2>
@@ -75,6 +78,8 @@
         </header>
         <nav id="alt-nav">
             <ul>
+                <li><a href="/">Home</a></li>
+                <li><a href="/toaster">Toaster</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>
                 <li><a href="https://prismic.alfieking.dev">Prismic</a></li>

templates/bases/directory.html

@@ -0,0 +1,22 @@
+{% extends "bases/base.html" %}
+
+{% block title %}/{{ directory }} - Alfie's basement{% endblock %}
+{% block description %}server backend survivor{% endblock %}
+
+{% block head %}
+<link rel="stylesheet" href="/static/css/directory.css">
+{% endblock %}
+
+{% block scripts %}
+{% endblock %}
+
+{% block content %}
+<section id="directory">
+    <h1>/{{ directory }}</h1>
+    <ul>
+        {% for page in pages %}
+            <li><a href="/{{ directory }}{{ page.split('.')[0] }}">{{ page.split('.')[0] }}</a></li>
+        {% endfor %}
+    </ul>
+</section>
+{% endblock %}

templates/errors/400.html

@@ -0,0 +1,29 @@
+{% extends "bases/base.html" %}
+
+{% block title %}400 - Internal Server Error{% endblock %}
+{% block description %}Bad request. The server could not understand the request due to invalid syntax.{% endblock %}
+
+{% block head %}
+<link rel="stylesheet" href="/static/css/400.css">
+{% endblock %}
+
+{% block content %}
+<section>
+    <h1>400 - Bad Request</h1>
+    <p>
+        What did you do? The server could not understand the request due to invalid syntax. Please check your request and try again.
+    </p>
+    <h2>The fuckup in question</h2>
+    <p>
+        {% if error %}
+            {{ error }}
+        {% else %}
+            No specific error message provided.
+        {% endif %}
+    </p>
+    <h2>What to do now</h2>
+    <p>
+        idk :P
+    </p>
+</section>
+{% endblock %}

templates/errors/404.html

@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "bases/base.html" %}
 
 {% block title %}404 - Not Found{% endblock %}
 {% block description %}The page you are looking for does not exist.{% endblock %}
@@ -14,17 +14,25 @@
     <p>
         It seems like the thing you are looking for is not here :[
         <br><br>
+        <span class="pcOnly">
         while you're here, why not play some snake?
+        </span>
+        <span class="mobileOnly">
+        You can't play snake on mobile, sorry :(
+        </span>
     </p>
-    <canvas id="snakeCanvas"></canvas>
+    <div class="pcOnly" id="snakeContainer">
+        <canvas id="snakeCanvas"></canvas>
+    </div>
 </section>
-<section class="flex-row">
+<section class="pcOnly flex-row">
     <section class="min-width">
         <h2>Submit score</h2>
-        <form action="/404/submit" method="POST" id="snakeForm">
+        <form action="/snake/submit" method="POST" id="snakeForm">
-            <input type="text" id="username" name="username" placeholder="Your name" required>
+            <input type="text" id="name" name="name" maxlength=15 minlength=3 placeholder="Your name" required>
-            <cap-widget id="captcha" data-cap-api-endpoint="https://cap.alfieking.dev/57d36430b9cb/api/"></cap-widget>
+            <cap-widget id="captcha" data-cap-api-endpoint="https://cap.alfieking.dev/{{ cap_key }}/"></cap-widget>
-            <input type="hidden" id="snake-score" name="snake-score" value="0">
+            <input type="hidden" id="score" name="score" value="0">
+            <input type="hidden" id="game_token" name="game_token" value="{{ token}}">
             <button type="submit" id="submit">Submit</button>
         </form>
     </section>
@@ -41,6 +49,18 @@
         </ul>
     </section>
 </section>
+<section class="max-width mobileOnly" id="snakeLeaderboardSection">
+    <h2>Leaderboard</h2>
+    <ul id="snakeLeaderboard">
+        {% for score in scores %}
+        <li>
+            <span>{{ score.position }}</span>
+            <span>{{ score.name }}</span>
+            <span>{{ score.score }}</span>
+        </li>
+        {% endfor %}
+    </ul>
+</section>
 {% if error %}
 <dialog id="errorDialog">
     <h2>Error</h2>

templates/errors/500.html

@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "bases/base.html" %}
 
 {% block title %}500 - Internal Server Error{% endblock %}
 {% block description %}An unexpected error occurred on the server.{% endblock %}

templates/index.html

@@ -1,8 +1,12 @@
-{% extends "base.html" %}
+{% extends "bases/base.html" %}
 
-{% block title %}Alfie's basement{% endblock %}
+{% block title %}Home - Alfie's basement{% endblock %}
 {% block description %}server backend survivor{% endblock %}
 
+{% block head %}
+<link rel="stylesheet" href="/static/css/index.css">
+{% endblock %}
+
 {%block content %}
 <section>
     <h1>A lil bit abt me</h1>
@@ -32,14 +36,14 @@
     <img src="https://s1nez.nekoweb.org/g/ggg/gg%20(32).gif" alt="">
     <img src="https://s1nez.nekoweb.org/img/7dcd20d4.gif" alt="">
 </section>
-<section class="rowsect">
+<div class="flex-row">
     <a href="" id="spotify-link">
         <div id="spotify">
             <h1 id="spotify-title"></h1>
             <h2 id="spotify-artist"></h2>
         </div>
     </a>
-    <div class="stamps">
+    <section class="stamps">
         <img src="https://s1nez.nekoweb.org/img/other/ba4ba47a.png" alt="">
         <img src="https://s1nez.nekoweb.org/img/fa02abd7.png" alt="">
         <img src="https://s1nez.nekoweb.org/img/hc/hc%20(172).gif" alt="">
@@ -56,8 +60,8 @@
         <img src="https://adriansblinkiecollection.neocities.org/stamps/g5.gif" alt="">
         <img src="https://adriansblinkiecollection.neocities.org/stamps/e40.gif" alt="">
         <img src="https://adriansblinkiecollection.neocities.org/stamps/e43.gif" alt="">
-    </div>
+    </section>
-</section>
+</div>
 <section>
     <h1>Projects & stuff</h1>
     <p>just some projects ive worked on over time</p>
@@ -100,6 +104,16 @@
     <h1>Some News</h1>
     <h6>(dont expect this to be updated often tho :P)</h6>
     <ul>
+        <li>
+            <h2>28-06-2025</h2>
+            <p>
+                I have updated the site a bit, I have added a few more featues, but the main update is that the site is now using flask as a backend.
+                I didn't want to use a framework at first, mainly because I like the simplicity of a static site, but it allows me to use templatiing and makes
+                adding new features easier and more organized. The site is also more interacive now, with a few secrets on some of the pages. I still plan on adding
+                more secrets and features. I also plan on adding a blog section, that I will move this to, so that I can give updates on the site and other things
+                that I find interesting.
+            </p>
+        </li>
         <li>
             <h2>18-06-2025</h2>
             <p>

templates/pages/events/crittersmk.html

@@ -0,0 +1,51 @@
+{% extends "bases/base.html" %}
+
+{% block title %}Critters MK - Alfie's basement{% endblock %}
+{% block description %}furry corner{% endblock %}
+{% block og_image %}/static/content/Toaster_v1.0_Dark.png{% endblock %}
+{% block keywords %}
+Alfie King, Alfie, King, Alfieking, Alfieking.dev, dev, server, developer, backend, selfhost, homelab, furry, protogen, toaster, 
+fursona, fur, furmeet, fursuit, persona, character, protogen fursona, protogen character, protogen fursona design, 
+protogen character design, critters mk, critters cmk, paws n pistons, paws'n'pistons, paws n pistons furry meet, paws'n'pistons furry meet, 
+protogen v1.0, toaster v1.0
+{% endblock %}
+
+{% block head %}
+<link rel="stylesheet" href="/static/css/gallery.css">
+{% endblock %}
+
+{% block content %}
+<section>
+    <h1>Critters MK</h1>
+    <p>
+        Critters Mk is a fur meet based in Milton Keynes, UK. They hold a meet once a month on saturdays around the area, usually at local parks. They are a
+        therian friendly group, and there are a variety of fursuiters and non-fursuiters that attend. The group is very welcoming to newcomers, and the meets 
+        are a great way to meet new people in the furry community. There is also atleast one fursuit maker in the group to my knowledge, so if you are looking
+        for a fursuit, you may be able to find one there. The group is also very active on Telegram, and they have a Twitter page where they post updates about 
+        the meets.
+        <br><br>
+        I have attended a few of the meets, and I enjoyed talking to the people there. I plan on attending every meet I can in the future, as well as any other local events
+        that I can find. If you are in the area, I highly recommend checking them out. You can find more information about the group on their
+        <a href="https://x.com/cmkfurmeet" target="_blank">Twitter page</a> (I don't know if I can link their Telegram group :<)
+    </p>
+</section>
+<section>
+    <h1>Photos :3</h1>
+    <p>
+        Here are some photos from the meets I have attended. I will add more as I attend more meets.
+    </p>
+    <h2 class="gallery-date">26th July 2025</h2>
+    <div class="gallery">
+        <img src="/static/content/fur_meets/26-07-2025_critters_mk/PXL_20250726_152110445.jpg" alt="Critters MK">
+        <img src="/static/content/fur_meets/26-07-2025_critters_mk/PXL_20250726_155134418.jpg" alt="Critters MK">
+        <img src="/static/content/fur_meets/26-07-2025_critters_mk/PXL_20250726_155226274.jpg" alt="Critters MK">
+        <img src="/static/content/fur_meets/26-07-2025_critters_mk/PXL_20250726_155434701.jpg" alt="Critters MK">
+    </div>
+    <h2 class="gallery-date">23rd Aug 2025</h2>
+    <div class="gallery">
+        <img src="/static/content/fur_meets/23-08-2025_critters_mk/PXL_20250823_130640362.jpg" alt="Critters MK">
+        <img src="/static/content/fur_meets/23-08-2025_critters_mk/PXL_20250823_130648109.jpg" alt="Critters MK">
+        <img src="/static/content/fur_meets/23-08-2025_critters_mk/PXL_20250823_130659800.jpg"" alt="Critters MK">
+    </div>
+</section>
+{% endblock %}

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

@@ -0,0 +1,64 @@
+{% extends "bases/base.html" %}
+
+{% block title %}Paws'N'Pistons - Alfie's basement{% endblock %}
+{% block description %}furry corner{% endblock %}
+{% block og_image %}/static/content/Toaster_v1.0_Dark.png{% endblock %}
+{% block keywords %}
+Alfie King, Alfie, King, Alfieking, Alfieking.dev, dev, server, developer, backend, selfhost, homelab, furry, protogen, toaster, 
+fursona, fur, furmeet, fursuit, persona, character, protogen fursona, protogen character, protogen fursona design, 
+protogen character design, critters mk, critters cmk, paws n pistons, paws'n'pistons, paws n pistons furry meet, paws'n'pistons furry meet, 
+protogen v1.0, toaster v1.0
+{% endblock %}
+
+{% block head %}
+<link rel="stylesheet" href="/static/css/gallery.css">
+<style>
+    #woooooo {
+        max-width: 50%;
+        height: auto;
+        border-radius: 10px;
+        margin: 10px;
+    }
+
+    @media (max-width: 600px) {
+        #woooooo {
+            max-width: 100%;
+        }
+    }
+</style>
+{% endblock %}
+
+{% block content %}
+<section>
+    <h1>Paws'N'Pistons</h1>
+    <p>
+        Paws'N'Pistons is a furry car meet that takes place across the UK. They are a very welcoming group that is open to all furries, regardless 
+        of whether you have a car or not. Their meets last all day and involve multiple hours of driving across the country to various locations. They
+        also have a <a href="https://pawsnpistons.com" target="_blank">shop</a> where you can buy car stickers and other merch. They also hand out free
+        stickers at their meets. Their main social media is their <a href="https://www.instagram.com/paws_n_pistons/" target="_blank">Instagram</a>, where 
+        they post photos from their meets and updates about upcoming events.
+        <br><br>
+        I've only attended one meet on the 3rd of August 2025, and it was a great experience. The people were very chill and I enjoyed driving around with them. 
+        ALSO, one of them offered to let me try their fursuit!!! Im now going to speedrun going broke trying to get a fursuit of my own cus of this :3 (I was 
+        already planning on getting one, but this just made me want one more).
+        <br>
+        <img src="/static/content/fur_meets/03-08-2025_paws_n_pistons/PXL_20250803_200906329.jpg" alt="me in a fursuit" id="woooooo">
+        <br>
+        The fursuit belongs to <a href="https://www.tiktok.com/@trickythefox" target="_blank">Tricky the Fox</a>, they are a very chill person and I had a great time talking to them ^w^.
+    <h1>Photos :3</h1>
+    <p>
+        Here are some photos from the meets I have attended. I will add more as I attend more meets.
+    </p>
+    <h2 class="gallery-date">3rd Aug 2025</h2>
+    <div class="gallery">
+        <img src="/static/content/fur_meets/03-08-2025_paws_n_pistons/PXL_20250803_141943558.jpg" alt="Paws'N'Pistons">
+        <img src="/static/content/fur_meets/03-08-2025_paws_n_pistons/PXL_20250803_150138054.jpg" alt="Paws'N'Pistons">
+        <img src="/static/content/fur_meets/03-08-2025_paws_n_pistons/PXL_20250803_150249916.jpg" alt="Paws'N'Pistons">
+        <img src="/static/content/fur_meets/03-08-2025_paws_n_pistons/PXL_20250803_183614897.jpg" alt="Paws'N'Pistons">
+        <img src="/static/content/fur_meets/03-08-2025_paws_n_pistons/PXL_20250803_140629639.jpg" alt="Paws'N'Pistons">
+        <img src="/static/content/fur_meets/03-08-2025_paws_n_pistons/PXL_20250803_141242090.jpg" alt="Paws'N'Pistons">
+        <img src="/static/content/fur_meets/03-08-2025_paws_n_pistons/PXL_20250803_182023562.jpg" alt="Paws'N'Pistons">
+        <img src="/static/content/fur_meets/03-08-2025_paws_n_pistons/PXL_20250803_184321576.jpg" alt="Paws'N'Pistons">
+    </div>
+</section>
+{% endblock %}

templates/pages/toaster.html

@@ -0,0 +1,107 @@
+{% extends "bases/base.html" %}
+
+{% block title %}Toaster - Alfie's basement{% endblock %}
+{% block description %}furry corner{% endblock %}
+{% block og_image %}/static/content/Toaster_v1.0_Dark.png{% endblock %}
+{% block keywords %}
+Alfie King, Alfie, King, Alfieking, Alfieking.dev, dev, server, developer, backend, selfhost, homelab, furry, protogen, toaster, 
+fursona, fur, furmeet, fursuit, persona, character, protogen fursona, protogen character, protogen fursona design, 
+protogen character design, critters mk, critters cmk, paws n pistons, paws'n'pistons, paws n pistons furry meet, paws'n'pistons furry meet, 
+protogen v1.0, toaster v1.0
+{% endblock %}
+
+{% block head %}
+<link rel="stylesheet" href="/static/css/toaster.css">
+{% endblock %}
+
+{% block content %}
+<section>
+    <h1>Toaster</h1>
+    <p>
+        heya, you may have guessed by now that I am a furry. Specifically my fursona is a protogen called Toaster. I didn't actually choose the name,
+        I just couldn't think of a name and a few people just started calling me Toaster because I am a protogen.
+        <br><br>
+        Originally (before I was a furry), I had a unnamed charcater that was just saved as "lil_guy.png" in my files. He is the tv head character
+        that I the main "mascot" of my website, I drew him a while ago when I was planning to make a functional tv head.
+        <br><br>
+        Once I eventually got out of the furry closet, I was trying to think of a species to choose and I thought that protogens are a mix of having a
+        screen for a face and being fluffy, so I thought it would be a good fit. I still want to keep the tv head character in some places since I rly like him,
+        however I plan on using Toaster more. So he may become the main mascot of my website "soon ish".
+    </p>
+</section>
+<div class="flex-row">
+    <section>
+        <h1>Specs</h1>
+        <h6>(Additional specs coming "soon ish", Very subject to change :P)</h6>
+        <ul id="toaster-specs">
+            <li><b>Species:</b><span>Protogen</span></li>
+            <li><b>Version:</b><span>v1.0</span></li>
+            <li><b>Height:</b><span>1.73m</span></li>
+            <li><b>Weight:</b><span>Mild Chonk</span></li>
+            <li><b>Base Color:</b><span class="color" style="background-color: #0e0c11">#0e0c11</span></li>
+            <li><b>Accent Color:</b><span class="color" style="background-color: #a685c6">#a685c6</span></li>
+            <li><b>Operating System:</b><span>Proot OS&trade;</span></li>
+            <li><b>Processor:</b><span>Fried Potato</span></li>
+            <li><b>RAM:</b><span>Not Enough</span></li>
+            <li><b>Storage:</b><span>1.44MB Floppy</span></li>
+            <li><b>Ports:</b><span>USB-C</span></li> <!-- You know exactly where this is dont you :3 (note: this is a joke (probably), there are ports are behind the round screens tho)-->
+            <li><b>Accessories:</b><span>"Neck Armor"</span></li>
+            <li><b>Bugs:</b><span>Anxiety<sup>2</sup></span></li>
+            <li><b>Gender:</b><span>Male</span></li>
+        </ul>
+    </section>
+    <div class="flex-col">
+        <img src="/static/content/toaster/Toaster_v1.0_Dark.png" alt="toaster" id="toaster-img">
+        <section class="fill-height">
+            <p>
+                NEW AND IMPROVED! Toaster v1.0 is here!
+                <br><br>
+                Toaster v1.0 is the first version of Toaster that I have drawn that I am actually happy with.
+                Im still working on the design, so it may change in the future, but I think I like this enough to keep it for now.
+            </p>
+        </section>
+    </div>
+</div>
+<section>
+    <h1>Plans</h1>
+    <p>
+        I plan on drawing Toaster "properly" soon, im quite happy with the current design, but I want to add more detail and personality to him.
+        I also want to make a proper ref sheet for him, so it looks like I have a decent idea of what im doing, cus im kinda winging it right now.
+        <br><br>
+        I also wanna try make a fursuit head of Toaster, but I am not sure how well that will go. I can handle the electronics and I know a few people
+        with 3d printers, so I can get the base printed. However I have never made a fursuit before, so idk how well it will go, expecially with the fur.
+        I have no clue how to make the fur look good, so I may just end up getting someone else to help me with that. Budget is also a concern, cus im
+        clinically broke. So rn im working of whatever I can buy from shady chinese websites for electronics and whatever I can find in my local area for the fur.
+        <br><br>
+        If I end up making a fursuit, I will probably make a post about it on my site and maybe even make a video of it (but dont hold me to that).
+    </p>
+</section>
+<section>
+    <h1>Events</h1>
+    <p>
+        There are a few events that ive been to, however I plan on trying to go to more in the future.
+        <br>
+    </p>
+    <ul id="fur-meets">
+        <li>
+            <a href="/events/crittersmk"><b>Critters MK</b></a> - A furmeet in Milton Keynes.
+            <div class="fur-meet-gallery-small">
+                <img src="/static/content/fur_meets/26-07-2025_critters_mk/PXL_20250726_152110445.jpg" alt="Critters MK">
+                <img src="/static/content/fur_meets/26-07-2025_critters_mk/PXL_20250726_155134418.jpg" alt="Critters MK">
+                <img src="/static/content/fur_meets/26-07-2025_critters_mk/PXL_20250726_155226274.jpg" alt="Critters MK">
+                <img src="/static/content/fur_meets/26-07-2025_critters_mk/PXL_20250726_155434701.jpg" alt="Critters MK">
+            </div>
+        </li>
+        <li>
+            <a href="/events/paws-n-pistons"><b>Paws'N'Pistons</b></a> - A furry car meet around the UK.
+            <div class="fur-meet-gallery-small">
+                <img src="/static/content/fur_meets/03-08-2025_paws_n_pistons/PXL_20250803_141943558.jpg" alt="Paws'N'Pistons">
+                <img src="/static/content/fur_meets/03-08-2025_paws_n_pistons/PXL_20250803_150138054.jpg" alt="Paws'N'Pistons">
+                <img src="/static/content/fur_meets/03-08-2025_paws_n_pistons/PXL_20250803_150249916.jpg" alt="Paws'N'Pistons">
+                <img src="/static/content/fur_meets/03-08-2025_paws_n_pistons/PXL_20250803_183614897.jpg" alt="Paws'N'Pistons">
+            </div>
+        </li>
+        <p>Click on the links to view more photos from each event :3</p>
+    </ul>
+</section>
+{% endblock %}