vault backup: 2025-12-22 02:56:57

quiz/templates/index.html

@@ -1,6 +1,42 @@
 {% extends "base.html" %}
+
 {% block content %}
+<style>
+    .filter-section { margin-bottom: 20px; }
+    .tag-chip {
+        display: inline-block;
+        padding: 5px 12px;
+        margin: 4px;
+        border-radius: 16px;
+        background: #e0e0e0;
+        text-decoration: none;
+        color: #333;
+        font-size: 14px;
+        transition: background 0.2s;
+    }
+    .tag-chip.active {
+        background: #4CAF50;
+        color: white;
+    }
+    .tag-chip:hover {
+        background: #d5d5d5;
+    }
+    .tag-chip.active:hover {
+        background: #45a049;
+    }
+</style>
+
 <h1>Quiz Application</h1>
+
+<div class="filter-section">
+    <a href="?tag=" class="tag-chip {% if not current_tag %}active{% endif %}">All</a>
+    {% for tag in tags %}
+        <a href="?tag={{ tag.slug }}" class="tag-chip {% if current_tag == tag.slug %}active{% endif %}">
+            {{ tag.name }}
+        </a>
+    {% endfor %}
+</div>
+
 <div class="progress">
     <div class="progress-bar" style="width: {% if total_questions > 0 %}{{ answered_count|floatformat:0 }}{% else %}0{% endif %}%"></div>
 </div>