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>
1316 lines
37 KiB
HTML
1316 lines
37 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 — The Modern Mood Journal</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=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Outfit:wght@300;400;500;600&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--black: #0A0A0A;
|
|
--white: #FFFFFF;
|
|
--off-white: #F8F8F6;
|
|
--gray-100: #E8E8E6;
|
|
--gray-200: #D0D0CE;
|
|
--gray-400: #888884;
|
|
--gray-600: #555551;
|
|
--accent: #FF4D00;
|
|
--accent-dark: #E64500;
|
|
|
|
/* Mood colors - muted and sophisticated */
|
|
--mood-great: #2D5A3D;
|
|
--mood-good: #6B7F3A;
|
|
--mood-average: #888884;
|
|
--mood-bad: #4A5568;
|
|
--mood-horrible: #742A2A;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Outfit', sans-serif;
|
|
font-weight: 400;
|
|
background: var(--white);
|
|
color: var(--black);
|
|
line-height: 1.6;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
h1, h2, h3 {
|
|
font-family: 'Cormorant Garamond', serif;
|
|
font-weight: 500;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
/* Navigation */
|
|
nav {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 1000;
|
|
padding: 24px 48px;
|
|
background: var(--white);
|
|
border-bottom: 1px solid transparent;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
nav.scrolled {
|
|
border-bottom-color: var(--gray-100);
|
|
}
|
|
|
|
.nav-container {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.logo {
|
|
font-family: 'Cormorant Garamond', serif;
|
|
font-size: 1.75rem;
|
|
font-weight: 600;
|
|
color: var(--black);
|
|
text-decoration: none;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.nav-links {
|
|
display: flex;
|
|
gap: 48px;
|
|
list-style: none;
|
|
}
|
|
|
|
.nav-links a {
|
|
color: var(--gray-600);
|
|
text-decoration: none;
|
|
font-size: 0.9rem;
|
|
font-weight: 400;
|
|
letter-spacing: 0.02em;
|
|
text-transform: uppercase;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.nav-links a:hover {
|
|
color: var(--black);
|
|
}
|
|
|
|
.nav-cta {
|
|
background: var(--black);
|
|
color: var(--white);
|
|
padding: 14px 28px;
|
|
text-decoration: none;
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
letter-spacing: 0.05em;
|
|
text-transform: uppercase;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.nav-cta:hover {
|
|
background: var(--accent);
|
|
}
|
|
|
|
/* Hero Section */
|
|
.hero {
|
|
min-height: 100vh;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
padding-top: 100px;
|
|
}
|
|
|
|
.hero-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
padding: 80px;
|
|
padding-right: 60px;
|
|
}
|
|
|
|
.hero-tag {
|
|
font-size: 0.8rem;
|
|
font-weight: 500;
|
|
letter-spacing: 0.15em;
|
|
text-transform: uppercase;
|
|
color: var(--accent);
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: clamp(3.5rem, 7vw, 7rem);
|
|
margin-bottom: 40px;
|
|
letter-spacing: -0.03em;
|
|
}
|
|
|
|
.hero h1 em {
|
|
font-style: italic;
|
|
color: var(--accent);
|
|
}
|
|
|
|
.hero-text {
|
|
font-size: 1.2rem;
|
|
color: var(--gray-600);
|
|
max-width: 420px;
|
|
margin-bottom: 60px;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.hero-cta {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
background: var(--black);
|
|
color: var(--white);
|
|
padding: 20px 40px;
|
|
text-decoration: none;
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
letter-spacing: 0.05em;
|
|
text-transform: uppercase;
|
|
transition: all 0.3s ease;
|
|
align-self: flex-start;
|
|
}
|
|
|
|
.hero-cta:hover {
|
|
background: var(--accent);
|
|
}
|
|
|
|
.hero-cta svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.hero-visual {
|
|
background: var(--off-white);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Phone mockup - editorial style */
|
|
.phone-mockup {
|
|
width: 320px;
|
|
height: 660px;
|
|
background: var(--black);
|
|
border-radius: 48px;
|
|
padding: 12px;
|
|
box-shadow: 0 60px 120px rgba(0,0,0,0.2);
|
|
transform: rotate(-3deg);
|
|
transition: transform 0.5s ease;
|
|
}
|
|
|
|
.phone-mockup:hover {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
.phone-screen {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: var(--white);
|
|
border-radius: 40px;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.phone-status {
|
|
height: 44px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 24px;
|
|
}
|
|
|
|
.phone-notch {
|
|
width: 120px;
|
|
height: 28px;
|
|
background: var(--black);
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.phone-content {
|
|
flex: 1;
|
|
padding: 24px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.phone-header {
|
|
text-align: center;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.phone-month {
|
|
font-family: 'Cormorant Garamond', serif;
|
|
font-size: 1.75rem;
|
|
font-weight: 500;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.phone-year {
|
|
font-size: 0.8rem;
|
|
color: var(--gray-400);
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
/* Year grid - editorial minimal */
|
|
.year-grid {
|
|
flex: 1;
|
|
display: grid;
|
|
grid-template-columns: repeat(7, 1fr);
|
|
gap: 4px;
|
|
padding: 8px 0;
|
|
}
|
|
|
|
.year-cell {
|
|
aspect-ratio: 1;
|
|
background: var(--gray-100);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.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); }
|
|
|
|
/* Accent label on visual */
|
|
.hero-label {
|
|
position: absolute;
|
|
bottom: 80px;
|
|
right: 60px;
|
|
writing-mode: vertical-rl;
|
|
text-orientation: mixed;
|
|
font-size: 0.75rem;
|
|
letter-spacing: 0.2em;
|
|
text-transform: uppercase;
|
|
color: var(--gray-400);
|
|
}
|
|
|
|
/* Stats bar */
|
|
.stats-bar {
|
|
background: var(--black);
|
|
color: var(--white);
|
|
padding: 60px 80px;
|
|
}
|
|
|
|
.stats-container {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 60px;
|
|
}
|
|
|
|
.stat {
|
|
text-align: center;
|
|
}
|
|
|
|
.stat-number {
|
|
font-family: 'Cormorant Garamond', serif;
|
|
font-size: 4rem;
|
|
font-weight: 400;
|
|
color: var(--accent);
|
|
line-height: 1;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 0.85rem;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
color: var(--gray-400);
|
|
}
|
|
|
|
/* Features Section */
|
|
.features {
|
|
padding: 160px 80px;
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.section-header {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 80px;
|
|
margin-bottom: 120px;
|
|
align-items: end;
|
|
}
|
|
|
|
.section-tag {
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
letter-spacing: 0.2em;
|
|
text-transform: uppercase;
|
|
color: var(--accent);
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.section-header h2 {
|
|
font-size: clamp(2.5rem, 5vw, 4.5rem);
|
|
letter-spacing: -0.03em;
|
|
}
|
|
|
|
.section-header p {
|
|
font-size: 1.15rem;
|
|
color: var(--gray-600);
|
|
line-height: 1.8;
|
|
max-width: 480px;
|
|
}
|
|
|
|
.features-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 1px;
|
|
background: var(--gray-100);
|
|
border: 1px solid var(--gray-100);
|
|
}
|
|
|
|
.feature-card {
|
|
background: var(--white);
|
|
padding: 60px 40px;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
}
|
|
|
|
.feature-card::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 40px;
|
|
right: 40px;
|
|
height: 2px;
|
|
background: var(--accent);
|
|
transform: scaleX(0);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.feature-card:hover::after {
|
|
transform: scaleX(1);
|
|
}
|
|
|
|
.feature-number {
|
|
font-family: 'Cormorant Garamond', serif;
|
|
font-size: 3rem;
|
|
color: var(--gray-200);
|
|
font-weight: 400;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.feature-card h3 {
|
|
font-size: 1.5rem;
|
|
margin-bottom: 16px;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.feature-card p {
|
|
color: var(--gray-600);
|
|
font-size: 0.95rem;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
/* Moods Section */
|
|
.moods {
|
|
background: var(--off-white);
|
|
padding: 160px 80px;
|
|
}
|
|
|
|
.moods-container {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.moods-header {
|
|
text-align: center;
|
|
margin-bottom: 100px;
|
|
}
|
|
|
|
.moods-header h2 {
|
|
font-size: clamp(2.5rem, 5vw, 5rem);
|
|
letter-spacing: -0.03em;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.moods-header p {
|
|
font-size: 1.15rem;
|
|
color: var(--gray-600);
|
|
max-width: 500px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.mood-strip {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 2px;
|
|
}
|
|
|
|
.mood-block {
|
|
flex: 1;
|
|
max-width: 200px;
|
|
height: 300px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 24px;
|
|
transition: all 0.4s ease;
|
|
cursor: default;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.mood-block::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: var(--black);
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.mood-block:nth-child(1) { background: var(--mood-great); }
|
|
.mood-block:nth-child(2) { background: var(--mood-good); }
|
|
.mood-block:nth-child(3) { background: var(--mood-average); }
|
|
.mood-block:nth-child(4) { background: var(--mood-bad); }
|
|
.mood-block:nth-child(5) { background: var(--mood-horrible); }
|
|
|
|
.mood-block:hover::before {
|
|
opacity: 0.2;
|
|
}
|
|
|
|
.mood-block:hover {
|
|
flex: 1.5;
|
|
}
|
|
|
|
.mood-emoji {
|
|
font-size: 3rem;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.mood-label {
|
|
font-family: 'Cormorant Garamond', serif;
|
|
font-size: 1.25rem;
|
|
color: var(--white);
|
|
font-weight: 500;
|
|
letter-spacing: 0.02em;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Devices Section */
|
|
.devices {
|
|
padding: 160px 80px;
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.devices-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 2px;
|
|
background: var(--gray-100);
|
|
margin-top: 100px;
|
|
}
|
|
|
|
.device-card {
|
|
background: var(--white);
|
|
padding: 80px 60px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.device-visual {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 48px;
|
|
}
|
|
|
|
/* Watch - editorial style */
|
|
.watch-frame {
|
|
width: 160px;
|
|
height: 200px;
|
|
background: var(--black);
|
|
border-radius: 40px;
|
|
padding: 8px;
|
|
box-shadow: 0 30px 60px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
.watch-screen {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: var(--white);
|
|
border-radius: 34px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
padding: 20px;
|
|
}
|
|
|
|
.watch-mood {
|
|
font-size: 2.5rem;
|
|
}
|
|
|
|
.watch-status {
|
|
font-family: 'Cormorant Garamond', serif;
|
|
font-size: 1rem;
|
|
color: var(--black);
|
|
}
|
|
|
|
.watch-streak {
|
|
font-size: 0.7rem;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
color: var(--gray-400);
|
|
}
|
|
|
|
/* Widget - editorial style */
|
|
.widget-frame {
|
|
width: 220px;
|
|
background: var(--off-white);
|
|
border: 1px solid var(--gray-100);
|
|
padding: 24px;
|
|
}
|
|
|
|
.widget-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.widget-logo {
|
|
font-family: 'Cormorant Garamond', serif;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.widget-time {
|
|
font-size: 0.7rem;
|
|
color: var(--gray-400);
|
|
}
|
|
|
|
.widget-prompt {
|
|
font-family: 'Cormorant Garamond', serif;
|
|
font-size: 1.1rem;
|
|
margin-bottom: 20px;
|
|
font-style: italic;
|
|
}
|
|
|
|
.widget-moods {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.widget-mood {
|
|
width: 36px;
|
|
height: 36px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.25rem;
|
|
background: var(--white);
|
|
border: 1px solid var(--gray-100);
|
|
transition: all 0.2s ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.widget-mood:hover {
|
|
background: var(--black);
|
|
border-color: var(--black);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.device-card h3 {
|
|
font-size: 2rem;
|
|
margin-bottom: 16px;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.device-card p {
|
|
color: var(--gray-600);
|
|
font-size: 1rem;
|
|
line-height: 1.7;
|
|
max-width: 360px;
|
|
}
|
|
|
|
/* Testimonials */
|
|
.testimonials {
|
|
background: var(--black);
|
|
color: var(--white);
|
|
padding: 160px 80px;
|
|
}
|
|
|
|
.testimonials-container {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.testimonials-header {
|
|
text-align: center;
|
|
margin-bottom: 100px;
|
|
}
|
|
|
|
.testimonials-header h2 {
|
|
font-size: clamp(2rem, 4vw, 3.5rem);
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.testimonials-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 2px;
|
|
}
|
|
|
|
.testimonial-card {
|
|
background: rgba(255,255,255,0.03);
|
|
padding: 60px 40px;
|
|
border-left: 1px solid rgba(255,255,255,0.1);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.testimonial-card:first-child {
|
|
border-left: none;
|
|
}
|
|
|
|
.testimonial-card:hover {
|
|
background: rgba(255,255,255,0.06);
|
|
}
|
|
|
|
.testimonial-quote {
|
|
font-family: 'Cormorant Garamond', serif;
|
|
font-size: 1.5rem;
|
|
font-style: italic;
|
|
line-height: 1.6;
|
|
margin-bottom: 40px;
|
|
color: var(--gray-200);
|
|
}
|
|
|
|
.testimonial-author {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
}
|
|
|
|
.author-avatar {
|
|
width: 48px;
|
|
height: 48px;
|
|
background: var(--accent);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.author-name {
|
|
font-weight: 500;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.author-role {
|
|
font-size: 0.85rem;
|
|
color: var(--gray-400);
|
|
}
|
|
|
|
/* CTA Section */
|
|
.cta {
|
|
padding: 200px 80px;
|
|
text-align: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.cta::before {
|
|
content: 'FEELS';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
font-family: 'Cormorant Garamond', serif;
|
|
font-size: 30vw;
|
|
font-weight: 400;
|
|
color: var(--gray-100);
|
|
white-space: nowrap;
|
|
z-index: 0;
|
|
letter-spacing: -0.05em;
|
|
}
|
|
|
|
.cta-content {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.cta h2 {
|
|
font-size: clamp(2.5rem, 5vw, 4.5rem);
|
|
margin-bottom: 24px;
|
|
letter-spacing: -0.03em;
|
|
}
|
|
|
|
.cta p {
|
|
font-size: 1.2rem;
|
|
color: var(--gray-600);
|
|
max-width: 500px;
|
|
margin: 0 auto 60px;
|
|
}
|
|
|
|
.cta-buttons {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 24px;
|
|
}
|
|
|
|
.btn-primary {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
background: var(--black);
|
|
color: var(--white);
|
|
padding: 20px 40px;
|
|
text-decoration: none;
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
letter-spacing: 0.05em;
|
|
text-transform: uppercase;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: var(--accent);
|
|
}
|
|
|
|
.btn-primary svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
/* Footer */
|
|
footer {
|
|
border-top: 1px solid var(--gray-100);
|
|
padding: 60px 80px;
|
|
}
|
|
|
|
.footer-content {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.footer-logo {
|
|
font-family: 'Cormorant Garamond', serif;
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
color: var(--black);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.footer-links {
|
|
display: flex;
|
|
gap: 48px;
|
|
list-style: none;
|
|
}
|
|
|
|
.footer-links a {
|
|
color: var(--gray-600);
|
|
text-decoration: none;
|
|
font-size: 0.85rem;
|
|
letter-spacing: 0.02em;
|
|
text-transform: uppercase;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.footer-links a:hover {
|
|
color: var(--black);
|
|
}
|
|
|
|
.footer-copy {
|
|
font-size: 0.85rem;
|
|
color: var(--gray-400);
|
|
}
|
|
|
|
/* Mobile Responsive */
|
|
@media (max-width: 1024px) {
|
|
.hero {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.hero-content {
|
|
padding: 120px 48px 60px;
|
|
text-align: center;
|
|
}
|
|
|
|
.hero-cta {
|
|
align-self: center;
|
|
}
|
|
|
|
.hero-visual {
|
|
min-height: 500px;
|
|
padding: 60px;
|
|
}
|
|
|
|
.stats-container {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
.section-header {
|
|
grid-template-columns: 1fr;
|
|
gap: 24px;
|
|
}
|
|
|
|
.features-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.devices-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.testimonials-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.testimonial-card {
|
|
border-left: none;
|
|
border-top: 1px solid rgba(255,255,255,0.1);
|
|
}
|
|
|
|
.testimonial-card:first-child {
|
|
border-top: none;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
nav {
|
|
padding: 20px 24px;
|
|
}
|
|
|
|
.nav-links {
|
|
display: none;
|
|
}
|
|
|
|
.hero-content {
|
|
padding: 100px 24px 40px;
|
|
}
|
|
|
|
.hero-visual {
|
|
min-height: 400px;
|
|
padding: 40px;
|
|
}
|
|
|
|
.phone-mockup {
|
|
width: 260px;
|
|
height: 540px;
|
|
}
|
|
|
|
.stats-bar {
|
|
padding: 40px 24px;
|
|
}
|
|
|
|
.stats-container {
|
|
gap: 24px;
|
|
}
|
|
|
|
.stat-number {
|
|
font-size: 2.5rem;
|
|
}
|
|
|
|
.features,
|
|
.devices,
|
|
.testimonials,
|
|
.cta {
|
|
padding: 80px 24px;
|
|
}
|
|
|
|
.moods {
|
|
padding: 80px 24px;
|
|
}
|
|
|
|
.mood-strip {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.mood-block {
|
|
min-width: 100px;
|
|
height: 200px;
|
|
}
|
|
|
|
footer {
|
|
padding: 40px 24px;
|
|
}
|
|
|
|
.footer-content {
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
}
|
|
|
|
.footer-links {
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 24px;
|
|
}
|
|
}
|
|
|
|
/* Animations */
|
|
.fade-in {
|
|
opacity: 0;
|
|
transform: translateY(40px);
|
|
transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
.fade-in.visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.slide-in {
|
|
opacity: 0;
|
|
transform: translateX(-40px);
|
|
transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
.slide-in.visible {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Navigation -->
|
|
<nav>
|
|
<div class="nav-container">
|
|
<a href="#" class="logo">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">Voices</a></li>
|
|
</ul>
|
|
<a href="#download" class="nav-cta">Download</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="hero">
|
|
<div class="hero-content">
|
|
<span class="hero-tag">Coming 2026</span>
|
|
<h1>Track your <em>mood.</em><br>Know your <em>mind.</em></h1>
|
|
<p class="hero-text">A minimal approach to understanding your emotional patterns. One tap a day reveals the bigger picture.</p>
|
|
<a href="#download" class="hero-cta">
|
|
<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>
|
|
</div>
|
|
|
|
<div class="hero-visual">
|
|
<div class="phone-mockup">
|
|
<div class="phone-screen">
|
|
<div class="phone-status">
|
|
<div class="phone-notch"></div>
|
|
</div>
|
|
<div class="phone-content">
|
|
<div class="phone-header">
|
|
<div class="phone-month">December</div>
|
|
<div class="phone-year">2025</div>
|
|
</div>
|
|
<div class="year-grid" id="yearGrid"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<span class="hero-label">Year at a Glance</span>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Stats Bar -->
|
|
<div class="stats-bar">
|
|
<div class="stats-container">
|
|
<div class="stat">
|
|
<div class="stat-number">365</div>
|
|
<div class="stat-label">Days of Insight</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-number">5</div>
|
|
<div class="stat-label">Simple Moods</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-number">1</div>
|
|
<div class="stat-label">Tap Per Day</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-number">∞</div>
|
|
<div class="stat-label">Self-Discovery</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Features Section -->
|
|
<section class="features" id="features">
|
|
<div class="section-header fade-in">
|
|
<div>
|
|
<span class="section-tag">Features</span>
|
|
<h2>Designed for simplicity</h2>
|
|
</div>
|
|
<p>We stripped away everything that makes mood tracking feel like work. What remains is pure, focused reflection.</p>
|
|
</div>
|
|
|
|
<div class="features-grid">
|
|
<div class="feature-card fade-in">
|
|
<div class="feature-number">01</div>
|
|
<h3>Five Moods</h3>
|
|
<p>No scales or sliders. Five clear options that capture the full range of daily emotional experience.</p>
|
|
</div>
|
|
|
|
<div class="feature-card fade-in">
|
|
<div class="feature-number">02</div>
|
|
<h3>Year View</h3>
|
|
<p>Watch your emotional patterns emerge over time with a striking year-at-a-glance visualization.</p>
|
|
</div>
|
|
|
|
<div class="feature-card fade-in">
|
|
<div class="feature-number">03</div>
|
|
<h3>Apple Watch</h3>
|
|
<p>Log moods from your wrist. Complications keep your streak visible throughout the day.</p>
|
|
</div>
|
|
|
|
<div class="feature-card fade-in">
|
|
<div class="feature-number">04</div>
|
|
<h3>Widgets</h3>
|
|
<p>Interactive home screen widgets. Tap to log without opening the app.</p>
|
|
</div>
|
|
|
|
<div class="feature-card fade-in">
|
|
<div class="feature-number">05</div>
|
|
<h3>Streaks</h3>
|
|
<p>Build consistency with streak tracking. Dynamic Island shows your progress live.</p>
|
|
</div>
|
|
|
|
<div class="feature-card fade-in">
|
|
<div class="feature-number">06</div>
|
|
<h3>Privacy</h3>
|
|
<p>Your data stays on your devices. iCloud sync with no third-party access.</p>
|
|
</div>
|
|
|
|
<div class="feature-card fade-in">
|
|
<div class="feature-number">07</div>
|
|
<h3>WCAG 2.1 AA</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="moods-container">
|
|
<div class="moods-header fade-in">
|
|
<span class="section-tag">The Spectrum</span>
|
|
<h2>Five moods.<br>Complete clarity.</h2>
|
|
<p>Life isn't complicated. Neither should be tracking how you feel.</p>
|
|
</div>
|
|
|
|
<div class="mood-strip fade-in">
|
|
<div class="mood-block">
|
|
<span class="mood-emoji">😄</span>
|
|
<span class="mood-label">Great</span>
|
|
</div>
|
|
<div class="mood-block">
|
|
<span class="mood-emoji">😊</span>
|
|
<span class="mood-label">Good</span>
|
|
</div>
|
|
<div class="mood-block">
|
|
<span class="mood-emoji">😐</span>
|
|
<span class="mood-label">Average</span>
|
|
</div>
|
|
<div class="mood-block">
|
|
<span class="mood-emoji">😔</span>
|
|
<span class="mood-label">Bad</span>
|
|
</div>
|
|
<div class="mood-block">
|
|
<span class="mood-emoji">😢</span>
|
|
<span class="mood-label">Horrible</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Devices Section -->
|
|
<section class="devices" id="devices">
|
|
<div class="section-header fade-in">
|
|
<div>
|
|
<span class="section-tag">Ecosystem</span>
|
|
<h2>Log anywhere</h2>
|
|
</div>
|
|
<p>From your wrist to your home screen, Feels meets you where you are.</p>
|
|
</div>
|
|
|
|
<div class="devices-grid">
|
|
<div class="device-card fade-in">
|
|
<div class="device-visual">
|
|
<div class="watch-frame">
|
|
<div class="watch-screen">
|
|
<span class="watch-mood">😊</span>
|
|
<span class="watch-status">Good</span>
|
|
<span class="watch-streak">14 Day Streak</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<h3>Apple Watch</h3>
|
|
<p>Complications show your mood and streak at a glance. Tap to log in seconds.</p>
|
|
</div>
|
|
|
|
<div class="device-card fade-in">
|
|
<div class="device-visual">
|
|
<div class="widget-frame">
|
|
<div class="widget-header">
|
|
<span class="widget-logo">Feels</span>
|
|
<span class="widget-time">Now</span>
|
|
</div>
|
|
<div class="widget-prompt">How do you feel?</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.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Testimonials -->
|
|
<section class="testimonials" id="testimonials">
|
|
<div class="testimonials-container">
|
|
<div class="testimonials-header fade-in">
|
|
<span class="section-tag">Voices</span>
|
|
<h2>What people are saying</h2>
|
|
</div>
|
|
|
|
<div class="testimonials-grid">
|
|
<div class="testimonial-card fade-in">
|
|
<p class="testimonial-quote">"The year view changed everything. Seeing three months of moods side by side revealed patterns I never noticed."</p>
|
|
<div class="testimonial-author">
|
|
<div class="author-avatar">S</div>
|
|
<div>
|
|
<div class="author-name">Sarah M.</div>
|
|
<div class="author-role">Therapist</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="testimonial-card fade-in">
|
|
<p class="testimonial-quote">"I've tried every mood tracker. This is the only one that stuck. Simplicity wins."</p>
|
|
<div class="testimonial-author">
|
|
<div class="author-avatar">J</div>
|
|
<div>
|
|
<div class="author-name">James K.</div>
|
|
<div class="author-role">Product Designer</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="testimonial-card fade-in">
|
|
<p class="testimonial-quote">"The Apple Watch complication is genius. I actually remember to log now. 47 day streak and counting."</p>
|
|
<div class="testimonial-author">
|
|
<div class="author-avatar">L</div>
|
|
<div>
|
|
<div class="author-name">Lisa T.</div>
|
|
<div class="author-role">Entrepreneur</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA Section -->
|
|
<section class="cta" id="download">
|
|
<div class="cta-content fade-in">
|
|
<span class="section-tag">Get Started</span>
|
|
<h2>Begin your journey</h2>
|
|
<p>One tap a day. A lifetime of understanding. Your emotional clarity starts here.</p>
|
|
<div class="cta-buttons">
|
|
<a href="#" 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 on App Store
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer>
|
|
<div class="footer-content">
|
|
<a href="#" class="footer-logo">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</a></li>
|
|
</ul>
|
|
<div class="footer-copy">© 2026 Feels</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 i = 0; i < 140; i++) {
|
|
const cell = document.createElement('div');
|
|
const randomMood = moods[Math.floor(Math.random() * moods.length)];
|
|
cell.className = `year-cell ${randomMood}`;
|
|
yearGrid.appendChild(cell);
|
|
}
|
|
|
|
// Scroll reveal animation
|
|
const fadeElements = document.querySelectorAll('.fade-in');
|
|
|
|
const revealOnScroll = () => {
|
|
fadeElements.forEach(element => {
|
|
const elementTop = element.getBoundingClientRect().top;
|
|
const windowHeight = window.innerHeight;
|
|
|
|
if (elementTop < windowHeight - 100) {
|
|
element.classList.add('visible');
|
|
}
|
|
});
|
|
};
|
|
|
|
window.addEventListener('scroll', revealOnScroll);
|
|
revealOnScroll();
|
|
</script>
|
|
</body>
|
|
</html>
|