diff --git a/electron/main/help_page.html b/electron/main/help_page.html index 17c54bb..e1618e4 100644 --- a/electron/main/help_page.html +++ b/electron/main/help_page.html @@ -17,302 +17,18 @@ align-items: center; } - /* ===== CONTAINER ===== */ - .container { - background: white; - width: 90%; - max-width: 800px; - height: 85vh; - /* feste Höhe */ - border-radius: 12px; - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); - display: flex; - flex-direction: column; - } - - /* ===== FIXER TOP-BEREICH ===== */ - .top-bar { - padding: 15px 20px; - border-bottom: 1px solid #eee; - display: flex; - justify-content: space-between; - align-items: center; - flex-shrink: 0; - } - - /* Buttons */ - .back-btn, - .toc-toggle { - background: #007BFF; - color: white; - border: none; - padding: 8px 14px; - border-radius: 6px; - cursor: pointer; - font-size: 14px; - } - - .back-btn:hover, - .toc-toggle:hover { - background: #0056b3; - } - - /* ===== TOC ===== */ - .toc-wrapper { - position: relative; - } - - .toc { - position: absolute; - right: 0; - top: 45px; - background: white; - border-radius: 8px; - box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); - padding: 10px; - min-width: 220px; - display: none; - z-index: 5; - } - - .toc a { - display: block; - padding: 8px 10px; - color: #007BFF; - text-decoration: none; - border-radius: 6px; - } - - .toc a:hover { - background: #f0f2f5; - } - - .toc.show { - display: block; - } - - /* ===== SCROLLBEREICH ===== */ - .content { - padding: 30px; - overflow-y: auto; - flex: 1; - } - - /* Inhalt */ - h1 { - text-align: center; - color: #333; - } - - .step { - margin-bottom: 20px; - margin-top: 20px; - } - - .step h2 { - color: #0056b3; - } - - .step h3 { - color: #555; - margin-bottom: 5px; - } - - .step p { - color: #555; - line-height: 1.6; - } - - .step img { - width: 100%; - max-height: 350px; - object-fit: contain; - border-radius: 8px; - margin-top: 15px; - border: 1px solid #ddd; - } + -
- - -
- - - - -

Programm Anleitung

- - -
- - -
-
- - -
- -
-

Video zu Dokument umwandeln.

- -
-

Schritt 1 - Video auswählen

-

- - Ziehe eine Videodatei in das Drag-and-Drop-Feld oder klicke auf „Video - suchen“,
- um eine Datei über deinen Dateibrowser auszuwählen.
- - Klicke anschließend auf Schritt 2 oder auf den blauen Pfeil rechts, um - fortzufahren. -

-
-
-

Schritt 2 - Konfiguration

-

- - Wähle im ersten Auswahlmenü die zu verwendende KI.
- - Wähle im zweiten Auswahlmenü das zu verwendende Transkriptions-Tool.
- - Wähle im dritten Auswahlmenü das Dateiformat des zu erstellenden - Dokuments.
- - Wähle im vierten Auswahlmenü die Sprache des zu erstellenden Dokuments.
- - Klicke anschließend auf Schritt 3 oder auf den blauen Pfeil rechts, um - fortzufahren. -

-
-
-

Schritt 3 - Dokumententyp auswählen

-

- - Wähle einen Dokumententyp über die Checkbox oder einen zuvor erstellten Dokumententyp aus dem - Dropdown-Menü aus.
- - Klicke anschließend auf Schritt 4 oder auf den blauen Pfeil rechts, um - fortzufahren. -

-
-
-

Schritt 4 - Bestätigen

-

- Klicke auf „Submit“, um die Dokumentengenerierung zu starten.
- Während der Verarbeitung werden vier Statuspunkte angezeigt, die sich schrittweise von rot zu - grün färben und den aktuellen Fortschritt darstellen: -

- Punkt 1: Upload und Vorbereitung der Videodatei.
- Punkt 2: Transkription des Videoinhalts.
- Punkt 3: KI-gestützte Verarbeitung und Dokumentenerstellung.
- Punkt 4: Abschluss der Generierung und Bereitstellung des Dokuments. -

- Nach erfolgreichem Abschluss klicke auf Schritt 5 oder auf den blauen Pfeil - rechts, um fortzufahren. -

-
-
-

Schritt 5 - Sprecher identifizieren

-

- Im Auswahlmenü kannst du einen erkannten Sprecher auswählen.
- Über den Play-Button lässt sich ein gesprochener Satz anhören, um den Sprecher eindeutig zu - identifizieren.
- Mit dem Lautsprecher-Symbol kannst du die Lautstärke anpassen.
- Über das Drei-Punkte-Menü lässt sich die Wiedergabegeschwindigkeit einstellen.

- - Im Textfeld „Write name“ gibst du den tatsächlichen Namen des Sprechers ein, - damit dieser im Dokument - anstelle von Platzhaltern wie z. B. „Sprecher A“ angezeigt wird.
- Bestätige die Eingabe mit „Rename Speaker“.

- - Mit dem Button „Rewrite Document“ werden anschließend alle - Sprecherbezeichnungen im Dokument ersetzt.

- - Klicke danach auf Schritt 6 oder auf den blauen Pfeil rechts, um fortzufahren. -

-
-
-

Schritt 6 - Dokument speichern

-

- Klicke auf „Download“, um das Dokument zu speichern.
- Es öffnet sich anschließend ein Dateiexplorer, in dem du den gewünschten Speicherort auswählen - kannst. -

-
-
- - -
-

Dokumententyp erstellen

-

- - Öffne oben links das Burgermenü und wähle den Punkt „Dokumententypen - verwalten“.
- - Wähle anschließend im Auswahlmenü die Option „-- Neuen Dokumententyp erstellen - --“.
- - Vergib einen aussagekräftigen Namen für den neuen Dokumententyp.
- - Formuliere den Prompt für die KI-gestützte Verarbeitung sorgfältig.
- - Klicke auf Dokumententyp speichern.

- Hinweis:
Der eingegebene Prompt wird unverändert an einen KI-Dienst - übermittelt. - Achte daher unbedingt auf die Einhaltung der geltenden Datenschutzrichtlinien und gib keine - sensiblen oder personenbezogenen Daten ein. -

-
- -
-

Dokumententyp bearbeiten

-

- - Öffne oben links das Burgermenü und wähle den Punkt „Dokumententypen - verwalten“.
- - Wähle anschließend im Auswahlmenü den zu bearbeitenden Dokumententyp aus.
- - Überarbeite den bestehenden KI-Prompt oder formuliere einen neuen Prompt.
- - Klicke abschließend auf „Dokumententyp speichern“.

- - Hinweis:
- Der eingegebene Prompt wird unverändert an einen KI-Dienst übermittelt. - Achte daher unbedingt auf die Einhaltung der geltenden Datenschutzrichtlinien und gib keine - sensiblen oder personenbezogenen Daten ein. -

-
- -
-

Dokumententyp löschen

-

- Öffne oben links das Burgermenü und wähle den Punkt „Dokumententypen - verwalten“.
- - Wähle anschließend im Auswahlmenü den zu löschenden Dokumententyp aus.
- - Klicke abschließend auf „Dokumententyp löschen“.

- - Hinweis:
- Nach Bestätigung des Löschvorgangs kann der Dokumententyp nicht wiederhergestellt werden. -

-
-
- -
+ diff --git a/electron/main/index.html b/electron/main/index.html index 39d4251..aa17e61 100644 --- a/electron/main/index.html +++ b/electron/main/index.html @@ -90,6 +90,167 @@
+ + + +

Upload your video here:

diff --git a/electron/main/renderer.js b/electron/main/renderer.js index 3a9ff89..15128f9 100644 --- a/electron/main/renderer.js +++ b/electron/main/renderer.js @@ -391,3 +391,22 @@ existingDocs.addEventListener("change", async () => { }); +/* + +Listeners for the help page + +*/ + +//For the help page dropdown list +document.addEventListener("click", function (e) { + try { + const toc = document.getElementById("toc"); + const toggle = document.querySelector(".toc-toggle"); + + if (!toc.contains(e.target) && !toggle.contains(e.target)) { + toc.classList.remove("show"); + } + } catch (error) { + console.log(error); + } +}); diff --git a/electron/main/script.js b/electron/main/script.js index b00d797..95cd5f5 100644 --- a/electron/main/script.js +++ b/electron/main/script.js @@ -530,4 +530,28 @@ function sendSpeakerPackages() { } } -window.sendSpeakerPackages = sendSpeakerPackages; \ No newline at end of file +window.sendSpeakerPackages = sendSpeakerPackages; + +/* + +Functions for the help page + +*/ + +//Function to show the dropdown list in the help page +function toggleTOC() { + try { + document.getElementById("toc").classList.toggle("show"); + } catch (error) { + console.log(error) + } +} + +//Function to hide the dropdown list in the help page +function closeTOC() { + try { + document.getElementById("toc").classList.remove("show"); + } catch (error) { + console.log(error) + } +} \ No newline at end of file diff --git a/electron/main/style.css b/electron/main/style.css index 4a01c88..b856ff7 100644 --- a/electron/main/style.css +++ b/electron/main/style.css @@ -806,4 +806,122 @@ button:hover { .container textarea, .container select { width: 100%; +} + + +/* help page */ + +/* ===== CONTAINER ===== */ +.container { + background: white; + width: 90%; + max-width: 800px; + height: 85vh; + /* feste Höhe */ + border-radius: 12px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); + display: flex; + flex-direction: column; +} + +/* ===== FIXER TOP-BEREICH ===== */ +.top-bar { + padding: 15px 20px; + border-bottom: 1px solid #eee; + display: flex; + justify-content: space-between; + align-items: center; + flex-shrink: 0; +} + +/* Buttons */ +.back-btn, +.toc-toggle { + background: #007BFF; + color: white; + border: none; + padding: 8px 14px; + border-radius: 6px; + cursor: pointer; + font-size: 14px; +} + +.back-btn:hover, +.toc-toggle:hover { + background: #0056b3; +} + +/* ===== TOC ===== */ +.toc-wrapper { + position: relative; +} + +.toc { + position: absolute; + right: 0; + top: 45px; + background: white; + border-radius: 8px; + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); + padding: 10px; + min-width: 220px; + display: none; + z-index: 5; +} + +.toc a { + display: block; + padding: 8px 10px; + color: #007BFF; + text-decoration: none; + border-radius: 6px; +} + +.toc a:hover { + background: #f0f2f5; +} + +.toc.show { + display: block; +} + +/* ===== SCROLLBEREICH ===== */ +.content { + padding: 30px; + overflow-y: auto; + flex: 1; +} + +/* Inhalt */ +h1 { + text-align: center; + color: #333; +} + +.step { + margin-bottom: 20px; + margin-top: 20px; +} + +.step h2 { + color: #0056b3; +} + +.step h3 { + color: #555; + margin-bottom: 5px; +} + +.step p { + color: #555; + line-height: 1.6; +} + +.step img { + width: 100%; + max-height: 350px; + object-fit: contain; + border-radius: 8px; + margin-top: 15px; + border: 1px solid #ddd; } \ No newline at end of file