-
+
-
+
+
+
+
+
Seite nicht gefunden
+ +Die Seite, die du suchst, existiert leider nicht oder wurde verschoben.
+ +
+
Zur Startseite
+
+
+
+
+
SALE!
HOT DEAL
+
+
+
diff --git a/admin_users.php b/admin_users.php
index 2191f81..90aa944 100644
--- a/admin_users.php
+++ b/admin_users.php
@@ -1,79 +1,142 @@
query("DELETE FROM userRoles WHERE userID = $deleteId");
+ /// @var mysqli_stmt $delStmt Bereitet das Lösch-Statement für die `users`-Tabelle vor.
$delStmt = $conn->prepare("DELETE FROM users WHERE userID = ?");
+ /// Bindet die Benutzer-ID (Parameter-Typ i=Integer) an das Statement.
$delStmt->bind_param("i", $deleteId);
+ /// Führt die Löschung in der Datenbank aus.
$delStmt->execute();
+ /// Schließt das Prepared Statement.
$delStmt->close();
+ /// @var string $successMsg Setzt die Erfolgsmeldung.
$successMsg = "Benutzer erfolgreich gelöscht.";
} else {
+ /// @var string $errorMsg Setzt die Fehlermeldung (Selbstlöschung unzulässig).
$errorMsg = "Du kannst dich nicht selbst löschen.";
}
}
-// 2b) Aktion: Rollen aktualisieren
+/**
+ * 2b) Aktion: Rollen aktualisieren
+ * @brief Verarbeitet Massen-Aktualisierungen von Benutzerrollen aus dem Formular.
+ * @details Diese Aktion wird ausgelöst, wenn der Administrator auf "Alle Rollen speichern" klickt.
+ */
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['update_all_roles'])) {
+ /// @var array $usersRolesData Die neu zugewiesenen Benutzerrollen (ID als Key, Rollen-ID als Value).
$usersRolesData = isset($_POST['user_roles']) && is_array($_POST['user_roles']) ? $_POST['user_roles'] : [];
+ /// @var array $submittedUsers Liste der Benutzer, deren Rollen übermittelt wurden.
$submittedUsers = isset($_POST['submitted_users']) && is_array($_POST['submitted_users']) ? $_POST['submitted_users'] : [];
+ /// Iteriert über jeden übermittelten Benutzer, um seine Rollenzuweisungen anzupassen.
foreach ($submittedUsers as $uId) {
+ /// @var int $updateId Die ID des aktuellen Benutzers.
$updateId = (int)$uId;
+ /// Übergeht den Administrator, der die Seite gerade aufruft (Sicherheitsmassnahme).
if ($updateId === (int)$_SESSION['user_id']) {
continue;
}
+ /// @var string $selectedRole Die aus dem Formular ausgewählte Rolle.
$selectedRole = isset($usersRolesData[$updateId]) ? $usersRolesData[$updateId] : '';
+ /// @var mysqli_stmt $delStmt Entfernt vorab bestehende Rollenzuweisungen des Benutzers aus der DB.
$delStmt = $conn->prepare("DELETE FROM userRoles WHERE userID = ?");
$delStmt->bind_param("i", $updateId);
$delStmt->execute();
$delStmt->close();
+ /// Falls eine neue Rolle gewählt wurde, fügt diese in die Datenbank ein.
if (!empty($selectedRole)) {
+ /// @var mysqli_stmt $insStmt Bereitet das Insert-Statement für `userRoles` vor.
$insStmt = $conn->prepare("INSERT INTO userRoles (userID, roleID) VALUES (?, ?)");
+ /// @var int $roleIdInt Die Rolle wird sicher auf Integer gecastet.
$roleIdInt = (int)$selectedRole;
+ /// Bindet UserID und Rollen-ID als Integer-Werte an die Query.
$insStmt->bind_param("ii", $updateId, $roleIdInt);
$insStmt->execute();
$insStmt->close();
}
}
+ /// Setzt Erfolgs-Feedback für den Bereich Rollenverwaltung.
$successMsg = "Rollen erfolgreich aktualisiert.";
}
-// 2c) Alle verfügbaren Rollen laden
+/**
+ * 2c) Alle verfügbaren Rollen laden
+ * @brief Liest alle Rollen aus, um sie in den Dropdowns zur Auswahl anzuzeigen.
+ */
$allRoles = [];
+/// Startet die Abfrage aller Datensätze der Tabelle `roles`, aufsteigend sortiert nach Namen.
$rolesQuery = $conn->query("SELECT roleID, name FROM roles ORDER BY name ASC");
if ($rolesQuery) {
+ /// Fügt jede gefundene Rolle dem Array hinzu.
while ($r = $rolesQuery->fetch_assoc()) {
$allRoles[] = $r;
}
}
-// 3) Alle Benutzer laden (mit Suche)
+/**
+ * 3) Alle Benutzer laden (mit Suche)
+ * @brief Verarbeitet Such- und Filterkriterien, um ein Set an Benutzern abzufragen.
+ */
+/// @var string $searchQuery Die übermittelte Suchanfrage.
$searchQuery = isset($_GET['search']) ? trim($_GET['search']) : '';
+/// @var string $searchParam Wird als Parameter für die SQL-Wildcard-Suche vorbereitet.
$searchParam = '%' . $searchQuery . '%';
+/// @var int $filterRole Ggf. übergebene Rollen-Filterung des Nutzers.
$filterRole = isset($_GET['role']) ? (int)$_GET['role'] : 0;
+/// @var string $sql Basis-Select zum Abfragen der Benutzerinformationen und der gruppierten Rollen-IDs.
$sql = "
SELECT u.userID, u.email, u.displayname, u.profilePicture, u.isActive,
GROUP_CONCAT(ur.roleID) as roleIDs
@@ -81,44 +144,61 @@ $sql = "
LEFT JOIN userRoles ur ON u.userID = ur.userID
";
+/// @var array $whereClauses Array, mit dem die WHERE-Bedingungen flexibel aufgebaut werden sollen.
$whereClauses = [];
+/// @var string $types Zusammenstellung von Typ-Spezifizierern für das `bind_param`.
$types = "";
+/// @var array $params Liste der Werte, die für Prepared Statements gebunden werden.
$params = [];
+/// Sofern die Suchanfrage nicht leer ist, wird nach Displayname und E-Mail gefiltert.
if ($searchQuery !== '') {
$whereClauses[] = "(u.displayname LIKE ? OR u.email LIKE ?)";
- $types .= "ss";
+ $types .= "ss"; // ss referenziert 2 String Parameter
$params[] = $searchParam;
$params[] = $searchParam;
}
+/// Fügt eine Bedingung hinzu, sofern mit einer bestimmten Rolle gefiltert werden soll.
if ($filterRole > 0) {
- // Da wir einen LEFT JOIN mit GROUP_CONCAT haben und auf Rollen filtern wollen,
- // können wir als einfache Lösung einen Subselect für EXISTS machen, damit
- // alle Rollen des Benutzers in GROUP_CONCAT erhalten bleiben,
- // aber nur Nutzer gezeigt werden, die auch die geforderte Rolle haben.
+ /**
+ * Da wir einen LEFT JOIN mit GROUP_CONCAT haben und auf Rollen filtern wollen,
+ * können wir als einfache Lösung einen Subselect für EXISTS machen, damit
+ * alle Rollen des Benutzers in GROUP_CONCAT erhalten bleiben,
+ * aber nur Nutzer gezeigt werden, die auch die geforderte Rolle haben.
+ */
$whereClauses[] = "EXISTS (SELECT 1 FROM userRoles sub_ur WHERE sub_ur.userID = u.userID AND sub_ur.roleID = ?)";
- $types .= "i";
+ $types .= "i"; // i referenziert einen Integer
$params[] = $filterRole;
}
+/// Erweitert den SQL-String um die zusammengefassten Filter-Clauses.
if (!empty($whereClauses)) {
$sql .= " WHERE " . implode(" AND ", $whereClauses);
}
+/// Fügt der SQL die finale Gruppierung und Sortierung nach User ID an.
$sql .= " GROUP BY u.userID ORDER BY u.userID ASC";
+/// @var mysqli_stmt $stmtUsers Bereitet das komplette Nutzer-Bezugs-Statement vor.
$stmtUsers = $conn->prepare($sql);
+/// Wenn Bindings existieren, binden wir sie dynamisch via `$params`-Spread-Operator an das SQL-Statement.
if (!empty($params)) {
$stmtUsers->bind_param($types, ...$params);
}
+/// Das vorbereitete SQL ausführen.
$stmtUsers->execute();
+/// @var mysqli_result $usersResult Empfängt das Result-Set aus der getätigten Fetch-Operation.
$usersResult = $stmtUsers->get_result();
+/**
+ * @brief Sammelt Filter-Attribute für die Fortführung der URL-Parameter bei Massenänderungen.
+ */
$formActionParams = [];
if ($searchQuery !== '') $formActionParams['search'] = $searchQuery;
if ($filterRole > 0) $formActionParams['role'] = $filterRole;
+/// @var string $formActionUrl Stellt die Request-URI des Formulars samt GET-Parametern zusammen.
$formActionUrl = "admin_users.php";
if (!empty($formActionParams)) {
$formActionUrl .= "?" . http_build_query($formActionParams);
@@ -126,9 +206,22 @@ if (!empty($formActionParams)) {
?>
-
+
+
+
@@ -136,10 +229,14 @@ if (!empty($formActionParams)) {
-
+
-
+
@@ -188,9 +285,13 @@ if (!empty($formActionParams)) {
- fetch_assoc()): ?>
+ fetch_assoc()): ?>
@@ -251,4 +352,7 @@ if (!empty($formActionParams)) {
-
+
diff --git a/api/search_products.php b/api/search_products.php
index 616052d..a2eed9c 100644
--- a/api/search_products.php
+++ b/api/search_products.php
@@ -1,39 +1,90 @@
15) {
$limit = 15;
}
- // Minimum query length to reduce load/noise
+ /**
+ * Mindestlänge für die Suche.
+ * Wenn der Suchbegriff leer ist oder aus weniger als 1 Zeichen besteht,
+ * wird ein leeres JSON-Array zurückgegeben und die Ausführung beendet.
+ */
if (mb_strlen($q, 'UTF-8') < 1) {
echo json_encode(['items' => []], JSON_UNESCAPED_UNICODE);
exit;
}
- // Escape LIKE wildcards (% _), then add %...%
+ /**
+ * @var string $like Der escapte Such-String für das LIKE-Statement in SQL.
+ * Spezielle Wildcard-Zeichen (%) und (_) werden escapt, um SQL-Fehler
+ * oder unerwartetes Verhalten bei Benutzereingaben zu verhindern.
+ */
$like = addcslashes($q, "%_\\");
$like = '%' . $like . '%';
- // Simple search: model + description
+ /**
+ * @var string $sql Die SQL-Abfrage zur Suche nach Produkten.
+ * Durchsucht die Spalten `model` und `description`.
+ * Sortiert Treffer im `model` vor Treffern in der `description`.
+ */
$sql = "
SELECT p.productID, p.model, p.description, p.imagePath
FROM products p
@@ -44,24 +95,49 @@ try {
LIMIT ?
";
+ /**
+ * @var mysqli_stmt|PDOStatement $stmt Das vorbereitete SQL-Statement.
+ */
$stmt = $conn->prepare($sql);
+
+ // Überprüfen, ob das Statement erfolgreich vorbereitet wurde
if (!$stmt) {
+ // HTTP-Statuscode 500 für einen internen Serverfehler setzen
http_response_code(500);
echo json_encode(['error' => 'DB-Query konnte nicht vorbereitet werden.'], JSON_UNESCAPED_UNICODE);
exit;
}
+ /**
+ * Binden der Parameter an das vorbereitete Statement.
+ * 'sssi' bedeutet: String, String, String, Integer.
+ */
$stmt->bind_param('sssi', $like, $like, $like, $limit);
+
+ // Ausführen der vorbereiteten Abfrage
$stmt->execute();
+
+ // Holen des Ergebnisses aus der Datenbank
$res = $stmt->get_result();
+ /**
+ * @var array $items Das Array zur Speicherung der aufbereiteten Suchergebnisse.
+ */
$items = [];
+
+ // Durchlaufen der einzelnen Datensätze / Zeilen
while ($row = $res->fetch_assoc()) {
+ /**
+ * @var int $id Die Produkt-ID iterierten Produkts.
+ */
$id = (int)($row['productID'] ?? 0);
+
+ // Überspringe ungültige oder defekte IDs
if ($id <= 0) {
continue;
}
+ // Hinzufügen des formatierten Produkts in das Result-Array
$items[] = [
'id' => $id,
'model' => (string)($row['model'] ?? ''),
@@ -71,9 +147,17 @@ try {
];
}
+ /**
+ * Rückgabe des Arrays als JSON-kodierter String.
+ * JSON_UNESCAPED_UNICODE verhindert, dass Umlaute escapet werden (z.B. %u00e4).
+ */
echo json_encode(['items' => $items], JSON_UNESCAPED_UNICODE);
+
} catch (Throwable $e) {
+ /**
+ * Fehlerbehandlung im Falle einer Exception (z.B. bei einem Datenbankfehler).
+ * Sendet einen 500er Statuscode und eine generische Fehlermeldung als JSON.
+ */
http_response_code(500);
echo json_encode(['error' => 'Serverfehler'], JSON_UNESCAPED_UNICODE);
}
-
diff --git a/assets/css/catbar.css b/assets/css/catbar.css
index 3f6dd6d..94959b2 100644
--- a/assets/css/catbar.css
+++ b/assets/css/catbar.css
@@ -1,7 +1,21 @@
-/* ==========================================================
- CATEGORY BAR
- ========================================================== */
+/**
+ * @file catbar.css
+ * @brief This stylesheet defines the styling for the category navigation bar and the attribute filter bar.
+ * It includes styles for navigation items, active/hover states, responsiveness, and filter form components.
+ * @author Geizkragen Project
+ */
+/**
+ * ==========================================================
+ * CATEGORY BAR
+ * ==========================================================
+ */
+
+/**
+ * @class .home-nav
+ * @brief Main container for the home navigation bar.
+ * Provides the background color, padding, and flexbox layout.
+ */
.home-nav {
width: 100%;
display: flex;
@@ -10,7 +24,11 @@
padding: 1px 0;
}
-/* Inner zentriert */
+/**
+ * @class .home-nav__inner
+ * @brief Inner wrapper for the home navigation bar.
+ * Ensures the content expands and is centered correctly using flexbox properties.
+ */
.home-nav__inner {
flex: 1;
width: 100%;
@@ -19,7 +37,11 @@
align-items: center;
}
-/* List */
+/**
+ * @class .home-nav__list
+ * @brief Represents the unordered list containing the navigation links.
+ * Removes default list styling and sets up a horizontal flexbox container.
+ */
.home-nav__list {
width: 100%;
display: flex;
@@ -28,16 +50,27 @@
padding: 0;
}
-/* LI nur als Container */
+/**
+ * @selector .home-nav__list li
+ * @brief Defines the list items inside the navigation list.
+ * Acts as a relative container for flex items.
+ */
.home-nav__list li {
flex: 1;
position: relative;
}
-/* =============================== */
-/* HOME CATEGORY LINKS */
-/* =============================== */
+/**
+ * ===============================
+ * HOME CATEGORY LINKS
+ * ===============================
+ */
+/**
+ * @selector .home-nav__list li a
+ * @brief Styles the anchor tags inside the list items.
+ * Sets up dimensions, padding, colors, font styling, and transitions for hover effects.
+ */
.home-nav__list li a {
width: 100%;
padding: 8px 0;
@@ -59,32 +92,53 @@
transition: background-color 0.2s ease;
}
-/* Hover */
+/**
+ * @selector .home-nav__list li a:hover
+ * @brief Defines the hover state for the navigation links.
+ * Applies a subtle white overlay using rgba.
+ */
.home-nav__list li a:hover {
background-color: rgba(255,255,255,0.18);
}
-/* Active (Mausklick) */
+/**
+ * @selector .home-nav__list li a:active
+ * @brief Defines the active (mouse click down) state for the navigation links.
+ * Increases the opacity of the white overlay for visual feedback.
+ */
.home-nav__list li a:active {
background-color: rgba(255,255,255,0.28);
}
-/* Fokus (Tastatur) */
+/**
+ * @selector .home-nav__list li a:focus-visible
+ * @brief Defines the focus state, mainly for keyboard navigation accessibility.
+ * Removes the default outline and adds a bespoke white box-shadow inset.
+ */
.home-nav__list li a:focus-visible {
outline: none;
box-shadow: inset 0 0 0 2px rgba(255,255,255,0.5);
}
-/* Aktive Kategorie (per PHP) */
+/**
+ * @selector .home-nav__list li a.active
+ * @brief Styles the currently active category link, typically set server-side via PHP or by JS.
+ */
.home-nav__list li a.active {
background-color: rgba(255,255,255,0.25);
}
-/* =============================== */
-/* TRENNSTRICHE ZWISCHEN KATEGORIEN */
-/* =============================== */
+/**
+ * ===============================
+ * TRENNSTRICHE ZWISCHEN KATEGORIEN
+ * ===============================
+ */
-/* Trennstrich rechts – außer beim letzten */
+/**
+ * @selector .home-nav__list li:not(:last-child)::after
+ * @brief Creates vertical separator lines between category items,
+ * except after the last item in the list.
+ */
.home-nav__list li:not(:last-child)::after {
content: "";
position: absolute;
@@ -96,7 +150,11 @@
background-color: rgba(255,255,255,0.3);
}
-/* ─── Responsive: horizontal scroll on mobile ─── */
+/**
+ * @media (max-width: 768px)
+ * @brief Responsive styles for mobile and small tablet screens.
+ * Enables horizontal scrolling for the category list with smooth scroll-snapping.
+ */
@media (max-width: 768px) {
.home-nav__inner {
justify-content: flex-start;
@@ -140,16 +198,28 @@
}
}
-/* ==========================================================
- ATTRIBUTE FILTER BAR
- ========================================================== */
+/**
+ * ==========================================================
+ * ATTRIBUTE FILTER BAR
+ * ==========================================================
+ */
+/**
+ * @class .attrbar
+ * @brief Main container for the attribute filtering section.
+ * Matches the background color of the category bar and provides bottom padding.
+ */
.attrbar {
width: 100%;
background-color: rgb(45, 59, 80); /* Same as catbar background */
padding: 0 0 16px 0;
}
+/**
+ * @class .attrbar__inner
+ * @brief Inner container for the filter bar.
+ * Includes top padding and a subtle top border to separate it from the category links above.
+ */
.attrbar__inner {
display: flex;
justify-content: center;
@@ -159,6 +229,11 @@
width: 100%;
}
+/**
+ * @class .attr-filter-form
+ * @brief Wrapper for the filter form components.
+ * Uses flexbox wrap to display filter items fluidly, aligning them appropriately across widths.
+ */
.attr-filter-form {
display: flex;
flex-wrap: wrap;
@@ -171,6 +246,11 @@
padding: 0 20px;
}
+/**
+ * @class .attr-filter-item
+ * @brief Container for a single filter component (e.g. property label + dropdown).
+ * Lays out child elements in a flex column.
+ */
.attr-filter-item {
display: flex;
flex-direction: column; /* Stack label and select */
@@ -183,6 +263,11 @@
max-width: 250px;
}
+/**
+ * @selector .attr-filter-item label
+ * @brief Styles the label text above each dropdown within the filter items.
+ * Uses uppercase text, smaller font size, and light spacing.
+ */
.attr-filter-item label {
font-weight: 600;
text-transform: uppercase;
@@ -191,6 +276,11 @@
color: rgba(255, 255, 255, 0.7);
}
+/**
+ * @selector .attr-filter-item select
+ * @brief Styles the select (dropdown) inputs in the filter bar.
+ * Removes default webkit/moz appearance and replaces it with custom backgrounds, borders, and a custom SVG arrow.
+ */
.attr-filter-item select {
width: 100%;
padding: 10px 14px;
@@ -209,28 +299,51 @@
background-size: 16px;
}
+/**
+ * @selector .attr-filter-item select:hover
+ * @brief Hover state for the select elements, adjusting background and border color.
+ */
.attr-filter-item select:hover {
background-color: rgba(25, 30, 40, 0.8);
border-color: rgba(255, 255, 255, 0.3);
}
+/**
+ * @selector .attr-filter-item select:focus
+ * @brief Focus state for the select elements, applying primary color highlights.
+ */
.attr-filter-item select:focus {
outline: none;
border-color: var(--color-primary, #274a97);
box-shadow: 0 0 0 3px var(--color-primary-soft, rgba(39, 74, 151, 0.15));
}
+/**
+ * @selector .attr-filter-item select option
+ * @brief Styles the option elements inside the dropdown.
+ * Sets background and text colors to match the dark theme.
+ */
.attr-filter-item select option {
background-color: var(--bg-surface, #2d3b50);
color: var(--text-primary, #ffffff);
}
+/**
+ * @class .attr-filter-action
+ * @brief Container for form action elements, like the reset button.
+ * Aligns to the bottom to match the input fields structurally.
+ */
.attr-filter-action {
display: flex;
align-items: flex-end;
padding-bottom: 2px; /* optical alignment with inputs */
}
+/**
+ * @class .attr-filter-reset
+ * @brief Styles for the filter reset button.
+ * Provides an inline-flex layout with a distinct danger (red) color scheme and hover effects.
+ */
.attr-filter-reset {
display: inline-flex;
align-items: center;
@@ -248,12 +361,22 @@
height: 40px; /* match select height */
}
+/**
+ * @selector .attr-filter-reset:hover
+ * @brief Hover state for the reset button.
+ * Creates a slight lift effect using transform and adds a shadow.
+ */
.attr-filter-reset:hover {
background-color: #b91c1c; /* slightly darker danger */
transform: translateY(-1px);
box-shadow: 0 4px 12px var(--color-danger-soft, rgba(217, 45, 32, 0.2));
}
+/**
+ * @media (max-width: 768px)
+ * @brief Adjustments to the attribute filter layout for mobile and tablet devices.
+ * Forces items to take up near-half width or full width, and correctly spaces action buttons.
+ */
@media (max-width: 768px) {
.attr-filter-item {
flex: 1 1 45%;
diff --git a/assets/css/compare.css b/assets/css/compare.css
index 19a5bf7..d388467 100644
--- a/assets/css/compare.css
+++ b/assets/css/compare.css
@@ -1,8 +1,28 @@
+/**
+ * @file compare.css
+ * @brief Stylesheet für die Produktvergleichsseite.
+ *
+ * Diese Datei enthält alle spezifischen Styles für die Darstellung
+ * von zu vergleichenden Produkten in einer übersichtlichen Tabelle.
+ * Sie definiert Farben, Ränder, Schatten und Hover-Effekte für
+ * ein ansprechendes Dark-Mode-Design.
+ */
+
+/**
+ * @brief Hauptcontainer für die Vergleichsseite.
+ *
+ * Setzt den oberen Abstand und das allgemeine Padding für die Seite.
+ */
.compare-page {
margin-top: 2rem;
padding: 1rem;
}
+/**
+ * @brief Stil für den Seitentitel der Vergleichsseite.
+ *
+ * Definiert Schriftgröße, Ausrichtung, Farbe und Schriftstärke.
+ */
.compare-title {
font-size: 2.5rem;
margin-bottom: 2rem;
@@ -11,6 +31,12 @@
font-weight: 700;
}
+/**
+ * @brief Styling für dem Fallstrick "Leerer Vergleich".
+ *
+ * Wird angezeigt, wenn keine Produkte zum Vergleich ausgewählt wurden.
+ * Enthält ein hervorgehobenes Box-Design mit Hintergrund und Schatten.
+ */
.compare-empty {
text-align: center;
color: #cbd5e1;
@@ -21,6 +47,11 @@
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4);
}
+/**
+ * @brief Titel-Stil für Produktkategorien beim Vergleich.
+ *
+ * Unterteilt die Tabelle grafisch nach Kategorien mit entsprechenden Rändern.
+ */
.compare-category-title {
margin-top: 3rem;
margin-bottom: 1.5rem;
@@ -30,6 +61,12 @@
padding-bottom: 0.8rem;
}
+/**
+ * @brief Wrapper für die scrollbare Vergleichstabelle.
+ *
+ * Ermöglicht horizontales Scrollen bei vielen Produkten auf kleinen Bildschirmen
+ * und setzt das äußere Erscheinungsbild (Hintergrund, Rahmen, Schatten).
+ */
.compare-table-wrapper {
overflow-x: auto;
background: #1e293b;
@@ -40,6 +77,11 @@
border: 1px solid rgba(255, 255, 255, 0.05);
}
+/**
+ * @brief Grund-Styling der Vergleichstabelle.
+ *
+ * Definiert Mindestbreite und reguliert die Zellabstände (Border-Collapse).
+ */
.compare-table {
width: 100%;
border-collapse: separate;
@@ -47,6 +89,11 @@
min-width: 800px;
}
+/**
+ * @brief Stile für Tabellenköpfe und Datenzellen.
+ *
+ * Fügt Ränder, Abstände und zentrierte Ausrichtung sowie die Textfarbe hinzu.
+ */
.compare-table th,
.compare-table td {
padding: 1.5rem 1rem;
@@ -56,10 +103,18 @@
vertical-align: middle;
}
+/**
+ * @brief Entfernt den unteren Rand für die letzte Tabellenzeile.
+ */
.compare-table tbody tr:last-child td {
border-bottom: none;
}
+/**
+ * @brief Styling für die erste Spalte (Eigenschaftsnamen).
+ *
+ * Fixiert die Spalte links (Sticky) für leichteres horizontales Scrollen.
+ */
.compare-table th:first-child,
.compare-table td:first-child {
text-align: left;
@@ -73,6 +128,11 @@
box-shadow: 4px 0 6px -2px rgba(0, 0, 0, 0.2);
}
+/**
+ * @brief Styling für den Tabellenkopf.
+ *
+ * Hebt die Kopfzeile farblich vom Rest der Tabelle ab.
+ */
.compare-table th {
background: #0f172a;
font-weight: bold;
@@ -81,20 +141,41 @@
padding-bottom: 2rem;
}
+/**
+ * @brief Spezifisches Styling für die obere linke Zelle im Tabellenkopf.
+ *
+ * Erhöht den z-Index, damit sie beim Scrollen immer oben liegt.
+ */
.compare-table th:first-child {
background: #0f172a;
z-index: 3;
font-size: 1.2rem;
}
+/**
+ * @brief Hover-Effekt für Tabellenzeilen im Körper (Datenzellen).
+ *
+ * Hebt die gesamte Zeile hervor, wenn der Benutzer darüber fährt.
+ */
.compare-table tbody tr:hover td {
background: #2a3a52;
}
+/**
+ * @brief Hover-Effekt für die erste Zelle in der hovernden Tabellenzeile.
+ *
+ * Sorgt für eine konsistente Hervorhebung, auch bei der fixierten Spalte.
+ */
.compare-table tbody tr:hover td:first-child {
background: #2a3a52;
}
+/**
+ * @brief Styling für das Produktbild im Tabellenkopf.
+ *
+ * Passt die Bildgröße an, setzt einen hellen Verlaufshintergrund und
+ * implementiert einen abgerundeten Rahmen sowie eine Größenübergangsanimation.
+ */
.compare-product-img {
height: 140px;
object-fit: contain;
@@ -106,10 +187,20 @@
transition: transform 0.3s ease;
}
+/**
+ * @brief Hover-Animation für das Produktbild.
+ *
+ * Vergrößert das Bild leicht, wenn der Nutzer mit der Maus darüber fährt.
+ */
.compare-product-img:hover {
transform: scale(1.05);
}
+/**
+ * @brief Styling für den Produktnamen.
+ *
+ * Definiert Farbe, Schriftgröße und Zeilenhöhe für den anklickbaren Produktnamen.
+ */
.compare-product-name {
font-size: 1.15rem;
color: #60a5fa;
@@ -121,10 +212,20 @@
line-height: 1.4;
}
+/**
+ * @brief Hover-Effekt für den Produktnamen.
+ *
+ * Ändert die Textfarbe für visuelles Feedback beim Drüberfahren.
+ */
.compare-product-name:hover {
color: #93c5fd;
}
+/**
+ * @brief Styling für den Button zum Entfernen eines Produkts aus dem Vergleich.
+ *
+ * Roter Button (Pill-Shape) mit Schatten und Übergangseffekten.
+ */
.compare-remove-btn {
background: #ef4444;
color: white;
@@ -138,16 +239,32 @@
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
+/**
+ * @brief Hover-Effekt für den Entfernen-Button.
+ *
+ * Dunkelt das Rot ab, bewegt den Button leicht nach oben und vergrößert den Schatten.
+ */
.compare-remove-btn:hover {
background: #dc2626;
transform: translateY(-1px);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}
+/**
+ * @brief Zebra-Streifen-Muster für gerade Tabellenzeilen.
+ *
+ * Wirkt sich nicht auf die fixierte erste Spalte aus, um die Lesbarkeit
+ * dunkel schattierter Hintergründe aufrechtzuerhalten.
+ */
.compare-table tbody tr:nth-child(even) td:not(:first-child) {
background: rgba(15, 23, 42, 0.2);
}
+/**
+ * @brief Styling für längere Beschreibungstexte im Vergleich.
+ *
+ * Begrenzt die Breite, richtet den Text linksbündig aus und optimiert die Zeilenhöhe.
+ */
.desc-text {
text-align: left;
display: inline-block;
@@ -155,4 +272,3 @@
line-height: 1.6;
font-size: 0.95rem;
}
-
diff --git a/assets/css/compcard.css b/assets/css/compcard.css
index e36f87d..4a623aa 100644
--- a/assets/css/compcard.css
+++ b/assets/css/compcard.css
@@ -1,8 +1,22 @@
-/* ==========================================================
- PRODUCT CARDS & SCROLL – Animated Glass Cards
- ========================================================== */
+/**
+ * @file compcard.css
+ * @brief Styles for Product Cards and Wishlist Cards.
+ * @details This file contains all CSS rules for displaying animated glass-style
+ * product cards, grid layouts, horizontal scroll sections, and the wishlist vertical layout.
+ * It also includes responsive design media queries for tablets and mobile devices.
+ */
-/* ─── Product Grid ─── */
+/**
+ * ==========================================================
+ * @section PRODUCT CARDS & SCROLL – Animated Glass Cards
+ * ==========================================================
+ */
+
+/**
+ * @brief Product Grid Container
+ * @details Creates a CSS grid with autofit columns of 260px each.
+ * Defines the spacing (gap) and padding around the grid.
+ */
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fit, 260px);
@@ -11,7 +25,12 @@
justify-content: start;
}
-/* ─── Product Card ─── */
+/**
+ * @brief Base Product Card Styles
+ * @details Sets up the generic layout, colors, shadow, and transitions for a product card.
+ * The card is designed with a dark background (#2d3b50) and an outline/border,
+ * utilizing a flexbox column layout. A fade-in animation (fadeInUp) is applied.
+ */
.product-card {
background: #2d3b50;
border: 1px solid var(--border-subtle);
@@ -29,7 +48,11 @@
animation: fadeInUp 0.5s ease both;
}
-/* Gradient border glow on hover */
+/**
+ * @brief Gradient border glow effect on hover
+ * @details Uses a pseudo-element (::before) to create a glowing border using a linear gradient.
+ * It features a mask to only reveal the border area. Hidden by default (opacity: 0) and shown on hover.
+ */
.product-card::before {
content: "";
position: absolute;
@@ -51,7 +74,11 @@
pointer-events: none;
}
-/* Inner glow effect on hover */
+/**
+ * @brief Inner glow effect on hover
+ * @details Uses a pseudo-element (::after) to add a subtle gradient at the top of the card.
+ * It is hidden by default and becomes visible when the card is hovered over.
+ */
.product-card::after {
content: "";
position: absolute;
@@ -85,6 +112,11 @@
outline-offset: 3px;
}
+/**
+ * @brief Staggered entrance animation delays
+ * @details Applies incremental animation delays to cards within a horizontal scroll container
+ * to create a cascading fade-in effect.
+ */
/* 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; }
@@ -95,7 +127,11 @@
.product-scroll .product-card:nth-child(7) { animation-delay: 0.35s; }
.product-scroll .product-card:nth-child(8) { animation-delay: 0.4s; }
-/* ─── Card Image ─── */
+/**
+ * @brief Card Image Styling
+ * @details Defines the size, padding, and positioning of the product image inside the card.
+ * Uses a white background and adds a bottom border.
+ */
.product-card img {
width: 100%;
height: 175px;
@@ -115,7 +151,11 @@
transform: scale(1.05);
}
-/* ─── Card Content ─── */
+/**
+ * @brief Card Content Container
+ * @details The wrapper for textual content (title, description, price) inside the card.
+ * Uses flexbox to space and align the text vertically.
+ */
.product-card__content {
padding: 1rem 1.25rem 1.15rem;
flex: 1 1 auto;
@@ -127,6 +167,11 @@
z-index: 2;
}
+/**
+ * @brief Card Title Styling
+ * @details Styles the heading, limits it to 2 lines using webkit-line-clamp,
+ * and sets up a transition for color changes on hover.
+ */
.product-card__content h3 {
font-size: 0.92rem;
font-weight: 600;
@@ -140,10 +185,19 @@
transition: color var(--transition-normal);
}
+/**
+ * @brief Card Title Hover State
+ * @details Changes the color of the
heading of the section, relative positioning is used for decorators.
+ */
.product-section h2 {
margin-left: 2rem;
margin-bottom: 1.25rem;
@@ -181,6 +246,11 @@
display: inline-block;
}
+/**
+ * @brief Animated Accent Line for Section Title
+ * @details Creates a vertical gradient line next to the
Empfehlung des Tages
+
+
ab €
120 ? (function_exists('mb_substr') ? mb_substr($rDesc, 0, 120) : substr($rDesc, 0, 120)) . '...' : $rDesc;
?>
Jetzt ansehen ›
Hier siehst du alle registrierten Benutzer.
heading, limits it to 2 lines using webkit-line-clamp,
+ * and sets up a transition for color changes on hover.
+ */
.product-card__content h3 {
font-size: 0.92rem;
font-weight: 600;
@@ -140,10 +185,19 @@
transition: color var(--transition-normal);
}
+/**
+ * @brief Card Title Hover State
+ * @details Changes the color of the heading when the parent card is hovered.
+ */
.product-card:hover .product-card__content h3 {
color: var(--text-invert);
}
+/**
+ * @brief Card Description Styling
+ * @details Styles the
paragraph tag. Limits text to 4 lines with ellipsis + * and handles word-breaking to prevent overflow. + */ .product-card__content p { font-size: 0.8rem; color: #ffffff; @@ -156,6 +210,10 @@ line-height: 1.5; } +/** + * @brief Card Price Styling + * @details Formats the price element, making it bold, blue, and pushed to the bottom of the card. + */ .product-card__content .price { font-size: 1.05rem; font-weight: 700; @@ -164,12 +222,19 @@ padding-top: 0.5rem; } -/* ─── Product Sections ─── */ +/** + * @brief Product Section Wrapper + * @details Adds padding and an entrance animation for sections containing product lists/scrolls. + */ .product-section { padding: 2rem 0 0.5rem; animation: fadeInUp 0.5s ease both; } +/** + * @brief Product Section Title + * @details Styles the