406d9ee4fd
Debug features (DEBUG builds only): - WidgetExporter: Export all widget variants to PNG (light/dark modes) - Live Activity lock screen export with configurable streak - Test notifications button to preview all personality packs - Settings buttons for export and notification testing Research: - Competitor analysis docs (Daylio, Bearable, Reflectly, etc.) - App Store screenshot reference materials 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
1237 lines
50 KiB
HTML
1237 lines
50 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Competitor Analysis - Mood Tracking Apps</title>
|
||
<style>
|
||
:root {
|
||
--bg-primary: #0a0a0a;
|
||
--bg-secondary: #141414;
|
||
--bg-card: #1a1a1a;
|
||
--text-primary: #ffffff;
|
||
--text-secondary: #a0a0a0;
|
||
--accent: #6366f1;
|
||
--accent-hover: #818cf8;
|
||
--border: #2a2a2a;
|
||
--success: #22c55e;
|
||
--warning: #f59e0b;
|
||
}
|
||
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
|
||
background: var(--bg-primary);
|
||
color: var(--text-primary);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1400px;
|
||
margin: 0 auto;
|
||
padding: 2rem;
|
||
}
|
||
|
||
header {
|
||
text-align: center;
|
||
padding: 3rem 0;
|
||
border-bottom: 1px solid var(--border);
|
||
margin-bottom: 3rem;
|
||
}
|
||
|
||
header h1 {
|
||
font-size: 2.5rem;
|
||
margin-bottom: 0.5rem;
|
||
background: linear-gradient(135deg, var(--accent), #a855f7);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
|
||
header p {
|
||
color: var(--text-secondary);
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
/* Navigation */
|
||
.nav-tabs {
|
||
display: flex;
|
||
gap: 0.5rem;
|
||
margin-bottom: 2rem;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
}
|
||
|
||
.nav-tab {
|
||
padding: 0.75rem 1.5rem;
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border);
|
||
border-radius: 8px;
|
||
color: var(--text-secondary);
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
font-size: 0.95rem;
|
||
}
|
||
|
||
.nav-tab:hover {
|
||
border-color: var(--accent);
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.nav-tab.active {
|
||
background: var(--accent);
|
||
border-color: var(--accent);
|
||
color: white;
|
||
}
|
||
|
||
/* Overview Section */
|
||
.overview-section {
|
||
margin-bottom: 3rem;
|
||
}
|
||
|
||
.comparison-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
background: var(--bg-card);
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.comparison-table th,
|
||
.comparison-table td {
|
||
padding: 1rem;
|
||
text-align: left;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
|
||
.comparison-table th {
|
||
background: var(--bg-secondary);
|
||
color: var(--text-secondary);
|
||
font-weight: 600;
|
||
font-size: 0.85rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
|
||
.comparison-table tr:hover {
|
||
background: var(--bg-secondary);
|
||
}
|
||
|
||
.comparison-table .app-name {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
.comparison-table .app-icon-small {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.rating-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.25rem;
|
||
background: var(--bg-secondary);
|
||
padding: 0.25rem 0.5rem;
|
||
border-radius: 4px;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.rating-badge .star {
|
||
color: #fbbf24;
|
||
}
|
||
|
||
/* Competitor Cards */
|
||
.competitor-section {
|
||
display: none;
|
||
}
|
||
|
||
.competitor-section.active {
|
||
display: block;
|
||
}
|
||
|
||
.competitor-header {
|
||
display: flex;
|
||
gap: 2rem;
|
||
align-items: flex-start;
|
||
margin-bottom: 2rem;
|
||
padding: 2rem;
|
||
background: var(--bg-card);
|
||
border-radius: 16px;
|
||
border: 1px solid var(--border);
|
||
}
|
||
|
||
.app-icon {
|
||
width: 120px;
|
||
height: 120px;
|
||
border-radius: 24px;
|
||
box-shadow: 0 8px 32px rgba(0,0,0,0.3);
|
||
}
|
||
|
||
.app-info h2 {
|
||
font-size: 1.75rem;
|
||
margin-bottom: 0.25rem;
|
||
}
|
||
|
||
.app-info .subtitle {
|
||
color: var(--text-secondary);
|
||
font-size: 1.1rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.app-meta {
|
||
display: flex;
|
||
gap: 1.5rem;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.meta-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.meta-item .label {
|
||
font-size: 0.75rem;
|
||
color: var(--text-secondary);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
|
||
.meta-item .value {
|
||
font-size: 1.1rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.app-store-link {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
background: var(--accent);
|
||
color: white;
|
||
padding: 0.75rem 1.5rem;
|
||
border-radius: 8px;
|
||
text-decoration: none;
|
||
font-weight: 500;
|
||
margin-top: 1rem;
|
||
transition: background 0.2s;
|
||
}
|
||
|
||
.app-store-link:hover {
|
||
background: var(--accent-hover);
|
||
}
|
||
|
||
/* Content Grid */
|
||
.content-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 1.5rem;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
@media (max-width: 900px) {
|
||
.content-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
.card {
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border);
|
||
border-radius: 12px;
|
||
padding: 1.5rem;
|
||
}
|
||
|
||
.card h3 {
|
||
font-size: 1rem;
|
||
color: var(--text-secondary);
|
||
margin-bottom: 1rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
|
||
.card p {
|
||
color: var(--text-primary);
|
||
line-height: 1.7;
|
||
}
|
||
|
||
.feature-list {
|
||
list-style: none;
|
||
}
|
||
|
||
.feature-list li {
|
||
padding: 0.5rem 0;
|
||
border-bottom: 1px solid var(--border);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.feature-list li:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.feature-list .check {
|
||
color: var(--success);
|
||
}
|
||
|
||
.pricing-table {
|
||
width: 100%;
|
||
}
|
||
|
||
.pricing-table td {
|
||
padding: 0.5rem 0;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
|
||
.pricing-table td:last-child {
|
||
text-align: right;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* Screenshots */
|
||
.screenshots-section {
|
||
margin-top: 2rem;
|
||
}
|
||
|
||
.screenshots-section h3 {
|
||
font-size: 1rem;
|
||
color: var(--text-secondary);
|
||
margin-bottom: 1rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
|
||
.screenshots-grid {
|
||
display: flex;
|
||
gap: 1rem;
|
||
overflow-x: auto;
|
||
padding-bottom: 1rem;
|
||
scroll-snap-type: x mandatory;
|
||
}
|
||
|
||
.screenshot {
|
||
flex-shrink: 0;
|
||
width: 200px;
|
||
border-radius: 12px;
|
||
box-shadow: 0 4px 16px rgba(0,0,0,0.3);
|
||
scroll-snap-align: start;
|
||
cursor: pointer;
|
||
transition: transform 0.2s;
|
||
}
|
||
|
||
.screenshot:hover {
|
||
transform: scale(1.02);
|
||
}
|
||
|
||
.no-screenshots {
|
||
color: var(--text-secondary);
|
||
font-style: italic;
|
||
padding: 2rem;
|
||
text-align: center;
|
||
background: var(--bg-secondary);
|
||
border-radius: 8px;
|
||
}
|
||
|
||
/* Analysis Cards */
|
||
.analysis-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
gap: 1rem;
|
||
margin-top: 1.5rem;
|
||
}
|
||
|
||
.analysis-card {
|
||
background: var(--bg-secondary);
|
||
border-radius: 8px;
|
||
padding: 1rem;
|
||
}
|
||
|
||
.analysis-card h4 {
|
||
color: var(--accent);
|
||
margin-bottom: 0.5rem;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.analysis-card ul {
|
||
list-style: none;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.analysis-card li {
|
||
padding: 0.25rem 0;
|
||
padding-left: 1rem;
|
||
position: relative;
|
||
}
|
||
|
||
.analysis-card li::before {
|
||
content: "•";
|
||
position: absolute;
|
||
left: 0;
|
||
color: var(--accent);
|
||
}
|
||
|
||
/* Modal for screenshots */
|
||
.modal {
|
||
display: none;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0,0,0,0.9);
|
||
z-index: 1000;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.modal.active {
|
||
display: flex;
|
||
}
|
||
|
||
.modal img {
|
||
max-height: 90vh;
|
||
max-width: 90vw;
|
||
border-radius: 12px;
|
||
}
|
||
|
||
.modal-close {
|
||
position: absolute;
|
||
top: 1rem;
|
||
right: 1rem;
|
||
background: var(--bg-card);
|
||
border: none;
|
||
color: white;
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 50%;
|
||
cursor: pointer;
|
||
font-size: 1.5rem;
|
||
}
|
||
|
||
/* Feature comparison matrix */
|
||
.feature-matrix {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: 0.9rem;
|
||
margin-top: 2rem;
|
||
}
|
||
|
||
.feature-matrix th,
|
||
.feature-matrix td {
|
||
padding: 0.75rem;
|
||
border: 1px solid var(--border);
|
||
text-align: center;
|
||
}
|
||
|
||
.feature-matrix th {
|
||
background: var(--bg-secondary);
|
||
}
|
||
|
||
.feature-matrix td:first-child {
|
||
text-align: left;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.feature-matrix .yes {
|
||
color: var(--success);
|
||
}
|
||
|
||
.feature-matrix .no {
|
||
color: var(--text-secondary);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<header>
|
||
<h1>Competitor Analysis</h1>
|
||
<p>Top 5 Mood Tracking Apps on the iOS App Store</p>
|
||
</header>
|
||
|
||
<nav class="nav-tabs">
|
||
<button class="nav-tab active" onclick="showSection('overview')">Overview</button>
|
||
<button class="nav-tab" onclick="showSection('daylio')">Daylio</button>
|
||
<button class="nav-tab" onclick="showSection('reflectly')">Reflectly</button>
|
||
<button class="nav-tab" onclick="showSection('moodnotes')">Moodnotes</button>
|
||
<button class="nav-tab" onclick="showSection('moodistory')">Moodistory</button>
|
||
<button class="nav-tab" onclick="showSection('bearable')">Bearable</button>
|
||
</nav>
|
||
|
||
<!-- Overview Section -->
|
||
<section id="overview" class="competitor-section active">
|
||
<div class="overview-section">
|
||
<table class="comparison-table">
|
||
<thead>
|
||
<tr>
|
||
<th>App</th>
|
||
<th>Rating</th>
|
||
<th>Reviews</th>
|
||
<th>Category</th>
|
||
<th>Price</th>
|
||
<th>Differentiator</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr onclick="showSection('daylio')" style="cursor:pointer">
|
||
<td>
|
||
<div class="app-name">
|
||
<img src="daylio/app_icon.jpg" alt="Daylio" class="app-icon-small">
|
||
<span>Daylio</span>
|
||
</div>
|
||
</td>
|
||
<td><span class="rating-badge"><span class="star">★</span> 4.8</span></td>
|
||
<td>57K</td>
|
||
<td>Lifestyle</td>
|
||
<td>Free + IAP</td>
|
||
<td>No-typing micro-diary</td>
|
||
</tr>
|
||
<tr onclick="showSection('reflectly')" style="cursor:pointer">
|
||
<td>
|
||
<div class="app-name">
|
||
<img src="reflectly/app_icon.jpg" alt="Reflectly" class="app-icon-small">
|
||
<span>Reflectly</span>
|
||
</div>
|
||
</td>
|
||
<td><span class="rating-badge"><span class="star">★</span> 4.6</span></td>
|
||
<td>82K</td>
|
||
<td>Health & Fitness</td>
|
||
<td>Free + IAP</td>
|
||
<td>AI-powered journaling</td>
|
||
</tr>
|
||
<tr onclick="showSection('moodnotes')" style="cursor:pointer">
|
||
<td>
|
||
<div class="app-name">
|
||
<img src="moodnotes/app_icon.jpg" alt="Moodnotes" class="app-icon-small">
|
||
<span>Moodnotes</span>
|
||
</div>
|
||
</td>
|
||
<td><span class="rating-badge"><span class="star">★</span> 4.7</span></td>
|
||
<td>11K</td>
|
||
<td>Health & Fitness</td>
|
||
<td>Free + IAP</td>
|
||
<td>CBT-based, clinical</td>
|
||
</tr>
|
||
<tr onclick="showSection('moodistory')" style="cursor:pointer">
|
||
<td>
|
||
<div class="app-name">
|
||
<img src="moodistory/app_icon.jpg" alt="Moodistory" class="app-icon-small">
|
||
<span>Moodistory</span>
|
||
</div>
|
||
</td>
|
||
<td><span class="rating-badge"><span class="star">★</span> 4.8</span></td>
|
||
<td>846</td>
|
||
<td>Health & Fitness</td>
|
||
<td>Free + IAP</td>
|
||
<td>Privacy-first, lightweight</td>
|
||
</tr>
|
||
<tr onclick="showSection('bearable')" style="cursor:pointer">
|
||
<td>
|
||
<div class="app-name">
|
||
<img src="bearable/app_icon.jpg" alt="Bearable" class="app-icon-small">
|
||
<span>Bearable</span>
|
||
</div>
|
||
</td>
|
||
<td><span class="rating-badge"><span class="star">★</span> 4.8</span></td>
|
||
<td>4.7K</td>
|
||
<td>Health & Fitness</td>
|
||
<td>Free + IAP</td>
|
||
<td>Health/symptom tracking</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<table class="feature-matrix">
|
||
<thead>
|
||
<tr>
|
||
<th>Feature</th>
|
||
<th>Daylio</th>
|
||
<th>Reflectly</th>
|
||
<th>Moodnotes</th>
|
||
<th>Moodistory</th>
|
||
<th>Bearable</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Quick tap logging</td>
|
||
<td class="yes">✓</td>
|
||
<td class="no">—</td>
|
||
<td class="no">—</td>
|
||
<td class="yes">✓</td>
|
||
<td class="yes">✓</td>
|
||
</tr>
|
||
<tr>
|
||
<td>AI features</td>
|
||
<td class="no">—</td>
|
||
<td class="yes">✓</td>
|
||
<td class="no">—</td>
|
||
<td class="no">—</td>
|
||
<td class="no">—</td>
|
||
</tr>
|
||
<tr>
|
||
<td>CBT-based</td>
|
||
<td class="no">—</td>
|
||
<td class="yes">✓</td>
|
||
<td class="yes">✓</td>
|
||
<td class="no">—</td>
|
||
<td class="no">—</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Apple Watch</td>
|
||
<td class="yes">✓</td>
|
||
<td class="no">—</td>
|
||
<td class="yes">✓</td>
|
||
<td class="yes">✓</td>
|
||
<td class="no">—</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Apple Health</td>
|
||
<td class="yes">✓</td>
|
||
<td class="no">—</td>
|
||
<td class="no">—</td>
|
||
<td class="yes">✓</td>
|
||
<td class="yes">✓</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Year in Pixels</td>
|
||
<td class="yes">✓</td>
|
||
<td class="no">—</td>
|
||
<td class="no">—</td>
|
||
<td class="yes">✓</td>
|
||
<td class="no">—</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Widgets</td>
|
||
<td class="yes">✓</td>
|
||
<td class="yes">✓</td>
|
||
<td class="no">—</td>
|
||
<td class="yes">✓</td>
|
||
<td class="no">—</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Voice input</td>
|
||
<td class="yes">✓</td>
|
||
<td class="yes">✓</td>
|
||
<td class="no">—</td>
|
||
<td class="no">—</td>
|
||
<td class="no">—</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Export data</td>
|
||
<td class="yes">✓</td>
|
||
<td class="yes">✓</td>
|
||
<td class="yes">✓</td>
|
||
<td class="yes">✓</td>
|
||
<td class="yes">✓</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Daylio Section -->
|
||
<section id="daylio" class="competitor-section">
|
||
<div class="competitor-header">
|
||
<img src="daylio/app_icon.jpg" alt="Daylio" class="app-icon">
|
||
<div class="app-info">
|
||
<h2>Daylio Journal - Daily Diary</h2>
|
||
<p class="subtitle">Mood Tracker, Health, Habits</p>
|
||
<div class="app-meta">
|
||
<div class="meta-item">
|
||
<span class="label">Rating</span>
|
||
<span class="value">★ 4.8</span>
|
||
</div>
|
||
<div class="meta-item">
|
||
<span class="label">Reviews</span>
|
||
<span class="value">57,048</span>
|
||
</div>
|
||
<div class="meta-item">
|
||
<span class="label">Developer</span>
|
||
<span class="value">Relaxio s.r.o.</span>
|
||
</div>
|
||
<div class="meta-item">
|
||
<span class="label">Category</span>
|
||
<span class="value">Lifestyle</span>
|
||
</div>
|
||
<div class="meta-item">
|
||
<span class="label">Size</span>
|
||
<span class="value">284.6 MB</span>
|
||
</div>
|
||
<div class="meta-item">
|
||
<span class="label">Version</span>
|
||
<span class="value">1.69.2</span>
|
||
</div>
|
||
</div>
|
||
<a href="https://apps.apple.com/us/app/daylio-journal-daily-diary/id1194023242" target="_blank" class="app-store-link">
|
||
View on App Store →
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content-grid">
|
||
<div class="card">
|
||
<h3>Description</h3>
|
||
<p>Self-Care Bullet Journal with Goals - Mood Diary & Happiness Tracker. Daylio enables you to keep a private journal without having to type a single line. It's a versatile app that can be your fitness goal pal, mental health coach, food log, or gratitude diary.</p>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Key Features</h3>
|
||
<ul class="feature-list">
|
||
<li><span class="check">✓</span> Multiple daily mood entries</li>
|
||
<li><span class="check">✓</span> Customizable activities & moods</li>
|
||
<li><span class="check">✓</span> Year in Pixels visualization</li>
|
||
<li><span class="check">✓</span> Goal and habit tracking</li>
|
||
<li><span class="check">✓</span> Voice memo recording</li>
|
||
<li><span class="check">✓</span> iCloud backup & Apple Health</li>
|
||
<li><span class="check">✓</span> PDF/CSV export</li>
|
||
</ul>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Pricing</h3>
|
||
<table class="pricing-table">
|
||
<tr><td>Base</td><td>Free</td></tr>
|
||
<tr><td>Premium (various tiers)</td><td>$4.99 - $59.99</td></tr>
|
||
</table>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Technical Details</h3>
|
||
<table class="pricing-table">
|
||
<tr><td>iOS Requirement</td><td>iOS 14.0+</td></tr>
|
||
<tr><td>Languages</td><td>30 languages</td></tr>
|
||
<tr><td>Age Rating</td><td>4+</td></tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h3>Competitive Analysis</h3>
|
||
<div class="analysis-grid">
|
||
<div class="analysis-card">
|
||
<h4>Strengths</h4>
|
||
<ul>
|
||
<li>Highest review count in category (57K+)</li>
|
||
<li>No typing required - tap-based logging</li>
|
||
<li>Extensive customization options</li>
|
||
<li>Year in Pixels visualization is unique</li>
|
||
</ul>
|
||
</div>
|
||
<div class="analysis-card">
|
||
<h4>Target Audience</h4>
|
||
<ul>
|
||
<li>Users who want quick, low-effort mood logging</li>
|
||
<li>People tracking habits alongside moods</li>
|
||
<li>Users who prefer visual over text-based journaling</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="screenshots-section">
|
||
<h3>Screenshots</h3>
|
||
<p class="no-screenshots">Screenshots not available via API - icon only</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Reflectly Section -->
|
||
<section id="reflectly" class="competitor-section">
|
||
<div class="competitor-header">
|
||
<img src="reflectly/app_icon.jpg" alt="Reflectly" class="app-icon">
|
||
<div class="app-info">
|
||
<h2>Reflectly - Journal & AI Diary</h2>
|
||
<p class="subtitle">Mood Tracker & Daily Quotes</p>
|
||
<div class="app-meta">
|
||
<div class="meta-item">
|
||
<span class="label">Rating</span>
|
||
<span class="value">★ 4.6</span>
|
||
</div>
|
||
<div class="meta-item">
|
||
<span class="label">Reviews</span>
|
||
<span class="value">81,727</span>
|
||
</div>
|
||
<div class="meta-item">
|
||
<span class="label">Developer</span>
|
||
<span class="value">Kodeon, Inc.</span>
|
||
</div>
|
||
<div class="meta-item">
|
||
<span class="label">Category</span>
|
||
<span class="value">Health & Fitness</span>
|
||
</div>
|
||
<div class="meta-item">
|
||
<span class="label">Size</span>
|
||
<span class="value">72.3 MB</span>
|
||
</div>
|
||
<div class="meta-item">
|
||
<span class="label">Version</span>
|
||
<span class="value">4.15.0</span>
|
||
</div>
|
||
</div>
|
||
<a href="https://apps.apple.com/us/app/reflectly-journal-ai-diary/id1241229134" target="_blank" class="app-store-link">
|
||
View on App Store →
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content-grid">
|
||
<div class="card">
|
||
<h3>Description</h3>
|
||
<p>Reflectly is the #1 journaling app that's like your best friend. It's the world's first intelligent journal app & mood tracker that gives you personalized motivation and prompts the more you use it. Uses AI, positive psychology, mindfulness, and CBT to help you thrive.</p>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Key Features</h3>
|
||
<ul class="feature-list">
|
||
<li><span class="check">✓</span> AI-driven personalized prompts</li>
|
||
<li><span class="check">✓</span> Daily mood tracking with graphs</li>
|
||
<li><span class="check">✓</span> Voice-to-text journaling</li>
|
||
<li><span class="check">✓</span> Habit tracker with achievements</li>
|
||
<li><span class="check">✓</span> Lock screen widgets (iOS 16+)</li>
|
||
<li><span class="check">✓</span> Morning quotes & evening reflections</li>
|
||
</ul>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Pricing</h3>
|
||
<table class="pricing-table">
|
||
<tr><td>Base</td><td>Free</td></tr>
|
||
<tr><td>Monthly</td><td>$9.99/mo</td></tr>
|
||
<tr><td>Yearly</td><td>$59.99/yr</td></tr>
|
||
</table>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Technical Details</h3>
|
||
<table class="pricing-table">
|
||
<tr><td>iOS Requirement</td><td>iOS 15.0+</td></tr>
|
||
<tr><td>Languages</td><td>English</td></tr>
|
||
<tr><td>Age Rating</td><td>4+</td></tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h3>Competitive Analysis</h3>
|
||
<div class="analysis-grid">
|
||
<div class="analysis-card">
|
||
<h4>Strengths</h4>
|
||
<ul>
|
||
<li>Highest review count (82K+) - massive user base</li>
|
||
<li>AI-powered personalization</li>
|
||
<li>"World's first intelligent journal" positioning</li>
|
||
<li>Strong marketing/branding</li>
|
||
</ul>
|
||
</div>
|
||
<div class="analysis-card">
|
||
<h4>Target Audience</h4>
|
||
<ul>
|
||
<li>Users who prefer guided journaling</li>
|
||
<li>People wanting AI-driven insights</li>
|
||
<li>Mindfulness/self-care focused users</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="screenshots-section">
|
||
<h3>Screenshots</h3>
|
||
<div class="screenshots-grid">
|
||
<img src="reflectly/screenshot_1.jpg" alt="Screenshot 1" class="screenshot" onclick="openModal(this.src)">
|
||
<img src="reflectly/screenshot_2.jpg" alt="Screenshot 2" class="screenshot" onclick="openModal(this.src)">
|
||
<img src="reflectly/screenshot_3.jpg" alt="Screenshot 3" class="screenshot" onclick="openModal(this.src)">
|
||
<img src="reflectly/screenshot_4.jpg" alt="Screenshot 4" class="screenshot" onclick="openModal(this.src)">
|
||
<img src="reflectly/screenshot_5.jpg" alt="Screenshot 5" class="screenshot" onclick="openModal(this.src)">
|
||
<img src="reflectly/screenshot_6.jpg" alt="Screenshot 6" class="screenshot" onclick="openModal(this.src)">
|
||
<img src="reflectly/screenshot_7.jpg" alt="Screenshot 7" class="screenshot" onclick="openModal(this.src)">
|
||
<img src="reflectly/screenshot_8.jpg" alt="Screenshot 8" class="screenshot" onclick="openModal(this.src)">
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Moodnotes Section -->
|
||
<section id="moodnotes" class="competitor-section">
|
||
<div class="competitor-header">
|
||
<img src="moodnotes/app_icon.jpg" alt="Moodnotes" class="app-icon">
|
||
<div class="app-info">
|
||
<h2>Moodnotes - Mood Tracker</h2>
|
||
<p class="subtitle">Daily Self Care Journal & CBT</p>
|
||
<div class="app-meta">
|
||
<div class="meta-item">
|
||
<span class="label">Rating</span>
|
||
<span class="value">★ 4.7</span>
|
||
</div>
|
||
<div class="meta-item">
|
||
<span class="label">Reviews</span>
|
||
<span class="value">10,942</span>
|
||
</div>
|
||
<div class="meta-item">
|
||
<span class="label">Developer</span>
|
||
<span class="value">Mosaic S.r.l.</span>
|
||
</div>
|
||
<div class="meta-item">
|
||
<span class="label">Category</span>
|
||
<span class="value">Health & Fitness</span>
|
||
</div>
|
||
<div class="meta-item">
|
||
<span class="label">Size</span>
|
||
<span class="value">153.5 MB</span>
|
||
</div>
|
||
<div class="meta-item">
|
||
<span class="label">Version</span>
|
||
<span class="value">3.14.8</span>
|
||
</div>
|
||
</div>
|
||
<a href="https://apps.apple.com/us/app/moodnotes-mood-tracker/id1019230398" target="_blank" class="app-store-link">
|
||
View on App Store →
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content-grid">
|
||
<div class="card">
|
||
<h3>Description</h3>
|
||
<p>Don't let your mood affect your life. Take control over it! Created by design experts and clinical psychologists, Moodnotes is grounded in cognitive behavior therapy (CBT) and positive psychology. Helps avoid common thinking traps and develop healthier perspectives.</p>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Key Features</h3>
|
||
<ul class="feature-list">
|
||
<li><span class="check">✓</span> CBT-based approach</li>
|
||
<li><span class="check">✓</span> Face scanning for mood detection</li>
|
||
<li><span class="check">✓</span> Thinking pattern recognition</li>
|
||
<li><span class="check">✓</span> Expert-written mental health articles</li>
|
||
<li><span class="check">✓</span> Apple Watch compatibility</li>
|
||
<li><span class="check">✓</span> iCloud sync/backup</li>
|
||
</ul>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Pricing</h3>
|
||
<table class="pricing-table">
|
||
<tr><td>Base</td><td>Free</td></tr>
|
||
<tr><td>Monthly</td><td>$14.99/mo</td></tr>
|
||
<tr><td>Yearly</td><td>$29.99 - $89.99/yr</td></tr>
|
||
</table>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Technical Details</h3>
|
||
<table class="pricing-table">
|
||
<tr><td>iOS Requirement</td><td>iOS 13.0+</td></tr>
|
||
<tr><td>Languages</td><td>8 languages</td></tr>
|
||
<tr><td>Age Rating</td><td>13+</td></tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h3>Competitive Analysis</h3>
|
||
<div class="analysis-grid">
|
||
<div class="analysis-card">
|
||
<h4>Strengths</h4>
|
||
<ul>
|
||
<li>CBT-based approach (clinical foundation)</li>
|
||
<li>Face scanning for automatic mood detection</li>
|
||
<li>Created by clinical psychologists</li>
|
||
<li>Strong mental health article content</li>
|
||
</ul>
|
||
</div>
|
||
<div class="analysis-card">
|
||
<h4>Target Audience</h4>
|
||
<ul>
|
||
<li>Users interested in CBT/therapy approaches</li>
|
||
<li>People dealing with anxiety</li>
|
||
<li>Those who want science-backed tracking</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="screenshots-section">
|
||
<h3>Screenshots</h3>
|
||
<div class="screenshots-grid">
|
||
<img src="moodnotes/screenshot_1.jpg" alt="Screenshot 1" class="screenshot" onclick="openModal(this.src)">
|
||
<img src="moodnotes/screenshot_2.jpg" alt="Screenshot 2" class="screenshot" onclick="openModal(this.src)">
|
||
<img src="moodnotes/screenshot_3.jpg" alt="Screenshot 3" class="screenshot" onclick="openModal(this.src)">
|
||
<img src="moodnotes/screenshot_4.jpg" alt="Screenshot 4" class="screenshot" onclick="openModal(this.src)">
|
||
<img src="moodnotes/screenshot_5.jpg" alt="Screenshot 5" class="screenshot" onclick="openModal(this.src)">
|
||
<img src="moodnotes/screenshot_6.jpg" alt="Screenshot 6" class="screenshot" onclick="openModal(this.src)">
|
||
<img src="moodnotes/screenshot_7.jpg" alt="Screenshot 7" class="screenshot" onclick="openModal(this.src)">
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Moodistory Section -->
|
||
<section id="moodistory" class="competitor-section">
|
||
<div class="competitor-header">
|
||
<img src="moodistory/app_icon.jpg" alt="Moodistory" class="app-icon">
|
||
<div class="app-info">
|
||
<h2>Emotion Tracker: Moodistory</h2>
|
||
<p class="subtitle">Mood Journal & Mental Health</p>
|
||
<div class="app-meta">
|
||
<div class="meta-item">
|
||
<span class="label">Rating</span>
|
||
<span class="value">★ 4.8</span>
|
||
</div>
|
||
<div class="meta-item">
|
||
<span class="label">Reviews</span>
|
||
<span class="value">846</span>
|
||
</div>
|
||
<div class="meta-item">
|
||
<span class="label">Developer</span>
|
||
<span class="value">Christoph Matzka</span>
|
||
</div>
|
||
<div class="meta-item">
|
||
<span class="label">Category</span>
|
||
<span class="value">Health & Fitness</span>
|
||
</div>
|
||
<div class="meta-item">
|
||
<span class="label">Size</span>
|
||
<span class="value">35.8 MB</span>
|
||
</div>
|
||
<div class="meta-item">
|
||
<span class="label">Version</span>
|
||
<span class="value">3.5</span>
|
||
</div>
|
||
</div>
|
||
<a href="https://apps.apple.com/us/app/emotion-tracker-moodistory/id1335347860" target="_blank" class="app-store-link">
|
||
View on App Store →
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content-grid">
|
||
<div class="card">
|
||
<h3>Description</h3>
|
||
<p>A low-effort mood tracker with unique, beautiful design that respects 100% your privacy. Create journal entries in less than 5 seconds, without writing a single word. All data stays on your device - they never store mood data on external servers.</p>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Key Features</h3>
|
||
<ul class="feature-list">
|
||
<li><span class="check">✓</span> 180+ customizable events</li>
|
||
<li><span class="check">✓</span> Year in Pixels visualization</li>
|
||
<li><span class="check">✓</span> Apple Health integration</li>
|
||
<li><span class="check">✓</span> 100% privacy focused</li>
|
||
<li><span class="check">✓</span> 5 home screen widgets</li>
|
||
<li><span class="check">✓</span> Apple Watch app</li>
|
||
<li><span class="check">✓</span> Custom mood scales (2-11 points)</li>
|
||
</ul>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Pricing</h3>
|
||
<table class="pricing-table">
|
||
<tr><td>Base</td><td>Free</td></tr>
|
||
<tr><td>Premium tiers</td><td>$2.99 - $39.99</td></tr>
|
||
</table>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Technical Details</h3>
|
||
<table class="pricing-table">
|
||
<tr><td>iOS Requirement</td><td>iOS 16+</td></tr>
|
||
<tr><td>Languages</td><td>8 languages</td></tr>
|
||
<tr><td>Age Rating</td><td>9+</td></tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h3>Competitive Analysis</h3>
|
||
<div class="analysis-grid">
|
||
<div class="analysis-card">
|
||
<h4>Strengths</h4>
|
||
<ul>
|
||
<li>Smallest app size (35.8 MB) - lightweight</li>
|
||
<li>Strong privacy focus (data on device only)</li>
|
||
<li>Beautiful, unique design</li>
|
||
<li>Indie developer (personal touch)</li>
|
||
</ul>
|
||
</div>
|
||
<div class="analysis-card">
|
||
<h4>Target Audience</h4>
|
||
<ul>
|
||
<li>Privacy-conscious users</li>
|
||
<li>Users who want quick, no-typing logging</li>
|
||
<li>Apple ecosystem users</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="screenshots-section">
|
||
<h3>Screenshots</h3>
|
||
<div class="screenshots-grid">
|
||
<img src="moodistory/screenshot_1.png" alt="Screenshot 1" class="screenshot" onclick="openModal(this.src)">
|
||
<img src="moodistory/screenshot_2.png" alt="Screenshot 2" class="screenshot" onclick="openModal(this.src)">
|
||
<img src="moodistory/screenshot_3.png" alt="Screenshot 3" class="screenshot" onclick="openModal(this.src)">
|
||
<img src="moodistory/screenshot_4.png" alt="Screenshot 4" class="screenshot" onclick="openModal(this.src)">
|
||
<img src="moodistory/screenshot_5.png" alt="Screenshot 5" class="screenshot" onclick="openModal(this.src)">
|
||
<img src="moodistory/screenshot_6.png" alt="Screenshot 6" class="screenshot" onclick="openModal(this.src)">
|
||
<img src="moodistory/screenshot_7.png" alt="Screenshot 7" class="screenshot" onclick="openModal(this.src)">
|
||
<img src="moodistory/screenshot_8.png" alt="Screenshot 8" class="screenshot" onclick="openModal(this.src)">
|
||
<img src="moodistory/screenshot_9.png" alt="Screenshot 9" class="screenshot" onclick="openModal(this.src)">
|
||
<img src="moodistory/screenshot_10.png" alt="Screenshot 10" class="screenshot" onclick="openModal(this.src)">
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Bearable Section -->
|
||
<section id="bearable" class="competitor-section">
|
||
<div class="competitor-header">
|
||
<img src="bearable/app_icon.jpg" alt="Bearable" class="app-icon">
|
||
<div class="app-info">
|
||
<h2>Bearable - Symptom Tracker</h2>
|
||
<p class="subtitle">Mood, Health, Migraine, Period</p>
|
||
<div class="app-meta">
|
||
<div class="meta-item">
|
||
<span class="label">Rating</span>
|
||
<span class="value">★ 4.8</span>
|
||
</div>
|
||
<div class="meta-item">
|
||
<span class="label">Reviews</span>
|
||
<span class="value">4,679</span>
|
||
</div>
|
||
<div class="meta-item">
|
||
<span class="label">Developer</span>
|
||
<span class="value">Bearable Ltd</span>
|
||
</div>
|
||
<div class="meta-item">
|
||
<span class="label">Category</span>
|
||
<span class="value">Health & Fitness</span>
|
||
</div>
|
||
<div class="meta-item">
|
||
<span class="label">Size</span>
|
||
<span class="value">102.6 MB</span>
|
||
</div>
|
||
<div class="meta-item">
|
||
<span class="label">Version</span>
|
||
<span class="value">1.0.579</span>
|
||
</div>
|
||
</div>
|
||
<a href="https://apps.apple.com/us/app/bearable-symptom-tracker/id1482581097" target="_blank" class="app-store-link">
|
||
View on App Store →
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content-grid">
|
||
<div class="card">
|
||
<h3>Description</h3>
|
||
<p>Feeling overwhelmed by your health? Join over 900,000 people managing Chronic Illnesses, Migraine, Pain, Fatigue, IBS, PoTS, PCOS, EDS, Period, Mood, Mental Health and more. Discover and manage triggers for changes in your health with correlation analysis.</p>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Key Features</h3>
|
||
<ul class="feature-list">
|
||
<li><span class="check">✓</span> Symptom and mood tracking</li>
|
||
<li><span class="check">✓</span> Medication and treatment logging</li>
|
||
<li><span class="check">✓</span> Pain and headache monitoring</li>
|
||
<li><span class="check">✓</span> Period and PCOS tracking</li>
|
||
<li><span class="check">✓</span> Apple Health & Fitbit integration</li>
|
||
<li><span class="check">✓</span> Correlation analysis</li>
|
||
<li><span class="check">✓</span> Encrypted data storage</li>
|
||
</ul>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Pricing</h3>
|
||
<table class="pricing-table">
|
||
<tr><td>Base</td><td>Free</td></tr>
|
||
<tr><td>Monthly</td><td>$6.99/mo</td></tr>
|
||
<tr><td>Yearly</td><td>$34.99/yr</td></tr>
|
||
</table>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Technical Details</h3>
|
||
<table class="pricing-table">
|
||
<tr><td>iOS Requirement</td><td>iOS 15.1+</td></tr>
|
||
<tr><td>Languages</td><td>English only</td></tr>
|
||
<tr><td>Age Rating</td><td>4+</td></tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h3>Competitive Analysis</h3>
|
||
<div class="analysis-grid">
|
||
<div class="analysis-card">
|
||
<h4>Strengths</h4>
|
||
<ul>
|
||
<li>Comprehensive health tracking beyond mood</li>
|
||
<li>900,000+ user base</li>
|
||
<li>Strong chronic illness community</li>
|
||
<li>Created by people with chronic conditions</li>
|
||
</ul>
|
||
</div>
|
||
<div class="analysis-card">
|
||
<h4>Target Audience</h4>
|
||
<ul>
|
||
<li>Users with chronic illnesses</li>
|
||
<li>People tracking medication effectiveness</li>
|
||
<li>Healthcare provider communication needs</li>
|
||
</ul>
|
||
</div>
|
||
<div class="analysis-card">
|
||
<h4>Note</h4>
|
||
<ul>
|
||
<li>More health/symptom tracker than pure mood tracker</li>
|
||
<li>Different market positioning - broader health focus</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="screenshots-section">
|
||
<h3>Screenshots</h3>
|
||
<p class="no-screenshots">Screenshots not available via API - icon only</p>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<!-- Modal for full-size screenshots -->
|
||
<div class="modal" id="imageModal" onclick="closeModal()">
|
||
<button class="modal-close" onclick="closeModal()">×</button>
|
||
<img id="modalImage" src="" alt="Full size screenshot">
|
||
</div>
|
||
|
||
<script>
|
||
function showSection(sectionId) {
|
||
// Hide all sections
|
||
document.querySelectorAll('.competitor-section').forEach(section => {
|
||
section.classList.remove('active');
|
||
});
|
||
|
||
// Remove active from all tabs
|
||
document.querySelectorAll('.nav-tab').forEach(tab => {
|
||
tab.classList.remove('active');
|
||
});
|
||
|
||
// Show selected section
|
||
document.getElementById(sectionId).classList.add('active');
|
||
|
||
// Activate corresponding tab
|
||
document.querySelectorAll('.nav-tab').forEach(tab => {
|
||
if (tab.textContent.toLowerCase().includes(sectionId.toLowerCase()) ||
|
||
(sectionId === 'overview' && tab.textContent === 'Overview')) {
|
||
tab.classList.add('active');
|
||
}
|
||
});
|
||
|
||
// Scroll to top
|
||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||
}
|
||
|
||
function openModal(src) {
|
||
document.getElementById('modalImage').src = src;
|
||
document.getElementById('imageModal').classList.add('active');
|
||
}
|
||
|
||
function closeModal() {
|
||
document.getElementById('imageModal').classList.remove('active');
|
||
}
|
||
|
||
// Close modal on escape key
|
||
document.addEventListener('keydown', function(e) {
|
||
if (e.key === 'Escape') {
|
||
closeModal();
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|