diff --git a/simpledemo.html b/simpledemo.html
index efc17dd..799b90d 100644
--- a/simpledemo.html
+++ b/simpledemo.html
@@ -1,327 +1,548 @@
-  String html = "<!doctype html>";
-  html += "<html><head>";
-  html += "<meta charset='utf-8'><meta name='viewport' content='width=device-width,initial-scale=1'>";
-  html += "<title>Web UI | " + version + "</title>";
-  html += "<link href='https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN' crossorigin='anonymous'>";
-  html += "<style>#playbackMuteButton:hover { background-color: #00000000;  }</style>";
-  html += "</head><body data-bs-theme='dark'>";
-  html += "<div class='text-center container-sm' style='padding: 4em 0em'>";
+<!doctype html>
+<html>
+<head>
+    <meta charset='utf-8'>
+    <meta name='viewport' content='width=device-width,initial-scale=1'>
+    <title>API Demo (on [IP here])</title>
+    <link href='https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css' rel='stylesheet'
+          integrity='sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN' crossorigin='anonymous'>
+    <style>#playbackMuteButton:hover { background-color: #00000000; }</style>
+</head>
+<body data-bs-theme='dark'>
+<div class='text-center container-sm' style='padding: 4em 0em'>
 
-  html += "<p>Welcome to</p>";
-  html += "<h1>" + configuration.getString(PREFERENCES_KEY_FRIENDLY_NAME, "NetSpeaker") + "</h1>";
-  html += "<p style='font-size: .875em; color: var(--bs-code-color); padding-top: .5rem'>" + version + "</p>";
+    <p>Welcome to</p>
+    <h1 id='title_frname'>[FRIENDLY NAME HERE]</h1>
+    <p style='font-size: .875em; color: var(--bs-code-color); padding-top: .5rem'>[VERSION STRING HERE]</p>
 
-  html += "<hr style='margin: 3em 0em;'>";
+    <hr style='margin: 3em 0em;'>
 
