diff --git a/site/index.html b/site/index.html
index 6fa9d9f..388a7a7 100644
--- a/site/index.html
+++ b/site/index.html
@@ -2,87 +2,8 @@
/
-
-
+
+
diff --git a/site/script.js b/site/script.js
new file mode 100644
index 0000000..3a42628
--- /dev/null
+++ b/site/script.js
@@ -0,0 +1,9 @@
+document
+ .getElementById("path")
+ .addEventListener("keydown", function(event) {
+ if (event.code === "Enter") {
+ window.location.href =
+ window.location.origin + event.target.value;
+ }
+ });
+
diff --git a/site/style.css b/site/style.css
new file mode 100644
index 0000000..45929e2
--- /dev/null
+++ b/site/style.css
@@ -0,0 +1,69 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ background-color: #161925;
+}
+::selection {
+ background-color: #00d3a7;
+ color: #fefefe;
+}
+html,
+body {
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+.stretch {
+ width: calc(50vw - 4px);
+ color: #c3c7d1;
+ margin-top: 0;
+}
+
+.column {
+ flex-direction: column;
+}
+
+.row {
+ display: flex;
+ justify-content: space-between;
+ flex-direction: row;
+}
+
+.border {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 50vw; /* 50% of the viewport's width */
+ height: 50vh; /* 50% of the viewport's height */
+ border: 2px solid white;
+ flex-direction: row; /* Stack children horizontaly */
+ justify-content: center; /* Align children to the top */
+ align-items: flex-start;
+}
+button {
+ background-color: #c6262e;
+ color: black;
+ border: 1px solid white;
+ cursor: pointer;
+ margin-left: auto;
+}
+
+button:hover {
+ background-color: #ed5353;
+}
+
+a {
+ text-decoration: none;
+ color: #c3c7d1;
+}
+
+img {
+ width: max(min(90%, 100px), 50px);
+ aspect-ratio: 1/1;
+}
+
+.folder {
+ width: 25%;
+}