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

refactor styles and structure for improved consistency and responsiveness across various components

Browse Source
This commit is contained in:
Fabian Schieder 2026-02-27 22:19:37 +01:00
parent 76d47bc193
commit 173707ddc4
15 changed files with 869 additions and 590 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.idea/php.xml generated
View File

@ -10,6 +10,9 @@
<option name="highlightLevel" value="WARNING" /> <option name="highlightLevel" value="WARNING" />
<option name="transferred" value="true" /> <option name="transferred" value="true" />
</component> </component>
<component name="PhpProjectSharedConfiguration" php_language_level="7.0">
<option name="suggestChangeDefaultLanguageLevel" value="false" />
</component>
<component name="PhpStanOptionsConfiguration"> <component name="PhpStanOptionsConfiguration">
<option name="transferred" value="true" /> <option name="transferred" value="true" />
</component> </component>

1
account.php
View File

@ -62,7 +62,6 @@ if (!$user)
include 'header.php'; include 'header.php';
?> ?>
<link rel="stylesheet" href="assets/css/login.css">
<main class="auth" role="main"> <main class="auth" role="main">
<section class="auth__grid auth__card__side" aria-label="Account Bereich"> <section class="auth__grid auth__card__side" aria-label="Account Bereich">

110
assets/css/catbar.css
View File

@ -1,98 +1,106 @@
/* ==========================================================
CATEGORY BAR – Modern Pill Navigation
========================================================== */
.home-nav { .home-nav {
width: 100%; width: 100%;
display: flex; background: var(--bg-surface);
align-items: center; border-bottom: 1px solid var(--border-subtle);
background-color: #2d3b50; padding: 0;
padding: 1px 0; overflow: hidden;
} }
/* Inner zentriert */
.home-nav__inner { .home-nav__inner {
flex: 1; flex: 1;
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 0.5rem 1rem;
} }
/* List */
.home-nav__list { .home-nav__list {
width: 100%; width: 100%;
display: flex; display: flex;
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
gap: 0.35rem;
justify-content: center;
} }
/* LI nur als Container */
.home-nav__list li { .home-nav__list li {
flex: 1; flex: 0 1 auto;
position: relative; position: relative;
} }
/* =============================== */
/* HOME CATEGORY LINKS */
/* =============================== */
.home-nav__list li a { .home-nav__list li a {
width: 100%; padding: 0.55rem 1.5rem;
padding: 8px 0; background: transparent;
color: var(--text-secondary);
background-color: rgb(45, 59, 80); font-weight: 500;
color: #ffffff; font-size: 0.88rem;
font-weight: 600; font-family: var(--font-family);
font-size: 0.9rem;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: var(--radius-full);
border-radius: 0; /* 🔥 eckig */ transition: color var(--transition-fast),
transition: background-color 0.2s ease; background var(--transition-fast);
white-space: nowrap;
} }
/* Hover */
.home-nav__list li a:hover { .home-nav__list li a:hover {
background-color: rgba(255,255,255,0.18); color: var(--text-invert);
background: rgba(255, 255, 255, 0.08);
} }
/* Active (Mausklick) */
.home-nav__list li a:active { .home-nav__list li a:active {
background-color: rgba(255,255,255,0.28); background: rgba(255, 255, 255, 0.12);
} }
/* Fokus (Tastatur) */
.home-nav__list li a:focus-visible { .home-nav__list li a:focus-visible {
outline: none; outline: none;
box-shadow: inset 0 0 0 2px rgba(255,255,255,0.5); box-shadow: 0 0 0 2px var(--color-primary);
} }
/* Aktive Kategorie (per PHP) */
.home-nav__list li a.active { .home-nav__list li a.active {
background-color: rgba(255,255,255,0.25); color: var(--color-primary);
background: var(--color-primary-soft);
font-weight: 600;
} }
/* =============================== */ /* ─── Responsive: horizontal scroll on mobile ─── */
/* TRENNSTRICHE ZWISCHEN KATEGORIEN */ @media (max-width: 768px) {
/* =============================== */ .home-nav__inner {
justify-content: flex-start;
padding: 0.5rem 0.75rem;
}
.home-nav__list li { .home-nav__list {
position: relative; overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
gap: 0.25rem;
flex-wrap: nowrap;
justify-content: flex-start;
}
.home-nav__list::-webkit-scrollbar {
display: none;
}
.home-nav__list li {
flex: 0 0 auto;
scroll-snap-align: start;
}
.home-nav__list li a {
padding: 0.5rem 1.1rem;
font-size: 0.82rem;
}
} }
/* Trennstrich rechts – außer beim letzten */
.home-nav__list li:not(:last-child)::after {
content: "";
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 2px;
background-color: rgba(255,255,255,0.3);
}

149
assets/css/compcard.css
View File

@ -1,149 +1,160 @@
/* =============================== */ /* ==========================================================
/* PRODUCT GRID */ PRODUCT CARDS & SCROLL – Modern Glass Cards
/* =============================== */ ========================================================== */
/* ─── Product Grid ─── */
.product-grid { .product-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 2rem; gap: 1.5rem;
padding: 2rem; padding: 2rem;
} }
/* =============================== */ /* ─── Product Card ─── */
/* PRODUCT CARD – Apple Style */
/* =============================== */
.product-card { .product-card {
background-color: #2d3b50; background: var(--bg-card);
border-radius: 5px; border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
overflow: hidden; overflow: hidden;
box-shadow: var(--shadow-sm);
box-shadow: transition: transform var(--transition-smooth),
0 10px 30px rgba(0, 0, 0, 0.08); box-shadow var(--transition-smooth),
border-color var(--transition-smooth);
transition:
transform 0.25s ease,
box-shadow 0.25s ease;
/* Einheitliche Card-Größe */
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 250px; min-height: 260px;
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
} }
/* Hover – Apple-like Lift */
.product-card:hover { .product-card:hover {
transform: translateY(2px); transform: translateY(-6px);
box-shadow: box-shadow: var(--shadow-md), var(--shadow-glow);
0 20px 50px rgba(0, 0, 0, 0.12); border-color: var(--border-strong);
} }
.product-card:focus-visible { .product-card:focus-visible {
outline: 2px solid #0071e3; outline: 2px solid var(--color-primary);
outline-offset: 3px; outline-offset: 3px;
} }
/* Bild */ /* ─── Card Image ─── */
.product-card img { .product-card img {
width: 100%; width: 100%;
height: 160px; height: 170px;
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-color: #ffffff; background: rgba(255, 255, 255, 0.95);
padding: 12px;
border-bottom: 1px solid var(--border-subtle);
} }
/* Content */ /* ─── Card Content ─── */
.product-card__content { .product-card__content {
padding: 1rem 1.25rem; padding: 1rem 1.25rem 1.1rem;
/* sorgt dafür, dass der Content-Bereich den Rest der Card füllt */
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;
} }
/* Titel */
.product-card__content h3 { .product-card__content h3 {
font-size: 1rem; font-size: 0.95rem;
font-weight: 600; font-weight: 600;
margin-bottom: 0.4rem; color: var(--text-primary);
color: #ffffff; /* Apple Schwarz */ margin-bottom: 0;
/* verhindert, dass lange Titel die Card-Höhe sprengen */
overflow: hidden; overflow: hidden;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
line-height: 1.4;
} }
/* Beschreibung */
.product-card__content p { .product-card__content p {
font-size: 0.85rem; font-size: 0.82rem;
color: #ffffff; color: var(--text-secondary);
margin-bottom: 0; margin-bottom: 0;
overflow: hidden; overflow: hidden;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 4; -webkit-line-clamp: 3;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-break: break-word; word-break: break-word;
line-height: 1.5;
} }
/* Preis */
.product-card__content .price { .product-card__content .price {
font-size: 0.95rem; font-size: 1rem;
font-weight: 600; font-weight: 700;
color: #0071e3; /* Apple Blau */ color: var(--color-primary);
margin-top: auto;
padding-top: 0.5rem;
} }
/* =============================== */ /* ─── Product Sections ─── */
/* PRODUCT SECTIONS (Vertical) */
/* =============================== */
.product-section { .product-section {
padding: 1.5rem 0; padding: 1.75rem 0 0.5rem;
} }
/* Überschrift */
.product-section h2 { .product-section h2 {
margin-left: 2rem; margin-left: 2rem;
margin-bottom: 0.75rem; margin-bottom: 1rem;
font-size: 1.25rem;
font-size: 1.2rem; font-weight: 700;
font-weight: 600; color: var(--text-primary);
color: #d8d8ee; letter-spacing: -0.3px;
position: relative;
padding-left: 0.75rem;
} }
/* =============================== */ .product-section h2::before {
/* HORIZONTAL PRODUCT SCROLL */ content: "";
/* =============================== */ position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 70%;
background: var(--color-primary);
border-radius: var(--radius-full);
}
/* ─── Horizontal Scroll ─── */
.product-scroll { .product-scroll {
display: flex; display: flex;
gap: 1.5rem; gap: 1.25rem;
padding: 0 2rem 1.5rem; padding: 0.5rem 2rem 2rem;
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;
} }
/* fixe Breite pro Card im horizontalen Scroll */
.product-scroll .product-card { .product-scroll .product-card {
flex: 0 0 260px; flex: 0 0 270px;
scroll-snap-align: start; scroll-snap-align: start;
} }
.product-scroll::-webkit-scrollbar { .product-scroll::-webkit-scrollbar {
display: none; display: none;
} }
/* ─── Responsive ─── */
@media (max-width: 768px) {
.product-section h2 {
margin-left: 1rem;
font-size: 1.1rem;
}
.product-scroll {
padding: 0.5rem 1rem 1.5rem;
gap: 1rem;
}
.product-scroll .product-card {
flex: 0 0 240px;
}
}

