From 3c3d7a1d3e98e84ff55439091da5af187b4769e5 Mon Sep 17 00:00:00 2001
From: Verena Schulz <verena.schulz@th-bingen.de>
Date: Sat, 10 Jan 2026 18:08:21 +0100
Subject: [PATCH] Joined custom_document html and css elements with index and
 style

---
 electron/main/custom_document.html | 118 ------------
 electron/main/index.html           |  29 +++
 electron/main/style.css            | 281 +++++++++++++++++++----------
 3 files changed, 210 insertions(+), 218 deletions(-)
diff --git a/electron/main/custom_document.html b/electron/main/custom_document.html
index a35de73..4cf348b 100644
--- a/electron/main/custom_document.html
+++ b/electron/main/custom_document.html
@@ -6,128 +6,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Custom Document</title>
     <style>
-        body {
-            font-family: Arial, sans-serif;
-            background: #f0f2f5;
-            margin: 0;
-            padding: 0;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            min-height: 100vh;
-        }
-
-        .container {
-            background: white;
-            padding: 30px;
-            margin-top: 50px;
-            border-radius: 12px;
-            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
-            width: 90%;
-            max-width: 600px;
-        }
-
-        h1 {
-            text-align: center;
-            color: #333;
-        }
-
-        label {
-            font-weight: bold;
-            margin-top: 15px;
-            display: block;
-            color: #555;
-        }
-
-        input[type="text"],
-        textarea,
-        select {
-            width: 100%;
-            padding: 10px;
-            margin-top: 5px;
-            border-radius: 6px;
-            border: 1px solid #ccc;
-            font-size: 14px;
-        }
-
-        textarea {
-            height: 120px;
-            resize: vertical;
-        }
-
-        .buttons {
-            display: flex;
-            justify-content: space-between;
-            margin-top: 25px;
-        }
-
-        .hidden {
-            visibility: hidden;
-        }
-
-        button {
-            padding: 10px 20px;
-            font-size: 14px;
-            border: none;
-            border-radius: 6px;
-            cursor: pointer;
-            transition: 0.2s;
-            background-color: #007BFF;
-            color: white;
-        }
-
-        button:hover {
-            background-color: #0056b3;
-        }
-
-        @media (max-width: 500px) {
-            .buttons {
-                flex-direction: column;
-            }
-
-            .buttons button {
-                width: 100%;
-                margin-top: 10px;
-            }
-        }
-
-        #result {
-            margin-top: 20px;
-            color: #333;
-            word-break: break-word;
-        }
     </style>
 </head>
 
 <body>
-    <div class="container">
-        <h1>Manage document types</h1>
-
-        <label for="existingDocs">Vorhandene Dokumente auswählen (optional):</label>
-        <!--Drop Down-->
-        <select name="existingDocs" id="existingDocs">
-            <option value="newDoc">-- Neues Dokument erstellen --</option>
-        </select>
-
-        <div id="docNameWrapper">
-            <label for="docName">Dokumentname:</label>
-            <input type="text" id="docName" placeholder="Gib hier den Dokumentnamen ein">
-        </div>
-
-        <label for="prompt">Dein Prompt:</label>
-        <textarea id="prompt" placeholder="Schreibe hier den Prompt für dein Dokument..."></textarea>
-
-        <div class="buttons">
-            <a href="index.html">
-                <button id="goBackBtn">Abbrechen</button>
-            </a>
-            <button id="deleteBtn">Dokument löschen</button>
-            <button id="generateBtn">Dokument speichern</button>
-        </div>
-
-        <div id="result"></div>
-    </div>
-
     <script src="languages.js"></script>
     <script>
         const goBackBtn = document.getElementById("goBackBtn");
diff --git a/electron/main/index.html b/electron/main/index.html
index ea7fd98..b5b13b7 100644
--- a/electron/main/index.html
+++ b/electron/main/index.html
@@ -177,6 +177,35 @@
     </div>
   </div>
 
