show dialog and load values into it

htdocs/css/openwebrx.css

@@ -659,7 +659,9 @@ img.openwebrx-mirror-img
     transition: width 500ms, left 500ms;
 }
 
-.openwebrx-panel select {
+.openwebrx-panel select,
+.openwebrx-dialog select,
+.openwebrx-dialog input {
 	border-radius: 5px;
 	background-color: #373737;
 	color: White;
@@ -673,7 +675,8 @@ img.openwebrx-mirror-img
 	-moz-appearance: none;
 }
 
-.openwebrx-panel select option {
+.openwebrx-panel select option,
+.openwebrx-dialog select option {
 	border-width: 0px;
 	background-color: #373737;
 	color: White;
@@ -954,6 +957,45 @@ img.openwebrx-mirror-img
     background-image: url(../../aprs-symbols/aprs-symbols-24-2.png)
 }
 
+.openwebrx-dialog {
+	background-color: #575757;
+	padding: 10px;
+	color: white;
+	position: fixed;
+	font-size: 10pt;
+	border-radius: 15px;
+	-moz-border-radius: 15px;
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, 0);
+}
+
+.openwebrx-dialog .form-field {
+    padding: 5px;
+    display: flex;
+    flex-direction: row;
+}
+
+.openwebrx-dialog label {
+    display: inline-block;
+    flex: 1 0 20px;
+    padding-right: 20px;
+    margin-top: auto;
+    margin-bottom: auto;
+}
+
+.openwebrx-dialog .form-field input,
+.openwebrx-dialog .form-field select {
+    flex: 2 0 20px;
+    height: 27px;
+}
+
+.openwebrx-dialog .form-field input {
+    padding: 0 5px;
+}
+
+
 #openwebrx-panel-digimodes[data-mode="ft8"]    #openwebrx-digimode-content-container,
 #openwebrx-panel-digimodes[data-mode="wspr"]   #openwebrx-digimode-content-container,
 #openwebrx-panel-digimodes[data-mode="jt65"]   #openwebrx-digimode-content-container,

htdocs/index.html

@@ -218,5 +218,31 @@
         <br /><br />Start OpenWebRX
         </div>
     </div>
+    <div id="openwebrx-dialog-bookmark" class="openwebrx-dialog" style="display:none;">
+        <form>
+            <div class="form-field">
+                <label for="name">Name:</label>
+                <input type="text" id="name" name="name" required="required">
+            </div>
+            <div class="form-field">
+                <label for="frequency">Frequency:</label>
+                <input type="number" id="frequency" name="frequency" step="12500">
+            </div>
+            <div class="form-field">
+                <label for="modulation">Modulation:</label>
+                <select name="modulation" id="modulation">
+                    <option value="nfm">FM</option>
+                    <option value="am">AM</option>
+                    <option value="usb">USB</option>
+                    <option value="lsb">LSB</option>
+                    <option value="cw">CW</option>
+                    <option value="dmr">DMR</option>
+                    <option value="dstar">D-Star</option>
+                    <option value="nxdn">NXDN</option>
+                    <option value="ysf">YSF</option>
+                </select>
+            </div>
+        </form>
+    </div>
     </body>
 </html>

htdocs/openwebrx.js

@@ -1372,6 +1372,18 @@ function init_bookmarks() {
     } else {
         $bookmarkButton.hide();
     }
+    $bookmarkButton.click(function(){
+        showBookmarkEditDialog();
+    });
+}
+
+function showBookmarkEditDialog() {
+    $dialog = $("#openwebrx-dialog-bookmark");
+    $form = $dialog.find("form");
+    $form.find("#name").val("");
+    $form.find("#frequency").val(center_freq + demodulators[0].offset_frequency);
+    $form.find("#modulation").val(demodulators[0].subtype);
+    $dialog.show();
 }
 
 var dial_frequencies = [];