Add instructions

aelred · Sep 22, 2024 · 8a3605c · 8a3605c
1 parent 63a7ca1
commit 8a3605c
Showing 1 changed file with 49 additions and 4 deletions.
diff --git a/web/index.html b/web/index.html
@@ -2,13 +2,58 @@
 
 <head>
     <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
+    <style>
+        body {
+            background-color: #0d0c0c;
+        }
+
+        #canvas {
+            padding-left: 0;
+            padding-right: 0;
+            margin-left: auto;
+            margin-right: auto;
+            display: block;
+            width: 100%;
+            height: 90%;
+            object-fit: contain;
+            image-rendering: pixelated;
+        }
+
+        p {
+            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+            color: #ffffff;
+            text-align: center;
+        }
+
+        a {
+            color: #dd2020
+        }
+
+        .key {
+            color: #e5e5e5
+        }
+
+        .button {
+            color: #a5a2a2
+        }
+    </style>
 </head>
 
-<body style="background-color: black">
-    <canvas id="canvas"
-        style="padding-left: 0; padding-right: 0; margin-left: auto; margin-right: auto; display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated;"
-        width="256" height="240">
+<body>
+    <canvas id="canvas" width="256" height="240">
     </canvas>
+    <p>
+        Drag and drop a ROM to the window to play it. Try the <a
+            href="https://eldenpixels.itch.io/alwas-awakening-the-8-bit-edition#:~:text=944%20kB-,Download%20demo,-Download">Alwa's
+            Awakening demo!</a> No need to unzip.
+    </p>
+    <p>
+        <span class=key>Z</span> = <span class=button>A</span>,&nbsp;
+        <span class=key>X</span> = <span class=button>B</span>,&nbsp;
+        <span class=key>Arrows</span> = <span class=button>D-Pad</span>,&nbsp;
+        <span class=key>Enter</span> = <span class=button> Start</span>,&nbsp;
+        <span class=key>Shift</span> = <span class=button>Select</span>
+    </p>
 </body>
 
 </html>