From 28ba6861e6ca35842e4cd039c642752f0ba48e52 Mon Sep 17 00:00:00 2001
From: alemoraru <alexradumoraru10@gmail.com>
Date: Fri, 20 Feb 2026 14:12:00 +0200
Subject: [PATCH 1/4] feat: index page improvements

---
 public/index.html | 162 +++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 152 insertions(+), 10 deletions(-)

diff --git a/public/index.html b/public/index.html
index f824a96..2d3210e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -369,6 +369,8 @@
         border: 2px solid #e2e8f0;
         font-size: 1.1em;
         transition: all 0.3s ease;
+        cursor: pointer;
+        user-select: none;
       }
 
       .theme-badge:hover {
@@ -377,6 +379,20 @@
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
       }
 
+      .preview-svg-wrapper {
+        margin-top: 25px;
+        display: flex;
+        justify-content: center;
+        overflow-x: auto;
+        padding: 5px 0;
+      }
+
+      .preview-svg-wrapper svg {
+        max-width: 100%;
+        height: auto;
+        border-radius: 8px;
+      }
+
       .cta-button {
         display: inline-block;
         background: #ff6b6b;
@@ -556,17 +572,100 @@ <h3 style="margin-bottom: 10px">Languages</h3>
       <div class="card">
         <h2>Available Themes</h2>
         <p style="margin-bottom: 20px; color: #5f6368">
-          Choose from these awesome themes:
+          Click a theme to preview it live:
         </p>
-        <div class="theme-grid">
-          <div class="theme-badge">default</div>
-          <div class="theme-badge">dark</div>
-          <div class="theme-badge">radical</div>
-          <div class="theme-badge">merko</div>
-          <div class="theme-badge">gruvbox</div>
-          <div class="theme-badge">tokyonight</div>
-          <div class="theme-badge">bubblegum</div>
-          <div class="theme-badge">ocean</div>
+        <div class="theme-grid" id="theme-grid">
+          <div class="theme-badge" data-theme="default">default</div>
+          <div class="theme-badge" data-theme="dark">dark</div>
+          <div class="theme-badge" data-theme="radical">radical</div>
+          <div class="theme-badge" data-theme="merko">merko</div>
+          <div class="theme-badge" data-theme="gruvbox">gruvbox</div>
+          <div class="theme-badge" data-theme="tokyonight">tokyonight</div>
+          <div class="theme-badge" data-theme="bubblegum">bubblegum</div>
+          <div class="theme-badge" data-theme="ocean">ocean</div>
+        </div>
+
+        <div class="preview-svg-wrapper">
+          <svg id="theme-preview-svg" width="500" height="240" viewBox="0 0 500 240"
+               xmlns="http://www.w3.org/2000/svg" role="img"
+               style="--preview-bg: #fffef9; --preview-title: #ff6b6b; --preview-text: #5f6368; --preview-icon: #4ecdc4; --preview-border: #ff6b6b;">
+            <defs>
+              <style>
+                @import url('https://fonts.googleapis.com/css2?family=Indie+Flower&amp;family=Permanent+Marker&amp;display=swap');
+                #theme-preview-svg .pv-bg { fill: var(--preview-bg); stroke: var(--preview-border); transition: fill 0.35s ease, stroke 0.35s ease; }
+                #theme-preview-svg .pv-title { fill: var(--preview-title); font: 700 22px 'Permanent Marker', 'Comic Sans MS', cursive; transition: fill 0.35s ease; }
+                #theme-preview-svg .pv-underline { stroke: var(--preview-title); transition: stroke 0.35s ease; }
+                #theme-preview-svg .pv-label { fill: var(--preview-text); font: 400 13px 'Indie Flower', 'Comic Sans MS', cursive; transition: fill 0.35s ease; }
+                #theme-preview-svg .pv-value { fill: var(--preview-title); font: 700 16px 'Indie Flower', 'Comic Sans MS', cursive; transition: fill 0.35s ease; }
+                #theme-preview-svg .pv-icon { fill: var(--preview-icon); transition: fill 0.35s ease; }
+                #theme-preview-svg .pv-box { stroke: var(--preview-text); transition: stroke 0.35s ease; }
+              </style>
+            </defs>
+
+            <!-- Background -->
+            <rect class="pv-bg" x="2" y="2" width="496" height="236" rx="4.5" stroke-width="2.5"/>
+
+            <!-- Title -->
+            <g transform="translate(25, 30) rotate(-1)">
+              <text class="pv-title" y="0">torvalds's GitHub Stats</text>
+              <path class="pv-underline" d="M 0 8 Q 50 10, 100 8 T 200 8" stroke-width="2" fill="none" opacity="0.5"/>
+            </g>
+
+            <!-- Stat 0: Total Stars -->
+            <g transform="translate(20, 55) rotate(-1.5)">
+              <rect class="pv-box" x="0" y="0" width="220" height="45" rx="8" ry="8"
+                    fill="rgba(255,255,255,0.05)" stroke-width="1.5" stroke-dasharray="3,3" opacity="0.4"/>
+              <svg x="8" y="8" width="16" height="16" viewBox="0 0 16 16">
+                <path class="pv-icon" fill-rule="evenodd" d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z"/>
+              </svg>
+              <text class="pv-label" x="30" y="20">Total Stars</text>
+              <text class="pv-value" x="30" y="36">12,456</text>
+            </g>
+
+            <!-- Stat 1: Total Commits -->
+            <g transform="translate(260, 55) rotate(1.2)">
+              <rect class="pv-box" x="0" y="0" width="220" height="45" rx="8" ry="8"
+                    fill="rgba(255,255,255,0.05)" stroke-width="1.5" stroke-dasharray="3,3" opacity="0.4"/>
+              <svg x="8" y="8" width="16" height="16" viewBox="0 0 16 16">
+                <path class="pv-icon" fill-rule="evenodd" d="M1.643 3.143L.427 1.927A.25.25 0 000 2.104V5.75c0 .138.112.25.25.25h3.646a.25.25 0 00.177-.427L2.715 4.215a6.5 6.5 0 11-1.18 4.458.75.75 0 10-1.493.154 8.001 8.001 0 101.6-5.684zM7.75 4a.75.75 0 01.75.75v2.992l2.028.812a.75.75 0 01-.557 1.392l-2.5-1A.75.75 0 017 8.25v-3.5A.75.75 0 017.75 4z"/>
+              </svg>
+              <text class="pv-label" x="30" y="20">Total Commits</text>
+              <text class="pv-value" x="30" y="36">4,892</text>
+            </g>
+
+            <!-- Stat 2: Total PRs -->
+            <g transform="translate(20, 115) rotate(0.8)">
+              <rect class="pv-box" x="0" y="0" width="220" height="45" rx="8" ry="8"
+                    fill="rgba(255,255,255,0.05)" stroke-width="1.5" stroke-dasharray="3,3" opacity="0.4"/>
+              <svg x="8" y="8" width="16" height="16" viewBox="0 0 16 16">
+                <path class="pv-icon" fill-rule="evenodd" d="M7.177 3.073L9.573.677A.25.25 0 0110 .854v4.792a.25.25 0 01-.427.177L7.177 3.427a.25.25 0 010-.354zM3.75 2.5a.75.75 0 100 1.5.75.75 0 000-1.5zm-2.25.75a2.25 2.25 0 113 2.122v5.256a2.251 2.251 0 11-1.5 0V5.372A2.25 2.25 0 011.5 3.25zM11 2.5h-1V4h1a1 1 0 011 1v5.628a2.251 2.251 0 101.5 0V5A2.5 2.5 0 0011 2.5zm1 10.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0zM3.75 12a.75.75 0 100 1.5.75.75 0 000-1.5z"/>
+              </svg>
+              <text class="pv-label" x="30" y="20">Total PRs</text>
+              <text class="pv-value" x="30" y="36">234</text>
+            </g>
+
+            <!-- Stat 3: Total Issues -->
+            <g transform="translate(260, 115) rotate(-1)">
+              <rect class="pv-box" x="0" y="0" width="220" height="45" rx="8" ry="8"
+                    fill="rgba(255,255,255,0.05)" stroke-width="1.5" stroke-dasharray="3,3" opacity="0.4"/>
+              <svg x="8" y="8" width="16" height="16" viewBox="0 0 16 16">
+                <path class="pv-icon" fill-rule="evenodd" d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm9 3a1 1 0 11-2 0 1 1 0 012 0zm-.25-6.25a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z"/>
+              </svg>
+              <text class="pv-label" x="30" y="20">Total Issues</text>
+              <text class="pv-value" x="30" y="36">891</text>
+            </g>
+
+            <!-- Stat 4: Total Repos -->
+            <g transform="translate(20, 175) rotate(1.5)">
+              <rect class="pv-box" x="0" y="0" width="220" height="45" rx="8" ry="8"
+                    fill="rgba(255,255,255,0.05)" stroke-width="1.5" stroke-dasharray="3,3" opacity="0.4"/>
+              <svg x="8" y="8" width="16" height="16" viewBox="0 0 16 16">
+                <path class="pv-icon" fill-rule="evenodd" d="M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z"/>
+              </svg>
+              <text class="pv-label" x="30" y="20">Total Repos</text>
+              <text class="pv-value" x="30" y="36">42</text>
+            </g>
+          </svg>
         </div>
       </div>
 
@@ -706,6 +805,49 @@ <h3>/api/repo</h3>
     </div>
 
     <script>
+      const themeColors = {
+        default:    { bg: "#fffef9", title: "#ff6b6b", text: "#5f6368", icon: "#4ecdc4", border: "#ff6b6b" },
+        dark:       { bg: "#1a1a2e", title: "#f4d35e", text: "#e8e8e8", icon: "#95e1d3", border: "#f4d35e" },
+        radical:    { bg: "#141321", title: "#ff6bcb", text: "#a9fef7", icon: "#ffd93d", border: "#ff6bcb" },
+        merko:      { bg: "#0f1c14", title: "#c1ff72", text: "#68b587", icon: "#ffeb3b", border: "#c1ff72" },
+        gruvbox:    { bg: "#282828", title: "#fabd2f", text: "#8ec07c", icon: "#fe8019", border: "#fabd2f" },
+        tokyonight: { bg: "#1a1b27", title: "#70a5fd", text: "#38bdae", icon: "#bf91f3", border: "#70a5fd" },
+        bubblegum:  { bg: "#fff0f5", title: "#ff1493", text: "#8b4789", icon: "#ff69b4", border: "#ff69b4" },
+        ocean:      { bg: "#e0f7ff", title: "#0077be", text: "#2c5f7c", icon: "#00d4ff", border: "#00a8e8" },
+      };
+
+      function applyTheme(themeName) {
+        const theme = themeColors[themeName];
+        if (!theme) return;
+
+        const svg = document.getElementById("theme-preview-svg");
+        svg.style.setProperty("--preview-bg", theme.bg);
+        svg.style.setProperty("--preview-title", theme.title);
+        svg.style.setProperty("--preview-text", theme.text);
+        svg.style.setProperty("--preview-icon", theme.icon);
+        svg.style.setProperty("--preview-border", theme.border);
+
+        document.querySelectorAll("#theme-grid .theme-badge").forEach((badge) => {
+          const isActive = badge.dataset.theme === themeName;
+          badge.classList.toggle("active", isActive);
+          if (isActive) {
+            badge.style.background = theme.bg;
+            badge.style.color = theme.title;
+            badge.style.borderColor = theme.border;
+          } else {
+            badge.style.background = "";
+            badge.style.color = "";
+            badge.style.borderColor = "";
+          }
+        });
+      }
+
+      document.querySelectorAll("#theme-grid .theme-badge").forEach((badge) => {
+        badge.addEventListener("click", () => applyTheme(badge.dataset.theme));
+      });
+
+      applyTheme("default");
+
       function copyToClipboard(button) {
         const codeBlock = button.parentElement;
         const codeText = codeBlock.querySelector(".code-text").textContent;

From 9e360ac30df1d967dca5f0757ba7ac97f5c28c1b Mon Sep 17 00:00:00 2001
From: alemoraru <alexradumoraru10@gmail.com>
Date: Fri, 20 Feb 2026 14:31:55 +0200
Subject: [PATCH 2/4] feat: index page improvements

---
 public/index.html | 242 +++++++++++++++++++++++++++++++++++-----------
 1 file changed, 188 insertions(+), 54 deletions(-)

diff --git a/public/index.html b/public/index.html
index 2d3210e..46aa39d 100644
--- a/public/index.html
+++ b/public/index.html
@@ -393,6 +393,41 @@
         border-radius: 8px;
       }
 
+      .card-type-selector {
+        display: flex;
+        margin-bottom: 25px;
+        border-radius: 8px;
+        overflow: hidden;
+        border: 2px solid #e2e8f0;
+        width: fit-content;
+      }
+
+      .card-type-btn {
+        background: #f7fafc;
+        border: none;
+        border-right: 2px solid #e2e8f0;
+        padding: 10px 18px;
+        cursor: pointer;
+        font-family: "Indie Flower", "Comic Sans MS", cursive;
+        font-size: 1em;
+        color: #5f6368;
+        transition: all 0.25s ease;
+      }
+
+      .card-type-btn:last-child {
+        border-right: none;
+      }
+
+      .card-type-btn:hover {
+        background: #fff5f5;
+        color: #ff6b6b;
+      }
+
+      .card-type-btn.active {
+        background: #ff6b6b;
+        color: white;
+      }
+
       .cta-button {
         display: inline-block;
         background: #ff6b6b;
@@ -570,7 +605,15 @@ <h3 style="margin-bottom: 10px">Languages</h3>
       </div>
 
       <div class="card">
-        <h2>Available Themes</h2>
+        <h2>Available Card Types & Themes</h2>
+        <p style="margin-bottom: 15px; color: #5f6368">
+          Choose a card type:
+        </p>
+        <div class="card-type-selector">
+          <button class="card-type-btn active" data-card="stats">User Stats</button>
+          <button class="card-type-btn" data-card="repo">Repo Stats</button>
+          <button class="card-type-btn" data-card="langs">Top Languages</button>
+        </div>
         <p style="margin-bottom: 20px; color: #5f6368">
           Click a theme to preview it live:
         </p>
@@ -586,86 +629,162 @@ <h2>Available Themes</h2>
         </div>
 
         <div class="preview-svg-wrapper">
-          <svg id="theme-preview-svg" width="500" height="240" viewBox="0 0 500 240"
+          <!-- User Stats Card Preview -->
+          <svg class="preview-svg" id="preview-stats" width="500" height="240" viewBox="0 0 500 240"
                xmlns="http://www.w3.org/2000/svg" role="img"
                style="--preview-bg: #fffef9; --preview-title: #ff6b6b; --preview-text: #5f6368; --preview-icon: #4ecdc4; --preview-border: #ff6b6b;">
             <defs>
               <style>
                 @import url('https://fonts.googleapis.com/css2?family=Indie+Flower&amp;family=Permanent+Marker&amp;display=swap');
-                #theme-preview-svg .pv-bg { fill: var(--preview-bg); stroke: var(--preview-border); transition: fill 0.35s ease, stroke 0.35s ease; }
-                #theme-preview-svg .pv-title { fill: var(--preview-title); font: 700 22px 'Permanent Marker', 'Comic Sans MS', cursive; transition: fill 0.35s ease; }
-                #theme-preview-svg .pv-underline { stroke: var(--preview-title); transition: stroke 0.35s ease; }
-                #theme-preview-svg .pv-label { fill: var(--preview-text); font: 400 13px 'Indie Flower', 'Comic Sans MS', cursive; transition: fill 0.35s ease; }
-                #theme-preview-svg .pv-value { fill: var(--preview-title); font: 700 16px 'Indie Flower', 'Comic Sans MS', cursive; transition: fill 0.35s ease; }
-                #theme-preview-svg .pv-icon { fill: var(--preview-icon); transition: fill 0.35s ease; }
-                #theme-preview-svg .pv-box { stroke: var(--preview-text); transition: stroke 0.35s ease; }
+                #preview-stats .pv-bg { fill: var(--preview-bg); stroke: var(--preview-border); transition: fill 0.35s ease, stroke 0.35s ease; }
+                #preview-stats .pv-title { fill: var(--preview-title); font: 700 22px 'Permanent Marker', 'Comic Sans MS', cursive; transition: fill 0.35s ease; }
+                #preview-stats .pv-underline { stroke: var(--preview-title); transition: stroke 0.35s ease; }
+                #preview-stats .pv-label { fill: var(--preview-text); font: 400 13px 'Indie Flower', 'Comic Sans MS', cursive; transition: fill 0.35s ease; }
+                #preview-stats .pv-value { fill: var(--preview-title); font: 700 16px 'Indie Flower', 'Comic Sans MS', cursive; transition: fill 0.35s ease; }
+                #preview-stats .pv-icon { fill: var(--preview-icon); transition: fill 0.35s ease; }
+                #preview-stats .pv-box { stroke: var(--preview-text); transition: stroke 0.35s ease; }
               </style>
             </defs>
-
-            <!-- Background -->
             <rect class="pv-bg" x="2" y="2" width="496" height="236" rx="4.5" stroke-width="2.5"/>
-
-            <!-- Title -->
             <g transform="translate(25, 30) rotate(-1)">
               <text class="pv-title" y="0">torvalds's GitHub Stats</text>
               <path class="pv-underline" d="M 0 8 Q 50 10, 100 8 T 200 8" stroke-width="2" fill="none" opacity="0.5"/>
             </g>
-
-            <!-- Stat 0: Total Stars -->
             <g transform="translate(20, 55) rotate(-1.5)">
-              <rect class="pv-box" x="0" y="0" width="220" height="45" rx="8" ry="8"
-                    fill="rgba(255,255,255,0.05)" stroke-width="1.5" stroke-dasharray="3,3" opacity="0.4"/>
-              <svg x="8" y="8" width="16" height="16" viewBox="0 0 16 16">
-                <path class="pv-icon" fill-rule="evenodd" d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z"/>
-              </svg>
+              <rect class="pv-box" x="0" y="0" width="220" height="45" rx="8" ry="8" fill="rgba(255,255,255,0.05)" stroke-width="1.5" stroke-dasharray="3,3" opacity="0.4"/>
+              <svg x="8" y="8" width="16" height="16" viewBox="0 0 16 16"><path class="pv-icon" fill-rule="evenodd" d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z"/></svg>
               <text class="pv-label" x="30" y="20">Total Stars</text>
               <text class="pv-value" x="30" y="36">12,456</text>
             </g>
-
-            <!-- Stat 1: Total Commits -->
             <g transform="translate(260, 55) rotate(1.2)">
-              <rect class="pv-box" x="0" y="0" width="220" height="45" rx="8" ry="8"
-                    fill="rgba(255,255,255,0.05)" stroke-width="1.5" stroke-dasharray="3,3" opacity="0.4"/>
-              <svg x="8" y="8" width="16" height="16" viewBox="0 0 16 16">
-                <path class="pv-icon" fill-rule="evenodd" d="M1.643 3.143L.427 1.927A.25.25 0 000 2.104V5.75c0 .138.112.25.25.25h3.646a.25.25 0 00.177-.427L2.715 4.215a6.5 6.5 0 11-1.18 4.458.75.75 0 10-1.493.154 8.001 8.001 0 101.6-5.684zM7.75 4a.75.75 0 01.75.75v2.992l2.028.812a.75.75 0 01-.557 1.392l-2.5-1A.75.75 0 017 8.25v-3.5A.75.75 0 017.75 4z"/>
-              </svg>
+              <rect class="pv-box" x="0" y="0" width="220" height="45" rx="8" ry="8" fill="rgba(255,255,255,0.05)" stroke-width="1.5" stroke-dasharray="3,3" opacity="0.4"/>
+              <svg x="8" y="8" width="16" height="16" viewBox="0 0 16 16"><path class="pv-icon" fill-rule="evenodd" d="M1.643 3.143L.427 1.927A.25.25 0 000 2.104V5.75c0 .138.112.25.25.25h3.646a.25.25 0 00.177-.427L2.715 4.215a6.5 6.5 0 11-1.18 4.458.75.75 0 10-1.493.154 8.001 8.001 0 101.6-5.684zM7.75 4a.75.75 0 01.75.75v2.992l2.028.812a.75.75 0 01-.557 1.392l-2.5-1A.75.75 0 017 8.25v-3.5A.75.75 0 017.75 4z"/></svg>
               <text class="pv-label" x="30" y="20">Total Commits</text>
               <text class="pv-value" x="30" y="36">4,892</text>
             </g>
-
-            <!-- Stat 2: Total PRs -->
             <g transform="translate(20, 115) rotate(0.8)">
-              <rect class="pv-box" x="0" y="0" width="220" height="45" rx="8" ry="8"
-                    fill="rgba(255,255,255,0.05)" stroke-width="1.5" stroke-dasharray="3,3" opacity="0.4"/>
-              <svg x="8" y="8" width="16" height="16" viewBox="0 0 16 16">
-                <path class="pv-icon" fill-rule="evenodd" d="M7.177 3.073L9.573.677A.25.25 0 0110 .854v4.792a.25.25 0 01-.427.177L7.177 3.427a.25.25 0 010-.354zM3.75 2.5a.75.75 0 100 1.5.75.75 0 000-1.5zm-2.25.75a2.25 2.25 0 113 2.122v5.256a2.251 2.251 0 11-1.5 0V5.372A2.25 2.25 0 011.5 3.25zM11 2.5h-1V4h1a1 1 0 011 1v5.628a2.251 2.251 0 101.5 0V5A2.5 2.5 0 0011 2.5zm1 10.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0zM3.75 12a.75.75 0 100 1.5.75.75 0 000-1.5z"/>
-              </svg>
+              <rect class="pv-box" x="0" y="0" width="220" height="45" rx="8" ry="8" fill="rgba(255,255,255,0.05)" stroke-width="1.5" stroke-dasharray="3,3" opacity="0.4"/>
+              <svg x="8" y="8" width="16" height="16" viewBox="0 0 16 16"><path class="pv-icon" fill-rule="evenodd" d="M7.177 3.073L9.573.677A.25.25 0 0110 .854v4.792a.25.25 0 01-.427.177L7.177 3.427a.25.25 0 010-.354zM3.75 2.5a.75.75 0 100 1.5.75.75 0 000-1.5zm-2.25.75a2.25 2.25 0 113 2.122v5.256a2.251 2.251 0 11-1.5 0V5.372A2.25 2.25 0 011.5 3.25zM11 2.5h-1V4h1a1 1 0 011 1v5.628a2.251 2.251 0 101.5 0V5A2.5 2.5 0 0011 2.5zm1 10.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0zM3.75 12a.75.75 0 100 1.5.75.75 0 000-1.5z"/></svg>
               <text class="pv-label" x="30" y="20">Total PRs</text>
               <text class="pv-value" x="30" y="36">234</text>
             </g>
-
-            <!-- Stat 3: Total Issues -->
             <g transform="translate(260, 115) rotate(-1)">
-              <rect class="pv-box" x="0" y="0" width="220" height="45" rx="8" ry="8"
-                    fill="rgba(255,255,255,0.05)" stroke-width="1.5" stroke-dasharray="3,3" opacity="0.4"/>
-              <svg x="8" y="8" width="16" height="16" viewBox="0 0 16 16">
-                <path class="pv-icon" fill-rule="evenodd" d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm9 3a1 1 0 11-2 0 1 1 0 012 0zm-.25-6.25a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z"/>
-              </svg>
+              <rect class="pv-box" x="0" y="0" width="220" height="45" rx="8" ry="8" fill="rgba(255,255,255,0.05)" stroke-width="1.5" stroke-dasharray="3,3" opacity="0.4"/>
+              <svg x="8" y="8" width="16" height="16" viewBox="0 0 16 16"><path class="pv-icon" fill-rule="evenodd" d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm9 3a1 1 0 11-2 0 1 1 0 012 0zm-.25-6.25a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z"/></svg>
               <text class="pv-label" x="30" y="20">Total Issues</text>
               <text class="pv-value" x="30" y="36">891</text>
             </g>
-
-            <!-- Stat 4: Total Repos -->
             <g transform="translate(20, 175) rotate(1.5)">
-              <rect class="pv-box" x="0" y="0" width="220" height="45" rx="8" ry="8"
-                    fill="rgba(255,255,255,0.05)" stroke-width="1.5" stroke-dasharray="3,3" opacity="0.4"/>
-              <svg x="8" y="8" width="16" height="16" viewBox="0 0 16 16">
-                <path class="pv-icon" fill-rule="evenodd" d="M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z"/>
-              </svg>
+              <rect class="pv-box" x="0" y="0" width="220" height="45" rx="8" ry="8" fill="rgba(255,255,255,0.05)" stroke-width="1.5" stroke-dasharray="3,3" opacity="0.4"/>
+              <svg x="8" y="8" width="16" height="16" viewBox="0 0 16 16"><path class="pv-icon" fill-rule="evenodd" d="M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z"/></svg>
               <text class="pv-label" x="30" y="20">Total Repos</text>
               <text class="pv-value" x="30" y="36">42</text>
             </g>
           </svg>
+
+          <!-- Repo Stats Card Preview -->
+          <svg class="preview-svg" id="preview-repo" width="500" height="200" viewBox="0 0 500 200"
+               xmlns="http://www.w3.org/2000/svg" role="img" style="display: none;">
+            <defs>
+              <style>
+                @import url('https://fonts.googleapis.com/css2?family=Indie+Flower&amp;family=Permanent+Marker&amp;display=swap');
+                #preview-repo .pv-bg { fill: var(--preview-bg); stroke: var(--preview-border); transition: fill 0.35s ease, stroke 0.35s ease; }
+                #preview-repo .pv-title { fill: var(--preview-title); font: 700 22px 'Permanent Marker', 'Comic Sans MS', cursive; transition: fill 0.35s ease; }
+                #preview-repo .pv-underline { stroke: var(--preview-title); transition: stroke 0.35s ease; }
+                #preview-repo .pv-label { fill: var(--preview-text); font: 400 13px 'Indie Flower', 'Comic Sans MS', cursive; transition: fill 0.35s ease; }
+                #preview-repo .pv-value { fill: var(--preview-title); font: 700 16px 'Indie Flower', 'Comic Sans MS', cursive; transition: fill 0.35s ease; }
+                #preview-repo .pv-icon { fill: var(--preview-icon); transition: fill 0.35s ease; }
+                #preview-repo .pv-box { stroke: var(--preview-text); transition: stroke 0.35s ease; }
+              </style>
+            </defs>
+            <rect class="pv-bg" x="2" y="2" width="496" height="196" rx="4.5" stroke-width="2.5"/>
+            <g transform="translate(25, 30) rotate(-1)">
+              <text class="pv-title" y="0">torvalds/linux</text>
+              <path class="pv-underline" d="M 0 8 Q 50 10, 100 8 T 200 8" stroke-width="2" fill="none" opacity="0.5"/>
+            </g>
+            <g transform="translate(20, 55) rotate(-1.5)">
+              <rect class="pv-box" x="0" y="0" width="220" height="45" rx="8" ry="8" fill="rgba(255,255,255,0.05)" stroke-width="1.5" stroke-dasharray="3,3" opacity="0.4"/>
+              <svg x="8" y="8" width="16" height="16" viewBox="0 0 16 16"><path class="pv-icon" fill-rule="evenodd" d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z"/></svg>
+              <text class="pv-label" x="30" y="20">Stars</text>
+              <text class="pv-value" x="30" y="36">180,432</text>
+            </g>
+            <g transform="translate(260, 55) rotate(1.2)">
+              <rect class="pv-box" x="0" y="0" width="220" height="45" rx="8" ry="8" fill="rgba(255,255,255,0.05)" stroke-width="1.5" stroke-dasharray="3,3" opacity="0.4"/>
+              <svg x="8" y="8" width="16" height="16" viewBox="0 0 16 16"><path class="pv-icon" fill-rule="evenodd" d="M5 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 2.122a2.25 2.25 0 10-1.5 0v.878A2.25 2.25 0 005.75 8.5h1.5v2.128a2.251 2.251 0 101.5 0V8.5h1.5a2.25 2.25 0 002.25-2.25v-.878a2.25 2.25 0 10-1.5 0v.878a.75.75 0 01-.75.75h-4.5A.75.75 0 015 6.25v-.878zm3.75 7.378a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm3-8.75a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"/></svg>
+              <text class="pv-label" x="30" y="20">Forks</text>
+              <text class="pv-value" x="30" y="36">52,841</text>
+            </g>
+            <g transform="translate(20, 115) rotate(0.8)">
+              <rect class="pv-box" x="0" y="0" width="220" height="45" rx="8" ry="8" fill="rgba(255,255,255,0.05)" stroke-width="1.5" stroke-dasharray="3,3" opacity="0.4"/>
+              <svg x="8" y="8" width="16" height="16" viewBox="0 0 16 16"><path class="pv-icon" fill-rule="evenodd" d="M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z"/></svg>
+              <text class="pv-label" x="30" y="20">Language</text>
+              <text class="pv-value" x="30" y="36">C</text>
+            </g>
+            <g transform="translate(260, 115) rotate(-1)">
+              <rect class="pv-box" x="0" y="0" width="220" height="45" rx="8" ry="8" fill="rgba(255,255,255,0.05)" stroke-width="1.5" stroke-dasharray="3,3" opacity="0.4"/>
+              <svg x="8" y="8" width="16" height="16" viewBox="0 0 16 16"><path class="pv-icon" fill-rule="evenodd" d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm9 3a1 1 0 11-2 0 1 1 0 012 0zm-.25-6.25a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z"/></svg>
+              <text class="pv-label" x="30" y="20">Open Issues</text>
+              <text class="pv-value" x="30" y="36">438</text>
+            </g>
+          </svg>
+
+          <!-- Top Languages Card Preview -->
+          <svg class="preview-svg" id="preview-langs" width="450" height="340" viewBox="0 0 450 340"
+               xmlns="http://www.w3.org/2000/svg" role="img" style="display: none;">
+            <defs>
+              <style>
+                @import url('https://fonts.googleapis.com/css2?family=Indie+Flower&amp;family=Permanent+Marker&amp;display=swap');
+                #preview-langs .pv-bg { fill: var(--preview-bg); stroke: var(--preview-border); transition: fill 0.35s ease, stroke 0.35s ease; }
+                #preview-langs .pv-title { fill: var(--preview-title); font: 700 22px 'Permanent Marker', 'Comic Sans MS', cursive; transition: fill 0.35s ease; }
+                #preview-langs .pv-underline { stroke: var(--preview-title); transition: stroke 0.35s ease; }
+                #preview-langs .pv-label { fill: var(--preview-text); font: 400 13px 'Indie Flower', 'Comic Sans MS', cursive; transition: fill 0.35s ease; }
+                #preview-langs .pv-value { fill: var(--preview-title); font: 700 16px 'Indie Flower', 'Comic Sans MS', cursive; transition: fill 0.35s ease; }
+                #preview-langs .pv-box { stroke: var(--preview-text); transition: stroke 0.35s ease; }
+                #preview-langs .pv-lang-bar-bg { stroke: var(--preview-border); transition: stroke 0.35s ease; }
+                #preview-langs .pv-lang-bar { fill: var(--preview-icon); transition: fill 0.35s ease; }
+              </style>
+            </defs>
+            <rect class="pv-bg" x="2" y="2" width="446" height="336" rx="4.5" stroke-width="2.5"/>
+            <g transform="translate(25, 30) rotate(-1)">
+              <text class="pv-title" y="0">torvalds's Top Languages</text>
+              <path class="pv-underline" d="M 0 8 Q 50 10, 100 8 T 200 8" stroke-width="2" fill="none" opacity="0.5"/>
+            </g>
+            <g transform="translate(20, 55)">
+              <rect class="pv-box" x="0" y="0" width="410" height="40" rx="8" ry="8" fill="rgba(255,255,255,0.03)" stroke-width="1.5" stroke-dasharray="3,3" opacity="0.3"/>
+              <text class="pv-label" x="15" y="16">C</text>
+              <text class="pv-value" x="385" y="16" text-anchor="end">92.5%</text>
+              <rect class="pv-lang-bar-bg" x="15" y="22" width="380" height="10" rx="5" ry="5" fill="none" stroke-width="1" opacity="0.3"/>
+              <rect class="pv-lang-bar" x="15" y="22" width="333" height="10" rx="5" ry="5" opacity="0.8"/>
+            </g>
+            <g transform="translate(20, 105)">
+              <rect class="pv-box" x="0" y="0" width="410" height="40" rx="8" ry="8" fill="rgba(255,255,255,0.03)" stroke-width="1.5" stroke-dasharray="3,3" opacity="0.3"/>
+              <text class="pv-label" x="15" y="16">Python</text>
+              <text class="pv-value" x="385" y="16" text-anchor="end">3.2%</text>
+              <rect class="pv-lang-bar-bg" x="15" y="22" width="380" height="10" rx="5" ry="5" fill="none" stroke-width="1" opacity="0.3"/>
+              <rect class="pv-lang-bar" x="15" y="22" width="12" height="10" rx="5" ry="5" opacity="0.8"/>
+            </g>
+            <g transform="translate(20, 155)">
+              <rect class="pv-box" x="0" y="0" width="410" height="40" rx="8" ry="8" fill="rgba(255,255,255,0.03)" stroke-width="1.5" stroke-dasharray="3,3" opacity="0.3"/>
+              <text class="pv-label" x="15" y="16">Makefile</text>
+              <text class="pv-value" x="385" y="16" text-anchor="end">1.8%</text>
+              <rect class="pv-lang-bar-bg" x="15" y="22" width="380" height="10" rx="5" ry="5" fill="none" stroke-width="1" opacity="0.3"/>
+              <rect class="pv-lang-bar" x="15" y="22" width="7" height="10" rx="5" ry="5" opacity="0.8"/>
+            </g>
+            <g transform="translate(20, 205)">
+              <rect class="pv-box" x="0" y="0" width="410" height="40" rx="8" ry="8" fill="rgba(255,255,255,0.03)" stroke-width="1.5" stroke-dasharray="3,3" opacity="0.3"/>
+              <text class="pv-label" x="15" y="16">Shell</text>
+              <text class="pv-value" x="385" y="16" text-anchor="end">1.2%</text>
+              <rect class="pv-lang-bar-bg" x="15" y="22" width="380" height="10" rx="5" ry="5" fill="none" stroke-width="1" opacity="0.3"/>
+              <rect class="pv-lang-bar" x="15" y="22" width="4" height="10" rx="5" ry="5" opacity="0.8"/>
+            </g>
+            <g transform="translate(20, 255)">
+              <rect class="pv-box" x="0" y="0" width="410" height="40" rx="8" ry="8" fill="rgba(255,255,255,0.03)" stroke-width="1.5" stroke-dasharray="3,3" opacity="0.3"/>
+              <text class="pv-label" x="15" y="16">Perl</text>
+              <text class="pv-value" x="385" y="16" text-anchor="end">0.9%</text>
+              <rect class="pv-lang-bar-bg" x="15" y="22" width="380" height="10" rx="5" ry="5" fill="none" stroke-width="1" opacity="0.3"/>
+              <rect class="pv-lang-bar" x="15" y="22" width="3" height="10" rx="5" ry="5" opacity="0.8"/>
+            </g>
+          </svg>
         </div>
       </div>
 
@@ -820,12 +939,13 @@ <h3>/api/repo</h3>
         const theme = themeColors[themeName];
         if (!theme) return;
 
-        const svg = document.getElementById("theme-preview-svg");
-        svg.style.setProperty("--preview-bg", theme.bg);
-        svg.style.setProperty("--preview-title", theme.title);
-        svg.style.setProperty("--preview-text", theme.text);
-        svg.style.setProperty("--preview-icon", theme.icon);
-        svg.style.setProperty("--preview-border", theme.border);
+        document.querySelectorAll(".preview-svg").forEach((svg) => {
+          svg.style.setProperty("--preview-bg", theme.bg);
+          svg.style.setProperty("--preview-title", theme.title);
+          svg.style.setProperty("--preview-text", theme.text);
+          svg.style.setProperty("--preview-icon", theme.icon);
+          svg.style.setProperty("--preview-border", theme.border);
+        });
 
         document.querySelectorAll("#theme-grid .theme-badge").forEach((badge) => {
           const isActive = badge.dataset.theme === themeName;
@@ -842,11 +962,25 @@ <h3>/api/repo</h3>
         });
       }
 
+      function switchCardType(cardType) {
+        document.querySelectorAll(".preview-svg").forEach((svg) => {
+          svg.style.display = svg.id === "preview-" + cardType ? "block" : "none";
+        });
+        document.querySelectorAll(".card-type-btn").forEach((btn) => {
+          btn.classList.toggle("active", btn.dataset.card === cardType);
+        });
+      }
+
       document.querySelectorAll("#theme-grid .theme-badge").forEach((badge) => {
         badge.addEventListener("click", () => applyTheme(badge.dataset.theme));
       });
 
+      document.querySelectorAll(".card-type-btn").forEach((btn) => {
+        btn.addEventListener("click", () => switchCardType(btn.dataset.card));
+      });
+
       applyTheme("default");
+      switchCardType("stats");
 
       function copyToClipboard(button) {
         const codeBlock = button.parentElement;

From 6255202b5a6a75e3d9f440d62649dad303f132a9 Mon Sep 17 00:00:00 2001
From: alemoraru <alexradumoraru10@gmail.com>
Date: Fri, 20 Feb 2026 14:33:54 +0200
Subject: [PATCH 3/4] feat: index page improvements

---
 public/index.html | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/public/index.html b/public/index.html
index 46aa39d..7ade1a7 100644
--- a/public/index.html
+++ b/public/index.html
@@ -471,6 +471,15 @@
         .card {
           padding: 20px;
         }
+        .theme-grid {
+          grid-template-columns: repeat(2, 1fr);
+        }
+        .card-type-selector {
+          width: 100%;
+        }
+        .card-type-btn {
+          flex: 1;
+        }
       }
 
       /* Wiggle animation for fun */

From 23444f9a458bef68e752fe2abcc0637dbfeb81d7 Mon Sep 17 00:00:00 2001
From: alemoraru <alexradumoraru10@gmail.com>
Date: Fri, 20 Feb 2026 14:35:19 +0200
Subject: [PATCH 4/4] fix: styling

---
 public/index.html | 769 ++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 667 insertions(+), 102 deletions(-)

diff --git a/public/index.html b/public/index.html
index 7ade1a7..507c00b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -615,11 +615,11 @@ <h3 style="margin-bottom: 10px">Languages</h3>
 
       <div class="card">
         <h2>Available Card Types & Themes</h2>
-        <p style="margin-bottom: 15px; color: #5f6368">
-          Choose a card type:
-        </p>
+        <p style="margin-bottom: 15px; color: #5f6368">Choose a card type:</p>
         <div class="card-type-selector">
-          <button class="card-type-btn active" data-card="stats">User Stats</button>
+          <button class="card-type-btn active" data-card="stats">
+            User Stats
+          </button>
           <button class="card-type-btn" data-card="repo">Repo Stats</button>
           <button class="card-type-btn" data-card="langs">Top Languages</button>
         </div>
@@ -639,159 +639,673 @@ <h2>Available Card Types & Themes</h2>
 
         <div class="preview-svg-wrapper">
           <!-- User Stats Card Preview -->
-          <svg class="preview-svg" id="preview-stats" width="500" height="240" viewBox="0 0 500 240"
-               xmlns="http://www.w3.org/2000/svg" role="img"
-               style="--preview-bg: #fffef9; --preview-title: #ff6b6b; --preview-text: #5f6368; --preview-icon: #4ecdc4; --preview-border: #ff6b6b;">
+          <svg
+            class="preview-svg"
+            id="preview-stats"
+            width="500"
+            height="240"
+            viewBox="0 0 500 240"
+            xmlns="http://www.w3.org/2000/svg"
+            role="img"
+            style="
+              --preview-bg: #fffef9;
+              --preview-title: #ff6b6b;
+              --preview-text: #5f6368;
+              --preview-icon: #4ecdc4;
+              --preview-border: #ff6b6b;
+            "
+          >
             <defs>
               <style>
-                @import url('https://fonts.googleapis.com/css2?family=Indie+Flower&amp;family=Permanent+Marker&amp;display=swap');
-                #preview-stats .pv-bg { fill: var(--preview-bg); stroke: var(--preview-border); transition: fill 0.35s ease, stroke 0.35s ease; }
-                #preview-stats .pv-title { fill: var(--preview-title); font: 700 22px 'Permanent Marker', 'Comic Sans MS', cursive; transition: fill 0.35s ease; }
-                #preview-stats .pv-underline { stroke: var(--preview-title); transition: stroke 0.35s ease; }
-                #preview-stats .pv-label { fill: var(--preview-text); font: 400 13px 'Indie Flower', 'Comic Sans MS', cursive; transition: fill 0.35s ease; }
-                #preview-stats .pv-value { fill: var(--preview-title); font: 700 16px 'Indie Flower', 'Comic Sans MS', cursive; transition: fill 0.35s ease; }
-                #preview-stats .pv-icon { fill: var(--preview-icon); transition: fill 0.35s ease; }
-                #preview-stats .pv-box { stroke: var(--preview-text); transition: stroke 0.35s ease; }
+                @import url("https://fonts.googleapis.com/css2?family=Indie+Flower&amp;family=Permanent+Marker&amp;display=swap");
+                #preview-stats .pv-bg {
+                  fill: var(--preview-bg);
+                  stroke: var(--preview-border);
+                  transition:
+                    fill 0.35s ease,
+                    stroke 0.35s ease;
+                }
+                #preview-stats .pv-title {
+                  fill: var(--preview-title);
+                  font:
+                    700 22px "Permanent Marker",
+                    "Comic Sans MS",
+                    cursive;
+                  transition: fill 0.35s ease;
+                }
+                #preview-stats .pv-underline {
+                  stroke: var(--preview-title);
+                  transition: stroke 0.35s ease;
+                }
+                #preview-stats .pv-label {
+                  fill: var(--preview-text);
+                  font:
+                    400 13px "Indie Flower",
+                    "Comic Sans MS",
+                    cursive;
+                  transition: fill 0.35s ease;
+                }
+                #preview-stats .pv-value {
+                  fill: var(--preview-title);
+                  font:
+                    700 16px "Indie Flower",
+                    "Comic Sans MS",
+                    cursive;
+                  transition: fill 0.35s ease;
+                }
+                #preview-stats .pv-icon {
+                  fill: var(--preview-icon);
+                  transition: fill 0.35s ease;
+                }
+                #preview-stats .pv-box {
+                  stroke: var(--preview-text);
+                  transition: stroke 0.35s ease;
+                }
               </style>
             </defs>
