feat (ui): display sterilisation and vaccination data

Author: 28nitin07

js/dogs.js

@@ -106,7 +106,9 @@ function buildDogCard(meta, body) {
       data-image="${esc(meta.image)}"
       data-emoji="${esc(meta.emoji || '🐕')}"
       data-bg-light="${esc(meta.bgLight)}"
-      data-bg-dark="${esc(meta.bgDark)}">
+      data-bg-dark="${esc(meta.bgDark)}"
+      data-sterilized="${esc(meta.sterilized || '')}"
+      data-vaccinated="${esc(meta.vaccinated || '')}">
     ${photoArea}
     <div class="dog-tile-name">${esc(displayName)}</div>
   </div>`;
@@ -226,6 +228,11 @@ function initDogModals() {
       ? `<div class="dog-modal-photo"><img src="${card.dataset.image}" alt="${card.dataset.name}" style="opacity:0;transition:opacity 0.3s" onload="this.style.opacity=1"></div>`
       : `<div class="dog-modal-emoji" style="background:${bg}"><span style="font-size:7rem">${card.dataset.emoji || '🐕'}</span></div>`;
 
+    const statusBadges = [];
+    if (card.dataset.sterilized === 'true') statusBadges.push('<span class="dog-status-badge dog-status-sterilized">✅ sterilized</span>');
+    if (card.dataset.vaccinated === 'true') statusBadges.push('<span class="dog-status-badge dog-status-vaccinated">💉 vaccinated</span>');
+    const statusHtml = statusBadges.length ? `<div class="dog-modal-status">${statusBadges.join('')}</div>` : '';
+
     const overlay = document.createElement('div');
     overlay.className = 'dog-modal-overlay';
     overlay.innerHTML = `
@@ -235,6 +242,7 @@ function initDogModals() {
         <div class="dog-modal-body">
           <div class="dog-modal-name">${card.dataset.name} <span>${card.dataset.nameEmoji || ''}</span></div>
           <div class="dog-modal-breed">${card.dataset.breed || ''}</div>
+          ${statusHtml}
           <p class="dog-modal-desc">${card.dataset.body || ''}</p>
           <div class="dog-modal-tags">${tags}</div>
         </div>

public/dogs/content/airbender.md

@@ -8,5 +8,6 @@ image: public/dogs/images/airbender.jpg
 tags: 💨 territorial, 🐾 happy hops for favourites, 🎮 playful, 🤝 good with head-pats
 bgLight: linear-gradient(135deg,#e0e8f0,#d0d8e8)
 bgDark: linear-gradient(135deg,#101828,#181e30)
+vaccinated: true
 ---
 Despite what the name suggests, Airbender in fact cannot bend air. He is, unfortunately, a follower of Rathode (a dog who behaved like Sultan), which makes him prone to fiercely territorial behaviour. Airbender is quite playful and can be seen enjoying head-pats. He also has special happy hops, reserved only for the people he is extremely fond of.

public/dogs/content/artemis.md

@@ -8,5 +8,6 @@ image: public/dogs/images/artemis.jpg
 tags: 🌱 tiny pup, 🏹 fierce name, 🔧 personality in development
 bgLight: linear-gradient(135deg,#e8e8e8,#d8d8d8)
 bgDark: linear-gradient(135deg,#1a1a1a,#282828)
+vaccinated: true
 ---
 Personality in development. Artemis is a 1-month-old black and white pup at Gate 3. She was named for a goddess — now she just needs to grow into the title.

public/dogs/content/barfi.md

@@ -8,5 +8,6 @@ image: public/dogs/images/barfi.jpg
 tags: 🍭 Sultan's son, 👂 barks at everything, 😬 easily startled, 🛟 still working on bladder control
 bgLight: linear-gradient(135deg,#fff4e8,#ffead0)
 bgDark: linear-gradient(135deg,#2d1a08,#3d2210)
+sterilized: true
 ---
 Barfi is one of Sultan's many children, and apart from his pointy ears and his commitment to barking at absolutely everything that moves, he couldn't be more different from his father. Barfi is a sensitive, easily startled adolescent who approaches the world with caution. Curious but unsure, he prefers to observe from a safe distance before deciding whether you pass the vibe check. Despite growing up fast in most ways, Barfi is still working on bladder control — in moments of peak excitement, especially when rolling over for belly rubs, there's a chance you might get more affection than you bargained for.

public/dogs/content/batman.md

@@ -8,5 +8,6 @@ image: public/dogs/images/batman.jpg
 tags: 🌱 tiny pup, 🦇 dark knight, 🔧 personality in development
 bgLight: linear-gradient(135deg,#e8e8e8,#d8d8d8)
 bgDark: linear-gradient(135deg,#1a1a1a,#282828)
+vaccinated: true
 ---
 Personality in development. Batman is one of Clio's pups, a 2-month-old black and white pup at the Commissioner's Office. The Dark Knight's origin story was humble too.

public/dogs/content/bigboi.md

@@ -8,5 +8,7 @@ image: public/dogs/images/bigboi.jpg
 tags: 👴 old soul, 👁️ cataracts, ⚡ famously fast, 🦁 not to be underestimated
 bgLight: linear-gradient(135deg,#f5f0e8,#ede4d0)
 bgDark: linear-gradient(135deg,#2d2a20,#3d3828)
+sterilized: true
+vaccinated: true
 ---
 Big Boi carries his age with remarkable grace and hasn't lost an ounce of his spirit. Though he has cataracts and limited vision, it does little to slow him down or dampen his confidence. Call his name and Big Boi will run toward the sound of your voice, stopping right in front of you and patiently waiting for attention. With humans, he is calm, gentle, and wise — an old soul in every sense. But when his boundaries are crossed, he is quick to remind everyone that he is not to be underestimated. Despite his age, Big Boi is famously fast and determined.

public/dogs/content/biscuit.md

@@ -8,5 +8,6 @@ image: public/dogs/images/biscuit.jpg
 tags: 🌱 tiny pup, 🔧 personality in development, 🏗️ construction baby
 bgLight: linear-gradient(135deg,#f8e8d0,#f0d8b8)
 bgDark: linear-gradient(135deg,#2d1808,#3d2010)
+vaccinated: true
 ---
 Personality in development. Biscuit is the tiniest of the Gate 3 construction site trio — sweet name, big future. She's still discovering the world, one curious sniff at a time.

public/dogs/content/blossom.md

@@ -8,5 +8,6 @@ image: public/dogs/images/blossom.jpg
 tags: 🌱 tiny pup, 🌸 tricolour beauty, 🔧 personality in development
 bgLight: linear-gradient(135deg,#f8e8d0,#f0d8b0)
 bgDark: linear-gradient(135deg,#2a1808,#3a2010)
+vaccinated: true
 ---
 Personality in development. Blossom is a 2-month-old tricolour pup next to WUD. She's just beginning to find her feet — and she's already doing it with style.

public/dogs/content/blueberry.md

@@ -8,5 +8,6 @@ image: public/dogs/images/blueberry.jpg
 tags: 🌱 tiny pup, 🫐 sweet newcomer, 🔧 personality in development
 bgLight: linear-gradient(135deg,#f8e8d0,#f0d8b0)
 bgDark: linear-gradient(135deg,#2a1808,#3a2010)
+vaccinated: true
 ---
 Personality in development. Blueberry is a 1-month-old brown and white pup at Gate 3. She's only just arrived in the world — stay tuned for updates.

public/dogs/content/boop.md

@@ -8,5 +8,7 @@ image: public/dogs/images/boop.jpg
 tags: 💪 macho energy, 👁️ attention seeker, 🛡️ campus guardian, 🥰 big softie
 bgLight: linear-gradient(135deg,#fff8e8,#ffeecc)
 bgDark: linear-gradient(135deg,#2d2208,#3d2c0d)
+sterilized: true
+vaccinated: true
 ---
 Boop is the self-appointed macho man of Gate 1. He thrives on attention and has an uncanny talent for inserting himself into any human–dog interaction, firmly believing the spotlight belongs to him. A dedicated guardian of both the campus and his pack, Boop carries himself with an air of bravery and confidence. But beneath all that tough-guy energy lies a big softie who simply loves being noticed and adored.