diff --git a/assets/css/productpage.css b/assets/css/productpage.css index 7528558..fac760d 100644 --- a/assets/css/productpage.css +++ b/assets/css/productpage.css @@ -632,4 +632,82 @@ color: #94a3b8; padding: 0.5rem 0; font-size: 0.85rem; +} + +/* ========================================================== + REVIEW HINZUFÜGEN (Formular) + ========================================================== */ + +.review-add { + max-width: 1200px; + margin: 0 auto 2rem; + padding: 0 1.5rem; + animation: fadeInUp 0.5s ease 0.4s both; +} + +.review-input-form { + display: flex; + flex-direction: column; + gap: 1.2rem; +} + +/* --- Sterne-Auswahl (Radio-Button Trick) --- */ +.rating-input { + display: flex; + /* Dreht die Reihenfolge um für den Hover-Effekt */ + flex-direction: row-reverse; + justify-content: flex-end; + gap: 0.3rem; +} + +/* Versteckt die eigentlichen runden Radio-Buttons */ +.rating-input input[type="radio"] { + display: none; +} + +/* Stylt die Labels (die Sterne) */ +.rating-input label { + font-size: 2.2rem; + color: #475569; /* Dunkelgrau für leere Sterne */ + cursor: pointer; + transition: color 0.2s ease, transform 0.2s ease; +} + +/* Hover-Logik: Färbt den gehoverten/geklickten Stern und alle "folgenden" (durch row-reverse sind das die linken) */ +.rating-input label:hover, +.rating-input label:hover ~ label, +.rating-input input[type="radio"]:checked ~ label { + color: #fbbf24; /* Das gleiche Gelb wie bei deinen bestehenden Sternen */ +} + +/* Kleiner Pop-Effekt beim drüberfahren */ +.rating-input label:hover { + transform: scale(1.15); +} + +/* --- Textarea --- */ +.review-comment-input { + width: 100%; + background: #1f2a3a; + border: 1px solid #2f3c52; + border-radius: 8px; + padding: 1rem; + color: #cbd5e1; + font-family: inherit; + font-size: 1rem; + resize: vertical; /* Nuter kann das Feld nach unten größer ziehen */ + transition: all var(--transition-smooth); +} + +.review-comment-input:focus { + outline: none; + border-color: #4ade80; /* Passt zu deinem grünen Button-Stil */ + background: #243248; + box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.1); +} + +/* --- Button Positionierung --- */ +.review-input-form .auth__submit { + align-self: flex-start; /* Button bleibt linksbündig und wird nicht über die ganze Breite gestreckt */ + padding: 0.8rem 2.5rem; } \ No newline at end of file diff --git a/productpage.php b/productpage.php index f4193ca..3381a24 100644 --- a/productpage.php +++ b/productpage.php @@ -335,38 +335,76 @@ $productId = isset($_GET['id']) ? (int)$_GET['id'] : 0;
Es gibt noch keine Bewertungen.