Added arrows for navigating through steps

electron/main/index.html

@@ -15,6 +15,9 @@
   <div class="step-item" data-step="4">4. Step</div>
 </div>
  
+<div id="middleContainerWrapper" class="middle-container-wrapper">
+  <button id="prevBtn" class="navBtn" disabled>&larr;</button>
+
   <div class="mitte" id="mitte">
     <h1 id="h1">Video to document</h1> 
 
@@ -78,6 +81,10 @@
     </div>
   </div>
 
+  <button id ="nextBtn" class="navBtn">&rarr;</button>
+
+</div>
+
 <script src="languages.js"></script>
 <script src="script.js"></script>
 <script src="./renderer.js"></script>

electron/main/renderer.js

@@ -89,3 +89,18 @@ manualUploadBtn.addEventListener('click', () => {
   }
   
 });
+
+stepButtons.forEach(btn => {
+  btn.addEventListener("click", () => {
+    const step = btn.dataset.step;
+    showStep(step);
+  });
+});
+
+prevBtn.addEventListener("click", () => {
+  if (currentStep > 1) showStep(currentStep - 1);
+});
+
+nextBtn.addEventListener("click", () => {
+  if(currentStep < totalSteps) showStep(currentStep + 1);
+});

electron/main/script.js

@@ -216,23 +216,24 @@ function generateThumbnail(path){
   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) {
-  // Steps ein/ausblenden
   steps.forEach(step => step.style.display = "none");
   document.getElementById("step" + stepNumber).style.display = "block";
 
-  // Navigation highlighten
   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}"]`);
 
-// Klick-Events
+  if(activeBtn) activeBtn.classList.add("active");
-stepButtons.forEach(btn => {
+
-  btn.addEventListener("click", () => {
+  prevBtn.disabled = stepNumber == 1;
-    const step = btn.dataset.step;
+  nextBtn.disabled = stepNumber === totalSteps;
-    showStep(step);
+  currentStep = stepNumber;
-  });
+}
-});

electron/main/style.css

@@ -233,3 +233,35 @@ h1 {
   flex-direction: column;
   justify-content: center;
 }
+
+/*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;
+}
+
+.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;
+}