Update web/templates/stats.html

web/templates/stats.html

@@ -36,22 +36,31 @@
     </div>
   </div>
 
-  <!-- Top subjects -->
+  <!-- Tag Cloud (replaces Top Subjects) -->
   <div class="card" style="padding:16px; margin-bottom:16px;">
-    <div class="meta-label">Top Subjects</div>
+    <div class="meta-label">Subject Cloud</div>
-    <div style="display:flex; flex-wrap:wrap; gap:8px; margin-top:8px;">
+
-      {% for s in top_subjects %}
+    {% if top_subjects %}
-        <a
+      {# max count is the first item because list is sorted desc in the view #}
-          class="chip chip-link"
+      {% with maxc=top_subjects.0.count|default:1 %}
-          href="{% url 'search' %}?q={{ s.name|urlencode }}&subject=on"
+      <div class="tag-cloud" aria-label="Subject Tag Cloud">
-          title="Search subject: {{ s.name }}"
+        {% for s in top_subjects %}
-        >
+          {# font-size from 14px up to 32px based on weight #}
-          {{ s.name }} ({{ s.count }})
+          <a
-        </a>
+            class="tag"
-      {% empty %}
+            href="{% url 'search' %}?q={{ s.name|urlencode }}&subject=on"
-        <span class="muted">No subjects.</span>
+            title="{{ s.name }} ({{ s.count }})"
-      {% endfor %}
+            style="font-size: calc(14px + ({{ s.count }} / {{ maxc }}) * 18px);
-    </div>
+                   opacity: calc(.6 + ({{ s.count }} / {{ maxc }}) * .4);"
+          >
+            {{ s.name }}
+          </a>
+        {% endfor %}
+      </div>
+      {% endwith %}
+    {% else %}
+      <span class="muted">No subjects.</span>
+    {% endif %}
   </div>
 
   <!-- Scripture usage -->
@@ -91,4 +100,30 @@
     </div>
   </div>
 </div>
+
+<style>
+  .tag-cloud{
+    display:flex;
+    flex-wrap:wrap;
+    gap:10px 14px;
+    margin-top:10px;
+    align-items:flex-end;
+  }
+  .tag{
+    line-height:1.1;
+    padding:6px 10px;
+    border-radius:12px;
+    text-decoration:none;
+    color:#0f172a;
+    background:#eef5fc;
+    border:1px solid #d7e6f7;
+    transition: transform .1s ease, background .12s ease, border-color .12s ease;
+    white-space:nowrap;
+  }
+  .tag:hover{
+    transform: translateY(-1px);
+    background:#e2effc;
+    border-color:#c9def5;
+  }
+</style>
 {% endblock %}