Add Material 3 Android mascot with BS date badge

Bikram Gole · Bikram Gole · commit 21633c9b7904 · 2026-02-28T20:10:22.000+05:45
diff --git a/about.html b/about.html
@@ -29,6 +29,11 @@
           if (selected !== savedTheme) {
             window.localStorage.setItem(themeKey, selected);
           }
+          if (validThemes.has(savedTheme) && selected !== urlTheme) {
+            const url = new URL(window.location.href);
+            url.searchParams.set("theme", selected);
+            window.history.replaceState(null, "", url.toString());
+          }
         }
       } catch (error) {
         // ignore
diff --git a/contact.html b/contact.html
@@ -29,6 +29,11 @@
           if (selected !== savedTheme) {
             window.localStorage.setItem(themeKey, selected);
           }
+          if (validThemes.has(savedTheme) && selected !== urlTheme) {
+            const url = new URL(window.location.href);
+            url.searchParams.set("theme", selected);
+            window.history.replaceState(null, "", url.toString());
+          }
         }
       } catch (error) {
         // ignore
diff --git a/index.html b/index.html
@@ -29,6 +29,11 @@
           if (selected !== savedTheme) {
             window.localStorage.setItem(themeKey, selected);
           }
+          if (validThemes.has(savedTheme) && selected !== urlTheme) {
+            const url = new URL(window.location.href);
+            url.searchParams.set("theme", selected);
+            window.history.replaceState(null, "", url.toString());
+          }
         }
       } catch (error) {
         // ignore
@@ -89,7 +94,7 @@ <h1 id="hero-name" data-name="Bikram Gole">Bikram Gole</h1>
           </div>
         </div>
 
-        <aside class="avatar-card tilt" aria-label="penguin avatar">
+        <aside class="avatar-card tilt" aria-label="mascot avatar">
           <div class="avatar-glow"></div>
           <div class="penguin-avatar">
             <div class="penguin-body"></div>
@@ -107,6 +112,21 @@ <h1 id="hero-name" data-name="Bikram Gole">Bikram Gole</h1>
             <div class="penguin-foot left"></div>
             <div class="penguin-foot right"></div>
           </div>
+          <div class="android-avatar" aria-hidden="true">
+            <div class="android-head">
+              <span class="android-antenna left"></span>
+              <span class="android-antenna right"></span>
+              <span class="android-eye left"></span>
+              <span class="android-eye right"></span>
+            </div>
+            <div class="android-body">
+              <div class="android-date-badge">BS --/--/--</div>
+            </div>
+            <span class="android-arm left"></span>
+            <span class="android-arm right"></span>
+            <span class="android-leg left"></span>
+            <span class="android-leg right"></span>
+          </div>
         </aside>
       </div>
     </section>
diff --git a/script.js b/script.js
@@ -145,6 +145,7 @@ const quoteOutput = document.getElementById("quote-output");
 const signalCount = document.getElementById("signal-count");
 const penguinAvatar = document.querySelector(".penguin-avatar");
 const penguinBelly = document.querySelector(".penguin-belly");
+const androidDateBadge = document.querySelector(".android-date-badge");
 const paletteOpenBtn = document.getElementById("palette-open");
 let commandPalette = document.getElementById("command-palette");
 let commandBackdrop = document.getElementById("command-backdrop");
@@ -698,7 +699,7 @@ function initTerminalFontFallbackMode() {
 }
 
 function initPenguinDateBadge() {
-  if (!penguinBelly) return;
+  if (!penguinBelly && !androidDateBadge) return;
 
   let lastAdDate = "";
 
@@ -716,14 +717,24 @@ function initPenguinDateBadge() {
     return `${year}-${month}-${day}`;
   };
 
-  const parseBsDay = (value) => {
+  const parseBsDate = (value) => {
     if (typeof value === "string") {
       const match = value.match(/^(\d{4})[-/](\d{1,2})[-/](\d{1,2})$/);
-      if (match) return String(Number.parseInt(match[3], 10));
+      if (match) {
+        return {
+          year: Number.parseInt(match[1], 10),
+          month: Number.parseInt(match[2], 10),
+          day: Number.parseInt(match[3], 10),
+        };
+      }
     }
 
     if (value && typeof value === "object" && "day" in value) {
-      return String(Number.parseInt(value.day, 10));
+      return {
+        year: Number.parseInt(value.year, 10),
+        month: Number.parseInt(value.month, 10),
+        day: Number.parseInt(value.day, 10),
+      };
     }
 
     return null;
@@ -752,21 +763,31 @@ function initPenguinDateBadge() {
 
   const tick = async () => {
     const adDate = getNepalAdDate();
-    if (adDate === lastAdDate && penguinBelly.dataset.day) return;
+    if (adDate === lastAdDate && (penguinBelly?.dataset.day || androidDateBadge?.dataset.bs)) return;
 
-    let bsDay = null;
+    let bsDate = null;
     const converter = await loadBsConverter();
 
     if (converter) {
       try {
         const bsValue = converter(adDate);
-        bsDay = parseBsDay(bsValue);
+        bsDate = parseBsDate(bsValue);
       } catch (error) {
-        bsDay = null;
+        bsDate = null;
       }
     }
 
-    penguinBelly.dataset.day = bsDay || getFallbackDay();
+    const fallbackDay = getFallbackDay();
+    if (penguinBelly) {
+      penguinBelly.dataset.day = String(bsDate?.day || fallbackDay);
+    }
+    if (androidDateBadge) {
+      const bsText = bsDate
+        ? `BS ${String(bsDate.year).padStart(4, "0")}/${String(bsDate.month).padStart(2, "0")}/${String(bsDate.day).padStart(2, "0")}`
+        : `BS day ${fallbackDay}`;
+      androidDateBadge.textContent = bsText;
+      androidDateBadge.dataset.bs = bsText;
+    }
     lastAdDate = adDate;
   };
 
@@ -823,7 +844,8 @@ function initThemeSwitcher() {
   window.addEventListener("pageshow", () => {
     let latestTheme = "neo";
     try {
-      latestTheme = window.localStorage.getItem(THEME_STORAGE_KEY) || getThemeFromUrl() || "neo";
+      const storedTheme = window.localStorage.getItem(THEME_STORAGE_KEY);
+      latestTheme = storedTheme || getThemeFromUrl() || "neo";
     } catch (error) {
       latestTheme = "neo";
     }
@@ -849,6 +871,24 @@ function initThemeSwitcher() {
   });
 }
 
+function initNavThemeGuard() {
+  const navLinks = document.querySelectorAll('a[href$=".html"], a[href*=".html?"]');
+  navLinks.forEach((link) => {
+    link.addEventListener("click", () => {
+      try {
+        const theme = THEME_OPTIONS.includes(currentTheme) ? currentTheme : "neo";
+        window.localStorage.setItem(THEME_STORAGE_KEY, theme);
+        const href = link.getAttribute("href");
+        if (href) {
+          link.setAttribute("href", applyThemeToUrl(href, theme));
+        }
+      } catch (error) {
+        // Ignore storage/link update failures.
+      }
+    });
+  });
+}
+
 function spawnBlackflagShot(startX, startY, side, targetX = null, targetY = null) {
   const bullet = document.createElement("span");
   bullet.className = "gun-bullet";
@@ -1732,6 +1772,7 @@ function initPersonaQuiz() {
 
 initPenguinDateBadge();
 initThemeSwitcher();
+initNavThemeGuard();
 initHeroTypewriters();
 initBlackflagGunfire();
 initRuntimeCompatibility();
diff --git a/styles.css b/styles.css
@@ -1928,6 +1928,125 @@ body.browser-vivaldi .penguin-glasses {
   }
 }
 
+.android-avatar {
+  display: none;
+  position: relative;
+  width: 146px;
+  height: 170px;
+  z-index: 2;
+  transform-origin: center 82%;
+  animation: android-idle 4.4s ease-in-out infinite;
+  filter: drop-shadow(0 12px 18px rgba(24, 94, 74, 0.3));
+}
+
+.android-head {
+  position: absolute;
+  left: 33px;
+  top: 18px;
+  width: 80px;
+  height: 52px;
+  border-radius: 36px 36px 22px 22px;
+  background: linear-gradient(175deg, #8ceec2 0%, #43c27e 62%, #2ca569 100%);
+  box-shadow: inset 0 5px 8px rgba(219, 255, 240, 0.38), inset 0 -6px 9px rgba(0, 0, 0, 0.15);
+}
+
+.android-antenna {
+  position: absolute;
+  top: -12px;
+  width: 3px;
+  height: 14px;
+  border-radius: 999px;
+  background: #8ceec2;
+}
+
+.android-antenna.left { left: 20px; transform: rotate(-22deg); }
+.android-antenna.right { right: 20px; transform: rotate(22deg); }
+
+.android-eye {
+  position: absolute;
+  top: 20px;
+  width: 7px;
+  height: 7px;
+  border-radius: 999px;
+  background: #0f3829;
+}
+
+.android-eye.left { left: 24px; }
+.android-eye.right { right: 24px; }
+
+.android-body {
+  position: absolute;
+  left: 27px;
+  top: 72px;
+  width: 92px;
+  height: 72px;
+  border-radius: 18px;
+  background: linear-gradient(175deg, #7ce6b6 0%, #3dbb78 62%, #2d9f66 100%);
+  box-shadow: inset 0 6px 8px rgba(217, 255, 238, 0.36), inset 0 -8px 10px rgba(0, 0, 0, 0.18);
+}
+
+.android-date-badge {
+  position: absolute;
+  left: 50%;
+  top: 24px;
+  transform: translateX(-50%);
+  min-width: 76px;
+  text-align: center;
+  border-radius: 999px;
+  border: 1px solid rgba(186, 255, 226, 0.76);
+  background: rgba(10, 57, 40, 0.78);
+  color: #d6ffe9;
+  font-family: "JetBrains Mono", "Fira Mono", "Courier New", monospace;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  padding: 2px 7px;
+  box-shadow: 0 0 9px rgba(97, 235, 172, 0.4);
+}
+
+.android-arm,
+.android-leg {
+  position: absolute;
+  border-radius: 999px;
+  background: linear-gradient(175deg, #76dfaf 0%, #35af71 100%);
+}
+
+.android-arm {
+  top: 76px;
+  width: 14px;
+  height: 52px;
+}
+
+.android-arm.left { left: 12px; }
+.android-arm.right { right: 12px; }
+
+.android-leg {
+  top: 136px;
+  width: 16px;
+  height: 26px;
+}
+
+.android-leg.left { left: 51px; }
+.android-leg.right { left: 79px; }
+
+body[data-theme="material3"] .avatar-glow {
+  background: radial-gradient(circle, rgba(144, 238, 186, 0.46) 0%, rgba(89, 214, 157, 0.17) 58%, transparent 100%);
+}
+
+body[data-theme="material3"] .penguin-avatar {
+  display: none;
+}
+
+body[data-theme="material3"] .android-avatar {
+  display: block;
+}
+
+@keyframes android-idle {
+  0%,
+  100% { transform: translateY(0) rotate(0deg); }
+  50% { transform: translateY(-3px) rotate(-1deg); }
+}
+
 .terminal {
   margin-top: 0.52rem;
   border: 1px solid rgba(255, 151, 64, 0.35);

Original file line number	Diff line number	Diff line change
`@@ -29,6 +29,11 @@`
`29`	`29`	`if (selected !== savedTheme) {`
`30`	`30`	`window.localStorage.setItem(themeKey, selected);`
`31`	`31`	`}`
	`32`	`+ if (validThemes.has(savedTheme) && selected !== urlTheme) {`
	`33`	`+ const url = new URL(window.location.href);`
	`34`	`+ url.searchParams.set("theme", selected);`
	`35`	`+ window.history.replaceState(null, "", url.toString());`
	`36`	`+ }`
`32`	`37`	`}`
`33`	`38`	`} catch (error) {`
`34`	`39`	`// ignore`