Window width for the GUI to fit the Arrows

Merge branch 'feature/ui-test' into 'develop'
Added to Step 2 and 3. Added a first new version of the progressbar +... See merge request proj-wise2526-video2document/video2document!46
2026-06-15 18:01:52 +02:00 · 2025-12-15 16:42:44 +01:00 · 2025-12-15 16:26:10 +01:00 · 2025-12-15 16:10:37 +01:00 · 2025-12-15 15:22:08 +01:00 · 2025-12-15 15:19:47 +01:00
6 changed files with 765 additions and 96 deletions
@@ -7,63 +7,159 @@
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
+
+<div id="h1-wrapper">
+    <section  class="p-menu1">
+    <nav id="navbar" class="navigation" role="navigation">
+      <input id="toggle1" type="checkbox" />
+      <label class="hamburger1" for="toggle1">
+        <div class="top"></div>
+        <div class="meat"></div>
+        <div class="bottom"></div>
+      </label>
+
+      <nav class="menu1">
+        <li class="li1">Help</li>
+        <li class="li1">Language</li>
+      </nav>
+    </nav>
+  </section>
+
+  <h1 id="h1">Video to document</h1>
+</div>
+
+<div class="step-nav">
+  <div class="step-item active" data-step="1">1. Step</div>
+  <div class="step-item" data-step="2">2. Step</div>
+  <div class="step-item" data-step="3">3. Step</div>
+  <div class="step-item" data-step="4">4. Step</div>
+  <div class="step-item" data-step="5">5. Step</div>
+  <div class="step-item" data-step="6">6. Step</div>
+</div>
 
-<div class="mitte" id="mitte"> 
-  <div class="labelDiv" id="labelDiv">
-    <label id="labelKI">Select ki:</label>
-    <label id="labelTranscription">Select transcription:</label>
-    <label id="labelLanguage">Select language:</label>
-    <img id="labelLanguageFlag" src="flags/united-kingdom-flag-png-large.jpg" width="20" height="10" >
-  </div>
-  <div class="dropdownMenus" id="dropdownMenus">
-    <select name="ai_type" id="ai_type">
-    </select>
-    <select name="transkript_type" id="transkript_type">
-    </select>
-    <select name="output_type" id="output_type">
-      <option value="flac">flac</option>
-      <option value="mp3">mp3</option>
-      <option value="wav">wav</option>
-    </select>
-    <select name="language_option" id="language_option">
-    </select>
-  </div>
+<div id="middleContainerWrapper" class="middle-container-wrapper">
+  <button id="prevBtn" class="navBtn" disabled>&larr;</button>

-  <h1 id="h1">Video to document</h1> 
+  <div class="mitte" id="mitte">

