Update 16 files

- /nfdi4chem_ms_converter_GUI.py
- /requirements.txt
- /static/folder.svg
- /static/navigation_style.css
- /static/raw_file.svg
- /static/upload_areazone.css
- /static/loading.css
- /static/styles.css
- /static/logo_nfdi4chem_cs.png
- /static/script.js
- /templates/ms_homepage.html
- /templates/download_msconverter_output.html
- /templates/contact_info.html
- /templates/error_page_ms.html
- /logs/converterApp.log
- /credentials/.env

credentials/.env

+ACCESS_KEY = ""
+SECRET_KEY = ""
+ENDPOINT_URL = ""
+BUCKET = ""
\ No newline at end of file

logs/converterApp.log

+2025-03-28 09:27:29 [ERROR] Filename:Upload Many Files Error :: Size:None :: TimeTaken:0.0s
+2025-03-28 09:42:06 [ERROR] Filename:Upload Many Files Error :: Size:None :: TimeTaken:0.0s
+2025-03-28 09:45:12 [ERROR] Filename:Upload Wrong File Format :: Size:None :: TimeTaken:0.0s
+2025-03-28 10:02:20 [ERROR] Filename:SQD120_230127.wiff :: Size:0.1171875MB :: TimeTaken:20.78s
+2025-03-28 10:15:24 [INFO] Filename:SQD120_230127.wiff :: Size:0.12MB :: TimeTaken:21.6s
+2025-03-28 13:32:12 [INFO] Filename:File014.RAW :: Size:86202MB :: TimeTaken:20.51s
+2025-03-28 13:33:30 [INFO] Filename:File014.RAW :: Size:0.08MB :: TimeTaken:23.94s
+2025-03-28 13:37:55 [INFO] Filename:File014.RAW :: Size:0.08MB :: TimeTaken:21.04s
+2025-03-28 13:46:12 [ERROR] Filename:test.tar :: Size:0.16MB :: TimeTaken:19.26s
+2025-03-28 13:49:25 [INFO] Filename:MS_EI-MS_Linderazulen_03.D.tar :: Size:4.87MB :: TimeTaken:24.2s
+2025-03-28 14:05:42 [INFO] Filename:SW-R56-F2-000001.d.tar :: Size:25.25MB :: TimeTaken:84.61s
+2025-03-28 14:08:17 [INFO] Filename:SW-R56-F2-000001.d.tar :: Size:25.25MB :: TimeTaken:88.28s
+2025-03-28 14:11:18 [INFO] Filename:SW-R56-F2-000001.d.tar :: Size:25.25MB :: TimeTaken:87.33s
+2025-03-28 14:11:36 [ERROR] Filename:Upload large than 0.001 Error :: Size:NoneMB :: TimeTaken:0.13s
+2025-03-28 14:11:43 [ERROR] Filename:Upload large than 0.001 Error :: Size:NoneMB :: TimeTaken:0.12s
+2025-03-28 14:12:22 [ERROR] Filename:Upload large than 0.001 Error :: Size:NoneMB :: TimeTaken:0.0s
+2025-03-28 14:12:30 [ERROR] Filename:Upload large than 0.001 Error :: Size:NoneMB :: TimeTaken:0.0s
+2025-03-28 14:14:29 [INFO] Filename:SW-R56-F2-000001.d.tar :: Size:25.25MB :: TimeTaken:75.18s
+2025-03-28 14:27:23 [INFO] Filename:File014.RAW :: Size:0.08MB :: TimeTaken:24.72s
+2025-03-28 14:28:59 [INFO] Filename:File014.RAW :: Size:0.08MB :: TimeTaken:20.94s
+2025-03-28 14:37:54 [INFO] Filename:SQD120_230127.wiff :: Size:0.12MB :: TimeTaken:47.1s
+2025-03-28 15:50:48 [ERROR] Filename:Upload Error :: Size:NoneMB :: TimeTaken:0.02s
+2025-03-28 16:02:38 [ERROR] Filename:Upload File Extention Error :: Size:NoneMB :: TimeTaken:0.0s
+2025-03-28 16:02:49 [ERROR] Filename:Upload Many Files Error :: Size:NoneMB :: TimeTaken:0.0s
+2025-03-28 16:03:35 [ERROR] Filename:Upload Wrong File Format Error :: Size:NoneMB :: TimeTaken:0.0s
+2025-03-28 16:05:37 [INFO] Filename:File014.RAW :: Size:0.08MB :: TimeTaken:26.23s
+2025-03-28 16:07:05 [INFO] Filename:SQD120_230127.wiff :: Size:0.12MB :: TimeTaken:23.92s
+2025-03-28 16:12:10 [INFO] Filename:SW-R56-F2-000001.d.tar :: Size:25.25MB :: TimeTaken:78.26s
+2025-03-28 16:14:24 [INFO] Filename:SW-R56-F3-000001.d.tar :: Size:29.76MB :: TimeTaken:96.08s
+2025-03-28 16:16:41 [INFO] Filename:File014.RAW :: Size:0.08MB :: TimeTaken:21.28s
+2025-03-28 16:17:17 [INFO] Filename:MS_EI-MS_Linderazulen_03.D.tar :: Size:4.87MB :: TimeTaken:25.89s
+2025-03-28 21:01:10 [INFO] Filename:File014.RAW :: Size:0.08MB :: TimeTaken:25.98s
+2025-03-28 21:14:06 [INFO] Filename:File014.RAW :: Size:0.08MB :: TimeTaken:22.75s
+2025-03-28 21:18:53 [INFO] Filename:File014.RAW :: Size:0.08MB :: TimeTaken:22.15s
+2025-03-28 21:26:22 [INFO] Filename:SW-R56-F2-000001.d.tar :: Size:25.25MB :: TimeTaken:309.02s
+2025-03-28 21:27:35 [INFO] Filename:SQD120_230127.wiff :: Size:0.12MB :: TimeTaken:22.91s
+2025-03-28 21:40:38 [INFO] Filename:SW-R56-F3-000001.d.tar :: Size:29.76MB :: TimeTaken:336.36s
+2025-03-28 21:47:54 [INFO] Filename:SW-R56-F3-000001.d.tar :: Size:29.76MB :: TimeTaken:418.81s
+2025-03-31 09:30:35 [ERROR] Filename:Wrong set of input files. Missing .scan.wiff file :: Size:NoneMB :: TimeTaken:0.0s
+2025-03-31 09:31:11 [ERROR] Filename:Wrong set of input files. Missing .wiff.scan file :: Size:NoneMB :: TimeTaken:0.01s
+2025-03-31 09:31:28 [ERROR] Filename:Wrong set of input files. Missing .wiff.scan file :: Size:NoneMB :: TimeTaken:0.0s
+2025-03-31 09:32:03 [ERROR] Filename:Wrong set of input files. Missing .wiff.scan file :: Size:NoneMB :: TimeTaken:0.0s
+2025-03-31 09:32:27 [ERROR] Filename:Wrong set of input files. Missing .wiff.scan file :: Size:NoneMB :: TimeTaken:0.0s
+2025-03-31 09:34:00 [INFO] Filename:File014.RAW :: Size:0.08MB :: TimeTaken:58.03s
+2025-03-31 09:41:19 [INFO] Filename:SQD120_230127.wiff :: Size:0.12MB :: TimeTaken:53.06s
+2025-03-31 09:49:54 [INFO] Filename:SW-R56-F2-000001.d.tar :: Size:25.25MB :: TimeTaken:436.2s
+2025-03-31 09:50:32 [ERROR] Filename:Upload large than 2 Error :: Size:NoneMB :: TimeTaken:0.12s
+2025-03-31 10:04:55 [ERROR] Filename:Wrong set of input files. Missing .wiff.scan file :: Size:NoneMB :: TimeTaken:0.01s
+2025-03-31 11:09:41 [INFO] Filename:File014.RAW :: Size:0.08MB :: TimeTaken:111.09s

