index.html

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="theme-color" content="#303030" />
		<link
			href="https://cdn.hello.coop/images/quickstart-favicon-light.png"
			rel="icon"
			media="(prefers-color-scheme: light)"
		/>
		<link
			href="https://cdn.hello.coop/images/quickstart-favicon-dark.png"
			rel="icon"
			media="(prefers-color-scheme: dark)"
		/>
		<link rel="stylesheet" href="https://cdn.hello.coop/css/hello-button.css" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Hellō Quickstart</title>
		<!-- integrity is hard coded here because this file only exists in staging/prod -->
		<script
			defer=""
			data-domain="quickstart.hello.coop"
			src="/js/script.hash.js"
			integrity="sha384-1kvlsmFV0In+ocTgJBWUSDEyMwHcxFD7WzKbrYYq7A6iJAOLn2idnchzq+mxbS3M"
			crossorigin="anonymous"
		></script>
		<style type="text/css">
			html,
			body {
				height: 100%;
				min-width: 320px;
				overflow-x: auto;
			}

			.spinner {
				position: absolute;
				left: 50%;
				top: 50%;
				height: 40px;
				width: 40px;
				margin: -26px 0 0 -26px;
				box-sizing: content-box;
				animation: rotation 1s infinite linear;
				border-width: 6px;
				border-style: solid;
				border-radius: 100%;
			}

			#spinner {
				height: 3.2rem;
				width: 3.2rem;
				animation: rotation 1s linear infinite;
			}

			@keyframes rotation {
				from {
					transform: rotate(0deg);
				}

				to {
					transform: rotate(360deg);
				}
			}

			@media (prefers-color-scheme: dark) {
				body {
					color: #d4d4d4;
					background: #151515;
					color-scheme: dark;
				}

				.spinner {
					border-color: rgba(116, 116, 116, 0.3);
					border-top-color: rgb(116, 116, 116);
				}
			}

			@media (prefers-color-scheme: light) {
				body {
					color: #303030;
					background: white;
					color-scheme: light;
				}

				.spinner {
					border-color: rgba(75, 75, 75, 0.3);
					border-top-color: rgb(75, 75, 75);
				}
			}
		</style>
	</head>
	<body class="bg-white dark:bg-[#151515] text-charcoal dark:text-[#d4d4d4]">
		<div id="load-spinner" class="spinner"></div>
		<div id="app"></div>
		<script type="module" src="/src/main.js"></script>
		<script defer src="/assets/quickstart-glob.js"></script>
		<script defer src="/assets/hello-dev-wc-footer.js"></script>
	</body>
</html>