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:
242
initial mockups/screens/turn/10-turn-home.html
Normal file
242
initial mockups/screens/turn/10-turn-home.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 — Turn Home</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.screen-aura {
|
||||
position: absolute;
|
||||
top: 18%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 320px;
|
||||
height: 320px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(139,92,246,0.16) 0%, rgba(59,130,246,0.05) 50%, transparent 70%);
|
||||
filter: blur(60px);
|
||||
animation: breathing 6s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
.home-greeting {
|
||||
padding: var(--space-5) 0 var(--space-4);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.textarea-wrapper {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-bottom: var(--space-5);
|
||||
}
|
||||
.textarea-field.home-textarea {
|
||||
min-height: 100px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.turn-btn-wrapper {
|
||||
position: sticky;
|
||||
bottom: calc(var(--tab-bar-height) + 12px);
|
||||
z-index: 5;
|
||||
padding: 0 0 var(--space-1);
|
||||
}
|
||||
.turn-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
margin-bottom: var(--space-2);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: background 0.2s ease-out, border-color 0.2s ease-out;
|
||||
}
|
||||
.turn-card:hover { background: var(--deep-glass); border-color: rgba(139,92,246,0.3); }
|
||||
.turn-card-content { flex: 1; overflow: hidden; }
|
||||
.turn-card-thought {
|
||||
font-size: 14px;
|
||||
color: var(--soft-light);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.turn-card-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.turn-card-date {
|
||||
font-size: 11px;
|
||||
color: var(--faint-light);
|
||||
}
|
||||
.section-header-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: var(--space-3);
|
||||
margin-top: var(--space-5);
|
||||
}
|
||||
.section-title-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--dim-light);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
.section-link {
|
||||
font-size: 13px;
|
||||
color: var(--amethyst-light);
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease-out;
|
||||
}
|
||||
.section-link:hover { color: var(--amethyst); }
|
||||
.content-pad {
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
.mini-kaleido-wrap {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: var(--radius-sm);
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="device-frame">
|
||||
|
||||
<div class="status-bar">
|
||||
<span class="time">8:15</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 content-pad">
|
||||
<div class="screen-aura"></div>
|
||||
|
||||
<div class="home-greeting">
|
||||
<div class="heading text-pure">Good morning, Alex</div>
|
||||
<div class="body mt-1" style="color: var(--dim-light);">Day 14 in a row. What's on your mind?</div>
|
||||
</div>
|
||||
|
||||
<div class="textarea-wrapper">
|
||||
<textarea class="textarea-field home-textarea" placeholder="Something happened today..."></textarea>
|
||||
</div>
|
||||
|
||||
<div class="section-header-row">
|
||||
<span class="section-title-label">Recent Turns</span>
|
||||
<a class="section-link" href="14-turn-history.html">See all</a>
|
||||
</div>
|
||||
|
||||
<!-- Turn History Card 1 — Turn Pattern (amethyst 6-blade from patterns-kaleidoscope.svg) -->
|
||||
<a class="turn-card" href="13-turn-results.html">
|
||||
<div class="mini-kaleido-wrap">
|
||||
<img src="../../assets/kalei-logo.svg" width="44" height="44" alt="Kalei" style="border-radius: var(--radius-sm);">
|
||||
</div>
|
||||
<div class="turn-card-content">
|
||||
<div class="turn-card-thought">I completely bombed my presentation today and everyone saw</div>
|
||||
<div class="turn-card-meta">
|
||||
<span class="turn-card-date">Today, 8:15 AM</span>
|
||||
<span class="chip chip-amber" style="height:20px;font-size:10px;padding:0 8px;">Catastrophizing</span>
|
||||
<span class="chip chip-amber" style="height:20px;font-size:10px;padding:0 8px;">Overgeneralization</span>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<!-- Turn History Card 2 — Sapphire tinted 6-blade -->
|
||||
<a class="turn-card" href="13-turn-results.html">
|
||||
<div class="mini-kaleido-wrap">
|
||||
<img src="../../assets/kalei-logo.svg" width="44" height="44" alt="Kalei" style="border-radius: var(--radius-sm);">
|
||||
</div>
|
||||
<div class="turn-card-content">
|
||||
<div class="turn-card-thought">Nobody at work actually cares about my ideas</div>
|
||||
<div class="turn-card-meta">
|
||||
<span class="turn-card-date">Yesterday, Feb 21</span>
|
||||
<span class="chip chip-amber" style="height:20px;font-size:10px;padding:0 8px;">Mind Reading</span>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<!-- Turn History Card 3 — Emerald tinted 6-blade -->
|
||||
<a class="turn-card" href="13-turn-results.html">
|
||||
<div class="mini-kaleido-wrap">
|
||||
<img src="../../assets/kalei-logo.svg" width="44" height="44" alt="Kalei" style="border-radius: var(--radius-sm);">
|
||||
</div>
|
||||
<div class="turn-card-content">
|
||||
<div class="turn-card-thought">I should be further along in my career by now</div>
|
||||
<div class="turn-card-meta">
|
||||
<span class="turn-card-date">Feb 20</span>
|
||||
<span class="chip chip-amber" style="height:20px;font-size:10px;padding:0 8px;">Should Statements</span>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<!-- Floating CTA -->
|
||||
<div class="turn-btn-wrapper">
|
||||
<a href="11-turn-input-active.html" class="btn btn-primary" style="text-decoration:none;">
|
||||
<!-- Fragment MD from fragment-icons.svg, amethyst, inline -->
|
||||
<svg width="18" height="18" viewBox="-12 -12 24 24" fill="none">
|
||||
<defs>
|
||||
<linearGradient id="s10-btnFrag" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#C4B5FD"/>
|
||||
<stop offset="100%" stop-color="#7C3AED"/>
|
||||
</linearGradient>
|
||||
<filter id="s10-btnGlow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="1.5" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<g filter="url(#s10-btnGlow)">
|
||||
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="url(#s10-btnFrag)" opacity="0.9"/>
|
||||
<path d="M 0,-12 L 12,0 L 0,0 Z" fill="#fff" opacity="0.18"/>
|
||||
<path d="M 0,-12 L -12,0 L 0,0 Z" fill="#fff" opacity="0.1"/>
|
||||
<line x1="0" y1="-12" x2="0" y2="12" stroke="#fff" stroke-width="0.5" opacity="0.2"/>
|
||||
<circle cx="-3" cy="-3" r="1.5" fill="#fff" opacity="0.3"/>
|
||||
</g>
|
||||
</svg>
|
||||
Turn the kaleidoscope
|
||||
</a>
|
||||
</div>
|
||||
</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>
|
||||
145
initial mockups/screens/turn/11-turn-input-active.html
Normal file
145
initial mockups/screens/turn/11-turn-input-active.html
Normal file
@@ -0,0 +1,145 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — New Turn</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.textarea-wrapper {
|
||||
position: relative;
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
.textarea-field.focused {
|
||||
border-color: var(--amethyst);
|
||||
box-shadow: 0 0 0 3px rgba(139,92,246,0.15), var(--glow-amethyst);
|
||||
min-height: 160px;
|
||||
font-size: 17px;
|
||||
}
|
||||
.char-count {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
right: 12px;
|
||||
font-size: 11px;
|
||||
color: var(--faint-light);
|
||||
}
|
||||
.input-hint {
|
||||
font-size: 12px;
|
||||
color: var(--faint-light);
|
||||
margin-bottom: var(--space-4);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.keyboard-sim {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 260px;
|
||||
background: linear-gradient(to top, var(--deep-glass) 0%, transparent 100%);
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
}
|
||||
.submit-area {
|
||||
margin-top: var(--space-4);
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
.aura-input {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 260px;
|
||||
height: 260px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(139,92,246,0.14) 0%, rgba(59,130,246,0.04) 50%, transparent 70%);
|
||||
filter: blur(50px);
|
||||
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">8:15</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">New Turn</span>
|
||||
<span class="nav-action"></span>
|
||||
</div>
|
||||
|
||||
<div class="screen-content" style="padding-bottom: 20px; position: relative;">
|
||||
<div class="aura-input"></div>
|
||||
|
||||
<div style="margin-top: var(--space-4); position: relative; z-index: 1;">
|
||||
<div class="input-hint">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
|
||||
<path d="M7 1L11 7L7 13L3 7Z" fill="var(--amethyst)" opacity="0.7"/>
|
||||
</svg>
|
||||
Write freely — the Turn will find new angles
|
||||
</div>
|
||||
|
||||
<div class="textarea-wrapper">
|
||||
<textarea class="textarea-field focused" id="mainTextarea">I completely bombed my presentation today and everyone saw</textarea>
|
||||
<span class="char-count" id="charCount">58 / 500</span>
|
||||
</div>
|
||||
|
||||
<div class="submit-area">
|
||||
<a href="12-turn-animation.html" class="btn btn-primary" style="text-decoration:none;">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||
<path d="M9 1.5L15 9L9 16.5L3 9Z" fill="white" opacity="0.85"/>
|
||||
<path d="M9 1.5L15 9L9 9Z" fill="white" opacity="0.15"/>
|
||||
</svg>
|
||||
Turn the kaleidoscope
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: var(--space-4); padding: var(--space-3) var(--space-4); background: var(--deep-glass); border-radius: var(--radius-md); border: 1px solid var(--twilight);">
|
||||
<div class="body-sm text-dim">Kalei will analyze your thought through 3 different cognitive lenses — Perspective Shift, Evidence Check, and Action Step — to reveal new angles on what you're feeling.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Keyboard simulation overlay -->
|
||||
<div class="keyboard-sim"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const textarea = document.getElementById('mainTextarea');
|
||||
const charCount = document.getElementById('charCount');
|
||||
textarea.addEventListener('input', () => {
|
||||
charCount.textContent = textarea.value.length + ' / 500';
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
353
initial mockups/screens/turn/12-turn-animation.html
Normal file
353
initial mockups/screens/turn/12-turn-animation.html
Normal file
@@ -0,0 +1,353 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Turning...</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.anim-screen {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Prismatic shimmer background */
|
||||
.prismatic-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(135deg,
|
||||
rgba(139,92,246,0.08),
|
||||
rgba(59,130,246,0.06),
|
||||
rgba(16,185,129,0.05),
|
||||
rgba(245,158,11,0.06),
|
||||
rgba(236,72,153,0.05)
|
||||
);
|
||||
background-size: 400% 400%;
|
||||
animation: prismaticShift 4s ease infinite;
|
||||
}
|
||||
|
||||
/* Collapsing thought text */
|
||||
.thought-text {
|
||||
position: absolute;
|
||||
top: 160px;
|
||||
left: 32px;
|
||||
right: 32px;
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-4);
|
||||
font-size: 16px;
|
||||
color: var(--soft-light);
|
||||
text-align: center;
|
||||
animation: turnCollapse 0.8s ease-in 1s forwards;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@keyframes turnCollapse {
|
||||
0% { opacity: 1; transform: scale(1); }
|
||||
100% { opacity: 0; transform: scale(0.3) translateY(-60px); }
|
||||
}
|
||||
|
||||
/* Central fragment that multiplies */
|
||||
.center-fragment {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
animation: centralAppear 0.5s ease-out 1.8s both;
|
||||
}
|
||||
|
||||
@keyframes centralAppear {
|
||||
0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
|
||||
60% { opacity: 1; transform: translate(-50%, -50%) scale(1.3); }
|
||||
100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
|
||||
}
|
||||
|
||||
/* Three emerging fragments */
|
||||
.fragment-1, .fragment-2, .fragment-3 {
|
||||
position: absolute;
|
||||
animation: fragmentEmerge 0.8s ease-out both;
|
||||
opacity: 0;
|
||||
}
|
||||
.fragment-1 {
|
||||
top: 30%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
animation-delay: 2.4s;
|
||||
--drift-x: 0px;
|
||||
--drift-y: -40px;
|
||||
}
|
||||
.fragment-2 {
|
||||
top: 55%;
|
||||
left: 25%;
|
||||
animation-delay: 2.6s;
|
||||
--drift-x: -30px;
|
||||
--drift-y: 20px;
|
||||
}
|
||||
.fragment-3 {
|
||||
top: 55%;
|
||||
left: 65%;
|
||||
animation-delay: 2.8s;
|
||||
--drift-x: 30px;
|
||||
--drift-y: 20px;
|
||||
}
|
||||
|
||||
@keyframes fragmentEmerge {
|
||||
0% { opacity: 0; transform: scale(0.2) translate(0, 0); }
|
||||
50% { opacity: 1; transform: scale(1.15) translate(calc(var(--drift-x) * 0.5), calc(var(--drift-y) * 0.5)); }
|
||||
100% { opacity: 1; transform: scale(1) translate(var(--drift-x), var(--drift-y)); }
|
||||
}
|
||||
|
||||
/* Crystallize labels */
|
||||
.crystal-label {
|
||||
position: absolute;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
opacity: 0;
|
||||
animation: settleIn 0.5s ease-out both;
|
||||
text-align: center;
|
||||
width: 100px;
|
||||
}
|
||||
.crystal-label-1 {
|
||||
top: 24%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
color: var(--amethyst-light);
|
||||
animation-delay: 3.2s;
|
||||
}
|
||||
.crystal-label-2 {
|
||||
top: 68%;
|
||||
left: 8%;
|
||||
color: var(--sapphire-light);
|
||||
animation-delay: 3.4s;
|
||||
}
|
||||
.crystal-label-3 {
|
||||
top: 68%;
|
||||
left: 56%;
|
||||
color: var(--emerald-light);
|
||||
animation-delay: 3.6s;
|
||||
}
|
||||
|
||||
@keyframes settleIn {
|
||||
from { opacity: 0; transform: translateY(8px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes settleIn1 {
|
||||
from { opacity: 0; transform: translateX(-50%) translateY(8px); }
|
||||
to { opacity: 1; transform: translateX(-50%) translateY(0); }
|
||||
}
|
||||
.crystal-label-1 { animation-name: settleIn1; }
|
||||
|
||||
/* Orbiting motes */
|
||||
.mote {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
animation: orbit 4s linear infinite;
|
||||
}
|
||||
|
||||
/* Status label */
|
||||
.status-label {
|
||||
position: absolute;
|
||||
bottom: 120px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 13px;
|
||||
color: var(--dim-light);
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
animation: fadeIn 0.5s ease-out 2s both;
|
||||
}
|
||||
|
||||
/* See results button */
|
||||
.see-results-btn {
|
||||
position: absolute;
|
||||
bottom: 60px;
|
||||
left: 32px;
|
||||
right: 32px;
|
||||
animation: fadeIn 0.5s ease-out 4s both;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Big rotating kaleido */
|
||||
.big-kaleido {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
opacity: 0;
|
||||
animation:
|
||||
kaleido-appear 1s ease-out 2s forwards,
|
||||
rotate 20s linear 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes kaleido-appear {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 0.5; }
|
||||
}
|
||||
|
||||
@keyframes prismaticShift {
|
||||
0% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
100% { background-position: 0% 50%; }
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
from { transform: translate(-50%, -50%) rotate(0deg); }
|
||||
to { transform: translate(-50%, -50%) rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes orbit {
|
||||
from { transform: translate(-50%, -50%) rotate(0deg) translateX(80px); }
|
||||
to { transform: translate(-50%, -50%) rotate(360deg) translateX(80px); }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="device-frame">
|
||||
|
||||
<div class="status-bar" style="position:relative;z-index:10;">
|
||||
<span class="time">8:15</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="anim-screen">
|
||||
<div class="prismatic-bg"></div>
|
||||
|
||||
<!-- Collapsing thought -->
|
||||
<div class="thought-text">I completely bombed my presentation today and everyone saw</div>
|
||||
|
||||
<!-- Background kaleidoscope -->
|
||||
<div class="big-kaleido">
|
||||
<img src="../../assets/kalei-logo.svg" width="200" height="200" alt="Kalei" style="opacity: 0.6;">
|
||||
</div>
|
||||
|
||||
<!-- Central fragment -->
|
||||
<div class="center-fragment">
|
||||
<svg width="48" height="48" viewBox="0 0 48 48">
|
||||
<defs>
|
||||
<linearGradient id="cfGrad" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#C4B5FD"/>
|
||||
<stop offset="100%" stop-color="#7C3AED"/>
|
||||
</linearGradient>
|
||||
<filter id="cfGlow">
|
||||
<feGaussianBlur stdDeviation="3" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<g filter="url(#cfGlow)">
|
||||
<path d="M24 4L40 24L24 44L8 24Z" fill="url(#cfGrad)" opacity="0.9"/>
|
||||
<path d="M24 4L40 24L24 24Z" fill="#fff" opacity="0.15"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Fragment 1 — Amethyst -->
|
||||
<div class="fragment-1">
|
||||
<svg width="36" height="36" viewBox="0 0 36 36">
|
||||
<defs>
|
||||
<linearGradient id="f1g" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#C4B5FD"/>
|
||||
<stop offset="100%" stop-color="#7C3AED"/>
|
||||
</linearGradient>
|
||||
<filter id="f1glow">
|
||||
<feGaussianBlur stdDeviation="2" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<g filter="url(#f1glow)">
|
||||
<path d="M18 3L30 18L18 33L6 18Z" fill="url(#f1g)" opacity="0.9"/>
|
||||
<path d="M18 3L30 18L18 18Z" fill="#fff" opacity="0.15"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Fragment 2 — Sapphire -->
|
||||
<div class="fragment-2">
|
||||
<svg width="36" height="36" viewBox="0 0 36 36">
|
||||
<defs>
|
||||
<linearGradient id="f2g" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#93C5FD"/>
|
||||
<stop offset="100%" stop-color="#2563EB"/>
|
||||
</linearGradient>
|
||||
<filter id="f2glow">
|
||||
<feGaussianBlur stdDeviation="2" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<g filter="url(#f2glow)">
|
||||
<path d="M18 3L30 18L18 33L6 18Z" fill="url(#f2g)" opacity="0.9"/>
|
||||
<path d="M18 3L30 18L18 18Z" fill="#fff" opacity="0.15"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Fragment 3 — Emerald -->
|
||||
<div class="fragment-3">
|
||||
<svg width="36" height="36" viewBox="0 0 36 36">
|
||||
<defs>
|
||||
<linearGradient id="f3g" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#6EE7B7"/>
|
||||
<stop offset="100%" stop-color="#059669"/>
|
||||
</linearGradient>
|
||||
<filter id="f3glow">
|
||||
<feGaussianBlur stdDeviation="2" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<g filter="url(#f3glow)">
|
||||
<path d="M18 3L30 18L18 33L6 18Z" fill="url(#f3g)" opacity="0.9"/>
|
||||
<path d="M18 3L30 18L18 18Z" fill="#fff" opacity="0.15"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Crystal labels -->
|
||||
<div class="crystal-label crystal-label-1">Perspective Shift</div>
|
||||
<div class="crystal-label crystal-label-2">Evidence Check</div>
|
||||
<div class="crystal-label crystal-label-3">Action Step</div>
|
||||
|
||||
<!-- Status -->
|
||||
<div class="status-label">Turning the kaleidoscope...</div>
|
||||
|
||||
<!-- See results -->
|
||||
<div class="see-results-btn">
|
||||
<a href="13-turn-results.html" class="btn btn-primary" style="text-decoration:none;">
|
||||
See your results
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Auto-redirect after animation completes
|
||||
setTimeout(() => {
|
||||
window.location.href = '13-turn-results.html';
|
||||
}, 5000);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
327
initial mockups/screens/turn/13-turn-results.html
Normal file
327
initial mockups/screens/turn/13-turn-results.html
Normal file
@@ -0,0 +1,327 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Your Turn</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.screen-aura {
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(139,92,246,0.14) 0%, transparent 70%);
|
||||
filter: blur(60px);
|
||||
animation: breathing 6s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
.original-thought-card {
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
margin-bottom: var(--space-4);
|
||||
opacity: 0.8;
|
||||
}
|
||||
.original-thought-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--faint-light);
|
||||
margin-bottom: var(--space-1);
|
||||
}
|
||||
.original-thought-text {
|
||||
font-size: 15px;
|
||||
color: var(--dim-light);
|
||||
line-height: 1.5;
|
||||
}
|
||||
.kaleido-divider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: var(--space-3) 0;
|
||||
}
|
||||
.distortions-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2);
|
||||
margin-bottom: var(--space-4);
|
||||
margin-top: var(--space-2);
|
||||
}
|
||||
.distortion-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--dim-light);
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
.actions-row {
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
margin-top: var(--space-4);
|
||||
margin-bottom: var(--space-6);
|
||||
}
|
||||
.action-btn {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--space-1);
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-3) var(--space-2);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: background 0.2s ease-out, border-color 0.2s ease-out, box-shadow 0.2s ease-out;
|
||||
}
|
||||
.action-btn:hover { background: var(--twilight); border-color: rgba(139,92,246,0.35); box-shadow: 0 0 12px rgba(139,92,246,0.1); }
|
||||
.action-btn-label {
|
||||
font-size: 11px;
|
||||
color: var(--dim-light);
|
||||
font-weight: 500;
|
||||
}
|
||||
/* Distortion chip with extracted icon */
|
||||
.chip-distortion {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
height: 28px;
|
||||
padding: 0 10px;
|
||||
border-radius: var(--radius-full);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
background: rgba(245,158,11,0.12);
|
||||
color: var(--amber-light);
|
||||
border: 1px solid rgba(245,158,11,0.2);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="device-frame">
|
||||
|
||||
<div class="status-bar">
|
||||
<span class="time">8:15</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">Your Turn</span>
|
||||
<span class="nav-action"></span>
|
||||
</div>
|
||||
|
||||
<div class="screen-content" style="padding-bottom: var(--space-6); position: relative;">
|
||||
<div class="screen-aura"></div>
|
||||
|
||||
<!-- Original thought -->
|
||||
<div class="original-thought-card mt-3">
|
||||
<div class="original-thought-label">Your thought</div>
|
||||
<div class="original-thought-text">I completely bombed my presentation today and everyone saw</div>
|
||||
</div>
|
||||
|
||||
<!-- Detected distortions — using exact icon paths from icons-distortions.svg -->
|
||||
<div class="distortion-label">Patterns detected</div>
|
||||
<div class="distortions-row">
|
||||
|
||||
<!-- Catastrophizing icon: cascading shard breaking into pieces (from icons-distortions.svg line 25-40) -->
|
||||
<span class="chip-distortion">
|
||||
<svg width="16" height="16" viewBox="-12 -12 24 24" fill="none">
|
||||
<defs>
|
||||
<filter id="s13-gCatastroph" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="1.8" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<linearGradient id="s13-amberGr1" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FDE68A"/>
|
||||
<stop offset="100%" stop-color="#D97706"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g filter="url(#s13-gCatastroph)">
|
||||
<path d="M 0,-10 L 5,0 L 0,10 L -5,0 Z" fill="url(#s13-amberGr1)" opacity="0.9"/>
|
||||
<path d="M 0,-10 L 5,0 L -5,0 Z" fill="#fff" opacity="0.15"/>
|
||||
<path d="M -8,6 L -5,10 L -9,12 L -11,8 Z" fill="#F59E0B" opacity="0.5"/>
|
||||
<path d="M 7,8 L 10,12 L 8,14 L 5,11 Z" fill="#F59E0B" opacity="0.4"/>
|
||||
<line x1="0" y1="11" x2="0" y2="16" stroke="#FCD34D" stroke-width="0.5" opacity="0.4"/>
|
||||
</g>
|
||||
</svg>
|
||||
Catastrophizing
|
||||
</span>
|
||||
|
||||
<!-- Overgeneralization icon: one dot replicating into many (from icons-distortions.svg line 167-182) -->
|
||||
<span class="chip-distortion">
|
||||
<svg width="16" height="16" viewBox="-12 -12 24 24" fill="none">
|
||||
<defs>
|
||||
<filter id="s13-gOvergen" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="1.8" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<linearGradient id="s13-amberGr2" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FDE68A"/>
|
||||
<stop offset="100%" stop-color="#D97706"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g filter="url(#s13-gOvergen)">
|
||||
<path d="M -10,0 L -7,-3 L -4,0 L -7,3 Z" fill="url(#s13-amberGr2)" opacity="0.9"/>
|
||||
<path d="M -10,0 L -7,-3 L -4,0 Z" fill="#fff" opacity="0.15"/>
|
||||
<line x1="-3" y1="0" x2="0" y2="0" stroke="#FCD34D" stroke-width="0.5" opacity="0.4"/>
|
||||
<path d="M 2,-6 L 4,-8 L 6,-6 L 4,-4 Z" fill="#F59E0B" opacity="0.7"/>
|
||||
<path d="M 4,0 L 6,-2 L 8,0 L 6,2 Z" fill="#F59E0B" opacity="0.6"/>
|
||||
<path d="M 2,6 L 4,4 L 6,6 L 4,8 Z" fill="#F59E0B" opacity="0.5"/>
|
||||
</g>
|
||||
</svg>
|
||||
Overgeneralization
|
||||
</span>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Kaleidoscope divider — Turn Pattern from patterns-kaleidoscope.svg (6 amethyst blades) -->
|
||||
<div class="kaleido-divider">
|
||||
<img src="../../assets/kalei-logo.svg" width="100" height="100" alt="Kalei" style="filter: drop-shadow(0 0 12px rgba(139,92,246,0.3));">
|
||||
</div>
|
||||
|
||||
<!-- Reframe blocks -->
|
||||
<div class="reframe-block amethyst" style="animation: fadeIn 0.4s ease-out 0.1s both; opacity:0;">
|
||||
<div class="reframe-label">Perspective Shift</div>
|
||||
<div class="reframe-text">One rough presentation doesn't define your skills or how others see you. The word "bombed" is your brain's catastrophe filter — not an objective review. People in that room were focused on their own reactions, not cataloguing your performance.</div>
|
||||
</div>
|
||||
|
||||
<div class="reframe-block sapphire" style="animation: fadeIn 0.4s ease-out 0.2s both; opacity:0;">
|
||||
<div class="reframe-label">Evidence Check</div>
|
||||
<div class="reframe-text">You've presented before and it has gone well. Those moments are just as real as this one. What specific evidence do you have that "everyone" was watching critically — or is that a feeling your mind dressed up as a fact?</div>
|
||||
</div>
|
||||
|
||||
<div class="reframe-block emerald" style="animation: fadeIn 0.4s ease-out 0.3s both; opacity:0;">
|
||||
<div class="reframe-label">Action Step</div>
|
||||
<div class="reframe-text">Tonight, write down one thing that did go okay in that presentation — one slide, one answer, one moment of clarity. Then write one specific thing to prepare differently next time. That's how you close the loop rather than replay it.</div>
|
||||
</div>
|
||||
|
||||
<!-- Guide: If-Then Micro-Action Card — reactive behavior per Section 13B -->
|
||||
<div style="background: var(--kalei-navy); border: 1px solid rgba(16,185,129,0.35); border-radius: var(--radius-lg); padding: var(--space-4); margin-bottom: var(--space-3); box-shadow: 0 0 16px rgba(16,185,129,0.08); animation: fadeIn 0.4s ease-out 0.4s both; opacity: 0;">
|
||||
<div style="display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3);">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16">
|
||||
<defs>
|
||||
<linearGradient id="s13-ifThenFrag" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#6EE7B7"/>
|
||||
<stop offset="100%" stop-color="#047857"/>
|
||||
</linearGradient>
|
||||
<filter id="s13-ifThenGlow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="1.5" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<g transform="translate(8,8)" filter="url(#s13-ifThenGlow)">
|
||||
<path d="M 0,-6 L 6,0 L 0,6 L -6,0 Z" fill="url(#s13-ifThenFrag)" opacity="0.9"/>
|
||||
<path d="M 0,-6 L 6,0 L 0,0 Z" fill="#fff" opacity="0.15"/>
|
||||
</g>
|
||||
</svg>
|
||||
<span style="font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--emerald-light); letter-spacing: 0.04em; text-transform: uppercase;">◇ Make it real</span>
|
||||
</div>
|
||||
<p style="font-size: 15px; color: var(--soft-light); line-height: 1.55; margin-bottom: var(--space-3);">
|
||||
<strong style="color: var(--pure-light);">If</strong> I start replaying the presentation and feel the shame spiral building,
|
||||
<strong style="color: var(--pure-light);">then</strong> I will open my notes and write down one thing that actually went okay — before I let the story grow.
|
||||
</p>
|
||||
<div style="display: flex; gap: var(--space-3);">
|
||||
<button style="flex: 1; height: 36px; background: var(--emerald); border: none; border-radius: var(--radius-full); font-family: var(--font-primary); font-size: 13px; font-weight: 600; color: var(--pure-light); cursor: pointer; transition: background 0.2s ease-out; box-shadow: 0 0 12px rgba(16,185,129,0.25);" onmouseover="this.style.background='var(--emerald-light)'" onmouseout="this.style.background='var(--emerald)'">Save to Lens</button>
|
||||
<button style="flex: 1; height: 36px; background: transparent; border: 1px solid var(--twilight); border-radius: var(--radius-full); font-family: var(--font-primary); font-size: 13px; font-weight: 500; color: var(--dim-light); cursor: pointer; transition: border-color 0.2s ease-out;" onmouseover="this.style.borderColor='var(--faint-light)'" onmouseout="this.style.borderColor='var(--twilight)'">Skip</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Goal Connection — reactive per Section 13B Turn behavior -->
|
||||
<div style="text-align: center; margin-bottom: var(--space-4); animation: fadeIn 0.4s ease-out 0.5s both; opacity: 0;">
|
||||
<span style="font-size: 13px; color: var(--dim-light);">This connects to your goal: </span>
|
||||
<a href="../lens/27-lens-goal-detail.html" style="font-size: 13px; color: var(--emerald-light); text-decoration: none; font-weight: 500; transition: color 0.2s ease-out;" onmouseover="this.style.color='var(--emerald)'" onmouseout="this.style.color='var(--emerald-light)'">Present with confidence</a>
|
||||
</div>
|
||||
|
||||
<!-- Actions row -->
|
||||
<div class="actions-row">
|
||||
<a href="#" class="action-btn" onclick="showToast(); return false;">
|
||||
<!-- Bookmark icon -->
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M14 2.5C14.8 2.5 15.5 3.2 15.5 4V16.5L10 14L4.5 16.5V4C4.5 3.2 5.2 2.5 6 2.5H14Z" stroke="var(--amethyst-light)" fill="none" stroke-width="1.3" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<span class="action-btn-label">Save</span>
|
||||
</a>
|
||||
<a href="../modals/61-pattern-share.html" class="action-btn">
|
||||
<!-- Share icon -->
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<circle cx="16" cy="4" r="2" stroke="var(--amethyst-light)" fill="none" stroke-width="1.3"/>
|
||||
<circle cx="4" cy="10" r="2" stroke="var(--amethyst-light)" fill="none" stroke-width="1.3"/>
|
||||
<circle cx="16" cy="16" r="2" stroke="var(--amethyst-light)" fill="none" stroke-width="1.3"/>
|
||||
<path d="M6 9L14 5M6 11L14 15" stroke="var(--amethyst-light)" stroke-width="1.3"/>
|
||||
</svg>
|
||||
<span class="action-btn-label">Share</span>
|
||||
</a>
|
||||
<a href="11-turn-input-active.html" class="action-btn">
|
||||
<!-- Refresh icon -->
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M16 4C14.5 2.5 12.4 1.5 10 1.5C5.3 1.5 1.5 5.3 1.5 10S5.3 18.5 10 18.5C14 18.5 17.4 15.9 18.3 12.3" stroke="var(--amethyst-light)" fill="none" stroke-width="1.3" stroke-linecap="round"/>
|
||||
<path d="M13 1.5L16.5 4L13 6.5" stroke="var(--amethyst-light)" fill="none" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<span class="action-btn-label">Try Again</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Toast notification -->
|
||||
<div id="toast" style="
|
||||
position: absolute; top: 75px; left: 50%; transform: translateX(-50%);
|
||||
background: var(--deep-glass); border: 1px solid var(--emerald);
|
||||
border-radius: var(--radius-full); padding: 8px 20px;
|
||||
display: none; align-items: center; gap: var(--space-2);
|
||||
box-shadow: var(--glow-emerald);
|
||||
white-space: nowrap; z-index: 20;
|
||||
">
|
||||
<!-- Fragment diamond SM from fragment-icons.svg -->
|
||||
<svg width="14" height="14" viewBox="-8 -8 16 16" fill="none">
|
||||
<defs>
|
||||
<linearGradient id="s13-grEm" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#6EE7B7"/>
|
||||
<stop offset="100%" stop-color="#059669"/>
|
||||
</linearGradient>
|
||||
<filter id="s13-glowSmToast" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="1.5" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<g filter="url(#s13-glowSmToast)">
|
||||
<path d="M 0,-8 L 8,0 L 0,8 L -8,0 Z" fill="url(#s13-grEm)" opacity="0.9"/>
|
||||
<path d="M 0,-8 L 8,0 L 0,0 Z" fill="#fff" opacity="0.15"/>
|
||||
<path d="M 0,-8 L -8,0 L 0,0 Z" fill="#fff" opacity="0.08"/>
|
||||
<line x1="0" y1="-8" x2="0" y2="8" stroke="#fff" stroke-width="0.4" opacity="0.2"/>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="body-sm text-soft" style="font-weight:500;">Turn saved</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function showToast() {
|
||||
const toast = document.getElementById('toast');
|
||||
toast.style.display = 'flex';
|
||||
toast.style.animation = 'fadeIn 0.3s ease';
|
||||
setTimeout(() => {
|
||||
toast.style.opacity = '0';
|
||||
toast.style.transition = 'opacity 0.3s';
|
||||
setTimeout(() => { toast.style.display = 'none'; toast.style.opacity = '1'; }, 300);
|
||||
}, 2000);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
336
initial mockups/screens/turn/14-turn-history.html
Normal file
336
initial mockups/screens/turn/14-turn-history.html
Normal file
@@ -0,0 +1,336 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user