From 104dc2b746009e6f747d7eac4ac4d96193237f59 Mon Sep 17 00:00:00 2001 From: rouce Date: Sun, 3 Sep 2023 23:48:44 -0400 Subject: [PATCH] first commit --- LICENSE | 8 + README.md | 6 + public/donations/index.html | 79 ++++++ public/donations/scripts.js | 95 ++++++++ public/index.html | 98 ++++++++ public/scripts.js | 95 ++++++++ public/styles.css | 472 ++++++++++++++++++++++++++++++++++++ 7 files changed, 853 insertions(+) create mode 100644 LICENSE create mode 100644 README.md create mode 100644 public/donations/index.html create mode 100644 public/donations/scripts.js create mode 100644 public/index.html create mode 100644 public/scripts.js create mode 100644 public/styles.css diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..db97f39 --- /dev/null +++ b/LICENSE @@ -0,0 +1,8 @@ +MIT License + +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + diff --git a/README.md b/README.md new file mode 100644 index 0000000..c756d85 --- /dev/null +++ b/README.md @@ -0,0 +1,6 @@ +# myco.systems + +Trying to keep it under 50 MiB, currently it's around 18 MiB +#### Woah spinny + +![screenshot](https://cdn.myco.systems/images/v1.png) \ No newline at end of file diff --git a/public/donations/index.html b/public/donations/index.html new file mode 100644 index 0000000..589fab4 --- /dev/null +++ b/public/donations/index.html @@ -0,0 +1,79 @@ + + + + + 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 new file mode 100644 index 0000000..0f56719 --- /dev/null +++ b/public/donations/scripts.js @@ -0,0 +1,95 @@ +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 new file mode 100644 index 0000000..3420b5d --- /dev/null +++ b/public/index.html @@ -0,0 +1,98 @@ + + + + + Your Mycelial Network + + + + + + +
+
+

Myco.Systems

+ +
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+

Blog

+

Description

+
+
+ +
+

Hey there! Join us at Web.Myco.Systems - Your Gateway to Open-Source!

+

Our client portal isn't just about transactions; it's about building a relationship that caters specifically to your requirements. Explore our services, containerized stacks, personal cloud support, or just send us an email so we can get in touch!

+

Explore:

+
+
+ + + +
+

Footer text goes here.

