Blob Tree Template Apr 2026

// generate SVG path string (simple blob shape based on given path) function renderBlobSVG(pathData, idNum) // random pastel fill based on ID to keep distinct friendly look const colors = ["#FFB77C", "#FFA56E", "#F7B787", "#FEC196", "#FDAC6A", "#F6BD8C", "#FEC68B"]; const fillColor = colors[idNum % colors.length]; return `<svg class="blob-svg" viewBox="0 0 100 90" xmlns="http://www.w3.org/2000/svg"> <path d="$pathData" fill="$fillColor" stroke="#D48C54" stroke-width="1.2" stroke-linejoin="round" /> <circle cx="38" cy="42" r="3" fill="#4F2D14" /> <circle cx="62" cy="42" r="3" fill="#4F2D14" /> <path d="M44 54 Q50 62 56 54" stroke="#5D341B" stroke-width="2" fill="none" stroke-linecap="round" /> </svg>`;

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-item:hover transform: scale(1.02); blob tree template

.emotion-note margin-top: 16px; color: #6a3e1a; font-style: italic; border-left: 3px solid #ffb358; padding-left: 20px;

// 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 = ""; // generate SVG path string (simple blob shape

// optional: save to localStorage so notes persist function loadPersistedNotes() { const stored = localStorage.getItem("blobtree_notes"); if (stored) { try savedNotes = JSON.parse(stored); catch(e) {} } const storedSelected = localStorage.getItem("blobtree_selected"); if (storedSelected && blobData.find(b => b.id == storedSelected)) currentSelectedId = parseInt(storedSelected); else // default first blob for preview currentSelectedId = 1; }

/* main card */ .blob-container max-width: 1300px; width: 100%; background: rgba(255, 248, 235, 0.85); backdrop-filter: blur(2px); border-radius: 64px; box-shadow: 0 25px 45px rgba(0,0,0,0.1), 0 0 0 1px rgba(255,215,170,0.5); padding: 1.8rem 2rem 2.5rem 2rem; transition: all 0.2s; const fillColor = colors[idNum % colors.length]

function init() loadPersistedNotes(); buildTreeUI(); // after building, trigger selection to display current selected or default if (currentSelectedId) selectBlob(currentSelectedId); else // if nothing selected, default to blob 1 selectBlob(1); document.getElementById("saveReflectionBtn").addEventListener("click", () => saveCurrentReflection(); persistData(); ); // optional: auto-save on textarea blur document.getElementById("reflectionInput").addEventListener("blur", () => if (currentSelectedId) savedNotes[currentSelectedId] = document.getElementById("reflectionInput").value; persistData(); );

/* branches (columns) */ .branch background: rgba(230, 200, 160, 0.2); border-radius: 48px; padding: 20px 12px 20px 12px; min-width: 120px; flex: 1; backdrop-filter: blur(4px); box-shadow: inset 0 1px 4px rgba(255,245,215,0.8), 0 6px 12px rgba(0,0,0,0.03);