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

241 lines
24 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 — Professional 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/professional</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 Professionals</div>
<h1>Wheel of Wellness<br>Professional Check</h1>
<div class="subtitle">You support others every day — check in on yourself</div>
<p class="intro">
As a therapist, counselor, coach, or educator, you carry the weight of your clients' stories.
This quick check helps you see where you are thriving and where compassion fatigue may be taking a toll.
Based on the Professional Quality of Life Scale (ProQOL-5), a widely used tool for measuring
compassion satisfaction, burnout, and secondary traumatic stress in helping professionals.
</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> Professional + personal</div>
<div class="feature-pill"><span class="icon">🔗</span> Supervision & support 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 Check <span class="arrow">→</span></button>
<div class="cta-subtext">Free · No account needed · Your answers are private</div>
<div class="audience-badge">🩺 For Professionals</div>
</div>
<div class="evidence-footnote">Adapted from Professional Quality of Life Scale (ProQOL-5; Stamm, 2010) and literature on burnout, secondary traumatic stress, and compassion satisfaction</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/professional/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 Professional 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 — ProQOL burnout: exhaustion vocabulary -->
<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">How often do you feel physically drained after your workday?</div>
<div class="options-grid">
<div class="option-item selected"><div class="radio-circle"></div>Almost every day</div>
<div class="option-item"><div class="radio-circle"></div>Several days a week</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>
<!-- Q2: Emotional — ProQOL compassion satisfaction + fatigue -->
<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">I find my work as a helper to be deeply satisfying.</div>
<div class="options-grid">
<div class="option-item"><div class="radio-circle"></div>Not true at all</div>
<div class="option-item"><div class="radio-circle"></div>Sometimes true</div>
<div class="option-item selected"><div class="radio-circle"></div>Often true</div>
<div class="option-item"><div class="radio-circle"></div>Very true</div>
</div>
</div>
<!-- Q3: Social — ProQOL isolation from helper role -->
<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 colleagues or peers you can talk with honestly about difficult cases?</div>
<div class="options-grid">
<div class="option-item selected"><div class="radio-circle"></div>No, I process alone</div>
<div class="option-item"><div class="radio-circle"></div>Rarely, and not deeply</div>
<div class="option-item"><div class="radio-circle"></div>Yes, occasionally</div>
<div class="option-item"><div class="radio-circle"></div>Yes, regularly</div>
</div>
</div>
<!-- Q4: Daily Life — professional self-care infrastructure -->
<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 well do you maintain a boundary between your work and your personal life?</div>
<div class="options-grid">
<div class="option-item selected"><div class="radio-circle"></div>I struggle with this</div>
<div class="option-item"><div class="radio-circle"></div>Sometimes okay</div>
<div class="option-item"><div class="radio-circle"></div>Usually good</div>
<div class="option-item"><div class="radio-circle"></div>Very clear boundary</div>
</div>
</div>
<!-- Q5: Purpose — ProQOL compassion satisfaction / impact -->
<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">I believe I can make a difference through my work.</div>
<div class="options-grid">
<div class="option-item"><div class="radio-circle"></div>Not true at all</div>
<div class="option-item"><div class="radio-circle"></div>Sometimes true</div>
<div class="option-item selected"><div class="radio-circle"></div>Often true</div>
<div class="option-item"><div class="radio-circle"></div>Very true</div>
</div>
</div>
<!-- Q6: Growth — ProQOL professional 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">Are you the person you always wanted to be in this work?</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>Getting there</div>
<div class="option-item"><div class="radio-circle"></div>Mostly</div>
<div class="option-item"><div class="radio-circle"></div>Yes, I am</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/professional/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 Professional Wellness Snapshot</h2>
<p class="summary">Here is a look at how you are doing across six parts of professional and personal wellness. Lower scores may point to areas where burnout or compassion fatigue is showing up — and where support can help.</p>
</div>
<div class="overall-banner">
<div class="overall-label">Overall Professional Wellness Score</div>
<div class="overall-score">46 <span>/ 100</span></div>
<div class="overall-text">You give deeply to this work. Your compassion satisfaction is a strength, but some areas of depletion need attention.</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,-32.5 56.3,-39 43.3,52 0,65 -57.1,38.5 -24.8,-58.5" fill="rgba(46,125,111,0.15)" stroke="var(--primary)" stroke-width="2"/><circle cx="0" cy="-32.5" r="5" fill="var(--red)"/><circle cx="56.3" cy="-39" 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="38.5" r="5" fill="var(--yellow)"/><circle cx="-24.8" cy="-58.5" r="5" fill="var(--red)"/><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(--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">💗 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(--red-light)" stroke="var(--red)" stroke-width="1"/><text x="-120" y="-71" text-anchor="middle" font-size="10" font-weight="700" fill="var(--red)" 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">46</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">Depleted</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">Your body is carrying the cost. Physical depletion is a warning sign of burnout.</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">Some Fatigue</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">Your compassion satisfaction is present but competing with emotional fatigue.</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">Isolated</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">Processing alone increases secondary trauma risk. Peer connection is protective.</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">Solid Boundaries</span></div><div class="score-bar"><div class="score-fill green" style="width:70%"></div></div><div class="dim-score">Score: 70/100</div><div class="dim-desc">You maintain some work-life boundaries. This is a protective factor worth protecting.</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">Connected</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 find meaning in this work — that fuel matters. Guard it carefully.</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 needs-attention">Stalled</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">Cease doing all, achieve nothing. Your own learning may need to come back onto the calendar.</div></div>
</div>
</div>
<div class="results-actions">
<button class="btn-outline">📥 Download Results</button>
<button class="btn-primary">See Professional 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: PROFESSIONAL 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/professional/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>🤝 Professional Support Resources</h3>
<p>Your Social score suggests you process difficult client experiences alone. Isolation is a known risk factor for secondary traumatic stress — connecting with peers is one of the strongest protective steps you can take.</p>
<div class="what-this-means">→ Regular peer consultation and clinical supervision are not luxuries — they are ethical imperatives for sustainable practice.</div>
</div>
</div>
<div class="resources-list">
<div class="resource-card"><div class="resource-icon ri1">🧑‍⚕️</div><div class="resource-name">Clinical Supervision Directory</div><div class="resource-desc">Find qualified clinical supervisors in your area who specialize in trauma-informed care, burnout prevention, and specific modalities.</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 ri2">🤝</div><div class="resource-name">Peer Consultation Groups</div><div class="resource-desc">Join or start a peer consultation group with other helping professionals. Regular case review reduces isolation and sharpens clinical skills.</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">Clinician Self-Care Retreats</div><div class="resource-desc">Structured retreats designed specifically for helping professionals to recharge, reflect, and reconnect with the meaning in their work.</div><div class="resource-meta"><span class="resource-tag">Retreats</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">CE & Professional Development</div><div class="resource-desc">Find continuing education focused on vicarious trauma, resilience, ethical self-care, and sustainable clinical practice.</div><div class="resource-meta"><span class="resource-tag">Learning</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>Find a Professional Mentor</h4><p>Connect with an experienced clinician who can offer guidance, perspective, and support for navigating the challenges of this work — 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 Supervisor</a>
<a href="#" class="utility-link">📂 Save to Vault</a>
<a href="#" class="utility-link">🔄 Retake in 3 Months</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