diff --git a/aes.html b/aes.html
new file mode 100644
index 0000000..ed6f6b1
--- /dev/null
+++ b/aes.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+ encryptme: AES encryption and decryption
+
+
+
+ encryptme
+
+
+
+
diff --git a/dec.html b/dec.html
deleted file mode 100644
index 29f4d94..0000000
--- a/dec.html
+++ /dev/null
@@ -1,23 +0,0 @@
-
-
-
-
-
-
- encryptme: Decryption
-
-
-
-
- encryptme
-
-
-
-
-
-
-
-
-
diff --git a/enc.html b/enc.html
deleted file mode 100644
index e187cd0..0000000
--- a/enc.html
+++ /dev/null
@@ -1,23 +0,0 @@
-
-
-
-
-
-
- encryptme: Encryption
-
-
-
-
- encryptme
-
-
-
-
-
-
-
-
-
diff --git a/scripts/aes.js b/scripts/aes.js
new file mode 100644
index 0000000..f793e99
--- /dev/null
+++ b/scripts/aes.js
@@ -0,0 +1,39 @@
+let form = new Form({id: "encryption"});
+document.body.appendChild(form.handle);
+
+let inp = new FormElement({
+ id: "textbox",
+ type: "textbox",
+ label: "Text box",
+ form: form
+});
+
+let inp2 = new FormElement({
+ id: "password",
+ type: "password",
+ label: "Password",
+ form: form
+});
+
+let inp3 = new FormElement({
+ id: "textarea",
+ type: "textarea",
+ label: "Large text box",
+ enabled: true,
+ form: form
+});
+
+let inp4 = new FormElement({
+ id: "textarea",
+ type: "textarea",
+ label: "Large text box (disabled)",
+ enabled: false,
+ form: form
+});
+
+let out = new FormElement({
+ id: "output",
+ type: "output",
+ label: "Output box",
+ form: form
+});
diff --git a/scripts/interface.js b/scripts/interface.js
new file mode 100644
index 0000000..fd7ec61
--- /dev/null
+++ b/scripts/interface.js
@@ -0,0 +1,69 @@
+class Form {
+ constructor(id, formTag) {
+ this.id = id;
+
+ if (formTag !== undefined) {
+ this.handle = formTag;
+ } else {
+ this.handle = document.createElement("div");
+ }
+
+ this.inputs = new Map();
+ }
+}
+
+class FormElement {
+ #enabled = true;
+ get enabled() {
+ return this.#enabled;
+ }
+ set enabled(x) {
+ this.#enabled = x;
+ this.handle.disabled = !this.#enabled;
+ }
+
+ constructor({id, type, form, label="", dataType="plaintext", advanced=false, enabled=true}) {
+ this.id = id;
+ this.dataType = dataType;
+ this.advanced = advanced;
+
+ if (label !== "") {
+ this.label = document.createElement("label");
+ this.label.innerHTML = label;
+ }
+
+ this.type = type;
+ switch (type) {
+ case "textbox":
+ this.handle = document.createElement("input");
+ break;
+ case "password":
+ this.handle = document.createElement("input");
+ this.handle.setAttribute("type", "password");
+ break;
+ case "textarea":
+ this.handle = document.createElement("textarea");
+ break;
+ case "button":
+ this.handle = document.createElement("button");
+ break;
+ case "output":
+ this.handle = document.createElement("textarea");
+ this.handle.setAttribute("readonly", true);
+ break;
+ default:
+ console.error(`Unknown input type: ${type}`)
+ return;
+ }
+
+ this.enabled = enabled;
+
+ if (form !== undefined) {
+ if (this.label !== undefined) {
+ this.label.setAttribute("for", form.id);
+ form.handle.appendChild(this.label);
+ }
+ form.handle.appendChild(this.handle);
+ }
+ }
+}