From d218687154bffee64c5e234f4740cabb3232a0ae Mon Sep 17 00:00:00 2001
From: nin0dev <personal@nin0dev.com>
Date: Sat, 11 May 2024 03:37:27 -0400
Subject: [PATCH] Added credits

---
 index.html |  30 +++++++++++++++++++++++-------
 index.js   |   4 ++++
 music.png  | Bin 641 -> 557 bytes
 style.css  |  15 ++++++++++++++-
 4 files changed, 41 insertions(+), 8 deletions(-)

diff --git a/index.html b/index.html
index f44c3f4..837acf6 100644
--- a/index.html
+++ b/index.html
@@ -56,18 +56,34 @@
           </li>
         </ul>
       </fieldset>
-      </br>
+    </br>
+    <fieldset>
+      <legend>Reach out!</legend>
+      <ul style="margin-top: 5px; margin-bottom: 5px; padding-left: 20px;">
+        <li>Discord: @nin0.dev</li>
+        <li>Email: <a href="mailto:support@nin0dev.com">support@nin0dev.com</a></li>
+        <li>Telegram: <a href="https://t.me/nin0dev">@nin0dev</a></li>
+        <li>GitHub: <a href="https://github.com/nin0-dev">nin0-dev</a></li>
+      </ul>
+    </fieldset>
+    <span id="credits" style="display: none;">
+      <br/>
       <fieldset>
-        <legend>Reach out!</legend>
+        <legend>Credits</legend>
         <ul style="margin-top: 5px; margin-bottom: 5px; padding-left: 20px;">
-          <li>Discord: @nin0.dev</li>
-          <li>Email: <a href="mailto:support@nin0dev.com">support@nin0dev.com</a></li>
-          <li>Telegram: <a href="https://t.me/nin0dev">@nin0dev</a></li>
+          <li>UI library: <a href="https://jdan.github.io/98.css/">98.css by jdan</a></li>
+          <li>Presence/status API: <a href="https://discord.gg/lanyard">Lanyard</a></li>
+          <li>Icons: <a href="https://win98icons.alexmeub.com/">official Windows 98 icons</a></li>
         </ul>
       </fieldset>
+    </span>
+    
+    <div id="bottom-actions" style="margin-top: 13px;">
+      <button onclick="showCredits()" id="credits-button">Credits</button>
     </div>
   </div>
-  <script src="https://cdn.jsdelivr.net/npm/lanyard-wrapper/dist/index.browser.js"></script>
-  <script src="index.js"></script>
+</div>
+<script src="https://cdn.jsdelivr.net/npm/lanyard-wrapper/dist/index.browser.js"></script>
+<script src="index.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/index.js b/index.js
index 128c331..f88f779 100644
--- a/index.js
+++ b/index.js
@@ -50,3 +50,7 @@ LanyardWrapper.connectWebSocket("886685857560539176", onUpdate)
 .catch(err => {
     console.error(err);
 });
+function showCredits() {
+    document.getElementById("credits").style.display = "block"
+    document.getElementById("credits-button").style.display = "none"
+}
\ No newline at end of file
diff --git a/music.png b/music.png
index fc07a9dea1c1cc5ef206eb76d3b2a971d0ae5674..722e890beee8cb48bd79cd9882c567b9e50c8ff8 100644
GIT binary patch
delta 528
zcmV+r0`L8S1+4^-7#0Wv0001B+zGV+0004VQb$4nuFf3kks%X*8&FJCMF5V1fPjGi
z{{X<izyJUM0RR90|Nj9000000Tdk-d00009bW%=J|NsC0|NsC008>wR5&!@I32;bR
za{vGi!vFvd!vV){sAK>D0ftFLK~zXf&DBeC!ypg@P>m6i?tfzUe1IMxu@_mST@@3h
zpGU}4<#<|-vHUH6489^6d_iXLk*weYVer+E1lkzCu+IdX*y4vQfEL^Q6_7|=qIk=;
zI)KOvDadN9bru40998=U%=q<)wvKXjAW{KL1ek~c!KXTqyRM*=)4CP|5$*2*2?E;p
z)dH>|6u8iS?7o_aGIEhH;KAp|?kAxAE*O-y`wYA<3y|V}_k$!5{U!+L^Reio>Y(@I
zo;tvQ;-cITFFi@AA0h#eYHzp5iHLCD?`Z--P}d3gN&P&b^^sZyb-Reg=)2ee9T3M2
z3+mfF?LhCl82Rsj_BKTBPZP%LLeGRg*63Ookid5}zPPAbv`>Kg5Pme`q(mmbef(7?
z-0f_6G6>Oc`Up;V64qxh^&9A71}eC3fQ0uG$o&9atRO^>0UMzr`U#jA0cay??`Hr(
zap0o&Cy)ez(Vu}ns+ItEIjO$@{C7DCK&1K(C^4gbEaPI!4j_8;H1TWC^SlAudM`S@
Sxqb-%0000<MNUMnLSTXcY4Ah<

literal 641
zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDB3?!H8JlO)ISkfJR9T^xl_H+M9WCijSl0AZa
z85pY67#JE_7#My5g&JNkFq8r{zDi(Vu$sZZAYL$MSD+10LL$H?#1%*bK|@2s|NjgJ
z4jf?k4+0GT8IpJW*#VSbED7=pW^j0RBMrn!@^*J&OHA8Q3*@kuc>21sKVlJPRFasQ
z@#`i~I?~g{F~s8Z+AH39hZO|a63%e;q^`VO<uZ%8V&Yao#n&gEF|6I;uq0$(U3y!>
zf=%Y3kr86^>*ScX3EY?!_GY`=R`&u0j^9ojw0*rdaX%6`qS&#YA>sDTc};~|#O@h?
z;R!m+axLeQ1yg0vJVkG2mh|}t{8AS_nRRfR<Pk}E&X}%%2ZoAg1f5QNwfR0@+G4wF
z%Z0le961s_{$2{Yshn_NhRL)qH~xP++rYS1IHNlJ)wXjCh6&4f*KGgRX3fg?LXo*E
zkl|G`lcr+j&$<J%oZTBuJXx$0zNVz_n3`Z!C0`P_?mtUhN8jY>?n;%4dV1TfwE0@}
zZ!K8oC$8~8X4;c2AqN@-bPik&SFmi5ef)HnNbrSC8V4SD3kWcC`0sx*v0##f!U7LA
zNoJ1MqRKyiC8!+Q5%s<}!CHt#W;Mr=%e4ph{#vo5?x0mD<DT2Lho632JwMO(;5+_B
zzij_7==3$n?sr+N0}OZ764!{5l*E!$tK_0oAjM#0U}&LhV4`bi8Dd~)Wo%+)WCG+`
l85mr0{F#NKAvZrIGp!Q0hQ%_D*MJ%rJYD@<);T3K0RSqL?<fEO

diff --git a/style.css b/style.css
index 2dd7c43..22a303b 100644
--- a/style.css
+++ b/style.css
@@ -63,4 +63,17 @@ li {
 }
 #presence {
     display: flex;
-}
\ No newline at end of file
+}
+#bottom-actions {
+    display: flex;
+    align-items: end;
+    justify-content: right;
+}
+button {
+    background-color: #404040;
+    color: white;
+    box-shadow: inset -1px -1px #000000, inset 1px 1px #202020, inset -2px -2px grey, inset 2px 2px #404040;
+}
+button:active {
+    box-shadow: inset -1px -1px #404040, inset 1px 1px #111111, inset -2px -2px #000000, inset 2px 2px #000000 !important;
+}