-  <div class="upload-container" id="uploadContainer">
-    <p id="p1">Drag and drop video file</p>
-    <video id="previewThumbnail" autoplay="false">
-    </video>
-    <div class="file-name" id="fileName">No video chosen</div>
-    <div id="thumbnailContainer">
-      <img id="thumbnailImage" style="display:none;">
+    <div class="step" id="step1">
+      <div class="upload-container" id="uploadContainer">
+        <p id="p1">Drag and drop video file</p>
+        <video id="previewThumbnail" autoplay="false">
+        </video>
+        <div class="file-name" id="fileName">No video chosen</div>
+        <div id="thumbnailContainer">
+          <img id="thumbnailImage" style="display:none;">
+        </div>
+        <button class="custom-btn" id="manualUploadBtn">Search video</button>
+        <input type="file" id="videoUpload" accept="video/*">
+      </div>
+    </div>
+
+    <div class="step" id="step2" style="display:none;">
+      <div class="labelDiv" id="labelDiv">
+       <label id="labelKI">Select ki:</label>
+        <label id="labelTranscription">Select transcription:</label>
+        <label id="labelType">Select type:</label>
+        <label id="labelLanguage">Select language:</label>
+        <img id="labelLanguageFlag" src="flags/united-kingdom-flag-png-large.jpg" width="20" height="10" >
+      </div>
+      <div class="dropdownMenus" id="dropdownMenus">
+        <select name="ai_type" id="ai_type">
+        </select>
+        <select name="transkript_type" id="transkript_type">
+        </select>
+        <select name="output_type" id="output_type">
+          <option value="pdf">.pdf</option>
+          <option value="word">.word</option>
+          <option value="txt">.txt</option>
+        </select>
+        <select name="language_option" id="language_option">
+        </select>
+      </div>
+    </div>
+
+    <div class="step" id="step3" style="display:none;"> 
+      <div class="checkbox-group">
+        <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>
+        </div>
+        <div class="checkbox-container">
+          <input type="checkbox" name="docFormat" id="docFormatSummary1" value="Summary with timestamps">
+          <label id="label_summary" for="docFormatSummary">Agenda</label>
+        </div>
+        <div class="checkbox-container">
+          <input type="checkbox" name="docFormat" id="docFormatSummary2" value="Summary with timestamps">
+          <label id="label_summary" for="docFormatSummary">Resultprotocol</label>
+        </div>
+        <div class="checkbox-container">
+          <input type="checkbox" name="docFormat" id="docFormatSummary3" value="Summary with timestamps">
+          <label id="label_summary" for="docFormatSummary">Sprint Planning Note</label>
+        </div>
+        <div class="checkbox-container">
+          <input type="checkbox" name="docFormat" id="docFormatCustom" value="Summary with timestamps">
+          <select name="ai_type" id="ai_type">
+            <option>nichts</option>
+          </select>
+        </div>
+      </div>
+    </div>
+
+    <div class="step" id="step4" style="display:none;">
+      <button class="submit-btn" id="submitButton" onclick="checkBoxes()" disabled>Submit</button>
+
+      <div class="testy" id="testy">
+        <div class="box2" id="box1">
+        </div>
+        <p>---Starting---</p>
+        <div class="box2" id="box2">
+        </div>
+        <p>---Transkribing---</p>
+        <div class="box2" id="box3">
+        </div>
+        <p>---Document creation---</p>
+        <div class="box2" id="box4">
+        </div>
+      </div>
+    </div>
+
+    <div class="step" id="step5" style="display:none;">
+      <div class="speakerView" id="speakerView">
+       <label id="labelSpeaker">Select Speaker:</label>
+       <select name="cur_speaker" id="cur_speaker">
+          <options>Stefan</options>
+       </select>
+      </div>
+      <div class="speakerAudio" id="speakerAutio">
+        <label id="labelSpeakerAudio">Selected Speaker</label>
+        <audio controls id="speakerAudioViewer">
+        Currently there is no audio file here.
+        </audio> 
+      </div>
+      <div class="speakerWrite" id="speakerWrite">
+        <label id="labelSpeakerWriter">Write name:</label>
+        <input type="text" id="newSpeaker">
+      </div>
+      <button id="speakerLocker" onclick="rewriteSpeakerName()">Rename Speaker</button>
+      <button id="speakerResender" onclick="sendSpeakerPackages()">Rewrite document</button>
+    </div>
+
+    <div class="step" id="step6" style="display:none;">
+      <button class="download-btn" id="downloadButton" onclick="" disabled>Download</button>
+
+      <div class="progressbar" id="progressbar">
+        <div class="progress_fill"></div>
+        <span class="progress_text">0%</span>
+      </div>
    </div>
-      <button class="custom-btn" id="manualUploadBtn">Search video</button>
-  <input type="file" id="videoUpload" accept="video/*">
  </div>

-<div class="checkbox-group">
-  <label id="checkbox_group" 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">Meeting report</label>
-  </div>
+  <button id ="nextBtn" class="navBtn">&rarr;</button>

