diff --git a/assets/css/productpage.css b/assets/css/productpage.css index e69de29..27df462 100644 --- a/assets/css/productpage.css +++ b/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; + } +} diff --git a/productpage.php b/productpage.php index f9e240b..ffd3dc0 100644 --- a/productpage.php +++ b/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,18 +71,45 @@ $productId = isset($_GET['id']) ? (int)$_GET['id'] : 0; $product = $result->fetch_assoc(); ?> - fetch_assoc()) { - echo "

{$row['name']}: "; +

+ +
+
+ <?= htmlspecialchars($product['model'] ?? 'Produktbild') ?> +
+
- 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 "

"; - } +

+ +

- ?> +
+ +
+ +
+ + + fetch_assoc()) { + + echo "

{$row['name']}: "; + + 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 "

"; + } + ?> +
+
+
close(); ?> @@ -91,7 +121,7 @@ $productId = isset($_GET['id']) ? (int)$_GET['id'] : 0; - + \ No newline at end of file