Polish HTML landing/docs with live metrics and repo link

Author: lunaticsm

README.md

@@ -10,6 +10,9 @@ FastAPI-powered micro CDN for storing and serving uploaded assets. Files are wri
 - Live metrics (uploads, downloads, cleanups) exposed on the home page.
 - SQLite by default, with environment overrides for production databases.
 
+## Live Demo
+- Try the hosted instance at https://cdn.lunaticsm.web.id to see the animated metrics, HTML landing page, and API guide in action.
+
 ## Getting Started
 
 ```bash

app/main.py

@@ -1,4 +1,5 @@
 import logging
+from datetime import datetime
 from pathlib import Path
 from string import Template
 from urllib.parse import quote
@@ -93,9 +94,10 @@ async def home():
         "index.html",
         {
             "max_file_mb": f"{MAX_FILE_SIZE_MB:.1f}",
-            "uploads": stats.get("uploads", 0),
-            "downloads": stats.get("downloads", 0),
-            "deleted": stats.get("deleted", 0),
+            "uploads": str(stats.get("uploads", 0)),
+            "downloads": str(stats.get("downloads", 0)),
+            "deleted": str(stats.get("deleted", 0)),
+            "year": str(datetime.utcnow().year),
         },
     )
     return HTMLResponse(content=html)
@@ -105,10 +107,18 @@ async def home():
 async def api_info():
     html = render_template(
         "api.html",
-        {"max_file_mb": f"{MAX_FILE_SIZE_MB:.1f}", "rate_limit": RATE_LIMIT_PER_MINUTE},
+        {"max_file_mb": f"{MAX_FILE_SIZE_MB:.1f}", "rate_limit": str(RATE_LIMIT_PER_MINUTE)},
     )
     return HTMLResponse(content=html)
 
+
+@app.get("/metrics", dependencies=[Depends(enforce_rate_limit)])
+def metrics_snapshot():
+    data = metrics.snapshot()
+    response = JSONResponse(data)
+    response.headers["Cache-Control"] = "no-store, no-cache, must-revalidate"
+    return response
+
 # --- Routes ---
 
 @app.post("/upload", dependencies=[Depends(enforce_rate_limit)])

app/templates/api.html

@@ -80,7 +80,7 @@
       <h1>AlterBase CDN API</h1>
       <p class="lead">
         Upload files and retrieve shareable URLs with a minimal HTTP API. Each client is limited to
-        $rate_limit requests per minute and individual uploads are capped at $max_file_mb MB.
+        ${rate_limit} requests per minute and individual uploads are capped at ${max_file_mb} MB.
       </p>
 
       <section>
@@ -93,7 +93,7 @@ <h2>Endpoints</h2>
         <ul>
           <li>
             <strong>POST /upload</strong><br />
-            Multipart form request with <code>file</code> field (max $max_file_mb MB). Returns JSON metadata with
+            Multipart form request with <code>file</code> field (max ${max_file_mb} MB). Returns JSON metadata with
             <code>id</code>, <code>url</code>, <code>size</code>, <code>type</code>.
           </li>
           <li>
@@ -124,6 +124,17 @@ <h2>Notes</h2>
         </ul>
       </section>
 
+      <section>
+        <h2>Build Your Own</h2>
+        <p>
+          Clone the open source project from
+          <a href="https://github.com/lunaticsm/Image-Uploader-API" target="_blank" rel="noopener"
+            >github.com/lunaticsm/Image-Uploader-API</a
+          >
+          to deploy this stack on your own infrastructure.
+        </p>
+      </section>
+
       <section>
         <a href="/">← Back to home</a>
       </section>

app/templates/index.html

@@ -17,20 +17,22 @@
         font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
         min-height: 100vh;
         display: flex;
+        flex-direction: column;
         align-items: center;
         justify-content: center;
+        gap: 2rem;
         background: radial-gradient(circle at top, #1e293b, #0f172a);
         color: #e2e8f0;
-        padding: 2rem;
+        padding: 2rem 1.5rem 3rem;
       }
       main {
-        max-width: 540px;
-        background: rgba(15, 23, 42, 0.8);
-        border-radius: 20px;
-        padding: 3rem 3.5rem;
+        width: min(620px, 100%);
+        background: rgba(15, 23, 42, 0.82);
+        border-radius: 22px;
+        padding: clamp(2.5rem, 5vw, 3.5rem);
         text-align: center;
         border: 1px solid rgba(148, 163, 184, 0.25);
-        box-shadow: 0 24px 60px rgba(15, 23, 42, 0.45);
+        box-shadow: 0 26px 70px rgba(15, 23, 42, 0.5);
       }
       h1 {
         font-size: clamp(2rem, 5vw, 3rem);
@@ -43,29 +45,38 @@
         opacity: 0.85;
         margin-bottom: 2rem;
       }
-      .metrics {
+      .metrics-grid {
         display: grid;
-        gap: 1rem;
-        margin-bottom: 2rem;
+        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+        gap: 1.2rem;
+        margin-bottom: 2.25rem;
+      }
+      .metric {
         text-align: left;
-        background: rgba(15, 23, 42, 0.6);
-        border-radius: 14px;
-        padding: 1.5rem;
-        border: 1px solid rgba(148, 163, 184, 0.2);
+        background: rgba(15, 23, 42, 0.65);
+        border-radius: 16px;
+        padding: 1.35rem;
+        border: 1px solid rgba(148, 163, 184, 0.18);
+        backdrop-filter: blur(12px);
       }
-      .metrics .label {
+      .metric .label {
         display: block;
         font-size: 0.85rem;
         text-transform: uppercase;
         letter-spacing: 0.14em;
         opacity: 0.65;
         margin-bottom: 0.3rem;
       }
-      .metrics .value {
-        font-size: 1.6rem;
+      .metric .value {
+        font-size: 2rem;
         font-weight: 600;
         color: #f8fafc;
       }
+      .metric .unit {
+        font-size: 0.8rem;
+        opacity: 0.6;
+        margin-left: 0.25rem;
+      }
       a {
         display: inline-block;
         text-decoration: none;
@@ -81,30 +92,121 @@
         transform: translateY(-2px);
         box-shadow: 0 24px 45px rgba(129, 140, 248, 0.45);
       }
+      footer {
+        font-size: 0.95rem;
+        opacity: 0.75;
+        display: flex;
+        gap: 1rem;
+        flex-wrap: wrap;
+        justify-content: center;
+        text-align: center;
+      }
+      footer .heart {
+        color: #f87171;
+        margin: 0 0.25rem;
+      }
+      @media (max-width: 540px) {
+        body {
+          padding: 1.75rem 1rem 2.5rem;
+        }
+        .metric .value {
+          font-size: 1.7rem;
+        }
+      }
     </style>
   </head>
   <body>
     <main>
       <h1>AlterBase CDN</h1>
       <p>
-        Fast minimal API for hosting images and assets. Upload files (up to $max_file_mb MB), retrieve shareable
+        Fast minimal API for hosting images and assets. Upload files (up to ${max_file_mb} MB), retrieve shareable
         URLs, and keep storage tidy with automatic cleanup.
       </p>
-      <div class="metrics">
-        <div>
+      <div class="metrics-grid">
+        <div class="metric" data-key="uploads" data-value="${uploads}">
           <span class="label">Uploads</span>
-          <span class="value">$uploads</span>
+          <span class="value">0</span>
         </div>
-        <div>
+        <div class="metric" data-key="downloads" data-value="${downloads}">
           <span class="label">Downloads</span>
-          <span class="value">$downloads</span>
+          <span class="value">0</span>
         </div>
-        <div>
+        <div class="metric" data-key="deleted" data-value="${deleted}">
           <span class="label">Cleanups</span>
-          <span class="value">$deleted</span>
+          <span class="value">0</span>
         </div>
       </div>
       <a href="/api-info">View API Guide</a>
     </main>
+    <footer>
+      <span>Made by<span class="heart">❤️</span>lunaticsm</span>
+      <span>© ${year} AlterBase CDN</span>
+    </footer>
+    <script>
+      const metricCards = document.querySelectorAll(".metric");
+
+      function formatNumber(value) {
+        if (Number.isNaN(value)) {
+          return "0";
+        }
+        return value.toLocaleString("en-US");
+      }
+
+      function scramble(el, finalValue) {
+        const duration = 900;
+        const start = performance.now();
+        const maxRandom = Math.max(finalValue, 20);
+
+        function update(now) {
+          const progress = (now - start) / duration;
+          if (progress < 1) {
+            const randomValue = Math.floor(Math.random() * maxRandom);
+            el.textContent = formatNumber(randomValue);
+            requestAnimationFrame(update);
+          } else {
+            el.textContent = formatNumber(finalValue);
+          }
+        }
+
+        requestAnimationFrame(update);
+      }
+
+      function applyMetrics(data) {
+        metricCards.forEach(function (card) {
+          const key = card.getAttribute("data-key");
+          const nextValue = Number(data[key] || 0);
+          const current = Number(card.getAttribute("data-current") || "-1");
+          if (current === nextValue) {
+            return;
+          }
+          card.setAttribute("data-current", String(nextValue));
+          const valueEl = card.querySelector(".value");
+          scramble(valueEl, nextValue);
+        });
+      }
+
+      const initialMetrics = {};
+      metricCards.forEach(function (card) {
+        const key = card.getAttribute("data-key");
+        initialMetrics[key] = Number(card.getAttribute("data-value") || "0");
+      });
+      applyMetrics(initialMetrics);
+
+      async function refreshMetrics() {
+        try {
+          const response = await fetch("/metrics", { cache: "no-store" });
+          if (!response.ok) {
+            return;
+          }
+          const payload = await response.json();
+          applyMetrics(payload);
+        } catch (err) {
+          console.error("metrics refresh failed", err);
+        }
+      }
+
+      setTimeout(refreshMetrics, 250);
+      setInterval(refreshMetrics, 15000);
+    </script>
   </body>
 </html>