-            <rect class="pv-bg" x="2" y="2" width="496" height="236" rx="4.5" stroke-width="2.5"/>
+            <rect
+              class="pv-bg"
+              x="2"
+              y="2"
+              width="496"
+              height="236"
+              rx="4.5"
+              stroke-width="2.5"
+            />
             <g transform="translate(25, 30) rotate(-1)">
               <text class="pv-title" y="0">torvalds's GitHub Stats</text>
-              <path class="pv-underline" d="M 0 8 Q 50 10, 100 8 T 200 8" stroke-width="2" fill="none" opacity="0.5"/>
+              <path
+                class="pv-underline"
+                d="M 0 8 Q 50 10, 100 8 T 200 8"
+                stroke-width="2"
+                fill="none"
+                opacity="0.5"
+              />
             </g>
             <g transform="translate(20, 55) rotate(-1.5)">
-              <rect class="pv-box" x="0" y="0" width="220" height="45" rx="8" ry="8" fill="rgba(255,255,255,0.05)" stroke-width="1.5" stroke-dasharray="3,3" opacity="0.4"/>
-              <svg x="8" y="8" width="16" height="16" viewBox="0 0 16 16"><path class="pv-icon" fill-rule="evenodd" d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z"/></svg>
+              <rect
+                class="pv-box"
+                x="0"
+                y="0"
+                width="220"
+                height="45"
+                rx="8"
+                ry="8"
+                fill="rgba(255,255,255,0.05)"
+                stroke-width="1.5"
+                stroke-dasharray="3,3"
+                opacity="0.4"
+              />
+              <svg x="8" y="8" width="16" height="16" viewBox="0 0 16 16">
+                <path
+                  class="pv-icon"
+                  fill-rule="evenodd"
+                  d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z"
+                />
+              </svg>
               <text class="pv-label" x="30" y="20">Total Stars</text>
               <text class="pv-value" x="30" y="36">12,456</text>
             </g>
             <g transform="translate(260, 55) rotate(1.2)">
