Add an optional USE_INTER_FONT to insert inter css tags and extra css for font

Separate css out into variable to template into body template with first stage template compile
This commit is contained in:
Thomas Lynch
2024-09-17 21:15:04 +10:00
parent c2074eec5f
commit 89ff3637d4
2 changed files with 33 additions and 15 deletions

View File

@ -44,6 +44,7 @@ services:
- POW_DIFFICULTY=20
- POW_TYPE=argon2
- TOR_CONTROL_PORT_PASSWORD=changeme
- USE_INTER_FONT=1
nginx:
ports:

View File

@ -1,40 +1,59 @@
local _M = {}
local font_tags = ""
local font_css = "body,html,:root{font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif}"
if os.getenv("USE_INTER_FONT") then
font_tags = [[
<link rel='preconnect' href='https://rsms.me/'>
<link rel='stylesheet' href='https://rsms.me/inter/inter.css'>
]]
font_css = [[
:root { font-family: 'Inter', sans-serif; }
@supports (font-variation-settings: normal) {
:root { font-family: 'Inter var', sans-serif; }
}
]]
end
-- main page template
_M.body = [[
local body_css = [[:root{--text-color:#c5c8c6;--bg-color:#1d1f21}@media (prefers-color-scheme:light){:root{--text-color:#333;--bg-color:#fff}}.g-recaptcha,.h-captcha{min-height:85px;display:block}.red{display:inline-block;color:#ff0000d0;background:#ff000020;border:1px solid #ff000050;font-weight:bold;padding:12px;border-radius:6px}.left{text-align:left}.powstatus{color:#6b93f7;font-size:small}a,a:visited{color:var(--text-color)}body,html{height:100%%;text-align:center}body{display:flex;flex-direction:column;background-color:var(--bg-color);color:var(--text-color);max-width:60em;margin:0 auto;padding:0 20px}details{max-width:1200px;text-align:left;border-left:2px solid #ff0000d0;padding:10px}code{background-color:#dfdfdf30;border-radius:4px;padding:0 3px;color:#ff6590}h3,img{margin:0 0 16px}li{margin-bottom:1em}footer{font-size:x-small;margin-top:auto;padding:10px;text-align:center;border-top:1px solid #80808040;padding:10px;max-width:300px;margin:auto auto 0}img{display:inline}input,textarea{background:var(--bg-color);color:var(--text-color);border:1px solid var(--text-color);width:100%%;box-sizing:border-box;resize:none;padding:5px;margin:5px;font-family:inherit;border-radius:6px}input[type="submit"]{padding:8px}.pt{padding-top:25vh;word-wrap:break-word;display:flex;flex-direction:column}.pt img{margin:0 auto 10px}.b{display:inline-block;border-radius:50%%;margin:20px 12px;height:16px;width:16px;transform:scale(1);box-shadow:0 0 0 0 #6b93f720;background:#6b93f7;--shadow1:#6b93f790;--shadow2:#6b93f700;--shadow3:#6b93f700}.b.green{background:#31cc31;box-shadow:0 0 0 0 #31cc3120;--shadow1:#31cc3190;--shadow2:#31cc3100;--shadow3:#31cc3100}.b:nth-of-type(1){animation:p 3s infinite}.b:nth-of-type(2){animation:p 3s 0.5s infinite}.b:nth-of-type(3){animation:p 3s 1s infinite}details:not([open]),summary{cursor:pointer}@keyframes p{0%%{transform:scale(.95);box-shadow:0 0 0 0 var(--shadow1)}70%%{transform:scale(1);box-shadow:0 0 0 8px var(--shadow2)}100%%{transform:scale(.95);box-shadow:0 0 0 0 var(--shadow3)}}details summary::-webkit-details-marker,details summary::marker{display:none}details summary{list-style-type:none}details[open] > summary:before{transform:rotate(90deg)}summary{padding-left:20px}summary:before{content:'';border-width:8px;border-style:solid;border-color:transparent transparent transparent var(--text-color);position:absolute;transform:rotate(0);transform-origin:4px 50%%;transition:0.25s transform ease;margin:3px 0 0 -15px}#captcha{margin-top:1em}]]
_M.body = string.format([[
<!DOCTYPE html>
<html>
<head lang="%s" data-langjson='%s'>
<head lang='%%s' data-langjson='%%s'>
%s
<meta name='viewport' content='width=device-width initial-scale=1'>
<title>%s</title>
<title>%%s</title>
<style>
:root{--text-color:#c5c8c6;--bg-color:#1d1f21}@media (prefers-color-scheme:light){:root{--text-color:#333;--bg-color:#fff}}.g-recaptcha,.h-captcha{min-height:85px;display:block}.red{display:inline-block;color:#ff0000d0;background:#ff000020;border:1px solid #ff000050;font-weight:bold;padding:12px;border-radius:6px}.left{text-align:left}.powstatus{color:#6b93f7;font-size:small}a,a:visited{color:var(--text-color)}body,html{height:100%%;text-align:center}body{display:flex;flex-direction:column;background-color:var(--bg-color);color:var(--text-color);font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;max-width:60em;margin:0 auto;padding:0 20px}details{max-width:1200px;text-align:left;border-left:2px solid #ff0000d0;padding:10px}code{background-color:#dfdfdf30;border-radius:4px;padding:0 3px;color:#ff6590}h3,img{margin:0 0 16px}li{margin-bottom:1em}footer{font-size:x-small;margin-top:auto;padding:10px;text-align:center;border-top:1px solid #80808040;padding:10px;max-width:300px;margin:auto auto 0}img{display:inline}input,textarea{background:var(--bg-color);color:var(--text-color);border:1px solid var(--text-color);width:100%%;box-sizing:border-box;resize:none;padding:5px;margin:5px;font-family:inherit;border-radius:6px}input[type="submit"]{padding:8px}.pt{padding-top:25vh;word-wrap:break-word;display:flex;flex-direction:column}.pt img{margin:0 auto 10px}.b{display:inline-block;border-radius:50%%;margin:20px 12px;height:16px;width:16px;transform:scale(1);box-shadow:0 0 0 0 #6b93f720;background:#6b93f7;--shadow1:#6b93f790;--shadow2:#6b93f700;--shadow3:#6b93f700}.b.green{background:#31cc31;box-shadow:0 0 0 0 #31cc3120;--shadow1:#31cc3190;--shadow2:#31cc3100;--shadow3:#31cc3100}.b:nth-of-type(1){animation:p 3s infinite}.b:nth-of-type(2){animation:p 3s 0.5s infinite}.b:nth-of-type(3){animation:p 3s 1s infinite}details:not([open]),summary{cursor:pointer}@keyframes p{0%%{transform:scale(.95);box-shadow:0 0 0 0 var(--shadow1)}70%%{transform:scale(1);box-shadow:0 0 0 8px var(--shadow2)}100%%{transform:scale(.95);box-shadow:0 0 0 0 var(--shadow3)}}details summary::-webkit-details-marker,details summary::marker{display:none}details summary{list-style-type:none}details[open] > summary:before{transform:rotate(90deg)}summary{padding-left:20px}summary:before{content:'';border-width:8px;border-style:solid;border-color:transparent transparent transparent var(--text-color);position:absolute;transform:rotate(0);transform-origin:4px 50%%;transition:0.25s transform ease;margin:3px 0 0 -15px} </style>
%s
%s
</style>
<noscript>
<style>.jsonly{display:none}</style>
</noscript>
<script src="/.basedflare/js/argon2.min.js"></script>
<script src="/.basedflare/js/challenge.min.js"></script>
</head>
<body data-pow="%s" data-diff="%s" data-time="%s" data-kb="%s" data-mode="%s">
<body data-pow="%%s" data-diff="%%s" data-time="%%s" data-kb="%%s" data-mode="%%s">
<h3 class="pt">
<img src="/.basedflare/pow-icon" width="64" height="64" alt=" ">
%s
%%s
</h3>
%s
%s
%%s
%%s
<noscript>
<br>
<div class="red">%s</div>
%s
<div class="red">%%s</div>
%%s
</noscript>
<div class="powstatus"></div>
<footer>
<p>Node: <code>%s</code></p>
<p>%s</p>
<p>Node: <code>%%s</code></p>
<p>%%s</p>
</footer>
</body>
</html>
]]
]], font_tags, font_css, body_css)
_M.noscript_extra_argon2 = [[
<details>
@ -103,6 +122,4 @@ _M.captcha_section = string.format([[
</div>
]], "%s", captcha_classname, captcha_sitekey, captcha_script_src)
return _M