Moved JS&CSS into appropriate files and changed observer to refresh button

ui/index.html

@@ -458,38 +458,8 @@
                 </div>
             </div>
         </div>
-
         <div id="tab-content-gallery" class="tab-content">
-            <script>
+            <button class="primaryButton" onclick="refreshGallery()">Refresh</button>
-                tab = document.getElementById("tab-content-gallery")
-                new MutationObserver(function() { // to update all the images, just call this function
-                    console.log("clicked")
-                    container = document.getElementById("imagecontainer")
-                    container.remove()
-                    fetch('/all_images')
-                        .then(response => response.text())
-                        .then(text => new DOMParser().parseFromString(text, 'text/html'))
-                        .then(html_like => html_like.getElementsByTagName('div')[0])
-                        .then(div => tab.appendChild(div))
-                    }).observe(tab, {attributes: true})
-                </script>
-                <style>
-                    #imagecontainer {
-                        display: flex;
-                        justify-content: space-around;
-                        flex-flow: row wrap;
-                        align-items: center;
-                    }
-
-                    #imagecontainer>img {
-                        width: 30vw;
-                        min-width: 256px;
-                        max-width: 1024px;
-                        height: auto;
-                        margin-block: 1vh;
-                        border: 4px white solid;
-                    }
-                </style>
             <div id="imagecontainer"></div>
         </div>
     </div>

ui/media/css/main.css

@@ -1817,3 +1817,20 @@ div#enlarge-buttons {
 .imgContainer .spinnerStatus {
     font-size: 10pt;
 }
+
+/* Gallery CSS */
+#imagecontainer {
+    display: flex;
+    justify-content: space-around;
+    flex-flow: row wrap;
+    align-items: center;
+}
+
+#imagecontainer>img {
+    width: 30vw;
+    min-width: 256px;
+    max-width: 1024px;
+    height: auto;
+    margin-block: 1vh;
+    border: 4px white solid;
+}

ui/media/js/main.js

@@ -2787,3 +2787,15 @@ let recentResolutionsValues = []
         heightField.value = temp
     })
 })()
+
+/* Gallery JS */
+
+function refreshGallery() {
+    let container = document.getElementById("imagecontainer")
+    container.remove()
+    fetch('/all_images')
+        .then(response => response.text())
+        .then(text => new DOMParser().parseFromString(text, 'text/html'))
+        .then(html_like => html_like.getElementsByTagName('div')[0])
+        .then(div => document.getElementById("tab-content-gallery").appendChild(div))
+}