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

Enhance ad styling for improved visual appeal and responsiveness in ad_recommendation.php

Browse Source
This commit is contained in:
Fabian Schieder 2026-03-31 00:31:31 +02:00
parent be8cd3d8f1
commit c10f5f52ed
1 changed files with 66 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

142
ad_recommendation.php
View File

@ -18,115 +18,105 @@ if ($stmt && $stmt->num_rows > 0) {
$rImg = htmlspecialchars($randomProduct['imagePath'] ?? 'assets/images/placeholder.png'); $rImg = htmlspecialchars($randomProduct['imagePath'] ?? 'assets/images/placeholder.png');
?> ?>
<style> <style>
/* Catchy Full-Width Recommendation Ad */ /* Catchy Full-Width Recommendation Ad - Fully Embedded */
.ad-recommendation-wrapper { .ad-recommendation-wrapper {
width: 100%; width: 100vw;
padding: 0; position: relative;
margin: 2rem 0; left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
margin-top: 2rem;
margin-bottom: 3rem;
display: flex; display: flex;
justify-content: center; justify-content: center;
box-sizing: border-box; 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 { .ad-recommendation {
width: 100%; width: 100%;
max-width: 100%; max-width: 1200px;
border-radius: 0;
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; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
overflow: hidden; padding: 4rem 2rem;
position: relative; gap: 3rem;
padding: 3rem 2rem; z-index: 1;
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 { .ad-recommendation__content {
flex: 1 1 300px; flex: 1 1 350px;
z-index: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
} }
.ad-recommendation__badge { .ad-recommendation__badge {
background: #ff3b30; background: #fff;
color: #fff; color: #E94057;
padding: 0.4rem 1rem; padding: 0.5rem 1.2rem;
border-radius: 20px; border-radius: 30px;
font-size: 0.85rem; font-size: 0.9rem;
font-weight: 700; font-weight: 800;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 1.5px; letter-spacing: 2px;
margin-bottom: 1rem; margin-bottom: 1.5rem;
align-self: flex-start; align-self: flex-start;
box-shadow: 0 0 15px rgba(255, 59, 48, 0.6); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
animation: pulseBadge 2s infinite; animation: pulseBadge 2s infinite;
} }
@keyframes pulseBadge { @keyframes pulseBadge {
0% { box-shadow: 0 0 10px rgba(255, 59, 48, 0.5); } 0% { transform: scale(1); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); }
50% { box-shadow: 0 0 20px rgba(255, 59, 48, 0.8); } 50% { transform: scale(1.05); box-shadow: 0 4px 25px rgba(255, 255, 255, 0.6); }
100% { box-shadow: 0 0 10px rgba(255, 59, 48, 0.5); } 100% { transform: scale(1); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); }
} }
.ad-recommendation__content h2 { .ad-recommendation__content h2 {
font-size: 2.8rem; font-size: 3rem;
font-weight: 800; font-weight: 900;
margin-bottom: 0.8rem; margin-bottom: 1rem;
background: linear-gradient(90deg, #fff, #ccc); color: #ffffff;
-webkit-background-clip: text; text-shadow: 0 4px 10px rgba(0,0,0,0.2);
-webkit-text-fill-color: transparent; line-height: 1.1;
line-height: 1.2;
} }
.ad-recommendation__content p { .ad-recommendation__content p {
font-size: 1.15rem; font-size: 1.2rem;
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.95);
margin-bottom: 2rem; margin-bottom: 2.5rem;
line-height: 1.6; line-height: 1.6;
max-width: 500px; max-width: 500px;
font-weight: 500;
text-shadow: 0 2px 5px rgba(0,0,0,0.1);
} }
.ad-recommendation__btn { .ad-recommendation__btn {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 0.9rem 2rem; padding: 1rem 2.5rem;
background: #fff; background: #111;
color: #000; color: #fff;
font-size: 1.05rem; font-size: 1.1rem;
font-weight: 700; font-weight: 800;
border-radius: 30px; border-radius: 40px;
text-decoration: none; text-decoration: none;
transition: all 0.3s ease; transition: all 0.3s ease;
align-self: flex-start; align-self: flex-start;
box-shadow: 0 4px 15px rgba(255,255,255,0.2);
} }
.ad-recommendation__btn:hover { .ad-recommendation__btn:hover {
background: #f0f0f0; background: #fff;
color: #111;
transform: translateY(-3px) scale(1.02); transform: translateY(-3px) scale(1.02);
box-shadow: 0 8px 25px rgba(255,255,255,0.3); box-shadow: 0 10px 30px rgba(0,0,0,0.3);
} }
.ad-recommendation__image-wrapper { .ad-recommendation__image-wrapper {
flex: 1 1 300px; flex: 1 1 350px;
z-index: 1;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -134,19 +124,19 @@ if ($stmt && $stmt->num_rows > 0) {
.ad-recommendation__image-wrapper img { .ad-recommendation__image-wrapper img {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
max-height: 350px; max-height: 400px;
border-radius: 16px; border-radius: 20px;
filter: drop-shadow(0 15px 30px rgba(0,0,0,0.6)); 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); transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
} }
.ad-recommendation:hover .ad-recommendation__image-wrapper img { .ad-recommendation:hover .ad-recommendation__image-wrapper img {
transform: scale(1.08) rotate(-3deg); transform: scale(1.08) rotate(-4deg);
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.ad-recommendation { .ad-recommendation {
flex-direction: column; flex-direction: column;
padding: 2rem 1.5rem; padding: 3rem 1.5rem;
text-align: center; text-align: center;
} }
.ad-recommendation__badge, .ad-recommendation__badge,
@ -154,10 +144,10 @@ if ($stmt && $stmt->num_rows > 0) {
align-self: center; align-self: center;
} }
.ad-recommendation__content h2 { .ad-recommendation__content h2 {
font-size: 2.2rem; font-size: 2.4rem;
} }
.ad-recommendation__image-wrapper img { .ad-recommendation__image-wrapper img {
max-height: 250px; max-height: 280px;
} }
} }
</style> </style>