Files
wellnessWheel/onepager.html
T

267 lines
6.9 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
* { margin: 0; padding: 0; box-sizing: border-box; }
@page {
size: 8.5in 11in;
margin: 0;
}
body {
font-family: 'Inter', sans-serif;
color: #2D3436;
width: 8.5in;
height: 11in;
padding: 0.6in 0.65in 0.5in;
background: #fff;
font-size: 10px;
line-height: 1.45;
}
/* ── Header ─────────────────────────────── */
.header {
background: linear-gradient(135deg, #2E7D6F, #3A9A8A);
color: #fff;
padding: 18px 24px;
border-radius: 8px;
text-align: center;
margin-bottom: 14px;
}
.header h1 {
font-size: 22px;
font-weight: 800;
letter-spacing: -0.3px;
margin-bottom: 4px;
}
.header .sub {
font-size: 9.5px;
opacity: 0.9;
}
/* ── Section Labels ─────────────────────── */
.label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
margin-bottom: 5px;
}
.label.teal { color: #2E7D6F; }
.label.coral { color: #E8835C; }
.problem-solution {
margin-bottom: 12px;
}
.problem-solution p {
font-size: 10px;
line-height: 1.5;
margin-bottom: 6px;
}
/* ── Dimensions Table ───────────────────── */
.dim-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 12px;
font-size: 9px;
}
.dim-table th {
background: #2E7D6F;
color: #fff;
padding: 6px 10px;
text-align: left;
font-weight: 600;
font-size: 8.5px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.dim-table td {
padding: 5px 10px;
border-bottom: 1px solid #e8e8e8;
vertical-align: top;
}
.dim-table tr:nth-child(even) td {
background: #f7f7f7;
}
.dim-table td:first-child {
font-weight: 700;
color: #2E7D6F;
white-space: nowrap;
width: 80px;
}
.dim-table td:nth-child(2) {
width: 38%;
}
/* ── Two-Column Layout ──────────────────── */
.columns {
display: flex;
gap: 20px;
margin-bottom: 10px;
}
.col-left, .col-right {
flex: 1;
}
.bullet-list {
list-style: none;
padding: 0;
}
.bullet-list li {
font-size: 9px;
padding: 2px 0;
padding-left: 14px;
position: relative;
line-height: 1.4;
}
.bullet-list li::before {
content: '▸';
position: absolute;
left: 0;
color: #2E7D6F;
font-weight: 700;
}
.bullet-list li strong {
color: #2D3436;
}
/* ── Phase list ─────────────────────────── */
.phase-list {
list-style: none;
padding: 0;
}
.phase-list li {
font-size: 9px;
padding: 3px 0;
line-height: 1.4;
}
.phase-list .phase-label {
font-weight: 700;
color: #2D3436;
}
.phase-name {
font-weight: 600;
color: #E8835C;
}
/* ── The Ask Box ────────────────────────── */
.ask-box {
background: #FDF0E8;
border-radius: 6px;
padding: 10px 16px;
margin-top: 10px;
}
.ask-box .ask-title {
font-size: 11px;
font-weight: 700;
color: #E8835C;
margin-bottom: 4px;
}
.ask-list {
list-style: none;
padding: 0;
columns: 2;
column-gap: 16px;
}
.ask-list li {
font-size: 9px;
padding: 2px 0;
padding-left: 18px;
position: relative;
line-height: 1.4;
break-inside: avoid;
}
.ask-list li .num {
position: absolute;
left: 0;
font-weight: 700;
color: #E8835C;
}
/* ── Footer ─────────────────────────────── */
.footer {
text-align: center;
font-size: 7.5px;
color: #aaa;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="header">
<h1>Wheel of Wellness Resource Connector</h1>
<div class="sub">A Proposal for HELPipedia / SpecialNeeds.help &nbsp;|&nbsp; Kayla Newkirk, M.S.Ed., MHC-LP &nbsp;|&nbsp; Week of June 16, 2026</div>
</div>
<div class="problem-solution">
<p><span class="label coral">The Problem</span><br>
Families navigating disability and caregiving often do not know what they need until someone asks the right questions. A directory is powerful when you know what to search for. An assessment tool is powerful when you do not.</p>
<p><span class="label coral">The Solution</span><br>
An interactive, web-based <strong>Wheel of Wellness Assessment</strong> that asks caregivers and individuals with disabilities targeted questions across six wellness dimensions, scores each area, and automatically maps their needs to resources in the SpecialNeeds.help directory. Users arrive unsure of what they need. They leave with a personalized resource plan.</p>
</div>
<div class="label teal">The Six Dimensions</div>
<table class="dim-table">
<tr>
<th>Dimension</th>
<th>Focus</th>
<th>Resource Connections</th>
</tr>
<tr>
<td>Physical</td>
<td>Rest, movement, nutrition, medical care</td>
<td>Respite care, medical providers, adaptive recreation</td>
</tr>
<tr>
<td>Emotional</td>
<td>Naming feelings, coping, support</td>
<td>Counseling referrals, caregiver support groups, crisis lines</td>
</tr>
<tr>
<td>Social</td>
<td>Connection, understanding, community</td>
<td>Parent mentors, local support networks, peer matching</td>
</tr>
<tr>
<td>Practical</td>
<td>Finances, advocacy, schedules, systems</td>
<td>IEP advocates, legal aid, benefits navigation</td>
</tr>
<tr>
<td>Purpose</td>
<td>Meaning, identity, values, hope</td>
<td>Faith communities, disability-affirming organizations</td>
</tr>
<tr>
<td>Growth</td>
<td>Learning, creativity, becoming</td>
<td>Training, conferences, podcasts, creative programs</td>
</tr>
</table>
<div class="label teal">Why It Matters</div>
<ul class="bullet-list">
<li><strong>Mission alignment:</strong> Bridges the gap between knowledge and opportunity</li>
<li><strong>Differentiator:</strong> No other disability directory offers a clinically grounded needs assessment</li>
<li><strong>Engagement:</strong> Personalized entry point increases return visits and directory use</li>
<li><strong>Data insight:</strong> Anonymous aggregate data reveals community needs for content and fundraising</li>
<li><strong>Scalable:</strong> Works for any new resource area added to SpecialNeeds.help</li>
<li><strong>Measurable:</strong> Completion rates, click-through, referrals all trackable</li>
</ul>
<div class="footer">
Kayla Newkirk, M.S.Ed., MHC-LP &nbsp;|&nbsp; Doctoral Candidate, Counselor Education & Supervision, Waynesburg University &nbsp;|&nbsp; kcordone30@gmail.com
</div>
</body>
</html>