diff --git a/public/index.html b/public/index.html index e03e124..b349bee 100644 --- a/public/index.html +++ b/public/index.html @@ -2,7 +2,6 @@ - Mastodon Your Mycelial Network @@ -22,92 +21,46 @@
-

Myco.Systems

- +

Myco.Systems

+
-
- -
-
-
-
-
-
-
-
-
+ + +
Donate
+ +
+
+ +
+
+
+ wallet.name +
+
+
+
+
-
-
-
-
-

Blog

-

Description

-
-
- -
-

Hey there! Join us at Web.Myco.Systems - Your Gateway to Open-Source!

-

Our client portal isn't just about transactions; it's about - building a relationship that caters specifically to your requirements. Explore our services, - containerized stacks, personal cloud support, or just send us an email so we can get in - touch!

-
-
-

Explore:

- - - -
-

Footer text goes here.

-
-
-
+
+ Address: + +
-
- -
Donate
- -
-
- -
-
-
- wallet.name -
-
-
-
-
-
-
- Address: - - -
-
-
-
-
- - +
+ +
+ + + \ No newline at end of file diff --git a/public/scripts.js b/public/scripts.js index 0f56719..f85745a 100644 --- a/public/scripts.js +++ b/public/scripts.js @@ -1,4 +1,5 @@ -document.addEventListener('DOMContentLoaded', function() { +// + 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); + +// + + +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; + +// + +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); +// + +// + +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); +} \ No newline at end of file diff --git a/public/styles.css b/public/styles.css index 41476f8..0673eb5 100644 --- a/public/styles.css +++ b/public/styles.css @@ -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; +} \ No newline at end of file