275 lines
9.3 KiB
HTML
275 lines
9.3 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=390, initial-scale=1">
|
||
|
|
<title>Kalei — Crisis Response</title>
|
||
|
|
<link rel="stylesheet" href="../../assets/design-system.css">
|
||
|
|
<style>
|
||
|
|
.device-frame {
|
||
|
|
background: var(--void);
|
||
|
|
}
|
||
|
|
.screen-content {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
padding: 0 20px 24px;
|
||
|
|
}
|
||
|
|
.hero-section {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
padding-top: 24px;
|
||
|
|
padding-bottom: 20px;
|
||
|
|
}
|
||
|
|
.ruby-aura {
|
||
|
|
position: absolute;
|
||
|
|
top: 80px;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
width: 240px;
|
||
|
|
height: 240px;
|
||
|
|
border-radius: 50%;
|
||
|
|
background: radial-gradient(circle, rgba(239,68,68,0.12) 0%, transparent 70%);
|
||
|
|
filter: blur(40px);
|
||
|
|
animation: breathing 6s ease-in-out infinite;
|
||
|
|
pointer-events: none;
|
||
|
|
z-index: 0;
|
||
|
|
}
|
||
|
|
.hero-icon {
|
||
|
|
width: 72px;
|
||
|
|
height: 72px;
|
||
|
|
border-radius: 50%;
|
||
|
|
background: rgba(239,68,68,0.12);
|
||
|
|
border: 2px solid rgba(239,68,68,0.3);
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
margin-bottom: 16px;
|
||
|
|
position: relative;
|
||
|
|
z-index: 1;
|
||
|
|
animation: breathing 6s ease-in-out infinite;
|
||
|
|
}
|
||
|
|
.hero-title {
|
||
|
|
font-size: 26px;
|
||
|
|
font-weight: 700;
|
||
|
|
font-family: var(--font-display);
|
||
|
|
color: var(--ruby);
|
||
|
|
text-align: center;
|
||
|
|
margin-bottom: 8px;
|
||
|
|
position: relative;
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
.hero-subtitle {
|
||
|
|
font-size: 15px;
|
||
|
|
color: var(--dim-light);
|
||
|
|
text-align: center;
|
||
|
|
line-height: 1.5;
|
||
|
|
position: relative;
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
.resources-section {
|
||
|
|
margin-bottom: 16px;
|
||
|
|
}
|
||
|
|
.resource-card {
|
||
|
|
background: var(--kalei-navy);
|
||
|
|
border: 1px solid rgba(239,68,68,0.2);
|
||
|
|
border-radius: var(--radius-xl);
|
||
|
|
padding: 16px;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
.resource-header {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 12px;
|
||
|
|
margin-bottom: 4px;
|
||
|
|
}
|
||
|
|
.resource-icon {
|
||
|
|
width: 36px;
|
||
|
|
height: 36px;
|
||
|
|
border-radius: 50%;
|
||
|
|
background: rgba(239,68,68,0.12);
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
flex-shrink: 0;
|
||
|
|
}
|
||
|
|
.resource-name {
|
||
|
|
font-size: 15px;
|
||
|
|
font-weight: 600;
|
||
|
|
color: var(--pure-light);
|
||
|
|
}
|
||
|
|
.resource-detail {
|
||
|
|
font-size: 13px;
|
||
|
|
color: var(--dim-light);
|
||
|
|
margin-top: 2px;
|
||
|
|
margin-left: 48px;
|
||
|
|
}
|
||
|
|
.divider { height: 1px; background: rgba(239,68,68,0.1); margin: 8px 0; }
|
||
|
|
.btn-ruby {
|
||
|
|
width: 100%;
|
||
|
|
height: 52px;
|
||
|
|
border: none;
|
||
|
|
border-radius: var(--radius-lg);
|
||
|
|
background: var(--ruby);
|
||
|
|
color: white;
|
||
|
|
font-size: 16px;
|
||
|
|
font-weight: 600;
|
||
|
|
font-family: var(--font-primary);
|
||
|
|
cursor: pointer;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
gap: 8px;
|
||
|
|
text-decoration: none;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
box-shadow: 0 0 20px rgba(239,68,68,0.3);
|
||
|
|
transition: background 0.2s;
|
||
|
|
}
|
||
|
|
.btn-ruby:hover { background: var(--ruby); filter: brightness(0.85); }
|
||
|
|
.btn-okay {
|
||
|
|
width: 100%;
|
||
|
|
height: 44px;
|
||
|
|
background: var(--deep-glass);
|
||
|
|
border: 1px solid var(--twilight);
|
||
|
|
border-radius: var(--radius-lg);
|
||
|
|
color: var(--soft-light);
|
||
|
|
font-size: 15px;
|
||
|
|
font-weight: 500;
|
||
|
|
font-family: var(--font-primary);
|
||
|
|
cursor: pointer;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
text-decoration: none;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
transition: background 0.2s;
|
||
|
|
}
|
||
|
|
.btn-okay:hover { background: var(--twilight); }
|
||
|
|
.breathing-link {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
gap: 6px;
|
||
|
|
font-size: 13px;
|
||
|
|
color: var(--dim-light);
|
||
|
|
text-decoration: none;
|
||
|
|
padding: 8px;
|
||
|
|
transition: color 0.2s;
|
||
|
|
}
|
||
|
|
.breathing-link:hover { color: var(--soft-light); }
|
||
|
|
.safe-note {
|
||
|
|
font-size: 11px;
|
||
|
|
color: var(--faint-light);
|
||
|
|
text-align: center;
|
||
|
|
line-height: 1.5;
|
||
|
|
margin-top: 4px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="device-frame">
|
||
|
|
<div class="status-bar">
|
||
|
|
<span class="time">9:41</span>
|
||
|
|
<div class="icons">
|
||
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||
|
|
<rect x="1" y="7" width="2.5" height="5" rx="0.5" fill="#E2E8F0" opacity="0.4"/>
|
||
|
|
<rect x="4.5" y="5" width="2.5" height="7" rx="0.5" fill="#E2E8F0" opacity="0.6"/>
|
||
|
|
<rect x="8" y="3" width="2.5" height="9" rx="0.5" fill="#E2E8F0" opacity="0.8"/>
|
||
|
|
<rect x="11.5" y="1" width="2.5" height="11" rx="0.5" fill="#E2E8F0"/>
|
||
|
|
</svg>
|
||
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||
|
|
<path d="M 2,8 C 4,4 12,4 14,8" stroke="#E2E8F0" stroke-width="1.2" fill="none" stroke-linecap="round"/>
|
||
|
|
<path d="M 4,10 C 6,7 10,7 12,10" stroke="#E2E8F0" stroke-width="1" fill="none" opacity="0.8" stroke-linecap="round"/>
|
||
|
|
<circle cx="8" cy="12" r="1.2" fill="#E2E8F0"/>
|
||
|
|
</svg>
|
||
|
|
<svg width="24" height="12" viewBox="0 0 24 12" fill="none">
|
||
|
|
<rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#E2E8F0" stroke-width="1" opacity="0.5"/>
|
||
|
|
<rect x="22" y="3" width="2" height="6" rx="1" fill="#E2E8F0" opacity="0.3"/>
|
||
|
|
<rect x="2" y="2" width="16" height="8" rx="1.5" fill="#10B981" opacity="0.9"/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="ruby-aura"></div>
|
||
|
|
|
||
|
|
<div class="screen-content">
|
||
|
|
<!-- Hero -->
|
||
|
|
<div class="hero-section">
|
||
|
|
<div class="hero-icon">
|
||
|
|
<svg width="32" height="32" viewBox="0 0 32 32" fill="none">
|
||
|
|
<path d="M16 4L28 16L16 28L4 16Z" fill="#EF4444" opacity="0.3"/>
|
||
|
|
<path d="M16 8L24 16L16 24L8 16Z" fill="#EF4444" opacity="0.5"/>
|
||
|
|
<!-- Heart shape -->
|
||
|
|
<path d="M11 13.5C11 12.1 12.1 11 13.5 11C14.3 11 15 11.4 15.5 12C16 11.4 16.7 11 17.5 11C18.9 11 20 12.1 20 13.5C20 16 15.5 20 15.5 20C15.5 20 11 16 11 13.5Z" fill="#FCA5A5" opacity="0.9"/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="hero-title">You're not alone in this</div>
|
||
|
|
<div class="hero-subtitle">Whatever you're carrying right now — it's real, and it matters. You don't have to face it alone. Trained people are ready to listen, right now, any hour.</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Crisis resources -->
|
||
|
|
<div class="resources-section">
|
||
|
|
<!-- 988 Lifeline -->
|
||
|
|
<div class="resource-card">
|
||
|
|
<div class="resource-header">
|
||
|
|
<div class="resource-icon">
|
||
|
|
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||
|
|
<rect x="3" y="3" width="12" height="12" rx="2" stroke="#EF4444" stroke-width="1.2"/>
|
||
|
|
<path d="M6 7C6 7 7.5 6 9 7C10.5 8 12 7 12 7" stroke="#EF4444" stroke-width="1" stroke-linecap="round"/>
|
||
|
|
<path d="M6 10.5C7.5 12 10.5 12 12 10.5" stroke="#EF4444" stroke-width="1" stroke-linecap="round"/>
|
||
|
|
<circle cx="7" cy="9" r="0.8" fill="#EF4444"/>
|
||
|
|
<circle cx="11" cy="9" r="0.8" fill="#EF4444"/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="resource-name">988 Suicide & Crisis Lifeline</div>
|
||
|
|
</div>
|
||
|
|
<div class="resource-detail">Call or text 988 — free, confidential, 24/7</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Crisis Text Line -->
|
||
|
|
<div class="resource-card">
|
||
|
|
<div class="resource-header">
|
||
|
|
<div class="resource-icon">
|
||
|
|
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||
|
|
<rect x="2" y="4" width="14" height="10" rx="2" stroke="#EF4444" stroke-width="1.2"/>
|
||
|
|
<path d="M6 14L4 16" stroke="#EF4444" stroke-width="1.2" stroke-linecap="round"/>
|
||
|
|
<path d="M5 8H13M5 11H10" stroke="#EF4444" stroke-width="1" stroke-linecap="round"/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="resource-name">Crisis Text Line</div>
|
||
|
|
</div>
|
||
|
|
<div class="resource-detail">Text HOME to 741741 — text-based support, 24/7</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Primary CTA: Call or text 988 -->
|
||
|
|
<a class="btn-ruby" href="tel:988">
|
||
|
|
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||
|
|
<path d="M6.5 3.5C6.5 3.5 5 3 3.5 5S3 9 5.5 11.5S10 15 12.5 14.5S15.5 13.5 15.5 12L13 10.5C13 10.5 12 10 11 11C10 12 9.5 11.5 7.5 9.5S7 7 8 6L6.5 3.5Z" fill="white" opacity="0.9"/>
|
||
|
|
</svg>
|
||
|
|
Call or text 988 — free, 24/7
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<!-- Secondary: I'm okay -->
|
||
|
|
<a class="btn-okay" href="../turn/10-turn-home.html">
|
||
|
|
I'm okay right now
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<!-- Breathing exercise link -->
|
||
|
|
<a class="breathing-link" href="../ritual/47-ritual-quick.html">
|
||
|
|
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
|
||
|
|
<circle cx="7" cy="7" r="5" stroke="#94A3B8" stroke-width="1.2" stroke-dasharray="2 2"/>
|
||
|
|
<circle cx="7" cy="7" r="2" fill="#94A3B8" opacity="0.5"/>
|
||
|
|
</svg>
|
||
|
|
Try a grounding exercise instead
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<div class="safe-note">
|
||
|
|
If you or someone else is in immediate danger, call 911.<br>
|
||
|
|
Kalei is a support tool, not a substitute for emergency care.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|