docs: add application screenshots and interactive gallery

- Captured clean, full-page screenshots of all major application views
- Added an interactive HTML slide deck gallery for previewing features
- Created a high-resolution mosaic and a smaller preview mosaic
- Generated a Python script to automate mosaic creation
- Updated README.md with prominent links to the gallery and screenshots
- Added accessibility attributes (role="button", tabindex="0") to calendar rows

Made-with: Cursor

templates/publish.html

@@ -26,7 +26,7 @@
             <tbody id="cal-body">
                 {% for week in calendar_weeks %}
                 <tr class="cal-week" data-start="{{ week.week_start }}" data-end="{{ week.week_end }}"
-                    onclick="selectWeekMulti(this)">
+                    onclick="selectWeekMulti(this)" role="button" tabindex="0">
                     <td class="cal-wk">{{ week.iso_week }}{% if week.article_count %} <small>({{ week.article_count }})</small>{% endif %}</td>
                     {% for day in week.days %}
                     <td class="{% if not day.in_month %}cal-dim{% endif %} {% if day.has_articles %}has-articles{% endif %}">{{ day.day }}</td>
@@ -194,7 +194,7 @@ function renderCalendar(weeks, tbodyId, rowClass, onclickFn) {
             return `<td class="${classes.join(' ')}">${d.day}</td>`;
         }).join('');
         const count = w.article_count ? ` <small>(${w.article_count})</small>` : '';
-        return `<tr class="${rowClass}" data-start="${w.week_start}" data-end="${w.week_end}" onclick="${onclickFn}">
+        return `<tr class="${rowClass}" data-start="${w.week_start}" data-end="${w.week_end}" onclick="${onclickFn}" role="button" tabindex="0">
             <td class="cal-wk">${w.iso_week}${count}</td>${days}
         </tr>`;
     }).join('');