requirements.txt

+boto3
+flask
+uwsgi
+python-dotenv
+botocore
+pytz
+flask-cors
+logging
\ No newline at end of file

static/folder.svg

+<svg
+   version="1.1"
+   id="svg11407"
+   xml:space="preserve"
+   width="43.946983"
+   height="32.332767"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs11411" /><sodipodi:namedview
+     id="namedview11409"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1" /><inkscape:clipboard
+     min="312.60624,310.21968"
+     max="356.55323,342.55244"
+     geom-min="312.60624,310.21968"
+     geom-max="356.55323,342.55244" /><g
+     id="g11413"
+     transform="matrix(3.7795276,0,0,3.7795276,-312.60625,-310.21968)"><path
+       style="color:#000000;fill:#000000;stroke-width:1;-inkscape-stroke:none"
+       d="m 86.127029,82.078956 -3.415662,0.02548 v 8.369008 l -9.65e-4,0.158023 0.220274,0.0022 h 11.407365 v -6.790604 h -7.17502 z m -0.225856,0.467878 1.035992,1.76228 h 6.981897 v 5.858488 H 83.130346 v -7.600743 z"
+       id="path11336"
+       sodipodi:nodetypes="cccccccccccccccc" /><text
+       xml:space="preserve"
+       style="font-size:3.52642px;line-height:0.8;font-family:'Fira Sans';-inkscape-font-specification:'Fira Sans';fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.0999996"
+       x="86.242653"
+       y="88.506203"
+       id="text5254-62-3"
+       transform="scale(1.0003839,0.99961625)"><tspan
+         sodipodi:role="line"
+         style="fill:#000000;fill-opacity:1;stroke-width:0.0999996"
+         x="86.242653"
+         y="88.506203"
+         id="tspan5649-0">.D</tspan></text></g></svg>

static/loading.css

