547 lines
27 KiB
HTML
547 lines
27 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 — Evidence-Based Assessment (Generalized)</title>
|
|
<link rel="stylesheet" href="shared-styles.css">
|
|
<style>
|
|
/* Audience badge on landing */
|
|
.audience-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
background: rgba(46,125,111,0.08);
|
|
color: var(--primary);
|
|
font-size: 10.5px;
|
|
font-weight: 700;
|
|
padding: 4px 14px;
|
|
border-radius: 16px;
|
|
margin-top: 8px;
|
|
letter-spacing: 0.3px;
|
|
}
|
|
.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-assessment</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">Evidence-Based Wellness Tool</div>
|
|
<h1>Wheel of Wellness<br>Assessment</h1>
|
|
<div class="subtitle">Find out what you need in 5 minutes</div>
|
|
<p class="intro">
|
|
This quick check helps you see how you are doing across six parts of life.
|
|
Answer a few short questions and get ideas for support that fits you.
|
|
Based on tools used by doctors and counselors.
|
|
</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="wheelShadow" x="-10%" y="-10%" width="120%" height="120%">
|
|
<feDropShadow dx="0" dy="2" stdDeviation="4" flood-opacity="0.12"/>
|
|
</filter>
|
|
</defs>
|
|
<g filter="url(#wheelShadow)" 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 Assessment <span class="arrow">→</span>
|
|
</button>
|
|
<div class="cta-subtext">Free · No account needed · Your answers are private</div>
|
|
<div class="audience-badge">👥 For Everyone</div>
|
|
</div>
|
|
|
|
<div class="evidence-footnote">Adapted from WHO-5 Well-Being Index (WHO, 1998/2024) and PROMIS Global-10 (NIH, 2018)</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-assessment/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 Wellness 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 -->
|
|
<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">In the past month, how often have you felt tired or worn out?</div>
|
|
<div class="options-grid">
|
|
<div class="option-item"><div class="radio-circle"></div>Almost all the time</div>
|
|
<div class="option-item selected"><div class="radio-circle"></div>More than half the time</div>
|
|
<div class="option-item"><div class="radio-circle"></div>Some of the time</div>
|
|
<div class="option-item"><div class="radio-circle"></div>Once in a while</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Q2: Emotional -->
|
|
<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">In the past two weeks, how often have you felt calm and at ease?</div>
|
|
<div class="options-grid">
|
|
<div class="option-item"><div class="radio-circle"></div>At no time</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>More than half the time</div>
|
|
<div class="option-item"><div class="radio-circle"></div>All of the time</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Q3: Social -->
|
|
<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 people in your life you can count on when things get hard?</div>
|
|
<div class="options-grid">
|
|
<div class="option-item selected"><div class="radio-circle"></div>No, I feel alone</div>
|
|
<div class="option-item"><div class="radio-circle"></div>I have one or two people</div>
|
|
<div class="option-item"><div class="radio-circle"></div>I have a small group</div>
|
|
<div class="option-item"><div class="radio-circle"></div>I have a strong network</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Q4: Daily Life -->
|
|
<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 that you can handle everyday tasks like bills, forms, and schedules?</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 — WHO-5 daily life interest -->
|
|
<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">In the past two weeks, how often has your daily life been filled with things that interest you?</div>
|
|
<div class="options-grid">
|
|
<div class="option-item"><div class="radio-circle"></div>At no time</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>More than half the time</div>
|
|
<div class="option-item"><div class="radio-circle"></div>All of the time</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Q6: Growth — WHO-5 active/vigorous -->
|
|
<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 two weeks, how often have you felt active and full of energy?</div>
|
|
<div class="options-grid">
|
|
<div class="option-item"><div class="radio-circle"></div>At no time</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>More than half the time</div>
|
|
<div class="option-item"><div class="radio-circle"></div>All of the time</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-assessment/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 Wellness Snapshot</h2>
|
|
<p class="summary">Here is what your answers show about how you are doing across the six parts of wellness. Areas with lower scores may need more attention.</p>
|
|
</div>
|
|
|
|
<div class="overall-banner">
|
|
<div class="overall-label">Overall Wellness Score</div>
|
|
<div class="overall-score">52 <span>/ 100</span></div>
|
|
<div class="overall-text">You're doing okay in some areas. A few spots could use a little help.</div>
|
|
</div>
|
|
|
|
<div class="results-body">
|
|
<div class="results-wheel">
|
|
<svg viewBox="0 0 300 300" width="300" height="300">
|
|
<defs>
|
|
<filter id="shadow2" 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(#shadow2)">
|
|
<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,-39 62.4,-26 38.9,52 0,58.5 -57.1,33 -9.3,-39"
|
|
fill="rgba(46,125,111,0.15)" stroke="var(--primary)" stroke-width="2"/>
|
|
<circle cx="0" cy="-39" r="5" fill="var(--orange)"/>
|
|
<circle cx="62.4" cy="-26" r="5" fill="var(--yellow)"/>
|
|
<circle cx="38.9" cy="52" 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="-9.3" cy="-39" 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(--orange-light)" stroke="var(--orange)" stroke-width="1"/><text x="0" y="-141" text-anchor="middle" font-size="10" font-weight="700" fill="var(--orange)" 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">52</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 orange" style="width:30%"></div></div>
|
|
<div class="dim-score">Score: 30/100</div>
|
|
<div class="dim-desc">You may be running low on energy. Small changes can help you feel stronger.</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:55%"></div></div>
|
|
<div class="dim-score">Score: 55/100</div>
|
|
<div class="dim-desc">You feel calm some of the time. There is room to feel even better.</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:20%"></div></div>
|
|
<div class="dim-score">Score: 20/100</div>
|
|
<div class="dim-desc">You may feel alone. Finding your people could 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:80%"></div></div>
|
|
<div class="dim-score">Score: 80/100</div>
|
|
<div class="dim-desc">You handle day-to-day tasks well. Keep doing what works!</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">You have some sense of purpose. Building on what matters to you can help.</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 trying new things may have taken a back seat lately.</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 ═══════════════════════ -->
|
|
<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-assessment/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">
|
|
<div class="score-num">20</div>
|
|
<div class="score-label">/ 100</div>
|
|
</div>
|
|
<div class="header-text">
|
|
<h3>🤝 Social Connection Resources</h3>
|
|
<p>Your Social Wellness score shows you may feel alone right now. This is common — and there are real ways to find your people.</p>
|
|
<div class="what-this-means">→ Feeling connected to others can help with stress, health, and finding joy in everyday life.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="resources-list">
|
|
<div class="resource-card">
|
|
<div class="resource-icon ri1">👥</div>
|
|
<div class="resource-name">Local Support Groups</div>
|
|
<div class="resource-desc">Find groups near you where people share experiences, swap tips, and build friendships. Many meet in person or online.</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">Online Peer Communities</div>
|
|
<div class="resource-desc">Join online spaces where people going through similar things offer support and advice at any time of day.</div>
|
|
<div class="resource-meta">
|
|
<span class="resource-tag">Online</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">Mentor Matching Program</div>
|
|
<div class="resource-desc">Get paired with someone who has been where you are. They can listen, share ideas, and walk alongside you.</div>
|
|
<div class="resource-meta">
|
|
<span class="resource-tag">Program</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">Community Events Near You</div>
|
|
<div class="resource-desc">Discover local events, classes, and meetups where you can connect with people who share your interests.</div>
|
|
<div class="resource-meta">
|
|
<span class="resource-tag">Events</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 Peer Mentor</h4>
|
|
<p>Talk to someone who gets it. Our trained peer mentors offer support, ideas, 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 Results</a>
|
|
<a href="#" class="utility-link">🔄 Take It Again</a>
|
|
<a href="#" class="utility-link">📊 See All Areas</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>
|