From c98d7761b2a89d0da3ea612fef282edec318c450 Mon Sep 17 00:00:00 2001 From: MikeHughes-BIN Date: Sun, 18 Jan 2026 16:55:42 +0100 Subject: [PATCH] Refactor UI elements for step selection and speaker management; improve styling and accessibility --- electron/main/index.html | 99 ++++++++++++++---------- electron/main/languages.js | 44 +++++------ electron/main/style.css | 149 +++++++++++++++++++++++++++++++------ 3 files changed, 209 insertions(+), 83 deletions(-) diff --git a/electron/main/index.html b/electron/main/index.html index 2e68d1d..0d9587f 100644 --- a/electron/main/index.html +++ b/electron/main/index.html @@ -97,31 +97,33 @@ @@ -194,30 +196,49 @@ diff --git a/electron/main/languages.js b/electron/main/languages.js index fc0b1da..38a31d7 100644 --- a/electron/main/languages.js +++ b/electron/main/languages.js @@ -1,7 +1,7 @@ var languageOptions = { "eng":{ "flagPath": "flags/united-kingdom-flag-png-large.jpg", - "labelKI": "Select ki:", + "labelKI": "Select AI:", "labelTranscription": "Select transcription:", "labelLanguage": "Select language:", "title": "Video to document", @@ -9,7 +9,7 @@ var languageOptions = { "p1": "Drag and drop video file", "fileName": "No video chosen", "manualUploadBtn": "Search video", - "checkbox_group": "Choose prefered document style:", + "checkbox_group": "Choose preferred document style:", "label_format": "Meeting report", "label_summary": "Summary with timestamps", "submitButton": "Submit", @@ -27,7 +27,7 @@ var languageOptions = { "speakerResender": "Rewrite document", "downloadButton": "Download", "box1_p1": "---Starting---", - "box2_p2": "---Transkribing---", + "box2_p2": "---Transcribing---", "box3_p3": "---Document creation---", "labelType": "Select document type:", @@ -46,13 +46,13 @@ var languageOptions = { }, "de":{ "flagPath": "flags/germany-flag-png-large.jpg", - "labelKI": "Waehle KI:", - "labelTranscription": "Waehle Transkription:", - "labelLanguage": "Waehle Sprache:", + "labelKI": "Wähle KI:", + "labelTranscription": "Wähle Transkription:", + "labelLanguage": "Wähle Sprache:", "title": "Video zu Dokument", "h1": "Video zu Dokument", "p1": "Video per Drag & Drop ablegen", - "fileName": "Kein Video ausgewaehlt", + "fileName": "Kein Video ausgewählt", "manualUploadBtn": "Video suchen", "checkbox_group": "Bevorzugte Dokumentvarianten:", "label_format": "Meeting Bericht", @@ -64,7 +64,7 @@ var languageOptions = { "step_nav4": "Schritt 4", "step_nav5": "Schritt 5", "step_nav6": "Schritt 6", - "h2": "Uploade dein Video hier:", + "h2": "Lade dein Video hier hoch:", "labelSpeaker": "Wähle Sprecher:", "labelSpeakerAudio": "Ausgewählter Sprecher:", "labelSpeakerWriter": "Schreib Namen:", @@ -72,27 +72,27 @@ var languageOptions = { "speakerResender": "Überschreibe Dokument", "downloadButton": "Download", "box1_p1": "---Startet---", - "box2_p2": "---Transkribing---", - "box3_p3": "---Dokument kreieren---", - "labelType": "Wähle Dokumenttype:", + "box2_p2": "---Transkribierung---", + "box3_p3": "---Dokument erstellen---", + "labelType": "Wähle Dokumenttyp:", "customDocBtn": "Dokumenttypen verwalten", "cd_h1": "Dokumenttypen verwalten", "cd_existingDocs": "Vorhandene Dokumente auswählen (optional):", - "cd_docName": "Dokument Name", + "cd_docName": "Dokumentname", "docName": "Geben Sie hier den Dokumentnamen ein", "cd_promt": "Ihr Prompt:", "prompt": "Geben Sie hier die Eingabeaufforderung für Ihr Dokument ein...", "goBackBtn": "Zurück", "deleteBtn": "Lösche Dokument", - "generateBtn": "Speicher Dokument", + "generateBtn": "Speichere Dokument", "newDoc": "-- Neues Dokument erstellen --" }, "in":{ "flagPath": "flags/india-flag-png-large.png", - "labelKI": "की का चयन करें:", + "labelKI": "KI का चयन करें:", "labelTranscription": "प्रतिलेखन चुनें:", - "labelLanguage": "भाषा चुने:", + "labelLanguage": "भाषा चुनें:", "title": "दस्तावेज़ के लिए वीडियो", "h1": "दस्तावेज़ के लिए वीडियो", "p1": "वीडियो फ़ाइल खींचें और छोड़ें", @@ -101,7 +101,7 @@ var languageOptions = { "checkbox_group": "पसंदीदा दस्तावेज़ शैली चुनें:", "label_format": "बैठक रिपोर्ट", "label_summary": "टाइमस्टैम्प के साथ सारांश", - "submitButton": "जमा करना", + "submitButton": "जमा करें", "step_nav1": "स्टेप 1", "step_nav2": "स्टेप 2", "step_nav3": "स्टेप 3", @@ -110,11 +110,11 @@ var languageOptions = { "step_nav6": "स्टेप 6", "h2": "अपना वीडियो यहां अपलोड करें:", "labelSpeaker": "स्पीकर चुनें:", - "labelSpeakerAudio": "चयनित वक्ता:", + "labelSpeakerAudio": "चयनित स्पीकर:", "labelSpeakerWriter": "नाम लिखें:", "speakerLocker": "स्पीकर का नाम बदलें", - "speakerResender": "दस्तावेज़ पुनः लिखें", - "downloadButton": "डाउनलोड करना", + "speakerResender": "दस्तावेज़ फिर से लिखें", + "downloadButton": "डाउनलोड करें", "box1_p1": "---प्रारंभ---", "box2_p2": "---प्रतिलेखन---", "box3_p3": "---दस्तावेज़ निर्माण---", @@ -127,10 +127,10 @@ var languageOptions = { "docName": "यहां दस्तावेज़ का नाम दर्ज करें", "cd_promt": "आपका संकेत:", "prompt": "अपने दस्तावेज़ के लिए प्रॉम्प्ट यहां टाइप करें...", - "goBackBtn": "वापस करना", - "deleteBtn": "दस्तावेज़ हटाएँ", + "goBackBtn": "वापस जाएं", + "deleteBtn": "दस्तावेज़ हटाएं", "generateBtn": "दस्तावेज़ सहेजें", - "newDoc": "-- नया दस्तावेज़ बनाएँ --" + "newDoc": "-- नया दस्तावेज़ बनाएं --" } diff --git a/electron/main/style.css b/electron/main/style.css index 89750a1..74e9002 100644 --- a/electron/main/style.css +++ b/electron/main/style.css @@ -11,12 +11,12 @@ body { } #h1 { - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); + position: static; + transform: none; margin: 0; z-index: 20; + flex: 1; + text-align: center; } #h1-wrapper { @@ -30,6 +30,26 @@ body { margin-bottom: 10px; display: flex; align-items: center; + justify-content: space-between; + padding: 0 20px; + box-sizing: border-box; +} + +.gui-language { + position: absolute; + right: 20px; + top: 50%; + transform: translateY(-50%); + z-index: 100; + pointer-events: auto; +} + +#language_option { + padding: 8px 12px; + border-radius: 4px; + border: 1px solid #ccc; + font-size: 14px; + cursor: pointer; } .upload-container { @@ -85,7 +105,6 @@ body { #previewThumbnail { width: 150px; height: 100px; - /*border: 1px dashed black;*/ } .custom-btn { @@ -108,8 +127,9 @@ body { background-color: #0056b3; } -#step2 { - gap: 25px; +.step h2 { + width: 100%; + text-align: center; } .KI-wrapper { @@ -356,7 +376,10 @@ input[type="file"] { #ai_type, #transkript_type, #language_option { - padding: 3px; + padding: 8px 12px; + border-radius: 4px; + border: 1px solid #ccc; + font-size: 14px; } .labelDiv { @@ -404,7 +427,6 @@ input[type="file"] { .step { margin-top: 40px; margin-bottom: 40px; - ; display: flex; flex-direction: column; min-height: 425px; @@ -579,7 +601,27 @@ li { transition: all 0.3s ease; } -#step2, + + +#step2 { + font-size: larger; + align-items: center; +} + +.step2-form { + width: 100%; + max-width: 420px; + display: flex; + flex-direction: column; + gap: 24px; /* DAS ist dein Spacing */ +} + +.step2-row { + display: flex; + flex-direction: column; + gap: 6px; +} + #step3, #step5 { font-size: larger; @@ -590,7 +632,7 @@ li { } #step5 { - align-items: flex-start; + align-items: center; } .button-group { @@ -614,27 +656,84 @@ li { font-size: 14px; } +.h2 { + font-size: 25px; +} + + +.speaker-container { + width: 100%; + max-width: 700px; + margin-top: 30px; +} + +.speaker-table { + width: 100%; + border-collapse: collapse; + background: white; +} + +.speaker-table tbody tr { + display: flex; + align-items: center; + gap: 20px; + margin-bottom: 25px; + padding: 10px 0; +} + +.label-cell { + flex: 0 0 150px; + text-align: left; +} + +.label-cell label { + font-weight: 400; + display: block; +} + +.input-cell { + flex: 1; +} + +#cur_speaker, +#newSpeaker { + width: 100%; + padding: 10px; + border-radius: 6px; + border: 1px solid #ccc; + font-size: 14px; + box-sizing: border-box; +} + +#speakerAudioViewer { + width: 100%; + height: 35px; + border-radius: 6px; +} + +.speaker-button-group { + display: flex; + gap: 15px; + justify-content: center; + margin-top: 30px; +} + #speakerLocker, #speakerResender { - padding: 10px 20px; - margin: 20px auto; + padding: 12px 25px; background-color: #007BFF; color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; + font-weight: 500; + transition: background-color 0.2s; } -.h2 { - font-size: 25px; -} - -.speakerView, -.speakerAudio, -.speakerWrite { - margin-top: auto; - margin-bottom: auto; +#speakerLocker:hover, +#speakerResender:hover { + background-color: #0056b3; } .container { @@ -702,4 +801,10 @@ button:hover { margin-top: 20px; color: #333; word-break: break-word; +} + +.container input, +.container textarea, +.container select { + width: 100%; } \ No newline at end of file