+#loader {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    z-index: 1;
+    width: 120px;
+    height: 120px;
+    margin: -76px 0 0 -76px;
+    border: 16px solid #f3f3f3;
+    border-radius: 50%;
+    border-top: 16px solid #3498db;
+    -webkit-animation: spin 2s linear infinite;
+    animation: spin 2s linear infinite;
+    display: none;
+  }
+  
+  @-webkit-keyframes spin {
+    0% { -webkit-transform: rotate(0deg); }
+    100% { -webkit-transform: rotate(360deg); }
+  }
+  
+  @keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+  
+  /* Add animation to "page content" */
+  .animate-bottom {
+    position: relative;
+    -webkit-animation-name: animatebottom;
+    -webkit-animation-duration: 1s;
+    animation-name: animatebottom;
+    animation-duration: 1s
+  }
+  
+  @-webkit-keyframes animatebottom {
+    from { bottom:-100px; opacity:0 } 
+    to { bottom:0px; opacity:1 }
+  }
+  
+  @keyframes animatebottom { 
+    from{ bottom:-100px; opacity:0 } 
+    to{ bottom:0; opacity:1 }
+  }
+
+  .loader-text {
+      position: absolute;
+left: 50%;
+top: calc(50% + 80px); /* Adjusting below the loader */
+transform: translateX(-50%);
+font-size: 18px;
+font-weight: bold;
+color: #555;
+display: none;
+white-space: nowrap;
+  
+  }
+
+  .loading-container {
+position: absolute;
+left: 50%;
+top: 50%;
+transform: translate(-50%, -50%);
+text-align: center;
+z-index: 1;
+display: flex; /* Initially hidden */
+}
+
+
+
+
+/* Terminal container */
+.terminal {
+  padding: 5px;
+  width: fit-content;
+  text-align: center;
+}
+
+/* Text animation - simulating typing effect */
+.typing {
+  color: #019DBB; /* Happy Birthday text color */
+  font-size: 2rem;
+  overflow: hidden; /* Hide text that hasn't been typed */
+  border-right: 4px solid #019DBB; /* Simulate cursor with border */
+  width: 0; /* Start with no width */
+  white-space: nowrap; /* Prevent wrapping */
+  animation: typing 1s steps(30) 1s forwards, blink 0.75s step-end infinite; /* Animation for typing and blinking */
+  display: flex;
+  font-size: 18px;
+  padding: 10px;
+}
+
+/* Typing animation */
+@keyframes typing {
+  from {
+      width: 0;
+  }
+  to {
+      width: 100%; /* Length of the text "Happy Birthday" */
+  }
+}
+
+/* Cursor blinking animation */
+@keyframes blink {
+  50% {
+      border-color: transparent;
+  }
+}
+
+#timer {
+  font-size: 48px;
+  font-weight: bold;
+  color: #019DBB;
+  padding: 20px;
+  border-radius: 10px;
+  display: inline-block;
+}
\ No newline at end of file

static/navigation_style.css

+nav {
+    width: 100%;
+    padding: 10px 20px;
+}
+
+.nav-menu {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    overflow: auto;
+}
+
+.nav-menu li {
+    margin-left: 20px;
+}
+
+.nav-menu a {
+    text-decoration: none;
+    color: #696969;
+    padding: 10px 15px;
+    border-radius: 5px;
+    transition: none;
+    font-size: 15px;
+    font-weight: 600;
+    font-family: 'Poppins', sans-serif;
+}
+
+.nav-menu a:hover {
+    color: #36454F;
+    transform: scale(1.3);
+}
+/* Links container */
+.nav-links {
+    display: flex;
+    gap: 2px; /* Spacing between links */
+    position: absolute;
+    right: 5%; /* Push it between center and right */
+    top: 3px;
+}
+
+li {
+    text-align: left;
+}
\ No newline at end of file

static/raw_file.svg

