1 files changed, 64 insertions, 0 deletions
diff --git a/html/broughlike/index.html b/html/broughlike/index.html
new file mode 100644
index 0000000..4de1d9d
--- /dev/null
+++ b/html/broughlike/index.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Eli's Broughlike</title>
+    <meta description="A Broughlike, or something like Flatland.">
+    <style>
+        body {
+            background-color: #f0f0f0;
+            font-size: x-large;
+        }
+        canvas {
+            width: 90vw; 
+            height: 90vw; 
+            max-width: 600px; 
+            max-height: 600px; 
+            border: 2px solid black;
+            display: block;
+            margin: 0 auto;
+            background-color: #f0f0f0;
+        }
+        @keyframes shake {
+            0% { transform: translate(0.5px, 0.5px) rotate(0deg); }
+            10% { transform: translate(-0.5px, -1px) rotate(-0.5deg); }
+            20% { transform: translate(-1.5px, 0px) rotate(0.5deg); }
+            30% { transform: translate(1.5px, 1px) rotate(0deg); }
+            40% { transform: translate(0.5px, -0.5px) rotate(0.5deg); }
+            50% { transform: translate(-0.5px, 1px) rotate(-0.5deg); }
+            60% { transform: translate(-1.5px, 0.5px) rotate(0deg); }
+            70% { transform: translate(1.5px, 0.5px) rotate(-0.5deg); }
+            80% { transform: translate(-0.5px, -0.5px) rotate(0.5deg); }
+            90% { transform: translate(0.5px, 1px) rotate(0deg); }
+            100% { transform: translate(0.5px, -1px) rotate(-0.5deg); }
+        }
+        .shake {
+            animation: shake 0.5s;
+            animation-iteration-count: 1;
+            animation-timing-function: steps(10, end);
+        }
+        .header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 0.5em;
+            background-color: #f0f0f0;
+        }
+        .toggleButton {
+            padding: 0.75em;
+            margin: 0.5em;
+        }
+    </style>
+</head>
+<body>
+    <div class="header">
+        <p><a href="about.html">About</a></p>
+        <div>
+            <button class="toggleButton" id="toggleShake" onclick="toggleShake()">Turn Shake Off</button>
+        </div>
+    </div>
+    <canvas id="gameCanvas"></canvas>
+    <script type="module" src="./broughlike.js"></script>
+</body>
+</html>
\ No newline at end of file