mycosystems/myco.systems
3
0
Fork 0
Code Pull requests Activity Actions

update

Browse source
This commit is contained in:
brookee 2024-02-04 14:40:40 -05:00
parent 87d6df3fb1
commit d7f1760e18
6 changed files with 160 additions and 194 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

79
public/donations/index.html
View file

@ -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>&copy; MycoSystems</p>
<p><a style="color:#fff !important" href="https://creativecommons.org/licenses/by/4.0/">Copyright info</a></p>
</div>
</footer>
</body>
</html>

95
public/donations/scripts.js
View file

@ -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);
});

42
public/index.html
View file

@ -5,21 +5,47 @@
<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>
<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>
<div class="bullet-text ">
<ul class="links">
<li><a href="https://myco.systems" target="_blank">Myco.Systems</a></li>
<ul>
<li><a href="https://squattheplanet.com/" target="_blank">SquatThePlanet.com</a></li>
<li><a href="https://wiki.hemera.network/" target="_blank">Wiki.Hemera.Network</a></li>
<li><a href="https://coop.myco.systems" target="_blank">Coop.Myco.Systems</a></li>
<ul>
<li><a href="https://squattheplanet.com/" target="_blank">SquatThePlanet.com</a></li>
<li><a href="https://wiki.hemera.network/" target="_blank">Wiki.Hemera.Network</a></li>
</ul>
<li><a href="https://web.myco.systems" target="_blank">Web.Myco.Systems</a></li>
</ul>
<li><a href="https://web.myco.systems" target="_blank">Web.Myco.Systems</a></li>
</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>

92
public/modal.css Normal file
View 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;
}

2
public/script.js
View file

@ -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);

44
public/style.css
View file

@ -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;
}