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
2026-04-07 15:03:21 -04:00
parent c5e5836ac1
commit b0ac44152f
15 changed files with 323 additions and 2 deletions
--- a/README.md
+++ b/README.md
@@ -1,7 +1,17 @@
 # PI Weekly Newspaper

+[![Application Preview](docs/screenshots/mosaic_small.png)](docs/gallery.html)
+
 Generates weekly ePub "newspapers" from the [Plymouth Independent](https://www.plymouthindependent.org/) RSS feed, optimized for the Xtreink X4 e-reader (800x480 screen).

+[📸 View all screenshots](docs/screenshots.md) | [🖼️ View Interactive Gallery](docs/gallery.html)
+
+## Screenshots & Gallery
+
+- **[Interactive HTML Gallery](docs/gallery.html)** - A slide deck view of the app's features.
+- **[Markdown Screenshots List](docs/screenshots.md)** - A full page showing all screenshots with descriptions.
+- **[Large Mosaic](docs/screenshots/mosaic_large.png)** - A high-resolution 4x2 grid of all screenshots (great for sharing).
+
 ## Quick Start

 ```bash
--- a/docs/gallery.html
+++ b/docs/gallery.html
@@ -0,0 +1,215 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Plymouth Independent Weekly - Gallery</title>
+    <style>
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: #1a1a1a;
+            color: #fff;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            min-height: 100vh;
+        }
+        .header {
+            text-align: center;
+            padding: 20px;
+            margin-bottom: 20px;
+        }
+        .header h1 { margin: 0 0 10px 0; font-weight: 500; }
+        .header p { margin: 0; color: #aaa; }
+        
+        .gallery-container {
+            position: relative;
+            width: 90%;
+            max-width: 1200px;
+            background: #2a2a2a;
+            border-radius: 8px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+            overflow: hidden;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .slides {
+            display: flex;
+            transition: transform 0.4s ease-in-out;
+            width: 100%;
+        }
+        
+        .slide {
+            min-width: 100%;
+            box-sizing: border-box;
+            padding: 20px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        
+        .slide img {
+            max-width: 100%;
+            max-height: 70vh;
+            border-radius: 4px;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+            object-fit: contain;
+        }
+        
+        .slide-caption {
+            margin-top: 15px;
+            font-size: 1.2em;
+            color: #ddd;
+            text-align: center;
+        }
+        
+        .nav-btn {
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            color: white;
+            border: none;
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            font-size: 24px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: background 0.2s;
+            z-index: 10;
+        }
+        .nav-btn:hover { background: rgba(0,0,0,0.8); }
+        .prev-btn { left: 20px; }
+        .next-btn { right: 20px; }
+        
+        .thumbnails {
+            display: flex;
+            gap: 10px;
+            margin-top: 20px;
+            padding: 10px;
+            overflow-x: auto;
+            max-width: 90%;
+        }
+        .thumb {
+            width: 80px;
+            height: 60px;
+            object-fit: cover;
+            border-radius: 4px;
+            cursor: pointer;
+            opacity: 0.5;
+            transition: opacity 0.2s, transform 0.2s;
+            border: 2px solid transparent;
+        }
+        .thumb:hover { opacity: 0.8; }
+        .thumb.active {
+            opacity: 1;
+            border-color: #007bff;
+            transform: scale(1.05);
+        }
+        
+        .back-link {
+            margin-top: 30px;
+            color: #007bff;
+            text-decoration: none;
+        }
+        .back-link:hover { text-decoration: underline; }
+    </style>
+</head>
+<body>
+
+    <div class="header">
+        <h1>Plymouth Independent Weekly</h1>
+        <p>Application Gallery</p>
+    </div>
+
+    <div class="gallery-container">
+        <button class="nav-btn prev-btn" onclick="moveSlide(-1)">&#10094;</button>
+        <div class="slides" id="slides">
+            <div class="slide">
+                <img src="screenshots/01-dashboard.png" alt="Dashboard">
+                <div class="slide-caption">1. Dashboard Overview</div>
+            </div>
+            <div class="slide">
+                <img src="screenshots/02-articles.png" alt="Articles">
+                <div class="slide-caption">2. Articles List & Filtering</div>
+            </div>
+            <div class="slide">
+                <img src="screenshots/03-publish.png" alt="Publish Single Week">
+                <div class="slide-caption">3. Publish - Single Week Selection</div>
+            </div>
+            <div class="slide">
+                <img src="screenshots/04-publish_multi_week.png" alt="Publish Multi-Week">
+                <div class="slide-caption">4. Publish - Multi-Week Range</div>
+            </div>
+            <div class="slide">
+                <img src="screenshots/05-publish_single_article.png" alt="Publish Single Article">
+                <div class="slide-caption">5. Publish - Single Article</div>
+            </div>
+            <div class="slide">
+                <img src="screenshots/06-issues.png" alt="Issues Archive">
+                <div class="slide-caption">6. Issues Archive</div>
+            </div>
+            <div class="slide">
+                <img src="screenshots/07-reader.png" alt="Web Reader">
+                <div class="slide-caption">7. Built-in Web Reader</div>
+            </div>
+            <div class="slide">
+                <img src="screenshots/08-settings.png" alt="Settings">
+                <div class="slide-caption">8. Application Settings</div>
+            </div>
+        </div>
+        <button class="nav-btn next-btn" onclick="moveSlide(1)">&#10095;</button>
+    </div>
+
+    <div class="thumbnails" id="thumbnails">
+        <img src="screenshots/01-dashboard.png" class="thumb active" onclick="setSlide(0)">
+        <img src="screenshots/02-articles.png" class="thumb" onclick="setSlide(1)">
+        <img src="screenshots/03-publish.png" class="thumb" onclick="setSlide(2)">
+        <img src="screenshots/04-publish_multi_week.png" class="thumb" onclick="setSlide(3)">
+        <img src="screenshots/05-publish_single_article.png" class="thumb" onclick="setSlide(4)">
+        <img src="screenshots/06-issues.png" class="thumb" onclick="setSlide(5)">
+        <img src="screenshots/07-reader.png" class="thumb" onclick="setSlide(6)">
+        <img src="screenshots/08-settings.png" class="thumb" onclick="setSlide(7)">
+    </div>
+
+    <a href="../README.md" class="back-link">&larr; Back to README</a>
+
+    <script>
+        let currentSlide = 0;
+        const slides = document.getElementById('slides');
+        const totalSlides = document.querySelectorAll('.slide').length;
+        const thumbs = document.querySelectorAll('.thumb');
+
+        function updateGallery() {
+            slides.style.transform = `translateX(-${currentSlide * 100}%)`;
+            thumbs.forEach((t, i) => {
+                t.classList.toggle('active', i === currentSlide);
+            });
+        }
+
+        function moveSlide(direction) {
+            currentSlide = (currentSlide + direction + totalSlides) % totalSlides;
+            updateGallery();
+        }
+
+        function setSlide(index) {
+            currentSlide = index;
+            updateGallery();
+        }
+
+        // Keyboard navigation
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'ArrowLeft') moveSlide(-1);
+            if (e.key === 'ArrowRight') moveSlide(1);
+        });
+    </script>
+</body>
+</html>
--- a/docs/screenshots.md
+++ b/docs/screenshots.md
@@ -0,0 +1,35 @@
+# Plymouth Independent Weekly - Screenshots
+
+Here is a detailed look at the various screens and features of the application.
+
+## 1. Dashboard
+The main dashboard provides an overview of the scheduler status and the latest generated issue.
+![Dashboard](screenshots/01-dashboard.png)
+
+## 2. Articles
+The articles view lists all fetched articles and allows filtering by week and category.
+![Articles](screenshots/02-articles.png)
+
+## 3. Publish - Single Week
+The publish screen features a combined week selector. Here, a single week is selected.
+![Publish Single Week](screenshots/03-publish.png)
+
+## 4. Publish - Multi-Week Range
+The combined week selector also allows selecting a range of weeks to compile into a single issue.
+![Publish Multi-Week](screenshots/04-publish_multi_week.png)
+
+## 5. Publish - Single Article
+You can also choose to publish a single article as a standalone issue.
+![Publish Single Article](screenshots/05-publish_single_article.png)
+
+## 6. Issues Archive
+The issues archive lists all generated issues, allowing you to read, download, push to a library, or regenerate them.
+![Issues](screenshots/06-issues.png)
+
+## 7. Web Reader
+The built-in web reader provides a clean, distraction-free reading experience for generated issues.
+![Reader](screenshots/07-reader.png)
+
+## 8. Settings
+The settings screen allows you to configure the RSS feed, auto-publish schedule, and ePub cover dimensions.
+![Settings](screenshots/08-settings.png)
--- a/docs/screenshots/01-dashboard.png
+++ b/docs/screenshots/01-dashboard.png
--- a/docs/screenshots/02-articles.png
+++ b/docs/screenshots/02-articles.png
--- a/docs/screenshots/03-publish.png
+++ b/docs/screenshots/03-publish.png
--- a/docs/screenshots/04-publish_multi_week.png
+++ b/docs/screenshots/04-publish_multi_week.png
--- a/docs/screenshots/05-publish_single_article.png
+++ b/docs/screenshots/05-publish_single_article.png
--- a/docs/screenshots/06-issues.png
+++ b/docs/screenshots/06-issues.png
--- a/docs/screenshots/07-reader.png
+++ b/docs/screenshots/07-reader.png
--- a/docs/screenshots/08-settings.png
+++ b/docs/screenshots/08-settings.png
--- a/docs/screenshots/mosaic_large.png
+++ b/docs/screenshots/mosaic_large.png
--- a/docs/screenshots/mosaic_small.png
+++ b/docs/screenshots/mosaic_small.png
--- a/scripts/make_mosaic.py
+++ b/scripts/make_mosaic.py
@@ -0,0 +1,61 @@
+import os
+from PIL import Image, ImageDraw, ImageFont
+
+def create_mosaic(image_paths, output_path, columns, rows, target_width, padding=20, bg_color=(245, 245, 245)):
+    images = []
+    for path in image_paths:
+        img = Image.open(path)
+        # Calculate new height to maintain aspect ratio
+        aspect_ratio = img.height / img.width
+        target_height = int(target_width * aspect_ratio)
+        img = img.resize((target_width, target_height), Image.Resampling.LANCZOS)
+        images.append(img)
+    
+    if not images:
+        return
+
+    # All images should be same size now
+    img_w, img_h = images[0].size
+    
+    mosaic_w = (img_w * columns) + (padding * (columns + 1))
+    mosaic_h = (img_h * rows) + (padding * (rows + 1))
+    
+    mosaic = Image.new('RGB', (mosaic_w, mosaic_h), bg_color)
+    
+    for i, img in enumerate(images):
+        if i >= columns * rows:
+            break
+        col = i % columns
+        row = i // columns
+        
+        x = padding + col * (img_w + padding)
+        y = padding + row * (img_h + padding)
+        
+        mosaic.paste(img, (x, y))
+        
+        # Add a subtle shadow/border
+        draw = ImageDraw.Draw(mosaic)
+        draw.rectangle([x-1, y-1, x+img_w, y+img_h], outline=(200, 200, 200), width=1)
+        
+    mosaic.save(output_path, quality=95)
+    print(f"Saved {output_path}")
+
+if __name__ == '__main__':
+    src_dir = 'temp_screenshots'
+    out_dir = 'docs/screenshots'
+    os.makedirs(out_dir, exist_ok=True)
+    
+    # Get the 8 numbered screenshots
+    files = sorted([f for f in os.listdir(src_dir) if f.startswith('0') and f.endswith('.png')])
+    paths = [os.path.join(src_dir, f) for f in files]
+    
+    # Copy them to docs/screenshots
+    import shutil
+    for f in files:
+        shutil.copy(os.path.join(src_dir, f), os.path.join(out_dir, f))
+    
+    # Create large mosaic (4x2 grid, each image 800px wide)
+    create_mosaic(paths, os.path.join(out_dir, 'mosaic_large.png'), columns=4, rows=2, target_width=800)
+    
+    # Create small mosaic (4x2 grid, each image 250px wide)
+    create_mosaic(paths, os.path.join(out_dir, 'mosaic_small.png'), columns=4, rows=2, target_width=250)
--- a/templates/publish.html
+++ b/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('');