diff --git a/images/arrow.svg b/images/arrow.svg new file mode 100644 index 0000000..f6ed1c5 --- /dev/null +++ b/images/arrow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/question.svg b/images/question.svg new file mode 100644 index 0000000..b3e332a --- /dev/null +++ b/images/question.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/tw.webp b/images/tw.webp new file mode 100644 index 0000000..cd0f78f Binary files /dev/null and b/images/tw.webp differ diff --git a/index.html b/index.html index 219b865..7cf54eb 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,18 @@
+
+ +
+ +
+ + +
@@ -26,5 +37,22 @@
+ + + X + +

What is UEG?

+

UEG aims to have an all in one library to simplify finding extensions.

+
+ +

How do i have my extension added?

+

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).

+
+ +

How do i get my extensions removed?

+

Message @callumjt on discord to request to have your extensions taken of here.

+
+ + diff --git a/scripts/site.js b/scripts/site.js index 65132bd..4c2bd7a 100644 --- 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 index ec0c4d8..70a69a4 100644 --- a/style.css +++ b/style.css @@ -199,6 +199,45 @@ 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; @@ -206,6 +245,10 @@ body, html { 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; } \ No newline at end of file