index.html

<!-- This is a redirect page for GitHub Pages. The actual app is in public/ -->
<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8"/>
		<title>Moved!</title>
		<link rel="icon" href="images/icons/favicon.png" sizes="16x16" type="image/png"/>
		<meta name="viewport" content="width=device-width, initial-scale=1"/>
		<style>
			body {
				font-family: sans-serif;
				background: black;
				color: white;
			}

			html,
			body {
				height: 100%;
				margin: 0;
				display: flex;
				flex-direction: column;
			}
			main {
				flex: 1;
				max-width: 70em;
				margin: 0 auto;
				padding: 1em;
			}

			h2 {
				margin-top: 1.4em;
			}

			.logotype-area {
				display: block;
				font-size: 48px;
			}
			.logotype-area a {
				text-decoration: none;
				color: #daff95;
			}
			.logotype-area img {
				margin-right: 10px;
				height: 1em;
				-ms-interpolation-mode: nearest-neighbor;
				image-rendering: crisp-edges;
				image-rendering: pixelated;
				vertical-align: middle;
			}

			.update-your-bookmarks .star {
				animation-name: spin;
				animation-duration: 5000ms;
				animation-iteration-count: infinite;
				animation-timing-function: linear;
				transform-origin: 50% 150%;
			}
			@keyframes spin {
				from {
					transform:rotate(0deg);
				}
				to {
					transform:rotate(360deg);
				}
			}

			/* Star styles from https://codepen.io/fxm90/pen/yOBWVe */
			.star {
				position: relative;
				display: inline-block;
				width: 0;
				height: 0;
				margin-left: .9em;
				margin-right: .9em;
				margin-bottom: 1em;
				border-right: .3em solid transparent;
				border-bottom: .7em solid #FC0;
				border-left: .3em solid transparent;
				/* Controls the size of the stars. */
				font-size: 10px;
			}
			.star:before, .star:after {
				content: '';
				display: block;
				width: 0;
				height: 0;
				position: absolute;
				top: .6em;
				left: -1em;
				border-right: 1em solid transparent;
				border-bottom: .7em solid #FC0;
				border-left: 1em solid transparent;
				-webkit-transform: rotate(-35deg);
				transform: rotate(-35deg);
			}
			.star:after {
				-webkit-transform: rotate(35deg);
				transform: rotate(35deg);
			}
		</style>
	</head>
	<body>
		<main>
			<h1>Moved to...</h1>
			<div class="logotype-area"><a href="https://midi-recorder.web.app/"><img src="public/favicon-alt.png" alt="">midi-recorder.web.app</a>!</div>
			<p class="update-your-bookmarks"><i class="star"></i>If you happen to have a bookmark, update it!<i class="star"></i></p>

			<p hidden id="timed-redirect-notice">You will be automatically redirected <span id="timed-redirect-notice-seconds">in a few seconds</span></p>
			<script>
				(function(){
					var url = "https://midi-recorder.web.app";
					var seconds = 15;
					var redirectNotice = document.getElementById("timed-redirect-notice");
					redirectNotice.removeAttribute("hidden");
					var redirectNoticeSeconds = document.getElementById("timed-redirect-notice-seconds");
					var timeoutID;
					function countDownAndRedirect() {
						redirectNoticeSeconds.textContent = seconds === 0 ? "momentarily" : ("in " + seconds + " second" + (seconds === 1 ? "" : "s"));
						if (seconds === 0) {
							window.location = url;
							window.cancelTimedRedirect = function() {};
						} else {
							seconds -= 1;
							timeoutID = setTimeout(countDownAndRedirect, 1000);
						}
					}
					countDownAndRedirect();
					window.cancelTimedRedirect = function() {
						clearTimeout(timeoutID);
						// redirectNotice.textContent = "Automatic redirect canceled.";
						// redirectNotice.setAttribute("hidden", "hidden");
						redirectNotice.style.textDecoration = "line-through"; // this seems the nicest
					};
				})();
			</script>
		</main>
	</body>
</html>