364 lines
9.7 KiB
PHP
364 lines
9.7 KiB
PHP
<?php
|
|
require_once __DIR__ . '/lib/bootstrap.php';
|
|
$conn = db_connect();
|
|
|
|
// Fetch 1 random product
|
|
$query = "SELECT productID, model, description, imagePath FROM products ORDER BY RAND() LIMIT 1";
|
|
$result = $conn->query($query);
|
|
$adProduct = $result->fetch_assoc();
|
|
|
|
if ($adProduct):
|
|
$fakeOldPrice = rand(199, 599) . ",00 €";
|
|
$fakeNewPrice = rand(19, 49) . ",99 €";
|
|
$fakeStock = rand(2, 5);
|
|
?>
|
|
<style>
|
|
/* Verhindert horizontales Scrollen falls 100vw den vertikalen Scrollbar überlappt */
|
|
html, body {
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.ad-recommendation {
|
|
background: linear-gradient(45deg, #ff0000, #ff8c00, #ff007f);
|
|
background-size: 600% 600%;
|
|
animation: gradientShift 5s ease infinite;
|
|
padding: 90px 0;
|
|
margin: 40px 0;
|
|
|
|
width: 100vw;
|
|
margin-left: calc(50% - 50vw);
|
|
box-sizing: border-box;
|
|
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
color: #fff;
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
|
|
overflow: hidden;
|
|
}
|
|
|
|
@keyframes gradientShift {
|
|
0% { background-position: 0% 50%; }
|
|
50% { background-position: 100% 50%; }
|
|
100% { background-position: 0% 50%; }
|
|
}
|
|
|
|
.ad-recommendation::before {
|
|
content: 'ANZEIGE - GESPONSERT';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: rgba(0,0,0,0.8);
|
|
color: #ffd700;
|
|
padding: 4px 20px;
|
|
font-size: 0.8rem;
|
|
font-weight: 900;
|
|
text-transform: uppercase;
|
|
letter-spacing: 3px;
|
|
border-bottom-left-radius: 10px;
|
|
border-bottom-right-radius: 10px;
|
|
}
|
|
|
|
.ad-container {
|
|
max-width: none;
|
|
width: 100vw;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 6vw;
|
|
padding: 0 4vw;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.ad-image-container {
|
|
flex-shrink: 0;
|
|
width: clamp(360px, 34vw, 560px);
|
|
height: clamp(360px, 34vw, 560px);
|
|
background: radial-gradient(circle, #fff 0%, #ffe6e6 100%);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
box-shadow: 0 0 50px rgba(255, 255, 255, 0.4), inset 0 0 20px rgba(0,0,0,0.1);
|
|
border: 8px solid #ffd700;
|
|
transform: rotate(-5deg);
|
|
animation: floating 3s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes floating {
|
|
0% { transform: translateY(0px) rotate(-5deg); }
|
|
50% { transform: translateY(-15px) rotate(-2deg); }
|
|
100% { transform: translateY(0px) rotate(-5deg); }
|
|
}
|
|
|
|
.ad-image-container img {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
object-fit: contain;
|
|
filter: drop-shadow(0 10px 10px rgba(0,0,0,0.3));
|
|
}
|
|
|
|
.ad-content {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.ad-tag {
|
|
display: inline-block;
|
|
background: #ffd700;
|
|
color: #d10000;
|
|
padding: 8px 20px;
|
|
border-radius: 30px;
|
|
font-weight: 900;
|
|
font-size: 1.2rem;
|
|
margin-bottom: 15px;
|
|
text-transform: uppercase;
|
|
animation: pulseTag 1s infinite alternate;
|
|
box-shadow: 0 0 15px #ffd700;
|
|
}
|
|
|
|
@keyframes pulseTag {
|
|
0% { transform: scale(1); }
|
|
100% { transform: scale(1.1); }
|
|
}
|
|
|
|
.ad-title {
|
|
font-size: clamp(3.2rem, 5.4vw, 6rem);
|
|
font-weight: 900;
|
|
margin: 0 0 15px 0;
|
|
line-height: 1.1;
|
|
text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.ad-stars {
|
|
color: #ffd700;
|
|
font-size: 1.5rem;
|
|
margin-bottom: 15px;
|
|
text-shadow: 1px 1px 2px #000;
|
|
}
|
|
|
|
.ad-prices {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 15px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.ad-old-price {
|
|
font-size: 1.5rem;
|
|
text-decoration: line-through;
|
|
color: #ffcccc;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.ad-new-price {
|
|
font-size: 3rem;
|
|
font-weight: 900;
|
|
color: #ffd700;
|
|
text-shadow: 2px 2px 4px #000;
|
|
animation: flashPrice 2s infinite;
|
|
}
|
|
|
|
@keyframes flashPrice {
|
|
0%, 100% { color: #ffd700; }
|
|
50% { color: #fff; text-shadow: 0 0 20px #ffd700, 2px 2px 4px #000; }
|
|
}
|
|
|
|
.ad-description {
|
|
font-size: 1.3rem;
|
|
line-height: 1.6;
|
|
margin-bottom: 25px;
|
|
font-weight: bold;
|
|
text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
|
|
background: rgba(0,0,0,0.3);
|
|
padding: 20px;
|
|
border-left: 5px solid #ffd700;
|
|
border-radius: 0 10px 10px 0;
|
|
max-width: none;
|
|
width: 100%;
|
|
}
|
|
|
|
.ad-urgency {
|
|
font-size: 1.2rem;
|
|
font-weight: 900;
|
|
color: #fff;
|
|
background: #d10000;
|
|
display: inline-block;
|
|
padding: 10px 20px;
|
|
border-radius: 5px;
|
|
margin-bottom: 25px;
|
|
border: 2px solid #fff;
|
|
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);
|
|
color: #000;
|
|
text-decoration: none;
|
|
padding: 20px 50px;
|
|
border-radius: 50px;
|
|
font-weight: 900;
|
|
font-size: 1.8rem;
|
|
text-transform: uppercase;
|
|
transition: all 0.2s;
|
|
box-shadow: 0 10px 20px rgba(0,0,0,0.4), inset 0 -4px 0 rgba(0,0,0,0.2);
|
|
border: 4px solid #fff;
|
|
animation: heartbeat 1.5s infinite;
|
|
}
|
|
|
|
.ad-btn:hover {
|
|
transform: scale(1.1);
|
|
box-shadow: 0 15px 30px rgba(0,0,0,0.6), inset 0 -4px 0 rgba(0,0,0,0.2);
|
|
color: #000;
|
|
}
|
|
|
|
@keyframes heartbeat {
|
|
0% { transform: scale(1); }
|
|
15% { transform: scale(1.05); }
|
|
30% { transform: scale(1); }
|
|
45% { transform: scale(1.05); }
|
|
60% { transform: scale(1); }
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.ad-recommendation {
|
|
padding: 60px 0;
|
|
}
|
|
.ad-container {
|
|
width: 100%;
|
|
flex-direction: column;
|
|
text-align: center;
|
|
gap: 28px;
|
|
padding: 0 5vw;
|
|
}
|
|
.ad-title { font-size: 2.2rem; }
|
|
.ad-description { border-left: none; border-top: 5px solid #ffd700; border-radius: 0 0 10px 10px; }
|
|
.ad-prices { justify-content: center; }
|
|
}
|
|
</style>
|
|
|
|
<div class="ad-recommendation">
|
|
<div class="ad-container">
|
|
<div class="ad-image-container">
|
|
<img src="<?= htmlspecialchars($adProduct['imagePath']) ?>" alt="<?= htmlspecialchars($adProduct['model']) ?>">
|
|
</div>
|
|
<div class="ad-content">
|
|
<div class="ad-tag">🔥 WAHNSINNS-DEAL DES TAGES 🔥</div>
|
|
<h2 class="ad-title"><?= htmlspecialchars($adProduct['model']) ?></h2>
|
|
|
|
<div class="ad-stars">
|
|
★★★★★ <span style="font-size:1rem; color:#fff; font-weight:normal; text-shadow:none;">(4.987 Bewertungen)</span>
|
|
</div>
|
|
|
|
<div class="ad-prices">
|
|
<span class="ad-old-price">Statt <?= $fakeOldPrice ?></span>
|
|
<span class="ad-new-price">JETZT NUR <?= $fakeNewPrice ?>!</span>
|
|
</div>
|
|
|
|
<p class="ad-description">
|
|
UNFASSBAR! Dieser unglaubliche Bestseller geht gerade viral und sprengt alle Erwartungen!
|
|
Greif jetzt zu, bevor es zu spät ist!
|
|
<?php
|
|
$desc = $adProduct['description'];
|
|
if (function_exists('mb_strimwidth')) {
|
|
$desc = mb_strimwidth($desc, 0, 100, "...");
|
|
} else {
|
|
$desc = strlen($desc) > 100 ? substr($desc, 0, 97) . "..." : $desc;
|
|
}
|
|
echo htmlspecialchars($desc);
|
|
?>
|
|
</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! Über 4.000 Kunden haben das heute schon gekauft!
|
|
</div>
|
|
|
|
<br>
|
|
<a href="productpage.php?id=<?= $adProduct['productID'] ?>" class="ad-btn">👉 SOFORT ZUSCHLAGEN 👈</a>
|
|
</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; ?>
|