major update :O

.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

@@ -1,5 +1,6 @@
 .venv
 .env
-db.sqlite
 flask_session
-__pycache__
+__pycache__
+.vscode
+db

dockerfile

@@ -18,8 +18,5 @@ COPY static static
 # Expose the port the app runs on
 EXPOSE 5000
 
-# Set environment variables
-ENV FLASK_APP=app.py
-
 # run the application
 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

@@ -2,4 +2,4 @@
 
 [ ! -f .env ] || export $(grep -v '^#' .env | xargs)
 
-flask --app src.wsgi --debug run 
+flask --app src.wsgi.py --debug run 

src/routes/dynamic_routes.py

@@ -0,0 +1,41 @@
+# Imports
+from flask import Blueprint, render_template, request, abort
+from os import getenv as env
+import logging, os, re
+
+# Create blueprint
+bp = Blueprint(
+    'dynamic_routes',
+    __name__,
+    template_folder=env('TEMPLATE_FOLDER', default='../templates'),
+    static_folder=env('STATIC_FOLDER', default='../static')
+)
+
+# Create logger
+log = logging.getLogger(__name__)
+
+# Get all files in folder
+def ListFiles(path):
+    files = []
+    for root, dirs, files_in_dir in os.walk(path):
+        for file in files_in_dir:
+            files.append(os.path.relpath(os.path.join(root, file), path))
+        for dir in dirs:
+            files.append(os.path.relpath(os.path.join(root, dir), path) + '/')
+    return files
+
+# Catch-all route for generic pages
+@bp.route('/<path:filename>')
+def catch_all(filename):
+    try: 
+        return render_template(f'pages/{filename if re.match(r'^.+\.[a-zA-Z0-9]+$', filename) else filename + '.html'}')
+
+    except Exception as e:
+        os_path = os.path.join(bp.template_folder, 'pages', filename)[3:]
+        print(os_path)
+        if os.path.isdir(os_path):
+            if not filename.endswith('/'): filename += '/'
+            return render_template('bases/directory.html', directory=filename, pages=ListFiles(os_path))
+
+        # If it is a file, return a 404 error
+        abort(404, f"Template '{filename}' not found: {e}")

src/routes/error_handlers.py

@@ -3,9 +3,6 @@ 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',
@@ -14,11 +11,9 @@ bp = Blueprint(
     static_folder=env('STATIC_FOLDER', default='../static')
 )
 
-
 # Create logger
 log = logging.getLogger(__name__)
 
-
 # Route for 500 error
 @bp.route('/500')
 @bp.app_errorhandler(500)
