fatchan
/
haproxy-protection
mirror of https://gitgud.io/fatchan/haproxy-protection.git
1
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Revert to 3 dots loader and adjust page style slightly

Browse Source
master
Thomas Lynch 1 year ago
parent 87f66479d8
commit 80e966b6d4
Signed by: fatchan
GPG Key ID: A7E5E8B7E11EE92D
2 changed files with 36 additions and 17 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 10
      src/js/challenge.js
  2. 43
      src/lua/scripts/templates.lua

10
src/js/challenge.js
Unescape View File

@ -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>`);
ring && ring.remove();
console.log(loader, captcha);
(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);

43
src/lua/scripts/templates.lua
Unescape View File

@ -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{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,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: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;}
img,h3,p{margin:0 0 5px 0}
footer{font-size:x-small;margin-top:auto;margin-bottom:20px;text-align:center}
code{background-color:#dfdfdf30;border-radius:4px;padding:0 3px;color:#ff6590}
img,h3{margin:0 0 5px 0}
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}
.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)}}
details[open]{border-left-color: #1400ff}
.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 = [[

Write Preview
Loading…
Cancel
Save