add donate modal
This commit is contained in:
parent
e5158a41b3
commit
c65cc82c67
2 changed files with 151 additions and 8 deletions
|
|
@ -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">
|
||||
|
|
|
|||
134
public/style.css
134
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;
|
||||
}
|
||||
|
||||
|
|
@ -268,3 +276,117 @@ a {
|
|||
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;
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue