36474db276
- Removed docs/ (Starlight) - Added www/ with pure HTML/CSS/JS landing page - Product website with features, how it works, get started - Basic HTML documentation pages (installation, quick start, AI providers) - Dockerfile.docs now serves static files from www/ - Updated README and AGENTS.md
119 lines
4.0 KiB
HTML
119 lines
4.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Quick Start - DearDiary</title>
|
|
<link rel="stylesheet" href="../css/styles.css">
|
|
<link rel="stylesheet" href="../css/docs.css">
|
|
</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"/></svg>
|
|
DearDiary
|
|
</a>
|
|
<div class="nav-links">
|
|
<a href="../">Home</a>
|
|
<a href="../docs/">Docs</a>
|
|
<a href="https://github.com/lotherk/deardiary" target="_blank">GitHub</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="docs-layout">
|
|
<aside class="docs-sidebar">
|
|
<div class="sidebar-section">
|
|
<h3>Getting Started</h3>
|
|
<a href="installation.html">Installation</a>
|
|
<a href="quick-start.html" class="active">Quick Start</a>
|
|
<a href="configuration.html">Configuration</a>
|
|
</div>
|
|
<div class="sidebar-section">
|
|
<h3>Features</h3>
|
|
<a href="events.html">Events</a>
|
|
<a href="diary-pages.html">Diary Pages</a>
|
|
<a href="ai-providers.html">AI Providers</a>
|
|
<a href="search.html">Search</a>
|
|
<a href="export-import.html">Export & Import</a>
|
|
</div>
|
|
</aside>
|
|
|
|
<main class="docs-content">
|
|
<h1>Quick Start</h1>
|
|
|
|
<h2>First Steps</h2>
|
|
|
|
<h3>1. Configure AI Provider</h3>
|
|
<p>Before generating diaries, you need to set up an AI provider:</p>
|
|
<ol>
|
|
<li>Go to <strong>Settings</strong></li>
|
|
<li>Select your AI provider (Groq is recommended for free, fast inference)</li>
|
|
<li>Enter your API key</li>
|
|
<li>Click "Test Connection" to verify</li>
|
|
<li>Save settings</li>
|
|
</ol>
|
|
|
|
<h3>2. Log Your First Event</h3>
|
|
<p>Navigate to <strong>Today</strong> and start logging events:</p>
|
|
<ul>
|
|
<li>Type your event and press Enter</li>
|
|
<li>Use the type buttons to change event category</li>
|
|
<li>Events are timestamped automatically</li>
|
|
<li>Location is captured if you allow browser permission</li>
|
|
</ul>
|
|
|
|
<h3>3. Generate Your Diary</h3>
|
|
<p>When you're ready to lock in your day:</p>
|
|
<ol>
|
|
<li>Click <strong>Generate Diary Page</strong></li>
|
|
<li>Wait for AI processing</li>
|
|
<li>Your diary page appears with a generated title</li>
|
|
</ol>
|
|
|
|
<div class="tip">
|
|
Once generated, events become <strong>locked</strong> (immutable). To unlock, delete the diary page.
|
|
</div>
|
|
|
|
<h3>4. Rewrite if Needed</h3>
|
|
<p>Click <strong>Rewrite</strong> to regenerate with additional instructions:</p>
|
|
<ul>
|
|
<li>Add context like "Make it more detailed"</li>
|
|
<li>Focus on specific topics</li>
|
|
<li>Adjust the tone or style</li>
|
|
</ul>
|
|
|
|
<h2>Keyboard Shortcuts</h2>
|
|
<table>
|
|
<tr>
|
|
<th>Shortcut</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
<tr>
|
|
<td><code>Ctrl + J</code></td>
|
|
<td>Quick add event</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>Ctrl + K</code></td>
|
|
<td>Search</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<h2>Tips</h2>
|
|
<ul>
|
|
<li>Log events throughout the day for richer diaries</li>
|
|
<li>Use the calendar view to browse past days</li>
|
|
<li>Export your data regularly for backup</li>
|
|
<li>Try different AI providers for varied writing styles</li>
|
|
</ul>
|
|
|
|
<div class="next-steps">
|
|
<a href="installation.html" class="btn">← Previous</a>
|
|
<a href="configuration.html" class="btn">Next: Configuration →</a>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</body>
|
|
</html>
|