be84825aba
- Fix LargeVotingView mood icons getting clipped at edges by using flexible HStack spacing with maxWidth: .infinity - Fix VotingView medium layout with smaller icons and even distribution - Add comprehensive #Preview macros for all widget states: - Vote widget: small/medium, voted/not voted, all mood states - Timeline widget: small/medium/large with various data states - Reduce icon sizes and padding to fit within widget bounds - Update accessibility labels and hints across views 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
1436 lines
43 KiB
HTML
1436 lines
43 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Feels — Gentle Mood Tracking for Mindful Living</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400&family=DM+Sans:ital,wght@0,400;0,500;0,600;1,400&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--cream: #FDF8F3;
|
|
--cream-dark: #F5EDE4;
|
|
--warm-white: #FFFCF9;
|
|
--text-primary: #3D3832;
|
|
--text-secondary: #7A6F64;
|
|
--text-muted: #A89F94;
|
|
|
|
/* Soft mood palette */
|
|
--mood-great: #8FB996;
|
|
--mood-good: #E8C07D;
|
|
--mood-average: #C9B8A8;
|
|
--mood-bad: #A5B5C5;
|
|
--mood-horrible: #D4A5A5;
|
|
|
|
/* Accent colors */
|
|
--sage: #8FB996;
|
|
--peach: #EFBE9A;
|
|
--lavender: #C5B4D1;
|
|
--coral: #E5A89A;
|
|
--sky: #A5C4D4;
|
|
|
|
--shadow-soft: 0 4px 20px rgba(61, 56, 50, 0.06);
|
|
--shadow-medium: 0 8px 40px rgba(61, 56, 50, 0.08);
|
|
--radius-soft: 24px;
|
|
--radius-pill: 100px;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
font-family: 'DM Sans', sans-serif;
|
|
background: var(--cream);
|
|
color: var(--text-primary);
|
|
line-height: 1.6;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
h1, h2, h3, h4 {
|
|
font-family: 'Fraunces', serif;
|
|
font-weight: 500;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
/* Organic blob backgrounds */
|
|
.blob {
|
|
position: absolute;
|
|
border-radius: 50% 40% 60% 50% / 40% 50% 50% 60%;
|
|
filter: blur(60px);
|
|
opacity: 0.5;
|
|
animation: blobFloat 20s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes blobFloat {
|
|
0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
|
|
25% { transform: translate(20px, -30px) rotate(5deg) scale(1.05); }
|
|
50% { transform: translate(-10px, 20px) rotate(-3deg) scale(0.95); }
|
|
75% { transform: translate(30px, 10px) rotate(3deg) scale(1.02); }
|
|
}
|
|
|
|
/* Navigation */
|
|
nav {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 1000;
|
|
padding: 20px 40px;
|
|
background: rgba(253, 248, 243, 0.85);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
nav.scrolled {
|
|
box-shadow: var(--shadow-soft);
|
|
}
|
|
|
|
.nav-container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.logo {
|
|
font-family: 'Fraunces', serif;
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
text-decoration: none;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.logo-icon {
|
|
width: 36px;
|
|
height: 36px;
|
|
background: linear-gradient(135deg, var(--sage), var(--peach));
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.nav-links {
|
|
display: flex;
|
|
gap: 32px;
|
|
list-style: none;
|
|
}
|
|
|
|
.nav-links a {
|
|
color: var(--text-secondary);
|
|
text-decoration: none;
|
|
font-size: 0.95rem;
|
|
font-weight: 500;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.nav-links a:hover {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.nav-cta {
|
|
background: var(--text-primary);
|
|
color: var(--cream);
|
|
padding: 12px 24px;
|
|
border-radius: var(--radius-pill);
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
font-size: 0.9rem;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.nav-cta:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--shadow-medium);
|
|
}
|
|
|
|
/* Hero Section */
|
|
.hero {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 140px 40px 80px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hero .blob-1 {
|
|
width: 600px;
|
|
height: 600px;
|
|
background: var(--sage);
|
|
top: -200px;
|
|
right: -100px;
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
.hero .blob-2 {
|
|
width: 500px;
|
|
height: 500px;
|
|
background: var(--peach);
|
|
bottom: -150px;
|
|
left: -150px;
|
|
animation-delay: -5s;
|
|
}
|
|
|
|
.hero .blob-3 {
|
|
width: 300px;
|
|
height: 300px;
|
|
background: var(--lavender);
|
|
top: 40%;
|
|
left: 30%;
|
|
animation-delay: -10s;
|
|
}
|
|
|
|
.hero-container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 80px;
|
|
align-items: center;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.hero-content {
|
|
opacity: 0;
|
|
animation: fadeUp 1s ease forwards;
|
|
}
|
|
|
|
@keyframes fadeUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.hero-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
background: var(--warm-white);
|
|
padding: 8px 16px;
|
|
border-radius: var(--radius-pill);
|
|
font-size: 0.85rem;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 24px;
|
|
box-shadow: var(--shadow-soft);
|
|
}
|
|
|
|
.hero-badge-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
background: var(--sage);
|
|
border-radius: 50%;
|
|
animation: pulse 2s ease infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; transform: scale(1); }
|
|
50% { opacity: 0.6; transform: scale(1.2); }
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: clamp(2.5rem, 5vw, 4rem);
|
|
margin-bottom: 24px;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.hero h1 em {
|
|
font-style: italic;
|
|
color: var(--sage);
|
|
}
|
|
|
|
.hero-text {
|
|
font-size: 1.15rem;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 40px;
|
|
max-width: 480px;
|
|
}
|
|
|
|
.hero-buttons {
|
|
display: flex;
|
|
gap: 16px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.btn-primary {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
background: var(--text-primary);
|
|
color: var(--cream);
|
|
padding: 16px 32px;
|
|
border-radius: var(--radius-pill);
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: var(--shadow-medium);
|
|
}
|
|
|
|
.btn-primary svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.btn-secondary {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
background: transparent;
|
|
color: var(--text-primary);
|
|
padding: 16px 32px;
|
|
border: 2px solid var(--cream-dark);
|
|
border-radius: var(--radius-pill);
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: var(--warm-white);
|
|
border-color: var(--text-muted);
|
|
}
|
|
|
|
/* Phone Mockup */
|
|
.hero-visual {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
opacity: 0;
|
|
animation: fadeUp 1s ease 0.3s forwards;
|
|
}
|
|
|
|
.phone-mockup {
|
|
width: 280px;
|
|
height: 580px;
|
|
background: var(--warm-white);
|
|
border-radius: 40px;
|
|
box-shadow: var(--shadow-medium), 0 30px 60px rgba(61, 56, 50, 0.12);
|
|
padding: 12px;
|
|
position: relative;
|
|
}
|
|
|
|
.phone-screen {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: var(--cream);
|
|
border-radius: 32px;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.phone-header {
|
|
padding: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.phone-header-date {
|
|
font-family: 'Fraunces', serif;
|
|
font-size: 1.1rem;
|
|
color: var(--text-primary);
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.phone-header-sub {
|
|
font-size: 0.8rem;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* Year grid visualization */
|
|
.year-grid {
|
|
padding: 16px;
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 3px;
|
|
}
|
|
|
|
.year-row {
|
|
display: flex;
|
|
gap: 3px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.year-cell {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 3px;
|
|
background: var(--cream-dark);
|
|
opacity: 0;
|
|
animation: cellFade 0.5s ease forwards;
|
|
}
|
|
|
|
@keyframes cellFade {
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
.year-cell.great { background: var(--mood-great); }
|
|
.year-cell.good { background: var(--mood-good); }
|
|
.year-cell.average { background: var(--mood-average); }
|
|
.year-cell.bad { background: var(--mood-bad); }
|
|
.year-cell.horrible { background: var(--mood-horrible); }
|
|
|
|
/* Floating elements around phone */
|
|
.floating-card {
|
|
position: absolute;
|
|
background: var(--warm-white);
|
|
border-radius: 16px;
|
|
padding: 16px;
|
|
box-shadow: var(--shadow-soft);
|
|
animation: float 6s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-15px); }
|
|
}
|
|
|
|
.floating-streak {
|
|
top: 80px;
|
|
right: -60px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
animation-delay: -2s;
|
|
}
|
|
|
|
.streak-icon {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.streak-text {
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.streak-number {
|
|
font-family: 'Fraunces', serif;
|
|
font-size: 1.3rem;
|
|
font-weight: 600;
|
|
color: var(--peach);
|
|
}
|
|
|
|
.floating-mood {
|
|
bottom: 120px;
|
|
left: -50px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 8px;
|
|
animation-delay: -4s;
|
|
}
|
|
|
|
.mood-emoji {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.mood-label {
|
|
font-size: 0.8rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
/* Features Section */
|
|
.features {
|
|
padding: 120px 40px;
|
|
position: relative;
|
|
background: var(--warm-white);
|
|
}
|
|
|
|
.features::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 200px;
|
|
background: linear-gradient(to bottom, var(--cream), var(--warm-white));
|
|
}
|
|
|
|
.section-header {
|
|
text-align: center;
|
|
max-width: 600px;
|
|
margin: 0 auto 80px;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.section-tag {
|
|
display: inline-block;
|
|
font-size: 0.85rem;
|
|
color: var(--sage);
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.section-header h2 {
|
|
font-size: clamp(2rem, 4vw, 3rem);
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.section-header p {
|
|
color: var(--text-secondary);
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.features-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 32px;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.feature-card {
|
|
background: var(--cream);
|
|
border-radius: var(--radius-soft);
|
|
padding: 40px 32px;
|
|
transition: all 0.4s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.feature-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 4px;
|
|
background: linear-gradient(90deg, var(--sage), var(--peach));
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.feature-card:hover {
|
|
transform: translateY(-8px);
|
|
box-shadow: var(--shadow-medium);
|
|
}
|
|
|
|
.feature-card:hover::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.feature-icon {
|
|
width: 56px;
|
|
height: 56px;
|
|
border-radius: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.5rem;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.feature-card:nth-child(1) .feature-icon { background: rgba(143, 185, 150, 0.2); }
|
|
.feature-card:nth-child(2) .feature-icon { background: rgba(232, 192, 125, 0.2); }
|
|
.feature-card:nth-child(3) .feature-icon { background: rgba(197, 180, 209, 0.2); }
|
|
.feature-card:nth-child(4) .feature-icon { background: rgba(239, 190, 154, 0.2); }
|
|
.feature-card:nth-child(5) .feature-icon { background: rgba(165, 196, 212, 0.2); }
|
|
.feature-card:nth-child(6) .feature-icon { background: rgba(229, 168, 154, 0.2); }
|
|
.feature-card:nth-child(7) .feature-icon { background: rgba(94, 186, 175, 0.2); }
|
|
|
|
.feature-card h3 {
|
|
font-size: 1.25rem;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.feature-card p {
|
|
color: var(--text-secondary);
|
|
font-size: 0.95rem;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
/* Moods Section */
|
|
.moods {
|
|
padding: 120px 40px;
|
|
background: var(--cream);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.moods .blob-4 {
|
|
width: 400px;
|
|
height: 400px;
|
|
background: var(--lavender);
|
|
top: 50%;
|
|
right: -100px;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.moods-container {
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.mood-showcase {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 24px;
|
|
margin-top: 60px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.mood-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 16px;
|
|
padding: 32px;
|
|
background: var(--warm-white);
|
|
border-radius: var(--radius-soft);
|
|
box-shadow: var(--shadow-soft);
|
|
transition: all 0.3s ease;
|
|
cursor: default;
|
|
}
|
|
|
|
.mood-item:hover {
|
|
transform: translateY(-8px) scale(1.05);
|
|
box-shadow: var(--shadow-medium);
|
|
}
|
|
|
|
.mood-item .emoji {
|
|
font-size: 3rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
.mood-item .label {
|
|
font-family: 'Fraunces', serif;
|
|
font-size: 1.1rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.mood-item:nth-child(1) .label { color: var(--mood-great); }
|
|
.mood-item:nth-child(2) .label { color: var(--mood-good); }
|
|
.mood-item:nth-child(3) .label { color: var(--mood-average); }
|
|
.mood-item:nth-child(4) .label { color: var(--mood-bad); }
|
|
.mood-item:nth-child(5) .label { color: var(--mood-horrible); }
|
|
|
|
/* Devices Section */
|
|
.devices {
|
|
padding: 120px 40px;
|
|
background: linear-gradient(180deg, var(--cream) 0%, var(--cream-dark) 100%);
|
|
position: relative;
|
|
}
|
|
|
|
.devices-container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.devices-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 60px;
|
|
margin-top: 60px;
|
|
}
|
|
|
|
.device-card {
|
|
background: var(--warm-white);
|
|
border-radius: var(--radius-soft);
|
|
padding: 48px;
|
|
box-shadow: var(--shadow-soft);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.device-visual {
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
/* Watch mockup */
|
|
.watch-frame {
|
|
width: 140px;
|
|
height: 170px;
|
|
background: linear-gradient(145deg, #E8E0D8, #D4CCC4);
|
|
border-radius: 35px;
|
|
padding: 10px;
|
|
box-shadow: var(--shadow-soft);
|
|
}
|
|
|
|
.watch-screen {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: var(--cream);
|
|
border-radius: 28px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 12px;
|
|
padding: 16px;
|
|
}
|
|
|
|
.watch-mood {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.watch-text {
|
|
font-family: 'Fraunces', serif;
|
|
font-size: 0.9rem;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.watch-sub {
|
|
font-size: 0.75rem;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* Widget mockup */
|
|
.widget-frame {
|
|
width: 200px;
|
|
background: var(--cream);
|
|
border-radius: 24px;
|
|
padding: 20px;
|
|
box-shadow: var(--shadow-soft);
|
|
}
|
|
|
|
.widget-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.widget-icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
background: linear-gradient(135deg, var(--sage), var(--peach));
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.widget-title {
|
|
font-size: 0.8rem;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.widget-prompt {
|
|
font-family: 'Fraunces', serif;
|
|
font-size: 0.95rem;
|
|
margin-bottom: 16px;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.widget-moods {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.widget-mood {
|
|
font-size: 1.3rem;
|
|
padding: 8px;
|
|
background: var(--warm-white);
|
|
border-radius: 12px;
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.widget-mood:hover {
|
|
transform: scale(1.15);
|
|
}
|
|
|
|
.device-card h3 {
|
|
font-size: 1.5rem;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.device-card p {
|
|
color: var(--text-secondary);
|
|
max-width: 300px;
|
|
}
|
|
|
|
/* Testimonials */
|
|
.testimonials {
|
|
padding: 120px 40px;
|
|
background: var(--warm-white);
|
|
position: relative;
|
|
}
|
|
|
|
.testimonials-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 32px;
|
|
max-width: 1200px;
|
|
margin: 60px auto 0;
|
|
}
|
|
|
|
.testimonial-card {
|
|
background: var(--cream);
|
|
border-radius: var(--radius-soft);
|
|
padding: 40px;
|
|
position: relative;
|
|
}
|
|
|
|
.testimonial-card::before {
|
|
content: '"';
|
|
position: absolute;
|
|
top: 24px;
|
|
left: 32px;
|
|
font-family: 'Fraunces', serif;
|
|
font-size: 4rem;
|
|
color: var(--cream-dark);
|
|
line-height: 1;
|
|
}
|
|
|
|
.testimonial-text {
|
|
font-size: 1.05rem;
|
|
line-height: 1.8;
|
|
margin-bottom: 24px;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.testimonial-author {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.author-avatar {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.testimonial-card:nth-child(1) .author-avatar { background: rgba(143, 185, 150, 0.2); }
|
|
.testimonial-card:nth-child(2) .author-avatar { background: rgba(232, 192, 125, 0.2); }
|
|
.testimonial-card:nth-child(3) .author-avatar { background: rgba(197, 180, 209, 0.2); }
|
|
|
|
.author-info {
|
|
text-align: left;
|
|
}
|
|
|
|
.author-name {
|
|
font-family: 'Fraunces', serif;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.author-role {
|
|
font-size: 0.85rem;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.stars {
|
|
display: flex;
|
|
gap: 4px;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.star {
|
|
color: var(--peach);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
/* CTA Section */
|
|
.cta {
|
|
padding: 120px 40px;
|
|
background: var(--cream);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.cta .blob-5 {
|
|
width: 500px;
|
|
height: 500px;
|
|
background: var(--sage);
|
|
bottom: -200px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.cta-container {
|
|
max-width: 700px;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.cta h2 {
|
|
font-size: clamp(2rem, 4vw, 3rem);
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.cta p {
|
|
color: var(--text-secondary);
|
|
font-size: 1.15rem;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.cta-buttons {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 16px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.app-store-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
background: var(--text-primary);
|
|
color: var(--cream);
|
|
padding: 16px 28px;
|
|
border-radius: var(--radius-pill);
|
|
text-decoration: none;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.app-store-btn:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: var(--shadow-medium);
|
|
}
|
|
|
|
.app-store-btn svg {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
.app-store-text {
|
|
text-align: left;
|
|
}
|
|
|
|
.app-store-small {
|
|
font-size: 0.7rem;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.app-store-large {
|
|
font-weight: 600;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
/* Footer */
|
|
footer {
|
|
padding: 40px;
|
|
background: var(--cream-dark);
|
|
text-align: center;
|
|
}
|
|
|
|
.footer-content {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.footer-links {
|
|
display: flex;
|
|
gap: 32px;
|
|
list-style: none;
|
|
}
|
|
|
|
.footer-links a {
|
|
color: var(--text-secondary);
|
|
text-decoration: none;
|
|
font-size: 0.9rem;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.footer-links a:hover {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.footer-copy {
|
|
font-size: 0.85rem;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* Mobile Responsive */
|
|
@media (max-width: 1024px) {
|
|
.features-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
.devices-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: 40px;
|
|
}
|
|
|
|
.testimonials-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
nav {
|
|
padding: 16px 24px;
|
|
}
|
|
|
|
.nav-links {
|
|
display: none;
|
|
}
|
|
|
|
.hero {
|
|
padding: 120px 24px 60px;
|
|
}
|
|
|
|
.hero-container {
|
|
grid-template-columns: 1fr;
|
|
text-align: center;
|
|
gap: 60px;
|
|
}
|
|
|
|
.hero-text {
|
|
margin: 0 auto 40px;
|
|
}
|
|
|
|
.hero-buttons {
|
|
justify-content: center;
|
|
}
|
|
|
|
.floating-card {
|
|
display: none;
|
|
}
|
|
|
|
.features {
|
|
padding: 80px 24px;
|
|
}
|
|
|
|
.features-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.moods {
|
|
padding: 80px 24px;
|
|
}
|
|
|
|
.mood-showcase {
|
|
gap: 16px;
|
|
}
|
|
|
|
.mood-item {
|
|
padding: 24px;
|
|
}
|
|
|
|
.mood-item .emoji {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.devices {
|
|
padding: 80px 24px;
|
|
}
|
|
|
|
.testimonials {
|
|
padding: 80px 24px;
|
|
}
|
|
|
|
.cta {
|
|
padding: 80px 24px;
|
|
}
|
|
|
|
.footer-content {
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
}
|
|
|
|
.footer-links {
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 16px;
|
|
}
|
|
}
|
|
|
|
/* Scroll animations */
|
|
.reveal {
|
|
opacity: 0;
|
|
transform: translateY(40px);
|
|
transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
.reveal.visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Navigation -->
|
|
<nav>
|
|
<div class="nav-container">
|
|
<a href="#" class="logo">
|
|
<div class="logo-icon">🌿</div>
|
|
Feels
|
|
</a>
|
|
<ul class="nav-links">
|
|
<li><a href="#features">Features</a></li>
|
|
<li><a href="#moods">Moods</a></li>
|
|
<li><a href="#devices">Devices</a></li>
|
|
<li><a href="#testimonials">Stories</a></li>
|
|
</ul>
|
|
<a href="#download" class="nav-cta">Download</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="hero">
|
|
<div class="blob blob-1"></div>
|
|
<div class="blob blob-2"></div>
|
|
<div class="blob blob-3"></div>
|
|
|
|
<div class="hero-container">
|
|
<div class="hero-content">
|
|
<div class="hero-badge">
|
|
<span class="hero-badge-dot"></span>
|
|
Coming 2026
|
|
</div>
|
|
<h1>Tune into how you <em>feel</em></h1>
|
|
<p class="hero-text">A gentle companion for tracking your emotional wellness. Simple daily check-ins that help you understand your patterns and nurture your mental health.</p>
|
|
<div class="hero-buttons">
|
|
<a href="#download" class="btn-primary">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/></svg>
|
|
Download for iOS
|
|
</a>
|
|
<a href="#features" class="btn-secondary">
|
|
Learn more
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hero-visual">
|
|
<div class="phone-mockup">
|
|
<div class="phone-screen">
|
|
<div class="phone-header">
|
|
<div class="phone-header-date">December 2025</div>
|
|
<div class="phone-header-sub">Your Year at a Glance</div>
|
|
</div>
|
|
<div class="year-grid" id="yearGrid"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="floating-card floating-streak">
|
|
<span class="streak-icon">🔥</span>
|
|
<div class="streak-text">
|
|
<div class="streak-number">14 days</div>
|
|
Current streak
|
|
</div>
|
|
</div>
|
|
|
|
<div class="floating-card floating-mood">
|
|
<span class="mood-emoji">😊</span>
|
|
<span class="mood-label">Feeling Good</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Features Section -->
|
|
<section class="features" id="features">
|
|
<div class="section-header reveal">
|
|
<span class="section-tag">Features</span>
|
|
<h2>Everything you need to understand yourself</h2>
|
|
<p>Simple tools designed to help you build awareness and cultivate emotional wellness.</p>
|
|
</div>
|
|
|
|
<div class="features-grid">
|
|
<div class="feature-card reveal">
|
|
<div class="feature-icon">🎭</div>
|
|
<h3>Five Simple Moods</h3>
|
|
<p>No complicated scales. Just five intuitive options that capture how you're really feeling in the moment.</p>
|
|
</div>
|
|
|
|
<div class="feature-card reveal">
|
|
<div class="feature-icon">📊</div>
|
|
<h3>Year Visualization</h3>
|
|
<p>See your emotional patterns unfold over time with a beautiful year-at-a-glance view of your journey.</p>
|
|
</div>
|
|
|
|
<div class="feature-card reveal">
|
|
<div class="feature-icon">⌚</div>
|
|
<h3>Apple Watch</h3>
|
|
<p>Log your mood right from your wrist. Complications keep your streak visible throughout the day.</p>
|
|
</div>
|
|
|
|
<div class="feature-card reveal">
|
|
<div class="feature-icon">📱</div>
|
|
<h3>Home Screen Widgets</h3>
|
|
<p>Interactive widgets let you check in without even opening the app. One tap and you're done.</p>
|
|
</div>
|
|
|
|
<div class="feature-card reveal">
|
|
<div class="feature-icon">🔥</div>
|
|
<h3>Streak Tracking</h3>
|
|
<p>Build healthy habits with streak tracking. Dynamic Island shows your progress throughout the day.</p>
|
|
</div>
|
|
|
|
<div class="feature-card reveal">
|
|
<div class="feature-icon">🔒</div>
|
|
<h3>Private by Design</h3>
|
|
<p>Your feelings are yours alone. All data stays on your devices with iCloud sync you control.</p>
|
|
</div>
|
|
|
|
<div class="feature-card reveal">
|
|
<div class="feature-icon">♿</div>
|
|
<h3>WCAG 2.1 AA Accessible</h3>
|
|
<p>Built for everyone. Full VoiceOver support, Dynamic Type, and high contrast ensure no one is left behind.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Moods Section -->
|
|
<section class="moods" id="moods">
|
|
<div class="blob blob-4"></div>
|
|
<div class="moods-container">
|
|
<div class="section-header reveal">
|
|
<span class="section-tag">Simple & Intuitive</span>
|
|
<h2>Five moods. Infinite insights.</h2>
|
|
<p>We believe tracking your mood shouldn't be complicated. Five simple options capture the full spectrum of daily life.</p>
|
|
</div>
|
|
|
|
<div class="mood-showcase reveal">
|
|
<div class="mood-item">
|
|
<span class="emoji">😄</span>
|
|
<span class="label">Great</span>
|
|
</div>
|
|
<div class="mood-item">
|
|
<span class="emoji">😊</span>
|
|
<span class="label">Good</span>
|
|
</div>
|
|
<div class="mood-item">
|
|
<span class="emoji">😐</span>
|
|
<span class="label">Average</span>
|
|
</div>
|
|
<div class="mood-item">
|
|
<span class="emoji">😔</span>
|
|
<span class="label">Bad</span>
|
|
</div>
|
|
<div class="mood-item">
|
|
<span class="emoji">😢</span>
|
|
<span class="label">Horrible</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Devices Section -->
|
|
<section class="devices" id="devices">
|
|
<div class="devices-container">
|
|
<div class="section-header reveal">
|
|
<span class="section-tag">Everywhere You Are</span>
|
|
<h2>Check in from anywhere</h2>
|
|
<p>Whether you're at your desk or on the go, logging your mood takes just a second.</p>
|
|
</div>
|
|
|
|
<div class="devices-grid">
|
|
<div class="device-card reveal">
|
|
<div class="device-visual">
|
|
<div class="watch-frame">
|
|
<div class="watch-screen">
|
|
<span class="watch-mood">😊</span>
|
|
<span class="watch-text">Good Day</span>
|
|
<span class="watch-sub">🔥 7 day streak</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<h3>Apple Watch</h3>
|
|
<p>Complications show your current mood and streak. Tap to log how you're feeling in seconds.</p>
|
|
</div>
|
|
|
|
<div class="device-card reveal">
|
|
<div class="device-visual">
|
|
<div class="widget-frame">
|
|
<div class="widget-header">
|
|
<div class="widget-icon"></div>
|
|
<span class="widget-title">Feels</span>
|
|
</div>
|
|
<div class="widget-prompt">How are you feeling right now?</div>
|
|
<div class="widget-moods">
|
|
<span class="widget-mood">😄</span>
|
|
<span class="widget-mood">😊</span>
|
|
<span class="widget-mood">😐</span>
|
|
<span class="widget-mood">😔</span>
|
|
<span class="widget-mood">😢</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<h3>Home Screen Widget</h3>
|
|
<p>Interactive widgets bring mood logging right to your home screen. No app launch required.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Testimonials -->
|
|
<section class="testimonials" id="testimonials">
|
|
<div class="section-header reveal">
|
|
<span class="section-tag">Stories</span>
|
|
<h2>People love Feels</h2>
|
|
<p>Join thousands who have made mood tracking a daily habit.</p>
|
|
</div>
|
|
|
|
<div class="testimonials-grid">
|
|
<div class="testimonial-card reveal">
|
|
<p class="testimonial-text">The simplicity is what keeps me coming back. I've tried other mood trackers but they ask too many questions. Feels gets it — one tap and I'm done.</p>
|
|
<div class="testimonial-author">
|
|
<div class="author-avatar">🌸</div>
|
|
<div class="author-info">
|
|
<div class="author-name">Sarah M.</div>
|
|
<div class="author-role">Yoga Instructor</div>
|
|
<div class="stars">
|
|
<span class="star">★</span>
|
|
<span class="star">★</span>
|
|
<span class="star">★</span>
|
|
<span class="star">★</span>
|
|
<span class="star">★</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="testimonial-card reveal">
|
|
<p class="testimonial-text">Being able to look back at my year and see the patterns has been eye-opening. I now understand what affects my mood and can make better choices.</p>
|
|
<div class="testimonial-author">
|
|
<div class="author-avatar">🎨</div>
|
|
<div class="author-info">
|
|
<div class="author-name">James K.</div>
|
|
<div class="author-role">Designer</div>
|
|
<div class="stars">
|
|
<span class="star">★</span>
|
|
<span class="star">★</span>
|
|
<span class="star">★</span>
|
|
<span class="star">★</span>
|
|
<span class="star">★</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="testimonial-card reveal">
|
|
<p class="testimonial-text">The Apple Watch complication is a game changer. I actually remember to log now because it's right there on my watch face. Haven't broken my streak in months!</p>
|
|
<div class="testimonial-author">
|
|
<div class="author-avatar">🏃</div>
|
|
<div class="author-info">
|
|
<div class="author-name">Lisa T.</div>
|
|
<div class="author-role">Marathon Runner</div>
|
|
<div class="stars">
|
|
<span class="star">★</span>
|
|
<span class="star">★</span>
|
|
<span class="star">★</span>
|
|
<span class="star">★</span>
|
|
<span class="star">★</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA Section -->
|
|
<section class="cta" id="download">
|
|
<div class="blob blob-5"></div>
|
|
<div class="cta-container reveal">
|
|
<h2>Begin your journey today</h2>
|
|
<p>Start understanding your emotional patterns with just one tap a day. Your future self will thank you.</p>
|
|
<div class="cta-buttons">
|
|
<a href="#" class="app-store-btn">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/></svg>
|
|
<div class="app-store-text">
|
|
<div class="app-store-small">Download on the</div>
|
|
<div class="app-store-large">App Store</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer>
|
|
<div class="footer-content">
|
|
<a href="#" class="logo">
|
|
<div class="logo-icon">🌿</div>
|
|
Feels
|
|
</a>
|
|
<ul class="footer-links">
|
|
<li><a href="#">Privacy</a></li>
|
|
<li><a href="#">Terms</a></li>
|
|
<li><a href="#">Support</a></li>
|
|
<li><a href="#">Press Kit</a></li>
|
|
</ul>
|
|
<div class="footer-copy">© 2026 Feels. Made with care.</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// Navigation scroll effect
|
|
window.addEventListener('scroll', () => {
|
|
const nav = document.querySelector('nav');
|
|
if (window.scrollY > 50) {
|
|
nav.classList.add('scrolled');
|
|
} else {
|
|
nav.classList.remove('scrolled');
|
|
}
|
|
});
|
|
|
|
// Generate year grid
|
|
const yearGrid = document.getElementById('yearGrid');
|
|
const moods = ['great', 'good', 'average', 'bad', 'horrible', ''];
|
|
|
|
for (let week = 0; week < 20; week++) {
|
|
const row = document.createElement('div');
|
|
row.className = 'year-row';
|
|
|
|
for (let day = 0; day < 7; day++) {
|
|
const cell = document.createElement('div');
|
|
const randomMood = moods[Math.floor(Math.random() * moods.length)];
|
|
cell.className = `year-cell ${randomMood}`;
|
|
cell.style.animationDelay = `${(week * 7 + day) * 20}ms`;
|
|
row.appendChild(cell);
|
|
}
|
|
|
|
yearGrid.appendChild(row);
|
|
}
|
|
|
|
// Scroll reveal animation
|
|
const reveals = document.querySelectorAll('.reveal');
|
|
|
|
const revealOnScroll = () => {
|
|
reveals.forEach(element => {
|
|
const elementTop = element.getBoundingClientRect().top;
|
|
const windowHeight = window.innerHeight;
|
|
|
|
if (elementTop < windowHeight - 100) {
|
|
element.classList.add('visible');
|
|
}
|
|
});
|
|
};
|
|
|
|
window.addEventListener('scroll', revealOnScroll);
|
|
revealOnScroll(); // Initial check
|
|
</script>
|
|
</body>
|
|
</html>
|