diff --git a/public/scripts/test.js b/public/scripts/test.js
new file mode 100644
index 0000000..4f17372
--- /dev/null
+++ b/public/scripts/test.js
@@ -0,0 +1,3 @@
+const commands = {};
+
+const term = $('body').terminal(commands);
diff --git a/public/styles/css/terminal.css b/public/styles/css/terminal.css
new file mode 100644
index 0000000..5aecef6
--- /dev/null
+++ b/public/styles/css/terminal.css
@@ -0,0 +1,1376 @@
+/*!
+ *       __ _____                     ________                              __
+ *      / // _  /__ __ _____ ___ __ _/__  ___/__ ___ ______ __ __  __ ___  / /
+ *  __ / // // // // // _  // _// // / / // _  // _//     // //  \/ // _ \/ /
+ * /  / // // // // // ___// / / // / / // ___// / / / / // // /\  // // / /__
+ * \___//____ \\___//____//_/ _\_  / /_//____//_/ /_/ /_//_//_/ /_/ \__\_\___/
+ *           \/              /____/                              version 2.42.2
+ * http://terminal.jcubic.pl
+ *
+ * This file is part of jQuery Terminal.
+ *
+ * Copyright (c) 2011-2024 Jakub T. Jankiewicz <https://jcubic.pl/me>
+ * Released under the MIT license
+ *
+ * Date: Fri, 12 Jul 2024 11:47:20 +0000
+ */
+.cmd .format,
+.cmd-prompt,
+.cmd-prompt div,
+.terminal .terminal-output .format {
+    display: inline-block
+}
+
+.cmd,
+.terminal h1,
+.terminal h2,
+.terminal h3,
+.terminal h4,
+.terminal h5,
+.terminal h6,
+.terminal pre {
+    margin: 0
+}
+
+.cmd .cmd-clipboard {
+    let: -16px;
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+    color: transparent !important;
+    height: 16px;
+    height: calc(16px/var(--pixel-density, 1)) !important;
+    left: calc(-16px/var(--pixel-density, 1)) !important;
+    outline: none !important;
+    overflow: hidden !important;
+    padding: 0 !important;
+    position: absolute !important;
+    resize: none !important;
+    text-indent: -9999em !important;
+    top: 0 !important;
+    top: calc(var(--cursor-line, 0)*var(--size, 1)*(14px/var(--pixel-density, 1))) !important;
+    white-space: pre !important;
+    width: 16px;
+    width: calc(16px/var(--pixel-density, 1)) !important;
+    z-index: 1000 !important
+}
+
+.visually-hidden {
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    height: 1px;
+    left: 0;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    user-select: none;
+    white-space: nowrap;
+    width: 1px
+}
+
+.cmd .cursor+span:empty,
+.cmd div.cmd-end-line span[data-text]:last-child,
+.cmd div.cmd-end-line span[data-text]:last-child span,
+.cmd span.cmd-end-line,
+.cmd span.cmd-end-line span,
+.cmd textarea {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none
+}
+
+.terminal audio,
+.terminal canvas,
+.terminal img,
+.terminal object {
+    cursor: default
+}
+
+.terminal {
+    --base-background: var(--background, #000);
+    --base-color: var(--color);
+    contain: content;
+    line-height: normal;
+    position: relative
+}
+
+.terminal-scroller {
+    scrollbar-gutter: stable;
+    box-sizing: border-box;
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+    position: relative
+}
+
+terminal.terminal-temp {
+    visibility: hidden
+}
+
+body.terminal {
+    height: 100%;
+    min-height: 100vh
+}
+
+html {
+    height: 100%
+}
+
+body.full-screen-terminal,
+body.terminal {
+    height: 100%;
+    margin: 0
+}
+
+body.full-screen-terminal .terminal {
+    height: 100%
+}
+
+body.full-screen-terminal {
+    height: 100%;
+    height: var(--terminal-force-height, 100dvh)
+}
+
+.terminal>div.terminal-fill {
+    height: 100%;
+    min-height: 100%
+}
+
+.terminal>.terminal-pixel {
+    display: inline;
+    height: 1px;
+    left: -2px;
+    position: absolute;
+    top: -2px;
+    width: 1px
+}
+
+.terminal>.terminal-font .terminal-resizer,
+.terminal>.terminal-resizer {
+    border: none !important;
+    bottom: 0 !important;
+    height: 100% !important;
+    left: 0 !important;
+    overflow: hidden !important;
+    padding: 0 !important;
+    pointer-events: none !important;
+    position: absolute !important;
+    right: 0 !important;
+    top: 0 !important;
+    width: 100% !important;
+    z-index: -1 !important
+}
+
+.cmd {
+    padding: 0;
+    position: relative;
+    width: 100%;
+    z-index: 300
+}
+
+.terminal .cmd,
+.terminal .cmd div {
+    background: transparent !important
+}
+
+.terminal a[tabindex="1000"],
+.terminal a[tabindex="1000"]:active,
+.terminal a[tabindex="1000"]:focus {
+    outline: none
+}
+
+.cmd.cmd.cmd .cmd-inverted,
+.cmd.cmd.cmd .inverted,
+.terminal .inverted,
+.terminal .terminal-inverted {
+    background-color: #aaa !important;
+    color: #000 !important
+}
+
+.cmd a[href],
+.terminal .terminal-output>:not(.raw) a[href],
+.terminal.external a[href] {
+    color: #37f;
+    color: var(--link-color, #37f);
+    cursor: pointer
+}
+
+.cmd a[href]:not(.terminal-inverted),
+.terminal .terminal-output>:not(.raw) a[href]:not(.terminal-inverted),
+.terminal.external a[href]:not(.terminal-inverted) {
+    --color: var(--link-color, #37f);
+    text-shadow: 0 0 calc(var(--glow)*5px) var(--color, #ccc)
+}
+
+.terminal .terminal-output>:not(.raw) a[href].terminal-inverted,
+.terminal.external a[href].terminal-inverted {
+    background: var(--color, #ccc);
+    text-shadow: 0 0 calc(var(--glow)*5px) var(--background, #000)
+}
+
+.cmd a[href]:hover,
+.terminal .terminal-output>:not(.raw) a[href]:hover,
+.terminal.external a[href]:hover {
+    background-color: #37f;
+    background-color: var(--link-color, #37f) !important;
+    color: #000;
+    color: var(--base-background, #000) !important;
+    text-decoration: none
+}
+
+.cmd a[href] span,
+.terminal .terminal-output>:not(.raw) a[href] span,
+.terminal.external a[href] span {
+    --color: var(--link-color, #37f);
+    color: #37f !important;
+    color: var(--link-color, #37f) !important;
+    text-decoration: underline
+}
+
+.cmd a[href]:hover span,
+.terminal .terminal-output>:not(.raw) a[href]:hover span,
+.terminal.external a[href]:hover span {
+    background-color: #37f !important;
+    background-color: var(--link-color, #37f) !important;
+    color: #000 !important;
+    color: var(--background, #000) !important;
+    text-decoration: none
+}
+
+.terminal a[href] {
+    transition-duration: .2s;
+    transition-property: color, background-color;
+    transition-timing-function: ease-out
+}
+
+.cmd .cmd-cursor,
+.cmd .cmd-cursor-line img,
+.cmd .cmd-cursor-line>span {
+    display: inline-block
+}
+
+.cmd .cmd-cursor .emoji,
+.cmd .cmd-cursor.cmd-blink .fa,
+.cmd .cmd-cursor.cmd-blink .far,
+.cmd .cmd-cursor.cmd-blink .fas,
+.cmd .cmd-cursor.cmd-blink a,
+.cmd .cmd-cursor.cmd-blink>span[data-text]:not(.emoji):not(.fa):not(.far):not(.fas) span {
+    -webkit-animation: terminal-blink 1s linear infinite;
+    -moz-animation: terminal-blink 1s linear infinite;
+    -ms-animation: terminal-blink 1s linear infinite;
+    animation: terminal-blink 1s linear infinite
+}
+
+.bar.cmd .cmd-inverted,
+.bar.terminal .inverted {
+    box-shadow: -2px 0 0 -1px #aaa;
+    box-shadow: -2px 0 0 -1px var(--original-color, #aaa)
+}
+
+.cmd .cmd-prompt,
+.terminal,
+.terminal .terminal-output>div>div {
+    display: block;
+    height: auto
+}
+
+.terminal .terminal-output>div:not(.raw) div {
+    clear: both;
+    white-space: nowrap
+}
+
+.cmd .cmd-prompt:empty,
+.cmd .cmd-prompt>a,
+.cmd .cmd-prompt>span {
+    float: left
+}
+
+.cmd-prompt [data-text]>span,
+.cmd-wrapper>div {
+    white-space: pre
+}
+
+.cmd [data-text] span,
+.terminal [data-text] span {
+    display: inline-block
+}
+
+.terminal-ouput span[style*=width] {
+    min-height: 14px;
+    min-height: calc(var(--size, 1)*(14px/var(--pixel-density, 1)))
+}
+
+.cmd div,
+.terminal .terminal-output>:not(.raw)>div,
+.terminal.external div {
+    line-height: 1em;
+    line-height: calc(var(--size)*(16px/var(--pixel-density, 1)) + 1px/var(--pixel-density, 1))
+}
+
+.cmd .cmd-prompt span.fa:before,
+.cmd .cmd-prompt span.fab:before,
+.cmd .cmd-prompt span.fad:before,
+.cmd .cmd-prompt span.fal:before,
+.cmd .cmd-prompt span.far:before,
+.cmd .cmd-prompt span.fas {
+    position: relative;
+    top: 2px
+}
+
+.cmd,
+.cmd span:not(.fas):not(.far):not(.fa),
+.terminal,
+.terminal-font-forcer,
+.terminal-output>:not(.raw),
+.terminal-output>:not(.raw) a,
+.terminal-output>:not(.raw) span:not(.fas):not(.far):not(.fa) {
+    font-family: monospace;
+    font-family: var(--font, monospace)
+}
+
+.cmd,
+.terminal {
+    font-size: 12px
+}
+
+.cmd .cmd-line:before,
+.terminal-output>div:not(.raw) div:before {
+    content: "\0200B";
+    display: inline-block;
+    width: 0
+}
+
+.cmd .cmd-line {
+    white-space: nowrap
+}
+
+.cmd span[data-text],
+.terminal span[data-text] {
+    display: inline-block
+}
+
+.cmd span[data-text]:not(.cmd-inverted):not(.token):not(.emoji),
+.terminal,
+terminal-output>div:not(.raw) div>span:not(.token):not(.inverted):not(.terminal-inverted):not(.cmd-inverted):not(.terminal-error):not(.emoji) {
+    background-color: #000;
+    color: #aaa
+}
+
+.cmd span[data-text] span,
+.terminal span[data-text] span {
+    text-decoration: inherit
+}
+
+.terminal .ansi>div {
+    line-height: 13px !important;
+    line-height: calc(var(--size, 1)*(13px/var(--pixel-density, 1))) !important
+}
+
+.cmd .cmd-prompt span,
+.cmd span.cmd-prompt {
+    --background: transparent
+}
+
+.cmd .emoji,
+.terminal-output .emoji {
+    background-repeat: no-repeat;
+    background-size: contain;
+    color: transparent;
+    height: 12px;
+    height: calc(12px/var(--pixel-density, 1));
+    position: relative
+}
+
+.cmd .fa span,
+.cmd .far span,
+.cmd .fas span,
+.terminal .terminal-output .fa span,
+.terminal .terminal-output .far span,
+.terminal .terminal-output .fas span {
+    clip: rect(1px, 1px, 1px, 1px);
+    background: transparent !important;
+    color: transparent !important;
+    position: absolute
+}
+
+.cmd .emoji,
+.cmd .emoji span,
+.terminal-output .emoji,
+.terminal-output .emoji span {
+    display: inline-block;
+    width: 2ch
+}
+
+.cmd,
+.terminal {
+    box-sizing: border-box
+}
+
+.cmd .cmd-cursor span:not(.token):not(.inverted) {
+    background-color: inherit;
+    color: inherit
+}
+
+.cmd .emoji.emoji.emoji.emoji,
+.cmd .emoji.emoji.emoji.emoji span {
+    background-color: transparent;
+    color: transparent
+}
+
+.cmd .cmd-cursor * {
+    background-color: transparent
+}
+
+.cmd span[style*=width] span,
+.terminal span[style*=width] span {
+    width: inherit
+}
+
+.cmd div {
+    clear: both
+}
+
+.cmd .cmd-prompt+div {
+    clear: right
+}
+
+terminal .terminal-output>div {
+    margin-top: -1px
+}
+
+.terminal-output>div.raw>div * {
+    word-wrap: break-word;
+    overflow-wrap: break-word
+}
+
+.terminal .terminal-font {
+    float: left;
+    font-size: inherit;
+    left: 0;
+    line-height: inherit;
+    margin-bottom: 1px;
+    position: absolute;
+    top: -100%
+}
+
+.cmd>span:not(.cmd-prompt) {
+    float: left
+}
+
+.cmd .cmd-prompt span.cmd-line {
+    display: block;
+    float: none
+}
+
+.terminal table {
+    border-collapse: collapse
+}
+
+.terminal td {
+    border: 1px solid #aaa
+}
+
+.cmd span[data-text]:not(.emoji):not(.fa):not(.fas):not(.far) span {
+    background-color: inherit;
+    color: inherit
+}
+
+.cmd [role=presentation].cmd-cursor-line {
+    cursor: text;
+    position: relative;
+    z-index: 100
+}
+
+.cmd .cmd-prompt {
+    position: relative;
+    z-index: 200
+}
+
+.cmd [role=presentation]:not(.cmd-cursor-line) {
+    overflow: hidden
+}
+
+.cmd {
+    --original-color: var(--color, #aaa);
+    --original-background: var(--background)
+}
+
+.cmd a[href] {
+    --original-color: var(--link-color, #37f)
+}
+
+@-webkit-keyframes terminal-blink {
+
+    0%,
+    50% {
+        background-color: #aaa;
+        background-color: var(--original-color, #aaa);
+        -webkit-box-shadow: 0 0 calc(var(--glow)*3px) var(--color, #aaa);
+        box-shadow: 0 0 calc(var(--glow)*3px) var(--color, #aaa);
+        color: #000;
+        color: var(--original-background, #000)
+    }
+
+    50.1%,
+    to {
+        background-color: inherit;
+        color: inherit;
+        color: var(--original-color, #aaa)
+    }
+}
+
+@-moz-keyframes terminal-blink {
+
+    0%,
+    50% {
+        background-color: #aaa;
+        background-color: var(--original-color, #aaa);
+        -webkit-box-shadow: 0 0 calc(var(--glow)*3px) var(--color, #aaa);
+        box-shadow: 0 0 calc(var(--glow)*3px) var(--color, #aaa);
+        color: #000;
+        color: var(--original-background, #000)
+    }
+
+    50.1%,
+    to {
+        background-color: inherit;
+        color: inherit;
+        color: var(--original-color, #aaa)
+    }
+}
+
+@keyframes terminal-blink {
+
+    0%,
+    50% {
+        background-color: #aaa;
+        background-color: var(--original-color, #aaa);
+        -webkit-box-shadow: 0 0 calc(var(--glow)*3px) var(--color, #aaa);
+        box-shadow: 0 0 calc(var(--glow)*3px) var(--color, #aaa);
+        color: #000;
+        color: var(--original-background, #000)
+    }
+
+    50.1%,
+    to {
+        background-color: inherit;
+        -webkit-box-shadow: none;
+        box-shadow: none;
+        color: inherit;
+        color: var(--original-color, #aaa)
+    }
+}
+
+@-webkit-keyframes terminal-glow {
+
+    0%,
+    50% {
+        background-color: #aaa;
+        background-color: var(--original-color, #aaa);
+        box-shadow: 0 0 3px #aaa;
+        -webkit-box-shadow: 0 0 3px var(--color, #aaa);
+        box-shadow: 0 0 3px var(--color, #aaa);
+        color: #000;
+        color: var(--original-background, #000)
+    }
+
+    50.1%,
+    to {
+        background-color: inherit;
+        -webkit-box-shadow: none;
+        box-shadow: none;
+        color: inherit
+    }
+}
+
+@-moz-keyframes terminal-glow {
+
+    0%,
+    50% {
+        background-color: #aaa;
+        background-color: var(--original-color, #aaa);
+        box-shadow: 0 0 3px #aaa;
+        -moz-box-shadow: 0 0 3px var(--color, #aaa);
+        box-shadow: 0 0 3px var(--color, #aaa);
+        color: #000;
+        color: var(--original-background, #000)
+    }
+
+    50.1%,
+    to {
+        background-color: inherit;
+        -moz-box-shadow: none;
+        box-shadow: none;
+        color: inherit
+    }
+}
+
+@keyframes terminal-glow {
+
+    0%,
+    50% {
+        background-color: #aaa;
+        background-color: var(--original-color, #aaa);
+        box-shadow: 0 0 3px #aaa;
+        box-shadow: 0 0 3px var(--color, #aaa);
+        color: #000;
+        color: var(--original-background, #000)
+    }
+
+    50.1%,
+    to {
+        background-color: inherit;
+        box-shadow: none;
+        color: inherit
+    }
+}
+
+@-webkit-keyframes terminal-bar {
+
+    0%,
+    50% {
+        box-shadow: -2px 0 0 -1px #aaa;
+        box-shadow: calc(var(--line-thickness, 2)*-1px) 0 0 -1px var(--original-color, #aaa)
+    }
+
+    50.1%,
+    to {
+        box-shadow: none
+    }
+}
+
+@-moz-keyframes terminal-bar {
+
+    0%,
+    50% {
+        box-shadow: -2px 0 0 -1px #aaa;
+        box-shadow: calc(var(--line-thickness, 2)*-1px) 0 0 -1px var(--original-color, #aaa)
+    }
+
+    50.1%,
+    to {
+        box-shadow: none
+    }
+}
+
+@keyframes terminal-bar {
+
+    0%,
+    50% {
+        box-shadow: -2px 0 0 -1px #aaa;
+        box-shadow: calc(var(--line-thickness, 2)*-1px) 0 0 -1px var(--original-color, #aaa)
+    }
+
+    50.1%,
+    to {
+        box-shadow: none
+    }
+}
+
+@-webkit-keyframes terminal-underline {
+
+    0%,
+    50% {
+        box-shadow: 0 2px 0 #aaa;
+        box-shadow: 0 calc(var(--line-thickness, 2)*1px) 0 var(--original-color, #aaa)
+    }
+
+    50.1%,
+    to {
+        box-shadow: none
+    }
+}
+
+@-moz-keyframes terminal-underline {
+
+    0%,
+    50% {
+        box-shadow: 0 2px 0 #aaa;
+        box-shadow: 0 calc(var(--line-thickness, 2)*1px) 0 var(--original-color, #aaa)
+    }
+
+    50.1%,
+    to {
+        box-shadow: none
+    }
+}
+
+@keyframes terminal-underline {
+
+    0%,
+    50% {
+        box-shadow: 0 2px 0 #aaa;
+        box-shadow: 0 calc(var(--line-thickness, 2)*1px) 0 var(--original-color, #aaa)
+    }
+
+    50.1%,
+    to {
+        box-shadow: none
+    }
+}
+
+@-webkit-keyframes terminal-none {
+
+    0%,
+    to {
+        background-color: #aaa;
+        background-color: var(--original-color, #aaa);
+        -webkit-box-shadow: 0 0 calc(var(--glow)*3px) var(--color, #aaa);
+        box-shadow: 0 0 calc(var(--glow)*3px) var(--color, #aaa);
+        color: #000;
+        color: var(--original-background, #000)
+    }
+}
+
+@-moz-keyframes terminal-none {
+
+    0%,
+    to {
+        background-color: #aaa;
+        background-color: var(--original-color, #aaa);
+        -webkit-box-shadow: 0 0 calc(var(--glow)*3px) var(--color, #aaa);
+        box-shadow: 0 0 calc(var(--glow)*3px) var(--color, #aaa);
+        color: #000;
+        color: var(--background, #000)
+    }
+}
+
+@keyframes terminal-none {
+
+    0%,
+    to {
+        background-color: #aaa;
+        background-color: var(--original-color, #aaa);
+        -webkit-box-shadow: 0 0 calc(var(--glow)*3px) var(--color, #aaa);
+        box-shadow: 0 0 calc(var(--glow)*3px) var(--color, #aaa);
+        color: #000;
+        color: var(--original-background, #000)
+    }
+}
+
+.underline-animation .cmd .cmd-cursor .emoji,
+.underline-animation .cmd .cmd-cursor.cmd-blink .fa,
+.underline-animation .cmd .cmd-cursor.cmd-blink .far,
+.underline-animation .cmd .cmd-cursor.cmd-blink .fas,
+.underline-animation .cmd .cmd-cursor.cmd-blink a,
+.underline-animation .cmd .cmd-cursor.cmd-blink>span[data-text]:not(.emoji):not(.fa):not(.far):not(.fas) span {
+    -webkit-animation-name: terminal-underline;
+    -moz-animation-name: terminal-underline;
+    -ms-animation-name: terminal-underline;
+    animation-name: terminal-underline
+}
+
+.glow-animation .cmd .cmd-cursor .emoji,
+.glow-animation .cmd .cmd-cursor.cmd-blink .fa,
+.glow-animation .cmd .cmd-cursor.cmd-blink .far,
+.glow-animation .cmd .cmd-cursor.cmd-blink .fas,
+.glow-animation .cmd .cmd-cursor.cmd-blink a,
+.glow-animation .cmd .cmd-cursor.cmd-blink>span[data-text]:not(.emoji):not(.fa):not(.far):not(.fas) span {
+    -webkit-animation-name: terminal-glow;
+    -moz-animation-name: terminal-glow;
+    -ms-animation-name: terminal-glow;
+    animation-name: terminal-glow
+}
+
+.bar-animation .cmd .cmd-cursor .emoji,
+.bar-animation .cmd .cmd-cursor.cmd-blink .fa,
+.bar-animation .cmd .cmd-cursor.cmd-blink .far,
+.bar-animation .cmd .cmd-cursor.cmd-blink .fas,
+.bar-animation .cmd .cmd-cursor.cmd-blink a,
+.bar-animation .cmd .cmd-cursor.cmd-blink>span[data-text]:not(.emoji):not(.fa):not(.far):not(.fas) span {
+    -webkit-animation-name: terminal-bar;
+    -moz-animation-name: terminal-bar;
+    -ms-animation-name: terminal-bar;
+    animation-name: terminal-bar
+}
+
+@supports (-ms-ime-align:auto) {
+    .cmd .cmd-clipboard {
+        margin-left: -9999px
+    }
+
+    @keyframes terminal-blink {
+
+        0%,
+        50% {
+            background-color: var(--original-color, #aaa);
+            color: var(--background, #000)
+        }
+
+        50.1%,
+        to {
+            background-color: var(--background, #000);
+            color: var(--original-color, #aaa)
+        }
+    }
+
+    @keyframes terminal-bar {
+
+        0%,
+        50% {
+            border-left-color: var(--color, #aaa)
+        }
+
+        50.1%,
+        to {
+            border-left-color: var(--background, #000)
+        }
+    }
+
+    @keyframes terminal-underline {
+
+        0%,
+        50% {
+            border-bottom-color: var(--color, #aaa);
+            line-height: 12px;
+            line-height: calc(var(--size, 1)*(12px/var(--pixel-density, 1)))
+        }
+
+        50.1%,
+        to {
+            border-bottom-color: var(--background, #000);
+            line-height: 12px;
+            line-height: calc(var(--size, 1)*(12px/var(--pixel-density, 1)))
+        }
+    }
+}
+
+@media (-ms-high-contrast:active),
+(-ms-high-contrast:none) {
+    .cmd .cmd-clipboard {
+        margin-left: -9999px
+    }
+
+    .underline-animation .cursor.blink span span {
+        margin-top: 1px
+    }
+
+    @-ms-keyframes terminal-blink {
+
+        0%,
+        50% {
+            background-color: #aaa;
+            color: #000
+        }
+
+        50.1%,
+        to {
+            background-color: #000;
+            color: #aaa
+        }
+    }
+}
+
+.cmd span[data-text]::-moz-selection,
+.cmd span[data-text]:not(.far):not(.fa):not(.fas) span::-moz-selection,
+.terminal .terminal-output .raw ::-moz-selection,
+.terminal .terminal-output .raw div::-moz-selection,
+.terminal .terminal-output div div a::-moz-selection,
+.terminal .terminal-output div div::-moz-selection,
+.terminal .terminal-output span[data-text]::-moz-selection,
+.terminal .terminal-output span[data-text]:not(.far):not(.fa):not(.fas) span::-moz-selection {
+    background-color: #aaa;
+    color: #000
+}
+
+.terminal .cmd {
+    pointer-events: none
+}
+
+.terminal .cmd-prompt * {
+    pointer-events: visible
+}
+
+.cmd-prompt>span:first-child {
+    margin-left: var(--prompt-offset)
+}
+
+.terminal .cmd textarea,
+.terminal .cmd-cursor-line>span,
+.terminal .cmd-wrapper>div:not(.cmd-cursor-line) {
+    pointer-events: visible
+}
+
+.cmd span[data-text]:not(.far):not(.fa):not(.fas) span::selection,
+.terminal .terminal-output .raw ::selection,
+.terminal .terminal-output .raw div::selection,
+.terminal .terminal-output div div a::selection,
+.terminal .terminal-output div div::selection,
+.terminal .terminal-output span[data-text]::selection,
+.terminal .terminal-output span[data-text]:not(.far):not(.fa):not(.fas) span::selection,
+.terminal-revese {
+    background-color: hsla(0, 0%, 67%, .99);
+    color: #000
+}
+
+.cmd .emoji span::-moz-selection,
+.cmd .emoji::-moz-selection,
+.cmd textarea::-moz-selection,
+.terminal-output .emoji span::-moz-selection,
+.terminal-output .emoji::-moz-selection {
+    background-color: transparent !important;
+    color: transparent !important
+}
+
+.cmd .emoji span::selection,
+.cmd .emoji::selection,
+.cmd textarea::selection,
+.terminal-output .emoji span::selection,
+.terminal-output .emoji::selection {
+    background-color: transparent !important;
+    color: transparent !important
+}
+
+.terminal .terminal-output>:not(.raw) .terminal-error,
+.terminal .terminal-output>:not(.raw) .terminal-error * {
+    color: red;
+    color: var(--error-color, red)
+}
+
+.tilda {
+    left: 0;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 1100
+}
+
+.ui-dialog-content .terminal {
+    box-sizing: border-box;
+    height: 100%;
+    width: 100%
+}
+
+.ui-dialog .ui-dialog-content.dterm {
+    padding: 0
+}
+
+.clear {
+    clear: both
+}
+
+.terminal .terminal-fill {
+    border: none;
+    box-sizing: border-box;
+    height: 100%;
+    left: 0;
+    margin: 1px 0 0;
+    opacity: .01;
+    pointer-events: none;
+    position: absolute;
+    top: -100%;
+    width: 100%
+}
+
+.cmd-editable,
+.terminal .terminal-fill,
+.terminal-scroller {
+    padding: calc(1px*var(--padding, 10)/var(--pixel-density, 1))
+}
+
+.cmd-editable {
+    padding-top: 0
+}
+
+.terminal-scroller {
+    padding-bottom: 0
+}
+
+.terminal .terminal-output>:not(.raw) .terminal-error,
+.terminal .terminal-output>:not(.raw) .terminal-error * {
+    --color: var(--error-color, red);
+    text-shadow: 0 0 calc(var(--glow)*5px) var(--color)
+}
+
+.terminal .terminal-output>:not(.raw) a[href] {
+    text-shadow: 0 0 calc(var(--glow)*5px) var(--color)
+}
+
+.terminal .cmd {
+    margin-bottom: calc(1px*var(--padding, 10)/var(--pixel-density, 1));
+    position: relative
+}
+
+.terminal .partial,
+.terminal .partial>div {
+    display: inline-block
+}
+
+@supports (--css:variables) {
+
+    .cmd,
+    .cmd div,
+    .cmd span[data-text]:not(.cmd-inverted):not(.token):not(.emoji),
+    .terminal,
+    .terminal-output>:not(.raw) a,
+    .terminal-output>:not(.raw) div,
+    .terminal-output>:not(.raw) span[data-text]:not(.token):not(.inverted):not(.terminal-inverted):not(.cmd-inverted):not(.terminal-error):not(.emoji),
+    .terminal.external [data-text] {
+        background-color: var(--background, #000);
+        color: var(--color, #aaa)
+    }
+
+    .cmd [data-text],
+    .terminal [data-text] {
+        text-shadow: var(--text-shadow, 0 0 calc(var(--glow)*5px) var(--color, #ccc))
+    }
+
+    .terminal span[style*="--length"] {
+        display: inline-block;
+        width: calc(var(--length, 1)*var(--char-width, 7.23438)*1px)
+    }
+
+    .cmd,
+    .cmd div,
+    .cmd span,
+    .terminal,
+    .terminal-output>:not(.raw) a,
+    .terminal-output>:not(.raw) div,
+    .terminal-output>:not(.raw) span {
+        font-size: calc(var(--size, 1)*(12px/var(--pixel-density, 1)))
+    }
+
+    .cmd .emoji,
+    .terminal-output .emoji {
+        height: calc(var(--size, 1)*(12px/var(--pixel-density, 1)))
+    }
+
+    .cmd .clipboard {
+        top: calc(var(--size, 1)*(14/var(--pixel-density, 1))*var(--cursor-line, 0)*1px)
+    }
+
+    .cmd span[style*="--background"],
+    .terminal span[style*="--background"] {
+        --base-background: var(--background)
+    }
+
+    .cmd.cmd.cmd .cmd-inverted,
+    .cmd.cmd.cmd .inverted,
+    .terminal .inverted>span,
+    .terminal .terminal-inverted>span {
+        background-color: var(--color, #aaa) !important;
+        color: var(--base-background, #000) !important
+    }
+
+    .cmd .cmd-cursor.cmd-blink {
+        background-color: var(--background, #000);
+        color: var(--color, #aaa)
+    }
+
+    .cmd .cmd-cursor.cmd-blink .emoji,
+    .cmd .cmd-cursor.cmd-blink .fa,
+    .cmd .cmd-cursor.cmd-blink .far,
+    .cmd .cmd-cursor.cmd-blink .fas,
+    .cmd .cmd-cursor.cmd-blink a,
+    .cmd .cmd-cursor.cmd-blink>span[data-text]:not(.emoji):not(.fa):not(.far):not(.fas) span {
+        --original-background: inherit;
+        -webkit-animation: var(--animation, terminal-blink) 1s infinite linear;
+        -moz-animation: var(--animation, terminal-blink) 1s infinite linear;
+        -ms-animation: var(--animation, terminal-blink) 1s infinite linear;
+        animation: var(--animation, terminal-blink) 1s infinite linear
+    }
+
+    .cmd .cmd-cursor.cmd-blink .emoji span {
+        background: transparent;
+        color: transparent
+    }
+
+    .cmd span[data-text]:not(.far):not(.fa):not(.fas):not(.emoji) span::-moz-selection,
+    .terminal .terminal-output .raw ::-moz-selection,
+    .terminal .terminal-output .raw div::-moz-selection,
+    .terminal .terminal-output div div a::-moz-selection,
+    .terminal .terminal-output div div::-moz-selection,
+    .terminal .terminal-output span[data-text]::-moz-selection,
+    .terminal .terminal-output span[data-text]:not(.far):not(.fa):not(.fas):not(.emoji) span::-moz-selection {
+        background-color: var(--color, #aaa);
+        color: var(--background, #000)
+    }
+
+    .terminal .terminal-output div div a::-moz-selection {
+        background-color: var(--link-color, rgba(15, 96, 255, .99)) !important;
+        color: var(--background, #000) !important
+    }
+
+    .terminal .terminal-output div div a:hover::-moz-selection {
+        background-color: var(--link-color, rgba(2, 50, 144, .99)) !important
+    }
+
+    .cmd span[data-text]:not(.far):not(.fa):not(.fas):not(.emoji) span::selection,
+    .terminal .terminal-output .raw ::selection,
+    .terminal .terminal-output .raw div::selection,
+    .terminal .terminal-output div div a::selection,
+    .terminal .terminal-output div div::selection,
+    .terminal .terminal-output span[data-text]:not(.emoji)::selection,
+    .terminal .terminal-output span[data-text]:not(.far):not(.fa):not(.fas):not(.emoji) span::selection {
+        background-color: var(--color, hsla(0, 0%, 67%, .99)) !important;
+        color: var(--background, #000) !important
+    }
+
+    .terminal .terminal-output div div a::selection {
+        background-color: var(--link-color, rgba(15, 96, 255, .99)) !important;
+        color: var(--background, #000) !important
+    }
+
+    .terminal .terminal-output div div a:hover::selection {
+        background-color: var(--link-color, rgba(2, 50, 144, .99)) !important
+    }
+}
+
+@property --color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: hsla(0, 0%, 67%, .99)
+}
+
+@property --background {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #000
+}
+
+@property --link-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #37f
+}
+
+@property --size {
+    syntax: "<number>";
+    inherits: true;
+    initial-value: 1
+}
+
+@property --padding {
+    syntax: "<number>";
+    inherits: true;
+    initial-value: 10
+}
+
+@supports (-ms-ime-align:auto) {
+
+    .cmd span[data-text]::selection,
+    .terminal .terminal-output div div a::selection,
+    .terminal .terminal-output div div::selection,
+    .terminal h1::selection,
+    .terminal h2::selection,
+    .terminal h3::selection,
+    .terminal h4::selection,
+    .terminal h5::selection,
+    .terminal h6::selection,
+    .terminal pre::selection,
+    .terminal td::selection {
+        background-color: hsla(0, 0%, 67%, .99);
+        color: #000
+    }
+}
+
+.cmd .style .token.string,
+.cmd .token.entity,
+.cmd .token.operator,
+.cmd .token.string,
+.cmd .token.token,
+.cmd .token.url,
+.cmd .token.variable,
+.terminal .style .token.string,
+.terminal .token.entity,
+.terminal .token.operator,
+.terminal .token.string,
+.terminal .token.token,
+.terminal .token.url,
+.terminal .token.variable {
+    background-color: inherit
+}
+
+.cmd .cursor-wrapper ul {
+    float: left;
+    left: 0;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    position: absolute;
+    top: 14px
+}
+
+.cmd .cursor-wrapper li {
+    cursor: pointer;
+    white-space: nowrap
+}
+
+.cmd .cursor-wrapper li:hover {
+    background: #aaa;
+    color: #000
+}
+
+.cursor-wrapper {
+    position: relative
+}
+
+.terminal-output img {
+    vertical-align: top
+}
+
+.cmd img {
+    border: 1px solid transparent;
+    height: 14px;
+    height: calc(var(--size, 1)*(14px/var(--pixel-density, 1)))
+}
+
+.cmd-cursor img {
+    border-color: #ccc;
+    border-color: var(--color, #ccc)
+}
+
+.terminal-output svg.terminal-broken-image {
+    height: calc(var(--size, 1)*(14px/var(--pixel-density, 1)))
+}
+
+.terminal-output svg.terminal-broken-image use {
+    fill: var(--color, #ccc)
+}
+
+.terminal-error {
+    --color: var(--error-color)
+}
+
+.terminal-glow {
+    --animation: terminal-glow
+}
+
+.terminal-glow .cmd-prompt>span,
+.terminal-glow .terminal-output>div a[href],
+.terminal-glow .terminal-output>div span,
+.terminal-glow [data-text] span,
+.terminal-glow a[data-text],
+.terminal-glow span[data-text] {
+    text-shadow: 1px 1px 5px #ccc;
+    text-shadow: 1px 1px 5px var(--color, #ccc)
+}
+
+.terminal-scroll-marker {
+    height: 1px;
+    height: calc(1px/var(--pixel-density, 1));
+    margin-top: -1px;
+    margin-top: calc(-1px/var(--pixel-density, 1));
+    position: relative;
+    z-index: 100
+}
+
+.terminal-scroll-marker div {
+    bottom: 0;
+    left: 0;
+    position: absolute;
+    right: 0;
+    z-index: 200
+}
+
+.terminal-less {
+    overscroll-behavior-y: contain;
+    touch-action: none
+}
+
+.terminal-mobile.terminal-less .terminal-wrapper {
+    pointer-events: none
+}
+
+.cmd-editable,
+.terminal-mobile.terminal-less .terminal-output a {
+    pointer-events: visible
+}
+
+.cmd-editable:before {
+    content: attr(data-cmd-prompt);
+    display: inline-block
+}
+
+.cmd-editable {
+    background: transparent;
+    bottom: 0;
+    color: transparent;
+    left: 0;
+    opacity: .01;
+    outline: 0 solid transparent;
+    position: absolute;
+    right: 0;
+    top: calc(var(--cmd-top)*1px);
+    z-index: 500
+}
+
+.terminal-scroller::-webkit-scrollbar {
+    background: var(--background, #000);
+    height: calc(6px/var(--pixel-density, 1));
+    width: calc(6px/var(--pixel-density, 1))
+}
+
+.terminal-scroller::-webkit-scrollbar-thumb,
+.terminal-scroller::-webkit-scrollbar-thumb:hover {
+    background: var(--color, #aaa)
+}
+
+.terminal-scroller {
+    scrollbar-color: #aaa #000;
+    scrollbar-color: var(--color, #aaa) var(--background, #000);
+    scrollbar-width: thin
+}
+
+.terminal-hidden {
+    clip: rect(0, 0, 0, 0) !important;
+    border: 0 !important;
+    height: 1px !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    padding: 0 !important;
+    position: absolute !important;
+    white-space: nowrap !important;
+    width: 1px !important
+}
+
+.terminal-wrapper {
+    --color: var(--base-color);
+    --background: var(--base-background)
+}
+
+.cmd .token {
+    --original-color: var(--color)
+}
+
+.cmd .terminal-blink,
+.terminal .terminal-blink {
+    animation: terminal-ansi-blink 1s steps(2, start) infinite;
+    -webkit-animation: terminal-ansi-blink 1s steps(2, start) infinite
+}
+
+.terminal .cmd *,
+.terminal .terminal-output,
+.terminal .terminal-output * {
+    --background: transparent
+}
+
+.terminal .cmd ::selection,
+.terminal .cmd::selection,
+.terminal .terminal-output ::selection,
+.terminal .terminal-output::selection {
+    --background: var(--base-background)
+}
+
+@keyframes terminal-ansi-blink {
+    to {
+        color: var(--background)
+    }
+}
+
+@-webkit-keyframes terminal-ansi-blink {
+    to {
+        color: var(--background)
+    }
+}
+
+@media (prefers-reduced-motion) {
+    :root {
+        --animation: terminal-none
+    }
+}
+
+/*# sourceMappingURL=jquery.terminal.min.css.map */
\ No newline at end of file
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index ad6cab0..41b3dce 100755
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -12,5 +12,6 @@ import Footer from "../components/Footer.astro";
     <slot />
     <Footer />
     <script type="text/javascript" src="/scripts/sga.js"></script>
+    <script type="text/javascript" src="/scripts/test.js"></script>
   </body>
 </html>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index d101fc7..933eefd 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -4,14 +4,17 @@ import Layout from "../layouts/Layout.astro";
 
 <Layout>
   <main>
-	<!-- Title Area -->
+    <!-- Title Area -->
     <section class="content">
-      <h1 class="title"> nelle.observer</h1>
-	  <h2 class="subtitle"></h2>
-	</section>
-	<section class="content">
-		<p>hello, what brings you here?</p>
-		<p>my name is nelle (not Nelle, nelle), some call me <span style="color: var(--accent);">[data expunged]</span></p>
-	</section>
+      <h1 class="title">nelle.observer</h1>
+      <h2 class="subtitle"></h2>
+    </section>
+    <section class="content">
+      <p>hello, what brings you here?</p>
+      <p>
+        my name is nelle (not Nelle, nelle), some call me <span
+          style="color: var(--accent);">[data expunged]</span>
+      </p>
+    </section>
   </main>
 </Layout>
diff --git a/src/pages/terminal.html b/src/pages/terminal.html
new file mode 100644
index 0000000..ad77769
--- /dev/null
+++ b/src/pages/terminal.html
@@ -0,0 +1,26 @@
+<html>
+
+<head>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery.terminal/css/jquery.terminal.min.css" />
+  <link rel="stylesheet" href="/styles/main.css" />
+</head>
+
+<body>
+  <script src="https://cdn.jsdelivr.net/npm/jquery"></script>
+  <script src="https://cdn.jsdelivr.net/npm/jquery.terminal/js/jquery.terminal.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/figlet/lib/figlet.js"></script>
+  <script>
+    $(function() {
+        $('body').terminal({
+            help: function() {
+                this.echo('Hello, ' +
+                          '. Wellcome to this terminal.');
+            }
+        }, {
+            greetings: '[[;#d7bfa2;]Welcome to nelle.observer OS.]\n[[;#d7bfa2;]Type] [[;#ffa941;]Help] [[;#d7bfa2;]for commands.]'
+        });
+    });
+    </script>
+</body>
+
+</html>
\ No newline at end of file