Added help about V1, V2, V3

(cherry picked from commit 0306721)

Author: vadash

assets/script.js

@@ -22,6 +22,40 @@ const fileButtonLex = document.getElementById('file-button-lex')
 const fileButton = document.getElementById('file-button')
 const dopSettings = document.getElementById('dop-settings-label')
 
+// Help system
+const helpSection = document.querySelector('.help-section');
+const helpTitle = document.getElementById('help-title');
+const helpText = document.getElementById('help-text');
+
+function showHelp(title, text) {
+    helpTitle.textContent = title;
+    helpText.textContent = text;
+    helpSection.classList.add('show');
+}
+
+function hideHelp() {
+    helpSection.classList.remove('show');
+}
+
+// Add help text for period replacement modes
+document.getElementById('pointstype').addEventListener('click', () => {
+    const mode = document.getElementById('pointstype').textContent;
+    const helpTexts = {
+        'V1': 'Replaces all periods in the text with the selected character.',
+        'V2': 'Preserves periods at line endings, but replaces all other periods with the selected character.',
+        'V3': 'Preserves periods at line endings, and replaces only periods followed by spaces with the selected character plus a space.'
+    };
+    showHelp('Period Replacement Mode: ' + mode, helpTexts[mode]);
+});
+
+// Hide help when clicking outside
+document.addEventListener('click', (e) => {
+    if (!e.target.closest('.help-section') && 
+        !e.target.closest('#pointstype')) {
+        hideHelp();
+    }
+});
+
 saveButton.addEventListener('click', e => start())
 dopSettings.addEventListener('click', e => change_dopSettings())
 //save_alloneButton.addEventListener('click', e => start_allone())

assets/styles.css

@@ -229,4 +229,36 @@ rowspace {
 #is-lexx {
     color: inherit;
     text-decoration: none;
+}
+
+.help-section {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: #333;
+    padding: 1rem;
+    transform: translateY(100%);
+    transition: transform 0.3s ease-in-out;
+}
+
+.help-section.show {
+    transform: translateY(0);
+}
+
+.help-content {
+    max-width: 800px;
+    margin: 0 auto;
+    color: #fff;
+}
+
+.help-content h3 {
+    margin: 0 0 0.5rem 0;
+    color: #bbb;
+}
+
+.help-content p {
+    margin: 0;
+    font-size: 1rem;
+    line-height: 1.4;
 }

index.html

@@ -367,6 +367,14 @@
 	<br>
     <label id="stat-label"><output id="stat-info"></output> <output style="float: right;" id="stat-str">0 / 0</output></label>
   </section>
+
+  <section class="help-section">
+    <div id="help-content" class="help-content">
+      <h3 id="help-title"></h3>
+      <p id="help-text"></p>
+    </div>
+  </section>
+
   <script src="./assets/jszip.min.js"></script>
   <script src="./assets/texts_converter.js"></script>
   <script src="./assets/processing_file.js"></script>