snake

src/database.py

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

src/main.py

@@ -0,0 +1,80 @@
+from flask import Flask, request, render_template
+from flask_session import Session
+from dotenv import load_dotenv
+from os import getenv as env
+import logging, database, requests
+
+
+logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(levelname)s - %(message)s')
+load_dotenv()
+
+
+app = Flask(
+    __name__,
+    template_folder=env('TEMPLATE_FOLDER', default='templates'),
+    static_folder=env('STATIC_FOLDER', default='static'),
+)
+app.config["SESSION_PERMANENT"] = True
+app.config["SESSION_TYPE"] = "filesystem"
+Session(app)
+
+
+db = database.Database(db_name=env('DB_NAME', default='db.sqlite'))
+
+
+@app.route('/')
+def index():
+    logging.info("Rendering index page")
+    return render_template('index.html')
+
+
+@app.route('/snake/submit', methods=['POST'])
+def snake_submit():
+    data = request.json
+    if not data or 'name' not in data or 'score' not in data:
+        logging.error("Invalid data received: %s", data)
+        return {'error': 'Invalid data'}, 400
+    
+    name = data.get('name', '')
+    cap = data.get('cap', '')
+    score = data.get('score', -1)
+
+    cap_response = requests.post(
+        env('CAP_VERIFY_URL', default='https://<instance_url>/<key_id>/siteverify'),
+        json={
+            'secret': env('CAP_SECRET', default=''),
+            'response': cap,
+        }
+    )
+
+    if cap_response.status_code != 200 or not cap_response.json().get('success', "false") != "true":
+        logging.error("Captcha verification failed: %s", cap_response.json())
+        return {'error': 'Captcha verification failed'}, 400
+
+    if not isinstance(name, str) or not isinstance(score, int):
+        logging.error("Invalid data types: name=%s, score=%s", type(name), type(score))
+        return {'error': 'Invalid data types'}, 400
+    
+    if not name or score <= 0 or score > 10000:
+        logging.error("Invalid name or score: name=%s, score=%s", name, score)
+        return {'error': 'Invalid name or score'}, 400
+    
+    db.insert_snake(name, score)
+    logging.info("Snake submitted: name=%s, score=%d", name, score)
+    return {'success': True, 'message': 'Snake submitted successfully'}, 200
+
+
+@app.errorhandler(404)
+def page_not_found(e):
+    logging.error("Page not found: %s", request.path)
+    unformatted_scores = db.get_snake_scores()
+    scores = [{'position': i + 1, 'name': score[1], 'score': score[2]} for i, score in enumerate(unformatted_scores)]
+    return render_template('404.html', scores=scores), 404
+
+
+if __name__ == '__main__':
+    app.run(
+        host=env('HOST', default='0.0.0.0'), 
+        port=env('PORT', default=5000),
+        debug=env('DEBUG', default=False).lower() == 'true'
+    )

src/static/content/buttons.txt

@@ -0,0 +1,36 @@
+https://cyber.dabamos.de/88x31/88x31.gif
+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
+https://cyber.dabamos.de/88x31/keep.gif
+https://cyber.dabamos.de/88x31/js-warning.gif
+https://cyber.dabamos.de/88x31/linuxnow2.gif
+https://cyber.dabamos.de/88x31/nano2.gif
+https://cyber.dabamos.de/88x31/nocookie.gif
+https://cyber.dabamos.de/88x31/nofuckingthanks.gif
+https://cyber.dabamos.de/88x31/nyan.gif
+https://cyber.dabamos.de/88x31/pgp-now.gif
+https://cyber.dabamos.de/88x31/phonechump.gif
+https://cyber.dabamos.de/88x31/pinguonline.gif
+https://cyber.dabamos.de/88x31/piracy.gif
+https://cyber.dabamos.de/88x31/proxmox.gif
+https://cyber.dabamos.de/88x31/pride.gif
+https://cyber.dabamos.de/88x31/relax-now.gif
+https://cyber.dabamos.de/88x31/skirt.gif
+https://cyber.dabamos.de/88x31/steam.gif
+https://cyber.dabamos.de/88x31/svenbutton.gif
+https://cyber.dabamos.de/88x31/tfnow.gif
+https://cyber.dabamos.de/88x31/vscbutton.gif
+https://cyber.dabamos.de/88x31/reddit.gif
+https://cyber.dabamos.de/88x31/ralseismokingadart.gif
+https://cyber.dabamos.de/88x31/blender.gif
+https://cyber.dabamos.de/88x31/bob.gif
+https://cyber.dabamos.de/88x31/censor_14c.gif
+https://cyber.dabamos.de/88x31/chrmevil.gif
+https://cyber.dabamos.de/88x31/dark-mode.gif
+https://cyber.dabamos.de/88x31/firefox3.gif

