Add advertisement recommendation feature with styling to ad_recommendation.php
This commit is contained in:
parent
863715f221
commit
b441f6ae37
@ -1 +1,179 @@
|
|||||||
|
<?php
|
||||||
|
// ad_recommendation.php
|
||||||
|
require_once __DIR__ . '/lib/bootstrap.php';
|
||||||
|
$conn = db_connect();
|
||||||
|
|
||||||
|
$stmt = $conn->query("
|
||||||
|
SELECT productID, model, description, imagePath
|
||||||
|
FROM products
|
||||||
|
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');
|
||||||
|
?>
|
||||||
|
<style>
|
||||||
|
/* Catchy Full-Width Recommendation Ad */
|
||||||
|
.ad-recommendation-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 1rem;
|
||||||
|
margin: 2rem 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.ad-recommendation {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1200px;
|
||||||
|
background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%);
|
||||||
|
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
|
||||||
|
backdrop-filter: blur(14px);
|
||||||
|
-webkit-backdrop-filter: blur(14px);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
border-radius: 20px;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
padding: 3rem 2rem;
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
.ad-recommendation::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: -50%;
|
||||||
|
left: -50%;
|
||||||
|
width: 200%;
|
||||||
|
height: 200%;
|
||||||
|
background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 50%);
|
||||||
|
opacity: 0.8;
|
||||||
|
pointer-events: none;
|
||||||
|
animation: rotateAdBackground 20s linear infinite;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
@keyframes rotateAdBackground {
|
||||||
|
0% { transform: rotate(0deg); }
|
||||||
|
100% { transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
.ad-recommendation__content {
|
||||||
|
flex: 1 1 300px;
|
||||||
|
z-index: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.ad-recommendation__badge {
|
||||||
|
background: #ff3b30;
|
||||||
|
color: #fff;
|
||||||
|
padding: 0.4rem 1rem;
|
||||||
|
border-radius: 20px;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 1.5px;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
align-self: flex-start;
|
||||||
|
box-shadow: 0 0 15px rgba(255, 59, 48, 0.6);
|
||||||
|
animation: pulseBadge 2s infinite;
|
||||||
|
}
|
||||||
|
@keyframes pulseBadge {
|
||||||
|
0% { box-shadow: 0 0 10px rgba(255, 59, 48, 0.5); }
|
||||||
|
50% { box-shadow: 0 0 20px rgba(255, 59, 48, 0.8); }
|
||||||
|
100% { box-shadow: 0 0 10px rgba(255, 59, 48, 0.5); }
|
||||||
|
}
|
||||||
|
.ad-recommendation__content h2 {
|
||||||
|
font-size: 2.8rem;
|
||||||
|
font-weight: 800;
|
||||||
|
margin-bottom: 0.8rem;
|
||||||
|
background: linear-gradient(90deg, #fff, #ccc);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
.ad-recommendation__content p {
|
||||||
|
font-size: 1.15rem;
|
||||||
|
color: rgba(255, 255, 255, 0.8);
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
max-width: 500px;
|
||||||
|
}
|
||||||
|
.ad-recommendation__btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0.9rem 2rem;
|
||||||
|
background: #fff;
|
||||||
|
color: #000;
|
||||||
|
font-size: 1.05rem;
|
||||||
|
font-weight: 700;
|
||||||
|
border-radius: 30px;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
align-self: flex-start;
|
||||||
|
box-shadow: 0 4px 15px rgba(255,255,255,0.2);
|
||||||
|
}
|
||||||
|
.ad-recommendation__btn:hover {
|
||||||
|
background: #f0f0f0;
|
||||||
|
transform: translateY(-3px) scale(1.02);
|
||||||
|
box-shadow: 0 8px 25px rgba(255,255,255,0.3);
|
||||||
|
}
|
||||||
|
.ad-recommendation__image-wrapper {
|
||||||
|
flex: 1 1 300px;
|
||||||
|
z-index: 1;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.ad-recommendation__image-wrapper img {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
max-height: 350px;
|
||||||
|
border-radius: 16px;
|
||||||
|
filter: drop-shadow(0 15px 30px rgba(0,0,0,0.6));
|
||||||
|
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(-3deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.ad-recommendation {
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 2rem 1.5rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.ad-recommendation__badge,
|
||||||
|
.ad-recommendation__btn {
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
.ad-recommendation__content h2 {
|
||||||
|
font-size: 2.2rem;
|
||||||
|
}
|
||||||
|
.ad-recommendation__image-wrapper img {
|
||||||
|
max-height: 250px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</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>
|
||||||
|
<p><?= (mb_strlen($rDesc) > 120) ? mb_substr($rDesc, 0, 120) . '...' : $rDesc ?></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
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
|||||||
10
index.php
10
index.php
@ -6,7 +6,15 @@ require_once __DIR__ . '/lib/bootstrap.php';
|
|||||||
<?php include 'catbar.php'; ?>
|
<?php include 'catbar.php'; ?>
|
||||||
<?php include 'attrbar.php'; ?>
|
<?php include 'attrbar.php'; ?>
|
||||||
|
|
||||||
|
<?php
|
||||||
|
$searchTerm = isset($_GET['search']) ? trim((string)$_GET['search']) : '';
|
||||||
|
$activeCategory = isset($_GET['category']) ? $_GET['category'] : 'all';
|
||||||
|
|
||||||
|
if ($searchTerm === '' && $activeCategory === 'all') {
|
||||||
|
include 'ad_recommendation.php';
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
|
||||||
<?php include 'compcards.php'; ?>
|
<?php include 'compcards.php'; ?>
|
||||||
|
|
||||||
|
|
||||||
<?php include 'footer.php'; ?>
|
<?php include 'footer.php'; ?>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user