278 lines
16 KiB
HTML
278 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=390, initial-scale=1">
|
|
<title>Kalei — Keepsakes</title>
|
|
<link rel="stylesheet" href="../../assets/design-system.css">
|
|
<style>
|
|
.gallery-header { padding: var(--space-4) var(--space-4) 0; }
|
|
.gallery-title-row {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
margin-bottom: 14px;
|
|
}
|
|
.gallery-heading {
|
|
font-size: 26px; font-weight: 700; color: var(--pure-light);
|
|
font-family: var(--font-display);
|
|
}
|
|
.toggle-row {
|
|
display: flex; gap: 0; background: var(--deep-glass);
|
|
border: 1px solid var(--twilight); border-radius: var(--radius-lg);
|
|
padding: 3px; margin-bottom: 16px;
|
|
}
|
|
.toggle-btn {
|
|
flex: 1; height: 36px; border-radius: var(--radius-md);
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: 14px; font-weight: 600; cursor: pointer;
|
|
text-decoration: none; transition: all 0.2s;
|
|
color: var(--dim-light);
|
|
}
|
|
.toggle-btn.active {
|
|
background: var(--sapphire); color: var(--pure-light);
|
|
box-shadow: var(--glow-sapphire);
|
|
}
|
|
.keepsake-card {
|
|
background: var(--kalei-navy); border: 1px solid var(--twilight);
|
|
border-radius: var(--radius-xl); padding: var(--space-4);
|
|
margin-bottom: var(--space-3); display: flex; gap: var(--space-3);
|
|
cursor: pointer; text-decoration: none; transition: border-color 0.2s;
|
|
align-items: flex-start;
|
|
}
|
|
.keepsake-card:hover { border-color: var(--sapphire); }
|
|
.keepsake-pattern svg { animation: breathing 6s ease-in-out infinite; }
|
|
.keepsake-pattern {
|
|
width: 64px; height: 64px; border-radius: var(--radius-md);
|
|
background: var(--void); flex-shrink: 0;
|
|
display: flex; align-items: center; justify-content: center;
|
|
overflow: hidden; position: relative;
|
|
}
|
|
.keepsake-content { flex: 1; min-width: 0; }
|
|
.keepsake-reframe {
|
|
font-size: 14px; color: var(--pure-light); line-height: 1.4;
|
|
margin-bottom: 6px; font-weight: 500;
|
|
}
|
|
.keepsake-source {
|
|
font-size: 12px; color: var(--dim-light); margin-bottom: 8px;
|
|
display: -webkit-box; -webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical; overflow: hidden;
|
|
font-style: italic;
|
|
}
|
|
.keepsake-meta {
|
|
display: flex; align-items: center; gap: 8px;
|
|
}
|
|
.keepsake-date { font-size: 11px; color: var(--dim-light); }
|
|
.keepsake-bookmark {
|
|
margin-left: auto; color: var(--sapphire-light); flex-shrink: 0;
|
|
}
|
|
.section-label {
|
|
font-size: 11px; font-weight: 600; text-transform: uppercase;
|
|
letter-spacing: 0.06em; color: var(--dim-light);
|
|
padding: 4px 0 8px;
|
|
}
|
|
.screen-content { padding: 0 var(--space-4) var(--space-6); overflow-y: auto; }
|
|
.empty-keepsake {
|
|
text-align: center; padding: 40px var(--space-4);
|
|
}
|
|
.keepsake-count-chip {
|
|
background: rgba(var(--sapphire-rgb, 59,130,246), 0.1); border: 1px solid rgba(var(--sapphire-rgb, 59,130,246), 0.25);
|
|
border-radius: var(--radius-full); padding: 3px 12px; font-size: 12px;
|
|
color: var(--sapphire-light); font-weight: 500;
|
|
}
|
|
.search-icon-btn {
|
|
width: 40px; height: 40px; border-radius: var(--radius-md);
|
|
background: var(--deep-glass); border: 1px solid var(--twilight);
|
|
display: flex; align-items: center; justify-content: center;
|
|
color: var(--dim-light); text-decoration: none; cursor: pointer;
|
|
transition: border-color 0.2s;
|
|
}
|
|
.search-icon-btn:hover { border-color: var(--sapphire); color: var(--sapphire-light); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="device-frame">
|
|
<div class="status-bar">
|
|
<span class="time">9:41</span>
|
|
<div class="icons">
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1" y="7" width="2.5" height="5" rx="0.5" fill="#E2E8F0" opacity="0.4"/><rect x="4.5" y="5" width="2.5" height="7" rx="0.5" fill="#E2E8F0" opacity="0.6"/><rect x="8" y="3" width="2.5" height="9" rx="0.5" fill="#E2E8F0" opacity="0.8"/><rect x="11.5" y="1" width="2.5" height="11" rx="0.5" fill="#E2E8F0"/></svg>
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M 2,8 C 4,4 12,4 14,8" stroke="#E2E8F0" stroke-width="1.2" fill="none" stroke-linecap="round"/><path d="M 4,10 C 6,7 10,7 12,10" stroke="#E2E8F0" stroke-width="1" fill="none" opacity="0.8" stroke-linecap="round"/><circle cx="8" cy="12" r="1.2" fill="#E2E8F0"/></svg>
|
|
<svg width="24" height="12" viewBox="0 0 24 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#E2E8F0" stroke-width="1" opacity="0.5"/><rect x="22" y="3" width="2" height="6" rx="1" fill="#E2E8F0" opacity="0.3"/><rect x="2" y="2" width="16" height="8" rx="1.5" fill="#10B981" opacity="0.9"/></svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gallery-header">
|
|
<div class="gallery-title-row">
|
|
<div class="gallery-heading">Gallery</div>
|
|
<a class="search-icon-btn" href="34-gallery-search.html">
|
|
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
|
<circle cx="8" cy="8" r="5.5" stroke="currentColor" stroke-width="1.5"/>
|
|
<path d="M12.5 12.5L16 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="toggle-row">
|
|
<a class="toggle-btn" href="31-gallery-all.html">Patterns</a>
|
|
<a class="toggle-btn active" href="32-gallery-keepsakes.html">Keepsakes</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="screen-content">
|
|
<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px;">
|
|
<div class="section-label">Saved Reframes</div>
|
|
<span class="keepsake-count-chip">4 keepsakes</span>
|
|
</div>
|
|
|
|
<!-- Keepsake 1 -->
|
|
<a class="keepsake-card" href="33-gallery-detail.html">
|
|
<div class="keepsake-pattern">
|
|
<div style="position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(139,92,246,0.25), transparent 70%);"></div>
|
|
<svg width="50" height="50" viewBox="0 0 50 50" style="mix-blend-mode: screen; position: relative; z-index: 1;">
|
|
<defs><linearGradient id="gk1" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#C4B5FD" stop-opacity="0.9"/><stop offset="100%" stop-color="#7C3AED" stop-opacity="0.3"/></linearGradient></defs>
|
|
<g transform="translate(25,25)">
|
|
<g><path d="M0,0 L4,-20 L0,-24 L-4,-20Z" fill="url(#gk1)"/></g>
|
|
<g transform="rotate(60)"><path d="M0,0 L4,-20 L0,-24 L-4,-20Z" fill="url(#gk1)"/></g>
|
|
<g transform="rotate(120)"><path d="M0,0 L4,-20 L0,-24 L-4,-20Z" fill="url(#gk1)"/></g>
|
|
<g transform="rotate(180)"><path d="M0,0 L4,-20 L0,-24 L-4,-20Z" fill="url(#gk1)"/></g>
|
|
<g transform="rotate(240)"><path d="M0,0 L4,-20 L0,-24 L-4,-20Z" fill="url(#gk1)"/></g>
|
|
<g transform="rotate(300)"><path d="M0,0 L4,-20 L0,-24 L-4,-20Z" fill="url(#gk1)"/></g>
|
|
<circle r="5" fill="white" opacity="0.1"/>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div class="keepsake-content">
|
|
<div class="keepsake-reframe">"What if the people in that room saw something you didn't — someone who showed up, spoke up, and kept going when the pressure was highest?"</div>
|
|
<div class="keepsake-source">From: "I completely bombed my presentation today and everyone saw"</div>
|
|
<div class="keepsake-meta">
|
|
<span class="keepsake-date">Feb 22</span>
|
|
<span class="label text-dim">· Perspective Shift</span>
|
|
<span class="keepsake-bookmark">
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
|
|
<path d="M4 2h8a1 1 0 011 1v11l-5-3-5 3V3a1 1 0 011-1z"/>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<!-- Keepsake 2 -->
|
|
<a class="keepsake-card" href="33-gallery-detail.html">
|
|
<div class="keepsake-pattern">
|
|
<div style="position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(16,185,129,0.25), transparent 70%);"></div>
|
|
<svg width="50" height="50" viewBox="0 0 50 50" style="mix-blend-mode: screen; position: relative; z-index: 1;">
|
|
<defs><linearGradient id="gk2" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#6EE7B7" stop-opacity="0.9"/><stop offset="100%" stop-color="#059669" stop-opacity="0.3"/></linearGradient></defs>
|
|
<g transform="translate(25,25)">
|
|
<g><path d="M0,0 L4,-18 L0,-23 L-4,-18Z" fill="url(#gk2)"/></g>
|
|
<g transform="rotate(72)"><path d="M0,0 L4,-18 L0,-23 L-4,-18Z" fill="url(#gk2)"/></g>
|
|
<g transform="rotate(144)"><path d="M0,0 L4,-18 L0,-23 L-4,-18Z" fill="url(#gk2)"/></g>
|
|
<g transform="rotate(216)"><path d="M0,0 L4,-18 L0,-23 L-4,-18Z" fill="url(#gk2)"/></g>
|
|
<g transform="rotate(288)"><path d="M0,0 L4,-18 L0,-23 L-4,-18Z" fill="url(#gk2)"/></g>
|
|
<circle r="4" fill="white" opacity="0.1"/>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div class="keepsake-content">
|
|
<div class="keepsake-reframe">"You came back to this — today, again. That's not someone who never sticks to things. That's exactly what sticking to something looks like from the inside."</div>
|
|
<div class="keepsake-source">From: "I never stick to anything I start — I'm not disciplined"</div>
|
|
<div class="keepsake-meta">
|
|
<span class="keepsake-date">Feb 17</span>
|
|
<span class="label text-dim">· Evidence Check</span>
|
|
<span class="keepsake-bookmark">
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" style="color: var(--sapphire-light);">
|
|
<path d="M4 2h8a1 1 0 011 1v11l-5-3-5 3V3a1 1 0 011-1z"/>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<!-- Keepsake 3 -->
|
|
<a class="keepsake-card" href="33-gallery-detail.html">
|
|
<div class="keepsake-pattern">
|
|
<div style="position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(59,130,246,0.25), transparent 70%);"></div>
|
|
<svg width="50" height="50" viewBox="0 0 50 50" style="mix-blend-mode: screen; position: relative; z-index: 1;">
|
|
<defs><linearGradient id="gk3" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#93C5FD" stop-opacity="0.9"/><stop offset="100%" stop-color="#2563EB" stop-opacity="0.3"/></linearGradient></defs>
|
|
<g transform="translate(25,25)">
|
|
<g><path d="M0,0 L5,-20 L0,-26 L-5,-20Z" fill="url(#gk3)"/></g>
|
|
<g transform="rotate(120)"><path d="M0,0 L5,-20 L0,-26 L-5,-20Z" fill="url(#gk3)"/></g>
|
|
<g transform="rotate(240)"><path d="M0,0 L5,-20 L0,-26 L-5,-20Z" fill="url(#gk3)"/></g>
|
|
<circle r="4" fill="white" opacity="0.1"/>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div class="keepsake-content">
|
|
<div class="keepsake-reframe">"Minds are harder to read than we think. What if the silence wasn't indifference — but the kind of stillness that comes right before something lands?"</div>
|
|
<div class="keepsake-source">From: "Nobody at work respects my opinion anymore"</div>
|
|
<div class="keepsake-meta">
|
|
<span class="keepsake-date">Feb 20</span>
|
|
<span class="label text-dim">· Perspective Shift</span>
|
|
<span class="keepsake-bookmark">
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" style="color: var(--sapphire-light);">
|
|
<path d="M4 2h8a1 1 0 011 1v11l-5-3-5 3V3a1 1 0 011-1z"/>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<!-- Keepsake 4 -->
|
|
<a class="keepsake-card" href="33-gallery-detail.html">
|
|
<div class="keepsake-pattern">
|
|
<div style="position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(245,158,11,0.25), transparent 70%);"></div>
|
|
<svg width="50" height="50" viewBox="0 0 50 50" style="mix-blend-mode: screen; position: relative; z-index: 1;">
|
|
<defs><linearGradient id="gk4" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#FDE68A" stop-opacity="0.9"/><stop offset="100%" stop-color="#D97706" stop-opacity="0.3"/></linearGradient></defs>
|
|
<g transform="translate(25,25)">
|
|
<g><path d="M0,0 L5,-22 L0,-27 L-5,-22Z" fill="url(#gk4)"/></g>
|
|
<g transform="rotate(45)"><path d="M0,0 L5,-22 L0,-27 L-5,-22Z" fill="url(#gk4)"/></g>
|
|
<g transform="rotate(90)"><path d="M0,0 L5,-22 L0,-27 L-5,-22Z" fill="url(#gk4)"/></g>
|
|
<g transform="rotate(135)"><path d="M0,0 L5,-22 L0,-27 L-5,-22Z" fill="url(#gk4)"/></g>
|
|
<g transform="rotate(180)"><path d="M0,0 L5,-22 L0,-27 L-5,-22Z" fill="url(#gk4)"/></g>
|
|
<g transform="rotate(225)"><path d="M0,0 L5,-22 L0,-27 L-5,-22Z" fill="url(#gk4)"/></g>
|
|
<g transform="rotate(270)"><path d="M0,0 L5,-22 L0,-27 L-5,-22Z" fill="url(#gk4)"/></g>
|
|
<g transform="rotate(315)"><path d="M0,0 L5,-22 L0,-27 L-5,-22Z" fill="url(#gk4)"/></g>
|
|
<circle r="5" fill="white" opacity="0.08"/>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div class="keepsake-content">
|
|
<div class="keepsake-reframe">"The story that everything falls apart unless you carry it — that's the exhausting part. What's the smallest thing that would make today count? Start there."</div>
|
|
<div class="keepsake-source">From: "Everything is going to fall apart if I don't fix this today"</div>
|
|
<div class="keepsake-meta">
|
|
<span class="keepsake-date">Feb 19</span>
|
|
<span class="label text-dim">· Action Step</span>
|
|
<span class="keepsake-bookmark">
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" style="color: var(--sapphire-light);">
|
|
<path d="M4 2h8a1 1 0 011 1v11l-5-3-5 3V3a1 1 0 011-1z"/>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Tab Bar -->
|
|
<div class="tab-bar">
|
|
<a class="tab-item inactive" data-tab="turn" href="../turn/10-turn-home.html">
|
|
<svg width="24" height="24" viewBox="0 0 24 24"><path d="M12 2L20 12L12 22L4 12Z" fill="currentColor" opacity="0.9"/><path d="M12 2L20 12L12 12Z" fill="white" opacity="0.15"/></svg>
|
|
<span class="tab-label">Turn</span>
|
|
</a>
|
|
<a class="tab-item inactive" data-tab="mirror" href="../mirror/15-mirror-home.html">
|
|
<svg width="24" height="24" viewBox="0 0 24 24"><path d="M12 3L16 8L18 14L12 19L6 14L8 8Z" stroke="currentColor" fill="none" stroke-width="1.2"/></svg>
|
|
<span class="tab-label">Mirror</span>
|
|
</a>
|
|
<a class="tab-item 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 active" data-tab="gallery" href="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>
|