Merge pull request #26 from baloise/main

Update UI
baloise · Nov 1, 2024 · 144d485 · 144d485
2 parents 06bd4ae + b8714cd
commit 144d485
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 20 deletions.
diff --git a/src/static/styles/style.css b/src/static/styles/style.css
@@ -31,11 +31,6 @@ footer {
     text-align: center;
 }
 
-#inputData {
-    width:340px;
-    height: 100px;
-}
-
 #output {
     margin-top: 20px;
     white-space: pre-wrap; /* Preserve whitespace */
@@ -54,9 +49,15 @@ footer {
     justify-content: center; /* Center the buttons horizontally */
     align-items: center; /* Center the buttons vertically */
     flex-direction: row;
-    gap: 1px; /* Optional: Add space between buttons */
+    gap: 0px; /* Optional: Add space between buttons */
 }
 
+.default-textarea {
+    width: 200px;
+    height: 100px;
+    padding: 5px;
+    margin: 0px;
+}
 
 .flex-item {
     flex: 1;
@@ -84,4 +85,13 @@ footer {
 .square-button:hover {
     background-color: black; /* Background color */
     color: white;           /* Text color */
-}
+}
+
+@media (max-width: 768px) {
+    .flex-container-row {
+        flex-direction: column; /* Stack items vertically */
+    }
+    .button-container {
+        flex-direction: column; /* Stack items vertically */
+    }
+}
diff --git a/src/templates/html/demask.html b/src/templates/html/demask.html
@@ -37,7 +37,7 @@ <h3>Input</h3>
             </div>
             <div class="flex-item">
                 <form id="inputForm">
-                    <textarea type="text" id="inputData" placeholder="Enter text to deanonymize or load text from a file" required></textarea>
+                    <textarea class="default-textarea" type="text" id="inputData" placeholder="Enter text to deanonymize or load text from a file" required></textarea>
                     <div class="flex-container">
                         <div class="flex-item">
                             <input type="submit" value="Submit">
@@ -50,21 +50,21 @@ <h3>Input</h3>
                 <h3>Masked Text</h3>
             </div>
             <div class="flex-item">
-                <textarea id="responseFieldText" rows="10" cols="50" readonly></textarea>
+                <textarea class="default-textarea" id="responseFieldText" readonly></textarea>
             </div>
 
             <div class="flex-item">
                 <h3>Entities</h3>
             </div>
             <div class="flex-item">
-                <textarea id="responseFieldEntities" rows="10" cols="50" readonly></textarea>
+                <textarea class="default-textarea" id="responseFieldEntities" readonly></textarea>
             </div>
 
             <div class="flex-item">
                 <h3>DeMasked text</h3>
             </div>
             <div class="flex-item">
-                <textarea id="responseFieldDeanonText" rows="10" cols="50" readonly></textarea>
+                <textarea class="default-textarea" id="responseFieldDeanonText" readonly></textarea>
             </div>
 
             <div class="flex-item">

diff --git a/src/templates/html/landing.html b/src/templates/html/landing.html
@@ -20,7 +20,7 @@ <h1>YoYo MaskЯ</h1>
 
     <main>
         <div class="button-container">
-            <button class="square-button"onclick="window.location.href='/mask'">Mask</button>
+            <button class="square-button" onclick="window.location.href='/mask'">Mask</button>
             <button class="square-button" onclick="window.location.href='/demask'">DeMask</button>
         </div>
         <br/>

diff --git a/src/templates/html/mask.html b/src/templates/html/mask.html
@@ -27,18 +27,18 @@ <h3>Input</h3>
             </div>
             <div class="flex-item">
                 <form id="inputForm">
-                    <textarea type="text" id="inputData" placeholder="Enter text to anonymize or load text from a file" required></textarea>
-                    <div class="flex-container">
-                        <div class="flex-item">
-                            <input type="submit" value="Submit">
-                        </div>
+                    <textarea class="default-textarea" type="text" id="inputData" placeholder="Enter text to anonymize or load text from a file" required></textarea>
+                    <div class="flex-container-row">
                         <div class="flex-item">
                             <select id="backendType" name="backendType" required>
                                 <option value="REG">REG</option>
                                 <option value="LLM">LLM</option>
                                 <option value="NER">NER</option>
                             </select>
                         </div>
+                        <div class="flex-item">
+                            <input type="submit" value="Submit">
+                        </div>
                     </div>  
                 </form>
             </div>
@@ -54,21 +54,21 @@ <h3>Load from text file</h3>
                 <h3>Initial Text</h3>
             </div>
             <div class="flex-item">
-                <textarea id="responseFieldText" rows="10" cols="50" readonly></textarea>
+                <textarea class="default-textarea" type="text" id="responseFieldText" readonly></textarea>
             </div>
 
             <div class="flex-item">
                 <h3>Entities found</h3>
             </div>
             <div class="flex-item">
-                <textarea id="responseFieldEntities" rows="10" cols="50" readonly></textarea>
+                <textarea class="default-textarea" id="responseFieldEntities" readonly></textarea>
             </div>
 
             <div class="flex-item">
                 <h3>Masked text</h3>
             </div>
             <div class="flex-item">
-                <textarea id="responseFieldAnonText" rows="10" cols="50" readonly></textarea>
+                <textarea class="default-textarea" id="responseFieldAnonText" readonly></textarea>
             </div>
 
             <div class="flex-item">