mycosystems/myco.systems
3
0
Fork 0
Code Pull requests Activity Actions

Merge branch 'v2'

Browse source
This commit is contained in:
brookee 2024-02-27 13:52:27 -05:00
commit 717d789329
7 changed files with 905 additions and 939 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
README.md
View file

@ -1,13 +1,12 @@
# myco.systems
This has been my (brooke) project to start a website from scratch, no external ~~dependancies~~ **(using three.js now, but still no external stylesheets)**. Obviously much harder so far, but a nice learning experience. Maybe at some point I'll work on compiling these into a bit of a theme of tailwind or something.
This has been my (brooke) project to start our website from scratch, ~~no external dependancies~~ (Currently using simplex noise and of course the existing JS for the globe). Obviously much harder so far, but a nice learning experience.
Trying to keep it under 50 MB, currently it's around 10 MiB with the icons and backgrounds, the actual payload sent to the browser is around ~~31KB~~ **(~800 KiB :c)**
Trying to keep it under 50 MB total, currently the payload sent to the browser is around 10 KiB. Repo size without icons is right at 1.1 MiB ^.^
Update: mostly started from the ground up, got some inspiration from https://codepen.io/prisoner849 and started trying to learn three.js, looks very interesting so far. It's a big mess and I don't expect most of this code to be moved into future releases but I think it looks cool and it's performant enough for the end user.
I still have some gripes about importing a library, it's obvious in the waterfall that it is measurably increasing page loads by almost a second, sometimes two.
~~Update: mostly started from the ground up, got some inspiration from https://codepen.io/prisoner849 and started trying to learn three.js, looks very interesting so far. It's a big mess and I don't expect most of this code to be moved into future releases but I think it looks cool and it's performant enough for the end user.~~
Update 2: Started from the ground up again, everything has been redone to encourage the usage of static browsers, ie. FREE browser or any modern browser with JS discouraged. Now whenever JS is disabled you will still see the main content and will be able to open all modals but the globe just wont spin. https://codepen.io/thepheer/pen/jvMJMd
```
git clone https://git.myco.systems/mycosystems/myco.systems.git

79
public/donations/index.html
View file

@ -1,79 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>Your Mycelial Network</title>
<link rel="stylesheet" type="text/css" href="../styles.css">
<script src="scripts.js"></script>
<link rel="icon" type="image/x-icon" href="../icons/red-background/favicon.ico">
</head>
<body>
<header>
<div class="header-container">
<h1><a href="/" style="color:#fff">Myco.Systems</a></h1>
<nav>
<ul>
<li><a href="https://coop.myco.systems/">coop.myco.systems</a></li>
<li><a href="https://web.myco.systems/">web.myco.systems</a></li>
<li><a href="/donations">Where do my donations go?</a></li>
</ul>
</nav>
</div>
</header>
<div class="inner-content">
<section class="inner-section-cube">
<div class="color-cube">
<div class="cube-face cube-front"></div>
<div class="cube-face cube-back"></div>
<div class="cube-face cube-bottom"></div>
<div class="cube-face cube-top"></div>
<div class="cube-face cube-left"></div>
<div class="cube-face cube-right"></div>
</div>
</section>
<section class="inner-section">
<div class="section-container">
<div class="section-button">
<h2>Domations</h2>
<p>where them domations go</p>
</div>
</div>
</section>
<div class="card-button" id="donateButton">Donate</div>
<div class="card-wrap card-out" id="card">
<main class="tabs-wrap">
<nav class="tabs-nav" id="wallets">
</nav>
<section class="tabs-info">
<div class="tabs-info-row">
<div class="tabs-info-qr">
<img id="qrImage" alt="wallet.name" />
</div>
<div class="tabs-info-details">
<div class="tabs-info-title" id="donateTitle"></div>
<div class="tabs-info-warn" id="donateWarn"></div>
</div>
</div>
<div class="tabs-info-input">
<span>Address:</span>
<input type="text" id="walletAddress" />
<button type="button" id="copyButton">✚ Copy</button>
</div>
</section>
</main>
</div>
</div>
<footer>
<div class="footer-container">
<p>&copy; MycoSystems</p>
<p><a style="color:#fff !important" href="https://creativecommons.org/licenses/by/4.0/">Copyright info</a></p>
</div>
</footer>
</body>
</html>

95
public/donations/scripts.js
View file

@ -1,95 +0,0 @@
document.addEventListener('DOMContentLoaded', function() {
var donateButton = document.getElementById('donateButton');
var card = document.getElementById('card');
donateButton.addEventListener('click', function(event) {
event.stopPropagation();
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');
}
});
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');
}
});
var cryptoWallets = [
{
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');
function selectWallet(symbol) {
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');
}
});
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';
}
cryptoWallets.forEach(function (wallet) {
var button = document.createElement('button');
button.textContent = wallet.symbol;
button.addEventListener('click', function () {
selectWallet(wallet.symbol);
});
walletsContainer.appendChild(button);
});
copyButton.addEventListener('click', copyText);
selectWallet(cryptoWallets[0].symbol);
});

154
public/index.html
View file

File diff suppressed because one or more lines are too long

513
public/script.js
View file

@ -1,421 +1,114 @@
// <CRYPTO_DONATION>
(function () {
"use strict";
var donateButton = document.getElementById("donateButton");
var card = document.getElementById("card");
// braille
donateButton.addEventListener("click", function (event) {
event.stopPropagation();
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");
}
});
const enc = (x) =>
((x & 0x08) << 3) | ((x & 0x70) >> 1) | (x & 0x87) | 0x2800;
const row = (x) => String.fromCharCode(...Array.from(x, enc));
window.addEventListener("click", function (event) {
if (event.target === card || card.contains(event.target)) {
return;
}
const create = (width, height) =>
Array.from(Array(height >> 2), () => new Uint8Array(width >> 1));
if (card.classList.contains("card-in")) {
card.classList.remove("card-in");
card.classList.add("card-out");
}
});
const set = (table, x, y) =>
(table[y >> 2][x >> 1] |= 1 << ((y & 3) | ((x & 1) << 2)));
var cryptoWallets = [
{
symbol: "XMR",
name: "Monero",
address:
"49r2aeun8DtV5VqZpZSwRpS83WfUWEaLt4NG8HJwwVkbiT1vSsXTXrPFKkKTdc6MPX9iezbTidNPvhGZKCnM1338TfK6Hgi"
},
{
symbol: "LTC",
name: "Litecoin",
address: "LRAm7h5XENknfYEpbdVsvyGY8D6MiXGTDV"
},
{
symbol: "BTC",
name: "Bitcoin",
address: "bc1qkv97ajh7f0a72l9rsjd3fmmly5q5uywr06q3x0"
}
];
const render = (table) => table.map(row).join("\n");
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");
// util
function selectWallet(symbol) {
var wallet = cryptoWallets.find(function (w) {
return w.symbol === symbol;
});
if (!wallet) return;
const frame = () => new Promise((resolve) => requestAnimationFrame(resolve));
var buttons = Array.from(walletsContainer.children);
buttons.forEach(function (button) {
button.classList.remove("active");
if (button.textContent === symbol) {
button.classList.add("active");
const element = (name, options) =>
Object.assign(document.createElement(name), options);
// bayer
const bayer = (order, x, y) => {
let z = 0;
for (let i = order; i--; x >>= 1, y >>= 1)
z = ((((x & 1) ^ (y & 1)) | (z << 1)) << 1) | (y & 1);
return z;
};
const lut = (order) => {
const size = 1 << order,
area = size * size;
const lut = new Float32Array(area);
for (let y = 0; y < size; y++)
for (let x = 0; x < size; x++)
lut[x + y * size] = (bayer(order, x, y) + 0.5) / area;
return (x, y) => lut[(x % size) + (y % size) * size];
};
// render
const simplex = new SimplexNoise();
const bayer4 = lut(4);
const fbm = (freq, amp, x, y, z) =>
simplex.noise3D(x * (freq *= 2), y * freq, z * freq) * (amp /= 2) +
simplex.noise3D(x * (freq *= 2), y * freq, z * freq) * (amp /= 2) +
simplex.noise3D(x * (freq *= 2), y * freq, z * freq) * (amp /= 2) +
simplex.noise3D(x * (freq *= 2), y * freq, z * freq) * (amp /= 2) +
simplex.noise3D(x * (freq *= 2), y * freq, z * freq) * (amp /= 2) +
simplex.noise3D(x * (freq *= 2), y * freq, z * freq) * (amp /= 2) +
simplex.noise3D(x * (freq *= 2), y * freq, z * freq) * (amp /= 2) +
simplex.noise3D(x * (freq *= 2), y * freq, z * freq) * (amp /= 2);
const texture = (u, v, w) => (2 * (0.5 + 0.5 * fbm(0.5, 1, u, v, w))) % 1;
const globe = (x, y, u, v, w) => {
const d = u * u + v * v;
if (d > 1) return false;
const f = 1 / ((1 - d ** 0.5) ** 0.5 + 1);
const t = texture(1e-1 * w + f * u, f * v, 1e-2 * w);
return t > bayer4(x, y);
};
// main
const main = async () => {
const fillerSize = 100;
const filler =
"\u28ff".repeat(fillerSize) + "\n\u28ff".repeat(fillerSize - 1);
const root = element("div", { className: "braille" });
const hidden = element("div", { className: "hidden", textContent: filler });
const visible = element("div", { className: "visible" });
root.appendChild(hidden);
root.appendChild(visible);
document.body.appendChild(root);
for (; ; await frame()) {
const hr = hidden.getBoundingClientRect();
const fontWidth = hr.width / fillerSize;
const fontHeight = hr.height / fillerSize;
const rr = root.getBoundingClientRect();
const ratio = rr.width / rr.height;
const width = (rr.width / fontWidth) << 2;
const height = (rr.height / fontHeight) << 3;
const pixels = create(width, height);
const time = 1e-3 * Date.now();
for (let y = 0; y < height; y++) {
const v = (2 * y) / height - 1;
for (let x = 0; x < width; x++) {
const u = ratio * ((2 * x) / width - 3.3);
const shiftedU = u + 1.2;
if (globe(x, y, shiftedU, v, time)) set(pixels, x, y);
}
}
visible.textContent = render(pixels);
}
});
};
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";
}
main();
})();
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";
}
cryptoWallets.forEach(function (wallet) {
var button = document.createElement("button");
button.textContent = wallet.symbol;
button.addEventListener("click", function () {
selectWallet(wallet.symbol);
});
walletsContainer.appendChild(button);
});
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 = 10;
controls.maxDistance = 14;
controls.enableDamping = true;
controls.autoRotate = false;
// <GLOBE>
let counter = 40000;
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.17,
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.7493266;
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);
}

473
public/simplex.js Normal file
View file

@ -0,0 +1,473 @@
/*
* A fast javascript implementation of simplex noise by Jonas Wagner
Based on a speed-improved simplex noise algorithm for 2D, 3D and 4D in Java.
Which is based on example code by Stefan Gustavson (stegu@itn.liu.se).
With Optimisations by Peter Eastman (peastman@drizzle.stanford.edu).
Better rank ordering method by Stefan Gustavson in 2012.
Copyright (c) 2018 Jonas Wagner
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
*/
(function() {
'use strict';
var F2 = 0.5 * (Math.sqrt(3.0) - 1.0);
var G2 = (3.0 - Math.sqrt(3.0)) / 6.0;
var F3 = 1.0 / 3.0;
var G3 = 1.0 / 6.0;
var F4 = (Math.sqrt(5.0) - 1.0) / 4.0;
var G4 = (5.0 - Math.sqrt(5.0)) / 20.0;
function SimplexNoise(randomOrSeed) {
var random;
if (typeof randomOrSeed == 'function') {
random = randomOrSeed;
}
else if (randomOrSeed) {
random = alea(randomOrSeed);
} else {
random = Math.random;
}
this.p = buildPermutationTable(random);
this.perm = new Uint8Array(512);
this.permMod12 = new Uint8Array(512);
for (var i = 0; i < 512; i++) {
this.perm[i] = this.p[i & 255];
this.permMod12[i] = this.perm[i] % 12;
}
}
SimplexNoise.prototype = {
grad3: new Float32Array([1, 1, 0,
-1, 1, 0,
1, -1, 0,
-1, -1, 0,
1, 0, 1,
-1, 0, 1,
1, 0, -1,
-1, 0, -1,
0, 1, 1,
0, -1, 1,
0, 1, -1,
0, -1, -1]),
grad4: new Float32Array([0, 1, 1, 1, 0, 1, 1, -1, 0, 1, -1, 1, 0, 1, -1, -1,
0, -1, 1, 1, 0, -1, 1, -1, 0, -1, -1, 1, 0, -1, -1, -1,
1, 0, 1, 1, 1, 0, 1, -1, 1, 0, -1, 1, 1, 0, -1, -1,
-1, 0, 1, 1, -1, 0, 1, -1, -1, 0, -1, 1, -1, 0, -1, -1,
1, 1, 0, 1, 1, 1, 0, -1, 1, -1, 0, 1, 1, -1, 0, -1,
-1, 1, 0, 1, -1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, -1,
1, 1, 1, 0, 1, 1, -1, 0, 1, -1, 1, 0, 1, -1, -1, 0,
-1, 1, 1, 0, -1, 1, -1, 0, -1, -1, 1, 0, -1, -1, -1, 0]),
noise2D: function(xin, yin) {
var permMod12 = this.permMod12;
var perm = this.perm;
var grad3 = this.grad3;
var n0 = 0; // Noise contributions from the three corners
var n1 = 0;
var n2 = 0;
// Skew the input space to determine which simplex cell we're in
var s = (xin + yin) * F2; // Hairy factor for 2D
var i = Math.floor(xin + s);
var j = Math.floor(yin + s);
var t = (i + j) * G2;
var X0 = i - t; // Unskew the cell origin back to (x,y) space
var Y0 = j - t;
var x0 = xin - X0; // The x,y distances from the cell origin
var y0 = yin - Y0;
// For the 2D case, the simplex shape is an equilateral triangle.
// Determine which simplex we are in.
var i1, j1; // Offsets for second (middle) corner of simplex in (i,j) coords
if (x0 > y0) {
i1 = 1;
j1 = 0;
} // lower triangle, XY order: (0,0)->(1,0)->(1,1)
else {
i1 = 0;
j1 = 1;
} // upper triangle, YX order: (0,0)->(0,1)->(1,1)
// A step of (1,0) in (i,j) means a step of (1-c,-c) in (x,y), and
// a step of (0,1) in (i,j) means a step of (-c,1-c) in (x,y), where
// c = (3-sqrt(3))/6
var x1 = x0 - i1 + G2; // Offsets for middle corner in (x,y) unskewed coords
var y1 = y0 - j1 + G2;
var x2 = x0 - 1.0 + 2.0 * G2; // Offsets for last corner in (x,y) unskewed coords
var y2 = y0 - 1.0 + 2.0 * G2;
// Work out the hashed gradient indices of the three simplex corners
var ii = i & 255;
var jj = j & 255;
// Calculate the contribution from the three corners
var t0 = 0.5 - x0 * x0 - y0 * y0;
if (t0 >= 0) {
var gi0 = permMod12[ii + perm[jj]] * 3;
t0 *= t0;
n0 = t0 * t0 * (grad3[gi0] * x0 + grad3[gi0 + 1] * y0); // (x,y) of grad3 used for 2D gradient
}
var t1 = 0.5 - x1 * x1 - y1 * y1;
if (t1 >= 0) {
var gi1 = permMod12[ii + i1 + perm[jj + j1]] * 3;
t1 *= t1;
n1 = t1 * t1 * (grad3[gi1] * x1 + grad3[gi1 + 1] * y1);
}
var t2 = 0.5 - x2 * x2 - y2 * y2;
if (t2 >= 0) {
var gi2 = permMod12[ii + 1 + perm[jj + 1]] * 3;
t2 *= t2;
n2 = t2 * t2 * (grad3[gi2] * x2 + grad3[gi2 + 1] * y2);
}
// Add contributions from each corner to get the final noise value.
// The result is scaled to return values in the interval [-1,1].
return 70.0 * (n0 + n1 + n2);
},
// 3D simplex noise
noise3D: function(xin, yin, zin) {
var permMod12 = this.permMod12;
var perm = this.perm;
var grad3 = this.grad3;
var n0, n1, n2, n3; // Noise contributions from the four corners
// Skew the input space to determine which simplex cell we're in
var s = (xin + yin + zin) * F3; // Very nice and simple skew factor for 3D
var i = Math.floor(xin + s);
var j = Math.floor(yin + s);
var k = Math.floor(zin + s);
var t = (i + j + k) * G3;
var X0 = i - t; // Unskew the cell origin back to (x,y,z) space
var Y0 = j - t;
var Z0 = k - t;
var x0 = xin - X0; // The x,y,z distances from the cell origin
var y0 = yin - Y0;
var z0 = zin - Z0;
// For the 3D case, the simplex shape is a slightly irregular tetrahedron.
// Determine which simplex we are in.
var i1, j1, k1; // Offsets for second corner of simplex in (i,j,k) coords
var i2, j2, k2; // Offsets for third corner of simplex in (i,j,k) coords
if (x0 >= y0) {
if (y0 >= z0) {
i1 = 1;
j1 = 0;
k1 = 0;
i2 = 1;
j2 = 1;
k2 = 0;
} // X Y Z order
else if (x0 >= z0) {
i1 = 1;
j1 = 0;
k1 = 0;
i2 = 1;
j2 = 0;
k2 = 1;
} // X Z Y order
else {
i1 = 0;
j1 = 0;
k1 = 1;
i2 = 1;
j2 = 0;
k2 = 1;
} // Z X Y order
}
else { // x0<y0
if (y0 < z0) {
i1 = 0;
j1 = 0;
k1 = 1;
i2 = 0;
j2 = 1;
k2 = 1;
} // Z Y X order
else if (x0 < z0) {
i1 = 0;
j1 = 1;
k1 = 0;
i2 = 0;
j2 = 1;
k2 = 1;
} // Y Z X order
else {
i1 = 0;
j1 = 1;
k1 = 0;
i2 = 1;
j2 = 1;
k2 = 0;
} // Y X Z order
}
// A step of (1,0,0) in (i,j,k) means a step of (1-c,-c,-c) in (x,y,z),
// a step of (0,1,0) in (i,j,k) means a step of (-c,1-c,-c) in (x,y,z), and
// a step of (0,0,1) in (i,j,k) means a step of (-c,-c,1-c) in (x,y,z), where
// c = 1/6.
var x1 = x0 - i1 + G3; // Offsets for second corner in (x,y,z) coords
var y1 = y0 - j1 + G3;
var z1 = z0 - k1 + G3;
var x2 = x0 - i2 + 2.0 * G3; // Offsets for third corner in (x,y,z) coords
var y2 = y0 - j2 + 2.0 * G3;
var z2 = z0 - k2 + 2.0 * G3;
var x3 = x0 - 1.0 + 3.0 * G3; // Offsets for last corner in (x,y,z) coords
var y3 = y0 - 1.0 + 3.0 * G3;
var z3 = z0 - 1.0 + 3.0 * G3;
// Work out the hashed gradient indices of the four simplex corners
var ii = i & 255;
var jj = j & 255;
var kk = k & 255;
// Calculate the contribution from the four corners
var t0 = 0.6 - x0 * x0 - y0 * y0 - z0 * z0;
if (t0 < 0) n0 = 0.0;
else {
var gi0 = permMod12[ii + perm[jj + perm[kk]]] * 3;
t0 *= t0;
n0 = t0 * t0 * (grad3[gi0] * x0 + grad3[gi0 + 1] * y0 + grad3[gi0 + 2] * z0);
}
var t1 = 0.6 - x1 * x1 - y1 * y1 - z1 * z1;
if (t1 < 0) n1 = 0.0;
else {
var gi1 = permMod12[ii + i1 + perm[jj + j1 + perm[kk + k1]]] * 3;
t1 *= t1;
n1 = t1 * t1 * (grad3[gi1] * x1 + grad3[gi1 + 1] * y1 + grad3[gi1 + 2] * z1);
}
var t2 = 0.6 - x2 * x2 - y2 * y2 - z2 * z2;
if (t2 < 0) n2 = 0.0;
else {
var gi2 = permMod12[ii + i2 + perm[jj + j2 + perm[kk + k2]]] * 3;
t2 *= t2;
n2 = t2 * t2 * (grad3[gi2] * x2 + grad3[gi2 + 1] * y2 + grad3[gi2 + 2] * z2);
}
var t3 = 0.6 - x3 * x3 - y3 * y3 - z3 * z3;
if (t3 < 0) n3 = 0.0;
else {
var gi3 = permMod12[ii + 1 + perm[jj + 1 + perm[kk + 1]]] * 3;
t3 *= t3;
n3 = t3 * t3 * (grad3[gi3] * x3 + grad3[gi3 + 1] * y3 + grad3[gi3 + 2] * z3);
}
// Add contributions from each corner to get the final noise value.
// The result is scaled to stay just inside [-1,1]
return 32.0 * (n0 + n1 + n2 + n3);
},
// 4D simplex noise, better simplex rank ordering method 2012-03-09
noise4D: function(x, y, z, w) {
var perm = this.perm;
var grad4 = this.grad4;
var n0, n1, n2, n3, n4; // Noise contributions from the five corners
// Skew the (x,y,z,w) space to determine which cell of 24 simplices we're in
var s = (x + y + z + w) * F4; // Factor for 4D skewing
var i = Math.floor(x + s);
var j = Math.floor(y + s);
var k = Math.floor(z + s);
var l = Math.floor(w + s);
var t = (i + j + k + l) * G4; // Factor for 4D unskewing
var X0 = i - t; // Unskew the cell origin back to (x,y,z,w) space
var Y0 = j - t;
var Z0 = k - t;
var W0 = l - t;
var x0 = x - X0; // The x,y,z,w distances from the cell origin
var y0 = y - Y0;
var z0 = z - Z0;
var w0 = w - W0;
// For the 4D case, the simplex is a 4D shape I won't even try to describe.
// To find out which of the 24 possible simplices we're in, we need to
// determine the magnitude ordering of x0, y0, z0 and w0.
// Six pair-wise comparisons are performed between each possible pair
// of the four coordinates, and the results are used to rank the numbers.
var rankx = 0;
var ranky = 0;
var rankz = 0;
var rankw = 0;
if (x0 > y0) rankx++;
else ranky++;
if (x0 > z0) rankx++;
else rankz++;
if (x0 > w0) rankx++;
else rankw++;
if (y0 > z0) ranky++;
else rankz++;
if (y0 > w0) ranky++;
else rankw++;
if (z0 > w0) rankz++;
else rankw++;
var i1, j1, k1, l1; // The integer offsets for the second simplex corner
var i2, j2, k2, l2; // The integer offsets for the third simplex corner
var i3, j3, k3, l3; // The integer offsets for the fourth simplex corner
// simplex[c] is a 4-vector with the numbers 0, 1, 2 and 3 in some order.
// Many values of c will never occur, since e.g. x>y>z>w makes x<z, y<w and x<w
// impossible. Only the 24 indices which have non-zero entries make any sense.
// We use a thresholding to set the coordinates in turn from the largest magnitude.
// Rank 3 denotes the largest coordinate.
i1 = rankx >= 3 ? 1 : 0;
j1 = ranky >= 3 ? 1 : 0;
k1 = rankz >= 3 ? 1 : 0;
l1 = rankw >= 3 ? 1 : 0;
// Rank 2 denotes the second largest coordinate.
i2 = rankx >= 2 ? 1 : 0;
j2 = ranky >= 2 ? 1 : 0;
k2 = rankz >= 2 ? 1 : 0;
l2 = rankw >= 2 ? 1 : 0;
// Rank 1 denotes the second smallest coordinate.
i3 = rankx >= 1 ? 1 : 0;
j3 = ranky >= 1 ? 1 : 0;
k3 = rankz >= 1 ? 1 : 0;
l3 = rankw >= 1 ? 1 : 0;
// The fifth corner has all coordinate offsets = 1, so no need to compute that.
var x1 = x0 - i1 + G4; // Offsets for second corner in (x,y,z,w) coords
var y1 = y0 - j1 + G4;
var z1 = z0 - k1 + G4;
var w1 = w0 - l1 + G4;
var x2 = x0 - i2 + 2.0 * G4; // Offsets for third corner in (x,y,z,w) coords
var y2 = y0 - j2 + 2.0 * G4;
var z2 = z0 - k2 + 2.0 * G4;
var w2 = w0 - l2 + 2.0 * G4;
var x3 = x0 - i3 + 3.0 * G4; // Offsets for fourth corner in (x,y,z,w) coords
var y3 = y0 - j3 + 3.0 * G4;
var z3 = z0 - k3 + 3.0 * G4;
var w3 = w0 - l3 + 3.0 * G4;
var x4 = x0 - 1.0 + 4.0 * G4; // Offsets for last corner in (x,y,z,w) coords
var y4 = y0 - 1.0 + 4.0 * G4;
var z4 = z0 - 1.0 + 4.0 * G4;
var w4 = w0 - 1.0 + 4.0 * G4;
// Work out the hashed gradient indices of the five simplex corners
var ii = i & 255;
var jj = j & 255;
var kk = k & 255;
var ll = l & 255;
// Calculate the contribution from the five corners
var t0 = 0.6 - x0 * x0 - y0 * y0 - z0 * z0 - w0 * w0;
if (t0 < 0) n0 = 0.0;
else {
var gi0 = (perm[ii + perm[jj + perm[kk + perm[ll]]]] % 32) * 4;
t0 *= t0;
n0 = t0 * t0 * (grad4[gi0] * x0 + grad4[gi0 + 1] * y0 + grad4[gi0 + 2] * z0 + grad4[gi0 + 3] * w0);
}
var t1 = 0.6 - x1 * x1 - y1 * y1 - z1 * z1 - w1 * w1;
if (t1 < 0) n1 = 0.0;
else {
var gi1 = (perm[ii + i1 + perm[jj + j1 + perm[kk + k1 + perm[ll + l1]]]] % 32) * 4;
t1 *= t1;
n1 = t1 * t1 * (grad4[gi1] * x1 + grad4[gi1 + 1] * y1 + grad4[gi1 + 2] * z1 + grad4[gi1 + 3] * w1);
}
var t2 = 0.6 - x2 * x2 - y2 * y2 - z2 * z2 - w2 * w2;
if (t2 < 0) n2 = 0.0;
else {
var gi2 = (perm[ii + i2 + perm[jj + j2 + perm[kk + k2 + perm[ll + l2]]]] % 32) * 4;
t2 *= t2;
n2 = t2 * t2 * (grad4[gi2] * x2 + grad4[gi2 + 1] * y2 + grad4[gi2 + 2] * z2 + grad4[gi2 + 3] * w2);
}
var t3 = 0.6 - x3 * x3 - y3 * y3 - z3 * z3 - w3 * w3;
if (t3 < 0) n3 = 0.0;
else {
var gi3 = (perm[ii + i3 + perm[jj + j3 + perm[kk + k3 + perm[ll + l3]]]] % 32) * 4;
t3 *= t3;
n3 = t3 * t3 * (grad4[gi3] * x3 + grad4[gi3 + 1] * y3 + grad4[gi3 + 2] * z3 + grad4[gi3 + 3] * w3);
}
var t4 = 0.6 - x4 * x4 - y4 * y4 - z4 * z4 - w4 * w4;
if (t4 < 0) n4 = 0.0;
else {
var gi4 = (perm[ii + 1 + perm[jj + 1 + perm[kk + 1 + perm[ll + 1]]]] % 32) * 4;
t4 *= t4;
n4 = t4 * t4 * (grad4[gi4] * x4 + grad4[gi4 + 1] * y4 + grad4[gi4 + 2] * z4 + grad4[gi4 + 3] * w4);
}
// Sum up and scale the result to cover the range [-1,1]
return 27.0 * (n0 + n1 + n2 + n3 + n4);
}
};
function buildPermutationTable(random) {
var i;
var p = new Uint8Array(256);
for (i = 0; i < 256; i++) {
p[i] = i;
}
for (i = 0; i < 255; i++) {
var r = i + ~~(random() * (256 - i));
var aux = p[i];
p[i] = p[r];
p[r] = aux;
}
return p;
}
SimplexNoise._buildPermutationTable = buildPermutationTable;
function alea() {
// Johannes Baagøe <baagoe@baagoe.com>, 2010
var s0 = 0;
var s1 = 0;
var s2 = 0;
var c = 1;
var mash = masher();
s0 = mash(' ');
s1 = mash(' ');
s2 = mash(' ');
for (var i = 0; i < arguments.length; i++) {
s0 -= mash(arguments[i]);
if (s0 < 0) {
s0 += 1;
}
s1 -= mash(arguments[i]);
if (s1 < 0) {
s1 += 1;
}
s2 -= mash(arguments[i]);
if (s2 < 0) {
s2 += 1;
}
}
mash = null;
return function() {
var t = 2091639 * s0 + c * 2.3283064365386963e-10; // 2^-32
s0 = s1;
s1 = s2;
return s2 = t - (c = t | 0);
};
}
function masher() {
var n = 0xefc8249d;
return function(data) {
data = data.toString();
for (var i = 0; i < data.length; i++) {
n += data.charCodeAt(i);
var h = 0.02519603282416938 * n;
n = h >>> 0;
h -= n;
h *= n;
n = h >>> 0;
h -= n;
n += h * 0x100000000; // 2^32
}
return (n >>> 0) * 2.3283064365386963e-10; // 2^-32
};
}
// amd
if (typeof define !== 'undefined' && define.amd) define(function() {return SimplexNoise;});
// common js
if (typeof exports !== 'undefined') exports.SimplexNoise = SimplexNoise;
// browser
else if (typeof window !== 'undefined') window.SimplexNoise = SimplexNoise;
// nodejs
if (typeof module !== 'undefined') {
module.exports = SimplexNoise;
}
})();

517
public/style.css
View file

@ -1,322 +1,241 @@
:root {
--size: calc(100vmin / 1.618033988749895);
}
html,
body {
overflow: hidden;
margin: 0;
font-family: "Open Sans", sans-serif;
}
.header-container {
color: white;
display: flex;
justify-content: space-between;
align-items: center;
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;
font-family: "Open Sans", sans-serif;
margin: 0;
padding: 0;
}
.header-container nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.header-container nav ul li {
display: inline-block;
margin-left: 20px;
}
.header-container nav ul li a {
text-decoration: none;
color: white;
font-weight: 800;
position: relative;
}
.header-container nav ul li a::before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: white;
transform: scaleX(0);
transform-origin: bottom left;
transition: transform 0.3s ease;
height: 100vh;
overflow: hidden;
}
.header-container nav ul li a:hover::before {
transform: scaleX(1);
}
.card-button {
position: fixed;
z-index: 99;
right: 1.9rem;
bottom: 1.9rem;
padding: 5px 30px;
background-color: #232222;
color: #e3e3e3;
border-radius: 5px;
font-size: 22px;
font-weight: 800;
cursor: pointer;
transition: transform 0.3s;
}
.card-button:hover {
animation: wobble 2s ease-in-out infinite;
}
@keyframes wobble {
0% {
transform: translateX(0);
}
15% {
transform: translateX(-2px) rotate(-2deg);
}
30% {
transform: translateX(2px) rotate(2deg);
}
45% {
transform: translateX(-1px) rotate(-1deg);
}
60% {
transform: translateX(1px) rotate(1deg);
}
75% {
transform: translateX(-0.5px) rotate(-0.5deg);
}
100% {
transform: translateX(0);
}
}
.card-out {
z-index: 99;
position: fixed;
right: -520px;
bottom: 15px;
transition: right 0.5s ease-in-out;
}
.card-in {
z-index: 99;
position: fixed;
right: 15px;
bottom: 15px;
transition: right 0.5s ease-in-out;
}
*,
*:before,
*:after {
outline: 0;
body {
margin: 0;
padding: 0;
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;
background: #241917;
color: #f3bbae;
font-family: Monaco, monospace !important;
}
input,
textarea,
select,
options,
button {
font-family: inherit;
font-size: inherit;
line-height: inherit;
font-weight: normal;
background: none;
color: #b4a477;
}
.card-wrap {
overflow: hidden;
margin: 0 auto;
max-width: 520px;
background-color: #232323;
border-radius: 9px;
box-shadow: 7px 7px 0 #743c2f;
}
.tabs-wrap {
position: relative;
}
.tabs-nav {
body,
.braille {
display: flex;
flex-direction: row;
align-items: center;
justify-content: stretch;
position: relative;
overflow: hidden;
background-color: #232222;
justify-content: center;
flex-flow: row;
}
.tabs-nav > button {
flex: 1;
display: block;
.braille {
max-width: 100%;
max-height: 100%;
width: var(--size);
height: var(--size);
font: 12px/12px "Iosevka Web", monospace;
}
.braille > * {
white-space: pre;
}
.braille .hidden {
position: fixed;
bottom: 100%;
right: 100%;
}
.center-text {
position: fixed;
gap: 25px;
display: flex;
flex-direction: column;
border: 4px solid #f3bbae92;
text-align: left;
z-index: 10;
background-color: #241917;
width: 35rem;
top: 30%;
}
@media only screen and (max-width: 625px) {
.center-text {
left: 15px;
right: 15px;
margin-left: 0;
margin-top: 0;
max-width: 100vw;
}
}
.tabs {
display: flex;
}
.tab {
cursor: pointer;
text-align: center;
padding: 0.8em 0;
background-color: #232222;
font-weight: bold;
color: #733c2f;
padding: 4px 15px;
border-width: 0 4px 4px 0;
border-style: solid;
border-color: #f3bbae92;
font-size: 12px;
}
.tabs-nav > button:hover {
background-color: #733c2f;
color: #232222;
.tab-content {
word-wrap: break-word;
display: none;
padding: 20px 20px;
padding-top: 0px;
}
.tabs-nav > button.active {
background-color: #733c2f;
border-color: #733c2f;
color: #232222;
}
.tabs-info {
min-height: 100px;
padding-top: 1em;
background-color: #232222;
font-weight: 700;
color: #733c2f;
}
.tabs-info .tabs-info-row {
display: flex;
flex-direction: row;
align-items: center;
justify-content: stretch;
margin-bottom: 1em;
padding: 0 1em;
}
.tabs-info .tabs-info-qr > img {
.pgp-address {
word-wrap: break-word;
display: block;
border-radius: 10px;
background-color: white;
font-size: 12px !important;
background-color: #241917;
color: #fff;
border: 4px solid #f3bbae92;
padding: 5px;
}
.tabs-info .tabs-info-input {
.tab:checked ~ label {
background-color: #f3bbae;
color: #241917;
}
#linksTab, #contactTab, #dashTab {
display: none;
}
#tab-links:checked ~ #linksTab,
#tab-contact:checked ~ #contactTab,
#tab-dash:checked ~ #dashTab {
display: block;
}
.bullet-text {
font-size: 14px;
text-align: left;
z-index: 2;
position: relative;
}
.tab-content a {
color: #f3bbae;
transition: color 0.5s ease;
font-size: 14px;
}
.tab-content a:hover {
color: #ffffff;
}
.visible {
z-index: 0;
position: absolute;
right: 0;
}
ul {
list-style-type: none;
}
ul li::before {
content: "-";
display: inline-block;
width: 1em;
}
.alt-bullet {
padding-left: 1rem !important;
}
.modal[open] .modal__toggle {
left: calc(50vw + 200px);
top: calc(15vh - 5px);
position: fixed;
z-index: 11;
}
.modal[open] .modal__toggle:focus {
outline: 2px solid #00f;
}
.modal__toggle::before {
content: 'Donate';
cursor: pointer;
padding-left: 10px;
padding-right: 10px;
background-color: #241917;
color: #fff;
border: 4px solid #f3bbae92;
}
.modal[open] .modal__toggle::before {
content: '✖';
color: #fff !important;
font-size: 25px;
}
.modal__toggle {
position: relative;
list-style: none;
font-size: 14px;
font-family: Monaco, monospace;
text-align: left;
z-index: 4;
}
.modal__toggle::-webkit-details-marker {
display: none;
}
.modal__toggle:hover {
cursor: pointer;
opacity: .8;
}
.modal__background {
background-color:rgba(0, 0, 0, 0.65);
display: flex;
height: 100vh;
justify-content: center;
left: 0;
position: fixed;
top: 0;
width: 100vw;
z-index: 3;
}
.modal__body {
border: 4px solid #f3bbae92;
background: rgba(36, 25, 23, 1);
color: #f3bbae;
font-size: 1.6rem;
font-weight: 600;
padding: 20px 20px;
position: fixed;
text-align: left;
top: 15vh;
left: 50%;
transform: translateX(-50%);
width: 80%;
max-width: 400px;
z-index: 10;
word-wrap: break-word;
font-family: Monaco, monospace;
}
.modal__text {
line-height: 1.6;
margin: 0;
font-size: 12px;
}
.crypto-address {
word-wrap: break-word;
display: block;
font-size: 12px !important;
background-color: #241917;
color: #fff;
border: 4px solid #f3bbae92;
padding: 5px;
}
.links {
padding-left: 0.85rem;
}
.dashboard {
display: flex;
flex-direction: row;
align-items: center;
justify-content: stretch;
background-color: #232323;
padding: 0.75em 1em;
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 {
flex: 1;
margin-right: 1em;
overflow: hidden;
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 {
padding-left: 15px;
}
.tabs-info .tabs-info-title {
font-size: 2em;
}
.tabs-info .tabs-info-warn {
font-size: 1em;
}
.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;
z-index: 99;
}
.ping1,
.ping2,
.ping3{position:absolute;z-index:88;left:50%;top:50%;display:block;content:"";-webkit-border-radius:116px;-moz-border-radius:116px;border-radius:116px;border:2px solid #ee4633;
transition:all 0.2s ease-in-out;
-webkit-transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
-o-transition:all 0.2s ease-in-out;
width:0;
height:0;
margin-left:-2px;
margin-top:-2px;}
.dot:hover .ping1,
.dot:hover .ping2,
.dot:hover .ping3 {
transition:all 0.75s ease-out;
-webkit-transition:all 0.75s ease-out;
-moz-transition:all 0.75s ease-out;
-o-transition:all 0.75s ease-out;
}
.dot:hover .ping1 { width:116px;height:116px; margin-left:-60px;margin-top:-60px; }
.dot:hover .ping2{width:66px;height:66px;margin-left:-35px;margin-top:-35px;
-moz-transition-delay:0.2s;
-webkit-transition-delay:0.2s;
-o-transition-delay:0.2s;
transition-delay:0.2s;}
.dot:hover .ping3{width:40px;height:40px;margin-left:-22px;margin-top:-22px;
-moz-transition-delay:0.5s;
-webkit-transition-delay:0.5s;
-o-transition-delay:0.5s;
transition-delay:0.5s;}
.dot{position:absolute;z-index:99;width:14px;height:14px;background:#ee4633;-webkit-border-radius:12px;-moz-border-radius:12px;border-radius:12px;cursor:pointer;}
#map{position:relative;margin:5% auto;width:638px;}
#portland{left:33px;top:50px;}
#palo_alto{left:17px;top:181px;}
#scottsdale {left:115px;top:246px;}
#san_antonio{left:296px;top:311px;}