DHBW/Cloud_Computing_II
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added frontend

Browse Source
This commit is contained in:
Administrator 2023-03-10 09:21:39 +01:00
parent b90fbdf668
commit cf0ffc9126
4 changed files with 663 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/Dockerfile Normal file
View File

@ -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

131
frontend/index.css Normal file
View File

@ -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;
}

34
frontend/index.html Normal file
View File

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="index.js"></script>
</head>
<body onload="fillDropDowns()">
<header>
<h1>Translator</h1>
</header>
<main>
<div class="container">
<div class="content">
<select id="requested_text_language"></select>
<textarea name="requested_text" id="requested_text" rows="15" autofocus
placeholder="Text eingeben oder einfügen"></textarea>
</div>
<div id="translateicon" onclick="translate()">
<i class="fa fa-arrow-right fa-5x"></i>
</div>
<div class="content">
<select id="received_text_language"></select>
<textarea name="received_text" id="received_text" rows="15" disabled="true"></textarea>
</div>
</div>
</main>
<footer></footer>
</body>
</html>

493
frontend/index.js Normal file
View File

@ -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));
}