-              <rect class="pv-box" x="0" y="0" width="220" height="45" rx="8" ry="8" fill="rgba(255,255,255,0.05)" stroke-width="1.5" stroke-dasharray="3,3" opacity="0.4"/>
-              <svg x="8" y="8" width="16" height="16" viewBox="0 0 16 16"><path class="pv-icon" fill-rule="evenodd" d="M1.643 3.143L.427 1.927A.25.25 0 000 2.104V5.75c0 .138.112.25.25.25h3.646a.25.25 0 00.177-.427L2.715 4.215a6.5 6.5 0 11-1.18 4.458.75.75 0 10-1.493.154 8.001 8.001 0 101.6-5.684zM7.75 4a.75.75 0 01.75.75v2.992l2.028.812a.75.75 0 01-.557 1.392l-2.5-1A.75.75 0 017 8.25v-3.5A.75.75 0 017.75 4z"/></svg>
+              <rect
+                class="pv-box"
+                x="0"
+                y="0"
+                width="220"
+                height="45"
+                rx="8"
+                ry="8"
+                fill="rgba(255,255,255,0.05)"
+                stroke-width="1.5"
+                stroke-dasharray="3,3"
+                opacity="0.4"
+              />
+              <svg x="8" y="8" width="16" height="16" viewBox="0 0 16 16">
+                <path
+                  class="pv-icon"
+                  fill-rule="evenodd"
+                  d="M1.643 3.143L.427 1.927A.25.25 0 000 2.104V5.75c0 .138.112.25.25.25h3.646a.25.25 0 00.177-.427L2.715 4.215a6.5 6.5 0 11-1.18 4.458.75.75 0 10-1.493.154 8.001 8.001 0 101.6-5.684zM7.75 4a.75.75 0 01.75.75v2.992l2.028.812a.75.75 0 01-.557 1.392l-2.5-1A.75.75 0 017 8.25v-3.5A.75.75 0 017.75 4z"
+                />
+              </svg>
               <text class="pv-label" x="30" y="20">Total Commits</text>
               <text class="pv-value" x="30" y="36">4,892</text>
             </g>
             <g transform="translate(20, 115) rotate(0.8)">