+
+
+
+
+
+ +
Donate
+ +
+
+ +
+
+
+ wallet.name +
+
+
+
+
+
+
+ Address: + + +
+
+
+
+
+ + + + + diff --git a/public/scripts.js b/public/scripts.js new file mode 100644 index 0000000..0f56719 --- /dev/null +++ b/public/scripts.js @@ -0,0 +1,95 @@ +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/styles.css b/public/styles.css new file mode 100644 index 0000000..55e163e --- /dev/null +++ b/public/styles.css @@ -0,0 +1,472 @@ +body, h1, h2, h3, h4, h5, h6, p, ul, li { + margin: 0; + padding: 0; + overflow: hidden; + overflow-y: auto; + background-position: center center; + background-repeat: no-repeat; + font-family: 'Merriweather Sans', Arial, sans-serif; + line-height: normal; +} +body{ + background-color: #241916; +} + +.container { + max-width: 960px; + margin: 0 auto; + padding: 20px; +} + +.header-container { + color: white; + display: flex; + justify-content: space-between; + align-items: center; + padding: 15px; +} + +.header-container h1 { + display: inline-block; +} + +.header-container nav { + float: right; + font-family: 'Open Sans', sans-serif; +} + +.header-container nav ul { + list-style-type: none; + margin: 0; + padding: 0; +} + +.header-container nav ul li { + display: inline-block; + margin-left: 20px; +} + +.header-container nav ul li a { + text-decoration: none; + color: white; + font-weight: 800; + position: relative; +} + +.header-container nav ul li a::before { + content: ""; + position: absolute; + width: 100%; + height: 2px; + bottom: 0; + left: 0; + background-color: white; + transform: scaleX(0); + transform-origin: bottom left; + transition: transform 0.3s ease; +} + +.header-container nav ul li a:hover::before { + transform: scaleX(1); +} + +.inner-content { + padding: .5rem; + min-height: 100%; +} + +.inner-section { + color: #fff; + font-weight: 700; + position: fixed; + top: 3.5rem; + bottom: 4.5rem; + right: 0.2rem; + left: 0.2rem; +} + +.inner-section-cube { + color: #fff; + font-weight: 700; + position: fixed; + top: 0; + bottom: 0; + right: 0; + left: 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin-top: 3.5rem; + margin-bottom: 4.5rem; +} + +.section-container { + height: 100%; + padding: 20px; + display: flex; + flex-direction: row; + justify-content: space-between; + gap: 1.5rem; +} + +.section-button-footer { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + gap: 10px; +} + +.client-button { + padding: 5px; + border-radius: 5px; + background-color: #50526e; + width: 100%; + font-weight: 700; +} + +.client-button:hover { + background-color: #3a3d50; + cursor: pointer; +} + +.section-button-green { + padding: 1rem; + border-radius: 5px; + color: #fff; + width: 100%; + height: 100%; + background: rgba(101, 140, 135, 0.2); + backdrop-filter: blur(10px); + transition: background 0.3s ease-in-out; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.section-button-green:hover { + background: rgba(101, 140, 135, 0.4); +} + +.section-button { + padding: 1rem; + border-radius: 5px; + color: #fff; + width: 100%; + height: 100%; + background: rgba(255, 255, 255, 0.2); + backdrop-filter: blur(10px); + transition: background 0.3s ease-in-out; +} + +.section-button:hover { + background: rgba(255, 255, 255, 0.5); +} + +.footer-container { + padding: 5px; + position: fixed; + bottom: 1.5rem; + left: 1.5rem; + right: 1.5rem; + color: #fff !important; + font-weight: 800; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + border-radius: 5px; + backdrop-filter: blur(10px); + background-color: rgba(255, 255, 255, 0.2); +} + +.footer-container:hover { + background-color: rgba(255, 255, 255, 0.5); +} + +.footer-container a { + text-decoration: none; + position: relative; +} + +.footer-container a::before { + content: ""; + position: absolute; + width: 100%; + height: 2px; + bottom: 0; + left: 0; + background-color: #fff; + transform: scaleX(0); + transform-origin: bottom right; + transition: transform 0.3s ease; +} + +.footer-container a:hover::before { + transform: scaleX(1); + transform-origin: bottom left; +} + +.card-button { + position: fixed; + z-index: 99; + right: 1.9rem; + bottom: 1.9rem; + padding: 5px 30px; + background-color: #232222; + color: #e3e3e3; + border-radius: 5px; + font-size: 22px; + font-weight: 800; + cursor: pointer; + transition: transform 0.3s; +} + +.card-button:hover { + animation: wobble 2s ease-in-out infinite; +} + +@keyframes wobble { + 0% { + transform: translateX(0); + } + 15% { + transform: translateX(-2px) rotate(-2deg); + } + 30% { + transform: translateX(2px) rotate(2deg); + } + 45% { + transform: translateX(-1px) rotate(-1deg); + } + 60% { + transform: translateX(1px) rotate(1deg); + } + 75% { + transform: translateX(-0.5px) rotate(-0.5deg); + } + 100% { + transform: translateX(0); + } +} + +.card-out { + z-index: 99; + position: fixed; + right: -520px; + bottom: 0; + transition: right 0.5s ease-in-out; +} + +.card-in { + z-index: 99; + position: fixed; + right: 0; + bottom: 0; + transition: right 0.5s ease-in-out; +} + +*, +*:before, +*:after { + outline: 0; + margin: 0; + padding: 0; + border: 0; + text-decoration: none; + box-sizing: border-box; + transition: color 300ms ease-out, background 300ms ease-out, border 300ms ease-out, transform 300ms ease-out, opacity 300ms ease-out; +} + +input, +textarea, +select, +options, +button { + font-family: inherit; + font-size: inherit; + line-height: inherit; + font-weight: normal; + background: none; + color: inherit; +} + +.card-wrap { + overflow: hidden; + margin: 0 auto; + max-width: 520px; + background-color: #232323; + border-top-left-radius: 9px; +} + +.tabs-wrap { + position: relative; +} + +.tabs-nav { + display: flex; + flex-direction: row; + align-items: center; + justify-content: stretch; + position: relative; + overflow: hidden; + background-color: #743c2f; +} + +.tabs-nav > button { + flex: 1; + display: block; + cursor: pointer; + text-align: center; + padding: 0.8em 0; + background-color: #232222; + font-weight: bold; + color: #733c2f; +} + +.tabs-nav > button:hover { + background-color: #733c2f; + color: #232222; +} + +.tabs-nav > button.active { + background-color: #733c2f; + border-color: #733c2f; + color: #232222; +} + +.tabs-info { + min-height: 100px; + padding-top: 1em; + font-weight: 700; + color: #fff; +} + +.tabs-info .tabs-info-row { + display: flex; + flex-direction: row; + align-items: center; + justify-content: stretch; + margin-bottom: 1em; + padding: 0 1em; +} + +.tabs-info .tabs-info-qr > img { + display: block; + border-radius: 5px; + background-color: white; + padding: 5px; +} + +.tabs-info .tabs-info-input { + display: flex; + flex-direction: row; + align-items: center; + justify-content: stretch; + padding: 0.75em 1em; + color: #733c2f; +} + +.tabs-info .tabs-info-input > span { + margin-right: 1em; + font-weight: bold; +} + +.tabs-info .tabs-info-input > input { + flex: 1; + margin-right: 1em; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-weight: bold; + border: none; +} + +.tabs-info .tabs-info-input > button { + cursor: pointer; + font-weight: bold; +} + +.tabs-info .tabs-info-details { + padding-left: 15px; +} + +.tabs-info .tabs-info-title { + font-size: 2em; +} + +.tabs-info .tabs-info-warn { + font-size: 1em; +} + +.color-cube { + --cube-color: #743c2f; + position: fixed; + width: 280px; + height: 280px; + transform-style: preserve-3d; + transform: rotateX(-20deg) rotateY(-40deg); + animation: rotateCube 5s linear infinite; +} + +.cube-face { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border: 2px solid rgba(0, 0, 0, 0.4); + background-color: var(--cube-color); + transition: background-color 500ms; +} + +.cube-front { + transform: translateZ(140px); +} + +.cube-back { + transform: rotateY(180deg) translateZ(140px); +} + +.cube-bottom { + transform: rotateX(-90deg) translateZ(140px); +} + +.cube-top { + transform: rotateX(90deg) translateZ(140px); +} + +.cube-left { + transform: rotateY(-90deg) translateZ(140px); +} + +.cube-right { + transform: rotateY(90deg) translateZ(140px); +} + +.color-name { + font-size: 40px; + font-weight: 500; + margin: 55px 0 30px; +} + +.heard-output, +.confidence-output { + font-size: 22px; + font-weight: 400; + margin-bottom: 18px; +} + +.colors-list { + font-size: 20px; + font-weight: 700; + color: #111; + text-decoration: none; + border-bottom: 2px solid #111; + margin-top: 10px; +} + +@keyframes rotateCube { + to { + transform: rotateX(-20deg) rotateY(-400deg); + } +}