hasicicsalih/parfum_agsd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add dropdown for duftstruktur and moodsetting

Browse Source
This commit is contained in:
anielsen99 2026-04-21 18:31:04 +02:00
parent ab588fd27b
commit 0786fbac8b
2 changed files with 164 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
parfum-shop/src/components/ProductDetailPage.css
View File

@ -395,6 +395,79 @@
/* --- Mood Box End --- */ /* --- 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 --- */ /* --- Right Column Start --- */
.detail-info { .detail-info {
@ -915,7 +988,7 @@
} }
.discovery-note-text p { .discovery-note-text p {
font-size: 11px; font-size: 12px;
line-height: 1.45; line-height: 1.45;
color: #d0d0d0; color: #d0d0d0;
margin: 0; margin: 0;

145
parfum-shop/src/components/ProductDetailPage.jsx
View File

@ -26,6 +26,8 @@ function ProductDetailContent({ perfumeSlug }) {
const [selectedSize, setSelectedSize] = useState("sample"); const [selectedSize, setSelectedSize] = useState("sample");
const [showReviewDetails, setShowReviewDetails] = useState(false); const [showReviewDetails, setShowReviewDetails] = useState(false);
const [commentPage, setCommentPage] = useState(0); const [commentPage, setCommentPage] = useState(0);
const [isStructureOpen, setIsStructureOpen] = useState(false);
const [isMoodOpen, setIsMoodOpen] = useState(false);
const selectedProductId = `${perfume.slug}-${selectedSize === "sample" ? "sample" : "full"}`; const selectedProductId = `${perfume.slug}-${selectedSize === "sample" ? "sample" : "full"}`;
const selectedProductLabel = selectedSize === "sample" ? "Sample" : "Full Size"; const selectedProductLabel = selectedSize === "sample" ? "Sample" : "Full Size";
const selectedPriceCents = priceToCents(perfume.prices[selectedSize]); const selectedPriceCents = priceToCents(perfume.prices[selectedSize]);
@ -146,73 +148,102 @@ function ProductDetailContent({ perfumeSlug }) {
</div> </div>
</div> </div>
<div className="detail-structure-layout"> {/* --- Accordion Group Start --- */}
<div className="detail-structure"> <div className="accordion-group">
<h3>DUFTSTRUKTUR</h3>
<div className="structure-block"> {/* Dropdown: Duftstruktur */}
<span className="structure-phase">PHASE 1: TOP NOTES (0–1 H)</span> <div className={`accordion-item ${isStructureOpen ? "is-open" : ""}`}>
<div className="structure-tags-grid"> <button
{perfume.phases.top.map((note) => ( type="button"
<span key={note} className="structure-tag"> className="accordion-toggle"
{note} onClick={() => setIsStructureOpen(!isStructureOpen)}
</span> >
))} <span>DUFTSTRUKTUR</span>
</div> <span className="accordion-icon">{isStructureOpen ? "−" : "+"}</span>
</div> </button>
<div className="structure-block"> {isStructureOpen && (
<span className="structure-phase">PHASE 2: HEART NOTES (1–4 H)</span> <div className="accordion-content">
<div className="structure-tags-grid"> <div className="detail-structure-layout">
{perfume.phases.heart.map((note) => ( <div className="detail-structure">
<span key={note} className="structure-tag"> <div className="structure-block">
{note} <span className="structure-phase">PHASE 1: TOP NOTES (0–1 H)</span>
</span> <div className="structure-tags-grid">
))} {perfume.phases.top.map((note) => (
</div> <span key={note} className="structure-tag">{note}</span>
</div> ))}
</div>
</div>
<div className="structure-block"> <div className="structure-block">
<span className="structure-phase">PHASE 3: BASE NOTES (4 H+)</span> <span className="structure-phase">PHASE 2: HEART NOTES (1–4 H)</span>
<div className="structure-tags-grid"> <div className="structure-tags-grid">
{perfume.phases.base.map((note) => ( {perfume.phases.heart.map((note) => (
<span key={note} className="structure-tag"> <span key={note} className="structure-tag">{note}</span>
{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>
<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> )}
</div> </div>
<aside className="structure-info-box"> {/* Dropdown: Moodsetting */}
<span className="structure-info-label">ZUR EINORDNUNG</span> <div className={`accordion-item ${isMoodOpen ? "is-open" : ""}`}>
<p> <button
Die Duftstruktur zeigt, wie sich der Duft über die Zeit entfaltet: type="button"
der erste Eindruck im Auftakt, die eigentliche Signatur im Herzen className="accordion-toggle"
und die Spur, die lange auf Haut und Kleidung bleibt. onClick={() => setIsMoodOpen(!isMoodOpen)}
</p> >
<span>MOODSETTING</span>
<span className="accordion-icon">{isMoodOpen ? "−" : "+"}</span>
</button>
<div className="structure-info-legend"> {isMoodOpen && (
<div> <div className="accordion-content">
<span className="structure-info-dot structure-info-dot--light" /> <div className="mood-box-content">
<span>Auftakt</span> <p>{perfume.mood}</p>
</div>
</div> </div>
<div> )}
<span className="structure-info-dot structure-info-dot--mid" /> </div>
<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>
<div className="detail-info"> <div className="detail-info">