Files
deardiary/www/docs/events.html

125 lines
4.4 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Events - 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"/><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="../">Home</a>
<a href="../docs/" class="active">Docs</a>
<a href="../blog/">Blog</a>
<a href="${GIT_URL}" target="_blank">Git Repository</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">Quick Start</a>
</div>
<div class="sidebar-section">
<h3>Configuration</h3>
<a href="configuration.html">Environment</a>
<a href="api.html">API Reference</a>
</div>
<div class="sidebar-section">
<h3>Features</h3>
<a href="ai-providers.html">AI Providers</a>
<a href="events.html" class="active">Events</a>
<a href="export-import.html">Export & Import</a>
</div>
</aside>
<main class="docs-content">
<h1>Events</h1>
<p>Events are the building blocks of your diary. They're quick captures throughout the day that get transformed into thoughtful diary pages.</p>
<h2>Event Types</h2>
<table>
<tr>
<th>Type</th>
<th>Description</th>
<th>Example</th>
</tr>
<tr>
<td><strong>Text</strong></td>
<td>Plain text notes</td>
<td>"Coffee with Mike at 9am"</td>
</tr>
<tr>
<td><strong>Photo</strong></td>
<td>Image captures</td>
<td>Sunset from the office window</td>
</tr>
<tr>
<td><strong>Voice</strong></td>
<td>Voice memos</td>
<td>Ideas for the project</td>
</tr>
<tr>
<td><strong>Health</strong></td>
<td>Health-related notes</td>
<td>"Feeling tired, had 6 hours sleep"</td>
</tr>
</table>
<h2>Automatic Metadata</h2>
<p>Every event captures:</p>
<ul>
<li><strong>Timestamp</strong> - When the event was created</li>
<li><strong>Date</strong> - The calendar date (YYYY-MM-DD)</li>
<li><strong>Location</strong> - GPS coordinates (if browser allows)</li>
<li><strong>Place Name</strong> - Reverse geocoded address</li>
</ul>
<h2>Immutability</h2>
<p>Once a diary page is generated for a day, all events for that day become <strong>locked</strong>:</p>
<ul>
<li>You cannot edit or delete individual events</li>
<li>This preserves the authenticity of your record</li>
<li>Your past stays untouched by today's perspective</li>
</ul>
<div class="tip">
<strong>To unlock events:</strong> Delete the diary page for that date. Events become editable again.
</div>
<h2>Event Stream</h2>
<p>The <strong>Today</strong> page shows your event stream for the current day:</p>
<ul>
<li>Newest events appear at the top</li>
<li>Events show time, type, content, and location</li>
<li>Quick add via text input or keyboard shortcut (Ctrl+J)</li>
</ul>
<h2>Browse Past Days</h2>
<p>Use the calendar view or date navigator to view events from any day:</p>
<ul>
<li>Click any date to see that day's events</li>
<li>Days with diary pages are marked</li>
<li>Navigate with arrow keys in the date picker</li>
</ul>
<div class="next-steps">
<a href="api.html" class="btn">← API Reference</a>
<a href="export-import.html" class="btn btn-primary">Next: Export & Import →</a>
</div>
</main>
</div>
</body>
</html>