Uploaded Greasemonkey script

At v1.0

Right now it would be copy+paste into a new userscript, modified then press play!

I need to make the other half where we generate a new Qwerty Card with "spacebar" and the other keys and push that too.

Oh, then we need to make some kind of zipper to package a modified copy of skript.js with maybe some instructions... and the PDF in the __future__ version.

skript.js

@@ -0,0 +1,94 @@
+// ==UserScript==
+// @name     Key Card
+// @description Innovative and easy password generation
+// @version  1.0
+// @grant    none
+// ==/UserScript==
+
+// Configure me!
+let card = {".": "", "a": "b", "b": "a", "c": "d", "d": "c", "e": "f", "f": "e", "g": "h", "h": "g", "i": "j", "j": "i", "l": "m", "m": "l", "n": "o", "o": "n", "p": "q", "q": "p", "r": "s", "s": "r", "t": "u", "u": "t", "v": "y", "y": "v", "x": "z", "z": "x", "0": "1", "1": "0", "2": "3", "3": "2", "4": "5", "5": "4", "6": "7", "7": "6", "8": "9", "9": "8"};
+let spacebar = "test";
+
+// Rest of the User script
+addCSS = (css) => {
+  var head, obj;
+  head = document.getElementsByTagName('head')[0];
+  if (!head) {
+    return;
+  }
+  obj = document.createElement('style');
+  obj.type = 'text/css';
+  obj.innerHTML = css;
+  head.appendChild(obj);
+}
+addJS = (js) => {
+  var head, obj;
+  head = document.getElementsByTagName('head')[0];
+  if (!head) {
+    return;
+  }
+  obj = document.createElement('script');
+  obj.type = 'text/javascript';
+  obj.innerHTML = js;
+  head.appendChild(obj);
+}
+
+let domain = document.domain;
+//console.log("Hello " + domain + ", I'm Key card.");
+
+addCSS(`
+.keycardmenu{
+  position:absolute;
+  top:55px;
+  left:-450px;
+  padding: 0.5em 1em;
+  margin: 2em 0;
+  width: 400px;
+  background: #444444AA;
+  border: solid 5px #00A182FF;
+  border-radius: 14px;
+  margin: 10px;
+  padding: 10px;
+  line-height: 1.3;
+  overflow: auto;
+  text-align: left;
+  width: 450px;
+  height: 130px;
+  transition-duration: 0.5s;
+}
+.keycardmenu:hover{
+	position:absolute;
+  left:-20px;
+}
+`);
+addJS(`
+const card = new Map(${convert_card()});
+const spacebar = "${spacebar}";
+const copy2Clipboard = (data) => {
+ navigator.clipboard.writeText(data);
+ alert("Copied!");
+};
+const domain_name = "${domain}";
+`);
+addJS(`
+const generate_pass = () => {
+  let pass = "" + spacebar;
+  for (let idx in domain_name) {
+    let c = domain_name.at(idx);
+    let v = card.get(c.toLowerCase());
+    if (v) {
+      pass += v;
+    }
+  }
+  return pass;
+};
+`);
+const my_bod = `
+<div class="keycardmenu" oncopy="return false;" onselectstart="return false;" oncontextmenu="return false;">
+  <h1>Key Card</h1><br>
+  <p>Domain: ${domain}</p>
+  <button onclick="copy2Clipboard(generate_pass())">Copy Password</button>
+</div>
+`;
+
+document.body.innerHTML = my_bod + document.body.innerHTML;