@@ -27,17 +22,13 @@ def internal_server_error(error=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()
+    return render_template('errors/404.html'), 404 if error is not None else 200
-    token = snake.generate_start_token()
-    return render_template('errors/404.html', scores=scores, token=token), 404 if error is not None else 200
-
 
 # Route for 400 error
 @bp.route('/400')

src/routes/generic.py

@@ -1,44 +0,0 @@
-# Imports
-from flask import Blueprint, render_template, request, abort, send_from_directory
-from os import getenv as env
-import logging
-
-
-# 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 robots.txt, sitemap.xml, and favicon.ico
-@bp.route('/robots.txt')
-@bp.route('/sitemap.xml')
-@bp.route('/favicon.ico')
-def web_stuffs():
-    return send_from_directory(
-        env('STATIC_FOLDER', default='../static'),
-        request.path.lstrip('/')
-    )
-
-
-# catch-all route for any other static pages (only in root path)
-@bp.route('/<string:filename>')
-def static_files(filename):
-    try:
-        return render_template(filename if filename.endswith('.html') else filename + '.html')
-    except Exception as e:
-        log.error(f"Error serving static file {filename}: {e}")
-        abort(404)

src/routes/snake.py

@@ -1,146 +0,0 @@
-# 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(db_name=env('DB_NAME', default='db.sqlite'))
-db.execute('CREATE TABLE IF NOT EXISTS snake_scores (id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT, score INTEGER)')
-db.execute('''CREATE TABLE IF NOT EXISTS snake_tokens (
-    id INTEGER PRIMARY KEY AUTOINCREMENT,
-    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 = ?', (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 * 5 + 15: # assuming that each point takes 3 seconds to achieve and 15 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 = ?', (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 (?, ?)', (name, int(score)))
-        db.execute('DELETE FROM snake_tokens WHERE token = ?', (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 = ?', (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 (?, ?)', (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 < ?', (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

@@ -1,42 +0,0 @@
-# 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(
-            env('CAP_VERIFY_URL', default='https://<instance_url>/<key_id>/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

@@ -1,18 +0,0 @@
-# Imports
-import sqlite3
-
-# Database class
-class Database:
-    def __init__(self, db_name='db.sqlite'):
-        self.connection = sqlite3.connect(db_name, check_same_thread=False)
-        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

@@ -1,34 +1,33 @@
 # Imports
-from flask import Flask, request, render_template, send_from_directory, abort
+from flask import Flask, render_template, send_file
 from flask_session import Session
 
 from dotenv import load_dotenv
-from os import getenv as env, listdir
+from os import getenv as env
-import logging, importlib
+import logging
 
+import src.routes.error_handlers
+import src.routes.dynamic_routes
 
 # Load env
 load_dotenv()
 
+# Create logger
+stream_handler = logging.StreamHandler()
+stream_handler.setFormatter(logging.Formatter('%(asctime)s - %(name)s - %(levelname)s - %(message)s'))
+stream_handler.setLevel(logging.INFO)
 
-# Create console log handler
+file_handler = logging.FileHandler(filename='app.log')
-console_log = logging.StreamHandler()
+file_handler.setFormatter(logging.Formatter('%(asctime)s - %(name)s - %(levelname)s - %(message)s'))
-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"))
+file_handler.setLevel(logging.DEBUG)
-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(stream_handler)
-log.addHandler(file_log)
+log.addHandler(file_handler)
 log.info("Logging initialized")
 
-
 # Create flask app
 app = Flask(
     __name__,
@@ -41,18 +40,25 @@ app.config["SESSION_PERMANENT"] = True
 app.config["SESSION_TYPE"] = "filesystem"
 Session(app)
 
-
 # Load routes
-routes_dir = env('ROUTES_DIR', default='src/routes')
+app.register_blueprint(src.routes.error_handlers.bp, url_prefix='/error')
-for filename in listdir(routes_dir):
+app.register_blueprint(src.routes.dynamic_routes.bp, url_prefix='/')
-    if not filename.endswith('.py') and filename.startswith('__'):
-        continue
 
-    module_name = f"{routes_dir.replace('/', '.')}.{filename[:-3]}"
+# Generic routes
-    try:
+@app.route('/')
-        module = importlib.import_module(module_name)
+def index():
-        if hasattr(module, 'bp'):
+    return render_template('index.html')
-            app.register_blueprint(module.bp)
+
-            log.info(f"Registered blueprint: {module_name}")
+@app.route('/favicon.ico')
-    except Exception as e:
+def favicon():
-        log.error(f"Failed to register blueprint {module_name}: {e}")
+    return send_file('../static/content/other/favicon.ico')
+
+@app.route('/robots.txt')
+def robots():
+    return send_file('../static/content/other/robots.txt')
+
+
+# Route for sitemap.xml
+@app.route('/sitemap.xml')
+def sitemap():
+    return send_file('../static/content/other/sitemap.xml')

static/content/buttons/non_link_buttons.txt

@@ -3,7 +3,6 @@ https://cyber.dabamos.de/88x31/anythingbut.gif
 https://cyber.dabamos.de/88x31/bestdesktop.gif
 https://kopawz.neocities.org/buttonhoard/buttonsfldr2/diagnosedwithGAY.gif
 https://kopawz.neocities.org/indexgraphics/buttondecor/ilikecomputer.png
-https://identity-crisis.carrd.co/assets/images/gallery04/ad4f8d52.jpg?v=4e55d939
 https://anlucas.neocities.org/best_viewed_with_eyes.gif
 https://anlucas.neocities.org/html_learn_it_today.gif
 https://highway.eightyeightthirty.one/badge/5d58a8f32b007d4897db6f862a895a81674fb35f5cc3947fc66595817ca174db

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/404.css

@@ -1,155 +0,0 @@
-#snakeContainer {
-    padding: 15px;
-}
-
-canvas#snakeCanvas {
-    box-sizing: border-box;
-    border: 2px solid var(--secondary-background-color);
-    border-radius: 10px;
-    width: 100%;
-}
-
-form {
-    display: flex;
-    flex-direction: column;
-    width: min-content;
-    gap: 1rem;
-    padding: 15px;
-}
-
-form input[type="text"] {
-    padding: 10px;
-    box-sizing: border-box;
-    border: 1px solid var(--secondary-background-color);
-    border-radius: 6px;
-    background-color: var(--secondary-background-color-but-slightly-transparent);
-    color: var(--text-color);
-}
-
-form button[type="submit"] {
-    padding: 10px;
-    box-sizing: border-box;
-    border: 1px solid var(--secondary-background-color);
-    border-radius: 6px;
-    background-color: var(--secondary-background-color-but-slightly-transparent);
-    color: var(--text-color);
-    font-weight: bold;
-    cursor: pointer;
-}
-
-.flex-row {
-    display: flex;
-    flex-direction: row;
-    gap: 1rem;
-}
-
-.min-width {
-    width: min-content;
-}
-
-.max-width {
-    width: 100%;
-}
-
-#snakeLeaderboardSection {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 0;
-    max-height: 272px   ;
-}
-
-#snakeLeaderboard {
-    display: flex;
-    flex-direction: column;
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    width: 100%;
-    overflow-y: scroll;
-}
-
-#snakeLeaderboard li {
-    padding: 5px 20px;
-    background-color: var(--secondary-background-color-but-slightly-transparent);
-    color: var(--text-color);
-    font-size: 1rem;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-#snakeLeaderboard li:nth-child(even) {
-    background-color: var(--secondary-background-color);
-}
-
-dialog {
-    width: 90%;
-    max-width: 500px;
-    padding: 20px;
-    background-color: var(--background-color);
-    color: var(--text-color);
-    border: 2px solid var(--secondary-background-color);
-    border-radius: 8px;
-}
-
-dialog button {
-    padding: 10px;
-    width: 100%;
-    box-sizing: border-box;
-    border: 2px solid var(--secondary-background-color);
-    border-radius: 6px;
-    background-color: var(--secondary-background-color-but-slightly-transparent);
-    color: var(--text-color);
-    font-weight: bold;
-    cursor: pointer;
-    margin-top: 10px;
-}
-
-dialog h2 {
-    margin: 0;
-    font-size: 1.5rem;
-}
-
-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/bases/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;
@@ -304,6 +304,18 @@ main section a {
     box-sizing: border-box;
 }
 
+a {
+    text-decoration: none;
+}
+
+code {
+    background-color: var(--secondary-background-color-but-slightly-transparent);
+    padding: 4px 6px;
+    border-radius: 4px;
+    font-size: 0.9rem;
+    color: var(--primary-color);
+}
+
 @media screen and (max-width: 1000px) {
     body {
         background-color: var(--background-color);

static/css/bases/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/cap.css

@@ -1,21 +0,0 @@
-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;
-  --cap-color: var(--text-color);
-  --cap-checkbox-size: 25px;
-  --cap-checkbox-border: 1px solid var(--secondary-background-color);
-  --cap-checkbox-border-radius: 6px;
-  --cap-checkbox-background: none;
-  --cap-checkbox-margin: 2px;
-  --cap-font: "Space Mono", "serif";
-  --cap-spinner-color: var(--primary-color);
-  --cap-spinner-background-color: var(--secondary-background-color-but-slightly-transparent);
-  --cap-spinner-thickness: 5px;
-  --cap-credits-font-size: 12px;
-  --cap-opacity-hover: 0.8;
-}

static/css/gallery.css

@@ -0,0 +1,23 @@
+.gallery {
+    width: 100%;
+}
+
+.gallery .gallery-images {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    gap: 1rem;
+    overflow: hidden;
+}
+
+.gallery .gallery-images img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 10px;
+}
+
+.gallery h2.gallery-date {
+    position: relative;
+    top: 0;
+    left: 0;
+}

static/css/toaster.css

@@ -4,6 +4,7 @@ ul#toaster-specs {
     display: flex;
     flex-direction: column;
     gap: 2px;
+    min-width: 400px;
 }
 
 ul#toaster-specs li {
@@ -33,6 +34,35 @@ ul#toaster-specs li {
     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;
@@ -45,4 +75,10 @@ ul#toaster-specs li {
     #toaster-img {
         width: 100%;
     }
+}
+
+@media screen and (max-width: 690px) {
+    .flex-col {
+        flex-direction: column;
+    }
 }

static/js/base.js

@@ -118,7 +118,7 @@ if (document.getElementById('spotify')) {
 // load buttons
 
 function loadButtons() {
-    fetch('/static/content/buttons.txt').then(response => {
+    fetch('/static/content/buttons/non_link_buttons.txt').then(response => {
         return response.text();
     }).then(data => {
         container = document.getElementById('button-collection');

static/js/snake.js

@@ -1,174 +0,0 @@
-const canvas = document.getElementById('snakeCanvas');
-const ctx = canvas.getContext('2d');
-
-const gridSize = 20;
-const tileSize = 100;
-const snakeSize = 60;
-const foodSize = 80;
-canvas.width = gridSize * tileSize;
-canvas.height = gridSize * tileSize;
-
-let snake = [{ x: 10, y: 10 }, { x: 10, y: 11 }, { x: 10, y: 12 }];
-let direction = { x: 0, y: 0 };
-let food = { x: Math.floor(Math.random() * gridSize), y: Math.floor(Math.random() * gridSize) };
-let score = 0;
-let gameOver = false;
-
-function draw() {
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-
-    // draw grid of checkerboard pattern
-    for (let x = 0; x < gridSize; x++) {
-        for (let y = 0; y < gridSize; y++) {
-            ctx.fillStyle = (x + y) % 2 === 0 ? 
-            getComputedStyle(document.documentElement).getPropertyValue('--background-color') : 
-            getComputedStyle(document.documentElement).getPropertyValue('--secondary-background-color');
-            ctx.fillRect(x * tileSize, y * tileSize, tileSize, tileSize);
-        }
-    }
-
-    // Draw snake
-    snake.forEach(segment => {
-        let nextVec = { x: 0, y: 0 };
-        // if there is a segment after the current segment
-        if (snake.indexOf(segment) < snake.length - 1) {
-            const nextSegment = snake[snake.indexOf(segment) + 1];
-            nextVec.x = nextSegment.x - segment.x;
-            nextVec.y = nextSegment.y - segment.y;
-        }
-
-        ctx.fillStyle = getComputedStyle(document.documentElement).getPropertyValue('--primary-color');
-        if (nextVec.x === 0 && nextVec.y === 0) {
-            ctx.fillRect(
-                segment.x * tileSize + (tileSize - snakeSize) / 2,
-                segment.y * tileSize + (tileSize - snakeSize) / 2,
-                snakeSize,
-                snakeSize
-            );
-        } else if (nextVec.x > 0 || nextVec.y > 0) {
-            ctx.fillRect(
-                segment.x * tileSize + (tileSize - snakeSize) / 2,
-                segment.y * tileSize + (tileSize - snakeSize) / 2,
-                snakeSize + nextVec.x * (tileSize - snakeSize),
-                snakeSize + nextVec.y * (tileSize - snakeSize)
-            );
-        } else {
-            ctx.fillRect(
-                segment.x * tileSize + (tileSize - snakeSize) / 2 + nextVec.x * (tileSize - snakeSize),
-                segment.y * tileSize + (tileSize - snakeSize) / 2 + nextVec.y * (tileSize - snakeSize),
-                snakeSize + Math.abs(nextVec.x) * (tileSize - snakeSize),
-                snakeSize + Math.abs(nextVec.y) * (tileSize - snakeSize)
-            );
-        }
-        
-    });
-
-    // Draw food
-    ctx.fillStyle = '#ff4d4d';
-    ctx.fillRect(
-        food.x * tileSize + (tileSize - foodSize) / 2,
-        food.y * tileSize + (tileSize - foodSize) / 2,
-        foodSize,
-        foodSize
-    );
-}
-
-function update() {
-    if (gameOver) return;
-
-    // Move snake
-    const head = { x: snake[0].x + direction.x, y: snake[0].y + direction.y };
-
-    // Add new head
-    snake.unshift(head);
-
-    // Check for food collision
-    if (head.x === food.x && head.y === food.y) {
-        score += 10; // Increase score
-        placeFood();
-    } else {
-        snake.pop(); // Remove tail if no food eaten
-    }
-
-    // Check for wall collision
-    if (head.x < 0 || head.x >= gridSize || head.y < 0 || head.y >= gridSize) {
-        gameOver = true;
-        return;
-    }
-
-    // Check for self collision
-    for (let i = 1; i < snake.length; i++) {
-        if (head.x === snake[i].x && head.y === snake[i].y) {
-            gameOver = true;
-            return;
-        }
-    }
-}
-
-function placeFood() {
-    do {
-        food.x = Math.floor(Math.random() * gridSize);
-        food.y = Math.floor(Math.random() * gridSize);
-    } while (snake.some(segment => segment.x === food.x && segment.y === food.y));
-}
-
-function changeDirection(event) {
-    switch (event.key) {
-        case 'w':
-            if (direction.y === 0) direction = { x: 0, y: -1 };
-            break;
-        case 's':
-            if (direction.y === 0) direction = { x: 0, y: 1 };
-            break;
-        case 'a':
-            if (direction.x === 0) direction = { x: -1, y: 0 };
-            break;
-        case 'd':
-            if (direction.x === 0) direction = { x: 1, y: 0 };
-            break;
-    }
-}
-
-// Menu to start the game
-function menu() {
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-
-    ctx.fillStyle = getComputedStyle(document.documentElement).getPropertyValue('--background-color');
-    ctx.fillRect(0, 0, canvas.width, canvas.height);
-
-    ctx.textAlign = 'center';
-    ctx.fillStyle = getComputedStyle(document.documentElement).getPropertyValue('--text-color');
-    ctx.font = '200px Arial';
-    ctx.fillText('Snake Game', canvas.width / 2, canvas.height / 2);
-    ctx.font = '100px Arial';
-    ctx.fillText('Press W/A/S/D to move', canvas.width / 2, canvas.height / 2 + 100);
-    ctx.fillText('Click to start', canvas.width / 2, canvas.height / 2 + 200);
-
-    canvas.addEventListener('click', startGame);
-}
-
-function gameLoop() {
-    if (!gameOver) {
-        update();
-        draw();
-        setTimeout(gameLoop, 100);
-    } else {
-        document.removeEventListener('keydown', changeDirection);
-        document.getElementById('score').value = score;
-        alert(`Game Over! Your score: ${score}`);
-        menu();
-    }
-}
-
-function startGame() {
-    snake = [{ x: 10, y: 10 }, { x: 10, y: 11 }, { x: 10, y: 12 }];
-    direction = { x: 1, y: 0 };
-    food = { x: Math.floor(Math.random() * gridSize), y: Math.floor(Math.random() * gridSize) };
-    score = 0;
-    gameOver = false;
-    canvas.removeEventListener('click', startGame);
-    document.addEventListener('keydown', changeDirection);
-    gameLoop();
-}
-
-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">
+    <link rel="stylesheet" href="/static/css/bases/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>
@@ -28,6 +28,7 @@
                 <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>
@@ -36,7 +37,6 @@
                     <li><a href="https://www.youtube.com/@acetheking987">YouTube</a></li>
                     <li><a href="https://acetheking987.tumblr.com/">Tumblr</a></li>
                     <li><a href="https://www.reddit.com/user/acetheking987">Reddit</a></li>
-                    <li><a href="/404">404 >:3</a></li>
                 </ul>
             </section>
         </nav>
@@ -46,28 +46,37 @@
         <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 herf="https://hijpixel.nekoweb.org/"><img src="/static/content/buttons/hijpixel.gif" alt="hijpixel"></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://lensdeer.neocities.org/"><img src="/static/content/buttons/lensdeer.gif" alt="lensdeer"></a></li>
-                <li><a href="https://thinliquid.dev"><img src="https://thinliquid.dev/thnlqd.png" alt="thinliquid"></a></li>
+                <li><a href="https://emmixis.net/"><img src="/static/content/buttons/emmixis.gif" alt="emmixis"></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://dimden.dev/"><img src="https://dimden.dev/services/images/88x31.gif" alt="dimden"></a></li><!-- hotlink on purpose -->
-                <li><a href="https://s1nez.nekoweb.org/"><img src="https://s1nez.nekoweb.org/BUTTON.gif" alt="s1nez"></a></li>
+                <li><a href="https://ne0nbandit.neocities.org/"><img src="/static/content/buttons/ne0nbandit.png" alt="ne0nbandit"></a></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://thinliquid.dev"><img src="/static/content/buttons/thnlqd.png" alt="thinliquid"></a></li>
-                <li><a href="https://itsnotstupid.com"><img src="https://itsnotstupid.com/pics/button1.gif" alt="itsnotstupid"></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://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://s1nez.nekoweb.org/"><img src="/static/content/buttons/s1nez.gif" alt="s1nez"></a></li>
-                <li><a href="https://eightyeightthirty.one"><img src="https://eightyeightthirty.one/88x31.png" alt="88x31"></a></li>
+                <li><a href="https://beeps.website"><img src="/static/content/buttons/beeps.gif" alt="beeps"></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://itsnotstupid.com"><img src="/static/content/buttons/insia.gif" alt="itsnotstupid"></a></li>
-                <li><a href="https://tuxedodragon.art"><img src="https://tuxedodragon.art/tuxedodragon%2088x31.gif" alt="tuxedodragon"></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://eightyeightthirty.one"><img src="/static/content/buttons/8831.png" alt="88x31"></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>
+            <div id='furryring'>
+                <script type="text/javascript" src="https://furryring.neocities.org/onionring-variables.js"></script>
+                <script type="text/javascript" src="https://furryring.neocities.org/onionring-widget.js"></script>
+            </div>
+        </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>

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/bases/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

@@ -4,7 +4,7 @@
 {% 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">
+<link rel="stylesheet" href="/static/css/errors/400.css">
 {% endblock %}
 
 {% block content %}

templates/errors/404.html

@@ -3,80 +3,11 @@
 {% block title %}404 - Not Found{% endblock %}
 {% block description %}The page you are looking for does not exist.{% endblock %}
 
-{% block head %}
-<link rel="stylesheet" href="/static/css/404.css">
-<link rel="stylesheet" href="/static/css/cap.css">
-{% endblock %}
-
 {% block content %}
 <section>
     <h1>404</h1>
     <p>
-        It seems like the thing you are looking for is not here :[
+        It seems like the thing you are looking for does not exist or <code>rm -rf</code> itself out of exsistance.
-        <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>
-    <div class="pcOnly" id="snakeContainer">
-        <canvas id="snakeCanvas"></canvas>
-    </div>
 </section>
-<section class="pcOnly flex-row">
-    <section class="min-width">
-        <h2>Submit score</h2>
-        <form action="/snake/submit" method="POST" id="snakeForm">
-            <input type="text" id="name" name="name" placeholder="Your name" required>
-            <cap-widget id="captcha" data-cap-api-endpoint="https://cap.alfieking.dev/57d36430b9cb/api/"></cap-widget>
-            <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>
-    <section class="max-width" 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>
-</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>
-    <p>{{ error }}</p>
-    <button onclick="errorDialog.close()">Close</button>
-</dialog>
-<script>
-    const errorDialog = document.getElementById('errorDialog');
-    if (errorDialog) {
-        errorDialog.showModal();
-    }
-</script>
-{% endif %}
-{% endblock %}
-
-{% block scripts %}
-<script src="/static/js/snake.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/@cap.js/widget"></script>
 {% endblock %}

templates/errors/500.html

@@ -4,7 +4,7 @@
 {% block description %}An unexpected error occurred on the server.{% endblock %}
 
 {% block head %}
-<link rel="stylesheet" href="/static/css/500.css">
+<link rel="stylesheet" href="/static/css/errors/500.css">
 {% endblock %}
 
 {% block content %}

templates/index.html

@@ -11,7 +11,7 @@
 <section>
     <h1>A lil bit abt me</h1>
     <p>
-        Im not good with writing so dont expect much here. I am a student who is learning c++ and python. I've Done a few projects that i think
+        Im not good with writing so dont expect much here. I was a student learning c++ and python. I've Done a few projects that i think
         are decent enough to show off, so I have put them on this website. I like to mess around with linux and have a few servers that I run. I've
         been running a server for a few years now, and I have learned a lot from it. I have also switched to linux on my main computer, which has been
         slightly annoying at times (mainly because one of my most played games' anticheat doesn't support on linux atm. Also, the lack of photoshop is
@@ -104,6 +104,25 @@
     <h1>Some News</h1>
     <h6>(dont expect this to be updated often tho :P)</h6>
     <ul>
+        <li>
+            <h2>18-01-2026</h2>
+            <p>
+                :O an update! thats unheard of on this site (aleast its more often than tf2 gets updates). finding motivation to work on things has been painful 
+                recently, but im wokring on my mental state a bit so hopefully there will be more updates. I am writing this before i make any major changes but 
+                i hope to add a blog or something, or maybe a daily thoughts thing that pings my phone to get me to write something. I also need to rewrite most 
+                of the home page as well since its kinda out of date :P
+            </p>
+        </li>
+        <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,53 @@
+{% 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>
+    <div class="gallery">
+        <h2 class="gallery-date">26th July 2025</h2>
+        <div class="gallery-images">
+            <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>
+    </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 %}

templates/toaster.html

@@ -1,63 +0,0 @@
-{% extends "bases/base.html" %}
-
-{% block title %}Toaster - Alfie's basement{% endblock %}
-{% block description %}furry corner{% 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 hopefully drawing Toaster properly soon. Once i do, I may make him the main mascot of my website.
-    </p>
-</section>
-<div class="flex-row">
-    <section>
-        <h1>Specs</h1>
-        <h6>(Very subject to change, Im still trying to figure out what I want :P)</h6>
-        <ul id="toaster-specs">
-            <li><b>Species:</b><span>Protogen</span></li>
-            <li><b>Base Color:</b><span class="color" style="background-color: #000">#000000</span></li>
-            <li><b>Accent Color:</b><span class="color" style="background-color: #8136cd">#8136cd</span></li>
-            <li><b>Alt Accent Color:</b><span class="color" style="background-color: #1d147c">#1d147c</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>
-        </ul>
-    </section>
-    <div class="flex-col">
-        <img src="/static/content/toaster.png" alt="toaster" id="toaster-img">
-        <section class="fill-height">
-            <p>
-                A old image of Toaster, I will draw a new one soon. (Hopefully)
-            </p>
-        </section>
-    </div>
-</div>
-<section>
-    <h1>Plans</h1>
-    <p>
-        I plan on drawing Toaster properly soon, I have a few ideas for his design but I am not sure what I want to do yet.
-        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, rn so 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>
-{% endblock %}