mirror of
https://gitlab.rlp.net/proj-wise2526-video2document/video2document.git
synced 2026-06-15 18:01:52 +02:00
Merge branch 'feature/ui-test' into 'develop'
Added to Step 2 and 3. Added a first new version of the progressbar +... See merge request proj-wise2526-video2document/video2document!46
This commit is contained in:
Hughes, Mike
+143
-47
@@ -8,60 +8,156 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="mitte" id="mitte">
|
<div id="h1-wrapper">
|
||||||
<div class="labelDiv" id="labelDiv">
|
<section class="p-menu1">
|
||||||
<label id="labelKI">Select ki:</label>
|
<nav id="navbar" class="navigation" role="navigation">
|
||||||
<label id="labelTranscription">Select transcription:</label>
|
<input id="toggle1" type="checkbox" />
|
||||||
<label id="labelLanguage">Select language:</label>
|
<label class="hamburger1" for="toggle1">
|
||||||
<img id="labelLanguageFlag" src="flags/united-kingdom-flag-png-large.jpg" width="20" height="10" >
|
<div class="top"></div>
|
||||||
</div>
|
<div class="meat"></div>
|
||||||
<div class="dropdownMenus" id="dropdownMenus">
|
<div class="bottom"></div>
|
||||||
<select name="ai_type" id="ai_type">
|
</label>
|
||||||
</select>
|
|
||||||
<select name="transkript_type" id="transkript_type">
|
<nav class="menu1">
|
||||||
</select>
|
<li class="li1">Help</li>
|
||||||
<select name="output_type" id="output_type">
|
<li class="li1">Language</li>
|
||||||
<option value="flac">flac</option>
|
</nav>
|
||||||
<option value="mp3">mp3</option>
|
</nav>
|
||||||
<option value="wav">wav</option>
|
</section>
|
||||||
</select>
|
|
||||||
<select name="language_option" id="language_option">
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 id="h1">Video to document</h1>
|
<h1 id="h1">Video to document</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="upload-container" id="uploadContainer">
|
<div class="step-nav">
|
||||||
<p id="p1">Drag and drop video file</p>
|
<div class="step-item active" data-step="1">1. Step</div>
|
||||||
<video id="previewThumbnail" autoplay="false">
|
<div class="step-item" data-step="2">2. Step</div>
|
||||||
</video>
|
<div class="step-item" data-step="3">3. Step</div>
|
||||||
<div class="file-name" id="fileName">No video chosen</div>
|
<div class="step-item" data-step="4">4. Step</div>
|
||||||
<div id="thumbnailContainer">
|
<div class="step-item" data-step="5">5. Step</div>
|
||||||
<img id="thumbnailImage" style="display:none;">
|
<div class="step-item" data-step="6">6. Step</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="middleContainerWrapper" class="middle-container-wrapper">
|
||||||
|
<button id="prevBtn" class="navBtn" disabled>←</button>
|
||||||
|
|
||||||
|
<div class="mitte" id="mitte">
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<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="pdf">.pdf</option>
|
||||||
|
<option value="word">.word</option>
|
||||||
|
<option value="txt">.txt</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-label" 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">Follow-up Report</label>
|
||||||
|
</div>
|
||||||
|
<div class="checkbox-container">
|
||||||
|
<input type="checkbox" name="docFormat" id="docFormatSummary1" value="Summary with timestamps">
|
||||||
|
<label id="label_summary" for="docFormatSummary">Agenda</label>
|
||||||
|
</div>
|
||||||
|
<div class="checkbox-container">
|
||||||
|
<input type="checkbox" name="docFormat" id="docFormatSummary2" value="Summary with timestamps">
|
||||||
|
<label id="label_summary" for="docFormatSummary">Resultprotocol</label>
|
||||||
|
</div>
|
||||||
|
<div class="checkbox-container">
|
||||||
|
<input type="checkbox" name="docFormat" id="docFormatSummary3" value="Summary with timestamps">
|
||||||
|
<label id="label_summary" for="docFormatSummary">Sprint Planning Note</label>
|
||||||
|
</div>
|
||||||
|
<div class="checkbox-container">
|
||||||
|
<input type="checkbox" name="docFormat" id="docFormatCustom" value="Summary with timestamps">
|
||||||
|
<select name="ai_type" id="ai_type">
|
||||||
|
<option>nichts</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="step" id="step4" style="display:none;">
|
||||||
|
<button class="submit-btn" id="submitButton" onclick="checkBoxes()" disabled>Submit</button>
|
||||||
|
|
||||||
|
<div class="testy" id="testy">
|
||||||
|
<div class="box2" id="box1">
|
||||||
|
</div>
|
||||||
|
<p>---Starting---</p>
|
||||||
|
<div class="box2" id="box2">
|
||||||
|
</div>
|
||||||
|
<p>---Transkribing---</p>
|
||||||
|
<div class="box2" id="box3">
|
||||||
|
</div>
|
||||||
|
<p>---Document creation---</p>
|
||||||
|
<div class="box2" id="box4">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="step" id="step5" style="display:none;">
|
||||||
|
<div class="speakerView" id="speakerView">
|
||||||
|
<label id="labelSpeaker">Select Speaker:</label>
|
||||||
|
<select name="cur_speaker" id="cur_speaker">
|
||||||
|
<options>Stefan</options>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="speakerAudio" id="speakerAutio">
|
||||||
|
<label id="labelSpeakerAudio">Selected Speaker</label>
|
||||||
|
<audio controls id="speakerAudioViewer">
|
||||||
|
Currently there is no audio file here.
|
||||||
|
</audio>
|
||||||
|
</div>
|
||||||
|
<div class="speakerWrite" id="speakerWrite">
|
||||||
|
<label id="labelSpeakerWriter">Write name:</label>
|
||||||
|
<input type="text" id="newSpeaker">
|
||||||
|
</div>
|
||||||
|
<button id="speakerLocker" onclick="rewriteSpeakerName()">Rename Speaker</button>
|
||||||
|
<button id="speakerResender" onclick="sendSpeakerPackages()">Rewrite document</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="step" id="step6" style="display:none;">
|
||||||
|
<button class="download-btn" id="downloadButton" onclick="" disabled>Download</button>
|
||||||
|
|
||||||
|
<div class="progressbar" id="progressbar">
|
||||||
|
<div class="progress_fill"></div>
|
||||||
|
<span class="progress_text">0%</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button class="custom-btn" id="manualUploadBtn">Search video</button>
|
|
||||||
<input type="file" id="videoUpload" accept="video/*">
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="checkbox-group">
|
<button id ="nextBtn" class="navBtn">→</button>
|
||||||
<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>
|
|
||||||
|
|
||||||
<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>
|
<script src="languages.js"></script>
|
||||||
|
|||||||
@@ -15,10 +15,15 @@ try {
|
|||||||
getModuleNames: () => ipcRenderer.invoke('get-module-names')
|
getModuleNames: () => ipcRenderer.invoke('get-module-names')
|
||||||
})
|
})
|
||||||
|
|
||||||
|
contextBridge.exposeInMainWorld('electron', {
|
||||||
|
progress: (callback) => ipcRenderer.on('progress', callback)
|
||||||
|
})
|
||||||
|
|
||||||
|
contextBridge.exposeInMainWorld('audios', {
|
||||||
ipcRenderer.on("progress", (event, resp) => {
|
speakerAudios: (callback) => ipcRenderer.on('speakerAudios', callback)
|
||||||
alert(`Finished step ${resp.curstep} of ${resp.totalsteps}`)
|
})
|
||||||
|
contextBridge.exposeInMainWorld("submitSpeaker", {
|
||||||
|
submitSpeaker: (speaker_names) => {ipcRenderer.send("speaker_submit", speaker_names)}
|
||||||
})
|
})
|
||||||
|
|
||||||
ipcRenderer.on("error", (event, err) => {alert(err)})
|
ipcRenderer.on("error", (event, err) => {alert(err)})
|
||||||
|
|||||||
+174
-13
@@ -55,24 +55,16 @@ language_option.addEventListener('change', (e)=>{
|
|||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
//listener for the file explorer search when something got selected
|
||||||
videoUpload.addEventListener("change", () => {
|
videoUpload.addEventListener("change", () => {
|
||||||
try {
|
try {
|
||||||
activateSubmitBtn(videoUpload.files.length > 0);
|
if (videoUpload.files.length > 0) {
|
||||||
|
const file = videoUpload.files;
|
||||||
|
handleFiles(file);
|
||||||
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.log(error);
|
console.log(error);
|
||||||
}
|
}
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
//listener for the file explorer search when something got selected
|
|
||||||
videoUpload.addEventListener('change', () => {
|
|
||||||
try {
|
|
||||||
handleFiles(videoUpload.files);
|
|
||||||
} catch (error) {
|
|
||||||
console.log("Error in manualBtn EventListener change");
|
|
||||||
console.log(error);
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
//listener for the file explorer search
|
//listener for the file explorer search
|
||||||
@@ -85,3 +77,172 @@ manualUploadBtn.addEventListener('click', () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
stepButtons.forEach(btn => {
|
||||||
|
btn.addEventListener("click", () => {
|
||||||
|
try {
|
||||||
|
const step = parseInt(btn.dataset.step);
|
||||||
|
showStep(step);
|
||||||
|
} catch (error) {
|
||||||
|
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
prevBtn.addEventListener("click", () => {
|
||||||
|
try {
|
||||||
|
if (currentStep > 1) showStep(currentStep - 1);
|
||||||
|
} catch (error) {
|
||||||
|
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
nextBtn.addEventListener("click", () => {
|
||||||
|
try {
|
||||||
|
if(currentStep < totalSteps) showStep(currentStep + 1);
|
||||||
|
} catch (error) {
|
||||||
|
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
//Checkboxlistener so that only one can be selected at a time
|
||||||
|
docFormat.addEventListener("change", (e) =>{
|
||||||
|
try {
|
||||||
|
if(docFormat.checked){
|
||||||
|
docFormatSummary1.checked = false;
|
||||||
|
docFormatSummary2.checked = false;
|
||||||
|
docFormatSummary3.checked = false;
|
||||||
|
docFormatCustom.checked = false;
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
|
||||||
|
}
|
||||||
|
})
|
||||||
|
docFormatSummary1.addEventListener("change", (e) =>{
|
||||||
|
try {
|
||||||
|
if(docFormatSummary1.checked){
|
||||||
|
docFormat.checked = false;
|
||||||
|
docFormatSummary2.checked = false;
|
||||||
|
docFormatSummary3.checked = false;
|
||||||
|
docFormatCustom.checked = false;
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
|
||||||
|
}
|
||||||
|
})
|
||||||
|
docFormatSummary2.addEventListener("change", (e) =>{
|
||||||
|
try {
|
||||||
|
if(docFormatSummary2.checked){
|
||||||
|
docFormatSummary1.checked = false;
|
||||||
|
docFormat.checked = false;
|
||||||
|
docFormatSummary3.checked = false;
|
||||||
|
docFormatCustom.checked = false;
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
|
||||||
|
}
|
||||||
|
})
|
||||||
|
docFormatSummary3.addEventListener("change", (e) =>{
|
||||||
|
try {
|
||||||
|
if(docFormatSummary3.checked){
|
||||||
|
docFormatSummary1.checked = false;
|
||||||
|
docFormatSummary2.checked = false;
|
||||||
|
docFormat.checked = false;
|
||||||
|
docFormatCustom.checked = false;
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
|
||||||
|
}
|
||||||
|
})
|
||||||
|
docFormatCustom.addEventListener("change", (e) =>{
|
||||||
|
try {
|
||||||
|
if(docFormatCustom.checked){
|
||||||
|
docFormatSummary1.checked = false;
|
||||||
|
docFormatSummary2.checked = false;
|
||||||
|
docFormatSummary3.checked = false;
|
||||||
|
docFormat.checked = false;
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
//Speaker change listener
|
||||||
|
cur_speaker.addEventListener("change", (e) =>{
|
||||||
|
try {
|
||||||
|
document.getElementById("speakerAudioViewer").src = valy[e.target.value].source;
|
||||||
|
} catch (error) {
|
||||||
|
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
window.electron.speakerAudios((event, arg) => {
|
||||||
|
try {
|
||||||
|
setSpeakerAudiosValue(arg);
|
||||||
|
loadSpeakerOptions(arg);
|
||||||
|
} catch (error) {
|
||||||
|
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
window.electron.progress((event, arg) => {
|
||||||
|
if(arg.curstep == 1){
|
||||||
|
setCircleOne();
|
||||||
|
}else if(arg.curstep == 2){
|
||||||
|
setCircleZwo();
|
||||||
|
} else if(arg.curstep == 3){
|
||||||
|
setCircleThree();
|
||||||
|
}else if(arg.curstep == 4){
|
||||||
|
setCircleFour();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function setCircleOne(){
|
||||||
|
try {
|
||||||
|
if(document.getElementById("box1").style.backgroundColor == "green"){
|
||||||
|
document.getElementById("box1").style.backgroundColor = "red";
|
||||||
|
}else{
|
||||||
|
document.getElementById("box1").style.backgroundColor = "green";
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
function setCircleZwo(){
|
||||||
|
try {
|
||||||
|
if(document.getElementById("box2").style.backgroundColor == "green"){
|
||||||
|
document.getElementById("box2").style.backgroundColor = "red";
|
||||||
|
}else{
|
||||||
|
document.getElementById("box2").style.backgroundColor = "green";
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
function setCircleThree(){
|
||||||
|
try {
|
||||||
|
if(document.getElementById("box3").style.backgroundColor == "green"){
|
||||||
|
document.getElementById("box3").style.backgroundColor = "red";
|
||||||
|
}else{
|
||||||
|
document.getElementById("box3").style.backgroundColor = "green";
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
function setCircleFour(){
|
||||||
|
try {
|
||||||
|
if(document.getElementById("box4").style.backgroundColor == "green"){
|
||||||
|
document.getElementById("box4").style.backgroundColor = "red";
|
||||||
|
}else{
|
||||||
|
document.getElementById("box4").style.backgroundColor = "green";
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
+119
-3
@@ -1,4 +1,4 @@
|
|||||||
|
let currentVideoPath = null;
|
||||||
//function to check if one checkbox is at least klicked
|
//function to check if one checkbox is at least klicked
|
||||||
function checkBoxes() {
|
function checkBoxes() {
|
||||||
try {
|
try {
|
||||||
@@ -37,6 +37,11 @@ function checkBoxes() {
|
|||||||
iter++;
|
iter++;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
document.getElementById("testy").style.visibility = "visible"
|
||||||
|
document.getElementById("box1").style.backgroundColor = "red";
|
||||||
|
document.getElementById("box2").style.backgroundColor = "red";
|
||||||
|
document.getElementById("box3").style.backgroundColor = "red";
|
||||||
|
document.getElementById("box4").style.backgroundColor = "red";
|
||||||
console.log(selectedCheckboxes);
|
console.log(selectedCheckboxes);
|
||||||
const outputType = document.getElementById("output_type");
|
const outputType = document.getElementById("output_type");
|
||||||
const transcriptionType = document.getElementById("transkript_type");
|
const transcriptionType = document.getElementById("transkript_type");
|
||||||
@@ -100,11 +105,13 @@ function changeLanguage(language) {
|
|||||||
function handleFiles(files) {
|
function handleFiles(files) {
|
||||||
try {
|
try {
|
||||||
if (files.length > 0) {
|
if (files.length > 0) {
|
||||||
|
document.getElementById("progressbar").style.visibility = "visible";
|
||||||
const file = files[0];
|
const file = files[0];
|
||||||
if (file.type.startsWith('video/')) {
|
if (file.type.startsWith('video/')) {
|
||||||
const filePath = window.explorer.onFileDrop(files[0])
|
const filePath = window.explorer.onFileDrop(files[0])
|
||||||
videoUpload.files = files;
|
videoUpload.files = files;
|
||||||
fileName.textContent = `Chosen video: ${file.name}`;
|
fileName.textContent = `Chosen video: ${file.name}`;
|
||||||
|
currentVideoPath = filePath;
|
||||||
generateThumbnail(filePath);
|
generateThumbnail(filePath);
|
||||||
activateSubmitBtn(true);
|
activateSubmitBtn(true);
|
||||||
}
|
}
|
||||||
@@ -167,6 +174,25 @@ function loadTranscriptionOptions(options){
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//function to load data type options to the drop down list
|
||||||
|
function loadDataTypeOptions(options){
|
||||||
|
try {
|
||||||
|
var menu = document.getElementById('output_type');
|
||||||
|
var object_holdy;
|
||||||
|
var choice ;
|
||||||
|
object_holdy = options
|
||||||
|
for(i = 0; i < options.length; i++){
|
||||||
|
choice = document.createElement('option');
|
||||||
|
choice.textContent = object_holdy[i].displayname;
|
||||||
|
choice.value = object_holdy[i].name;
|
||||||
|
menu.appendChild(choice);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.log("Error in script.js function loadDataTypeOptions");
|
||||||
|
console.log(error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
//function to load language options to the drop down list
|
//function to load language options to the drop down list
|
||||||
function loadLanguageOptions(){
|
function loadLanguageOptions(){
|
||||||
try {
|
try {
|
||||||
@@ -180,16 +206,48 @@ function loadLanguageOptions(){
|
|||||||
choice.value = object_holdy[i];
|
choice.value = object_holdy[i];
|
||||||
menu.appendChild(choice);
|
menu.appendChild(choice);
|
||||||
}
|
}
|
||||||
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.log("Error in script.js loadLanguageOptions function");
|
console.log("Error in script.js loadLanguageOptions function");
|
||||||
console.log(error);
|
console.log(error);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//function to load speaker options to the drop down list
|
||||||
|
function loadSpeakerOptions(options){
|
||||||
|
try {
|
||||||
|
var menu = document.getElementById('speaker_option');
|
||||||
|
var object_holdy;
|
||||||
|
var choice;
|
||||||
|
object_holdy = options.keys();
|
||||||
|
for(i = 0; i < options.length; i++){
|
||||||
|
choice = document.createElement('option');
|
||||||
|
choice.textContent = options[object_holdy[i]].name;
|
||||||
|
choice.value = options[object_holdy[i]].name;
|
||||||
|
menu.appendChild(choice);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.log("Error in script.js loadSpeakerOptions function");
|
||||||
|
console.log(error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//function to load speaker audio file options to the drop down list
|
||||||
|
function loadSpeakerAudio(option){
|
||||||
|
try {
|
||||||
|
var menu = document.getElementById('speakerAudioViewer');
|
||||||
|
var aud = document.createElement("source");
|
||||||
|
aud.src = options;
|
||||||
|
menu.appendChild(aud);
|
||||||
|
} catch (error) {
|
||||||
|
console.log("Error in script.js loadSpeakerAudio function");
|
||||||
|
console.log(error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
function activateSubmitBtn(hasFile){
|
function activateSubmitBtn(hasFile){
|
||||||
try {
|
try {
|
||||||
submitButton.disabled = !hasFile;
|
document.getElementById("submitButton").disabled = !hasFile;
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.log(error);
|
console.log(error);
|
||||||
}
|
}
|
||||||
@@ -214,3 +272,61 @@ function generateThumbnail(path){
|
|||||||
videoElement.style.maxHeight = 40;
|
videoElement.style.maxHeight = 40;
|
||||||
videoElement.autoplay = false;
|
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) {
|
||||||
|
if (stepNumber < 1 || stepNumber > totalSteps){
|
||||||
|
console.error("StepNumber out of Bounds", stepNumber);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
steps.forEach(step => step.style.display = "none");
|
||||||
|
document.getElementById("step" + stepNumber).style.display = "block";
|
||||||
|
|
||||||
|
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}"]`);
|
||||||
|
|
||||||
|
if(activeBtn) activeBtn.classList.add("active");
|
||||||
|
|
||||||
|
prevBtn.disabled = stepNumber == 1;
|
||||||
|
nextBtn.disabled = stepNumber === totalSteps;
|
||||||
|
currentStep = stepNumber;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//Audio value setter
|
||||||
|
var speakerAudios = {};
|
||||||
|
var speakerEndValues = {};
|
||||||
|
function setSpeakerAudiosValue(valy){
|
||||||
|
try {
|
||||||
|
speakerAudios = valy;
|
||||||
|
speakerRewriten = valy;
|
||||||
|
document.getElementById("speakerAudioViewer").src = valy.speakerA.source;
|
||||||
|
} catch (error) {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function rewriteSpeakerName(){
|
||||||
|
try {
|
||||||
|
var tempy = document.getElementById("cur_speaker").textContent;
|
||||||
|
speakerAudios[tempy].name = document.getElementById("newSpeaker").textContent;
|
||||||
|
document.getElementById("cur_speaker").textContent = document.getElementById("newSpeaker").textContent;
|
||||||
|
} catch (error) {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function sendSpeakerPackages(){
|
||||||
|
try {
|
||||||
|
window.sendSpeakerPackages(speakerAudios);
|
||||||
|
} catch (error) {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
+315
-24
@@ -6,10 +6,32 @@ body {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
background-color: #f2f3f4;
|
background-color: #f2f3f4;
|
||||||
gap: 15px;
|
gap: 10px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#h1 {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
margin: 0;
|
||||||
|
z-index: 20;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#h1-wrapper {
|
||||||
|
position: relative;
|
||||||
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||||
|
width: 770px;
|
||||||
|
height: 60px;
|
||||||
|
background-color: #FFF;
|
||||||
|
box-shadow: 0px 4px 10px rgba(0,0,0,0.1);
|
||||||
|
border-radius: 5px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
.upload-container {
|
.upload-container {
|
||||||
background: white;
|
background: white;
|
||||||
@@ -91,25 +113,73 @@ input[type="file"] {
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.checkbox-group {
|
||||||
|
--borderColor: #007bfff5;
|
||||||
|
--borderWidth: .125em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-group input[type=checkbox] {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
vertical-align: middle;
|
||||||
|
background: #fff;
|
||||||
|
font-size: 1.8em;
|
||||||
|
border-radius: 0.125em;
|
||||||
|
display: inline-block;
|
||||||
|
border: var(--borderWidth) solid var(--borderColor);
|
||||||
|
width: 1em;
|
||||||
|
height: 1em;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.checkbox-group input[type=checkbox]:before,
|
||||||
|
.checkbox-group input[type=checkbox]:after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
background: var(--borderColor);
|
||||||
|
width: calc(var(--borderWidth) * 3);
|
||||||
|
height: var(--borderWidth);
|
||||||
|
top: 50%;
|
||||||
|
left: 10%;
|
||||||
|
transform-origin: left center;
|
||||||
|
}
|
||||||
|
.checkbox-group input[type=checkbox]:before {
|
||||||
|
transform: rotate(45deg) translate(calc(var(--borderWidth) / -2), calc(var(--borderWidth) / -2)) scaleX(0);
|
||||||
|
transition: transform 200ms ease-in 200ms;
|
||||||
|
}
|
||||||
|
.checkbox-group input[type=checkbox]:after {
|
||||||
|
width: calc(var(--borderWidth) * 5);
|
||||||
|
transform: rotate(-45deg) translateY(calc(var(--borderWidth) * 2)) scaleX(0);
|
||||||
|
transform-origin: left center;
|
||||||
|
transition: transform 200ms ease-in;
|
||||||
|
}
|
||||||
|
.checkbox-group input[type=checkbox]:checked:before {
|
||||||
|
transform: rotate(45deg) translate(calc(var(--borderWidth) / -2), calc(var(--borderWidth) / -2)) scaleX(1);
|
||||||
|
transition: transform 200ms ease-in;
|
||||||
|
}
|
||||||
|
.checkbox-group input[type=checkbox]:checked:after {
|
||||||
|
width: calc(var(--borderWidth) * 5);
|
||||||
|
transform: rotate(-45deg) translateY(calc(var(--borderWidth) * 2)) scaleX(1);
|
||||||
|
transition: transform 200ms ease-out 200ms;
|
||||||
|
}
|
||||||
|
.checkbox-group input[type=checkbox]:focus {
|
||||||
|
outline: calc(var(--borderWidth) / 2) dotted rgba(0, 0, 0, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
.checkbox-container{
|
.checkbox-container{
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
justify-items: left;
|
||||||
gap: 5px;
|
align-items: center;
|
||||||
|
gap: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.checkbox-group {
|
|
||||||
margin-top: 15px;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 10px;
|
|
||||||
align-items: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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,13 +196,12 @@ gap: 5px;
|
|||||||
}
|
}
|
||||||
|
|
||||||
.mitte {
|
.mitte {
|
||||||
background-color: #FDFCFA;
|
background-color: #FFF;
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 700px;
|
width: 700px;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 5% 50px;
|
padding: 40px;
|
||||||
margin-top: 20px;
|
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
border: 0px;
|
border: 0px;
|
||||||
border-color: black;
|
border-color: black;
|
||||||
@@ -141,14 +210,11 @@ gap: 5px;
|
|||||||
box-shadow: 0px 4px 10px rgba(0,0,0,0.1);
|
box-shadow: 0px 4px 10px rgba(0,0,0,0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
|
||||||
align-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progressbar{
|
.progressbar{
|
||||||
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 +239,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 +251,229 @@ 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;
|
||||||
|
justify-content: center;
|
||||||
|
background: #fff;
|
||||||
|
padding: 10px 30px;
|
||||||
|
border-radius: 6px;
|
||||||
|
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-item {
|
||||||
|
padding: 10px 25px;
|
||||||
|
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 {
|
||||||
|
margin-top: 70px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
min-height: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*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;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.testy{
|
||||||
|
background-color: #FFF;
|
||||||
|
display: flex;
|
||||||
|
width: auto;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 20px;
|
||||||
|
gap: 10px;
|
||||||
|
border: 0px;
|
||||||
|
border-color: black;
|
||||||
|
border-style: solid;
|
||||||
|
border-radius: 6px;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box2 {
|
||||||
|
background-color: red;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
padding: 5px;
|
||||||
|
border: 1px solid black;
|
||||||
|
margin: 5px;
|
||||||
|
border-radius: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
color: #FFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-menu1 {
|
||||||
|
margin-left: 20px;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger1 {
|
||||||
|
height: 45px;
|
||||||
|
margin: 0;
|
||||||
|
padding-top: 8px;
|
||||||
|
display: grid;
|
||||||
|
grid-template-rows: repeat(3, 1fr);
|
||||||
|
justify-items: center;
|
||||||
|
z-index: 120;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger1 div {
|
||||||
|
background-color: rgb(61, 61, 61);
|
||||||
|
position: relative;
|
||||||
|
width: 40px;
|
||||||
|
height: 5px;
|
||||||
|
margin-top: 0;
|
||||||
|
-webkit-transition: all 0.2s ease-in-out;
|
||||||
|
transition: all 0.2s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
#toggle1 {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#toggle1:checked + .hamburger1 .top {
|
||||||
|
-webkit-transform: rotate(-45deg);
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
margin-top: 22.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#toggle1:checked + .hamburger1 .meat {
|
||||||
|
-webkit-transform: rotate(45deg);
|
||||||
|
transform: rotate(45deg);
|
||||||
|
margin-top: -5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#toggle1:checked + .hamburger1 .bottom {
|
||||||
|
-webkit-transform: scale(0);
|
||||||
|
transform: scale(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
#toggle1:checked ~ .menu1 {
|
||||||
|
height: 150px;
|
||||||
|
width: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Menu */
|
||||||
|
.menu1 {
|
||||||
|
position: absolute;
|
||||||
|
top: 55px;
|
||||||
|
left: 20px;
|
||||||
|
width: 240px;
|
||||||
|
border-radius: 5px;
|
||||||
|
background-color: #1C3B69;
|
||||||
|
margin: 0;
|
||||||
|
display: -ms-grid;
|
||||||
|
display: grid;
|
||||||
|
grid-template-rows: 1fr repeat(4, 0.5fr);
|
||||||
|
grid-row-gap: 25px;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
clear: both;
|
||||||
|
width: auto;
|
||||||
|
text-align: center;
|
||||||
|
height: 0px;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: height 0.3s ease, width 0.3s ease;
|
||||||
|
z-index: 9999;
|
||||||
|
-webkit-transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu1 li:first-child {
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu1 li:last-child {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.li1 {
|
||||||
|
width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
padding: 10px 0;
|
||||||
|
font: 700 20px 'Oswald', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.li1:hover {
|
||||||
|
background-color: #FFF;
|
||||||
|
color: rgb(61, 61, 61);
|
||||||
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
-webkit-transition: all 0.3s ease;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
#step2, #step3, #step5 {
|
||||||
|
font-size: larger;
|
||||||
|
}
|
||||||
|
|
||||||
|
.download-btn {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 10px 20px;
|
||||||
|
margin-left: 80px;
|
||||||
|
margin-top: 30px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
background-color: #007BFF;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user