Spaces:
Sleeping
Sleeping
File size: 2,865 Bytes
53ba2ed b94a1a8 53ba2ed b94a1a8 53ba2ed | 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 | import { Activity, ShieldCheck, Brain } from 'lucide-react';
export default function Welcome({ onStart }) {
return (
<div className="welcome-screen">
{/* Animated logo */}
<div style={{ marginBottom: 32, position: 'relative' }}>
<div style={{
width: 80, height: 80, borderRadius: '50%',
background: 'rgba(255,45,85,0.12)',
border: '2px solid rgba(255,45,85,0.4)',
display: 'flex', alignItems: 'center', justifyContent: 'center',
animation: 'heartbeat 1.4s ease-in-out infinite',
margin: '0 auto 20px',
}}>
<Activity size={36} color="var(--red-critical)" />
</div>
{/* EKG line SVG */}
<svg width="240" height="40" viewBox="0 0 240 40" style={{ margin: '0 auto', display: 'block' }}>
<polyline
points="0,20 30,20 45,5 52,35 60,5 70,20 100,20 115,20 120,2 126,38 132,2 138,20 180,20 240,20"
fill="none" stroke="var(--red-critical)" strokeWidth="1.5"
strokeDasharray="400" strokeDashoffset="400"
style={{ animation: 'ekg 2s ease forwards 0.3s' }}
/>
</svg>
</div>
{/* Title */}
<h1 style={{
fontSize: 42, fontWeight: 900, letterSpacing: '-0.03em',
background: 'linear-gradient(135deg, #0f172a 30%, #475569)',
WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
marginBottom: 8,
}}>
CodeBlue Context
</h1>
<p style={{ fontSize: 16, color: 'var(--text-secondary)', marginBottom: 32, maxWidth: 420, lineHeight: 1.6 }}>
Emergency clinical intelligence. Five AI agents. One life-saving brief.
</p>
{/* Feature pills */}
<div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', justifyContent: 'center', marginBottom: 40 }}>
{[
{ icon: <Activity size={13}/>, label: '5-Agent Orchestration' },
{ icon: <ShieldCheck size={13}/>, label: 'Contraindication Guardian' },
{ icon: <Brain size={13}/>, label: 'Explainable AI Reasoning' },
].map(f => (
<div key={f.label} style={{
display: 'flex', alignItems: 'center', gap: 6,
padding: '6px 14px', borderRadius: 99,
background: 'rgba(10,132,255,0.08)',
border: '1px solid rgba(10,132,255,0.2)',
color: 'var(--blue-accent)', fontSize: 12, fontWeight: 600,
}}>
{f.icon}{f.label}
</div>
))}
</div>
<button className="btn-danger" style={{ maxWidth: 260 }} onClick={onStart}>
<Activity size={16} /> Enter Emergency System
</button>
<p style={{ marginTop: 20, fontSize: 11, color: 'var(--text-tertiary)' }}>
For clinical decision support only — not a substitute for physician judgment
</p>
</div>
);
}
|