From 80e966b6d43eea4ba4433f8779b9dcdd81982b60 Mon Sep 17 00:00:00 2001 From: Thomas Lynch Date: Tue, 14 Feb 2023 00:07:06 +1100 Subject: [PATCH] Revert to 3 dots loader and adjust page style slightly --- src/js/challenge.js | 10 ++++---- src/lua/scripts/templates.lua | 43 ++++++++++++++++++++++++----------- 2 files changed, 36 insertions(+), 17 deletions(-) diff --git a/src/js/challenge.js b/src/js/challenge.js index 9c7138f..0a1c732 100644 --- a/src/js/challenge.js +++ b/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', `

Error: ${str}

`); - ring && ring.remove(); + console.log(loader, captcha); + (captcha || loader).insertAdjacentHTML('afterend', `

Error: ${str}

`); + 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', `
`); + // captchaElem.insertAdjacentHTML('afterend', `
`); + captchaElem.insertAdjacentHTML('afterend', `
`); captchaElem.remove(); powFinished.then(powResponse => { postResponse(powResponse, captchaResponse); diff --git a/src/lua/scripts/templates.lua b/src/lua/scripts/templates.lua index 93e1b46..03c9b4c 100644 --- a/src/lua/scripts/templates.lua +++ b/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{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}}