src/static/css/404.css

@@ -0,0 +1,79 @@
+canvas#snakeCanvas {
+    padding: 15px;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+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);
+}

src/static/css/cap.css

@@ -0,0 +1,21 @@
+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;
+}

src/static/css/index.css

@@ -0,0 +1,457 @@
+@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");
+    font-weight:normal;
+    font-style:normal;
+}
+
+:root {
+    --primary-color: #5cdd8b;
+    --primary-color-but-slightly-transparent: #5cdd8b44;
+    --text-color: #b1b8c0;
+    --background-color: #020205;
+    --secondary-background-color: #090914;
+    --secondary-background-color-but-slightly-transparent: #09091444;
+    --font-size: 0.5cm;
+    --font-family: "Space Mono", "serif";
+    --title-font: 'Roboto Mono', sans-serif;
+    --irken-font: 'Irken';
+}
+
+body {
+    background-color: var(--background-color);
+    background-image: url("https://blinkies.cafe/purple-stars-bg.gif");
+    color: var(--text-color);
+    font-size: var(--font-size);
+    font-family: var(--font-family);
+    display: grid;
+    grid-template-columns: auto auto;
+    grid-template-rows: 1fr;
+    grid-template-areas: "main sidebar";
+    margin: 7% auto 7% auto;
+    gap: 1rem;
+    justify-content: center;
+    width: 940px;
+}
+
+#sidebar {
+    grid-area: sidebar;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    width: 174px;
+}
+
+#sidebar section {
+    backdrop-filter: blur(2px) brightness(0.6);
+    border: var(--secondary-background-color) 2px solid;
+    border-radius: 10px;
+    padding: 10px;
+}
+
+#sidebar ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;  
+}
+
+#sidebar ul li {
+    width: fit-content;
+}
+
+#sidebar ul li a {
+    color: var(--text-color);
+    text-decoration: none;
+    font-weight: 100;
+    transition: all 0.2s ease-in-out
+}
+
+#sidebar ul li a:hover {
+    color: var(--primary-color);
+    font-weight: 900;
+}
+
+#sidebar ul li img {
+    transition: all 0.2s ease-in-out;
+}
+
+#sidebar ul li img:hover {
+    transform: scale(1.1);
+}
+
+#sidebar h1 {
+    font-family: var(--title-font);
+    font-size: 1.5rem;
+    font-weight: 900;
+    margin: 0;
+    padding: 0;
+}
+
+#sidebar h6 {
+    font-weight: 100;
+    margin: 0;
+    padding: 0;
+}
+
+#buttons {
+    text-align: center;
+}
+
+#buttons h1 {
+    font-family: var(--title-font);
+    font-size: 1.3rem;
+    font-weight: 900;
+    margin: 0;
+    padding: 0;
+    text-shadow: var(--text-color) 1px 0 10px;
+}
+
+#buttons ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    margin-top: 5px;
+    align-items: center;
+}
+
+.vsmoltext {
+    font-size: 0.5rem;
+}
+
+main {
+    grid-area: main;
+    width: 761px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+header {
+    backdrop-filter: blur(2px) brightness(0.6);
+    border: var(--secondary-background-color) 2px solid;
+    border-radius: 10px;
+    padding: 15px;
+}
+
+header div.row {
+    display: flex;
+    flex-direction: row;
+    margin: 0;
+    gap: 1.5rem;
+}
+
+header div.column {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin: 0;
+}
+
+header img {
+    width: 9rem;
+    height: 9rem;
+}
+
+header h1 {
+    font-family: var(--title-font);
+    font-size: 5rem;
+    font-weight: 900;
+    padding: 0;
+    margin: 0;
+}
+
+header h2 {
+    font-family: var(--title-font);
+    font-size: 1.75rem;
+    font-weight: 100;
+    padding: 0;
+    margin: 0;
+    position: relative;
+    top: -1rem;
+}
+
+main section {
+    backdrop-filter: blur(2px) brightness(0.6);
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    border: var(--secondary-background-color) 2px solid;
+    border-radius: 10px;
+    padding: 15px;
+    box-sizing: border-box;
+}
+
+main section h1 {
+    font-size: 3rem;
+    font-weight: 900;
+    margin: 0;
+    padding: 0;
+}
+
+main section h2 {
+    font-size: 1.5rem;
+    font-weight: 900;
+    margin: 0;
+    padding: 0;
+}
+
+main section h6 {
+    font-size: 0.7rem;
+    font-weight: 100;
+    margin: 0;
+    padding: 0;
+}
+
+main section p {
+    font-size: 1rem;
+    margin: 0;
+    padding: 0;
+    font-weight: 300;
+}
+
+main section a {
+    color: var(--primary-color);
+    text-decoration: none;
+}
+
+#furry {
+    position: fixed;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    opacity: 0.1;
+    background-image: url('/static/content/background.png');
+    background-repeat: no-repeat;
+    background-position: 50% 0;
+    background-size: cover;
+    z-index: -1;
+    display: none;
+}
+
+.blinkies {
+    justify-content: center;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+.blinkies img {
+    width: 150px;
+    height: 20px;
+    transition: all 0.2s ease-in-out;
+}
+
+.blinkies img:hover {
+    transform: scale(1.1) rotate(5deg);
+}
+
+.blinkies img:nth-child(odd):hover {
+    transform: scale(1.1) rotate(-5deg);
+}
+
+section.rowsect {
+    width: 100%;
+    display: grid;
+    grid-template-columns: auto auto;
+    gap: 1rem;
+    backdrop-filter: none;
+    border: none;
+    padding: 0;
+}
+
+section.rowsect>div {
+    backdrop-filter: blur(2px) brightness(0.6);
+    border: var(--secondary-background-color) 2px solid;
+    border-radius: 10px;
+}
+
+.stamps {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    padding: 10px;
+    gap: 5px;
+    justify-content: center;
+    align-content: center;
+}
+
+.stamps img {
+    width: 99px;
+    height: 56px;
+    transition: all 0.2s ease-in-out;
+}
+
+.stamps img:hover {
+    transform: scale(1.1) rotate(5deg);
+}
+
+.stamps img:nth-child(odd):hover {
+    transform: scale(1.1) rotate(-5deg);
+}
+
+#spotify {
+    background-image: none;
+    backdrop-filter: blur(2px) brightness(0.6);
+    border: var(--secondary-background-color) 2px solid;
+    border-radius: 10px;
+    padding: 15px;
+    box-sizing: border-box;
+    background-repeat: no-repeat;
+    background-size: contain;
+    height: 300px;
+    width: 300px;
+    display: flex;
+    flex-direction: column;
+}
+
+#spotify-title {
+    font-size: 1.5rem;
+    font-weight: 900;
+    margin: 0;
+    padding: 0;
+    mix-blend-mode: difference;
+    color: white;
+}
+
+#spotify-artist {
+    color: white;
+    font-size: 1rem;
+    font-weight: 900;
+    margin: 0;
+    padding: 0;
+    mix-blend-mode: difference;
+}
+
+.haj {
+    width: 100%;
+    filter: drop-shadow(0 0 0.5rem rgb(88, 214, 245));
+}
+
+.irken {
+    font-family: var(--irken-font);
+}
+
+#button-collection {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+#button-collection img {
+    transition: all 0.2s ease-in-out;
+}
+
+#button-collection img:hover {
+    transform: scale(1.1) rotate(5deg);
+}
+
+#button-collection img:nth-child(odd):hover {
+    transform: scale(1.1) rotate(-5deg);
+}
+
+#alt-nav {
+    display: none;
+    backdrop-filter: blur(2px) brightness(0.6);
+    width: 100%;
+    border: var(--secondary-background-color) 2px solid;
+    border-radius: 10px;
+    padding: 15px;
+    box-sizing: border-box;
+}
+
+#alt-nav ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    gap: 1.5rem;
+    justify-content: center;
+}
+
+#alt-nav ul li {
+    width: fit-content;
+}
+#alt-nav ul li a {
+    color: var(--text-color);
+    text-decoration: none;
+    font-weight: 100;
+    transition: all 0.2s ease-in-out
+}
+
+#alt-nav ul li a:hover {
+    color: var(--primary-color);
+    font-weight: 900;
+}
+
+@media screen and (max-width: 1000px) {
+    body {
+        background-color: var(--background-color);
+        background-image: url("https://blinkies.cafe/purple-stars-bg.gif");
+        color: var(--text-color);
+        font-size: var(--font-size);
+        font-family: var(--font-family);
+        display: grid;
+        grid-template-columns: auto;
+        grid-template-rows: 1fr;
+        grid-template-areas: "main";
+        margin: 7% 0 7% 0;
+        gap: 1rem;
+        justify-content: center;
+        width: 100%;
+    }
+
+    #sidebar {
+        display: none;
+    }
+
+    #alt-nav {
+        display: block;
+    }
+
+    main {
+        width: 100%;
+        box-sizing: border-box;
+        padding: 0 1rem 0 1rem;
+    }
+}
+
+@media screen and (max-width: 650px) {
+    header img {
+        display: none;
+    }
+
+    header div.row {
+        justify-content: center;
+    }
+
+    section.rowsect {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+        backdrop-filter: none;
+        border: none;
+        padding: 0;
+    }
+
+    div#spotify {
+        box-sizing: border-box;
+        background-repeat: no-repeat;
+        background-size: contain;
+        height: 100%;
+        width: auto;
+        aspect-ratio: 1/1;
+        display: flex;
+        flex-direction: column;
+    }
+}