-              <rect class="pv-box" x="0" y="0" width="220" height="45" rx="8" ry="8" fill="rgba(255,255,255,0.05)" stroke-width="1.5" stroke-dasharray="3,3" opacity="0.4"/>
-              <svg x="8" y="8" width="16" height="16" viewBox="0 0 16 16"><path class="pv-icon" fill-rule="evenodd" d="M7.177 3.073L9.573.677A.25.25 0 0110 .854v4.792a.25.25 0 01-.427.177L7.177 3.427a.25.25 0 010-.354zM3.75 2.5a.75.75 0 100 1.5.75.75 0 000-1.5zm-2.25.75a2.25 2.25 0 113 2.122v5.256a2.251 2.251 0 11-1.5 0V5.372A2.25 2.25 0 011.5 3.25zM11 2.5h-1V4h1a1 1 0 011 1v5.628a2.251 2.251 0 101.5 0V5A2.5 2.5 0 0011 2.5zm1 10.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0zM3.75 12a.75.75 0 100 1.5.75.75 0 000-1.5z"/></svg>
+              <rect
+                class="pv-box"
+                x="0"
+                y="0"
+                width="220"
+                height="45"
+                rx="8"
+                ry="8"
+                fill="rgba(255,255,255,0.05)"
+                stroke-width="1.5"
+                stroke-dasharray="3,3"
+                opacity="0.4"
+              />
+              <svg x="8" y="8" width="16" height="16" viewBox="0 0 16 16">
+                <path
+                  class="pv-icon"
+                  fill-rule="evenodd"
+                  d="M7.177 3.073L9.573.677A.25.25 0 0110 .854v4.792a.25.25 0 01-.427.177L7.177 3.427a.25.25 0 010-.354zM3.75 2.5a.75.75 0 100 1.5.75.75 0 000-1.5zm-2.25.75a2.25 2.25 0 113 2.122v5.256a2.251 2.251 0 11-1.5 0V5.372A2.25 2.25 0 011.5 3.25zM11 2.5h-1V4h1a1 1 0 011 1v5.628a2.251 2.251 0 101.5 0V5A2.5 2.5 0 0011 2.5zm1 10.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0zM3.75 12a.75.75 0 100 1.5.75.75 0 000-1.5z"
+                />
+              </svg>
               <text class="pv-label" x="30" y="20">Total PRs</text>
               <text class="pv-value" x="30" y="36">234</text>
             </g>
             <g transform="translate(260, 115) rotate(-1)">
