Add generated PNG icons and icon generator script

- icon-192.png
- icon-512.png
- apple-touch-icon.png
- icon-maskable.png
- generate-icons.js script

frontend/generate-icons.js

@@ -0,0 +1,40 @@
+const sharp = require('sharp');
+const fs = require('fs');
+const path = require('path');
+
+const svgBuffer = fs.readFileSync(path.join(__dirname, 'public/icon-192.svg'));
+
+// icon-192.png
+sharp(svgBuffer)
+  .resize(192, 192)
+  .png()
+  .toFile('public/icon-192.png')
+  .then(() => console.log('Created icon-192.png'));
+
+// icon-512.png
+sharp(svgBuffer)
+  .resize(512, 512)
+  .png()
+  .toFile('public/icon-512.png')
+  .then(() => console.log('Created icon-512.png'));
+
+// apple-touch-icon.png (180x180)
+sharp(svgBuffer)
+  .resize(180, 180)
+  .png()
+  .toFile('public/apple-touch-icon.png')
+  .then(() => console.log('Created apple-touch-icon.png'));
+
+// icon-maskable.png (512x512 with padding for safe area)
+sharp(svgBuffer)
+  .resize(384, 384) // 75% of 512 for safe area
+  .extend({
+    top: 64,
+    bottom: 64,
+    left: 64,
+    right: 64,
+    background: { r: 27, g: 26, b: 85, alpha: 1 } // #1B1A55
+  })
+  .png()
+  .toFile('public/icon-maskable.png')
+  .then(() => console.log('Created icon-maskable.png'));

frontend/package-lock.json

@@ -37,6 +37,7 @@
         "@types/react-dom": "^19",
         "eslint": "^9",
         "eslint-config-next": "16.2.1",
+        "sharp": "^0.34.5",
         "tailwindcss": "^4",
         "typescript": "^5"
       }
@@ -1054,8 +1055,8 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.1.0.tgz",
       "integrity": "sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ==",
+      "devOptional": true,
       "license": "MIT",
-      "optional": true,
       "engines": {
         "node": ">=18"
       }
@@ -8785,9 +8786,9 @@
       "version": "0.34.5",
       "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.5.tgz",
       "integrity": "sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==",
+      "devOptional": true,
       "hasInstallScript": true,
       "license": "Apache-2.0",
-      "optional": true,
       "dependencies": {
         "@img/colour": "^1.0.0",
         "detect-libc": "^2.1.2",
@@ -8830,8 +8831,8 @@
       "version": "7.7.4",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
       "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
+      "devOptional": true,
       "license": "ISC",
-      "optional": true,
       "bin": {
         "semver": "bin/semver.js"
       },

frontend/package.json

@@ -38,6 +38,7 @@
     "@types/react-dom": "^19",
     "eslint": "^9",
     "eslint-config-next": "16.2.1",
+    "sharp": "^0.34.5",
     "tailwindcss": "^4",
     "typescript": "^5"
   }