FSST/Geizkragen
FSST/Geizkragen
2
0
Fork 0
Code Issues Projects 1 Releases 1 Wiki Activity

Add countdown timer and styling for urgency messaging in advertisements

Browse Source
This commit is contained in:
Fabian Schieder 2026-03-31 00:05:19 +02:00
parent 8860508afd
commit a7e1451331
1 changed files with 80 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
ad_recommendation.php
View File

@ -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; ?>