diff --git a/public/index.html b/public/index.html old mode 100644 new mode 100755 index b349bee..7fcdd28 --- a/public/index.html +++ b/public/index.html @@ -1,66 +1,42 @@ - - +
+
+

Myco.Systems

+ +
+
- - Mastodon - Your Mycelial Network - - - - Your Mycelial Network - - - - - - - - - +
Donate
- -
-
-

Myco.Systems

- +
+
+ +
+
+
+ wallet.name +
+
+
+
-
- -
Donate
- -
-
- -
-
-
- wallet.name -
-
-
-
-
-
-
- Address: - - -
-
-
+
+ Address: + +
- - - + + + + - \ No newline at end of file + \ No newline at end of file diff --git a/public/scripts.js b/public/script.js old mode 100644 new mode 100755 similarity index 70% rename from public/scripts.js rename to public/script.js index f85745a..8a97093 --- a/public/scripts.js +++ b/public/script.js @@ -1,109 +1,119 @@ // -var donateButton = document.getElementById('donateButton'); -var card = document.getElementById('card'); +var donateButton = document.getElementById("donateButton"); +var card = document.getElementById("card"); -donateButton.addEventListener('click', function(event) { +donateButton.addEventListener("click", function (event) { event.stopPropagation(); - if (card.classList.contains('card-out')) { - card.classList.remove('card-out'); - card.classList.add('card-in'); + 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'); + card.classList.remove("card-in"); + card.classList.add("card-out"); } }); -window.addEventListener('click', function(event) { - if(event.target === card || card.contains(event.target)) { +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'); + + 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', - } + { + 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'); +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 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'); - } - }); + 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'; + 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'; + 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); + var button = document.createElement("button"); + button.textContent = wallet.symbol; + button.addEventListener("click", function () { + selectWallet(wallet.symbol); + }); + walletsContainer.appendChild(button); }); -copyButton.addEventListener('click', copyText); +copyButton.addEventListener("click", copyText); selectWallet(cryptoWallets[0].symbol); // - let globalUniforms = { time: { value: 0 } }; import * as THREE from "https://cdn.skypack.dev/three@0.136.0"; import { OrbitControls } from "https://cdn.skypack.dev/three@0.136.0/examples/jsm/controls/OrbitControls"; -import { CSS2DRenderer, CSS2DObject } from 'https://cdn.skypack.dev/three@0.136.0/examples/jsm/renderers/CSS2DRenderer.js'; +import { + CSS2DRenderer, + CSS2DObject +} from "https://cdn.skypack.dev/three@0.136.0/examples/jsm/renderers/CSS2DRenderer.js"; let scene = new THREE.Scene(); let camera = new THREE.PerspectiveCamera(45, innerWidth / innerHeight, 1, 2000); @@ -117,8 +127,8 @@ document.body.appendChild(renderer.domElement); let labelRenderer = new CSS2DRenderer(); labelRenderer.setSize(window.innerWidth, window.innerHeight); -labelRenderer.domElement.style.position = 'absolute'; -labelRenderer.domElement.style.top = '0px'; +labelRenderer.domElement.style.position = "absolute"; +labelRenderer.domElement.style.top = "0px"; document.body.appendChild(labelRenderer.domElement); window.addEventListener("resize", onWindowResize); @@ -220,13 +230,13 @@ const pinGeometryAtlanta = new THREE.SphereGeometry(0.05, 32, 32); const pinMaterialAtlanta = new THREE.MeshBasicMaterial({ color: 0x31302c }); const pinMeshAtlanta = new THREE.Mesh(pinGeometryAtlanta, pinMaterialAtlanta); -const labelDivAtlanta = document.createElement('div'); -labelDivAtlanta.className = 'label-atl'; -labelDivAtlanta.textContent = 'Atlanta'; +const labelDivAtlanta = document.createElement("div"); +labelDivAtlanta.className = "label-atl"; +labelDivAtlanta.textContent = "Atlanta"; const labelObjectAtlanta = new CSS2DObject(labelDivAtlanta); -const pinLatitudeAtlanta = 33.74932660; +const pinLatitudeAtlanta = 33.7493266; const pinLongitudeAtlanta = -95.39035664; const sphericalAtlanta = new THREE.Spherical(); @@ -249,9 +259,9 @@ const pinGeometrySanJose = new THREE.SphereGeometry(0.05, 32, 32); const pinMaterialSanJose = new THREE.MeshBasicMaterial({ color: 0x31302c }); const pinMeshSanJose = new THREE.Mesh(pinGeometrySanJose, pinMaterialSanJose); -const labelDivSanJose = document.createElement('div'); -labelDivSanJose.className = 'label-san'; -labelDivSanJose.textContent = 'San Jose'; +const labelDivSanJose = document.createElement("div"); +labelDivSanJose.className = "label-san"; +labelDivSanJose.textContent = "San Jose"; const labelObjectSanJose = new CSS2DObject(labelDivSanJose); @@ -276,11 +286,14 @@ scene.add(labelObjectSanJose); const pinGeometryVintHill = new THREE.SphereGeometry(0.05, 32, 32); const pinMaterialVintHill = new THREE.MeshBasicMaterial({ color: 0x31302c }); -const pinMeshVintHill = new THREE.Mesh(pinGeometryVintHill, pinMaterialVintHill); +const pinMeshVintHill = new THREE.Mesh( + pinGeometryVintHill, + pinMaterialVintHill +); -const labelDivVintHill = document.createElement('div'); -labelDivVintHill.className = 'label-vint'; -labelDivVintHill.textContent = 'Vint Hill'; +const labelDivVintHill = document.createElement("div"); +labelDivVintHill.className = "label-vint"; +labelDivVintHill.textContent = "Vint Hill"; const labelObjectVintHill = new CSS2DObject(labelDivVintHill); @@ -306,9 +319,9 @@ const pinGeometryChicago = new THREE.SphereGeometry(0.05, 32, 32); const pinMaterialChicago = new THREE.MeshBasicMaterial({ color: 0x31302c }); const pinMeshChicago = new THREE.Mesh(pinGeometryChicago, pinMaterialChicago); -const labelDivChicago = document.createElement('div'); -labelDivChicago.className = 'label-cha'; -labelDivChicago.textContent = 'Chicago'; +const labelDivChicago = document.createElement("div"); +labelDivChicago.className = "label-cha"; +labelDivChicago.textContent = "Chicago"; const labelObjectChicago = new CSS2DObject(labelDivChicago); @@ -334,9 +347,9 @@ const pinGeometryNewYork = new THREE.SphereGeometry(0.05, 32, 32); const pinMaterialNewYork = new THREE.MeshBasicMaterial({ color: 0x31302c }); const pinMeshNewYork = new THREE.Mesh(pinGeometryNewYork, pinMaterialNewYork); -const labelDivNewYork = document.createElement('div'); -labelDivNewYork.className = 'label-york'; -labelDivNewYork.textContent = 'New York'; +const labelDivNewYork = document.createElement("div"); +labelDivNewYork.className = "label-york"; +labelDivNewYork.textContent = "New York"; const labelObjectNewYork = new CSS2DObject(labelDivNewYork); @@ -357,8 +370,6 @@ labelObjectNewYork.position.copy(positionNewYork); scene.add(pinMeshNewYork); scene.add(labelObjectNewYork); - - // ARCS function renderArc(startPosition, endPosition) { @@ -407,4 +418,4 @@ function onWindowResize() { camera.updateProjectionMatrix(); renderer.setSize(innerWidth, innerHeight); labelRenderer.setSize(innerWidth, innerHeight); -} \ No newline at end of file +} diff --git a/public/styles.css b/public/style.css old mode 100644 new mode 100755 similarity index 94% rename from public/styles.css rename to public/style.css index 0673eb5..2d1913d --- a/public/styles.css +++ b/public/style.css @@ -1,7 +1,7 @@ body { overflow: hidden; margin: 0; - font-family: 'Open Sans', sans-serif; + font-family: "Open Sans", sans-serif; } .header-container { @@ -25,7 +25,7 @@ body { .header-container h1 { display: inline-block; - font-family: 'Open Sans', sans-serif; + font-family: "Open Sans", sans-serif; margin: 0; padding: 0; } @@ -133,7 +133,8 @@ body { 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; + transition: color 300ms ease-out, background 300ms ease-out, + border 300ms ease-out, transform 300ms ease-out, opacity 300ms ease-out; } input, @@ -265,10 +266,14 @@ button { font-size: 1em; } -.label-york, .label-atl, .label-cha, .label-vint, .label-san { +.label-york, +.label-atl, +.label-cha, +.label-vint, +.label-san { color: white; background-color: rgba(0, 0, 0, 0.7); padding: 4px; border-radius: 4px; font-size: 14px; -} \ No newline at end of file +}