LobotomyLabs/wellnessWheel
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
2db3a3355c5161482bf613415c0ef5c69372943e
wellnessWheel/mockup-family-member.html
T

241 lines
23 KiB
HTML
Raw Blame History

<!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 — Family Member Assessment</title>
<link rel="stylesheet" href="shared-styles.css">
</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/family</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 Family Members</div>
<h1>Wheel of Wellness<br>Family Check-In</h1>
<div class="subtitle">See how your whole family is doing — together</div>
<p class="intro">
When one person in a family has a disability or health need, it touches everyone.
This quick check helps families see what is working and what could use support.
Based on the Beach Center Family Quality of Life Scale, a tool used by researchers
and providers who work with families like yours.
</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> Covers your whole family</div>
<div class="feature-pill"><span class="icon">🔗</span> Links to family resources</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 Family Check <span class="arrow">→</span></button>
<div class="cta-subtext">Free · No account needed · Your answers are private</div>
<div class="audience-badge coral">👨‍👩‍👧‍👦 For Family Members</div>
</div>
<div class="evidence-footnote">Adapted from Beach Center Family Quality of Life Scale (Hoffman et al., 2006; Chiu et al., 2020)</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/family/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 Family 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 (family health, adapted from FQOL Material Well-being) -->
<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">Do members of your family get the medical care they need when they need it?</div>
<div class="options-grid">
<div class="option-item selected"><div class="radio-circle"></div>Not really</div>
<div class="option-item"><div class="radio-circle"></div>Some of the time</div>
<div class="option-item"><div class="radio-circle"></div>Most of the time</div>
<div class="option-item"><div class="radio-circle"></div>Yes, always</div>
</div>
</div>
<!-- Q2: Emotional (FQOL Emotional Well-being) -->
<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">Does your family have the support you need to handle stress?</div>
<div class="options-grid">
<div class="option-item"><div class="radio-circle"></div>Not at all</div>
<div class="option-item selected"><div class="radio-circle"></div>A little</div>
<div class="option-item"><div class="radio-circle"></div>Pretty much</div>
<div class="option-item"><div class="radio-circle"></div>Very much</div>
</div>
</div>
<!-- Q3: Social (FQOL Family Interaction) -->
<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 family members have people outside the home they can lean on?</div>
<div class="options-grid">
<div class="option-item selected"><div class="radio-circle"></div>No, we feel alone</div>
<div class="option-item"><div class="radio-circle"></div>A few people</div>
<div class="option-item"><div class="radio-circle"></div>We have some support</div>
<div class="option-item"><div class="radio-circle"></div>We have strong support</div>
</div>
</div>
<!-- Q4: Daily Life (FQOL Disability-Related Support) -->
<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">Are you able to get the services and supports your family member with a disability needs?</div>
<div class="options-grid">
<div class="option-item"><div class="radio-circle"></div>Not really</div>
<div class="option-item"><div class="radio-circle"></div>Some of the time</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>
<!-- Q5: Purpose — Beach Center FQOL family problem-solving -->
<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">Does your family solve problems together?</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 — Beach Center FQOL parenting/communication -->
<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">Do family members talk openly with each other?</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>
</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/family/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 Family Snapshot</h2>
<p class="summary">Here is a look at how your family is doing across six parts of wellness. The lower scores show areas where your family may want more support.</p>
</div>
<div class="overall-banner">
<div class="overall-label">Overall Family Wellness Score</div>
<div class="overall-score">55 <span>/ 100</span></div>
<div class="overall-text">Your family has strengths to build on. Some areas could use more support.</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,-45.5 56.3,-45.5 52,52 0,65 -57.1,27.5 -12.4,-45.5" fill="rgba(46,125,111,0.15)" stroke="var(--primary)" stroke-width="2"/><circle cx="0" cy="-45.5" r="5" fill="var(--yellow)"/><circle cx="56.3" cy="-45.5" r="5" fill="var(--yellow)"/><circle cx="52" cy="52" r="5" fill="var(--red)"/><circle cx="0" cy="65" r="5" fill="var(--green)"/><circle cx="-57.1" cy="27.5" r="5" fill="var(--yellow)"/><circle cx="-12.4" cy="-45.5" r="5" fill="var(--yellow)"/><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(--yellow-light)" stroke="var(--yellow)" stroke-width="1"/><text x="0" y="-141" text-anchor="middle" font-size="10" font-weight="700" fill="#F9A825" 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(--yellow-light)" stroke="var(--yellow)" stroke-width="1"/><text x="-120" y="-71" text-anchor="middle" font-size="10" font-weight="700" fill="#F9A825" 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">55</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 moderate">Okay</span></div><div class="score-bar"><div class="score-fill yellow" style="width:45%"></div></div><div class="dim-score">Score: 45/100</div><div class="dim-desc">Getting medical care for everyone can be a challenge. Help is available.</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:50%"></div></div><div class="dim-score">Score: 50/100</div><div class="dim-desc">Your family has some emotional support. A little more could go a long way.</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:30%"></div></div><div class="dim-score">Score: 30/100</div><div class="dim-desc">Your family may feel cut off. Finding community can make a big difference.</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 navigate the support system well. That 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:55%"></div></div><div class="dim-score">Score: 55/100</div><div class="dim-desc">Your family shares values and meaning. There is room to grow together.</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 yellow" style="width:50%"></div></div><div class="dim-score">Score: 50/100</div><div class="dim-desc">Learning and trying new things as a family may have taken a back seat.</div></div>
</div>
</div>
<div class="results-actions">
<button class="btn-outline">📥 Download Results</button>
<button class="btn-primary">See Family 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 ═══════════ -->
<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/family/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)">30</div><div class="score-label" style="color:var(--red)">/ 100</div></div>
<div class="header-text">
<h3>🤝 Social Connection Resources</h3>
<p>Your family's Social score shows you may feel cut off from community. This is common for families navigating disability — and there are real ways to build connections.</p>
<div class="what-this-means">→ When families find others who get it, stress goes down and everyone does better.</div>
</div>
</div>
<div class="resources-list">
<div class="resource-card"><div class="resource-icon ri1">👨‍👩‍👧‍👦</div><div class="resource-name">Family Support Groups</div><div class="resource-desc">Meet other families who share similar experiences. Swap tips, build friendships, and know you are not alone.</div><div class="resource-meta"><span class="resource-tag">Local Groups</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">Respite & Family Breaks</div><div class="resource-desc">Find respite care options so your whole family can recharge. Includes weekend programs and summer camps.</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">Sibling Support Programs</div><div class="resource-desc">Programs for brothers and sisters of children with disabilities. A space just for them to connect and share.</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 ri4">📋</div><div class="resource-name">Benefits & Services Navigator</div><div class="resource-desc">Help finding and applying for programs your family may qualify for — Medicaid waivers, SSI, and more.</div><div class="resource-meta"><span class="resource-tag">Services</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 Family Mentor</h4><p>Talk to a family who has walked this road. Our trained family mentors offer real-world advice and a listening ear — 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>
Reference in New Issue View Git Blame Copy Permalink