From cf075b9ab2f2ab5ad6c8996406515ba30ed239fb Mon Sep 17 00:00:00 2001
From: Thomas Lynch <tom@69420.me>
Date: Thu, 1 Sep 2022 11:49:03 +0000
Subject: [PATCH] improve loading page

---
 src/scripts/hcaptcha.lua | 41 +++++++++++++++++++++-------------------
 1 file changed, 22 insertions(+), 19 deletions(-)

diff --git a/src/scripts/hcaptcha.lua b/src/scripts/hcaptcha.lua
index 87c2ea1..f441bb5 100644
--- a/src/scripts/hcaptcha.lua
+++ b/src/scripts/hcaptcha.lua
@@ -50,21 +50,21 @@ local body_template = [[
 		<style>
 			:root{--text-color:#c5c8c6;--bg-color:#1d1f21}
 			@media (prefers-color-scheme:light){:root{--text-color:#333;--bg-color:#EEE}}
-			.b{display:inline-block;background:#6b93f7;border-radius:50%%;margin:10px;height:16px;width:16px;box-shadow:0 0 0 0 #6b93f720;transform:scale(1)}
-			.b:nth-of-type(1){animation:p 3s infinite}
-			.b:nth-of-type(2){animation:p 3s .5s infinite}
-			.b:nth-of-type(3){animation:p 3s 1s infinite}
-			@keyframes p{0%%{transform:scale(.95);box-shadow:0 0 0 0 #6b93f790}70%%{transform:scale(1);box-shadow:0 0 0 10px #6b93f700}100%%{transform:scale(.95);box-shadow:0 0 0 0 #6b93f700}}
 			.h-captcha{min-height:85px;display:block}
 			.red{color:red;font-weight:bold}
 			a,a:visited{color:var(--text-color)}
 			body,html{height:100%%}
-			body{display:flex;flex-direction:column;background-color:var(--bg-color);color:var(--text-color);font-family:Helvetica,Arial,sans-serif;text-align:center;margin:0}
-			details{max-width:80vw;text-align:left;margin:0 auto;}
-			summary{text-align:center;}
+			body{display:flex;flex-direction:column;background-color:var(--bg-color);color:var(--text-color);font-family:Helvetica,Arial,sans-serif;max-width:1200px;margin:0 auto;padding: 0 20px}
+			details{transition: border-left-color 0.5s;max-width:1200px;text-align:left;border-left: 2px solid var(--text-color);padding:10px}
 			code{background-color:#dfdfdf30;border-radius:3px;padding:0 3px;}
 			img,h3,p{margin:0 0 5px 0}
-			footer{font-size:x-small;margin-top:auto;margin-bottom:20px}.pt{padding-top:30vh}
+			footer{font-size:x-small;margin-top:auto;margin-bottom:20px;text-align:center}
+			img{display:inline}
+			.pt{padding-top:15vh;display:flex;align-items: center}
+			.pt img{margin-right:10px}
+			details * {margin-left:10px}
+			details[open]{border-left-color: #1400ff}
+			.lds-ring{display:inline-block;position:relative;width:80px;height:80px}.lds-ring div{box-sizing:border-box;display:block;position:absolute;width:32px;height:32px;margin:10px;border:5px solid var(--text-color);border-radius:50%%;animation:lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;border-color:var(--text-color) transparent transparent transparent}.lds-ring div:nth-child(1){animation-delay:-0.45s}.lds-ring div:nth-child(2){animation-delay:-0.3s}.lds-ring div:nth-child(3){animation-delay:-0.15s}@keyframes lds-ring{0%%{transform:rotate(0deg)}100%%{transform:rotate(360deg)}}
 		</style>
 		<noscript>
 			<style>.jsonly{display:none}</style>
@@ -74,13 +74,14 @@ local body_template = [[
 		%s
 		%s
 		<noscript>
+			<br>
 			<p class="red">JavaScript is required on this page.</p>
 			%s
 		</noscript>
 		<footer>
 			<img src="/img/footerlogo.png" />
 			<p>Security and Performance by <a href="https://kikeflare.com">Kikeflare</a></p>
-			<p>Vey ID: <code>%s</code></p>
+			<p>Node: <code>%s</code></p>
 		</footer>
 		<script src="/js/sha1.js"></script>
 	</body>
@@ -88,7 +89,6 @@ local body_template = [[
 ]]
 
 local noscript_extra_template = [[
-			<br>
 			<details>
 				<summary>No JavaScript?</summary>
 				<ol>
@@ -97,20 +97,23 @@ local noscript_extra_template = [[
 						<code style="word-break: break-all;">
 							echo "Q0g9IiQxIjtCPSJiMDBiIjtJPTA7RElGRj0kKCgxNiMke0NIOjA6MX0gKiAyKSk7d2hpbGUgdHJ1ZTsgZG8gSD0kKGVjaG8gLW4gJENIJEkgfCBzaGExc3VtKTtFPSR7SDokRElGRjo0fTtbWyAkRSA9PSAkQiBdXSAmJiBlY2hvICRJICYmIGV4aXQgMDsoKEkrKykpO2RvbmU7Cg==" | base64 -d | bash -s %s
 						</code>
-					<li>Set a cookie named <code>z_ddos_pow</code> with the value as the number the script outputs.
-					<li>Remove "/bot-check?" from the url, and load the page again.
+					<li>Set a cookie named <code>z_ddos_pow</code> with the value as the number the script outputs, and path <code>/</code>.
+					<li>Remove <code>/bot-check?</code> from the url, and load the page again.
 				</ol>
-				<small>If you don't want to run untrusted code (you shouldn't), simply remove the pipe to sh to see the decoded script before running it. If you don't know what that means, you can't be helped. Additionally, the JavaScript for this page is open source and available <a href="https://gitgud.io/fatchan/haproxy-protection/-/tree/master/haproxy/js">here</a>.</small>
 			</details>
 ]]
 
 -- 3 dots animation for proof of work
 local pow_section_template = [[
-		<h3 class="pt">Checking your browser for robots 🤖</h3>
+		<h3 class="pt">
+			<img src="/favicon.ico" width="32" height="32">
+			%s
+		</h3>
+		<h3>
+			Checking your browser for robots 🤖
+		</h3>
 		<div class="jsonly">
-			<div class="b"></div>
-			<div class="b"></div>
-			<div class="b"></div>
+			<div class="lds-ring"><div></div><div></div><div></div><div></div></div>
 		</div>
 ]]
 
@@ -153,7 +156,7 @@ function _M.view(applet)
 		if captcha_enabled then
 			captcha_body = string.format(captcha_section_template, captcha_sitekey)
 		else
-			pow_body = pow_section_template
+			pow_body = string.format(pow_section_template, host)
 			noscript_extra_body = string.format(noscript_extra_template, generated_work)
 		end