move gh-pages content to ./frontend

2021-11-17 22:37:37 -05:00
parent b93cec8057
commit 75ac8f27e9
29 changed files with 353 additions and 2 deletions
--- a/frontend/404.html
+++ b/frontend/404.html
@ -0,0 +1,82 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Page Not Found</title>
+<style>
+@font-face {
+  font-family: "Perfect DOS VGA 437";
+  font-style: normal;
+  font-weight: normal;
+  src: url("/fonts/perfect-dos.woff2") format("woff2"),
+       url("/fonts/perfect-dos.woff") format("woff");
+}
+body {
+  margin: 60px;
+  background: #0014a3;
+  font-family: "Perfect DOS VGA 437", monospace;
+  font-size: 1.1em;
+  line-height: 1.8;
+  letter-spacing: 0.015em;
+  color: #fff;
+  user-select: none;
+}
+#wrap {
+  display: block;
+  margin: auto;
+  max-width: 650px;
+}
+h1 {
+  margin: 1.2em auto;
+  font-size: 1em;
+  font-weight: normal;
+  text-align: center;
+}
+h1 span {
+  background-color: #aaa;
+  color: #0014a3;
+  padding: 0.3em;
+}
+a {
+  color: inherit;
+  text-decoration: none;
+}
+p {
+  margin: 1em 0;
+}
+p:last-of-type {
+  text-align: center;
+}
+ul {
+  position: relative;
+  list-style: none;
+  margin-left: 0;
+  padding-left: 1.6em;
+}
+ul li:before {
+  content: "*";
+  position: absolute;
+  left: 0;
+}
+span.blink {
+  animation: blink 1s step-end infinite;
+}
+@keyframes blink {
+  50% {
+    opacity: 0;
+  }
+}
+</style>
+</head>
+<body>
+<div id="wrap">
+<h1><span>Windows</span></h1>
+<p>A fatal exception 404_NOT_FOUND has occured at 0x69ABC420. The current application will be terminated.</p>
+<ul>
+<li>Press any key to terminate the current application.</li>
+<li>Press CTRL+ALT+DEL to restart your computer. If you do this, you will lose any unsaved information in all open applications.</li>
+</ul>
+<p><a href="/">&nbsp; Click here to return to Windows <span class="blink">_</span></a></p>
+</div>
+</body>
+</html>
--- a/frontend/CNAME
+++ b/frontend/CNAME
@ -0,0 +1 @@
+y2k.app
--- a/frontend/app.js
+++ b/frontend/app.js
--- a/frontend/favicon.ico
+++ b/frontend/favicon.ico
--- a/frontend/fonts/perfect-dos.woff
+++ b/frontend/fonts/perfect-dos.woff
--- a/frontend/fonts/perfect-dos.woff2
+++ b/frontend/fonts/perfect-dos.woff2
--- a/frontend/index.html
+++ b/frontend/index.html
@ -0,0 +1,31 @@
+<!doctype html>
+<!--
+
+         _.-;;-._
+  '-..-'|   ||   |    Made with love & sarcasm by Jake Jarvis.
+  '-..-'|_.-;;-._|               https://jarv.is/
+  '-..-'|   ||   |         https://github.com/jakejarvis
+  '-..-'|_.-''-._|
+
+-->
+<html>
+<head>
+<meta charset="utf-8">
+<title>Y2K Sandbox — Powered by Windows Me™ 💾</title>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<meta name="description" content="My first website on a Windows Me-powered time machine. You've been warned.">
+<link rel="stylesheet" href="style.css">
+<link rel="shortcut icon" href="favicon.ico">
+<link rel="preconnect" href="https://spin-vm.jrvs.io">
+<link rel="web-socket" href="wss://spin-vm.jrvs.io">
+</head>
+<body>
+<div id="cmd">
+<span id="status">JavaScript is required for this experience, please enable it and refresh the page!<br><br>Press the Any key to continue.</span>
+<span class="blink">_</span>
+</div>
+<canvas id="display"></canvas>
+<a class="github-corner" href="https://github.com/jakejarvis/y2k" title="View source on GitHub" aria-label="View source on Github" target="_blank" rel="noopener"><svg width="80" height="80" viewBox="0 0 250 250" style="fill: #fff; color: #333; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+<script src="app.js"></script>
+</body>
+</html>
--- a/frontend/style.css
+++ b/frontend/style.css
@ -0,0 +1,77 @@
+@font-face {
+  font-family: "Perfect DOS VGA 437";
+  font-style: normal;
+  font-weight: normal;
+  src: url("fonts/perfect-dos.woff2") format("woff2"),
+       url("fonts/perfect-dos.woff") format("woff");
+}
+body {
+  font-family: "Perfect DOS VGA 437", monospace;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  user-select: none;
+
+  /* specific retro wallpaper tile is set randomly by JS onload */
+  background-color: #000;
+  background-repeat: repeat;
+  background-attachment: fixed;
+  background-position: center; 
+}
+a {
+  color: inherit;
+  text-decoration: underline;
+}
+canvas, div#cmd {
+  display: block;
+  margin: auto;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+div#cmd {
+  width: 600px;
+  height: 300px;
+  padding: 12px;
+  background-color: #000;
+  color: #ccc;
+  z-index: -100;
+}
+canvas {
+  z-index: 100;
+
+  /* fix fuzziness: https://stackoverflow.com/a/13492784 */
+  image-rendering: optimizeSpeed;
+  image-rendering: -moz-crisp-edges;
+  image-rendering: -o-crisp-edges;
+  image-rendering: -webkit-optimize-contrast;
+  image-rendering: crisp-edges;
+  image-rendering: pixelated;
+  -ms-interpolation-mode: nearest-neighbor;
+}
+span.blink {
+  animation: blink 1s step-end infinite;
+}
+@keyframes blink {
+  50% {
+    opacity: 0;
+  }
+}
+/* http://tholman.com/github-corners/ */
+.github-corner:hover .octo-arm {
+  animation: octocat-wave 560ms ease-in-out;
+}
+@keyframes octocat-wave {
+  0%, 100% {
+    transform: rotate(0);
+  }
+  20%, 60% {
+    transform: rotate(-25deg);
+  }
+  40%, 80% {
+    transform: rotate(10deg);
+  }
+}
--- a/frontend/tiles/tile_0.png
+++ b/frontend/tiles/tile_0.png
--- a/frontend/tiles/tile_1.png
+++ b/frontend/tiles/tile_1.png
--- a/frontend/tiles/tile_10.png
+++ b/frontend/tiles/tile_10.png
--- a/frontend/tiles/tile_11.png
+++ b/frontend/tiles/tile_11.png
--- a/frontend/tiles/tile_12.png
+++ b/frontend/tiles/tile_12.png
--- a/frontend/tiles/tile_13.png
+++ b/frontend/tiles/tile_13.png
--- a/frontend/tiles/tile_14.png
+++ b/frontend/tiles/tile_14.png
--- a/frontend/tiles/tile_15.png
+++ b/frontend/tiles/tile_15.png
--- a/frontend/tiles/tile_16.png
+++ b/frontend/tiles/tile_16.png
--- a/frontend/tiles/tile_17.png
+++ b/frontend/tiles/tile_17.png
--- a/frontend/tiles/tile_18.png
+++ b/frontend/tiles/tile_18.png
--- a/frontend/tiles/tile_19.png
+++ b/frontend/tiles/tile_19.png
--- a/frontend/tiles/tile_2.png
+++ b/frontend/tiles/tile_2.png
--- a/frontend/tiles/tile_3.png
+++ b/frontend/tiles/tile_3.png
--- a/frontend/tiles/tile_4.png
+++ b/frontend/tiles/tile_4.png
--- a/frontend/tiles/tile_5.png
+++ b/frontend/tiles/tile_5.png
--- a/frontend/tiles/tile_6.png
+++ b/frontend/tiles/tile_6.png
--- a/frontend/tiles/tile_7.png
+++ b/frontend/tiles/tile_7.png
--- a/frontend/tiles/tile_8.png
+++ b/frontend/tiles/tile_8.png
--- a/frontend/tiles/tile_9.png
+++ b/frontend/tiles/tile_9.png