Readd small image support

revert Embed Image test?

constants.json

@@ -124,171 +124,235 @@
             }
         }
     },
-    "highlightedWords": {
-        "birds": {
+    "highlightedWords": [
+        {
+            "words": [
+                "birds",
+                "Pissing",
+                "Starwalker",
+
+                "word highlighting",
+                "highlight",
+                "Highlight",
+
+                "Javascript",
+                "JSON",
+                "JQuery",
+                ".js",
+
+                "enby",
+
+                "Slay the Spire"
+            ],
             "color": "yellow"
         },
-        "Pissing": {
-            "color": "yellow"
-        },
-        "Starwalker": {
-            "color": "yellow"
-        },
-        "word highlighting": {
-            "color": "yellow"
-        },
-        "Godot Engine": {
-            "color": "#64B5F6"
-        },
-        "Javascript": {
-            "color": "yellow"
-        },
-        "JSON": {
-            "color": "yellow"
-        },
-        "JQuery": {
-            "color": "yellow"
-        },
-        "NodeJS": {
-            "color": "limegreen"
-        },
-        "Violet": {
-            "color": "rgb(200, 150, 255)"
-        },
-        "Purgatory": {
-            "color": "rgb(200, 150, 255)"
-        },
-        "Limbo": {
-            "color": "rgb(200, 150, 255)"
-        },
-        "Asahi": {
-            "color": "rgb(255, 175, 175)",
+        {
+            "words": [
+                "Teto Tuesday",
+                "Teto Territory",
+                "Teto",
+                "Kasane"
+            ],
+            "color": "#d5738d",
             "caseInsensitive": true
         },
-        "Lunya": {
-            "color": "rgb(255, 175, 175)"
-        },
-        "Sylvie": {
-            "color": "#f768a4"
-        },
-        "bisexual": {
-            "color": "rgb(214, 2, 112)"
-        },
-        "enby": {
-            "color": "rgb(252, 244, 52)"
-        },
-        "YouTube": {
-            "color": "rgb(255, 0, 0)",
-            "caseInsensitive": true
-        },
-        "Fedi": {
-            "color": "rgb(175, 125, 200)"
-        },
-        "Matrix": {
-            "color": "limegreen"
-        },
-        "Element": {
-            "color": "rgb(100, 255, 200)"
-        },
-        "Codeberg": {
-            "color": "rgb(0, 255, 255)"
-        },
-        "Code": {
-            "color": "rgb(150, 175, 255)"
-        },
-        "Docker": {
-            "color": "blue"
-        },
-        "Github": {
-            "color": "gray"
-        },
-        "Steam": {
-            "color": "lightgray"
-        },
-        "Univerter": {
-            "link": "https://univerter.dev/",
-            "color": "rgb(200, 175, 255)"
-        },
-        "Ko-fi": {
-            "color": "rgb(255, 150, 150)"
-        },
-        "Revolt": {
-            "color": "rgb(255, 50, 50)"
-        },
-        "Discord": {
-            "color": "rgb(150, 150, 255)"
-        },
-        "SearXNG": {
-            "color": "rgb(100, 100, 255)"
-        },
-        "highlight": {
-            "color": "yellow",
-            "caseInsensitive": true
-        },
-        "Forgejo": {
-            "color": "orange"
-        },
-        "HTML": {
-            "color": "orange"
-        },
-        "CSS": {
-            "color": "rgb(50, 200, 255)"
-        },
-        "Thumbor": {
-            "color": "rgb(225, 225, 255)"
-        },
-        "Spotify": {
-            "color": "limegreen"
-        },
-        "Ultrakill": {
+        {
+            "words": [
+                "YouTube",
+                "ULTRAKILL",
+                "Lethal Company"
+            ],
             "color": "red",
             "caseInsensitive": true
         },
-        "Risk of Rain 2": {
+        {
+            "words": [
+                "Spooky's Jump Scare Mansion"
+            ],
+            "color": "rgb(150, 175, 255)"
+        },
+        {
+            "words": [
+                "Forgejo",
+                "HTML",
+                "Shortcat",
+                "Valve",
+                "Spooky",
+                "The Ironclad"
+            ],
+            "color": "orange"
+        },
+        {
+            "words": [
+                "NodeJS",
+                "Spotify",
+                "Wambu",
+                "Matrix",
+                "The Silent"
+            ],
+            "color": "limegreen"
+        },
+        {
+            "words": [
+                "Godot Engine"
+            ],
+            "color": "#64B5F6"
+        },
+        {
+            "words": [
+                "Violet",
+                "Purgatory",
+                "Limbo",
+                "The Watcher"
+            ],
+            "color": "rgb(200, 150, 255)"
+        },
+        {
+            "words": [
+                "bisexual"
+            ],
+            "color": "rgb(214, 2, 112)"
+        },
+        {
+            "words": [
+                "Fedi"
+            ],
+            "color": "rgb(175, 125, 200)"
+        },
+        {
+            "words": [
+                "Element"
+            ],
+            "color": "rgb(100, 255, 200)"
+        },
+        {
+            "words": [
+                "Codeberg"
+            ],
+            "color": "rgb(0, 255, 255)"
+        },
+        {
+            "words": [
+                "Code"
+            ],
+            "color": "rgb(150, 175, 255)"
+        },
+        {
+            "words": [
+                "Codium"
+            ],
+            "color": "rgb(150, 175, 255)"
+        },
+        {
+            "words": [
+                "Docker"
+            ],
+            "color": "blue"
+        },
+        {
+            "words": [
+                "Github"
+            ],
+            "color": "gray"
+        },
+        {
+            "words": [
+                "Steam"
+            ],
+            "color": "lightgray"
+        },
+        {
+            "words": [
+                "Univerter"
+            ],
+            "link": "https://univerter.dev/",
+            "color": "rgb(200, 175, 255)"
+        },
+        {
+            "words": [
+                "Ko-fi"
+            ],
+            "color": "rgb(255, 150, 150)"
+        },
+        {
+            "words": [
+                "Revolt"
+            ],
+            "color": "rgb(255, 50, 50)"
+        },
+        {
+            "words": [
+                "Discord"
+            ],
+            "color": "rgb(150, 150, 255)"
+        },
+        {
+            "words": [
+                "SearXNG"
+            ],
+            "color": "rgb(100, 100, 255)"
+        },
+        {
+            "words": [
+                "CSS",
+                "Neow",
+                "The Defect"
+            ],
+            "color": "rgb(50, 200, 255)"
+        },
+        {
+            "words": [
+                "Thumbor"
+            ],
+            "color": "rgb(225, 225, 255)"
+        },
+        {
+            "words": [
+                "Risk of Rain 2"
+            ],
             "color": "rgb(150, 220, 255)",
             "caseInsensitive": true
         },
-        "Liberapay": {
+        {
+            "words": [
+                "Liberapay"
+            ],
             "color": "yellow"
         },
-        "Roblox": {
+        {
+            "words": [
+                "Roblox"
+            ],
             "color": "rgb(225, 225, 225)"
         },
-        "Teto Tuesday": {
-            "color": "rgb(255, 100, 100)",
-            "caseInsensitive": true
-        },
-        "Teto Territory": {
-            "color": "rgb(255, 100, 100)",
-            "caseInsensitive": true
-        },
-        "Teto": {
-            "color": "rgb(255, 100, 100)",
-            "caseInsensitive": true
-        },
-        "Kasane": {
-            "color": "rgb(255, 100, 100)",
-            "caseInsensitive": true
-        },
-        "Ryouiki Tenkai": {
+        {
+            "words": [
+                "Ryouiki Tenkai"
+            ],
             "bold": true,
             "italicized": true,
             "caseInsensitive": true
         },
-        "Pokerogue": {
+        {
+            "words": [
+                "Pokerogue"
+            ],
             "caseInsensitive": true,
             "color": "#366383",
             "outline": "#d43131",
             "bold": true
         },
-        "page embed": {
+        {
+            "words": [
+                "page embed"
+            ],
             "link": "/faq#embeds"
         },
-        "YIP": {
+        {
+            "words": [
+                "YIP"
+            ],
             "italicized": true
-        },
-        "Lethal Company": {
-            "color": "red"
         }
-    }
+    ]
 }

expressHandler.js

@@ -0,0 +1,28 @@
+const express = require("express"),
+path = require("path")
+
+var app = express()
+
+const PORT = process.env.PORT || 8080
+
+const cachePath = path.join(__dirname, 'cached')
+const assetPath = path.join(__dirname, "assets")
+
+app.listen(PORT, () => {
+    console.log("Violet's Purgatory is now listening on port: " + PORT)
+})
+
+const pageUpdater = require("./pageUpdater.js")
+
+app.use("/fonts", express.static(path.join(assetPath, "fonts")))
+app.use("/cached", express.static(cachePath))
+app.use("/imgs", express.static(path.join(assetPath, "Images")))
+app.use("/snds", express.static(path.join(assetPath, "Sounds")))
+
+app.use("/emojis", express.static(path.join(cachePath, "emojis")))
+
+app.use(pageUpdater.middleWare)
+
+module.exports = {
+    app: app
+}

fileHandler.js

@@ -0,0 +1,29 @@
+const path = require("path"),
+fs = require("fs")
+
+const cachePath = path.join(__dirname, 'cached')
+const assetPath = path.join(__dirname, "assets")
+const configPath = path.join(__dirname, 'config')
+
+const configFile = path.join(configPath, "config.json")
+const announcementFile = path.join(configPath, "announcement.html")
+
+if (!fs.existsSync(configPath)) {
+    fs.mkdirSync(configPath)
+}
+
+if (!fs.existsSync(configFile)) {
+    fs.writeFileSync(configFile, fs.readFileSync(path.join(assetPath, "defaults/config.json")))
+}
+
+if (!fs.existsSync(announcementFile)) {
+    fs.writeFileSync(announcementFile, ``)
+}
+
+if (!fs.existsSync(cachePath)) {
+    fs.mkdirSync(cachePath)
+}
+
+if (!fs.existsSync(path.join(cachePath, "emojis"))) {
+    fs.mkdirSync(path.join(cachePath, "emojis"))
+}

index.js

@@ -1,61 +1,13 @@
-const express = require('express'),
-    path = require('path'),
-    fs = require('fs'),
-    WebSocket = require("ws")
+const fs = require("fs")
 
-var app = express()
-
-const PORT = process.env.PORT || 8080
-
-const staticpath = path.join(__dirname, 'static')
-const cachePath = path.join(__dirname, 'cached')
-const assetPath = path.join(__dirname, "assets")
-const configPath = path.join(__dirname, 'config')
-
-const configFile = path.join(configPath, "config.json")
-const announcementFile = path.join(configPath, "announcement.html")
-
-if (!fs.existsSync(configPath)) {
-    fs.mkdirSync(configPath)
-}
-
-if (!fs.existsSync(configFile)) {
-    fs.writeFileSync(configFile, fs.readFileSync(path.join(assetPath, "defaults/config.json")))
-}
-
-if (!fs.existsSync(announcementFile)) {
-    fs.writeFileSync(announcementFile, ``)
-}
-
-const pageUpdater = require('./pageUpdater.js')
-
-var constants = JSON.parse(fs.readFileSync(path.join(__dirname, 'constants.json')))
-
-app.listen(PORT, () => {
-    console.log("Violet's Purgatory is now listening on port: " + PORT)
-})
-
-app.use("/fonts", express.static(path.join(assetPath, "fonts")))
-app.use("/cached", express.static(cachePath))
-app.use("/imgs", express.static(path.join(assetPath, "Images")))
-app.use("/snds", express.static(path.join(assetPath, "Sounds")))
-
-app.use("/emojis", express.static(path.join(cachePath, "emojis")))
-
-if (!fs.existsSync(cachePath)) {
-    fs.mkdirSync(cachePath)
-}
-
-if (!fs.existsSync(path.join(cachePath, "emojis"))) {
-    fs.mkdirSync(path.join(cachePath, "emojis"))
-}
-
-app.use(pageUpdater.middleWare)
+require("./fileHandler.js")
+require('./expressHandler.js')
+// require("./imageEmbedder.js")
 
 process.on('uncaughtException', (err, origin) => {
     fs.writeSync(
-      process.stderr.fd,
-      `Caught exception: ${err}\n` +
-      `Exception origin: ${origin}`,
+        process.stderr.fd,
+        `Caught exception: ${err}\n` +
+        `Exception origin: ${origin}`,
     );
-  });  
+});

overcomplicatedStatuses.js

@@ -137,16 +137,17 @@ module.exports = {
                         time = activity.timestamps.start
                     }
                     if (!activity.assets) {
-                        activity.assets = { "large_text": " ", "small_text": " " }
+                        activity.assets = { "large_text": "", "small_text": "" }
                     }
 
-                    var text1 = onlyIfExists("<br><span style='font-size: 1.3rem;'>" + activity.song + "</span>", activity.song) || activity.details || activity.assets.large_text
-                    var text2 = onlyIfExists("By: " + activity.artist, activity.artist) || activity.state || activity.assets.small_text
-                    var text3 = onlyIfExists("On: " + activity.album, activity.album)
+                    var text1 = onlyIfExists("<br><span style='font-size: 1.3rem;'>" + activity.song + "</span>", activity.song) || activity.details
+                    var text2 = onlyIfExists("By: " + activity.artist, activity.artist) || activity.state
+                    var text3 = onlyIfExists("On: " + activity.album, activity.album != activity.song && activity.album)
 
                     addedHTML += `
                         <div class="chip activity grid-child">
                             <img src="${get_img(activity)}" title="${activity.assets.large_text || activity.assets.small_text}">
+                            ${onlyIfExists(`<img class="smallimg" src="${get_img(activity, "small_image")}" title="${activity.assets.small_text}">`, activity.assets.small_image)}
                             <p style="text-align: left; font-size: 1.15rem;">
                                 <span style="font-size: 1.6rem;">${activity.name}</span>
                                 ${onlyIfExists("<br>" + text1, text1)}

pageUpdater.js

@@ -90,82 +90,103 @@ function highlighter(json, full = true) {
                 element.children = highlighter(element.children, full)
             }
         } else if (element.type == "text") {
-            var highTable = Object.keys(highlightedWords)
+            var index = 0
+            for (let i = 0; i < highlightedWords.length; i++) {
+                var dict = highlightedWords[i]
+                for (let x = 0; x < dict.words.length; x++) {
+                    index += 1
+                    var term = dict.words[x];
+                    var termProps = dict
 
-            for (let index = 0; index < highTable.length; index++) {
-                var term = highTable[index];
-                var termProps = highlightedWords[term]
+                    var reg = term
+                    if (termProps.caseInsensitive) {
+                        reg = new RegExp(`(${term})`, "gi")
+                    }
 
-                var reg = term
-                if (termProps.caseInsensitive) {
-                    reg = new RegExp(`(${term})`, "gi")
+                    element.content = element.content.replaceAll(`{${term}}`, "TEMPORARY_REPLACE")
+                    element.content = element.content.replaceAll(reg, "{TERM" + index + "}")
+                    element.content = element.content.replaceAll("TEMPORARY_REPLACE", `${term}`)
                 }
-
-                element.content = element.content.replaceAll(`{${term}}`, "TEMPORARY_REPLACE")
-                element.content = element.content.replaceAll(reg, "{TERM" + index + "}")
-                element.content = element.content.replaceAll("TEMPORARY_REPLACE", `${term}`)
             }
 
             if (full) {
-                for (let index = 0; index < highTable.length; index++) {
-                    var termKey = "{TERM" + index + "}"
-                    var termProps = highlightedWords[highTable[index]]
-                    while (element.content.includes(termKey)) {
-                        var termIndex = element.content.indexOf(termKey)
+                var index = 0
+                for (let i = 0; i < highlightedWords.length; i++) {
+                    var dict = highlightedWords[i]
+                    for (let x = 0; x < dict.words.length; x++) {
+                        index += 1
+                        var termKey = "{TERM" + index + "}"
+                        var termProps = dict
+                        while (element.content.includes(termKey)) {
+                            var termIndex = element.content.indexOf(termKey)
 
-                        var spanEnd = element.content.indexOf(" ", termIndex)
+                            var spanEnd = element.content.indexOf(" ", termIndex)
 
-                        if (spanEnd == -1) {
-                            spanEnd = element.content.length
-                        }
-
-                        var endContent = element.content.substring(termIndex + termKey.length, spanEnd)
-
-                        var spanStart = element.content.substring(0, termIndex).lastIndexOf(" ") + 1
-                        var startContent = element.content.substring(spanStart - 1, termIndex)
-
-                        var style = termProps.style || ""
-                        var classes = termProps.classes || ""
-                        var link = termProps.link || ""
-
-                        if (termProps.color) {
-                            style += `color: ${termProps.color};`
-                        }
-
-                        if (termProps.italicized) {
-                            style += "font-style: italic;"
-                        }
-
-                        if (termProps.outline) {
-                            var width = 2
-                            // style += `text-shadow: -1px -1px 0 ${termProps.outline}, 1px -1px 0 ${termProps.outline}, -1px 1px 0 ${termProps.outline}, 1px 1px 0 ${termProps.outline};`
-                            style += `-webkit-text-stroke: 1px ${termProps.outline};`
-                            // ^ Not in use because it looks bad :30
-                        }
-
-                        if (termProps.bold) {
-                            classes += "bold"
-                        }
-
-                        if (style.length > 2) {
-                            style = `style="${style}"`
-                        }
-
-                        if (classes.length > 2) {
-                            classes = `class="${classes}"`
-                        }
-
-                        var stuff = (startContent + highTable[index] + endContent).trim()
-
-                        if (!stuff.includes("span")) {
-                            var replacement = `<span ${style} ${classes} ${link}>${stuff}</span>`
-
-                            if (link) {
-                                replacement = `<a href="${link}">${replacement}</a>`
+                            if (spanEnd == -1) {
+                                spanEnd = element.content.length
+                            }
+
+                            var spanStart = element.content.substring(0, termIndex).lastIndexOf(" ") + 1
+
+                            // if (highTable[index] == "ULTRAKILL") {
+                            //     console.log(startContent, " ---- ", endContent)
+                            // }
+
+                            var startContent = element.content.substring(spanStart - 1, termIndex)
+                            var endContent = element.content.substring(termIndex + termKey.length, spanEnd)
+
+                            if (startContent.includes("(") && !endContent.includes(")")) {
+                                spanEnd = element.content.indexOf(")", spanStart) + 1
+                                endContent = element.content.substring(termIndex + termKey.length, spanEnd)
+                            }
+                            else if (endContent.includes(")") && !startContent.includes("(")) {
+                                spanStart = element.content.substring(0, spanStart).lastIndexOf("(")
+                                startContent = element.content.substring(spanStart - 1, termIndex)
+                            }
+
+                            var style = termProps.style || ""
+                            var classes = termProps.classes || ""
+                            var link = termProps.link || ""
+
+                            if (termProps.color) {
+                                style += `color: ${termProps.color};`
+                            }
+
+                            if (termProps.italicized) {
+                                style += "font-style: italic;"
+                            }
+
+                            if (termProps.outline) {
+                                var width = 2
+                                // style += `text-shadow: -1px -1px 0 ${termProps.outline}, 1px -1px 0 ${termProps.outline}, -1px 1px 0 ${termProps.outline}, 1px 1px 0 ${termProps.outline};`
+                                style += `-webkit-text-stroke: 1px ${termProps.outline};`
+                                // ^ Not in use because it looks bad :30
+                            }
+
+                            if (termProps.bold) {
+                                classes += "bold"
+                            }
+
+                            if (style.length > 2) {
+                                style = `style="${style}"`
+                            }
+
+                            if (classes.length > 2) {
+                                classes = `class="${classes}"`
+                            }
+
+                            var stuff = (startContent + dict.words[x] + endContent).trim()
+
+                            if (!stuff.includes("span")) {
+                                var replacement = `<span ${style} ${classes} ${link}>${stuff}</span>`
+
+                                if (link) {
+                                    replacement = `<a href="${link}">${replacement}</a>`
+                                }
+                                element.content = element.content.substring(0, spanStart) + replacement + element.content.substring(spanEnd)
+                            } else {
+                                element.content = element.content.replace(termKey, dict.words[x])
                             }
-                            element.content = element.content.substring(0, spanStart) + replacement + element.content.substring(spanEnd)
-                        } else {
-                            element.content = element.content.replace(termKey, highTable[index])   
                         }
                     }
                 }
@@ -181,9 +202,16 @@ function highlighter(json, full = true) {
 function converter(html, dynamic = true) {
     var startTime = Date.now()
     var config = JSON.parse(fs.readFileSync(path.join(__dirname, 'config/config.json')))
-
+    
     var staticReplacers = {
-        "ALL_HIGHLIGHTS": Object.keys(highlightedWords).join(", "),
+        "ALL_HIGHLIGHTS": () => {
+            var addedHTML = ""
+            for (var i = 0; i < highlightedWords.length; i++) {
+                addedHTML += highlightedWords[i].words.join(", ")
+                addedHTML += ", "
+            }
+            return addedHTML.substring(0, addedHTML.length - 2)
+        },
         "BRANCH_NAME": () => {
             if (process.env.BRANCH == "dev") {
                 return "Stable"

static/asahi/index.html

@@ -1,92 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <link rel="stylesheet" type="text/css" href="/style.css">
-    <link rel="stylesheet" type="text/css" href="/root.css">
-
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-    <script src="../jquery.js"></script>
-    <script src="../main.js"></script>
-
-    <title>Violet's Purgatory</title>
-
-    <meta name="darkreader-lock">
-
-    <meta content="Violet's Purgatory" property="og:title" />
-    <meta
-        content="Hello this is tje asahi a uhm uuhhh uhm ummmm uhmmm uhhh uhmmm ummm uhhh um!"
-        property="og:description" />
-    <meta content="./pfp.png" property="og:image" />
-    <meta content="#a200ff" data-react-helmet="true" name="theme-color" />
-</head>
-
-<body>
-    {WEATHER_MODIFIER}
-    {TOPBAR}
-    <h1 class="animatedTitle">Welcome to my<span class="mainTitle" style="color: rgb(200, 150, 255)">Humble Abode</span>
-    </h1>
-    <main class="animatedMain">
-        <p>nice seeing you here! while you're at it, why not check out my socials or about me?</p>
-        <hr>
-        <div id="card">
-            <h2>Asahi</h2>
-            <div style="display: flex; justify-content: center; align-items: center;">
-                <div style="width: 50%;">
-                    <img src="/imgs/asahiPFP.png" class="pfp">
-                </div>
-                <div style="width: 50%;">
-                    <div style="float: left;">
-                        <p>They/Them</p>
-                        <p>Marcy & Violet &lt;3</p>
-                    </div>
-                    <!-- <p>THIS TEXT IS THE EPIC EXTREME FILLER TO TEST THE SITE'S FORMATTING :fire:</p> -->
-                </div>
-            </div>
-            <hr>
-            <div>
-                <p style="padding: 10px;">
-                    <br>hi! my name is Asahi Lunya :3 i'm a bisexual enby who's a very queer mess
-
-                    <br>i have interests in tech, aerospace, trains, art, and music! i'm also a privacy/security
-                    enthusiast
-
-                    <br>i'm currently learning many new things in my life, expanding my knowledge
-
-                    <br>i hope you got to know me a little ^^
-                </p>
-                <!-- <a class="chip" href="https://beta.violets-purgatory.dev">Beta site</a>
-                    <a class="chip" href="https://blog.violets-purgatory.dev">Blog</a> -->
-                <!-- <a class="chip" href="https://fs.violets-purgatory.dev">FileShare</a> -->
-            </div>
-        </div>
-
-        <h2><hr>Disclaimer!</h2>
-        <p>
-            This is NOT Asahi's real site! Please find it <a href="https://asahixp.pages.gay">here</a> instead!
-        </p>
-
-        <h2><hr>Quotes:</h2>
-
-        
-        <p>“literally anything from the 1995 movie 'Hackers' will absolutely fit here” -tyberry<br>
-"ooooo you like boys, ur a boykisser" -Elodie<br>
-"asahi is twink-esk in spirit. aspirational." -Juniper<br>
-"cute huggable nice huggable cute cute" -marcy<br>
-"Petting Asahi makes the world better” -yassie<br>
-"meow meow meow mrrrp nya~" -gettie<br>
-"cute and queer catenby that functions as fedi's algorithm on the side" -7331<br>
-"sometimes this one still forgets how friendly some people are here… like Asahi, for instance!” -Ariadne<br>
-"Asahi wa sugoi desu ne?" -Bard<br>
-"this is a quote :3c" -Ukko<br>
-"best Asahi I've ever met (awww!)" -Kristina<br>
-"asahi is friend shaped and they have a good heart" -Drew<br>
-"10/10 will give loving headpats and will protect them!" -Natsura</p>
-
-            
-    </main>
-</body>
-
-</html>

static/index.html

@@ -86,6 +86,7 @@
         {PATH_SOCIALS}
         <br>
         <h1><hr>FAQ</h1>
+        <a href="faq/">See the full FAQ here!</a>
         {PATH_FAQ}
 
         {SELECTED_VIDEO}

static/main.js

@@ -86,7 +86,7 @@ function timeFormatter(seconds) {
     }
 }
 
-function loop() {
+function spinLoop() {
     spinWaiting = true
     setTimeout(() => {
         spinWaiting = false
@@ -125,26 +125,31 @@ function loop() {
             spins = lerp(spins, Math.round(spins), 1 / spinSpeed * 3)
         }
         $(".pfp").css("rotate", (spins * 360) + "deg")
-
-        $(".durationBarFormatter").each((_, item) => {
-            item = $(item)
-            item.text(`${timeFormatter((Date.now() - item.attr("data-start")))}/${timeFormatter((item.attr("data-end") - item.attr("data-start")))}`)
-        })
-
-        $(".timeEstimate").each((_, item) => {
-            item = $(item)
-            item.text(gameTimeFormatter(Date.now() - item.attr("data-start")))
-        })
-
-        $(".endEstimate").each((_, item) => {
-            item = $(item)
-            item.text(timeFormatter((item.attr("data-end") - Date.now())))
-        })
-
-        loop()
+        spinLoop()
     }, 1/spinSpeed * 1000);
 }
 
+function secondLoop() {
+    $(".durationBarFormatter").each((_, item) => {
+        item = $(item)
+        item.text(`${timeFormatter((Date.now() - item.attr("data-start")))}/${timeFormatter((item.attr("data-end") - item.attr("data-start")))}`)
+    })
+
+    $(".timeEstimate").each((_, item) => {
+        item = $(item)
+        item.text(gameTimeFormatter(Date.now() - item.attr("data-start")))
+    })
+
+    $(".endEstimate").each((_, item) => {
+        item = $(item)
+        item.text(timeFormatter((item.attr("data-end") - Date.now())))
+    })
+
+    setTimeout(() => {
+        secondLoop()
+    }, 1000);
+}
+
 window.onbeforeunload = function () {
     window.scrollTo(0, 0);
 }
@@ -154,7 +159,8 @@ window.onload = function () {
 
     pfp = $(".pfp")
 
-    loop()
+    spinLoop()
+    secondLoop()
 
     pfp.on("mousedown", () => {
         // if (!spinWaiting) {

static/themes/magic/style.css

@@ -1,6 +1,6 @@
 
 #card {
-    background-color: rgba(20, 5, 90, 0.5);
+    background-color: rgba(25, 0, 70, 1);
     /* backdrop-filter: blur(5px); */
 }
 .magicStuff {

static/themes/rain/style.css

@@ -1,6 +1,6 @@
 
 #card {
-    background-color: rgba(50, 0, 90, 0.5);
+    background-color: rgba(25, 0, 70, 1);
     /* backdrop-filter: blur(5px); */
 }
 .rainStuff {