@e280/authlocal
Version:
User-sovereign login system for everybody
92 lines (73 loc) • 2.04 kB
HTML
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<meta name="darkreader-lock"/>
<title>Authlocal App Demo</title>
<style>
:root {
--authlocal-login: green;
--authlocal-logout: #555;
--authlocal-button-text: white;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
scrollbar-width: thin;
scrollbar-color: #333 transparent;
}
:root {
color-scheme: dark;
padding: 10vh 10vw;
min-height: 100%;
scrollbar-gutter: stable;
font-size: 16px;
font-family: sans-serif;
color: #aaa;
background: #222;
--link: cyan;
}
body {
display: flex;
flex-direction: column;
align-items: center;
gap: 3em;
}
::-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%);
}
}
</style>
<script type=module src="demo.bundle.min.js?v=a77dc8b2295f"></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 – demo page">
<meta property="og:description" content="Open source login system. Example integration.">
<meta property="og:image" content="https://authlocal.org/assets/favicon.png">
<meta property="og:url" content="https://authlocal.org/app/">
</head>
<body>
<h1>Example app using Authlocal</h1>
<p>This page is a test for a typical federated auth integration with <a href="/">Authlocal</a></p>
<auth-button src="/"></auth-button>
<auth-user></auth-user>
</body>
</html>