274 lines
12 KiB
HTML
274 lines
12 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=390, initial-scale=1">
|
|||
|
|
<title>Kalei — Guide Attention Prompt</title>
|
|||
|
|
<link rel="stylesheet" href="../../assets/design-system.css">
|
|||
|
|
<style>
|
|||
|
|
.screen-aura {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 20%;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translate(-50%, -50%);
|
|||
|
|
width: 280px;
|
|||
|
|
height: 280px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background: radial-gradient(circle, rgba(139,92,246,0.12) 0%, transparent 70%);
|
|||
|
|
filter: blur(50px);
|
|||
|
|
animation: breathing 6s ease-in-out infinite;
|
|||
|
|
pointer-events: none;
|
|||
|
|
z-index: 0;
|
|||
|
|
}
|
|||
|
|
@keyframes breathing {
|
|||
|
|
0%, 100% { opacity: 0.6; transform: scale(1) translate(-50%, -50%); }
|
|||
|
|
50% { opacity: 1; transform: scale(1.05) translate(-48%, -52%); }
|
|||
|
|
}
|
|||
|
|
@keyframes fadeIn {
|
|||
|
|
from { opacity: 0; transform: translateY(8px); }
|
|||
|
|
to { opacity: 1; transform: translateY(0); }
|
|||
|
|
}
|
|||
|
|
.lens-heading { color: var(--emerald-light); margin-bottom: 4px; }
|
|||
|
|
.goal-card {
|
|||
|
|
background: var(--kalei-navy);
|
|||
|
|
border: 1px solid var(--twilight);
|
|||
|
|
border-radius: var(--radius-xl);
|
|||
|
|
padding: var(--space-4);
|
|||
|
|
margin-bottom: var(--space-3);
|
|||
|
|
display: flex;
|
|||
|
|
gap: var(--space-3);
|
|||
|
|
align-items: center;
|
|||
|
|
text-decoration: none;
|
|||
|
|
transition: border-color 0.2s ease-out;
|
|||
|
|
}
|
|||
|
|
.goal-card:hover { border-color: rgba(16,185,129,0.4); }
|
|||
|
|
.goal-ring-wrap {
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
position: relative;
|
|||
|
|
display: inline-flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
width: 64px;
|
|||
|
|
height: 64px;
|
|||
|
|
}
|
|||
|
|
.goal-ring-wrap svg { transform: rotate(-90deg); position: absolute; }
|
|||
|
|
.goal-ring-pct { font-size: 14px; font-weight: 700; color: var(--pure-light); position: relative; z-index: 1; }
|
|||
|
|
.goal-info { flex: 1; min-width: 0; }
|
|||
|
|
.goal-title { font-size: 15px; font-weight: 600; color: var(--pure-light); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|||
|
|
.goal-meta { font-size: 12px; color: var(--dim-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|||
|
|
/* Attention prompt card */
|
|||
|
|
.attention-card {
|
|||
|
|
background: var(--kalei-navy);
|
|||
|
|
border: 1px solid rgba(139,92,246,0.35);
|
|||
|
|
border-radius: var(--radius-xl);
|
|||
|
|
padding: var(--space-4);
|
|||
|
|
margin-bottom: var(--space-3);
|
|||
|
|
box-shadow: 0 0 20px rgba(139,92,246,0.08);
|
|||
|
|
position: relative;
|
|||
|
|
overflow: hidden;
|
|||
|
|
animation: fadeIn 0.35s ease-out 0.1s both;
|
|||
|
|
}
|
|||
|
|
.attention-card::after {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
height: 2px;
|
|||
|
|
background: linear-gradient(90deg, transparent, var(--amethyst), var(--sapphire), var(--emerald), transparent);
|
|||
|
|
opacity: 0.7;
|
|||
|
|
}
|
|||
|
|
.attention-label-row {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: var(--space-2);
|
|||
|
|
margin-bottom: var(--space-3);
|
|||
|
|
}
|
|||
|
|
.attention-dot {
|
|||
|
|
width: 8px;
|
|||
|
|
height: 8px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background: var(--amethyst);
|
|||
|
|
box-shadow: 0 0 8px rgba(139,92,246,0.5);
|
|||
|
|
animation: breathingDot 2s ease-in-out infinite;
|
|||
|
|
}
|
|||
|
|
@keyframes breathingDot {
|
|||
|
|
0%, 100% { box-shadow: 0 0 4px rgba(139,92,246,0.3); }
|
|||
|
|
50% { box-shadow: 0 0 12px rgba(139,92,246,0.7); }
|
|||
|
|
}
|
|||
|
|
.attention-label {
|
|||
|
|
font-size: 11px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
text-transform: uppercase;
|
|||
|
|
letter-spacing: 0.07em;
|
|||
|
|
color: var(--amethyst-light);
|
|||
|
|
}
|
|||
|
|
.attention-heading {
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: var(--pure-light);
|
|||
|
|
margin-bottom: var(--space-3);
|
|||
|
|
}
|
|||
|
|
.attention-body {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: var(--soft-light);
|
|||
|
|
line-height: 1.65;
|
|||
|
|
margin-bottom: var(--space-3);
|
|||
|
|
}
|
|||
|
|
.attention-footer {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: var(--faint-light);
|
|||
|
|
font-style: italic;
|
|||
|
|
padding-top: var(--space-2);
|
|||
|
|
border-top: 1px solid var(--twilight);
|
|||
|
|
margin-bottom: var(--space-4);
|
|||
|
|
}
|
|||
|
|
.attention-footer span {
|
|||
|
|
color: var(--amethyst-light);
|
|||
|
|
font-style: normal;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
.attention-actions {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: var(--space-2);
|
|||
|
|
}
|
|||
|
|
.got-it-btn {
|
|||
|
|
height: 48px;
|
|||
|
|
background: var(--amethyst);
|
|||
|
|
color: var(--pure-light);
|
|||
|
|
font-size: 15px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
border-radius: var(--radius-lg);
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
text-decoration: none;
|
|||
|
|
box-shadow: 0 0 18px rgba(139,92,246,0.25);
|
|||
|
|
transition: background 0.2s ease-out;
|
|||
|
|
cursor: pointer;
|
|||
|
|
border: none;
|
|||
|
|
font-family: var(--font-primary);
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
.got-it-btn:hover { background: var(--amethyst-light); }
|
|||
|
|
.log-btn {
|
|||
|
|
height: 44px;
|
|||
|
|
background: var(--deep-glass);
|
|||
|
|
color: var(--amethyst-light);
|
|||
|
|
font-size: 14px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
border-radius: var(--radius-lg);
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
text-decoration: none;
|
|||
|
|
border: 1px solid rgba(139,92,246,0.25);
|
|||
|
|
transition: border-color 0.2s ease-out;
|
|||
|
|
}
|
|||
|
|
.log-btn:hover { border-color: var(--amethyst); }
|
|||
|
|
</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="screen-content" style="padding-top: var(--space-4); padding-bottom: 100px;">
|
|||
|
|
<div class="screen-aura"></div>
|
|||
|
|
<div style="position: relative; z-index: 1;">
|
|||
|
|
|
|||
|
|
<div class="heading lens-heading">Your Lens</div>
|
|||
|
|
<div class="body-sm text-dim" style="margin-bottom: var(--space-4);">3 active goals · 47 evidence tiles</div>
|
|||
|
|
|
|||
|
|
<!-- Goal card — Present with confidence (emerald, 65%) -->
|
|||
|
|
<a class="goal-card" href="../lens/27-lens-goal-detail.html">
|
|||
|
|
<div class="goal-ring-wrap">
|
|||
|
|
<svg width="64" height="64" viewBox="0 0 64 64">
|
|||
|
|
<defs>
|
|||
|
|
<linearGradient id="ap-grEm" x1="0" y1="0" x2="0" y2="1">
|
|||
|
|
<stop offset="0%" stop-color="#6EE7B7"/>
|
|||
|
|
<stop offset="100%" stop-color="#059669"/>
|
|||
|
|
</linearGradient>
|
|||
|
|
</defs>
|
|||
|
|
<circle cx="32" cy="32" r="27" fill="none" stroke="var(--twilight)" stroke-width="3.5"/>
|
|||
|
|
<!-- 65% of 2π×27 ≈ 169.6: 65% = 110.2, remainder = 59.4 -->
|
|||
|
|
<circle cx="32" cy="32" r="27" fill="none" stroke="url(#ap-grEm)" stroke-width="3.5"
|
|||
|
|
stroke-dasharray="110.2 59.4" stroke-linecap="round"/>
|
|||
|
|
</svg>
|
|||
|
|
<span class="goal-ring-pct">65%</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="goal-info">
|
|||
|
|
<div class="goal-title">Present with confidence</div>
|
|||
|
|
<div class="goal-meta">Started Feb 5 · 2 new tiles this week</div>
|
|||
|
|
</div>
|
|||
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" style="color: var(--faint-light); flex-shrink:0;">
|
|||
|
|
<path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|||
|
|
</svg>
|
|||
|
|
</a>
|
|||
|
|
|
|||
|
|
<!-- Attention prompt card below goals -->
|
|||
|
|
<div class="attention-card">
|
|||
|
|
<div class="attention-label-row">
|
|||
|
|
<div class="attention-dot"></div>
|
|||
|
|
<span class="attention-label">Today's Focus: Notice</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="attention-heading">Notice when you catch yourself catastrophizing</div>
|
|||
|
|
<div class="attention-body">
|
|||
|
|
Today, see if you can catch the moment your mind jumps from "this went badly" to "everything is ruined." You don't need to stop it — just notice the leap. The awareness itself is the practice.
|
|||
|
|
</div>
|
|||
|
|
<div class="attention-footer">
|
|||
|
|
Linked to your fragment: <span>Catastrophizing (7 of 47 Turns)</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="attention-actions">
|
|||
|
|
<button class="got-it-btn" id="gotItBtn">Got it</button>
|
|||
|
|
<a class="log-btn" href="71-guide-moment-log.html" id="logBtn" style="display: none;">Log a moment</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="tab-bar">
|
|||
|
|
<a class="tab-item inactive" data-tab="turn" href="../turn/10-turn-home.html">
|
|||
|
|
<svg width="24" height="24" viewBox="0 0 24 24"><path d="M12 2L20 12L12 22L4 12Z" fill="currentColor" opacity="0.9"/><path d="M12 2L20 12L12 12Z" fill="white" opacity="0.15"/></svg>
|
|||
|
|
<span class="tab-label">Turn</span>
|
|||
|
|
</a>
|
|||
|
|
<a class="tab-item inactive" data-tab="mirror" href="../mirror/15-mirror-home.html">
|
|||
|
|
<svg width="24" height="24" viewBox="0 0 24 24"><path d="M12 3L16 8L18 14L12 19L6 14L8 8Z" stroke="currentColor" fill="none" stroke-width="1.2"/></svg>
|
|||
|
|
<span class="tab-label">Mirror</span>
|
|||
|
|
</a>
|
|||
|
|
<a class="tab-item active" data-tab="lens" href="../lens/20-lens-dashboard.html">
|
|||
|
|
<svg width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke="currentColor" fill="none" stroke-width="1.2"/><circle cx="12" cy="12" r="4" stroke="currentColor" fill="none" stroke-width="0.8"/></svg>
|
|||
|
|
<span class="tab-label">Lens</span>
|
|||
|
|
</a>
|
|||
|
|
<a class="tab-item inactive" data-tab="gallery" href="../gallery/31-gallery-all.html">
|
|||
|
|
<svg width="24" height="24" viewBox="0 0 24 24"><rect x="3" y="3" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/><rect x="13.5" y="3" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/><rect x="3" y="13.5" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/><rect x="13.5" y="13.5" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/></svg>
|
|||
|
|
<span class="tab-label">Gallery</span>
|
|||
|
|
</a>
|
|||
|
|
<a class="tab-item inactive" data-tab="you" href="../you/35-you-profile.html">
|
|||
|
|
<svg width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="9" r="4" stroke="currentColor" fill="none" stroke-width="1.2"/><path d="M4 20C4 16 8 14 12 14C16 14 20 16 20 20" stroke="currentColor" fill="none" stroke-width="1.2" stroke-linecap="round"/></svg>
|
|||
|
|
<span class="tab-label">You</span>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
document.getElementById('gotItBtn').addEventListener('click', function() {
|
|||
|
|
this.textContent = 'Noted';
|
|||
|
|
this.style.background = 'rgba(139,92,246,0.4)';
|
|||
|
|
this.style.pointerEvents = 'none';
|
|||
|
|
document.getElementById('logBtn').style.display = 'flex';
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|