192 lines
6.3 KiB
PHP
192 lines
6.3 KiB
PHP
<?php
|
|
// ad_recommendation.php
|
|
require_once __DIR__ . '/lib/bootstrap.php';
|
|
$conn = db_connect();
|
|
|
|
$stmt = $conn->query("
|
|
SELECT p.productID, p.model, p.description, p.imagePath, MIN(o.price) as minPrice
|
|
FROM products p
|
|
LEFT JOIN offers o ON p.productID = o.productID
|
|
GROUP BY p.productID
|
|
ORDER BY RAND()
|
|
LIMIT 1
|
|
");
|
|
|
|
if ($stmt && $stmt->num_rows > 0) {
|
|
$randomProduct = $stmt->fetch_assoc();
|
|
$rID = (int)$randomProduct['productID'];
|
|
$rModel = htmlspecialchars($randomProduct['model'] ?? '');
|
|
$rDesc = htmlspecialchars($randomProduct['description'] ?? '');
|
|
$rImg = htmlspecialchars($randomProduct['imagePath'] ?? 'assets/images/placeholder.png');
|
|
$rPriceRaw = $randomProduct['minPrice'];
|
|
$rPriceFormatted = $rPriceRaw ? number_format((float)$rPriceRaw, 2, ',', '.') : '100,00';
|
|
?>
|
|
<style>
|
|
/* Catchy Full-Width Recommendation Ad - Fully Embedded */
|
|
.ad-recommendation-wrapper {
|
|
width: 100vw;
|
|
position: relative;
|
|
left: 50%;
|
|
right: 50%;
|
|
margin-left: -50vw;
|
|
margin-right: -50vw;
|
|
margin-top: 2rem;
|
|
margin-bottom: 3rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
background: linear-gradient(135deg, #8A2387 0%, #E94057 50%, #F27121 100%);
|
|
box-shadow: 0 0 50px rgba(233, 64, 87, 0.3);
|
|
overflow: hidden;
|
|
}
|
|
.ad-recommendation-wrapper::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0; left: 0; right: 0; bottom: 0;
|
|
background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="noiseFilter"><feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noiseFilter)"/></svg>');
|
|
opacity: 0.1;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
.ad-recommendation {
|
|
width: 100%;
|
|
max-width: 1200px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
padding: 4rem 2rem;
|
|
gap: 3rem;
|
|
z-index: 1;
|
|
}
|
|
.ad-recommendation__content {
|
|
flex: 1 1 350px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
.ad-recommendation__badge {
|
|
background: #fff;
|
|
color: #E94057;
|
|
padding: 0.5rem 1.2rem;
|
|
border-radius: 30px;
|
|
font-size: 0.9rem;
|
|
font-weight: 800;
|
|
text-transform: uppercase;
|
|
letter-spacing: 2px;
|
|
margin-bottom: 1.5rem;
|
|
align-self: flex-start;
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
|
|
animation: pulseBadge 2s infinite;
|
|
}
|
|
@keyframes pulseBadge {
|
|
0% { transform: scale(1); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); }
|
|
50% { transform: scale(1.05); box-shadow: 0 4px 25px rgba(255, 255, 255, 0.6); }
|
|
100% { transform: scale(1); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); }
|
|
}
|
|
.ad-recommendation__content h2 {
|
|
font-size: 3rem;
|
|
font-weight: 900;
|
|
margin-bottom: 0.5rem;
|
|
color: #ffffff;
|
|
text-shadow: 0 4px 10px rgba(0,0,0,0.2);
|
|
line-height: 1.1;
|
|
}
|
|
.ad-recommendation__price {
|
|
font-size: 2.2rem;
|
|
font-weight: 900;
|
|
color: #ffeb3b;
|
|
margin-bottom: 1rem;
|
|
text-shadow: 0 2px 8px rgba(0,0,0,0.3);
|
|
display: inline-block;
|
|
background: rgba(0, 0, 0, 0.2);
|
|
padding: 0.2rem 1rem;
|
|
border-radius: 12px;
|
|
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
|
|
}
|
|
.ad-recommendation__content p {
|
|
font-size: 1.2rem;
|
|
color: rgba(255, 255, 255, 0.95);
|
|
margin-bottom: 2.5rem;
|
|
line-height: 1.6;
|
|
max-width: 500px;
|
|
font-weight: 500;
|
|
text-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
|
}
|
|
.ad-recommendation__btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 1rem 2.5rem;
|
|
background: #111;
|
|
color: #fff;
|
|
font-size: 1.1rem;
|
|
font-weight: 800;
|
|
border-radius: 40px;
|
|
text-decoration: none;
|
|
transition: all 0.3s ease;
|
|
align-self: flex-start;
|
|
}
|
|
.ad-recommendation__btn:hover {
|
|
background: #fff;
|
|
color: #111;
|
|
transform: translateY(-3px) scale(1.02);
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
|
|
}
|
|
.ad-recommendation__image-wrapper {
|
|
flex: 1 1 350px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.ad-recommendation__image-wrapper img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
max-height: 400px;
|
|
border-radius: 20px;
|
|
filter: drop-shadow(0 20px 40px rgba(0,0,0,0.5));
|
|
transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
}
|
|
.ad-recommendation:hover .ad-recommendation__image-wrapper img {
|
|
transform: scale(1.08) rotate(-4deg);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.ad-recommendation {
|
|
flex-direction: column;
|
|
padding: 3rem 1.5rem;
|
|
text-align: center;
|
|
}
|
|
.ad-recommendation__badge,
|
|
.ad-recommendation__btn {
|
|
align-self: center;
|
|
}
|
|
.ad-recommendation__content h2 {
|
|
font-size: 2.4rem;
|
|
}
|
|
.ad-recommendation__image-wrapper img {
|
|
max-height: 280px;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<div class="ad-recommendation-wrapper">
|
|
<div class="ad-recommendation">
|
|
<div class="ad-recommendation__content">
|
|
<span class="ad-recommendation__badge">Empfehlung des Tages</span>
|
|
<h2><?= $rModel ?></h2>
|
|
<div class="ad-recommendation__price">ab <?= $rPriceFormatted ?> €</div>
|
|
<?php
|
|
$descLen = function_exists('mb_strlen') ? mb_strlen($rDesc) : strlen($rDesc);
|
|
$descShort = $descLen > 120 ? (function_exists('mb_substr') ? mb_substr($rDesc, 0, 120) : substr($rDesc, 0, 120)) . '...' : $rDesc;
|
|
?>
|
|
<p><?= $descShort ?></p>
|
|
<a href="productpage.php?id=<?= $rID ?>" class="ad-recommendation__btn">Jetzt ansehen ›</a>
|
|
</div>
|
|
<div class="ad-recommendation__image-wrapper">
|
|
<img src="<?= $rImg ?>" alt="<?= $rModel ?>">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<?php
|
|
}
|
|
?>
|