+<svg
+   version="1.1"
+   id="svg9035"
+   xml:space="preserve"
+   width="162.96416"
+   height="43.710392"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs9039" /><sodipodi:namedview
+     id="namedview9037"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1" /><inkscape:clipboard
+     min="127.13214,307.34586"
+     max="290.0963,351.05625"
+     geom-min="127.26961,307.53483"
+     geom-max="289.90733,350.86727" /><g
+     id="g9041"
+     transform="matrix(3.7795276,0,0,3.7795276,-127.13214,-307.34586)"><rect
+       style="fill:none;stroke:#000000;stroke-width:0.1;stroke-dasharray:none"
+       id="rect5144"
+       width="9.8966331"
+       height="11.4"
+       x="33.687046"
+       y="81.368591"
+       rx="0.47405446"
+       ry="0.16118921" /><text
+       xml:space="preserve"
+       style="font-size:3.52777px;font-family:'Fira Sans';-inkscape-font-specification:'Fira Sans';fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.1"
+       x="34.182884"
+       y="87.841553"
+       id="text5254"><tspan
+         sodipodi:role="line"
+         id="tspan5252"
+         style="fill:#000000;fill-opacity:1;stroke-width:0.1"
+         x="34.182884"
+         y="87.841553">.RAW</tspan></text><path
+       style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:0.1;stroke-dasharray:none"
+       d="m 33.673417,82.65221 1.2148,0.05687 v -1.314429"
+       id="path5477"
+       sodipodi:nodetypes="ccc" /><rect
+       style="fill:none;stroke:#000000;stroke-width:0.0999996;stroke-dasharray:none"
+       id="rect5144-3"
+       width="9.8966331"
+       height="11.400001"
+       x="53.933998"
+       y="81.433632"
+       rx="0.47405446"
+       ry="0.16118921" /><text
+       xml:space="preserve"
+       style="font-size:3.52642px;font-family:'Fira Sans';-inkscape-font-specification:'Fira Sans';fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.0999996"
+       x="54.408955"
+       y="87.935364"
+       id="text5254-6"
+       transform="scale(1.0003839,0.99961625)"><tspan
+         sodipodi:role="line"
+         id="tspan5252-7"
+         style="fill:#000000;fill-opacity:1;stroke-width:0.0999996"
+         x="54.408955"
+         y="87.935364">.wiff</tspan></text><path
+       style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:0.0999996;stroke-dasharray:none"
+       d="m 53.920366,82.716258 1.2148,0.05683 v -1.313421"
+       id="path5477-5"
+       sodipodi:nodetypes="ccc" /><rect
+       style="fill:none;stroke:#000000;stroke-width:0.0999996;stroke-dasharray:none"
+       id="rect5144-35"
+       width="9.8966331"
+       height="11.400001"
+       x="66.808014"
+       y="81.407166"
+       rx="0.47405446"
+       ry="0.16118921" /><text
+       xml:space="preserve"
+       style="font-size:3.52642px;line-height:0.8;font-family:'Fira Sans';-inkscape-font-specification:'Fira Sans';fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.0999996"
+       x="67.887032"
+       y="87.432259"
+       id="text5254-62"
+       transform="scale(1.0003839,0.99961625)"><tspan
+         sodipodi:role="line"
+         style="fill:#000000;fill-opacity:1;stroke-width:0.0999996"
+         x="67.887032"
+         y="87.432259"
+         id="tspan5645">.wiff.</tspan><tspan
+         sodipodi:role="line"
+         style="fill:#000000;fill-opacity:1;stroke-width:0.0999996"
+         x="67.887032"
+         y="90.253395"
+         id="tspan5649">scan</tspan></text><path
+       style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:0.0999996;stroke-dasharray:none"
+       d="m 66.794384,82.68979 1.2148,0.05683 V 81.4332"
+       id="path5477-1"
+       sodipodi:nodetypes="ccc" /><text
+       xml:space="preserve"
+       style="font-size:3.52642px;font-family:'Fira Sans';-inkscape-font-specification:'Fira Sans';fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.0999996"
+       x="64.292473"
+       y="88.107292"
+       id="text5254-6-2"
+       transform="scale(1.0003839,0.99961625)"><tspan
+         sodipodi:role="line"
+         id="tspan5252-7-7"
+         style="fill:#000000;fill-opacity:1;stroke-width:0.0999996"
+         x="64.292473"
+         y="88.107292">+</tspan></text><text
+       xml:space="preserve"
+       style="font-size:3.52777px;font-family:'Fira Sans';-inkscape-font-specification:'Fira Sans';fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.1"
+       x="46.433922"
+       y="88.391273"
+       id="text5254-0"><tspan
+         sodipodi:role="line"
+         id="tspan5252-9"
+         style="fill:#000000;fill-opacity:1;stroke-width:0.1"
+         x="46.433922"
+         y="88.391273">OR</tspan></text></g></svg>

static/script.js

+function openTab(evt, tabName) {
+  var i, tabcontent, tablinks;
+
+
+  tabcontent = document.getElementsByClassName("tab_content");
+  for (i = 0; i < tabcontent.length; i++) {
+    tabcontent[i].style.display = "none";
+    tabcontent[i].classList.remove("active");
+  }
+
+
+  tablinks = document.getElementsByClassName("tablinks");
+  for (i = 0; i < tablinks.length; i++) {
+    tablinks[i].classList.remove("active");
+  }
+
+
+  document.getElementById(tabName).style.display = "block";
+  document.getElementById(tabName).classList.add("active");
+  evt.currentTarget.classList.add("active");
+}

static/styles.css

