From 26ea274023d27bc97a02cdafa7ce9a37320c5b2b Mon Sep 17 00:00:00 2001
From: Marcel Gansfusz <marcel.gansfusz@gmail.com>
Date: Wed, 22 Oct 2025 21:11:40 +0200
Subject: [PATCH] made the loading animation prettier

---
 index.html       | 256 ++++++++++++++++++++++++++++-------------------
 static/app.js    |  10 +-
 static/style.css |   8 +-
 3 files changed, 166 insertions(+), 108 deletions(-)
diff --git a/index.html b/index.html
index 5f205ba..2051433 100644
--- a/index.html
+++ b/index.html
@@ -1,113 +1,165 @@
 <!doctype html>
 <html lang="de">
+  <head>
+    <title>Unizeug uploader</title>
+    <link rel="stylesheet" href="static/style.css" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.4.456/pdf.min.js"></script>
+    <script src="static/app.js" defer></script>
+    <script src="static/autocomplete.js" defer></script>
+    <script src="static/dynhide.js" defer></script>
+    <script src="static/filedrop.js" defer></script>
+    <link
+      rel="icon"
+      type="image/png"
+      href="/favicon/favicon-96x96.png"
+      sizes="96x96"
+    />
+    <link rel="icon" type="image/svg+xml" href="/favicon/favicon.svg" />
+    <link rel="shortcut icon" href="/favicon/favicon.ico" />
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="/favicon/apple-touch-icon.png"
+    />
+    <meta name="apple-mobile-web-app-title" content="Unizeug" />
+    <link rel="manifest" href="/favicon/site.webmanifest" />
+  </head>
 
-<head>
-  <title>Unizeug uploader</title>
-  <link rel="stylesheet" href="static/style.css" />
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.4.456/pdf.min.js"></script>
-  <script src="static/app.js" defer></script>
-  <script src="static/autocomplete.js" defer></script>
-  <script src="static/dynhide.js" defer></script>
-  <script src="static/filedrop.js" defer></script>
-  <link rel="icon" type="image/png" href="/favicon/favicon-96x96.png" sizes="96x96" />
-  <link rel="icon" type="image/svg+xml" href="/favicon/favicon.svg" />
-  <link rel="shortcut icon" href="/favicon/favicon.ico" />
-  <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />
-  <meta name="apple-mobile-web-app-title" content="Unizeug" />
-  <link rel="manifest" href="/favicon/site.webmanifest" />
-</head>
-
-<body>
-  <!-- The Modal -->
-  <div id="loading" class="modal">
-    <!-- Modal content -->
-    <div class="loading-content">
-      <span class="close">&times;</span>
-      <div class="loader"></div>
-      <p id="upload_status" class="upload_status_text">Uploading</p>
-    </div>
-  </div>
-  <!-- main -->
-  <div class="main">
-    <div class="left" id="controldiv">
-      <div id="fileupload">
-        <form id="uploadform" enctype="multipart/form-data">
-          <div class="filetop">
-            <!-- <label for="filepicker">Choose a file</label> -->
-            <input type="file" name="files" id="filepicker" multiple placeholder="Drop File" />
-          </div>
-          <button type="submit" id="upload" method="POST" class="fileupload">
-            Upload
-          </button>
-        </form>
+  <body>
+    <!-- The Modal -->
+    <div id="loading" class="modal">
+      <!-- Modal content -->
+      <div class="loading-content">
+        <!-- <span class="close">&times;</span> -->
+        <div class="loader"></div>
+        <p id="upload_status" class="upload_status_text">Uploading</p>
       </div>
