index.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link rel="stylesheet" href="style.css" />
		<link rel="icon" href="https://madata.dev/logo.svg" />
		<title>Madata Official Authentication Provider</title>
	</head>
	<body>
		<h1>
			<img src="https://madata.dev/logo.svg" alt="Madata" />
			Madata Official Authentication Provider
		</h1>

		<section id="supported">
			Supported backends
			<ul id="backend_list">
				<li>Fetching…</li>
			</ul>

			<p>Want to learn more about Madata? Visit <a href="https://madata.dev">madata.dev</a>!</p>
		</section>

		<section id="auth" hidden>
			<p>Are you sure you want to login with <span id="backend_name"></span> on <a id="url"></a>?</p>

			<footer class="buttons">
				<button class="yes" id="yes_button">Yes, log in</button>
				<button class="no" id="no_button">No, I don’t recognize this site</button>
			</footer>
		</section>

	</body>

	<script src="script.js" type="module"></script>
</html>