src/static/js/index.js

@@ -0,0 +1,138 @@
+const values = [
+    "Web developer", 
+    "Pc games enjoyer", 
+    "Server backend survivor", 
+    "python programmer", 
+    "Javascript disliker",
+    "I use Arch btw",
+    "Owo, what's this?",
+    "Ultimate procrastinator",
+    "Ultrakill gaming",
+    "00111010 00110011",
+    "fistful of dollar",
+    "Thy end is now!!!",
+    "Possibly a furry",
+    "Prepare thyself!!!",
+    "Spegatti code master",
+    "Ethernet cable untangler",
+    "Caffeine addict",
+    "I'm not a robot ☑",
+    "Loud Music enjoyer",
+    "part time femboy :<",
+];
+var direction = 1;
+var text = "";
+var speed = 100; 
+var selectedValue = 0;
+var currentValueIndex = 0;
+var pause = false;
+
+function randomValue() {
+    selectedValue = Math.floor(Math.random() * values.length);
+    currentValueIndex = 0;
+}
+
+function type() {
+    if (direction == 1) {
+        if (currentValueIndex < values[selectedValue].length) {
+            text += values[selectedValue][currentValueIndex];
+            currentValueIndex++;
+        } else {
+            direction = -1;
+            pause = true;
+        }
+    } else {
+        if (currentValueIndex > 0) {
+            text = text.slice(0, -1);
+            currentValueIndex--;
+        } else {
+            direction = 1;
+            randomValue();
+        }
+    }
+}
+
+function typing() {
+    type();
+    document.getElementById("typing").innerHTML = "$ " + text;
+    if (direction == 1) {
+        speed = 80 + Math.random() * 100;
+    } else {
+        speed = 60 + (Math.random() * 100) / 2;
+    }
+    if (!pause) {
+        setTimeout(typing, speed);
+    } else {
+        setTimeout(typing, 500);
+        pause = false;
+    }
+}
+
+typing();
+
+// HIDDEN STUFF (shh don't tell anyone >:3)
+
+var last5Chars = "";
+
+document.addEventListener('keydown', function(event) {
+    last5Chars += event.key;
+    if (last5Chars == "furry") {
+        console.log("owo, whats this?");
+        document.getElementById('furry').style.display = 'block';
+    }
+    if (last5Chars == "irken") {
+        console.log("doom doom doom!");
+        document.querySelector(":root").style.setProperty('--font-family', 'Irken');
+        document.querySelector(":root").style.setProperty('--title-font', '1.5em');
+    }
+    while (last5Chars.length >= 5) {
+        last5Chars = last5Chars.slice(1);
+    }
+});
+
+// Spotify API
+
+function getSpotify() {
+    fetch('https://api.alfieking.dev/spotify/nowplaying/xz02oolstlvwxqu1pfcua9exz').then(response => {
+        return response.json();
+    }).then(data => {
+        if (data.item == null) {
+            document.getElementById('spotify').style.backgroundImage = "none";
+            document.getElementById('spotify-title').innerHTML = "Spotify is not playing anything";
+            document.getElementById('spotify-artist').innerHTML = ":(";
+            document.getElementById('spotify-link').href = "https://open.spotify.com/";
+            return;
+        }
+        document.getElementById('spotify').style.backgroundImage = "url(" + data.item.album.images[0].url + ")";
+        document.getElementById('spotify-title').innerHTML = data.item.name;
+        document.getElementById('spotify-artist').innerHTML = data.item.artists[0].name;
+        document.getElementById('spotify-link').href = data.item.external_urls.spotify;
+    });
+}
+
+if (document.getElementById('spotify')) {
+    getSpotify();
+    setInterval(getSpotify, 15000);
+}
+
+// load buttons
+
+function loadButtons() {
+    fetch('/static/content/buttons.txt').then(response => {
+        return response.text();
+    }).then(data => {
+        container = document.getElementById('button-collection');
+        for (let line of data.split('\n')) {
+            if (line == "") {
+                continue;
+            }
+            let img = document.createElement('img');
+            img.src = line;
+            container.appendChild(img);
+        }
+    });
+}
+
+if (document.getElementById('button-collection')) {
+    loadButtons();
+}

