<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login | Masto-FE (🦥 flavour)</title>
<meta content="width=device-width, initial-scale=1" name="viewport">
<link rel="stylesheet" media="all" href="/packs/css/flavours/glitch/login.css" />
<script src="/login-i18n.js"></script>
<script src="/auth.js"></script>
</head>
<body class="app-body">
<div class="login-container">
<div class="login-settings">
<select id="theme-select" aria-label="Theme">
<option value="mastodon">Dark</option>
<option value="mastodon-light">Light</option>
<option value="contrast">High contrast</option>
</select>
<select id="lang-select" aria-label="Language">
</select>
</div>
<header>
<img alt="a friendly smiling sloth" src="images/mascot.svg" />
</header>
<main>
<h1 data-i18n="title">Log into your instance</h1>
<form method="post" id="login">
<label for="instance" data-i18n="instance_url">Instance URL</label>
<input type="text" id="instance" value="" class="input instance">
<button type="submit" class="button" id="btn">
<span id="message" data-i18n="authorize">Authorize</span>
</button>
</form>
<aside class="content">
<p>
<strong data-i18n="note_label">Note:</strong>
<span data-i18n="note_text">this application is completely client-side, meaning everything happens in the browser on your machine.
It does not store information anywhere else than your browser's local storage.</span>
</p>
</aside>
</main>
<footer class="link-footer">
<p>
<strong>Masto-FE (🦥 flavour)</strong>
<span aria-hidden="true"> · </span>
<a href="https://codeberg.org/superseriousbusiness/masto-fe-standalone" rel="noopener noreferrer" target="_blank" data-i18n="source_code">
Source code
</a>
</p>
</footer>
</div>
</body>
</html>