prime8dev

commit dac0e8a77972d881b726d731d411cc2bd6c84708
parent 1f6f2c42f8ec2d345b4d1613aff621fb3da13d0c
Author: Damian Myrda <damian@prime8.dev>
Date:   Wed, 21 Jan 2026 18:03:17 -0600

feat: add accent color to boot screen progress bar and text

Diffstat:
M
web/src/layouts/Layout.astro
 | 
6
+++++-
M
web/src/scripts/ui/boot.ts
 | 
28
+++++++++++++++++++++++-----

2 files changed, 28 insertions(+), 6 deletions(-)
diff --git a/web/src/layouts/Layout.astro b/web/src/layouts/Layout.astro
@@ -405,7 +405,7 @@ const ogImage = image
   }
 
   .boot-terminal {
-    font-family: "JetBrains Mono", monospace;
+    font-family: "JetBrains Mono", "SF Mono", monospace;
     font-size: 14px;
     color: var(--fg);
     line-height: 1.6;
@@ -480,6 +480,10 @@ const ogImage = image
     font-weight: bold;
   }
 
+  .ansi-accent {
+    color: var(--accent);
+  }
+
   .ansi-bold-accent {
     color: var(--accent);
     font-weight: bold;
diff --git a/web/src/scripts/ui/boot.ts b/web/src/scripts/ui/boot.ts
@@ -125,7 +125,7 @@ async function runBootSequence(overlay: HTMLElement): Promise<void> {
   const startMsg = document.createElement("div");
   startMsg.className = "boot-line boot-line-hidden";
   startMsg.innerHTML =
-    '<br><span class="ansi-bold-white">Starting prime8dev...</span>';
+    '<br><span class="ansi-bold-white">Starting </span><span class="ansi-bold-accent">prime8dev</span><span class="ansi-bold-white">...</span>';
   content.appendChild(startMsg);
   await sleep(60);
   startMsg.classList.remove("boot-line-hidden");
@@ -140,11 +140,29 @@ async function runBootSequence(overlay: HTMLElement): Promise<void> {
   content.appendChild(progressBar);
 
   const progressWidth = 30;
+  const bar = "=".repeat(progressWidth);
+  
+  progressBar.innerHTML = `<span class="progress-wrapper">[<span class="progress-bar">${bar}</span>]</span> <span class="progress-percent">000</span><span class="progress-percent-sign">%</span>`;
+  progressBar.style.fontFamily = "monospace";
+  
+  const barEl = progressBar.querySelector(".progress-bar") as HTMLElement;
+  const percentEl = progressBar.querySelector(".progress-percent") as HTMLElement;
+  
+  barEl.style.background = `linear-gradient(to right, var(--accent) 0%, var(--accent) 0%, #606060 0%, #606060 100%)`;
+  barEl.style.webkitBackgroundClip = "text";
+  barEl.style.backgroundClip = "text";
+  barEl.style.color = "transparent";
+  
+  const percentSignEl = progressBar.querySelector(".progress-percent-sign") as HTMLElement;
+  percentSignEl.style.color = `var(--accent)`;
+  
   for (let i = 0; i <= progressWidth; i++) {
-    const filled = "=".repeat(i);
-    const arrow = i < progressWidth ? ">" : "=";
-    const empty = " ".repeat(progressWidth - i);
-    progressBar.innerHTML = `<span class="ansi-bold-white">[${filled}${arrow}${empty}]</span> ${Math.round((i / progressWidth) * 100)}%`;
+    const pct = (i / progressWidth) * 100;
+    barEl.style.background = `linear-gradient(to right, var(--accent) ${pct}%, #606060 ${pct}%)`;
+    barEl.style.webkitBackgroundClip = "text";
+    barEl.style.backgroundClip = "text";
+    percentEl.textContent = Math.round(pct).toString().padStart(3, " ");
+    percentEl.style.color = `var(--accent)`;
     await sleep(20);
   }