423 lines
15 KiB
HTML
423 lines
15 KiB
HTML
<!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>
|