-  <div class="checkbox-container">
-    <input type="checkbox" name="docFormat" id="docFormatSummary" value="Summary with timestamps">
-    <label id="label_summary" for="docFormatSummary">Summary with timestamps</label>
-  </div>
 </div>

-<button class="submit-btn" id="submitButton" onclick="checkBoxes()" disabled>Submit</button>
-
-<div class="progressbar" id="progressbar">
-  <div class="progress_fill"></div>
-  <span class="progress_text">0%</span>
-</div>
-</div>
-  
 <script src="languages.js"></script>
 <script src="script.js"></script>
 <script src="./renderer.js"></script>
@@ -15,12 +15,17 @@ try {
        getModuleNames: () => ipcRenderer.invoke('get-module-names')
    })

-
-
-    ipcRenderer.on("progress", (event, resp) => {
-        alert(`Finished step ${resp.curstep} of ${resp.totalsteps}`)
+    contextBridge.exposeInMainWorld('electron', {
+        progress: (callback) => ipcRenderer.on('progress', callback)
    })

+    contextBridge.exposeInMainWorld('audios', {
+        speakerAudios: (callback) => ipcRenderer.on('speakerAudios', callback)
+    })
+    contextBridge.exposeInMainWorld("submitSpeaker", {
+        submitSpeaker: (speaker_names) => {ipcRenderer.send("speaker_submit", speaker_names)}
+    })
+    
    ipcRenderer.on("error", (event, err) => {alert(err)})
 } catch (error) {
    console.log("Error in preload.js");
@@ -55,24 +55,16 @@ language_option.addEventListener('change', (e)=>{
    
 });

+//listener for the file explorer search when something got selected
 videoUpload.addEventListener("change", () => {
  try {
-    activateSubmitBtn(videoUpload.files.length > 0);
+    if (videoUpload.files.length > 0) {
+      const file = videoUpload.files;
+      handleFiles(file);
+    }
  } catch (error) {
    console.log(error);
  }
-  
-});
-
-//listener for the file explorer search when something got selected
-videoUpload.addEventListener('change', () => {
-  try {
-    handleFiles(videoUpload.files);
-  } catch (error) {
-    console.log("Error in manualBtn EventListener change");
-    console.log(error);
-  }
-  
 });

 //listener for the file explorer search
@@ -84,4 +76,173 @@ manualUploadBtn.addEventListener('click', () => {
    console.log(error);
  }
  
-});
+});
+
+stepButtons.forEach(btn => {
+  btn.addEventListener("click", () => {
+    try {
+      const step = parseInt(btn.dataset.step);
+      showStep(step);
+    } catch (error) {
+      
+    }
+  });
+});
+
+prevBtn.addEventListener("click", () => {
+  try {
+    if (currentStep > 1) showStep(currentStep - 1);
+  } catch (error) {
+    
+  }
+});
+
+nextBtn.addEventListener("click", () => {
+  try {
+    if(currentStep < totalSteps) showStep(currentStep + 1);
+  } catch (error) {
+    
+  }
+});
+
+//Checkboxlistener so that only one can be selected at a time
+docFormat.addEventListener("change", (e) =>{
+  try {
+    if(docFormat.checked){
+      docFormatSummary1.checked = false;
+      docFormatSummary2.checked = false;
+      docFormatSummary3.checked = false;
+      docFormatCustom.checked = false;
+    }
+  } catch (error) {
+    
+  }
+})
+docFormatSummary1.addEventListener("change", (e) =>{
+  try {
+    if(docFormatSummary1.checked){
+      docFormat.checked = false;
+      docFormatSummary2.checked = false;
+      docFormatSummary3.checked = false;
+      docFormatCustom.checked = false;
+    }
+  } catch (error) {
+    
+  }
+})
+docFormatSummary2.addEventListener("change", (e) =>{
+  try {
+    if(docFormatSummary2.checked){
+      docFormatSummary1.checked = false;
+      docFormat.checked = false;
+      docFormatSummary3.checked = false;
+      docFormatCustom.checked = false;
+    }
+  } catch (error) {
+    
+  }
+})
+docFormatSummary3.addEventListener("change", (e) =>{
+  try {
+    if(docFormatSummary3.checked){
+      docFormatSummary1.checked = false;
+      docFormatSummary2.checked = false;
+      docFormat.checked = false;
+      docFormatCustom.checked = false;
+    }
+  } catch (error) {
+    
+  }
+})
+docFormatCustom.addEventListener("change", (e) =>{
+  try {
+    if(docFormatCustom.checked){
+      docFormatSummary1.checked = false;
+      docFormatSummary2.checked = false;
+      docFormatSummary3.checked = false;
+      docFormat.checked = false;
+    }
+  } catch (error) {
+    
+  }
+})
+
+//Speaker change listener
+cur_speaker.addEventListener("change", (e) =>{
+  try {
+    document.getElementById("speakerAudioViewer").src = valy[e.target.value].source;
+  } catch (error) {
+    
+  }
+})
+
+window.electron.speakerAudios((event, arg) => {
+  try {
+    setSpeakerAudiosValue(arg);
+    loadSpeakerOptions(arg);
+  } catch (error) {
+    
+  }
+})
+
+window.electron.progress((event, arg) => {
+    if(arg.curstep == 1){
+      setCircleOne();
+    }else if(arg.curstep == 2){
+      setCircleZwo();
+    } else if(arg.curstep == 3){
+      setCircleThree();
+    }else if(arg.curstep == 4){
+      setCircleFour();
+    }
+});
+
+function setCircleOne(){
+  try {
+    if(document.getElementById("box1").style.backgroundColor == "green"){
+      document.getElementById("box1").style.backgroundColor = "red";
+    }else{
+      document.getElementById("box1").style.backgroundColor = "green";
+    }
+  } catch (error) {
+  }
+
+}
+function setCircleZwo(){
+  try {
+    if(document.getElementById("box2").style.backgroundColor == "green"){
+      document.getElementById("box2").style.backgroundColor = "red";
+    }else{
+      document.getElementById("box2").style.backgroundColor = "green";
+    }
+  } catch (error) {
+    
+  }
+  
+}
+function setCircleThree(){
+  try {
+    if(document.getElementById("box3").style.backgroundColor == "green"){
+      document.getElementById("box3").style.backgroundColor = "red";
+    }else{
+      document.getElementById("box3").style.backgroundColor = "green";
+    }
+  } catch (error) {
+    
+  }
+  
+}
+function setCircleFour(){
+  try {
+    if(document.getElementById("box4").style.backgroundColor == "green"){
+      document.getElementById("box4").style.backgroundColor = "red";
+    }else{
+      document.getElementById("box4").style.backgroundColor = "green";
+    }
+  } catch (error) {
+    
+  } 
+}
+
+
+
@@ -1,4 +1,4 @@
-
+let currentVideoPath = null;
 //function to check if one checkbox is at least klicked
 function checkBoxes() {
  try {
@@ -37,6 +37,11 @@ function checkBoxes() {
          iter++;
          } 
        });
