diff --git a/viz/index.html b/viz/index.html index 8ad5b28..65fce5b 100644 --- a/viz/index.html +++ b/viz/index.html @@ -2697,10 +2697,16 @@ + ".zdot{width:40px;height:40px;border-radius:50%;flex:0 0 auto;position:relative}" + ".zlbl{font-size:12.5px;color:#c6d4ec;letter-spacing:.3px;line-height:1.2}" + ".zlbl small{display:block;color:rgba(150,170,205,.6);font-size:10px}" - + ".zstage{position:absolute;left:210px;right:210px;top:84px;bottom:150px;pointer-events:auto;display:flex;flex-wrap:wrap;align-content:flex-start;gap:12px;padding:14px;overflow:auto}" - + ".zstage .zhint{margin:auto;color:rgba(150,170,205,.5);font-size:13px;font-style:italic;text-align:center}" - + ".zchip{border-radius:13px;padding:11px 13px;min-width:130px;background:rgba(20,28,44,.72);border:1px solid;font-size:12px;color:#dbe6f8}" - + ".zchip b{color:#eaf1ff}.zchip .mem{color:rgba(180,195,225,.8);font-size:11px;margin-top:5px;line-height:1.5}" + + ".zstage{position:absolute;left:210px;right:210px;top:84px;bottom:150px;pointer-events:auto;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:22px;padding:14px;overflow:auto}" + + ".zstage .zhint{margin:auto;color:rgba(150,170,205,.5);font-size:13px;font-style:italic;text-align:center;max-width:280px}" + + ".zorb{position:relative;width:132px;height:150px;flex:0 0 auto;cursor:grab}" + + ".zorb .core{position:absolute;left:50%;top:44%;width:44px;height:44px;margin:-22px;border-radius:50%;animation:zpulse 3.2s ease-in-out infinite}" + + ".zorb .orbit{position:absolute;left:0;right:0;top:0;height:132px;animation:zspin 15s linear infinite}" + + ".zorb .pet{position:absolute;left:50%;top:50%;width:13px;height:13px;margin:-6.5px;border-radius:50%;box-shadow:0 0 6px currentColor}" + + ".zorb .cap{position:absolute;left:0;right:0;bottom:0;text-align:center;font-size:11px;color:#dbe6f8}" + + ".zorb .cap small{color:rgba(170,190,220,.6)}" + + "@keyframes zspin{to{transform:rotate(360deg)}}" + + "@keyframes zpulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.12);opacity:1}}" + ".zrack{position:absolute;left:210px;right:210px;bottom:20px;height:120px;pointer-events:auto;overflow:auto}" + ".zrack .grp{font-size:10px;letter-spacing:1px;color:rgba(150,170,205,.55);text-transform:uppercase;margin:2px 0 4px}" + ".zsock{display:inline-block;margin:0 7px 7px 0;padding:6px 10px;border-radius:9px;background:rgba(18,26,42,.7);border:1px solid rgba(120,150,200,.2);font-size:11.5px;color:#aab8d4}" @@ -2791,21 +2797,31 @@ }, renderStage() { if (!this.stage) return; - this.stage.innerHTML = ""; + this.stage.innerHTML = ""; this.orbs = []; const keys = Object.keys(this.nodes); if (!keys.length) { const hint = document.createElement("div"); hint.className = "zhint"; - hint.textContent = "click a ring on either side → pick a feed → it lands here. then drag it to a voice (soon)."; + hint.textContent = "click a ring on either side → pick a feed → it becomes a spinning orb here. gather more and the orbs multiply. (drag to a voice — soon.)"; this.stage.appendChild(hint); return; } - for (const gk of keys) { - const meta = GROUP_META[gk], node = this.nodes[gk]; - const chip = document.createElement("div"); chip.className = "zchip"; chip.style.borderColor = meta.hue; - const names = [...node.members].map(k => { const n = sources.get(k); return n ? n.label : k; }); - chip.innerHTML = '' + meta.emoji + " " + gk + " · " + node.members.size - + '