Revert to 3 dots loader and adjust page style slightly

src/js/challenge.js

@@ -4,10 +4,11 @@ function updateElem(selector, text) {
 }
 
 function insertError(str) {
-	const ring = document.querySelector('.lds-ring');
+	const loader = document.querySelector('#loader');
 	const captcha = document.querySelector('#captcha');
-	(ring || captcha).insertAdjacentHTML('afterend', `<p class="red">Error: ${str}</p>`);
+	console.log(loader, captcha);
-	ring && ring.remove();
+	(captcha || loader).insertAdjacentHTML('afterend', `<p class="red">Error: ${str}</p>`);
+	loader && loader.remove();
 	captcha && captcha.remove();
 	updateElem('.powstatus', '');
 }
@@ -153,7 +154,8 @@ const powFinished = new Promise(resolve => {
 
 function onCaptchaSubmit(captchaResponse) {
 	const captchaElem = document.querySelector('[data-sitekey]');
-	captchaElem.insertAdjacentHTML('afterend', `<div class="lds-ring"><div></div><div></div><div></div><div></div></div>`);
+	// captchaElem.insertAdjacentHTML('afterend', `<div id="loader" class="loader"><div></div><div></div><div></div><div></div></div>`);
+	captchaElem.insertAdjacentHTML('afterend', `<div id="loader"><div class="b"></div><div class="b"></div><div class="b"></div></div>`);
 	captchaElem.remove();
 	powFinished.then(powResponse => {
 		postResponse(powResponse, captchaResponse);

src/lua/scripts/templates.lua

@@ -12,19 +12,26 @@ _M.body = [[
 			@media (prefers-color-scheme:light){:root{--text-color:#333;--bg-color:#EEE}}
 			.h-captcha,.g-recaptcha{min-height:85px;display:block}
 			.red{color:red;font-weight:bold}
+			.left{text-align:left}
 			.powstatus{color:green;font-weight:bold}
 			a,a:visited{color:var(--text-color)}
-			body,html{height:100%%}
+			body,html{height:100%%;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}
+			body{display:flex;flex-direction:column;background-color:var(--bg-color);color:var(--text-color);font-family:Helvetica,Arial,sans-serif;max-width:60em;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;}
+			code{background-color:#dfdfdf30;border-radius:4px;padding:0 3px;color:#ff6590}
-			img,h3,p{margin:0 0 5px 0}
+			img,h3{margin:0 0 5px 0}
-			footer{font-size:x-small;margin-top:auto;margin-bottom:20px;text-align:center}
+			li{margin-bottom: 1em}
+			footer{font-size:x-small;margin-top:auto;padding:10px;text-align:center;border-top:1px solid #80808040;padding:10px}
 			img{display:inline}
-			.pt{padding-top:15vh;display:flex;align-items:center;word-break:break-all}
+			textarea,input{background:var(--bg-color);color:var(--text-color);border:1px solid var(--text-color);width:100%%;box-sizing: border-box;resize:none;padding:0.5em;font-family:inherit}
+			.pt{padding-top:30vh;display:flex;align-items:center;word-break:break-all;justify-content: center;}
 			.pt img{margin-right:10px}
-			details[open]{border-left-color: #1400ff}
+			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)}}
+			.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}}
 		</style>
 		<noscript>
 			<style>.jsonly{display:none}</style>
@@ -38,13 +45,13 @@ _M.body = [[
 		%s
 		<noscript>
 			<br>
-			<p class="red">JavaScript is required on this page.</p>
+			<p class="red left">JavaScript is required on this page.</p>
 			%s
 		</noscript>
 		<div class="powstatus"></div>
 		<footer>
-			<p>Security and Performance by <a href="https://gitgud.io/fatchan/haproxy-protection/">haproxy-protection</a></p>
 			<p>Node: <code>%s</code></p>
+			<p>Performance & security by <a href="https://gitgud.io/fatchan/haproxy-protection/">haproxy-protection</a></p>
 		</footer>
 	</body>
 </html>
@@ -89,20 +96,30 @@ _M.noscript_extra_sha256 = [[
 -- title with favicon and hostname
 _M.site_name_section = [[
 		<h3 class="pt">
-			<img src="/favicon.ico" width="32" height="32" alt="icon">
+			<img src="/favicon.ico" width="32" height="32" alt=" ">
 			%s
 		</h3>
 ]]
 
--- spinner animation for proof of work
+-- animation while waiting
 _M.pow_section = [[
 		<h3>
 			Checking your browser for robots 🤖
 		</h3>
 		<div class="jsonly">
-			<div class="lds-ring"><div></div><div></div><div></div><div></div></div>
+			<div id="loader"><div class="b"></div><div class="b"></div><div class="b"></div></div>
 		</div>
 ]]
+-- alternative, spinner animation
+-- .loader{display:inline-block;position:relative;width:80px;height:80px}
+-- .loader 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:loader 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;border-color:var(--text-color) transparent transparent transparent}
+-- .loader div:nth-child(1){animation-delay:-0.45s}
+-- .loader div:nth-child(2){animation-delay:-0.3s}
+-- .loader div:nth-child(3){animation-delay:-0.15s}
+-- @keyframes loader{0%%{transform:rotate(0deg)}100%%{transform:rotate(360deg)}}
+-- <div class="jsonly">
+-- <div class="loader"><div></div><div></div><div></div><div></div></div>
+-- </div>
 
 -- message, captcha form and submit button
 _M.captcha_section = [[