assessment intro tweaks
This commit is contained in:
Dorian
39
src/App.vue
39
src/App.vue
@@ -403,7 +403,7 @@
|
||||
<div id="risk-banner-container"></div>
|
||||
|
||||
<!-- PROTEIN OFFER — shown only if protein_access === uncertain -->
|
||||
<div class="protein-offer" id="protein-offer-section">
|
||||
<div class="protein-offer assessment-reveal" id="protein-offer-section">
|
||||
<div class="protein-offer-badge"><span class="badge-icon" v-html="icon('lock', 12)"></span><span data-i18n="protein_offer_badge">Exclusive — DACH Region Priority Access</span></div>
|
||||
<div class="protein-offer-title" data-i18n="protein_offer_title">Secure your high-grade animal protein source</div>
|
||||
<div class="protein-offer-body" data-i18n="protein_offer_body">You indicated that your protein supply may not be secure in a crisis. We have identified an exclusive, verified source of high-grade animal protein — available with priority access for Deepstock members in Germany, Austria, and Switzerland.</div>
|
||||
@@ -414,7 +414,7 @@
|
||||
</div>
|
||||
|
||||
<!-- AI NARRATIVE SECTION -->
|
||||
<div class="narrative-section" id="narrative-section">
|
||||
<div class="narrative-section assessment-reveal" id="narrative-section">
|
||||
<div class="narrative-header">
|
||||
<span class="narrative-icon" v-html="icon('brain', 20)"></span>
|
||||
<div class="narrative-title" data-i18n="narrative_title">Your Personal Analysis</div>
|
||||
@@ -571,7 +571,7 @@
|
||||
<!-- RECOMMENDATIONS + SCENARIO TABS — collapsible panels -->
|
||||
<div id="recs-anchor"></div>
|
||||
|
||||
<details class="result-panel reveal-section" id="panel-recs" open>
|
||||
<details class="result-panel reveal-section" id="panel-recs">
|
||||
<summary class="result-panel-header">
|
||||
<span class="rp-title" data-i18n="panel_recs">Recommendations</span>
|
||||
<span class="rp-chevron" aria-hidden="true">▾</span>
|
||||
@@ -610,7 +610,7 @@
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<button class="restart-btn" @click="restartQuiz" data-i18n="restart_btn">Retake Assessment</button>
|
||||
<button class="restart-btn assessment-reveal" @click="restartQuiz" data-i18n="restart_btn">Retake Assessment</button>
|
||||
</section>
|
||||
|
||||
<!-- ABOUT -->
|
||||
@@ -1451,12 +1451,14 @@ function renderRiskBanner() {
|
||||
|
||||
const el = document.getElementById('risk-banner-container')
|
||||
if (!el) return
|
||||
const wasRevealed = !!el.querySelector('.risk-banner.revealed')
|
||||
el.innerHTML = `
|
||||
<div class="risk-banner ${riskCls}">
|
||||
<div class="risk-banner assessment-reveal assessment-top ${riskCls}">
|
||||
<div class="risk-level">${t('risk_label')}</div>
|
||||
<div class="risk-title">${riskTitle}</div>
|
||||
<div class="risk-desc">${riskDesc}</div>
|
||||
</div>`
|
||||
if (wasRevealed) el.querySelector('.risk-banner')?.classList.add('revealed')
|
||||
}
|
||||
|
||||
// Re-renders every JS-generated chunk on the results page so a mid-flight
|
||||
@@ -1501,6 +1503,7 @@ function showResults() {
|
||||
renderBudgetMeter()
|
||||
fetchNarrative()
|
||||
renderTimeline()
|
||||
revealResultsSequence()
|
||||
|
||||
setTimeout(() => { document.getElementById('about-section').classList.remove('hidden') }, 300)
|
||||
}
|
||||
@@ -1806,7 +1809,6 @@ function renderNarrative(text) {
|
||||
document.getElementById('narrative-loading').classList.add('hidden')
|
||||
const cta = document.getElementById('narrative-cta')
|
||||
if (cta) cta.classList.remove('hidden')
|
||||
revealSections()
|
||||
const el = document.getElementById('narrative-text')
|
||||
|
||||
const html = text
|
||||
@@ -1842,16 +1844,25 @@ function getFallbackNarrativeText() {
|
||||
: "**YOUR SITUATION**\n\nYour assessment shows where the key gaps are. The good news: you've taken the first step.\n\n**NEXT STEPS**\n\n• Water first: AWG or Berkey filter\n• Food reserve: 2-week dry goods\n• Energy: Solar power bank for outages"
|
||||
}
|
||||
|
||||
function revealSections() {
|
||||
// The three collapsible result panels (recs is open by default,
|
||||
// budget + timeline collapsed for progressive disclosure). The capture
|
||||
// form lives in a modal now and reveals on click instead of scroll.
|
||||
const ids = ['panel-recs', 'panel-budget', 'panel-timeline']
|
||||
ids.forEach((id, i) => {
|
||||
function revealResultsSequence() {
|
||||
const items = [
|
||||
{ el: () => document.querySelector('#risk-banner-container .risk-banner'), delay: 80 },
|
||||
{ el: () => document.getElementById('protein-offer-section')?.classList.contains('show') ? document.getElementById('protein-offer-section') : null, delay: 1180 },
|
||||
{ el: () => document.getElementById('narrative-section'), delay: 1500 },
|
||||
{ el: () => document.getElementById('panel-recs'), delay: 1820 },
|
||||
{ el: () => document.getElementById('panel-budget'), delay: 2100 },
|
||||
{ el: () => document.getElementById('panel-timeline'), delay: 2380 },
|
||||
{ el: () => document.querySelector('#results-section .restart-btn'), delay: 2780 },
|
||||
]
|
||||
items.forEach(item => {
|
||||
const el = item.el()
|
||||
if (el) el.classList.remove('revealed')
|
||||
})
|
||||
items.forEach(item => {
|
||||
setTimeout(() => {
|
||||
const el = document.getElementById(id)
|
||||
const el = item.el()
|
||||
if (el) el.classList.add('revealed')
|
||||
}, i * 200)
|
||||
}, item.delay)
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
@@ -686,7 +686,7 @@ input[type=range]::-moz-range-thumb {
|
||||
border-radius: var(--radius-lg);
|
||||
margin-bottom: 24px;
|
||||
text-align: center;
|
||||
animation: fadeUp 0.4s ease both;
|
||||
animation: none;
|
||||
}
|
||||
.risk-level { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 10px; opacity: 0.85; }
|
||||
/* Heading typeface unified with the button font (Barlow / var(--font-body))
|
||||
@@ -1788,7 +1788,7 @@ body.mod-open .mod-panel { display: block; }
|
||||
border-radius: var(--radius-lg);
|
||||
margin-bottom: 24px;
|
||||
overflow: hidden;
|
||||
animation: fadeUp 0.4s ease both;
|
||||
animation: none;
|
||||
box-shadow: 0 7px 10.6px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.7);
|
||||
}
|
||||
.narrative-header {
|
||||
@@ -1959,12 +1959,34 @@ body.mod-open .mod-panel { display: block; }
|
||||
|
||||
|
||||
/* ── STAGED REVEAL ── */
|
||||
.assessment-reveal {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateY(18px);
|
||||
}
|
||||
.assessment-reveal.revealed {
|
||||
visibility: visible;
|
||||
animation: assessmentIn 0.72s cubic-bezier(0.22, 0.61, 0.36, 1) both;
|
||||
}
|
||||
.assessment-top.revealed {
|
||||
animation: assessmentTopIn 0.95s cubic-bezier(0.22, 0.61, 0.36, 1) both;
|
||||
}
|
||||
.reveal-section {
|
||||
display: none;
|
||||
}
|
||||
.reveal-section.revealed {
|
||||
display: block;
|
||||
animation: fadeUp 0.5s ease both;
|
||||
visibility: visible;
|
||||
animation: assessmentIn 0.72s cubic-bezier(0.22, 0.61, 0.36, 1) both;
|
||||
}
|
||||
@keyframes assessmentTopIn {
|
||||
0% { opacity: 0; transform: translateY(28vh) scale(0.98); }
|
||||
55% { opacity: 1; transform: translateY(28vh) scale(1); }
|
||||
100% { opacity: 1; transform: translateY(0) scale(1); }
|
||||
}
|
||||
@keyframes assessmentIn {
|
||||
from { opacity: 0; transform: translateY(18px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
|
||||
@@ -2018,11 +2040,18 @@ body.mod-open .mod-panel { display: block; }
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 24px;
|
||||
margin-bottom: 20px;
|
||||
animation: fadeUp 0.5s ease both;
|
||||
animation: none;
|
||||
display: none;
|
||||
box-shadow: 0 7px 10.6px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.7);
|
||||
}
|
||||
.protein-offer.show { display: block; }
|
||||
.protein-offer.show.assessment-reveal:not(.revealed) {
|
||||
visibility: hidden;
|
||||
}
|
||||
.protein-offer.show.assessment-reveal.revealed {
|
||||
visibility: visible;
|
||||
animation: assessmentIn 0.72s cubic-bezier(0.22, 0.61, 0.36, 1) both;
|
||||
}
|
||||
.protein-offer-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
Reference in New Issue
Block a user