docs: add application screenshot to README

README.md

@@ -2,6 +2,8 @@
 
 ## Description
 
+![Nonograms Application Screenshot](public/screenshot.png)
+
 Nonograms is a modern, fast, and accessible logic puzzle game (also known as Picross or Griddlers). Solve pixel-art puzzles by marking cells according to numeric clues for rows and columns. The app features:
 - Clean UX with keyboard and touch support
 - Multiple languages and PWA support (installable on desktop and mobile)

package.json

@@ -20,6 +20,7 @@
     "@vitejs/plugin-vue": "^5.0.4",
     "@vue/test-utils": "^2.4.6",
     "jsdom": "^28.0.0",
+    "puppeteer": "^24.37.2",
     "sharp": "^0.34.5",
     "vite": "^5.1.4",
     "vite-plugin-pwa": "^0.20.5",

scripts/take-screenshot.js

@@ -0,0 +1,46 @@
+import puppeteer from 'puppeteer';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+async function takeScreenshot() {
+  console.log('Launching browser...');
+  const browser = await puppeteer.launch({
+    headless: "new",
+    args: ['--no-sandbox', '--disable-setuid-sandbox']
+  });
+  const page = await browser.newPage();
+  
+  // Set viewport to a nice desktop size
+  await page.setViewport({ width: 1280, height: 800, deviceScaleFactor: 2 });
+
+  console.log('Navigating to app...');
+  try {
+    // Try local network IP if localhost fails, but localhost should work in this env
+    await page.goto('http://localhost:5173', { waitUntil: 'networkidle0', timeout: 10000 });
+  } catch (e) {
+    console.log('Retrying with networkidle2...');
+    try {
+        await page.goto('http://localhost:5173', { waitUntil: 'networkidle2', timeout: 10000 });
+    } catch (e2) {
+        console.error('Could not load page:', e2.message);
+        await browser.close();
+        process.exit(1);
+    }
+  }
+
+  // Wait for animations/rendering
+  await new Promise(r => setTimeout(r, 2000));
+
+  const screenshotPath = path.join(__dirname, '../public/screenshot.png');
+  console.log(`Taking screenshot to ${screenshotPath}...`);
+  
+  await page.screenshot({ path: screenshotPath });
+  
+  await browser.close();
+  console.log('Done.');
+}
+
+takeScreenshot();