From 8f2024df1432f41ade821f4108c11d92dec830c1 Mon Sep 17 00:00:00 2001
From: MikeHughes-BIN <mike.hughes0506@gmail.com>
Date: Sun, 18 Jan 2026 19:12:04 +0100
Subject: [PATCH] Refactor HTML structure for improved readability and
 maintainability

---
 electron/main/index.html | 573 ++++++++++++++++++++++-----------------
 1 file changed, 329 insertions(+), 244 deletions(-)
diff --git a/electron/main/index.html b/electron/main/index.html
index 0d9587f..093e9fa 100644
--- a/electron/main/index.html
+++ b/electron/main/index.html
@@ -1,255 +1,340 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title id="title">Video to document</title>
+    <link rel="stylesheet" href="style.css" />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/lc-select@1.3.0/themes/light.css"
+    />
+  </head>
 
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title id="title">Video to document</title>
-  <link rel="stylesheet" href="style.css">
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lc-select@1.3.0/themes/light.css">
-</head>
+  <body>
+    <div id="h1-wrapper">
+      <section class="p-menu1">
+        <nav id="navbar" class="navigation" role="navigation">
+          <input id="toggle1" type="checkbox" />
+          <label class="hamburger1" for="toggle1">
+            <div class="top"></div>
+            <div class="meat"></div>
+            <div class="bottom"></div>
+          </label>
 
-<body>
-
-  <div id="h1-wrapper">
-    <section class="p-menu1">
-      <nav id="navbar" class="navigation" role="navigation">
-        <input id="toggle1" type="checkbox" />
-        <label class="hamburger1" for="toggle1">
-          <div class="top"></div>
-          <div class="meat"></div>
-          <div class="bottom"></div>
-        </label>
-
-        <nav class="menu1">
-          <button id="customDocBtn" onclick="showCD()">Manage document types</button>
-          <a href="help_page.html" class="li1">Help</a>
+          <nav class="menu1">
+            <button id="customDocBtn" onclick="showCD()">
+              Manage document types
+            </button>
+            <a href="help_page.html" class="li1">Help</a>
+          </nav>
         </nav>
-      </nav>
-    </section>
+      </section>
 
-    <h1 id="h1">Video to document</h1>
+      <h1 id="h1">Video to document</h1>
 