+*{
+    font-family: "Barlow";
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    display: block;
+    justify-content: center;
+    align-items: center;
+    background-color: rgb(241, 245, 248);
+    overflow-y: scroll;
+    overflow-x: hidden;
+    scrollbar-width: thin;
+    scrollbar-color: transparent;
+}
+
+h1, h2, h3 {
+    color: #444;
+    text-align: center;
+    font-weight: 400;
+}
+
+h3{
+    font-size: 24px;
+    padding: 2px;
+    margin: 2px;
+}
+
+p {
+    line-height: 1.6;
+    margin-bottom: 5px;
+  }
+
+.container {
+    min-height: 100vh;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    border: none;
+    outline: none;
+}
+
+.images{
+    position: fixed;
+    top: 0;
+    width: 100%;
+    margin-top: 10px;
+}
+
+#logo_left {
+    float: left;
+    left: 0;
+    margin-left: 10px; 
+    margin-right: 10px;
+}
+
+#logo_right {
+    float: right;
+    right: 0;
+    margin-right: 10px;
+    margin-left: 10px; 
+}
+
+.wrapper {
+    width: 900px;
+    height: auto;
+    margin: auto;
+    border-radius: 10px;
+    padding: 65 55 54;
+    overflow: hidden;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    border: none;
+    outline: none;
+}
+
+.wrapper1 {
+    width: 50%;
+    height: auto;
+    margin: auto;
+    border-radius: 10px;
+    padding: 65 55 54;
+   
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.tab_wrap{
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+
+    
+}
+.tablinks{
+
+    font-size: 18px;
+    cursor: pointer;
+    display: block;
+    text-decoration: none;
+    color: #333;
+    flex-grow: 3;
+    text-align: center;
+    user-select: none;
+    text-align: center;
+    transition: 0.3s background-color ease, 0.3s box-shadow ease;
+    height: 50px;
+    padding: 15px;
+    &:hover {
+      background-color: #f9f9f9;
+      box-shadow: 0 1px 0 #f4f4f4 inset;
+    }
+}
+
+.tabs{
+    transition: 0.3s box-shadow ease;
+    border-radius: 6px;
+    max-width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    position: relative;
+    list-style: none;
+    background-color: #fff;
+    margin: 40px 0;
+    box-shadow: 0 1px 3px rgba(255, 12, 12, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+}
+
+.tab-wrap:hover {
+    box-shadow: 0 12px 23px rgba(0, 0, 0, 0.23), 0 10px 10px rgba(0, 0, 0, 0.19);
+  }
+
+
+.tab{
+    overflow: hidden;
+    width: 100%;
+    display: flex;
+    background-color: #ffffff;
+}
+
+.tab button {
+    background-color: f9f9f9;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    padding: 14px 16px;
+    transition: 0.3s;
+    flex: 1;
+    text-align: center;
+    border-bottom: 3px solid transparent;
+  }
+  
+  .tab button:hover {
+    background-color: #ddd;
+  }
+  
+  .tab button.active {
+    background-color: #ffffff;
+    border-bottom: 3px solid #009CBD;
+    color: #009CBD;
+  }
+  
+  
+  .tab_content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 20px;
+    box-sizing: border-box;
+    width: 100%;
+    min-height: 150px;
+    background-color: #fff;
+    opacity: 0;
+    transform: translateY(-3px);
+    transition: 0.5s opacity ease-in, 0.8s transform ease;
+  }
+  
+  .tab_content.active {
+    opacity: 1;
+    transform: translateY(0px);
+    z-index: 100;
+  }
+
+  .converter {
+    display: flex;
+    flex-direction: column; 
+    justify-content: center; 
+    align-items: center;
+    text-align: center;
+    padding: 20px; 
+    border-radius: 6px; 
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+    width: 100%;
+    box-sizing: border-box;
+    background-color: #e1ecf2;
+}
+
+.converter input[type="file"] {
+    margin-top: 10px;
+    padding: 10px;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-size: 16px;
+    width: 80%; 
+}
+
+.upload-btn {
+    margin-top: 10px;
+    padding: 10px 20px;
+    border: none;
+    background-color: #009CBD;
+    color: white;
+    font-size: 20px;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: 0.3s;
+}
+
+.upload-btn:hover {
+    background-color: #007A92;
+}
+
+footer{
+    position: fixed;
+    width: 100%;
+    bottom: 0;
+    background-color:  #019DBB;
+    padding: 10px;
+    color: white;
+    height: 10px;
+    display: flex;
+    justify-content: right;
+}
+
+footer a{
+    position: absolute;
+    right: 20px;
+    bottom: 7px;
+    margin-right: 10px;
+    color: white;
+    text-decoration: none;
+    font-weight: bold;
+    transition: color 0.3s ease;
+   
+
+}
+
+footer a:visited {
+    color: white; 
+}
+
+
+/* Styles for the loading overlay */
+#loading {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+}
+
+.spinner {
+    border: 4px solid rgba(255, 255, 255, 0.3);
+    border-top: 4px solid #fff;
+    border-radius: 50%;
+    width: 50px;
+    height: 50px;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+.headlines {
+    border: none;
+}
+
+.headlines h1 {
+    font-size: 32px;
+    font-weight: bold;
+    margin-bottom: 5px;
+    color: #019DBB;
+    font-family: 'Arial', sans-serif;
+    margin-top: 50px;
+}
+
+.headlines h3 {
+    font-size: 20px;
+    font-weight: normal;
+    margin-top: 0;
+    color: #019DBB;
+    font-family: 'Arial', sans-serif;
+}
+
+
+.converted {
+    display: flex;
+    flex-direction: column; 
+    justify-content: center; 
+    align-items: center;
+    text-align: center;
+    padding: 20px; 
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+    width: auto;
+    box-sizing: border-box;
+    background-color: #e1ecf2;
+    border-radius: 6px;
+    color: #019DBB;
+}
+
+
+.h3_div h3{
+    font-weight: 700;
+    font-size: 30px;
+    margin-bottom: 10px;
+    color: #070707;
+    font-style: 'Poppins', sans-serif;
+}
+
+.h3_div h4{
+    text-align: left; /* Ensures text is aligned to the left */
+    font-weight: 550;
+    font-size: 30px;
+    color: #019DBB;
+    font-style: 'Poppins', sans-serif;
+}
+
+/* Align text to the left inside li */
+.h3_div li {
+    text-align: left; /* Ensures text is aligned to the left */
+    list-style: circle; /* Remove default bullet points for list */
+    padding-left: 10px; /* Add some padding to the left if you want */
+    margin-bottom: 10px;
+}
+
+
+
+.error{
+    margin: 40px;
+    margin-top: 80px; ;
+}
+
+.button {
+    text-align: center;
+    margin-top: 20px;
+}
+
+.btn, #goback{
+    position: relative;
+    font-size: 18px; 
+    font-weight: 400;
+    text-align: center;
+    cursor: pointer; 
+    padding: 15px 40px;
+    transition: background-color 0.3s ease, transform 0.3s;
+    border-radius: 2px;
+    border: none;
+    text-decoration: none;
+    background-color: silver; /* Gradient background */
+    color: #333333; /* Text color */
+    font-style: 'Poppins', sans-serif;
+    display: inline-block;
+}
+
+#goback{     
+    top: -90px;
+   }
+
+.btn:hover, #goback:hover {
+    transform: translateY(-1px);
+    background-color: #019DBB;
+    border-color: #019DBB;
+    color: white;
+}
+
+
+.RB_Flask{
+    position: relative;
+    height: 10rem;   
+    width: 12.5rem;
+    margin: 40px;
+    margin-top: 80px;
+}
+
+
+.RB_Flask::after{
+    position: absolute;
+    content: '';
+    top: -13%;
+    left: 62%;
+    transform: translate(-62.5%) rotate(15deg);
+
+    width: 2.25rem;     
+    height: 2.75rem;
+    background-color: var(--grey);
+    border-left: .2rem solid var(--blue);  
+    border-right: .2rem solid var(--blue);
+    border-bottom: none;
+    border-top: none;
+}
+
+.chemical {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) rotate(25deg);
+    width: 7rem;   
+    height: 7rem;  
+    border: .2rem solid var(--blue);   
+    border-top: .2rem solid var(--grey);
+    border-radius: 50%;
+    outline: .2rem solid var(--blue);  
+    outline-offset: .2rem;             
+    overflow: hidden;
+}
+
+
+.chemical::after{
+    position: absolute;
+    content: '';
+    top: 50%;
+    left: 15%;
+    transform: rotate(75deg);
+    width:100%;
+    height: 130%;
+    background-color: var(--dark_blue);
+    animation: wave 1.3s linear;
+}
+
+
+.bubbles{
+    position: absolute;
+    width: 100%;
+    height: 100%;
+
+    transform: translateX(10px);
+
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    }
+
+.bubble{
+    width: 0.5rem;
+    height: 0.5rem;
+    background-color:var(--dark_blue);
+    border-radius: 50%;
+    transform: translate(30px, 32.5px);
+    animation: chemical_bubbles 2s linear infinite;
+}
+
+@keyframes chemical_bubbles {
+    0% {
+        transform: translate(30px, 32.5px) scale(-0.5);
+        background-color: var(--dark_blue);
+        opacity: 0;
+    }
+    20% {
+        opacity: 1;
+        background-color: var(--dark_blue);
+    }
+    60% {
+        transform: translate(20px, 45px);
+        background-color: var(--dark_blue);
+        opacity: 1;
+    }
+
+    80%{
+        background-color: var(--clear_blue);
+    }
+    100% {
+        transform: translate(-40px, -80px) scale(.4);
+        background-color: var(--clear_blue);
+        opacity: 0;
+    }
+}
+
+
+
+.bubble:nth-child(1){ animation-delay: 1.4s;}
+.bubble:nth-child(2){ 
+    width: 1rem;
+    height: 1rem;
+    animation-delay: 3.8s;}
+
+.bubble:nth-child(3){ 
+    width: 1.25rem;
+    height: 1.25rem;
+    animation-delay: .6s;}    
+.bubble:nth-child(4){ 
+    width: 0.7rem;
+    height: 0.7rem;
+    animation-delay: 3s;
+} 
+
+.bubble:nth-child(5){ animation-delay: 2.2s;}
+
+.small-text {
+    font-size: 12px;
+}
+.large-text {
+    font-size: 40px;
+}
+
+.svg-background {
+    width: 300px;
+    height: 70px;
+    background-image: url('raw_file.svg');
+    background-size: contain;
+    background-repeat: no-repeat;
+    display: inline-block;
+    background-position: center;
+}
+
+.svg-background-folder {
+    width: 150px;
+    height: 50px;
+    background-image: url('folder.svg');
+    background-size: contain;
+    background-repeat: no-repeat;
+    display: inline-block;
+    justify-content: center;
+    align-content: center;
+    background-position: center;
+}
\ No newline at end of file

