Mental-Health/resources.html at main · K-Mirembe-Mercy/Mental-Health · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Crisis Resources & Help — MindLift</title>
<meta name="description" content="Global mental health crisis helplines, how to find a therapist, online therapy options, and community support. Help is always available.">
<meta name="robots" content="index, follow">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="shared.css">
<style>
.page-hero {
  padding: 72px 5vw 56px;
  background: linear-gradient(135deg, rgba(255,80,80,0.06), var(--bg2));
  border-bottom: 1px solid var(--border);
}
.page-hero h1 { font-family: var(--font-d); font-size: clamp(2.4rem,6vw,4.2rem); font-weight: 300; max-width: 700px; }
.page-hero h1 em { font-style: italic; color: #ff6b6b; }
.page-hero p { color: var(--text2); font-size: 1.05rem; font-weight: 300; max-width: 520px; margin-top: 14px; }

/* Emergency banner */
.emergency-banner {
  background: linear-gradient(135deg, rgba(255,80,80,0.15), rgba(255,80,80,0.05));
  border: 1.5px solid rgba(255,100,100,0.35);
  border-radius: 18px; padding: 28px 32px;
  margin-bottom: 48px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.emergency-banner-icon { font-size: 2.5rem; flex-shrink: 0; }
.emergency-banner h3 { font-size: 1.15rem; font-weight: 700; color: #ff6b6b; margin-bottom: 6px; }
.emergency-banner p { color: var(--text2); font-size: 0.9rem; }
.emergency-num { font-family: var(--font-d); font-size: 2.5rem; color: #ff6b6b; font-weight: 600; }

/* Country tabs */
.country-tabs {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px;
}
.c-tab {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 100px; padding: 8px 18px;
  font-size: 0.84rem; font-weight: 600;
  color: var(--text2); cursor: pointer;
  font-family: var(--font-b); transition: all 0.2s;
}
.c-tab:hover { border-color: var(--border2); color: var(--text); }
.c-tab.active { background: rgba(255,100,100,0.12); border-color: rgba(255,100,100,0.3); color: #ff8a8a; }

/* Helpline cards */
.helpline-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.helpline-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 22px 24px;
  transition: all 0.3s;
  display: flex; flex-direction: column; gap: 10px;
}
.helpline-card:hover { border-color: rgba(255,100,100,0.3); transform: translateY(-3px); box-shadow: 0 8px 30px rgba(0,0,0,0.3); }
.helpline-header { display: flex; align-items: center; gap: 12px; }
.helpline-flag { font-size: 1.8rem; flex-shrink: 0; }
.helpline-name { font-weight: 700; font-size: 1rem; }
.helpline-type { font-size: 0.73rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text3); }
.helpline-number { font-family: var(--font-d); font-size: 1.8rem; color: #ff8a8a; line-height: 1; }
.helpline-detail { font-size: 0.83rem; color: var(--text2); }
.helpline-link { display: inline-flex; align-items: center; gap: 5px; font-size: 0.83rem; font-weight: 600; color: var(--accent); text-decoration: none; transition: gap 0.2s; }
.helpline-link:hover { gap: 8px; }

/* Therapist finder */
.finder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.finder-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 24px;
  transition: all 0.3s; display: flex; flex-direction: column;
}
.finder-card:hover { transform: translateY(-4px); border-color: var(--border2); box-shadow: var(--shadow); }
.finder-icon { font-size: 2rem; margin-bottom: 12px; }
.finder-name { font-weight: 700; font-size: 1rem; margin-bottom: 6px; }
.finder-desc { color: var(--text2); font-size: 0.85rem; line-height: 1.65; flex: 1; }
.finder-badges { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.finder-badge { font-size: 0.68rem; font-weight: 700; padding: 3px 9px; border-radius: 100px; }
.badge-free { background: rgba(94,255,216,0.1); color: var(--accent3); border: 1px solid rgba(94,255,216,0.2); }
.badge-paid { background: rgba(255,140,107,0.1); color: var(--accent2); border: 1px solid rgba(255,140,107,0.2); }
.badge-online { background: rgba(94,155,255,0.1); color: var(--accent); border: 1px solid rgba(94,155,255,0.2); }
.badge-global { background: rgba(192,132,252,0.1); color: var(--accent4); border: 1px solid rgba(192,132,252,0.2); }

/* Self-help tools */
.tool-link-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.tool-link-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 20px;
  text-decoration: none; color: var(--text);
  transition: all 0.3s; text-align: center;
}
.tool-link-card:hover { transform: translateY(-3px); border-color: var(--border2); box-shadow: var(--shadow); }
.tool-link-icon { font-size: 2rem; margin-bottom: 10px; display: block; }
.tool-link-name { font-weight: 700; font-size: 0.9rem; margin-bottom: 4px; }
.tool-link-desc { font-size: 0.78rem; color: var(--text2); }

/* Section divider styling */
.res-section { padding: 64px 5vw; max-width: var(--max-w); margin: 0 auto; }
.res-section + .res-section { border-top: 1px solid var(--border); }
</style>
</head>
<body>
<main id="main">

<div class="page-hero">
  <div class="tag" style="color:#ff8a8a;background:rgba(255,100,100,0.08);border-color:rgba(255,100,100,0.2)">Crisis Support & Resources</div>
  <h1>Help is always <em>within reach.</em></h1>
  <p>Whether you need to talk to someone right now or find long-term professional support — these resources are here for you.</p>
</div>

<!-- ═══════ CRISIS LINES ═══════ -->
<section class="res-section" id="crisis" aria-labelledby="crisis-heading">
  <div class="reveal">
    <div class="tag" style="color:#ff8a8a;background:rgba(255,100,100,0.08);border-color:rgba(255,100,100,0.2)">Immediate Help</div>
    <h2 class="section-title" id="crisis-heading">If you're in <em>crisis</em> right now</h2>
    <p class="section-sub">These helplines are free, confidential, and staffed by trained humans. Please reach out — it works.</p>
  </div>

  <div class="emergency-banner reveal">
    <div class="emergency-banner-icon">🆘</div>
    <div>
      <h3>Are you having thoughts of suicide or self-harm?</h3>
      <p>You are not alone, and you don't have to feel this way forever. Please call or text a crisis line right now:</p>
    </div>
    <div style="text-align:center">
      <div class="emergency-num">988</div>
      <div style="font-size:0.8rem;color:var(--text3)">US · Suicide & Crisis Lifeline</div>
    </div>
  </div>

  <div class="country-tabs reveal" role="tablist" aria-label="Filter helplines by region">
    <button class="c-tab active" onclick="filterLines('all',this)">🌍 All</button>
    <button class="c-tab" onclick="filterLines('us',this)">🇺🇸 United States</button>
    <button class="c-tab" onclick="filterLines('uk',this)">🇬🇧 United Kingdom</button>
    <button class="c-tab" onclick="filterLines('ca',this)">🇨🇦 Canada</button>
    <button class="c-tab" onclick="filterLines('au',this)">🇦🇺 Australia</button>
    <button class="c-tab" onclick="filterLines('global',this)">🌐 Global</button>
  </div>

  <div class="helpline-grid reveal" id="helplineGrid"></div>
</section>

<!-- ═══════ FIND A THERAPIST ═══════ -->
<section class="res-section" id="find" aria-labelledby="find-heading">
  <div class="reveal">
    <div class="tag">Professional Help</div>
    <h2 class="section-title" id="find-heading">Find a <em>therapist</em></h2>
    <p class="section-sub">Therapy works. These directories make finding the right professional as easy as possible.</p>
  </div>
  <div class="finder-grid reveal">
    <div class="finder-card">
      <div class="finder-icon">🔍</div>
      <div class="finder-name">Psychology Today</div>
      <div class="finder-badges"><span class="finder-badge badge-global">Global</span><span class="finder-badge badge-online">Online</span></div>
      <p class="finder-desc">The largest therapist directory. Filter by specialty, insurance, fee, and location. Includes verified reviews.</p>
      <a href="https://www.psychologytoday.com/us/therapists" target="_blank" rel="noopener" class="btn btn-ghost btn-sm" style="margin-top:14px">Find Therapists →</a>
    </div>
    <div class="finder-card">
      <div class="finder-icon">💙</div>
      <div class="finder-name">BetterHelp</div>
      <div class="finder-badges"><span class="finder-badge badge-online">Online</span><span class="finder-badge badge-global">Global</span></div>
      <p class="finder-desc">Online therapy platform matching you with licensed therapists. Sessions via text, phone, or video. Financial aid available.</p>
      <a href="https://www.betterhelp.com" target="_blank" rel="noopener" class="btn btn-ghost btn-sm" style="margin-top:14px">Get Started →</a>
    </div>
    <div class="finder-card">
      <div class="finder-icon">🌿</div>
      <div class="finder-name">Open Path Collective</div>
      <div class="finder-badges"><span class="finder-badge badge-free">Low Cost</span><span class="finder-badge badge-online">Online</span></div>
      <p class="finder-desc">Reduced-fee therapy ($30-$80/session) for those who can't afford standard rates. Licensed therapists only.</p>
      <a href="https://openpathcollective.org" target="_blank" rel="noopener" class="btn btn-ghost btn-sm" style="margin-top:14px">Find Low-Cost Help →</a>
    </div>
    <div class="finder-card">
      <div class="finder-icon">🏥</div>
      <div class="finder-name">SAMHSA Helpline</div>
      <div class="finder-badges"><span class="finder-badge badge-free">Free</span></div>
      <p class="finder-desc">Free, confidential treatment referral and information service (24/7, 365 days). Call 1-800-662-4357 (US).</p>
      <a href="https://www.samhsa.gov/find-help/national-helpline" target="_blank" rel="noopener" class="btn btn-ghost btn-sm" style="margin-top:14px">Learn More →</a>
    </div>
    <div class="finder-card">
      <div class="finder-icon">🇬🇧</div>
      <div class="finder-name">BACP (UK)</div>
      <div class="finder-badges"><span class="finder-badge badge-online">Online</span></div>
      <p class="finder-desc">The British Association for Counselling and Psychotherapy therapist finder. All listed therapists are accredited.</p>
      <a href="https://www.bacp.co.uk/search/Therapists" target="_blank" rel="noopener" class="btn btn-ghost btn-sm" style="margin-top:14px">Find UK Therapist →</a>
    </div>
    <div class="finder-card">
      <div class="finder-icon">🌍</div>
      <div class="finder-name">WHO mhGAP</div>
      <div class="finder-badges"><span class="finder-badge badge-global">Global</span><span class="finder-badge badge-free">Free</span></div>
      <p class="finder-desc">WHO's global mental health resource including treatment guides and how to access care in any country.</p>
      <a href="https://www.who.int/teams/mental-health-and-substance-use/treatment-care/mental-health-gap-action-programme" target="_blank" rel="noopener" class="btn btn-ghost btn-sm" style="margin-top:14px">Explore WHO Resources →</a>
    </div>
  </div>
</section>

<!-- ═══════ SELF-HELP TOOLS ═══════ -->
<section class="res-section" id="community" aria-labelledby="tools-heading">
  <div class="reveal">
    <div class="tag mint">Free Right Now</div>
    <h2 class="section-title" id="tools-heading">While you're <em>waiting</em> for help</h2>
    <p class="section-sub">These MindLift tools are always available and can provide immediate relief.</p>
  </div>
  <div class="tool-link-grid reveal">
    <a href="tools.html#breathe" class="tool-link-card">
      <span class="tool-link-icon">🫁</span>
      <div class="tool-link-name">Breathe</div>
      <div class="tool-link-desc">Instant calm with guided breathing exercises</div>
    </a>
    <a href="tools.html#chat" class="tool-link-card">
      <span class="tool-link-icon">💬</span>
      <div class="tool-link-name">AI Companion</div>
      <div class="tool-link-desc">Talk through what you're feeling</div>
    </a>
    <a href="tools.html#mood" class="tool-link-card">
      <span class="tool-link-icon">📊</span>
      <div class="tool-link-name">Mood Tracker</div>
      <div class="tool-link-desc">Log and understand your emotional patterns</div>
    </a>
    <a href="tools.html#journal" class="tool-link-card">
      <span class="tool-link-icon">📔</span>
      <div class="tool-link-name">Journal</div>
      <div class="tool-link-desc">Write your way through difficult feelings</div>
    </a>
    <a href="tools.html#quiz" class="tool-link-card">
      <span class="tool-link-icon">📝</span>
      <div class="tool-link-name">Self-Assessment</div>
      <div class="tool-link-desc">Check in on how you're really doing</div>
    </a>
    <a href="articles.html" class="tool-link-card">
      <span class="tool-link-icon">📖</span>
      <div class="tool-link-name">Articles</div>
      <div class="tool-link-desc">Evidence-based mental health information</div>
    </a>
  </div>
</section>

</main>
<script src="nav.js"></script>
<script>
const HELPLINES = [
  { region:'us', flag:'🇺🇸', name:'988 Suicide & Crisis Lifeline', type:'Suicide & Crisis', number:'988', detail:'Call or text · 24/7 · Free · Confidential', url:'https://988lifeline.org' },
  { region:'us', flag:'🇺🇸', name:'Crisis Text Line', type:'Text-Based Crisis', number:'Text HOME to 741741', detail:'US · 24/7 · Free · Text only', url:'https://www.crisistextline.org' },
  { region:'us', flag:'🇺🇸', name:'NAMI Helpline', type:'General Mental Health', number:'1-800-950-6264', detail:'Mon-Fri 10am-10pm ET · Free', url:'https://www.nami.org/help' },
  { region:'us', flag:'🇺🇸', name:'SAMHSA Helpline', type:'Substance & Mental Health', number:'1-800-662-4357', detail:'24/7 · Free · Multilingual', url:'https://www.samhsa.gov' },
  { region:'uk', flag:'🇬🇧', name:'Samaritans', type:'Suicide Prevention', number:'116 123', detail:'24/7 · Free · Confidential', url:'https://www.samaritans.org' },
  { region:'uk', flag:'🇬🇧', name:'Mind Infoline', type:'General Mental Health', number:'0300 123 3393', detail:'Mon-Fri 9am-6pm · Confidential', url:'https://www.mind.org.uk' },
  { region:'uk', flag:'🇬🇧', name:'Crisis Text Line UK', type:'Text-Based Crisis', number:'Text SHOUT to 85258', detail:'24/7 · Free · Text only', url:'https://giveusashout.org' },
  { region:'ca', flag:'🇨🇦', name:'Crisis Services Canada', type:'Suicide Prevention', number:'1-833-456-4566', detail:'24/7 · Free · Bilingual', url:'https://www.crisisservicescanada.ca' },
  { region:'ca', flag:'🇨🇦', name:'Kids Help Phone', type:'Youth Mental Health', number:'1-800-668-6868', detail:'24/7 · For ages up to 29 · Free', url:'https://kidshelpphone.ca' },
  { region:'au', flag:'🇦🇺', name:'Lifeline Australia', type:'Suicide Prevention', number:'13 11 14', detail:'24/7 · Free · Confidential', url:'https://www.lifeline.org.au' },
  { region:'au', flag:'🇦🇺', name:'Beyond Blue', type:'Anxiety & Depression', number:'1300 22 4636', detail:'24/7 · Free · Australia', url:'https://www.beyondblue.org.au' },
  { region:'au', flag:'🇦🇺', name:'headspace', type:'Youth Mental Health', number:'1800 650 890', detail:'9am-1am AEST · Ages 12-25', url:'https://headspace.org.au' },
  { region:'global', flag:'🌍', name:'Befrienders Worldwide', type:'Global Crisis Directory', number:'befrienders.org', detail:'Find your local helpline worldwide', url:'https://www.befrienders.org' },
  { region:'global', flag:'🌐', name:'IASP Resource Center', type:'Global Suicide Prevention', number:'iasp.info', detail:'International directory and resources', url:'https://www.iasp.info' },
  { region:'global', flag:'🌍', name:'WHO Mental Health', type:'Global Resources', number:'who.int/mental_health', detail:'Global mental health guidance & resources', url:'https://www.who.int/mental_health' },
];

function filterLines(region, btn) {
  document.querySelectorAll('.c-tab').forEach(b => b.classList.remove('active'));
  btn.classList.add('active');
  const filtered = region === 'all' ? HELPLINES : HELPLINES.filter(h => h.region === region);
  const grid = document.getElementById('helplineGrid');
  grid.innerHTML = filtered.map(h => `
    <div class="helpline-card">
      <div class="helpline-header">
        <span class="helpline-flag">${h.flag}</span>
        <div><div class="helpline-name">${h.name}</div><div class="helpline-type">${h.type}</div></div>
      </div>
      <div class="helpline-number">${h.number}</div>
      <div class="helpline-detail">${h.detail}</div>
      ${h.url ? `<a href="${h.url}" target="_blank" rel="noopener" class="helpline-link">Visit website →</a>` : ''}
    </div>`).join('');
}
filterLines('all', document.querySelector('.c-tab.active'));
</script>
</body>
</html>