Improved design

src/static/index.ejs

@@ -14,14 +14,18 @@
                 <option value="<%= index %>"><%= element %></option>
             <% }); %>
         </select>
-        <button id="export-button" onclick="exportReport()">Export</button>
+        <button id="export-button" onclick="exportReport()">Exportieren</button>
+    </div>
+    <div class="ueberschrift">
+        <h4>Kalendereinträge</h4>
+        <button id="calendar-copy-button" onclick="copyToClipboard(calendarcalendarCopyButton, calendarTextarea)">Kopieren</button>
     </div>
-    <h4>Kalendereinträge</h4>
-    <button id="calendar-copy-button" onclick="copyToClipboard(calendarcalendarCopyButton, calendarTextarea)">Copy</button>
     <textarea id="calendar-textarea"></textarea>
     
-    <h4>Untis Einträge</h4>
-    <button id="untis-copy-button" onclick="copyToClipboard(untisCopyButton, untisTextarea)">Copy</button>
+    <div class="ueberschrift">
+        <h4>Untis Einträge</h4>
+        <button id="untis-copy-button" onclick="copyToClipboard(untisCopyButton, untisTextarea)">Kopieren</button>
+    </div>
     <textarea id="untis-textarea"></textarea>
     
     <script src="index.js"></script>

src/static/index.js

@@ -11,27 +11,27 @@ let loadingInterval;
 
 function copyToClipboard(button, textarea) {
     navigator.clipboard.writeText(textarea.value).then(() => {
-        button.innerText = 'Copied!';
+        button.innerText = 'Kopiert!';
             setTimeout(() => {
-                button.innerText = 'Copy';
+                button.innerText = 'Kopieren';
             }, 2000);
         }).catch(() => {
             button.innerText = 'Error!';
             setTimeout(() => {
-                button.innerText = 'Copy';
+                button.innerText = 'Kopieren';
             }, 2000);
         });
 }
 
 function loading() {
     exportButton.disabled = true;
-    calendarTextarea.value = 'Loading';
+    calendarTextarea.value = 'Wird geladen';
     untisTextarea.value = '';
     loadingInterval = setInterval(() => {
-        if (calendarTextarea.value != 'Loading...') {
+        if (calendarTextarea.value != 'Wird geladen...') {
             calendarTextarea.value += '.';
         } else {
-            calendarTextarea.value = 'Loading';
+            calendarTextarea.value = 'Wird geladen';
         }
     }, 500);
 }
@@ -52,8 +52,8 @@ function exportReport() {
             if (response.ok) {
                 return response.text();
             } else {
-                calendarTextarea.value = 'Error while fetching report';
-                throw new Error('Error while fetching report');
+                calendarTextarea.value = 'Error während des Abrufs';
+                throw new Error('Error während des Abrufs');
             }
         }).then(text => {
             loaded();
@@ -70,7 +70,7 @@ function exportReport() {
             untisTextarea.style.height = untisTextarea.scrollHeight + "px";
         }).catch(error => {
             loaded();
-            calendarTextarea.value = 'Error while fetching report';
+            calendarTextarea.value = 'Error während des Abrufs';
             console.error(error);
         });
 }

src/static/style.css

@@ -14,8 +14,6 @@ h1 {
 
 h4 {
     margin: 0;
-    margin-top: 20px;
-    margin-bottom: 5px;
 }
 
 .selector {
@@ -59,4 +57,11 @@ textarea {
     color: #fff;
     border-radius: 15px;
     border: none;
+}
+
+.ueberschrift {
+    display: inline-flex;
+    align-items: center;
+    margin-top: 20px;
+    margin-bottom: 10px;
 }