-  // informations accordion
-  html += "<div class='accordion text-start' id='accordion-info'>";
-  html += "  <div class='accordion-item'>";
-  html += "    <h2 class='accordion-header'>";
-  html += "      <button class='accordion-button collapsed' type='button' data-bs-toggle='collapse' data-bs-target='#accordion-info-playback' aria-expanded='true' aria-controls='accordion-info-playback'>";
-  html += "        Playback information";
-  html += "      </button>";
-  html += "    </h2>";
-  html += "    <div id='accordion-info-playback' class='accordion-collapse collapse' data-bs-parent='#accordion-info'>";
-  html += "      <div class='accordion-body'>";
-  html += "        <table class='table table-striped'><tbody><tr>";
-  html += "              <td>Playing</td>";
-  html += "              <td class='text-end'>";
-  html +=                  audioPlaying ? "yes" : "no";
-  html += "              </td>";
-  html += "            </tr><tr>";
-  html += "              <td>Volume</td>";
-  html += "              <td class='text-end'>" + String(currentVolume) + "/" + String(maxVolume) + "%</td>";
-  html += "            </tr><tr>";
-  html += "              <td>Muted</td>";
-  html += "              <td class='text-end'>";
-  html +=                  muted ? "yes" : "no";
-  html += "              </td>";
-  html += "            </tr><tr>";
-  html += "              <td>Equalizer Low</td>";
-  html += "              <td class='text-end'>" + String(eqLow) + "dB</td>";
-  html += "            </tr><tr>";
-  html += "              <td>Equalizer Mid</td>";
-  html += "              <td class='text-end'>" + String(eqMid) + "dB</td>";
-  html += "            </tr><tr>";
-  html += "              <td>Equalizer High</td>";
-  html += "              <td class='text-end'>" + String(eqHigh) + "dB</td>";
-  html += "            </tr><tr>";
-  html += "              <td>Balance (range -16 | +16)</td>";
-  html += "              <td class='text-end'>" + String(balanceLevel) + "</td>";
-  html += "            </tr><tr>";
-  html += "              <td>Path to playlist</td>";
-  html += "              <td class='text-end'>" + currentPlaylist + "</td>";
-  html += "            </tr><tr>";
-  html += "              <td>Index in playlist (starting from 0)</td>";
-  html += "              <td class='text-end'>" + String(currentPlaylistPosition) + "</td>";
-  html += "            </tr><tr>";
-  html += "              <td>Resource path</td>";
-  html += "              <td class='text-end'>" + pbInfo.resourcePath + "</td>";
-  html += "            </tr><tr>";
-  html += "              <td>Resource type</td>";
-  html += "              <td class='text-end'>" + pbInfo.type + "</td>";
-  html += "            </tr><tr>";
-  html += "              <td>Resource title</td>";
-  html += "              <td class='text-end'>" + pbInfo.title + "</td>";
-  html += "            </tr><tr>";
-  html += "              <td>Resource album</td>";
-  html += "              <td class='text-end'>" + pbInfo.album + "</td>";
-  html += "            </tr><tr>";
-  html += "              <td>Resource artist</td>";
-  html += "              <td class='text-end'>" + pbInfo.artist + "</td>";
-  html += "            </tr><tr>";
-  html += "              <td>Resource track number</td>";
-  html += "              <td class='text-end'>" + pbInfo.track + "</td>";
-  html += "            </tr><tr>";
-  html += "              <td>Resource year</td>";
-  html += "              <td class='text-end'>" + pbInfo.year + "</td>";
-  html += "            </tr><tr>";
-  html += "              <td>Resource genre</td>";
-  html += "              <td class='text-end'>" + pbInfo.genre + "</td>";
-  html += "        </tr></tbody></table>";
-  html += "      </div>";
-  html += "    </div>";
-  html += "  </div>";  
-  html += "  <div class='accordion-item'>";
-  html += "    <h2 class='accordion-header'>";
-  html += "      <button class='accordion-button collapsed' type='button' data-bs-toggle='collapse' data-bs-target='#accordion-info-general' aria-expanded='true' aria-controls='accordion-info-general'>";
-  html += "        General information";
-  html += "      </button>";
-  html += "    </h2>";
-  html += "    <div id='accordion-info-general' class='accordion-collapse collapse' data-bs-parent='#accordion-info'>";
-  html += "      <div class='accordion-body'>";
-  html += "        <table class='table table-striped'><tbody><tr>";
-  html += "              <td>Version</td>";
-  html += "              <td class='text-end'>" + version + "</td>";
-  html += "            </tr><tr>";
-  html += "              <td>Friendly name</td>";
-  html += "              <td class='text-end'>" + configuration.getString(PREFERENCES_KEY_FRIENDLY_NAME, "<not_given>") + "</td>";
-  html += "            </tr><tr>";
-  html += "              <td>Save & Restore state</td>";
-  html += "              <td class='text-end'>";
-  html +=                  configuration.getBool(PREFERENCES_KEY_RESTORE_OLD_STATE, false) ? "yes" : "no";
-  html += "              </td>";
-  html += "            </tr><tr>";
-  html += "              <td>Save & Restore playing state (default no)</td>";
-  html += "              <td class='text-end'>";
-  html +=                  configuration.getBool(PREFERENCES_KEY_RESTORE_PLAYING, false) ? "yes" : "no";
-  html += "              </td>";
-  html += "            </tr><tr>";
-  html += "              <td>WiFi SSID</td>";
-  html += "              <td class='text-end'>" + configuration.getString(PREFERENCES_KEY_WIFI_SSID, "") + "</td>";
-  html += "        </tr></tbody></table>";
-  html += "      </div>";
-  html += "    </div>";
-  html += "  </div>";
-  html += "</div>";
+    <!-----------------------------
+    ---- INFORMATIONS ACCORDION ---
+    ------------------------------>
+    <div class='accordion text-start' id='accordion-info'>
+        <div class='accordion-item'>
+            <h2 class='accordion-header'>
+                <button class='accordion-button collapsed' type='button' data-bs-toggle='collapse' data-bs-target='#accordion-info-playback'
+                        aria-expanded='true' aria-controls='accordion-info-playback'>
+                    Playback information
+                </button>
+            </h2>
+            <div id='accordion-info-playback' class='accordion-collapse collapse' data-bs-parent='#accordion-info'>
+                <div class='accordion-body'>
+                    <table class='table table-striped'>
+                        <tbody>
+                        <tr>
+                            <td>Playing</td>
+                            <td class='text-end'>
+                                [html += audioPlaying ? "yes" : "no"]
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>Volume</td>
+                            <td class='text-end'>[" + String(currentVolume) + "/" + String(maxVolume) + "]</td>
+                        </tr>
+                        <tr>
+                            <td>Muted</td>
+                            <td class='text-end'>
+                                [html += muted ? "yes" : "no"]
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>Equalizer Low</td>
+                            <td class='text-end'>[" + String(eqLow) + "dB"]</td>
+                        </tr>
+                        <tr>
+                            <td>Equalizer Mid</td>
+                            <td class='text-end'>[" + String(eqMid) + "dB"]</td>
+                        </tr>
+                        <tr>
+                            <td>Equalizer High</td>
+                            <td class='text-end'>[" + String(eqHigh) + "dB"]</td>
+                        </tr>
+                        <tr>
+                            <td>Balance (range -16 | +16)</td>
+                            <td class='text-end'>" + String(balanceLevel) + "</td>
+                        </tr>
+                        <tr>
+                            <td>Path to playlist</td>
+                            <td class='text-end'>" + currentPlaylist + "</td>
+                        </tr>
+                        <tr>
+                            <td>Index in playlist (starting from 0)</td>
+                            <td class='text-end'>" + String(currentPlaylistPosition) + "</td>
+                        </tr>
+                        <tr>
+                            <td>Resource path</td>
+                            <td class='text-end'>" + pbInfo.resourcePath + "</td>
+                        </tr>
+                        <tr>
+                            <td>Resource type</td>
+                            <td class='text-end'>" + pbInfo.type + "</td>
+                        </tr>
+                        <tr>
+                            <td>Resource title</td>
+                            <td class='text-end'>" + pbInfo.title + "</td>
+                        </tr>
+                        <tr>
+                            <td>Resource album</td>
+                            <td class='text-end'>" + pbInfo.album + "</td>
+                        </tr>
+                        <tr>
+                            <td>Resource artist</td>
+                            <td class='text-end'>" + pbInfo.artist + "</td>
+                        </tr>
+                        <tr>
+                            <td>Resource track number</td>
+                            <td class='text-end'>" + pbInfo.track + "</td>
+                        </tr>
+                        <tr>
+                            <td>Resource year</td>
+                            <td class='text-end'>" + pbInfo.year + "</td>
+                        </tr>
+                        <tr>
+                            <td>Resource genre</td>
+                            <td class='text-end'>" + pbInfo.genre + "</td>
+                        </tr>
+                        <tr>
+                            <td>Resource language (for TTS)</td>
+                            <td class='text-end'>" + pbInfo.tts_language + "</td>
+                        </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+        <div class='accordion-item'>
+            <h2 class='accordion-header'>
+                <button class='accordion-button collapsed' type='button' data-bs-toggle='collapse' data-bs-target='#accordion-info-general'
+                        aria-expanded='true' aria-controls='accordion-info-general'>
+                    General information
+                </button>
+            </h2>
+            <div id='accordion-info-general' class='accordion-collapse collapse' data-bs-parent='#accordion-info'>
+                <div class='accordion-body'>
+                    <table class='table table-striped'>
+                        <tbody>
+                        <tr>
+                            <td>Version</td>
+                            <td class='text-end'>" + version + "</td>
+                        </tr>
+                        <tr>
+                            <td>Friendly name</td>
+                            <td class='text-end'>" + configuration.getString(PREFERENCES_KEY_FRIENDLY_NAME, "
+                                <not_given>") + "
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>Save & Restore state</td>
+                            <td class='text-end'>
+                                html += configuration.getBool(PREFERENCES_KEY_RESTORE_OLD_STATE, false) ? "yes" : "no
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>Save & Restore playing state (default no)</td>
+                            <td class='text-end'>
+                                html += configuration.getBool(PREFERENCES_KEY_RESTORE_PLAYING, false) ? "yes" : "no
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>WiFi SSID</td>
+                            <td class='text-end'>" + configuration.getString(PREFERENCES_KEY_WIFI_SSID, "") + "</td>
+                        </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
 
-  html += "<hr style='margin: 3em 0em;'>";
+    <hr style='margin: 3em 0em;'>
 
-  /* ---------------------------- 
-  --  API FUNCTIONS ACCODRION  --
-  ---------------------------- */
-  html += "<div class='accordion text-start' id='accordion'>";
-  // PLAYBACK Collapsible
-  html += "  <div class='accordion-item'>";
-  html += "    <h2 class='accordion-header'>";
-  html += "      <button class='accordion-button collapsed' type='button' data-bs-toggle='collapse' data-bs-target='#accordion-collapse-playback' aria-expanded='true' aria-controls='accordion-collapse-playback'>";
-  html += "        Playback";
-  html += "        &nbsp;<span class='badge text-bg-success'>/api/v1/playback/</span>";
-  html += "        &nbsp;<span class='badge text-bg-info'>/api/v1/volume/</span>";
-  html += "      </button>";
-  html += "    </h2>";
-  html += "    <div id='accordion-collapse-playback' class='accordion-collapse collapse' data-bs-parent='#accordion'>";
-  html += "      <div class='accordion-body'>";
-  html += "        <table class='table table-striped'><tbody><tr>";
-  html += "              <td>Playing</td>";
-  html += "              <td class='text-end' id='playbackTable_audioPlayingValue'>";
-  html +=                  audioPlaying ? "yes" : "no";
-  html += "              </td>";
-  html += "            </tr><tr>";
-  html += "              <td>Volume</td>";
-  html += "              <td class='text-end' id='playbackTable_volumeValue'>" + String(currentVolume) + "/" + String(maxVolume) + "%</td>";
-  html += "            </tr><tr>";
-  html += "              <td>Muted</td>";
-  html += "              <td class='text-end' id='playbackTable_mutedValue'>";
-  html +=                  muted ? "yes" : "no";
-  html += "              </td>";
-  html += "        </tr></tbody></table>";
-  html += "        <hr><div class='btn-group' role='group' aria-label='Basic playback option (play, pause, next, previous)'>";
-  html += "          <button type='button' class='btn btn-secondary'  onclick=\"http = new XMLHttpRequest();http.open('GET', '/api/v1/playback/previous');http.send();\">";
-  html += "            <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-rewind-circle' viewBox='0 0 16 16'>";
-  html += "              <path d='M7.729 5.055a.5.5 0 0 0-.52.038l-3.5 2.5a.5.5 0 0 0 0 .814l3.5 2.5A.5.5 0 0 0 8 10.5V8.614l3.21 2.293A.5.5 0 0 0 12 10.5v-5a.5.5 0 0 0-.79-.407L8 7.386V5.5a.5.5 0 0 0-.271-.445'/>";
-  html += "              <path d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8'/>";
-  html += "            </svg>";
-  html += "          </button>";
-  html += "          <button type='button' class='btn btn-success'  onclick=\"http = new XMLHttpRequest();http.open('GET', '/api/v1/playback/play');http.send();document.getElementById('playbackTable_audioPlayingValue').innerHTML = 'yes';\">";
-  html += "            <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-play-circle' viewBox='0 0 16 16'>";
-  html += "              <path d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'></path>";
-  html += "              <path d='M6.271 5.055a.5.5 0 0 1 .52.038l3.5 2.5a.5.5 0 0 1 0 .814l-3.5 2.5A.5.5 0 0 1 6 10.5v-5a.5.5 0 0 1 .271-.445'></path>";
-  html += "            </svg>";
-  html += "          </button>";
-  html += "          <button type='button' class='btn btn-success'  onclick=\"http = new XMLHttpRequest();http.open('GET', '/api/v1/playback/pause');http.send();document.getElementById('playbackTable_audioPlayingValue').innerHTML = 'no';\">";
-  html += "            <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-pause-circle' viewBox='0 0 16 16'>";
-  html += "              <path d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/>";
-  html += "              <path d='M5 6.25a1.25 1.25 0 1 1 2.5 0v3.5a1.25 1.25 0 1 1-2.5 0zm3.5 0a1.25 1.25 0 1 1 2.5 0v3.5a1.25 1.25 0 1 1-2.5 0z'/>";
-  html += "            </svg>";
-  html += "          </button>";
-  html += "          <button type='button' class='btn btn-secondary' onclick=\"http = new XMLHttpRequest();http.open('GET', '/api/v1/playback/next');http.send();\">";
-  html += "            <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-skip-forward-circle' viewBox='0 0 16 16'>";
-  html += "              <path d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/>";
-  html += "              <path d='M4.271 5.055a.5.5 0 0 1 .52.038L7.5 7.028V5.5a.5.5 0 0 1 .79-.407L11 7.028V5.5a.5.5 0 0 1 1 0v5a.5.5 0 0 1-1 0V8.972l-2.71 1.935a.5.5 0 0 1-.79-.407V8.972l-2.71 1.935A.5.5 0 0 1 4 10.5v-5a.5.5 0 0 1 .271-.445'/>";
-  html += "            </svg>";
-  html += "          </button>";
-  html += "        </div>";
-  html += "        <br><hr><br><label for='volumeRange' class='form-label'>Volume</label>";
-  html += "        <input type='range' class='form-range' value='" + String(currentVolume) + "' min='0' max='" + String(maxVolume) + "' id='volumeRange' onchange='value = document.getElementById(\"volumeRange\").value; http = new XMLHttpRequest();http.open(\"GET\", \"/api/v1/volume/\" + value);http.send();document.getElementById(\"playbackTable_volumeValue\").innerHTML = value + \"/" + String(maxVolume) + "%\"'>";
-  html += "        <button type='button' id='playbackMuteButton' onclick=";
-  html += "                                                        \"http = new XMLHttpRequest();";
-  html += "                                                        http.open('GET', '/api/v1/volume/toggle_mute');";
-  html += "                                                        http.send(); button = document.getElementById('playbackMuteButton');";
-  html += "                                                        button.classList.contains('btn-outline-danger') ? button.className = 'btn btn-danger' : button.className = 'btn btn-outline-danger';";
-  html += "                                                        mutedValueHTML = document.getElementById('playbackTable_mutedValue');";
-  html += "                                                        button.classList.contains('btn-outline-danger') ? mutedValueHTML.innerHTML = 'no' : mutedValueHTML.innerHTML = 'yes'\" class='btn ";
-  html += muted ? "btn-danger'>" : "btn-outline-danger'>";
-  html += "          <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-volume-mute' viewBox='0 0 16 16'>";
-  html += "            <path d='M6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06zM6 5.04 4.312 6.39A.5.5 0 0 1 4 6.5H2v3h2a.5.5 0 0 1 .312.11L6 10.96zm7.854.606a.5.5 0 0 1 0 .708L12.207 8l1.647 1.646a.5.5 0 0 1-.708.708L11.5 8.707l-1.646 1.647a.5.5 0 0 1-.708-.708L10.793 8 9.146 6.354a.5.5 0 1 1 .708-.708L11.5 7.293l1.646-1.647a.5.5 0 0 1 .708 0z'></path>";
-  html += "          </svg> Mute/Unmute</button>";
-  html += "      </div>";
-  html += "    </div>";
-  html += "  </div>";
 
-  // PLAYLIST Collapsible
-  html += "  <div class='accordion-item'>";
-  html += "    <h2 class='accordion-header'>";
-  html += "      <button class='accordion-button collapsed' type='button' data-bs-toggle='collapse' data-bs-target='#accordion-collapse-playlist' aria-expanded='true' aria-controls='accordion-collapse-playlist'>";
-  html += "        Playlist";
-  html += "        &nbsp;<span class='badge text-bg-success'>/api/v1/playlist/</span>";
-  html += "      </button>";
-  html += "    </h2>";
-  html += "    <div id='accordion-collapse-playlist' class='accordion-collapse collapse' data-bs-parent='#accordion'>";
-  html += "      <div class='accordion-body'>";
-  html += "        <strong>Work in progress</strong>";
-  html += "      </div>";
-  html += "    </div>";
-  html += "  </div>";
+    <!---------------------------------->
+    <!---- API FUNCTIONS ACCODRION  ---->
+    <!---------------------------------->
+    <div class='accordion text-start' id='accordion'>
+        <!--PLAYBACK Collapsible -->
+        <div class='accordion-item'>
+            <h2 class='accordion-header'>
+                <button class='accordion-button collapsed' type='button' data-bs-toggle='collapse'
+                        data-bs-target='#accordion-collapse-playback' aria-expanded='true' aria-controls='accordion-collapse-playback'>
+                    Playback
+                    &nbsp;<span class='badge text-bg-success'>/api/v1/playback/</span>
+                    &nbsp;<span class='badge text-bg-info'>/api/v1/volume/</span>
+                </button>
+            </h2>
+            <div id='accordion-collapse-playback' class='accordion-collapse collapse' data-bs-parent='#accordion'>
+                <div class='accordion-body'>
+                    <table class='table table-striped'>
+                        <tbody>
+                        <tr>
+                            <td>Playing</td>
+                            <td class='text-end' id='playbackTable_audioPlayingValue'>
+                                html += audioPlaying ? "yes" : "no
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>Volume</td>
+                            <td class='text-end' id='playbackTable_volumeValue'>" + String(currentVolume) + "/" + String(maxVolume) + "%
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>Muted</td>
+                            <td class='text-end' id='playbackTable_mutedValue'>
+                                html += muted ? "yes" : "no
+                            </td>
+                        </tr>
+                        </tbody>
+                    </table>
+                    <hr>
+                    <div class='btn-group' role='group' aria-label='Basic playback option (play, pause, next, previous)'>
+                        <button type='button' class='btn btn-secondary' onclick="http
+                                = new XMLHttpRequest();http.open('GET', '/api/v1/playback/previous');http.send();">
+                            <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-rewind-circle'
+                                 viewBox='0 0 16 16'>
+                                <path d='M7.729 5.055a.5.5 0 0 0-.52.038l-3.5 2.5a.5.5 0 0 0 0 .814l3.5 2.5A.5.5 0 0 0 8 10.5V8.614l3.21 2.293A.5.5 0 0 0 12 10.5v-5a.5.5 0 0 0-.79-.407L8 7.386V5.5a.5.5 0 0 0-.271-.445'/>
+                                <path d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8'/>
+                            </svg>
+                        </button>
+                        <button type='button' class='btn btn-success' onclick="http
+                                = new XMLHttpRequest();http.open('GET',
+                                '/api/v1/playback/play');http.send();document.getElementById('playbackTable_audioPlayingValue').innerHTML =
+                                'yes';">
+                            <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-play-circle'
+                                 viewBox='0 0 16 16'>
+                                <path d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'></path>
+                                <path d='M6.271 5.055a.5.5 0 0 1 .52.038l3.5 2.5a.5.5 0 0 1 0 .814l-3.5 2.5A.5.5 0 0 1 6 10.5v-5a.5.5 0 0 1 .271-.445'></path>
+                            </svg>
+                        </button>
+                        <button type='button' class='btn btn-success'
+                                onclick="http = new XMLHttpRequest();http.open('GET', '/api/v1/playback/pause');http.send();document.getElementById('playbackTable_audioPlayingValue').innerHTML = 'no';\">
+                            <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-pause-circle'
+                                 viewBox='0 0 16 16'>
+                                <path d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/>
+                                <path d='M5 6.25a1.25 1.25 0 1 1 2.5 0v3.5a1.25 1.25 0 1 1-2.5 0zm3.5 0a1.25 1.25 0 1 1 2.5 0v3.5a1.25 1.25 0 1 1-2.5 0z'/>
+                            </svg>
+                        </button>
+                        <button type='button' class='btn btn-secondary'
+                                onclick="http = new XMLHttpRequest();http.open('GET', '/api/v1/playback/next');http.send();">
+                            <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor'
+                                 class='bi bi-skip-forward-circle'
+                                 viewBox='0 0 16 16'>
+                                <path d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/>
+                                <path d='M4.271 5.055a.5.5 0 0 1 .52.038L7.5 7.028V5.5a.5.5 0 0 1 .79-.407L11 7.028V5.5a.5.5 0 0 1 1 0v5a.5.5 0 0 1-1 0V8.972l-2.71 1.935a.5.5 0 0 1-.79-.407V8.972l-2.71 1.935A.5.5 0 0 1 4 10.5v-5a.5.5 0 0 1 .271-.445'/>
+                            </svg>
+                        </button>
+                    </div>
+                    <br>
+                    <hr>
+                    <br><label for='volumeRange' class='form-label'>Volume</label>
+                    <input type='range' class='form-range' value='" + String(currentVolume) + "' min='0' max='" + String(maxVolume) + "'
+                           id='volumeRange'
+                           onchange='value = document.getElementById(\"volumeRange\").value; http = new XMLHttpRequest();http.open(\"GET\", \"/api/v1/volume/\" + value);http.send();document.getElementById(\"playbackTable_volumeValue\").innerHTML = value + \"/" + String(maxVolume) + "%\"'>
+                    <button type='button' id='playbackMuteButton' onclick=
+                            "http = new XMLHttpRequest();
+                                    http.open('GET', '/api/v1/volume/toggle_mute');
+                                    http.send(); button = document.getElementById('playbackMuteButton');
+                                    button.classList.contains('btn-outline-danger') ? button.className = 'btn btn-danger' : button.className = 'btn
+                                    btn-outline-danger';
+                                    mutedValueHTML = document.getElementById('playbackTable_mutedValue');
+                                    button.classList.contains('btn-outline-danger') ? mutedValueHTML.innerHTML = 'no' : mutedValueHTML.innerHTML = 'yes'"
+                            class='btn btn-danger'> or btn-outline-danger'>
+                        <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-volume-mute'
+                             viewBox='0 0 16 16'>
+                            <path d='M6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06zM6 5.04 4.312 6.39A.5.5 0 0 1 4 6.5H2v3h2a.5.5 0 0 1 .312.11L6 10.96zm7.854.606a.5.5 0 0 1 0 .708L12.207 8l1.647 1.646a.5.5 0 0 1-.708.708L11.5 8.707l-1.646 1.647a.5.5 0 0 1-.708-.708L10.793 8 9.146 6.354a.5.5 0 1 1 .708-.708L11.5 7.293l1.646-1.647a.5.5 0 0 1 .708 0z'></path>
+                        </svg>
+                        Mute/Unmute
+                    </button>
+                </div>
+            </div>
+        </div>
 
-  // BALANCE Collapsible
-  html += "  <div class='accordion-item'>";
-  html += "    <h2 class='accordion-header'>";
-  html += "      <button class='accordion-button collapsed' type='button' data-bs-toggle='collapse' data-bs-target='#accordion-collapse-balance' aria-expanded='true' aria-controls='accordion-collapse-balance'>";
-  html += "        Balance";
-  html += "        &nbsp;<span class='badge text-bg-info'>/api/v1/balance/</span>";
-  html += "      </button>";
-  html += "    </h2>";
-  html += "    <div id='accordion-collapse-balance' class='accordion-collapse collapse' data-bs-parent='#accordion'>";
-  html += "      <div class='accordion-body'>";
-  html += "        <p>The Audio library used maps -16 to most right and 16 to most left. Don't be confused by the appearently wrong direction the slider moves the balance to right and left.</p>";
-  html += "        <table class='table table-striped'><tbody><tr>";
-  html += "              <td>Balance (range -16 | +16)</td>";
-  html += "              <td class='text-end' id='balanceChangeTable_balanceValue'>" + String(balanceLevel) + "</td>";
-  html += "        </tr></tbody></table>";
-  html += "        <br><hr><label for='balanceRange' class='form-label'>Balance (-16 to 16)</label>";
-  html += "        <input type='range' class='form-range' value='" + String(balanceLevel+16) + "' min='0' max='32' id='balanceRange' onchange='value = document.getElementById(\"balanceRange\").value; http = new XMLHttpRequest();http.open(\"GET\", \"/api/v1/balance/\" + value);http.send(); document.getElementById(\"balanceChangeTable_balanceValue\").innerHTML = value-16;'>";
-  html += "      </div>";
-  html += "    </div>";
-  html += "  </div>";
+        <!--PLAYLIST Collapsible -->
+        <div class='accordion-item'>
+            <h2 class='accordion-header'>
+                <button class='accordion-button collapsed' type='button' data-bs-toggle='collapse'
+                        data-bs-target='#accordion-collapse-playlist' aria-expanded='true' aria-controls='accordion-collapse-playlist'>
+                    Playlist
+                    &nbsp;<span class='badge text-bg-success'>/api/v1/playlist/</span>
+                </button>
+            </h2>
+            <div id='accordion-collapse-playlist' class='accordion-collapse collapse' data-bs-parent='#accordion'>
+                <div class='accordion-body'>
+                    <!--play playlist (select playlist) api demo -->
+                    <p>Demo for playing a specific playlist on the SD card over the API.</p>
+                    <div class='input-group mb-3'>
+                        <input type='text' class='form-control' placeholder='Playlist path (must start with a /)'
+                               aria-label='Playlist path (must start with a /)' aria-describedby='playlist_playBtn'
+                               id='playlist_playPathInput'>
+                        <button class='btn btn-success' type='button' id='playlist_playBtn' onclick=
+                                "playlistPath
+                                = document.getElementById('playlist_playPathInput').value;
+                                http = new XMLHttpRequest();http.open('GET', '/api/v1/playlist/play?playlist_path='+playlistPath);http.send();">
+                            Change
+                        </button>
+                    </div>
+                    <hr>
+                    <!--create playlist api demo   -->
+                    <p>Demo for creating a new playlist containing all the contents of the given folder (on the SD card).</p>
+                    <p>The new playlist will be located in the given folder and is named <code>.directory.m3u</code>. This can't be changed.
+                    </p>
+                    <p>Creating fully personalized playlist or even uploading one will be subject of further development (see also the
+                        Roadmap of the NetSpeaker project!).</p>
+                    <div class='input-group mb-3'>
+                        <input type='text' class='form-control' placeholder='Folder path (must start with and end without a /)'
+                               aria-label='Folder path (must start with a /)' aria-describedby='playlist_createBtn'
+                               id='playlist_createPathInput'>
+                        <button class='btn btn-success' type='button' id='playlist_createBtn' onclick=
+                                "folderPath
+                                = document.getElementById('playlist_createPathInput').value;
+                                http = new XMLHttpRequest();http.open('GET', '/api/v1/playlist/create?folder_path='+folderPath);http.send();">
+                            Change
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
 
-  // EQUALIZER Collapsible
-  html += "  <div class='accordion-item'>";
-  html += "    <h2 class='accordion-header'>";
-  html += "      <button class='accordion-button collapsed' type='button' data-bs-toggle='collapse' data-bs-target='#accordion-collapse-eq' aria-expanded='true' aria-controls='accordion-collapse-eq'>";
-  html += "        Equalizer";
-  html += "        &nbsp;<span class='badge text-bg-info'>/api/v1/eq/</span>";
-  html += "      </button>";
-  html += "    </h2>";
-  html += "    <div id='accordion-collapse-eq' class='accordion-collapse collapse' data-bs-parent='#accordion'>";
-  html += "      <div class='accordion-body'>";
-  html += "        <table class='table table-striped'><tbody><tr>";
-  html += "              <td>Equalizer Low (-40dB to 6dB)</td>";
-  html += "              <td class='text-end' id='eqChangeTable_eqLowValue'>" + String(eqLow) + "dB</td>";
-  html += "            </tr><tr>";
-  html += "              <td>Equalizer Mid (-40dB to 6dB)</td>";
-  html += "              <td class='text-end' id='eqChangeTable_eqMidValue'>" + String(eqMid) + "dB</td>";
-  html += "            </tr><tr>";
-  html += "              <td>Equalizer High (-40dB to 6dB)</td>";
-  html += "              <td class='text-end' id='eqChangeTable_eqHighValue'>" + String(eqHigh) + "dB</td>";
-  html += "        </tr></tbody></table>";
-  html += "        <br><hr><label for='eqLowRange' class='form-label'>Equalizer for lows (-40dB to 6dB)</label>";
-  html += "        <input type='range' class='form-range' value='" + String(eqLow+40) + "' min='0' max='46' id='eqLowRange' onchange='value = document.getElementById(\"eqLowRange\").value; http = new XMLHttpRequest();http.open(\"GET\", \"/api/v1/eq/low/\" + value);http.send(); document.getElementById(\"eqChangeTable_eqLowValue\").innerHTML = value-40 + \"dB\";'>";
-  html += "        <br><hr><br><label for='eqMidRange' class='form-label'>Equalizer for mids (-40dB to 6dB)</label>";
-  html += "        <input type='range' class='form-range' value='" + String(eqMid+40) + "' min='0' max='46' id='eqMidRange' onchange='value = document.getElementById(\"eqMidRange\").value; http = new XMLHttpRequest();http.open(\"GET\", \"/api/v1/eq/mid/\" + value);http.send(); document.getElementById(\"eqChangeTable_eqMidValue\").innerHTML = value-40 + \"dB\";'>";
-  html += "        <br><hr><br><label for='eqHighRange' class='form-label'>Equalizer for highs (-40dB to 6dB)</label>";
-  html += "        <input type='range' class='form-range' value='" + String(eqHigh+40) + "' min='0' max='46' id='eqHighRange' onchange='value = document.getElementById(\"eqHighRange\").value; http = new XMLHttpRequest();http.open(\"GET\", \"/api/v1/eq/high/\" + value);http.send(); document.getElementById(\"eqChangeTable_eqHighValue\").innerHTML = value-40 + \"dB\";'>";
-  html += "      </div>";
-  html += "    </div>";
-  html += "  </div>";
+        <!--BALANCE Collapsible -->
+        <div class='accordion-item'>
+            <h2 class='accordion-header'>
+                <button class='accordion-button collapsed' type='button' data-bs-toggle='collapse'
+                        data-bs-target='#accordion-collapse-balance' aria-expanded='true' aria-controls='accordion-collapse-balance'>
+                    Balance
+                    &nbsp;<span class='badge text-bg-info'>/api/v1/balance/</span>
+                </button>
+            </h2>
+            <div id='accordion-collapse-balance' class='accordion-collapse collapse' data-bs-parent='#accordion'>
+                <div class='accordion-body'>
+                    <p>The Audio library used maps -16 to most right and 16 to most left. Don't be confused by the appearently wrong
+                        direction the slider moves the balance to right and left.</p>
+                    <table class='table table-striped'>
+                        <tbody>
+                        <tr>
+                            <td>Balance (range -16 | +16)</td>
+                            <td class='text-end' id='balanceChangeTable_balanceValue'>" + String(balanceLevel) + "</td>
+                        </tr>
+                        </tbody>
+                    </table>
+                    <br>
+                    <hr>
+                    <label for='balanceRange' class='form-label'>Balance (-16 to 16)</label>
+                    <input type='range' class='form-range' value='" + String(balanceLevel+16) + "' min='0' max='32' id='balanceRange'
+                           onchange='value = document.getElementById(\"balanceRange\").value; http = new XMLHttpRequest();http.open(\"GET\", \"/api/v1/balance/\" + value);http.send(); document.getElementById(\"balanceChangeTable_balanceValue\").innerHTML = value-16;'>
+                </div>
+            </div>
+        </div>
 
-  // FRIENDLY NAME Collapsible
-  html += "  <div class='accordion-item'>";
-  html += "    <h2 class='accordion-header'>";
-  html += "      <button class='accordion-button collapsed' type='button' data-bs-toggle='collapse' data-bs-target='#accordion-collapse-frname' aria-expanded='true' aria-controls='accordion-collapse-frname'>";
-  html += "        Friendly name";
-  html += "        &nbsp;<span class='badge text-bg-warning'>/api/v1/system/name</span>";  // explicitly no trailing / as there are the two endpoints /name and /name/change
-  html += "      </button>";
-  html += "    </h2>";
-  html += "    <div id='accordion-collapse-frname' class='accordion-collapse collapse' data-bs-parent='#accordion'>";
-  html += "      <div class='accordion-body'>";
-  html += "        <strong>Work in progress</strong>";
-  html += "      </div>";
-  html += "    </div>";
-  html += "  </div>";
+        <!--EQUALIZER Collapsible -->
+        <div class='accordion-item'>
+            <h2 class='accordion-header'>
+                <button class='accordion-button collapsed' type='button' data-bs-toggle='collapse' data-bs-target='#accordion-collapse-eq'
+                        aria-expanded='true' aria-controls='accordion-collapse-eq'>
+                    Equalizer
+                    &nbsp;<span class='badge text-bg-info'>/api/v1/eq/</span>
+                </button>
+            </h2>
+            <div id='accordion-collapse-eq' class='accordion-collapse collapse' data-bs-parent='#accordion'>
+                <div class='accordion-body'>
+                    <table class='table table-striped'>
+                        <tbody>
+                        <tr>
+                            <td>Equalizer Low (-40dB to 6dB)</td>
+                            <td class='text-end' id='eqChangeTable_eqLowValue'>" + String(eqLow) + "dB</td>
+                        </tr>
+                        <tr>
+                            <td>Equalizer Mid (-40dB to 6dB)</td>
+                            <td class='text-end' id='eqChangeTable_eqMidValue'>" + String(eqMid) + "dB</td>
+                        </tr>
+                        <tr>
+                            <td>Equalizer High (-40dB to 6dB)</td>
+                            <td class='text-end' id='eqChangeTable_eqHighValue'>" + String(eqHigh) + "dB</td>
+                        </tr>
+                        </tbody>
+                    </table>
+                    <br>
+                    <hr>
+                    <label for='eqLowRange' class='form-label'>Equalizer for lows (-40dB to 6dB)</label>
+                    <input type='range' class='form-range' value='" + String(eqLow+40) + "' min='0' max='46' id='eqLowRange'
+                           onchange='value = document.getElementById(\"eqLowRange\").value; http = new XMLHttpRequest();http.open(\"GET\", \"/api/v1/eq/low/\" + value);http.send(); document.getElementById(\"eqChangeTable_eqLowValue\").innerHTML = value-40 + \"dB\";'>
+                    <br>
+                    <hr>
+                    <br><label for='eqMidRange' class='form-label'>Equalizer for mids (-40dB to 6dB)</label>
+                    <input type='range' class='form-range' value='" + String(eqMid+40) + "' min='0' max='46' id='eqMidRange'
+                           onchange='value = document.getElementById(\"eqMidRange\").value; http = new XMLHttpRequest();http.open(\"GET\", \"/api/v1/eq/mid/\" + value);http.send(); document.getElementById(\"eqChangeTable_eqMidValue\").innerHTML = value-40 + \"dB\";'>
+                    <br>
+                    <hr>
+                    <br><label for='eqHighRange' class='form-label'>Equalizer for highs (-40dB to 6dB)</label>
+                    <input type='range' class='form-range' value='" + String(eqHigh+40) + "' min='0' max='46' id='eqHighRange'
+                           onchange='value = document.getElementById(\"eqHighRange\").value; http = new XMLHttpRequest();http.open(\"GET\", \"/api/v1/eq/high/\" + value);http.send(); document.getElementById(\"eqChangeTable_eqHighValue\").innerHTML = value-40 + \"dB\";'>
+                </div>
+            </div>
+        </div>
 
-  // WiFi CONFIGURATION Collapsible
-  html += "  <div class='accordion-item'>";
-  html += "    <h2 class='accordion-header'>";
-  html += "      <button class='accordion-button collapsed' type='button' data-bs-toggle='collapse' data-bs-target='#accordion-collapse-wifi' aria-expanded='true' aria-controls='accordion-collapse-wifi'>";
-  html += "        WiFi configuration";
-  html += "        &nbsp;<span class='badge text-bg-warning'>/api/v1/system/wifi/</span>";
-  html += "      </button>";
-  html += "    </h2>";
-  html += "    <div id='accordion-collapse-wifi' class='accordion-collapse collapse' data-bs-parent='#accordion'>";
-  html += "      <div class='accordion-body'>";
-  html += "        <strong>Work in progress</strong>";
-  html += "      </div>";
-  html += "    </div>";
-  html += "  </div>";
+        <!--FRIENDLY NAME Collapsible -->
+        <div class='accordion-item'>
+            <h2 class='accordion-header'>
+                <button class='accordion-button collapsed' type='button' data-bs-toggle='collapse'
+                        data-bs-target='#accordion-collapse-frname' aria-expanded='true' aria-controls='accordion-collapse-frname'>
+                    Friendly name
+                    &nbsp;<span class='badge text-bg-warning'>/api/v1/system/name</span>
+                    <!--explicitly no trailing / as there are the two endpoints /name and /name/change -->
+                </button>
+            </h2>
+            <div id='accordion-collapse-frname' class='accordion-collapse collapse' data-bs-parent='#accordion'>
+                <div class='accordion-body'>
+                    <div class='input-group mb-3'>
+                        <span class='input-group-text' id='frnameChange_oldName'>" + configuration.getString(PREFERENCES_KEY_FRIENDLY_NAME) + "</span>
+                        <span class='input-group-text'> -> </span>
+                        <input type='text' class='form-control' placeholder='New friendly name' aria-label='New friendly name'
+                               aria-describedby='frnameChange_BTN_submitName' id='frnameChange_newNameInput'>
+                        <button class='btn btn-success' type='button' id='frnameChange_BTN_submitName' onclick=
+                                \"newNameInput
+                        = document.getElementById('frnameChange_newNameInput'); if(newNameInput.value != ''){ http = new
+                        XMLHttpRequest();http.open('GET',
+                        '/api/v1/system/name/change?friendly_name='+newNameInput.value);http.send();document.getElementById('frnameChange_oldName').innerHTML=newNameInput.value;document.getElementById('title_frname').innerHTML=newNameInput.value;newNameInput.value='';
+                        }\">
+                        Change</button>
+                    </div>
+                </div>
+            </div>
+        </div>
 
-  // SAVE AND RESTORE Collapsible
-  html += "  <div class='accordion-item'>";
-  html += "    <h2 class='accordion-header'>";
-  html += "      <button class='accordion-button collapsed' type='button' data-bs-toggle='collapse' data-bs-target='#accordion-collapse-restore' aria-expanded='true' aria-controls='accordion-collapse-restore'>";
-  html += "        Save & Restore";
-  html += "        &nbsp;<span class='badge text-bg-warning'>/api/v1/system/restore_state/</span>";
-  html += "        &nbsp;<span class='badge text-bg-warning'>/api/v1/system/restore_playing/</span>";
-  html += "      </button>";
-  html += "    </h2>";
-  html += "    <div id='accordion-collapse-restore' class='accordion-collapse collapse' data-bs-parent='#accordion'>";
-  html += "      <div class='accordion-body'>";
-  html += "        <strong>Work in progress</strong>";
-  html += "      </div>";
-  html += "    </div>";
-  html += "  </div>";
+        <!-- WiFi CONFIGURATION Collapsible -->
+        <div class='accordion-item'>
+            <h2 class='accordion-header'>
+                <button class='accordion-button collapsed' type='button' data-bs-toggle='collapse' data-bs-target='#accordion-collapse-wifi'
+                        aria-expanded='true' aria-controls='accordion-collapse-wifi'>
+                    WiFi configuration
+                    &nbsp;<span class='badge text-bg-warning'>/api/v1/system/wifi/</span>
+                </button>
+            </h2>
+            <div id='accordion-collapse-wifi' class='accordion-collapse collapse' data-bs-parent='#accordion'>
+                <div class='accordion-body'>
+                    <p>Demo for changing the wifi SSID and PSK (= Pre-Shared Key; well-known as 'Password' or 'Key'). There's no need to
+                        give both - if you just wanna change the password - do it!</p>
+                    <p>After doing this, you have to go down to the restart collapsible. There, restart the NetSpeaker and it should connect
+                        to the configured WiFi.</p>
+                    <p>If anything is wrong (either SSID or PSK wrong/typo, or the wifi's not available), the NetSpeaker opens an HotSpot
+                        with the SSID <code>" + apSSID + "</code> and the PSK <code>" + apPSK + "</code>! </p>
+                    <div class='input-group mb-3'>
+                        <span class='input-group-text'>SSID</span>
+                        <input type='text' class='form-control' placeholder='Type in a new SSID here (optional)'
+                               aria-label='Type in a new SSID here (optional)' aria-describedby='wifiChange_submitBtn'
+                               id='wifiChange_ssidInput'>
+                        <span class='input-group-text'>PSK</span>
+                        <input type='password' class='form-control' placeholder='Type in a new PSK here (optional)'
+                               aria-label='Type in a new PSK here (optional)' aria-describedby='wifiChange_submitBtn'
+                               id='wifiChange_pskInput'>
+                        <button class='btn btn-success' type='button' id='wifiChange_submitBtn' onclick=
+                                "newSSID
+                                = document.getElementById('wifiChange_ssidInput').value;
+                                newPSK = document.getElementById('wifiChange_pskInput').value;
+                                http = new XMLHttpRequest();http.open('GET',
+                                '/api/v1/system/wifi/change?ssid='+newSSID+'&psk='+newPSK);http.send();">
+                            Change
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
 
-  // RESTART Collapsible
-  html += "  <div class='accordion-item'>";
-  html += "    <h2 class='accordion-header'>";
-  html += "      <button class='accordion-button collapsed' type='button' data-bs-toggle='collapse' data-bs-target='#accordion-collapse-restart' aria-expanded='true' aria-controls='accordion-collapse-restart'>";
-  html += "        Restart";
-  html += "        &nbsp;<span class='badge text-bg-danger'>/api/v1/system/restart</span>";
-  html += "      </button>";
-  html += "    </h2>";
-  html += "    <div id='accordion-collapse-restart' class='accordion-collapse collapse' data-bs-parent='#accordion'>";
-  html += "      <div class='accordion-body'>";
-  html += "        <button type='button' class='btn btn-danger' onclick=\"function wait(ms){var start = new Date().getTime();var end=start;while(end<start+ms){end = new Date().getTime();}}http = new XMLHttpRequest();http.open('GET', '/api/v1/system/restart');http.send();wait(3000);window.location.reload();\">";
-  html += "          <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-bootstrap-reboot' viewBox='0 0 16 16'>";
-  html += "            <path d='M1.161 8a6.84 6.84 0 1 0 6.842-6.84.58.58 0 1 1 0-1.16 8 8 0 1 1-6.556 3.412l-.663-.577a.58.58 0 0 1 .227-.997l2.52-.69a.58.58 0 0 1 .728.633l-.332 2.592a.58.58 0 0 1-.956.364l-.643-.56A6.812 6.812 0 0 0 1.16 8z'></path>";
-  html += "            <path d='M6.641 11.671V8.843h1.57l1.498 2.828h1.314L9.377 8.665c.897-.3 1.427-1.106 1.427-2.1 0-1.37-.943-2.246-2.456-2.246H5.5v7.352zm0-3.75V5.277h1.57c.881 0 1.416.499 1.416 1.32 0 .84-.504 1.324-1.386 1.324h-1.6z'></path>";
-  html += "          </svg> Restart";
-  html += "        </button>";
-  html += "      </div>";
-  html += "    </div>";
-  html += "  </div>";
+        <!--SAVE AND RESTORE Collapsible -->
+        <div class='accordion-item'>
+            <h2 class='accordion-header'>
+                <button class='accordion-button collapsed' type='button' data-bs-toggle='collapse'
+                        data-bs-target='#accordion-collapse-restore' aria-expanded='true' aria-controls='accordion-collapse-restore'>
+                    Save & Restore
+                    &nbsp;<span class='badge text-bg-warning'>/api/v1/system/restore_state/</span>
+                    &nbsp;<span class='badge text-bg-warning'>/api/v1/system/restore_playing/</span>
+                </button>
+            </h2>
+            <div id='accordion-collapse-restore' class='accordion-collapse collapse' data-bs-parent='#accordion'>
+                <div class='accordion-body'>
+                    <p>Restoring the old/last state can be toggeled on or off over the API. Doing so can have many reasons, one could be
+                        that you wanted to build a device always playing some startup sound, or so.</p>
+                    <div class='form-check form-switch'>
+                        <input onclick="this.value ? console.log('Toggeled on') : console.log('Toggeled off');" class='form-check-input'
+                               type='checkbox' role='switch' id='restoreStateSwitch' " +
+                        configuration.getBool(PREFERENCES_KEY_RESTORE_OLD_STATE,
+                        true) ? "checked" : String() + " >
+                        <label class='form-check-label' for='restoreStateSwitch'>Restore last saved state</label>
+                    </div>
+                    <div class='form-check form-switch'>
+                        <input onclick="this.value ? console.log('Toggeled on') : console.log('Toggeled off');" class='form-check-input'
+                               type='checkbox' role='switch' id='restorePlayingSwitch' " +
+                        configuration.getBool(PREFERENCES_KEY_RESTORE_PLAYING,
+                        true) ? "checked" : String() + " >
+                        <label class='form-check-label' for='restorePlayingSwitch'>Also restore last playing state</label>
+                    </div>
+                </div>
+            </div>
+        </div>
 
-  html += "</div></div>";
-  html += "<script src='https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js' integrity='sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL' crossorigin='anonymous'></script>";
-  html += "</body></html>";
+        <!--RESTART Collapsible -->
+        <div class='accordion-item'>
+            <h2 class='accordion-header'>
+                <button class='accordion-button collapsed' type='button' data-bs-toggle='collapse'
+                        data-bs-target='#accordion-collapse-restart' aria-expanded='true' aria-controls='accordion-collapse-restart'>
+                    Restart
+                    &nbsp;<span class='badge text-bg-danger'>/api/v1/system/restart</span>
+                </button>
+            </h2>
+            <div id='accordion-collapse-restart' class='accordion-collapse collapse' data-bs-parent='#accordion'>
+                <div class='accordion-body'>
+                    <button type='button' class='btn btn-danger' onclick="function wait(ms){var start=new Date().getTime();var
+                                    end=start;while(end<start+ms){end
+                            = new Date().getTime();}}http = new XMLHttpRequest();http.open('GET',
+                            '/api/v1/system/restart');http.send();wait(3000);window.location.reload();">
+                        <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-bootstrap-reboot'
+                             viewBox='0 0 16 16'>
+                            <path d='M1.161 8a6.84 6.84 0 1 0 6.842-6.84.58.58 0 1 1 0-1.16 8 8 0 1 1-6.556 3.412l-.663-.577a.58.58 0 0 1 .227-.997l2.52-.69a.58.58 0 0 1 .728.633l-.332 2.592a.58.58 0 0 1-.956.364l-.643-.56A6.812 6.812 0 0 0 1.16 8z'></path>
+                            <path d='M6.641 11.671V8.843h1.57l1.498 2.828h1.314L9.377 8.665c.897-.3 1.427-1.106 1.427-2.1 0-1.37-.943-2.246-2.456-2.246H5.5v7.352zm0-3.75V5.277h1.57c.881 0 1.416.499 1.416 1.32 0 .84-.504 1.324-1.386 1.324h-1.6z'></path>
+                        </svg>
+                        Restart
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
 
+
+    <!-- Modal -->
+    <div class="modal fade" id="selectIPAddressModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
+         aria-labelledby="selectIPAddressModalLabel" aria-hidden="true">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h1 class="modal-title fs-5" id="selectIPAddressModalLabel">NetSpeaker configuration</h1>
+                </div>
+                <div class="text-start modal-body">
+                    <p>Please give the IP adress of you NetSpeaker here, so that this site can access its API.</p>
+                    
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-primary">Apply & Test</button>
+                    <button type="button" class="btn btn-success">Ok</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<script src='https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js'
+        integrity='sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL' crossorigin='anonymous'></script>
+<script type="text/javascript">
+    function validateIPAddress(ipaddress) {
+        if (/^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(ipaddress)) {
+            return true;
+        }
+        return false;
+    }
+    if (document.cookie == "" || !validateIPAddress(document.cookie)) {
+        var selectIPModal = new bootstrap.Modal(document.getElementById('selectIPAddressModal'), {})
+        selectIPModal.show()
+    }
+</script>
+</body>
+</html>
\ No newline at end of file

Playing	"; - html += audioPlaying ? "yes" : "no"; - html += "
Volume	" + String(currentVolume) + "/" + String(maxVolume) + "%
Muted	"; - html += muted ? "yes" : "no"; - html += "
Equalizer Low	" + String(eqLow) + "dB
Equalizer Mid	" + String(eqMid) + "dB
Equalizer High	" + String(eqHigh) + "dB
Balance (range -16 \| +16)	" + String(balanceLevel) + "
Path to playlist	" + currentPlaylist + "
Index in playlist (starting from 0)	" + String(currentPlaylistPosition) + "
Resource path	" + pbInfo.resourcePath + "
Resource type	" + pbInfo.type + "
Resource title	" + pbInfo.title + "
Resource album	" + pbInfo.album + "
Resource artist	" + pbInfo.artist + "
Resource track number	" + pbInfo.track + "
Resource year	" + pbInfo.year + "
Resource genre	" + pbInfo.genre + "
Version	" + version + "
Friendly name	" + configuration.getString(PREFERENCES_KEY_FRIENDLY_NAME, "") + "
Save & Restore state	"; - html += configuration.getBool(PREFERENCES_KEY_RESTORE_OLD_STATE, false) ? "yes" : "no"; - html += "
Save & Restore playing state (default no)	"; - html += configuration.getBool(PREFERENCES_KEY_RESTORE_PLAYING, false) ? "yes" : "no"; - html += "
WiFi SSID	" + configuration.getString(PREFERENCES_KEY_WIFI_SSID, "") + "
Playing	+ [html += audioPlaying ? "yes" : "no"] +
Volume	[" + String(currentVolume) + "/" + String(maxVolume) + "]
Muted	+ [html += muted ? "yes" : "no"] +
Equalizer Low	[" + String(eqLow) + "dB"]
Equalizer Mid	[" + String(eqMid) + "dB"]
Equalizer High	[" + String(eqHigh) + "dB"]
Balance (range -16 \| +16)	" + String(balanceLevel) + "
Path to playlist	" + currentPlaylist + "
Index in playlist (starting from 0)	" + String(currentPlaylistPosition) + "
Resource path	" + pbInfo.resourcePath + "
Resource type	" + pbInfo.type + "
Resource title	" + pbInfo.title + "
Resource album	" + pbInfo.album + "
Resource artist	" + pbInfo.artist + "
Resource track number	" + pbInfo.track + "
Resource year	" + pbInfo.year + "
Resource genre	" + pbInfo.genre + "
Resource language (for TTS)	" + pbInfo.tts_language + "
Playing	+ html += audioPlaying ? "yes" : "no +
Volume	" + String(currentVolume) + "/" + String(maxVolume) + "% +
Muted	+ html += muted ? "yes" : "no +
Equalizer Low (-40dB to 6dB)	" + String(eqLow) + "dB
Equalizer Mid (-40dB to 6dB)	" + String(eqMid) + "dB
Equalizer High (-40dB to 6dB)	" + String(eqHigh) + "dB