feat(demo): show github release download stats

Author: alvin000009238

demo/index.html

@@ -52,6 +52,16 @@ <h1 class="hero-title" data-i18n="hero.title">壢中成績 app</h1>
             <span data-i18n="hero.cta">下載最新版本</span>
           </a>
           <p class="cta-sub" data-i18n="hero.cta.sub">適用於 Android 10+</p>
+          <div class="download-stats" id="download-stats">
+            <div class="stat-row">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
+              <span id="stat-latest">...</span>
+            </div>
+            <div class="stat-row">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
+              <span id="stat-prev">...</span>
+            </div>
+          </div>
         </div>
       </div>
       <div class="hero-visual">

demo/main.js

@@ -110,6 +110,51 @@ function setLanguage(lang) {
   if (toggle) {
     toggle.textContent = lang === 'zh' ? 'EN' : '中文';
   }
+
+  updateDownloadStatsText();
+}
+
+// ===== Fetch Download Stats =====
+let releaseData = null;
+async function initDownloadStats() {
+  try {
+    const response = await fetch('https://api.github.com/repos/alvin000009238/clhs_score/releases');
+    if (response.ok) {
+      const data = await response.json();
+      if (data.length >= 2) {
+        releaseData = {
+          latest: {
+            tag: data[0].tag_name,
+            count: data[0].assets.reduce((sum, asset) => sum + asset.download_count, 0)
+          },
+          prev: {
+            tag: data[1].tag_name,
+            count: data[1].assets.reduce((sum, asset) => sum + asset.download_count, 0)
+          }
+        };
+        updateDownloadStatsText();
+        const statsEl = document.getElementById('download-stats');
+        if (statsEl) statsEl.style.opacity = 1;
+      }
+    }
+  } catch (err) {
+    console.error('Failed to fetch stats:', err);
+  }
+}
+
+function updateDownloadStatsText() {
+  if (!releaseData) return;
+  const latestEl = document.getElementById('stat-latest');
+  const prevEl = document.getElementById('stat-prev');
+  if (!latestEl || !prevEl) return;
+  
+  if (currentLang === 'zh') {
+    latestEl.textContent = `最新版 (${releaseData.latest.tag}): ${releaseData.latest.count} 次下載`;
+    prevEl.textContent = `上一版 (${releaseData.prev.tag}): ${releaseData.prev.count} 次下載`;
+  } else {
+    latestEl.textContent = `Latest (${releaseData.latest.tag}): ${releaseData.latest.count} dl`;
+    prevEl.textContent = `Previous (${releaseData.prev.tag}): ${releaseData.prev.count} dl`;
+  }
 }
 
 // ===== Reduced Motion Check =====
@@ -214,6 +259,7 @@ document.addEventListener('DOMContentLoaded', () => {
   initHeroContent();
   initScrollAnimations();
   initNavObserver();
+  initDownloadStats();
 
   const toggle = document.getElementById('lang-toggle');
   if (toggle) {

demo/style.css

@@ -253,6 +253,23 @@ a {
   color: var(--text-tertiary);
 }
 
+.download-stats {
+  margin-top: 8px;
+  font-size: 0.85rem;
+  color: var(--text-tertiary);
+  opacity: 0;
+  transition: opacity 0.5s ease;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.stat-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
 /* ===== Hero Visual ===== */
 .hero-visual {
   display: flex;
@@ -574,6 +591,10 @@ a {
     align-items: center;
   }
 
+  .download-stats {
+    align-items: center;
+  }
+
   .hero-visual {
     order: -1;
   }