.blob-label font-size: 0.7rem; font-weight: 600; background: #ffffffcc; backdrop-filter: blur(4px); padding: 4px 10px; border-radius: 28px; margin-top: 6px; color: #5c3a1e; text-align: center; max-width: 100px; line-height: 1.3;
footer font-size: 0.7rem; text-align: center; margin-top: 28px; opacity: 0.7;
<div class="tree-grid" id="blobTreeGrid"> <!-- Branches will be injected dynamically via JS --> </div>
button:hover background: #d69a58; transform: scale(0.97); blob tree template
branchBlobs.forEach(blob => const itemDiv = document.createElement("div"); itemDiv.className = "blob-item"; if (currentSelectedId === blob.id) itemDiv.classList.add("selected"); itemDiv.dataset.id = blob.id;
function saveCurrentReflection() if (currentSelectedId === null) document.getElementById("saveMessage").innerHTML = "⚠️ Please select a blob first."; setTimeout(() => document.getElementById("saveMessage").innerHTML = ""; , 1500); return; const reflection = document.getElementById("reflectionInput").value; if (reflection.trim() === "") savedNotes[currentSelectedId] = ""; document.getElementById("saveMessage").innerHTML = "🧾 empty note cleared (optional)."; else savedNotes[currentSelectedId] = reflection; document.getElementById("saveMessage").innerHTML = "✨ Reflection saved for this blob!"; setTimeout(() => if (document.getElementById("saveMessage").innerHTML.includes("saved")) document.getElementById("saveMessage").innerHTML = ""; , 1800);
<div class="response-panel" id="responsePanel"> <div class="selection-display"> <span>🌱 Currently selected:</span> <span class="blob-name" id="selectedBlobName">— none yet —</span> </div> <div class="emotion-note" id="emotionNote"> 💭 Tap on a blob to reflect. Each character represents a different mood or social dynamic. </div> <textarea id="reflectionInput" rows="2" placeholder="Write your reflection, journal entry, or share how you relate to this blob..."></textarea> <button id="saveReflectionBtn">📘 save note</button> <div style="font-size: 0.7rem; margin-top: 8px; color:#b48a54;" id="saveMessage"></div> </div> <footer> 🧸 Blob Tree method inspired by Pip Wilson · use for teams, classrooms, therapy </footer> </div> .blob-label font-size: 0.7rem
h1 small font-size: 0.85rem; font-weight: normal; background: #ffecd6; padding: 6px 14px; border-radius: 60px; color: #a1652c; letter-spacing: normal;
const svgHtml = renderBlobSVG(blob.svg, blob.id); itemDiv.innerHTML = ` <div class="blob-number">$blob.id</div> $svgHtml <div class="blob-label">$blob.name</div> `; itemDiv.addEventListener("click", (e) => e.stopPropagation(); selectBlob(blob.id); ); branchDiv.appendChild(itemDiv); ); container.appendChild(branchDiv); );
/* selected highlight */ .blob-item.selected .blob-svg filter: drop-shadow(0 0 0 3px #ffaa44) drop-shadow(0 8px 18px rgba(0,0,0,0.2)); transform: scale(1.02); padding: 4px 10px
.blob-name background: #ffddb0; padding: 8px 20px; border-radius: 44px; font-size: 1rem;
function buildTreeUI() const container = document.getElementById("blobTreeGrid"); container.innerHTML = "";
let currentSelectedId = null; let savedNotes = {};