From 30faaf2a9dfef3ce07d6421d1cbe7da60a94f4f5 Mon Sep 17 00:00:00 2001
From: Junwei Zhao <wahyd4@gmail.com>
Date: Sun, 2 Mar 2025 09:51:15 +1100
Subject: [PATCH] Update tag style

---
 links/templates/links/tag_list.html | 106 ++++++++++++++--------------
 1 file changed, 53 insertions(+), 53 deletions(-)

diff --git a/links/templates/links/tag_list.html b/links/templates/links/tag_list.html
index 58cb893..b3ad8f9 100644
--- a/links/templates/links/tag_list.html
+++ b/links/templates/links/tag_list.html
@@ -13,35 +13,47 @@
     <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
         {% for tag in tags %}
         <a href="{% url 'tag-detail' tag.slug %}" class="block group">
-            <div class="tag-card rounded-lg p-4 h-full flex flex-col items-center justify-center text-center shadow-md hover:shadow-lg transition-all duration-200">
+            <div
+                class="tag-card rounded-lg p-4 h-full flex flex-col items-center justify-center text-center shadow-md hover:shadow-lg transition-all duration-200">
                 <div class="mb-2">
                     {% with icon_classes="w-8 h-8 mx-auto" %}
                     {% if forloop.counter|divisibleby:5 %}
-                    <svg class="{{ icon_classes }}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
+                    <svg class="{{ icon_classes }}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                        stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
                     </svg>
                     {% elif forloop.counter|divisibleby:4 %}
-                    <svg class="{{ icon_classes }}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                    <svg class="{{ icon_classes }}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                        stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                     </svg>
                     {% elif forloop.counter|divisibleby:3 %}
-                    <svg class="{{ icon_classes }}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                    <svg class="{{ icon_classes }}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                        stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                     </svg>
                     {% elif forloop.counter|divisibleby:2 %}
-                    <svg class="{{ icon_classes }}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2" />
+                    <svg class="{{ icon_classes }}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                        stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2" />
                     </svg>
                     {% else %}
-                    <svg class="{{ icon_classes }}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" />
+                    <svg class="{{ icon_classes }}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                        stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" />
                     </svg>
                     {% endif %}
                     {% endwith %}
                 </div>
                 <h2 class="text-lg font-semibold mb-1">{{ tag.name }}</h2>
                 <div class="mt-1">
-                    <span class="inline-flex items-center justify-center bg-white bg-opacity-30 text-xs font-medium px-2 py-1 rounded-full">
+                    <span
+                        class="inline-flex items-center justify-center bg-white bg-opacity-30 text-xs font-medium px-2 py-1 rounded-full">
                         {{ tag.total_count }} {% trans "uses" %}
                     </span>
                 </div>
@@ -58,13 +70,15 @@
     <div class="mt-8 flex justify-center">
         <nav class="inline-flex rounded-md shadow">
             {% if page_obj.has_previous %}
-            <a href="?page={{ page_obj.previous_page_number }}" class="px-3 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
+            <a href="?page={{ page_obj.previous_page_number }}"
+                class="px-3 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                 {% trans "Previous" %}
             </a>
             {% endif %}
-            
+
             {% if page_obj.has_next %}
-            <a href="?page={{ page_obj.next_page_number }}" class="px-3 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
+            <a href="?page={{ page_obj.next_page_number }}"
+                class="px-3 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                 {% trans "Next" %}
             </a>
             {% endif %}
@@ -74,44 +88,30 @@
 </div>
 
 <script>
-document.addEventListener('DOMContentLoaded', function() {
-    // Debug message
-    console.log('Script is running');
-    
-    // Define colors for tags
-    const tagColors = [
-        '#3b82f6', // blue
-        '#10b981', // green
-        '#f59e0b', // yellow
-        '#ef4444', // red
-        '#6366f1', // indigo
-        '#8b5cf6', // purple
-        '#ec4899', // pink
-        '#06b6d4', // cyan
-        '#f97316', // orange
-        '#14b8a6', // teal
-        '#84cc16', // lime
-        '#10b981', // emerald
-        '#0ea5e9', // sky
-        '#8b5cf6', // violet
-        '#f43f5e', // rose
-        '#f59e0b'  // amber
-    ];
+    document.addEventListener('DOMContentLoaded', function () {
+        // Debug message
+        console.log('Script is running');
 
-    // Get all tag cards
-    const tagCards = document.querySelectorAll('.tag-card');
-    console.log('Found tag cards:', tagCards.length);
-    
-    // Apply random colors to each tag card
-    tagCards.forEach((card, index) => {
-        // Add a random color
-        const randomColor = tagColors[Math.floor(Math.random() * tagColors.length)];
-        card.style.backgroundColor = randomColor;
-        card.style.color = 'white';
-        
-        // Log for debugging
-        console.log('Applied color:', randomColor, 'to card index:', index);
+        // Define colors for tags
+        const tagColors = [
+            '#3498db', '#2ecc71', '#e74c3c', '#f39c12', '#9b59b6',
+            '#1abc9c', '#d35400', '#34495e', '#16a085', '#27ae60'
+        ];
+
+        // Get all tag cards
+        const tagCards = document.querySelectorAll('.tag-card');
+        console.log('Found tag cards:', tagCards.length);
+
+        // Apply random colors to each tag card
+        tagCards.forEach((card, index) => {
+            // Add a random color
+            const randomColor = tagColors[Math.floor(Math.random() * tagColors.length)];
+            card.style.backgroundColor = randomColor;
+            card.style.color = 'white';
+
+            // Log for debugging
+            console.log('Applied color:', randomColor, 'to card index:', index);
+        });
     });
-});
 </script>
-{% endblock %}
+{% endblock %}
\ No newline at end of file