src/static/js/snake.js

@@ -0,0 +1,151 @@
+const canvas = document.getElementById('snakeCanvas');
+const ctx = canvas.getContext('2d');
+
+const gridSize = 15;
+const scale = 200;
+canvas.width = gridSize * scale;
+canvas.height = gridSize * scale;
+
+let snake = [{ x: 10, y: 10 }];
+let direction = { x: 0, y: 0 };
+let food = { x: 5, y: 5 };
+let score = 0;
+let gameOver = false;
+
+let token = null;
+
+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 ? 'darkgray' : 'grey';
+            ctx.fillRect(x * scale, y * scale, scale, scale);
+        }
+    }
+
+    // Draw snake
+    snake.forEach(segment => {
+        ctx.fillStyle = (snake.indexOf(segment) % 2 === 0) ? 'green' : 'darkgreen';
+        ctx.fillRect(segment.x * scale, segment.y * scale, scale, scale);
+    });
+
+    // Draw food
+    ctx.fillStyle = 'red';
+    ctx.fillRect(food.x * scale, food.y * scale, scale, scale);
+}
+
+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;
+        alert(`Game Over! Your score: ${score}`);
+        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;
+            alert(`Game Over! Your score: ${score}`);
+            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;
+    }
+}
+
+function gameLoop() {
+    if (!gameOver) {
+        update();
+        draw();
+        setTimeout(gameLoop, 100);
+    }
+}
+
+document.addEventListener('keydown', changeDirection);
+// Start the game loop
+gameLoop();
+// Initial draw
+draw();
+
+
+const widget = document.querySelector("#cap");
+
+widget.addEventListener("solve", function (e) {
+    token = e.detail.token;
+    console.log("Captcha solved, token:", token);
+});
+
+// Function to submit score to the server
+document.getElementById("snakeForm").addEventListener('submit', function(event) {
+    event.preventDefault();
+
+    if (!token) {
+        alert('Please complete the CAPTCHA before submitting your score.');
+        return;
+    }
+
+    // post request to server with score
+    fetch('/snake/submit', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+            score: score,
+            name: document.getElementById('name').value,
+            cap: token
+        })
+    }).then(response => {
+        if (response.ok) {
+            alert('Score submitted successfully!');
+            window.location.reload();
+        } else {
+            alert('Failed to submit score, check console for details.');
+            response.json().then(data => console.error(data));
+        }
+    }).catch(error => {
+        console.error('Error submitting score:', error);
+        alert('Error submitting score, check console for details.');
+    });
+});

