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>
1149 lines
36 KiB
HTML
1149 lines
36 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 — Track Your Emotional Journey</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=Instrument+Serif:ital@0;1&family=Plus+Jakarta+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--great: #4ADE80;
|
|
--great-glow: rgba(74, 222, 128, 0.4);
|
|
--good: #FBBF24;
|
|
--good-glow: rgba(251, 191, 36, 0.4);
|
|
--average: #94A3B8;
|
|
--average-glow: rgba(148, 163, 184, 0.3);
|
|
--bad: #60A5FA;
|
|
--bad-glow: rgba(96, 165, 250, 0.4);
|
|
--horrible: #F87171;
|
|
--horrible-glow: rgba(248, 113, 113, 0.4);
|
|
|
|
--bg-primary: #0A0A0B;
|
|
--bg-secondary: #111113;
|
|
--bg-card: rgba(255, 255, 255, 0.03);
|
|
--bg-glass: rgba(255, 255, 255, 0.05);
|
|
--border-subtle: rgba(255, 255, 255, 0.06);
|
|
--text-primary: #FAFAFA;
|
|
--text-secondary: rgba(255, 255, 255, 0.6);
|
|
--text-tertiary: rgba(255, 255, 255, 0.4);
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
line-height: 1.6;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.serif {
|
|
font-family: 'Instrument Serif', Georgia, serif;
|
|
}
|
|
|
|
/* Noise texture overlay */
|
|
body::before {
|
|
content: '';
|
|
position: fixed;
|
|
inset: 0;
|
|
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
|
|
opacity: 0.03;
|
|
pointer-events: none;
|
|
z-index: 1000;
|
|
}
|
|
|
|
/* Navigation */
|
|
nav {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 100;
|
|
padding: 1.5rem 2rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
backdrop-filter: blur(20px);
|
|
background: rgba(10, 10, 11, 0.8);
|
|
border-bottom: 1px solid var(--border-subtle);
|
|
}
|
|
|
|
.logo {
|
|
font-family: 'Instrument Serif', serif;
|
|
font-size: 1.5rem;
|
|
font-weight: 400;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.nav-links {
|
|
display: flex;
|
|
gap: 2.5rem;
|
|
list-style: none;
|
|
}
|
|
|
|
.nav-links a {
|
|
color: var(--text-secondary);
|
|
text-decoration: none;
|
|
font-size: 0.875rem;
|
|
font-weight: 400;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.nav-links a:hover {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.nav-cta {
|
|
background: var(--text-primary);
|
|
color: var(--bg-primary);
|
|
padding: 0.625rem 1.25rem;
|
|
border-radius: 100px;
|
|
text-decoration: none;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
|
|
.nav-cta:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 10px 40px rgba(255, 255, 255, 0.15);
|
|
}
|
|
|
|
/* Hero Section */
|
|
.hero {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
padding: 8rem 2rem 4rem;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Floating mood orbs */
|
|
.orb {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
filter: blur(80px);
|
|
opacity: 0.6;
|
|
animation: float 20s ease-in-out infinite;
|
|
}
|
|
|
|
.orb-1 {
|
|
width: 400px;
|
|
height: 400px;
|
|
background: var(--great);
|
|
top: 10%;
|
|
left: 10%;
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
.orb-2 {
|
|
width: 300px;
|
|
height: 300px;
|
|
background: var(--good);
|
|
top: 60%;
|
|
right: 15%;
|
|
animation-delay: -5s;
|
|
}
|
|
|
|
.orb-3 {
|
|
width: 250px;
|
|
height: 250px;
|
|
background: var(--bad);
|
|
bottom: 20%;
|
|
left: 20%;
|
|
animation-delay: -10s;
|
|
}
|
|
|
|
.orb-4 {
|
|
width: 200px;
|
|
height: 200px;
|
|
background: var(--horrible);
|
|
top: 30%;
|
|
right: 10%;
|
|
animation-delay: -15s;
|
|
}
|
|
|
|
@keyframes float {
|
|
0%, 100% { transform: translate(0, 0) scale(1); }
|
|
25% { transform: translate(30px, -30px) scale(1.05); }
|
|
50% { transform: translate(-20px, 20px) scale(0.95); }
|
|
75% { transform: translate(20px, 30px) scale(1.02); }
|
|
}
|
|
|
|
.hero-content {
|
|
position: relative;
|
|
z-index: 10;
|
|
max-width: 900px;
|
|
}
|
|
|
|
.hero-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
background: var(--bg-glass);
|
|
border: 1px solid var(--border-subtle);
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 100px;
|
|
font-size: 0.8125rem;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 2rem;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.hero-badge::before {
|
|
content: '';
|
|
width: 6px;
|
|
height: 6px;
|
|
background: var(--great);
|
|
border-radius: 50%;
|
|
animation: pulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; transform: scale(1); }
|
|
50% { opacity: 0.5; transform: scale(1.2); }
|
|
}
|
|
|
|
.hero h1 {
|
|
font-family: 'Instrument Serif', serif;
|
|
font-size: clamp(3rem, 8vw, 6rem);
|
|
font-weight: 400;
|
|
line-height: 1.1;
|
|
letter-spacing: -0.03em;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.hero h1 em {
|
|
font-style: italic;
|
|
background: linear-gradient(135deg, var(--great), var(--good));
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.hero-description {
|
|
font-size: 1.25rem;
|
|
color: var(--text-secondary);
|
|
max-width: 540px;
|
|
margin: 0 auto 3rem;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.hero-cta-group {
|
|
display: flex;
|
|
gap: 1rem;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.btn-primary {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
background: var(--text-primary);
|
|
color: var(--bg-primary);
|
|
padding: 1rem 2rem;
|
|
border-radius: 100px;
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
font-size: 1rem;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 20px 60px rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.btn-primary svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.btn-secondary {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
background: var(--bg-glass);
|
|
border: 1px solid var(--border-subtle);
|
|
color: var(--text-primary);
|
|
padding: 1rem 2rem;
|
|
border-radius: 100px;
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
font-size: 1rem;
|
|
backdrop-filter: blur(10px);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-color: rgba(255, 255, 255, 0.15);
|
|
}
|
|
|
|
/* Phone Mockup */
|
|
.hero-mockup {
|
|
margin-top: 4rem;
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
|
|
.phone-frame {
|
|
width: 280px;
|
|
height: 580px;
|
|
background: linear-gradient(145deg, #1a1a1c, #0d0d0e);
|
|
border-radius: 45px;
|
|
padding: 12px;
|
|
box-shadow:
|
|
0 50px 100px rgba(0, 0, 0, 0.5),
|
|
inset 0 1px 1px rgba(255, 255, 255, 0.1);
|
|
position: relative;
|
|
}
|
|
|
|
.phone-screen {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: var(--bg-secondary);
|
|
border-radius: 35px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.phone-notch {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 120px;
|
|
height: 30px;
|
|
background: #000;
|
|
border-radius: 0 0 20px 20px;
|
|
z-index: 10;
|
|
}
|
|
|
|
.phone-content {
|
|
padding: 50px 20px 20px;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.phone-header {
|
|
text-align: center;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.phone-header h3 {
|
|
font-family: 'Instrument Serif', serif;
|
|
font-size: 1.5rem;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.phone-header p {
|
|
font-size: 0.75rem;
|
|
color: var(--text-tertiary);
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
/* Year Grid Visualization */
|
|
.year-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(12, 1fr);
|
|
gap: 3px;
|
|
flex: 1;
|
|
align-content: start;
|
|
}
|
|
|
|
.year-grid .day {
|
|
aspect-ratio: 1;
|
|
border-radius: 2px;
|
|
opacity: 0;
|
|
animation: fadeInDay 0.5s ease forwards;
|
|
}
|
|
|
|
.year-grid .day.great { background: var(--great); }
|
|
.year-grid .day.good { background: var(--good); }
|
|
.year-grid .day.average { background: var(--average); }
|
|
.year-grid .day.bad { background: var(--bad); }
|
|
.year-grid .day.horrible { background: var(--horrible); }
|
|
.year-grid .day.empty { background: rgba(255, 255, 255, 0.05); }
|
|
|
|
@keyframes fadeInDay {
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
/* Section styling */
|
|
section {
|
|
padding: 8rem 2rem;
|
|
position: relative;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.section-label {
|
|
font-size: 0.75rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.15em;
|
|
color: var(--text-tertiary);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.section-title {
|
|
font-family: 'Instrument Serif', serif;
|
|
font-size: clamp(2rem, 5vw, 3.5rem);
|
|
font-weight: 400;
|
|
line-height: 1.2;
|
|
letter-spacing: -0.02em;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.section-description {
|
|
font-size: 1.125rem;
|
|
color: var(--text-secondary);
|
|
max-width: 500px;
|
|
font-weight: 300;
|
|
}
|
|
|
|
/* Features Section */
|
|
.features {
|
|
background: var(--bg-secondary);
|
|
}
|
|
|
|
.features-header {
|
|
text-align: center;
|
|
margin-bottom: 5rem;
|
|
}
|
|
|
|
.features-header .section-description {
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.features-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.feature-card {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: 24px;
|
|
padding: 2rem;
|
|
transition: all 0.4s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.feature-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 1px;
|
|
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
|
|
opacity: 0;
|
|
transition: opacity 0.4s ease;
|
|
}
|
|
|
|
.feature-card:hover {
|
|
transform: translateY(-4px);
|
|
border-color: rgba(255, 255, 255, 0.1);
|
|
background: rgba(255, 255, 255, 0.04);
|
|
}
|
|
|
|
.feature-card:hover::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.feature-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 14px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 1.5rem;
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.feature-icon.green { background: rgba(74, 222, 128, 0.15); }
|
|
.feature-icon.yellow { background: rgba(251, 191, 36, 0.15); }
|
|
.feature-icon.blue { background: rgba(96, 165, 250, 0.15); }
|
|
.feature-icon.purple { background: rgba(168, 85, 247, 0.15); }
|
|
.feature-icon.red { background: rgba(248, 113, 113, 0.15); }
|
|
.feature-icon.gray { background: rgba(148, 163, 184, 0.15); }
|
|
.feature-icon.cyan { background: rgba(34, 211, 238, 0.15); }
|
|
|
|
.feature-card h3 {
|
|
font-size: 1.125rem;
|
|
font-weight: 600;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.feature-card p {
|
|
font-size: 0.9375rem;
|
|
color: var(--text-secondary);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* Devices Section */
|
|
.devices {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.devices-content {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 4rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.devices-visual {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-end;
|
|
gap: 2rem;
|
|
position: relative;
|
|
}
|
|
|
|
/* Watch mockup */
|
|
.watch-frame {
|
|
width: 160px;
|
|
height: 190px;
|
|
background: linear-gradient(145deg, #2a2a2c, #1a1a1c);
|
|
border-radius: 40px;
|
|
padding: 8px;
|
|
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.watch-screen {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: var(--bg-primary);
|
|
border-radius: 34px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.75rem;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.watch-mood-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 6px;
|
|
}
|
|
|
|
.watch-mood {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.watch-mood.great { background: rgba(74, 222, 128, 0.2); }
|
|
.watch-mood.good { background: rgba(251, 191, 36, 0.2); }
|
|
.watch-mood.average { background: rgba(148, 163, 184, 0.2); }
|
|
.watch-mood.bad { background: rgba(96, 165, 250, 0.2); }
|
|
.watch-mood.horrible { background: rgba(248, 113, 113, 0.2); }
|
|
|
|
.watch-label {
|
|
font-size: 0.625rem;
|
|
color: var(--text-tertiary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
}
|
|
|
|
/* Widget mockup */
|
|
.widget-frame {
|
|
width: 170px;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
backdrop-filter: blur(20px);
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: 24px;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.widget-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.widget-title {
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.widget-streak {
|
|
font-size: 0.625rem;
|
|
color: var(--good);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.widget-moods {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.widget-mood {
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 0.875rem;
|
|
cursor: pointer;
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.widget-mood:hover {
|
|
transform: scale(1.15);
|
|
}
|
|
|
|
.widget-mood.great { background: rgba(74, 222, 128, 0.2); }
|
|
.widget-mood.good { background: rgba(251, 191, 36, 0.2); }
|
|
.widget-mood.average { background: rgba(148, 163, 184, 0.2); }
|
|
.widget-mood.bad { background: rgba(96, 165, 250, 0.2); }
|
|
.widget-mood.horrible { background: rgba(248, 113, 113, 0.2); }
|
|
|
|
.devices-text ul {
|
|
list-style: none;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.devices-text li {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 1rem;
|
|
margin-bottom: 1.25rem;
|
|
font-size: 1rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.devices-text li::before {
|
|
content: '→';
|
|
color: var(--great);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Testimonials */
|
|
.testimonials {
|
|
background: var(--bg-secondary);
|
|
}
|
|
|
|
.testimonials-header {
|
|
text-align: center;
|
|
margin-bottom: 4rem;
|
|
}
|
|
|
|
.testimonials-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.testimonial-card {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: 20px;
|
|
padding: 2rem;
|
|
}
|
|
|
|
.testimonial-stars {
|
|
color: var(--good);
|
|
font-size: 0.875rem;
|
|
letter-spacing: 0.1em;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.testimonial-text {
|
|
font-size: 1rem;
|
|
line-height: 1.7;
|
|
margin-bottom: 1.5rem;
|
|
font-style: italic;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.testimonial-author {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.testimonial-avatar {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, var(--great), var(--good));
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 600;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.testimonial-name {
|
|
font-weight: 500;
|
|
font-size: 0.9375rem;
|
|
}
|
|
|
|
.testimonial-handle {
|
|
font-size: 0.8125rem;
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
/* CTA Section */
|
|
.cta {
|
|
text-align: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.cta::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 600px;
|
|
height: 600px;
|
|
background: radial-gradient(circle, var(--great-glow) 0%, transparent 70%);
|
|
opacity: 0.3;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.cta-content {
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
|
|
.cta .section-title {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.cta .section-description {
|
|
margin: 0 auto 2.5rem;
|
|
}
|
|
|
|
.app-store-badge {
|
|
display: inline-block;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.app-store-badge:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.app-store-badge img {
|
|
height: 54px;
|
|
}
|
|
|
|
/* Footer */
|
|
footer {
|
|
padding: 3rem 2rem;
|
|
border-top: 1px solid var(--border-subtle);
|
|
}
|
|
|
|
.footer-content {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.footer-logo {
|
|
font-family: 'Instrument Serif', serif;
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.footer-links {
|
|
display: flex;
|
|
gap: 2rem;
|
|
list-style: none;
|
|
}
|
|
|
|
.footer-links a {
|
|
color: var(--text-tertiary);
|
|
text-decoration: none;
|
|
font-size: 0.875rem;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.footer-links a:hover {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.footer-copy {
|
|
font-size: 0.8125rem;
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
/* Scroll animations */
|
|
.reveal {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
transition: opacity 0.8s ease, transform 0.8s ease;
|
|
}
|
|
|
|
.reveal.visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* Mobile responsiveness */
|
|
@media (max-width: 768px) {
|
|
nav {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.nav-links {
|
|
display: none;
|
|
}
|
|
|
|
.hero {
|
|
padding: 7rem 1.5rem 3rem;
|
|
}
|
|
|
|
.hero-description {
|
|
font-size: 1.125rem;
|
|
}
|
|
|
|
.hero-cta-group {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.phone-frame {
|
|
width: 240px;
|
|
height: 500px;
|
|
}
|
|
|
|
section {
|
|
padding: 5rem 1.5rem;
|
|
}
|
|
|
|
.devices-content {
|
|
grid-template-columns: 1fr;
|
|
gap: 3rem;
|
|
}
|
|
|
|
.devices-visual {
|
|
order: -1;
|
|
}
|
|
|
|
.footer-content {
|
|
flex-direction: column;
|
|
text-align: center;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<nav>
|
|
<div class="logo">Feels</div>
|
|
<ul class="nav-links">
|
|
<li><a href="#features">Features</a></li>
|
|
<li><a href="#devices">Devices</a></li>
|
|
<li><a href="#testimonials">Reviews</a></li>
|
|
</ul>
|
|
<a href="#download" class="nav-cta">Download</a>
|
|
</nav>
|
|
|
|
<section class="hero">
|
|
<div class="orb orb-1"></div>
|
|
<div class="orb orb-2"></div>
|
|
<div class="orb orb-3"></div>
|
|
<div class="orb orb-4"></div>
|
|
|
|
<div class="hero-content">
|
|
<div class="hero-badge">Now available for Apple Watch</div>
|
|
<h1>Understand your <em>emotional</em> patterns</h1>
|
|
<p class="hero-description">Track your daily mood in seconds. See your year at a glance. Build awareness that lasts a lifetime.</p>
|
|
<div class="hero-cta-group">
|
|
<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-mockup">
|
|
<div class="phone-frame">
|
|
<div class="phone-screen">
|
|
<div class="phone-notch"></div>
|
|
<div class="phone-content">
|
|
<div class="phone-header">
|
|
<h3>2026</h3>
|
|
<p>Your year in feelings</p>
|
|
</div>
|
|
<div class="year-grid" id="yearGrid"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="features" id="features">
|
|
<div class="container">
|
|
<div class="features-header reveal">
|
|
<p class="section-label">Features</p>
|
|
<h2 class="section-title">Everything you need to<br>know yourself better</h2>
|
|
<p class="section-description">Simple enough for daily use. Powerful enough for real insights.</p>
|
|
</div>
|
|
|
|
<div class="features-grid">
|
|
<div class="feature-card reveal">
|
|
<div class="feature-icon green">😊</div>
|
|
<h3>Five Simple Moods</h3>
|
|
<p>Great, Good, Average, Bad, or Horrible. No complicated scales—just honest, quick reflection.</p>
|
|
</div>
|
|
<div class="feature-card reveal">
|
|
<div class="feature-icon yellow">📊</div>
|
|
<h3>Year Visualization</h3>
|
|
<p>See 365 days of emotions in one beautiful view. Spot patterns you never knew existed.</p>
|
|
</div>
|
|
<div class="feature-card reveal">
|
|
<div class="feature-icon blue">⌚</div>
|
|
<h3>Apple Watch App</h3>
|
|
<p>Log your mood from your wrist. Complications keep your streak visible all day.</p>
|
|
</div>
|
|
<div class="feature-card reveal">
|
|
<div class="feature-icon purple">🔮</div>
|
|
<h3>Interactive Widgets</h3>
|
|
<p>Vote directly from your home screen. No need to open the app.</p>
|
|
</div>
|
|
<div class="feature-card reveal">
|
|
<div class="feature-icon red">🔥</div>
|
|
<h3>Streak Tracking</h3>
|
|
<p>Build the habit of self-awareness. Your streak shows on Dynamic Island.</p>
|
|
</div>
|
|
<div class="feature-card reveal">
|
|
<div class="feature-icon gray">🔒</div>
|
|
<h3>Privacy First</h3>
|
|
<p>Your feelings stay yours. All data lives on your devices with iCloud sync.</p>
|
|
</div>
|
|
<div class="feature-card reveal">
|
|
<div class="feature-icon cyan">♿</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>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="devices" id="devices">
|
|
<div class="container">
|
|
<div class="devices-content">
|
|
<div class="devices-text reveal">
|
|
<p class="section-label">Ecosystem</p>
|
|
<h2 class="section-title">Your mood,<br>everywhere you are</h2>
|
|
<p class="section-description">iPhone, Apple Watch, widgets, Siri—log however feels natural in the moment.</p>
|
|
<ul>
|
|
<li>Watch complications show today's mood & streak</li>
|
|
<li>"Hey Siri, log my mood as great"</li>
|
|
<li>HealthKit integration for deeper insights</li>
|
|
<li>iCloud keeps everything in sync</li>
|
|
</ul>
|
|
</div>
|
|
<div class="devices-visual reveal">
|
|
<div class="watch-frame">
|
|
<div class="watch-screen">
|
|
<span class="watch-label">How do you feel?</span>
|
|
<div class="watch-mood-grid">
|
|
<div class="watch-mood great">😀</div>
|
|
<div class="watch-mood good">🙂</div>
|
|
<div class="watch-mood average">😐</div>
|
|
<div class="watch-mood bad">😕</div>
|
|
<div class="watch-mood horrible">💩</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="widget-frame">
|
|
<div class="widget-header">
|
|
<span class="widget-title">Feels</span>
|
|
<span class="widget-streak">🔥 12 days</span>
|
|
</div>
|
|
<div class="widget-moods">
|
|
<div class="widget-mood great">😀</div>
|
|
<div class="widget-mood good">🙂</div>
|
|
<div class="widget-mood average">😐</div>
|
|
<div class="widget-mood bad">😕</div>
|
|
<div class="widget-mood horrible">💩</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="testimonials" id="testimonials">
|
|
<div class="container">
|
|
<div class="testimonials-header reveal">
|
|
<p class="section-label">Reviews</p>
|
|
<h2 class="section-title">Loved by people who<br>care about their wellbeing</h2>
|
|
</div>
|
|
|
|
<div class="testimonials-grid">
|
|
<div class="testimonial-card reveal">
|
|
<div class="testimonial-stars">★★★★★</div>
|
|
<p class="testimonial-text">"I've tried so many mood trackers but this is the only one that stuck. The year view is incredibly motivating—I can actually see my progress."</p>
|
|
<div class="testimonial-author">
|
|
<div class="testimonial-avatar">SK</div>
|
|
<div>
|
|
<div class="testimonial-name">Sarah K.</div>
|
|
<div class="testimonial-handle">Using Feels for 8 months</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="testimonial-card reveal">
|
|
<div class="testimonial-stars">★★★★★</div>
|
|
<p class="testimonial-text">"The Watch app changed everything. I log my mood 3x more consistently now. The complication showing my streak keeps me accountable."</p>
|
|
<div class="testimonial-author">
|
|
<div class="testimonial-avatar">MR</div>
|
|
<div>
|
|
<div class="testimonial-name">Marcus R.</div>
|
|
<div class="testimonial-handle">142 day streak</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="testimonial-card reveal">
|
|
<div class="testimonial-stars">★★★★★</div>
|
|
<p class="testimonial-text">"Finally, a mood tracker that respects my privacy. No account needed, no data harvesting—just a beautiful app that helps me understand myself."</p>
|
|
<div class="testimonial-author">
|
|
<div class="testimonial-avatar">JL</div>
|
|
<div>
|
|
<div class="testimonial-name">Jamie L.</div>
|
|
<div class="testimonial-handle">App Store review</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="cta" id="download">
|
|
<div class="container">
|
|
<div class="cta-content reveal">
|
|
<p class="section-label">Get started</p>
|
|
<h2 class="section-title">Begin your journey<br>of self-awareness</h2>
|
|
<p class="section-description">Free to download. No account required. Your feelings, your data, your insights.</p>
|
|
<a href="https://apps.apple.com" class="app-store-badge">
|
|
<img src="https://developer.apple.com/assets/elements/badges/download-on-the-app-store.svg" alt="Download on the App Store">
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer>
|
|
<div class="footer-content">
|
|
<div class="footer-logo">Feels</div>
|
|
<ul class="footer-links">
|
|
<li><a href="#">Privacy Policy</a></li>
|
|
<li><a href="#">Terms of Service</a></li>
|
|
<li><a href="#">Support</a></li>
|
|
<li><a href="#">Press Kit</a></li>
|
|
</ul>
|
|
<p class="footer-copy">© 2026 Feels. Made with 💚 for your wellbeing.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// Generate year grid with random moods
|
|
function generateYearGrid() {
|
|
const grid = document.getElementById('yearGrid');
|
|
const moods = ['great', 'good', 'average', 'bad', 'horrible', 'empty'];
|
|
const weights = [0.25, 0.30, 0.20, 0.10, 0.05, 0.10]; // Probability distribution
|
|
|
|
for (let i = 0; i < 180; i++) { // ~6 months of data shown
|
|
const day = document.createElement('div');
|
|
day.className = 'day';
|
|
|
|
// Weighted random selection
|
|
const rand = Math.random();
|
|
let cumulative = 0;
|
|
for (let j = 0; j < moods.length; j++) {
|
|
cumulative += weights[j];
|
|
if (rand <= cumulative) {
|
|
day.classList.add(moods[j]);
|
|
break;
|
|
}
|
|
}
|
|
|
|
// Staggered animation delay
|
|
day.style.animationDelay = `${i * 10}ms`;
|
|
grid.appendChild(day);
|
|
}
|
|
}
|
|
|
|
// Scroll reveal animation
|
|
function reveal() {
|
|
const reveals = document.querySelectorAll('.reveal');
|
|
|
|
reveals.forEach(element => {
|
|
const windowHeight = window.innerHeight;
|
|
const elementTop = element.getBoundingClientRect().top;
|
|
const elementVisible = 100;
|
|
|
|
if (elementTop < windowHeight - elementVisible) {
|
|
element.classList.add('visible');
|
|
}
|
|
});
|
|
}
|
|
|
|
// Smooth scroll for anchor links
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
anchor.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
const target = document.querySelector(this.getAttribute('href'));
|
|
if (target) {
|
|
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
}
|
|
});
|
|
});
|
|
|
|
// Initialize
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
generateYearGrid();
|
|
reveal();
|
|
});
|
|
|
|
window.addEventListener('scroll', reveal);
|
|
</script>
|
|
</body>
|
|
</html>
|