Refactor UI elements for step selection and speaker management; improve styling and accessibility

This commit is contained in:
MikeHughes-BIN
2026-01-18 16:55:42 +01:00
parent 0427056f65
commit c98d7761b2
3 changed files with 209 additions and 83 deletions
+60 -39
View File
@@ -97,31 +97,33 @@
<!-- Here starts code from step 2-->
<div class="step" id="step2" style="display:none;">
<h2 class="h2">Choose your preferences:</h2>
<div class="KI-wrapper">
<label id="labelKI">Select ki:</label>
<select name="ai_type" id="ai_type"></select>
</div>
<div class="transcript-wrap">
<label id="labelTranscription">Select transcription:</label>
<select name="transkript_type" id="transkript_type"></select>
</div>
<div class="step2-form">
<div class="type-wrapper">
<label id="labelType">Select type:</label>
<select name="output_type" id="output_type">
<option value="pdf">.pdf</option>
<option value="word">.docx</option>
<option value="txt">.txt</option>
</select>
</div>
<div class="step2-row">
<label>Select ki:</label>
<select id="ai_type"></select>
</div>
<div class="language-wrapper">
<label id="labelLanguage">Select language:</label>
<div class="step2-row">
<label>Select transcription:</label>
<select id="transkript_type"></select>
</div>
<select name="document_language_option" id="document_language_option">
<div class="step2-row">
<label>Select type:</label>
<select id="output_type">
<option>.pdf</option>
<option>.docx</option>
<option>.txt</option>
</select>
</div>
<div class="step2-row">
<label>Select language:</label>
<select id="document_language_option"></select>
</div>
</select>
</div>
</div>
@@ -194,30 +196,49 @@
<!-- Here starts code from step 5-->
<div class="step" id="step5" style="display:none;">
<h2 class="h2">Change names of the speakers:</h2>
<div class="speakerView" id="speakerView">
<label id="labelSpeaker">Select Speaker:</label>
<select name="cur_speaker" id="cur_speaker">
</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>
<div class="speakerButton-group">
<button id="speakerLocker" onclick="rewriteSpeakerName()">Rename Speaker</button>
<button id="speakerResender" onclick="sendSpeakerPackages()">Rewrite document</button>
<div class="speaker-container">
<table class="speaker-table">
<tbody>
<tr>
<td class="label-cell">
<label id="labelSpeaker" for="cur_speaker">Select Speaker:</label>
</td>
<td class="input-cell">
<select name="cur_speaker" id="cur_speaker"></select>
</td>
</tr>
<tr>
<td class="label-cell">
<label id="labelSpeakerAudio">Speaker Audio:</label>
</td>
<td class="input-cell">
<audio controls id="speakerAudioViewer">
Currently there is no audio file here.
</audio>
</td>
</tr>
<tr>
<td class="label-cell">
<label id="labelSpeakerWriter" for="newSpeaker">New Name:</label>
</td>
<td class="input-cell">
<input type="text" id="newSpeaker" placeholder="Enter new speaker name">
</td>
</tr>
</tbody>
</table>
<div class="speaker-button-group">
<button id="speakerLocker" onclick="rewriteSpeakerName()">Rename Speaker</button>
<button id="speakerResender" onclick="sendSpeakerPackages()">Rewrite Document</button>
</div>
</div>
</div>
<!-- Here starts code from step 6-->
<div class="step" id="step6" style="display:none;">
<h2 class="h2">Klick to download your document:</h2>
<h2 class="h2">Click to download your document:</h2>
<button class="download-btn" id="downloadButton" onclick="fileDownload()">Download</button>
</div>
</div>