From e34b2e76d8ac11cb439b50df62b5cd313d23c51c Mon Sep 17 00:00:00 2001
From: Xe Iaso <me@xeiaso.net>
Date: Sun, 19 Jan 2025 14:37:22 -0500
Subject: cmd/anubis: add loading spinners

Signed-off-by: Xe Iaso <me@xeiaso.net>
---
 cmd/anubis/index.templ        | 91 +++++++++++++++++++++++++++++++++++++++++++
 cmd/anubis/index_templ.go     | 16 ++++----
 cmd/anubis/static/js/main.mjs |  3 ++
 3 files changed, 102 insertions(+), 8 deletions(-)

(limited to 'cmd')

diff --git a/cmd/anubis/index.templ b/cmd/anubis/index.templ
index 7148c8e..e0530d6 100644
--- a/cmd/anubis/index.templ
+++ b/cmd/anubis/index.templ
@@ -28,6 +28,96 @@ templ base(title string, body templ.Component) {
       .centered-div {
         text-align: center;
       }
+
+      .lds-roller,
+      .lds-roller div,
+      .lds-roller div:after {
+        box-sizing: border-box;
+      }
+      .lds-roller {
+        display: inline-block;
+        position: relative;
+        width: 80px;
+        height: 80px;
+      }
+      .lds-roller div {
+        animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+        transform-origin: 40px 40px;
+      }
+      .lds-roller div:after {
+        content: " ";
+        display: block;
+        position: absolute;
+        width: 7.2px;
+        height: 7.2px;
+        border-radius: 50%;
+        background: currentColor;
+        margin: -3.6px 0 0 -3.6px;
+      }
+      .lds-roller div:nth-child(1) {
+        animation-delay: -0.036s;
+      }
+      .lds-roller div:nth-child(1):after {
+        top: 62.62742px;
+        left: 62.62742px;
+      }
+      .lds-roller div:nth-child(2) {
+        animation-delay: -0.072s;
+      }
+      .lds-roller div:nth-child(2):after {
+        top: 67.71281px;
+        left: 56px;
+      }
+      .lds-roller div:nth-child(3) {
+        animation-delay: -0.108s;
+      }
+      .lds-roller div:nth-child(3):after {
+        top: 70.90963px;
+        left: 48.28221px;
+      }
+      .lds-roller div:nth-child(4) {
+        animation-delay: -0.144s;
+      }
+      .lds-roller div:nth-child(4):after {
+        top: 72px;
+        left: 40px;
+      }
+      .lds-roller div:nth-child(5) {
+        animation-delay: -0.18s;
+      }
+      .lds-roller div:nth-child(5):after {
+        top: 70.90963px;
+        left: 31.71779px;
+      }
+      .lds-roller div:nth-child(6) {
+        animation-delay: -0.216s;
+      }
+      .lds-roller div:nth-child(6):after {
+        top: 67.71281px;
+        left: 24px;
+      }
+      .lds-roller div:nth-child(7) {
+        animation-delay: -0.252s;
+      }
+      .lds-roller div:nth-child(7):after {
+        top: 62.62742px;
+        left: 17.37258px;
+      }
+      .lds-roller div:nth-child(8) {
+        animation-delay: -0.288s;
+      }
+      .lds-roller div:nth-child(8):after {
+        top: 56px;
+        left: 12.28719px;
+      }
+      @keyframes lds-roller {
+        0% {
+          transform: rotate(0deg);
+        }
+        100% {
+          transform: rotate(360deg);
+        }
+      }
     </style>
   </head>
 
@@ -54,6 +144,7 @@ templ index() {
     <img style="display:none;" width="256" src={"/.within.website/x/cmd/anubis/static/img/happy.webp?cacheBuster=" + x.Version} />
     <p id="status">Loading...</p>
     <script async type="module" src={"/.within.website/x/cmd/anubis/static/js/main.mjs?cacheBuster=" + x.Version}></script>
+    <div id="spinner" class="lds-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
     <noscript>
       <p>Sadly, you must enable JavaScript to get past this challenge. I would love to not have to do this, but god is dead and AI scrapers have destroyed the common good.</p>
     </noscript>
diff --git a/cmd/anubis/index_templ.go b/cmd/anubis/index_templ.go
index 7f17ae1..ee06a60 100644
--- a/cmd/anubis/index_templ.go
+++ b/cmd/anubis/index_templ.go
@@ -60,14 +60,14 @@ func base(title string, body templ.Component) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><style>\n      body,\n      html {\n        height: 100%;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        width: 65ch;\n        margin-left: auto;\n        margin-right: auto;\n      }\n\n      .centered-div {\n        text-align: center;\n      }\n    </style></head><body id=\"top\"><main><center><h1 id=\"title\" class=\".centered-div\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><style>\n      body,\n      html {\n        height: 100%;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        width: 65ch;\n        margin-left: auto;\n        margin-right: auto;\n      }\n\n      .centered-div {\n        text-align: center;\n      }\n\n      .lds-roller,\n      .lds-roller div,\n      .lds-roller div:after {\n        box-sizing: border-box;\n      }\n      .lds-roller {\n        display: inline-block;\n        position: relative;\n        width: 80px;\n        height: 80px;\n      }\n      .lds-roller div {\n        animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n        transform-origin: 40px 40px;\n      }\n      .lds-roller div:after {\n        content: \" \";\n        display: block;\n        position: absolute;\n        width: 7.2px;\n        height: 7.2px;\n        border-radius: 50%;\n        background: currentColor;\n        margin: -3.6px 0 0 -3.6px;\n      }\n      .lds-roller div:nth-child(1) {\n        animation-delay: -0.036s;\n      }\n      .lds-roller div:nth-child(1):after {\n        top: 62.62742px;\n        left: 62.62742px;\n      }\n      .lds-roller div:nth-child(2) {\n        animation-delay: -0.072s;\n      }\n      .lds-roller div:nth-child(2):after {\n        top: 67.71281px;\n        left: 56px;\n      }\n      .lds-roller div:nth-child(3) {\n        animation-delay: -0.108s;\n      }\n      .lds-roller div:nth-child(3):after {\n        top: 70.90963px;\n        left: 48.28221px;\n      }\n      .lds-roller div:nth-child(4) {\n        animation-delay: -0.144s;\n      }\n      .lds-roller div:nth-child(4):after {\n        top: 72px;\n        left: 40px;\n      }\n      .lds-roller div:nth-child(5) {\n        animation-delay: -0.18s;\n      }\n      .lds-roller div:nth-child(5):after {\n        top: 70.90963px;\n        left: 31.71779px;\n      }\n      .lds-roller div:nth-child(6) {\n        animation-delay: -0.216s;\n      }\n      .lds-roller div:nth-child(6):after {\n        top: 67.71281px;\n        left: 24px;\n      }\n      .lds-roller div:nth-child(7) {\n        animation-delay: -0.252s;\n      }\n      .lds-roller div:nth-child(7):after {\n        top: 62.62742px;\n        left: 17.37258px;\n      }\n      .lds-roller div:nth-child(8) {\n        animation-delay: -0.288s;\n      }\n      .lds-roller div:nth-child(8):after {\n        top: 56px;\n        left: 12.28719px;\n      }\n      @keyframes lds-roller {\n        0% {\n          transform: rotate(0deg);\n        }\n        100% {\n          transform: rotate(360deg);\n        }\n      }\n    </style></head><body id=\"top\"><main><center><h1 id=\"title\" class=\".centered-div\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var4 string
 		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(title)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `index.templ`, Line: 37, Col: 52}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `index.templ`, Line: 127, Col: 52}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 		if templ_7745c5c3_Err != nil {
@@ -117,7 +117,7 @@ func index() templ.Component {
 		var templ_7745c5c3_Var6 string
 		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs("/.within.website/x/cmd/anubis/static/img/pensive.webp?cacheBuster=" + x.Version)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `index.templ`, Line: 53, Col: 117}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `index.templ`, Line: 143, Col: 117}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
 		if templ_7745c5c3_Err != nil {
@@ -130,7 +130,7 @@ func index() templ.Component {
 		var templ_7745c5c3_Var7 string
 		templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs("/.within.website/x/cmd/anubis/static/img/happy.webp?cacheBuster=" + x.Version)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `index.templ`, Line: 54, Col: 126}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `index.templ`, Line: 144, Col: 126}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
 		if templ_7745c5c3_Err != nil {
@@ -143,13 +143,13 @@ func index() templ.Component {
 		var templ_7745c5c3_Var8 string
 		templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs("/.within.website/x/cmd/anubis/static/js/main.mjs?cacheBuster=" + x.Version)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `index.templ`, Line: 56, Col: 112}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `index.templ`, Line: 146, Col: 112}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "\"></script><noscript><p>Sadly, you must enable JavaScript to get past this challenge. I would love to not have to do this, but god is dead and AI scrapers have destroyed the common good.</p></noscript></div>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "\"></script><div id=\"spinner\" class=\"lds-roller\"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div><noscript><p>Sadly, you must enable JavaScript to get past this challenge. I would love to not have to do this, but god is dead and AI scrapers have destroyed the common good.</p></noscript></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -185,7 +185,7 @@ func errorPage(message string) templ.Component {
 		var templ_7745c5c3_Var10 string
 		templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs("/.within.website/x/cmd/anubis/static/img/sad.webp?cacheBuster=" + x.Version)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `index.templ`, Line: 65, Col: 113}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `index.templ`, Line: 156, Col: 113}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
 		if templ_7745c5c3_Err != nil {
@@ -198,7 +198,7 @@ func errorPage(message string) templ.Component {
 		var templ_7745c5c3_Var11 string
 		templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(message)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `index.templ`, Line: 66, Col: 16}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `index.templ`, Line: 157, Col: 16}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
 		if templ_7745c5c3_Err != nil {
diff --git a/cmd/anubis/static/js/main.mjs b/cmd/anubis/static/js/main.mjs
index 272973b..f111bb4 100644
--- a/cmd/anubis/static/js/main.mjs
+++ b/cmd/anubis/static/js/main.mjs
@@ -14,6 +14,7 @@ const u = (url = "", params = {}) => {
   const status = document.getElementById('status');
   const image = document.getElementById('image');
   const title = document.getElementById('title');
+  const spinner = document.getElementById('spinner');
 
   status.innerHTML = 'Calculating...';
 
@@ -39,6 +40,8 @@ const u = (url = "", params = {}) => {
   title.innerHTML = "Success!";
   status.innerHTML = `Done! Took ${t1 - t0}ms, ${nonce} iterations`;
   image.src = "/.within.website/x/cmd/anubis/static/img/happy.webp";
+  spinner.innerHTML = "";
+  spinner.style.display = "none";
 
   setTimeout(() => {
     const redir = window.location.href;
-- 
cgit v1.2.3