emily/video2document
1
0
Fork 0
mirror of https://gitlab.rlp.net/proj-wise2526-video2document/video2document.git synced 2026-06-16 18:31:51 +02:00
Code Issues Packages Projects Releases Wiki Activity

First prototype of new mockup

Browse Source
This commit is contained in:
Verena Schulz
2025-11-25 16:31:26 +01:00
parent 0bbbb2f9b7
commit ef379a5b7b
3 changed files with 92 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
electron/main/index.html
+17 -2
View File
@@ -8,10 +8,20 @@
</head> </head>
<body> <body>
<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"> <div class="mitte" id="mitte">
<h1 id="h1">Video to document</h1>
<div class="step" id="step1">
<div class="labelDiv" id="labelDiv"> <div class="labelDiv" id="labelDiv">
<label id="labelKI">Select ki:</label> <label id="labelKI">Select ki:</label>
<label id="labelTranscription">Select transcription:</label> <label id="labelTranscription">Select transcription:</label>
<label id="labelType">Select type:</label>
<label id="labelLanguage">Select language:</label> <label id="labelLanguage">Select language:</label>
<img id="labelLanguageFlag" src="flags/united-kingdom-flag-png-large.jpg" width="20" height="10" > <img id="labelLanguageFlag" src="flags/united-kingdom-flag-png-large.jpg" width="20" height="10" >
</div> </div>
@@ -26,9 +36,9 @@
<select name="language_option" id="language_option"> <select name="language_option" id="language_option">
</select> </select>
</div> </div>
</div>
<h1 id="h1">Video to document</h1> <div class="step" id="step3" style="display:none;">
<div class="upload-container" id="uploadContainer"> <div class="upload-container" id="uploadContainer">
<p id="p1">Drag and drop video file</p> <p id="p1">Drag and drop video file</p>
<video id="previewThumbnail" autoplay="false"> <video id="previewThumbnail" autoplay="false">
@@ -40,7 +50,9 @@
<button class="custom-btn" id="manualUploadBtn">Search video</button> <button class="custom-btn" id="manualUploadBtn">Search video</button>
<input type="file" id="videoUpload" accept="video/*"> <input type="file" id="videoUpload" accept="video/*">
</div> </div>
</div>
<div class="step" id="step2" style="display:none;">
<div class="checkbox-group"> <div class="checkbox-group">
<label id="checkbox_group" for="checkbox-group">Choose prefered document style:</label> <label id="checkbox_group" for="checkbox-group">Choose prefered document style:</label>
<div class="checkbox-container"> <div class="checkbox-container">
@@ -53,7 +65,9 @@
<label id="label_summary" for="docFormatSummary">Summary with timestamps</label> <label id="label_summary" for="docFormatSummary">Summary with timestamps</label>
</div> </div>
</div> </div>
</div>
<div class="step" id="step4" style="display:none;">
<button class="submit-btn" id="submitButton" onclick="checkBoxes()" disabled>Submit</button> <button class="submit-btn" id="submitButton" onclick="checkBoxes()" disabled>Submit</button>
<div class="progressbar" id="progressbar"> <div class="progressbar" id="progressbar">
@@ -61,6 +75,7 @@
<span class="progress_text">0%</span> <span class="progress_text">0%</span>
</div> </div>
</div> </div>
</div>
<script src="languages.js"></script> <script src="languages.js"></script>
<script src="script.js"></script> <script src="script.js"></script>
electron/main/script.js
+21
View File
@@ -215,3 +215,24 @@ function generateThumbnail(path){
videoElement.style.maxHeight = 40; videoElement.style.maxHeight = 40;
videoElement.autoplay = false; videoElement.autoplay = false;
} }
const steps = document.querySelectorAll(".step");
const stepButtons = document.querySelectorAll(".step-item");
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");
}
// Klick-Events
stepButtons.forEach(btn => {
btn.addEventListener("click", () => {
const step = btn.dataset.step;
showStep(step);
});
});
electron/main/style.css
+52 -5
View File
@@ -108,8 +108,11 @@ gap: 5px;
} }
.submit-btn { .submit-btn {
display: flex;
justify-content: center;
padding: 10px 20px; padding: 10px 20px;
margin-top: 10px; margin-left: 80px;
margin-top: 30px;
margin-bottom: 10px; margin-bottom: 10px;
background-color: #007BFF; background-color: #007BFF;
color: white; color: white;
@@ -126,7 +129,7 @@ gap: 5px;
} }
.mitte { .mitte {
background-color: #FDFCFA; background-color: #FFF;
display: flex; display: flex;
width: 700px; width: 700px;
flex-direction: column; flex-direction: column;
@@ -149,6 +152,7 @@ h1 {
position: relative; position: relative;
width: 210px; width: 210px;
height: 30px; height: 30px;
margin: 50px 20px 5px 20px;
background: rgb(42, 46, 78); background: rgb(42, 46, 78);
border-radius: 5px; border-radius: 5px;
overflow: hidden; overflow: hidden;
@@ -173,9 +177,10 @@ h1 {
.dropdownMenus { .dropdownMenus {
display: flex; display: flex;
justify-content: flex-end; justify-content: center;
margin-top: 1px; margin-top: 1px;
gap: 150px; margin-bottom: 30px;
gap: 170px;
padding: 2px 10px 2px 10px; padding: 2px 10px 2px 10px;
} }
@@ -184,5 +189,47 @@ h1 {
} }
.labelDiv { .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;
margin-top: 20px;
background: #fff;
padding: 10px 20px;
border-radius: 6px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.step-item {
padding: 10px 15px;
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 {
display: flex;
flex-direction: column;
justify-content: center;
} }