This commit is contained in:
rouce 2023-10-14 23:18:46 -04:00
parent d8194a2aa4
commit 2d1e2a32af
3 changed files with 146 additions and 154 deletions

96
public/index.html Normal file → Executable file

File diff suppressed because one or more lines are too long

185
public/scripts.js → public/script.js Normal file → Executable file
View file

@ -1,109 +1,119 @@
// <CRYPTO_DONATION>
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);
// </CRYPTO_DONATION>
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) {

13
public/styles.css → public/style.css Normal file → Executable file
View file

@ -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,7 +266,11 @@ 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;