149 lines
7.0 KiB
HTML
149 lines
7.0 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=390, initial-scale=1">
|
||
|
|
<title>Kalei — Daily Affirmation</title>
|
||
|
|
<link rel="stylesheet" href="../../assets/design-system.css">
|
||
|
|
<style>
|
||
|
|
.nav-back { color: var(--emerald-light) !important; }
|
||
|
|
.affirmation-canvas {
|
||
|
|
position: relative;
|
||
|
|
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
||
|
|
flex: 1; padding: 0 var(--space-6); text-align: center;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
.em-aura-large {
|
||
|
|
position: absolute;
|
||
|
|
top: 50%; left: 50%;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
width: 320px; height: 320px;
|
||
|
|
border-radius: 50%;
|
||
|
|
background: radial-gradient(circle, rgba(16,185,129,0.18) 0%, rgba(16,185,129,0.05) 50%, transparent 70%);
|
||
|
|
filter: blur(60px);
|
||
|
|
animation: breathing 6s ease-in-out infinite;
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
.em-aura-inner {
|
||
|
|
position: absolute;
|
||
|
|
top: 50%; left: 50%;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
width: 160px; height: 160px;
|
||
|
|
border-radius: 50%;
|
||
|
|
background: radial-gradient(circle, rgba(16,185,129,0.12) 0%, transparent 70%);
|
||
|
|
filter: blur(30px);
|
||
|
|
animation: breathing 6s ease-in-out infinite 0.5s;
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
.mini-kaleidoscope { animation: breathing 6s ease-in-out infinite; margin-bottom: var(--space-6); }
|
||
|
|
.date-label {
|
||
|
|
font-size: 11px; font-weight: 600; text-transform: uppercase;
|
||
|
|
letter-spacing: 0.08em; color: var(--emerald);
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
.affirmation-quote {
|
||
|
|
font-size: 22px; font-weight: 500; color: var(--pure-light);
|
||
|
|
line-height: 1.4; font-family: var(--font-display);
|
||
|
|
margin-bottom: 28px; position: relative; z-index: 1;
|
||
|
|
}
|
||
|
|
.affirmation-quote::before {
|
||
|
|
content: '"';
|
||
|
|
font-size: 48px; color: var(--emerald); opacity: 0.3;
|
||
|
|
position: absolute; top: -16px; left: -12px;
|
||
|
|
font-family: Georgia, serif; line-height: 1;
|
||
|
|
}
|
||
|
|
.affirmation-subtext {
|
||
|
|
font-size: 14px; color: var(--dim-light); line-height: 1.5;
|
||
|
|
margin-bottom: 32px; position: relative; z-index: 1;
|
||
|
|
}
|
||
|
|
.reflect-btn {
|
||
|
|
display: flex; align-items: center; justify-content: center; gap: 10px;
|
||
|
|
height: 52px; width: 100%; max-width: 300px;
|
||
|
|
background: var(--emerald); color: var(--pure-light);
|
||
|
|
font-size: 16px; font-weight: 600; border-radius: var(--radius-lg);
|
||
|
|
box-shadow: var(--glow-emerald); text-decoration: none;
|
||
|
|
transition: background 0.2s; position: relative; z-index: 1;
|
||
|
|
}
|
||
|
|
.reflect-btn:hover { background: var(--emerald-light); }
|
||
|
|
.shard-deco {
|
||
|
|
position: absolute; opacity: 0.15;
|
||
|
|
animation: breathing 6s ease-in-out infinite;
|
||
|
|
}
|
||
|
|
.new-affirmation-link {
|
||
|
|
position: relative; z-index: 1; margin-top: var(--space-4);
|
||
|
|
font-size: 13px; color: var(--dim-light); text-decoration: none;
|
||
|
|
display: flex; align-items: center; gap: 6px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.new-affirmation-link:hover { color: var(--emerald-light); }
|
||
|
|
</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="nav-header">
|
||
|
|
<a class="nav-back" href="20-lens-dashboard.html">
|
||
|
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M12 4L6 10L12 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||
|
|
</a>
|
||
|
|
<span class="nav-title">Affirmation</span>
|
||
|
|
<span class="nav-action">
|
||
|
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" style="color: var(--dim-light);">
|
||
|
|
<path d="M4 10h12M4 6h12M4 14h8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||
|
|
</svg>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="affirmation-canvas">
|
||
|
|
<div class="em-aura-large"></div>
|
||
|
|
<div class="em-aura-inner"></div>
|
||
|
|
|
||
|
|
<!-- Decorative shards -->
|
||
|
|
<svg class="shard-deco" style="top: 10%; left: 5%;" width="24" height="24" viewBox="0 0 24 24">
|
||
|
|
<path d="M12 2L16 12L12 22L8 12Z" fill="var(--emerald)" opacity="0.6"/>
|
||
|
|
</svg>
|
||
|
|
<svg class="shard-deco" style="top: 15%; right: 8%; animation-delay: 2s;" width="16" height="16" viewBox="0 0 16 16">
|
||
|
|
<path d="M8 1L11 8L8 15L5 8Z" fill="var(--emerald)" opacity="0.5"/>
|
||
|
|
</svg>
|
||
|
|
<svg class="shard-deco" style="bottom: 20%; left: 10%; animation-delay: 3s;" width="20" height="20" viewBox="0 0 20 20">
|
||
|
|
<path d="M10 2L14 10L10 18L6 10Z" fill="var(--emerald-light)" opacity="0.4"/>
|
||
|
|
</svg>
|
||
|
|
<svg class="shard-deco" style="bottom: 28%; right: 6%; animation-delay: 1s;" width="12" height="12" viewBox="0 0 12 12">
|
||
|
|
<path d="M6 1L8 6L6 11L4 6Z" fill="var(--emerald)" opacity="0.5"/>
|
||
|
|
</svg>
|
||
|
|
|
||
|
|
<img src="../../assets/kalei-logo.svg" width="48" height="48" alt="Kalei" class="mini-kaleidoscope">
|
||
|
|
|
||
|
|
<div class="date-label">Today — Feb 22, 2026</div>
|
||
|
|
|
||
|
|
<div class="affirmation-quote">
|
||
|
|
I have the strength and clarity to take one step forward, even when the path isn't fully visible yet.
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="affirmation-subtext">
|
||
|
|
This affirmation was crafted from your goal to present with confidence and your Mirror sessions this week — you've been working through exactly what holds you back.
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<a class="reflect-btn" href="../mirror/15-mirror-home.html">
|
||
|
|
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||
|
|
<path d="M9 3L12 7L13 11L9 15L5 11L6 7Z" stroke="white" fill="none" stroke-width="1.2"/>
|
||
|
|
</svg>
|
||
|
|
Reflect on this
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<a class="new-affirmation-link" href="#">
|
||
|
|
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7l3.5-3.5M2 7l3.5 3.5M2 7h10" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||
|
|
Generate new affirmation
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|