src/templates/404.html

@@ -0,0 +1,48 @@
+{% extends "base.html" %}
+
+{% 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 :[
+        <br><br>
+        while you're here, why not play some snake? (use wasd to move, not mobile compatable :<)
+    </p>
+    <canvas id="snakeCanvas"></canvas>
+</section>
+<section class="flex-row">
+    <section class="min-width">
+        <h2>Submit score</h2>
+        <form id="snakeForm">
+            <input type="text" id="name" placeholder="Your name" required>
+            <cap-widget id="cap" data-cap-api-endpoint="https://cap.alfieking.dev/57d36430b9cb/api/"></cap-widget>
+            <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>
+{% endblock %}
+
+{% block scripts %}
+<script src="/static/js/snake.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@cap.js/widget"></script>
+{% endblock %}

src/templates/base.html

@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <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="stylesheet" href="/static/css/index.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="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:title" content="{{ self.title() }}">
+    <meta property="og:description" content="{{ self.description() }}">
+    <meta property="og:image" content="static/content/icon.webp">
+    {% block head %}
+    {% endblock %}
+</head>
+<body>
+    <div id="furry"></div>
+    <div id="sidebar">
+        <nav>
+            <section>
+                <h1>Things to see :3</h1>
+                <ul>
+                    <li><a href="#Home" onclick="alert('ur already here :3')">Home</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>
+                    <li><a href="https://open.spotify.com/user/xz02oolstlvwxqu1pfcua9exz?si=14396e637f284e03">Spotify</a></li>
+                    <li><a href="https://steamcommunity.com/id/acetheking987/">Steam</a></li>
+                    <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>
+                </ul>
+            </section>
+        </nav>
+        <section>
+            <h6 class="irken">heya, try typing "furry" and "irken" into this page!</h6>
+        </section>
+        <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://ne0nbandit.neocities.org/"><img src="https://ne0nbandit.github.io/assets/img/btn/mine/nbbanner.png" alt="ne0nbandit"></a></li>
+                <li><a href="https://thinliquid.dev"><img src="https://thinliquid.dev/thnlqd.png" alt="thinliquid"></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://s1nez.nekoweb.org/"><img src="https://s1nez.nekoweb.org/BUTTON.gif" alt="s1nez"></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://itsnotstupid.com"><img src="https://itsnotstupid.com/pics/button1.gif" alt="itsnotstupid"></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://eightyeightthirty.one"><img src="https://eightyeightthirty.one/88x31.png" alt="88x31"></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://tuxedodragon.art"><img src="https://tuxedodragon.art/tuxedodragon%2088x31.gif" alt="tuxedodragon"></a></li>
+            </ul>
+        </section>
+        <section>
+            <pre class="vsmoltext">      |\      _,,,---,,_<br>ZZZzz /,`.-'`'    -.  ;-;;,_<br>     |,4-  ) )-,_. ,\ (  `'-'<br>    '---''(_/--'  `-'\_)</pre>
+        </section>
+        <img src="static/content/haj.gif" alt="haj" class="haj">
+    </div>
+    <main id="main">
+        <header id="home">
+            <div class="row">
+                <img src="/static/content/icon.webp">
+                <div>
+                    <h1>Alfie King</h1>
+                    <h2 id="typing">server backend survivor</h2>
+                </div>
+            </div>
+        </header>
+        <nav id="alt-nav">
+            <ul>
+                <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>
+                <li><a href="https://open.spotify.com/user/xz02oolstlvwxqu1pfcua9exz?si=14396e637f284e03">Spotify</a></li>
+                <li><a href="https://steamcommunity.com/id/acetheking987/">Steam</a></li>
+                <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>
+            </ul>
+        </nav>
+        {% block content %}{% endblock %}
+        <section>
+            <footer>
+                <p>legal stuff idk :3 | icba to &copy; this :P | made with &hearts; and caffine</p>
+            </footer>
+        </section>
+    </main>
+    {% block scripts %}{% endblock %}
+    <script src="/static/js/index.js"></script>
+</body>
+</html>

src/templates/index.html

@@ -0,0 +1,115 @@
+{% extends "base.html" %}
+
+{% block title %}Alfie's basement{% endblock %}
+{% block description %}server backend survivor{% endblock %}
+
+{%block content %}
+<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
+        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
+        a pain).
+        <br><br>
+        I would like to make some more projects in the future, but I am not sure what I want to make yet. I tend to make thing on impulse a lot, and motivation
+        is "lacking" at times. So the few ideas I do have may never come to fruition. I hope to get better at art so i could hopefully make a game that is somewhat
+        interesting. But im at a lack of ideas at the moment.
+        <br><br>
+        I would also like to have a functional blog on this site, but I bearly talk about much so I dont know what I would write about. I like to ramble on about
+        random things, but I dont think that would be very interesting to read, and I think that I would forget to update it. I have a tumblr that I have had for a few
+        years now, but I dont post on it (the social anxiety is too much for me :<). However I hope to get better at that in the future.
+    </p>
+</section>
+<section class="blinkies">
+    <img src="https://adriansblinkiecollection.neocities.org/x45.gif" alt="">
+    <img src="https://adriansblinkiecollection.neocities.org/t3.gif" alt="">
+    <img src="https://adriansblinkiecollection.neocities.org/k25.gif" alt="">
+    <img src="https://s1nez.nekoweb.org/img/52475686_BP77MK3UdnLmIQk.gif" alt="">
+    <img src="https://s1nez.nekoweb.org/img/hc/hc%20(79).gif" alt="">
+    <img src="https://dewside.neocities.org/blinkies/bisigns.gif" alt="">
+    <img src="https://s1nez.nekoweb.org/g/ggg/gg%20(32).gif" alt="">
+    <img src="https://s1nez.nekoweb.org/img/7dcd20d4.gif" alt="">
+</section>
+<section class="rowsect">
+    <a href="" id="spotify-link">
+        <div id="spotify">
+            <h1 id="spotify-title"></h1>
+            <h2 id="spotify-artist"></h2>
+        </div>
+    </a>
+    <div class="stamps">
+        <img src="https://s1nez.nekoweb.org/img/other/ba4ba47a.png" alt="">
+        <img src="https://s1nez.nekoweb.org/img/fa02abd7.png" alt="">
+        <img src="https://s1nez.nekoweb.org/img/hc/hc%20(172).gif" alt="">
+        <img src="https://gligar.neocities.org/furret2.png" alt="">
+        <img src="https://gligar.neocities.org/ralsei2.png" alt="">
+        <img src="https://gligar.neocities.org/tism.png" alt="">
+        <img src="https://64.media.tumblr.com/11957593416710af9ff049ff6ae7ab63/tumblr_pbb7cd42Ln1xz2nuuo4_100.gif" alt="">
+        <img src="https://dewside.neocities.org/stamps/dogofwisdom.gif" alt="">
+        <img src="https://dewside.neocities.org/stamps/kazookid.gif" alt="">
+        <img src="https://64.media.tumblr.com/3085aeace24ca0c5ddf08aac37cc3ab4/45a30eb92e06a85c-3a/s100x200/b7bfb2e91adbc310f712f4492e668298bd0779de.gif" alt="">
+        <img src="https://s1nez.nekoweb.org/img/hc/hc%20(27).png" alt="">
+        <img src="https://s1nez.nekoweb.org/g/ggg/gg%20(13).gif" alt="">
+        <img src="https://kopawz.neocities.org/stamphoard/stamps2/kriswhere.png" alt="">
+        <img src="https://adriansblinkiecollection.neocities.org/stamps/g5.gif" alt="">
+        <img src="https://adriansblinkiecollection.neocities.org/stamps/e40.gif" alt="">
+        <img src="https://adriansblinkiecollection.neocities.org/stamps/e43.gif" alt="">
+    </div>
+</section>
+<section>
+    <h1>Projects & stuff</h1>
+    <p>just some projects ive worked on over time</p>
+    <ul>
+        <li>
+            <h2>alfieking.dev</h2>
+            <p>
+                This website is a project that I have been working on for a while now. I have made a few versions of it, but I have 
+                never been happy with them. I am quite happy with this version atm since it is more organized and has a design that I
+                like.
+                <a href="https://git.alfieking.dev/acetheking987/alfieking.dev">source code</a>
+            </p>
+        </li>
+        <li>
+            <h2>owo (the terminal command)</h2>
+            <p>
+                I made this project as a joke, I can't remember exactly what I baised it off other than the fact that it was somthing 
+                similar to this but in a different language. I originally made it in python, but I have since rewritten it in c++ so 
+                that it would be faster and so that I could learn c++.
+                <a href="https://git.alfieking.dev/acetheking987/term-owo-cpp">source code</a>
+            </p>
+        </li>
+        <li>
+            <h2>prismic</h2>
+            <p>
+                Prismic is a basic message board that I made, it was mainly made to learn how to use templating and more backend
+                web development. it uses flask for the web framework and uses a sqlite database to store the messages. I have thought
+                about remaking it in c++ since I found a c++ web framework that I would like to try out.
+                <a href="https://prismic.alfieking.dev">Primic</a> | <a href="https://git.alfieking.dev/acetheking987/prismic">source code</a>
+            </p>
+        </li>
+    </ul>
+</section>
+<section>
+    <h1>The button collection™</h1>
+    <div id="button-collection">
+    </div>
+</section>
+<section>
+    <h1>Some News</h1>
+    <h6>(dont expect this to be updated often tho :P)</h6>
+    <ul>
+        <li>
+            <h2>18-06-2025</h2>
+            <p>
+                I plan on updating the site soon, I have a few ideas that I want to implement. I want to make it more 
+                interactive and fun to use. I also want to add a blog section so that I can write about random things that I find interesting. I also 
+                want to add a few more projects that I have been working on. Annoyingly I think it would be a good idea to remake this site with some sort of
+                framework so i can use templating, however this kinda bothers me since I like the simplicity of this site. And prefer to keep it as a static site
+                that i can just throw at nginx.
+            </p>
+        </li>
+    </ul>
+</section>
+{% endblock %}

src/templates/robots.txt

@@ -0,0 +1,7 @@
+User-agent: *
+Allow: /
+Disallow: /404.html
+
+Sitemap: https://alfieking.dev/sitemap.xml
+
+# hewwo :3

src/templates/sitemap.xml

@@ -0,0 +1,6 @@
+<?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>