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

Add styling for product comparison page and enhance layout

Browse Source
This commit is contained in:
Fabian Schieder 2026-03-30 23:26:27 +02:00
parent a7926ff900
commit 9def8e73d2
3 changed files with 180 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

158
assets/css/compare.css Normal file
View File

@ -0,0 +1,158 @@
.compare-page {
margin-top: 2rem;
padding: 1rem;
}
.compare-title {
font-size: 2.5rem;
margin-bottom: 2rem;
text-align: center;
color: #f8fafc;
font-weight: 700;
}
.compare-empty {
text-align: center;
color: #cbd5e1;
margin-top: 3rem;
background: #1e293b;
padding: 3rem;
border-radius: 1.5rem;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4);
}
.compare-category-title {
margin-top: 3rem;
margin-bottom: 1.5rem;
font-size: 1.8rem;
color: #38bdf8;
border-bottom: 2px solid rgba(51, 65, 85, 0.5);
padding-bottom: 0.8rem;
}
.compare-table-wrapper {
overflow-x: auto;
background: #1e293b;
border-radius: 1.5rem;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4);
padding: 0;
margin-bottom: 3rem;
border: 1px solid rgba(255, 255, 255, 0.05);
}
.compare-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
min-width: 800px;
}
.compare-table th,
.compare-table td {
padding: 1.5rem 1rem;
text-align: center;
border-bottom: 1px solid rgba(51, 65, 85, 0.5);
color: #cbd5e1;
vertical-align: middle;
}
.compare-table tbody tr:last-child td {
border-bottom: none;
}
.compare-table th:first-child,
.compare-table td:first-child {
text-align: left;
font-weight: 600;
position: sticky;
left: 0;
background: #1e293b;
z-index: 2;
color: #f8fafc;
border-right: 1px solid rgba(51, 65, 85, 0.5);
box-shadow: 4px 0 6px -2px rgba(0, 0, 0, 0.2);
}
.compare-table th {
background: #0f172a;
font-weight: bold;
color: #f8fafc;
padding-top: 2rem;
padding-bottom: 2rem;
}
.compare-table th:first-child {
background: #0f172a;
z-index: 3;
font-size: 1.2rem;
}
.compare-table tbody tr:hover td {
background: #2a3a52;
}
.compare-table tbody tr:hover td:first-child {
background: #2a3a52;
}
.compare-product-img {
height: 140px;
object-fit: contain;
margin-bottom: 1.2rem;
border-radius: 0.8rem;
background: linear-gradient(145deg, #ffffff, #f1f5f9);
padding: 0.8rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease;
}
.compare-product-img:hover {
transform: scale(1.05);
}
.compare-product-name {
font-size: 1.15rem;
color: #60a5fa;
text-decoration: none;
transition: color 0.2s;
display: block;
margin-bottom: 1rem;
font-weight: 600;
line-height: 1.4;
}
.compare-product-name:hover {
color: #93c5fd;
}
.compare-remove-btn {
background: #ef4444;
color: white;
border: none;
padding: 0.6rem 1.2rem;
border-radius: 9999px; /* Pill shape */
cursor: pointer;
font-size: 0.85rem;
font-weight: 600;
transition: all 0.2s;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.compare-remove-btn:hover {
background: #dc2626;
transform: translateY(-1px);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}
.compare-table tbody tr:nth-child(even) td:not(:first-child) {
background: rgba(15, 23, 42, 0.2);
}
.desc-text {
text-align: left;
display: inline-block;
max-width: 300px;
line-height: 1.6;
font-size: 0.95rem;
}

37
compare.php
View File

@ -19,8 +19,8 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['remove_compare'])) {
}
?>
<div class="container" style="color: white; margin-top: 2rem;">
<h1>Produktvergleich</h1>
<div class="container compare-page">
<h1 class="compare-title">Produktvergleich</h1>
<?php
$hasProducts = false;
@ -78,30 +78,31 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['remove_compare'])) {
while ($row = $stmtProdAttr->fetch_assoc()) {
$productAttrVals[$row['productID']][$row['attributeID']] = $row;
}
$stmtProdAttr->close();
}
?>
<h2 style="margin-top: 2rem; border-bottom: 2px solid #334155; padding-bottom: 0.5rem;"><?= htmlspecialchars($catName) ?></h2>
<h2 class="compare-category-title"><?= htmlspecialchars($catName) ?></h2>
<div style="overflow-x: auto; margin-top: 1rem;">
<table style="width: 100%; border-collapse: collapse; min-width: 600px;">
<div class="compare-table-wrapper">
<table class="compare-table">
<thead>
<tr>
<th style="padding: 10px; border: 1px solid #334155; background: #1e293b; text-align: left; width: 200px;">Eigenschaft</th>
<th>Eigenschaft</th>
<?php foreach ($productIds as $pId): ?>
<?php if (!isset($products[$pId])) continue; ?>
<th style="padding: 10px; border: 1px solid #334155; background: #1e293b; text-align: center; width: 250px;">
<div style="margin-bottom: 10px;">
<th>
<div>
<a href="productpage.php?id=<?= $pId ?>">
<img src="<?= htmlspecialchars($products[$pId]['imagePath'] ?? 'assets/images/placeholder.png') ?>" alt="Produktbild" style="max-height: 100px; display: block; margin: 0 auto; border-radius: 4px;">
<img src="<?= htmlspecialchars($products[$pId]['imagePath'] ?? 'assets/images/placeholder.png') ?>" alt="Produktbild" class="compare-product-img">
</a>
</div>
<h3 style="font-size: 1.1rem; margin: 0;"><a href="productpage.php?id=<?= $pId ?>" style="color: #60a5fa; text-decoration: none;"><?= htmlspecialchars($products[$pId]['model']) ?></a></h3>
<h3><a href="productpage.php?id=<?= $pId ?>" class="compare-product-name"><?= htmlspecialchars($products[$pId]['model']) ?></a></h3>
<form method="POST" action="compare.php" style="margin-top: 10px;">
<form method="POST" action="compare.php">
<input type="hidden" name="remove_compare" value="1">
<input type="hidden" name="remove_compare_id" value="<?= $pId ?>">
<button type="submit" style="background: #ef4444; border: none; color: white; padding: 5px 10px; border-radius: 4px; cursor: pointer; font-size: 0.8rem;">Entfernen</button>
<button type="submit" class="compare-remove-btn">Entfernen</button>
</form>
</th>
<?php endforeach; ?>
@ -109,20 +110,20 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['remove_compare'])) {
</thead>
<tbody>
<tr>
<td style="padding: 10px; border: 1px solid #334155; font-weight: bold; background: #0f172a;">Beschreibung</td>
<td>Beschreibung</td>
<?php foreach ($productIds as $pId): ?>
<?php if (!isset($products[$pId])) continue; ?>
<td style="padding: 10px; border: 1px solid #334155; text-align: left; vertical-align: top; background: <?= $pId % 2 == 0 ? '#1e293b' : '#0f172a' ?>;">
<?= htmlspecialchars($products[$pId]['description']) ?>
<td>
<span class="desc-text"><?= htmlspecialchars($products[$pId]['description']) ?></span>
</td>
<?php endforeach; ?>
</tr>
<?php foreach ($attributes as $attrId => $attr): ?>
<tr>
<td style="padding: 10px; border: 1px solid #334155; font-weight: bold; background: #0f172a;"><?= htmlspecialchars($attr['name'] ?? '') ?></td>
<td><?= htmlspecialchars($attr['name'] ?? '') ?></td>
<?php foreach ($productIds as $pId): ?>
<?php if (!isset($products[$pId])) continue; ?>
<td style="padding: 10px; border: 1px solid #334155; text-align: center; background: <?= $pId % 2 == 0 ? '#1e293b' : '#0f172a' ?>;">
<td>
<?php
if (isset($productAttrVals[$pId][$attrId])) {
$valRow = $productAttrVals[$pId][$attrId];
@ -151,7 +152,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['remove_compare'])) {
}
if (!$hasProducts) {
echo "<p style='margin-top: 2rem;'>Du hast noch keine Produkte zum Vergleich hinzugefügt. Gehe auf eine Produktseite, um Produkte hinzuzufügen.</p>";
echo "<div class='compare-empty'><p>Du hast noch keine Produkte zum Vergleich hinzugefügt. Gehe auf eine Produktseite, um Produkte hinzuzufügen.</p></div>";
}
?>
</div>

3
header.php
View File

@ -11,6 +11,7 @@
<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="stylesheet" href="assets/css/compare.css">
<!-- Favicon (zentral) -->
<link rel="icon" href="assets/images/favicon.ico" sizes="any">
@ -172,3 +173,5 @@
})();
</script>