static/upload_areazone.css

+.upload-container {
+    width: 100%;
+    height: 150px;
+    border: 2px dashed #3498db;
+    border-radius: 10px;
+    display: block;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    cursor: pointer;
+    font-family: Arial, sans-serif;
+    font-size: 20px;
+    color: #3498db;
+    background-color: #f0f8ff;
+    transition: all 0.3s ease-in-out;
+}
+
+/* Hover Effect */
+.upload-container:hover {
+    background-color: #d0e8ff;
+    border-color: #2980b9;
+    color: #2980b9;
+}
+
+/* Hide default file input */
+.upload-container input {
+    cursor: pointer;
+    font-size: 18px;
+    padding: 10px;
+    transform: scale(1.2);
+}
+
+
+/* Styling the Convert button */
+.convert-btn {
+    background-color: silver; /* Gradient background */
+    color: #333333; /* Text color */
+    font-size: 18px; /* Font size */
+    font-weight: 300; /* Bold text */
+    padding: 12px 30px; /* Padding around text */
+    border: none; /* Remove default border */
+    border-radius: 5px; /* Rounded corners */
+    cursor: pointer; /* Change cursor to pointer */
+    outline: none; /* Remove focus outline */
+    box-shadow: 0 8px 8px rgba(0, 0, 0, 0.1); /* Shadow for depth */
+    transition: all 0.3s ease; /* Smooth transition for hover effects */
+    font-style: 'Poppins', sans-serif;
+}
+
+/* Hover effect for the button */
+.convert-btn:hover {
+    background: #019DBB; /* Reverse gradient */
+    transform: translateY(-2px); /* Lift the button on hover */
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Stronger shadow */
+    color: white;
+}
+
+
+

