From a7e14513317e7e731ec366ccf11aa4487f1b0cbe Mon Sep 17 00:00:00 2001
From: Fabian Schieder <fabian.schieder.1010@gmail.com>
Date: Tue, 31 Mar 2026 00:05:19 +0200
Subject: [PATCH] Add countdown timer and styling for urgency messaging in
 advertisements

---
 ad_recommendation.php | 81 ++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 80 insertions(+), 1 deletion(-)

diff --git a/ad_recommendation.php b/ad_recommendation.php
index 631a01f..517c53b 100644
--- a/ad_recommendation.php
+++ b/ad_recommendation.php
@@ -193,6 +193,46 @@ html, body {
     box-shadow: 0 0 15px rgba(209,0,0,0.8);
 }
 
+.ad-countdown {
+    background: #000;
+    color: #ffd700;
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    padding: 15px 25px;
+    border-radius: 10px;
+    font-family: monospace;
+    font-size: 2.5rem;
+    font-weight: 900;
+    border: 3px solid #ff0000;
+    box-shadow: 0 0 20px rgba(255, 0, 0, 0.6);
+    margin-bottom: 25px;
+    text-shadow: 0 0 10px #ffd700;
+    animation: flashCountdown 1s infinite alternate;
+}
+
+.ad-countdown span {
+    display: inline-block;
+    min-width: 50px;
+    text-align: center;
+}
+
+.ad-countdown-label {
+    display: block;
+    font-size: 0.8rem;
+    color: #fff;
+    text-shadow: none;
+    text-transform: uppercase;
+    font-weight: bold;
+    font-family: sans-serif;
+    margin-top: -5px;
+}
+
+@keyframes flashCountdown {
+    0% { border-color: #ff0000; box-shadow: 0 0 20px rgba(255, 0, 0, 0.6); }
+    100% { border-color: #ffd700; box-shadow: 0 0 30px rgba(255, 215, 0, 0.8); }
+}
+
 .ad-btn {
     display: inline-block;
     background: linear-gradient(to bottom, #ffd700, #ff8c00);
@@ -272,8 +312,16 @@ html, body {
                 ?>
             </p>
             
+            <div id="ad-countdown-timer" class="ad-countdown">
+                <div><span id="cd-hours">00</span><span class="ad-countdown-label">Stunden</span></div> :
+                <div><span id="cd-minutes">15</span><span class="ad-countdown-label">Minuten</span></div> :
+                <div><span id="cd-seconds">00</span><span class="ad-countdown-label">Sekunden</span></div>
+            </div>
+            
+            <br>
+
             <div class="ad-urgency">
-                ⏳ ACHTUNG: Nur noch <?= $fakeStock ?> Stück auf Lager! Andere Nutzer schauen sich diesen Artikel gerade an!
+                ⏳ ACHTUNG: Nur noch <?= $fakeStock ?> Stück auf Lager! Über 4.000 Kunden haben das heute schon gekauft!
             </div>
             
             <br>
@@ -281,4 +329,35 @@ html, body {
         </div>
     </div>
 </div>
+
+<script>
+document.addEventListener("DOMContentLoaded", function() {
+    // Artificial countdown (e.g. 15 minutes)
+    let totalSeconds = 15 * 60 + Math.floor(Math.random() * 60);
+    
+    const hoursEl = document.getElementById("cd-hours");
+    const minutesEl = document.getElementById("cd-minutes");
+    const secondsEl = document.getElementById("cd-seconds");
+    
+    function updateCountdown() {
+        if(totalSeconds <= 0) {
+            totalSeconds = 5 * 60; // Reset to 5 minutes to keep faking urgency
+        }
+        
+        let h = Math.floor(totalSeconds / 3600);
+        let m = Math.floor((totalSeconds % 3600) / 60);
+        let s = totalSeconds % 60;
+        
+        hoursEl.innerText = h < 10 ? "0" + h : h;
+        minutesEl.innerText = m < 10 ? "0" + m : m;
+        secondsEl.innerText = s < 10 ? "0" + s : s;
+        
+        totalSeconds--;
+    }
+    
+    setInterval(updateCountdown, 1000);
+    updateCountdown();
+});
+</script>
+
 <?php endif; ?>