update
This commit is contained in:
parent
d8194a2aa4
commit
2d1e2a32af
3 changed files with 146 additions and 154 deletions
40
public/index.html
Normal file → Executable file
40
public/index.html
Normal file → Executable file
File diff suppressed because one or more lines are too long
137
public/scripts.js → public/script.js
Normal file → Executable file
137
public/scripts.js → public/script.js
Normal file → Executable file
|
@ -1,54 +1,55 @@
|
|||
// <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: "XMR",
|
||||
name: "Monero",
|
||||
address:
|
||||
"49r2aeun8DtV5VqZpZSwRpS83WfUWEaLt4NG8HJwwVkbiT1vSsXTXrPFKkKTdc6MPX9iezbTidNPvhGZKCnM1338TfK6Hgi"
|
||||
},
|
||||
{
|
||||
symbol: 'LTC',
|
||||
name: 'Litecoin',
|
||||
address: 'LRAm7h5XENknfYEpbdVsvyGY8D6MiXGTDV',
|
||||
symbol: "LTC",
|
||||
name: "Litecoin",
|
||||
address: "LRAm7h5XENknfYEpbdVsvyGY8D6MiXGTDV"
|
||||
},
|
||||
{
|
||||
symbol: 'BTC',
|
||||
name: 'Bitcoin',
|
||||
address: 'bc1qkv97ajh7f0a72l9rsjd3fmmly5q5uywr06q3x0',
|
||||
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) {
|
||||
|
@ -58,52 +59,61 @@ function selectWallet(symbol) {
|
|||
|
||||
var buttons = Array.from(walletsContainer.children);
|
||||
buttons.forEach(function (button) {
|
||||
button.classList.remove('active');
|
||||
button.classList.remove("active");
|
||||
if (button.textContent === symbol) {
|
||||
button.classList.add('active');
|
||||
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!';
|
||||
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';
|
||||
copyButton.textContent = "✚ Copy";
|
||||
}
|
||||
|
||||
function copyText() {
|
||||
var input = document.createElement('input');
|
||||
var input = document.createElement("input");
|
||||
document.body.appendChild(input);
|
||||
input.value = walletAddress.value;
|
||||
input.select();
|
||||
document.execCommand('copy');
|
||||
document.execCommand("copy");
|
||||
document.body.removeChild(input);
|
||||
copyButton.textContent = '✔ Copied';
|
||||
copyButton.textContent = "✔ Copied";
|
||||
}
|
||||
|
||||
cryptoWallets.forEach(function (wallet) {
|
||||
var button = document.createElement('button');
|
||||
var button = document.createElement("button");
|
||||
button.textContent = wallet.symbol;
|
||||
button.addEventListener('click', function () {
|
||||
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
13
public/styles.css → public/style.css
Normal file → Executable 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;
|
Loading…
Add table
Reference in a new issue