Files
wellnessWheel/mockup-parent-caregiver.html
T

271 lines
24 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wheel of Wellness — Parent & Caregiver Assessment</title>
<link rel="stylesheet" href="shared-styles.css">
<style>
.audience-badge {
display: inline-flex; align-items: center; gap: 6px;
background: rgba(232,131,92,0.1); color: var(--secondary);
font-size: 10.5px; font-weight: 700; padding: 4px 14px;
border-radius: 16px; margin-top: 8px; letter-spacing: 0.3px;
}
.household-selector {
display: flex; gap: 10px; justify-content: center; margin-bottom: 8px;
}
.household-btn {
padding: 6px 18px; border-radius: 20px; font-size: 11.5px; font-weight: 600;
border: 1.5px solid var(--gray-200); background: white; color: var(--gray-500);
cursor: pointer;
}
.household-btn.selected {
background: var(--secondary); border-color: var(--secondary); color: white;
}
.evidence-footnote {
position: absolute; bottom: 40px; left: 0; right: 0;
text-align: center; font-size: 8px; color: var(--gray-300);
}
</style>
</head>
<body>
<!-- ═══════════ PAGE 1: LANDING ═══════════ -->
<div class="page">
<div class="browser-frame">
<div class="browser-dots"><div class="browser-dot red"></div><div class="browser-dot yellow"></div><div class="browser-dot green"></div></div>
<div class="browser-url-bar"><span class="lock">🔒</span><span>specialneeds.help/wellness/parent</span></div>
</div>
<div class="app-content">
<div class="app-header">
<div class="brand"><div class="logo-icon">🧠</div><div class="brand-text">HELPipedia <span class="divider">|</span> <span class="sub">SpecialNeeds.help</span></div></div>
<div class="nav-links"><a href="#">Home</a><a href="#">Resources</a><a href="#" class="active">Assessment</a><a href="#">About</a></div>
</div>
<div class="page1-hero">
<div class="eyebrow">For Parents & Caregivers</div>
<h1>Wheel of Wellness<br>Caregiver Check</h1>
<div class="subtitle">Take care of yourself so you can keep showing up</div>
<div class="household-selector">
<button class="household-btn selected">🧑‍🧒 Parenting Solo</button>
<button class="household-btn">👨‍👩‍👧 Parenting Together</button>
</div>
<p class="intro">
You spend so much time taking care of others. This quick check helps you
see how YOU are doing — your energy, your feelings, your support system.
Based on tools used by doctors who work with caregivers like you.
</p>
<div class="feature-pills">
<div class="feature-pill"><span class="icon"></span> Takes ~5 minutes</div>
<div class="feature-pill"><span class="icon">🎯</span> Results made for you</div>
<div class="feature-pill"><span class="icon">🔗</span> Links to help</div>
<div class="feature-pill"><span class="icon">🔒</span> Private & safe</div>
</div>
<div class="wheel-container">
<svg viewBox="0 0 280 280" width="280" height="280"><defs><filter id="wS" x="-10%" y="-10%" width="120%" height="120%"><feDropShadow dx="0" dy="2" stdDeviation="4" flood-opacity="0.12"/></filter></defs><g filter="url(#wS)" transform="translate(140,140)"><circle r="120" fill="white" stroke="#E8E8E8" stroke-width="1"/><path d="M 0,-120 A 120,120 0 0,1 103.9,-60 L 0,0 Z" fill="#2E7D6F" opacity="0.85"/><path d="M 103.9,-60 A 120,120 0 0,1 103.9,60 L 0,0 Z" fill="#E8835C" opacity="0.85"/><path d="M 103.9,60 A 120,120 0 0,1 0,120 L 0,0 Z" fill="#5BA4CF" opacity="0.85"/><path d="M 0,120 A 120,120 0 0,1 -103.9,60 L 0,0 Z" fill="#F4B942" opacity="0.85"/><path d="M -103.9,60 A 120,120 0 0,1 -103.9,-60 L 0,0 Z" fill="#9B72CF" opacity="0.85"/><path d="M -103.9,-60 A 120,120 0 0,1 0,-120 L 0,0 Z" fill="#E85C4A" opacity="0.85"/><circle r="40" fill="white" stroke="#E8E8E8" stroke-width="1"/><text text-anchor="middle" y="-4" font-size="9" font-weight="700" fill="#2E7D6F" font-family="Inter,sans-serif">WHEEL OF</text><text text-anchor="middle" y="10" font-size="9" font-weight="700" fill="#2E7D6F" font-family="Inter,sans-serif">WELLNESS</text><g transform="translate(48,-80)"><text text-anchor="middle" y="0" font-size="18">💪</text><text text-anchor="middle" y="16" font-size="10" font-weight="700" fill="white" font-family="Inter,sans-serif">Physical</text></g><g transform="translate(100,0)"><text text-anchor="middle" y="0" font-size="18">💗</text><text text-anchor="middle" y="16" font-size="10" font-weight="700" fill="white" font-family="Inter,sans-serif">Emotional</text></g><g transform="translate(55,72)"><text text-anchor="middle" y="0" font-size="18">🤝</text><text text-anchor="middle" y="16" font-size="10" font-weight="700" fill="white" font-family="Inter,sans-serif">Social</text></g><g transform="translate(-55,72)"><text text-anchor="middle" y="0" font-size="18">📋</text><text text-anchor="middle" y="16" font-size="10" font-weight="700" fill="white" font-family="Inter,sans-serif">Daily Life</text></g><g transform="translate(-100,0)"><text text-anchor="middle" y="0" font-size="18"></text><text text-anchor="middle" y="16" font-size="10" font-weight="700" fill="white" font-family="Inter,sans-serif">Purpose</text></g><g transform="translate(-48,-80)"><text text-anchor="middle" y="0" font-size="18">🌱</text><text text-anchor="middle" y="16" font-size="10" font-weight="700" fill="white" font-family="Inter,sans-serif">Growth</text></g></g></svg>
</div>
<button class="cta-button">Start Your Check <span class="arrow"></span></button>
<div class="cta-subtext">Free · No account needed · Your answers are private</div>
<div class="audience-badge">🧑‍🧒 For Parents & Caregivers</div>
</div>
<div class="evidence-footnote">Adapted from Caregiver Well-Being Scale Short Form (Tebb & Berg-Weger, 2016) and CAREPAL-8 (CAREPAL, 2024)</div>
<div class="app-footer"><div class="footer-inner">Powered by HELPipedia<div class="footer-divider"></div>helpipedia.org<div class="footer-divider"></div>SpecialNeeds.help</div></div>
</div>
<div class="screen-indicator">Screen 1 of 4</div>
</div>
<!-- ═══════════ PAGE 2: QUESTIONS ═══════════ -->
<div class="page">
<div class="browser-frame">
<div class="browser-dots"><div class="browser-dot red"></div><div class="browser-dot yellow"></div><div class="browser-dot green"></div></div>
<div class="browser-url-bar"><span class="lock">🔒</span><span>specialneeds.help/wellness/parent/questions</span></div>
</div>
<div class="app-content">
<div class="app-header">
<div class="brand"><div class="logo-icon">🧠</div><div class="brand-text">HELPipedia <span class="divider">|</span> <span class="sub">SpecialNeeds.help</span></div></div>
<div class="nav-links"><a href="#">Home</a><a href="#">Resources</a><a href="#" class="active">Assessment</a><a href="#">About</a></div>
</div>
<div class="questions-page">
<div class="progress-section">
<div class="progress-header"><span class="label">Your Caregiver Check</span><span class="count">Question 4 of 18</span></div>
<div class="progress-bar-track"><div class="progress-bar-fill" style="width:22%"></div></div>
</div>
<div class="dimension-indicator">
<span class="dim-badge physical">💪 Physical</span><span class="dim-badge emotional">💗 Emotional</span><span class="dim-badge social">🤝 Social</span><span class="dim-badge daily-life">📋 Daily Life</span><span class="dim-badge purpose">⭐ Purpose</span><span class="dim-badge growth">🌱 Growth</span>
</div>
<!-- Q1: Physical (caregiver self-neglect) -->
<div class="question-card q-physical">
<span class="question-number">Q 1 / 18</span>
<div class="q-dim-label">💪 Physical Wellness</div>
<div class="q-text">When did you last see a doctor for YOUR own health check?</div>
<div class="options-grid">
<div class="option-item selected"><div class="radio-circle"></div>Not in the past year</div>
<div class="option-item"><div class="radio-circle"></div>6-12 months ago</div>
<div class="option-item"><div class="radio-circle"></div>In the past 6 months</div>
<div class="option-item"><div class="radio-circle"></div>In the past 3 months</div>
</div>
</div>
<!-- Q2: Emotional (caregiver burden) -->
<div class="question-card q-emotional">
<span class="question-number">Q 4 / 18</span>
<div class="q-dim-label">💗 Emotional Wellness</div>
<div class="q-text">How often do you feel worn out or weighed down by all you have to do?</div>
<div class="options-grid">
<div class="option-item"><div class="radio-circle"></div>Almost every day</div>
<div class="option-item selected"><div class="radio-circle"></div>More days than not</div>
<div class="option-item"><div class="radio-circle"></div>Once in a while</div>
<div class="option-item"><div class="radio-circle"></div>Rarely</div>
</div>
</div>
<!-- Q3: Social (isolation) -->
<div class="question-card q-social">
<span class="question-number">Q 7 / 18</span>
<div class="q-dim-label">🤝 Social Wellness</div>
<div class="q-text">Do you have someone who can watch your kids so you can take a break?</div>
<div class="options-grid">
<div class="option-item selected"><div class="radio-circle"></div>No, not really</div>
<div class="option-item"><div class="radio-circle"></div>Sometimes, but not often</div>
<div class="option-item"><div class="radio-circle"></div>Yes, when I plan ahead</div>
<div class="option-item"><div class="radio-circle"></div>Yes, I have reliable help</div>
</div>
</div>
<!-- Q4: Daily Life (system navigation) -->
<div class="question-card q-daily-life">
<span class="question-number">Q 10 / 18</span>
<div class="q-dim-label">📋 Daily Life Wellness</div>
<div class="q-text">How confident are you about handling school meetings, doctor visits, and paperwork for your family?</div>
<div class="options-grid">
<div class="option-item"><div class="radio-circle"></div>Not confident</div>
<div class="option-item"><div class="radio-circle"></div>A little confident</div>
<div class="option-item selected"><div class="radio-circle"></div>Pretty confident</div>
<div class="option-item"><div class="radio-circle"></div>Very confident</div>
</div>
</div>
<!-- Q5: Purpose (meaning beyond caregiving) -->
<div class="question-card q-purpose">
<span class="question-number">Q 13 / 18</span>
<div class="q-dim-label">⭐ Purpose Wellness</div>
<div class="q-text">Do you feel accepted and respected by the professionals who work with your family?</div>
<div class="options-grid">
<div class="option-item"><div class="radio-circle"></div>Not at all</div>
<div class="option-item"><div class="radio-circle"></div>Sometimes</div>
<div class="option-item selected"><div class="radio-circle"></div>Most of the time</div>
<div class="option-item"><div class="radio-circle"></div>Yes, always</div>
</div>
</div>
<!-- Q6: Growth (personal development) -->
<div class="question-card q-growth">
<span class="question-number">Q 16 / 18</span>
<div class="q-dim-label">🌱 Growth Wellness</div>
<div class="q-text">In the past month, have you done anything just for you (a class, a hobby, time with a friend)?</div>
<div class="options-grid">
<div class="option-item"><div class="radio-circle"></div>No, not at all</div>
<div class="option-item"><div class="radio-circle"></div>Once or twice</div>
<div class="option-item selected"><div class="radio-circle"></div>A few times</div>
<div class="option-item"><div class="radio-circle"></div>Yes, regularly</div>
</div>
</div>
</div>
<div class="app-footer"><div class="footer-inner">Powered by HELPipedia<div class="footer-divider"></div>helpipedia.org<div class="footer-divider"></div>SpecialNeeds.help</div></div>
</div>
<div class="screen-indicator">Screen 2 of 4</div>
</div>
<!-- ═══════════ PAGE 3: RESULTS ═══════════ -->
<div class="page">
<div class="browser-frame">
<div class="browser-dots"><div class="browser-dot red"></div><div class="browser-dot yellow"></div><div class="browser-dot green"></div></div>
<div class="browser-url-bar"><span class="lock">🔒</span><span>specialneeds.help/wellness/parent/results</span></div>
</div>
<div class="app-content">
<div class="app-header">
<div class="brand"><div class="logo-icon">🧠</div><div class="brand-text">HELPipedia <span class="divider">|</span> <span class="sub">SpecialNeeds.help</span></div></div>
<div class="nav-links"><a href="#">Home</a><a href="#">Resources</a><a href="#" class="active">Results</a><a href="#">About</a></div>
</div>
<div class="results-page">
<div class="results-header">
<div class="completion-badge">✓ Check Complete</div>
<h2>Your Caregiver Snapshot</h2>
<p class="summary">Here is what your answers show about how you are doing across six parts of wellness. Areas with lower scores may need attention so you can keep showing up for the people you love.</p>
</div>
<div class="overall-banner">
<div class="overall-label">Overall Wellness Score</div>
<div class="overall-score">44 <span>/ 100</span></div>
<div class="overall-text">You give a lot to others. Some parts of your own wellness could use care.</div>
</div>
<div class="results-body">
<div class="results-wheel">
<svg viewBox="0 0 300 300" width="300" height="300"><defs><filter id="s2" x="-10%" y="-10%" width="120%" height="120%"><feDropShadow dx="0" dy="2" stdDeviation="3" flood-opacity="0.1"/></filter></defs><g transform="translate(150,150)" filter="url(#s2)"><circle r="130" fill="white" stroke="#E8E8E8" stroke-width="1"/><circle r="32.5" fill="none" stroke="#F0F0F0" stroke-width="0.5" stroke-dasharray="3,3"/><circle r="65" fill="none" stroke="#F0F0F0" stroke-width="0.5" stroke-dasharray="3,3"/><circle r="97.5" fill="none" stroke="#F0F0F0" stroke-width="0.5" stroke-dasharray="3,3"/><circle r="130" fill="none" stroke="#F0F0F0" stroke-width="0.5" stroke-dasharray="3,3"/><polygon points="0,-26 56.3,-45.5 43.3,43.33 0,58.5 -57.1,33 -18.6,-46.8" fill="rgba(46,125,111,0.15)" stroke="var(--primary)" stroke-width="2"/><circle cx="0" cy="-26" r="5" fill="var(--red)"/><circle cx="56.3" cy="-45.5" r="5" fill="var(--yellow)"/><circle cx="43.3" cy="43.33" r="5" fill="var(--red)"/><circle cx="0" cy="58.5" r="5" fill="var(--green)"/><circle cx="-57.1" cy="33" r="5" fill="var(--yellow)"/><circle cx="-18.6" cy="-46.8" r="5" fill="var(--orange)"/><line x1="0" y1="0" x2="0" y2="-130" stroke="#E8E8E8" stroke-width="0.5"/><line x1="0" y1="0" x2="112.6" y2="-65" stroke="#E8E8E8" stroke-width="0.5"/><line x1="0" y1="0" x2="112.6" y2="65" stroke="#E8E8E8" stroke-width="0.5"/><line x1="0" y1="0" x2="0" y2="130" stroke="#E8E8E8" stroke-width="0.5"/><line x1="0" y1="0" x2="-112.6" y2="65" stroke="#E8E8E8" stroke-width="0.5"/><line x1="0" y1="0" x2="-112.6" y2="-65" stroke="#E8E8E8" stroke-width="0.5"/><g><rect x="-44" y="-155" width="88" height="22" rx="11" fill="var(--red-light)" stroke="var(--red)" stroke-width="1"/><text x="0" y="-141" text-anchor="middle" font-size="10" font-weight="700" fill="var(--red)" font-family="Inter,sans-serif">💪 Physical</text></g><g><rect x="72" y="-85" width="88" height="22" rx="11" fill="var(--yellow-light)" stroke="var(--yellow)" stroke-width="1"/><text x="116" y="-71" text-anchor="middle" font-size="10" font-weight="700" fill="#F9A825" font-family="Inter,sans-serif">💗 Emotional</text></g><g><rect x="72" y="63" width="76" height="22" rx="11" fill="var(--red-light)" stroke="var(--red)" stroke-width="1"/><text x="110" y="77" text-anchor="middle" font-size="10" font-weight="700" fill="var(--red)" font-family="Inter,sans-serif">🤝 Social</text></g><g><rect x="-44" y="133" width="88" height="22" rx="11" fill="var(--green-light)" stroke="var(--green)" stroke-width="1"/><text x="0" y="147" text-anchor="middle" font-size="10" font-weight="700" fill="var(--green)" font-family="Inter,sans-serif">📋 Daily Life</text></g><g><rect x="-160" y="63" width="80" height="22" rx="11" fill="var(--yellow-light)" stroke="var(--yellow)" stroke-width="1"/><text x="-120" y="77" text-anchor="middle" font-size="10" font-weight="700" fill="#F9A825" font-family="Inter,sans-serif">⭐ Purpose</text></g><g><rect x="-160" y="-85" width="80" height="22" rx="11" fill="var(--orange-light)" stroke="var(--orange)" stroke-width="1"/><text x="-120" y="-71" text-anchor="middle" font-size="10" font-weight="700" fill="var(--orange)" font-family="Inter,sans-serif">🌱 Growth</text></g><circle r="18" fill="white" stroke="#E8E8E8" stroke-width="1"/><text text-anchor="middle" y="1" font-size="10" font-weight="800" fill="var(--primary)" font-family="Inter,sans-serif">44</text><text text-anchor="middle" y="11" font-size="6" fill="var(--gray-400)" font-family="Inter,sans-serif">/100</text></g></svg>
</div>
<div class="dimensions-grid">
<div class="dim-card"><div class="dim-card-header"><div class="dim-card-name"><span class="dim-icon">💪</span> Physical</div><span class="status-badge needs-attention">Needs Attention</span></div><div class="score-bar"><div class="score-fill red" style="width:20%"></div></div><div class="dim-score">Score: 20/100</div><div class="dim-desc">You may be putting your own health last. Even small acts of self-care can give you more energy.</div></div>
<div class="dim-card"><div class="dim-card-header"><div class="dim-card-name"><span class="dim-icon">💗</span> Emotional</div><span class="status-badge moderate">Okay</span></div><div class="score-bar"><div class="score-fill yellow" style="width:35%"></div></div><div class="dim-score">Score: 35/100</div><div class="dim-desc">You carry a lot. Having someone to talk to could help lighten the load.</div></div>
<div class="dim-card"><div class="dim-card-header"><div class="dim-card-name"><span class="dim-icon">🤝</span> Social</div><span class="status-badge needs-attention">Needs Attention</span></div><div class="score-bar"><div class="score-fill red" style="width:25%"></div></div><div class="dim-score">Score: 25/100</div><div class="dim-desc">Getting breaks and having backup matters. Respite and community support can help.</div></div>
<div class="dim-card"><div class="dim-card-header"><div class="dim-card-name"><span class="dim-icon">📋</span> Daily Life</div><span class="status-badge strong">Strong</span></div><div class="score-bar"><div class="score-fill green" style="width:75%"></div></div><div class="dim-score">Score: 75/100</div><div class="dim-desc">You manage day-to-day systems well. This is a real strength.</div></div>
<div class="dim-card"><div class="dim-card-header"><div class="dim-card-name"><span class="dim-icon"></span> Purpose</div><span class="status-badge moderate">Okay</span></div><div class="score-bar"><div class="score-fill yellow" style="width:50%"></div></div><div class="dim-score">Score: 50/100</div><div class="dim-desc">Caring for others gives life meaning. There may be room for YOUR voice too.</div></div>
<div class="dim-card"><div class="dim-card-header"><div class="dim-card-name"><span class="dim-icon">🌱</span> Growth</div><span class="status-badge moderate">Okay</span></div><div class="score-bar"><div class="score-fill orange" style="width:35%"></div></div><div class="dim-score">Score: 35/100</div><div class="dim-desc">Learning and growing may be on hold. Small steps toward your own goals can boost you.</div></div>
</div>
</div>
<div class="results-actions">
<button class="btn-outline">📥 Download Results</button>
<button class="btn-primary">See Helpful Resources →</button>
</div>
</div>
<div class="app-footer"><div class="footer-inner">Powered by HELPipedia<div class="footer-divider"></div>helpipedia.org<div class="footer-divider"></div>SpecialNeeds.help</div></div>
</div>
<div class="screen-indicator">Screen 3 of 4</div>
</div>
<!-- ═══════════ PAGE 4: RESOURCES (Physical focus) ═══════════ -->
<div class="page">
<div class="browser-frame">
<div class="browser-dots"><div class="browser-dot red"></div><div class="browser-dot yellow"></div><div class="browser-dot green"></div></div>
<div class="browser-url-bar"><span class="lock">🔒</span><span>specialneeds.help/wellness/parent/resources</span></div>
</div>
<div class="app-content">
<div class="app-header">
<div class="brand"><div class="logo-icon">🧠</div><div class="brand-text">HELPipedia <span class="divider">|</span> <span class="sub">SpecialNeeds.help</span></div></div>
<div class="nav-links"><a href="#">Home</a><a href="#">Resources</a><a href="#" class="active">My Resources</a><a href="#">About</a></div>
</div>
<div class="resources-page">
<div class="resources-header">
<div class="score-circle" style="border-color:var(--red);background:var(--red-light)"><div class="score-num" style="color:var(--red)">20</div><div class="score-label" style="color:var(--red)">/ 100</div></div>
<div class="header-text">
<h3>💪 Physical Wellness Resources</h3>
<p>Your Physical Wellness score shows you may be putting your own health on hold while caring for others. This is very common — and you deserve support.</p>
<div class="what-this-means">→ Taking care of your own body helps you have the energy to care for your family.</div>
</div>
</div>
<div class="resources-list">
<div class="resource-card"><div class="resource-icon ri1">🏥</div><div class="resource-name">Respite Care Near You</div><div class="resource-desc">Find trained respite care so you can take a break, go to an appointment, or just rest. Many providers accept Medicaid waivers.</div><div class="resource-meta"><span class="resource-tag">Local Directory</span><a href="#" class="learn-more-btn">Learn More →</a></div></div>
<div class="resource-card"><div class="resource-icon ri2">🧘</div><div class="resource-name">Caregiver Health Programs</div><div class="resource-desc">Programs built for caregiver health — fitness classes, stress workshops, and nutrition help that fit a busy life.</div><div class="resource-meta"><span class="resource-tag">Programs</span><a href="#" class="learn-more-btn">Learn More →</a></div></div>
<div class="resource-card"><div class="resource-icon ri3">👨‍⚕️</div><div class="resource-name">Doctor Finder for Caregivers</div><div class="resource-desc">Search doctors who understand the unique health needs of caregivers. Includes specialists taking new patients.</div><div class="resource-meta"><span class="resource-tag">Directory</span><a href="#" class="learn-more-btn">Learn More →</a></div></div>
<div class="resource-card"><div class="resource-icon ri4">🚴</div><div class="resource-name">Adaptive Recreation</div><div class="resource-desc">Find inclusive fitness and recreation programs for the whole family. Adaptive sports, outdoor fun, and more.</div><div class="resource-meta"><span class="resource-tag">Activities</span><a href="#" class="learn-more-btn">Learn More →</a></div></div>
</div>
<div class="mentor-cta">
<div class="cta-left"><div class="cta-icon">👩‍👧</div><div class="cta-text"><h4>Connect with a Parent Mentor</h4><p>Talk to someone who has been there. Our trained parent mentors offer peer support, guidance, and encouragement — at no cost.</p></div></div>
<a href="#" class="cta-btn">Get Connected →</a>
</div>
<div class="utility-bar">
<a href="#" class="utility-link">📥 Download Full Results (PDF)</a>
<a href="#" class="utility-link">🔗 Share with Your Care Team</a>
<a href="#" class="utility-link">📂 Save to Vault</a>
<a href="#" class="utility-link">🔄 Take It Again</a>
</div>
</div>
<div class="app-footer"><div class="footer-inner">Powered by HELPipedia<div class="footer-divider"></div>helpipedia.org<div class="footer-divider"></div>SpecialNeeds.help</div></div>
</div>
<div class="screen-indicator">Screen 4 of 4</div>
</div>
</body>
</html>