-    <div class="gui-language">
-      <select name="language_option" id="language_option"></select>
-    </div>
-
-  </div>
-
-  <div class="step-nav">
-    <div class="step-item active" data-step="1" id="step_nav1">1. Step</div>
-    <div class="step-item" data-step="2" id="step_nav2">2. Step</div>
-    <div class="step-item" data-step="3" id="step_nav3">3. Step</div>
-    <div class="step-item" data-step="4" id="step_nav4">4. Step</div>
-    <div class="step-item" data-step="5" id="step_nav5">5. Step</div>
-    <div class="step-item" data-step="6" id="step_nav6">6. Step</div>
-  </div>
-
-  <div id="middleContainerWrapper" class="middle-container-wrapper">
-    <button id="prevBtn" class="navBtn" disabled>&larr;</button>
-
-    <!-- Visible middle part-->
-    <div class="mitte" id="mitte">
-
-      <!--Costum document section-->
-      <div class="container" id="cdContainer" style="display:none;">
-        <h1 id="cd_h1">Manage document types</h1>
-
-        <label for="existingDocs" id="cd_existingDocs">Select existing documents (optional):</label>
-        <!--Drop Down-->
-        <select name="existingDocs" id="existingDocs">
-          <option value="newDoc" id="newDoc">-- Create new document --</option>
-        </select>
-
-        <div id="docNameWrapper">
-          <label for="docName" id="cd_docName">Document name:</label>
-          <input type="text" id="docName" placeholder="Enter the document name here">
-        </div>
-
-        <label for="prompt" id="cd_promt">Your prompt:</label>
-        <textarea id="prompt" placeholder="Type the prompt for your document here..."></textarea>
-
-        <div class="buttons">
-          <button id="goBackBtn">Return</button>
-          <button id="deleteBtn">Delete document</button>
-          <button id="generateBtn">Save document</button>
-        </div>
-
-        <div id="result"></div>
-      </div>
-
-      <!-- Here starts code from step 1-->
-      <div class="step" id="step1">
-        <h2 class="h2">Upload your video here:</h2>
-        <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>
-
-      <!-- Here starts code from step 2-->
-      <div class="step" id="step2" style="display:none;">
-        <h2 class="h2">Choose your preferences:</h2>
-
-        <div class="step2-form">
-
-          <div class="step2-row">
-            <label>Select ki:</label>
-            <select id="ai_type"></select>
-          </div>
-
-          <div class="step2-row">
-            <label>Select transcription:</label>
-            <select id="transkript_type"></select>
-          </div>
-
-          <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>
-
-        </div>
-      </div>
-
-      <!-- Here starts code from step 3-->
-
-      <!-- Hover Effekt für Dokumentenvorschau, Fragezeichen hinter Text, drüber hoven zeigt Beispieldokument -->
-      <div class="step" id="step3" style="display:none;">
-        <div class="checkbox-group">
-          <h2 class="h2">Choose prefered document style:</h2>
-          <div class="checkbox-container">
-            <input type="checkbox" name="docFormat" id="docFormat" value="followup-report">
-            <label id="label_format" for="docFormat">Follow-up Report</label>
-            <div class="figure1">
-              <img class="img-icon" src="icons/question-mark-button-icon--free-clip-art-30.png">
-              <img class="img-hover1" src="flags/germany-flag-png-large.jpg">
-            </div>
-          </div>
-          <div class="checkbox-container">
-            <input type="checkbox" name="docFormat" id="docFormatSummary1" value="agenda">
-            <label id="label_summary" for="docFormatSummary">Agenda</label>
-            <div class="figure2">
-              <img class="img-icon" src="icons/question-mark-button-icon--free-clip-art-30.png">
-              <img class="img-hover2" src="flags/india-flag-png-large.png">
-            </div>
-          </div>
-          <div class="checkbox-container">
-            <input type="checkbox" name="docFormat" id="docFormatSummary2" value="result-protocol">
-            <label id="label_summary" for="docFormatSummary">Resultprotocol</label>
-            <div class="figure3">
-              <img class="img-icon" src="icons/question-mark-button-icon--free-clip-art-30.png">
-              <img class="img-hover3" src="flags/united-kingdom-flag-png-large.jpg">
-            </div>
-          </div>
-          <div class="checkbox-container">
-            <input type="checkbox" name="docFormat" id="docFormatSummary3" value="sprint-planning">
-            <label id="label_summary" for="docFormatSummary">Sprint Planning Note</label>
-            <div class="figure4">
-              <img class="img-icon" src="icons/question-mark-button-icon--free-clip-art-30.png">
-              <img class="img-hover4" src="flags/germany-flag-png-large.jpg">
-            </div>
-          </div>
-          <div class="checkbox-container">
-            <input type="checkbox" name="docFormat" id="docFormatCustom" value="custom">
-            <select name="customDocumentTypes" id="customDocumentTypes">
-            </select>
-          </div>
-        </div>
-      </div>
-
-      <!-- Here starts code from step 4-->
-      <div class="step" id="step4" style="display:none;">
-        <h2 class="h2">Click to submit:</h2>
-        <button class="submit-btn" id="submitButton" onclick="checkBoxes()" disabled>Submit</button>
-
-        <div class="testy" id="testy">
-          <div class="box2" id="box1">
-          </div>
-          <p id="box1_p1">---Starting---</p>
-          <div class="box2" id="box2">
-          </div>
-          <p id="box2_p2">---Transkribing---</p>
-          <div class="box2" id="box3">
-          </div>
-          <p id="box3_p3">---Document creation---</p>
-          <div class="box2" id="box4">
-          </div>
-        </div>
-      </div>
-
-      <!-- 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="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">Click to download your document:</h2>
-        <button class="download-btn" id="downloadButton" onclick="fileDownload()">Download</button>
+      <div class="gui-language">
+        <select name="language_option" id="language_option"></select>
       </div>
     </div>
 
-    <button id="nextBtn" class="navBtn">&rarr;</button>
+    <div class="step-nav">
+      <div class="step-item active" data-step="1" id="step_nav1">1. Step</div>
+      <div class="step-item" data-step="2" id="step_nav2">2. Step</div>
+      <div class="step-item" data-step="3" id="step_nav3">3. Step</div>
+      <div class="step-item" data-step="4" id="step_nav4">4. Step</div>
+      <div class="step-item" data-step="5" id="step_nav5">5. Step</div>
+      <div class="step-item" data-step="6" id="step_nav6">6. Step</div>
+    </div>
 
-  </div>
-  <script src="https://cdn.jsdelivr.net/npm/lc-select@1.3.0/lc_select.min.js"></script>
-  <script src="languages.js"></script>
-  <script src="script.js"></script>
-  <script src="./renderer.js"></script>
-</body>
+    <div id="middleContainerWrapper" class="middle-container-wrapper">
+      <button id="prevBtn" class="navBtn" disabled>&larr;</button>
 
