From bb589e6aadac4ee6c886d3e56de1df6a05af238a Mon Sep 17 00:00:00 2001
From: Verena Schulz <verena.schulz@th-bingen.de>
Date: Sat, 13 Dec 2025 21:21:17 +0100
Subject: [PATCH] New Checkboxes

---
 electron/main/index.html |  2 +-
 electron/main/style.css  | 78 ++++++++++++++++++++++++++++++++--------
 2 files changed, 64 insertions(+), 16 deletions(-)

diff --git a/electron/main/index.html b/electron/main/index.html
index 1910f6c..e8bc2b0 100644
--- a/electron/main/index.html
+++ b/electron/main/index.html
@@ -81,7 +81,7 @@
 
     <div class="step" id="step3" style="display:none;"> 
       <div class="checkbox-group">
-        <label id="checkbox_group" for="checkbox-group">Choose prefered document style:</label>
+        <label id="checkbox-label" for="checkbox-group">Choose prefered document style:</label>
         <div class="checkbox-container">
           <input type="checkbox" name ="docFormat" id="docFormat" value="Meeting report">
           <label id="label_format" for="docFormat">Follow-up Report</label>
diff --git a/electron/main/style.css b/electron/main/style.css
index 913378b..1b22f66 100644
--- a/electron/main/style.css
+++ b/electron/main/style.css
@@ -21,7 +21,7 @@ body {
 }
 
 #h1-wrapper {
-position: relative;
+  position: relative;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   width: 770px;
   height: 60px; 
@@ -113,22 +113,67 @@ input[type="file"] {
   display: none;
 }
  
-.checkbox-container{
-margin-top: 8px;
-display: flex;
-align-items: center;
-gap: 5px;
-}
- 
 .checkbox-group {
-  margin-top: 15px;
-  margin-bottom: 15px;
+    --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-container{
+  margin-top: 8px;
   display: flex;
-  flex-direction: column;
-  gap: 10px;
-  align-items: flex-start;
+  justify-items: left;
+  align-items: center;
+  gap: 5px;
 }
- 
+
+
 .submit-btn {
   display: flex;
   justify-content: center;
@@ -157,7 +202,6 @@ gap: 5px;
   flex-direction: column;
   align-items: center;
   padding: 40px;
-  margin-top: 20px;
   gap: 10px;
   border: 0px;
   border-color: black;
@@ -412,4 +456,8 @@ li {
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   -webkit-transition: all 0.3s ease;
   transition: all 0.3s ease;
+}
+
+#step2, #step3, #step5 {
+  font-size: larger;
 }
\ No newline at end of file