update
This commit is contained in:
brookee
parent
87d6df3fb1
commit
d7f1760e18
6 changed files with 160 additions and 194 deletions
|
|
@ -1,79 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Your Mycelial Network</title>
|
||||
<link rel="stylesheet" type="text/css" href="../styles.css">
|
||||
<script src="scripts.js"></script>
|
||||
<link rel="icon" type="image/x-icon" href="../icons/red-background/favicon.ico">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="header-container">
|
||||
<h1><a href="/" style="color:#fff">Myco.Systems</a></h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="https://coop.myco.systems/">coop.myco.systems</a></li>
|
||||
<li><a href="https://web.myco.systems/">web.myco.systems</a></li>
|
||||
<li><a href="/donations">Where do my donations go?</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="inner-content">
|
||||
<section class="inner-section-cube">
|
||||
<div class="color-cube">
|
||||
<div class="cube-face cube-front"></div>
|
||||
<div class="cube-face cube-back"></div>
|
||||
<div class="cube-face cube-bottom"></div>
|
||||
<div class="cube-face cube-top"></div>
|
||||
<div class="cube-face cube-left"></div>
|
||||
<div class="cube-face cube-right"></div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="inner-section">
|
||||
<div class="section-container">
|
||||
<div class="section-button">
|
||||
<h2>Domations</h2>
|
||||
<p>where them domations go</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="card-button" id="donateButton">Donate</div>
|
||||
|
||||
<div class="card-wrap card-out" id="card">
|
||||
<main class="tabs-wrap">
|
||||
<nav class="tabs-nav" id="wallets">
|
||||
</nav>
|
||||
<section class="tabs-info">
|
||||
<div class="tabs-info-row">
|
||||
<div class="tabs-info-qr">
|
||||
<img id="qrImage" alt="wallet.name" />
|
||||
</div>
|
||||
<div class="tabs-info-details">
|
||||
<div class="tabs-info-title" id="donateTitle"></div>
|
||||
<div class="tabs-info-warn" id="donateWarn"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tabs-info-input">
|
||||
<span>Address:</span>
|
||||
<input type="text" id="walletAddress" />
|
||||
<button type="button" id="copyButton">✚ Copy</button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div class="footer-container">
|
||||
<p>© MycoSystems</p>
|
||||
<p><a style="color:#fff !important" href="https://creativecommons.org/licenses/by/4.0/">Copyright info</a></p>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,95 +0,0 @@
|
|||
document.addEventListener('DOMContentLoaded', function() {
|
||||
var donateButton = document.getElementById('donateButton');
|
||||
var card = document.getElementById('card');
|
||||
|
||||
donateButton.addEventListener('click', function(event) {
|
||||
event.stopPropagation();
|
||||
if (card.classList.contains('card-out')) {
|
||||
card.classList.remove('card-out');
|
||||
card.classList.add('card-in');
|
||||
} else {
|
||||
card.classList.remove('card-in');
|
||||
card.classList.add('card-out');
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('click', function(event) {
|
||||
if(event.target === card || card.contains(event.target)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (card.classList.contains('card-in')) {
|
||||
card.classList.remove('card-in');
|
||||
card.classList.add('card-out');
|
||||
}
|
||||
});
|
||||
|
||||
var cryptoWallets = [
|
||||
{
|
||||
symbol: 'XMR',
|
||||
name: 'Monero',
|
||||
address: '49r2aeun8DtV5VqZpZSwRpS83WfUWEaLt4NG8HJwwVkbiT1vSsXTXrPFKkKTdc6MPX9iezbTidNPvhGZKCnM1338TfK6Hgi',
|
||||
},
|
||||
{
|
||||
symbol: 'LTC',
|
||||
name: 'Litecoin',
|
||||
address: 'LRAm7h5XENknfYEpbdVsvyGY8D6MiXGTDV',
|
||||
},
|
||||
{
|
||||
symbol: 'BTC',
|
||||
name: 'Bitcoin',
|
||||
address: 'bc1qkv97ajh7f0a72l9rsjd3fmmly5q5uywr06q3x0',
|
||||
}
|
||||
];
|
||||
|
||||
var walletsContainer = document.getElementById('wallets');
|
||||
var qrImage = document.getElementById('qrImage');
|
||||
var donateTitle = document.getElementById('donateTitle');
|
||||
var donateWarn = document.getElementById('donateWarn');
|
||||
var walletAddress = document.getElementById('walletAddress');
|
||||
var copyButton = document.getElementById('copyButton');
|
||||
|
||||
function selectWallet(symbol) {
|
||||
var wallet = cryptoWallets.find(function (w) {
|
||||
return w.symbol === symbol;
|
||||
});
|
||||
if (!wallet) return;
|
||||
|
||||
var buttons = Array.from(walletsContainer.children);
|
||||
buttons.forEach(function (button) {
|
||||
button.classList.remove('active');
|
||||
if (button.textContent === symbol) {
|
||||
button.classList.add('active');
|
||||
}
|
||||
});
|
||||
|
||||
qrImage.src = 'https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=' + wallet.address;
|
||||
donateTitle.textContent = 'Donate ' + wallet.name;
|
||||
donateWarn.textContent = 'Send only ' + wallet.name + ' (' + wallet.symbol + ') to this deposit address. Sending any other coin or token to this address may result in the loss of your donation. Thanks!';
|
||||
walletAddress.value = wallet.address;
|
||||
copyButton.textContent = 'Copy';
|
||||
}
|
||||
|
||||
function copyText() {
|
||||
var input = document.createElement('input');
|
||||
document.body.appendChild(input);
|
||||
input.value = walletAddress.value;
|
||||
input.select();
|
||||
document.execCommand('copy');
|
||||
document.body.removeChild(input);
|
||||
copyButton.textContent = 'Copied';
|
||||
}
|
||||
|
||||
cryptoWallets.forEach(function (wallet) {
|
||||
var button = document.createElement('button');
|
||||
button.textContent = wallet.symbol;
|
||||
button.addEventListener('click', function () {
|
||||
selectWallet(wallet.symbol);
|
||||
});
|
||||
walletsContainer.appendChild(button);
|
||||
});
|
||||
|
||||
copyButton.addEventListener('click', copyText);
|
||||
|
||||
selectWallet(cryptoWallets[0].symbol);
|
||||
});
|
||||
|
|
@ -5,11 +5,14 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>The Mycelial Network</title>
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
<link rel="stylesheet" href="./modal.css">
|
||||
<link rel="icon" href="icons/red-background/favicon.ico" type="image/x-icon">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="center-text">
|
||||
<ul>
|
||||
<div class="bullet-text ">
|
||||
<ul class="links">
|
||||
<li><a href="https://myco.systems" target="_blank">Myco.Systems</a></li>
|
||||
<ul>
|
||||
<li><a href="https://coop.myco.systems" target="_blank">Coop.Myco.Systems</a></li>
|
||||
|
|
@ -21,6 +24,29 @@
|
|||
</ul>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<details class="modal">
|
||||
<summary class="modal__toggle"></summary>
|
||||
<div class="modal__background">
|
||||
<div class="modal__body" tabindex="-1" role="dialog" aria-labelledby="modal__label" aria-live="assertive" aria-modal="true">
|
||||
<p id="modal__label" class="modal__text">
|
||||
Donations go to making sure we can keep all of our free services running ♡⸜(ˆᗜˆ˵ )⸝♡
|
||||
<br><br>
|
||||
The following cryptocurrencies are supported:
|
||||
<br><br>
|
||||
<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>
|
||||
|
||||
</details>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<script src='//unpkg.com/simplex-noise@2'></script>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
|
|
|
|||
92
public/modal.css
Normal file
92
public/modal.css
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
@charset "UTF-8";
|
||||
.modal[open] .modal__toggle {
|
||||
left: calc(50vw + 200px);
|
||||
top: calc(15vh - 5px);
|
||||
position: fixed;
|
||||
z-index: 11;
|
||||
}
|
||||
.modal[open] .modal__toggle:focus {
|
||||
outline: 2px solid #00f;
|
||||
}
|
||||
.modal__toggle::before {
|
||||
content: 'Donate';
|
||||
cursor: pointer;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
background-color: #241917;
|
||||
color: #fff;
|
||||
border-radius: 2px;
|
||||
border: 2px solid #f3bbae;
|
||||
}
|
||||
.modal[open] .modal__toggle::before {
|
||||
content: '✖';
|
||||
color: #fff !important;
|
||||
font-size: 25px;
|
||||
}
|
||||
.modal__toggle {
|
||||
position: relative;
|
||||
list-style: none;
|
||||
font-size: 14px;
|
||||
font-family: Monaco, monospace;
|
||||
text-align: left;
|
||||
z-index: 4;
|
||||
}
|
||||
.modal__toggle::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
.modal__toggle:hover {
|
||||
cursor: pointer;
|
||||
opacity: .8;
|
||||
}
|
||||
.modal__background {
|
||||
background-color:rgba(0, 0, 0, 0.65);
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
justify-content: center;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
z-index: 3;
|
||||
}
|
||||
.modal__body {
|
||||
/* background: #fff;
|
||||
color: #333; */
|
||||
border: 2px solid #f3bbae92;
|
||||
background: rgba(36, 25, 23, 1);
|
||||
color: #f3bbae;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 600;
|
||||
padding: 20px 20px;
|
||||
position: fixed;
|
||||
text-align: left;
|
||||
top: 15vh;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 80%;
|
||||
max-width: 400px;
|
||||
z-index: 10;
|
||||
word-wrap: break-word;
|
||||
font-family: Monaco, monospace;
|
||||
}
|
||||
|
||||
.modal__text {
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.crypto-address {
|
||||
word-wrap: break-word;
|
||||
display: block;
|
||||
font-size: 12px !important;
|
||||
background-color: #241917;
|
||||
color: #fff;
|
||||
border-radius: 2px;
|
||||
border: 2px solid #f3bbae;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.links {
|
||||
padding-left: 0.85rem;
|
||||
}
|
||||
|
|
@ -98,7 +98,7 @@
|
|||
for (let y = 0; y < height; y++) {
|
||||
const v = (2 * y) / height - 1;
|
||||
for (let x = 0; x < width; x++) {
|
||||
const u = ratio * ((2 * x) / width - 1);
|
||||
const u = ratio * ((2 * x) / width - 3.3);
|
||||
const shiftedU = u + 1.2;
|
||||
if (globe(x, y, shiftedU, v, time)) set(pixels, x, y);
|
||||
|
||||
|
|
|
|||
|
|
@ -14,14 +14,14 @@ body {
|
|||
body {
|
||||
margin: 0;
|
||||
background: #241917;
|
||||
color: #f3bbae !important;
|
||||
color: #f3bbae;
|
||||
}
|
||||
|
||||
body,
|
||||
.braille {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
justify-content: flex-end;
|
||||
flex-flow: row;
|
||||
}
|
||||
|
||||
|
|
@ -45,21 +45,40 @@ body,
|
|||
|
||||
.center-text {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
left: 75%;
|
||||
font-size: 14px;
|
||||
font-family: Monaco, monospace;
|
||||
direction: rtl;
|
||||
text-align: right;
|
||||
top: 35vh;
|
||||
left: 8.5rem;
|
||||
gap: 25px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 665px) {
|
||||
@media only screen and (min-width: 1024px) {
|
||||
.center-text {
|
||||
top: 20%;
|
||||
left: 3.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1023px) and (min-width: 768px) {
|
||||
.center-text {
|
||||
left: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767px) {
|
||||
.center-text {
|
||||
left: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.bullet-text {
|
||||
font-size: 14px;
|
||||
font-family: Monaco, monospace;
|
||||
text-align: left;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
.center-text a {
|
||||
color: #f3bbae;
|
||||
transition: color 0.5s ease;
|
||||
|
|
@ -69,3 +88,6 @@ body,
|
|||
color: #ffffff;
|
||||
}
|
||||
|
||||
.visible {
|
||||
z-index: 0;
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue