Skip to content

SCREENSHOTS.md

Latest commit

 

History

History
74 lines (59 loc) · 1.93 KB

SCREENSHOTS.md

File metadata and controls

74 lines (59 loc) · 1.93 KB

Screenshots Guide

To add screenshots to the README, take the following:

1. Main Interface

  • Open Jot with a few notes in the sidebar
  • Show the editor with some formatted text (headings, lists, highlights)
  • Capture the full window (Cmd+Shift+4 + Space)

Suggested filename: screenshot-main.png

2. Recording UI

  • Click Record button
  • Show the RecordingOptions panel (audio source selection)
  • Include the live transcription appearing in the editor

Suggested filename: screenshot-recording.png

3. AI Summary

  • After recording, show a note with:
    • Original transcript
    • AI-generated summary with sections (Action Items, Key Decisions, etc.)

Suggested filename: screenshot-summary.png

4. Settings Panel

  • Open Settings (⚙️)
  • Show the Whisper model download interface
  • Include API key field (blur the actual key)

Suggested filename: screenshot-settings.png

Where to Save

jot/
├── docs/
│   └── screenshots/
│       ├── screenshot-main.png
│       ├── screenshot-recording.png
│       ├── screenshot-summary.png
│       └── screenshot-settings.png

Update README

Replace this line in README.md:

![Jot Screenshot](https://via.placeholder.com/800x500/FFF/333?text=Jot+Screenshot)

With:

<p align="center">
  <img src="docs/screenshots/screenshot-main.png" alt="Jot Main Interface" width="800">
</p>

## Features in Action

<table>
  <tr>
    <td><img src="docs/screenshots/screenshot-recording.png" alt="Live Recording"></td>
    <td><img src="docs/screenshots/screenshot-summary.png" alt="AI Summary"></td>
  </tr>
  <tr>
    <td align="center"><b>Live Transcription</b></td>
    <td align="center"><b>AI Summaries</b></td>
  </tr>
</table>

Tips

  • Use macOS's built-in screenshot tool (Cmd+Shift+4)
  • Optimize images with ImageOptim or similar
  • Keep file sizes under 500 KB each
  • Use descriptive alt text for accessibility