<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>
/* tree grid layout */ .tree-grid display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 1.5rem; margin: 2rem 0 2rem;
body font-family: 'Segoe UI', 'Quicksand', system-ui, -apple-system, 'Helvetica Neue', sans-serif; background: linear-gradient(145deg, #f9f3e6 0%, #fff0e0 100%); margin: 0; min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 20px;
/* blob items */ .blob-item display: flex; flex-direction: column; align-items: center; margin-bottom: 28px; cursor: pointer; transition: transform 0.2s ease, filter 0.1s; blob tree template
// load previously saved note for this blob if exists const textarea = document.getElementById("reflectionInput"); if (savedNotes[blobId]) textarea.value = savedNotes[blobId]; else textarea.value = ""; document.getElementById("saveMessage").innerHTML = "";
function selectBlob(blobId) const blob = blobData.find(b => b.id === blobId); if (!blob) return; currentSelectedId = blobId;
// update UI selected class document.querySelectorAll(".blob-item").forEach(el => if (parseInt(el.dataset.id) === blobId) el.classList.add("selected"); else el.classList.remove("selected"); ); How do you relate
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Blob Tree Template | Emotional Check-In Tool</title> <style> * box-sizing: border-box; user-select: none; /* avoid accidental selection of blobs */
button:hover background: #d69a58; transform: scale(0.97);
.blob-item.selected .blob-number background: #ffaa44; color: white; border-color: #ff8800; box-shadow: 0 0 0 2px white; How do you relate?`
footer font-size: 0.7rem; text-align: center; margin-top: 28px; opacity: 0.7;
// update panel document.getElementById("selectedBlobName").innerHTML = `$blob.name (blob #$blob.id)`; document.getElementById("emotionNote").innerHTML = `💠"$blob.emotion" — $blob.name often represents $blob.emotion.split(',')[0] feelings. How do you relate?`;
.blob-name background: #ffddb0; padding: 8px 20px; border-radius: 44px; font-size: 1rem;