From c65cc82c6710c80ff73a2aeb15a7a5ac202c709a Mon Sep 17 00:00:00 2001
From: brooke <brooke@myco.systems>
Date: Sun, 3 Nov 2024 09:50:31 -0500
Subject: [PATCH] add donate modal
---
public/index.html | 25 ++++++++-
public/style.css | 134 +++++++++++++++++++++++++++++++++++++++++++---
2 files changed, 151 insertions(+), 8 deletions(-)
diff --git a/public/index.html b/public/index.html
index f638566..be7e24b 100755
--- a/public/index.html
+++ b/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"
- viewBox="0 0 512 512">
+ <li class="tab"><label><a style="text-decoration: none;" target="_blank"
+ 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">
diff --git a/public/style.css b/public/style.css
index eb3e259..10501a2 100755
--- a/public/style.css
+++ b/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;
- font-size: var(--primary-text-size);
+ border-color: #9a756c;
+ 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;
}
\ No newline at end of file