feat(downloads): add total downloads display in navigation and mobile card

Author: TechyCSR

webapp/index.html

@@ -559,6 +559,10 @@
           <svg class="ic star-ic"><use href="#i-star"/></svg>
           <span id="star-count">Star</span>
         </a>
+        <a class="ghost-pill nav-downloads" href="https://github.com/TechyCSR/OpenCluely/releases/latest" target="_blank" rel="noopener" aria-label="Total downloads from GitHub releases">
+          <svg class="ic dl-ic"><use href="#i-download"/></svg>
+          <span id="dl-count-nav">Downloads</span>
+        </a>
         <button class="menu-btn" id="menu-btn" aria-label="Open menu" aria-expanded="false">
           <svg class="ic icon-menu"><use href="#i-menu"/></svg>
           <svg class="ic icon-close"><use href="#i-close"/></svg>
@@ -572,6 +576,14 @@
       <a href="#how">How it works</a>
       <a href="#download">Download</a>
       <a href="#faq">FAQ</a>
+      <a class="mobile-dl-card" href="https://github.com/TechyCSR/OpenCluely/releases/latest" target="_blank" rel="noopener">
+        <span class="mobile-dl-icon"><svg class="ic dl-ic"><use href="#i-download"/></svg></span>
+        <span class="mobile-dl-text">
+          <span class="mobile-dl-eyebrow">Latest release</span>
+          <span class="mobile-dl-count"><span id="dl-count-mobile">—</span> Downloads</span>
+        </span>
+        <span class="mobile-dl-go" aria-hidden="true"><svg class="ic"><use href="#i-arrow"/></svg></span>
+      </a>
       <a href="https://github.com/TechyCSR/OpenCluely" target="_blank" rel="noopener">GitHub</a>
     </div>
   </header>

webapp/script.js

@@ -97,10 +97,24 @@
   fetch('https://api.github.com/repos/' + REPO, { headers: { Accept: 'application/vnd.github+json' } })
     .then(function (r) { return r.ok ? r.json() : null; })
     .then(function (d) {
-      if (d && typeof d.stargazers_count === 'number' && starEl) {
-        starEl.textContent = d.stargazers_count >= 1000
+      if (d && typeof d.stargazers_count === 'number') {
+        var label = d.stargazers_count >= 1000
           ? (d.stargazers_count / 1000).toFixed(1) + 'k'
           : String(d.stargazers_count);
+        if (starEl) { starEl.textContent = label; }
+      }
+    })
+    .catch(function () {});
+
+  /* ---------- GitHub total downloads (live, mirrors README badge) ---------- */
+  var dlEl = el('dl-count-nav');
+  var dlElMobile = el('dl-count-mobile');
+  fetch('https://img.shields.io/github/downloads/TechyCSR/OpenCluely/total.json')
+    .then(function (r) { return r.ok ? r.json() : null; })
+    .then(function (d) {
+      if (d && typeof d.value === 'string' && d.value.length) {
+        if (dlEl) { dlEl.textContent = d.value + ' downloads'; }
+        if (dlElMobile) { dlElMobile.textContent = d.value; }
       }
     })
     .catch(function () {});

webapp/style.css

@@ -98,6 +98,33 @@ img, video, svg { display: block; max-width: 100%; }
 .ghost-pill:hover { background: var(--surface-2); border-color: #3a3a3a; }
 .ghost-pill .ic { font-size: 1.05rem; }
 .ghost-pill .star-ic { color: #f5c518; font-size: 0.98rem; }
+.ghost-pill .dl-ic { color: #9ad7ff; font-size: 1rem; }
+
+.nav-downloads { display: none; }
+@media (min-width: 761px) { .nav-downloads { display: inline-flex; } }
+
+.mobile-dl-card {
+  display: flex; align-items: center; gap: 14px;
+  margin: 14px 16px; padding: 14px 16px;
+  background: linear-gradient(180deg, #161616 0%, #0e0e0e 100%);
+  border: 1px solid var(--border-2); border-radius: 14px;
+  color: var(--text); text-decoration: none;
+  font-weight: 600; box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset;
+}
+.mobile-dl-card:active { background: var(--surface); }
+.mobile-dl-card .mobile-dl-icon {
+  width: 40px; height: 40px; border-radius: 10px;
+  display: inline-flex; align-items: center; justify-content: center;
+  background: rgba(154, 215, 255, 0.12); border: 1px solid rgba(154, 215, 255, 0.3);
+  flex: 0 0 auto;
+}
+.mobile-dl-card .mobile-dl-icon .dl-ic { color: #9ad7ff; font-size: 1.2rem; }
+.mobile-dl-card .mobile-dl-text { display: flex; flex-direction: column; gap: 2px; line-height: 1.2; flex: 1 1 auto; min-width: 0; }
+.mobile-dl-card .mobile-dl-eyebrow { font-size: 0.72rem; font-weight: 600; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
+.mobile-dl-card .mobile-dl-count { font-size: 1.05rem; font-weight: 700; color: var(--text); }
+.mobile-dl-card .mobile-dl-go { color: var(--muted); flex: 0 0 auto; }
+.mobile-dl-card .mobile-dl-go .ic { font-size: 1.1rem; }
+@media (min-width: 761px) { .mobile-dl-card { display: none; } }
 
 .menu-btn {
   display: none; background: var(--surface); color: var(--text);