Added UI documentation to documentation.md

documentation.md

@@ -4,7 +4,8 @@
 1. [How to run the Software](#how-to-run-the-software)
 2. [How it works](#how-it-works)
 3. [Modules](#modules)
-3. [IPC](#ipc)
+4. [IPC](#ipc)
+5. [UI](#ui)
 
 ## How to run the Software
 If you read the readme file, you will see the basic setup command in order to run the program.  
@@ -113,4 +114,78 @@ As you can see in this JSON object, each part specifies which module is being us
 The module names are each the name field specified in the module itself.  
 As for the rest of the fields, they are pretty self explanatory except `document.type`, that is a predefined report type.  
 This is the minimum required setup for the currently implemented pipeline to work.  
-You can always add fields to it, but dont remove the ones from above.  
+You can always add fields to it, but dont remove the ones from above.
+
+## UI
+The UI has a simple, self-explanatory design, in white and blue.
+For easy handling and understanding, the UI is using 6 steps to guide the user through the process and offers a help page
+with more defined explanations regarding the steps of the GUI. All parts used in the GUI are stored in the directory `./electron/main`.
+
+Files used for the UI:
+- index.html
+- help_page.html
+- style.css
+- script.js
+- renderer.js
+- preload.js
+- languages.js
+- package-lock.json
+- package.json
+
+Folders used for the UI:
+- /flags
+- /icons
+- /node_modules
+
+**index.html:**
+This file is the basic framework of our software. Comments in the code define the different UI sections.
+The comments are the headlines of the code below them.
+
+**help_page.html:**
+This is the html to the help page that is accessible though the burger menu in the software.
+Currently only available in german. It describes the different parts of the program in more depth.
+
+**style.css:**
+Contains all the css code of the software used in the UI.
+
+**script.js:**
+Stores all functions used in the UI.
+The code is separated by comments in their matching UI section.
+
+**renderer.js:**
+Mainly contains every listener function used in the UI, which listens to any events occuring in the UI,
+to handle these events as intended.
+The code is separated by comments in their matching UI section.
+
+**preload.js:**
+Contains IPC functions to allow communication between the UI and the main process.
+
+**languages.js:**
+Holds one JSON, which is used to store the different language variables. These are used
+in the script.js for the change of the displayed language of the UI. Add languages here, if 
+you want to add more options in the language selection.
+
+How to add more languages:
+1. Add another language block, like an existing one in the file. (Note: Use every key, which is also used in the other sections, 
+beside the first key like "eng". This first key should be always unique from the others)
+2. Assign the desired values to the keys in the new language section.
+
+How to add more text which changes languages:
+1. Create the element in the html file with an unique id.
+2. Add this id to every language section and assign them a matching value.
+3. Add inside the `script.js` file, inside the `changeLanguage()` function a document call like the others. Except with our id. 
+
+**package-log.json:**
+It's an electron module file. No changes needed.
+
+**package.json:**
+This is an electron base file. No changes needed.
+
+**/flags:**
+This directory contains the flags used for the language selection dropdown menu.
+
+**/icons:**
+Pictures for the document preview are stored here.
+
+**/node_modules:**
+Contains nodes used by electron.