update

public/scripts.js

@@ -1,4 +1,5 @@
-document.addEventListener('DOMContentLoaded', function() {
+// <CRYPTO_DONATION>
+
 var donateButton = document.getElementById('donateButton');
 var card = document.getElementById('card');
 
@@ -67,7 +68,7 @@ function selectWallet(symbol) {
     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() {
@@ -77,7 +78,7 @@ function copyText() {
     input.select();
     document.execCommand('copy');
     document.body.removeChild(input);
-    copyButton.textContent = 'Copied';
+    copyButton.textContent = '✔ Copied';
 }
 
 cryptoWallets.forEach(function (wallet) {
@@ -92,4 +93,318 @@ cryptoWallets.forEach(function (wallet) {
 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';
+
+let scene = new THREE.Scene();
+let camera = new THREE.PerspectiveCamera(45, innerWidth / innerHeight, 1, 2000);
+camera.position.set(-5, 4, -0.8).setLength(14);
+let renderer = new THREE.WebGLRenderer({
+  antialias: true
 });
+renderer.setSize(innerWidth, innerHeight);
+renderer.setClearColor(0x241917);
+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';
+document.body.appendChild(labelRenderer.domElement);
+
+window.addEventListener("resize", onWindowResize);
+
+let controls = new OrbitControls(camera, labelRenderer.domElement);
+controls.enablePan = false;
+controls.minDistance = 8;
+controls.maxDistance = 10;
+controls.enableDamping = true;
+controls.autoRotate = false;
+
+// <GLOBE>
+
+let counter = 200000;
+let rad = 5;
+let sph = new THREE.Spherical();
+
+let r = 0;
+let dlong = Math.PI * (3 - Math.sqrt(5));
+let dz = 2 / counter;
+let long = 0;
+let z = 1 - dz / 2;
+
+let pts = [];
+let clr = [];
+let c = new THREE.Color();
+let uvs = [];
+
+for (let i = 0; i < counter; i++) {
+  r = Math.sqrt(1 - z * z);
+  let p = new THREE.Vector3(
+    Math.cos(long) * r,
+    z,
+    -Math.sin(long) * r
+  ).multiplyScalar(rad);
+  pts.push(p);
+  z = z - dz;
+  long = long + dlong;
+
+  c.setHSL(0.45, 0.5, Math.random() * 0.25 + 0.25);
+  c.toArray(clr, i * 3);
+
+  sph.setFromVector3(p);
+  uvs.push((sph.theta + Math.PI) / (Math.PI * 2), 1.0 - sph.phi / Math.PI);
+}
+
+let g = new THREE.BufferGeometry().setFromPoints(pts);
+g.setAttribute("color", new THREE.Float32BufferAttribute(clr, 3));
+g.setAttribute("uv", new THREE.Float32BufferAttribute(uvs, 2));
+let m = new THREE.PointsMaterial({
+  size: 0.1,
+  vertexColors: false,
+  color: new THREE.Color(0x743c2f),
+  onBeforeCompile: (shader) => {
+    shader.uniforms.globeTexture = {
+      value: new THREE.TextureLoader().load(imgData)
+    };
+    shader.vertexShader = `
+      uniform sampler2D globeTexture;
+      varying float vVisibility;
+      varying vec3 vNormal;
+      varying vec3 vMvPosition;
+      ${shader.vertexShader}
+    `.replace(
+      `gl_PointSize = size;`,
+      `
+      vVisibility = texture(globeTexture, uv).g;
+      gl_PointSize = size * (vVisibility < 0.5 ? 1. : 0.75);
+      vNormal = normalMatrix * normalize(position);
+      vMvPosition = -mvPosition.xyz;
+      gl_PointSize *= 0.4 + (dot(normalize(vMvPosition), vNormal) * 0.6);
+      `
+    );
+    shader.fragmentShader = `
+      varying float vVisibility;
+      varying vec3 vNormal;
+      varying vec3 vMvPosition;
+      ${shader.fragmentShader}
+    `.replace(
+      `vec4 diffuseColor = vec4( diffuse, opacity );`,
+      `
+      bool circ = length(gl_PointCoord - 0.5) > 0.5;
+      bool vis = dot(vMvPosition, vNormal) < 0.;
+      if (circ || vis) discard;
+
+      vec3 col = diffuse + (vVisibility > 0.5 ? 0.5 : 0.);
+
+      vec4 diffuseColor = vec4( col, opacity );`
+    );
+  }
+});
+let globe = new THREE.Points(g, m);
+scene.add(globe);
+// </GLOBE>
+
+// <LABEL>
+
+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 labelObjectAtlanta = new CSS2DObject(labelDivAtlanta);
+
+const pinLatitudeAtlanta = 33.74932660;
+const pinLongitudeAtlanta = -95.39035664;
+
+const sphericalAtlanta = new THREE.Spherical();
+sphericalAtlanta.phi = (90 - pinLatitudeAtlanta) * (Math.PI / 180);
+sphericalAtlanta.theta = (180 - pinLongitudeAtlanta) * (Math.PI / 180);
+sphericalAtlanta.radius = 5;
+
+const positionAtlanta = new THREE.Vector3();
+positionAtlanta.setFromSpherical(sphericalAtlanta);
+
+pinMeshAtlanta.position.copy(positionAtlanta);
+labelObjectAtlanta.position.copy(positionAtlanta);
+
+scene.add(pinMeshAtlanta);
+scene.add(labelObjectAtlanta);
+
+// San Jose
+
+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 labelObjectSanJose = new CSS2DObject(labelDivSanJose);
+
+const pinLatitudeSanJose = 38;
+const pinLongitudeSanJose = -58;
+
+const sphericalSanJose = new THREE.Spherical();
+sphericalSanJose.phi = (90 - pinLatitudeSanJose) * (Math.PI / 180);
+sphericalSanJose.theta = (180 - pinLongitudeSanJose) * (Math.PI / 180);
+sphericalSanJose.radius = 5;
+
+const positionSanJose = new THREE.Vector3();
+positionSanJose.setFromSpherical(sphericalSanJose);
+
+pinMeshSanJose.position.copy(positionSanJose);
+labelObjectSanJose.position.copy(positionSanJose);
+
+scene.add(pinMeshSanJose);
+scene.add(labelObjectSanJose);
+
+// Vint Hill
+
+const pinGeometryVintHill = new THREE.SphereGeometry(0.05, 32, 32);
+const pinMaterialVintHill = new THREE.MeshBasicMaterial({ color: 0x31302c });
+const pinMeshVintHill = new THREE.Mesh(pinGeometryVintHill, pinMaterialVintHill);
+
+const labelDivVintHill = document.createElement('div');
+labelDivVintHill.className = 'label-vint';
+labelDivVintHill.textContent = 'Vint Hill';
+
+const labelObjectVintHill = new CSS2DObject(labelDivVintHill);
+
+const pinLatitudeVintHill = 38;
+const pinLongitudeVintHill = -101;
+
+const sphericalVintHill = new THREE.Spherical();
+sphericalVintHill.phi = (90 - pinLatitudeVintHill) * (Math.PI / 180);
+sphericalVintHill.theta = (180 - pinLongitudeVintHill) * (Math.PI / 180);
+sphericalVintHill.radius = 5;
+
+const positionVintHill = new THREE.Vector3();
+positionVintHill.setFromSpherical(sphericalVintHill);
+
+pinMeshVintHill.position.copy(positionVintHill);
+labelObjectVintHill.position.copy(positionVintHill);
+
+scene.add(pinMeshVintHill);
+scene.add(labelObjectVintHill);
+
+// Chicago
+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 labelObjectChicago = new CSS2DObject(labelDivChicago);
+
+const pinLatitudeChicago = 42;
+const pinLongitudeChicago = -92.5;
+
+const sphericalChicago = new THREE.Spherical();
+sphericalChicago.phi = (90 - pinLatitudeChicago) * (Math.PI / 180);
+sphericalChicago.theta = (180 - pinLongitudeChicago) * (Math.PI / 180);
+sphericalChicago.radius = 5;
+
+const positionChicago = new THREE.Vector3();
+positionChicago.setFromSpherical(sphericalChicago);
+
+pinMeshChicago.position.copy(positionChicago);
+labelObjectChicago.position.copy(positionChicago);
+
+scene.add(pinMeshChicago);
+scene.add(labelObjectChicago);
+
+// New York
+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 labelObjectNewYork = new CSS2DObject(labelDivNewYork);
+
+const pinLatitudeNewYork = 40;
+const pinLongitudeNewYork = -105;
+
+const sphericalNewYork = new THREE.Spherical();
+sphericalNewYork.phi = (90 - pinLatitudeNewYork) * (Math.PI / 180);
+sphericalNewYork.theta = (180 - pinLongitudeNewYork) * (Math.PI / 180);
+sphericalNewYork.radius = 5;
+
+const positionNewYork = new THREE.Vector3();
+positionNewYork.setFromSpherical(sphericalNewYork);
+
+pinMeshNewYork.position.copy(positionNewYork);
+labelObjectNewYork.position.copy(positionNewYork);
+
+scene.add(pinMeshNewYork);
+scene.add(labelObjectNewYork);
+
+
+
+// ARCS
+
+function renderArc(startPosition, endPosition) {
+  const curve = new THREE.QuadraticBezierCurve3(
+    startPosition,
+    new THREE.Vector3(
+      (startPosition.x + endPosition.x) / 1.8,
+      (startPosition.y + endPosition.y) / 1.8,
+      (startPosition.z + endPosition.z) / 2
+    ),
+    endPosition
+  );
+
+  const points = curve.getPoints(50);
+  const geometry = new THREE.BufferGeometry().setFromPoints(points);
+  const material = new THREE.LineBasicMaterial({ color: 0xffffff });
+
+  const arc = new THREE.Line(geometry, material);
+  scene.add(arc);
+}
+
+renderArc(positionAtlanta, positionSanJose);
+renderArc(positionAtlanta, positionNewYork);
+renderArc(positionAtlanta, positionVintHill);
+renderArc(positionAtlanta, positionChicago);
+renderArc(positionSanJose, positionNewYork);
+renderArc(positionSanJose, positionVintHill);
+renderArc(positionSanJose, positionChicago);
+renderArc(positionNewYork, positionVintHill);
+renderArc(positionNewYork, positionChicago);
+
+// </LABEL>
+
+let clock = new THREE.Clock();
+
+renderer.setAnimationLoop(() => {
+  let t = clock.getElapsedTime();
+  globalUniforms.time.value = t;
+  controls.update();
+  renderer.render(scene, camera);
+  labelRenderer.render(scene, camera);
+});
+
+function onWindowResize() {
+  camera.aspect = innerWidth / innerHeight;
+  camera.updateProjectionMatrix();
+  renderer.setSize(innerWidth, innerHeight);
+  labelRenderer.setSize(innerWidth, innerHeight);
+}

public/styles.css

@@ -1,21 +1,7 @@
-body, h1, h2, h3, h4, h5, h6, p, ul, li {
+body {
-  margin: 0;
-  padding: 0;
   overflow: hidden;
-  overflow-y: auto;
+  margin: 0;
-  background-position: center center;
+  font-family: 'Open Sans', sans-serif;
-  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 {
@@ -23,16 +9,25 @@ body{
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 15px;
+  position: fixed;
+  top: 1rem;
+  left: 1rem;
+  right: 1rem;
+  color: #fff;
+  z-index: 999;
+  background: rgba(255, 255, 255, 0.02);
+  backdrop-filter: blur(5px);
+  padding: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.75rem;
+  border-radius: 1rem;
 }
 
 .header-container h1 {
   display: inline-block;
-}
-
-.header-container nav {
-  float: right;
   font-family: 'Open Sans', sans-serif;
+  margin: 0;
+  padding: 0;
 }
 
 .header-container nav ul {
@@ -70,167 +65,6 @@ body{
   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;
-}
-
-.section-button-title-logo {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.section-button-body {
-  display: flex;
-  flex-direction: column;
-  gap: 25px;
-  text-align: left;
-  vertical-align: top;
-  height: 100%;
-  padding-top: 3.5rem;
-  padding-bottom: 2.5rem;
-}
-
-.span-three-columns {
-  grid-column: span 3;
-}
-
-.button-text-footer {
-  text-align: center;
-}
-
-.client-button {
-  padding: 5px;
-  border-radius: 5px;
-  background-color: #87a3a2;
-  width: 100%;
-  font-weight: 700;
-}
-
-.client-button:hover {
-  background-color: #536f6c;
-  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;
@@ -278,15 +112,15 @@ body{
   z-index: 99;
   position: fixed;
   right: -520px;
-  bottom: 0;
+  bottom: 15px;
   transition: right 0.5s ease-in-out;
 }
 
 .card-in {
   z-index: 99;
   position: fixed;
-  right: 0;
+  right: 15px;
-  bottom: 0;
+  bottom: 15px;
   transition: right 0.5s ease-in-out;
 }
 
@@ -312,7 +146,7 @@ button {
   line-height: inherit;
   font-weight: normal;
   background: none;
-  color: inherit;
+  color: #b4a477;
 }
 
 .card-wrap {
@@ -320,7 +154,8 @@ button {
   margin: 0 auto;
   max-width: 520px;
   background-color: #232323;
-  border-top-left-radius: 9px;
+  border-radius: 9px;
+  box-shadow: 7px 7px 0 #743c2f;
 }
 
 .tabs-wrap {
@@ -334,7 +169,7 @@ button {
   justify-content: stretch;
   position: relative;
   overflow: hidden;
-  background-color: #743c2f;
+  background-color: #232222;
 }
 
 .tabs-nav > button {
@@ -362,8 +197,9 @@ button {
 .tabs-info {
   min-height: 100px;
   padding-top: 1em;
+  background-color: #232222;
   font-weight: 700;
-  color: #fff;
+  color: #733c2f;
 }
 
 .tabs-info .tabs-info-row {
@@ -377,7 +213,7 @@ button {
 
 .tabs-info .tabs-info-qr > img {
   display: block;
-  border-radius: 5px;
+  border-radius: 10px;
   background-color: white;
   padding: 5px;
 }
@@ -387,13 +223,15 @@ button {
   flex-direction: row;
   align-items: center;
   justify-content: stretch;
+  background-color: #232323;
   padding: 0.75em 1em;
-  color: #733c2f;
+  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.4);
 }
 
 .tabs-info .tabs-info-input > span {
   margin-right: 1em;
   font-weight: bold;
+  color: #733c2f;
 }
 
 .tabs-info .tabs-info-input > input {
@@ -403,12 +241,16 @@ button {
   text-overflow: ellipsis;
   white-space: nowrap;
   font-weight: bold;
+  color: #733c2f;
+  background-color: #232323;
   border: none;
 }
 
 .tabs-info .tabs-info-input > button {
   cursor: pointer;
   font-weight: bold;
+  background-color: #232222;
+  color: #733c2f;
 }
 
 .tabs-info .tabs-info-details {
@@ -423,75 +265,10 @@ button {
   font-size: 1em;
 }
 
-.color-cube {
+.label-york, .label-atl, .label-cha, .label-vint, .label-san {
-    --cube-color: #743c2f;
+  color: white;
-    position: fixed;
+  background-color: rgba(0, 0, 0, 0.7);
-    width: 280px;
+  padding: 4px;
-    height: 280px;
+  border-radius: 4px;
-    transform-style: preserve-3d;
+  font-size: 14px;
-    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);
-    }
-}