getting real

src/main/resources/httpd/punishments.html

@@ -51,10 +51,8 @@
 <div style="text-align: center;" class="col-auto m-0 p-4 row justify-content-center">
     <h2>Enter the UUID or username of the player you want to lookup</h2>
     <div class="input-group mb-3 w-75 p-3">
-        <input id="uuid" type="text" autocomplete="off" class="form-control">
-        <button class="btn btn-outline-primary" type="submit" onKeyUp="{this.onKeyUpValue.bind(this)"
-                onclick="redirect();">Submit
-        </button>
+        <input id="uuid" type="text" autocomplete="off" class="form-control" placeholder="Enter player UUID or username here...">
+        <button class="btn btn-outline-primary" type="submit" onclick="redirect();">Submit</button>
     </div>
 </div>
 <script>

src/main/resources/httpd/schematic_download.html

@@ -51,17 +51,34 @@
 <div style="text-align: center;" class="col-auto m-0 row justify-content-center p-4">
     <h2>Plex HTTPD</h2>
     <h5>A list of schematics is below. You can click on the schematic name to download it.</h5>
-    <table class="table table-striped table-bordered">
+    <div class="input-group mb-3 w-75 p-3">
+        <input type="text" autocomplete="off" class="form-control" oninput="filterTable(this.value)" placeholder="Search for a schematic...">
+    </div>
+    <table id="schemList" class="table table-striped table-bordered">
         <thead>
-        <tr>
-            <th scope="col">Name</th>
-            <th scope="col">Size</th>
-        </tr>
+            <tr>
+                <th scope="col">Name</th>
+                <th scope="col">Size</th>
+            </tr>
         </thead>
         <tbody>
         ${schematics}
         </tbody>
     </table>
+    <script>
+        let schemList = document.getElementById("schemList").getElementsByTagName("tbody")[0].getElementsByTagName("tr");
+        function filterTable(query){
+            for(let i=0; i<schemList.length; i++){
+                let th = schemList[i].getElementsByTagName("th")[0];
+                let schemName = th.textContent || th.innerText;
+                if(schemName.toLowerCase().includes(query.toLowerCase())){
+                    schemList[i].style.display="";
+                }else{
+                    schemList[i].style.display="none";
+                }
+            }
+        }
+    </script>
 </div>
 </body>
 </html>