From da70eef5611bad9d0ba9614409a51ed19d564c56 Mon Sep 17 00:00:00 2001
From: Tio TROM <tio@trom.tf>
Date: Tue, 30 Jul 2024 00:21:44 +0000
Subject: [PATCH] Customise it and adding the files category

---
 index.html | 92 +++++++++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 80 insertions(+), 12 deletions(-)
diff --git a/index.html b/index.html
index 2123021..efaf8f0 100644
--- a/index.html
+++ b/index.html
@@ -9,6 +9,17 @@
     <style>
       * { margin: 0; }
       html, body { width: 100%; height: 100%; }
+body {
+  background: url('https://www.tromsite.com/wp-content/uploads/2018/09/tromsite-bg-pattern-light-5.png') !important; background-repeat: repeat !important; background-attachment: fixed !important;
+  height: auto !important;}
+
+
+#search:before {
+    content: url("https://www.tromsite.com/wp-content/uploads/2021/02/trom-logo-dark.png");
+    transform: scale(.6);
+    display: block;
+    width: 100%;
+margin: 0 auto;}
 
       #search-box {
         position: fixed;
@@ -17,24 +28,81 @@
         transform: translateX(-50%);
       }
       
-      #info { color: gray; }
-      #info.error { color: red; }
+      #info {
+        color: black;
+        text-align: center;
+        font-weight: bold;
+      }
+      
+      #info.error { color: #7b7b7b; margin-top: 20px;font-size: 13px;font-style: italic;}
+
+      #search input[name="query"] {
+        width: 500px;
+        height: 40px;
+        background-color: white;
+        border: 2px solid darkgrey;
+        border-radius: 4px;
+        box-sizing: border-box;
+      }
+      
+      #search {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+
+      #search-inputs {
+        display: flex;
+        align-items: center;
+        margin-bottom: 10px;
+      }
+
+      #search input[type="submit"] {
+        height: 40px;
+        background-color: #bc5151;
+        color: white;
+        font-weight: bold;
+        border: none;
+        border-radius: 4px;
+        margin-left: 10px;
+        cursor: pointer;
+        padding: 0 10px;
+        box-sizing: border-box;
+        width: 20%;
+      }
+
+      .search-radio-buttons {
+        display: flex;
+        justify-content: center;
+        width: 100%;
+      }
+
+      #search label {
+        margin-left: 5px;
+        margin-right: 15px;
+      }
     </style>
     <script type="module" src="index.js"></script>
   </head>
   <body>
     <div id="search-box">
       <form id="search">
-        <input name="query" type="text" placeholder="Query">
-        <input type="submit" value="Search">
-        <input type="radio" id="search-category-all" name="category" value="all" checked>
-        <label for="search-category-all">All</label>
-        <input type="radio" id="search-category-images" name="category" value="images">
-        <label for="search-category-images">Images</label>
-        <input type="radio" id="search-category-news" name="category" value="news">
-        <label for="search-category-news">News</label>
-        <input type="radio" id="search-category-videos" name="category" value="videos">
-        <label for="search-category-videos">Videos</label>
+        <div id="search-inputs">
+          <input name="query" type="text" placeholder="Query">
+          <input type="submit" value="Search">
+        </div>
+        <div class="search-radio-buttons">
+          <input type="radio" id="search-category-all" name="category" value="all" checked>
+          <label for="search-category-all">All</label>
+          <input type="radio" id="search-category-images" name="category" value="images">
+          <label for="search-category-images">Images</label>
+          <input type="radio" id="search-category-news" name="category" value="news">
+          <label for="search-category-news">News</label>
+          <input type="radio" id="search-category-videos" name="category" value="videos">
+          <label for="search-category-videos">Videos</label>
+          <input type="radio" id="search-category-files" name="category" value="files">
+          <label for="search-category-videos">Files</label>
+        </div>
       </form>
       <p id="info"></p>
     </div>
