1. Step
2. Step
3. Step
4. Step
-
Video to document
+
+
-
-
-
diff --git a/electron/main/renderer.js b/electron/main/renderer.js
index b8b4d4d..2cbb567 100644
--- a/electron/main/renderer.js
+++ b/electron/main/renderer.js
@@ -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);
});
\ No newline at end of file
diff --git a/electron/main/script.js b/electron/main/script.js
index f91430c..ee9b107 100644
--- a/electron/main/script.js
+++ b/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
-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;
+}
\ No newline at end of file
diff --git a/electron/main/style.css b/electron/main/style.css
index fe08c2a..c85d981 100644
--- a/electron/main/style.css
+++ b/electron/main/style.css
@@ -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;
}
\ No newline at end of file
Drag and drop video file
- -No video chosen
-
-
+
-
-
-
-
+
-Video to document
+ +
+
-
-
-
+
Drag and drop video file
+ +No video chosen
+
+
+
+
+
+ 
-