Dynamic title & description

static/script.js

@@ -1,4 +1,7 @@
 // DOM elements
+const dynamicDesc = document.getElementById("dynamicDesc");
+const dynamicTitle = document.getElementById("dynamicTitle");
+
 const singleModeBtn = document.getElementById('single-mode-btn');
 const batchModeBtn = document.getElementById('batch-mode-btn');
 const keywordModeBtn = document.getElementById("keyword-mode-btn");
@@ -23,6 +26,9 @@ const errorMessage = document.getElementById('error-message');
 
 // Search mode toggle
 singleModeBtn.addEventListener('click', () => {
+    dynamicTitle.textContent = "Find 3GPP Documents";
+    dynamicDesc.textContent = "Enter a TSG document ID / specification ID (e.g., S1-123456, C2-987654 or 31.102) to locate the document in the 3GPP FTP server.";
+
     singleModeBtn.classList.add('active');
     keywordModeBtn.classList.remove("active");
     batchModeBtn.classList.remove('active');
@@ -33,6 +39,9 @@ singleModeBtn.addEventListener('click', () => {
 });
 
 batchModeBtn.addEventListener('click', () => {
+    dynamicTitle.textContent = "Find multiple 3GPP Documents";
+    dynamicDesc.textContent = "Enter a list of TSG document ID / specification ID (e.g., S1-123456, C2-987654 or 31.102) to locate all of the specified documents in the 3GPP FTP server.";
+
     batchModeBtn.classList.add('active');
     keywordModeBtn.classList.remove("active");
     singleModeBtn.classList.remove('active');
@@ -43,6 +52,9 @@ batchModeBtn.addEventListener('click', () => {
 });
 
 keywordModeBtn.addEventListener('click', () => {
+    dynamicTitle.textContent = "Search 3GPP specifications";
+    dynamicDesc.textContent = "With keywords and filters, find all of 3GPP's specifications that matches your needs (with keywords, specification number, release or even working group (C1, S5, SP, CP: always the first letter of the group followed by the workgroup number)";
+
     keywordModeBtn.classList.add("active");
     singleModeBtn.classList.remove('active');
     batchModeBtn.classList.remove("active");

templates/index.html

@@ -19,8 +19,8 @@
     <div class="container">
         <div class="search-container">
             <div class="search-header">
-                <h2>Find 3GPP Documents</h2>
-                <p>Enter a TSG document ID / specification ID (e.g., S1-123456, C2-987654 or 31.102) to locate the document in the 3GPP FTP server.</p>
+                <h2 id="dynamicTitle">Find 3GPP Documents</h2>
+                <p id="dynamicDesc">Enter a TSG document ID / specification ID (e.g., S1-123456, C2-987654 or 31.102) to locate the document in the 3GPP FTP server.</p>
             </div>
 
             <div class="search-mode">