update

.gitignore

@@ -1,2 +1,7 @@
-build/
+.venv
-.vscode/
+.env
+db.sqlite
+flask_session
+__pycache__
+app.log
+.vscode

.gitmodules

@@ -1,6 +0,0 @@
-[submodule "thirdparty/inja"]
-	path = thirdparty/inja
-	url = https://github.com/pantor/inja
-[submodule "thirdparty/nlohmann"]
-	path = thirdparty/nlohmann
-	url = https://github.com/nlohmann/json

dockerfile

@@ -0,0 +1,22 @@
+FROM python:alpine
+
+# Set the working directory
+WORKDIR /app
+
+# Copy the requirements file into the container
+COPY requirements.txt .
+
+# Install the required packages
+RUN pip install --no-cache-dir -r requirements.txt
+RUN pip install gunicorn
+
+# Copy the rest of the application code into the container
+COPY src src
+COPY templates templates
+COPY static static
+
+# Expose the port the app runs on
+EXPOSE 5000
+
+# run the application
+ENTRYPOINT [ "gunicorn",  "-b", ":5000", "--access-logfile", "-", "--error-logfile", "-", "src.wsgi:app" ]

include/errors.hpp

@@ -1,15 +0,0 @@
-#ifndef ERRORS_HPP
-#define ERRORS_HPP
-
-#include <crow.h>
-#include "templating.hpp"
-
-extern Templating templating;
-
-struct CustomErrorHandler {
-    struct context {};
-    void before_handle(crow::request& req, crow::response& res, context&) {}
-    void after_handle(crow::request& req, crow::response& res, context&);
-};
-
-#endif

include/templating.hpp

@@ -1,25 +0,0 @@
-#ifndef TEMPLATING_HPP
-#define TEMPLATING_HPP
-
-#include <inja/inja.hpp>
-#include <crow.h>
-#include <string>
-
-class Templating {
-public:
-    explicit Templating(const std::string& template_dir);
-
-    crow::response render_template(const std::string& template_name, const inja::json& data);
-    crow::response render_template(const std::string& template_name);
-
-    std::string render_template_string(const std::string& template_name, const inja::json& data);
-    std::string render_template_string(const std::string& template_name);
-
-private:
-    inja::Environment inja_env;
-    std::string template_dir;  // absolute path to templates
-
-    std::string preprocess_template(const std::string& template_name);
-};
-
-#endif

makefile

