adding colored tiles to products on the main page/Overview

assets/css/style.css

@@ -224,6 +224,8 @@ code {
 }
 
 .product-card {
+    display: flex;
+    flex-direction: column;
     background: var(--brand-surface);
     border-radius: 28px;
     overflow: hidden;
@@ -246,6 +248,9 @@ code {
 }
 
 .product-card-content {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
     padding: 1.5rem;
 }
 
@@ -258,6 +263,24 @@ code {
     text-decoration: none;
 }
 
+.product-card-categories {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem;
+    margin-top: auto;
+}
+
+.category-chip {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.2rem 0.55rem;
+    border: 1px solid transparent;
+    border-radius: 8px;
+    font-size: 0.75rem;
+    line-height: 1.2;
+    font-weight: 600;
+}
+
 .product-card .price {
     font-size: 1.5rem;
     font-weight: 600;

data/products.json

@@ -408,6 +408,7 @@
             "description": "",
             "image": "",
             "categories": [
+                "jugend",
                 "psa-agt",
                 "psa-nicht-agt"
             ],

includes/functions.php

@@ -447,6 +447,39 @@ function getCategoryLabels($categoryIds)
     return $labels;
 }
 
+function getCategoryChipPalette($categoryId)
+{
+    $categoryId = normalizeCategoryId($categoryId);
+    if ($categoryId === "") {
+        return [
+            "background" => "#ebe8df",
+            "border" => "#d0c8b5",
+            "text" => "#4b4b4b",
+        ];
+    }
+
+    $hash = crc32($categoryId);
+    if ($hash < 0) {
+        $hash = $hash * -1;
+    }
+
+    // Spread hues across a distinct red -> blue range.
+    $hueSteps = [0, 16, 32, 48, 66, 84, 104, 128, 152, 176, 200, 224];
+    $hue = $hueSteps[$hash % count($hueSteps)];
+    $saturation = 44 + (($hash >> 8) % 10);
+    $lightness = 84 + (($hash >> 16) % 7);
+
+    $background = "hsl(" . $hue . ", " . $saturation . "%, " . $lightness . "%)";
+    $border = "hsl(" . $hue . ", " . ($saturation + 8) . "%, " . ($lightness - 16) . "%)";
+    $text = "hsl(" . $hue . ", " . ($saturation + 18) . "%, 24%)";
+
+    return [
+        "background" => $background,
+        "border" => $border,
+        "text" => $text,
+    ];
+}
+
 function generateCategoryIdFromLabel($label, $existingCategories = [])
 {
     $baseId = normalizeCategoryId($label);

index.php

@@ -78,6 +78,25 @@ $categoryOption["id"]
                     ]; ?>" class="product-card-title-link"><?php echo escape(
     $product["name"],
 ); ?></a></h3>
+                    <?php $productCategoryIds = getProductCategoryIds($product); ?>
+                    <?php if (!empty($productCategoryIds)): ?>
+                        <div class="product-card-categories" aria-label="Kategorien">
+                            <?php foreach ($productCategoryIds as $productCategoryId): ?>
+                                <?php $chipPalette = getCategoryChipPalette(
+                                    $productCategoryId,
+                                ); ?>
+                                <span class="category-chip" style="background-color: <?php echo escape(
+                                    $chipPalette["background"],
+                                ); ?>; border-color: <?php echo escape(
+    $chipPalette["border"],
+); ?>; color: <?php echo escape($chipPalette["text"]); ?>;">
+                                    <?php echo escape(
+                                        getCategoryLabel($productCategoryId),
+                                    ); ?>
+                                </span>
+                            <?php endforeach; ?>
+                        </div>
+                    <?php endif; ?>
                     <a href="product.php?id=<?php echo (int) $product[
                         "id"
                     ]; ?>" class="btn btn-block mt-2">Details ansehen</a>