<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" type="text/css" href="./style.css">
    <link rel="stylesheet" type="text/css" href="./root.css">
    <noscript>
        <link rel="stylesheet" href="./noScript.css">
    </noscript>

    <script src="./jquery.js"></script>
    <script src="./main.js"></script>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Violet's Purgatory</title>

    <meta name="darkreader-lock">

    <meta content="Violet's Purgatory" property="og:title" />
    <meta content="Hi, I'm Violet, a 15 year old web & game developer. My site has info about me, so please visit!" property="og:description" />
    <meta content="https://api.violets-purgatory.dev/v1/pfp" property="og:image" />
    <meta content="#a200ff" data-react-helmet="true" name="theme-color" />
</head>

<body>
    {WEATHER_MODIFIER}
    <h1 class="animatedTitle">Welcome to <span class="mainTitle">Violet's Purgatory</span><span class="note">Commit {COMMIT_COUNT}</span></h1>
    <main class="animatedMain">
        <p>Make sure to check out this project on <a href="https://git.violets-purgatory.dev/bingus_violet/violets-purgatory">Forgejo</a>!</p>
        <hr>
        <div id="card">
            <h2>{Violet}</h2>
            <div style="display: flex; justify-content: center; align-items: center;">
                <div style="width: 50%;">
                    <img draggable="false" src="https://api.violets-purgatory.dev/v1/pfp" class="pfp">
                </div>
                <div style="width: 50%;">
                    <div style="float: left;">
                        <p>They/Them</p>
                        <p>Developer</p>
                        <!-- <p>Dating Asahi &lt;3</p> -->
                        <p>{DISCORD_STATUS}</p>
                        <!-- <p>THIS TEXT IS THE EPIC EXTREME FILLER TO TEST THE SITE'S FORMATTING :fire:</p> -->
                    </div>
                </div>
            </div>
            <!-- <p class="noscript">Violet has been spun {SPINCOUNT} times!</p> -->
            <p class="spinnyCount" style="display: none;">You have spun Violet <span class="localSpins">4</span> times!<br>
                Everyone has spun Violet <span class="globalSpins">{SPINCOUNT}</span> times!</p>
 
            <hr>
           <div>
                <p style="padding: 10px;">Hi! I'm Violet, a 15 year old web and game developer. I make server-sided dynamic websites, with no Javascript required! I'm currently making games in the Godot Engine, and my dynamic sites in NodeJS.</p>
                <div class="linkContainer">
                    <a class="chip" href="./socials/">Socials</a>
                    <a class="chip" href="https://blog.violets-purgatory.dev">Blog</a>
                    <!-- <a class="chip" href="./stats">Stats</a> -->
                    <a class="chip" href="./faq">Nerd FAQ</a>
                    <a class="chip" href="https://{BRANCH_SUB}violets-purgatory.dev">{BRANCH_NAME} site</a>
                    <a class="chip" href="https://fs.violets-purgatory.dev">FileShare</a>
                </div>
                    <div class="customStatus">
                        {CUSTOM_STATUS}
                    </div>
            </div>
        </div>
        <p>{RANDOM_QUOTE}</p>
        
        <div id="activityHtml">
            {ACTIVITIES}
        </div>

        {ANNOUNCEMENT}
        
        <h2><hr>Services</h2>
        <p>List of services for public use hosted on Violet's Purgatory.</p>
        <a href="https://sxng.violets-purgatory.dev" class="chip">SearXNG: sxng.violets-purgatory.dev</a>
        <a class="chip">Matrix: matrix.violets-purgatory.dev</a>
        <a href="https://element.violets-purgatory.dev" class="chip">Element: element.violets-purgatory.dev</a>
        <a href="https://git.violets-purgatory.dev" class="chip">Forgejo: git.violets-purgatory.dev (contact me for an account)</a>
        <a class="chip">Thumbor: thumbor.violets-purgatory.dev</a>
        <hr>
        <h1>Socials</h1>
        {PATH_SOCIALS}
        <br>
        <!-- <h1><hr>FAQ</h1>
        {PATH_FAQ} -->

        {SELECTED_VIDEO}
        
        {PATH_STATS}

        <p>{WEATHER_TEXT}</p>
        <br>
    </main>
</body>

</html>