+  <div class="container" style="display:none;">
+        <h1>Manage document types</h1>
+
+        <label for="existingDocs">Vorhandene Dokumente auswählen (optional):</label>
+        <!--Drop Down-->
+        <select name="existingDocs" id="existingDocs">
+            <option value="newDoc">-- Neues Dokument erstellen --</option>
+        </select>
+
+        <div id="docNameWrapper">
+            <label for="docName">Dokumentname:</label>
+            <input type="text" id="docName" placeholder="Gib hier den Dokumentnamen ein">
+        </div>
+
+        <label for="prompt">Dein Prompt:</label>
+        <textarea id="prompt" placeholder="Schreibe hier den Prompt für dein Dokument..."></textarea>
+
+        <div class="buttons">
+            <a href="index.html">
+                <button id="goBackBtn">Abbrechen</button>
+            </a>
+            <button id="deleteBtn">Dokument löschen</button>
+            <button id="generateBtn">Dokument speichern</button>
+        </div>
+
+        <div id="result"></div>
+    </div>
+
+
   <button id ="nextBtn" class="navBtn">&rarr;</button>
 
 </div>
diff --git a/electron/main/style.css b/electron/main/style.css
index 4f30c2d..d29fe79 100644
--- a/electron/main/style.css
+++ b/electron/main/style.css
@@ -9,7 +9,7 @@ body {
   gap: 10px;
   margin: 0;
 }
- 
+
 #h1 {
   position: absolute;
   left: 50%;
@@ -23,41 +23,41 @@ body {
   position: relative;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   width: 770px;
-  height: 60px; 
+  height: 60px;
   background-color: #FFF;
-  box-shadow: 0px 4px 10px rgba(0,0,0,0.1);
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
   border-radius: 5px;
   margin-bottom: 10px;
   display: flex;
   align-items: center;
-} 
+}
 
 .upload-container {
   background: white;
   padding: 40px;
   border-radius: 12px;
-  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
   text-align: center;
   width: 350px;
   height: 200px;
   transition: border 0.3s, background-color 0.3s;
   border: 2px dashed #7378c9;
 }
- 
- 
+
+
 .upload-container.dragover {
   border-color: #007BFF;
   background-color: #eaf0ff;
 }
- 
- 
+
+
 .upload-container p {
   margin: 0 0 15px 0;
   font-size: 16px;
   color: #555;
 }
- 
- 
+
+
 .file-name {
   margin-top: 10px;
   font-size: 14px;
@@ -66,19 +66,19 @@ body {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
- 
+
 #thumbnailContainer {
   width: 100%;
   display: flex;
   justify-content: center;
   margin-bottom: 15px;
 }
- 
+
 #thumbnailImage {
   width: 200px;
   height: auto;
   border-radius: 10px;
-  box-shadow: 0px 4px 10px rgba(0,0,0,0.1);
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
   object-fit: cover;
 }
 
@@ -87,7 +87,7 @@ body {
   height: 100px;
   /*border: 1px dashed black;*/
 }