388
assets/css/login.css
View File

@ -1,73 +1,49 @@
/* assets/css/login.css /* ==========================================================
Geizhals-inspiriertes, cleanes Login-Layout AUTH PAGES – Login, Register, Account
*/ Modern glassmorphism style
========================================================== */
:root { /* ─── Auth Wrapper ─── */
/* Dunkelblauer Background, helle Cards, blaue Akzente */
--gh-bg: #151923;
--gh-card: #1f2937;
--gh-text: #ffffff;
--gh-muted: #ffffff;
--gh-border: #5e6075;
--gh-primary: #274a97;
--gh-primary-2: #1d4ed8;
--gh-link: #3c5fb6;
--gh-danger: #d92d20;
--gh-shadow: 0 14px 34px rgba(2, 6, 23, 0.35);
--gh-radius: 5px;
--gh-focus: 0 0 0 4px rgba(37, 99, 235, 0.28);
}
/* Wir stylen nur innerhalb des Login-Bereichs, damit global nichts kaputtgeht */
.auth { .auth {
display: grid; display: grid;
place-items: center; place-items: center;
min-height: 81.5svh; min-height: 80vh;
padding: 34px 18px 60px; padding: 2.5rem 1.25rem 4rem;
background: var(--gh-bg); background: var(--bg-main);
} }
.auth__grid { .auth__grid {
display: grid; display: grid;
grid-template-columns: 1fr; /* statt 1.06fr 0.94fr */ grid-template-columns: 1fr;
justify-items: center; justify-items: center;
gap: 22px; gap: 1.5rem;
min-width: 1080px; width: min(480px, 100%);
max-width: 1080px;
margin: 0 auto; margin: 0 auto;
align-items: center; /* optional, aber passend zur Zentrierung */ align-items: center;
} }
/* /* ─── Side Layout (Account page) ─── */
* Layout-Varianten für Seiten, die mehrere .auth__card haben (z.B. account.php)
* Nutzung:
* - nebeneinander: <section class="auth__grid auth__card__side">
* - untereinander: <section class="auth__grid auth__card__stack">
*/
.auth__grid.auth__card__side { .auth__grid.auth__card__side {
grid-template-columns: max-content 1fr; grid-template-columns: max-content 1fr;
align-items: start; align-items: start;
justify-items: stretch; justify-items: stretch;
width: min(900px, 100%);
} }
.auth__grid.auth__card__side .auth__card { .auth__grid.auth__card__side .auth__card {
width: 100%; width: 100%;
} }
/* Bild-Card in Side-Ansicht: Card wird so groß wie das Bild (inkl. Padding), Bild bleibt IN der Card */
.auth__grid.auth__card__side .auth__card.auth__card__side__picture { .auth__grid.auth__card__side .auth__card.auth__card__side__picture {
display: inline-grid; display: inline-grid;
width: max-content; width: max-content;
justify-self: center; /* Card mittig in der linken Spalte */ justify-self: center;
padding: 12px; /* Abstand zwischen Rahmen und Bild */ padding: 12px;
overflow: hidden; /* Bild darf nicht über Radius/Rahmen hinauslaufen */ overflow: hidden;
place-items: center; /* Bild mittig in der Card */ place-items: center;
} }
/* Der normale auth__header ist ein Grid (Logo+Text). In der Bild-Card wollen wir nur "zentriert" */ .auth__grid.auth__card__side .auth__card.auth__card__side__picture .auth__header {
.auth__grid.auth__card__side .auth__card.auth__card__side__picture .auth__header{
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -76,10 +52,10 @@
} }
.auth__grid.auth__card__side .auth__card.auth__card__side__picture img { .auth__grid.auth__card__side .auth__card.auth__card__side__picture img {
display: block; /* entfernt Inline-Gap unter Bildern */ display: block;
max-width: none; /* Card richtet sich an echter Bildbreite aus */ max-width: none;
height: auto; height: auto;
/* runde Ecken kommen vom Container (overflow:hidden) */ border-radius: var(--radius-lg);
} }
.auth__grid.auth__card__stack { .auth__grid.auth__card__stack {
@ -88,26 +64,28 @@
justify-items: center; justify-items: center;
} }
/* ─── Card ─── */
.auth__card, .auth__card,
.auth__sideCard { .auth__sideCard {
width: min(520px, 100%); width: min(520px, 100%);
background: var(--gh-card); background: var(--bg-card);
/* border: 1px solid var(--gh-border); */ border: 1px solid var(--border-subtle);
border-radius: var(--gh-radius); border-radius: var(--radius-lg);
box-shadow: var(--gh-shadow); box-shadow: var(--shadow-md);
} }
.auth__card { .auth__card {
padding: 22px; padding: 1.75rem;
} }
/* ─── Card Header ─── */
.auth__header { .auth__header {
display: grid; display: grid;
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
column-gap: 14px; column-gap: 14px;
row-gap: 2px; row-gap: 2px;
align-items: center; align-items: center;
margin-bottom: 12px; margin-bottom: 1rem;
} }
.auth__logo { .auth__logo {
@ -119,42 +97,77 @@
.auth__title { .auth__title {
margin: 0; margin: 0;
font-size: 1.55rem; font-size: 1.45rem;
letter-spacing: 0.2px; font-weight: 700;
color: var(--gh-text); letter-spacing: -0.3px;
color: var(--text-primary);
} }
.auth__subtitle { .auth__subtitle {
margin: 0; margin: 0;
color: var(--gh-muted); color: var(--text-secondary);
font-size: 0.98rem; font-size: 0.95rem;
line-height: 1.4; line-height: 1.4;
} }
/* ─── Alerts ─── */
.auth__alert__error { .auth__alert__error {
margin: 12px 0 14px; margin: 0.75rem 0 1rem;
color: #ffffff; color: var(--text-invert);
background: var(--gh-danger); background: linear-gradient(135deg, var(--color-danger), #dc2626);
border-radius: 5px; border-radius: var(--radius-md);
padding: 10px 12px; padding: 0.75rem 1rem;
box-shadow: 0 8px 18px rgba(217, 45, 32, 0.18); font-size: 0.9rem;
font-weight: 500;
box-shadow: 0 4px 14px rgba(239, 68, 68, 0.2);
} }
.auth__alert__sucess { .auth__alert__sucess {
margin: 12px 0 14px; margin: 0.75rem 0 1rem;
color: #ffffff; color: var(--text-invert);
background: #558346; background: linear-gradient(135deg, #22c55e, #16a34a);
border-radius: 5px; border-radius: var(--radius-md);
padding: 10px 12px; padding: 0.75rem 1rem;
box-shadow: 0 8px 18px rgba(72, 142, 62, 0.18); font-size: 0.9rem;
font-weight: 500;
box-shadow: 0 4px 14px rgba(34, 197, 94, 0.2);
} }
.auth__alert {
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;
}
.auth__alert ul {
margin: 0;
padding-left: 1.25rem;
}
.auth__alert li {
margin: 0.25rem 0;
}
.auth__error {
margin: 0.75rem 0;
color: var(--color-danger);
background: var(--color-danger-soft);
border: 1px solid rgba(239, 68, 68, 0.2);
border-radius: var(--radius-md);
padding: 0.75rem 1rem;
font-size: 0.9rem;
}
/* ─── Form ─── */
.auth__form { .auth__form {
margin-top: 6px; margin-top: 0.5rem;
} }
.auth__field { .auth__field {
margin-top: 12px; margin-top: 1rem;
} }
.auth__search { .auth__search {
@ -163,151 +176,190 @@
.auth__field label { .auth__field label {
display: block; display: block;
margin: 0 0 6px; margin: 0 0 0.4rem;
font-size: 0.95rem; font-size: 0.88rem;
color: var(--gh-muted); font-weight: 500;
color: var(--text-secondary);
} }
.auth__field input[type="text"], .auth__field input[type="text"],
.auth__field input[type="password"], .auth__field input[type="password"],
.auth__field input[type="email"],
.auth__field input[type="file"] { .auth__field input[type="file"] {
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
padding: 12px 12px; padding: 0.75rem 0.9rem;
border: 1px solid var(--gh-border); border: 1px solid var(--border-default);
border-radius: 5px; border-radius: var(--radius-md);
background: #1e2537; background: var(--bg-input);
color: var(--gh-text); color: var(--text-primary);
font-family: var(--font-family);
font-size: 0.92rem;
outline: none; outline: none;
transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease; transition: border-color var(--transition-fast),
box-shadow var(--transition-fast),
background var(--transition-fast);
} }
.auth__field input[type="text"]:focus, .auth__field input[type="text"]:focus,
.auth__field input[type="password"]:focus, .auth__field input[type="password"]:focus,
.auth__field input[type="email"]:focus,
.auth__field input[type="file"]:focus { .auth__field input[type="file"]:focus {
border-color: rgba(37, 99, 235, 0.75); border-color: var(--color-primary);
box-shadow: var(--gh-focus); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
background: rgba(26, 34, 51, 0.8);
}
.auth__field input[type="text"]::placeholder,
.auth__field input[type="password"]::placeholder,
.auth__field input[type="email"]::placeholder {
color: var(--text-muted);
} }
.auth__field input[type="file"]::file-selector-button { .auth__field input[type="file"]::file-selector-button {
margin-right: 10px; margin-right: 10px;
padding: 10px 12px; padding: 0.6rem 1rem;
border: 0; border: 0;
border-radius: 5px; border-radius: var(--radius-md);
background: var(--gh-primary); background: var(--color-primary);
color: #ffffff; color: #ffffff;
font-weight: 750; font-weight: 600;
font-family: var(--font-family);
font-size: 0.85rem;
cursor: pointer; cursor: pointer;
transition: transform 120ms ease, filter 120ms ease; transition: background var(--transition-fast),
transform var(--transition-fast);
} }
.auth__field input[type="file"]::file-selector-button:hover { .auth__field input[type="file"]::file-selector-button:hover {
filter: brightness(1.02); background: var(--color-primary-hover);
transform: translateY(-1px); transform: translateY(-1px);
} }
.auth__field input[type="file"]::file-selector-button:active { .auth__field input[type="file"]::file-selector-button:active {
transform: translateY(0px); transform: translateY(0);
} }
/* ─── Actions ─── */
.auth__actions { .auth__actions {
margin-top: 14px; margin-top: 1.25rem;
} }
.auth__submit { .auth__submit {
width: 100%; width: 100%;
padding: 12px 14px; padding: 0.75rem 1rem;
border: 0; border: 0;
border-radius: 5px; border-radius: var(--radius-md);
background: var(--gh-primary); background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
color: #ffffff; color: #ffffff;
font-weight: 750; font-weight: 600;
font-family: var(--font-family);
font-size: 0.95rem;
letter-spacing: 0.2px; letter-spacing: 0.2px;
cursor: pointer; cursor: pointer;
transition: transform 120ms ease, filter 120ms ease; transition: transform var(--transition-fast),
} box-shadow var(--transition-fast),
opacity var(--transition-fast);
.auth__submit:hover { box-shadow: 0 4px 14px rgba(59, 130, 246, 0.25);
filter: brightness(1.02);
transform: translateY(-1px);
}
.auth__submit:active {
transform: translateY(0px);
}
.auth__links {
margin-top: 14px;
padding-top: 12px;
border-top: 1px dashed var(--gh-border);
}
.auth__muted {
margin: 8px 0 0;
color: var(--gh-muted);
}
.auth__muted a {
color: var(--gh-link);
text-decoration: none;
font-weight: 700;
}
.auth__muted a:hover {
text-decoration: underline;
}
.auth__sideCard {
padding: 18px;
background: var(--gh-card);
}
.auth__sideCard h3 {
margin: 0 0 10px;
font-size: 1.05rem;
color: var(--gh-text);
}
.auth__sideCard ul {
margin: 0;
padding-left: 18px;
color: var(--gh-text);
}
.auth__sideCard li {
margin: 8px 0;
color: var(--gh-text);
}
.auth__tip {
margin-top: 14px;
padding: 12px 12px;
border-radius: 5px;
background: rgba(37, 99, 235, 0.06);
border: 1px solid rgba(37, 99, 235, 0.16);
color: var(--gh-text);
}
.auth__submit {
transition: 0.2s ease;
} }
.auth__submit:hover { .auth__submit:hover {
transform: translateY(-2px); transform: translateY(-2px);
opacity: 0.9; box-shadow: 0 6px 20px rgba(59, 130, 246, 0.35);
} }
.auth__submit:active {
transform: translateY(0);
}
.auth__submit:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: 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);
}
.auth__submit--danger:hover {
box-shadow: 0 6px 20px rgba(239, 68, 68, 0.35);
}
/* ─── Links ─── */
.auth__links {
margin-top: 1.25rem;
padding-top: 1rem;
border-top: 1px solid var(--border-subtle);
}
.auth__muted {
margin: 0.5rem 0 0;
color: var(--text-secondary);
font-size: 0.9rem;
}
.auth__muted a {
color: var(--color-primary);
text-decoration: none;
font-weight: 600;
transition: color var(--transition-fast);
}
.auth__muted a:hover {
color: var(--color-primary-hover);
text-decoration: underline;
}
/* ─── Side Card ─── */
.auth__sideCard {
padding: 1.25rem;
background: var(--bg-card);
}
.auth__sideCard h3 {
margin: 0 0 0.75rem;
font-size: 1.05rem;
color: var(--text-primary);
}
.auth__sideCard ul {
margin: 0;
padding-left: 1.25rem;
color: var(--text-secondary);
}
.auth__sideCard li {
margin: 0.5rem 0;
color: var(--text-secondary);
}
/* ─── Tip Box ─── */
.auth__tip {
margin-top: 0.75rem;
padding: 0.7rem 0.9rem;
border-radius: var(--radius-md);
background: var(--color-primary-soft);
border: 1px solid rgba(59, 130, 246, 0.15);
color: var(--text-secondary);
font-size: 0.82rem;
line-height: 1.5;
}
/* ==========================================================
RESPONSIVE
========================================================== */
@media (max-width: 900px) { @media (max-width: 900px) {
.auth__grid { .auth__grid {
grid-template-columns: 1fr; width: min(480px, 100%);
} }
/* Side-Layout klappt auf Mobile automatisch auf 1 Spalte zusammen */
.auth__grid.auth__card__side { .auth__grid.auth__card__side {
grid-template-columns: 1fr; grid-template-columns: 1fr;
justify-items: center; justify-items: center;
width: min(480px, 100%);
} }
.auth__logo { .auth__logo {
@ -321,11 +373,11 @@
@media (max-width: 520px) { @media (max-width: 520px) {
.auth { .auth {
padding-top: 18px; padding-top: 1.5rem;
} }
.auth__card { .auth__card {
padding: 18px; padding: 1.25rem;
} }
.auth__header { .auth__header {
@ -336,4 +388,8 @@
width: 140px; width: 140px;
grid-row: auto; grid-row: auto;
} }
.auth__title {
font-size: 1.25rem;
}
} }

121
assets/css/productAdder.css
View File

@ -1,128 +1,147 @@
/* assets/css/productAdder.css /* ==========================================================
Dropdown-Styles fuer productAdder.php PRODUCT ADDER – Dropdown & Form Styles
*/ ========================================================== */
/* ─── Select Wrapper ─── */
.auth__select__wrap { .auth__select__wrap {
width: min(520px, 100%); width: min(520px, 100%);
display: grid; display: grid;
gap: 6px; gap: 0.4rem;
justify-self: center; justify-self: center;
margin-top: 12px; margin-top: 0.75rem;
} }
.auth__select__label { .auth__select__label {
font-size: 0.95rem; font-size: 0.88rem;
color: var(--gh-muted); font-weight: 500;
color: var(--text-secondary);
} }
.auth__select { .auth__select {
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
padding: 12px 40px 12px 12px; padding: 0.75rem 2.5rem 0.75rem 0.9rem;
border: 1px solid var(--gh-border); border: 1px solid var(--border-default);
border-radius: 5px; border-radius: var(--radius-md);
background-color: #1e2537; background-color: var(--bg-input);
color: var(--gh-text); color: var(--text-primary);
font-family: var(--font-family);
font-size: 0.92rem;
outline: none; outline: none;
appearance: none; appearance: none;
transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease; cursor: pointer;
transition: border-color var(--transition-fast),
box-shadow var(--transition-fast);
background-image: background-image:
linear-gradient(45deg, transparent 50%, #cbd5f5 50%), linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%),
linear-gradient(135deg, #cbd5f5 50%, transparent 50%), linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%);
linear-gradient(to right, #1e2537, #1e2537);
background-position: background-position:
calc(100% - 18px) calc(1em + 2px), calc(100% - 18px) calc(50% + 1px),
calc(100% - 13px) calc(1em + 2px), calc(100% - 13px) calc(50% + 1px);
100% 0; background-size: 5px 5px, 5px 5px;
background-size: 5px 5px, 5px 5px, 2.5em 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.auth__select:focus { .auth__select:focus {
border-color: rgba(37, 99, 235, 0.75); border-color: var(--color-primary);
box-shadow: var(--gh-focus); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
} }
.auth__select option { .auth__select option {
background: #1e2537; background: var(--bg-input);
color: var(--gh-text); color: var(--text-primary);
} }
/* ─── Product Adder Layout ─── */
.auth { .auth {
min-height: 100vh; min-height: 100vh;
display: grid; display: grid;
place-items: start center; place-items: start center;
padding: 32px 16px; padding: 2rem 1rem;
gap: 16px; gap: 1rem;
} }
.auth__grid { .auth__grid {
width: min(1100px, 100%); width: min(700px, 100%);
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 20px; gap: 1.25rem;
} }
.auth__card { .auth__card {
background: #1f2937; background: var(--bg-card);
border: 1px solid var(--gh-border); border: 1px solid var(--border-subtle);
border-radius: 5px; border-radius: var(--radius-lg);
padding: 18px; padding: 1.5rem;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); box-shadow: var(--shadow-md);
} }
.auth__header { .auth__header {
margin-bottom: 12px; margin-bottom: 0.75rem;
} }
.auth__title { .auth__title {
margin: 0; margin: 0;
font-size: 1.1rem; font-size: 1.15rem;
color: var(--gh-text); font-weight: 700;
color: var(--text-primary);
letter-spacing: -0.2px;
} }
.auth__form { .auth__form {
display: grid; display: grid;
gap: 8px; gap: 0.65rem;
margin-bottom: 12px; margin-bottom: 0.75rem;
} }
.auth__form label { .auth__form label {
font-size: 0.95rem; font-size: 0.88rem;
color: var(--gh-muted); font-weight: 500;
color: var(--text-secondary);
margin-top: 0.5rem;
} }
.auth__input { .auth__input {
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
padding: 10px 12px; padding: 0.7rem 0.9rem;
border: 1px solid var(--gh-border); border: 1px solid var(--border-default);
border-radius: 5px; border-radius: var(--radius-md);
background: #1e2537; background: var(--bg-input);
color: var(--gh-text); color: var(--text-primary);
font-family: var(--font-family);
font-size: 0.92rem;
outline: none; outline: none;
transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease; transition: border-color var(--transition-fast),
box-shadow var(--transition-fast);
} }
.auth__input:focus { .auth__input:focus {
border-color: rgba(37, 99, 235, 0.75); border-color: var(--color-primary);
box-shadow: var(--gh-focus); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
} }
.auth__input::placeholder { .auth__input::placeholder {
color: var(--gh-muted); color: var(--text-muted);
}
textarea.auth__input {
min-height: 80px;
resize: vertical;
line-height: 1.5;
} }
.auth__card .auth__form:last-child { .auth__card .auth__form:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
/* ─── Responsive ─── */
@media (max-width: 720px) { @media (max-width: 720px) {
.auth { .auth {
padding: 24px 12px; padding: 1.5rem 0.75rem;
} }
.auth__card { .auth__card {
padding: 16px; padding: 1.25rem;
} }
} }

239
assets/css/productpage.css
View File

@ -1,24 +1,33 @@
/* Gesamter Bereich */ /* ==========================================================
PRODUCT PAGE – Detailed product view & shop offers
========================================================== */
/* ─── Wrapper ─── */
.product-wrapper { .product-wrapper {
max-width: 1200px; max-width: 1200px;
margin: 60px auto; margin: 3rem auto;
padding: 0 20px; padding: 0 1.5rem;
display: flex; display: flex;
gap: 60px; gap: 3.5rem;
} }
/* LINKER BEREICH */ /* ─── Left Column (Image) ─── */
.product-left { .product-left {
flex: 1; flex: 1;
} }
.product-image-box { .product-image-box {
background: #ffffff; background: rgba(255, 255, 255, 0.95);
padding: 40px; padding: 2.5rem;
border-radius: 14px; border-radius: var(--radius-xl);
box-shadow: 0 8px 25px rgba(0,0,0,0.08); border: 1px solid var(--border-subtle);
box-shadow: var(--shadow-md);
text-align: center; text-align: center;
transition: box-shadow var(--transition-smooth);
}
.product-image-box:hover {
box-shadow: var(--shadow-lg);
} }
.product-image-box img { .product-image-box img {
@ -27,173 +36,241 @@
object-fit: contain; object-fit: contain;
} }
/* RECHTER BEREICH */ /* ─── Right Column (Details) ─── */
.product-right { .product-right {
flex: 1.2; flex: 1.2;
} }
/* Produkttitel */
.product-title { .product-title {
font-size: 32px; font-size: 1.85rem;
color: white; color: var(--text-primary);
font-weight: 600; font-weight: 700;
margin-bottom: 30px; margin-bottom: 1.5rem;
border-bottom: 2px solid #eaeaea; padding-bottom: 1rem;
padding-bottom: 15px; border-bottom: 1px solid var(--border-subtle);
letter-spacing: -0.5px;
line-height: 1.3;
} }
/* Beschreibung */
.product-desc { .product-desc {
font-size: 23px; font-size: 1rem;
line-height: 1.7; line-height: 1.7;
color: #ffffff; color: var(--text-secondary);
margin-bottom: 15px; margin-bottom: 1.5rem;
} }
/* Spezifikationen */
.product-specs { .product-specs {
display: flex; display: flex;
color: #ffffff; color: var(--text-primary);
flex-direction: column; flex-direction: column;
gap: 12px; gap: 0.6rem;
} }
S
/* Einzelne Zeile */ .product-specs p {
padding: 0.65rem 1rem;
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
font-size: 0.92rem;
transition: background var(--transition-fast);
}
.product-specs p:hover {
background: rgba(26, 35, 50, 0.9);
}
.product-specs p strong {
color: var(--text-secondary);
font-weight: 500;
margin-right: 0.5rem;
}
/* ─── Spec Rows (alternative layout) ─── */
.spec-row { .spec-row {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 12px 16px; padding: 0.75rem 1rem;
background: #f9f9f9; background: var(--bg-surface);
border-radius: 8px; border: 1px solid var(--border-subtle);
transition: background 0.2s ease; border-radius: var(--radius-md);
transition: background var(--transition-fast);
} }
.spec-row:hover { .spec-row:hover {
background: #f0f0f0; background: rgba(26, 35, 50, 0.9);
} }
/* Name links */
.spec-name { .spec-name {
font-weight: 500; font-weight: 500;
color: #444; color: var(--text-secondary);
} }
/* Wert rechts */
.spec-value { .spec-value {
font-weight: 600; font-weight: 600;
color: #111; color: var(--text-primary);
} }
/* Responsive */ /* ─── Responsive Product Page ─── */
@media (max-width: 900px) { @media (max-width: 900px) {
.product-wrapper { .product-wrapper {
flex-direction: column; flex-direction: column;
gap: 2rem;
margin: 2rem auto;
}
.product-title {
font-size: 1.5rem;
} }
} }
/* ==========================================================
/********* SHOP OFFERS *************/ SHOP OFFERS
========================================================== */
.shop-offers { .shop-offers {
margin: 50px 0 80px 0; /* unten mehr Abstand */ max-width: 1200px;
margin: 0 auto 4rem;
padding: 0 1.5rem;
display: flex; display: flex;
color: white;
flex-direction: column; flex-direction: column;
gap: 14px; /* etwas enger */ gap: 0.75rem;
} }
.shop-line { .shop-line {
display: flex; display: grid;
grid-template-columns: 250px 1fr auto;
align-items: center; align-items: center;
justify-content: space-between; gap: 1.5rem;
background: var(--bg-card);
background: #1f2a3a; border: 1px solid var(--border-subtle);
border: 1px solid #2f3c52; border-radius: var(--radius-lg);
border-radius: 12px; padding: 1rem 1.5rem;
transition: border-color var(--transition-fast),
padding: 12px 20px; /* vorher 20px 28px → jetzt kompakter */ transform var(--transition-fast),
min-height: 70px; /* feste, schlanke Höhe */ box-shadow var(--transition-fast);
} }
.shop-line:hover { .shop-line:hover {
background: #243248; border-color: var(--border-strong);
transform: translateY(-3px); transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0,0,0,0.25); box-shadow: var(--shadow-md);
} }
.shop-left { .shop-left {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 28px; /* vorher ~18px */ gap: 1rem;
} }
.shop-logo { .shop-logo {
display: flex; display: flex;
align-items: center; align-items: center;
height: 40px; /* feste Höhe */ height: 40px;
flex-shrink: 0;
} }
.shop-logo img { .shop-logo img {
max-height: 40px; /* Logo passt sich an */ max-height: 36px;
max-width: 100px; /* verhindert Überstehen */ max-width: 90px;
object-fit: contain; object-fit: contain;
border-radius: var(--radius-sm);
} }
.shop-name { .shop-name {
color: white;
font-weight: 600; font-weight: 600;
font-size: 16px; font-size: 0.95rem;
text-decoration: none;
} }
.shop-name:hover { .shop-name a {
text-decoration: underline; color: var(--text-primary);
text-decoration: none;
transition: color var(--transition-fast);
}
.shop-name a:hover {
color: var(--color-primary);
} }
.shop-middle { .shop-middle {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 55px; /* vorher ~35px → jetzt deutlich mehr Abstand */ gap: 2rem;
font-size: 14px; font-size: 0.88rem;
color: #cbd5e1; color: var(--text-secondary);
} }
.shop-shipping { .shop-shipping {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 4px; gap: 2px;
line-height: 1.4;
} }
.shop-stock { .shop-stock {
font-weight: 500; font-weight: 500;
display: flex; display: inline-flex;
align-items: center; align-items: center;
gap: 6px; gap: 6px;
padding: 0.3rem 0.75rem;
border-radius: var(--radius-full);
font-size: 0.82rem;
}
.shop-stock.in-stock {
color: var(--color-accent);
background: var(--color-accent-soft);
} }
/* Grün */
.shop-stock.in-stock::before { .shop-stock.in-stock::before {
content: "✔"; content: "✔";
color: #22c55e;
} }
/* Rot */ .shop-stock.out-stock {
color: var(--color-danger);
background: var(--color-danger-soft);
}
.shop-stock.out-stock::before { .shop-stock.out-stock::before {
content: "✖"; content: "✖";
color: #ef4444;
} }
.shop-price { .shop-price {
margin-left: auto; font-size: 1.35rem;
font-size: 18px; /* kleiner als vorher */
font-weight: 700; font-weight: 700;
color: #4ade80; color: var(--color-accent);
white-space: nowrap;
letter-spacing: -0.3px;
} }
.no-shop { .no-shop {
background: #1f2a3a; background: var(--bg-card);
padding: 20px; border: 1px solid var(--border-subtle);
border-radius: 12px; padding: 2rem;
color: #cbd5e1; border-radius: var(--radius-lg);
color: var(--text-secondary);
text-align: center; text-align: center;
font-size: 0.95rem;
}
/* ─── Responsive Shop Offers ─── */
@media (max-width: 900px) {
.shop-line {
grid-template-columns: 1fr;
gap: 0.75rem;
padding: 1rem;
}
.shop-middle {
flex-wrap: wrap;
gap: 0.75rem;
}
.shop-price {
font-size: 1.2rem;
}
}
@media (max-width: 600px) {
.shop-offers {
padding: 0 1rem;
}
} }

8
catbar.php
View File

@ -1,12 +1,4 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/css/catbar.css">
</head>
<nav class="home-nav" aria-label="Homenavigation"> <nav class="home-nav" aria-label="Homenavigation">
<div class="home-nav__inner container"> <div class="home-nav__inner container">
<ul class="home-nav__list"> <ul class="home-nav__list">

8
compcards.php
View File

@ -81,11 +81,3 @@ $categories = [
<?php endif; ?> <?php endif; ?>
<?php endforeach; ?> <?php endforeach; ?>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/css/compcard.css">
</head>

25
header.php
View File

@ -1,14 +1,18 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="de">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/style.css"> <link rel="stylesheet" href="/style.css">
<link rel="stylesheet" href="assets/css/login.css"> <link rel="stylesheet" href="/assets/css/login.css">
<link rel="stylesheet" href="/assets/css/catbar.css">
<link rel="stylesheet" href="/assets/css/compcard.css">
<link rel="stylesheet" href="/assets/css/productpage.css">
<link rel="stylesheet" href="/assets/css/productAdder.css">
<link rel="icon" href="assets/images/favicon.ico" sizes="any"> <link rel="icon" href="/assets/images/favicon.ico" sizes="any">
<title>Geizkragen</title> <title>Geizkragen</title>
</head> </head>
@ -17,12 +21,12 @@
<header class="header" id="header"> <header class="header" id="header">
<nav class="nav" aria-label="Hauptnavigation"> <nav class="nav" aria-label="Hauptnavigation">
<a class="nav__logoLink" href="index.php"> <a class="nav__logoLink" href="index.php">
<img class="nav__logo" src="/assets/images/logoText.png" alt="Geizhals" width="150"> <img class="nav__logo" src="/assets/images/logoText.png" alt="Geizkragen" width="150">
</a> </a>
<form class="nav__searchForm auth__form auth__search" action="login.php" method="POST" autocomplete="off"> <form class="nav__searchForm" action="index.php" method="GET" autocomplete="off">
<div class="nav__searchField auth__field"> <div class="nav__searchField">
<input class="nav__searchInput" type="text" id="search" name="Suche" inputmode="text" required> <input class="nav__searchInput" type="text" id="search" name="search" placeholder="Produkte suchen…" inputmode="text">
</div> </div>
</form> </form>
@ -32,29 +36,24 @@
<li class="nav__item"> <li class="nav__item">
<a href="index.php" class="nav__link">Home</a> <a href="index.php" class="nav__link">Home</a>
</li> </li>
</ul> </ul>
<!-- Close button -->
<div class="nav__close" id="nav-close"> <div class="nav__close" id="nav-close">
<i class="ri-close-line"></i> <i class="ri-close-line"></i>
</div> </div>
</div> </div>
<div class="nav__actions"> <div class="nav__actions">
<!-- Login link -->
<a class="nav__login nav__wishlist" href="wunschliste.php" aria-label="Wunschliste"> <a class="nav__login nav__wishlist" href="wunschliste.php" aria-label="Wunschliste">
<svg class="icon icon-user" viewBox="0 0 24 24" aria-hidden="true"> <svg class="icon icon-user" viewBox="0 0 24 24" aria-hidden="true">
<path d="M8 6.00067L21 6.00139M8 12.0007L21 12.0015M8 18.0007L21 18.0015M3.5 6H3.51M3.5 12H3.51M3.5 18H3.51M4 6C4 6.27614 3.77614 6.5 3.5 6.5C3.22386 6.5 3 6.27614 3 6C3 5.72386 3.22386 5.5 3.5 5.5C3.77614 5.5 4 5.72386 4 6ZM4 12C4 12.2761 3.77614 12.5 3.5 12.5C3.22386 12.5 3 12.2761 3 12C3 11.7239 3.22386 11.5 3.5 11.5C3.77614 11.5 4 11.7239 4 12ZM4 18C4 18.2761 3.77614 18.5 3.5 18.5C3.22386 18.5 3 18.2761 3 18C3 17.7239 3.22386 17.5 3.5 17.5C3.77614 17.5 4 17.7239 4 18Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M8 6.00067L21 6.00139M8 12.0007L21 12.0015M8 18.0007L21 18.0015M3.5 6H3.51M3.5 12H3.51M3.5 18H3.51M4 6C4 6.27614 3.77614 6.5 3.5 6.5C3.22386 6.5 3 6.27614 3 6C3 5.72386 3.22386 5.5 3.5 5.5C3.77614 5.5 4 5.72386 4 6ZM4 12C4 12.2761 3.77614 12.5 3.5 12.5C3.22386 12.5 3 12.2761 3 12C3 11.7239 3.22386 11.5 3.5 11.5C3.77614 11.5 4 11.7239 4 12ZM4 18C4 18.2761 3.77614 18.5 3.5 18.5C3.22386 18.5 3 18.2761 3 18C3 17.7239 3.22386 17.5 3.5 17.5C3.77614 17.5 4 17.7239 4 18Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg> </svg>
</a> </a>
<a class="nav__login" href="account.php" aria-label="Login"> <a class="nav__login" href="account.php" aria-label="Account">
<svg class="icon icon-user" viewBox="0 0 24 24" aria-hidden="true"> <svg class="icon icon-user" viewBox="0 0 24 24" aria-hidden="true">
<path d="M4 22C4 17.5817 7.58172 14 12 14C16.4183 14 20 17.5817 20 22H18C18 18.6863 15.3137 16 12 16C8.68629 16 6 18.6863 6 22H4ZM12 13C8.685 13 6 10.315 6 7C6 3.685 8.685 1 12 1C15.315 1 18 3.685 18 7C18 10.315 15.315 13 12 13ZM12 11C14.21 11 16 9.21 16 7C16 4.79 14.21 3 12 3C9.79 3 8 4.79 8 7C8 9.21 9.79 11 12 11Z"/> <path d="M4 22C4 17.5817 7.58172 14 12 14C16.4183 14 20 17.5817 20 22H18C18 18.6863 15.3137 16 12 16C8.68629 16 6 18.6863 6 22H4ZM12 13C8.685 13 6 10.315 6 7C6 3.685 8.685 1 12 1C15.315 1 18 3.685 18 7C18 10.315 15.315 13 12 13ZM12 11C14.21 11 16 9.21 16 7C16 4.79 14.21 3 12 3C9.79 3 8 4.79 8 7C8 9.21 9.79 11 12 11Z"/>
</svg> </svg>
</a> </a>
<!-- Toggle button -->
<div class="nav__toggle" id="nav-toggle"> <div class="nav__toggle" id="nav-toggle">
<i class="ri-menu-line"></i> <i class="ri-menu-line"></i>
</div> </div>

1
login.php
View File

@ -115,7 +115,6 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST')
include 'header.php'; include 'header.php';
?> ?>
<link rel="stylesheet" href="assets/css/login.css">
<main class="auth" role="main"> <main class="auth" role="main">
<section class="auth__grid" aria-label="Login Bereich"> <section class="auth__grid" aria-label="Login Bereich">

12
productpage.php
View File

@ -239,8 +239,8 @@ $productId = isset($_GET['id']) ? (int)$_GET['id'] : 0;
<div class="shop-line"> <div class="shop-line">
<div class =shop-left> <div class="shop-left">
<div class ="shop-logo"> <div class="shop-logo">
<img src="<?= isset($shop['logoPath']) ? $shop['logoPath'] : 'assets/images/placeholder.png' ?>" <img src="<?= isset($shop['logoPath']) ? $shop['logoPath'] : 'assets/images/placeholder.png' ?>"
alt ="Kein Logo gefunden" > alt ="Kein Logo gefunden" >
</div> </div>
@ -268,7 +268,7 @@ $productId = isset($_GET['id']) ? (int)$_GET['id'] : 0;
<?php endforeach; ?> <?php endforeach; ?>
<?php else: ?> <?php else: ?>
<div class ="no-shop"> <div class="no-shop">
<p>Keine Shops bieten dieses Produkt an.</p> <p>Keine Shops bieten dieses Produkt an.</p>
</div> </div>
<?php endif; ?> <?php endif; ?>
@ -281,11 +281,5 @@ $productId = isset($_GET['id']) ? (int)$_GET['id'] : 0;
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/css/productpage.css">
</head>
<?php include 'footer.php'; ?> <?php include 'footer.php'; ?>

1
register.php
View File

@ -155,7 +155,6 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST')
include 'header.php'; include 'header.php';
?> ?>
<link rel="stylesheet" href="assets/css/login.css">
<main class="auth" role="main"> <main class="auth" role="main">
<section class="auth__grid" aria-label="Registrierung Bereich"> <section class="auth__grid" aria-label="Registrierung Bereich">

370
style.css
View File

@ -1,3 +1,10 @@
/* ==========================================================
GEIZKRAGEN – DESIGN SYSTEM
Modern Dark Theme mit Inter Font
========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
/* ========================================================== /* ==========================================================
RESET & BASIS RESET & BASIS
========================================================== */ ========================================================== */
@ -10,55 +17,94 @@
} }
:root { :root {
--bg-main: #151923; /* ─── Farben ─── */
--bg-card: #ffffff; --bg-main: #0c1017;
--bg-header: #1f2937; --bg-card: #151c28;
--bg-surface: #1a2332;
--bg-header: #111827;
--bg-input: #1a2233;
--color-primary: #2563eb; --color-primary: #3b82f6;
--color-primary-hover: #1d4ed8; --color-primary-hover:#2563eb;
--color-primary-soft: rgba(59, 130, 246, 0.12);
--color-accent: #10b981; --color-accent: #10b981;
--color-accent-soft: rgba(16, 185, 129, 0.12);
--color-danger: #ef4444;
--color-danger-soft: rgba(239, 68, 68, 0.12);
--color-warning: #f59e0b;
--color-success: #22c55e;
--text-main: #151c2e; --text-primary: #f1f5f9;
--text-muted: #6b7280; --text-secondary: #94a3b8;
--text-muted: #64748b;
--text-invert: #ffffff; --text-invert: #ffffff;
--border-color: #e5e7eb; --border-subtle: rgba(255, 255, 255, 0.06);
--border-default: rgba(255, 255, 255, 0.1);
--border-strong: rgba(255, 255, 255, 0.15);
/* ─── Radii ─── */
--radius-sm: 6px; --radius-sm: 6px;
--radius-md: 10px; --radius-md: 10px;
--radius-lg: 16px; --radius-lg: 14px;
--radius-xl: 20px;
--radius-full: 9999px;
--shadow-sm: 0 2px 6px rgba(0,0,0,0.06); /* ─── Schatten ─── */
--shadow-md: 0 6px 20px rgba(0,0,0,0.08); --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);
/* ─── Transitions ─── */
--transition-fast: 150ms ease; --transition-fast: 150ms ease;
--transition-normal: 250ms ease; --transition-normal: 250ms ease;
--transition-smooth: 350ms cubic-bezier(0.4, 0, 0.2, 1);
/* Gutter des Standard-Containers (für Navbar-Logo-Offset genutzt) */ /* ─── Spacing ─── */
--nav-gutter: 1.5rem; --nav-gutter: 1.5rem;
/* ─── Font ─── */
--font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
html {
scroll-behavior: smooth;
} }
body { body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", font-family: var(--font-family);
Roboto, "Helvetica Neue", Arial, sans-serif; background: var(--bg-main);
background: var(--bg-main) !important; color: var(--text-primary);
color: var(--text-main) !important; line-height: 1.55;
line-height: 1.45;
/* Sticky-Footer Basis: Inhalt wächst, Footer wird nach unten gedrückt */
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} }
/* Optional: falls ihr <main> nutzt, wächst es im Flex-Layout */ main {
main
{
flex: 1 0 auto; flex: 1 0 auto;
} }
a {
color: var(--color-primary);
text-decoration: none;
transition: color var(--transition-fast);
}
a:hover {
color: var(--color-primary-hover);
}
::selection {
background: rgba(59, 130, 246, 0.3);
color: var(--text-invert);
}
/* ========================================================== /* ==========================================================
CONTAINER (Wrapper) CONTAINER
========================================================== */ ========================================================== */
.container { .container {
max-width: 1400px; max-width: 1400px;
@ -73,35 +119,34 @@ main
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 1000; z-index: 1000;
background: var(--bg-header); background: rgba(17, 24, 39, 0.85);
box-shadow: 0 2px 10px rgba(0,0,0,0.15); backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-bottom: 1px solid var(--border-subtle);
padding: 0; padding: 0;
} }
/* Entferne die Padding-Änderung im Header nicht global auf .container.
(Das hat die Ausrichtung der rechten Elemente kaputt gemacht.) */
/* .header .container { padding-inline: 0; } */
/* ========================================================== /* ==========================================================
NAVBAR NAVBAR
========================================================== */ ========================================================== */
.nav { .nav {
min-height: 56px; min-height: 60px;
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
background: var(--bg-header);
/* Suchfeld kann damit exakt zur Header-Mitte positioniert werden */
position: relative; position: relative;
} }
/* Logo wirklich ganz links (ohne Tricks) */
.nav__logoLink { .nav__logoLink {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
padding-left: 0; padding-left: 0;
margin-left: 0; /* <-- wichtig: kein negatives Margin */ margin-left: 0;
transition: opacity var(--transition-fast);
}
.nav__logoLink:hover {
opacity: 0.85;
} }
.nav__logo { .nav__logo {
@ -111,7 +156,6 @@ main
height: auto; height: auto;
} }
/* Rechter Bereich: nimmt den restlichen Platz ein und richtet Inhalt rechts aus */
.nav__inner { .nav__inner {
margin-right: 0; margin-right: 0;
flex: 1; flex: 1;
@ -122,12 +166,10 @@ main
gap: 1.25rem; gap: 1.25rem;
} }
/* Damit Menü + Icons wirklich bis ganz rechts können (trotz container max-width) */
.nav__inner.container { .nav__inner.container {
margin-left: auto; margin-left: auto;
} }
/* Desktop: Menü rechts */
.nav__menu { .nav__menu {
display: flex; display: flex;
align-items: center; align-items: center;
@ -135,29 +177,37 @@ main
.nav__list { .nav__list {
display: flex; display: flex;
gap: 2rem; gap: 0.25rem;
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.nav__link { .nav__link {
color: rgba(255,255,255,0.85); color: var(--text-secondary);
font-size: 0.95rem; font-size: 0.9rem;
font-weight: 500; font-weight: 500;
text-decoration: none; text-decoration: none;
transition: color var(--transition-normal); padding: 0.5rem 1rem;
border-radius: var(--radius-md);
transition: color var(--transition-fast), background var(--transition-fast);
} }
.nav__link:hover { .nav__link:hover {
color: var(--text-invert); color: var(--text-invert);
background: rgba(255, 255, 255, 0.06);
} }
/* Action Icons rechts */ .nav__link.active {
color: var(--color-primary);
background: var(--color-primary-soft);
}
/* ─── Nav Actions ─── */
.nav__actions { .nav__actions {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 1.2rem; gap: 0.35rem;
} }
.nav__search, .nav__search,
@ -165,20 +215,29 @@ main
.nav__toggle, .nav__toggle,
.nav__close { .nav__close {
font-size: 1.3rem; font-size: 1.3rem;
color: var(--text-invert); color: var(--text-secondary);
cursor: pointer; cursor: pointer;
transition: color var(--transition-normal); transition: color var(--transition-fast), background var(--transition-fast);
padding: 0.45rem;
border-radius: var(--radius-md);
display: inline-flex;
align-items: center;
justify-content: center;
} }
.nav__search:hover, .nav__search:hover,
.nav__login:hover { .nav__login:hover {
color: var(--color-primary); color: var(--text-invert);
background: rgba(255, 255, 255, 0.08);
}
.nav__wishlist {
color: var(--text-secondary);
} }
/* Wunschliste-Icon immer weiß (SVG nutzt currentColor) */
.nav__wishlist,
.nav__wishlist:hover { .nav__wishlist:hover {
color: var(--text-invert); color: var(--text-invert);
background: rgba(255, 255, 255, 0.08);
} }
/* ========================================================== /* ==========================================================
@ -196,24 +255,24 @@ main
MOBILE NAV MOBILE NAV
========================================================== */ ========================================================== */
@media (max-width: 900px) { @media (max-width: 900px) {
/* Logo bleibt links, Container rechts (Toggle) */
.nav__toggle { .nav__toggle {
display: block; display: flex;
} }
.nav__menu { .nav__menu {
position: fixed; position: fixed;
top: 0; top: 0;
right: -100%; right: -100%;
width: 280px; width: 300px;
height: 100%; height: 100%;
background: #111827; background: var(--bg-header);
padding: 4rem 2rem; border-left: 1px solid var(--border-subtle);
transition: right 300ms ease; padding: 5rem 2rem 2rem;
transition: right 300ms 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;
z-index: 1001;
} }
.nav__menu.show-menu { .nav__menu.show-menu {
@ -222,19 +281,32 @@ main
.nav__list { .nav__list {
flex-direction: column; flex-direction: column;
gap: 1.5rem; gap: 0.5rem;
width: 100%;
} }
.nav__link { .nav__link {
font-size: 1.05rem; font-size: 1.05rem;
color: #e5e7eb; color: var(--text-secondary);
display: block;
padding: 0.75rem 1rem;
border-radius: var(--radius-md);
}
.nav__link:hover {
background: rgba(255, 255, 255, 0.06);
} }
.nav__close { .nav__close {
display: block; display: flex;
position: absolute; position: absolute;
top: 1.2rem; top: 1.2rem;
right: 1.2rem; right: 1.2rem;
color: var(--text-secondary);
}
.nav__close:hover {
color: var(--text-invert);
} }
} }
@ -246,17 +318,13 @@ main
left: 50%; left: 50%;
top: 50%; top: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: min(500px, calc(100% - 520px));
/* verhindert, dass das Eingabefeld auf Desktop zu breit wird */
width: min(520px, calc(100% - 520px));
z-index: 1; z-index: 1;
} }
/* Login-Styles (assets/css/login.css) sollen im Header keine vertikalen Abstände reinbringen */
.nav__searchForm.auth__form, .nav__searchForm.auth__form,
.nav__searchForm .auth__field, .nav__searchForm .auth__field,
.nav__searchForm.auth__search { .nav__searchForm.auth__search {
@ -271,26 +339,38 @@ main
.nav__searchInput { .nav__searchInput {
width: 100%; width: 100%;
height: 40px; height: 40px;
padding: 0 12px; padding: 0 16px;
border-radius: 10px; border-radius: var(--radius-full);
border: 1px solid var(--border-default);
background: rgba(255, 255, 255, 0.05);
color: var(--text-primary);
font-size: 0.9rem;
font-family: var(--font-family);
outline: none;
transition: border-color var(--transition-fast),
background var(--transition-fast),
box-shadow var(--transition-fast);
}
.nav__searchInput::placeholder {
color: var(--text-muted);
}
.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);
} }
@media (max-width: 900px) { @media (max-width: 900px) {
/* Auf Mobile würde das fix zentrierte Feld dem Burger-Menü in die Quere kommen */
.nav__searchForm { .nav__searchForm {
display: none; display: none;
} }
} }
/* ========================================================== /* ==========================================================
LAYOUT LAYOUT (Grid mit Sidebar)
========================================================== */ ========================================================== */
/*
WICHTIG:
`.container` ist jetzt nur noch ein Wrapper (max-width/padding).
Das Grid-Layout liegt in `.layout`, damit die Navbar (`.nav.container`)
nicht versehentlich zu einem Grid wird.
*/
.layout { .layout {
margin: 2rem auto; margin: 2rem auto;
padding: 0 2rem; padding: 0 2rem;
@ -304,14 +384,17 @@ main
========================================================== */ ========================================================== */
.sidebar { .sidebar {
background: var(--bg-card); background: var(--bg-card);
border-radius: var(--radius-md); border: 1px solid var(--border-subtle);
padding: 1.2rem; border-radius: var(--radius-lg);
padding: 1.25rem;
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
} }
.sidebar h3 { .sidebar h3 {
font-size: 1rem; font-size: 1rem;
font-weight: 600;
margin-bottom: 1rem; margin-bottom: 1rem;
color: var(--text-primary);
} }
.filter-group { .filter-group {
@ -322,16 +405,27 @@ main
display: block; display: block;
font-size: 0.85rem; font-size: 0.85rem;
color: var(--text-muted); color: var(--text-muted);
margin-bottom: 0.3rem; margin-bottom: 0.35rem;
} }
.filter-group input, .filter-group input,
.filter-group select { .filter-group select {
width: 100%; width: 100%;
padding: 0.45rem 0.6rem; padding: 0.5rem 0.65rem;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
border: 1px solid var(--border-color); border: 1px solid var(--border-default);
background: var(--bg-input);
color: var(--text-primary);
font-size: 0.9rem; font-size: 0.9rem;
font-family: var(--font-family);
transition: border-color var(--transition-fast);
}
.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);
} }
/* ========================================================== /* ==========================================================
@ -344,26 +438,29 @@ main
} }
/* ========================================================== /* ==========================================================
PRODUCT CARD PRODUCT CARD (global)
========================================================== */ ========================================================== */
.product-card { .product-card {
background: var(--bg-card); background: var(--bg-card);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
transition: transform var(--transition-normal), transition: transform var(--transition-smooth),
box-shadow var(--transition-normal); box-shadow var(--transition-smooth),
border-color var(--transition-smooth);
} }
.product-card:hover { .product-card:hover {
transform: translateY(-4px); transform: translateY(-6px);
box-shadow: var(--shadow-md); box-shadow: var(--shadow-md);
border-color: var(--border-strong);
} }
.product-image { .product-image {
height: 180px; height: 180px;
background: #f1f5f9; background: var(--bg-surface);
border-top-left-radius: var(--radius-lg); border-top-left-radius: var(--radius-lg);
border-top-right-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg);
display: flex; display: flex;
@ -383,6 +480,7 @@ main
.product-title { .product-title {
font-size: 0.95rem; font-size: 0.95rem;
font-weight: 600; font-weight: 600;
color: var(--text-primary);
} }
.product-meta { .product-meta {
@ -403,52 +501,89 @@ main
gap: 0.5rem; gap: 0.5rem;
} }
/* ==========================================================
BUTTONS
========================================================== */
.btn { .btn {
flex: 1; flex: 1;
padding: 0.5rem; padding: 0.55rem 1rem;
border-radius: var(--radius-sm); border-radius: var(--radius-md);
font-size: 0.85rem; font-size: 0.85rem;
font-weight: 500;
font-family: var(--font-family);
cursor: pointer; cursor: pointer;
border: none; border: none;
transition: background var(--transition-fast); transition: background var(--transition-fast),
transform var(--transition-fast),
box-shadow var(--transition-fast);
}
.btn:hover {
transform: translateY(-1px);
}
.btn:active {
transform: translateY(0);
} }
.btn-primary { .btn-primary {
background: var(--color-primary); background: var(--color-primary);
color: #fff; color: #fff;
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
} }
.btn-primary:hover { .btn-primary:hover {
background: var(--color-primary-hover); background: var(--color-primary-hover);
box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35);
} }
.btn-secondary { .btn-secondary {
background: #f3f4f6; background: rgba(255, 255, 255, 0.06);
color: var(--text-main); color: var(--text-primary);
border: 1px solid var(--border-default);
} }
.btn-secondary:hover { .btn-secondary:hover {
background: #e5e7eb; background: rgba(255, 255, 255, 0.1);
border-color: var(--border-strong);
}
.btn-danger {
background: var(--color-danger);
color: #fff;
box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25);
}
.btn-danger:hover {
background: #dc2626;
box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35);
} }
/* ========================================================== /* ==========================================================
BADGES BADGES
========================================================== */ ========================================================== */
.badge { .badge {
display: inline-block; display: inline-flex;
padding: 0.2rem 0.5rem; align-items: center;
border-radius: var(--radius-sm); padding: 0.2rem 0.6rem;
border-radius: var(--radius-full);
font-size: 0.7rem; font-size: 0.7rem;
font-weight: 600; font-weight: 600;
letter-spacing: 0.3px;
} }
.badge-green { .badge-green {
background: #d1fae5; background: var(--color-accent-soft);
color: #065f46; color: var(--color-accent);
}
.badge-red {
background: var(--color-danger-soft);
color: var(--color-danger);
} }
/* ========================================================== /* ==========================================================
RESPONSIVE RESPONSIVE LAYOUT
========================================================== */ ========================================================== */
@media (max-width: 900px) { @media (max-width: 900px) {
.layout { .layout {
@ -460,26 +595,28 @@ main
} }
} }
/* ==========================================================
ICONS
========================================================== */
.icon-user { .icon-user {
width: 24px; width: 22px;
height: 24px; height: 22px;
fill: currentColor; /* passt sich Textfarbe an */ fill: currentColor;
} }
/* ========================================================== /* ==========================================================
FOOTER FOOTER
========================================================== */ ========================================================== */
.footer { .footer {
/* Entfernt das alte spacing und macht den Footer 'sticky' */
margin-top: auto; margin-top: auto;
background: rgba(17, 24, 39, 0.85);
background: var(--bg-header); backdrop-filter: blur(20px) saturate(180%);
color: rgba(255, 255, 255, 0.85); -webkit-backdrop-filter: blur(20px) saturate(180%);
border-top: 1px solid rgba(255, 255, 255, 0.08); border-top: 1px solid var(--border-subtle);
} }
.footer .container { .footer .container {
padding-block: 1.25rem; padding-block: 1.5rem;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@ -488,36 +625,37 @@ main
.footer p { .footer p {
margin: 0; margin: 0;
font-size: 0.9rem; font-size: 0.85rem;
color: var(--text-muted);
} }
.footer__nav { .footer__nav {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 1rem; gap: 1.5rem;
} }
.footer__nav a { .footer__nav a {
color: rgba(255, 255, 255, 0.85); color: var(--text-secondary);
text-decoration: none; text-decoration: none;
font-size: 0.9rem; font-size: 0.85rem;
font-weight: 500; font-weight: 500;
transition: color var(--transition-normal), padding: 0.35rem 0.75rem;
text-decoration-color var(--transition-normal); border-radius: var(--radius-sm);
text-decoration-thickness: 2px; transition: color var(--transition-fast),
text-underline-offset: 4px; background var(--transition-fast);
text-decoration-color: transparent;
} }
.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);
text-decoration-color: rgba(255, 255, 255, 0.65); background: rgba(255, 255, 255, 0.06);
} }
@media (max-width: 600px) { @media (max-width: 600px) {
.footer .container { .footer .container {
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: center;
text-align: center;
} }
} }

7
wunschliste.php
View File

@ -68,11 +68,4 @@ if (!$conn)
<?php $stmt->close(); ?> <?php $stmt->close(); ?>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/css/compcard.css">
</head>
<?php include 'footer.php'; ?> <?php include 'footer.php'; ?>