Fixes #9 - Cute styling, combination of Mastodon and GTS - Short description of the project - Error and status messages (temporarily) appear in disabled button with correct ARIA attributes - Sufficient contrast (WCAG AAA) Let me know if using `login.scss` both as an index file and for adding custom styling is okay. I figured this might be preferred over creating an extra folder and file. Reviewed-on: https://codeberg.org/superseriousbusiness/masto-fe-standalone/pulls/19 Co-authored-by: vyxen <vyxen@tutamail.com> Co-committed-by: vyxen <vyxen@tutamail.com>
50 lines
2.2 KiB
HTML
50 lines
2.2 KiB
HTML
<!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/core/common.css" />
|
|
<link rel="stylesheet" media="all" href="/packs/css/flavours/glitch/login.css" />
|
|
<script src="/auth.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="login-container">
|
|
<header>
|
|
<img class="mascot" alt src="images/mascot.svg" />
|
|
</header>
|
|
<main>
|
|
<div class="login">
|
|
<input class="instance" id="instance" placeholder="Instance URL" aria-label="Instance URL" value="" onkeypress="if (event.keyCode == 13) auth()">
|
|
<button type="submit" class="button" id="btn" onclick="auth()">
|
|
<span id="message">Authorize</span>
|
|
</button>
|
|
</div>
|
|
<div class="content">
|
|
<p>
|
|
This is a standalone version of the Mastodon front-end that offers compatibility with GoToSocial instances. It is based
|
|
on <a href="https://iceshrimp.dev/iceshrimp/masto-fe-standalone" rel="nofollow">Iceshrimp's Masto-FE Standalone</a>,
|
|
which is itself a fork of <a href="https://github.com/glitch-soc/mastodon" rel="nofollow">Mastodon Glitch Edition</a>,
|
|
which in turn forks <a href="https://github.com/mastodon/mastodon/" rel="nofollow">Mastodon</a>. Phew!
|
|
</p>
|
|
<p>
|
|
The 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.
|
|
</p>
|
|
</div>
|
|
</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">
|
|
Source code
|
|
</a>
|
|
</p>
|
|
</footer>
|
|
</div>
|
|
</body>
|
|
|
|
</html> |