- 
+
 .custom-btn {
   padding: 10px 20px;
   margin-top: 10px;
@@ -98,12 +98,12 @@ body {
   cursor: pointer;
   font-size: 14px;
 }
- 
- 
+
+
 .custom-btn:hover {
   background-color: #0056b3;
 }
- 
+
 .submit-btn:hover {
   background-color: #0056b3;
 }
@@ -115,64 +115,70 @@ body {
 .KI-wrapper {
   margin-top: 10px;
 }
- 
+
 input[type="file"] {
   display: none;
 }
- 
+
 .checkbox-group {
-    --borderColor: #007bfff5;
-    --borderWidth: .125em;
-  }
+  --borderColor: #007bfff5;
+  --borderWidth: .125em;
+}
 
-  .checkbox-group input[type=checkbox] {
-    -webkit-appearance: none;
-    appearance: none;
-    vertical-align: middle;
-    background: #fff;
-    font-size: 1.8em;
-    border-radius: 0.125em;
-    display: inline-block;
-    border: var(--borderWidth) solid var(--borderColor);
-    width: 1em;
-    height: 1em;
-    position: relative;
-  }
-  .checkbox-group input[type=checkbox]:before,
-  .checkbox-group input[type=checkbox]:after {
-    content: "";
-    position: absolute;
-    background: var(--borderColor);
-    width: calc(var(--borderWidth) * 3);
-    height: var(--borderWidth);
-    top: 50%;
-    left: 10%;
-    transform-origin: left center;
-  }
-  .checkbox-group input[type=checkbox]:before {
-    transform: rotate(45deg) translate(calc(var(--borderWidth) / -2), calc(var(--borderWidth) / -2)) scaleX(0);
-    transition: transform 200ms ease-in 200ms;
-  }
-  .checkbox-group input[type=checkbox]:after {
-    width: calc(var(--borderWidth) * 5);
-    transform: rotate(-45deg) translateY(calc(var(--borderWidth) * 2)) scaleX(0);
-    transform-origin: left center;
-    transition: transform 200ms ease-in;
-  }
-  .checkbox-group input[type=checkbox]:checked:before {
-    transform: rotate(45deg) translate(calc(var(--borderWidth) / -2), calc(var(--borderWidth) / -2)) scaleX(1);
-    transition: transform 200ms ease-in;
-  }
-  .checkbox-group input[type=checkbox]:checked:after {
-    width: calc(var(--borderWidth) * 5);
-    transform: rotate(-45deg) translateY(calc(var(--borderWidth) * 2)) scaleX(1);
-    transition: transform 200ms ease-out 200ms;
-  }
-  .checkbox-group input[type=checkbox]:focus {
-    outline: calc(var(--borderWidth) / 2) dotted rgba(0, 0, 0, 0.25);
-  }
+.checkbox-group input[type=checkbox] {
+  -webkit-appearance: none;
+  appearance: none;
+  vertical-align: middle;
+  background: #fff;
+  font-size: 1.8em;
+  border-radius: 0.125em;
+  display: inline-block;
+  border: var(--borderWidth) solid var(--borderColor);
+  width: 1em;
+  height: 1em;
+  position: relative;
+}
 
-.checkbox-container{
+.checkbox-group input[type=checkbox]:before,
+.checkbox-group input[type=checkbox]:after {
+  content: "";
+  position: absolute;
+  background: var(--borderColor);
+  width: calc(var(--borderWidth) * 3);
+  height: var(--borderWidth);
+  top: 50%;
+  left: 10%;
+  transform-origin: left center;
+}
+
+.checkbox-group input[type=checkbox]:before {
+  transform: rotate(45deg) translate(calc(var(--borderWidth) / -2), calc(var(--borderWidth) / -2)) scaleX(0);
+  transition: transform 200ms ease-in 200ms;
+}
+
+.checkbox-group input[type=checkbox]:after {
+  width: calc(var(--borderWidth) * 5);
+  transform: rotate(-45deg) translateY(calc(var(--borderWidth) * 2)) scaleX(0);
+  transform-origin: left center;
+  transition: transform 200ms ease-in;
+}
+
+.checkbox-group input[type=checkbox]:checked:before {
+  transform: rotate(45deg) translate(calc(var(--borderWidth) / -2), calc(var(--borderWidth) / -2)) scaleX(1);
+  transition: transform 200ms ease-in;
+}
+
+.checkbox-group input[type=checkbox]:checked:after {
+  width: calc(var(--borderWidth) * 5);
+  transform: rotate(-45deg) translateY(calc(var(--borderWidth) * 2)) scaleX(1);
+  transition: transform 200ms ease-out 200ms;
+}
+
+.checkbox-group input[type=checkbox]:focus {
+  outline: calc(var(--borderWidth) / 2) dotted rgba(0, 0, 0, 0.25);
+}
+
+.checkbox-container {
   margin-top: 8px;
   display: flex;
   justify-items: left;
@@ -194,13 +200,13 @@ input[type="file"] {
   cursor: pointer;
   font-size: 14px;
 }
- 
+
 .submit-btn:disabled {
   opacity: 0.5;
   cursor: not-allowed;
   pointer-events: none;
 }
- 
+
 .mitte {
   background-color: #FFF;
   display: flex;
@@ -213,10 +219,10 @@ input[type="file"] {
   border-color: black;
   border-style: solid;
   border-radius: 6px;
-  box-shadow: 0px 4px 10px rgba(0,0,0,0.1);
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
 }
- 
-.progressbar{
+
+.progressbar {
   position: relative;
   width: 210px;
   height: 30px;
@@ -226,15 +232,15 @@ input[type="file"] {
   overflow: hidden;
   visibility: hidden;
 }
- 
-.progress_fill{
+
+.progress_fill {
   width: 0%;
   height: 100%;
   background: green;
   transition: all 0.2s;
 }
- 
-.progress_text{
+
+.progress_text {
   position: absolute;
   top: 50%;
   right: 5px;
@@ -252,7 +258,9 @@ input[type="file"] {
   padding: 2px 10px 2px 10px;
 }
 
-#ai_type, #transkript_type, #language_option {
+#ai_type,
+#transkript_type,
+#language_option {
   padding: 3px;
 }
 
@@ -260,7 +268,7 @@ input[type="file"] {
   gap: 60px;
   display: flex;
   justify-content: center;
-  overflow-wrap:inherit;
+  overflow-wrap: inherit;
   padding-bottom: 20px;
   margin-top: 40px;
   margin-bottom: 10px;
@@ -274,7 +282,7 @@ input[type="file"] {
   background: #fff;
   padding: 10px 30px;
   border-radius: 6px;
-  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
 }
 
 .step-item {
@@ -336,7 +344,7 @@ input[type="file"] {
   cursor: not-allowed;
 }
 
-.testy{
+.testy {
   background-color: #FFF;
   display: flex;
   width: auto;
@@ -352,13 +360,13 @@ input[type="file"] {
 }
 
 .box2 {
-    background-color: red;
-    width: 40px;
-    height: 40px;
-    padding: 5px;
-    border: 1px solid black;
-    margin: 5px;
-    border-radius: 100px;
+  background-color: red;
+  width: 40px;
+  height: 40px;
+  padding: 5px;
+  border: 1px solid black;
+  margin: 5px;
+  border-radius: 100px;
 }
 
 li {
@@ -394,24 +402,24 @@ li {
   display: none;
 }
 
-#toggle1:checked + .hamburger1 .top {
+#toggle1:checked+.hamburger1 .top {
   -webkit-transform: rotate(-45deg);
-          transform: rotate(-45deg);
+  transform: rotate(-45deg);
   margin-top: 22.5px;
 }
 
-#toggle1:checked + .hamburger1 .meat {
+#toggle1:checked+.hamburger1 .meat {
   -webkit-transform: rotate(45deg);
-          transform: rotate(45deg);
+  transform: rotate(45deg);
   margin-top: -5px;
 }
 
-#toggle1:checked + .hamburger1 .bottom {
+#toggle1:checked+.hamburger1 .bottom {
   -webkit-transform: scale(0);
-          transform: scale(0);
+  transform: scale(0);
 }
 
-#toggle1:checked ~ .menu1 {
+#toggle1:checked~.menu1 {
   height: 150px;
   width: 300px;
 }
@@ -465,7 +473,9 @@ li {
   transition: all 0.3s ease;
 }
 
-#step2, #step3, #step5 {
+#step2,
+#step3,
+#step5 {
   font-size: larger;
 }
 
@@ -498,7 +508,8 @@ li {
   font-size: 14px;
 }
 
-#speakerLocker, #speakerResender{
+#speakerLocker,
+#speakerResender {
   padding: 10px 20px;
   margin: 20px auto;
   background-color: #007BFF;
@@ -513,7 +524,77 @@ li {
   font-size: 25px;
 }
 
-.speakerView, .speakerAudio, .speakerWrite{
+.speakerView,
+.speakerAudio,
+.speakerWrite {
   margin-top: auto;
   margin-bottom: auto;
+}
+
+.container {
+  background: white;
+  padding: 30px;
+  margin-top: 50px;
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  width: 90%;
+  max-width: 650px;
+}
+
+input[type="text"],
+textarea,
+select {
+  width: 80%;
+  padding: 10px;
+  margin-top: 5px;
+  border-radius: 6px;
+  border: 1px solid #ccc;
+  font-size: 14px;
+}
+
+textarea {
+  height: 120px;
+  resize: vertical;
+}
+
+.buttons {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 25px;
+}
+
+.hidden {
+  visibility: hidden;
+}
+
+button {
+  padding: 10px 20px;
+  font-size: 14px;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: 0.2s;
+  background-color: #007BFF;
+  color: white;
+}
+
+button:hover {
+  background-color: #0056b3;
+}
+
+@media (max-width: 500px) {
+  .buttons {
+    flex-direction: column;
+  }
+
+  .buttons button {
+    width: 100%;
+    margin-top: 10px;
+  }
+}
+
+#result {
+  margin-top: 20px;
+  color: #333;
+  word-break: break-word;
 }
\ No newline at end of file
