diff --git a/static/index.html b/static/index.html
new file mode 100644
index 0000000..3adfe3c
--- /dev/null
+++ b/static/index.html
@@ -0,0 +1,89 @@
+
+
+
+
+
+ Document
+
+
+
+
+ Konfiguration
+
+
+
+
diff --git a/static/script.js b/static/script.js
new file mode 100644
index 0000000..5cb05b2
--- /dev/null
+++ b/static/script.js
@@ -0,0 +1,17 @@
+const form = document.querySelector("form");
+const dynamicInputs = form.querySelectorAll("[data-field][data-values]");
+
+document.addEventListener("change", updateVisibility);
+
+function updateVisibility() {
+ dynamicInputs.forEach((element) => {
+ const input = form.querySelector(`#${element.dataset.field}`);
+ if (element.dataset.values.split("|").includes(input.value)) {
+ element.classList.remove("hidden");
+ } else {
+ element.classList.add("hidden");
+ }
+ });
+}
+
+updateVisibility();
diff --git a/static/style.css b/static/style.css
new file mode 100644
index 0000000..52f8086
--- /dev/null
+++ b/static/style.css
@@ -0,0 +1,54 @@
+:root {
+ --color-primary: #087e8b;
+ --color-on-primary: white;
+}
+
+body {
+ background-color: #222;
+ color: white;
+ font-family: Arial, Helvetica, sans-serif;
+}
+
+form > * {
+ margin-bottom: 16px;
+}
+
+fieldset {
+ border-radius: 8px;
+}
+
+input,
+select {
+ display: block;
+ width: 300px;
+ background-color: #222;
+ color: white;
+ border: 1px solid white;
+ border-radius: 8px;
+ padding: 8px;
+ box-sizing: border-box;
+}
+
+input:focus,
+select:focus {
+ outline: none;
+ border-color: var(--color-primary);
+}
+
+button {
+ border: none;
+ inset: none;
+ border-radius: 8px;
+ background-color: var(--color-primary);
+ color: var(--color-on-primary);
+ padding: 8px 16px;
+}
+
+:is(div:has(:is(input, select)), input, select)
+ + :is(div:has(:is(input, select)), input, select) {
+ margin-top: 8px;
+}
+
+.hidden {
+ display: none;
+}