Tree Template - Blob

/* 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);

.blob-item:hover transform: scale(1.02);

branchConfig.forEach(branch => const branchBlobs = getBlobsByBranch(branch.key); if (branchBlobs.length === 0) return; blob tree template

.sub color: #7a4a28; border-left: 4px solid #ffb46e; padding-left: 18px; margin: 12px 0 28px 0; font-weight: 500; font-size: 1rem;

// 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?`; /* branches (columns) */

textarea width: 100%; border-radius: 32px; border: 1px solid #f0cfaa; background: white; padding: 12px 18px; font-family: inherit; margin-top: 16px; resize: vertical; font-size: 0.9rem;

<!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 */ padding: 20px 12px 20px 12px

<script> // ----- BLOB TREE DATA (classic blob tree archetypes + emotions) // Organized by branches: Top, Upper Middle, Lower, Ground / playful moods const blobData = [ id: 1, name: "Joyful Jumper", emotion: "happy, energetic, proud", branch: "canopy", svg: "M42,22 C52,18 66,20 72,30 C78,40 74,54 66,62 C58,70 42,72 32,64 C22,56 18,44 22,34 C26,24 32,26 42,22Z" , id: 2, name: "Helping Blob", emotion: "supportive, caring, team player", branch: "canopy", svg: "M40,26 C50,22 64,26 68,36 C72,46 68,56 60,62 C52,68 38,68 30,60 C22,52 20,40 26,32 C32,24 36,28 40,26Z" , id: 3, name: "Dreamy Daydreamer", emotion: "calm, introspective, detached", branch: "canopy", svg: "M44,30 C54,28 66,32 68,44 C70,56 62,66 50,66 C38,66 28,58 26,48 C24,38 34,32 44,30Z" , id: 4, name: "Anxious Blob", emotion: "worried, overwhelmed, stressed", branch: "middle-left", svg: "M38,28 C46,24 60,26 66,36 C72,46 68,58 58,64 C48,70 34,68 28,58 C22,48 26,36 38,28Z" , id: 5, name: "Lonely One", emotion: "isolated, excluded, sad", branch: "middle-left", svg: "M36,32 C44,30 58,34 62,44 C66,54 60,64 50,66 C40,68 30,62 28,52 C26,42 30,34 36,32Z" , id: 6, name: "Playful Buddy", emotion: "silly, lighthearted, funny", branch: "middle-right", svg: "M46,26 C56,22 68,26 70,38 C72,50 64,60 54,62 C44,64 34,58 32,48 C30,38 38,28 46,26Z" , id: 7, name: "Rebellious Blob", emotion: "defiant, angry, frustrated", branch: "middle-right", svg: "M40,30 C52,24 64,28 68,40 C72,52 64,64 52,66 C40,68 28,62 26,50 C24,38 32,32 40,30Z" , id: 8, name: "Tired Blob", emotion: "exhausted, low energy, numb", branch: "lower-ground", svg: "M44,34 C54,32 64,38 64,48 C64,58 54,64 44,64 C34,64 28,56 28,48 C28,38 34,34 44,34Z" , id: 9, name: "Curious Climber", emotion: "adventurous, hopeful, exploring", branch: "lower-ground", svg: "M48,28 C58,26 68,32 68,44 C68,56 58,64 48,64 C38,64 30,56 30,44 C30,32 38,28 48,28Z" , id: 10, name: "Blob Leader", emotion: "confident, guiding, respected", branch: "top-solo", svg: "M44,24 C56,20 70,24 72,38 C74,52 66,62 54,64 C42,66 30,60 28,48 C26,36 34,26 44,24Z" , id: 11, name: "Invisible Blob", emotion: "ignored, unseen, left out", branch: "lower-ground", svg: "M40,36 C48,34 60,38 62,48 C64,58 56,66 46,66 C36,66 28,58 28,48 C28,38 32,36 40,36Z" , id: 12, name: "Social Blob", emotion: "connected, talkative, joyful", branch: "canopy", svg: "M42,26 C52,22 66,24 70,36 C74,48 66,60 56,64 C46,68 34,64 30,54 C26,44 32,30 42,26Z" ];