324 lines
26 KiB
HTML
324 lines
26 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 — Accessible Assessment</title>
|
|
<link rel="stylesheet" href="shared-styles.css">
|
|
<style>
|
|
/* Larger, more accessible typography */
|
|
.questions-page {
|
|
padding: 16px 32px 40px;
|
|
}
|
|
.question-card .q-text {
|
|
font-size: 17px;
|
|
margin-bottom: 16px;
|
|
}
|
|
.option-item {
|
|
font-size: 15px;
|
|
padding: 12px 16px;
|
|
border-radius: 12px;
|
|
}
|
|
.radio-circle {
|
|
width: 24px; height: 24px;
|
|
}
|
|
.option-item.selected .radio-circle::after {
|
|
width: 10px; height: 10px;
|
|
}
|
|
.page1-hero .intro {
|
|
font-size: 15px;
|
|
max-width: 620px;
|
|
}
|
|
.page1-hero h1 {
|
|
font-size: 38px;
|
|
}
|
|
.page1-hero .subtitle {
|
|
font-size: 19px;
|
|
}
|
|
|
|
/* Emoji response scale — larger touch targets */
|
|
.emoji-scale {
|
|
display: flex;
|
|
gap: 14px;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
margin-top: 4px;
|
|
}
|
|
.emoji-option {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 14px 22px;
|
|
border-radius: 16px;
|
|
font-size: 36px;
|
|
border: 2.5px solid var(--gray-200);
|
|
background: white;
|
|
cursor: pointer;
|
|
min-width: 80px;
|
|
transition: all 0.15s;
|
|
}
|
|
.emoji-option .emoji-label {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: var(--gray-500);
|
|
}
|
|
.emoji-option.selected {
|
|
border-color: var(--primary);
|
|
background: #E8F5E9;
|
|
transform: scale(1.05);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
.emoji-option.selected .emoji-label {
|
|
color: var(--primary-dark);
|
|
}
|
|
.emoji-scale-hint {
|
|
text-align: center;
|
|
font-size: 11px;
|
|
color: var(--gray-400);
|
|
margin-top: 4px;
|
|
}
|
|
|
|
/* Simpler status badges */
|
|
.status-badge.keep-it-up { background: var(--green-light); color: var(--green); }
|
|
.status-badge.could-be-better { background: var(--yellow-light); color: #F9A825; }
|
|
.status-badge.lets-work-on-it { background: var(--red-light); color: var(--red); }
|
|
</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/my-life</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 Life Check</a><a href="#">About</a></div>
|
|
</div>
|
|
<div class="page1-hero">
|
|
<div class="eyebrow">How Are You Doing?</div>
|
|
<h1>Wheel of Wellness<br>My Life Check</h1>
|
|
<div class="subtitle">A quick way to see what is going well — and what could be better</div>
|
|
<p class="intro">
|
|
This is your check-in. There are no right or wrong answers.
|
|
Just pick the face or answer that feels right to you.
|
|
It takes about 5 minutes, and your answers are private.
|
|
Based on tools that help people talk about what matters in their life.
|
|
</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> Just pick how you feel</div>
|
|
<div class="feature-pill"><span class="icon">🔗</span> Links to help if you want it</div>
|
|
<div class="feature-pill"><span class="icon">🔒</span> Private and 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">My Body</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">My Feelings</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">My People</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">My Day</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">What Matters</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">Growing</text></g></g></svg></div>
|
|
<button class="cta-button">Start My Check <span class="arrow">→</span></button>
|
|
<div class="cta-subtext">Free · No account needed · Just pick what feels right</div>
|
|
<div class="audience-badge" style="background:rgba(46,125,111,0.06);color:var(--primary-dark)">🙂 Made for Everyone</div>
|
|
</div>
|
|
<div class="evidence-footnote">Adapted from Personal Wellbeing Index — Intellectual Disability (PWI-ID; Cummins & Lau, 2005) and accessible survey design research</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 (Emoji Scales) ═══════════ -->
|
|
<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/my-life/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">My Life Check</a><a href="#">About</a></div>
|
|
</div>
|
|
<div class="questions-page">
|
|
<div class="progress-section">
|
|
<div class="progress-header"><span class="label">Your Life Check</span><span class="count">Question 4 of 12</span></div>
|
|
<div class="progress-bar-track"><div class="progress-bar-fill" style="width:33%"></div></div>
|
|
</div>
|
|
<div class="dimension-indicator">
|
|
<span class="dim-badge physical">💪 My Body</span><span class="dim-badge emotional">💗 My Feelings</span><span class="dim-badge social">🤝 My People</span><span class="dim-badge daily-life">📋 My Day</span><span class="dim-badge purpose">⭐ What Matters</span><span class="dim-badge growth">🌱 Growing</span>
|
|
</div>
|
|
|
|
<!-- Q1: Physical — PWI-ID health domain -->
|
|
<div class="question-card q-physical">
|
|
<span class="question-number">Q 1 / 12</span>
|
|
<div class="q-dim-label">💪 My Body</div>
|
|
<div class="q-text">How do you feel about your health?</div>
|
|
<div class="emoji-scale">
|
|
<div class="emoji-option"><span>😟</span><span class="emoji-label">Not Good</span></div>
|
|
<div class="emoji-option"><span>😐</span><span class="emoji-label">Okay</span></div>
|
|
<div class="emoji-option selected"><span>🙂</span><span class="emoji-label">Pretty Good</span></div>
|
|
<div class="emoji-option"><span>😊</span><span class="emoji-label">Good</span></div>
|
|
<div class="emoji-option"><span>😄</span><span class="emoji-label">Very Good</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Q2: Emotional — PWI-ID emotional wellbeing -->
|
|
<div class="question-card q-emotional">
|
|
<span class="question-number">Q 3 / 12</span>
|
|
<div class="q-dim-label">💗 My Feelings</div>
|
|
<div class="q-text">How happy do you feel most of the time?</div>
|
|
<div class="emoji-scale">
|
|
<div class="emoji-option"><span>😟</span><span class="emoji-label">Not Happy</span></div>
|
|
<div class="emoji-option selected"><span>😐</span><span class="emoji-label">Okay</span></div>
|
|
<div class="emoji-option"><span>🙂</span><span class="emoji-label">Pretty Happy</span></div>
|
|
<div class="emoji-option"><span>😊</span><span class="emoji-label">Happy</span></div>
|
|
<div class="emoji-option"><span>😄</span><span class="emoji-label">Very Happy</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Q3: Social — PWI-ID community/relationships -->
|
|
<div class="question-card q-social">
|
|
<span class="question-number">Q 5 / 12</span>
|
|
<div class="q-dim-label">🤝 My People</div>
|
|
<div class="q-text">How do you feel about the people in your life?</div>
|
|
<div class="emoji-scale">
|
|
<div class="emoji-option"><span>😟</span><span class="emoji-label">Not Good</span></div>
|
|
<div class="emoji-option selected"><span>😐</span><span class="emoji-label">Okay</span></div>
|
|
<div class="emoji-option"><span>🙂</span><span class="emoji-label">Pretty Good</span></div>
|
|
<div class="emoji-option"><span>😊</span><span class="emoji-label">Good</span></div>
|
|
<div class="emoji-option"><span>😄</span><span class="emoji-label">Very Good</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Q4: Daily Life — PWI-ID safety/future security -->
|
|
<div class="question-card q-daily-life">
|
|
<span class="question-number">Q 7 / 12</span>
|
|
<div class="q-dim-label">📋 My Day</div>
|
|
<div class="q-text">Do you have the help you need for everyday things?</div>
|
|
<div class="options-grid">
|
|
<div class="option-item selected"><div class="radio-circle"></div>I need more help</div>
|
|
<div class="option-item"><div class="radio-circle"></div>I get some help</div>
|
|
<div class="option-item"><div class="radio-circle"></div>I get enough help</div>
|
|
<div class="option-item"><div class="radio-circle"></div>I get plenty of help</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Q5: Purpose — PWI-ID achievement/life satisfaction -->
|
|
<div class="question-card q-purpose">
|
|
<span class="question-number">Q 9 / 12</span>
|
|
<div class="q-dim-label">⭐ What Matters</div>
|
|
<div class="q-text">How do you feel about the things you do or make?</div>
|
|
<div class="emoji-scale">
|
|
<div class="emoji-option"><span>😟</span><span class="emoji-label">Not Good</span></div>
|
|
<div class="emoji-option"><span>😐</span><span class="emoji-label">Okay</span></div>
|
|
<div class="emoji-option selected"><span>🙂</span><span class="emoji-label">Pretty Good</span></div>
|
|
<div class="emoji-option"><span>😊</span><span class="emoji-label">Good</span></div>
|
|
<div class="emoji-option"><span>😄</span><span class="emoji-label">Very Good</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Q6: Growth — PWI-ID future security -->
|
|
<div class="question-card q-growth">
|
|
<span class="question-number">Q 11 / 12</span>
|
|
<div class="q-dim-label">🌱 Growing</div>
|
|
<div class="q-text">How do you feel about what will happen to you later in your life?</div>
|
|
<div class="emoji-scale">
|
|
<div class="emoji-option"><span>😟</span><span class="emoji-label">Not Good</span></div>
|
|
<div class="emoji-option"><span>😐</span><span class="emoji-label">Okay</span></div>
|
|
<div class="emoji-option selected"><span>🙂</span><span class="emoji-label">Pretty Good</span></div>
|
|
<div class="emoji-option"><span>😊</span><span class="emoji-label">Good</span></div>
|
|
<div class="emoji-option"><span>😄</span><span class="emoji-label">Very Good</span></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/my-life/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">My Results</a><a href="#">About</a></div>
|
|
</div>
|
|
<div class="results-page">
|
|
<div class="results-header">
|
|
<div class="completion-badge">✓ All Done!</div>
|
|
<h2>Your Life Snapshot</h2>
|
|
<p class="summary">Here is a picture of how you are doing. The areas with lower scores show where you might want more support.</p>
|
|
</div>
|
|
<div class="overall-banner">
|
|
<div class="overall-label">How You Are Doing Overall</div>
|
|
<div class="overall-score">58 <span>/ 100</span></div>
|
|
<div class="overall-text">Some things are going well. A few things could be better — and that is okay.</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,-32.5 43.3,52 0,65 -57.1,33 -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="-32.5" r="5" fill="var(--orange)"/><circle cx="43.3" cy="52" r="5" fill="var(--red)"/><circle cx="0" cy="65" r="5" fill="var(--green)"/><circle cx="-57.1" cy="33" 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">💪 My Body</text></g><g><rect x="72" y="-85" width="88" height="22" rx="11" fill="var(--orange-light)" stroke="var(--orange)" stroke-width="1"/><text x="116" y="-71" text-anchor="middle" font-size="10" font-weight="700" fill="var(--orange)" font-family="Inter,sans-serif">💗 My Feelings</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">🤝 My People</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">📋 My Day</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">⭐ What Matters</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">🌱 Growing</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">58</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> My Body</div><span class="status-badge could-be-better">Could Be Better</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 okay about your health. A small change could make it even better.</div></div>
|
|
<div class="dim-card"><div class="dim-card-header"><div class="dim-card-name"><span class="dim-icon">💗</span> My Feelings</div><span class="status-badge could-be-better">Could Be Better</span></div><div class="score-bar"><div class="score-fill orange" style="width:40%"></div></div><div class="dim-score">Score: 40/100</div><div class="dim-desc">You are okay but not as happy as you could be. Support can help.</div></div>
|
|
<div class="dim-card"><div class="dim-card-header"><div class="dim-card-name"><span class="dim-icon">🤝</span> My People</div><span class="status-badge lets-work-on-it">Let's Work On It</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">Finding people who get you can make a big difference in how you feel.</div></div>
|
|
<div class="dim-card"><div class="dim-card-header"><div class="dim-card-name"><span class="dim-icon">📋</span> My Day</div><span class="status-badge keep-it-up">Keep It Up!</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 have good support for daily life. 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> What Matters</div><span class="status-badge could-be-better">Could Be Better</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 things that matter to you. Building on those can help.</div></div>
|
|
<div class="dim-card"><div class="dim-card-header"><div class="dim-card-name"><span class="dim-icon">🌱</span> Growing</div><span class="status-badge could-be-better">Could Be Better</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 may be on hold. What would you like to try?</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/my-life/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)">25</div><div class="score-label" style="color:var(--red)">/ 100</div></div>
|
|
<div class="header-text">
|
|
<h3>🤝 Finding Your People</h3>
|
|
<p>Your People score shows you may feel cut off. Many people feel this way — and there are real ways to find your people.</p>
|
|
<div class="what-this-means">→ Being around people who get you can make life feel a lot better.</div>
|
|
</div>
|
|
</div>
|
|
<div class="resources-list">
|
|
<div class="resource-card"><div class="resource-icon ri1">👥</div><div class="resource-name">Groups Near You</div><div class="resource-desc">Find groups where people share interests and do fun things together. Many meet in person or online.</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">Arts & Fun Programs</div><div class="resource-desc">Join art, music, dance, or other creative programs. A great way to meet people while doing something you enjoy.</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">Peer Mentors</div><div class="resource-desc">Get matched with someone who gets what you are going through. They can listen, share ideas, and be a friend.</div><div class="resource-meta"><span class="resource-tag">Mentoring</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">Fun Events Near You</div><div class="resource-desc">Find local events, classes, and meetups where you can have fun and meet new people.</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>Talk to Someone Who Gets It</h4><p>Our trained peer mentors are here to listen, share ideas, and help you find your way — 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 Results (PDF)</a>
|
|
<a href="#" class="utility-link">🔗 Share with Your Team</a>
|
|
<a href="#" class="utility-link">📂 Save to My Vault</a>
|
|
<a href="#" class="utility-link">🔄 Take It Again Later</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>
|