Added arrows for navigating through steps

2026-06-15 18:01:52 +02:00 · 2025-12-02 17:13:36 +01:00
parent 4f0d2bcc4a
commit 33093733ef
4 changed files with 121 additions and 66 deletions
@@ -8,74 +8,81 @@
 </head>
 <body>

-  <div class="step-nav">
+<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>
 
-<div class="mitte" id="mitte">
-  <h1 id="h1">Video to document</h1> 
+<div id="middleContainerWrapper" class="middle-container-wrapper">
+  <button id="prevBtn" class="navBtn" disabled>&larr;</button>

-<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 class="mitte" id="mitte">
+    <h1 id="h1">Video to document</h1> 
+
+    <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>
-      <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="mp4">mp4</option>
-    </select>
-    <select name="language_option" id="language_option">
-    </select>
-  </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="mp4">mp4</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_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>
+
+        <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>
+    </div>
+
+    <div class="step" id="step4" style="display:none;">
+      <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>
  </div>

-<div class="step" id="step3" style="display:none;"> 
-<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>
-</div>
-
-<div class="step" id="step4" style="display:none;">
-<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>
 </div>

 <script src="languages.js"></script>
@@ -88,4 +88,19 @@ manualUploadBtn.addEventListener('click', () => {
    console.log(error);
  }
  
+});
+
+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);
 });
@@ -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
-stepButtons.forEach(btn => {
-  btn.addEventListener("click", () => {
-    const step = btn.dataset.step;
-    showStep(step);
-  });
-});
+  if(activeBtn) activeBtn.classList.add("active");
+
+  prevBtn.disabled = stepNumber == 1;
+  nextBtn.disabled = stepNumber === totalSteps;
+  currentStep = stepNumber;
+}
@@ -232,4 +232,36 @@ h1 {
  display: flex;
  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;
 }