337 lines
13 KiB
HTML
337 lines
13 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=390, initial-scale=1">
|
||
|
|
<title>Kalei — Turn History</title>
|
||
|
|
<link rel="stylesheet" href="../../assets/design-system.css">
|
||
|
|
<style>
|
||
|
|
.filter-row {
|
||
|
|
display: flex;
|
||
|
|
gap: var(--space-2);
|
||
|
|
padding: var(--space-3) 0 var(--space-4);
|
||
|
|
}
|
||
|
|
.filter-chip {
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
height: 32px;
|
||
|
|
padding: 0 var(--space-3);
|
||
|
|
border-radius: var(--radius-full);
|
||
|
|
font-size: 13px;
|
||
|
|
font-weight: 500;
|
||
|
|
cursor: pointer;
|
||
|
|
border: 1px solid var(--twilight);
|
||
|
|
background: var(--deep-glass);
|
||
|
|
color: var(--dim-light);
|
||
|
|
transition: all 0.2s ease-out;
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
.filter-chip:hover:not(.active) {
|
||
|
|
border-color: var(--faint-light);
|
||
|
|
color: var(--soft-light);
|
||
|
|
}
|
||
|
|
.filter-chip.active {
|
||
|
|
background: rgba(139,92,246,0.15);
|
||
|
|
border-color: var(--amethyst);
|
||
|
|
color: var(--amethyst-light);
|
||
|
|
}
|
||
|
|
.history-card {
|
||
|
|
display: flex;
|
||
|
|
gap: var(--space-3);
|
||
|
|
background: var(--kalei-navy);
|
||
|
|
border: 1px solid var(--twilight);
|
||
|
|
border-radius: var(--radius-xl);
|
||
|
|
padding: var(--space-4);
|
||
|
|
margin-bottom: var(--space-3);
|
||
|
|
cursor: pointer;
|
||
|
|
text-decoration: none;
|
||
|
|
transition: background 0.2s ease-out, border-color 0.2s ease-out;
|
||
|
|
}
|
||
|
|
.history-card:hover { background: var(--deep-glass); border-color: rgba(139,92,246,0.3); }
|
||
|
|
.history-kaleido {
|
||
|
|
width: 56px;
|
||
|
|
height: 56px;
|
||
|
|
flex-shrink: 0;
|
||
|
|
border-radius: var(--radius-md);
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
.history-content { flex: 1; }
|
||
|
|
.history-thought {
|
||
|
|
font-size: 14px;
|
||
|
|
color: var(--soft-light);
|
||
|
|
line-height: 1.4;
|
||
|
|
margin-bottom: var(--space-2);
|
||
|
|
display: -webkit-box;
|
||
|
|
-webkit-line-clamp: 2;
|
||
|
|
-webkit-box-orient: vertical;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
.history-meta {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: var(--space-2);
|
||
|
|
flex-wrap: wrap;
|
||
|
|
}
|
||
|
|
.history-date {
|
||
|
|
font-size: 11px;
|
||
|
|
color: var(--faint-light);
|
||
|
|
}
|
||
|
|
.history-perspectives {
|
||
|
|
font-size: 11px;
|
||
|
|
color: var(--dim-light);
|
||
|
|
}
|
||
|
|
.chips-row {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
gap: 4px;
|
||
|
|
margin-top: var(--space-2);
|
||
|
|
}
|
||
|
|
.mini-chip {
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 4px;
|
||
|
|
height: 20px;
|
||
|
|
padding: 0 7px;
|
||
|
|
border-radius: var(--radius-full);
|
||
|
|
font-size: 10px;
|
||
|
|
font-weight: 500;
|
||
|
|
background: rgba(245,158,11,0.12);
|
||
|
|
color: var(--amber-light);
|
||
|
|
}
|
||
|
|
.section-divider {
|
||
|
|
height: 1px;
|
||
|
|
background: var(--twilight);
|
||
|
|
margin: var(--space-3) 0 var(--space-4);
|
||
|
|
opacity: 0.5;
|
||
|
|
}
|
||
|
|
.month-label {
|
||
|
|
font-size: 11px;
|
||
|
|
font-weight: 600;
|
||
|
|
color: var(--faint-light);
|
||
|
|
text-transform: uppercase;
|
||
|
|
letter-spacing: 0.06em;
|
||
|
|
margin-bottom: var(--space-3);
|
||
|
|
}
|
||
|
|
.screen-aura {
|
||
|
|
position: absolute;
|
||
|
|
top: 15%;
|
||
|
|
left: 50%;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
width: 300px;
|
||
|
|
height: 300px;
|
||
|
|
border-radius: 50%;
|
||
|
|
background: radial-gradient(circle, rgba(139,92,246,0.12) 0%, rgba(59,130,246,0.04) 50%, transparent 70%);
|
||
|
|
filter: blur(60px);
|
||
|
|
animation: breathing 6s ease-in-out infinite;
|
||
|
|
pointer-events: none;
|
||
|
|
z-index: 0;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="device-frame">
|
||
|
|
|
||
|
|
<div class="status-bar">
|
||
|
|
<span class="time">9:41</span>
|
||
|
|
<div class="icons">
|
||
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||
|
|
<rect x="1" y="7" width="2.5" height="5" rx="0.5" fill="#E2E8F0" opacity="0.4"/>
|
||
|
|
<rect x="4.5" y="5" width="2.5" height="7" rx="0.5" fill="#E2E8F0" opacity="0.6"/>
|
||
|
|
<rect x="8" y="3" width="2.5" height="9" rx="0.5" fill="#E2E8F0" opacity="0.8"/>
|
||
|
|
<rect x="11.5" y="1" width="2.5" height="11" rx="0.5" fill="#E2E8F0"/>
|
||
|
|
</svg>
|
||
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||
|
|
<path d="M 2,8 C 4,4 12,4 14,8" stroke="#E2E8F0" stroke-width="1.2" fill="none" stroke-linecap="round"/>
|
||
|
|
<path d="M 4,10 C 6,7 10,7 12,10" stroke="#E2E8F0" stroke-width="1" fill="none" opacity="0.8" stroke-linecap="round"/>
|
||
|
|
<circle cx="8" cy="12" r="1.2" fill="#E2E8F0"/>
|
||
|
|
</svg>
|
||
|
|
<svg width="24" height="12" viewBox="0 0 24 12" fill="none">
|
||
|
|
<rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#E2E8F0" stroke-width="1" opacity="0.5"/>
|
||
|
|
<rect x="22" y="3" width="2" height="6" rx="1" fill="#E2E8F0" opacity="0.3"/>
|
||
|
|
<rect x="2" y="2" width="16" height="8" rx="1.5" fill="#10B981" opacity="0.9"/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="nav-header">
|
||
|
|
<a class="nav-back" href="10-turn-home.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">Turn History</span>
|
||
|
|
<span class="nav-action">
|
||
|
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||
|
|
<circle cx="10" cy="5" r="1.5" fill="var(--dim-light)"/>
|
||
|
|
<circle cx="10" cy="10" r="1.5" fill="var(--dim-light)"/>
|
||
|
|
<circle cx="10" cy="15" r="1.5" fill="var(--dim-light)"/>
|
||
|
|
</svg>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="screen-content" style="padding-bottom: 24px; position: relative;">
|
||
|
|
<div class="screen-aura"></div>
|
||
|
|
|
||
|
|
<div class="filter-row">
|
||
|
|
<a class="filter-chip active" href="#">All</a>
|
||
|
|
<a class="filter-chip" href="#">This Week</a>
|
||
|
|
<a class="filter-chip" href="#">Saved</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="month-label">February 2026</div>
|
||
|
|
|
||
|
|
<!-- Card 1 — Turn Pattern amethyst (blade shape from patterns-kaleidoscope.svg Turn Pattern) -->
|
||
|
|
<a class="history-card" href="13-turn-results.html">
|
||
|
|
<div class="history-kaleido">
|
||
|
|
<img src="../../assets/kalei-logo.svg" width="56" height="56" alt="Kalei" style="border-radius: var(--radius-sm);">
|
||
|
|
</div>
|
||
|
|
<div class="history-content">
|
||
|
|
<div class="history-thought">I completely bombed my presentation today and everyone saw</div>
|
||
|
|
<div class="history-meta">
|
||
|
|
<span class="history-date">Today, 8:15 AM</span>
|
||
|
|
<span class="history-perspectives">3 perspectives</span>
|
||
|
|
</div>
|
||
|
|
<div class="chips-row">
|
||
|
|
<span class="mini-chip">Catastrophizing</span>
|
||
|
|
<span class="mini-chip">Overgeneralization</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<!-- Card 2 -->
|
||
|
|
<a class="history-card" href="13-turn-results.html">
|
||
|
|
<div class="history-kaleido">
|
||
|
|
<img src="../../assets/kalei-logo.svg" width="56" height="56" alt="Kalei" style="border-radius: var(--radius-sm);">
|
||
|
|
</div>
|
||
|
|
<div class="history-content">
|
||
|
|
<div class="history-thought">Nobody at work actually cares about my ideas</div>
|
||
|
|
<div class="history-meta">
|
||
|
|
<span class="history-date">Yesterday, Feb 21</span>
|
||
|
|
<span class="history-perspectives">3 perspectives</span>
|
||
|
|
</div>
|
||
|
|
<div class="chips-row">
|
||
|
|
<span class="mini-chip">Mind Reading</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<!-- Card 3 -->
|
||
|
|
<a class="history-card" href="13-turn-results.html">
|
||
|
|
<div class="history-kaleido">
|
||
|
|
<img src="../../assets/kalei-logo.svg" width="56" height="56" alt="Kalei" style="border-radius: var(--radius-sm);">
|
||
|
|
</div>
|
||
|
|
<div class="history-content">
|
||
|
|
<div class="history-thought">I should be further along in my career by now</div>
|
||
|
|
<div class="history-meta">
|
||
|
|
<span class="history-date">Feb 20</span>
|
||
|
|
<span class="history-perspectives">3 perspectives</span>
|
||
|
|
</div>
|
||
|
|
<div class="chips-row">
|
||
|
|
<span class="mini-chip">Should Statements</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<!-- Card 4 -->
|
||
|
|
<a class="history-card" href="13-turn-results.html">
|
||
|
|
<div class="history-kaleido">
|
||
|
|
<img src="../../assets/kalei-logo.svg" width="56" height="56" alt="Kalei" style="border-radius: var(--radius-sm);">
|
||
|
|
</div>
|
||
|
|
<div class="history-content">
|
||
|
|
<div class="history-thought">Everything is going to fall apart if I don't fix this today</div>
|
||
|
|
<div class="history-meta">
|
||
|
|
<span class="history-date">Feb 19</span>
|
||
|
|
<span class="history-perspectives">3 perspectives</span>
|
||
|
|
</div>
|
||
|
|
<div class="chips-row">
|
||
|
|
<span class="mini-chip">Catastrophizing</span>
|
||
|
|
<span class="mini-chip">Fortune Telling</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<!-- Card 5 -->
|
||
|
|
<a class="history-card" href="13-turn-results.html">
|
||
|
|
<div class="history-kaleido">
|
||
|
|
<img src="../../assets/kalei-logo.svg" width="56" height="56" alt="Kalei" style="border-radius: var(--radius-sm);">
|
||
|
|
</div>
|
||
|
|
<div class="history-content">
|
||
|
|
<div class="history-thought">It's all my fault the team missed the deadline</div>
|
||
|
|
<div class="history-meta">
|
||
|
|
<span class="history-date">Feb 18</span>
|
||
|
|
<span class="history-perspectives">3 perspectives</span>
|
||
|
|
</div>
|
||
|
|
<div class="chips-row">
|
||
|
|
<span class="mini-chip">Personalization</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<!-- Card 6 -->
|
||
|
|
<a class="history-card" href="13-turn-results.html">
|
||
|
|
<div class="history-kaleido">
|
||
|
|
<img src="../../assets/kalei-logo.svg" width="56" height="56" alt="Kalei" style="border-radius: var(--radius-sm);">
|
||
|
|
</div>
|
||
|
|
<div class="history-content">
|
||
|
|
<div class="history-thought">I never stick to anything I start — I'm not disciplined</div>
|
||
|
|
<div class="history-meta">
|
||
|
|
<span class="history-date">Feb 17</span>
|
||
|
|
<span class="history-perspectives">3 perspectives</span>
|
||
|
|
</div>
|
||
|
|
<div class="chips-row">
|
||
|
|
<span class="mini-chip">Black-and-White</span>
|
||
|
|
<span class="mini-chip">Labeling</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<div class="section-divider"></div>
|
||
|
|
<div class="month-label">January 2026</div>
|
||
|
|
|
||
|
|
<!-- Card 7 -->
|
||
|
|
<a class="history-card" href="13-turn-results.html">
|
||
|
|
<div class="history-kaleido">
|
||
|
|
<img src="../../assets/kalei-logo.svg" width="56" height="56" alt="Kalei" style="border-radius: var(--radius-sm);">
|
||
|
|
</div>
|
||
|
|
<div class="history-content">
|
||
|
|
<div class="history-thought">My friend is upset with me and it's definitely my fault somehow</div>
|
||
|
|
<div class="history-meta">
|
||
|
|
<span class="history-date">Jan 30</span>
|
||
|
|
<span class="history-perspectives">3 perspectives</span>
|
||
|
|
</div>
|
||
|
|
<div class="chips-row">
|
||
|
|
<span class="mini-chip">Personalization</span>
|
||
|
|
<span class="mini-chip">Fortune Telling</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="tab-bar">
|
||
|
|
<a class="tab-item active" data-tab="turn" href="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 inactive" 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>
|
||
|
|
</body>
|
||
|
|
</html>
|