335 lines
12 KiB
HTML
335 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=390, initial-scale=1">
|
|
<title>Kalei — Upgrade to Prism</title>
|
|
<link rel="stylesheet" href="../../assets/design-system.css">
|
|
<style>
|
|
.bg-screen {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: var(--void);
|
|
}
|
|
/* Blurred background context (Turn Home) */
|
|
.bg-content {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 54px 16px 16px;
|
|
filter: blur(3px);
|
|
opacity: 0.4;
|
|
}
|
|
.bg-greeting {
|
|
font-size: 22px;
|
|
font-weight: 600;
|
|
color: var(--pure-light);
|
|
margin-top: 16px;
|
|
}
|
|
.bg-card {
|
|
height: 80px;
|
|
background: var(--deep-glass);
|
|
border: 1px solid var(--twilight);
|
|
border-radius: var(--radius-xl);
|
|
margin-top: 20px;
|
|
}
|
|
.modal-overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: rgba(5,5,8,0.75);
|
|
backdrop-filter: blur(10px);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 50;
|
|
}
|
|
.modal-card {
|
|
width: 340px;
|
|
background: var(--kalei-navy);
|
|
border-radius: var(--radius-2xl);
|
|
padding: var(--space-6);
|
|
position: relative;
|
|
overflow: hidden;
|
|
animation: modalSlideIn 0.35s ease-out forwards;
|
|
}
|
|
@keyframes modalSlideIn {
|
|
from { opacity: 0; transform: translateY(12px) scale(0.97); }
|
|
to { opacity: 1; transform: translateY(0) scale(1); }
|
|
}
|
|
/* Prismatic border */
|
|
.modal-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: var(--radius-2xl);
|
|
padding: 1.5px;
|
|
background: linear-gradient(135deg, #8B5CF6, #3B82F6, #10B981, #F59E0B, #EC4899);
|
|
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
-webkit-mask-composite: xor;
|
|
mask-composite: exclude;
|
|
pointer-events: none;
|
|
}
|
|
.modal-header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
.modal-logo {
|
|
margin-bottom: 14px;
|
|
}
|
|
.modal-title {
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
font-family: var(--font-display);
|
|
text-align: center;
|
|
background: linear-gradient(135deg, #C4B5FD, #93C5FD, #6EE7B7);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
.modal-subtitle {
|
|
font-size: 14px;
|
|
color: var(--dim-light);
|
|
text-align: center;
|
|
margin-top: 6px;
|
|
}
|
|
.benefits-list {
|
|
margin-bottom: 20px;
|
|
}
|
|
.benefit-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
padding: 8px 0;
|
|
}
|
|
.benefit-icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
margin-top: 1px;
|
|
}
|
|
.benefit-text {
|
|
flex: 1;
|
|
}
|
|
.benefit-title {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--pure-light);
|
|
}
|
|
.benefit-desc {
|
|
font-size: 12px;
|
|
color: var(--dim-light);
|
|
margin-top: 1px;
|
|
}
|
|
.price-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
margin-bottom: 18px;
|
|
padding: 12px;
|
|
background: rgba(139,92,246,0.06);
|
|
border-radius: var(--radius-lg);
|
|
border: 1px solid rgba(139,92,246,0.15);
|
|
}
|
|
.price-val {
|
|
font-size: 28px;
|
|
font-weight: 700;
|
|
font-family: var(--font-display);
|
|
background: linear-gradient(135deg, #C4B5FD, #93C5FD, #6EE7B7, #FDE68A, #F9A8D4);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
.price-period {
|
|
font-size: 13px;
|
|
color: var(--dim-light);
|
|
}
|
|
.btn-prismatic {
|
|
width: 100%;
|
|
height: 52px;
|
|
border: none;
|
|
border-radius: var(--radius-lg);
|
|
background: linear-gradient(135deg, #8B5CF6, #3B82F6, #10B981);
|
|
color: white;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
font-family: var(--font-primary);
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-decoration: none;
|
|
margin-bottom: 10px;
|
|
box-shadow: 0 0 24px rgba(139,92,246,0.3);
|
|
transition: opacity 0.2s;
|
|
}
|
|
.btn-prismatic:hover { opacity: 0.9; }
|
|
.maybe-later {
|
|
width: 100%;
|
|
height: 40px;
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--dim-light);
|
|
font-size: 14px;
|
|
font-family: var(--font-primary);
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-decoration: none;
|
|
transition: color 0.2s;
|
|
}
|
|
.maybe-later:hover { color: var(--soft-light); }
|
|
.trial-note {
|
|
font-size: 11px;
|
|
color: var(--faint-light);
|
|
text-align: center;
|
|
margin-top: 6px;
|
|
}
|
|
</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>
|
|
|
|
<!-- Blurred background -->
|
|
<div class="bg-content" aria-hidden="true">
|
|
<div class="bg-greeting">Good morning, Alex</div>
|
|
<div class="bg-card" style="margin-top:16px;"></div>
|
|
<div class="bg-card" style="margin-top:10px; height:60px;"></div>
|
|
</div>
|
|
|
|
<!-- Modal overlay -->
|
|
<div class="modal-overlay">
|
|
<div class="modal-card">
|
|
<!-- Kaleidoscope logo -->
|
|
<div class="modal-header">
|
|
<div class="modal-logo">
|
|
<svg width="56" height="56" viewBox="0 0 56 56" style="mix-blend-mode: normal;">
|
|
<defs>
|
|
<linearGradient id="upBlade1" 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.4"/>
|
|
</linearGradient>
|
|
<linearGradient id="upBlade2" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0%" stop-color="#93C5FD" stop-opacity="0.8"/>
|
|
<stop offset="100%" stop-color="#2563EB" stop-opacity="0.3"/>
|
|
</linearGradient>
|
|
<linearGradient id="upBlade3" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0%" stop-color="#6EE7B7" stop-opacity="0.8"/>
|
|
<stop offset="100%" stop-color="#059669" stop-opacity="0.3"/>
|
|
</linearGradient>
|
|
</defs>
|
|
<g transform="translate(28,28)" style="animation: breathing 6s ease-in-out infinite;">
|
|
<g><path d="M0,0 L4,-20 L0,-24 L-4,-20Z" fill="url(#upBlade1)"/></g>
|
|
<g transform="rotate(60)"><path d="M0,0 L4,-20 L0,-24 L-4,-20Z" fill="url(#upBlade2)"/></g>
|
|
<g transform="rotate(120)"><path d="M0,0 L4,-20 L0,-24 L-4,-20Z" fill="url(#upBlade3)"/></g>
|
|
<g transform="rotate(180)"><path d="M0,0 L4,-20 L0,-24 L-4,-20Z" fill="url(#upBlade1)"/></g>
|
|
<g transform="rotate(240)"><path d="M0,0 L4,-20 L0,-24 L-4,-20Z" fill="url(#upBlade2)"/></g>
|
|
<g transform="rotate(300)"><path d="M0,0 L4,-20 L0,-24 L-4,-20Z" fill="url(#upBlade3)"/></g>
|
|
<circle r="5" fill="white" opacity="0.15"/>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div class="modal-title">Unlock Kalei Plus</div>
|
|
<div class="modal-subtitle">More turns. More insight. Same intention.</div>
|
|
</div>
|
|
|
|
<!-- Benefits — grounded, not pushy -->
|
|
<div class="benefits-list">
|
|
<div class="benefit-item">
|
|
<div class="benefit-icon" style="background: rgba(139,92,246,0.15);">
|
|
<svg width="14" height="14" viewBox="0 0 14 14">
|
|
<path d="M7 1L13 7L7 13L1 7Z" fill="#C4B5FD" opacity="0.9"/>
|
|
</svg>
|
|
</div>
|
|
<div class="benefit-text">
|
|
<div class="benefit-title">10 Turns per day</div>
|
|
<div class="benefit-desc">From 3 free → 10 per day. Enough for real-time reframing</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="benefit-item">
|
|
<div class="benefit-icon" style="background: rgba(59,130,246,0.12);">
|
|
<svg width="14" height="14" viewBox="0 0 14 14">
|
|
<path d="M7 1L13 7L7 13L1 7Z" fill="#93C5FD" opacity="0.9"/>
|
|
</svg>
|
|
</div>
|
|
<div class="benefit-text">
|
|
<div class="benefit-title">Full Spectrum Access</div>
|
|
<div class="benefit-desc">The River, Your Glass, Rhythm, Growth — all views unlocked</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="benefit-item">
|
|
<div class="benefit-icon" style="background: rgba(16,185,129,0.12);">
|
|
<svg width="14" height="14" viewBox="0 0 14 14">
|
|
<path d="M7 1L13 7L7 13L1 7Z" fill="#6EE7B7" opacity="0.9"/>
|
|
</svg>
|
|
</div>
|
|
<div class="benefit-text">
|
|
<div class="benefit-title">Weekly & Monthly Reports</div>
|
|
<div class="benefit-desc">AI-written summaries with specific pattern trends and dates</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tier price row -->
|
|
<div class="price-row">
|
|
<div class="price-val">$9.99</div>
|
|
<div class="price-period">/ month</div>
|
|
</div>
|
|
|
|
<!-- Tier note -->
|
|
<div style="display:flex; justify-content:center; gap:18px; margin-bottom:14px;">
|
|
<div style="text-align:center;">
|
|
<div style="font-size:10px; color:var(--faint-light); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:3px;">Free</div>
|
|
<div style="font-size:12px; color:var(--dim-light);">3 turns/day</div>
|
|
</div>
|
|
<div style="text-align:center; position:relative;">
|
|
<div style="font-size:10px; color:var(--amethyst-light); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:3px; font-weight:600;">Plus</div>
|
|
<div style="font-size:12px; color:var(--soft-light); font-weight:600;">10 turns/day</div>
|
|
</div>
|
|
<div style="text-align:center;">
|
|
<div style="font-size:10px; color:var(--faint-light); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:3px;">Pro</div>
|
|
<div style="font-size:12px; color:var(--dim-light);">Unlimited</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CTA -->
|
|
<a class="btn-prismatic" href="../you/38-you-subscription.html">Try Plus free for 7 days</a>
|
|
<div class="trial-note">7 days free, then $9.99/month. Cancel anytime. Pro available at $19.99/month.</div>
|
|
<a class="maybe-later" href="../turn/10-turn-home.html">Maybe later</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|