Add styling for product comparison page and enhance layout

assets/css/compare.css

@@ -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;
+}
+

compare.php

@@ -19,8 +19,8 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['remove_compare'])) {
 }
 ?>
 
-<div class="container" style="color: white; margin-top: 2rem;">
+<div class="container compare-page">
-    <h1>Produktvergleich</h1>
+    <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;">
+            <div class="compare-table-wrapper">
-                <table style="width: 100%; border-collapse: collapse; min-width: 600px;">
+                <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;">
+                                <th>
-                                    <div style="margin-bottom: 10px;">
+                                    <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' ?>;">
+                                <td>
-                                    <?= htmlspecialchars($products[$pId]['description']) ?>
+                                    <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>

header.php

@@ -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>
 
+
+