164 lines
7.1 KiB
HTML
164 lines
7.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>DearDiary - AI-Powered Daily Journal</title>
|
|
<meta name="description" content="Self-hosted AI-powered daily journaling. Capture events throughout the day and let AI generate beautiful diary pages.">
|
|
<link rel="stylesheet" href="css/styles.css">
|
|
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><linearGradient id='g' x1='0%25' y1='0%25' x2='100%25' y2='100%25'><stop offset='0%25' style='stop-color:%236d28d9'/><stop offset='100%25' style='stop-color:%234c1d95'/></linearGradient></defs><rect width='100' height='100' rx='20' fill='url(%23g)'/><path d='M25 25 L75 25 L75 80 L25 80 Z' fill='none' stroke='white' stroke-width='3'/><path d='M35 40 L65 40 M35 50 L65 50 M35 60 L55 60' stroke='white' stroke-width='2'/></svg>">
|
|
</head>
|
|
<body>
|
|
<nav class="navbar">
|
|
<div class="nav-container">
|
|
<a href="/" class="logo">
|
|
<svg width="32" height="32" viewBox="0 0 100 100"><defs><linearGradient id="g" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:#6d28d9"/><stop offset="100%" style="stop-color:#4c1d95"/></linearGradient></defs><rect width="100" height="100" rx="20" fill="url(#g)"/><path d="M25 25 L75 25 L75 80 L25 80 Z" fill="none" stroke="white" stroke-width="3"/><path d="M35 40 L65 40 M35 50 L65 50 M35 60 L55 60" stroke="white" stroke-width="2"/></svg>
|
|
DearDiary
|
|
</a>
|
|
<div class="nav-links">
|
|
<a href="#features">Features</a>
|
|
<a href="docs/">Docs</a>
|
|
<a href="blog/">Blog</a>
|
|
<a href="${GIT_URL}" target="_blank">Git Repository</a>
|
|
<a href="${APP_URL}" target="_blank" class="btn btn-primary">Join Free Alpha</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<header class="hero">
|
|
<div class="hero-content">
|
|
<h1>Your AI-Powered<br><span class="gradient-text">Daily Journal</span></h1>
|
|
<p class="hero-subtitle">Capture events throughout the day and let AI transform them into beautiful, thoughtful diary pages. Self-hosted. Private. Yours.</p>
|
|
<div class="hero-actions">
|
|
<a href="${APP_URL}" target="_blank" class="btn btn-primary btn-large">Join Free Alpha</a>
|
|
<a href="docs/" class="btn btn-secondary btn-large">Read Docs</a>
|
|
</div>
|
|
<div class="hero-meta">
|
|
<a href="${GIT_URL}/releases/tag/v${VERSION}" target="_blank" class="hover:underline">v${VERSION}</a>
|
|
<span>•</span>
|
|
<a href="${GIT_URL}" target="_blank">Git Repository</a>
|
|
<span>•</span>
|
|
<span>MIT License</span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<section id="features" class="features">
|
|
<div class="container">
|
|
<h2>Everything you need for journaling</h2>
|
|
<div class="feature-grid">
|
|
<div class="feature-card">
|
|
<div class="feature-icon">📝</div>
|
|
<h3>Quick Capture</h3>
|
|
<p>Log events instantly with Ctrl+J. Multiple types: text, photos, voice memos, health notes.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">🤖</div>
|
|
<h3>AI Generation</h3>
|
|
<p>Let AI craft thoughtful diary pages from your events. Works with Groq, OpenAI, Anthropic, and local models.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">📍</div>
|
|
<h3>Auto Geolocation</h3>
|
|
<p>Events are automatically tagged with your location. Remember where life happened.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">🔒</div>
|
|
<h3>Immutable Memories</h3>
|
|
<p>Once a diary is generated, events lock. Your past stays authentic, untouched by today's edits.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">🔍</div>
|
|
<h3>Full-Text Search</h3>
|
|
<p>Find any event or diary entry instantly across all your data.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">📤</div>
|
|
<h3>Export & Import</h3>
|
|
<p>Your data, your control. Export everything as JSON. Migrate anytime.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="how" class="how">
|
|
<div class="container">
|
|
<h2>How it works</h2>
|
|
<div class="steps">
|
|
<div class="step">
|
|
<div class="step-number">1</div>
|
|
<div class="step-content">
|
|
<h3>Capture Throughout the Day</h3>
|
|
<p>Log events as they happen. Type, snap a photo, record a voice note. Add health data. Each entry is timestamped and geolocated.</p>
|
|
</div>
|
|
</div>
|
|
<div class="step">
|
|
<div class="step-number">2</div>
|
|
<div class="step-content">
|
|
<h3>Generate Your Diary</h3>
|
|
<p>When you're ready, click Generate. AI reads all your events and writes a thoughtful, narrative diary page just for you.</p>
|
|
</div>
|
|
</div>
|
|
<div class="step">
|
|
<div class="step-number">3</div>
|
|
<div class="step-content">
|
|
<h3>Rewrite if Needed</h3>
|
|
<p>Not happy with the result? Add instructions and regenerate. Focus on what matters to you.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="try" class="try">
|
|
<div class="container">
|
|
<div class="try-content">
|
|
<h2>Ready to start journaling?</h2>
|
|
<p>Try our free alpha hosted for you, or self-host in minutes with Docker.</p>
|
|
<div class="try-actions">
|
|
<a href="${APP_URL}" target="_blank" class="btn btn-primary btn-large">Join Free Alpha</a>
|
|
<span class="try-or">or</span>
|
|
<a href="docs/installation.html" class="btn btn-secondary btn-large">Self-Host</a>
|
|
</div>
|
|
<div class="try-code">
|
|
<code>git clone ${GIT_URL}.git && cd deardiary && docker compose up -d</code>
|
|
</div>
|
|
<p class="try-hint">Self-hosted default login: admin@localhost / changeme123</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<div class="footer-links">
|
|
<div class="footer-col">
|
|
<h4>Product</h4>
|
|
<a href="#features">Features</a>
|
|
<a href="docs/">Documentation</a>
|
|
<a href="#how">How it Works</a>
|
|
<a href="${APP_URL}" target="_blank">Free Alpha</a>
|
|
</div>
|
|
<div class="footer-col">
|
|
<h4>Resources</h4>
|
|
<a href="docs/installation.html">Installation</a>
|
|
<a href="docs/quick-start.html">Quick Start</a>
|
|
<a href="docs/ai-providers.html">AI Providers</a>
|
|
<a href="blog/">Blog</a>
|
|
</div>
|
|
<div class="footer-col">
|
|
<h4>Project</h4>
|
|
<a href="${GIT_URL}" target="_blank">Source Code</a>
|
|
<a href="${GIT_URL}/issues" target="_blank">Issues</a>
|
|
<a href="${GIT_URL}/releases" target="_blank">Releases</a>
|
|
</div>
|
|
</div>
|
|
<div class="footer-bottom">
|
|
<p>MIT License • Copyright 2026 Konrad Lother</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="js/main.js"></script>
|
|
</body>
|
|
</html>
|