Initial commit: Kalei app — docs, mockups, logo, pitch deck
Complete project files including: - 73 polished HTML mockup screens (onboarding, turn, mirror, lens, gallery, you, ritual, spectrum, modals, guide) - Design system CSS with Inter font, jewel-tone palette, device frame scaling - Canonical 6-blade kaleidoscope logo (soft-elegance-final) - SVG asset library (fragments, icons, patterns, evidence wall, spectrum viz) - Product docs, brand guidelines, technical architecture, build phases - Pitch deck and cost projections - Logo mockup iterations and finalists Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
283
initial mockups/screens/ritual/44-ritual-templates.html
Normal file
283
initial mockups/screens/ritual/44-ritual-templates.html
Normal file
@@ -0,0 +1,283 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Choose Your Ritual</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.ritual-card {
|
||||
border-radius: var(--radius-2xl);
|
||||
overflow: hidden;
|
||||
margin-bottom: var(--space-4);
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
|
||||
border: 1px solid;
|
||||
}
|
||||
.ritual-card-header {
|
||||
padding: var(--space-5) var(--space-4) var(--space-4);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.ritual-card-body {
|
||||
padding: var(--space-3) var(--space-4) var(--space-4);
|
||||
border-top: 1px solid;
|
||||
}
|
||||
.ritual-name {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.ritual-tagline {
|
||||
font-size: 12px;
|
||||
color: var(--dim-light);
|
||||
margin-top: 2px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.ritual-duration {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 4px 10px;
|
||||
border-radius: var(--radius-full);
|
||||
margin-top: 8px;
|
||||
}
|
||||
.ritual-steps-preview {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.ritual-step-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
height: 26px;
|
||||
padding: 0 10px;
|
||||
border-radius: var(--radius-full);
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
background: rgba(255,255,255,0.08);
|
||||
}
|
||||
.ritual-arrow {
|
||||
font-size: 10px;
|
||||
opacity: 0.35;
|
||||
color: var(--dim-light);
|
||||
}
|
||||
/* Morning — Amethyst */
|
||||
.ritual-morning {
|
||||
background: rgba(139,92,246,0.08);
|
||||
border-color: rgba(139,92,246,0.3);
|
||||
}
|
||||
.ritual-morning .ritual-card-header {
|
||||
background: linear-gradient(135deg, rgba(139,92,246,0.2), rgba(99,102,241,0.08));
|
||||
}
|
||||
.ritual-morning .ritual-card-body { border-color: rgba(139,92,246,0.18); }
|
||||
.ritual-morning:hover { transform: translateY(-2px); box-shadow: 0 0 28px rgba(139,92,246,0.22); }
|
||||
/* Evening — Sapphire */
|
||||
.ritual-evening {
|
||||
background: rgba(59,130,246,0.08);
|
||||
border-color: rgba(59,130,246,0.3);
|
||||
}
|
||||
.ritual-evening .ritual-card-header {
|
||||
background: linear-gradient(135deg, rgba(59,130,246,0.2), rgba(30,58,138,0.08));
|
||||
}
|
||||
.ritual-evening .ritual-card-body { border-color: rgba(59,130,246,0.18); }
|
||||
.ritual-evening:hover { transform: translateY(-2px); box-shadow: 0 0 28px rgba(59,130,246,0.22); }
|
||||
/* Quick — Emerald */
|
||||
.ritual-quick {
|
||||
background: rgba(16,185,129,0.08);
|
||||
border-color: rgba(16,185,129,0.3);
|
||||
}
|
||||
.ritual-quick .ritual-card-header {
|
||||
background: linear-gradient(135deg, rgba(16,185,129,0.2), rgba(4,120,87,0.08));
|
||||
}
|
||||
.ritual-quick .ritual-card-body { border-color: rgba(16,185,129,0.18); }
|
||||
.ritual-quick:hover { transform: translateY(-2px); box-shadow: 0 0 28px rgba(16,185,129,0.22); }
|
||||
.ritual-bg-deco {
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
right: -20px;
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
border-radius: 50%;
|
||||
opacity: 0.07;
|
||||
filter: blur(24px);
|
||||
pointer-events: none;
|
||||
}
|
||||
.intro-text {
|
||||
padding: var(--space-2) 0 var(--space-4);
|
||||
font-size: 14px;
|
||||
color: var(--dim-light);
|
||||
line-height: 1.6;
|
||||
}
|
||||
.streak-nudge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
color: var(--amber-light);
|
||||
font-weight: 600;
|
||||
margin-top: 6px;
|
||||
}
|
||||
.streak-nudge-dot {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: var(--amber);
|
||||
box-shadow: 0 0 6px rgba(245,158,11,0.5);
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="device-frame">
|
||||
|
||||
<!-- STATUS BAR -->
|
||||
<div class="status-bar">
|
||||
<span class="time">8:47</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>
|
||||
|
||||
<!-- NAV HEADER -->
|
||||
<div class="nav-header">
|
||||
<a class="nav-back" href="../you/35-you-profile.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">Your Rituals</span>
|
||||
<span class="nav-action">
|
||||
<a href="49-ritual-streak.html" style="text-decoration:none; color: var(--amber-light); font-size:13px; font-weight:600;">14 🔥</a>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- SCREEN CONTENT -->
|
||||
<div class="screen-content" style="padding-top: var(--space-2);">
|
||||
|
||||
<div class="intro-text">
|
||||
Choose the ritual that fits this moment. Each one is a different shape of care — and Alex has been showing up for 14 days straight.
|
||||
<div class="streak-nudge">
|
||||
<span class="streak-nudge-dot"></span>
|
||||
Longest streak yet. Keep the thread going.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Morning Clarity -->
|
||||
<a class="ritual-card ritual-morning" href="45-ritual-morning.html">
|
||||
<div class="ritual-card-header">
|
||||
<div class="ritual-bg-deco" style="background: var(--amethyst);"></div>
|
||||
<div style="display:flex; align-items:center; gap: var(--space-3); margin-bottom: var(--space-2);">
|
||||
<svg width="36" height="36" viewBox="0 0 36 36">
|
||||
<defs><linearGradient id="mGr" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#C4B5FD"/><stop offset="100%" stop-color="#7C3AED"/></linearGradient></defs>
|
||||
<g transform="translate(18,18)">
|
||||
<path d="M0,0 L3,-13 L0,-15 L-3,-13Z" fill="url(#mGr)" opacity="0.9"/>
|
||||
<g transform="rotate(60)"><path d="M0,0 L3,-13 L0,-15 L-3,-13Z" fill="url(#mGr)" opacity="0.7"/></g>
|
||||
<g transform="rotate(120)"><path d="M0,0 L3,-13 L0,-15 L-3,-13Z" fill="url(#mGr)" opacity="0.8"/></g>
|
||||
<g transform="rotate(180)"><path d="M0,0 L3,-13 L0,-15 L-3,-13Z" fill="url(#mGr)" opacity="0.7"/></g>
|
||||
<g transform="rotate(240)"><path d="M0,0 L3,-13 L0,-15 L-3,-13Z" fill="url(#mGr)" opacity="0.9"/></g>
|
||||
<g transform="rotate(300)"><path d="M0,0 L3,-13 L0,-15 L-3,-13Z" fill="url(#mGr)" opacity="0.8"/></g>
|
||||
<circle r="3" fill="white" opacity="0.2"/>
|
||||
</g>
|
||||
</svg>
|
||||
<div>
|
||||
<div class="ritual-name" style="color: var(--amethyst-light);">Morning Clarity</div>
|
||||
<div class="ritual-tagline">Set your intention before the day sets it for you</div>
|
||||
<div class="ritual-duration" style="background: rgba(139,92,246,0.15); color: var(--amethyst-light);">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12"><circle cx="6" cy="6" r="5" fill="none" stroke="currentColor" stroke-width="1"/><path d="M6 3v3l2 2" stroke="currentColor" stroke-width="1" stroke-linecap="round"/></svg>
|
||||
15 min · 4 steps
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ritual-card-body">
|
||||
<div class="label text-dim" style="margin-bottom: var(--space-2);">Steps</div>
|
||||
<div class="ritual-steps-preview">
|
||||
<div class="ritual-step-chip" style="color: var(--amber-light);">Intention</div>
|
||||
<div class="ritual-arrow">→</div>
|
||||
<div class="ritual-step-chip" style="color: var(--amethyst-light);">Fragments</div>
|
||||
<div class="ritual-arrow">→</div>
|
||||
<div class="ritual-step-chip" style="color: var(--sapphire-light);">Rehearsal</div>
|
||||
<div class="ritual-arrow">→</div>
|
||||
<div class="ritual-step-chip" style="color: var(--emerald-light);">Commit</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Evening Wind-Down -->
|
||||
<a class="ritual-card ritual-evening" href="46-ritual-evening.html">
|
||||
<div class="ritual-card-header">
|
||||
<div class="ritual-bg-deco" style="background: var(--sapphire);"></div>
|
||||
<div style="display:flex; align-items:center; gap: var(--space-3); margin-bottom: var(--space-2);">
|
||||
<svg width="36" height="36" viewBox="0 0 36 36">
|
||||
<defs><linearGradient id="eGr" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#93C5FD"/><stop offset="100%" stop-color="#2563EB"/></linearGradient></defs>
|
||||
<circle cx="18" cy="18" r="13" fill="none" stroke="url(#eGr)" stroke-width="1.5" opacity="0.5"/>
|
||||
<circle cx="18" cy="18" r="8" fill="none" stroke="url(#eGr)" stroke-width="1.5" opacity="0.7"/>
|
||||
<circle cx="18" cy="18" r="3" fill="url(#eGr)" opacity="0.8"/>
|
||||
</svg>
|
||||
<div>
|
||||
<div class="ritual-name" style="color: var(--sapphire-light);">Evening Wind-Down</div>
|
||||
<div class="ritual-tagline">Let the day settle before you do</div>
|
||||
<div class="ritual-duration" style="background: rgba(59,130,246,0.15); color: var(--sapphire-light);">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12"><circle cx="6" cy="6" r="5" fill="none" stroke="currentColor" stroke-width="1"/><path d="M6 3v3l2 2" stroke="currentColor" stroke-width="1" stroke-linecap="round"/></svg>
|
||||
20 min · 4 steps
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ritual-card-body">
|
||||
<div class="label text-dim" style="margin-bottom: var(--space-2);">Steps</div>
|
||||
<div class="ritual-steps-preview">
|
||||
<div class="ritual-step-chip" style="color: var(--sapphire-light);">Day Reflection</div>
|
||||
<div class="ritual-arrow">→</div>
|
||||
<div class="ritual-step-chip" style="color: var(--amethyst-light);">Pattern Check</div>
|
||||
<div class="ritual-arrow">→</div>
|
||||
<div class="ritual-step-chip" style="color: var(--emerald-light);">Gratitude</div>
|
||||
<div class="ritual-arrow">→</div>
|
||||
<div class="ritual-step-chip" style="color: var(--indigo-light);">Tomorrow</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Quick Grounding -->
|
||||
<a class="ritual-card ritual-quick" href="47-ritual-quick.html" style="margin-bottom: var(--space-6);">
|
||||
<div class="ritual-card-header">
|
||||
<div class="ritual-bg-deco" style="background: var(--emerald);"></div>
|
||||
<div style="display:flex; align-items:center; gap: var(--space-3); margin-bottom: var(--space-2);">
|
||||
<svg width="36" height="36" viewBox="0 0 36 36">
|
||||
<defs><linearGradient id="qGr" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#6EE7B7"/><stop offset="100%" stop-color="#059669"/></linearGradient></defs>
|
||||
<path d="M18 4L28 10V22L18 28L8 22V10Z" fill="none" stroke="url(#qGr)" stroke-width="1.5" opacity="0.8"/>
|
||||
<path d="M18 10L24 14V20L18 24L12 20V14Z" fill="url(#qGr)" opacity="0.3"/>
|
||||
</svg>
|
||||
<div>
|
||||
<div class="ritual-name" style="color: var(--emerald-light);">Quick Grounding</div>
|
||||
<div class="ritual-tagline">Two minutes to come back to yourself when stressed</div>
|
||||
<div class="ritual-duration" style="background: rgba(16,185,129,0.15); color: var(--emerald-light);">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12"><circle cx="6" cy="6" r="5" fill="none" stroke="currentColor" stroke-width="1"/><path d="M6 3v3l2 2" stroke="currentColor" stroke-width="1" stroke-linecap="round"/></svg>
|
||||
2 min · 2 steps
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ritual-card-body">
|
||||
<div class="label text-dim" style="margin-bottom: var(--space-2);">Steps</div>
|
||||
<div class="ritual-steps-preview">
|
||||
<div class="ritual-step-chip" style="color: var(--amethyst-light);">Name it</div>
|
||||
<div class="ritual-arrow">→</div>
|
||||
<div class="ritual-step-chip" style="color: var(--emerald-light);">Ground it</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
242
initial mockups/screens/ritual/45-ritual-morning.html
Normal file
242
initial mockups/screens/ritual/45-ritual-morning.html
Normal file
@@ -0,0 +1,242 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Morning Clarity Ritual</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.ritual-progress-bar {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
padding: var(--space-3) var(--space-4) 0;
|
||||
}
|
||||
.rp-seg {
|
||||
flex: 1;
|
||||
height: 4px;
|
||||
border-radius: 2px;
|
||||
background: var(--twilight);
|
||||
transition: background 0.3s ease-out;
|
||||
}
|
||||
.rp-seg.done { background: var(--amethyst); box-shadow: 0 0 6px rgba(139,92,246,0.4); }
|
||||
.rp-seg.active { background: linear-gradient(to right, var(--amethyst), var(--sapphire)); box-shadow: 0 0 8px rgba(139,92,246,0.3); animation: pulse-bar 2s ease-in-out infinite; }
|
||||
@keyframes pulse-bar { 0%, 100% { opacity: 1; } 50% { opacity: 0.65; } }
|
||||
.ritual-timer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 13px;
|
||||
color: var(--dim-light);
|
||||
}
|
||||
.step-card {
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid rgba(245,158,11,0.25);
|
||||
border-radius: var(--radius-2xl);
|
||||
padding: var(--space-5);
|
||||
margin-bottom: var(--space-4);
|
||||
box-shadow: 0 0 20px rgba(245,158,11,0.05);
|
||||
}
|
||||
.step-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: 4px 12px;
|
||||
border-radius: var(--radius-full);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
.step-badge.intention { background: rgba(245,158,11,0.15); color: var(--amber-light); }
|
||||
.step-prompt {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--pure-light);
|
||||
line-height: 1.45;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.step-subprompt {
|
||||
font-size: 13px;
|
||||
color: var(--dim-light);
|
||||
line-height: 1.5;
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.journal-area {
|
||||
width: 100%;
|
||||
min-height: 120px;
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid var(--amber);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 14px;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
color: var(--soft-light);
|
||||
outline: none;
|
||||
resize: none;
|
||||
box-shadow: 0 0 12px rgba(245,158,11,0.08);
|
||||
font-family: var(--font-primary);
|
||||
}
|
||||
.journal-area::placeholder { color: var(--faint-light); }
|
||||
.char-count { text-align: right; font-size: 11px; color: var(--faint-light); margin-top: var(--space-2); }
|
||||
.step-nav-area {
|
||||
padding: var(--space-4) 0 var(--space-6);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
.btn-next {
|
||||
width: 100%;
|
||||
height: 52px;
|
||||
background: var(--amethyst);
|
||||
border-radius: var(--radius-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--pure-light);
|
||||
text-decoration: none;
|
||||
box-shadow: var(--glow-amethyst);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
gap: var(--space-2);
|
||||
transition: background 0.2s ease-out;
|
||||
}
|
||||
.btn-next:hover { background: var(--amethyst-light); }
|
||||
.upcoming-steps {
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
}
|
||||
.upcoming-step-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-2) 0;
|
||||
}
|
||||
.upcoming-step-row:not(:last-child) { border-bottom: 1px solid var(--twilight); }
|
||||
.upcoming-step-num {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
background: var(--twilight);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: var(--dim-light);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.upcoming-step-num.current { background: var(--amethyst); color: var(--pure-light); box-shadow: 0 0 8px rgba(139,92,246,0.4); }
|
||||
.aura-deco {
|
||||
position: absolute;
|
||||
top: 120px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(245,158,11,0.07), transparent 70%);
|
||||
filter: blur(40px);
|
||||
pointer-events: none;
|
||||
animation: breathing 6s ease-in-out infinite;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="device-frame">
|
||||
|
||||
<!-- STATUS BAR -->
|
||||
<div class="status-bar">
|
||||
<span class="time">8:47</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>
|
||||
|
||||
<!-- NAV HEADER -->
|
||||
<div class="nav-header">
|
||||
<a class="nav-back" href="44-ritual-templates.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">Morning Clarity</span>
|
||||
<span class="nav-action">
|
||||
<div class="ritual-timer">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12"><circle cx="6" cy="6" r="5" fill="none" stroke="currentColor" stroke-width="1"/><path d="M6 3v3l2 2" stroke="currentColor" stroke-width="1" stroke-linecap="round"/></svg>
|
||||
3:24
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- STEP PROGRESS -->
|
||||
<div class="ritual-progress-bar">
|
||||
<div class="rp-seg active"></div>
|
||||
<div class="rp-seg"></div>
|
||||
<div class="rp-seg"></div>
|
||||
<div class="rp-seg"></div>
|
||||
</div>
|
||||
|
||||
<!-- Ambient decoration -->
|
||||
<div class="aura-deco"></div>
|
||||
|
||||
<!-- SCREEN CONTENT -->
|
||||
<div class="screen-content" style="padding-top: var(--space-5);">
|
||||
|
||||
<!-- Step Card -->
|
||||
<div class="step-card">
|
||||
<div class="step-badge intention">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12"><path d="M6 1L9 4L10 6L9 8L6 10L3 8L2 6L3 4Z" fill="none" stroke="currentColor" stroke-width="1"/></svg>
|
||||
Step 1 — Intention
|
||||
</div>
|
||||
<div class="step-prompt">What's one thing you're carrying into today?</div>
|
||||
<div class="step-subprompt">Not a task list — just what's already in your mind before the day begins.</div>
|
||||
<textarea class="journal-area" placeholder="Let it land here before the world demands anything of you..."></textarea>
|
||||
<div class="char-count">0 / 500</div>
|
||||
</div>
|
||||
|
||||
<!-- Upcoming Steps -->
|
||||
<div class="label text-dim" style="margin-bottom: var(--space-2);">Today's ritual</div>
|
||||
<div class="upcoming-steps">
|
||||
<div class="upcoming-step-row">
|
||||
<div class="upcoming-step-num current">1</div>
|
||||
<div style="flex:1; font-size:14px; color: var(--soft-light);">Intention setting</div>
|
||||
<span style="font-size: 12px; color: var(--dim-light);">~4 min</span>
|
||||
</div>
|
||||
<div class="upcoming-step-row">
|
||||
<div class="upcoming-step-num">2</div>
|
||||
<div style="flex:1; font-size:14px; color: var(--faint-light);">Fragment awareness</div>
|
||||
<span style="font-size: 12px; color: var(--faint-light);">~4 min</span>
|
||||
</div>
|
||||
<div class="upcoming-step-row">
|
||||
<div class="upcoming-step-num">3</div>
|
||||
<div style="flex:1; font-size:14px; color: var(--faint-light);">Rehearsal moment</div>
|
||||
<span style="font-size: 12px; color: var(--faint-light);">~4 min</span>
|
||||
</div>
|
||||
<div class="upcoming-step-row">
|
||||
<div class="upcoming-step-num">4</div>
|
||||
<div style="flex:1; font-size:14px; color: var(--faint-light);">Daily commitment</div>
|
||||
<span style="font-size: 12px; color: var(--faint-light);">~3 min</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<div class="step-nav-area">
|
||||
<a href="48-ritual-complete.html" class="btn-next">
|
||||
Continue
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
<a href="44-ritual-templates.html" style="text-align: center; font-size: 14px; color: var(--faint-light); text-decoration: none; padding: var(--space-2);">Save & Exit</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
246
initial mockups/screens/ritual/46-ritual-evening.html
Normal file
246
initial mockups/screens/ritual/46-ritual-evening.html
Normal file
@@ -0,0 +1,246 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Evening Wind-Down Ritual</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.ritual-progress-bar {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
padding: var(--space-3) var(--space-4) 0;
|
||||
}
|
||||
.rp-seg {
|
||||
flex: 1;
|
||||
height: 4px;
|
||||
border-radius: 2px;
|
||||
background: var(--twilight);
|
||||
transition: background 0.3s ease-out;
|
||||
}
|
||||
.rp-seg.done { background: var(--sapphire); box-shadow: 0 0 6px rgba(59,130,246,0.4); }
|
||||
.rp-seg.active { background: linear-gradient(to right, var(--sapphire), var(--amethyst)); box-shadow: 0 0 8px rgba(59,130,246,0.3); animation: pulse-bar 2s ease-in-out infinite; }
|
||||
@keyframes pulse-bar { 0%, 100% { opacity: 1; } 50% { opacity: 0.65; } }
|
||||
.ritual-timer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 13px;
|
||||
color: var(--dim-light);
|
||||
}
|
||||
.step-card {
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid rgba(59,130,246,0.25);
|
||||
border-radius: var(--radius-2xl);
|
||||
padding: var(--space-5);
|
||||
margin-bottom: var(--space-4);
|
||||
box-shadow: 0 0 20px rgba(59,130,246,0.05);
|
||||
}
|
||||
.step-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: 4px 12px;
|
||||
border-radius: var(--radius-full);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
margin-bottom: var(--space-3);
|
||||
background: rgba(59,130,246,0.15);
|
||||
color: var(--sapphire-light);
|
||||
}
|
||||
.step-prompt {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--pure-light);
|
||||
line-height: 1.45;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.step-subprompt {
|
||||
font-size: 13px;
|
||||
color: var(--dim-light);
|
||||
line-height: 1.5;
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.journal-area {
|
||||
width: 100%;
|
||||
min-height: 120px;
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid var(--sapphire);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 14px;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
color: var(--soft-light);
|
||||
outline: none;
|
||||
resize: none;
|
||||
box-shadow: 0 0 12px rgba(59,130,246,0.08);
|
||||
font-family: var(--font-primary);
|
||||
}
|
||||
.journal-area::placeholder { color: var(--faint-light); }
|
||||
.char-count { text-align: right; font-size: 11px; color: var(--faint-light); margin-top: var(--space-2); }
|
||||
.upcoming-steps {
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.upcoming-step-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-2) 0;
|
||||
}
|
||||
.upcoming-step-row:not(:last-child) { border-bottom: 1px solid var(--twilight); }
|
||||
.upcoming-step-num {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
background: var(--twilight);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: var(--dim-light);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.upcoming-step-num.current { background: var(--sapphire); color: var(--pure-light); box-shadow: 0 0 8px rgba(59,130,246,0.4); }
|
||||
.upcoming-step-num.done-check {
|
||||
background: rgba(59,130,246,0.15);
|
||||
}
|
||||
.aura-deco {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(59,130,246,0.07), transparent 70%);
|
||||
filter: blur(40px);
|
||||
pointer-events: none;
|
||||
animation: breathing 6s ease-in-out infinite;
|
||||
}
|
||||
.btn-next {
|
||||
width: 100%;
|
||||
height: 52px;
|
||||
background: var(--sapphire);
|
||||
border-radius: var(--radius-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--pure-light);
|
||||
text-decoration: none;
|
||||
box-shadow: var(--glow-sapphire);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
gap: var(--space-2);
|
||||
margin-bottom: var(--space-3);
|
||||
transition: background 0.2s ease-out;
|
||||
}
|
||||
.btn-next:hover { background: var(--sapphire-light); }
|
||||
/* Prefill looks like real content was typed */
|
||||
.journal-prefilled {
|
||||
color: var(--soft-light);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="device-frame">
|
||||
|
||||
<!-- STATUS BAR -->
|
||||
<div class="status-bar">
|
||||
<span class="time">9:18</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>
|
||||
|
||||
<!-- NAV HEADER -->
|
||||
<div class="nav-header">
|
||||
<a class="nav-back" href="44-ritual-templates.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">Evening Wind-Down</span>
|
||||
<span class="nav-action">
|
||||
<div class="ritual-timer">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12"><circle cx="6" cy="6" r="5" fill="none" stroke="currentColor" stroke-width="1"/><path d="M6 3v3l2 2" stroke="currentColor" stroke-width="1" stroke-linecap="round"/></svg>
|
||||
7:41
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- STEP PROGRESS — on step 2 of 4 -->
|
||||
<div class="ritual-progress-bar">
|
||||
<div class="rp-seg done"></div>
|
||||
<div class="rp-seg active"></div>
|
||||
<div class="rp-seg"></div>
|
||||
<div class="rp-seg"></div>
|
||||
</div>
|
||||
|
||||
<!-- Ambient decoration -->
|
||||
<div class="aura-deco"></div>
|
||||
|
||||
<!-- SCREEN CONTENT -->
|
||||
<div class="screen-content" style="padding-top: var(--space-5);">
|
||||
|
||||
<!-- Step Card -->
|
||||
<div class="step-card">
|
||||
<div class="step-badge">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12"><path d="M6 1L10 6L6 11L2 6Z" fill="currentColor" opacity="0.8"/></svg>
|
||||
Step 2 — Pattern Check
|
||||
</div>
|
||||
<div class="step-prompt">What thought kept pulling at you today?</div>
|
||||
<div class="step-subprompt">Not the event — just the story you told yourself about it.</div>
|
||||
<textarea class="journal-area journal-prefilled" placeholder="What kept running through your head...">I feel like I didn't accomplish enough today and I'm falling behind on everything.</textarea>
|
||||
<div class="char-count">67 / 500</div>
|
||||
</div>
|
||||
|
||||
<!-- Upcoming Steps -->
|
||||
<div class="label text-dim" style="margin-bottom: var(--space-2);">Tonight's ritual</div>
|
||||
<div class="upcoming-steps">
|
||||
<div class="upcoming-step-row">
|
||||
<div class="upcoming-step-num done-check">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12"><path d="M2 6l3 3 5-5" stroke="var(--sapphire-light)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</div>
|
||||
<div style="flex:1; font-size:14px; color: var(--dim-light);">Day reflection</div>
|
||||
<span style="font-size: 12px; color: var(--sapphire); font-weight: 600;">Done</span>
|
||||
</div>
|
||||
<div class="upcoming-step-row">
|
||||
<div class="upcoming-step-num current">2</div>
|
||||
<div style="flex:1; font-size:14px; color: var(--soft-light);">Pattern check</div>
|
||||
<span style="font-size: 12px; color: var(--dim-light);">~5 min</span>
|
||||
</div>
|
||||
<div class="upcoming-step-row">
|
||||
<div class="upcoming-step-num">3</div>
|
||||
<div style="flex:1; font-size:14px; color: var(--faint-light);">Gratitude</div>
|
||||
<span style="font-size: 12px; color: var(--faint-light);">~5 min</span>
|
||||
</div>
|
||||
<div class="upcoming-step-row">
|
||||
<div class="upcoming-step-num">4</div>
|
||||
<div style="flex:1; font-size:14px; color: var(--faint-light);">Tomorrow's intention</div>
|
||||
<span style="font-size: 12px; color: var(--faint-light);">~5 min</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<a href="48-ritual-complete.html" class="btn-next">
|
||||
Continue
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
<a href="44-ritual-templates.html" style="text-align: center; display: block; font-size: 14px; color: var(--faint-light); text-decoration: none; padding: var(--space-2); margin-bottom: var(--space-4);">Save & Exit</a>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
264
initial mockups/screens/ritual/47-ritual-quick.html
Normal file
264
initial mockups/screens/ritual/47-ritual-quick.html
Normal file
@@ -0,0 +1,264 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Quick Grounding Ritual</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.ritual-progress-bar {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
padding: var(--space-3) var(--space-4) 0;
|
||||
}
|
||||
.rp-seg {
|
||||
flex: 1;
|
||||
height: 4px;
|
||||
border-radius: 2px;
|
||||
background: var(--twilight);
|
||||
transition: background 0.3s ease-out;
|
||||
}
|
||||
.rp-seg.done { background: var(--emerald); box-shadow: 0 0 6px rgba(16,185,129,0.4); }
|
||||
.rp-seg.active { background: linear-gradient(to right, var(--emerald), var(--sapphire)); box-shadow: 0 0 8px rgba(16,185,129,0.3); animation: pulse-bar 2s ease-in-out infinite; }
|
||||
@keyframes pulse-bar { 0%, 100% { opacity: 1; } 50% { opacity: 0.65; } }
|
||||
.ritual-timer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 13px;
|
||||
color: var(--dim-light);
|
||||
}
|
||||
.step-card {
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid rgba(16,185,129,0.25);
|
||||
border-radius: var(--radius-2xl);
|
||||
padding: var(--space-5);
|
||||
margin-bottom: var(--space-4);
|
||||
box-shadow: 0 0 20px rgba(16,185,129,0.05);
|
||||
}
|
||||
.step-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: 4px 12px;
|
||||
border-radius: var(--radius-full);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
margin-bottom: var(--space-3);
|
||||
background: rgba(16,185,129,0.15);
|
||||
color: var(--emerald-light);
|
||||
}
|
||||
.step-prompt {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--pure-light);
|
||||
line-height: 1.45;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.step-subprompt {
|
||||
font-size: 13px;
|
||||
color: var(--dim-light);
|
||||
line-height: 1.5;
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.thought-input {
|
||||
width: 100%;
|
||||
min-height: 90px;
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid var(--emerald);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 14px;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
color: var(--soft-light);
|
||||
outline: none;
|
||||
resize: none;
|
||||
box-shadow: 0 0 12px rgba(16,185,129,0.08);
|
||||
font-family: var(--font-primary);
|
||||
}
|
||||
.thought-input::placeholder { color: var(--faint-light); }
|
||||
.char-count { text-align: right; font-size: 11px; color: var(--faint-light); margin-top: var(--space-2); }
|
||||
.upcoming-steps {
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.upcoming-step-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-2) 0;
|
||||
}
|
||||
.upcoming-step-row:not(:last-child) { border-bottom: 1px solid var(--twilight); }
|
||||
.upcoming-step-num {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
background: var(--twilight);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: var(--dim-light);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.upcoming-step-num.current { background: var(--emerald); color: var(--void); box-shadow: 0 0 8px rgba(16,185,129,0.4); }
|
||||
.aura-deco {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(16,185,129,0.09), transparent 70%);
|
||||
filter: blur(40px);
|
||||
pointer-events: none;
|
||||
animation: breathing 6s ease-in-out infinite;
|
||||
}
|
||||
.btn-next {
|
||||
width: 100%;
|
||||
height: 52px;
|
||||
background: var(--emerald);
|
||||
border-radius: var(--radius-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--void);
|
||||
text-decoration: none;
|
||||
box-shadow: var(--glow-emerald);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
gap: var(--space-2);
|
||||
margin-bottom: var(--space-3);
|
||||
transition: background 0.2s ease-out;
|
||||
}
|
||||
.btn-next:hover { background: var(--emerald-light); }
|
||||
.quick-tip {
|
||||
background: rgba(16,185,129,0.07);
|
||||
border: 1px solid rgba(16,185,129,0.2);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
margin-bottom: var(--space-4);
|
||||
font-size: 13px;
|
||||
color: var(--emerald-light);
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
align-items: flex-start;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.breathe-ring {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border-radius: 50%;
|
||||
background: rgba(16,185,129,0.08);
|
||||
border: 1.5px solid rgba(16,185,129,0.3);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto var(--space-3);
|
||||
animation: breathing 6s ease-in-out infinite;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="device-frame">
|
||||
|
||||
<!-- STATUS BAR -->
|
||||
<div class="status-bar">
|
||||
<span class="time">2:14</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>
|
||||
|
||||
<!-- NAV HEADER -->
|
||||
<div class="nav-header">
|
||||
<a class="nav-back" href="44-ritual-templates.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">Quick Grounding</span>
|
||||
<span class="nav-action">
|
||||
<div class="ritual-timer">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12"><circle cx="6" cy="6" r="5" fill="none" stroke="currentColor" stroke-width="1"/><path d="M6 3v3l2 2" stroke="currentColor" stroke-width="1" stroke-linecap="round"/></svg>
|
||||
1:08
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- STEP PROGRESS -->
|
||||
<div class="ritual-progress-bar">
|
||||
<div class="rp-seg active"></div>
|
||||
<div class="rp-seg"></div>
|
||||
</div>
|
||||
|
||||
<!-- Ambient decoration -->
|
||||
<div class="aura-deco"></div>
|
||||
|
||||
<!-- SCREEN CONTENT -->
|
||||
<div class="screen-content" style="padding-top: var(--space-5);">
|
||||
|
||||
<!-- Breathing ring -->
|
||||
<div class="breathe-ring">
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none">
|
||||
<circle cx="11" cy="11" r="8" fill="none" stroke="#6EE7B7" stroke-width="1.2" stroke-dasharray="3 3"/>
|
||||
<circle cx="11" cy="11" r="4" fill="#10B981" opacity="0.4"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Step Card -->
|
||||
<div class="step-card">
|
||||
<div class="step-badge">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12"><path d="M6 1L10 6L6 11L2 6Z" fill="currentColor" opacity="0.8"/></svg>
|
||||
Step 1 — Name It
|
||||
</div>
|
||||
<div class="step-prompt">What thought is pulling you out of the present right now?</div>
|
||||
<div class="step-subprompt">One sentence is enough. You don't need to solve it — just name it.</div>
|
||||
<textarea class="thought-input" placeholder="I keep thinking about..."></textarea>
|
||||
<div class="char-count">0 / 280</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick tip -->
|
||||
<div class="quick-tip">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" style="flex-shrink:0; margin-top: 1px;"><circle cx="7" cy="7" r="5.5" fill="none" stroke="currentColor" stroke-width="1"/><path d="M7 4v3.5M7 9.5v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
Keep it brief. One sentence captures the essence. You'll reframe it in the next step.
|
||||
</div>
|
||||
|
||||
<!-- Steps overview -->
|
||||
<div class="label text-dim" style="margin-bottom: var(--space-2);">2 Steps · ~2 min total</div>
|
||||
<div class="upcoming-steps">
|
||||
<div class="upcoming-step-row">
|
||||
<div class="upcoming-step-num current">1</div>
|
||||
<div style="flex:1; font-size:14px; color: var(--soft-light);">Name the thought</div>
|
||||
<span style="font-size: 12px; color: var(--dim-light);">~1 min</span>
|
||||
</div>
|
||||
<div class="upcoming-step-row">
|
||||
<div class="upcoming-step-num">2</div>
|
||||
<div style="flex:1; font-size:14px; color: var(--faint-light);">Ground it with a reframe</div>
|
||||
<span style="font-size: 12px; color: var(--faint-light);">~1 min</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<a href="48-ritual-complete.html" class="btn-next">
|
||||
Continue
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
<a href="44-ritual-templates.html" style="text-align: center; display: block; font-size: 14px; color: var(--faint-light); text-decoration: none; padding: var(--space-2); margin-bottom: var(--space-4);">Exit Ritual</a>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
310
initial mockups/screens/ritual/48-ritual-complete.html
Normal file
310
initial mockups/screens/ritual/48-ritual-complete.html
Normal file
@@ -0,0 +1,310 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Ritual Complete</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.celebration-burst {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(139,92,246,0.11) 0%, rgba(59,130,246,0.07) 30%, rgba(16,185,129,0.05) 60%, transparent 80%);
|
||||
filter: blur(30px);
|
||||
animation: breathing 6s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
@keyframes successBurst {
|
||||
0% { transform: scale(0) rotate(-30deg); opacity: 0; }
|
||||
60% { transform: scale(1.15) rotate(5deg); opacity: 1; }
|
||||
80% { transform: scale(0.95) rotate(-2deg); opacity: 1; }
|
||||
100% { transform: scale(1) rotate(0deg); opacity: 1; }
|
||||
}
|
||||
.complete-hero {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: var(--space-8) var(--space-4) var(--space-5);
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
.burst-icon {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: var(--space-5);
|
||||
animation: successBurst 0.8s ease forwards;
|
||||
}
|
||||
.complete-heading {
|
||||
font-family: var(--font-display);
|
||||
font-size: 30px;
|
||||
font-weight: 700;
|
||||
background: var(--prismatic);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
.complete-sub {
|
||||
font-size: 14px;
|
||||
color: var(--dim-light);
|
||||
margin-bottom: var(--space-5);
|
||||
line-height: 1.6;
|
||||
max-width: 280px;
|
||||
}
|
||||
.stats-row {
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
width: 100%;
|
||||
margin-bottom: var(--space-5);
|
||||
}
|
||||
.stat-pill {
|
||||
flex: 1;
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-3);
|
||||
text-align: center;
|
||||
}
|
||||
.stat-pill .val {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: var(--pure-light);
|
||||
}
|
||||
.stat-pill .lbl {
|
||||
font-size: 10px;
|
||||
color: var(--dim-light);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.tile-earned-card {
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid rgba(139,92,246,0.35);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-4);
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
margin-bottom: var(--space-5);
|
||||
box-shadow: 0 0 20px rgba(139,92,246,0.12);
|
||||
}
|
||||
.tile-preview-icon {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border-radius: 12px;
|
||||
background: rgba(59,130,246,0.12);
|
||||
border: 1px solid var(--sapphire);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 0 14px rgba(59,130,246,0.2);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.btn-done {
|
||||
width: 100%;
|
||||
height: 52px;
|
||||
background: var(--amethyst);
|
||||
border-radius: var(--radius-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--pure-light);
|
||||
text-decoration: none;
|
||||
box-shadow: var(--glow-amethyst);
|
||||
margin-bottom: var(--space-3);
|
||||
transition: background 0.2s ease-out;
|
||||
}
|
||||
.btn-done:hover { background: var(--amethyst-light); }
|
||||
.streak-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-2);
|
||||
margin-bottom: var(--space-5);
|
||||
}
|
||||
.streak-flame-dots {
|
||||
display: flex;
|
||||
gap: 3px;
|
||||
}
|
||||
.flame-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--amber);
|
||||
box-shadow: 0 0 5px rgba(245,158,11,0.4);
|
||||
}
|
||||
.flame-dot.active { animation: pulse 2s ease-in-out infinite; }
|
||||
.flame-dot.new {
|
||||
background: var(--amber-light);
|
||||
box-shadow: 0 0 8px rgba(245,158,11,0.7);
|
||||
animation: pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="device-frame">
|
||||
|
||||
<!-- STATUS BAR -->
|
||||
<div class="status-bar" style="position: relative; z-index: 2;">
|
||||
<span class="time">8:52</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>
|
||||
|
||||
<!-- Celebration background -->
|
||||
<div class="celebration-burst"></div>
|
||||
|
||||
<!-- SCREEN CONTENT -->
|
||||
<div class="screen-content centered" style="position: relative; z-index: 2;">
|
||||
|
||||
<div class="burst-icon">
|
||||
<svg width="120" height="120" viewBox="-60 -60 120 120">
|
||||
<defs>
|
||||
<linearGradient id="rc48-grEm" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#6EE7B7"><animate attributeName="stop-color" values="#6EE7B7;#A7F3D0;#6EE7B7" dur="5s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#059669"/>
|
||||
</linearGradient>
|
||||
<radialGradient id="rc48-successGlow" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#10B981" stop-opacity="0.4"/>
|
||||
<stop offset="100%" stop-color="#10B981" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
<filter id="rc48-glowLg" x="-80%" y="-80%" width="260%" height="260%">
|
||||
<feGaussianBlur stdDeviation="6" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="rc48-glowMd" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="3" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="rc48-glowSm" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="1.5" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<clipPath id="rc48-clip"><circle r="56"/></clipPath>
|
||||
</defs>
|
||||
|
||||
<g clip-path="url(#rc48-clip)" filter="url(#rc48-glowMd)">
|
||||
<circle r="45" fill="none" stroke="#10B981" stroke-width="0.8" opacity="0.2" stroke-dasharray="6 8"/>
|
||||
<circle r="30" fill="none" stroke="#10B981" stroke-width="0.6" opacity="0.25" stroke-dasharray="4 6"/>
|
||||
<g>
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="45s" repeatCount="indefinite"/>
|
||||
<path d="M 0,-45 L 3,-42 L 0,-39 L -3,-42 Z" fill="url(#rc48-grEm)" opacity="0.6"/>
|
||||
<g transform="rotate(60)"><path d="M 0,-45 L 3,-42 L 0,-39 L -3,-42 Z" fill="url(#rc48-grEm)" opacity="0.5"/></g>
|
||||
<g transform="rotate(120)"><path d="M 0,-45 L 3,-42 L 0,-39 L -3,-42 Z" fill="url(#rc48-grEm)" opacity="0.55"/></g>
|
||||
<g transform="rotate(180)"><path d="M 0,-45 L 3,-42 L 0,-39 L -3,-42 Z" fill="url(#rc48-grEm)" opacity="0.5"/></g>
|
||||
<g transform="rotate(240)"><path d="M 0,-45 L 3,-42 L 0,-39 L -3,-42 Z" fill="url(#rc48-grEm)" opacity="0.6"/></g>
|
||||
<g transform="rotate(300)"><path d="M 0,-45 L 3,-42 L 0,-39 L -3,-42 Z" fill="url(#rc48-grEm)" opacity="0.5"/></g>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<g filter="url(#rc48-glowLg)">
|
||||
<circle r="30" fill="none" stroke="#10B981" stroke-width="2" opacity="0">
|
||||
<animate attributeName="r" values="10;35;40" dur="1.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.6;0.3;0" dur="1.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="20" fill="none" stroke="#6EE7B7" stroke-width="1" opacity="0">
|
||||
<animate attributeName="r" values="8;25;30" dur="1.5s" begin="0.2s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.4;0.2;0" dur="1.5s" begin="0.2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="16" fill="url(#rc48-successGlow)" opacity="0.6">
|
||||
<animate attributeName="opacity" values="0.4;0.8;0.4" dur="2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<path d="M 0,-10 L 10,0 L 0,10 L -10,0 Z" fill="url(#rc48-grEm)" opacity="0.9"/>
|
||||
<path d="M 0,-10 L 10,0 L 0,0 Z" fill="#fff" opacity="0.2"/>
|
||||
<path d="M -4,0 L -1,4 L 5,-3" fill="none" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</g>
|
||||
|
||||
<circle r="4" fill="#6EE7B7" opacity="0.5" filter="url(#rc48-glowSm)">
|
||||
<animate attributeName="r" values="3;5;3" dur="2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="complete-heading">Day 14. Done.</div>
|
||||
<div class="complete-sub">You showed up again. That's the whole thing — fourteen mornings in a row, building something that lasts.</div>
|
||||
|
||||
<!-- Streak — 14 dots, last one highlighted as new -->
|
||||
<div class="streak-indicator">
|
||||
<div class="streak-flame-dots">
|
||||
<div class="flame-dot"></div>
|
||||
<div class="flame-dot"></div>
|
||||
<div class="flame-dot"></div>
|
||||
<div class="flame-dot"></div>
|
||||
<div class="flame-dot"></div>
|
||||
<div class="flame-dot"></div>
|
||||
<div class="flame-dot"></div>
|
||||
<div class="flame-dot"></div>
|
||||
<div class="flame-dot"></div>
|
||||
<div class="flame-dot"></div>
|
||||
<div class="flame-dot"></div>
|
||||
<div class="flame-dot"></div>
|
||||
<div class="flame-dot"></div>
|
||||
<div class="flame-dot new"></div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="body-sm" style="color: var(--amber-light); font-weight: 600; margin-bottom: var(--space-5); display:block;">14-day streak — your longest yet</span>
|
||||
|
||||
<!-- Stats -->
|
||||
<div class="stats-row">
|
||||
<div class="stat-pill">
|
||||
<div class="val">15</div>
|
||||
<div class="lbl">Minutes</div>
|
||||
</div>
|
||||
<div class="stat-pill">
|
||||
<div class="val">4</div>
|
||||
<div class="lbl">Steps</div>
|
||||
</div>
|
||||
<div class="stat-pill">
|
||||
<div class="val" style="color: var(--amber-light);">14</div>
|
||||
<div class="lbl">Day Streak</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- New tile earned -->
|
||||
<div class="tile-earned-card">
|
||||
<div class="tile-preview-icon">
|
||||
<svg width="34" height="26" viewBox="-18 -12 36 24">
|
||||
<defs>
|
||||
<linearGradient id="rc48-grSap" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#93C5FD"><animate attributeName="stop-color" values="#93C5FD;#BFDBFE;#93C5FD" dur="4.5s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#2563EB"/>
|
||||
</linearGradient>
|
||||
<filter id="rc48-glowSap" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="2" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<rect x="-15" y="-9" width="30" height="18" rx="3" fill="#121628" stroke="#3B82F6" stroke-width="0.8"/>
|
||||
<g filter="url(#rc48-glowSap)">
|
||||
<path d="M 0,-5 L 5,0 L 0,5 L -5,0 Z" fill="url(#rc48-grSap)" opacity="0.5"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div style="flex:1;">
|
||||
<div class="subheading" style="color: var(--sapphire-light); margin-bottom: 2px;">Evidence tile added</div>
|
||||
<div class="body-sm text-dim">Ritual Completion · Feb 22 · Day 14</div>
|
||||
</div>
|
||||
<a href="../you/42-evidence-wall-full.html" style="text-decoration:none;">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M8 4L14 10L8 16" stroke="var(--sapphire-light)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- CTA -->
|
||||
<a href="../turn/10-turn-home.html" class="btn-done">Back to home</a>
|
||||
<a href="49-ritual-streak.html" style="text-decoration: none; font-size: 14px; color: var(--dim-light);">View full streak history</a>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
422
initial mockups/screens/ritual/49-ritual-streak.html
Normal file
422
initial mockups/screens/ritual/49-ritual-streak.html
Normal file
@@ -0,0 +1,422 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Ritual Streak</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.streak-hero {
|
||||
text-align: center;
|
||||
padding: var(--space-6) 0 var(--space-5);
|
||||
position: relative;
|
||||
}
|
||||
.streak-number {
|
||||
font-family: var(--font-display);
|
||||
font-size: 80px;
|
||||
font-weight: 700;
|
||||
color: var(--amber-light);
|
||||
line-height: 1;
|
||||
text-shadow: 0 0 48px rgba(245,158,11,0.35);
|
||||
}
|
||||
.streak-label {
|
||||
font-size: 16px;
|
||||
color: var(--dim-light);
|
||||
margin-top: var(--space-2);
|
||||
}
|
||||
.streak-started {
|
||||
font-size: 12px;
|
||||
color: var(--faint-light);
|
||||
margin-top: 4px;
|
||||
}
|
||||
.streak-aura {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(245,158,11,0.12), transparent 70%);
|
||||
filter: blur(32px);
|
||||
animation: breathing 6s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
.week-calendar {
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-4);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.calendar-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
.calendar-month {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--soft-light);
|
||||
}
|
||||
.day-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
gap: 6px;
|
||||
}
|
||||
.day-label {
|
||||
text-align: center;
|
||||
font-size: 10px;
|
||||
color: var(--faint-light);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
padding-bottom: var(--space-2);
|
||||
}
|
||||
.day-cell {
|
||||
aspect-ratio: 1;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
position: relative;
|
||||
}
|
||||
.day-cell.empty { background: transparent; color: transparent; }
|
||||
.day-cell.no-ritual { background: var(--void); color: var(--faint-light); border: 1px solid var(--twilight); }
|
||||
.day-cell.missed { background: rgba(239,68,68,0.06); color: var(--faint-light); border: 1px solid rgba(239,68,68,0.12); }
|
||||
.day-cell.done {
|
||||
background: rgba(245,158,11,0.18);
|
||||
color: var(--amber-light);
|
||||
font-weight: 700;
|
||||
border: 1px solid rgba(245,158,11,0.3);
|
||||
box-shadow: 0 0 6px rgba(245,158,11,0.15);
|
||||
}
|
||||
.day-cell.today {
|
||||
background: var(--amber);
|
||||
color: var(--void);
|
||||
font-weight: 700;
|
||||
box-shadow: 0 0 14px rgba(245,158,11,0.5);
|
||||
}
|
||||
.day-cell.today::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -2px;
|
||||
border-radius: 10px;
|
||||
border: 2px solid var(--amber-light);
|
||||
}
|
||||
.day-cell.future { background: transparent; color: var(--faint-light); border: 1px dashed rgba(28,34,64,0.8); }
|
||||
.streak-stats {
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.streak-stat {
|
||||
flex: 1;
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-4);
|
||||
text-align: center;
|
||||
}
|
||||
.streak-stat .sval {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: var(--amber-light);
|
||||
line-height: 1.2;
|
||||
}
|
||||
.streak-stat .slbl {
|
||||
font-size: 11px;
|
||||
color: var(--dim-light);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.heat-map {
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-4);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.heat-label { font-size: 11px; color: var(--dim-light); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-3); }
|
||||
.heat-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 40px repeat(7, 1fr);
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
}
|
||||
.heat-time { font-size: 10px; color: var(--faint-light); text-align: right; padding-right: 6px; }
|
||||
.heat-cell {
|
||||
aspect-ratio: 1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.heat-cell.h0 { background: var(--void); border: 1px solid var(--twilight); }
|
||||
.heat-cell.h1 { background: rgba(245,158,11,0.2); }
|
||||
.heat-cell.h2 { background: rgba(245,158,11,0.4); }
|
||||
.heat-cell.h3 { background: rgba(245,158,11,0.6); }
|
||||
.heat-cell.h4 { background: var(--amber); box-shadow: 0 0 6px rgba(245,158,11,0.4); }
|
||||
.heat-day-label { font-size: 9px; color: var(--faint-light); text-align: center; }
|
||||
.insight-note {
|
||||
font-size: 12px;
|
||||
color: var(--dim-light);
|
||||
line-height: 1.5;
|
||||
margin-top: var(--space-2);
|
||||
}
|
||||
.btn-start-ritual {
|
||||
width: 100%;
|
||||
height: 52px;
|
||||
background: var(--amber);
|
||||
border-radius: var(--radius-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--void);
|
||||
text-decoration: none;
|
||||
box-shadow: var(--glow-amber);
|
||||
margin-bottom: var(--space-6);
|
||||
transition: background 0.2s ease-out;
|
||||
}
|
||||
.btn-start-ritual:hover { background: var(--amber-light); }
|
||||
.completion-rate {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
.rate-bar-bg {
|
||||
flex: 1;
|
||||
height: 6px;
|
||||
background: var(--twilight);
|
||||
border-radius: var(--radius-full);
|
||||
overflow: hidden;
|
||||
margin: 0 var(--space-3);
|
||||
}
|
||||
.rate-bar-fill {
|
||||
height: 100%;
|
||||
border-radius: var(--radius-full);
|
||||
background: var(--amber);
|
||||
box-shadow: 0 0 8px rgba(245,158,11,0.4);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="device-frame">
|
||||
|
||||
<!-- STATUS BAR -->
|
||||
<div class="status-bar">
|
||||
<span class="time">8:52</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>
|
||||
|
||||
<!-- NAV HEADER -->
|
||||
<div class="nav-header">
|
||||
<a class="nav-back" href="44-ritual-templates.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">Ritual Streak</span>
|
||||
<span class="nav-action"></span>
|
||||
</div>
|
||||
|
||||
<!-- SCREEN CONTENT -->
|
||||
<div class="screen-content" style="padding-top: 0;">
|
||||
|
||||
<!-- Streak Hero -->
|
||||
<div class="streak-hero">
|
||||
<div class="streak-aura"></div>
|
||||
<div class="streak-number">14</div>
|
||||
<div class="streak-label">14-day streak</div>
|
||||
<div class="streak-started">Started Feb 1, 2026 · Still going</div>
|
||||
</div>
|
||||
|
||||
<!-- Streak Stats -->
|
||||
<div class="streak-stats">
|
||||
<div class="streak-stat">
|
||||
<div class="sval">14</div>
|
||||
<div class="slbl">Current</div>
|
||||
</div>
|
||||
<div class="streak-stat">
|
||||
<div class="sval">14</div>
|
||||
<div class="slbl">Longest</div>
|
||||
</div>
|
||||
<div class="streak-stat">
|
||||
<div class="sval">89%</div>
|
||||
<div class="slbl">Completion</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Completion rate bar -->
|
||||
<div class="completion-rate" style="margin-bottom: var(--space-4);">
|
||||
<span style="font-size:12px; color:var(--dim-light);">89% completion rate</span>
|
||||
<div class="rate-bar-bg" style="max-width: 140px;">
|
||||
<div class="rate-bar-fill" style="width:89%;"></div>
|
||||
</div>
|
||||
<span style="font-size:12px; color:var(--amber-light); font-weight:600;">12 of 14 days</span>
|
||||
</div>
|
||||
|
||||
<!-- February Calendar -->
|
||||
<div class="week-calendar">
|
||||
<div class="calendar-header">
|
||||
<span class="calendar-month">February 2026</span>
|
||||
<div style="display: flex; gap: var(--space-2);">
|
||||
<a href="#" style="color: var(--dim-light); text-decoration: none; font-size: 18px; line-height: 1;">‹</a>
|
||||
<a href="#" style="color: var(--dim-light); text-decoration: none; font-size: 18px; line-height: 1;">›</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Day labels -->
|
||||
<div class="day-grid">
|
||||
<div class="day-label">Mo</div>
|
||||
<div class="day-label">Tu</div>
|
||||
<div class="day-label">We</div>
|
||||
<div class="day-label">Th</div>
|
||||
<div class="day-label">Fr</div>
|
||||
<div class="day-label">Sa</div>
|
||||
<div class="day-label">Su</div>
|
||||
</div>
|
||||
<!-- Week 1: Feb starts on Sunday. Feb 1 = Sun col 7 -->
|
||||
<div class="day-grid" style="margin-top: 4px;">
|
||||
<div class="day-cell empty"></div>
|
||||
<div class="day-cell empty"></div>
|
||||
<div class="day-cell empty"></div>
|
||||
<div class="day-cell empty"></div>
|
||||
<div class="day-cell empty"></div>
|
||||
<div class="day-cell empty"></div>
|
||||
<div class="day-cell done">1</div>
|
||||
</div>
|
||||
<!-- Week 2: Feb 2–8 — missed Feb 4 & 6 in first week per ritual context -->
|
||||
<div class="day-grid" style="margin-top: 4px;">
|
||||
<div class="day-cell done">2</div>
|
||||
<div class="day-cell done">3</div>
|
||||
<div class="day-cell missed">4</div>
|
||||
<div class="day-cell done">5</div>
|
||||
<div class="day-cell missed">6</div>
|
||||
<div class="day-cell done">7</div>
|
||||
<div class="day-cell done">8</div>
|
||||
</div>
|
||||
<!-- Week 3: Feb 9–15 — all done, streak building -->
|
||||
<div class="day-grid" style="margin-top: 4px;">
|
||||
<div class="day-cell done">9</div>
|
||||
<div class="day-cell done">10</div>
|
||||
<div class="day-cell done">11</div>
|
||||
<div class="day-cell done">12</div>
|
||||
<div class="day-cell done">13</div>
|
||||
<div class="day-cell done">14</div>
|
||||
<div class="day-cell done">15</div>
|
||||
</div>
|
||||
<!-- Week 4: Feb 16–22 — current streak, today = 22 -->
|
||||
<div class="day-grid" style="margin-top: 4px;">
|
||||
<div class="day-cell done">16</div>
|
||||
<div class="day-cell done">17</div>
|
||||
<div class="day-cell done">18</div>
|
||||
<div class="day-cell done">19</div>
|
||||
<div class="day-cell done">20</div>
|
||||
<div class="day-cell done">21</div>
|
||||
<div class="day-cell today">22</div>
|
||||
</div>
|
||||
<!-- Week 5: Feb 23–28 — future -->
|
||||
<div class="day-grid" style="margin-top: 4px;">
|
||||
<div class="day-cell future">23</div>
|
||||
<div class="day-cell future">24</div>
|
||||
<div class="day-cell future">25</div>
|
||||
<div class="day-cell future">26</div>
|
||||
<div class="day-cell future">27</div>
|
||||
<div class="day-cell future">28</div>
|
||||
<div class="day-cell empty"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Completion Time Heat Map -->
|
||||
<div class="heat-map">
|
||||
<div class="heat-label">When you practice — last 14 days</div>
|
||||
<!-- Day labels row -->
|
||||
<div class="heat-grid">
|
||||
<div></div>
|
||||
<div class="heat-day-label">Mo</div>
|
||||
<div class="heat-day-label">Tu</div>
|
||||
<div class="heat-day-label">We</div>
|
||||
<div class="heat-day-label">Th</div>
|
||||
<div class="heat-day-label">Fr</div>
|
||||
<div class="heat-day-label">Sa</div>
|
||||
<div class="heat-day-label">Su</div>
|
||||
</div>
|
||||
<!-- 6am row — light activity -->
|
||||
<div class="heat-grid">
|
||||
<div class="heat-time">6am</div>
|
||||
<div class="heat-cell h0"></div>
|
||||
<div class="heat-cell h1"></div>
|
||||
<div class="heat-cell h0"></div>
|
||||
<div class="heat-cell h0"></div>
|
||||
<div class="heat-cell h1"></div>
|
||||
<div class="heat-cell h0"></div>
|
||||
<div class="heat-cell h0"></div>
|
||||
</div>
|
||||
<!-- 8–9am row — peak (spec: most turns 8–9am) -->
|
||||
<div class="heat-grid">
|
||||
<div class="heat-time">8am</div>
|
||||
<div class="heat-cell h4"></div>
|
||||
<div class="heat-cell h4"></div>
|
||||
<div class="heat-cell h3"></div>
|
||||
<div class="heat-cell h3"></div>
|
||||
<div class="heat-cell h4"></div>
|
||||
<div class="heat-cell h2"></div>
|
||||
<div class="heat-cell h3"></div>
|
||||
</div>
|
||||
<!-- 12pm row -->
|
||||
<div class="heat-grid">
|
||||
<div class="heat-time">12pm</div>
|
||||
<div class="heat-cell h1"></div>
|
||||
<div class="heat-cell h0"></div>
|
||||
<div class="heat-cell h1"></div>
|
||||
<div class="heat-cell h2"></div>
|
||||
<div class="heat-cell h0"></div>
|
||||
<div class="heat-cell h1"></div>
|
||||
<div class="heat-cell h1"></div>
|
||||
</div>
|
||||
<!-- 6pm row — secondary peak (spec: 6–8pm) -->
|
||||
<div class="heat-grid">
|
||||
<div class="heat-time">6pm</div>
|
||||
<div class="heat-cell h2"></div>
|
||||
<div class="heat-cell h2"></div>
|
||||
<div class="heat-cell h1"></div>
|
||||
<div class="heat-cell h1"></div>
|
||||
<div class="heat-cell h3"></div>
|
||||
<div class="heat-cell h2"></div>
|
||||
<div class="heat-cell h1"></div>
|
||||
</div>
|
||||
<!-- 9pm -->
|
||||
<div class="heat-grid">
|
||||
<div class="heat-time">9pm</div>
|
||||
<div class="heat-cell h0"></div>
|
||||
<div class="heat-cell h0"></div>
|
||||
<div class="heat-cell h0"></div>
|
||||
<div class="heat-cell h1"></div>
|
||||
<div class="heat-cell h0"></div>
|
||||
<div class="heat-cell h0"></div>
|
||||
<div class="heat-cell h0"></div>
|
||||
</div>
|
||||
<div class="insight-note">Your strongest window is 8–9am on weekdays — that's when your rituals land deepest.</div>
|
||||
</div>
|
||||
|
||||
<!-- CTA -->
|
||||
<a href="44-ritual-templates.html" class="btn-start-ritual">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" style="margin-right:6px;">
|
||||
<path d="M9 2L16 9L9 16L2 9Z" fill="var(--void)" opacity="0.5"/>
|
||||
<path d="M9 5L13 9L9 13L5 9Z" fill="var(--void)" opacity="0.8"/>
|
||||
</svg>
|
||||
Start Today's Ritual
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user