-              <rect class="pv-box" x="0" y="0" width="220" height="45" rx="8" ry="8" fill="rgba(255,255,255,0.05)" stroke-width="1.5" stroke-dasharray="3,3" opacity="0.4"/>
-              <svg x="8" y="8" width="16" height="16" viewBox="0 0 16 16"><path class="pv-icon" fill-rule="evenodd" d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm9 3a1 1 0 11-2 0 1 1 0 012 0zm-.25-6.25a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z"/></svg>
+              <rect
+                class="pv-box"
+                x="0"
+                y="0"
+                width="220"
+                height="45"
+                rx="8"
+                ry="8"
+                fill="rgba(255,255,255,0.05)"
+                stroke-width="1.5"
+                stroke-dasharray="3,3"
+                opacity="0.4"
+              />
+              <svg x="8" y="8" width="16" height="16" viewBox="0 0 16 16">
+                <path
+                  class="pv-icon"
+                  fill-rule="evenodd"
+                  d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm9 3a1 1 0 11-2 0 1 1 0 012 0zm-.25-6.25a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z"
+                />
+              </svg>
               <text class="pv-label" x="30" y="20">Total Issues</text>
               <text class="pv-value" x="30" y="36">891</text>
             </g>
             <g transform="translate(20, 175) rotate(1.5)">
