Mirror/brk
1
0
Fork 0
mirror of https://github.com/bitcoinresearchkit/brk.git synced 2026-04-30 01:20:00 -07:00
Code Issues Packages Projects Releases Wiki Activity
Files
26a3b0f5e8d0b6cd619e299edb013efd74b6ba9f
brk/website/assets/logo/demo.html
nym21 fd2b93367d global: snap
2026-04-18 17:23:12 +02:00

651 lines
39 KiB
HTML
Raw Blame History

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>bitview logo</title>
<style>
/* Website's Lilex (the site's --font-mono). Only the upright
weights are used — no italic text on the cube. */
@font-face {
font-family: Lilex;
src: url("../fonts/Lilex[wght]-v2_620.woff2") format("woff2");
font-weight: 100 700;
font-display: block;
}
/* ---------------------------------------------------------------
All tunable knobs in one place. Each cube inherits from :root;
individual cubes override --fill via inline style (see JS below).
Geometry constants match website/styles/panes/explorer.css.
--------------------------------------------------------------- */
:root {
color-scheme: light dark;
--cube: 4.5rem; /* edge size (matches explorer) */
/* Color palette — verbatim from website/styles/variables.css */
--orange: oklch(67.64% 0.191 44.41);
--white: oklch(95% 0 0);
--black: oklch(15% 0 0);
--light-gray: oklch(90% 0 0);
--dark-gray: oklch(20% 0 0);
--border-color: light-dark(var(--light-gray), var(--dark-gray));
--background-color: light-dark(var(--white), var(--black));
--fill: 0.5; /* liquid ratio, 0..1 */
--empty-alpha: 0.4; /* glass opacity */
--face-step: 0.033; /* lightness delta between faces */
--iso-scale: 0.866; /* cos(30°), isometric Y squash */
--ox: 0.3; /* cube X origin offset */
--oy: 0.6; /* cube Y origin offset */
/* Font sizes — verbatim from website/styles/variables.css */
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
}
/* ---------------------------------------------------------------
Page chrome
--------------------------------------------------------------- */
html,
body {
margin: 0;
padding: 0;
}
body {
font:
14px/1.4 -apple-system,
system-ui,
sans-serif;
color: #111;
background: #f7f8fa;
}
.wrap {
max-width: 1440px;
margin: 0 auto;
padding: 40px 24px 80px;
}
section {
margin: 0 0 12px;
}
.row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
}
.tile {
position: relative;
aspect-ratio: 1;
border-radius: 14px;
display: grid;
place-items: center;
overflow: hidden;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.tile .label {
position: absolute;
left: 10px;
bottom: 8px;
font:
11px/1.4 ui-monospace,
SFMono-Regular,
Menlo,
Consolas,
monospace;
color: rgba(0, 0, 0, 0.55);
background: rgba(255, 255, 255, 0.7);
padding: 2px 6px;
border-radius: 4px;
backdrop-filter: blur(6px);
}
/* Force color-scheme on a tile so light-dark() inside the cube
resolves deterministically (matches how the website's explorer
cube adapts between light and dark modes). */
.tile.scheme-light {
color-scheme: light;
}
.tile.scheme-dark {
color-scheme: dark;
color: #e8e8ea;
}
.tile.scheme-dark .label {
color: rgba(255, 255, 255, 0.75);
background: rgba(0, 0, 0, 0.4);
}
/* bg-auto picks up the website's --white / --black via
--background-color, flipping with the tile's color-scheme. */
.bg-auto {
background: var(--background-color);
}
.bg-paper {
background: light-dark(#f0ece3, #2a2823);
}
.bg-gradient {
background: linear-gradient(
135deg,
oklch(70% 0.16 260),
oklch(72% 0.19 330)
);
}
.bg-image-1 {
background: url("https://picsum.photos/seed/brk1/440/440") center/cover;
}
.bg-image-2 {
background: url("https://picsum.photos/seed/brk2/440/440") center/cover;
}
/* ---------------------------------------------------------------
Logo slot: centers the cube by placing V2 (the isometric center
of the silhouette's bounding box) at the slot center.
--------------------------------------------------------------- */
.logo-slot {
position: relative;
width: 160px;
height: 160px;
}
.logo-slot .cube {
position: absolute;
left: calc(50% - var(--cube) * var(--iso-scale) * (var(--ox) + 1));
top: calc(
50% - var(--cube) *
(0.5 * (var(--ox) + 1) + var(--oy) / var(--iso-scale))
);
}
/* ---------------------------------------------------------------
Cube: opaque liquid (liquid) inside a translucent glass shell (glass).
Every face shares the same transform template (see .cube .face);
each face rule only declares the variables that shape it:
--fc base color (glass wraps in alpha)
--orient rotate + skew pair for the face plane
--x, --y translate in cube-edge units
--sx optional X mirror (-1 on rear-left)
--sy vertical scale — full rhombus (iso) for top/bottom,
role-defined (glass-y or liquid-y) for side faces
Role (glass / liquid) sets the Y-offset that stacks the liquid below
the empty glass portion, and the side-face Y-scale. Top/bottom
override --sy back to full iso since they're always full rhombi.
--------------------------------------------------------------- */
.cube {
--face-color: var(--orange);
--face-right-color: light-dark(
oklch(from var(--face-color) calc(l - var(--face-step) * 2) c h),
var(--face-color)
);
--face-left-color: light-dark(
oklch(from var(--face-color) calc(l - var(--face-step)) c h),
oklch(from var(--face-color) calc(l + var(--face-step)) c h)
);
--face-top-color: light-dark(
var(--face-color),
oklch(from var(--face-color) calc(l + var(--face-step) * 2) c h)
);
--face-bottom-color: oklch(
from var(--face-color) calc(l - var(--face-step) * 3) c h
);
--liquid-y: calc(var(--iso-scale) * var(--fill));
--glass-y: calc(var(--iso-scale) * (1 - var(--fill)));
--is-full: round(down, calc(var(--fill) + 0.0025), 1);
--is-empty: round(down, calc(1.0025 - var(--fill)), 1);
position: relative;
width: var(--cube);
height: var(--cube);
}
.cube .face {
position: absolute;
transform-origin: 0 0;
box-sizing: border-box;
width: var(--cube);
height: var(--cube);
transform: var(--orient)
translate(calc(var(--cube) * var(--x)), calc(var(--cube) * var(--y)))
scale(var(--sx, 1), var(--sy));
}
/* Roles — three sibling layers per face, each a full .face with its
own transform:
.liquid opaque liquid, lower half (scales with fill)
.glass translucent glass shell, upper half
.text full-face overlay for text content (transparent bg)
The text layer spans the whole face so content can be centered
on the full rhombus regardless of fill level. */
.cube .liquid {
background: var(--fc);
opacity: calc(1 - var(--is-empty));
--sy: var(--liquid-y);
--y-offset: var(--glass-y);
}
.cube .glass {
background: oklch(from var(--fc) l c h / var(--empty-alpha));
--sy: var(--glass-y);
--y-offset: 0;
}
.cube .glass.top {
opacity: calc(1 - var(--is-full));
}
.cube .text {
--sy: var(--iso-scale);
--y-offset: 0;
pointer-events: none;
padding: 0.1rem;
/* Lilex is the site's --font-mono; xs size matches explorer.css. */
font-family: Lilex, ui-monospace, monospace;
font-size: var(--font-size-xs);
font-weight: 450;
font-variation-settings: "wght" 450;
/* Text contrasts with the cube, not the tile: light cube → black
text, dark cube → white text. Resolved via the cube's own
color-scheme (set per-variant in makeLogo). */
color: light-dark(var(--black), var(--white));
}
.cube .text.top,
.cube .text.right {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.cube .text.top {
justify-content: center;
text-transform: uppercase;
}
.cube .text.right {
justify-content: space-between;
}
.cube .text p {
margin: 0;
}
.cube .text .height {
font-size: var(--font-size-sm);
font-weight: normal;
}
/* Pool line: raw (un-tinted) logo + miner name, ellipsis-clipped.
Per-pool `.pool img.<slug> { content: url(...) }` rules below
replace the displayed image via the CSS content property. */
.cube .pool {
display: flex;
align-items: center;
justify-content: center;
gap: 0.1em;
}
.cube .pool img {
width: 1.25em;
height: 1.25em;
flex-shrink: 0;
}
.cube .pool span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 1;
}
/* Long lines intentional — inlined base64 of website/assets/pools/*.svg. */
.cube .pool img.foundryusa {
content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGlkPSJiIiBkYXRhLW5hbWU9IkxheWVyIDIiIHN0eWxlPSJ6b29tOiAxOyIgdmlld0JveD0iMCAwIDMyIDc2Ij48ZGVmcz48c3R5bGU+LmQgeyBmaWxsOiAjZmZmOyB9IC5lIHsgZmlsbDogI2ZmODIwMDsgfTwvc3R5bGU+PC9kZWZzPjxnIGlkPSJjIiBkYXRhLW5hbWU9ImIiPjxjaXJjbGUgY2xhc3M9ImUiIGN4PSIyNCIgY3k9IjMyIiByPSI4Ii8+PGNpcmNsZSBjbGFzcz0iZSIgY3g9IjI0IiBjeT0iNTYiIHI9IjgiLz48Y2lyY2xlIGNsYXNzPSJlIiBjeD0iOCIgY3k9IjY4IiByPSI4Ii8+PGc+PGNpcmNsZSBjbGFzcz0iZCIgY3g9IjI0IiBjeT0iOCIgcj0iOCIvPjxjaXJjbGUgY2xhc3M9ImQiIGN4PSI4IiBjeT0iMjAiIHI9IjgiLz48Y2lyY2xlIGNsYXNzPSJkIiBjeD0iOCIgY3k9IjQ0IiByPSI4Ii8+PC9nPjwvZz48L3N2Zz4=");
}
.cube .pool img.antpool {
content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI0NiIgdmlld0JveD0iMCAwIDQwIDQ2IiB2ZXJzaW9uPSIxLjEiPjxwYXRoIGQ9IiIgc3Ryb2tlPSJub25lIiBmaWxsPSIjMTBhYzdjIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkPSJNIDEwIDE2Ljc2OCBMIDEuNTAwIDMyLjQ4OSAxLjE4NCAzNC43NDQgTCAwLjg2NyAzNyA1LjA4NyAzNyBMIDkuMzA3IDM3IDE0LjczNiAzMS44NjUgTCAyMC4xNjUgMjYuNzMxIDI1LjM2NCAzMS44NjUgTCAzMC41NjMgMzcgMzQuNzIyIDM3IEwgMzguODgyIDM3IDM5LjUxMCAzNS45ODMgTCA0MC4xMzkgMzQuOTY2IDMwLjkwMyAxNy45ODMgTCAyMS42NjggMSAyMC4wODQgMS4wMjQgTCAxOC41MDAgMS4wNDggMTAgMTYuNzY4IE0gMTcuNjY4IDMzLjA0NiBMIDE1IDM1LjE0NSAxNSAzNi43MDUgTCAxNSAzOC4yNjQgMTcuMDgyIDQxLjYzMiBMIDE5LjE2MyA0NSAyMC4zODIgNDUgTCAyMS42MDEgNDUgMjMuNzMwIDQwLjYxOSBMIDI1Ljg1OCAzNi4yMzggMjMuMDk3IDMzLjU5MyBMIDIwLjMzNiAzMC45NDggMTcuNjY4IDMzLjA0NiIgc3Ryb2tlPSJub25lIiBmaWxsPSIjMGNhYzdjIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=");
}
.cube .pool img.viabtc {
content: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iODBweCIgaGVpZ2h0PSI4MHB4IiB2aWV3Qm94PSIwIDAgODAgODAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+VmlhQlRDPC90aXRsZT4KICAgIDxnIGlkPSLpobXpnaItMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9IueUu+advyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTE4Ni4wMDAwMDAsIC0xODYzLjAwMDAwMCkiIGZpbGwtcnVsZT0ibm9uemVybyI+CiAgICAgICAgICAgIDxnIGlkPSJWaWFCVEMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE4Ni4wMDAwMDAsIDE4NjMuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iQi1Db3B5LTEzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxLjAwMDAwMCwgMC4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNNjIuMDcxOTQyNCwxNy44NDE3MjY2IEw2MS44MTI5NDk2LDE4LjE1ODI3MzQgTDYxLjU1Mzk1NjgsMTcuODcwNTAzNiBDNTYuNTQ2NzYyNiwxMi42MzMwOTM1IDUwLjA0MzE2NTUsOS4yOTQ5NjQwMyA0Mi44NDg5MjA5LDguNDAyODc3NyBMNDIuNTMyMzc0MSw4LjM3NDEwMDcyIEw0Mi41MzIzNzQxLDEuNjI5MzkyMDZlLTE1IEw0Mi45MDY0NzQ4LDAuMDI4Nzc2OTc4NCBDNTMuMTUxMDc5MSwxLjA5MzUyNTE4IDYyLjM4ODQ4OTIsNi4wMTQzODg0OSA2OC45NDk2NDAzLDEzLjc1NTM5NTcgTDY5LjM4MTI5NSwxNC4yNzMzODEzIEw2OC43MTk0MjQ1LDE0LjMzMDkzNTMgQzY2LjEwMDcxOTQsMTQuNTMyMzc0MSA2My43MTIyMzAyLDE1Ljc5ODU2MTIgNjIuMDcxOTQyNCwxNy44NDE3MjY2IFoiIGlkPSJTaGFwZV80XyIgZmlsbD0iIzUyQ0JDQSI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik03Ni41NzU1Mzk2LDMwLjA3MTk0MjQgTDc3LjAwNzE5NDIsMjkuNTgyNzMzOCBMNzcuMTUxMDc5MSwzMC4yMTU4MjczIEM3Ny44MTI5NDk2LDMyLjk3ODQxNzMgNzguMTU4MjczNCwzNS44ODQ4OTIxIDc4LjE1ODI3MzQsMzguOTY0MDI4OCBDNzguMTU4MjczNCw0NS4wMDcxOTQyIDc2LjcxOTQyNDUsNTAuOTkyODA1OCA3NC4wMTQzODg1LDU2LjM3NDEwMDcgTDczLjg0MTcyNjYsNTYuNzE5NDI0NSBMNjYuOTkyODA1OCw1MS45MTM2NjkxIEw2Ny4xMDc5MTM3LDUxLjY1NDY3NjMgQzY4LjkyMDg2MzMsNDcuNzk4NTYxMiA2OS44OTkyODA2LDQzLjQyNDQ2MDQgNjkuODk5MjgwNiwzOC45NjQwMjg4IEM2OS44OTkyODA2LDM3LjE3OTg1NjEgNjkuNzU1Mzk1NywzNS40NTMyMzc0IDY5LjQzODg0ODksMzMuNjk3ODQxNyBMNjkuMzgxMjk1LDMzLjMyMzc0MSBMNjkuNzg0MTcyNywzMy4yOTQ5NjQgQzcyLjQ2MDQzMTcsMzMuMTUxMDc5MSA3NC44Nzc2OTc4LDMyIDc2LjU3NTUzOTYsMzAuMDcxOTQyNCBaIiBpZD0iU2hhcGVfNV8iIGZpbGw9IiM1MkNCQ0EiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNOC4yODc3Njk3OCwzOC45NjQwMjg4IEM4LjI4Nzc2OTc4LDQzLjQyNDQ2MDQgOS4yMzc0MTAwNyw0Ny43OTg1NjEyIDExLjA3OTEzNjcsNTEuNjU0Njc2MyBMMTEuMTk0MjQ0Niw1MS45MTM2NjkxIEw0LjMxNjU0Njc2LDU2LjcxOTQyNDUgTDQuMTQzODg0ODksNTYuMzc0MTAwNyBDMS40MTAwNzE5NCw1MS4wNzkxMzY3IDMuMjc0NzU4NTZlLTE1LDQ1LjE3OTg1NjEgMy4yNzQ3NTg1NmUtMTUsMzguOTY0MDI4OCBDMy4yNzQ3NTg1NmUtMTUsMzYuMjg3NzY5OCAwLjI4Nzc2OTc4NCwzMy42MTE1MTA4IDAuODM0NTMyMzc0LDMwLjkwNjQ3NDggTDAuOTQ5NjQwMjg4LDMwLjMwMjE1ODMgTDEuNDEwMDcxOTQsMzAuNzA1MDM2IEMzLjE2NTQ2NzYzLDMyLjMxNjU0NjggNS41NTM5NTY4MywzMy4yNjYxODcxIDcuOTQyNDQ2MDQsMzMuMjY2MTg3MSBMOC44MDU3NTU0LDMzLjI2NjE4NzEgTDguNzQ4MjAxNDQsMzMuNjY5MDY0NyBDOC40MzE2NTQ2OCwzNS40NTMyMzc0IDguMjg3NzY5NzgsMzcuMTc5ODU2MSA4LjI4Nzc2OTc4LDM4Ljk2NDAyODggWiIgaWQ9IlNoYXBlXzZfIiBmaWxsPSIjNTJDQkNBIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTE2LjI1ODk5MjgsMTguMzAyMTU4MyBMMTUuOTcxMjIzLDE4LjYxODcwNSBMMTUuNzEyMjMwMiwxOC4yNzMzODEzIEMxNC4yMTU4MjczLDE2LjIwMTQzODggMTEuOTQyNDQ2LDE0LjczMzgxMjkgOS40MTAwNzE5NCwxNC4zMDIxNTgzIEw4LjgwNTc1NTQsMTQuMjE1ODI3MyBMOS4xNzk4NTYxMiwxMy43NTUzOTU3IEMxNS42ODM0NTMyLDUuOTg1NjExNTEgMjUuMDM1OTcxMiwxLjAwNzE5NDI0IDM1LjI1MTc5ODYsMC4wMjg3NzY5Nzg0IEwzNS42MjU4OTkzLDQuMTUzMzUyMzJlLTE2IEwzNS42MjU4OTkzLDguMzc0MTAwNzIgTDM1LjMwOTM1MjUsOC40MDI4Nzc3IEMyNy45NzEyMjMsOS4yOTQ5NjQwMyAyMS4xNTEwNzkxLDEyLjg2MzMwOTQgMTYuMjU4OTkyOCwxOC4zMDIxNTgzIFoiIGlkPSJTaGFwZV83XyIgZmlsbD0iIzUyQ0JDQSI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xNC43NjI1ODk5LDU3Ljg3MDUwMzYgTDE0Ljk2NDAyODgsNTguMTI5NDk2NCBDMTguOTA2NDc0OCw2My4wNzkxMzY3IDI0LjI4Nzc2OTgsNjYuNzA1MDM2IDMwLjI3MzM4MTMsNjguNDg5MjA4NiBMMzAuNjQ3NDgyLDY4LjYwNDMxNjUgTDMwLjQ3NDgyMDEsNjguOTc4NDE3MyBDMjkuODcwNTAzNiw3MC4yNzMzODEzIDI5LjUyNTE3OTksNzEuNzQxMDA3MiAyOS41MjUxNzk5LDczLjE1MTA3OTEgQzI5LjUyNTE3OTksNzQuMjczMzgxMyAyOS43MjY2MTg3LDc1LjM2NjkwNjUgMzAuMTAwNzE5NCw3Ni40NjA0MzE3IEwzMC4zMzA5MzUzLDc3LjA2NDc0ODIgTDI5LjY5Nzg0MTcsNzYuOTIwODYzMyBDMjEuMDY0NzQ4Miw3NC43OTEzNjY5IDEzLjQ2NzYyNTksNjkuODEyOTQ5NiA4LjE3MjY2MTg3LDYyLjkwNjQ3NDggTDcuOTQyNDQ2MDQsNjIuNjE4NzA1IEwxNC43NjI1ODk5LDU3Ljg3MDUwMzYgWiIgaWQ9IlNoYXBlXzhfIiBmaWxsPSIjNTJDQkNBIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTQ3LjY1NDY3NjMsNjguOTc4NDE3MyBMNDcuNDgyMDE0NCw2OC42MDQzMTY1IEw0Ny44NTYxMTUxLDY4LjQ4OTIwODYgQzUzLjg3MDUwMzYsNjYuNzA1MDM2IDU5LjIyMzAyMTYsNjMuMDc5MTM2NyA2My4xNjU0Njc2LDU4LjEyOTQ5NjQgTDYzLjM2NjkwNjUsNTcuODcwNTAzNiBMNzAuMTU4MjczNCw2Mi41ODk5MjgxIEw2OS45MjgwNTc2LDYyLjg3NzY5NzggQzY0LjU3NTUzOTYsNjkuNzg0MTcyNyA1Ni45NDk2NDAzLDc0Ljc5MTM2NjkgNDguNDAyODc3Nyw3Ni44OTIwODYzIEw0Ny43Njk3ODQyLDc3LjAzNTk3MTIgTDQ4LDc2LjQzMTY1NDcgQzQ4LjM3NDEwMDcsNzUuMzM4MTI5NSA0OC41NzU1Mzk2LDc0LjI0NDYwNDMgNDguNTc1NTM5Niw3My4xMjIzMDIyIEM0OC42MDQzMTY1LDcxLjc0MTAwNzIgNDguMjU4OTkyOCw3MC4yNzMzODEzIDQ3LjY1NDY3NjMsNjguOTc4NDE3MyBaIiBpZD0iU2hhcGVfOV8iIGZpbGw9IiM1MkNCQ0EiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNNjkuNDY3NjI1OSwzMC42MTg3MDUgQzY1LjY5Nzg0MTcsMzAuNjE4NzA1IDYyLjYxODcwNSwyNy41NjgzNDUzIDYyLjYxODcwNSwyMy43Njk3ODQyIEM2Mi42MTg3MDUsMTkuOTcxMjIzIDY1LjY2OTA2NDcsMTYuOTIwODYzMyA2OS40Njc2MjU5LDE2LjkyMDg2MzMgQzczLjIzNzQxMDEsMTYuOTIwODYzMyA3Ni4zMTY1NDY4LDE5Ljk3MTIyMyA3Ni4zMTY1NDY4LDIzLjc2OTc4NDIgQzc2LjMxNjU0NjgsMjcuNTY4MzQ1MyA3My4yMzc0MTAxLDMwLjYxODcwNSA2OS40Njc2MjU5LDMwLjYxODcwNSBaIE03Ljk0MjQ0NjA0LDMwLjYxODcwNSBDNC4xNzI2NjE4NywzMC42MTg3MDUgMS4wOTM1MjUxOCwyNy41NjgzNDUzIDEuMDkzNTI1MTgsMjMuNzY5Nzg0MiBDMS4wOTM1MjUxOCwxOS45NzEyMjMgNC4xNDM4ODQ4OSwxNi45MjA4NjMzIDcuOTQyNDQ2MDQsMTYuOTIwODYzMyBDMTEuNzQxMDA3MiwxNi45MjA4NjMzIDE0Ljc5MTM2NjksMTkuOTcxMjIzIDE0Ljc5MTM2NjksMjMuNzY5Nzg0MiBDMTQuNzkxMzY2OSwyNy41NjgzNDUzIDExLjcxMjIzMDIsMzAuNjE4NzA1IDcuOTQyNDQ2MDQsMzAuNjE4NzA1IFogTTM5LjA3OTEzNjcsODAgQzM1LjMwOTM1MjUsODAgMzIuMjMwMjE1OCw3Ni45NDk2NDAzIDMyLjIzMDIxNTgsNzMuMTUxMDc5MSBDMzIuMjMwMjE1OCw2OS4zNTI1MTggMzUuMzA5MzUyNSw2Ni4zMDIxNTgzIDM5LjA3OTEzNjcsNjYuMzAyMTU4MyBDNDIuODQ4OTIwOSw2Ni4zMDIxNTgzIDQ1LjkyODA1NzYsNjkuMzUyNTE4IDQ1LjkyODA1NzYsNzMuMTUxMDc5MSBDNDUuOTI4MDU3Niw3Ni45NDk2NDAzIDQyLjg0ODkyMDksODAgMzkuMDc5MTM2Nyw4MCBaIiBpZD0iQ29tYmluZWQtU2hhcGUiIGZpbGw9IiM1MkNCQ0EiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNNDguNjYxODcwNSwzMi40MzE2NTQ3IEM0Ny40NTMyMzc0LDM3LjM4MTI5NSAzOS44NTYxMTUxLDM0Ljg0ODkyMDkgMzcuMzUyNTE4LDM0LjI0NDYwNDMgTDM5LjU2ODM0NTMsMjUuNTgyNzMzOCBDNDEuOTg1NjExNSwyNi4xMjk0OTY0IDQ5Ljg3MDUwMzYsMjcuMzM4MTI5NSA0OC42NjE4NzA1LDMyLjQzMTY1NDcgTDQ4LjY2MTg3MDUsMzIuNDMxNjU0NyBaIE00Ny4yODA1NzU1LDQ2LjUwMzU5NzEgQzQ1Ljg5OTI4MDYsNTEuOTcxMjIzIDM2LjgwNTc1NTQsNDkuMDA3MTk0MiAzMy44NDE3MjY2LDQ4LjI1ODk5MjggTDM2LjI1ODk5MjgsMzguNjc2MjU5IEMzOS4xNjU0Njc2LDM5LjQyNDQ2MDQgNDguNjYxODcwNSw0MC44NjMzMDk0IDQ3LjI4MDU3NTUsNDYuNTAzNTk3MSBMNDcuMjgwNTc1NSw0Ni41MDM1OTcxIFogTTQ4LjUxNzk4NTYsMjIuNDc0ODIwMSBMNTAuMjczMzgxMywxNS4zMzgxMjk1IEw0NS45NTY4MzQ1LDE0LjE4NzA1MDQgTDQ0LjIwMTQzODgsMjEuMTc5ODU2MSBDNDMuMDUwMzU5NywyMC44NjMzMDk0IDQxLjkyODA1NzYsMjAuNjYxODcwNSA0MC43MTk0MjQ1LDIwLjM0NTMyMzcgTDQyLjQ3NDgyMDEsMTMuMzUyNTE4IEwzOC4xNTgyNzM0LDEyLjI4Nzc2OTggTDM2LjM0NTMyMzcsMTkuNDI0NDYwNCBDMzUuNDI0NDYwNCwxOS4xOTQyNDQ2IDM0LjQ0NjA0MzIsMTguOTY0MDI4OCAzMy41MjUxNzk5LDE4LjgyMDE0MzkgTDI3LjUxMDc5MTQsMTcuMjk0OTY0IEwyNi4zNTk3MTIyLDIxLjkyODA1NzYgTDI5LjU1Mzk1NjgsMjIuNjc2MjU5IEMzMS4zMDkzNTI1LDIzLjEzNjY5MDYgMzEuNTk3MTIyMywyNC4yNTg5OTI4IDMxLjU5NzEyMjMsMjUuMTc5ODU2MSBMMjkuNTUzOTU2OCwzMy4yOTQ5NjQgQzI5LjY5Nzg0MTcsMzMuMzgxMjk1IDI5Ljg3MDUwMzYsMzMuMzgxMjk1IDMwLjAxNDM4ODUsMzMuNDM4ODQ4OSBDMjkuODcwNTAzNiwzMy4zNTI1MTggMjkuNjk3ODQxNywzMy4zNTI1MTggMjkuNTUzOTU2OCwzMy4yOTQ5NjQgTDI2LjcwNTAzNiw0NC44MDU3NTU0IEMyNi40NzQ4MjAxLDQ1LjMyMzc0MSAyNS45NTY4MzQ1LDQ2LjE4NzA1MDQgMjQuNzE5NDI0NSw0NS44NzA1MDM2IEMyNC44MDU3NTU0LDQ1Ljk1NjgzNDUgMjEuNTI1MTc5OSw0NS4xMjIzMDIyIDIxLjUyNTE3OTksNDUuMTIyMzAyMiBMMTkuMzA5MzUyNSw1MC4xMjk0OTY0IEwyNC45MjA4NjMzLDUxLjUxMDc5MTQgQzI1Ljk4NTYxMTUsNTEuODI3MzM4MSAyNi45NjQwMjg4LDUyLjAyODc3NyAyOC4wMjg3NzcsNTIuMzQ1MzIzNyBMMjYuMjE1ODI3Myw1OS41NjgzNDUzIEwzMC41MzIzNzQxLDYwLjYzMzA5MzUgTDMyLjM0NTMyMzcsNTMuNDk2NDAyOSBDMzMuNDk2NDAyOSw1My44MTI5NDk2IDM0LjcwNTAzNiw1NC4xMDA3MTk0IDM1LjgyNzMzODEsNTQuNDE3MjY2MiBMMzQuMDE0Mzg4NSw2MS40Njc2MjU5IEwzOC4zMzA5MzUzLDYyLjUzMjM3NDEgTDQwLjE0Mzg4NDksNTUuMzA5MzUyNSBDNDcuNTk3MTIyMyw1Ni42OTA2NDc1IDUzLjEyMjMwMjIsNTYuMTQzODg0OSA1NS40ODIwMTQ0LDQ5LjQ2NzYyNTkgQzU3LjM4MTI5NSw0NC4wODYzMzA5IDU1LjM5NTY4MzUsNDAuODkyMDg2MyA1MS40NTMyMzc0LDM4LjkwNjQ3NDggQzU0LjQxNzI2NjIsMzguMzAyMTU4MyA1Ni41NDY3NjI2LDM2LjQwMjg3NzcgNTcuMTUxMDc5MSwzMi41MTc5ODU2IEM1Ny45ODU2MTE1LDI3LjE5NDI0NDYgNTMuOTg1NjExNSwyNC4zNzQxMDA3IDQ4LjUxNzk4NTYsMjIuNDc0ODIwMSBaIiBpZD0iU2hhcGVfMTBfIiBmaWxsPSIjRkZCOTAwIj48L3BhdGg+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==");
}
.cube .pool img.f2pool {
content: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iODBweCIgaGVpZ2h0PSI4MHB4IiB2aWV3Qm94PSIwIDAgODAgODAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+RjJQb29sPC90aXRsZT4KICAgIDxkZWZzPgogICAgICAgIDxwb2x5Z29uIGlkPSJwYXRoLTEiIHBvaW50cz0iMCAwIDgwIDAgODAgODAuMDAwMjk2MyAwIDgwLjAwMDI5NjMiPjwvcG9seWdvbj4KICAgIDwvZGVmcz4KICAgIDxnIGlkPSLpobXpnaItMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9IueUu+advyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTE4Ni4wMDAwMDAsIC05NTcuMDAwMDAwKSI+CiAgICAgICAgICAgIDxnIGlkPSJGMlBvb2wiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE4Ni4wMDAwMDAsIDk1Ny4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnIGlkPSLnvJbnu4QiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMDAwMDAwLCAtMC4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICA8Zz4KICAgICAgICAgICAgICAgICAgICAgICAgPG1hc2sgaWQ9Im1hc2stMiIgZmlsbD0id2hpdGUiPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjcGF0aC0xIj48L3VzZT4KICAgICAgICAgICAgICAgICAgICAgICAgPC9tYXNrPgogICAgICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iQ2xpcC0yIj48L2c+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik00MC4wMDAxNDgxLDAgQzE3LjkwODIxNDUsMCAwLDE3LjkwODIxNDUgMCw0MC4wMDAxNDgxIEMwLDYyLjA5MjA4MTggMTcuOTA4MjE0NSw4MC4wMDAyOTYzIDQwLjAwMDE0ODEsODAuMDAwMjk2MyBDNjIuMDkyMDgxOCw4MC4wMDAyOTYzIDgwLjAwMDI5NjMsNjIuMDkyMDgxOCA4MC4wMDAyOTYzLDQwLjAwMDE0ODEgQzgwLjAwMDI5NjMsMTcuOTA4MjE0NSA2Mi4wOTIwODE4LDAgNDAuMDAwMTQ4MSwwIiBpZD0iRmlsbC0xIiBmaWxsPSIjNDA2MkZGIiBtYXNrPSJ1cmwoI21hc2stMikiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTUwLjQ4ODQ4MzMsNjMuMDgxODYzMyBDNDMuNjI5MTk4Niw1OS4wODE4NDg1IDQzLjM3NzM0NTgsNTEuMDk2NjMzNyA0My4zNzczNDU4LDUxLjA5NjYzMzcgQzQyLjc4MDMwNjYsNTUuNDQzMzE2NSA0My45MDc3MTgyLDU5Ljg1MDc0MDIgNDYuNTE4MDk4Miw2My4zNzgxNjA3IEM0NC41MzU4Njg3LDYzLjM5Mjk3NTUgNDIuNTU2NjAyMSw2My4yNjQwODYyIDQwLjU5MjE1MDMsNjIuOTkxNDkyNiBDMzcuMjIwMjg2LDY1Ljc2MzM1NDcgMzIuNzc0MzQzNiw2Ni44NTIyNDc2IDI4LjUwMzIxNjcsNjUuOTU0NDY2NSBDMzAuNjkyODU0NCw2NS4wNDc3OTY1IDMxLjg3NjU2MjUsNjIuNjY0MDgzOSAzMS4yNzM1OTczLDYwLjM3MDc0MjEgQzIyLjA1ODc0ODQsNTUuNzkyOTQ3NCAxNy44MzY1MTA1LDQ1LjgwNzcyNTIgMjEuNDM2NTIzOCwzNC41NDg0MjQzIEMyNC4wNzY1MzM2LDM3LjQwMDI4NjcgMjcuNDY0Njk0MywzOS40NTM2Mjc2IDMxLjIxNDMzNzgsNDAuNDc0MzcyMSBDMzcuODY2MjE0Myw0Mi4yMjI1MjY4IDQxLjQzNjU5NzksMzcuMjE1MTAwOCAzOC41MDMyNTM3LDMyLjk3ODA0ODEgQzQ1LjQ1MTQyNzYsMzMuNzMzNjA2NCA2MC40NTg4OTA2LDQzLjczMjE2MiA2MS41NDAzNzYxLDU4LjE2MzMyNjUgQzU4LjUzODg4MzUsNjEuMDQxODU1NyA1NC42NDU1MzU3LDYyLjgxMjIzMjYgNTAuNTAzMjk4Miw2My4xODU1Njc0IEw1MC40ODg0ODMzLDYzLjA4MTg2MzMgWiBNMjcuOTQwMjUxNiwyNC41NjMyMDIxIEMyNy45NDAyNTE2LDI0LjU2MzIwMjEgMjYuOTYyNDcwMiwzNS4yMTUwOTM0IDMyLjA3MzYwMDMsMzcuODk2NTg0OCBDMzIuMDczNjAwMywzNy44OTY1ODQ4IDI4LjQ4ODQwMTgsMzkuMzc4MDcxOCAyMS43MDMxOTE1LDMzLjU0MTAxMzEgQzIyLjgwMjQ1NDgsMjkuOTczNTkyNSAyNC45NjI0NjI4LDI2LjgyNjkxNDIgMjcuODk1ODA3LDI0LjUxODc1NzUgTDI3Ljk0MDI1MTYsMjQuNTYzMjAyMSBaIE0zNy41ODQ3MzE4LDEyLjI4MTY3NTEgQzM3LjU4NDczMTgsMTIuMjgxNjc1MSAzNi4yODEwMjMzLDIxLjE3MDU5NjkgNDEuNzE4MDgwNCwyNS4wMDc2NDgyIEMzOC4yMzY1ODYxLDI2Ljc0MDk4NzkgMzAuODQzOTY2MSwyMi45MzM1NjY0IDI4Ljc2OTg4NDMsMjMuNTI2MTYxMiBDMzAuMzE1MDc1MiwxOC44MzEzMjkgMzMuNDYxNzUzNiwxNC44Mjk4MzI3IDM3LjY1ODgwNjEsMTIuMjIyNDE1NiBMMzcuNTg0NzMxOCwxMi4yODE2NzUxIFogTTUyLjM5OTYwMTUsNTQuMzU1OTA1IEM1Mi40NDk5NzIsNTUuMzIwMzUzIDUzLjI3MDcxNTgsNTYuMDYxMDk2NSA1NC4yMzUxNjM4LDU2LjAxMjIwNzUgQzU1LjA4NTUzNzQsNTUuOTY3NzYyOCA1NS43ODAzNTQ3LDU1LjMxODg3MTYgNTUuODgxMDk1OSw1NC40NzI5NDI1IEw1NS44ODEwOTU5LDU0LjM1NTkwNSBDNTUuNzkyMjA2Niw1My4zOTQ0MiA1NC45NDAzNTE2LDUyLjY4NjI2OTIgNTMuOTc4ODY2Niw1Mi43NzUxNTg0IEM1My4xNDE4MjY1LDUyLjg1MzY3NzIgNTIuNDc2NjM4OCw1My41MTczODM0IDUyLjM5OTYwMTUsNTQuMzU1OTA1IEw1Mi4zOTk2MDE1LDU0LjM1NTkwNSBaIiBpZD0iRmlsbC0zIiBmaWxsPSIjRkZGRkZGIj48L3BhdGg+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==");
}
.cube .pool img.marapool {
content: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjU2IiBoZWlnaHQ9IjI1NiIgdmlld0JveD0iMCAwIDI1NiAyNTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0wIDMuNjAwOEMwIDIuMzQzMTMgMCAxLjcxNDMgMC4yNDQ3NTcgMS4yMzM5NEMwLjQ2MDA1MiAwLjgxMTQgMC44MDM1ODcgMC40Njc4NjQgMS4yMjYxMyAwLjI1MjU3QzEuNzA2NDkgMC4wMDc4MTI1IDIuMzM1MzIgMC4wMDc4MTI1IDMuNTkyOTggMC4wMDc4MTI1SDI1Mi40MDdDMjUzLjY2NSAwLjAwNzgxMjUgMjU0LjI5NCAwLjAwNzgxMjUgMjU0Ljc3NCAwLjI1MjU3QzI1NS4xOTYgMC40Njc4NjQgMjU1LjU0IDAuODExNCAyNTUuNzU1IDEuMjMzOTRDMjU2IDEuNzE0MyAyNTYgMi4zNDMxMyAyNTYgMy42MDA4VjI1Mi40MTVDMjU2IDI1My42NzIgMjU2IDI1NC4zMDEgMjU1Ljc1NSAyNTQuNzgyQzI1NS41NCAyNTUuMjA0IDI1NS4xOTYgMjU1LjU0OCAyNTQuNzc0IDI1NS43NjNDMjU0LjI5NCAyNTYuMDA4IDI1My42NjUgMjU2LjAwOCAyNTIuNDA3IDI1Ni4wMDhIMy41OTI5OUMyLjMzNTMyIDI1Ni4wMDggMS43MDY0OSAyNTYuMDA4IDEuMjI2MTMgMjU1Ljc2M0MwLjgwMzU4NyAyNTUuNTQ4IDAuNDYwMDUyIDI1NS4yMDQgMC4yNDQ3NTcgMjU0Ljc4MkMwIDI1NC4zMDEgMCAyNTMuNjcyIDAgMjUyLjQxNVYzLjYwMDhaIiBmaWxsPSIjMjcyNTI1Ii8+CjxwYXRoIGQ9Ik01OS4yODUgNDguMDYyNUM1OC43ODg5IDQ4LjA2MjUgNTguMzg2NyA0OC40NjQ3IDU4LjM4NjcgNDguOTYwN1YxNTkuNDQ1QzU4LjM4NjcgMTU5Ljk0MSA1OC43ODg5IDE2MC4zNDMgNTkuMjg1IDE2MC4zNDNIODAuMDc0OUM4MC41NzA5IDE2MC4zNDMgODAuOTczMSAxNTkuOTQxIDgwLjk3MzEgMTU5LjQ0NVY4Mi4zODlIODQuNjMzNUwxMTcuNjQ5IDE1OS43OTdDMTE3Ljc5IDE2MC4xMjggMTE4LjExNiAxNjAuMzQzIDExOC40NzUgMTYwLjM0M0gxMzcuODA5QzEzOC4xNjkgMTYwLjM0MyAxMzguNDk0IDE2MC4xMjggMTM4LjYzNSAxNTkuNzk3TDE3MS42NTEgODIuMzg5SDE3NS4zMTFWMTU5LjQ0NUMxNzUuMzExIDE1OS45NDEgMTc1LjcxNCAxNjAuMzQzIDE3Ni4yMSAxNjAuMzQzSDE5N0MxOTcuNDk2IDE2MC4zNDMgMTk3Ljg5OCAxNTkuOTQxIDE5Ny44OTggMTU5LjQ0NVY0OC45NjA3QzE5Ny44OTggNDguNDY0NyAxOTcuNDk2IDQ4LjA2MjUgMTk3IDQ4LjA2MjVIMTY0LjI5QzE2My45MzEgNDguMDYyNSAxNjMuNjA1IDQ4LjI3NzMgMTYzLjQ2NCA0OC42MDg0TDEyOS45NzIgMTI3LjE0SDEyNi4zMTJMOTIuODIwMiA0OC42MDg0QzkyLjY3OSA0OC4yNzczIDkyLjM1MzkgNDguMDYyNSA5MS45OTQgNDguMDYyNUg1OS4yODVaIiBmaWxsPSIjRUVFQ0U4Ii8+CjxwYXRoIGQ9Ik01OC4zODY3IDE5NC45MjZDNTguMzg2NyAxOTQuNDMgNTguNzg4OSAxOTQuMDI3IDU5LjI4NSAxOTQuMDI3SDE5Ni45OTlDMTk3LjQ5NiAxOTQuMDI3IDE5Ny44OTggMTk0LjQzIDE5Ny44OTggMTk0LjkyNlYyMTUuNTg1QzE5Ny44OTggMjE2LjA4MSAxOTcuNDk2IDIxNi40ODQgMTk2Ljk5OSAyMTYuNDg0SDU5LjI4NUM1OC43ODg5IDIxNi40ODQgNTguMzg2NyAyMTYuMDgxIDU4LjM4NjcgMjE1LjU4NVYxOTQuOTI2WiIgZmlsbD0iI0YyQTkwMCIvPgo8L3N2Zz4K");
}
.cube .pool img.unknown {
content: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjUuMjcgMyAxMy40OCAxOCI+IDxwYXRoIGQ9Ik01LjY0MTcgMTguMzY5NkM1LjE1ODM0IDE3Ljg4NzEgNS4xNTgzMyAxNy4xMTMgNS42NDE2OSAxNi42MzA0QzcuMjY5OTIgMTUuMDA1MSA5LjUxNzYxIDE0IDEyIDE0QzE0LjQ4MjUgMTQgMTYuNzMwMSAxNS4wMDUgMTguMzU4MyAxNi42MzA0QzE4Ljg0MTcgMTcuMTEyOSAxOC44NDE3IDE3Ljg4NzEgMTguMzU4NCAxOC4zNjk2QzE2LjczMDEgMTkuOTk0OSAxNC40ODI0IDIxIDEyIDIxQzkuNTE3NTkgMjEgNy4yNjk5MyAxOS45OTUgNS42NDE3IDE4LjM2OTZaIiBmaWxsPSIjYjRiNGI0Ij48L3BhdGg+IDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNOC41MDAwMyA3LjVIMTUuNVY4SDE2QzE2IDEwLjYzNzIgMTQuMzE4OCAxMyAxMiAxM0M5LjY4MTIzIDEzIDguMDAwMDMgMTAuNjM3MiA4LjAwMDAzIDhIOC41MDAwM1Y3LjVaTTkuMDIyNzMgOC41QzkuMjEyNjYgMTAuNTY3OCAxMC41NjU4IDEyIDEyIDEyQzEzLjQzNDMgMTIgMTQuNzg3NCAxMC41Njc4IDE0Ljk3NzMgOC41SDkuMDIyNzNaIiBmaWxsPSIjYjRiNGI0Ij48L3BhdGg+IDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTIgM0MxNC40ODUzIDMgMTYuNSA1LjIzODU4IDE2LjUgOEg3LjUwMDAzQzcuNTAwMDMgNS4yMzg1OCA5LjUxNDc1IDMgMTIgM1pNMTIgNy41QzEyLjgyODUgNy41IDEzLjUgNi44Mjg0MyAxMy41IDZDMTMuNSA1LjE3MTU3IDEyLjgyODUgNC41IDEyIDQuNUMxMS4xNzE2IDQuNSAxMC41IDUuMTcxNTcgMTAuNSA2QzEwLjUgNi44Mjg0MyAxMS4xNzE2IDcuNSAxMiA3LjVaIiBmaWxsPSIjYjRiNGI0Ij48L3BhdGg+IDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNi41MDAwMyA4LjVDNi41MDAwMyA4LjIyMzg2IDYuNzIzODkgOCA3LjAwMDAzIDhIMTdDMTcuMjc2MiA4IDE3LjUgOC4yMjM4NiAxNy41IDguNUMxNy41IDguNzc2MTQgMTcuMjc2MiA5IDE3IDlINy4wMDAwM0M2LjcyMzg5IDkgNi41MDAwMyA4Ljc3NjE0IDYuNTAwMDMgOC41WiIgZmlsbD0iI2I0YjRiNCI+PC9wYXRoPiA8L3N2Zz4=");
}
.cube .fees {
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
align-items: center;
}
.cube .dim {
opacity: 0.5;
}
/* --- Per-face geometry: orientation + position + color. ------- */
.cube .bottom {
--fc: var(--face-bottom-color);
--orient: rotate(30deg) skew(-30deg);
--sy: var(--iso-scale);
--x: calc(var(--ox) + 1 + var(--oy) / var(--iso-scale));
--y: var(--oy);
}
.cube .top {
--fc: var(--face-top-color);
--orient: rotate(30deg) skew(-30deg);
--sy: var(--iso-scale);
--x: calc(
var(--ox) + var(--top-x-shift, 0) + var(--oy) / var(--iso-scale)
);
--y: calc(var(--oy) - var(--iso-scale) + var(--y-offset));
}
.cube .liquid.top {
--top-x-shift: calc(1 - var(--fill));
}
.cube .right {
--fc: var(--face-right-color);
--orient: rotate(-30deg) skewX(-30deg);
--x: calc(var(--ox) + 1);
--y: calc(
(var(--ox) + 1) * var(--iso-scale) + var(--oy) + var(--y-offset)
);
}
.cube .left {
--fc: var(--face-left-color);
--orient: rotate(30deg) skewX(30deg);
--x: var(--ox);
--y: calc(var(--oy) + var(--y-offset));
}
.cube .rear-right {
--fc: var(--face-left-color);
--orient: rotate(30deg) skewX(30deg);
--x: calc(var(--ox) + 1);
--y: calc(var(--oy) - var(--iso-scale) + var(--y-offset));
}
.cube .rear-left {
--fc: var(--face-top-color);
--orient: rotate(-30deg) skewX(-30deg);
--sx: -1;
--x: calc(var(--ox) + 1);
--y: calc(var(--ox) * var(--iso-scale) + var(--oy) + var(--y-offset));
}
</style>
</head>
<body>
<div class="wrap">
<template id="logo-template">
<div class="logo-slot">
<div class="cube">
<!-- Glass back -->
<div class="face glass bottom"></div>
<div class="face glass rear-right"></div>
<div class="face glass rear-left"></div>
<!-- Liquid back (hidden backing for crisp front-face corners) -->
<div class="face liquid bottom"></div>
<div class="face liquid rear-right"></div>
<div class="face liquid rear-left"></div>
<!-- Liquid front -->
<div class="face liquid right"></div>
<div class="face liquid left"></div>
<div class="face liquid top"></div>
<!-- Glass front (covers liquid-surface seam into side faces) -->
<div class="face glass right"></div>
<div class="face glass left"></div>
<div class="face glass top"></div>
<!-- Text overlay (populated via JS) -->
<div class="face text right"></div>
<div class="face text left"></div>
<div class="face text top"></div>
</div>
</div>
</template>
<section>
<div class="row" id="row"></div>
</section>
<section>
<div class="row" id="fills"></div>
</section>
<section>
<div class="row" id="variants"></div>
</section>
<section>
<div class="row" id="with-text"></div>
</section>
</div>
<script>
const fixedBgs = [
{ cls: "bg-gradient", label: "gradient" },
{ cls: "bg-image-1", label: "img 1" },
{ cls: "bg-image-2", label: "img 2" },
];
const fillValues = [0, 0.1, 0.25, 0.5, 0.75, 1];
const template = document.getElementById("logo-template");
const makeLogo = ({ fill, faceColor, cubeScheme } = {}) => {
const slot = template.content.cloneNode(true).firstElementChild;
const cube = slot.querySelector(".cube");
if (fill != null) cube.style.setProperty("--fill", String(fill));
if (faceColor) cube.style.setProperty("--face-color", faceColor);
// Force color-scheme on the cube itself so its face derivations
// stay fixed regardless of which tile (light/dark) hosts it.
// Default (orange) always pins to light.
cube.style.setProperty("color-scheme", cubeScheme ?? "light");
return slot;
};
const makeTile = (cls, label, content) => {
const tile = document.createElement("div");
tile.className = `tile ${cls}`;
tile.appendChild(content);
const lbl = document.createElement("span");
lbl.className = "label";
lbl.textContent = label;
tile.appendChild(lbl);
return tile;
};
const row = document.getElementById("row");
// plain: light + dark pair (primary background, both themes matter).
// paper: light only (dark paper tile dropped to keep the row tight).
row.appendChild(makeTile("bg-auto scheme-light", "light", makeLogo()));
row.appendChild(makeTile("bg-auto scheme-dark", "dark", makeLogo()));
row.appendChild(makeTile("bg-paper scheme-light", "paper", makeLogo()));
for (const bg of fixedBgs)
row.appendChild(
makeTile(`${bg.cls} scheme-light`, bg.label, makeLogo()),
);
// Fill levels shown only in light mode.
const fills = document.getElementById("fills");
for (const f of fillValues)
fills.appendChild(
makeTile("bg-auto scheme-light", `fill ${f}`, makeLogo({ fill: f })),
);
// Each cube variant (neutral-light, neutral-dark, orange) rendered
// on both a light and a dark background. The cube's own color-scheme
// is pinned so its appearance doesn't flip with the tile.
const variants = document.getElementById("variants");
const neutralFace = "var(--border-color)";
// Label format: `{cube} / {bg}`. Dark cube is shown on dark bg first
// (its natural pairing), then on light bg as a contrast check.
const neutLight = { faceColor: neutralFace, cubeScheme: "light" };
const neutDark = { faceColor: neutralFace, cubeScheme: "dark" };
const variantTiles = [
{ label: "light / light", bg: "scheme-light", opts: neutLight },
{ label: "light / dark", bg: "scheme-dark", opts: neutLight },
{ label: "dark / light", bg: "scheme-light", opts: neutDark },
{ label: "dark / dark", bg: "scheme-dark", opts: neutDark },
{ label: "orange / light", bg: "scheme-light", opts: {} },
{ label: "orange / dark", bg: "scheme-dark", opts: {} },
];
for (const v of variantTiles)
variants.appendChild(
makeTile(`bg-auto ${v.bg}`, v.label, makeLogo(v.opts)),
);
// Text-in-cube test: reuse variantTiles so the only variable vs the
// row above is the face text. Each tile shows realistic chain.js
// content — miner on top, block height on right, fee stack on left.
// Sample blocks. `date` is ISO (source of truth) and gets formatted
// to a compact "Apr 17" style for display — the full ISO string is
// too wide for the top face and reads poorly under uppercase.
const sampleBlocks = [
{
height: 912345,
date: "2026-04-17",
time: "12:00:00",
miner: "Foundry USA",
mid: 12,
min: 1,
max: 64,
},
{
height: 912346,
date: "2026-04-17",
time: "12:10:23",
miner: "AntPool",
mid: 8,
min: 2,
max: 21,
},
{
height: 912347,
date: "2026-04-17",
time: "12:22:51",
miner: "ViaBTC",
mid: 45,
min: 8,
max: 180,
},
{
height: 912348,
date: "2026-04-17",
time: "12:31:07",
miner: "F2Pool",
mid: 3,
min: 1,
max: 9,
},
{
height: 912349,
date: "2026-04-17",
time: "12:40:33",
miner: "MARA Pool",
mid: 120,
min: 40,
max: 350,
},
{
height: 912350,
date: "2026-04-17",
time: "12:48:59",
miner: "Unknown",
mid: 5,
min: 1,
max: 15,
},
];
const MONTHS = [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",
];
const shortDate = (iso) => {
const [, m, d] = iso.split("-").map(Number);
return `${MONTHS[m - 1]} ${d}`;
};
const p = (text, cls) => {
const el = document.createElement("p");
if (cls) el.className = cls;
el.textContent = text;
return el;
};
// Mirror of website/scripts/explorer/render.js createHeightElement:
// pads the height to 7 digits with a dimmed, non-selectable "#000…"
// prefix so block numbers line up vertically in chain view.
const createHeightElement = (height) => {
const str = String(height);
const container = document.createElement("span");
const prefix = document.createElement("span");
prefix.className = "dim";
prefix.style.userSelect = "none";
prefix.textContent = "#" + "0".repeat(Math.max(0, 7 - str.length));
const num = document.createElement("span");
num.textContent = str;
container.append(prefix, num);
return container;
};
const makeBlockCube = (opts, block) => {
const slot = makeLogo(opts);
const cube = slot.querySelector(".cube");
// Top: "Mon D" / HH:MM (with colon dimmed). Uppercased by CSS.
const [hh, mm] = block.time.slice(0, 5).split(":");
const timeP = document.createElement("p");
const colon = document.createElement("span");
colon.className = "dim";
colon.textContent = ":";
timeP.append(
document.createTextNode(hh),
colon,
document.createTextNode(mm),
);
cube.querySelector(".text.top").append(p(shortDate(block.date)), timeP);
// Right: height at the top, raw pool-logo + miner name at the
// bottom (trailing " Pool" / " USA" stripped to keep names
// short enough to read on the narrow face without ellipsis).
const heightP = document.createElement("p");
heightP.className = "height";
heightP.appendChild(createHeightElement(block.height));
const slug = block.miner.toLowerCase().replace(/\s+/g, "");
const poolDiv = document.createElement("div");
poolDiv.className = "pool";
const logo = document.createElement("img");
logo.className = slug;
const nameSpan = document.createElement("span");
nameSpan.textContent = block.miner.replace(/\s+(Pool|USA)$/i, "").trim();
poolDiv.append(logo, nameSpan);
cube.querySelector(".text.right").append(heightP, poolDiv);
// Left: ~median / min-max / sat/vB, with dash + unit dimmed (same
// dom shape as chain.js so styles carry over 1:1).
const fees = document.createElement("div");
fees.className = "fees";
const range = document.createElement("p");
const min = document.createElement("span");
min.textContent = block.min;
const dash = document.createElement("span");
dash.className = "dim";
dash.textContent = "-";
const max = document.createElement("span");
max.textContent = block.max;
range.append(min, dash, max);
fees.append(p(`~${block.mid}`), range, p("sat/vB", "dim"));
cube.querySelector(".text.left").appendChild(fees);
return slot;
};
const withText = document.getElementById("with-text");
variantTiles.forEach((v, i) =>
withText.appendChild(
makeTile(
`bg-auto ${v.bg}`,
v.label,
makeBlockCube(v.opts, sampleBlocks[i]),
),
),
);
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink