From 5e421709f047a22a429467f0a89571e7dc926827 Mon Sep 17 00:00:00 2001 From: Fabian Schieder Date: Fri, 27 Feb 2026 22:32:14 +0100 Subject: [PATCH] refactor account and product pages with animated styles and improved layout for better user experience --- account.php | 18 +- assets/css/catbar.css | 60 ++++-- assets/css/compcard.css | 147 +++++++++++--- assets/css/login.css | 179 ++++++++++++----- assets/css/productAdder.css | 54 ++++-- assets/css/productpage.css | 151 +++++++++++---- impressum.php | 11 +- productAdder.php | 2 - style.css | 375 ++++++++++++++++++++++++++---------- wunschliste.php | 9 +- 10 files changed, 750 insertions(+), 256 deletions(-) diff --git a/account.php b/account.php index fb79722..024f71d 100644 --- a/account.php +++ b/account.php @@ -105,16 +105,18 @@ include 'header.php';
-
-
- +
+ + - +
-
- + +
+ +
diff --git a/assets/css/catbar.css b/assets/css/catbar.css index 0a5c1a0..f499b3b 100644 --- a/assets/css/catbar.css +++ b/assets/css/catbar.css @@ -1,13 +1,17 @@ /* ========================================================== - CATEGORY BAR – Modern Pill Navigation + CATEGORY BAR – Animated Pill Navigation ========================================================== */ .home-nav { 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); padding: 0; - overflow: hidden; + position: relative; + z-index: 1; + animation: fadeIn 0.6s ease 0.2s both; } .home-nav__inner { @@ -16,7 +20,7 @@ display: flex; justify-content: center; align-items: center; - padding: 0.5rem 1rem; + padding: 0.6rem 1rem; } .home-nav__list { @@ -25,7 +29,7 @@ list-style: none; margin: 0; padding: 0; - gap: 0.35rem; + gap: 0.3rem; justify-content: center; } @@ -35,11 +39,11 @@ } .home-nav__list li a { - padding: 0.55rem 1.5rem; + padding: 0.5rem 1.4rem; background: transparent; - color: var(--text-secondary); + color: var(--text-muted); font-weight: 500; - font-size: 0.88rem; + font-size: 0.85rem; font-family: var(--font-family); text-decoration: none; cursor: pointer; @@ -47,18 +51,38 @@ align-items: center; justify-content: center; border-radius: var(--radius-full); - transition: color var(--transition-fast), - background var(--transition-fast); + transition: all var(--transition-smooth); 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 { 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 { - background: rgba(255, 255, 255, 0.12); + transform: scale(0.97); } .home-nav__list li a:focus-visible { @@ -70,6 +94,12 @@ color: var(--color-primary); background: var(--color-primary-soft); 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 ─── */ @@ -90,9 +120,7 @@ justify-content: flex-start; } - .home-nav__list::-webkit-scrollbar { - display: none; - } + .home-nav__list::-webkit-scrollbar { display: none; } .home-nav__list li { flex: 0 0 auto; @@ -100,7 +128,7 @@ } .home-nav__list li a { - padding: 0.5rem 1.1rem; + padding: 0.45rem 1rem; font-size: 0.82rem; } } diff --git a/assets/css/compcard.css b/assets/css/compcard.css index 7b28382..9d41c93 100644 --- a/assets/css/compcard.css +++ b/assets/css/compcard.css @@ -1,5 +1,5 @@ /* ========================================================== - PRODUCT CARDS & SCROLL – Modern Glass Cards + PRODUCT CARDS & SCROLL – Animated Glass Cards ========================================================== */ /* ─── Product Grid ─── */ @@ -17,20 +17,65 @@ border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); - transition: transform var(--transition-smooth), - box-shadow var(--transition-smooth), - border-color var(--transition-smooth); + transition: all var(--transition-smooth); display: flex; flex-direction: column; - min-height: 260px; + min-height: 270px; text-decoration: none; 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 { - transform: translateY(-6px); - box-shadow: var(--shadow-md), var(--shadow-glow); - border-color: var(--border-strong); + transform: translateY(-8px) scale(1.02); + box-shadow: var(--shadow-md), var(--shadow-glow-blue); + border-color: transparent; +} + +.product-card:hover::before { + opacity: 1; +} + +.product-card:hover::after { + opacity: 1; } .product-card:focus-visible { @@ -38,31 +83,50 @@ 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 ─── */ .product-card img { width: 100%; - height: 170px; + height: 175px; object-fit: contain; object-position: center; display: block; flex: 0 0 auto; - background: rgba(255, 255, 255, 0.95); - padding: 12px; + background: rgba(255, 255, 255, 0.96); + padding: 16px; 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 ─── */ .product-card__content { - padding: 1rem 1.25rem 1.1rem; + padding: 1rem 1.25rem 1.15rem; flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; - gap: 0.3rem; + gap: 0.35rem; + position: relative; + z-index: 2; } .product-card__content h3 { - font-size: 0.95rem; + font-size: 0.92rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0; @@ -71,11 +135,16 @@ -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.4; + transition: color var(--transition-normal); +} + +.product-card:hover .product-card__content h3 { + color: var(--text-invert); } .product-card__content p { - font-size: 0.82rem; - color: var(--text-secondary); + font-size: 0.8rem; + color: var(--text-muted); margin-bottom: 0; overflow: hidden; display: -webkit-box; @@ -86,7 +155,7 @@ } .product-card__content .price { - font-size: 1rem; + font-size: 1.05rem; font-weight: 700; color: var(--color-primary); margin-top: auto; @@ -95,20 +164,23 @@ /* ─── Product Sections ─── */ .product-section { - padding: 1.75rem 0 0.5rem; + padding: 2rem 0 0.5rem; + animation: fadeInUp 0.5s ease both; } .product-section h2 { margin-left: 2rem; - margin-bottom: 1rem; - font-size: 1.25rem; + margin-bottom: 1.25rem; + font-size: 1.3rem; font-weight: 700; color: var(--text-primary); letter-spacing: -0.3px; position: relative; - padding-left: 0.75rem; + padding-left: 1rem; + display: inline-block; } +/* Animated accent line */ .product-section h2::before { content: ""; position: absolute; @@ -116,21 +188,44 @@ top: 50%; transform: translateY(-50%); width: 3px; - height: 70%; - background: var(--color-primary); + height: 0; + background: linear-gradient(180deg, var(--color-primary), var(--color-accent)); 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 ─── */ .product-scroll { display: flex; gap: 1.25rem; - padding: 0.5rem 2rem 2rem; + padding: 0.5rem 2rem 2.5rem; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; 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 { @@ -146,11 +241,11 @@ @media (max-width: 768px) { .product-section h2 { margin-left: 1rem; - font-size: 1.1rem; + font-size: 1.15rem; } .product-scroll { - padding: 0.5rem 1rem 1.5rem; + padding: 0.5rem 1rem 2rem; gap: 1rem; } diff --git a/assets/css/login.css b/assets/css/login.css index 576c5f2..553b850 100644 --- a/assets/css/login.css +++ b/assets/css/login.css @@ -1,6 +1,6 @@ /* ========================================================== AUTH PAGES – Login, Register, Account - Modern glassmorphism style + Animated Glassmorphism Design ========================================================== */ /* ─── Auth Wrapper ─── */ @@ -9,7 +9,24 @@ place-items: center; min-height: 80vh; 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 { @@ -56,6 +73,11 @@ max-width: none; height: auto; 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 { @@ -64,16 +86,32 @@ justify-items: center; } -/* ─── Card ─── */ +/* ─── Card – Glassmorphism ─── */ .auth__card, .auth__sideCard { 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-radius: var(--radius-lg); 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 { padding: 1.75rem; } @@ -101,6 +139,10 @@ font-weight: 700; letter-spacing: -0.3px; 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 { @@ -110,27 +152,29 @@ line-height: 1.4; } -/* ─── Alerts ─── */ +/* ─── Alerts – Animated ─── */ .auth__alert__error { margin: 0.75rem 0 1rem; color: var(--text-invert); background: linear-gradient(135deg, var(--color-danger), #dc2626); border-radius: var(--radius-md); padding: 0.75rem 1rem; - font-size: 0.9rem; + font-size: 0.88rem; 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 { margin: 0.75rem 0 1rem; color: var(--text-invert); - background: linear-gradient(135deg, #22c55e, #16a34a); + background: linear-gradient(135deg, var(--color-success), #16a34a); border-radius: var(--radius-md); padding: 0.75rem 1rem; - font-size: 0.9rem; + font-size: 0.88rem; 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 { @@ -139,7 +183,8 @@ background: linear-gradient(135deg, var(--color-danger), #dc2626); border-radius: var(--radius-md); padding: 0.75rem 1rem; - font-size: 0.9rem; + font-size: 0.88rem; + animation: scaleIn 0.3s ease; } .auth__alert ul { @@ -155,10 +200,11 @@ margin: 0.75rem 0; color: var(--color-danger); 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); padding: 0.75rem 1rem; - font-size: 0.9rem; + font-size: 0.88rem; + animation: scaleIn 0.3s ease; } /* ─── Form ─── */ @@ -177,9 +223,14 @@ .auth__field label { display: block; margin: 0 0 0.4rem; - font-size: 0.88rem; + font-size: 0.85rem; 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"], @@ -191,14 +242,12 @@ padding: 0.75rem 0.9rem; border: 1px solid var(--border-default); border-radius: var(--radius-md); - background: var(--bg-input); + background: rgba(18, 26, 40, 0.6); color: var(--text-primary); font-family: var(--font-family); - font-size: 0.92rem; + font-size: 0.9rem; outline: none; - transition: border-color var(--transition-fast), - box-shadow var(--transition-fast), - background var(--transition-fast); + transition: all var(--transition-smooth); } .auth__field input[type="text"]:focus, @@ -206,8 +255,10 @@ .auth__field input[type="email"]:focus, .auth__field input[type="file"]:focus { border-color: var(--color-primary); - box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15); - background: rgba(26, 34, 51, 0.8); + 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__field input[type="text"]::placeholder, @@ -221,19 +272,18 @@ padding: 0.6rem 1rem; border: 0; border-radius: var(--radius-md); - background: var(--color-primary); + background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover)); color: #ffffff; font-weight: 600; font-family: var(--font-family); - font-size: 0.85rem; + font-size: 0.82rem; cursor: pointer; - transition: background var(--transition-fast), - transform var(--transition-fast); + transition: all var(--transition-normal); } .auth__field input[type="file"]::file-selector-button:hover { - background: var(--color-primary-hover); transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); } .auth__field input[type="file"]::file-selector-button:active { @@ -247,45 +297,72 @@ .auth__submit { width: 100%; - padding: 0.75rem 1rem; + padding: 0.8rem 1rem; border: 0; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover)); + background-size: 200% 200%; color: #ffffff; font-weight: 600; font-family: var(--font-family); - font-size: 0.95rem; + font-size: 0.93rem; letter-spacing: 0.2px; cursor: pointer; - transition: transform var(--transition-fast), - box-shadow var(--transition-fast), - opacity var(--transition-fast); - box-shadow: 0 4px 14px rgba(59, 130, 246, 0.25); + transition: all var(--transition-normal); + box-shadow: 0 4px 16px rgba(59, 130, 246, 0.25); + position: relative; + 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 { 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 { - transform: translateY(0); + transform: translateY(0) scale(0.98); } .auth__submit:disabled { opacity: 0.5; cursor: not-allowed; transform: none; + box-shadow: none; +} + +.auth__submit:disabled::before { + display: none; } /* Danger button variant */ .auth__submit--danger { 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 { - box-shadow: 0 6px 20px rgba(239, 68, 68, 0.35); + box-shadow: 0 8px 28px rgba(239, 68, 68, 0.4); } /* ─── Links ─── */ @@ -298,25 +375,39 @@ .auth__muted { margin: 0.5rem 0 0; color: var(--text-secondary); - font-size: 0.9rem; + font-size: 0.88rem; } .auth__muted a { color: var(--color-primary); text-decoration: none; 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 { color: var(--color-primary-hover); - text-decoration: underline; +} + +.auth__muted a:hover::after { + width: 100%; } /* ─── Side Card ─── */ .auth__sideCard { padding: 1.25rem; - background: var(--bg-card); } .auth__sideCard h3 { @@ -342,9 +433,9 @@ padding: 0.7rem 0.9rem; border-radius: var(--radius-md); 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); - font-size: 0.82rem; + font-size: 0.8rem; line-height: 1.5; } @@ -392,4 +483,4 @@ .auth__title { font-size: 1.25rem; } -} \ No newline at end of file +} diff --git a/assets/css/productAdder.css b/assets/css/productAdder.css index 00a2763..c62f891 100644 --- a/assets/css/productAdder.css +++ b/assets/css/productAdder.css @@ -1,5 +1,5 @@ /* ========================================================== - PRODUCT ADDER – Dropdown & Form Styles + PRODUCT ADDER – Animated Dropdown & Form Styles ========================================================== */ /* ─── Select Wrapper ─── */ @@ -12,9 +12,14 @@ } .auth__select__label { - font-size: 0.88rem; + font-size: 0.85rem; 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 { @@ -23,18 +28,17 @@ padding: 0.75rem 2.5rem 0.75rem 0.9rem; border: 1px solid var(--border-default); border-radius: var(--radius-md); - background-color: var(--bg-input); + background-color: rgba(18, 26, 40, 0.6); color: var(--text-primary); font-family: var(--font-family); - font-size: 0.92rem; + font-size: 0.9rem; outline: none; appearance: none; cursor: pointer; - transition: border-color var(--transition-fast), - box-shadow var(--transition-fast); + transition: all var(--transition-smooth); background-image: - linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%), - linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%); + linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), + linear-gradient(135deg, var(--text-muted) 50%, transparent 50%); background-position: calc(100% - 18px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px); @@ -44,7 +48,9 @@ .auth__select:focus { 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 { @@ -69,11 +75,20 @@ } .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-radius: var(--radius-lg); padding: 1.5rem; 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 { @@ -95,10 +110,11 @@ } .auth__form label { - font-size: 0.88rem; + font-size: 0.85rem; font-weight: 500; - color: var(--text-secondary); + color: var(--text-muted); margin-top: 0.5rem; + transition: color var(--transition-normal); } .auth__input { @@ -107,18 +123,20 @@ padding: 0.7rem 0.9rem; border: 1px solid var(--border-default); border-radius: var(--radius-md); - background: var(--bg-input); + background: rgba(18, 26, 40, 0.6); color: var(--text-primary); font-family: var(--font-family); - font-size: 0.92rem; + font-size: 0.9rem; outline: none; - transition: border-color var(--transition-fast), - box-shadow var(--transition-fast); + transition: all var(--transition-smooth); } .auth__input:focus { 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 { diff --git a/assets/css/productpage.css b/assets/css/productpage.css index 352ef3b..199e66f 100644 --- a/assets/css/productpage.css +++ b/assets/css/productpage.css @@ -1,5 +1,5 @@ /* ========================================================== - PRODUCT PAGE – Detailed product view & shop offers + PRODUCT PAGE – Animated Detail View & Shop Offers ========================================================== */ /* ─── Wrapper ─── */ @@ -9,36 +9,66 @@ padding: 0 1.5rem; display: flex; gap: 3.5rem; + animation: fadeInUp 0.6s ease both; } /* ─── Left Column (Image) ─── */ .product-left { flex: 1; + animation: fadeInUp 0.5s ease 0.1s both; } .product-image-box { - background: rgba(255, 255, 255, 0.95); + background: rgba(255, 255, 255, 0.96); padding: 2.5rem; border-radius: var(--radius-xl); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-md); 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 { - 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 { max-width: 100%; height: auto; object-fit: contain; + transition: transform var(--transition-smooth); +} + +.product-image-box:hover img { + transform: scale(1.03); } /* ─── Right Column (Details) ─── */ .product-right { flex: 1.2; + animation: fadeInUp 0.5s ease 0.2s both; } .product-title { @@ -50,11 +80,16 @@ border-bottom: 1px solid var(--border-subtle); letter-spacing: -0.5px; 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 { font-size: 1rem; - line-height: 1.7; + line-height: 1.75; color: var(--text-secondary); margin-bottom: 1.5rem; } @@ -63,29 +98,32 @@ display: flex; color: var(--text-primary); flex-direction: column; - gap: 0.6rem; + gap: 0.5rem; } .product-specs p { - padding: 0.65rem 1rem; - background: var(--bg-surface); + padding: 0.7rem 1rem; + background: rgba(20, 28, 43, 0.6); + backdrop-filter: blur(8px); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); - font-size: 0.92rem; - transition: background var(--transition-fast); + font-size: 0.9rem; + transition: all var(--transition-normal); } .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 { - color: var(--text-secondary); + color: var(--text-muted); font-weight: 500; margin-right: 0.5rem; } -/* ─── Spec Rows (alternative layout) ─── */ +/* ─── Spec Rows ─── */ .spec-row { display: flex; justify-content: space-between; @@ -93,11 +131,12 @@ background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); - transition: background var(--transition-fast); + transition: all var(--transition-normal); } .spec-row:hover { - background: rgba(26, 35, 50, 0.9); + background: rgba(20, 28, 43, 0.9); + transform: translateX(4px); } .spec-name { @@ -124,7 +163,7 @@ } /* ========================================================== - SHOP OFFERS + SHOP OFFERS – Animated List ========================================================== */ .shop-offers { max-width: 1200px; @@ -132,7 +171,8 @@ padding: 0 1.5rem; display: flex; flex-direction: column; - gap: 0.75rem; + gap: 0.65rem; + animation: fadeInUp 0.6s ease 0.3s both; } .shop-line { @@ -140,21 +180,49 @@ grid-template-columns: 250px 1fr auto; align-items: center; 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-radius: var(--radius-lg); padding: 1rem 1.5rem; - transition: border-color var(--transition-fast), - transform var(--transition-fast), - box-shadow var(--transition-fast); + transition: all var(--transition-smooth); + animation: fadeInUp 0.4s ease both; + 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 { border-color: var(--border-strong); - transform: translateY(-2px); - box-shadow: var(--shadow-md); + transform: translateY(-3px); + 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 { display: flex; align-items: center; @@ -173,6 +241,11 @@ max-width: 90px; object-fit: contain; border-radius: var(--radius-sm); + transition: transform var(--transition-normal); +} + +.shop-line:hover .shop-logo img { + transform: scale(1.08); } .shop-name { @@ -183,7 +256,7 @@ .shop-name a { color: var(--text-primary); text-decoration: none; - transition: color var(--transition-fast); + transition: color var(--transition-normal); } .shop-name a:hover { @@ -194,7 +267,7 @@ display: flex; align-items: center; gap: 2rem; - font-size: 0.88rem; + font-size: 0.85rem; color: var(--text-secondary); } @@ -206,18 +279,21 @@ } .shop-stock { - font-weight: 500; + font-weight: 600; display: inline-flex; align-items: center; gap: 6px; - padding: 0.3rem 0.75rem; + padding: 0.3rem 0.8rem; border-radius: var(--radius-full); - font-size: 0.82rem; + font-size: 0.78rem; + text-transform: uppercase; + letter-spacing: 0.4px; } .shop-stock.in-stock { color: var(--color-accent); background: var(--color-accent-soft); + box-shadow: 0 0 12px rgba(16, 185, 129, 0.08); } .shop-stock.in-stock::before { @@ -227,6 +303,7 @@ .shop-stock.out-stock { color: var(--color-danger); background: var(--color-danger-soft); + box-shadow: 0 0 12px rgba(239, 68, 68, 0.08); } .shop-stock.out-stock::before { @@ -234,21 +311,29 @@ } .shop-price { - font-size: 1.35rem; - font-weight: 700; + font-size: 1.4rem; + font-weight: 800; color: var(--color-accent); 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 { - background: var(--bg-card); + background: rgba(15, 21, 32, 0.6); + backdrop-filter: blur(12px); border: 1px solid var(--border-subtle); - padding: 2rem; + padding: 2.5rem; border-radius: var(--radius-lg); color: var(--text-secondary); text-align: center; font-size: 0.95rem; + animation: fadeInUp 0.5s ease 0.3s both; } /* ─── Responsive Shop Offers ─── */ diff --git a/impressum.php b/impressum.php index 134f870..d74ead8 100644 --- a/impressum.php +++ b/impressum.php @@ -1,7 +1,12 @@ - -

Impressum 123

- +
+
+
+

Impressum

+
+

Impressum 123

+
+
\ No newline at end of file diff --git a/productAdder.php b/productAdder.php index 771f380..b6f9e7b 100644 --- a/productAdder.php +++ b/productAdder.php @@ -291,8 +291,6 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['saveProduct'])) { include 'header.php'; ?> - -
diff --git a/style.css b/style.css index 9883354..0b96a32 100755 --- a/style.css +++ b/style.css @@ -1,6 +1,6 @@ /* ========================================================== - GEIZKRAGEN – DESIGN SYSTEM - Modern Dark Theme mit Inter Font + GEIZKRAGEN – DESIGN SYSTEM v2 + Animated Dark Theme · Glassmorphism · Glow ========================================================== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap'); @@ -18,48 +18,53 @@ :root { /* ─── Farben ─── */ - --bg-main: #0c1017; - --bg-card: #151c28; - --bg-surface: #1a2332; - --bg-header: #111827; - --bg-input: #1a2233; + --bg-main: #080b12; + --bg-card: #0f1520; + --bg-surface: #141c2b; + --bg-header: #0d1117; + --bg-input: #121a28; --color-primary: #3b82f6; --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-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-soft: rgba(239, 68, 68, 0.12); + --color-danger-soft: rgba(239, 68, 68, 0.1); --color-warning: #f59e0b; --color-success: #22c55e; - --text-primary: #f1f5f9; - --text-secondary: #94a3b8; - --text-muted: #64748b; + --text-primary: #e8edf5; + --text-secondary: #8b98b0; + --text-muted: #556178; --text-invert: #ffffff; - --border-subtle: rgba(255, 255, 255, 0.06); - --border-default: rgba(255, 255, 255, 0.1); - --border-strong: rgba(255, 255, 255, 0.15); + --border-subtle: rgba(255, 255, 255, 0.04); + --border-default: rgba(255, 255, 255, 0.08); + --border-strong: rgba(255, 255, 255, 0.14); + --border-glow: rgba(59, 130, 246, 0.3); /* ─── Radii ─── */ - --radius-sm: 6px; - --radius-md: 10px; - --radius-lg: 14px; - --radius-xl: 20px; + --radius-sm: 8px; + --radius-md: 12px; + --radius-lg: 16px; + --radius-xl: 24px; --radius-full: 9999px; /* ─── Schatten ─── */ - --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15); - --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.2); - --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.3); - --shadow-glow: 0 0 30px rgba(59, 130, 246, 0.15); + --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2); + --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.25); + --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.35); + --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 ─── */ --transition-fast: 150ms ease; - --transition-normal: 250ms ease; - --transition-smooth: 350ms cubic-bezier(0.4, 0, 0.2, 1); + --transition-normal: 280ms ease; + --transition-smooth: 400ms cubic-bezier(0.4, 0, 0.2, 1); + --transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1); /* ─── Spacing ─── */ --nav-gutter: 1.5rem; @@ -68,6 +73,58 @@ --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 { scroll-behavior: smooth; } @@ -76,22 +133,55 @@ body { font-family: var(--font-family); background: var(--bg-main); color: var(--text-primary); - line-height: 1.55; + line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; -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 { flex: 1 0 auto; + position: relative; + z-index: 1; } a { color: var(--color-primary); text-decoration: none; - transition: color var(--transition-fast); + transition: color var(--transition-normal); } a:hover { @@ -113,24 +203,25 @@ a:hover { } /* ========================================================== - HEADER + HEADER – Glassmorphism ========================================================== */ .header { position: sticky; top: 0; z-index: 1000; - background: rgba(17, 24, 39, 0.85); - backdrop-filter: blur(20px) saturate(180%); - -webkit-backdrop-filter: blur(20px) saturate(180%); + background: rgba(13, 17, 23, 0.75); + backdrop-filter: blur(24px) saturate(200%); + -webkit-backdrop-filter: blur(24px) saturate(200%); border-bottom: 1px solid var(--border-subtle); padding: 0; + animation: fadeIn 0.6s ease; } /* ========================================================== NAVBAR ========================================================== */ .nav { - min-height: 60px; + min-height: 64px; width: 100%; display: flex; align-items: center; @@ -142,11 +233,12 @@ a:hover { align-items: center; padding-left: 0; margin-left: 0; - transition: opacity var(--transition-fast); + transition: transform var(--transition-smooth), opacity var(--transition-normal); } .nav__logoLink:hover { - opacity: 0.85; + opacity: 0.9; + transform: scale(1.02); } .nav__logo { @@ -188,26 +280,29 @@ a:hover { font-size: 0.9rem; font-weight: 500; text-decoration: none; - padding: 0.5rem 1rem; - border-radius: var(--radius-md); - transition: color var(--transition-fast), background var(--transition-fast); + padding: 0.5rem 1.1rem; + border-radius: var(--radius-full); + transition: all var(--transition-normal); + position: relative; } .nav__link:hover { color: var(--text-invert); background: rgba(255, 255, 255, 0.06); + transform: translateY(-1px); } .nav__link.active { color: var(--color-primary); background: var(--color-primary-soft); + box-shadow: 0 0 12px rgba(59, 130, 246, 0.12); } /* ─── Nav Actions ─── */ .nav__actions { display: flex; align-items: center; - gap: 0.35rem; + gap: 0.25rem; } .nav__search, @@ -217,18 +312,21 @@ a:hover { font-size: 1.3rem; color: var(--text-secondary); cursor: pointer; - transition: color var(--transition-fast), background var(--transition-fast); - padding: 0.45rem; + transition: all var(--transition-normal); + padding: 0.5rem; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; + position: relative; } .nav__search:hover, .nav__login:hover { color: var(--text-invert); background: rgba(255, 255, 255, 0.08); + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } .nav__wishlist { @@ -236,20 +334,16 @@ a:hover { } .nav__wishlist:hover { - color: var(--text-invert); - background: rgba(255, 255, 255, 0.08); + color: var(--color-primary); + background: var(--color-primary-soft); + box-shadow: var(--shadow-glow-blue); } /* ========================================================== TOGGLE / CLOSE ========================================================== */ -.nav__toggle { - display: none; -} - -.nav__close { - display: none; -} +.nav__toggle { display: none; } +.nav__close { display: none; } /* ========================================================== MOBILE NAV @@ -265,10 +359,11 @@ a:hover { right: -100%; width: 300px; height: 100%; - background: var(--bg-header); + background: rgba(13, 17, 23, 0.95); + backdrop-filter: blur(30px); border-left: 1px solid var(--border-subtle); 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; align-items: flex-start; gap: 2rem; @@ -295,6 +390,7 @@ a:hover { .nav__link:hover { background: rgba(255, 255, 255, 0.06); + transform: translateX(4px); } .nav__close { @@ -307,6 +403,7 @@ a:hover { .nav__close:hover { color: var(--text-invert); + transform: rotate(90deg); } } @@ -321,7 +418,7 @@ a:hover { display: flex; align-items: center; justify-content: center; - width: min(500px, calc(100% - 520px)); + width: min(480px, calc(100% - 520px)); z-index: 1; } @@ -334,22 +431,33 @@ a:hover { .nav__searchField { width: 100%; margin-top: 0; + position: relative; } .nav__searchInput { width: 100%; - height: 40px; - padding: 0 16px; + height: 42px; + padding: 0 18px 0 42px; border-radius: var(--radius-full); border: 1px solid var(--border-default); - background: rgba(255, 255, 255, 0.05); + background: rgba(255, 255, 255, 0.04); color: var(--text-primary); - font-size: 0.9rem; + font-size: 0.88rem; font-family: var(--font-family); outline: none; - transition: border-color var(--transition-fast), - background var(--transition-fast), - box-shadow var(--transition-fast); + transition: all var(--transition-smooth); +} + +.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 { @@ -358,8 +466,14 @@ a:hover { .nav__searchInput:focus { border-color: var(--color-primary); - background: rgba(255, 255, 255, 0.08); - box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15); + background: rgba(255, 255, 255, 0.07); + 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) { @@ -388,6 +502,7 @@ a:hover { border-radius: var(--radius-lg); padding: 1.25rem; box-shadow: var(--shadow-sm); + animation: fadeInUp 0.5s ease both; } .sidebar h3 { @@ -418,14 +533,14 @@ a:hover { color: var(--text-primary); font-size: 0.9rem; font-family: var(--font-family); - transition: border-color var(--transition-fast); + transition: all var(--transition-normal); } .filter-group input:focus, .filter-group select:focus { border-color: var(--color-primary); 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); display: flex; flex-direction: column; - transition: transform var(--transition-smooth), - box-shadow var(--transition-smooth), - border-color var(--transition-smooth); + transition: all var(--transition-smooth); + position: relative; + 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 { - transform: translateY(-6px); - box-shadow: var(--shadow-md); + transform: translateY(-8px) scale(1.01); + box-shadow: var(--shadow-md), var(--shadow-glow-blue); border-color: var(--border-strong); } +.product-card:hover::before { + opacity: 1; +} + .product-image { height: 180px; background: var(--bg-surface); @@ -502,61 +635,72 @@ a:hover { } /* ========================================================== - BUTTONS + BUTTONS – Gradient & Glow ========================================================== */ .btn { flex: 1; - padding: 0.55rem 1rem; + padding: 0.6rem 1.1rem; border-radius: var(--radius-md); font-size: 0.85rem; - font-weight: 500; + font-weight: 600; font-family: var(--font-family); cursor: pointer; border: none; - transition: background var(--transition-fast), - transform var(--transition-fast), - box-shadow var(--transition-fast); + transition: all var(--transition-normal); + position: relative; + 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 { - transform: translateY(-1px); + transform: translateY(-2px); } .btn:active { - transform: translateY(0); + transform: translateY(0) scale(0.98); } .btn-primary { - background: var(--color-primary); + background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover)); 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 { - background: var(--color-primary-hover); - box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35); + box-shadow: 0 6px 24px rgba(59, 130, 246, 0.45); } .btn-secondary { - background: rgba(255, 255, 255, 0.06); + background: rgba(255, 255, 255, 0.04); color: var(--text-primary); border: 1px solid var(--border-default); } .btn-secondary:hover { - background: rgba(255, 255, 255, 0.1); + background: rgba(255, 255, 255, 0.08); border-color: var(--border-strong); } .btn-danger { - background: var(--color-danger); + background: linear-gradient(135deg, var(--color-danger), #dc2626); 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 { - background: #dc2626; - box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35); + box-shadow: 0 6px 24px rgba(239, 68, 68, 0.45); } /* ========================================================== @@ -565,21 +709,24 @@ a:hover { .badge { display: inline-flex; align-items: center; - padding: 0.2rem 0.6rem; + padding: 0.25rem 0.7rem; border-radius: var(--radius-full); - font-size: 0.7rem; + font-size: 0.72rem; font-weight: 600; - letter-spacing: 0.3px; + letter-spacing: 0.4px; + text-transform: uppercase; } .badge-green { background: var(--color-accent-soft); color: var(--color-accent); + box-shadow: 0 0 12px rgba(16, 185, 129, 0.08); } .badge-red { background: var(--color-danger-soft); color: var(--color-danger); + box-shadow: 0 0 12px rgba(239, 68, 68, 0.08); } /* ========================================================== @@ -589,10 +736,7 @@ a:hover { .layout { grid-template-columns: 1fr; } - - .sidebar { - order: 2; - } + .sidebar { order: 2; } } /* ========================================================== @@ -602,21 +746,28 @@ a:hover { width: 22px; height: 22px; fill: currentColor; + transition: transform var(--transition-normal); +} + +.nav__login:hover .icon-user { + transform: scale(1.12); } /* ========================================================== - FOOTER + FOOTER – Glassmorphism ========================================================== */ .footer { margin-top: auto; - background: rgba(17, 24, 39, 0.85); - backdrop-filter: blur(20px) saturate(180%); - -webkit-backdrop-filter: blur(20px) saturate(180%); + background: rgba(13, 17, 23, 0.75); + backdrop-filter: blur(24px) saturate(200%); + -webkit-backdrop-filter: blur(24px) saturate(200%); border-top: 1px solid var(--border-subtle); + position: relative; + z-index: 1; } .footer .container { - padding-block: 1.5rem; + padding-block: 1.75rem; display: flex; align-items: center; justify-content: space-between; @@ -625,7 +776,7 @@ a:hover { .footer p { margin: 0; - font-size: 0.85rem; + font-size: 0.82rem; color: var(--text-muted); } @@ -638,18 +789,18 @@ a:hover { .footer__nav a { color: var(--text-secondary); text-decoration: none; - font-size: 0.85rem; + font-size: 0.82rem; font-weight: 500; - padding: 0.35rem 0.75rem; - border-radius: var(--radius-sm); - transition: color var(--transition-fast), - background var(--transition-fast); + padding: 0.4rem 0.85rem; + border-radius: var(--radius-full); + transition: all var(--transition-normal); } .footer__nav a:hover, .footer__nav a:focus-visible { color: var(--text-invert); background: rgba(255, 255, 255, 0.06); + transform: translateY(-1px); } @media (max-width: 600px) { @@ -659,3 +810,17 @@ a:hover { 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; } diff --git a/wunschliste.php b/wunschliste.php index 6271a67..c1b02ba 100644 --- a/wunschliste.php +++ b/wunschliste.php @@ -45,8 +45,9 @@ if (!$conn) ?> num_rows > 0): ?> +
- +

Deine Wunschliste

fetch_assoc()): ?> @@ -63,9 +64,15 @@ if (!$conn)
+
+ +
+

Deine Wunschliste ist noch leer.

+
close(); ?> + \ No newline at end of file