From ee766351bdd2910a83a3589273bab7cbcc04e64a Mon Sep 17 00:00:00 2001
From: fsst <fabian.schieder.1010.1916@gmail.com>
Date: Fri, 6 Mar 2026 14:33:37 +0100
Subject: [PATCH] Monitoring for review overview css and design update

---
 assets/css/productpage.css |  98 ++++++++++++++++++++++
 productpage.php            | 162 +++++++++++++++----------------------
 2 files changed, 163 insertions(+), 97 deletions(-)

diff --git a/assets/css/productpage.css b/assets/css/productpage.css
index 25cce84..7528558 100644
--- a/assets/css/productpage.css
+++ b/assets/css/productpage.css
@@ -534,4 +534,102 @@
     border-radius: 12px;
     padding: 1rem 1.5rem;
     color: #94a3b8;
+}
+
+
+/* ==========================================================
+   REVIEW OVERVIEW BOX (Linke Spalte) - Kompakte Version
+   ========================================================== */
+
+.review-overview-box {
+    background: #1c2533;
+    border: 1px solid #2a374a;
+    border-radius: var(--radius-lg);
+    /* Padding von 1.5rem auf 1rem reduziert für eine kleinere Box */
+    padding: 1rem;
+    margin-top: 1.5rem;
+    color: #cbd5e1;
+    animation: fadeInUp 0.5s ease 0.3s both;
+}
+
+.overview-header {
+    text-align: center;
+    /* Abstände verringert */
+    margin-bottom: 0.8rem;
+    padding-bottom: 0.8rem;
+    border-bottom: 1px solid #2a374a;
+}
+
+.overview-avg {
+    /* Schriftgröße der Durchschnittsnote von 2.5rem auf 2rem verkleinert */
+    font-size: 2rem;
+    font-weight: 700;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.4rem;
+}
+
+.overview-avg .star {
+    /* Stern etwas verkleinert */
+    font-size: 1.5rem;
+}
+
+.overview-count {
+    /* Textgröße leicht verkleinert */
+    font-size: 0.8rem;
+    color: #94a3b8;
+    margin-top: 0.2rem;
+}
+
+.overview-breakdown {
+    display: flex;
+    flex-direction: column;
+    /* Abstand zwischen den Balken verringert */
+    gap: 0.4rem;
+}
+
+.breakdown-row {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    /* Text bei den Balken etwas kleiner */
+    font-size: 0.8rem;
+}
+
+.breakdown-stars {
+    width: 50px;
+    white-space: nowrap;
+    text-align: right;
+    color: #cbd5e1;
+}
+
+.breakdown-bar-bg {
+    flex: 1;
+    /* Höhe der Balken von 8px auf 6px reduziert */
+    height: 6px;
+    background: #2a374a;
+    border-radius: 3px;
+    overflow: hidden;
+}
+
+.breakdown-bar-fill {
+    height: 100%;
+    background: #fbbf24;
+    border-radius: 3px;
+    transition: width 0.8s ease-out;
+}
+
+.breakdown-num {
+    width: 20px;
+    text-align: right;
+    color: #94a3b8;
+}
+
+.overview-empty {
+    text-align: center;
+    color: #94a3b8;
+    padding: 0.5rem 0;
+    font-size: 0.85rem;
 }
\ No newline at end of file
diff --git a/productpage.php b/productpage.php
index 3560259..f4193ca 100644
--- a/productpage.php
+++ b/productpage.php
@@ -129,153 +129,121 @@ $productId = isset($_GET['id']) ? (int)$_GET['id'] : 0;
 
 
     <?php