+        document.getElementById("testy").style.visibility = "visible"
+        document.getElementById("box1").style.backgroundColor = "red";
+        document.getElementById("box2").style.backgroundColor = "red";
+        document.getElementById("box3").style.backgroundColor = "red";
+        document.getElementById("box4").style.backgroundColor = "red";
        console.log(selectedCheckboxes);
        const outputType = document.getElementById("output_type");
        const transcriptionType = document.getElementById("transkript_type");
@@ -100,11 +105,13 @@ function changeLanguage(language) {
 function handleFiles(files) {
  try {
    if (files.length > 0) {
+      document.getElementById("progressbar").style.visibility = "visible";
      const file = files[0];
      if (file.type.startsWith('video/')) {
        const filePath = window.explorer.onFileDrop(files[0])
        videoUpload.files = files;
        fileName.textContent = `Chosen video: ${file.name}`;
+        currentVideoPath = filePath;
        generateThumbnail(filePath);
        activateSubmitBtn(true);
      }
@@ -167,6 +174,25 @@ function loadTranscriptionOptions(options){
  }
 }

+//function to load data type options to the drop down list
+function loadDataTypeOptions(options){
+  try {
+    var menu = document.getElementById('output_type');
+    var object_holdy;
+    var choice ;
+    object_holdy = options
+    for(i = 0; i < options.length; i++){
+      choice = document.createElement('option');
+      choice.textContent = object_holdy[i].displayname;
+      choice.value = object_holdy[i].name;
+      menu.appendChild(choice);
+    }
+  } catch (error) {
+    console.log("Error in script.js function loadDataTypeOptions");
+    console.log(error);
+  }
+}
+
 //function to load language options to the drop down list
 function loadLanguageOptions(){
  try {
@@ -180,16 +206,48 @@ function loadLanguageOptions(){
      choice.value = object_holdy[i];
      menu.appendChild(choice);
    }
-    
  } catch (error) {
    console.log("Error in script.js loadLanguageOptions function");
    console.log(error);
  }
 }

+//function to load speaker options to the drop down list
+function loadSpeakerOptions(options){
+  try {
+    var menu = document.getElementById('speaker_option');
+    var object_holdy;
+    var choice;
+    object_holdy = options.keys();
+    for(i = 0; i < options.length; i++){
+      choice = document.createElement('option');
+      choice.textContent = options[object_holdy[i]].name;
+      choice.value = options[object_holdy[i]].name;
+      menu.appendChild(choice);
+    }
+  } catch (error) {
+    console.log("Error in script.js loadSpeakerOptions function");
+    console.log(error);
+  }
+}
+
+//function to load speaker audio file options to the drop down list
+function loadSpeakerAudio(option){
+  try {
+    var menu = document.getElementById('speakerAudioViewer');
+    var aud = document.createElement("source");
+    aud.src = options;
+    menu.appendChild(aud);
+  } catch (error) {
+    console.log("Error in script.js loadSpeakerAudio function");
+    console.log(error);
+  }
+}
+
+
 function activateSubmitBtn(hasFile){
  try {
-    submitButton.disabled = !hasFile;
+    document.getElementById("submitButton").disabled = !hasFile;
  } catch (error) {
    console.log(error);
  }
@@ -214,3 +272,61 @@ function generateThumbnail(path){
  videoElement.style.maxHeight = 40;
  videoElement.autoplay = false;
 }
+
+//Step-navigation
+const steps = document.querySelectorAll(".step");
+const stepButtons = document.querySelectorAll(".step-item");
+let currentStep = 1;
+const totalSteps = steps.length;
+
+function showStep(stepNumber) {
+  if (stepNumber < 1 || stepNumber > totalSteps){
+    console.error("StepNumber out of Bounds", stepNumber);
+    return;
+  }
+  steps.forEach(step => step.style.display = "none");
+  document.getElementById("step" + stepNumber).style.display = "block";
+
+  stepButtons.forEach(btn => btn.classList.remove("active"));
+  document.querySelector(`.step-item[data-step="${stepNumber}"]`).classList.add("active");
+  const activeBtn = document.querySelector(`.step-item[data-step="${stepNumber}"]`);
+
+  if(activeBtn) activeBtn.classList.add("active");
+
+  prevBtn.disabled = stepNumber == 1;
+  nextBtn.disabled = stepNumber === totalSteps;
+  currentStep = stepNumber;
+}
+
+
+//Audio value setter
+var speakerAudios = {};
+var speakerEndValues = {};
+function setSpeakerAudiosValue(valy){
+  try {
+    speakerAudios = valy;
+    speakerRewriten = valy;
+    document.getElementById("speakerAudioViewer").src = valy.speakerA.source;
+  } catch (error) {
+    
+  }
+}
+
+function rewriteSpeakerName(){
+  try {
+    var tempy = document.getElementById("cur_speaker").textContent;
+    speakerAudios[tempy].name = document.getElementById("newSpeaker").textContent;
+    document.getElementById("cur_speaker").textContent = document.getElementById("newSpeaker").textContent;
+  } catch (error) {
+    
+  }
+}
+
+function sendSpeakerPackages(){
+  try {
+    window.sendSpeakerPackages(speakerAudios);
+  } catch (error) {
+    
+  }
+}
+
@@ -6,11 +6,33 @@ body {
  align-items: center;
  height: 100vh;
  background-color: #f2f3f4;
-  gap: 15px;
+  gap: 10px;
  margin: 0;
 }
 
- 
+#h1 {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  margin: 0;
+  z-index: 20;
+
+}
+
+#h1-wrapper {
+  position: relative;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  width: 770px;
+  height: 60px; 
+  background-color: #FFF;
+  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;
@@ -91,25 +113,73 @@ 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;
  padding: 10px 20px;
-  margin-top: 10px;
+  margin-left: 80px;
+  margin-top: 30px;
  margin-bottom: 10px;
  background-color: #007BFF;
  color: white;
@@ -126,13 +196,12 @@ gap: 5px;
 }
 
 .mitte {
-  background-color: #FDFCFA;
+  background-color: #FFF;
  display: flex;
  width: 700px;
  flex-direction: column;
  align-items: center;
-  padding: 5% 50px;
-  margin-top: 20px;
+  padding: 40px;
  gap: 10px;
  border: 0px;
  border-color: black;
@@ -141,14 +210,11 @@ gap: 5px;
  box-shadow: 0px 4px 10px rgba(0,0,0,0.1);
 }
 
-h1 {
-  align-content: center;
-}
- 
 .progressbar{
  position: relative;
  width: 210px;
  height: 30px;
+  margin: 50px 20px 5px 20px;
  background: rgb(42, 46, 78);
  border-radius: 5px;
  overflow: hidden;
@@ -173,9 +239,10 @@ h1 {

 .dropdownMenus {
  display: flex;
-  justify-content: flex-end;
+  justify-content: center;
  margin-top: 1px;
-  gap: 150px;
+  margin-bottom: 30px;
+  gap: 170px;
  padding: 2px 10px 2px 10px;
 }

@@ -184,5 +251,229 @@ h1 {
 }

 .labelDiv {
-  gap: 200px;
+  gap: 60px;
+  display: flex;
+  justify-content: center;
+  overflow-wrap:inherit;
+  padding-bottom: 20px;
+  margin-top: 40px;
+  margin-bottom: 10px;
+}
+
+/*Step bar*/
+.step-nav {
+  display: flex;
+  gap: 20px;
+  justify-content: center;
+  background: #fff;
+  padding: 10px 30px;
+  border-radius: 6px;
+  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
+}
+
+.step-item {
+  padding: 10px 25px;
+  border-radius: 8px;
+  background: #eee;
+  cursor: pointer;
+  font-weight: bold;
+  transition: 0.2s;
+}
+
+.step-item.active {
+  background: #007BFF;
+  color: white;
+}
+
+.step-item:hover {
+  background: #d9d9d9;
+}
+
+/*panels*/
+.step {
+  margin-top: 70px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 400px;
+}
+
+/*Navigation arrows*/
+.step-nav-arrows {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.middle-container-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 30px;
+  width: max-content;
+  height: auto;
+}
+
+.navBtn {
+  display: flex;
+  justify-content: center;
+  padding: 10px 25px;
+  background-color: #007BFF;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.navBtn:disabled {
+  background-color: #ccc;
+  cursor: not-allowed;
+}
+
+.testy{
+  background-color: #FFF;
+  display: flex;
+  width: auto;
+  flex-direction: row;
+  align-items: center;
+  margin-top: 20px;
+  gap: 10px;
+  border: 0px;
+  border-color: black;
+  border-style: solid;
+  border-radius: 6px;
+  visibility: hidden;
+}
+
+.box2 {
+    background-color: red;
+    width: 40px;
+    height: 40px;
+    padding: 5px;
+    border: 1px solid black;
+    margin: 5px;
+    border-radius: 100px;
+}
+
+li {
+  color: #FFF;
+}
+
+.p-menu1 {
+  margin-left: 20px;
+  z-index: 10;
+}
+
+.hamburger1 {
+  height: 45px;
+  margin: 0;
+  padding-top: 8px;
+  display: grid;
+  grid-template-rows: repeat(3, 1fr);
+  justify-items: center;
+  z-index: 120;
+}
+
+.hamburger1 div {
+  background-color: rgb(61, 61, 61);
+  position: relative;
+  width: 40px;
+  height: 5px;
+  margin-top: 0;
+  -webkit-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
+}
+
+#toggle1 {
+  display: none;
+}
+
+#toggle1:checked + .hamburger1 .top {
+  -webkit-transform: rotate(-45deg);
+          transform: rotate(-45deg);
+  margin-top: 22.5px;
+}
+
+#toggle1:checked + .hamburger1 .meat {
+  -webkit-transform: rotate(45deg);
+          transform: rotate(45deg);
+  margin-top: -5px;
+}
+
+#toggle1:checked + .hamburger1 .bottom {
+  -webkit-transform: scale(0);
+          transform: scale(0);
+}
+
+#toggle1:checked ~ .menu1 {
+  height: 150px;
+  width: 300px;
+}
+
+/* Menu */
+.menu1 {
+  position: absolute;
+  top: 55px;
+  left: 20px;
+  width: 240px;
+  border-radius: 5px;
+  background-color: #1C3B69;
+  margin: 0;
+  display: -ms-grid;
+  display: grid;
+  grid-template-rows: 1fr repeat(4, 0.5fr);
+  grid-row-gap: 25px;
+  padding: 0;
+  list-style: none;
+  clear: both;
+  width: auto;
+  text-align: center;
+  height: 0px;
+  overflow: hidden;
+  transition: height 0.3s ease, width 0.3s ease;
+  z-index: 9999;
+  -webkit-transition: all 0.3s ease;
+}
+
+.menu1 li:first-child {
+  margin-top: 30px;
+}
+
+.menu1 li:last-child {
+  margin-bottom: 30px;
+}
+
+.li1 {
+  width: 100%;
+  margin: 0;
+  padding: 10px 0;
+  font: 700 20px 'Oswald', sans-serif;
+}
+
+.li1:hover {
+  background-color: #FFF;
+  color: rgb(61, 61, 61);
+  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;
+}
+
+.download-btn {
+  display: flex;
+  justify-content: center;
+  padding: 10px 20px;
+  margin-left: 80px;
+  margin-top: 30px;
+  margin-bottom: 10px;
+  background-color: #007BFF;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 14px;
 }