templates/contact_info.html

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='navigation_style.css') }}">
+    <title>NFDI4Chem MS-Converter</title>
+</head>
+<body>
+    <div class="container">
+        <div class="images">
+            <img src="{{ url_for('static', filename='logo_nfdi4chem_cs.png') }}" width ="240" height="60" alt="Logo_NFDI" id="logo_left">
+        </div>
+        <nav>
+            <ul class="nav-menu">
+                <div class="nav-links" id="tag_menu">
+                    <a href="/">Home</a>
+                    <a href="https://nfdi4chem.github.io/cs-documentation/" target="_blank">Docs</a>
+                    <a href="https://nfdi4chem-msconverter.zih.tu-dresden.de/api-docs#/" target="_blank">API</a>
+                    <a href="https://github.com/NFDI4Chem/cs-ms-converter" target="_blank"> GitHub</a>
+                    <a href="/contact-info" target="_blank"> Contact</a>
+                </div>
+                
+            </ul>
+        </nav>
+
+        <div class="wrapper1">               
+            <div class="converted">
+                <div class="h3_div">
+                    <h4>Contact Person</h4>
+                    <li> <a href="https://www.nfdi4chem.de/helpdesk/" target="_blank">NFDI4Chem Helpdesk</a> (helpdesk@nfdi4chem.de)</li>
+                    <li> Lincoln Sherpa, Technische Universität Dresden (lincoln.sherpa@tu-dresden.de) </li>
+                    <li> Dr. Steffen Neumann, Leibniz-Institut für Pflanzenbiochemie </li>
+                </div>               
+            </div>
+        </div>
+        <div class="button">
+            <a class="btn" id="goback" href="/">Home Page</a>
+        </div>  
+     </div>
+    <footer>
+        <a class="link" href="https://www.nfdi4chem.de/imprint/" target="_blank">Impressum</a>
+    </footer>
+</body>
+</html>
\ No newline at end of file

templates/download_msconverter_output.html

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='navigation_style.css') }}">
+    <title>NFDI4Chem MS Converter</title>
+</head>
+<body>
+    <div class="container">
+        <div class="images">
+            <img src="{{ url_for('static', filename='logo_nfdi4chem_cs.png') }}" width ="240" height="60" alt="Logo_NFDI" id="logo_left">
+        </div>
+        <nav>
+            <ul class="nav-menu">
+                <div class="nav-links" id="tag_menu">
+                    <a href="/">Home</a>
+                    <a href="https://nfdi4chem.github.io/cs-documentation/" target="_blank">Docs</a>
+                    <a href="https://nfdi4chem-msconverter.zih.tu-dresden.de/api-docs#/" target="_blank">API</a>
+                    <a href="https://github.com/NFDI4Chem/cs-ms-converter" target="_blank"> GitHub</a>
+                    <a href="/contact-info" target="_blank"> Contact</a>
+                </div>
+                
+            </ul>
+        </nav>
+
+        <div class="wrapper1">               
+            <div class="converted">
+                <div class="h3_div">
+                    <h3>Conversion Completed !</h3>
+                    <h3> Converted to {{ filename }} </h3>
+                    <p> Click below to download the file <p>
+                    <p>Download link valid untill</p>
+                    <p id="timer">60;00</p>
+                </div> 
+                <div class="button">
+                    <a  class="btn" href="{{ download_url }}" target="_blank" >Download {{ filename }}</a>
+                </div>               
+            </div>
+        </div>
+        <div class="button">
+            <a class="btn" id="goback" href="/">Convert another file</a>
+        </div>  
+     </div>
+    <footer>
+        <a class="link" href="https://www.nfdi4chem.de/imprint/" target="_blank">Impressum</a>
+    </footer>
+
+<script>
+    // Set the countdown time (in seconds)
+    let timeLeft = 60 * 60; // 1 hour = 3600 seconds
+
+    function updateTimerDisplay() {
+        let minutes = Math.floor(timeLeft / 60);
+        let seconds = timeLeft % 60;
+        document.getElementById("timer").innerText = 
+            `${minutes}:${seconds.toString().padStart(2, "0")}`;
+    }
+
+    function startCountdown() {
+        let countdown = setInterval(() => {
+            if (timeLeft > 0) {
+                timeLeft--;
+                updateTimerDisplay();
+            } else {
+                clearInterval(countdown);
+                document.getElementById("timer").innerText = "Time's Up!";
+            }
+        }, 1000);
+    }
+
+    // Start the countdown
+    startCountdown();
+</script>
+
+
+</body>
+</html>
+

templates/error_page_ms.html

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='navigation_style.css') }}">
+    <title>NFDI4Chem MS-Converter</title>
+</head>
+<body>
+    
+    <div class="container">
+        <div class="images">
+            <img src="{{ url_for('static', filename='logo_nfdi4chem_cs.png') }}" width ="240" height="60" alt="Logo_NFDI" id="logo_left">
+        </div>
+        <nav>
+            <ul class="nav-menu">
+                <div class="nav-links" id="tag_menu">
+                    <a href="/">Home</a>
+                    <a href="https://nfdi4chem.github.io/cs-documentation/" target="_blank">Docs</a>
+                    <a href="https://nfdi4chem-msconverter.zih.tu-dresden.de/api-docs#/" target="_blank">API</a>
+                    <a href="https://github.com/NFDI4Chem/cs-ms-converter" target="_blank"> GitHub</a>
+                    <a href="/contact-info" target="_blank"> Contact</a>
+                </div>
+                
+            </ul>
+        </nav>
+
+        <div class="wrapper">               
+            <div class="converted">
+                <div class="h3_div">
+                    <h3>{{ errorMessage }}</h3>
+                </div>
+                <div class="error">
+                    <svg xmlns="http://www.w3.org/2000/svg" height= 10rem width = 12.5rem viewBox="0 0 384 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="#011a51" d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>                </div>
+                <div class="button">
+                    <a class="btn" id="goback" href="/">Go Back</a>
+                </div>               
+            </div>
+        </div>
+     </div>
+    <footer>
+        
+    </footer>
+    </script>
+</body>
+</html>
\ No newline at end of file

