add donate modal

public/index.html

@@ -39,8 +39,8 @@
         <li class="tab"><label for="tab1">Home</label></li>
         <li class="tab"><label for="tab2">Contact</label></li>
         <li class="tab"><label for="tab3">Dashboard</label></li>
-        <li class="tab"><label><a style="text-decoration: none;" target="_blank" href="https://uptime.myco.systems/">Uptime<svg class="tab-icon"
+        <li class="tab"><label><a style="text-decoration: none;" target="_blank"
-                viewBox="0 0 512 512">
+              href="https://uptime.myco.systems/">Uptime<svg class="tab-icon" viewBox="0 0 512 512">
                 <path
                   d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z">
                 </path>
@@ -56,6 +56,27 @@
           If you're interested in getting our help or just want to chat, send us a message through our contact email
           on the next tab.<br><br>
           ദ്ദി { ˉ͈̀꒳ˉ͈́ }✧</p>
+        <div class="interior">
+          <a class="btn" href="#open-modal">donate</a>
+        </div>
+        <div id="open-modal" class="modal-window">
+          <div>
+            <a href="#" title="Close" class="modal-close">×</a>
+            <p class="modal-text">
+            <p>
+            <p class="modal-body"> Donations go to making sure we can keep all of our free services
+              running ♡⸜(ˆᗜˆ˵ )⸝♡<br><br>
+              The following cryptocurrencies are supported:<br><br></p>
+
+            <b class="crypto-name">Monero (XMR):</b><span
+              class="crypto-address">49r2aeun8DtV5VqZpZSwRpS83WfUWEaLt4NG8HJwwVkbiT1vSsXTXrPFKkKTdc6MPX9iezbTidNPvhGZKCnM1338TfK6Hgi</span><br>
+            <b class="crypto-name">Litecoin (LTC):</b><span
+              class="crypto-address">LRAm7h5XENknfYEpbdVsvyGY8D6MiXGTDV</span><br>
+            <b class="crypto-name">Bitcoin (BTC):</b><span
+              class="crypto-address">bc1qkv97ajh7f0a72l9rsjd3fmmly5q5uywr06q3x0</span>
+            </p>
+          </div>
+        </div>
       </div>
 
       <div class="tab-content">

public/style.css

@@ -63,7 +63,7 @@ body,
   gap: 25px;
   display: flex;
   flex-direction: column;
-  border: 4px solid #f3bbae92;
+  border: 4px solid #9a756c;
   text-align: left;
   z-index: 10;
   background-color: #241917;
@@ -99,8 +99,8 @@ body,
   cursor: pointer;
   border-width: 0 4px 4px 0;
   border-style: solid;
-  border-color: #f3bbae92;
+  border-color: #9a756c;
-  font-size: var(--primary-text-size);
+  font-size: 10px;
 }
 
 .tab-link {
@@ -156,10 +156,18 @@ ul.custom-bullet li::before {
   transition: all 0.3s;
 }
 
+.tab:hover a,
+.tab:hover svg {
+  color: #241917 !important;
+  fill: #241917 !important;
+  transition: all 0.3s;
+}
+
 .tab:hover label {
-  background-color: #f3bbae92;
+  background-color: #9a756c;
   color: #241917;
   font-weight: 700;
+  transition: all 0.3s;
 }
 
 .tab-content {
@@ -172,7 +180,7 @@ ul.custom-bullet li::before {
 .tabbed [type="radio"]:nth-of-type(3):checked~.tabs .tab:nth-of-type(3) label,
 .tabbed [type="radio"]:nth-of-type(4):checked~.tabs .tab:nth-of-type(4) label,
 .tabbed [type="radio"]:nth-of-type(5):checked~.tabs .tab:nth-of-type(5) label {
-  background-color: #f3bbae92;
+  background-color: #9a756c;
   color: #241917;
   font-weight: 700;
 }
@@ -190,7 +198,7 @@ ul.custom-bullet li::before {
   font-size: var(--primary-text-size);
   background-color: #241917;
   color: #fff !important;
-  border: 4px solid #f3bbae92;
+  border: 4px solid #9a756c;
   padding: 5px;
 }
 
@@ -267,4 +275,118 @@ a {
   display: flex;
   justify-content: center;
   align-items: center;
+}
+
+.modal-window {
+  position: fixed;
+  background-color: rgba(0, 0, 0, 0.45);
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 999;
+  visibility: hidden;
+  opacity: 0;
+  pointer-events: none;
+  transition: all 0.3s;
+
+  &:target {
+    visibility: visible;
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  &>div {
+    width: 400px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    padding: 2em;
+    background: #241917;
+  }
+
+  header {
+    font-weight: bold;
+  }
+
+  h1 {
+    font-size: 150%;
+    margin: 0 0 15px;
+  }
+}
+
+.modal-close {
+  line-height: 14px;
+  font-size: 18px;
+  text-decoration: none;
+  position: absolute;
+  right: 0;
+  top: 0;
+  border-bottom: 4px solid #9a756c;
+  border-left: 4px solid #9a756c;
+  padding: 0.25rem 0.35rem;
+
+  &:hover {
+    color: #241917 !important;
+    background-color: #9a756c;
+  }
+}
+
+.modal-window {
+  &>div {
+    border: 4px solid #9a756c;
+    padding: 1rem;
+  }
+}
+
+.modal-window div:not(:last-of-type) {
+  margin-bottom: 15px;
+}
+
+.logo {
+  max-width: 150px;
+  display: block;
+}
+
+.btn {
+  background-color: #241917;
+  padding: 0.1rem 0.5rem;
+  border: 4px solid #9a756c;
+  text-decoration: none;
+  font-size: var(--primary-text-size);
+  margin-top: 0.75rem;
+  width: 4rem;
+}
+
+.btn:hover {
+  background-color: #9a756c;
+  color: #241917 !important;
+  font-weight: 700;
+  transition: all 0.3s;
+}
+
+.modal-text {
+  line-height: 1.6;
+  margin: 0;
+  font-size: var(--primary-text-size);
+}
+
+.modal-body {
+  padding-right: 1rem;
+}
+
+.crypto-address {
+  word-wrap: break-word;
+  display: block;
+  font-size: 12px !important;
+  background-color: #241917;
+  color: #fff;
+  border: 4px solid #9a756c;
+  padding: 5px;
+}
+
+.crypto-name {
+  font-size: 10px;
+  font-weight: 400;
 }