-</html>
\ No newline at end of file
+      <!-- Visible middle part-->
+      <div class="mitte" id="mitte">
+        <!--Costum document section-->
+        <div class="container" id="cdContainer" style="display: none">
+          <h1 id="cd_h1">Manage document types</h1>
+
+          <label for="existingDocs" id="cd_existingDocs"
+            >Select existing documents (optional):</label
+          >
+          <!--Drop Down-->
+          <select name="existingDocs" id="existingDocs">
+            <option value="newDoc" id="newDoc">
+              -- Create new document --
+            </option>
+          </select>
+
+          <div id="docNameWrapper">
+            <label for="docName" id="cd_docName">Document name:</label>
+            <input
+              type="text"
+              id="docName"
+              placeholder="Enter the document name here"
+            />
+          </div>
+
+          <label for="prompt" id="cd_promt">Your prompt:</label>
+          <textarea
+            id="prompt"
+            placeholder="Type the prompt for your document here..."
+          ></textarea>
+
+          <div class="buttons">
+            <button id="goBackBtn">Return</button>
+            <button id="deleteBtn">Delete document</button>
+            <button id="generateBtn">Save document</button>
+          </div>
+
+          <div id="result"></div>
+        </div>
+
+        <!-- Here starts code from step 1-->
+        <div class="step" id="step1">
+          <h2 class="h2">Upload your video here:</h2>
+          <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>
+
+        <!-- Here starts code from step 2-->
+        <div class="step" id="step2" style="display: none">
+          <h2 class="h2">Choose your preferences:</h2>
+          <div class="step2-form">
+            <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="type-wrapper">
+              <label id="labelType">Select type:</label>
+              <select name="output_type" id="output_type">
+                <option value="pdf">.pdf</option>
+                <option value="word">.word</option>
+                <option value="txt">.txt</option>
+              </select>
+            </div>
+
+            <div class="language-wrapper">
+              <label id="labelLanguage">Select language:</label>
+
+              <select
+                name="document_language_option"
+                id="document_language_option"
+              ></select>
+            </div>
+          </div>
+        </div>
+
+        <!-- Here starts code from step 3-->
+
+        <!-- Hover Effekt für Dokumentenvorschau, Fragezeichen hinter Text, drüber hoven zeigt Beispieldokument -->
+        <div class="step" id="step3" style="display: none">
+          <div class="checkbox-group">
+            <h2 class="h2">Choose prefered document style:</h2>
+            <div class="checkbox-container">
+              <input
+                type="checkbox"
+                name="docFormat"
+                id="docFormat"
+                value="followup-report"
+              />
+              <label id="label_format" for="docFormat">Follow-up Report</label>
+              <div class="figure1">
+                <img
+                  class="img-icon"
+                  src="icons/question-mark-button-icon--free-clip-art-30.png"
+                />
+                <img
+                  class="img-hover1"
+                  src="flags/germany-flag-png-large.jpg"
+                />
+              </div>
+            </div>
+            <div class="checkbox-container">
+              <input
+                type="checkbox"
+                name="docFormat"
+                id="docFormatSummary1"
+                value="agenda"
+              />
+              <label id="label_summary" for="docFormatSummary">Agenda</label>
+              <div class="figure2">
+                <img
+                  class="img-icon"
+                  src="icons/question-mark-button-icon--free-clip-art-30.png"
+                />
+                <img class="img-hover2" src="flags/india-flag-png-large.png" />
+              </div>
+            </div>
+            <div class="checkbox-container">
+              <input
+                type="checkbox"
+                name="docFormat"
+                id="docFormatSummary2"
+                value="result-protocol"
+              />
+              <label id="label_summary" for="docFormatSummary"
+                >Resultprotocol</label
+              >
+              <div class="figure3">
+                <img
+                  class="img-icon"
+                  src="icons/question-mark-button-icon--free-clip-art-30.png"
+                />
+                <img
+                  class="img-hover3"
+                  src="flags/united-kingdom-flag-png-large.jpg"
+                />
+              </div>
+            </div>
+            <div class="checkbox-container">
+              <input
+                type="checkbox"
+                name="docFormat"
+                id="docFormatSummary3"
+                value="sprint-planning"
+              />
+              <label id="label_summary" for="docFormatSummary"
+                >Sprint Planning Note</label
+              >
+              <div class="figure4">
+                <img
+                  class="img-icon"
+                  src="icons/question-mark-button-icon--free-clip-art-30.png"
+                />
+                <img
+                  class="img-hover4"
+                  src="flags/germany-flag-png-large.jpg"
+                />
+              </div>
+            </div>
+            <div class="checkbox-container">
+              <input
+                type="checkbox"
+                name="docFormat"
+                id="docFormatCustom"
+                value="custom"
+              />
+              <select
+                name="customDocumentTypes"
+                id="customDocumentTypes"
+              ></select>
+            </div>
+          </div>
+        </div>
+
+        <!-- Here starts code from step 4-->
+        <div class="step" id="step4" style="display: none">
+          <h2 class="h2">Click to submit:</h2>
+          <button
+            class="submit-btn"
+            id="submitButton"
+            onclick="checkBoxes()"
+            disabled
+          >
+            Submit
+          </button>
+
+          <div class="testy" id="testy">
+            <div class="box2" id="box1"></div>
+            <p id="box1_p1">---Starting---</p>
+            <div class="box2" id="box2"></div>
+            <p id="box2_p2">---Transkribing---</p>
+            <div class="box2" id="box3"></div>
+            <p id="box3_p3">---Document creation---</p>
+            <div class="box2" id="box4"></div>
+          </div>
+        </div>
+
+        <!-- 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="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">Click to download your document:</h2>
+          <button
+            class="download-btn"
+            id="downloadButton"
+            onclick="fileDownload()"
+          >
+            Download
+          </button>
+        </div>
+      </div>
+
+      <button id="nextBtn" class="navBtn">&rarr;</button>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/lc-select@1.3.0/lc_select.min.js"></script>
+    <script src="languages.js"></script>
+    <script src="script.js"></script>
+    <script src="./renderer.js"></script>
+  </body>
+</html>