templates/ms_homepage.html

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">   
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='loading.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='upload_areazone.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='navigation_style.css') }}">
+    <script src="{{ url_for('static', filename='script.js') }}"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 
+
+
+
+<title>NFDI4Chem MS-Converter</title>
+    
+    
+</head>
+<body>
+    <div class="images">
+        <img src="{{ url_for('static', filename='logo_nfdi4chem_cs.png') }}" width ="240" height="60" alt="Logo_NFDI" id="logo_left">
+    </div>
+    <nav>
+        <ul class="nav-menu">
+            <div class="nav-links" id="tag_menu">
+                <a href="/">Home</a>
+                <a href="https://nfdi4chem.github.io/cs-documentation/" target="_blank">Docs</a>
+                <a href="https://nfdi4chem-msconverter.zih.tu-dresden.de/api-docs#/" target="_blank">API</a>
+                <a href="https://github.com/NFDI4Chem/cs-ms-converter" target="_blank"> GitHub</a>
+                <a href="/contact-info" target="_blank"> Contact</a>
+            </div>
+            
+        </ul>
+    </nav>
+    
+    <div class="container" id="tag_main">
+        
+        <div class="wrapper">
+            <div class="headlines">
+                <h1>
+                    <span class="large-text">Mass Spectrometry File Converter</span> 
+                    <span class="small-text">(Public Beta)</span>
+                </h1>
+            </div>
+            <div class="terminal">
+                <h3 class="typing">Conversion into mzML format</h3>
+            </div>
+                        
+            <div class="converter">
+                <h3>
+                    Please upload your mass spectrometry files (.raw or .wiff with its corresponding .wiff.scan) to convert them into mzML format.
+                    <span style="font-size: 0.6em; font: sans-serif;">(Limit 1 GB)</span>
+                </h3>
+                <p>
+                    <span class="svg-background"></span>
+                </p>
+                <div class="upload-container">
+                    <form action="/msconvert_file_output" method="post" enctype="multipart/form-data" 
+                    id="myForm" onsubmit="loading(event)">
+                       <input type="file" name="file" id="fileInput" multiple> 
+                       <br><br>
+                        <input class="convert-btn" type="submit" value="Convert">
+                       
+                    </form>
+                </div>
+                
+                <div class="converter">
+                    <h3>
+                        Please upload your mass spectrometry folder, structured like a MassHunter ‘.d’ directory, to convert it into mzML format.
+                        <span style="font-size: 0.6em; font: sans-serif;">(Limit 1 GB)</span>
+                    </h3>
+                    <p>
+                        <span class="svg-background-folder"></span>
+                    </p>
+                    <div class="upload-container">
+                        <form action="/msconvert_folder_output" method="post" enctype="multipart/form-data"
+                            id="myForm2" onsubmit="loading(event)">
+                           <input type="file" name="files" multiple webkitdirectory directory>
+                           <br><br>
+                           <input class="convert-btn" type="submit" value="Convert">
+                       </form>
+                    </div>
+                    
+                </div>
+                    
+            </div>
+            
+        </div>
+       
+     </div>
+     <div class="loading-container" id="loading_c">
+        <div id="loader"></div>
+        <div class="loader-text" id="loader2"> 
+            <p>Conversion process taking place </p>
+        </div>
+     </div>>
+     
+    <footer>
+        <a class="link" href="https://www.nfdi4chem.de/imprint/" target="_blank">Impressum</a>
+    </footer>
+    
+    <script>
+        document.getElementById("myForm").addEventListener("submit", function() {
+            document.getElementById("converter_file").style.display = "flex";
+        });
+    </script>
+
+
+
+<script>
+        function selectFolder(e) {
+        for (var i = 0; i < e.target.files.length; i++) {
+      var s = e.target.files[i].name + '\n';
+      s += e.target.files[i].size + ' Bytes\n';
+      s += e.target.files[i].type;
+   }
+   console.log(s)
+    }
+</script>
+
+<script>
+    function selectFolder1(e) {
+    event.preventDefault();
+    let files = document.getElementById("folderInput").files;
+    let fileCount = files.length;
+    document.getElementById("fileCount").value = fileCount;
+    console.log("number of files selected: "+ fileCount)
+    event.target.submit();
+}
+</script>
+
+
+<script>    
+    
+    function loading(e) {
+      document.getElementById("tag_main").style.display = "none";
+      document.getElementById("tag_menu").style.display = "none";
+      document.getElementById("loading_c").style.display = "block";
+      document.getElementById("loader").style.display = "block";
+      document.getElementById("loader2").style.display = "block";
+      
+    }
+</script>
+
+
+
+</body>
+</html>
+