270 lines
14 KiB
HTML
270 lines
14 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=390, initial-scale=1">
|
||
|
|
<title>Kalei — Gallery</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);
|
||
|
|
}
|
||
|
|
.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); }
|
||
|
|
.toggle-row {
|
||
|
|
display: flex; gap: 0; background: var(--deep-glass);
|
||
|
|
border: 1px solid var(--twilight); border-radius: var(--radius-lg);
|
||
|
|
padding: 3px; margin-bottom: 12px;
|
||
|
|
}
|
||
|
|
.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);
|
||
|
|
}
|
||
|
|
.sort-chips {
|
||
|
|
display: flex; gap: 8px; margin-bottom: 14px;
|
||
|
|
}
|
||
|
|
.sort-chip {
|
||
|
|
height: 30px; padding: 0 14px; border-radius: var(--radius-full);
|
||
|
|
font-size: 12px; font-weight: 600; cursor: pointer;
|
||
|
|
display: flex; align-items: center; transition: all 0.15s;
|
||
|
|
border: 1px solid var(--twilight); color: var(--dim-light);
|
||
|
|
background: transparent;
|
||
|
|
}
|
||
|
|
.sort-chip.active {
|
||
|
|
background: rgba(var(--sapphire-rgb, 59,130,246), 0.15); border-color: var(--sapphire);
|
||
|
|
color: var(--sapphire-light);
|
||
|
|
}
|
||
|
|
.pattern-card:hover { border-color: var(--amethyst); }
|
||
|
|
@keyframes patternBreathing {
|
||
|
|
0%, 100% { opacity: 0.75; transform: scale(1); }
|
||
|
|
50% { opacity: 1; transform: scale(1.04); }
|
||
|
|
}
|
||
|
|
.pattern-visual-area svg { animation: patternBreathing 6s ease-in-out infinite; }
|
||
|
|
.pattern-grid {
|
||
|
|
display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
|
||
|
|
padding: 0 var(--space-4) var(--space-6);
|
||
|
|
}
|
||
|
|
.pattern-card {
|
||
|
|
background: var(--kalei-navy); border: 1px solid var(--twilight);
|
||
|
|
border-radius: var(--radius-xl); overflow: hidden; cursor: pointer;
|
||
|
|
text-decoration: none; transition: border-color 0.2s;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
.pattern-card:hover { border-color: rgba(139,92,246,0.4); }
|
||
|
|
.pattern-visual-area {
|
||
|
|
height: 130px; background: var(--void);
|
||
|
|
display: flex; align-items: center; justify-content: center;
|
||
|
|
position: relative; overflow: hidden;
|
||
|
|
}
|
||
|
|
.pattern-bg-aura {
|
||
|
|
position: absolute; inset: 0;
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
.pattern-info { padding: 10px 12px 12px; }
|
||
|
|
.pattern-thought {
|
||
|
|
font-size: 12px; color: var(--soft-light); line-height: 1.4;
|
||
|
|
margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2;
|
||
|
|
-webkit-box-orient: vertical; overflow: hidden;
|
||
|
|
}
|
||
|
|
.pattern-meta {
|
||
|
|
font-size: 11px; color: var(--dim-light); margin-bottom: 6px;
|
||
|
|
}
|
||
|
|
.pattern-chips { display: flex; flex-wrap: wrap; gap: 4px; }
|
||
|
|
.distortion-mini-chip {
|
||
|
|
background: rgba(245,158,11,0.1); color: var(--amber-light);
|
||
|
|
border-radius: 4px; padding: 2px 7px; font-size: 10px; font-weight: 500;
|
||
|
|
}
|
||
|
|
.screen-content { padding: 0; overflow-y: auto; }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="device-frame">
|
||
|
|
<div class="status-bar">
|
||
|
|
<span class="time">9:41</span>
|
||
|
|
<div class="icons">
|
||
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1" y="7" width="2.5" height="5" rx="0.5" fill="#E2E8F0" opacity="0.4"/><rect x="4.5" y="5" width="2.5" height="7" rx="0.5" fill="#E2E8F0" opacity="0.6"/><rect x="8" y="3" width="2.5" height="9" rx="0.5" fill="#E2E8F0" opacity="0.8"/><rect x="11.5" y="1" width="2.5" height="11" rx="0.5" fill="#E2E8F0"/></svg>
|
||
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M 2,8 C 4,4 12,4 14,8" stroke="#E2E8F0" stroke-width="1.2" fill="none" stroke-linecap="round"/><path d="M 4,10 C 6,7 10,7 12,10" stroke="#E2E8F0" stroke-width="1" fill="none" opacity="0.8" stroke-linecap="round"/><circle cx="8" cy="12" r="1.2" fill="#E2E8F0"/></svg>
|
||
|
|
<svg width="24" height="12" viewBox="0 0 24 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#E2E8F0" stroke-width="1" opacity="0.5"/><rect x="22" y="3" width="2" height="6" rx="1" fill="#E2E8F0" opacity="0.3"/><rect x="2" y="2" width="16" height="8" rx="1.5" fill="#10B981" opacity="0.9"/></svg>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="screen-content">
|
||
|
|
<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>
|
||
|
|
|
||
|
|
<!-- Toggle -->
|
||
|
|
<div class="toggle-row">
|
||
|
|
<a class="toggle-btn active" href="31-gallery-all.html">Patterns</a>
|
||
|
|
<a class="toggle-btn" href="32-gallery-keepsakes.html">Keepsakes</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Sort chips -->
|
||
|
|
<div class="sort-chips">
|
||
|
|
<div class="sort-chip active" onclick="setSort(this)">Recent</div>
|
||
|
|
<div class="sort-chip" onclick="setSort(this)">Most Reframed</div>
|
||
|
|
<div class="sort-chip" onclick="setSort(this)">This Week</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Pattern grid -->
|
||
|
|
<div class="pattern-grid">
|
||
|
|
|
||
|
|
<!-- Card 1 — Turn pattern (amethyst 6-fold), blade from patterns-kaleidoscope.svg -->
|
||
|
|
<a class="pattern-card" href="33-gallery-detail.html">
|
||
|
|
<div class="pattern-visual-area">
|
||
|
|
<div class="pattern-bg-aura" style="background: radial-gradient(circle at 50% 50%, rgba(139,92,246,0.2), transparent 70%);"></div>
|
||
|
|
<img src="../../assets/kalei-logo.svg" width="44" height="44" alt="Kalei" style="border-radius: 8px;">
|
||
|
|
</div>
|
||
|
|
<div class="pattern-info">
|
||
|
|
<div class="pattern-thought">I completely bombed my presentation today and everyone saw</div>
|
||
|
|
<div class="pattern-meta">Feb 22 · 3 perspectives</div>
|
||
|
|
<div class="pattern-chips">
|
||
|
|
<span class="distortion-mini-chip">Catastrophizing</span>
|
||
|
|
<span class="distortion-mini-chip">Overgeneralization</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<!-- Card 2 — Black-and-White + Labeling (rose/indigo) -->
|
||
|
|
<a class="pattern-card" href="33-gallery-detail.html">
|
||
|
|
<div class="pattern-visual-area">
|
||
|
|
<div class="pattern-bg-aura" style="background: radial-gradient(circle at 50% 50%, rgba(99,102,241,0.2), transparent 70%);"></div>
|
||
|
|
<img src="../../assets/kalei-logo.svg" width="44" height="44" alt="Kalei" style="border-radius: 8px;">
|
||
|
|
</div>
|
||
|
|
<div class="pattern-info">
|
||
|
|
<div class="pattern-thought">I never stick to anything I start — I'm not disciplined</div>
|
||
|
|
<div class="pattern-meta">Feb 17 · 3 perspectives</div>
|
||
|
|
<div class="pattern-chips">
|
||
|
|
<span class="distortion-mini-chip">Black-and-White</span>
|
||
|
|
<span class="distortion-mini-chip">Labeling</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<!-- Card 3 — Complex pattern (sapphire 6-fold), blade from patterns-kaleidoscope.svg Complex: M 0,0 L 6,-2 L -4,38 L -6,1 Z -->
|
||
|
|
<a class="pattern-card" href="33-gallery-detail.html">
|
||
|
|
<div class="pattern-visual-area">
|
||
|
|
<div class="pattern-bg-aura" style="background: radial-gradient(circle at 50% 50%, rgba(59,130,246,0.2), transparent 70%);"></div>
|
||
|
|
<img src="../../assets/kalei-logo.svg" width="44" height="44" alt="Kalei" style="border-radius: 8px;">
|
||
|
|
</div>
|
||
|
|
<div class="pattern-info">
|
||
|
|
<div class="pattern-thought">Nobody at work respects my opinion anymore</div>
|
||
|
|
<div class="pattern-meta">Feb 20 · 3 perspectives</div>
|
||
|
|
<div class="pattern-chips">
|
||
|
|
<span class="distortion-mini-chip">Mind Reading</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<!-- Card 4 — Turn pattern (amber, 6-fold), blade from patterns-kaleidoscope.svg -->
|
||
|
|
<a class="pattern-card" href="33-gallery-detail.html">
|
||
|
|
<div class="pattern-visual-area">
|
||
|
|
<div class="pattern-bg-aura" style="background: radial-gradient(circle at 50% 50%, rgba(245,158,11,0.2), transparent 70%);"></div>
|
||
|
|
<img src="../../assets/kalei-logo.svg" width="44" height="44" alt="Kalei" style="border-radius: 8px;">
|
||
|
|
</div>
|
||
|
|
<div class="pattern-info">
|
||
|
|
<div class="pattern-thought">Everything is going to fall apart if I don't fix this today</div>
|
||
|
|
<div class="pattern-meta">Feb 19 · 3 perspectives</div>
|
||
|
|
<div class="pattern-chips">
|
||
|
|
<span class="distortion-mini-chip">Catastrophizing</span>
|
||
|
|
<span class="distortion-mini-chip">Fortune Telling</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<!-- Card 5 — Complex pattern (rose/pink, 6-fold), Complex blade from patterns-kaleidoscope.svg -->
|
||
|
|
<a class="pattern-card" href="33-gallery-detail.html">
|
||
|
|
<div class="pattern-visual-area">
|
||
|
|
<div class="pattern-bg-aura" style="background: radial-gradient(circle at 50% 50%, rgba(236,72,153,0.2), transparent 70%);"></div>
|
||
|
|
<img src="../../assets/kalei-logo.svg" width="44" height="44" alt="Kalei" style="border-radius: 8px;">
|
||
|
|
</div>
|
||
|
|
<div class="pattern-info">
|
||
|
|
<div class="pattern-thought">It's all my fault the team missed the deadline</div>
|
||
|
|
<div class="pattern-meta">Feb 18 · 3 perspectives</div>
|
||
|
|
<div class="pattern-chips">
|
||
|
|
<span class="distortion-mini-chip">Personalization</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<!-- Card 6 — Turn pattern (indigo 6-fold), blade from patterns-kaleidoscope.svg -->
|
||
|
|
<a class="pattern-card" href="33-gallery-detail.html">
|
||
|
|
<div class="pattern-visual-area">
|
||
|
|
<div class="pattern-bg-aura" style="background: radial-gradient(circle at 50% 50%, rgba(99,102,241,0.2), transparent 70%);"></div>
|
||
|
|
<img src="../../assets/kalei-logo.svg" width="44" height="44" alt="Kalei" style="border-radius: 8px;">
|
||
|
|
</div>
|
||
|
|
<div class="pattern-info">
|
||
|
|
<div class="pattern-thought">I should be further along in my career by now</div>
|
||
|
|
<div class="pattern-meta">Feb 17 · 3 perspectives</div>
|
||
|
|
<div class="pattern-chips">
|
||
|
|
<span class="distortion-mini-chip">Should Statements</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</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>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
function setSort(el) {
|
||
|
|
document.querySelectorAll('.sort-chip').forEach(c => c.classList.remove('active'));
|
||
|
|
el.classList.add('active');
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|