+    // SQL korrigiert: SUM statt COUNT für die bedingten Zählungen
+    $stmtRevOv = mysqli_prepare($conn,
+            "SELECT ROUND(AVG(rating), 1) as avgRating, 
+                        COUNT(*) as reviewCount, 
+                        SUM(rating = 5) as fiveStarCount, 
+                        SUM(rating = 4) as fourStarCount,
+                        SUM(rating = 3) as threeStarCount,
+                        SUM(rating = 2) as twoStarCount,
+                        SUM(rating = 1) as oneStarCount
+                 FROM reviews WHERE productID = ?");
 
-        $stmtRevOv = mysqli_prepare($conn,
-                "SELECT AVG(rating) as avgRating, COUNT(*) as reviewCount, 
-                        COUNT(rating = 5 ) as fiveStarCount, 
-                        COUNT(rating = 4 ) as fourStarCount,
-                        COUNT(rating = 3 ) as threeStarCount,
-                        COUNT(rating = 2 ) as twoStarCount,
-                        COUNT(rating = 1 ) as oneStarCount
-                        FROM reviews WHERE productID = ?");
+    $stmtRevOv->bind_param("i", $productId);
+    $stmtRevOv->execute();
+    $resultRevOv = $stmtRevOv->get_result();
 
-        $stmtRevOv->bind_param("i", $productId);
-        $stmtRevOv->execute();
-        $resultRevOv = $stmtRevOv->get_result();
+    $reviewOverview = $resultRevOv->fetch_assoc();
 
-        $reviewOverview = $resultRevOv->fetch_assoc();
+    // Falls NULL zurückkommt (keine Bewertungen), auf 0 setzen
+    if ($reviewOverview['reviewCount'] === null) {
+        $reviewOverview['reviewCount'] = 0;
+    }
     ?>
 
     <div class="product-wrapper">
-        <!-- LINKER BEREICH – BILD -->
         <div class="product-left">
             <div class="product-image-box">
-                <img
-                        src="<?= isset($product['imagePath']) ? $product['imagePath'] : 'assets/images/placeholder.png' ?>"
-                        alt="<?= htmlspecialchars($product['model'] ?? 'Produktbild') ?>">
+                <img src="<?= isset($product['imagePath']) ? $product['imagePath'] : 'assets/images/placeholder.png' ?>"
+                     alt="<?= htmlspecialchars($product['model'] ?? 'Produktbild') ?>">
             </div>
+
             <?php if (isset($_SESSION['user_id'])): ?>
-
                 <?php if ($alreadyInWishlist): ?>
-
                     <div class="auth__actions">
-                        <input class="auth__submit" type="button"
-                               value="Bereits in Wunschliste"
-                               disabled>
+                        <input class="auth__submit" type="button" value="Bereits in Wunschliste" disabled>
                     </div>
-
                 <?php else: ?>
-
                     <form method="POST">
                         <input type="hidden" name="product_id" value="<?= (int)$productId ?>">
                         <input type="hidden" name="add_wishlist" value="1">
-
                         <div class="auth__actions">
-                            <input class="auth__submit"
-                                   type="submit"
-                                   value="Zur Wunschliste hinzufügen">
+                            <input class="auth__submit" type="submit" value="Zur Wunschliste hinzufügen">
                         </div>
                     </form>
-
                 <?php endif; ?>
-
             <?php else: ?>
-
                 <div class="auth__actions">
                     <a href="login.php">
-                        <input class="auth__submit" type="button"
-                               value="Zum Hinzufügen einloggen">
+                        <input class="auth__submit" type="button" value="Zum Hinzufügen einloggen">
                     </a>
                 </div>
-
             <?php endif; ?>
 
-            <div class="review-over">
-                <div class="review-rating">
-
-                    <?php if ($reviewOverview['reviewCount'] > 0): ?>
-                        <div class="avg-rating">
-                            <?= htmlspecialchars($reviewOverview['avgRating']) ?>
+            <div class="review-overview-box">
+                <?php if ($reviewOverview['reviewCount'] > 0): ?>
+                    <div class="overview-header">
+                        <div class="overview-avg">
+                            <?= htmlspecialchars($reviewOverview['avgRating']) ?> <span class="star filled">★</span>
                         </div>
-
-                        <div class="review-count">
-                            <?= htmlspecialchars($reviewOverview['reviewCount']) ?> Bewertungen
+                        <div class="overview-count">
+                            basierend auf <?= htmlspecialchars($reviewOverview['reviewCount']) ?> Bewertungen
                         </div>
+                    </div>
 
-                        <div class="review-breakdown">
-                            <div class="five-star">
-                                5 Sterne: <?= htmlspecialchars($reviewOverview['fiveStarCount']) ?>
-                                <div class="star-rating">
-                                    <?php $i = 5?>
-                                    <span class="star <?= $i,'filled' ?>">★</span>
+                    <div class="overview-breakdown">
+                        <?php
+                        // Ein kleines Array für die saubere Ausgabe mit einer Schleife
+                        $starCounts = [
+                                5 => (int)$reviewOverview['fiveStarCount'],
+                                4 => (int)$reviewOverview['fourStarCount'],
+                                3 => (int)$reviewOverview['threeStarCount'],
+                                2 => (int)$reviewOverview['twoStarCount'],
+                                1 => (int)$reviewOverview['oneStarCount']
+                        ];
 
+                        foreach ($starCounts as $stars => $count):
+                            // Prozentwert für den Balken berechnen
+                            $percent = ($reviewOverview['reviewCount'] > 0) ? round(($count / $reviewOverview['reviewCount']) * 100) : 0;
+                            ?>
+                            <div class="breakdown-row">
+                                <div class="breakdown-stars"><?= $stars ?> Sterne</div>
+                                <div class="breakdown-bar-bg">
+                                    <div class="breakdown-bar-fill" style="width: <?= $percent ?>%;"></div>
+                                </div>
+                                <div class="breakdown-num"><?= $count ?></div>
                             </div>
-                            <div class="four-star">
-                                4 Sterne: <?= htmlspecialchars($reviewOverview['fourStarCount']) ?>
-                                <div class="star-rating">
-                                 <?php $i = 4?>
-                                        <span class="star <?= $i,'filled' ?>">★</span>
-
-                            </div>
-                            <div class="three-star">
-                                3 Sterne: <?= htmlspecialchars($reviewOverview['threeStarCount']) ?>
-                                <div class="star-rating">
-                                    <?php $i = 3?>
-                                        <span class="star <?= $i,'filled' ?>">★</span>
-
-                            </div>
-                            <div class="two-star">
-                                2 Sterne: <?= htmlspecialchars($reviewOverview['twoStarCount']) ?>
-
-                            </div>
-                            <div class="one-star">
-                                1 Stern: <?= htmlspecialchars($reviewOverview['oneStarCount']) ?>
-                            </div>
-
-
-                        </div>
-
-                    <?php else: ?>
-                        <div class="no-rating">
-                            Noch keine Bewertungen
-                        </div>
-
-
-
-                    <?php endif; ?>
-                </div>
-
-
+                        <?php endforeach; ?>
+                    </div>
 
+                <?php else: ?>
+                    <div class="overview-empty">
+                        <p>Noch keine Bewertungen vorhanden.</p>
+                    </div>
+                <?php endif; ?>
             </div>
         </div>
 
-        <!-- RECHTER BEREICH – DETAILS -->
         <div class="product-right">
-
             <h1 class="product-title">
                 <?= htmlspecialchars($product['model'] ?? 'Produkt') ?>
             </h1>
 
             <div class="product-specs">
-
                 <div class="product-desc">
                     <?= htmlspecialchars($product['description']) ?>
                 </div>
 
-
                 <?php
                 while ($row = $result->fetch_assoc()) {
-
                     echo "<p><strong>{$row['name']}:</strong> ";
-
-                        if (!empty($row['valueString'])) echo $row['valueString'];
-                        if (!empty($row['valueNumber'])) echo $row['valueNumber'] . " " . $row['unit'];
-                        if (!is_null($row['valueBool'])) echo $row['valueBool'] ? "Ja" : "Nein";
-
-                        echo "</p>";
-                    }
-                    ?>
+                    if (!empty($row['valueString'])) echo $row['valueString'];
+                    if (!empty($row['valueNumber'])) echo $row['valueNumber'] . " " . $row['unit'];
+                    if (!is_null($row['valueBool'])) echo $row['valueBool'] ? "Ja" : "Nein";
+                    echo "</p>";
+                }
+                ?>
             </div>
         </div>
     </div>