Add files via upload

cally-jt · Feb 3, 2024 · 8e9064e · 8e9064e
1 parent ed4d9b3
commit 8e9064e
Show file tree

Hide file tree

Showing 6 changed files with 166 additions and 2 deletions.
diff --git a/images/arrow.svg b/images/arrow.svg
diff --git a/images/question.svg b/images/question.svg
diff --git a/images/tw.webp b/images/tw.webp
diff --git a/index.html b/index.html
@@ -11,7 +11,18 @@
 <body>
 
     <div class="searchWrapper">
+        <div class="left">
+            <button class="leftButton" id="faqButton" title="faq"><img src="./images/question.svg" alt="faq"></button>
+        </div>
+
         <input type="text" name="search" id="search">
+        <div class="filter">
+            <select id="searchFor" name="Filter">
+                <option value="name">Name</option>
+                <option value="username">Username</option>
+            </select>
+            <img class="arrow" src="./images/arrow.svg">
+        </div>
         <button id="searchButton"><img src="./images/search.svg" alt="search" title="search"></button>
 
         <div class="right">
@@ -26,5 +37,22 @@
 
         </div>
     </div>
+
+    <dialog id="faqModal">
+        <span id="closeFaq">X</span>
+
+        <h1>What is UEG?</h1>
+        <p>UEG aims to have an all in one library to simplify finding extensions.</p>
+        <br>
+
+        <h1>How do i have my extension added?</h1>
+        <p>Message @callumjt on discord with your github repo of all your extensions (WE WILL NOT HOST YOUR SB3'S OR THUMBNAILS, YOU MUST PROVIDE IT YOURSELF).</p>
+        <br>
+
+        <h1>How do i get my extensions removed?</h1>
+        <p>Message @callumjt on discord to request to have your extensions taken of here.</p>
+        <br>
+
+    </dialog>
 </body>
 </html>
diff --git a/scripts/site.js b/scripts/site.js
@@ -136,14 +136,32 @@ document.getElementById('all')?.addEventListener('click', function () {
 });
 
 function search(query) {
+    const filter = document.getElementById('searchFor')
     const array = [];
 
     for (const x of jsons[current]) {
-        if (x.name.toLowerCase().includes(query.toLowerCase())) {
-            array.push(x);
+        if (filter.value == "name") {
+            if (x.name.toLowerCase().includes(query.toLowerCase())) {
+                array.push(x);
+            }
+        } else if (x.credits && filter.value == "username") {
+            for (const y of x.credits) {
+                if (y.name.toLowerCase().includes(query.toLowerCase())) {
+                    array.push(x)
+                }
+            }
         }
     }
 
     outer.innerHTML = '';
     create(array);
 }
+
+const modal = document.getElementById('faqModal')
+document.getElementById('faqButton').addEventListener('click', function() {
+    modal.showModal();
+})
+
+document.getElementById('closeFaq').addEventListener('click', function() {
+    modal.close();
+})
diff --git a/style.css b/style.css
@@ -199,13 +199,56 @@ body, html {
     background-color: transparent;
 }
 
+.filter {
+    position: relative;
+}
+
+.filter > select {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    height: 33px;
+    width: 101px;
+    border-radius: 999px;
+    overflow: hidden;
+    padding-left: 12px;
+    background-color: #111;
+    border: 2px solid #333;
+    transition: all .2s;
+}
+
+.filter > select:hover {
+    cursor: pointer;
+    filter: brightness(1.2)
+}
+
+.filter > select:focus {
+    outline: none;
+}
+
+.arrow {
+    position: absolute;
+    top: 4px;
+    right: 5px;
+    height: 26px;
+    width: 20px;
+    border-radius: 0px 999px 999px 0px;
+    pointer-events: none;
+    border-left: none !important;
+    background: none;
+}
+
 .right {
     position: absolute;
     right: 0;
 
     height: 38px;
     width: max-content;
     margin-right: 50px;
+
+    display: flex;
+    flex-direction: row;
+    gap: 5px;
 }
 
 .button {
@@ -222,4 +265,77 @@ body, html {
 .button:hover {
     cursor: pointer;
     filter: brightness(1.3);
+}
+
+@media (max-width: 1114px){
+    .searchWrapper {
+        flex-direction: column;
+    }
+
+    .right {
+        flex-direction: column;
+        gap: 5px;
+        height: max-content
+    }
+}
+
+.left {
+    position: absolute;
+
+    left: 0;
+    margin-left: 50px;
+}
+
+.leftButton {
+    background: #111;
+    border: 2px solid #333;
+    height: 38px;
+    width: 38px;
+    font-size: 14px;
+    border-radius: 999px;
+
+    transition: all .2s;
+}
+
+.leftButton:hover {
+    cursor: pointer;
+    filter: brightness(1.2);
+}
+
+#faqModal {
+    width: 70%;
+    height: 80%;
+
+    left: 50%;
+    top: 50%;
+    transform: translateX(-50%) translateY(-50%);
+
+    border-radius: 12px;
+    border-color: #333;
+    position: relative;
+    word-wrap: normal;
+}
+
+#faqModal::backdrop {
+    background-color: rgba(0, 0, 0, 0.5);
+}
+
+#closeFaq {
+    position: absolute;
+    top: 5px;
+    right: 10px;
+}
+
+#closeFaq:hover {
+    cursor: pointer;
+}
+
+#faqModal > h1 {
+    margin-left: 10px;
+    margin-top: 10px;
+    color: #eb4034;
+}
+
+#faqModal > p {
+    margin-left: 10px;
 }