<!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 */
.branch-title text-align: center; font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1.5px; color: #b97f48; margin-bottom: 24px; background: #fff2e2; display: inline-block; width: 100%; padding: 6px 0; border-radius: 60px; blob tree template
<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> No server needed
Just save the code as an .html file and open it in any browser. No server needed. Perfect for classroom morning check-ins, therapy groups, team meetings, or personal journaling. const branchDiv = document.createElement("div")
/* 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);
const branchDiv = document.createElement("div"); branchDiv.className = "branch"; branchDiv.innerHTML = `<div class="branch-title">$branch.label</div>`;