-              <rect class="pv-box" x="0" y="0" width="220" height="45" rx="8" ry="8" fill="rgba(255,255,255,0.05)" stroke-width="1.5" stroke-dasharray="3,3" opacity="0.4"/>
-              <svg x="8" y="8" width="16" height="16" viewBox="0 0 16 16"><path class="pv-icon" fill-rule="evenodd" d="M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z"/></svg>
+              <rect
+                class="pv-box"
+                x="0"
+                y="0"
+                width="220"
+                height="45"
+                rx="8"
+                ry="8"
+                fill="rgba(255,255,255,0.05)"
+                stroke-width="1.5"
+                stroke-dasharray="3,3"
+                opacity="0.4"
+              />
+              <svg x="8" y="8" width="16" height="16" viewBox="0 0 16 16">
+                <path
+                  class="pv-icon"
+                  fill-rule="evenodd"
+                  d="M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z"
+                />
+              </svg>
               <text class="pv-label" x="30" y="20">Total Repos</text>
               <text class="pv-value" x="30" y="36">42</text>
             </g>
           </svg>
 
           <!-- Repo Stats Card Preview -->
-          <svg class="preview-svg" id="preview-repo" width="500" height="200" viewBox="0 0 500 200"
-               xmlns="http://www.w3.org/2000/svg" role="img" style="display: none;">
+          <svg
+            class="preview-svg"
+            id="preview-repo"
+            width="500"
+            height="200"
+            viewBox="0 0 500 200"
+            xmlns="http://www.w3.org/2000/svg"
+            role="img"
+            style="display: none"
+          >
             <defs>
               <style>
-                @import url('https://fonts.googleapis.com/css2?family=Indie+Flower&amp;family=Permanent+Marker&amp;display=swap');
-                #preview-repo .pv-bg { fill: var(--preview-bg); stroke: var(--preview-border); transition: fill 0.35s ease, stroke 0.35s ease; }
-                #preview-repo .pv-title { fill: var(--preview-title); font: 700 22px 'Permanent Marker', 'Comic Sans MS', cursive; transition: fill 0.35s ease; }
-                #preview-repo .pv-underline { stroke: var(--preview-title); transition: stroke 0.35s ease; }
-                #preview-repo .pv-label { fill: var(--preview-text); font: 400 13px 'Indie Flower', 'Comic Sans MS', cursive; transition: fill 0.35s ease; }
-                #preview-repo .pv-value { fill: var(--preview-title); font: 700 16px 'Indie Flower', 'Comic Sans MS', cursive; transition: fill 0.35s ease; }
-                #preview-repo .pv-icon { fill: var(--preview-icon); transition: fill 0.35s ease; }
-                #preview-repo .pv-box { stroke: var(--preview-text); transition: stroke 0.35s ease; }
+                @import url("https://fonts.googleapis.com/css2?family=Indie+Flower&amp;family=Permanent+Marker&amp;display=swap");
+                #preview-repo .pv-bg {
+                  fill: var(--preview-bg);
+                  stroke: var(--preview-border);
+                  transition:
+                    fill 0.35s ease,
+                    stroke 0.35s ease;
+                }
+                #preview-repo .pv-title {
+                  fill: var(--preview-title);
+                  font:
+                    700 22px "Permanent Marker",
+                    "Comic Sans MS",
+                    cursive;
+                  transition: fill 0.35s ease;
+                }
+                #preview-repo .pv-underline {
+                  stroke: var(--preview-title);
+                  transition: stroke 0.35s ease;
+                }
+                #preview-repo .pv-label {
+                  fill: var(--preview-text);
+                  font:
+                    400 13px "Indie Flower",
+                    "Comic Sans MS",
+                    cursive;
+                  transition: fill 0.35s ease;
+                }
+                #preview-repo .pv-value {
+                  fill: var(--preview-title);
+                  font:
+                    700 16px "Indie Flower",
+                    "Comic Sans MS",
+                    cursive;
+                  transition: fill 0.35s ease;
+                }
+                #preview-repo .pv-icon {
+                  fill: var(--preview-icon);
+                  transition: fill 0.35s ease;
+                }
+                #preview-repo .pv-box {
+                  stroke: var(--preview-text);
+                  transition: stroke 0.35s ease;
+                }
               </style>
             </defs>
-            <rect class="pv-bg" x="2" y="2" width="496" height="196" rx="4.5" stroke-width="2.5"/>
+            <rect
+              class="pv-bg"
+              x="2"
+              y="2"
+              width="496"
+              height="196"
+              rx="4.5"
+              stroke-width="2.5"
+            />
             <g transform="translate(25, 30) rotate(-1)">
               <text class="pv-title" y="0">torvalds/linux</text>
-              <path class="pv-underline" d="M 0 8 Q 50 10, 100 8 T 200 8" stroke-width="2" fill="none" opacity="0.5"/>
+              <path
+                class="pv-underline"
+                d="M 0 8 Q 50 10, 100 8 T 200 8"
+                stroke-width="2"
+                fill="none"
+                opacity="0.5"
+              />
             </g>
             <g transform="translate(20, 55) rotate(-1.5)">
-              <rect class="pv-box" x="0" y="0" width="220" height="45" rx="8" ry="8" fill="rgba(255,255,255,0.05)" stroke-width="1.5" stroke-dasharray="3,3" opacity="0.4"/>
-              <svg x="8" y="8" width="16" height="16" viewBox="0 0 16 16"><path class="pv-icon" fill-rule="evenodd" d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z"/></svg>
+              <rect
+                class="pv-box"
+                x="0"
+                y="0"
+                width="220"
+                height="45"
+                rx="8"
+                ry="8"
+                fill="rgba(255,255,255,0.05)"
+                stroke-width="1.5"
+                stroke-dasharray="3,3"
+                opacity="0.4"
+              />
+              <svg x="8" y="8" width="16" height="16" viewBox="0 0 16 16">
+                <path
+                  class="pv-icon"
+                  fill-rule="evenodd"
+                  d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z"
+                />
+              </svg>
               <text class="pv-label" x="30" y="20">Stars</text>
               <text class="pv-value" x="30" y="36">180,432</text>
             </g>
             <g transform="translate(260, 55) rotate(1.2)">
-              <rect class="pv-box" x="0" y="0" width="220" height="45" rx="8" ry="8" fill="rgba(255,255,255,0.05)" stroke-width="1.5" stroke-dasharray="3,3" opacity="0.4"/>
-              <svg x="8" y="8" width="16" height="16" viewBox="0 0 16 16"><path class="pv-icon" fill-rule="evenodd" d="M5 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 2.122a2.25 2.25 0 10-1.5 0v.878A2.25 2.25 0 005.75 8.5h1.5v2.128a2.251 2.251 0 101.5 0V8.5h1.5a2.25 2.25 0 002.25-2.25v-.878a2.25 2.25 0 10-1.5 0v.878a.75.75 0 01-.75.75h-4.5A.75.75 0 015 6.25v-.878zm3.75 7.378a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm3-8.75a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"/></svg>
+              <rect
+                class="pv-box"
+                x="0"
+                y="0"
+                width="220"
+                height="45"
+                rx="8"
+                ry="8"
+                fill="rgba(255,255,255,0.05)"
+                stroke-width="1.5"
+                stroke-dasharray="3,3"
+                opacity="0.4"
+              />
+              <svg x="8" y="8" width="16" height="16" viewBox="0 0 16 16">
+                <path
+                  class="pv-icon"
+                  fill-rule="evenodd"
+                  d="M5 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 2.122a2.25 2.25 0 10-1.5 0v.878A2.25 2.25 0 005.75 8.5h1.5v2.128a2.251 2.251 0 101.5 0V8.5h1.5a2.25 2.25 0 002.25-2.25v-.878a2.25 2.25 0 10-1.5 0v.878a.75.75 0 01-.75.75h-4.5A.75.75 0 015 6.25v-.878zm3.75 7.378a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm3-8.75a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"
+                />
+              </svg>
               <text class="pv-label" x="30" y="20">Forks</text>
               <text class="pv-value" x="30" y="36">52,841</text>
             </g>
             <g transform="translate(20, 115) rotate(0.8)">
