Documentation

docs/configuration/bare.md

@@ -0,0 +1,18 @@
+# Bare version and path 
+
+
+You might have noticed this setting in your configuration file: 
+```js
+  bare: {
+    version: 2, 
+    path: '/bare/',
+  },
+```
+This is refering to the Bare endpoint that Dynamic uses. The version is what Dynamic concatonates to the path. It will finally look something like `/path/version/`. There are differences in the versions. Details on the specification can be found here: 
+
+* v1: https://github.com/tomphttp/specifications/blob/master/BareServerV1.md
+* v2: https://github.com/tomphttp/specifications/blob/master/BareServerV2.md
+* v3: https://github.com/tomphttp/specifications/blob/master/BareServerV3.md
+
+## Unsupported versions. 
+Dynamic does not have stable support v3 as of now. 

docs/configuration/encoding.md

@@ -0,0 +1,44 @@
+# URL Encoding and Decoding 
+
+In the context of Dynamic, and other popular Interception proxies, URL Encoding and Decoding is the way Dynamic changes the URLs, specifically to hide them. 
+
+## Encoding types 
+There's a few types of encodings that Dynamic currently supports. 
+
+### XOR 
+The XOR encryption algorithm is an example of symmetric encryption where the same key is used to both encrypt and decrypt a message. Symmetric Encryption: The same cryptographic key is used both to encrypt and decrypt messages
+
+Okay, yes, XOR is a cypher not an encoding. But for the purpose of simplicity, we're going to refer to it as an encoding. 
+
+Example: 
+* `https://google.com`
+    * `hvtrs8%2F-wuw%2Cgmoelg.aoo%2F`
+* `https://www.youtube.com`
+    * `hvtrs8%2F-wuw%2Cymuvu%60e%2Ccmm-`
+
+Want to use XOR? Change your `encoding` value to `xor`
+
+### Plain
+In computing, plain encoding is a loose term for data (e.g. file contents) that represent *only characters* of readable material but not its graphical representation nor other objects (floating-point numbers, images, etc.). It may also include a limited number of "whitespace" characters that affect simple arrangement of text. 
+Note that this provides very little URL cloaking. 
+
+Example: 
+* `https://google.com`
+    * `https%3A%2F%2Fgoogle.com`
+* `https://www.youtube.com`
+    * `https%3A%2F%2Fwww.youtube.com`
+
+If this fits your need Change your `encoding` value to `plain`
+
+### Plain
+Base64 is a encoding algorithm that allows you to transform any characters into an alphabet which consists of Latin letters, digits, plus, and slash. Thanks to it, Dynamic can hide URLs by turning the letters of the URL into numbers.
+
+Example: 
+* `https://google.com`
+    * `aHR0cHM6Ly9nb29nbGUuY29t`
+* `https://www.youtube.com`
+    * `aHR0cHM6Ly93d3cueW91dHViZS5jb20=`
+
+If this fits your need Change your `encoding` value to `base64`
+
+

docs/configuration/logging.md

@@ -0,0 +1,15 @@
+# Developer console logging 
+// 0: none, 1: errors, 2: errors + warnings, 3: errors + warnings + info
+Dynamic gives you the option to choose what kind of logs are allowed to appear in the Developer console found in the inspect element menu. 
+
+## No logging 
+For absolutely no logging, change the value in your configuration to `0`
+
+## Errors only 
+If you only want errors in console, but want to ignore warnings, this is the level for you! Turn the value in your configuration to `1`
+
+## Indecisive
+Lookin for both Errors and Warnings? Change the value in your configuration to `2`
+
+## The everything burger 
+Exactly what it sounds like, errors + warnings + info. Set the value in your configuration to `2`

docs/configuration/modes.md

@@ -0,0 +1,18 @@
+# Performance modes 
+Dynamic provides two performance options to fit your needs. 
+
+## Development
+
+When you set your performance mode to `development`, Dynamic will not cache itself or minify at all. 
+
+This mode is recommended when: 
+* Creating middleware with the Dynamic API 
+* Testing features that require debugging 
+
+## Development
+
+When you set your performance mode to `production`, Dynamic will cache its bundle and configuration file. This is Dynamics peak performance mode. 
+
+This mode is recommended when: 
+* Production or public use is intended
+* When speed is priority over middleware updates. 

static/index.html

@@ -19,6 +19,7 @@
 		  <h3>Information</h3>
 
 		<p id="settings-version"> Dynamic v#.#.# </p>
+
 		<div class="settings-connected"> 
 			<div class="connectedindicator"> 
 		</div>

static/resources/style.css

@@ -22,20 +22,26 @@ html {
       }
       h1 {
         font-size: 72px;
-          font-weight: 700;
-          margin: 0 0 -43px 0;
-          font-style: italic;
-          pointer-events: none;
+        font-weight: 700;
+        margin: 0 0 -43px 0;
+        font-style: italic;
+        pointer-events: none;
+        color: white;
+        /* backdrop-filter: invert(1); */
       }
       form {
-          display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  margin: 64px auto;
-  max-width: 480px;
-  width: 100%;
-  justify-content: center;
-  align-content: center;
+        display: flex;
+        flex-direction: row;
+        align-items: flex-start;
+        margin: 72px auto;
+        max-width: 477px;
+        width: 100%;
+        justify-content: center;
+        align-content: center;
+        background: #000000ad;
+        backdrop-filter: invert(1);
+        height: 52px;
+        border-radius: 9px;
       }
       input[name="url"] {
         background-color: #0f0f0fbf;