fixed ui stuff and styled a bit more, with search function

html/base/index.html

@@ -5,10 +5,10 @@
   <style>
     body { font-family: Arial, sans-serif; margin: 20px; }
     h1 { color: #333; }
-    li { list-style: none; background: url("../../css/icons/item.webp") no-repeat left center; background-size: 15px 20px; padding-left: 25px; transition: font-size 0.5s cubic-bezier(0.075, 0.82, 0.165, 1); }
+    li { list-style: none; background: url("../../css/icons/item.webp") no-repeat left center; background-size: 15px 20px; padding-left: 25px; transition: font-size 0.5s cubic-bezier(0.075, 0.82, 0.165, 1); padding-bottom: 5px; }
     li:hover { font-size: larger; }
-    #available { padding-left: 40px;}
+  #available { padding-left: 40px; margin-bottom: 0.1em;}
-    ul { padding-left: 100px;}
+  ul { padding-left: 100px; margin-top: 0.2em;}
     #nojs { display: inline-block;color: red;transition: transform 0.7s cubic-bezier(0.215, 0.610, 0.355, 1); }
     /*#nojs:hover { transform: skewX(-12deg);}*/
     #nonenormalul { list-style: disc inside; margin: 1em 0; padding-left: 40px; background: none; }
@@ -39,13 +39,61 @@
         document.write('<h1 id="nojs" style="color:black; display: flex; align-items: center;"><img src="../../css/icons/folder.webp" width="45" height="45" style="vertical-align: middle; margin-right: 8px;" />Index of PyPost</h1>');
     </script>
   <p id="available">
-    <img src="../../css/icons/available.webp" width="32" height="32" style="vertical-align: middle; display: inline; margin-right: 8px;" />
+    <img src="../../css/icons/available.webp" width="40" height="40" style="vertical-align: middle; display: inline; /*margin-right: 8px;*/ padding-right: 5px;" />
     Available pages:
   </p>
   <!-- CONTENT -->
 
 
 <script src="../../js/normal.js"></script>
+<script type="text/javascript">
+  function search_ul_items() {
+    const query = document.getElementById('searchbox').value.toLowerCase();
+    const ul = document.querySelector('ul'); // only one UL
+    if (!ul) return;
+
+    const items = ul.querySelectorAll('li');
+    items.forEach(li => {
+      if (li.textContent.toLowerCase().includes(query)) {
+        li.style.display = 'list-item';
+      } else {
+        li.style.display = 'none';
+      }
+    });
+  }
+
+  // Create search box and insert before the available pages paragraph
+  window.addEventListener('DOMContentLoaded', function() {
+    const searchDiv = document.createElement('div');
+    searchDiv.style.marginBottom = '16px';
+    searchDiv.style.paddingLeft = '19px';
+    searchDiv.innerHTML = `
+      <input 
+        type="text" 
+        id="searchbox" 
+        placeholder="Search pages..." 
+        style="
+          padding: 6px 6px 6px 28px; 
+          font-size: 1em; 
+          width: 220px; 
+          background: url('../../css/icons/search.png') no-repeat 6px center; 
+          background-size: 20px 20px;
+        " 
+        title="Search for pages (italic)"
+      />
+    `;
+    const available = document.getElementById('available');
+    available.parentNode.insertBefore(searchDiv, available);
+
+    const searchbox = document.getElementById('searchbox');
+    if (searchbox) {
+      searchbox.title = "Search for pages";
+      searchbox.style.fontStyle = "italic";
+    }
+
+    document.getElementById('searchbox').addEventListener('input', search_ul_items);
+  });
+</script>
 
 <footer style="
   position: absolute;

webserver.py

@@ -119,5 +119,4 @@ if __name__ == "__main__":
         httpd.serve_forever()
     except (Exception, KeyboardInterrupt) as e:
         logger.log_info(f"Shutting down server.\n Reason: {e}")
-        httpd.server_close()
+        httpd.server_close()
-