From d7f1760e18ca7fb048765a756ea9ff0114b2ae12 Mon Sep 17 00:00:00 2001 From: brookee Date: Sun, 4 Feb 2024 14:40:40 -0500 Subject: [PATCH] update --- public/donations/index.html | 79 ------------------------------ public/donations/scripts.js | 95 ------------------------------------- public/index.html | 42 ++++++++++++---- public/modal.css | 92 +++++++++++++++++++++++++++++++++++ public/script.js | 2 +- public/style.css | 44 ++++++++++++----- 6 files changed, 160 insertions(+), 194 deletions(-) delete mode 100644 public/donations/index.html delete mode 100644 public/donations/scripts.js create mode 100644 public/modal.css diff --git a/public/donations/index.html b/public/donations/index.html deleted file mode 100644 index 589fab4..0000000 --- a/public/donations/index.html +++ /dev/null @@ -1,79 +0,0 @@ - - - - - Your Mycelial Network - - - - - - -
-
-

Myco.Systems

- -
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-

Domations

-

where them domations go

-
-
-
- -
Donate
- -
-
- -
-
-
- wallet.name -
-
-
-
-
-
-
- Address: - - -
-
-
-
-
- - - - - diff --git a/public/donations/scripts.js b/public/donations/scripts.js deleted file mode 100644 index 0f56719..0000000 --- a/public/donations/scripts.js +++ /dev/null @@ -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); -}); diff --git a/public/index.html b/public/index.html index 6a95273..4d6889a 100755 --- a/public/index.html +++ b/public/index.html @@ -5,21 +5,47 @@ The Mycelial Network + +
-
+ +
+ +
+ +
+ +
+ + diff --git a/public/modal.css b/public/modal.css new file mode 100644 index 0000000..26a434c --- /dev/null +++ b/public/modal.css @@ -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; +} \ No newline at end of file diff --git a/public/script.js b/public/script.js index 68c0642..141dd2e 100755 --- a/public/script.js +++ b/public/script.js @@ -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); diff --git a/public/style.css b/public/style.css index 43978ef..04e5955 100755 --- a/public/style.css +++ b/public/style.css @@ -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; +} \ No newline at end of file