white, black
FFFFFF, 000000

F0F8FF, 0530AD, 81A6CA, 212121, F0F8FF, FED501, 25274D, 2C3E50, 222629, D0D8E3, F5F5F7, F5F5F7, FFFFFF, 000000
---
Requirement: Notes & Links with Media and Keyword Filtering

Users can create notes or links and optionally attach media.

Media can be provided either:

via URL (hosted at the current app path), or

via upload (max size: 10 MB).

Supported file types: jpg, png, gif, mp4, mov, mkv, avi.

Media display rules:

Maximum width: 400px.

Height auto-adjusts to preserve aspect ratio.

Allowed aspect ratios: 1:1, 4:3, 16:9, 9:16, 4:5, 3:2.

Display uses whichever allowed ratio is closest to the media’s native ratio.

Clicking on media opens it in a modal for full view/playback.

Keyword as category filtering:

Each keyword is treated as a category.

Make sure color contrast is reevaluated so that proper contrast, text always visible.

Clicking a keyword automatically filters the list to show only items in that category.


In the note creation dialog.

need a way for the user to include links in the note.

form will offer an input for a link url near the bottom of the form.

with a + button that lets the form add a new input for second, then third up to 10 links.