add dropdown for duftstruktur and moodsetting
This commit is contained in:
anielsen99
parent
ab588fd27b
commit
0786fbac8b
@ -395,6 +395,79 @@
|
||||
|
||||
/* --- Mood Box End --- */
|
||||
|
||||
/* --- Accordion / Dropdown Components Start --- */
|
||||
|
||||
.accordion-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
margin-top: 26px;
|
||||
}
|
||||
|
||||
.accordion-item {
|
||||
background: #f5f5f5;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-left: 3px solid #d9d9d9; /* Subtiler Rahmen im Normalzustand */
|
||||
transition: border-color 0.2s ease, background 0.2s ease;
|
||||
}
|
||||
|
||||
.accordion-item.is-open {
|
||||
border-left-color: #ff6a00; /* Farbabgleich: Orange, wenn offen */
|
||||
background: #fcfcfc;
|
||||
}
|
||||
|
||||
.accordion-toggle {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 18px 20px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.24em;
|
||||
font-weight: 500;
|
||||
color: #1f1f1f;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.accordion-toggle:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.accordion-icon {
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
color: #ff6a00;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.accordion-content {
|
||||
padding: 0 20px 22px 20px;
|
||||
}
|
||||
|
||||
/* Bereinigung der alten Strukturen für die Dropdowns */
|
||||
.detail-structure-layout {
|
||||
margin-top: 6px; /* Angepasst für das Innere des Dropdowns */
|
||||
}
|
||||
|
||||
.detail-structure {
|
||||
background: transparent; /* Hintergrund wird jetzt vom Akkordeon gesteuert */
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.mood-box-content p {
|
||||
font-size: 16px;
|
||||
line-height: 1.65;
|
||||
margin: 0;
|
||||
color: #1f1f1f;
|
||||
padding-top: 6px;
|
||||
}
|
||||
|
||||
/* --- Accordion / Dropdown Components End --- */
|
||||
|
||||
/* --- Right Column Start --- */
|
||||
|
||||
.detail-info {
|
||||
@ -915,7 +988,7 @@
|
||||
}
|
||||
|
||||
.discovery-note-text p {
|
||||
font-size: 11px;
|
||||
font-size: 12px;
|
||||
line-height: 1.45;
|
||||
color: #d0d0d0;
|
||||
margin: 0;
|
||||
|
||||
@ -26,6 +26,8 @@ function ProductDetailContent({ perfumeSlug }) {
|
||||
const [selectedSize, setSelectedSize] = useState("sample");
|
||||
const [showReviewDetails, setShowReviewDetails] = useState(false);
|
||||
const [commentPage, setCommentPage] = useState(0);
|
||||
const [isStructureOpen, setIsStructureOpen] = useState(false);
|
||||
const [isMoodOpen, setIsMoodOpen] = useState(false);
|
||||
const selectedProductId = `${perfume.slug}-${selectedSize === "sample" ? "sample" : "full"}`;
|
||||
const selectedProductLabel = selectedSize === "sample" ? "Sample" : "Full Size";
|
||||
const selectedPriceCents = priceToCents(perfume.prices[selectedSize]);
|
||||
@ -146,73 +148,102 @@ function ProductDetailContent({ perfumeSlug }) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="detail-structure-layout">
|
||||
<div className="detail-structure">
|
||||
<h3>DUFTSTRUKTUR</h3>
|
||||
{/* --- Accordion Group Start --- */}
|
||||
<div className="accordion-group">
|
||||
|
||||
{/* Dropdown: Duftstruktur */}
|
||||
<div className={`accordion-item ${isStructureOpen ? "is-open" : ""}`}>
|
||||
<button
|
||||
type="button"
|
||||
className="accordion-toggle"
|
||||
onClick={() => setIsStructureOpen(!isStructureOpen)}
|
||||
>
|
||||
<span>DUFTSTRUKTUR</span>
|
||||
<span className="accordion-icon">{isStructureOpen ? "−" : "+"}</span>
|
||||
</button>
|
||||
|
||||
{isStructureOpen && (
|
||||
<div className="accordion-content">
|
||||
<div className="detail-structure-layout">
|
||||
<div className="detail-structure">
|
||||
<div className="structure-block">
|
||||
<span className="structure-phase">PHASE 1: TOP NOTES (0–1 H)</span>
|
||||
<div className="structure-tags-grid">
|
||||
{perfume.phases.top.map((note) => (
|
||||
<span key={note} className="structure-tag">{note}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="structure-block">
|
||||
<span className="structure-phase">PHASE 1: TOP NOTES (0–1 H)</span>
|
||||
<div className="structure-tags-grid">
|
||||
{perfume.phases.top.map((note) => (
|
||||
<span key={note} className="structure-tag">
|
||||
{note}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="structure-block">
|
||||
<span className="structure-phase">PHASE 2: HEART NOTES (1–4 H)</span>
|
||||
<div className="structure-tags-grid">
|
||||
{perfume.phases.heart.map((note) => (
|
||||
<span key={note} className="structure-tag">{note}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="structure-block">
|
||||
<span className="structure-phase">PHASE 2: HEART NOTES (1–4 H)</span>
|
||||
<div className="structure-tags-grid">
|
||||
{perfume.phases.heart.map((note) => (
|
||||
<span key={note} className="structure-tag">
|
||||
{note}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="structure-block">
|
||||
<span className="structure-phase">PHASE 3: BASE NOTES (4 H+)</span>
|
||||
<div className="structure-tags-grid">
|
||||
{perfume.phases.base.map((note) => (
|
||||
<span key={note} className="structure-tag">{note}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="structure-block">
|
||||
<span className="structure-phase">PHASE 3: BASE NOTES (4 H+)</span>
|
||||
<div className="structure-tags-grid">
|
||||
{perfume.phases.base.map((note) => (
|
||||
<span key={note} className="structure-tag">
|
||||
{note}
|
||||
</span>
|
||||
))}
|
||||
<aside className="structure-info-box">
|
||||
<span className="structure-info-label">ZUR EINORDNUNG</span>
|
||||
<p>
|
||||
Die Duftstruktur zeigt, wie sich der Duft über die Zeit entfaltet:
|
||||
der erste Eindruck im Auftakt, die eigentliche Signatur im Herzen
|
||||
und die Spur, die lange auf Haut und Kleidung bleibt.
|
||||
</p>
|
||||
|
||||
<div className="structure-info-legend">
|
||||
<div>
|
||||
<span className="structure-info-dot structure-info-dot--light" />
|
||||
<span>Auftakt</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="structure-info-dot structure-info-dot--mid" />
|
||||
<span>Herz</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="structure-info-dot structure-info-dot--strong" />
|
||||
<span>Basis</span>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<aside className="structure-info-box">
|
||||
<span className="structure-info-label">ZUR EINORDNUNG</span>
|
||||
<p>
|
||||
Die Duftstruktur zeigt, wie sich der Duft über die Zeit entfaltet:
|
||||
der erste Eindruck im Auftakt, die eigentliche Signatur im Herzen
|
||||
und die Spur, die lange auf Haut und Kleidung bleibt.
|
||||
</p>
|
||||
|
||||
<div className="structure-info-legend">
|
||||
<div>
|
||||
<span className="structure-info-dot structure-info-dot--light" />
|
||||
<span>Auftakt</span>
|
||||
{/* Dropdown: Moodsetting */}
|
||||
<div className={`accordion-item ${isMoodOpen ? "is-open" : ""}`}>
|
||||
<button
|
||||
type="button"
|
||||
className="accordion-toggle"
|
||||
onClick={() => setIsMoodOpen(!isMoodOpen)}
|
||||
>
|
||||
<span>MOODSETTING</span>
|
||||
<span className="accordion-icon">{isMoodOpen ? "−" : "+"}</span>
|
||||
</button>
|
||||
|
||||
{isMoodOpen && (
|
||||
<div className="accordion-content">
|
||||
<div className="mood-box-content">
|
||||
<p>{perfume.mood}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span className="structure-info-dot structure-info-dot--mid" />
|
||||
<span>Herz</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="structure-info-dot structure-info-dot--strong" />
|
||||
<span>Basis</span>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<div className="mood-box">
|
||||
<span className="mood-label">MOODSETTING</span>
|
||||
<p>{perfume.mood}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{/* --- Accordion Group End --- */}
|
||||
</div>
|
||||
|
||||
<div className="detail-info">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user