update
This commit is contained in:
rouce
parent
ed1921b2c3
commit
d8194a2aa4
3 changed files with 396 additions and 351 deletions
File diff suppressed because one or more lines are too long
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -1,21 +1,7 @@
|
|||
body, h1, h2, h3, h4, h5, h6, p, ul, li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
body {
|
||||
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;
|
||||
margin: 0;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
}
|
||||
|
||||
.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;
|
||||
bottom: 0;
|
||||
right: 15px;
|
||||
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 {
|
||||
--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);
|
||||
}
|
||||
.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;
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue