FSST/Geizkragen
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor account and product pages with animated styles and improved layout for better user experience

Browse Source
This commit is contained in:
Fabian Schieder 2026-02-27 22:32:14 +01:00
parent 173707ddc4
commit 5e421709f0
10 changed files with 750 additions and 256 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
account.php
View File

@ -105,16 +105,18 @@ include 'header.php';
</div> </div>
<div class="auth__card"> <div class="auth__card">
<form> <div class="auth__actions">
<a href="productAdder.php" class="auth__actions"> <br> <a href="productAdder.php" style="display:block;">
<button class="auth__submit" type="button"">Produkt hinzufügen</button> <button class="auth__submit" type="button">Produkt hinzufügen</button>
</a> </a>
</form> </div>
<form action="logout.php" method="post" class="auth__actions" style="margin-top: 20px;"> <form action="logout.php" method="post">
<button class="auth__submit" type="submit" style="background:#dc2626;"> <div class="auth__actions">
Abmelden <button class="auth__submit auth__submit--danger" type="submit">
</button> Abmelden
</button>
</div>
</form> </form>
</div> </div>

60
assets/css/catbar.css
View File

@ -1,13 +1,17 @@
/* ========================================================== /* ==========================================================
CATEGORY BAR – Modern Pill Navigation CATEGORY BAR – Animated Pill Navigation
========================================================== */ ========================================================== */
.home-nav { .home-nav {
width: 100%; width: 100%;
background: var(--bg-surface); background: rgba(20, 28, 43, 0.6);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle);
padding: 0; padding: 0;
overflow: hidden; position: relative;
z-index: 1;
animation: fadeIn 0.6s ease 0.2s both;
} }
.home-nav__inner { .home-nav__inner {
@ -16,7 +20,7 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 0.5rem 1rem; padding: 0.6rem 1rem;
} }
.home-nav__list { .home-nav__list {
@ -25,7 +29,7 @@
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
gap: 0.35rem; gap: 0.3rem;
justify-content: center; justify-content: center;
} }
@ -35,11 +39,11 @@
} }
.home-nav__list li a { .home-nav__list li a {
padding: 0.55rem 1.5rem; padding: 0.5rem 1.4rem;
background: transparent; background: transparent;
color: var(--text-secondary); color: var(--text-muted);
font-weight: 500; font-weight: 500;
font-size: 0.88rem; font-size: 0.85rem;
font-family: var(--font-family); font-family: var(--font-family);
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
@ -47,18 +51,38 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: var(--radius-full); border-radius: var(--radius-full);
transition: color var(--transition-fast), transition: all var(--transition-smooth);
background var(--transition-fast);
white-space: nowrap; white-space: nowrap;
position: relative;
letter-spacing: 0.2px;
}
/* Animated underline on hover */
.home-nav__list li a::after {
content: "";
position: absolute;
bottom: 4px;
left: 50%;
width: 0;
height: 2px;
background: var(--color-primary);
border-radius: var(--radius-full);
transition: all var(--transition-smooth);
transform: translateX(-50%);
} }
.home-nav__list li a:hover { .home-nav__list li a:hover {
color: var(--text-invert); color: var(--text-invert);
background: rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.05);
transform: translateY(-1px);
}
.home-nav__list li a:hover::after {
width: 50%;
} }
.home-nav__list li a:active { .home-nav__list li a:active {
background: rgba(255, 255, 255, 0.12); transform: scale(0.97);
} }
.home-nav__list li a:focus-visible { .home-nav__list li a:focus-visible {
@ -70,6 +94,12 @@
color: var(--color-primary); color: var(--color-primary);
background: var(--color-primary-soft); background: var(--color-primary-soft);
font-weight: 600; font-weight: 600;
box-shadow: 0 0 16px rgba(59, 130, 246, 0.1);
}
.home-nav__list li a.active::after {
width: 60%;
background: var(--color-primary);
} }
/* ─── Responsive: horizontal scroll on mobile ─── */ /* ─── Responsive: horizontal scroll on mobile ─── */
@ -90,9 +120,7 @@
justify-content: flex-start; justify-content: flex-start;
} }
.home-nav__list::-webkit-scrollbar { .home-nav__list::-webkit-scrollbar { display: none; }
display: none;
}
.home-nav__list li { .home-nav__list li {
flex: 0 0 auto; flex: 0 0 auto;
@ -100,7 +128,7 @@
} }
.home-nav__list li a { .home-nav__list li a {
padding: 0.5rem 1.1rem; padding: 0.45rem 1rem;
font-size: 0.82rem; font-size: 0.82rem;
} }
} }

147
assets/css/compcard.css
View File

@ -1,5 +1,5 @@
/* ========================================================== /* ==========================================================
PRODUCT CARDS & SCROLL – Modern Glass Cards PRODUCT CARDS & SCROLL – Animated Glass Cards
========================================================== */ ========================================================== */
/* ─── Product Grid ─── */ /* ─── Product Grid ─── */
@ -17,20 +17,65 @@
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
overflow: hidden; overflow: hidden;
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
transition: transform var(--transition-smooth), transition: all var(--transition-smooth);
box-shadow var(--transition-smooth),
border-color var(--transition-smooth);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 260px; min-height: 270px;
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
position: relative;
animation: fadeInUp 0.5s ease both;
}
/* Gradient border glow on hover */
.product-card::before {
content: "";
position: absolute;
inset: -1px;
border-radius: var(--radius-lg);
padding: 1px;
background: linear-gradient(
135deg,
rgba(59, 130, 246, 0.3),
rgba(16, 185, 129, 0.2),
rgba(59, 130, 246, 0.1)
);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity var(--transition-smooth);
z-index: 1;
pointer-events: none;
}
/* Inner glow effect on hover */
.product-card::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 120px;
background: linear-gradient(180deg, rgba(59, 130, 246, 0.04), transparent);
opacity: 0;
transition: opacity var(--transition-smooth);
pointer-events: none;
z-index: 1;
} }
.product-card:hover { .product-card:hover {
transform: translateY(-6px); transform: translateY(-8px) scale(1.02);
box-shadow: var(--shadow-md), var(--shadow-glow); box-shadow: var(--shadow-md), var(--shadow-glow-blue);
border-color: var(--border-strong); border-color: transparent;
}
.product-card:hover::before {
opacity: 1;
}
.product-card:hover::after {
opacity: 1;
} }
.product-card:focus-visible { .product-card:focus-visible {
@ -38,31 +83,50 @@
outline-offset: 3px; outline-offset: 3px;
} }
/* Stagger cards in scroll */
.product-scroll .product-card:nth-child(1) { animation-delay: 0.05s; }
.product-scroll .product-card:nth-child(2) { animation-delay: 0.1s; }
.product-scroll .product-card:nth-child(3) { animation-delay: 0.15s; }
.product-scroll .product-card:nth-child(4) { animation-delay: 0.2s; }
.product-scroll .product-card:nth-child(5) { animation-delay: 0.25s; }
.product-scroll .product-card:nth-child(6) { animation-delay: 0.3s; }
.product-scroll .product-card:nth-child(7) { animation-delay: 0.35s; }
.product-scroll .product-card:nth-child(8) { animation-delay: 0.4s; }
/* ─── Card Image ─── */ /* ─── Card Image ─── */
.product-card img { .product-card img {
width: 100%; width: 100%;
height: 170px; height: 175px;
object-fit: contain; object-fit: contain;
object-position: center; object-position: center;
display: block; display: block;
flex: 0 0 auto; flex: 0 0 auto;
background: rgba(255, 255, 255, 0.95); background: rgba(255, 255, 255, 0.96);
padding: 12px; padding: 16px;
border-bottom: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle);
transition: transform var(--transition-smooth);
position: relative;
z-index: 2;
}
.product-card:hover img {
transform: scale(1.05);
} }
/* ─── Card Content ─── */ /* ─── Card Content ─── */
.product-card__content { .product-card__content {
padding: 1rem 1.25rem 1.1rem; padding: 1rem 1.25rem 1.15rem;
flex: 1 1 auto; flex: 1 1 auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 0; min-height: 0;
gap: 0.3rem; gap: 0.35rem;
position: relative;
z-index: 2;
} }
.product-card__content h3 { .product-card__content h3 {
font-size: 0.95rem; font-size: 0.92rem;
font-weight: 600; font-weight: 600;
color: var(--text-primary); color: var(--text-primary);
margin-bottom: 0; margin-bottom: 0;
@ -71,11 +135,16 @@
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
line-height: 1.4; line-height: 1.4;
transition: color var(--transition-normal);
}
.product-card:hover .product-card__content h3 {
color: var(--text-invert);
} }
.product-card__content p { .product-card__content p {
font-size: 0.82rem; font-size: 0.8rem;
color: var(--text-secondary); color: var(--text-muted);
margin-bottom: 0; margin-bottom: 0;
overflow: hidden; overflow: hidden;
display: -webkit-box; display: -webkit-box;
@ -86,7 +155,7 @@
} }
.product-card__content .price { .product-card__content .price {
font-size: 1rem; font-size: 1.05rem;
font-weight: 700; font-weight: 700;
color: var(--color-primary); color: var(--color-primary);
margin-top: auto; margin-top: auto;
@ -95,20 +164,23 @@
/* ─── Product Sections ─── */ /* ─── Product Sections ─── */
.product-section { .product-section {
padding: 1.75rem 0 0.5rem; padding: 2rem 0 0.5rem;
animation: fadeInUp 0.5s ease both;
} }
.product-section h2 { .product-section h2 {
margin-left: 2rem; margin-left: 2rem;
margin-bottom: 1rem; margin-bottom: 1.25rem;
font-size: 1.25rem; font-size: 1.3rem;
font-weight: 700; font-weight: 700;
color: var(--text-primary); color: var(--text-primary);
letter-spacing: -0.3px; letter-spacing: -0.3px;
position: relative; position: relative;
padding-left: 0.75rem; padding-left: 1rem;
display: inline-block;
} }
/* Animated accent line */
.product-section h2::before { .product-section h2::before {
content: ""; content: "";
position: absolute; position: absolute;
@ -116,21 +188,44 @@
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
width: 3px; width: 3px;
height: 70%; height: 0;
background: var(--color-primary); background: linear-gradient(180deg, var(--color-primary), var(--color-accent));
border-radius: var(--radius-full); border-radius: var(--radius-full);
animation: lineGrow 0.6s ease 0.3s forwards;
}
@keyframes lineGrow {
to { height: 80%; }
}
/* Subtle glow behind section title */
.product-section h2::after {
content: "";
position: absolute;
left: -8px;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
background: var(--color-primary);
border-radius: 50%;
filter: blur(10px);
opacity: 0.3;
} }
/* ─── Horizontal Scroll ─── */ /* ─── Horizontal Scroll ─── */
.product-scroll { .product-scroll {
display: flex; display: flex;
gap: 1.25rem; gap: 1.25rem;
padding: 0.5rem 2rem 2rem; padding: 0.5rem 2rem 2.5rem;
overflow-x: auto; overflow-x: auto;
overflow-y: hidden; overflow-y: hidden;
scroll-snap-type: x mandatory; scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
scrollbar-width: none; scrollbar-width: none;
/* Fade edges on scroll */
mask-image: linear-gradient(90deg, transparent, black 2rem, black calc(100% - 2rem), transparent);
-webkit-mask-image: linear-gradient(90deg, transparent, black 2rem, black calc(100% - 2rem), transparent);
} }
.product-scroll .product-card { .product-scroll .product-card {
@ -146,11 +241,11 @@
@media (max-width: 768px) { @media (max-width: 768px) {
.product-section h2 { .product-section h2 {
margin-left: 1rem; margin-left: 1rem;
font-size: 1.1rem; font-size: 1.15rem;
} }
.product-scroll { .product-scroll {
padding: 0.5rem 1rem 1.5rem; padding: 0.5rem 1rem 2rem;
gap: 1rem; gap: 1rem;
} }

177
assets/css/login.css
View File

@ -1,6 +1,6 @@
/* ========================================================== /* ==========================================================
AUTH PAGES – Login, Register, Account AUTH PAGES – Login, Register, Account
Modern glassmorphism style Animated Glassmorphism Design
========================================================== */ ========================================================== */
/* ─── Auth Wrapper ─── */ /* ─── Auth Wrapper ─── */
@ -9,7 +9,24 @@
place-items: center; place-items: center;
min-height: 80vh; min-height: 80vh;
padding: 2.5rem 1.25rem 4rem; padding: 2.5rem 1.25rem 4rem;
background: var(--bg-main); position: relative;
z-index: 1;
}
/* Decorative ambient orb */
.auth::before {
content: "";
position: absolute;
top: 10%;
left: 50%;
transform: translateX(-50%);
width: 400px;
height: 400px;
border-radius: 50%;
background: radial-gradient(circle, rgba(59, 130, 246, 0.08), transparent 70%);
pointer-events: none;
z-index: -1;
animation: float 12s ease-in-out infinite;
} }
.auth__grid { .auth__grid {
@ -56,6 +73,11 @@
max-width: none; max-width: none;
height: auto; height: auto;
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
transition: transform var(--transition-smooth);
}
.auth__grid.auth__card__side .auth__card.auth__card__side__picture img:hover {
transform: scale(1.03);
} }
.auth__grid.auth__card__stack { .auth__grid.auth__card__stack {
@ -64,16 +86,32 @@
justify-items: center; justify-items: center;
} }
/* ─── Card ─── */ /* ─── Card – Glassmorphism ─── */
.auth__card, .auth__card,
.auth__sideCard { .auth__sideCard {
width: min(520px, 100%); width: min(520px, 100%);
background: var(--bg-card); background: rgba(15, 21, 32, 0.8);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--border-subtle); border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
box-shadow: var(--shadow-md); box-shadow: var(--shadow-md);
animation: fadeInUp 0.5s ease both;
transition: border-color var(--transition-smooth),
box-shadow var(--transition-smooth);
} }
.auth__card:hover {
border-color: var(--border-default);
box-shadow: var(--shadow-md), var(--shadow-glow-blue);
}
/* Stagger cards */
.auth__grid .auth__card:nth-child(1) { animation-delay: 0s; }
.auth__grid .auth__card:nth-child(2) { animation-delay: 0.08s; }
.auth__grid .auth__card:nth-child(3) { animation-delay: 0.16s; }
.auth__grid .auth__card:nth-child(4) { animation-delay: 0.24s; }
.auth__card { .auth__card {
padding: 1.75rem; padding: 1.75rem;
} }
@ -101,6 +139,10 @@
font-weight: 700; font-weight: 700;
letter-spacing: -0.3px; letter-spacing: -0.3px;
color: var(--text-primary); color: var(--text-primary);
background: linear-gradient(135deg, var(--text-primary), var(--text-secondary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
} }
.auth__subtitle { .auth__subtitle {
@ -110,27 +152,29 @@
line-height: 1.4; line-height: 1.4;
} }
/* ─── Alerts ─── */ /* ─── Alerts – Animated ─── */
.auth__alert__error { .auth__alert__error {
margin: 0.75rem 0 1rem; margin: 0.75rem 0 1rem;
color: var(--text-invert); color: var(--text-invert);
background: linear-gradient(135deg, var(--color-danger), #dc2626); background: linear-gradient(135deg, var(--color-danger), #dc2626);
border-radius: var(--radius-md); border-radius: var(--radius-md);
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
font-size: 0.9rem; font-size: 0.88rem;
font-weight: 500; font-weight: 500;
box-shadow: 0 4px 14px rgba(239, 68, 68, 0.2); box-shadow: 0 4px 16px rgba(239, 68, 68, 0.2);
animation: scaleIn 0.3s ease;
} }
.auth__alert__sucess { .auth__alert__sucess {
margin: 0.75rem 0 1rem; margin: 0.75rem 0 1rem;
color: var(--text-invert); color: var(--text-invert);
background: linear-gradient(135deg, #22c55e, #16a34a); background: linear-gradient(135deg, var(--color-success), #16a34a);
border-radius: var(--radius-md); border-radius: var(--radius-md);
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
font-size: 0.9rem; font-size: 0.88rem;
font-weight: 500; font-weight: 500;
box-shadow: 0 4px 14px rgba(34, 197, 94, 0.2); box-shadow: 0 4px 16px rgba(34, 197, 94, 0.2);
animation: scaleIn 0.3s ease;
} }
.auth__alert { .auth__alert {
@ -139,7 +183,8 @@
background: linear-gradient(135deg, var(--color-danger), #dc2626); background: linear-gradient(135deg, var(--color-danger), #dc2626);
border-radius: var(--radius-md); border-radius: var(--radius-md);
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
font-size: 0.9rem; font-size: 0.88rem;
animation: scaleIn 0.3s ease;
} }
.auth__alert ul { .auth__alert ul {
@ -155,10 +200,11 @@
margin: 0.75rem 0; margin: 0.75rem 0;
color: var(--color-danger); color: var(--color-danger);
background: var(--color-danger-soft); background: var(--color-danger-soft);
border: 1px solid rgba(239, 68, 68, 0.2); border: 1px solid rgba(239, 68, 68, 0.15);
border-radius: var(--radius-md); border-radius: var(--radius-md);
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
font-size: 0.9rem; font-size: 0.88rem;
animation: scaleIn 0.3s ease;
} }
/* ─── Form ─── */ /* ─── Form ─── */
@ -177,9 +223,14 @@
.auth__field label { .auth__field label {
display: block; display: block;
margin: 0 0 0.4rem; margin: 0 0 0.4rem;
font-size: 0.88rem; font-size: 0.85rem;
font-weight: 500; font-weight: 500;
color: var(--text-secondary); color: var(--text-muted);
transition: color var(--transition-normal);
}
.auth__field:focus-within label {
color: var(--color-primary);
} }
.auth__field input[type="text"], .auth__field input[type="text"],
@ -191,14 +242,12 @@
padding: 0.75rem 0.9rem; padding: 0.75rem 0.9rem;
border: 1px solid var(--border-default); border: 1px solid var(--border-default);
border-radius: var(--radius-md); border-radius: var(--radius-md);
background: var(--bg-input); background: rgba(18, 26, 40, 0.6);
color: var(--text-primary); color: var(--text-primary);
font-family: var(--font-family); font-family: var(--font-family);
font-size: 0.92rem; font-size: 0.9rem;
outline: none; outline: none;
transition: border-color var(--transition-fast), transition: all var(--transition-smooth);
box-shadow var(--transition-fast),
background var(--transition-fast);
} }
.auth__field input[type="text"]:focus, .auth__field input[type="text"]:focus,
@ -206,8 +255,10 @@
.auth__field input[type="email"]:focus, .auth__field input[type="email"]:focus,
.auth__field input[type="file"]:focus { .auth__field input[type="file"]:focus {
border-color: var(--color-primary); border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1),
background: rgba(26, 34, 51, 0.8); 0 0 20px rgba(59, 130, 246, 0.06);
background: rgba(18, 26, 40, 0.9);
transform: translateY(-1px);
} }
.auth__field input[type="text"]::placeholder, .auth__field input[type="text"]::placeholder,
@ -221,19 +272,18 @@
padding: 0.6rem 1rem; padding: 0.6rem 1rem;
border: 0; border: 0;
border-radius: var(--radius-md); border-radius: var(--radius-md);
background: var(--color-primary); background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
color: #ffffff; color: #ffffff;
font-weight: 600; font-weight: 600;
font-family: var(--font-family); font-family: var(--font-family);
font-size: 0.85rem; font-size: 0.82rem;
cursor: pointer; cursor: pointer;
transition: background var(--transition-fast), transition: all var(--transition-normal);
transform var(--transition-fast);
} }
.auth__field input[type="file"]::file-selector-button:hover { .auth__field input[type="file"]::file-selector-button:hover {
background: var(--color-primary-hover);
transform: translateY(-1px); transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
} }
.auth__field input[type="file"]::file-selector-button:active { .auth__field input[type="file"]::file-selector-button:active {
@ -247,45 +297,72 @@
.auth__submit { .auth__submit {
width: 100%; width: 100%;
padding: 0.75rem 1rem; padding: 0.8rem 1rem;
border: 0; border: 0;
border-radius: var(--radius-md); border-radius: var(--radius-md);
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover)); background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
background-size: 200% 200%;
color: #ffffff; color: #ffffff;
font-weight: 600; font-weight: 600;
font-family: var(--font-family); font-family: var(--font-family);
font-size: 0.95rem; font-size: 0.93rem;
letter-spacing: 0.2px; letter-spacing: 0.2px;
cursor: pointer; cursor: pointer;
transition: transform var(--transition-fast), transition: all var(--transition-normal);
box-shadow var(--transition-fast), box-shadow: 0 4px 16px rgba(59, 130, 246, 0.25);
opacity var(--transition-fast); position: relative;
box-shadow: 0 4px 14px rgba(59, 130, 246, 0.25); overflow: hidden;
}
/* Shimmer effect on button */
.auth__submit::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.15),
transparent
);
transition: left 0.5s ease;
}
.auth__submit:hover::before {
left: 100%;
} }
.auth__submit:hover { .auth__submit:hover {
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(59, 130, 246, 0.35); box-shadow: 0 8px 28px rgba(59, 130, 246, 0.4);
} }
.auth__submit:active { .auth__submit:active {
transform: translateY(0); transform: translateY(0) scale(0.98);
} }
.auth__submit:disabled { .auth__submit:disabled {
opacity: 0.5; opacity: 0.5;
cursor: not-allowed; cursor: not-allowed;
transform: none; transform: none;
box-shadow: none;
}
.auth__submit:disabled::before {
display: none;
} }
/* Danger button variant */ /* Danger button variant */
.auth__submit--danger { .auth__submit--danger {
background: linear-gradient(135deg, var(--color-danger), #dc2626); background: linear-gradient(135deg, var(--color-danger), #dc2626);
box-shadow: 0 4px 14px rgba(239, 68, 68, 0.25); box-shadow: 0 4px 16px rgba(239, 68, 68, 0.25);
} }
.auth__submit--danger:hover { .auth__submit--danger:hover {
box-shadow: 0 6px 20px rgba(239, 68, 68, 0.35); box-shadow: 0 8px 28px rgba(239, 68, 68, 0.4);
} }
/* ─── Links ─── */ /* ─── Links ─── */
@ -298,25 +375,39 @@
.auth__muted { .auth__muted {
margin: 0.5rem 0 0; margin: 0.5rem 0 0;
color: var(--text-secondary); color: var(--text-secondary);
font-size: 0.9rem; font-size: 0.88rem;
} }
.auth__muted a { .auth__muted a {
color: var(--color-primary); color: var(--color-primary);
text-decoration: none; text-decoration: none;
font-weight: 600; font-weight: 600;
transition: color var(--transition-fast); transition: all var(--transition-normal);
position: relative;
}
.auth__muted a::after {
content: "";
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 1.5px;
background: var(--color-primary);
transition: width var(--transition-smooth);
} }
.auth__muted a:hover { .auth__muted a:hover {
color: var(--color-primary-hover); color: var(--color-primary-hover);
text-decoration: underline; }
.auth__muted a:hover::after {
width: 100%;
} }
/* ─── Side Card ─── */ /* ─── Side Card ─── */
.auth__sideCard { .auth__sideCard {
padding: 1.25rem; padding: 1.25rem;
background: var(--bg-card);
} }
.auth__sideCard h3 { .auth__sideCard h3 {
@ -342,9 +433,9 @@
padding: 0.7rem 0.9rem; padding: 0.7rem 0.9rem;
border-radius: var(--radius-md); border-radius: var(--radius-md);
background: var(--color-primary-soft); background: var(--color-primary-soft);
border: 1px solid rgba(59, 130, 246, 0.15); border: 1px solid rgba(59, 130, 246, 0.1);
color: var(--text-secondary); color: var(--text-secondary);
font-size: 0.82rem; font-size: 0.8rem;
line-height: 1.5; line-height: 1.5;
} }

54
assets/css/productAdder.css
View File

@ -1,5 +1,5 @@
/* ========================================================== /* ==========================================================
PRODUCT ADDER – Dropdown & Form Styles PRODUCT ADDER – Animated Dropdown & Form Styles
========================================================== */ ========================================================== */
/* ─── Select Wrapper ─── */ /* ─── Select Wrapper ─── */
@ -12,9 +12,14 @@
} }
.auth__select__label { .auth__select__label {
font-size: 0.88rem; font-size: 0.85rem;
font-weight: 500; font-weight: 500;
color: var(--text-secondary); color: var(--text-muted);
transition: color var(--transition-normal);
}
.auth__select__wrap:focus-within .auth__select__label {
color: var(--color-primary);
} }
.auth__select { .auth__select {
@ -23,18 +28,17 @@
padding: 0.75rem 2.5rem 0.75rem 0.9rem; padding: 0.75rem 2.5rem 0.75rem 0.9rem;
border: 1px solid var(--border-default); border: 1px solid var(--border-default);
border-radius: var(--radius-md); border-radius: var(--radius-md);
background-color: var(--bg-input); background-color: rgba(18, 26, 40, 0.6);
color: var(--text-primary); color: var(--text-primary);
font-family: var(--font-family); font-family: var(--font-family);
font-size: 0.92rem; font-size: 0.9rem;
outline: none; outline: none;
appearance: none; appearance: none;
cursor: pointer; cursor: pointer;
transition: border-color var(--transition-fast), transition: all var(--transition-smooth);
box-shadow var(--transition-fast);
background-image: background-image:
linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%), linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%); linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
background-position: background-position:
calc(100% - 18px) calc(50% + 1px), calc(100% - 18px) calc(50% + 1px),
calc(100% - 13px) calc(50% + 1px); calc(100% - 13px) calc(50% + 1px);
@ -44,7 +48,9 @@
.auth__select:focus { .auth__select:focus {
border-color: var(--color-primary); border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1),
0 0 20px rgba(59, 130, 246, 0.06);
background-color: rgba(18, 26, 40, 0.9);
} }
.auth__select option { .auth__select option {
@ -69,11 +75,20 @@
} }
.auth__card { .auth__card {
background: var(--bg-card); background: rgba(15, 21, 32, 0.8);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--border-subtle); border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
padding: 1.5rem; padding: 1.5rem;
box-shadow: var(--shadow-md); box-shadow: var(--shadow-md);
animation: fadeInUp 0.5s ease both;
transition: border-color var(--transition-smooth),
box-shadow var(--transition-smooth);
}
.auth__card:hover {
border-color: var(--border-default);
} }
.auth__header { .auth__header {
@ -95,10 +110,11 @@
} }
.auth__form label { .auth__form label {
font-size: 0.88rem; font-size: 0.85rem;
font-weight: 500; font-weight: 500;
color: var(--text-secondary); color: var(--text-muted);
margin-top: 0.5rem; margin-top: 0.5rem;
transition: color var(--transition-normal);
} }
.auth__input { .auth__input {
@ -107,18 +123,20 @@
padding: 0.7rem 0.9rem; padding: 0.7rem 0.9rem;
border: 1px solid var(--border-default); border: 1px solid var(--border-default);
border-radius: var(--radius-md); border-radius: var(--radius-md);
background: var(--bg-input); background: rgba(18, 26, 40, 0.6);
color: var(--text-primary); color: var(--text-primary);
font-family: var(--font-family); font-family: var(--font-family);
font-size: 0.92rem; font-size: 0.9rem;
outline: none; outline: none;
transition: border-color var(--transition-fast), transition: all var(--transition-smooth);
box-shadow var(--transition-fast);
} }
.auth__input:focus { .auth__input:focus {
border-color: var(--color-primary); border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1),
0 0 20px rgba(59, 130, 246, 0.06);
background: rgba(18, 26, 40, 0.9);
transform: translateY(-1px);
} }
.auth__input::placeholder { .auth__input::placeholder {

151
assets/css/productpage.css
View File

@ -1,5 +1,5 @@
/* ========================================================== /* ==========================================================
PRODUCT PAGE – Detailed product view & shop offers PRODUCT PAGE – Animated Detail View & Shop Offers
========================================================== */ ========================================================== */
/* ─── Wrapper ─── */ /* ─── Wrapper ─── */
@ -9,36 +9,66 @@
padding: 0 1.5rem; padding: 0 1.5rem;
display: flex; display: flex;
gap: 3.5rem; gap: 3.5rem;
animation: fadeInUp 0.6s ease both;
} }
/* ─── Left Column (Image) ─── */ /* ─── Left Column (Image) ─── */
.product-left { .product-left {
flex: 1; flex: 1;
animation: fadeInUp 0.5s ease 0.1s both;
} }
.product-image-box { .product-image-box {
background: rgba(255, 255, 255, 0.95); background: rgba(255, 255, 255, 0.96);
padding: 2.5rem; padding: 2.5rem;
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
border: 1px solid var(--border-subtle); border: 1px solid var(--border-subtle);
box-shadow: var(--shadow-md); box-shadow: var(--shadow-md);
text-align: center; text-align: center;
transition: box-shadow var(--transition-smooth); transition: all var(--transition-smooth);
position: relative;
overflow: hidden;
}
/* Animated gradient border on hover */
.product-image-box::before {
content: "";
position: absolute;
inset: -1px;
border-radius: var(--radius-xl);
padding: 1px;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(16, 185, 129, 0.2), transparent);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity var(--transition-smooth);
} }
.product-image-box:hover { .product-image-box:hover {
box-shadow: var(--shadow-lg); box-shadow: var(--shadow-lg), var(--shadow-glow-blue);
transform: translateY(-4px);
}
.product-image-box:hover::before {
opacity: 1;
} }
.product-image-box img { .product-image-box img {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
object-fit: contain; object-fit: contain;
transition: transform var(--transition-smooth);
}
.product-image-box:hover img {
transform: scale(1.03);
} }
/* ─── Right Column (Details) ─── */ /* ─── Right Column (Details) ─── */
.product-right { .product-right {
flex: 1.2; flex: 1.2;
animation: fadeInUp 0.5s ease 0.2s both;
} }
.product-title { .product-title {
@ -50,11 +80,16 @@
border-bottom: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle);
letter-spacing: -0.5px; letter-spacing: -0.5px;
line-height: 1.3; line-height: 1.3;
/* Gradient text */
background: linear-gradient(135deg, var(--text-invert), var(--text-secondary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
} }
.product-desc { .product-desc {
font-size: 1rem; font-size: 1rem;
line-height: 1.7; line-height: 1.75;
color: var(--text-secondary); color: var(--text-secondary);
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
@ -63,29 +98,32 @@
display: flex; display: flex;
color: var(--text-primary); color: var(--text-primary);
flex-direction: column; flex-direction: column;
gap: 0.6rem; gap: 0.5rem;
} }
.product-specs p { .product-specs p {
padding: 0.65rem 1rem; padding: 0.7rem 1rem;
background: var(--bg-surface); background: rgba(20, 28, 43, 0.6);
backdrop-filter: blur(8px);
border: 1px solid var(--border-subtle); border: 1px solid var(--border-subtle);
border-radius: var(--radius-md); border-radius: var(--radius-md);
font-size: 0.92rem; font-size: 0.9rem;
transition: background var(--transition-fast); transition: all var(--transition-normal);
} }
.product-specs p:hover { .product-specs p:hover {
background: rgba(26, 35, 50, 0.9); background: rgba(20, 28, 43, 0.9);
border-color: var(--border-default);
transform: translateX(4px);
} }
.product-specs p strong { .product-specs p strong {
color: var(--text-secondary); color: var(--text-muted);
font-weight: 500; font-weight: 500;
margin-right: 0.5rem; margin-right: 0.5rem;
} }
/* ─── Spec Rows (alternative layout) ─── */ /* ─── Spec Rows ─── */
.spec-row { .spec-row {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -93,11 +131,12 @@
background: var(--bg-surface); background: var(--bg-surface);
border: 1px solid var(--border-subtle); border: 1px solid var(--border-subtle);
border-radius: var(--radius-md); border-radius: var(--radius-md);
transition: background var(--transition-fast); transition: all var(--transition-normal);
} }
.spec-row:hover { .spec-row:hover {
background: rgba(26, 35, 50, 0.9); background: rgba(20, 28, 43, 0.9);
transform: translateX(4px);
} }
.spec-name { .spec-name {
@ -124,7 +163,7 @@
} }
/* ========================================================== /* ==========================================================
SHOP OFFERS SHOP OFFERS – Animated List
========================================================== */ ========================================================== */
.shop-offers { .shop-offers {
max-width: 1200px; max-width: 1200px;
@ -132,7 +171,8 @@
padding: 0 1.5rem; padding: 0 1.5rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.75rem; gap: 0.65rem;
animation: fadeInUp 0.6s ease 0.3s both;
} }
.shop-line { .shop-line {
@ -140,21 +180,49 @@
grid-template-columns: 250px 1fr auto; grid-template-columns: 250px 1fr auto;
align-items: center; align-items: center;
gap: 1.5rem; gap: 1.5rem;
background: var(--bg-card); background: rgba(15, 21, 32, 0.7);
backdrop-filter: blur(12px);
border: 1px solid var(--border-subtle); border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
padding: 1rem 1.5rem; padding: 1rem 1.5rem;
transition: border-color var(--transition-fast), transition: all var(--transition-smooth);
transform var(--transition-fast), animation: fadeInUp 0.4s ease both;
box-shadow var(--transition-fast); position: relative;
overflow: hidden;
}
/* Gradient accent line on left */
.shop-line::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: linear-gradient(180deg, var(--color-primary), var(--color-accent));
border-radius: var(--radius-full);
opacity: 0;
transition: opacity var(--transition-smooth);
} }
.shop-line:hover { .shop-line:hover {
border-color: var(--border-strong); border-color: var(--border-strong);
transform: translateY(-2px); transform: translateY(-3px);
box-shadow: var(--shadow-md); box-shadow: var(--shadow-md), var(--shadow-glow-blue);
padding-left: 1.75rem;
} }
.shop-line:hover::before {
opacity: 1;
}
/* Stagger shop lines */
.shop-line:nth-child(1) { animation-delay: 0.35s; }
.shop-line:nth-child(2) { animation-delay: 0.42s; }
.shop-line:nth-child(3) { animation-delay: 0.49s; }
.shop-line:nth-child(4) { animation-delay: 0.56s; }
.shop-line:nth-child(5) { animation-delay: 0.63s; }
.shop-left { .shop-left {
display: flex; display: flex;
align-items: center; align-items: center;
@ -173,6 +241,11 @@
max-width: 90px; max-width: 90px;
object-fit: contain; object-fit: contain;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
transition: transform var(--transition-normal);
}
.shop-line:hover .shop-logo img {
transform: scale(1.08);
} }
.shop-name { .shop-name {
@ -183,7 +256,7 @@
.shop-name a { .shop-name a {
color: var(--text-primary); color: var(--text-primary);
text-decoration: none; text-decoration: none;
transition: color var(--transition-fast); transition: color var(--transition-normal);
} }
.shop-name a:hover { .shop-name a:hover {
@ -194,7 +267,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: 2rem; gap: 2rem;
font-size: 0.88rem; font-size: 0.85rem;
color: var(--text-secondary); color: var(--text-secondary);
} }
@ -206,18 +279,21 @@
} }
.shop-stock { .shop-stock {
font-weight: 500; font-weight: 600;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 6px; gap: 6px;
padding: 0.3rem 0.75rem; padding: 0.3rem 0.8rem;
border-radius: var(--radius-full); border-radius: var(--radius-full);
font-size: 0.82rem; font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.4px;
} }
.shop-stock.in-stock { .shop-stock.in-stock {
color: var(--color-accent); color: var(--color-accent);
background: var(--color-accent-soft); background: var(--color-accent-soft);
box-shadow: 0 0 12px rgba(16, 185, 129, 0.08);
} }
.shop-stock.in-stock::before { .shop-stock.in-stock::before {
@ -227,6 +303,7 @@
.shop-stock.out-stock { .shop-stock.out-stock {
color: var(--color-danger); color: var(--color-danger);
background: var(--color-danger-soft); background: var(--color-danger-soft);
box-shadow: 0 0 12px rgba(239, 68, 68, 0.08);
} }
.shop-stock.out-stock::before { .shop-stock.out-stock::before {
@ -234,21 +311,29 @@
} }
.shop-price { .shop-price {
font-size: 1.35rem; font-size: 1.4rem;
font-weight: 700; font-weight: 800;
color: var(--color-accent); color: var(--color-accent);
white-space: nowrap; white-space: nowrap;
letter-spacing: -0.3px; letter-spacing: -0.5px;
text-shadow: 0 0 20px rgba(16, 185, 129, 0.15);
transition: transform var(--transition-normal);
}
.shop-line:hover .shop-price {
transform: scale(1.05);
} }
.no-shop { .no-shop {
background: var(--bg-card); background: rgba(15, 21, 32, 0.6);
backdrop-filter: blur(12px);
border: 1px solid var(--border-subtle); border: 1px solid var(--border-subtle);
padding: 2rem; padding: 2.5rem;
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
color: var(--text-secondary); color: var(--text-secondary);
text-align: center; text-align: center;
font-size: 0.95rem; font-size: 0.95rem;
animation: fadeInUp 0.5s ease 0.3s both;
} }
/* ─── Responsive Shop Offers ─── */ /* ─── Responsive Shop Offers ─── */

11
impressum.php
View File

@ -1,7 +1,12 @@
<?php include 'header.php'; ?> <?php include 'header.php'; ?>
<body> <main style="padding: 3rem 1.5rem; max-width: 800px; margin: 0 auto; animation: fadeInUp 0.5s ease both;">
<p>Impressum 123</p> <div class="auth__card" style="width: 100%; max-width: 100%;">
</body> <header class="auth__header">
<h1 class="auth__title">Impressum</h1>
</header>
<p style="color: var(--text-secondary); line-height: 1.8;">Impressum 123</p>
</div>
</main>
<?php include 'footer.php'; ?> <?php include 'footer.php'; ?>

2
productAdder.php
View File

@ -291,8 +291,6 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['saveProduct'])) {
include 'header.php'; include 'header.php';
?> ?>
<link rel="stylesheet" href="assets/css/login.css">
<link rel="stylesheet" href="assets/css/productAdder.css">
<main class="auth"> <main class="auth">
<section class="auth__grid"> <section class="auth__grid">

375
style.css
View File

@ -1,6 +1,6 @@
/* ========================================================== /* ==========================================================
GEIZKRAGEN – DESIGN SYSTEM GEIZKRAGEN – DESIGN SYSTEM v2
Modern Dark Theme mit Inter Font Animated Dark Theme · Glassmorphism · Glow
========================================================== */ ========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
@ -18,48 +18,53 @@
:root { :root {
/* ─── Farben ─── */ /* ─── Farben ─── */
--bg-main: #0c1017; --bg-main: #080b12;
--bg-card: #151c28; --bg-card: #0f1520;
--bg-surface: #1a2332; --bg-surface: #141c2b;
--bg-header: #111827; --bg-header: #0d1117;
--bg-input: #1a2233; --bg-input: #121a28;
--color-primary: #3b82f6; --color-primary: #3b82f6;
--color-primary-hover:#2563eb; --color-primary-hover:#2563eb;
--color-primary-soft: rgba(59, 130, 246, 0.12); --color-primary-soft: rgba(59, 130, 246, 0.1);
--color-primary-glow: rgba(59, 130, 246, 0.25);
--color-accent: #10b981; --color-accent: #10b981;
--color-accent-soft: rgba(16, 185, 129, 0.12); --color-accent-soft: rgba(16, 185, 129, 0.1);
--color-accent-glow: rgba(16, 185, 129, 0.2);
--color-danger: #ef4444; --color-danger: #ef4444;
--color-danger-soft: rgba(239, 68, 68, 0.12); --color-danger-soft: rgba(239, 68, 68, 0.1);
--color-warning: #f59e0b; --color-warning: #f59e0b;
--color-success: #22c55e; --color-success: #22c55e;
--text-primary: #f1f5f9; --text-primary: #e8edf5;
--text-secondary: #94a3b8; --text-secondary: #8b98b0;
--text-muted: #64748b; --text-muted: #556178;
--text-invert: #ffffff; --text-invert: #ffffff;
--border-subtle: rgba(255, 255, 255, 0.06); --border-subtle: rgba(255, 255, 255, 0.04);
--border-default: rgba(255, 255, 255, 0.1); --border-default: rgba(255, 255, 255, 0.08);
--border-strong: rgba(255, 255, 255, 0.15); --border-strong: rgba(255, 255, 255, 0.14);
--border-glow: rgba(59, 130, 246, 0.3);
/* ─── Radii ─── */ /* ─── Radii ─── */
--radius-sm: 6px; --radius-sm: 8px;
--radius-md: 10px; --radius-md: 12px;
--radius-lg: 14px; --radius-lg: 16px;
--radius-xl: 20px; --radius-xl: 24px;
--radius-full: 9999px; --radius-full: 9999px;
/* ─── Schatten ─── */ /* ─── Schatten ─── */
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
--shadow-md: 0 8px 24px rgba(0, 0, 0, 0.2); --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.25);
--shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.3); --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.35);
--shadow-glow: 0 0 30px rgba(59, 130, 246, 0.15); --shadow-glow-blue: 0 0 40px rgba(59, 130, 246, 0.12);
--shadow-glow-green: 0 0 40px rgba(16, 185, 129, 0.1);
/* ─── Transitions ─── */ /* ─── Transitions ─── */
--transition-fast: 150ms ease; --transition-fast: 150ms ease;
--transition-normal: 250ms ease; --transition-normal: 280ms ease;
--transition-smooth: 350ms cubic-bezier(0.4, 0, 0.2, 1); --transition-smooth: 400ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
/* ─── Spacing ─── */ /* ─── Spacing ─── */
--nav-gutter: 1.5rem; --nav-gutter: 1.5rem;
@ -68,6 +73,58 @@
--font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
} }
/* ==========================================================
KEYFRAME ANIMATIONS
========================================================== */
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideInRight {
from { opacity: 0; transform: translateX(20px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
from { opacity: 0; transform: scale(0.95); }
to { opacity: 1; transform: scale(1); }
}
@keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
@keyframes pulse-glow {
0%, 100% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.08); }
50% { box-shadow: 0 0 40px rgba(59, 130, 246, 0.18); }
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes borderGlow {
0%, 100% { border-color: rgba(59, 130, 246, 0.15); }
50% { border-color: rgba(59, 130, 246, 0.35); }
}
/* ==========================================================
GLOBAL
========================================================== */
html { html {
scroll-behavior: smooth; scroll-behavior: smooth;
} }
@ -76,22 +133,55 @@ body {
font-family: var(--font-family); font-family: var(--font-family);
background: var(--bg-main); background: var(--bg-main);
color: var(--text-primary); color: var(--text-primary);
line-height: 1.55; line-height: 1.6;
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
position: relative;
overflow-x: hidden;
}
/* ─── Animated Background Grid ─── */
body::before {
content: "";
position: fixed;
inset: 0;
background-image:
linear-gradient(rgba(59, 130, 246, 0.02) 1px, transparent 1px),
linear-gradient(90deg, rgba(59, 130, 246, 0.02) 1px, transparent 1px);
background-size: 80px 80px;
pointer-events: none;
z-index: 0;
animation: fadeIn 2s ease forwards;
}
/* ─── Ambient Glow Orbs ─── */
body::after {
content: "";
position: fixed;
top: -20%;
right: -10%;
width: 600px;
height: 600px;
border-radius: 50%;
background: radial-gradient(circle, rgba(59, 130, 246, 0.06), transparent 70%);
pointer-events: none;
z-index: 0;
animation: float 15s ease-in-out infinite;
} }
main { main {
flex: 1 0 auto; flex: 1 0 auto;
position: relative;
z-index: 1;
} }
a { a {
color: var(--color-primary); color: var(--color-primary);
text-decoration: none; text-decoration: none;
transition: color var(--transition-fast); transition: color var(--transition-normal);
} }
a:hover { a:hover {
@ -113,24 +203,25 @@ a:hover {
} }
/* ========================================================== /* ==========================================================
HEADER HEADER – Glassmorphism
========================================================== */ ========================================================== */
.header { .header {
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 1000; z-index: 1000;
background: rgba(17, 24, 39, 0.85); background: rgba(13, 17, 23, 0.75);
backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(24px) saturate(200%);
-webkit-backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(200%);
border-bottom: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle);
padding: 0; padding: 0;
animation: fadeIn 0.6s ease;
} }
/* ========================================================== /* ==========================================================
NAVBAR NAVBAR
========================================================== */ ========================================================== */
.nav { .nav {
min-height: 60px; min-height: 64px;
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
@ -142,11 +233,12 @@ a:hover {
align-items: center; align-items: center;
padding-left: 0; padding-left: 0;
margin-left: 0; margin-left: 0;
transition: opacity var(--transition-fast); transition: transform var(--transition-smooth), opacity var(--transition-normal);
} }
.nav__logoLink:hover { .nav__logoLink:hover {
opacity: 0.85; opacity: 0.9;
transform: scale(1.02);
} }
.nav__logo { .nav__logo {
@ -188,26 +280,29 @@ a:hover {
font-size: 0.9rem; font-size: 0.9rem;
font-weight: 500; font-weight: 500;
text-decoration: none; text-decoration: none;
padding: 0.5rem 1rem; padding: 0.5rem 1.1rem;
border-radius: var(--radius-md); border-radius: var(--radius-full);
transition: color var(--transition-fast), background var(--transition-fast); transition: all var(--transition-normal);
position: relative;
} }
.nav__link:hover { .nav__link:hover {
color: var(--text-invert); color: var(--text-invert);
background: rgba(255, 255, 255, 0.06); background: rgba(255, 255, 255, 0.06);
transform: translateY(-1px);
} }
.nav__link.active { .nav__link.active {
color: var(--color-primary); color: var(--color-primary);
background: var(--color-primary-soft); background: var(--color-primary-soft);
box-shadow: 0 0 12px rgba(59, 130, 246, 0.12);
} }
/* ─── Nav Actions ─── */ /* ─── Nav Actions ─── */
.nav__actions { .nav__actions {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.35rem; gap: 0.25rem;
} }
.nav__search, .nav__search,
@ -217,18 +312,21 @@ a:hover {
font-size: 1.3rem; font-size: 1.3rem;
color: var(--text-secondary); color: var(--text-secondary);
cursor: pointer; cursor: pointer;
transition: color var(--transition-fast), background var(--transition-fast); transition: all var(--transition-normal);
padding: 0.45rem; padding: 0.5rem;
border-radius: var(--radius-md); border-radius: var(--radius-md);
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
position: relative;
} }
.nav__search:hover, .nav__search:hover,
.nav__login:hover { .nav__login:hover {
color: var(--text-invert); color: var(--text-invert);
background: rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.08);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
} }
.nav__wishlist { .nav__wishlist {
@ -236,20 +334,16 @@ a:hover {
} }
.nav__wishlist:hover { .nav__wishlist:hover {
color: var(--text-invert); color: var(--color-primary);
background: rgba(255, 255, 255, 0.08); background: var(--color-primary-soft);
box-shadow: var(--shadow-glow-blue);
} }
/* ========================================================== /* ==========================================================
TOGGLE / CLOSE TOGGLE / CLOSE
========================================================== */ ========================================================== */
.nav__toggle { .nav__toggle { display: none; }
display: none; .nav__close { display: none; }
}
.nav__close {
display: none;
}
/* ========================================================== /* ==========================================================
MOBILE NAV MOBILE NAV
@ -265,10 +359,11 @@ a:hover {
right: -100%; right: -100%;
width: 300px; width: 300px;
height: 100%; height: 100%;
background: var(--bg-header); background: rgba(13, 17, 23, 0.95);
backdrop-filter: blur(30px);
border-left: 1px solid var(--border-subtle); border-left: 1px solid var(--border-subtle);
padding: 5rem 2rem 2rem; padding: 5rem 2rem 2rem;
transition: right 300ms cubic-bezier(0.4, 0, 0.2, 1); transition: right 350ms cubic-bezier(0.4, 0, 0.2, 1);
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
gap: 2rem; gap: 2rem;
@ -295,6 +390,7 @@ a:hover {
.nav__link:hover { .nav__link:hover {
background: rgba(255, 255, 255, 0.06); background: rgba(255, 255, 255, 0.06);
transform: translateX(4px);
} }
.nav__close { .nav__close {
@ -307,6 +403,7 @@ a:hover {
.nav__close:hover { .nav__close:hover {
color: var(--text-invert); color: var(--text-invert);
transform: rotate(90deg);
} }
} }
@ -321,7 +418,7 @@ a:hover {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: min(500px, calc(100% - 520px)); width: min(480px, calc(100% - 520px));
z-index: 1; z-index: 1;
} }
@ -334,22 +431,33 @@ a:hover {
.nav__searchField { .nav__searchField {
width: 100%; width: 100%;
margin-top: 0; margin-top: 0;
position: relative;
} }
.nav__searchInput { .nav__searchInput {
width: 100%; width: 100%;
height: 40px; height: 42px;
padding: 0 16px; padding: 0 18px 0 42px;
border-radius: var(--radius-full); border-radius: var(--radius-full);
border: 1px solid var(--border-default); border: 1px solid var(--border-default);
background: rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.04);
color: var(--text-primary); color: var(--text-primary);
font-size: 0.9rem; font-size: 0.88rem;
font-family: var(--font-family); font-family: var(--font-family);
outline: none; outline: none;
transition: border-color var(--transition-fast), transition: all var(--transition-smooth);
background var(--transition-fast), }
box-shadow var(--transition-fast);
.nav__searchField::before {
content: "🔍";
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
font-size: 0.85rem;
pointer-events: none;
opacity: 0.4;
transition: opacity var(--transition-normal);
} }
.nav__searchInput::placeholder { .nav__searchInput::placeholder {
@ -358,8 +466,14 @@ a:hover {
.nav__searchInput:focus { .nav__searchInput:focus {
border-color: var(--color-primary); border-color: var(--color-primary);
background: rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.07);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12),
var(--shadow-glow-blue);
}
.nav__searchInput:focus + .nav__searchField::before,
.nav__searchField:focus-within::before {
opacity: 0.7;
} }
@media (max-width: 900px) { @media (max-width: 900px) {
@ -388,6 +502,7 @@ a:hover {
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
padding: 1.25rem; padding: 1.25rem;
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
animation: fadeInUp 0.5s ease both;
} }
.sidebar h3 { .sidebar h3 {
@ -418,14 +533,14 @@ a:hover {
color: var(--text-primary); color: var(--text-primary);
font-size: 0.9rem; font-size: 0.9rem;
font-family: var(--font-family); font-family: var(--font-family);
transition: border-color var(--transition-fast); transition: all var(--transition-normal);
} }
.filter-group input:focus, .filter-group input:focus,
.filter-group select:focus { .filter-group select:focus {
border-color: var(--color-primary); border-color: var(--color-primary);
outline: none; outline: none;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
} }
/* ========================================================== /* ==========================================================
@ -447,17 +562,35 @@ a:hover {
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
transition: transform var(--transition-smooth), transition: all var(--transition-smooth);
box-shadow var(--transition-smooth), position: relative;
border-color var(--transition-smooth); overflow: hidden;
}
.product-card::before {
content: "";
position: absolute;
inset: 0;
border-radius: var(--radius-lg);
padding: 1px;
background: linear-gradient(135deg, transparent, rgba(59,130,246,0.15), transparent);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity var(--transition-smooth);
} }
.product-card:hover { .product-card:hover {
transform: translateY(-6px); transform: translateY(-8px) scale(1.01);
box-shadow: var(--shadow-md); box-shadow: var(--shadow-md), var(--shadow-glow-blue);
border-color: var(--border-strong); border-color: var(--border-strong);
} }
.product-card:hover::before {
opacity: 1;
}
.product-image { .product-image {
height: 180px; height: 180px;
background: var(--bg-surface); background: var(--bg-surface);
@ -502,61 +635,72 @@ a:hover {
} }
/* ========================================================== /* ==========================================================
BUTTONS BUTTONS – Gradient & Glow
========================================================== */ ========================================================== */
.btn { .btn {
flex: 1; flex: 1;
padding: 0.55rem 1rem; padding: 0.6rem 1.1rem;
border-radius: var(--radius-md); border-radius: var(--radius-md);
font-size: 0.85rem; font-size: 0.85rem;
font-weight: 500; font-weight: 600;
font-family: var(--font-family); font-family: var(--font-family);
cursor: pointer; cursor: pointer;
border: none; border: none;
transition: background var(--transition-fast), transition: all var(--transition-normal);
transform var(--transition-fast), position: relative;
box-shadow var(--transition-fast); overflow: hidden;
}
.btn::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent);
opacity: 0;
transition: opacity var(--transition-fast);
}
.btn:hover::after {
opacity: 1;
} }
.btn:hover { .btn:hover {
transform: translateY(-1px); transform: translateY(-2px);
} }
.btn:active { .btn:active {
transform: translateY(0); transform: translateY(0) scale(0.98);
} }
.btn-primary { .btn-primary {
background: var(--color-primary); background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
color: #fff; color: #fff;
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25); box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
} }
.btn-primary:hover { .btn-primary:hover {
background: var(--color-primary-hover); box-shadow: 0 6px 24px rgba(59, 130, 246, 0.45);
box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35);
} }
.btn-secondary { .btn-secondary {
background: rgba(255, 255, 255, 0.06); background: rgba(255, 255, 255, 0.04);
color: var(--text-primary); color: var(--text-primary);
border: 1px solid var(--border-default); border: 1px solid var(--border-default);
} }
.btn-secondary:hover { .btn-secondary:hover {
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.08);
border-color: var(--border-strong); border-color: var(--border-strong);
} }
.btn-danger { .btn-danger {
background: var(--color-danger); background: linear-gradient(135deg, var(--color-danger), #dc2626);
color: #fff; color: #fff;
box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25); box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3);
} }
.btn-danger:hover { .btn-danger:hover {
background: #dc2626; box-shadow: 0 6px 24px rgba(239, 68, 68, 0.45);
box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35);
} }
/* ========================================================== /* ==========================================================
@ -565,21 +709,24 @@ a:hover {
.badge { .badge {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
padding: 0.2rem 0.6rem; padding: 0.25rem 0.7rem;
border-radius: var(--radius-full); border-radius: var(--radius-full);
font-size: 0.7rem; font-size: 0.72rem;
font-weight: 600; font-weight: 600;
letter-spacing: 0.3px; letter-spacing: 0.4px;
text-transform: uppercase;
} }
.badge-green { .badge-green {
background: var(--color-accent-soft); background: var(--color-accent-soft);
color: var(--color-accent); color: var(--color-accent);
box-shadow: 0 0 12px rgba(16, 185, 129, 0.08);
} }
.badge-red { .badge-red {
background: var(--color-danger-soft); background: var(--color-danger-soft);
color: var(--color-danger); color: var(--color-danger);
box-shadow: 0 0 12px rgba(239, 68, 68, 0.08);
} }
/* ========================================================== /* ==========================================================
@ -589,10 +736,7 @@ a:hover {
.layout { .layout {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.sidebar { order: 2; }
.sidebar {
order: 2;
}
} }
/* ========================================================== /* ==========================================================
@ -602,21 +746,28 @@ a:hover {
width: 22px; width: 22px;
height: 22px; height: 22px;
fill: currentColor; fill: currentColor;
transition: transform var(--transition-normal);
}
.nav__login:hover .icon-user {
transform: scale(1.12);
} }
/* ========================================================== /* ==========================================================
FOOTER FOOTER – Glassmorphism
========================================================== */ ========================================================== */
.footer { .footer {
margin-top: auto; margin-top: auto;
background: rgba(17, 24, 39, 0.85); background: rgba(13, 17, 23, 0.75);
backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(24px) saturate(200%);
-webkit-backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(200%);
border-top: 1px solid var(--border-subtle); border-top: 1px solid var(--border-subtle);
position: relative;
z-index: 1;
} }
.footer .container { .footer .container {
padding-block: 1.5rem; padding-block: 1.75rem;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@ -625,7 +776,7 @@ a:hover {
.footer p { .footer p {
margin: 0; margin: 0;
font-size: 0.85rem; font-size: 0.82rem;
color: var(--text-muted); color: var(--text-muted);
} }
@ -638,18 +789,18 @@ a:hover {
.footer__nav a { .footer__nav a {
color: var(--text-secondary); color: var(--text-secondary);
text-decoration: none; text-decoration: none;
font-size: 0.85rem; font-size: 0.82rem;
font-weight: 500; font-weight: 500;
padding: 0.35rem 0.75rem; padding: 0.4rem 0.85rem;
border-radius: var(--radius-sm); border-radius: var(--radius-full);
transition: color var(--transition-fast), transition: all var(--transition-normal);
background var(--transition-fast);
} }
.footer__nav a:hover, .footer__nav a:hover,
.footer__nav a:focus-visible { .footer__nav a:focus-visible {
color: var(--text-invert); color: var(--text-invert);
background: rgba(255, 255, 255, 0.06); background: rgba(255, 255, 255, 0.06);
transform: translateY(-1px);
} }
@media (max-width: 600px) { @media (max-width: 600px) {
@ -659,3 +810,17 @@ a:hover {
text-align: center; text-align: center;
} }
} }
/* ==========================================================
UTILITY: Staggered fade-in for child elements
========================================================== */
.animate-children > * {
animation: fadeInUp 0.5s ease both;
}
.animate-children > *:nth-child(1) { animation-delay: 0.05s; }
.animate-children > *:nth-child(2) { animation-delay: 0.1s; }
.animate-children > *:nth-child(3) { animation-delay: 0.15s; }
.animate-children > *:nth-child(4) { animation-delay: 0.2s; }
.animate-children > *:nth-child(5) { animation-delay: 0.25s; }
.animate-children > *:nth-child(6) { animation-delay: 0.3s; }

9
wunschliste.php
View File

@ -45,8 +45,9 @@ if (!$conn)
?> ?>
<?php if ($result->num_rows > 0): ?> <?php if ($result->num_rows > 0): ?>
<main>
<section class="product-section"> <section class="product-section">
<h2>Deine Wunschliste</h2>
<div class="product-scroll"> <div class="product-scroll">
<?php while ($product = $result->fetch_assoc()): ?> <?php while ($product = $result->fetch_assoc()): ?>
<?php $productId = (int)$product['productID']; ?> <?php $productId = (int)$product['productID']; ?>
@ -63,9 +64,15 @@ if (!$conn)
<?php endwhile; ?> <?php endwhile; ?>
</div> </div>
</section> </section>
</main>
<?php else: ?>
<main style="padding: 3rem 2rem; text-align: center; animation: fadeInUp 0.5s ease both;">
<p style="color: var(--text-secondary); font-size: 1.1rem;">Deine Wunschliste ist noch leer.</p>
</main>
<?php endif; ?> <?php endif; ?>
<?php $stmt->close(); ?> <?php $stmt->close(); ?>
<?php include 'footer.php'; ?> <?php include 'footer.php'; ?>