From c4025481368c8a89bb77b64479a4f66480e3dc2e Mon Sep 17 00:00:00 2001
From: Fabian Schieder <fabian.schieder.1010@gmail.com>
Date: Tue, 31 Mar 2026 00:38:25 +0200
Subject: [PATCH] Add floating tags for promotions in advertisement
 recommendations

---
 ad_recommendation.php | 53 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 53 insertions(+)

diff --git a/ad_recommendation.php b/ad_recommendation.php
index 715a7bd..0c29da0 100644
--- a/ad_recommendation.php
+++ b/ad_recommendation.php
@@ -149,6 +149,54 @@ if ($stmt && $stmt->num_rows > 0) {
         transform: scale(1.08) rotate(-4deg);
     }
 
+    /* Floating Catchy Tags */
+    .ad-floating-tag {
+        position: absolute;
+        z-index: 2;
+        color: #fff;
+        text-transform: uppercase;
+        font-weight: 900;
+        font-size: 2.5rem;
+        letter-spacing: 3px;
+        padding: 0.5rem 1.5rem;
+        border-radius: 12px;
+        box-shadow: 0 10px 30px rgba(0,0,0,0.4);
+        pointer-events: none;
+        text-shadow: 0 3px 6px rgba(0,0,0,0.3);
+    }
+    .tag-left {
+        top: 25%;
+        left: 8%;
+        background: #ffdd00;
+        color: #111;
+        text-shadow: none;
+        transform: rotate(-15deg);
+        animation: floatTagLeft 3s ease-in-out infinite;
+    }
+    .tag-right {
+        bottom: 25%;
+        right: 8%;
+        background: #00e676;
+        color: #111;
+        text-shadow: none;
+        transform: rotate(15deg);
+        animation: floatTagRight 4s ease-in-out infinite;
+    }
+
+    @keyframes floatTagLeft {
+        0%, 100% { transform: translateY(0) rotate(-15deg) scale(1); }
+        50% { transform: translateY(-15px) rotate(-10deg) scale(1.05); }
+    }
+    @keyframes floatTagRight {
+        0%, 100% { transform: translateY(0) rotate(15deg) scale(1); }
+        50% { transform: translateY(-15px) rotate(20deg) scale(1.05); }
+    }
+
+    @media (max-width: 1400px) {
+        .tag-left { left: 2%; font-size: 2rem; }
+        .tag-right { right: 2%; font-size: 2rem; }
+    }
+
     @media (max-width: 768px) {
         .ad-recommendation {
             flex-direction: column;
@@ -165,10 +213,15 @@ if ($stmt && $stmt->num_rows > 0) {
         .ad-recommendation__image-wrapper img {
             max-height: 280px;
         }
+        .ad-floating-tag {
+            display: none; /* Hide tags on mobile to avoid clutter */
+        }
     }
     </style>
 
     <div class="ad-recommendation-wrapper">
+        <div class="ad-floating-tag tag-left">SALE!</div>
+        <div class="ad-floating-tag tag-right">HOT DEAL</div>
         <div class="ad-recommendation">
             <div class="ad-recommendation__content">
                 <span class="ad-recommendation__badge">Empfehlung des Tages</span>