@e280/authlocal
Version:
User-sovereign login system for everybody
202 lines (160 loc) • 4.42 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>
<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>
<script type=module src="authority/main.bundle.min.js?v=a37b392cebe4"></script>
<link rel="icon" href="assets/favicon.png?v=92424e2f5480"/>
<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/">
<meta data-version="0.2.0-31"/>
</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-31</p>
</footer>
</body>
</html>