@e280/authlocal
Version:
User-sovereign login system for everybody
305 lines (248 loc) • 8.1 kB
HTML
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<meta name="darkreader-lock"/>
<title>Authlocal</title>
<link rel="icon" href="assets/favicon.png?v=9f6c784d"/>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
scrollbar-width: thin;
scrollbar-color: #333 transparent;
}
:root {
color-scheme: dark;
--bg: #06141d;
--link: cyan;
--prime: lime;
--alpha: #00ff93;
--text: color-mix(in lch, var(--alpha), white 50%);
--seed: #ff6800;
--identity: #20563c33;
--identity-select: #00ff8433;
--select: #d9ffea;
--happy: lime;
--angry: red;
--angryglow: #f88;
--login: yellow;
--back: #00bbff;
--code: magenta;
--overwrite: #e5ff4b;
}
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 1em; }
::-webkit-scrollbar-thumb:hover { background: #444; }
a {
color: var(--link);
text-decoration: none;
&:visited {
color: color-mix(in srgb, purple, var(--link) 70%);
}
&:hover {
color: color-mix(in srgb, white, var(--link) 90%);
text-decoration: underline;
}
&:active {
color: color-mix(in srgb, white, var(--link) 50%);
}
}
/*------------------------------------------*/
html {
font-size: 16px;
min-height: 100%;
scrollbar-gutter: stable;
display: flex;
flex-direction: column;
align-items: center;
font-family: sans-serif;
background: var(--bg);
--tint: #00061b5e;
background:
linear-gradient(to bottom, var(--tint), var(--tint)),
var(--bg) url("/assets/1dea2105.avif") center center / cover;
}
body {
min-height: 100%;
width: 32em;
max-width: 100%;
padding: 0.5em;
color: var(--text);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.5em;
}
header {
margin-top: 2vw;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
color: color-mix(in srgb, white, var(--prime) 50%);
> h1 {
font-size: 3em;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .2em;
filter:
drop-shadow(0 0 .2em color-mix(in srgb, var(--prime), white 50%))
drop-shadow(0 0 3em var(--prime))
drop-shadow(0 0 3em var(--prime));
> svg {
position: relative;
bottom: 0.04em;
width: 1em;
height: 1em;
stroke-width: 3;
}
}
> p {
opacity: 0.5;
> .version {
opacity: 0.8;
}
}
}
auth-manager {
display: block;
width: 100%;
}
footer {
opacity: 0.6;
font-size: 0.9em;
width: 100%;
margin-top: 0.5em;
padding: 0 0.2em;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5em;
color: color-mix(in srgb, white, var(--prime) 50%);
text-shadow:
0 0 4em color-mix(in srgb, transparent, currentColor 70%),
0 0 .3em color-mix(in srgb, transparent, currentColor 70%);
.persistence { opacity: 0.5; }
.version { opacity: 0.5; }
}
</style>
<meta data-commit-hash="c820d50df0e95e324d9be9a3802568dfaa736bc3"/>
<meta data-version="0.2.0-27"/>
<meta name="theme-color" content="#77ff81">
<meta property="og:type" content="website">
<meta property="og:site_name" content="authlocal.org">
<meta property="og:title" content="Authlocal – user-sovereign login system">
<meta property="og:description" content="Own your identity. No emails, no passwords, no databases. Open-source. Privacy-focused.">
<meta property="og:image" content="https://authlocal.org/assets/favicon.png">
<meta property="og:url" content="https://authlocal.org/">
<script type="importmap">
{
"imports": {
"@benev/slate/": "/node_modules/@benev/slate/",
"@benev/slate": "/node_modules/@benev/slate/x/index.js",
"@e280/kv/": "/node_modules/@e280/kv/",
"@e280/kv": "/node_modules/@e280/kv/x/index.js",
"@e280/renraku/": "/node_modules/@e280/renraku/",
"@e280/renraku": "/node_modules/@e280/renraku/x/index.universal.js",
"@e280/science/": "/node_modules/@e280/science/",
"@e280/science": "/node_modules/@e280/science/x/index.js",
"@e280/sten/": "/node_modules/@e280/sten/",
"@e280/sten": "/node_modules/@e280/sten/x/index.js",
"@e280/stz/": "/node_modules/@e280/stz/",
"@e280/stz": "/node_modules/@e280/stz/x/index.js",
"@lit-labs/ssr-dom-shim/": "/node_modules/@lit-labs/ssr-dom-shim/",
"@lit-labs/ssr-dom-shim": "/node_modules/@lit-labs/ssr-dom-shim/index.js",
"@lit/reactive-element/": "/node_modules/@lit/reactive-element/",
"@lit/reactive-element": "/node_modules/@lit/reactive-element/reactive-element.js",
"@noble/ed25519/": "/node_modules/@noble/ed25519/",
"@noble/ed25519": "/node_modules/@noble/ed25519/index.js",
"@types/trusted-types/": "/node_modules/@types/trusted-types/",
"abstract-level/": "/node_modules/abstract-level/",
"abstract-level": "/node_modules/abstract-level/index.js",
"base64-js/": "/node_modules/base64-js/",
"base64-js": "/node_modules/base64-js/index.js",
"browser-level/": "/node_modules/browser-level/",
"browser-level": "/node_modules/browser-level/index.js",
"buffer/": "/node_modules/buffer/",
"buffer": "/node_modules/buffer/index.js",
"classic-level/": "/node_modules/classic-level/",
"classic-level": "/node_modules/classic-level/index.js",
"ieee754/": "/node_modules/ieee754/",
"ieee754": "/node_modules/ieee754/index.js",
"is-buffer/": "/node_modules/is-buffer/",
"is-buffer": "/node_modules/is-buffer/index.js",
"level/": "/node_modules/level/",
"level": "/node_modules/level/index.js",
"level-supports/": "/node_modules/level-supports/",
"level-transcoder/": "/node_modules/level-transcoder/",
"level-transcoder": "/node_modules/level-transcoder/index.js",
"lit/": "/node_modules/lit/",
"lit": "/node_modules/lit/index.js",
"lit-element/": "/node_modules/lit-element/",
"lit-element": "/node_modules/lit-element/index.js",
"lit-html/": "/node_modules/lit-html/",
"lit-html": "/node_modules/lit-html/lit-html.js",
"maybe-combine-errors/": "/node_modules/maybe-combine-errors/",
"module-error/": "/node_modules/module-error/",
"napi-macros/": "/node_modules/napi-macros/",
"napi-macros": "/node_modules/napi-macros/index.js",
"node-gyp-build/": "/node_modules/node-gyp-build/",
"node-gyp-build": "/node_modules/node-gyp-build/index.js",
"ws/": "/node_modules/ws/",
"ws": "/node_modules/ws/index.js"
},
"scopes": {}
}
</script>
<script>
// determine dev mode
const params = new URLSearchParams(location.search)
const isDevMode = params.has("dev")
? params.get("dev") !== "false"
: (
location.hostname === "localhost" ||
location.hostname.startsWith("192.168.") ||
location.hostname.startsWith("10.0.") ||
location.hostname.endsWith("trycloudflare.com")
)
// create and insert a script element
function script(attributes) {
const element = document.createElement("script")
element.defer = true
for (const [key, value] of Object.entries(attributes))
element.setAttribute(key, value === true ?"" :value)
document.head.appendChild(element)
}
// launch dev module
if (isDevMode) {
document.title = "[dev] " + document.title
script({type: "module", src: "authority/main.bundle.js?v=97df83a5"})
}
// launch prod module
else {
script({type: "module", src: "authority/main.bundle.min.js?v=38a89437"})
}
</script>
</head>
<body>
<header>
<h1>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-lock"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 13a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-6z" /><path d="M11 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0" /><path d="M8 11v-4a4 4 0 1 1 8 0v4" /></svg>
<span class=title>Authlocal</span>
</h1>
</header>
<auth-manager></auth-manager>
<footer>
<p>Own your identity. Open-source. Privacy-focused. User-sovereign.</p>
<p>Learn more on <a href="https://github.com/e280/authlocal/blob/main/GUIDE.md" target=_blank>GitHub</a>.</p>
<p class=persistence><auth-persistence></auth-persistence></p>
<p class=version>v0.2.0-27</p>
</footer>
</body>
</html>