@@ -61,7 +61,7 @@ let mainWindow;

 function createWindow() {
    mainWindow = new electron.BrowserWindow({
-        width: 800,
+        width: 1200,
        height: 800,
        webPreferences: {
            nodeIntegration: false,
Author	SHA1	Message	Date
MikeHughes-BIN	2998799826	Window width for the GUI to fit the Arrows	2025-12-15 16:42:44 +01:00
Hughes, Mike	6146e7091b	Merge branch 'feature/ui-test' into 'develop' Added to Step 2 and 3. Added a first new version of the progressbar +... See merge request proj-wise2526-video2document/video2document!46	2025-12-15 16:26:10 +01:00
Hughes, Mike	3a5540d865	Merge branch 'fix/use-new-meeting-report' into 'develop' the old report type was still used See merge request proj-wise2526-video2document/video2document!45	2025-12-15 16:10:37 +01:00
eric.minning	950cc17878	Merge branch 'feature/ui-test' of https://gitlab.rlp.net/proj-wise2526-video2document/video2document into feature/ui-test	2025-12-15 15:22:08 +01:00
eric.minning	aba8552d11	Fixes to the loading of the speaker options	2025-12-15 15:19:47 +01:00
Verena Schulz	500e62daf0	Merge branch 'feature/ui-test' of gitlab.rlp.net:proj-wise2526-video2document/video2document into feature/ui-test	2025-12-15 15:05:18 +01:00
Verena Schulz	ad6d20b134	Added download button (without function)	2025-12-15 15:04:05 +01:00
eric.minning	6e0ea41ea6	Implemented a first version for all functions for step5 speaker (untested)	2025-12-15 14:49:43 +01:00
eric.minning	d95b6d5178	Merge branch 'feature/ui-test' of https://gitlab.rlp.net/proj-wise2526-video2document/video2document into feature/ui-test	2025-12-15 13:54:40 +01:00
eric.minning	20b4ae6a3b	Checkbox fix, old progressbar removal and visibility fix in the new one	2025-12-15 13:54:31 +01:00
Verena Schulz	accb65252c	Improved stability	2025-12-15 13:48:27 +01:00
Verena Schulz	bb589e6aad	New Checkboxes	2025-12-13 21:21:17 +01:00
eric.minning	4747c44c52	Merge remote-tracking branch 'origin/develop' into feature/ui-test	2025-12-11 16:23:00 +01:00
eric.minning	a0abedc921	Removed a error in the speakerAudioViewer	2025-12-11 16:04:16 +01:00
Verena Schulz	b26ef96cfc	Prototype hamburger menu for language and help buttons	2025-12-10 16:59:14 +01:00
eric.minning	6eef82bb64	Implemented the color change of the progressbar	2025-12-09 17:03:02 +01:00
eric.minning	b182e0a3c7	fixed the submitbutton	2025-12-09 15:23:49 +01:00
eric.minning	34a8b186a8	removed an event listener which was doubeld and a submitbutton call	2025-12-09 15:12:32 +01:00
eric.minning	70d3bfa201	fixed error in file lookup	2025-12-09 15:01:16 +01:00
eric.minning	5661f7c13f	speaker fix	2025-12-09 14:50:19 +01:00
eric.minning	208879b497	Merge remote-tracking branch 'origin/develop' into feature/ui-test	2025-12-09 14:40:44 +01:00
eric.minning	f817d4c29e	Changed checkboxvalues and added more error catching	2025-12-09 14:38:26 +01:00
eric.minning	5e6b700c36	Merge remote-tracking branch 'origin/develop' into feature/ui-test	2025-12-09 14:21:14 +01:00
Verena Schulz	0efb7585ba	Fixed height of middle container and several other css bugs	2025-12-07 16:09:12 +01:00
eric.minning	59b820d917	Added to Step 2 and 3. Added a first new version of the progressbar + functions in Step 4. Implemented the basics and functions for Step 5	2025-12-05 17:02:20 +01:00
Verena Schulz	1c5d399c58	Added 5th and 6th step, headline above steps	2025-12-03 17:55:55 +01:00
Verena Schulz	33093733ef	Added arrows for navigating through steps	2025-12-02 17:13:36 +01:00
Verena Schulz	4f0d2bcc4a	Fixed mockup sequence	2025-11-27 18:57:17 +01:00
Verena Schulz	ef379a5b7b	First prototype of new mockup	2025-11-25 16:31:26 +01:00
Verena Schulz	0bbbb2f9b7	Fixed submit button bug and progessbar not showing when uploading video with button	2025-11-25 15:11:18 +01:00