diff --git a/frontend/Dockerfile b/frontend/Dockerfile
new file mode 100644
index 0000000..dfc5cd4
--- /dev/null
+++ b/frontend/Dockerfile
@@ -0,0 +1,5 @@
+FROM nginx:latest
+
+COPY ./index.html /usr/share/nginx/html/index.html
+COPY ./index.css /usr/share/nginx/html/index.css
+COPY ./index.js /usr/share/nginx/html/index.js
\ No newline at end of file
diff --git a/frontend/index.css b/frontend/index.css
new file mode 100644
index 0000000..d29bd40
--- /dev/null
+++ b/frontend/index.css
@@ -0,0 +1,131 @@
+html,
+body {
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgb(11, 13, 19);
+ color: #fff;
+}
+
+body {
+ margin: 1em;
+ width: calc(100% - 2em);
+ height: calc(100% - 2em);
+}
+.container {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+}
+
+.content {
+ width: calc(50% - 70px);
+ padding: 1em;
+}
+
+textarea {
+ width: 100%;
+ height: 40%;
+ resize: none;
+}
+
+#translateicon {
+ width: fit-content;
+ color: white;
+ cursor: pointer;
+}
+
+
+/* CSS für den HTML-Select */
+select {
+ /* Setze die Größe und Positionierung des Select-Elements */
+ position: relative;
+ width: 100%;
+ height: 40px;
+ border: none;
+ border-radius: 5px;
+ padding: 10px 20px;
+ font-size: 16px;
+ font-weight: 500;
+ background-color: #333;
+ color: #ffffff;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 16 16'%3E%3Cpath fill='%23cccccc' d='M5.5 7l2.5 2.5L10.5 7z'/%3E%3C/svg%3E");
+ background-position: right 10px center;
+ background-repeat: no-repeat;
+ cursor: pointer;
+ transition: all 0.2s ease-in-out;
+}
+
+select:hover {
+ background-color: #444;
+}
+
+/* Setze den aktiven Stil */
+select:focus {
+ outline: none;
+ background-color: #333;
+}
+
+/* Ändere die Farbe der ausgewählten Option */
+select option:checked {
+ background-color: #007bff;
+ color: #fff;
+}
+
+/* Ändere den Stil des Dropdown-Menüs */
+select::-ms-expand {
+ display: none;
+}
+
+select option {
+ font-size: 16px;
+ font-weight: 400;
+ background-color: #333;
+ color: #f5f5f5;
+}
+
+/* CSS für den HTML-Textarea */
+textarea {
+ /* Setze die Größe und Positionierung des Textarea-Elements */
+ border: none;
+ border-radius: 5px;
+ margin-top: 0.2em;
+ font-size: 16px;
+ font-weight: 400;
+ line-height: 1.5;
+ background-color: #333;
+ color: #f5f5f5;
+ /* Setze den Hover-Stil */
+ transition: all 0.2s ease-in-out;
+ width: calc(100% - 5px);
+}
+
+/* Setze den aktiven Stil */
+textarea:focus {
+ outline: none;
+}
+
+textarea:hover {
+ background-color: #444;
+}
+
+/* Ändere den Stil der Scrollbar */
+textarea::-webkit-scrollbar {
+ width: 8px;
+ height: 8px;
+}
+
+textarea::-webkit-scrollbar-track {
+ background-color: #f5f5f5;
+}
+
+textarea::-webkit-scrollbar-thumb {
+ background-color: #ccc;
+ border-radius: 10px;
+}
\ No newline at end of file
diff --git a/frontend/index.html b/frontend/index.html
new file mode 100644
index 0000000..49cd8c5
--- /dev/null
+++ b/frontend/index.html
@@ -0,0 +1,34 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/frontend/index.js b/frontend/index.js
new file mode 100644
index 0000000..755801c
--- /dev/null
+++ b/frontend/index.js
@@ -0,0 +1,493 @@
+const languages = [
+ {
+ "language": "Afrikaans",
+ "code": "af"
+ },
+ {
+ "language": "Albanian",
+ "code": "sq"
+ },
+ {
+ "language": "Amharic",
+ "code": "am"
+ },
+ {
+ "language": "Arabic",
+ "code": "ar"
+ },
+ {
+ "language": "Armenian",
+ "code": "hy"
+ },
+ {
+ "language": "Assamese",
+ "code": "as"
+ },
+ {
+ "language": "Azerbaijani (Latin)",
+ "code": "az"
+ },
+ {
+ "language": "Bangla",
+ "code": "bn"
+ },
+ {
+ "language": "Bashkir",
+ "code": "ba"
+ },
+ {
+ "language": "Basque",
+ "code": "eu"
+ },
+ {
+ "language": "Bosnian (Latin)",
+ "code": "bs"
+ },
+ {
+ "language": "Bulgarian",
+ "code": "bg"
+ },
+ {
+ "language": "Cantonese (Traditional)",
+ "code": "yue"
+ },
+ {
+ "language": "Catalan",
+ "code": "ca"
+ },
+ {
+ "language": "Chinese (Literary)",
+ "code": "lzh"
+ },
+ {
+ "language": "Chinese Simplified",
+ "code": "zh-Hans"
+ },
+ {
+ "language": "Chinese Traditional",
+ "code": "zh-Hant"
+ },
+ {
+ "language": "Croatian",
+ "code": "hr"
+ },
+ {
+ "language": "Czech",
+ "code": "cs"
+ },
+ {
+ "language": "Danish",
+ "code": "da"
+ },
+ {
+ "language": "Dari",
+ "code": "prs"
+ },
+ {
+ "language": "Divehi",
+ "code": "dv"
+ },
+ {
+ "language": "Dutch",
+ "code": "nl"
+ },
+ {
+ "language": "English",
+ "code": "en"
+ },
+ {
+ "language": "Estonian",
+ "code": "et"
+ },
+ {
+ "language": "Faroese",
+ "code": "fo"
+ },
+ {
+ "language": "Fijian",
+ "code": "fj"
+ },
+ {
+ "language": "Filipino",
+ "code": "fil"
+ },
+ {
+ "language": "Finnish",
+ "code": "fi"
+ },
+ {
+ "language": "French",
+ "code": "fr"
+ },
+ {
+ "language": "French (Canada)",
+ "code": "fr-ca"
+ },
+ {
+ "language": "Galician",
+ "code": "gl"
+ },
+ {
+ "language": "Georgian",
+ "code": "ka"
+ },
+ {
+ "language": "German",
+ "code": "de"
+ },
+ {
+ "language": "Greek",
+ "code": "el"
+ },
+ {
+ "language": "Gujarati",
+ "code": "gu"
+ },
+ {
+ "language": "Haitian Creole",
+ "code": "ht"
+ },
+ {
+ "language": "Hebrew",
+ "code": "he"
+ },
+ {
+ "language": "Hindi",
+ "code": "hi"
+ },
+ {
+ "language": "Hmong Daw (Latin)",
+ "code": "mww"
+ },
+ {
+ "language": "Hungarian",
+ "code": "hu"
+ },
+ {
+ "language": "Icelandic",
+ "code": "is"
+ },
+ {
+ "language": "Indonesian",
+ "code": "id"
+ },
+ {
+ "language": "Inuinnaqtun",
+ "code": "ikt"
+ },
+ {
+ "language": "Inuktitut",
+ "code": "iu"
+ },
+ {
+ "language": "Inuktitut (Latin)",
+ "code": "iu-Latn"
+ },
+ {
+ "language": "Irish",
+ "code": "ga"
+ },
+ {
+ "language": "Italian",
+ "code": "it"
+ },
+ {
+ "language": "Japanese",
+ "code": "ja"
+ },
+ {
+ "language": "Kannada",
+ "code": "kn"
+ },
+ {
+ "language": "Kazakh",
+ "code": "kk"
+ },
+ {
+ "language": "Khmer",
+ "code": "km"
+ },
+ {
+ "language": "Klingon",
+ "code": "tlh-Latn"
+ },
+ {
+ "language": "Klingon (plqaD)",
+ "code": "tlh-Piqd"
+ },
+ {
+ "language": "Korean",
+ "code": "ko"
+ },
+ {
+ "language": "Kurdish (Central)",
+ "code": "ku"
+ },
+ {
+ "language": "Kurdish (Northern)",
+ "code": "kmr"
+ },
+ {
+ "language": "Kyrgyz (Cyrillic)",
+ "code": "ky"
+ },
+ {
+ "language": "Lao",
+ "code": "lo"
+ },
+ {
+ "language": "Latvian",
+ "code": "lv"
+ },
+ {
+ "language": "Lithuanian",
+ "code": "lt"
+ },
+ {
+ "language": "Macedonian",
+ "code": "mk"
+ },
+ {
+ "language": "Malagasy",
+ "code": "mg"
+ },
+ {
+ "language": "Malay (Latin)",
+ "code": "ms"
+ },
+ {
+ "language": "Malayalam",
+ "code": "ml"
+ },
+ {
+ "language": "Maltese",
+ "code": "mt"
+ },
+ {
+ "language": "Maori",
+ "code": "mi"
+ },
+ {
+ "language": "Marathi",
+ "code": "mr"
+ },
+ {
+ "language": "Mongolian (Cyrillic)",
+ "code": "mn-Cyrl"
+ },
+ {
+ "language": "Mongolian (Traditional)",
+ "code": "mn-Mong"
+ },
+ {
+ "language": "Myanmar",
+ "code": "my"
+ },
+ {
+ "language": "Nepali",
+ "code": "ne"
+ },
+ {
+ "language": "Norwegian",
+ "code": "nb"
+ },
+ {
+ "language": "Odia",
+ "code": "or"
+ },
+ {
+ "language": "Pashto",
+ "code": "ps"
+ },
+ {
+ "language": "Persian",
+ "code": "fa"
+ },
+ {
+ "language": "Polish",
+ "code": "pl"
+ },
+ {
+ "language": "Portuguese (Brazil)",
+ "code": "pt"
+ },
+ {
+ "language": "Portuguese (Portugal)",
+ "code": "pt-pt"
+ },
+ {
+ "language": "Punjabi",
+ "code": "pa"
+ },
+ {
+ "language": "Queretaro Otomi",
+ "code": "otq"
+ },
+ {
+ "language": "Romanian",
+ "code": "ro"
+ },
+ {
+ "language": "Russian",
+ "code": "ru"
+ },
+ {
+ "language": "Samoan (Latin)",
+ "code": "sm"
+ },
+ {
+ "language": "Serbian (Cyrillic)",
+ "code": "sr-Cyrl"
+ },
+ {
+ "language": "Serbian (Latin)",
+ "code": "sr-Latn"
+ },
+ {
+ "language": "Slovak",
+ "code": "sk"
+ },
+ {
+ "language": "Slovenian",
+ "code": "sl"
+ },
+ {
+ "language": "Somali (Arabic)",
+ "code": "so"
+ },
+ {
+ "language": "Spanish",
+ "code": "es"
+ },
+ {
+ "language": "Swahili (Latin)",
+ "code": "sw"
+ },
+ {
+ "language": "Swedish",
+ "code": "sv"
+ },
+ {
+ "language": "Tahitian",
+ "code": "ty"
+ },
+ {
+ "language": "Tamil",
+ "code": "ta"
+ },
+ {
+ "language": "Tatar (Latin)",
+ "code": "tt"
+ },
+ {
+ "language": "Telugu",
+ "code": "te"
+ },
+ {
+ "language": "Thai",
+ "code": "th"
+ },
+ {
+ "language": "Tibetan",
+ "code": "bo"
+ },
+ {
+ "language": "Tigrinya",
+ "code": "ti"
+ },
+ {
+ "language": "Tongan",
+ "code": "to"
+ },
+ {
+ "language": "Turkish",
+ "code": "tr"
+ },
+ {
+ "language": "Turkmen (Latin)",
+ "code": "tk"
+ },
+ {
+ "language": "Ukrainian",
+ "code": "uk"
+ },
+ {
+ "language": "Upper Sorbian",
+ "code": "hsb"
+ },
+ {
+ "language": "Urdu",
+ "code": "ur"
+ },
+ {
+ "language": "Uyghur (Arabic)",
+ "code": "ug"
+ },
+ {
+ "language": "Uzbek (Latin",
+ "code": "uz"
+ },
+ {
+ "language": "Vietnamese",
+ "code": "vi"
+ },
+ {
+ "language": "Welsh",
+ "code": "cy"
+ },
+ {
+ "language": "Yucatec Maya",
+ "code": "yua"
+ },
+ {
+ "language": "Zulu",
+ "code": "zu"
+ }
+];
+
+
+function fillDropDowns() {
+ var dropdown1 = document.getElementById("requested_text_language");
+ var dropdown2 = document.getElementById("received_text_language");
+
+ for (var i = 0; i < languages.length; i++) {
+ var option = document.createElement("option");
+ option.text = languages[i].language;
+ option.value = languages[i].code;
+ dropdown1.add(option);
+
+ var option = document.createElement("option");
+ option.text = languages[i].language;
+ option.value = languages[i].code;
+ dropdown2.add(option);
+
+ if(languages[i].code == "de") {
+ dropdown1.value = "de"
+ }
+
+ if(languages[i].code == "en") {
+ dropdown2.value = "en"
+ }
+ }
+}
+
+function translate() {
+ var requestedText = document.getElementById("requested_text").value
+
+ var data = {
+ "requested_text": requestedText,
+ "language_from": document.getElementById("requested_text_language").value,
+ "language_to": document.getElementById("received_text_language").value
+ }
+
+
+ var xhttp = new XMLHttpRequest();
+ xhttp.onreadystatechange = function() {
+ if (this.readyState == 4 && this.status == 200) {
+ document.getElementById("received_text").value = JSON.parse(xhttp.responseText).response_text
+ }
+ };
+ xhttp.open("POST", "http://127.0.0.1:5000/translate", true);
+ xhttp.setRequestHeader("Content-Type", "application/json");
+ xhttp.send(JSON.stringify(data));
+}
\ No newline at end of file