-      <div id="submitdiv">
-        <form id="submitform" ,onsubmit="submitFile(event)">
-          <label for="lva">Lehrveranstaltung:</label>
-          <div class="autocomplete">
-            <input type="text" id="lva" name="lva" placeholder="Lehrveranstaltung" autocomplete="off" />
-          </div>
-          <br />
-          <!-- <br /> -->
-          <label for="prof">Vortragende*r:</label>
-          <div class="autocomplete">
-            <input type="text" id="prof" name="prof" placeholder="Vortragende*r" autocomplete="off" />
-          </div>
-          <br />
-          <!-- <br /> -->
-          <label for="name">Name:</label>
-          <input type="text" id="name" name="fname" placeholder="Prüfung" /><br />
-          <label for="sem">Semester:</label>
-          <input type="text" id="sem" name="sem" placeholder="2024W" /><br />
-          <input type="radio" id="pruefung" name="stype" value="0" checked="checked" />
-          <label for="pruefung">Prüfung</label><br />
-          <input type="radio" id="klausur" name="stype" value="1" />
-          <label for="klausur">Klausur</label><br />
-          <input type="radio" id="uebung" name="stype" value="2" />
-          <label for="uebung">Übung</label><br />
-          <input type="radio" id="labor" name="stype" value="3" />
-          <label for="labor">Labor</label><br />
-          <input type="radio" id="unterlagen" name="stype" value="4" />
-          <label for="unterlagen">Unterlagen</label><br />
-          <input type="radio" id="zusammenfassungen" name="stype" value="5" />
-          <label for="zusammenfassungen">Zusammenfassung</label><br />
-          <input type="radio" id="multimedia" name="stype" value="6" />
-          <label for="multimedia">Multimedia</label><br />
-          <br />
-          <div id="subcatdiv">
-            <label for="subcat">Veranstaltung</label>
-            <div class="autocomplete">
-              <input type="text" id="subcat" name="subcat" placeholder="Klausur 1" autocomplete="off" />
+    </div>
+    <!-- main -->
+    <div class="main">
+      <div class="left" id="controldiv">
+        <div id="fileupload">
+          <form id="uploadform" enctype="multipart/form-data">
+            <div class="filetop">
+              <!-- <label for="filepicker">Choose a file</label> -->
+              <input
+                type="file"
+                name="files"
+                id="filepicker"
+                multiple
+                placeholder="Drop File"
+              />
             </div>
-          </div>
-          <div id="datediv">
-            <label for="date">Datum</label>
-            <input type="date" id="date" name="ex_date" placeholder="Drop File" /><br />
-          </div>
-          <input type="checkbox" name="censor" id="sec_censor" value="True" checked /><label
-            for="sec_censor">Zensieren</label><br /><br />
-          <button type="submit" id="send">Senden</button>
-        </form>
-      </div>
-    </div>
-    <div class="right" id="rightdiv">
-      <div class="buttons" id="buttonsdiv">
-        <button id="prev">Prev</button><button id="next">Next</button>
-        <div>
-          <span id="npage"></span>
-          <span>/</span>
-          <span id="npages"></span>
+            <button type="submit" id="upload" method="POST" class="fileupload">
+              Upload
+            </button>
+          </form>
+        </div>
+        <div id="submitdiv">
+          <form id="submitform" ,onsubmit="submitFile(event)">
+            <label for="lva">Lehrveranstaltung:</label>
+            <div class="autocomplete">
+              <input
+                type="text"
+                id="lva"
+                name="lva"
+                placeholder="Lehrveranstaltung"
+                autocomplete="off"
+              />
+            </div>
+            <br />
+            <!-- <br /> -->
+            <label for="prof">Vortragende*r:</label>
+            <div class="autocomplete">
+              <input
+                type="text"
+                id="prof"
+                name="prof"
+                placeholder="Vortragende*r"
+                autocomplete="off"
+              />
+            </div>
+            <br />
+            <!-- <br /> -->
+            <label for="name">Name:</label>
+            <input
+              type="text"
+              id="name"
+              name="fname"
+              placeholder="Prüfung"
+            /><br />
+            <label for="sem">Semester:</label>
+            <input type="text" id="sem" name="sem" placeholder="2024W" /><br />
+            <input
+              type="radio"
+              id="pruefung"
+              name="stype"
+              value="0"
+              checked="checked"
+            />
+            <label for="pruefung">Prüfung</label><br />
+            <input type="radio" id="klausur" name="stype" value="1" />
+            <label for="klausur">Klausur</label><br />
+            <input type="radio" id="uebung" name="stype" value="2" />
+            <label for="uebung">Übung</label><br />
+            <input type="radio" id="labor" name="stype" value="3" />
+            <label for="labor">Labor</label><br />
+            <input type="radio" id="unterlagen" name="stype" value="4" />
+            <label for="unterlagen">Unterlagen</label><br />
+            <input type="radio" id="zusammenfassungen" name="stype" value="5" />
+            <label for="zusammenfassungen">Zusammenfassung</label><br />
+            <input type="radio" id="multimedia" name="stype" value="6" />
+            <label for="multimedia">Multimedia</label><br />
+            <br />
+            <div id="subcatdiv">
+              <label for="subcat">Veranstaltung</label>
+              <div class="autocomplete">
+                <input
+                  type="text"
+                  id="subcat"
+                  name="subcat"
+                  placeholder="Klausur 1"
+                  autocomplete="off"
+                />
+              </div>
+            </div>
+            <div id="datediv">
+              <label for="date">Datum</label>
+              <input
+                type="date"
+                id="date"
+                name="ex_date"
+                placeholder="Drop File"
+              /><br />
+            </div>
+            <input
+              type="checkbox"
+              name="censor"
+              id="sec_censor"
+              value="True"
+              checked
+            /><label for="sec_censor">Zensieren</label><br /><br />
+            <button type="submit" id="send">Senden</button>
+          </form>
         </div>
