product page first design

assets/css/productpage.css

@@ -0,0 +1,93 @@
+/* Gesamter Bereich */
+.product-wrapper {
+    max-width: 1200px;
+    margin: 60px auto;
+    padding: 0 20px;
+
+    display: flex;
+    gap: 60px;
+}
+
+/* LINKER BEREICH */
+.product-left {
+    flex: 1;
+}
+
+.product-image-box {
+    background: #ffffff;
+    padding: 40px;
+    border-radius: 14px;
+    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
+    text-align: center;
+}
+
+.product-image-box img {
+    max-width: 100%;
+    height: auto;
+    object-fit: contain;
+}
+
+/* RECHTER BEREICH */
+.product-right {
+    flex: 1.2;
+}
+
+
+/* Produkttitel */
+.product-title {
+    font-size: 32px;
+    color: white;
+    font-weight: 600;
+    margin-bottom: 30px;
+    border-bottom: 2px solid #eaeaea;
+    padding-bottom: 15px;
+}
+
+/* Beschreibung */
+.product-desc {
+    font-size: 23px;
+    line-height: 1.7;
+    color: #ffffff;
+    margin-bottom: 15px;
+}
+
+/* Spezifikationen */
+.product-specs {
+    display: flex;
+    color: #ffffff;
+    flex-direction: column;
+    gap: 12px;
+}
+S
+/* Einzelne Zeile */
+.spec-row {
+    display: flex;
+    justify-content: space-between;
+    padding: 12px 16px;
+    background: #f9f9f9;
+    border-radius: 8px;
+    transition: background 0.2s ease;
+}
+
+.spec-row:hover {
+    background: #f0f0f0;
+}
+
+/* Name links */
+.spec-name {
+    font-weight: 500;
+    color: #444;
+}
+
+/* Wert rechts */
+.spec-value {
+    font-weight: 600;
+    color: #111;
+}
+
+/* Responsive */
+@media (max-width: 900px) {
+    .product-wrapper {
+        flex-direction: column;
+    }
+}

productpage.php

@@ -42,7 +42,10 @@ $productId = isset($_GET['id']) ? (int)$_GET['id'] : 0;
         a.dataType,
         pa.valueString,
         pa.valueNumber,
-        pa.valueBool
+        pa.valueBool,
+        p.model,
+        p.description,
+        p.imagePath
     FROM products p
 
     INNER JOIN categoryAttributes ca
@@ -68,8 +71,33 @@ $productId = isset($_GET['id']) ? (int)$_GET['id'] : 0;
     $product = $result->fetch_assoc();
     ?>
 
+    <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') ?>">
+            </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'];
@@ -78,8 +106,10 @@ $productId = isset($_GET['id']) ? (int)$_GET['id'] : 0;
 
                         echo "</p>";
                     }
-
                     ?>
+            </div>
+        </div>
+    </div>
 
 
     <?php $stmt->close(); ?>
@@ -91,7 +121,7 @@ $productId = isset($_GET['id']) ? (int)$_GET['id'] : 0;
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <link rel="stylesheet" href="assets/css/compcard.css">
+    <link rel="stylesheet" href="assets/css/productpage.css">
 </head>
 
 <?php include 'footer.php'; ?>