-              <rect class="pv-box" x="0" y="0" width="220" height="45" rx="8" ry="8" fill="rgba(255,255,255,0.05)" stroke-width="1.5" stroke-dasharray="3,3" opacity="0.4"/>
-              <svg x="8" y="8" width="16" height="16" viewBox="0 0 16 16"><path class="pv-icon" fill-rule="evenodd" d="M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z"/></svg>
+              <rect
+                class="pv-box"
+                x="0"
+                y="0"
+                width="220"
+                height="45"
+                rx="8"
+                ry="8"
+                fill="rgba(255,255,255,0.05)"
+                stroke-width="1.5"
+                stroke-dasharray="3,3"
+                opacity="0.4"
+              />
+              <svg x="8" y="8" width="16" height="16" viewBox="0 0 16 16">
+                <path
+                  class="pv-icon"
+                  fill-rule="evenodd"
+                  d="M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z"
+                />
+              </svg>
               <text class="pv-label" x="30" y="20">Language</text>
               <text class="pv-value" x="30" y="36">C</text>
             </g>
             <g transform="translate(260, 115) rotate(-1)">
-              <rect class="pv-box" x="0" y="0" width="220" height="45" rx="8" ry="8" fill="rgba(255,255,255,0.05)" stroke-width="1.5" stroke-dasharray="3,3" opacity="0.4"/>
-              <svg x="8" y="8" width="16" height="16" viewBox="0 0 16 16"><path class="pv-icon" fill-rule="evenodd" d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm9 3a1 1 0 11-2 0 1 1 0 012 0zm-.25-6.25a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z"/></svg>
+              <rect
+                class="pv-box"
+                x="0"
+                y="0"
+                width="220"
+                height="45"
+                rx="8"
+                ry="8"
+                fill="rgba(255,255,255,0.05)"
+                stroke-width="1.5"
+                stroke-dasharray="3,3"
+                opacity="0.4"
+              />
+              <svg x="8" y="8" width="16" height="16" viewBox="0 0 16 16">
+                <path
+                  class="pv-icon"
+                  fill-rule="evenodd"
+                  d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm9 3a1 1 0 11-2 0 1 1 0 012 0zm-.25-6.25a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z"
+                />
+              </svg>
               <text class="pv-label" x="30" y="20">Open Issues</text>
               <text class="pv-value" x="30" y="36">438</text>
             </g>
           </svg>
 
           <!-- Top Languages Card Preview -->
-          <svg class="preview-svg" id="preview-langs" width="450" height="340" viewBox="0 0 450 340"
-               xmlns="http://www.w3.org/2000/svg" role="img" style="display: none;">
+          <svg
+            class="preview-svg"
+            id="preview-langs"
+            width="450"
+            height="340"
+            viewBox="0 0 450 340"
+            xmlns="http://www.w3.org/2000/svg"
+            role="img"
+            style="display: none"
+          >
             <defs>
               <style>
-                @import url('https://fonts.googleapis.com/css2?family=Indie+Flower&amp;family=Permanent+Marker&amp;display=swap');
-                #preview-langs .pv-bg { fill: var(--preview-bg); stroke: var(--preview-border); transition: fill 0.35s ease, stroke 0.35s ease; }
-                #preview-langs .pv-title { fill: var(--preview-title); font: 700 22px 'Permanent Marker', 'Comic Sans MS', cursive; transition: fill 0.35s ease; }
-                #preview-langs .pv-underline { stroke: var(--preview-title); transition: stroke 0.35s ease; }
-                #preview-langs .pv-label { fill: var(--preview-text); font: 400 13px 'Indie Flower', 'Comic Sans MS', cursive; transition: fill 0.35s ease; }
-                #preview-langs .pv-value { fill: var(--preview-title); font: 700 16px 'Indie Flower', 'Comic Sans MS', cursive; transition: fill 0.35s ease; }
-                #preview-langs .pv-box { stroke: var(--preview-text); transition: stroke 0.35s ease; }
-                #preview-langs .pv-lang-bar-bg { stroke: var(--preview-border); transition: stroke 0.35s ease; }
-                #preview-langs .pv-lang-bar { fill: var(--preview-icon); transition: fill 0.35s ease; }
+                @import url("https://fonts.googleapis.com/css2?family=Indie+Flower&amp;family=Permanent+Marker&amp;display=swap");
+                #preview-langs .pv-bg {
+                  fill: var(--preview-bg);
+                  stroke: var(--preview-border);
+                  transition:
+                    fill 0.35s ease,
+                    stroke 0.35s ease;
+                }
+                #preview-langs .pv-title {
+                  fill: var(--preview-title);
+                  font:
+                    700 22px "Permanent Marker",
+                    "Comic Sans MS",
+                    cursive;
+                  transition: fill 0.35s ease;
+                }
+                #preview-langs .pv-underline {
+                  stroke: var(--preview-title);
+                  transition: stroke 0.35s ease;
+                }
+                #preview-langs .pv-label {
+                  fill: var(--preview-text);
+                  font:
+                    400 13px "Indie Flower",
+                    "Comic Sans MS",
+                    cursive;
+                  transition: fill 0.35s ease;
+                }
+                #preview-langs .pv-value {
+                  fill: var(--preview-title);
+                  font:
+                    700 16px "Indie Flower",
+                    "Comic Sans MS",
+                    cursive;
+                  transition: fill 0.35s ease;
+                }
+                #preview-langs .pv-box {
+                  stroke: var(--preview-text);
+                  transition: stroke 0.35s ease;
+                }
+                #preview-langs .pv-lang-bar-bg {
+                  stroke: var(--preview-border);
+                  transition: stroke 0.35s ease;
+                }
+                #preview-langs .pv-lang-bar {
+                  fill: var(--preview-icon);
+                  transition: fill 0.35s ease;
+                }
               </style>
             </defs>
-            <rect class="pv-bg" x="2" y="2" width="446" height="336" rx="4.5" stroke-width="2.5"/>
+            <rect
+              class="pv-bg"
+              x="2"
+              y="2"
+              width="446"
+              height="336"
+              rx="4.5"
+              stroke-width="2.5"
+            />
             <g transform="translate(25, 30) rotate(-1)">
               <text class="pv-title" y="0">torvalds's Top Languages</text>
-              <path class="pv-underline" d="M 0 8 Q 50 10, 100 8 T 200 8" stroke-width="2" fill="none" opacity="0.5"/>
+              <path
+                class="pv-underline"
+                d="M 0 8 Q 50 10, 100 8 T 200 8"
+                stroke-width="2"
+                fill="none"
+                opacity="0.5"
+              />
             </g>
             <g transform="translate(20, 55)">
-              <rect class="pv-box" x="0" y="0" width="410" height="40" rx="8" ry="8" fill="rgba(255,255,255,0.03)" stroke-width="1.5" stroke-dasharray="3,3" opacity="0.3"/>
+              <rect
+                class="pv-box"
+                x="0"
+                y="0"
+                width="410"
+                height="40"
+                rx="8"
+                ry="8"
+                fill="rgba(255,255,255,0.03)"
+                stroke-width="1.5"
+                stroke-dasharray="3,3"
+                opacity="0.3"
+              />
               <text class="pv-label" x="15" y="16">C</text>
-              <text class="pv-value" x="385" y="16" text-anchor="end">92.5%</text>
-              <rect class="pv-lang-bar-bg" x="15" y="22" width="380" height="10" rx="5" ry="5" fill="none" stroke-width="1" opacity="0.3"/>
-              <rect class="pv-lang-bar" x="15" y="22" width="333" height="10" rx="5" ry="5" opacity="0.8"/>
+              <text class="pv-value" x="385" y="16" text-anchor="end">
+                92.5%
+              </text>
+              <rect
+                class="pv-lang-bar-bg"
+                x="15"
+                y="22"
+                width="380"
+                height="10"
+                rx="5"
+                ry="5"
+                fill="none"
+                stroke-width="1"
+                opacity="0.3"
+              />
+              <rect
+                class="pv-lang-bar"
+                x="15"
+                y="22"
+                width="333"
+                height="10"
+                rx="5"
+                ry="5"
+                opacity="0.8"
+              />
             </g>
             <g transform="translate(20, 105)">
-              <rect class="pv-box" x="0" y="0" width="410" height="40" rx="8" ry="8" fill="rgba(255,255,255,0.03)" stroke-width="1.5" stroke-dasharray="3,3" opacity="0.3"/>
+              <rect
+                class="pv-box"
+                x="0"
+                y="0"
+                width="410"
+                height="40"
+                rx="8"
+                ry="8"
+                fill="rgba(255,255,255,0.03)"
+                stroke-width="1.5"
+                stroke-dasharray="3,3"
+                opacity="0.3"
+              />
               <text class="pv-label" x="15" y="16">Python</text>
