Matt
38021c4633
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>
151 lines
6.3 KiB
HTML
151 lines
6.3 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=390, initial-scale=1">
|
||
<title>Kalei — Notifications</title>
|
||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||
<style>
|
||
.screen-content.centered {
|
||
padding: var(--space-8) var(--space-6);
|
||
}
|
||
|
||
.notif-icon-wrap {
|
||
position: relative;
|
||
width: 100px;
|
||
height: 100px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: var(--space-10);
|
||
}
|
||
|
||
.notif-aura {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 220px;
|
||
height: 220px;
|
||
border-radius: 50%;
|
||
background: radial-gradient(circle, rgba(139,92,246,0.18) 0%, rgba(59,130,246,0.06) 50%, transparent 70%);
|
||
filter: blur(40px);
|
||
animation: breathing 6s ease-in-out infinite;
|
||
pointer-events: none;
|
||
z-index: 0;
|
||
}
|
||
|
||
.reminder-preview {
|
||
width: 100%;
|
||
background: var(--kalei-navy);
|
||
border: 1px solid var(--twilight);
|
||
border-radius: var(--radius-xl);
|
||
padding: var(--space-4);
|
||
margin-bottom: var(--space-10);
|
||
text-align: left;
|
||
}
|
||
|
||
.reminder-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
margin-bottom: var(--space-2);
|
||
}
|
||
|
||
.reminder-time {
|
||
color: var(--faint-light);
|
||
margin-left: auto;
|
||
}
|
||
|
||
.cta-area {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-3);
|
||
}
|
||
</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 centered">
|
||
<div class="notif-icon-wrap">
|
||
<div class="notif-aura"></div>
|
||
<svg width="72" height="72" viewBox="0 0 72 72" fill="none" style="position:relative; z-index:1;">
|
||
<defs>
|
||
<linearGradient id="bellGrad" x1="0" y1="0" x2="0" y2="1">
|
||
<stop offset="0%" stop-color="#A78BFA"/>
|
||
<stop offset="100%" stop-color="#6D28D9"/>
|
||
</linearGradient>
|
||
<linearGradient id="fragAccent" x1="0" y1="0" x2="0" y2="1">
|
||
<stop offset="0%" stop-color="#FDE68A"/>
|
||
<stop offset="100%" stop-color="#D97706"/>
|
||
</linearGradient>
|
||
</defs>
|
||
<!-- Bell body -->
|
||
<path d="M36 14C28 14 22 20 22 28L22 44L16 50L56 50L50 44L50 28C50 20 44 14 36 14Z" fill="url(#bellGrad)" opacity="0.85"/>
|
||
<path d="M32 50C32 52.2 33.8 54 36 54C38.2 54 40 52.2 40 50" fill="none" stroke="#A78BFA" stroke-width="1.5" opacity="0.7"/>
|
||
<circle cx="36" cy="13" r="2.5" fill="url(#bellGrad)"/>
|
||
<!--
|
||
Fragment accent — extracted from fragment-icons.svg → Amber SM (radius 8)
|
||
Centred at 57,24 (upper-right of bell) in 72×72 viewport
|
||
-->
|
||
<g transform="translate(57,24)">
|
||
<path d="M 0,-8 L 8,0 L 0,8 L -8,0 Z" fill="url(#fragAccent)" opacity="0.9"/>
|
||
<path d="M 0,-8 L 8,0 L 0,0 Z" fill="#fff" opacity="0.18"/>
|
||
<line x1="0" y1="-8" x2="0" y2="8" stroke="#fff" stroke-width="0.5" opacity="0.2"/>
|
||
<circle cx="-2" cy="-2" r="1" fill="#fff" opacity="0.3"/>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
|
||
<h2 class="heading text-pure" style="margin-bottom: var(--space-3);">A nudge, not a nag</h2>
|
||
<p class="body text-dim" style="margin-bottom: var(--space-6);">Kalei sends one quiet reminder a day — not to create pressure, but to offer a pause. The kind that actually helps.</p>
|
||
|
||
<div class="reminder-preview">
|
||
<div class="reminder-header">
|
||
<!--
|
||
Reminder icon — extracted from fragment-icons.svg → Amethyst XS (radius 6)
|
||
Centred at 0,0 in 14×14 viewport (translate 7,7)
|
||
-->
|
||
<svg width="14" height="14" viewBox="0 0 14 14">
|
||
<defs>
|
||
<linearGradient id="s06-rfg" x1="0" y1="0" x2="0" y2="1">
|
||
<stop offset="0%" stop-color="#C4B5FD"/>
|
||
<stop offset="100%" stop-color="#7C3AED"/>
|
||
</linearGradient>
|
||
</defs>
|
||
<g transform="translate(7,7)">
|
||
<path d="M 0,-6 L 6,0 L 0,6 L -6,0 Z" fill="url(#s06-rfg)" opacity="0.85"/>
|
||
<path d="M 0,-6 L 6,0 L 0,0 Z" fill="#fff" opacity="0.18"/>
|
||
<circle cx="-1.5" cy="-1.5" r="0.8" fill="#fff" opacity="0.3"/>
|
||
</g>
|
||
</svg>
|
||
<span class="label text-amethyst">Kalei</span>
|
||
<span class="body-sm reminder-time">now</span>
|
||
</div>
|
||
<p class="subheading text-pure" style="margin-bottom: var(--space-1);">Something on your mind?</p>
|
||
<p class="body-sm text-dim">Thoughts that go unexamined have a way of growing. A quick Turn takes a minute and often changes the rest of the day.</p>
|
||
</div>
|
||
|
||
<div class="cta-area">
|
||
<a href="07-account-creation.html" class="btn btn-primary" style="text-decoration:none;">
|
||
Allow Notifications
|
||
</a>
|
||
<a href="07-account-creation.html" class="btn btn-ghost" style="text-decoration:none; color: var(--dim-light);">
|
||
Not now
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|