From 270884fc6a7e8f441e31aeffad1f2a58ce751f6e Mon Sep 17 00:00:00 2001
From: DJ2LS <75909252+DJ2LS@users.noreply.github.com>
Date: Tue, 11 Apr 2023 18:43:52 +0200
Subject: [PATCH] updated help modal for audio and station

---
 gui/src/index.html | 135 ++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 133 insertions(+), 2 deletions(-)

diff --git a/gui/src/index.html b/gui/src/index.html
index cfa35744..9d5dc88f 100644
--- a/gui/src/index.html
+++ b/gui/src/index.html
@@ -1716,7 +1716,53 @@
               aria-label="Close"
             ></button>
           </div>
-          <div class="modal-body">Test ...</div>
+          <div class="modal-body">
+
+
+            <div class="card mb-3">
+  <div class="card-body">
+     <div class="input-group input-group-sm mb-1">
+                  <span class="input-group-text">
+                    <i class="bi bi-mic-fill" style="font-size: 1rem"></i>
+                  </span>
+                  <select
+                    class="form-select form-select-sm"
+                    aria-label=".form-select-sm"
+                  >
+                    <!-- 					 					<option selected value="3011">USB Interface</option>-->
+                  </select>
+                </div>
+    <p class="card-text">Select your audio device for transmitting. It <strong>must</strong> be running on a sample rate of <strong>48000Hz</strong></p>
+  </div>
+</div>
+
+            <div class="card">
+  <div class="card-body">
+   <div class="input-group input-group-sm">
+                  <span class="input-group-text">
+                    <i class="bi bi-volume-up" style="font-size: 1rem"></i>
+                  </span>
+                  <select
+                    class="form-select form-select-sm"
+                    aria-label=".form-select-sm"
+                  ></select>
+                </div>    <p class="card-text">Select your audio device for receiving. It <strong>must</strong> be running on a sample rate of <strong>48000Hz</strong></p>
+  </div>
+</div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+          </div>
         </div>
       </div>
     </div>
@@ -1760,7 +1806,92 @@
               aria-label="Close"
             ></button>
           </div>
-          <div class="modal-body">Test ...</div>
+          <div class="modal-body">
+
+            <div class="alert alert-info" role="alert">
+  These settings will be saved automatically when changing.
+</div>
+
+           <div class="card mb-3">
+  <div class="card-body">
+    <h5 class="card-title"><div
+                      class="input-group input-group-sm mb-0"
+                      data-bs-placement="bottom"
+                      data-bs-toggle="tooltip"
+                      data-bs-trigger="hover"
+                      data-bs-html="false"
+                      title="Enter your callsign and save it"
+                    >
+                      <span class="input-group-text">
+                        <i
+                          class="bi bi-person-bounding-box"
+                          style="font-size: 1rem"
+                        ></i>
+                      </span>
+                      <input
+                        type="text"
+                        class="form-control"
+                        placeholder="callsign"
+                        pattern="[A-Z]*"
+                        maxlength="8"
+                        style="max-width: 8rem"
+                        aria-label="Input group"
+                        aria-describedby="btnGroupAddon"
+                        disabled
+                      />
+                      <select
+                        class="form-select form-select-sm"
+                        aria-label=".form-select-sm"
+                        style="max-width: 6rem"
+                        disabled
+                      >
+                        <option selected value="SSID">SSID</option>
+
+                      </select>
+                    </div></h5>
+    <p class="card-text">Enter your callsign and SSID. Your callsign can have a length of a maximum of 7 characters</p>
+  </div>
+</div>
+                      <div class="card mb-3">
+  <div class="card-body">
+    <h5 class="card-title"><div
+                      class="input-group input-group-sm mb-0"
+                      data-bs-placement="bottom"
+                      data-bs-toggle="tooltip"
+                      data-bs-trigger="hover"
+                      data-bs-html="false"
+                      title="Enter your gridsquare and save it"
+                    >
+                      <span class="input-group-text">
+                        <i class="bi bi-house-fill" style="font-size: 1rem"></i>
+                      </span>
+                      <input
+                        type="text"
+                        class="form-control mr-1"
+                        style="max-width: 6rem"
+                        placeholder="locator"
+                        maxlength="6"
+                        aria-label="Input group"
+                        aria-describedby="btnGroupAddon"
+                        disabled
+                      />
+                    </div></h5>
+    <p class="card-text">Enter your position as qth-locator, also known as maidenhead locator. You can enter 4 or 6 digits, while 6 digits are recommended.</p>
+  </div>
+</div>
+
+
+
+
+
+
+
+
+
+
+
+
+          </div>
         </div>
       </div>
     </div>