@@ -1,51 +0,0 @@
-# Directories
-INCLUDE_DIRS = include thirdparty/inja/include thirdparty/nlohmann/include
-SRC_DIR = src
-BUILD_DIR = build
-
-# Compiler and linker settings
-CXX = g++
-LIBS = 
-CXXFLAGS = -std=c++17 $(foreach dir,$(INCLUDE_DIRS),-I$(dir))
-
-# Source and object files
-SRC = $(wildcard $(SRC_DIR)/*.cpp)
-
-# Target executable
-UNAME := $(shell uname -s)
-BUILD_DIR := $(BUILD_DIR)/$(UNAME)
-OBJ_DIR := $(BUILD_DIR)/objs
-BIN = $(BUILD_DIR)/main
-
-# Object files corresponding to the source files (now in obj directory)
-OBJS = $(addprefix $(OBJ_DIR)/, $(addsuffix .o, $(basename $(notdir $(SRC)))))
-
-# development target with debugging
-dev: CXXFLAGS += -g -Wall -Wformat
-dev: all
-
-# Release target
-release: CXXFLAGS += -O3
-release: all
-
-# Create directories for build output
-dirs:
-	@mkdir -p $(BUILD_DIR)
-	@mkdir -p $(OBJ_DIR)
-
-# Clear build directory
-clear:
-	@find $(OBJ_DIR) -type f -name '*.o' -exec rm -f {} +
-
-# Pattern rule for source files in src directory
-$(OBJ_DIR)/%.o: $(SRC_DIR)/%.cpp
-	$(CXX) $(CXXFLAGS) -c -o $@ $<
-
-all: dirs clear $(BIN)
-	@echo Build complete
-
-$(BIN): $(OBJS)
-	$(CXX) -o $@ $^ $(CXXFLAGS) $(LIBS)
-
-clean:
-	rm -rf $(BUILD_DIR)

requirements.txt

@@ -0,0 +1,5 @@
+psycopg2-binary
+python-dotenv
+flask-session
+requests
+flask

run.sh

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

src/errors.cpp

@@ -1,13 +0,0 @@
-#include "errors.hpp"
-
-
-std::string render_404_template(const crow::request& req) {
-    return templating.render_template_string("errors/404.html", {{"requested_url", req.url}});
-}
-
-void CustomErrorHandler::after_handle(crow::request& req, crow::response& res, context&) {
-    if (res.code == 404 && res.body.empty()) {
-        res.set_header("Content-Type", "text/html");
-        res.body = render_404_template(req);
-    }
-}

src/main.cpp

@@ -1,18 +0,0 @@
-#define CROW_STATIC_DIRECTORY "../static"
-#include "templating.hpp"
-#include "errors.hpp"
-#include <crow.h>
-
-
-Templating templating{"../templates"};
-
-
-int main() {
-    crow::App<CustomErrorHandler> app;
-
-    CROW_ROUTE(app, "/")([]() {
-        return templating.render_template("index.html");
-    });
-
-    app.port(8080).multithreaded().run();
-}

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/templating.cpp

@@ -1,76 +0,0 @@
-#include "templating.hpp"
-#include <filesystem>
-#include <fstream>
-#include <regex>
-#include <stdexcept>
-
-Templating::Templating(const std::string& template_dir)
-    : inja_env(std::filesystem::canonical(template_dir).string()),
-      template_dir(std::filesystem::canonical(template_dir).string())
-{
-    inja_env.set_search_included_templates_in_files(true);
-}
-
-std::string Templating::preprocess_template(const std::string& template_name) {
-    namespace fs = std::filesystem;
-
-    fs::path abs_template_dir = fs::path(template_dir);
-    fs::path abs_template_file = fs::canonical(abs_template_dir / template_name);
-
-    std::ifstream file(abs_template_file);
-    if (!file.is_open()) {
-        throw std::runtime_error("Failed to open template file: " + abs_template_file.string());
-    }
-
-    std::string content((std::istreambuf_iterator<char>(file)), std::istreambuf_iterator<char>());
-
-    std::regex extends_regex(R"(\{\%\s*extends\s*(['"])(.+?)\1\s*\%\})");
-    std::smatch match;
-
-    if (std::regex_search(content, match, extends_regex)) {
-        std::string quote = match[1].str();
-        std::string original_path = match[2].str();
-
-        if (original_path.find("/") == std::string::npos &&
-            !original_path.empty() &&
-            original_path.front() != '/') {
-
-            fs::path abs_extended_template = fs::canonical(abs_template_dir / original_path);
-            fs::path rel_path = fs::relative(abs_extended_template, abs_template_file.parent_path());
-
-            std::string new_path = rel_path.generic_string();
-
-            content = std::regex_replace(content, extends_regex,
-                "{% extends " + quote + new_path + quote + " %}");
-        }
-    }
-
-    return content;
-}
-
-
-crow::response Templating::render_template(const std::string& template_name, const inja::json& data) {
-    try {
-        std::string preprocessed = preprocess_template(template_name);
-        inja::Template tpl = inja_env.parse(preprocessed);
-        std::string rendered = inja_env.render(tpl, data);
-        return crow::response(rendered);
-
-    } catch (const std::exception& e) {
-        return crow::response(500, e.what());
-    }
-}
-
-crow::response Templating::render_template(const std::string& template_name) {
-    return render_template(template_name, inja::json{});
-}
-
-std::string Templating::render_template_string(const std::string& template_name, const inja::json& data) {
-    std::string preprocessed = preprocess_template(template_name);
-    inja::Template tpl = inja_env.parse(preprocessed);
-    return inja_env.render(tpl, data);
-}
-
-std::string Templating::render_template_string(const std::string& template_name) {
-    return render_template_string(template_name, inja::json{});
-}

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

@@ -0,0 +1,155 @@
+#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/cap.css

@@ -0,0 +1,20 @@
+cap-widget {
+  --cap-background: var(--secondary-background-color-but-slightly-transparent);
+  --cap-border-color: var(--secondary-background-color);
+  --cap-border-radius: 14px;
+  --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;
+}

templates/bases/base.html

@@ -13,8 +13,8 @@
     <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:title" content="{% block og-title %}Home - Alfie's basement{% endblock %}">
+    <meta property="og:title" content="{{ self.title() }}">
-    <meta property="og:description" content="{% block og-description %}server backend survivor{% endblock %}">
+    <meta property="og:description" content="{{ self.description() }}">
     <meta property="og:image" content="{% block og_image %}/static/content/general_images/icon.webp{% endblock %}">
     {% block head %}
     {% endblock %}
@@ -37,6 +37,7 @@
                     <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,17 +47,18 @@
         <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>

templates/bases/directory.html

@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "bases/base.html" %}
 
 {% block title %}/{{ directory }} - Alfie's basement{% endblock %}
 {% block description %}server backend survivor{% endblock %}

templates/errors/404.html

@@ -3,18 +3,80 @@
 {% 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>
-        Hey so you know that thing you were looking for? Yeah, it doesn't exist. :P
+        It seems like the thing you are looking for is not here :[
         <br><br>
-        So why not try going back to the <a href="/">homepage</a>?
+        <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>
+<section class="pcOnly flex-row">
-    <h2>The actual error for the 2 ppl who care</h2>
+    <section class="min-width">
-    <p>
+        <h2>Submit score</h2>
-        404: {{ requested_url }} not found :3
+        <form action="/snake/submit" method="POST" id="snakeForm">
-    </p>
+            <input type="text" id="name" name="name" maxlength=15 minlength=3 placeholder="Your name" required>
-</section>
+            <cap-widget id="captcha" data-cap-api-endpoint="https://cap.alfieking.dev/{{ cap_key }}/"></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/index.html

@@ -2,15 +2,12 @@
 
 {% block title %}Home - Alfie's basement{% endblock %}
 {% block description %}server backend survivor{% endblock %}
-{% block og-title %}Home - Alfie's basement{% endblock %}
-{% block og-description %}server backend survivor{% endblock %}
-
 
 {% block head %}
 <link rel="stylesheet" href="/static/css/index.css">
 {% endblock %}
 
-{% block content %}
+{%block content %}
 <section>
     <h1>A lil bit abt me</h1>
     <p>

templates/pages/events/crittersmk.html

@@ -41,5 +41,11 @@ protogen v1.0, toaster v1.0
         <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 %}