-              <text class="pv-value" x="385" y="16" text-anchor="end">3.2%</text>
-              <rect class="pv-lang-bar-bg" x="15" y="22" width="380" height="10" rx="5" ry="5" fill="none" stroke-width="1" opacity="0.3"/>
-              <rect class="pv-lang-bar" x="15" y="22" width="12" height="10" rx="5" ry="5" opacity="0.8"/>
+              <text class="pv-value" x="385" y="16" text-anchor="end">
+                3.2%
+              </text>
+              <rect
+                class="pv-lang-bar-bg"
+                x="15"
+                y="22"
+                width="380"
+                height="10"
+                rx="5"
+                ry="5"
+                fill="none"
+                stroke-width="1"
+                opacity="0.3"
+              />
+              <rect
+                class="pv-lang-bar"
+                x="15"
+                y="22"
+                width="12"
+                height="10"
+                rx="5"
+                ry="5"
+                opacity="0.8"
+              />
             </g>
             <g transform="translate(20, 155)">
-              <rect class="pv-box" x="0" y="0" width="410" height="40" rx="8" ry="8" fill="rgba(255,255,255,0.03)" stroke-width="1.5" stroke-dasharray="3,3" opacity="0.3"/>
+              <rect
+                class="pv-box"
+                x="0"
+                y="0"
+                width="410"
+                height="40"
+                rx="8"
+                ry="8"
+                fill="rgba(255,255,255,0.03)"
+                stroke-width="1.5"
+                stroke-dasharray="3,3"
+                opacity="0.3"
+              />
               <text class="pv-label" x="15" y="16">Makefile</text>
-              <text class="pv-value" x="385" y="16" text-anchor="end">1.8%</text>
-              <rect class="pv-lang-bar-bg" x="15" y="22" width="380" height="10" rx="5" ry="5" fill="none" stroke-width="1" opacity="0.3"/>
-              <rect class="pv-lang-bar" x="15" y="22" width="7" height="10" rx="5" ry="5" opacity="0.8"/>
+              <text class="pv-value" x="385" y="16" text-anchor="end">
+                1.8%
+              </text>
+              <rect
+                class="pv-lang-bar-bg"
+                x="15"
+                y="22"
+                width="380"
+                height="10"
+                rx="5"
+                ry="5"
+                fill="none"
+                stroke-width="1"
+                opacity="0.3"
+              />
+              <rect
+                class="pv-lang-bar"
+                x="15"
+                y="22"
+                width="7"
+                height="10"
+                rx="5"
+                ry="5"
+                opacity="0.8"
+              />
             </g>
             <g transform="translate(20, 205)">
-              <rect class="pv-box" x="0" y="0" width="410" height="40" rx="8" ry="8" fill="rgba(255,255,255,0.03)" stroke-width="1.5" stroke-dasharray="3,3" opacity="0.3"/>
+              <rect
+                class="pv-box"
+                x="0"
+                y="0"
+                width="410"
+                height="40"
+                rx="8"
+                ry="8"
+                fill="rgba(255,255,255,0.03)"
+                stroke-width="1.5"
+                stroke-dasharray="3,3"
+                opacity="0.3"
+              />
               <text class="pv-label" x="15" y="16">Shell</text>
-              <text class="pv-value" x="385" y="16" text-anchor="end">1.2%</text>
-              <rect class="pv-lang-bar-bg" x="15" y="22" width="380" height="10" rx="5" ry="5" fill="none" stroke-width="1" opacity="0.3"/>
-              <rect class="pv-lang-bar" x="15" y="22" width="4" height="10" rx="5" ry="5" opacity="0.8"/>
+              <text class="pv-value" x="385" y="16" text-anchor="end">
+                1.2%
+              </text>
+              <rect
+                class="pv-lang-bar-bg"
+                x="15"
+                y="22"
+                width="380"
+                height="10"
+                rx="5"
+                ry="5"
+                fill="none"
+                stroke-width="1"
+                opacity="0.3"
+              />
+              <rect
+                class="pv-lang-bar"
+                x="15"
+                y="22"
+                width="4"
+                height="10"
+                rx="5"
+                ry="5"
+                opacity="0.8"
+              />
             </g>
             <g transform="translate(20, 255)">
-              <rect class="pv-box" x="0" y="0" width="410" height="40" rx="8" ry="8" fill="rgba(255,255,255,0.03)" stroke-width="1.5" stroke-dasharray="3,3" opacity="0.3"/>
+              <rect
+                class="pv-box"
+                x="0"
+                y="0"
+                width="410"
+                height="40"
+                rx="8"
+                ry="8"
+                fill="rgba(255,255,255,0.03)"
+                stroke-width="1.5"
+                stroke-dasharray="3,3"
+                opacity="0.3"
+              />
               <text class="pv-label" x="15" y="16">Perl</text>
-              <text class="pv-value" x="385" y="16" text-anchor="end">0.9%</text>
-              <rect class="pv-lang-bar-bg" x="15" y="22" width="380" height="10" rx="5" ry="5" fill="none" stroke-width="1" opacity="0.3"/>
-              <rect class="pv-lang-bar" x="15" y="22" width="3" height="10" rx="5" ry="5" opacity="0.8"/>
+              <text class="pv-value" x="385" y="16" text-anchor="end">
+                0.9%
+              </text>
+              <rect
+                class="pv-lang-bar-bg"
+                x="15"
+                y="22"
+                width="380"
+                height="10"
+                rx="5"
+                ry="5"
+                fill="none"
+                stroke-width="1"
+                opacity="0.3"
+              />
+              <rect
+                class="pv-lang-bar"
+                x="15"
+                y="22"
+                width="3"
+                height="10"
+                rx="5"
+                ry="5"
+                opacity="0.8"
+              />
             </g>
           </svg>
         </div>
@@ -934,14 +1448,62 @@ <h3>/api/repo</h3>
 
     <script>
       const themeColors = {
-        default:    { bg: "#fffef9", title: "#ff6b6b", text: "#5f6368", icon: "#4ecdc4", border: "#ff6b6b" },
-        dark:       { bg: "#1a1a2e", title: "#f4d35e", text: "#e8e8e8", icon: "#95e1d3", border: "#f4d35e" },
-        radical:    { bg: "#141321", title: "#ff6bcb", text: "#a9fef7", icon: "#ffd93d", border: "#ff6bcb" },
-        merko:      { bg: "#0f1c14", title: "#c1ff72", text: "#68b587", icon: "#ffeb3b", border: "#c1ff72" },
-        gruvbox:    { bg: "#282828", title: "#fabd2f", text: "#8ec07c", icon: "#fe8019", border: "#fabd2f" },
-        tokyonight: { bg: "#1a1b27", title: "#70a5fd", text: "#38bdae", icon: "#bf91f3", border: "#70a5fd" },
-        bubblegum:  { bg: "#fff0f5", title: "#ff1493", text: "#8b4789", icon: "#ff69b4", border: "#ff69b4" },
-        ocean:      { bg: "#e0f7ff", title: "#0077be", text: "#2c5f7c", icon: "#00d4ff", border: "#00a8e8" },
+        default: {
+          bg: "#fffef9",
+          title: "#ff6b6b",
+          text: "#5f6368",
+          icon: "#4ecdc4",
+          border: "#ff6b6b",
+        },
+        dark: {
+          bg: "#1a1a2e",
+          title: "#f4d35e",
+          text: "#e8e8e8",
+          icon: "#95e1d3",
+          border: "#f4d35e",
+        },
+        radical: {
+          bg: "#141321",
+          title: "#ff6bcb",
+          text: "#a9fef7",
+          icon: "#ffd93d",
+          border: "#ff6bcb",
+        },
+        merko: {
+          bg: "#0f1c14",
+          title: "#c1ff72",
+          text: "#68b587",
+          icon: "#ffeb3b",
+          border: "#c1ff72",
+        },
+        gruvbox: {
+          bg: "#282828",
+          title: "#fabd2f",
+          text: "#8ec07c",
+          icon: "#fe8019",
+          border: "#fabd2f",
+        },
+        tokyonight: {
+          bg: "#1a1b27",
+          title: "#70a5fd",
+          text: "#38bdae",
+          icon: "#bf91f3",
+          border: "#70a5fd",
+        },
+        bubblegum: {
+          bg: "#fff0f5",
+          title: "#ff1493",
+          text: "#8b4789",
+          icon: "#ff69b4",
+          border: "#ff69b4",
+        },
+        ocean: {
+          bg: "#e0f7ff",
+          title: "#0077be",
+          text: "#2c5f7c",
+          icon: "#00d4ff",
+          border: "#00a8e8",
+        },
       };
 
       function applyTheme(themeName) {
@@ -956,24 +1518,27 @@ <h3>/api/repo</h3>
           svg.style.setProperty("--preview-border", theme.border);
         });
 
-        document.querySelectorAll("#theme-grid .theme-badge").forEach((badge) => {
-          const isActive = badge.dataset.theme === themeName;
-          badge.classList.toggle("active", isActive);
-          if (isActive) {
-            badge.style.background = theme.bg;
-            badge.style.color = theme.title;
-            badge.style.borderColor = theme.border;
-          } else {
-            badge.style.background = "";
-            badge.style.color = "";
-            badge.style.borderColor = "";
-          }
-        });
+        document
+          .querySelectorAll("#theme-grid .theme-badge")
+          .forEach((badge) => {
+            const isActive = badge.dataset.theme === themeName;
+            badge.classList.toggle("active", isActive);
+            if (isActive) {
+              badge.style.background = theme.bg;
+              badge.style.color = theme.title;
+              badge.style.borderColor = theme.border;
+            } else {
+              badge.style.background = "";
+              badge.style.color = "";
+              badge.style.borderColor = "";
+            }
+          });
       }
 
       function switchCardType(cardType) {
         document.querySelectorAll(".preview-svg").forEach((svg) => {
-          svg.style.display = svg.id === "preview-" + cardType ? "block" : "none";
+          svg.style.display =
+            svg.id === "preview-" + cardType ? "block" : "none";
         });
         document.querySelectorAll(".card-type-btn").forEach((btn) => {
           btn.classList.toggle("active", btn.dataset.card === cardType);