-        <button id="clr">Clear Page</button><button id="ca">Claer All</button>
       </div>
-      <div id="cnvdiv">
-        <div class="stack" id="cnvcont">
-          <canvas id="cnv"></canvas>
-          <canvas id="drw_cnv"></canvas>
+      <div class="right" id="rightdiv">
+        <div class="buttons" id="buttonsdiv">
+          <button id="prev">Prev</button><button id="next">Next</button>
+          <div>
+            <span id="npage"></span>
+            <span>/</span>
+            <span id="npages"></span>
+          </div>
+          <button id="clr">Clear Page</button><button id="ca">Claer All</button>
+        </div>
+        <div id="cnvdiv">
+          <div class="stack" id="cnvcont">
+            <canvas id="cnv"></canvas>
+            <canvas id="drw_cnv"></canvas>
+          </div>
         </div>
       </div>
     </div>
-  </div>
-</body>
-
+  </body>
 </html>
diff --git a/static/app.js b/static/app.js
index 5aaf568..ceea83f 100644
--- a/static/app.js
+++ b/static/app.js
@@ -287,7 +287,7 @@ async function submitForm(formData) {
     const updateEventSource = new EventSource(
       "http://127.0.0.1:8000/get_censor_status/" + doc.fID,
     );
-    modal.style.display = "block";
+    modal.style.display = "flex";
     // console.log("http://127.0.0.1:8000/get_censor_status/" + doc.fID);
     updateEventSource.addEventListener("censorUpdate", function(eve) {
       console.log(eve.data);
@@ -384,11 +384,11 @@ function initListeners() {
 }
 function initLoading() {
   modal = document.querySelector("#loading");
-  close_loading = document.querySelector(".close");
+  // close_loading = document.querySelector(".close");
   upload_status = document.querySelector("#upload_status");
-  close_loading.addEventListener("click", function() {
-    modal.style.display = "none";
-  });
+  // close_loading.addEventListener("click", function() {
+  // modal.style.display = "none";
+  // });
 }
 const startPdf = () => {
   // doc = new PDFDocument(
diff --git a/static/style.css b/static/style.css
index 06b9705..31ef856 100644
--- a/static/style.css
+++ b/static/style.css
@@ -259,18 +259,23 @@ input[type="file"]::file-selector-button {
   /* Fallback color */
   background-color: rgba(0, 0, 0, 0.4);
   /* Black w/ opacity */
+  justify-content: center;
 }
 
 /* Modal Content/Box */
 .loading-content {
   background-color: #4f5977;
-  margin: 15% auto;
+  margin: auto;
   /* 15% from the top and centered */
   padding: 20px;
   /* border: 1px solid #888; */
   /* width: 80%; */
   border-radius: 15px;
+  display: flex;
+  flex-direction: column;
   /* Could be more or less, depending on screen size */
+  align-items: center;
+  text-align: center;
 }
 
 /* The Close Button */
@@ -294,6 +299,7 @@ input[type="file"]::file-selector-button {
 }
 
 .loader {
+  margin: auto;
   border: 16px solid #f3f3f3;
   /* Light grey */
   border-top: 16px solid #3498db;
