diff --git a/src/App.vue b/src/App.vue index 3425a1e..4eb064e 100644 --- a/src/App.vue +++ b/src/App.vue @@ -458,20 +458,47 @@
πŸ”’ Your data is never sold. Unsubscribe anytime. GDPR compliant.
- +
-
-
- - - - -
-
-
-
⏱ Your Action Timeline
-
-
+ +
+ + πŸ“‹ Your Recommendations + Tap a scenario to compare + + +
+
+ + + + +
+
+
+
+ +
+ + πŸ’° Budget Plan + + +
+
+
+
+ +
+ + ⏱ Action Timeline + + +
+
+
+
+
+
@@ -525,6 +552,10 @@ const T = { tab_s3: "πŸ“ˆ Hyper-\ninflation", tab_s4: "🌿 Food\nShortage", timeline_title: "⏱ Your Action Timeline", + panel_recs: "πŸ“‹ Your Recommendations", + panel_recs_hint: "Tap a scenario to compare", + panel_budget: "πŸ’° Budget Plan", + panel_timeline: "⏱ Action Timeline", restart_btn: "↩ Retake Assessment", about_title: "Why Deepstock?", about_text: "Built by preparedness researchers and city-dwelling practitioners. Every recommendation is sourced, tested, and city-apartment-compatible.", @@ -620,6 +651,10 @@ const T = { tab_s3: "πŸ“ˆ Hyper-\ninflation", tab_s4: "🌿 Lebens-\nmittelkrise", timeline_title: "⏱ Dein Aktionsplan", + panel_recs: "πŸ“‹ Deine Empfehlungen", + panel_recs_hint: "Szenario antippen zum Vergleichen", + panel_budget: "πŸ’° Budgetplan", + panel_timeline: "⏱ Aktionsplan", restart_btn: "↩ Neu starten", about_title: "Warum Kammergut?", about_text: "Entwickelt von Vorsorge-Forschern und Stadtbewohnern. Jede Empfehlung ist recherchiert, getestet und fΓΌr Stadtwohnungen geeignet.", @@ -1510,19 +1545,18 @@ function getFallbackNarrativeText() { } function revealSections() { - const sections = [ - { id:'scenario-tabs', display:'flex' }, - { id:'budget-meter-container', display:'block' }, - { id:'rec-cards-container', display:'block' }, - { id:'timeline-container', display:'block' }, - { id:'capture-form-wrap', display:'block' }, + // Capture form first, then the three collapsible result panels (recs is open + // by default, budget + timeline collapsed for progressive disclosure). + const ids = [ + 'capture-form-wrap', + 'panel-recs', + 'panel-budget', + 'panel-timeline', ] - sections.forEach((s, i) => { + ids.forEach((id, i) => { setTimeout(() => { - const el = document.getElementById(s.id) - if (!el) return - el.style.display = s.display - el.classList.add('revealed') + const el = document.getElementById(id) + if (el) el.classList.add('revealed') }, i * 200) }) } diff --git a/src/styles.css b/src/styles.css index 4691ff4..d84cb1c 100644 --- a/src/styles.css +++ b/src/styles.css @@ -553,6 +553,82 @@ input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; .tl-action { font-size: 14px; color: var(--bright); line-height: 1.5; } .tl-cost { font-family: var(--font-mono); font-size: 12px; color: var(--green-bright); margin-top: 4px; } +/* ── RESULT PANELS β€” collapsible accordions for progressive disclosure. + Recommendations open by default; Budget and Timeline collapsed so the + results page doesn't overwhelm. The panel itself becomes the white-paint + card; inner sections (.budget-meter, .timeline, .scenario-tabs) drop their + own box treatment so the panel frame is the only container. */ +.result-panel { + background: #FAFAFA; + border: 1px solid rgba(0,0,0,0.06); + border-radius: var(--radius-lg); + margin-bottom: 14px; + overflow: hidden; + box-shadow: 0 7px 10.6px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.7); +} +.result-panel-header { + display: flex; + align-items: center; + gap: 12px; + padding: 16px 18px; + cursor: pointer; + list-style: none; + user-select: none; + -webkit-tap-highlight-color: transparent; + transition: background 0.15s ease; +} +.result-panel-header::-webkit-details-marker { display: none; } +.result-panel-header:hover { background: rgba(0,0,0,0.02); } +.rp-title { + font-family: var(--font-display); + font-weight: 700; + font-size: 17px; + color: var(--text); + flex: 1; + letter-spacing: 0.01em; + line-height: 1.3; +} +.rp-hint { + font-size: 10px; + color: var(--text-dim); + font-family: var(--font-mono); + letter-spacing: 0.08em; + text-transform: uppercase; + flex-shrink: 0; +} +@media (max-width: 480px) { + .rp-hint { display: none; } +} +.rp-chevron { + font-size: 14px; + color: var(--text-dim); + transition: transform 0.2s ease; + flex-shrink: 0; +} +.result-panel[open] .rp-chevron { transform: rotate(180deg); } +.result-panel-body { + padding: 0 18px 18px; +} +/* Strip box treatment from inner cards when wrapped in a panel β€” the panel + is now the visible container. */ +.result-panel-body .budget-meter, +.result-panel-body .timeline { + background: transparent; + border: none; + border-radius: 0; + padding: 0; + margin: 0; + box-shadow: none; + animation: none; +} +.result-panel-body .scenario-tabs { + margin-bottom: 16px; + animation: none; +} +.result-panel-body .rec-cards { animation: none; } +/* Drop the redundant inner timeline title β€” the panel header replaces it. */ +.result-panel-body .tl-title { display: none; } + /* Results email capture */ .results-email { background: linear-gradient(135deg, var(--red-dim), #141210); @@ -693,6 +769,13 @@ body.paint-green .qpb-logo { text-decoration: none; } .quiz-progress-bar .progress-wrap { flex: 1; max-width: none; margin: 0; } +/* Desktop β€” cap the progress bar at the form width (540px) so it reads + tighter and lines up with the question card below. Auto margins on the + flex item absorb leftover horizontal space symmetrically, centring the + bar between the logo (left) and lang-toggle (right). */ +@media (min-width: 768px) { + .quiz-progress-bar .progress-wrap { max-width: 540px; margin: 0 auto; } +} .quiz-progress-bar .lang-toggle { flex-shrink: 0; } @media (max-width: 767px) { .quiz-progress-bar .lang-toggle { display: none; }