emily/video2document
1
0
Fork 0
mirror of https://gitlab.rlp.net/proj-wise2526-video2document/video2document.git synced 2026-06-15 18:01:52 +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
+19 -4
View File
@@ -7,11 +7,21 @@
<link rel="stylesheet" href="style.css">
</head>
<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">
<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>
@@ -26,9 +36,9 @@
<select name="language_option" id="language_option">
</select>
</div>
</div>
<h1 id="h1">Video to document</h1>
<div class="step" id="step3" style="display:none;">
<div class="upload-container" id="uploadContainer">
<p id="p1">Drag and drop video file</p>
<video id="previewThumbnail" autoplay="false">
@@ -40,7 +50,9 @@
<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="checkbox-group">
<label id="checkbox_group" for="checkbox-group">Choose prefered document style:</label>
<div class="checkbox-container">
@@ -53,7 +65,9 @@
<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">
@@ -61,7 +75,8 @@
<span class="progress_text">0%</span>
</div>
</div>
</div>
<script src="languages.js"></script>
<script src="script.js"></script>
<script src="./renderer.js"></script>
electron/main/script.js
+21
View File
@@ -215,3 +215,24 @@ function generateThumbnail(path){
videoElement.style.maxHeight = 40;
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 {
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,7 +129,7 @@ gap: 5px;
}
.mitte {
background-color: #FDFCFA;
background-color: #FFF;
display: flex;
width: 700px;
flex-direction: column;
@@ -149,6 +152,7 @@ h1 {
position: relative;
width: 210px;
height: 30px;
margin: 50px 20px 5px 20px;
background: rgb(42, 46, 78);
border-radius: 5px;
overflow: hidden;
@@ -173,9 +177,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 +189,47 @@ 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;
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;
}