commit e5e701b97ab099021dc1af5eb5eae62b90bfe583
Author: tongong <tongong@gmx.net>
Date: Thu, 13 Jan 2022 08:38:49 +0100
initial version
Diffstat:
5 files changed, 73 insertions(+), 0 deletions(-)
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+.netlify
diff --git a/index.html b/index.html
@@ -0,0 +1,10 @@
+<html>
+ <head>
+ <title>sleepykeeb</title>
+ <link rel="stylesheet" type="text/css" href="styles.css">
+ </head>
+ <body>
+ <script src="https://unpkg.com/mithril/mithril.js"></script>
+ <script src="index.js"></script>
+ </body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,30 @@
+const keys = ["j", "k", "l"];
+
+function main() {
+ let active = [false, false, false];
+ return {
+ oncreate: function() {
+ document.onkeydown = (e) => {
+ if (!e.repeat && keys.indexOf(e.key) != -1) {
+ active[keys.indexOf(e.key)] = true;
+ m.redraw();
+ }
+ }
+ document.onkeyup = (e) => {
+ if (keys.indexOf(e.key) != -1) {
+ active[keys.indexOf(e.key)] = false;
+ m.redraw();
+ }
+ }
+ },
+ view: function() {
+ return m(".keyBoxWrap", [0, 1, 2].map(
+ i => m(".keyBox", {
+ class: active[i] ? "keyBoxHighlight" : ""
+ })
+ ));
+ }
+ }
+};
+
+m.mount(document.body, main);
diff --git a/netlify.toml b/netlify.toml
@@ -0,0 +1,2 @@
+[build]
+ publish = "."
diff --git a/styles.css b/styles.css
@@ -0,0 +1,30 @@
+body {
+ height: 100%;
+ width: 100%;
+ margin: 0;
+ background-color: #eee;
+ color: #444;
+ font-family: "sans-serif";
+ font-size: 18px;
+ line-height: 1.6em;
+}
+
+.keyBoxWrap {
+ height: 100%;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.keyBox {
+ height: 200px;
+ width: 200px;
+ margin: 50px;
+ border-radius: 10px;
+ transition: background-color 0.1s
+}
+
+.keyBoxHighlight {
+ background-color: #f08700;
+}