feat(xess): move CSS color definitions to CSS variables (#339)

Signed-off-by: Xe Iaso <me@xeiaso.net>
author: Xe Iaso <me@xeiaso.net> 2025-04-23 08:07:53 -0400
committer: GitHub <noreply@github.com> 2025-04-23 12:07:53 +0000
commit: cfbe16f2d0037b179624f692acd2276a8733e2fd (patch)
tree: 4bb7a6b769135fb95143ffa7fa85f1f23608aea5 /web/index.templ
parent: 1b206175f83926801d0b65953a85e8a5ea27d73d (diff)
download: anubis-cfbe16f2d0037b179624f692acd2276a8733e2fd.tar.xz
anubis-cfbe16f2d0037b179624f692acd2276a8733e2fd.zip
1 files changed, 161 insertions, 184 deletions
diff --git a/web/index.templ b/web/index.templ
index 989d717..818c6a5 100644
--- a/web/index.templ
+++ b/web/index.templ
@@ -1,203 +1,180 @@
 package web
 
 import (
-"github.com/TecharoHQ/anubis"
-"github.com/TecharoHQ/anubis/xess"
+	"github.com/TecharoHQ/anubis"
+	"github.com/TecharoHQ/anubis/xess"
 )
 
 templ base(title string, body templ.Component, challenge any, ogTags map[string]string) {
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <title>{ title }</title>
-    <link rel="stylesheet" href={ xess.URL }/>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-    <meta name="robots" content="noindex,nofollow"/>
-    for key, value := range ogTags {
-    <meta property={ key } content={ value }/>
-    }
-    <style>
-        body,
-        html {
-            height: 100%;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            margin-left: auto;
-            margin-right: auto;
-        }
-
-        .centered-div {
-            text-align: center;
-        }
-
-        #status {
-            font-variant-numeric: tabular-nums;
-        }
-
-        #progress {
-            display: none;
-            width: min(20rem, 90%);
-            height: 2rem;
-            border-radius: 1rem;
-            overflow: hidden;
-            margin: 1rem 0 2rem;
-            outline-offset: 2px;
-            outline: #b16286 solid 4px;
-        }
-
-        .bar-inner {
-            background-color: #b16286;
-            height: 100%;
-            width: 0;
-            transition: width 0.25s ease-in;
-        }
-    </style>
-    @templ.JSONScript("anubis_version", anubis.Version)
-    if challenge != nil {
-        @templ.JSONScript("anubis_challenge", challenge)
-    }
-
-</head>
-<body id="top">
-<main>
-    <center>
-        <h1 id="title" class=".centered-div">{ title }</h1>
-    </center>
-    @body
-    <footer>
-        <center>
-            <p>
-                Protected by <a href="https://github.com/TecharoHQ/anubis">Anubis</a> from <a
-                        href="https://techaro.lol"
-                >Techaro</a>. Made with ❤️ in 🇨🇦.
-            </p>
-            <p>Mascot design by <a href="https://bsky.app/profile/celphase.bsky.social">CELPHASE</a>.</p>
-        </center>
-    </footer>
-</main>
-</body>
-</html>
+	<!DOCTYPE html>
+	<html lang="en">
+		<head>
+			<title>{ title }</title>
+			<link rel="stylesheet" href={ xess.URL }/>
+			<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+			<meta name="robots" content="noindex,nofollow"/>
+			for key, value := range ogTags {
+				<meta property={ key } content={ value }/>
+			}
+			@templ.JSONScript("anubis_version", anubis.Version)
+			if challenge != nil {
+				@templ.JSONScript("anubis_challenge", challenge)
+			}
+		</head>
+		<body id="top">
+			<main>
+				<center>
+					<h1 id="title" class=".centered-div">{ title }</h1>
+				</center>
+				@body
+				<footer>
+					<center>
+						<p>
+							Protected by <a href="https://github.com/TecharoHQ/anubis">Anubis</a> from <a
+	href="https://techaro.lol"
+>Techaro</a>. Made with ❤️ in 🇨🇦.
+						</p>
+						<p>Mascot design by <a href="https://bsky.app/profile/celphase.bsky.social">CELPHASE</a>.</p>
+					</center>
+				</footer>
+			</main>
+		</body>
+	</html>
 }
 
 templ index() {
-<div class="centered-div">
-    <img
-            id="image"
-            style="width:100%;max-width:256px;"
-            src={ "/.within.website/x/cmd/anubis/static/img/pensive.webp?cacheBuster=" +
+	<div class="centered-div">
+		<img
+			id="image"
+			style="width:100%;max-width:256px;"
+			src={ "/.within.website/x/cmd/anubis/static/img/pensive.webp?cacheBuster=" +
     anubis.Version }
-    />
-    <img
-            style="display:none;"
-            style="width:100%;max-width:256px;"
-            src={ "/.within.website/x/cmd/anubis/static/img/happy.webp?cacheBuster=" +
+		/>
+		<img
+			style="display:none;"
+			style="width:100%;max-width:256px;"
+			src={ "/.within.website/x/cmd/anubis/static/img/happy.webp?cacheBuster=" +
     anubis.Version }
-    />
-    <p id="status">Loading...</p>
-    <script async type="module" src={
-    "/.within.website/x/cmd/anubis/static/js/main.mjs?cacheBuster=" + anubis.Version }></script>
-    <div id="progress" role="progressbar" aria-labelledby="status">
-        <div class="bar-inner"></div>
-    </div>
-    <details>
-        <summary>Why am I seeing this?</summary>
-        <p>You are seeing this because the administrator of this website has set up <a
-                    href="https://github.com/TecharoHQ/anubis">Anubis</a> to protect the server against the scourge of
-            <a href="https://thelibre.news/foss-infrastructure-is-under-attack-by-ai-companies/">AI companies
-                aggressively scraping websites</a>. This can and does cause downtime for the websites, which makes their
-            resources inaccessible for everyone.</p>
-        <p>Anubis is a compromise. Anubis uses a <a href="https://anubis.techaro.lol/docs/design/why-proof-of-work">Proof-of-Work</a>
-            scheme in the vein of <a href="https://en.wikipedia.org/wiki/Hashcash">Hashcash</a>, a proposed
-            proof-of-work scheme for reducing email spam. The idea is that at individual scales the additional load is
-            ignorable, but at mass scraper levels it adds up and makes scraping much more expensive.</p>
-        <p>Ultimately, this is a hack whose real purpose is to give a "good enough" placeholder solution so that more
-            time can be spent on fingerprinting and identifying headless browsers (EG: via how they do font rendering)
-            so that the challenge proof of work page doesn't need to be presented to users that are much more likely to
-            be legitimate.</p>
-        <p>Please note that Anubis requires the use of modern JavaScript features that plugins like <a
-                    href="https://jshelter.org/">JShelter</a> will disable. Please disable JShelter or other such
-            plugins for this domain.</p>
-    </details>
-    <noscript>
-        <p>
-            Sadly, you must enable JavaScript to get past this challenge. This is required because AI companies have
-            changed
-            the social contract around how website hosting works. A no-JS solution is a work-in-progress.
-        </p>
-    </noscript>
-    <div id="testarea"></div>
-</div>
+		/>
+		<p id="status">Loading...</p>
+		<script async type="module" src={ "/.within.website/x/cmd/anubis/static/js/main.mjs?cacheBuster=" + anubis.Version }></script>
+		<div id="progress" role="progressbar" aria-labelledby="status">
+			<div class="bar-inner"></div>
+		</div>
+		<details>
+			<summary>Why am I seeing this?</summary>
+			<p>
+				You are seeing this because the administrator of this website has set up <a
+	href="https://github.com/TecharoHQ/anubis"
+>Anubis</a> to protect the server against the scourge of
+				<a href="https://thelibre.news/foss-infrastructure-is-under-attack-by-ai-companies/">
+					AI companies
+					aggressively scraping websites
+				</a>. This can and does cause downtime for the websites, which makes their
+				resources inaccessible for everyone.
+			</p>
+			<p>
+				Anubis is a compromise. Anubis uses a <a href="https://anubis.techaro.lol/docs/design/why-proof-of-work">Proof-of-Work</a>
+				scheme in the vein of <a href="https://en.wikipedia.org/wiki/Hashcash">Hashcash</a>, a proposed
+				proof-of-work scheme for reducing email spam. The idea is that at individual scales the additional load is
+				ignorable, but at mass scraper levels it adds up and makes scraping much more expensive.
+			</p>
+			<p>
+				Ultimately, this is a hack whose real purpose is to give a "good enough" placeholder solution so that more
+				time can be spent on fingerprinting and identifying headless browsers (EG: via how they do font rendering)
+				so that the challenge proof of work page doesn't need to be presented to users that are much more likely to
+				be legitimate.
+			</p>
+			<p>
+				Please note that Anubis requires the use of modern JavaScript features that plugins like <a
+	href="https://jshelter.org/"
+>JShelter</a> will disable. Please disable JShelter or other such
+				plugins for this domain.
+			</p>
+		</details>
+		<noscript>
+			<p>
+				Sadly, you must enable JavaScript to get past this challenge. This is required because AI companies have
+				changed
+				the social contract around how website hosting works. A no-JS solution is a work-in-progress.
+			</p>
+		</noscript>
+		<div id="testarea"></div>
+	</div>
 }
 
 templ errorPage(message string, mail string) {
-<div class="centered-div">
-    <img
-            id="image"
-            alt="Sad Anubis"
-            style="width:100%;max-width:256px;"
-            src={ "/.within.website/x/cmd/anubis/static/img/reject.webp?cacheBuster=" + anubis.Version }
-    />
-    <p>{ message }.</p>
-    <button onClick="window.location.reload();">Try again</button>
-    if mail != "" {
-	    <p><a href="/">Go home</a> or if you believe you should not be blocked, please contact the webmaster at <a href={"mailto:" + templ.SafeURL(mail) }>
-	  { mail }</a>
-	   </p>
-    } else {
-	    <p><a href="/">Go home</a></p>
-   }
-</div>
+	<div class="centered-div">
+		<img
+			id="image"
+			alt="Sad Anubis"
+			style="width:100%;max-width:256px;"
+			src={ "/.within.website/x/cmd/anubis/static/img/reject.webp?cacheBuster=" + anubis.Version }
+		/>
+		<p>{ message }.</p>
+		<button onClick="window.location.reload();">Try again</button>
+		if mail != "" {
+			<p>
+				<a href="/">Go home</a> or if you believe you should not be blocked, please contact the webmaster at 
+				<a href={ "mailto:" + templ.SafeURL(mail) }>
+					{ mail }
+				</a>
+			</p>
+		} else {
+			<p><a href="/">Go home</a></p>
+		}
+	</div>
 }
 
 templ bench() {
-<div style="height:20rem;display:flex">
-    <table style="margin-top:1rem;display:grid;grid-template:auto 1fr/auto auto;gap:0 0.5rem">
-        <thead style="border-bottom:1px solid black;padding:0.25rem 0;display:grid;grid-template:1fr/subgrid;grid-column:1/-1">
-        <tr id="table-header" style="display:contents">
-            <th style="width:4.5rem">Time</th>
-            <th style="width:4rem">Iters</th>
-        </tr>
-        <tr id="table-header-compare" style="display:none">
-            <th style="width:4.5rem">Time A</th>
-            <th style="width:4rem">Iters A</th>
-            <th style="width:4.5rem">Time B</th>
-            <th style="width:4rem">Iters B</th>
-        </tr>
-        </thead>
-        <tbody id="results"
-               style="padding-top:0.25rem;display:grid;grid-template-columns:subgrid;grid-auto-rows:min-content;grid-column:1/-1;row-gap:0.25rem;overflow-y:auto;font-variant-numeric:tabular-nums"></tbody>
-    </table>
-    <div class="centered-div">
-        <img
-                id="image"
-                style="width:100%;max-width:256px;"
-                src={ "/.within.website/x/cmd/anubis/static/img/pensive.webp?cacheBuster=" +
+	<div style="height:20rem;display:flex">
+		<table style="margin-top:1rem;display:grid;grid-template:auto 1fr/auto auto;gap:0 0.5rem">
+			<thead style="border-bottom:1px solid black;padding:0.25rem 0;display:grid;grid-template:1fr/subgrid;grid-column:1/-1">
+				<tr id="table-header" style="display:contents">
+					<th style="width:4.5rem">Time</th>
+					<th style="width:4rem">Iters</th>
+				</tr>
+				<tr id="table-header-compare" style="display:none">
+					<th style="width:4.5rem">Time A</th>
+					<th style="width:4rem">Iters A</th>
+					<th style="width:4.5rem">Time B</th>
+					<th style="width:4rem">Iters B</th>
+				</tr>
+			</thead>
+			<tbody
+				id="results"
+				style="padding-top:0.25rem;display:grid;grid-template-columns:subgrid;grid-auto-rows:min-content;grid-column:1/-1;row-gap:0.25rem;overflow-y:auto;font-variant-numeric:tabular-nums"
+			></tbody>
+		</table>
+		<div class="centered-div">
+			<img
+				id="image"
+				style="width:100%;max-width:256px;"
+				src={ "/.within.website/x/cmd/anubis/static/img/pensive.webp?cacheBuster=" +
         anubis.Version }
-        />
-        <p id="status" style="max-width:256px">Loading...</p>
-        <script async type="module" src={
-        "/.within.website/x/cmd/anubis/static/js/bench.mjs?cacheBuster=" + anubis.Version }></script>
-        <div id="sparkline"></div>
-        <noscript>
-            <p>Running the benchmark tool requires JavaScript to be enabled.</p>
-        </noscript>
-    </div>
-</div>
-<form id="controls" style="position:fixed;top:0.5rem;right:0.5rem">
-    <div style="display:flex;justify-content:end">
-        <label for="difficulty-input" style="margin-right:0.5rem">Difficulty:</label>
-        <input id="difficulty-input" type="number" name="difficulty" style="width:3rem"/>
-    </div>
-    <div style="margin-top:0.25rem;display:flex;justify-content:end">
-        <label for="algorithm-select" style="margin-right:0.5rem">Algorithm:</label>
-        <select id="algorithm-select" name="algorithm"></select>
-    </div>
-    <div style="margin-top:0.25rem;display:flex;justify-content:end">
-        <label for="compare-select" style="margin-right:0.5rem">Compare:</label>
-        <select id="compare-select" name="compare">
-            <option value="NONE">-</option>
-        </select>
-    </div>
-</form>
+			/>
+			<p id="status" style="max-width:256px">Loading...</p>
+			<script async type="module" src={ "/.within.website/x/cmd/anubis/static/js/bench.mjs?cacheBuster=" + anubis.Version }></script>
+			<div id="sparkline"></div>
+			<noscript>
+				<p>Running the benchmark tool requires JavaScript to be enabled.</p>
+			</noscript>
+		</div>
+	</div>
+	<form id="controls" style="position:fixed;top:0.5rem;right:0.5rem">
+		<div style="display:flex;justify-content:end">
+			<label for="difficulty-input" style="margin-right:0.5rem">Difficulty:</label>
+			<input id="difficulty-input" type="number" name="difficulty" style="width:3rem"/>
+		</div>
+		<div style="margin-top:0.25rem;display:flex;justify-content:end">
+			<label for="algorithm-select" style="margin-right:0.5rem">Algorithm:</label>
+			<select id="algorithm-select" name="algorithm"></select>
+		</div>
+		<div style="margin-top:0.25rem;display:flex;justify-content:end">
+			<label for="compare-select" style="margin-right:0.5rem">Compare:</label>
+			<select id="compare-select" name="compare">
+				<option value="NONE">-</option>
+			</select>
+		</div>
+	</form>
 }
author	Xe Iaso <me@xeiaso.net>	2025-04-23 08:07:53 -0400
committer	GitHub <noreply@github.com>	2025-04-23 12:07:53 +0000
commit	cfbe16f2d0037b179624f692acd2276a8733e2fd (patch)
tree	4bb7a6b769135fb95143ffa7fa85f1f23608aea5 /web/index.templ
parent	1b206175f83926801d0b65953a85e8a5ea27d73d (diff)
download	anubis-cfbe16f2d0037b179624f692acd2276a8733e2fd.tar.xz anubis-cfbe16f2d0037b179624f692acd2276a8733e2fd.zip