const fs = require('fs'); const { createCanvas } = require('canvas'); // Icon-Größen für PWA const sizes = [48, 72, 96, 128, 144, 152, 192, 384, 512]; function drawIcon(ctx, size) { // Black background with rounded corners const radius = size * 0.1875; // 96/512 ratio ctx.fillStyle = '#000000'; ctx.beginPath(); ctx.moveTo(radius, 0); ctx.lineTo(size - radius, 0); ctx.quadraticCurveTo(size, 0, size, radius); ctx.lineTo(size, size - radius); ctx.quadraticCurveTo(size, size, size - radius, size); ctx.lineTo(radius, size); ctx.quadraticCurveTo(0, size, 0, size - radius); ctx.lineTo(0, radius); ctx.quadraticCurveTo(0, 0, radius, 0); ctx.closePath(); ctx.fill(); // Draw task list const lineWidth = size * 0.0625; // 32/512 ratio const margin = size * 0.3125; // 160/512 ratio const lineLength = size * 0.375; // 192/512 ratio const spacing = size * 0.1875; // 96/512 ratio const dotRadius = size * 0.0234; // 12/512 ratio const dotX = size * 0.25; // 128/512 ratio ctx.strokeStyle = '#00D4FF'; ctx.fillStyle = '#00D4FF'; ctx.lineWidth = lineWidth; ctx.lineCap = 'round'; for (let i = 0; i < 3; i++) { const y = margin + (i * spacing); // Draw line ctx.beginPath(); ctx.moveTo(margin, y); ctx.lineTo(margin + lineLength, y); ctx.stroke(); // Draw dot ctx.beginPath(); ctx.arc(dotX, y, dotRadius, 0, Math.PI * 2); ctx.fill(); } } // Generate all icons sizes.forEach(size => { const canvas = createCanvas(size, size); const ctx = canvas.getContext('2d'); drawIcon(ctx, size); const buffer = canvas.toBuffer('image/png'); fs.writeFileSync(`icon-${size}x${size}.png`, buffer); console.log(`Created: icon-${size}x${size}.png`); }); // Shortcut icons function drawAddTaskIcon(ctx) { // Black background with rounded corners const radius = 16; ctx.fillStyle = '#000000'; ctx.beginPath(); ctx.moveTo(radius, 0); ctx.lineTo(96 - radius, 0); ctx.quadraticCurveTo(96, 0, 96, radius); ctx.lineTo(96, 96 - radius); ctx.quadraticCurveTo(96, 96, 96 - radius, 96); ctx.lineTo(radius, 96); ctx.quadraticCurveTo(0, 96, 0, 96 - radius); ctx.lineTo(0, radius); ctx.quadraticCurveTo(0, 0, radius, 0); ctx.closePath(); ctx.fill(); // Draw plus ctx.strokeStyle = '#00D4FF'; ctx.lineWidth = 6; ctx.lineCap = 'round'; ctx.beginPath(); ctx.moveTo(48, 32); ctx.lineTo(48, 64); ctx.stroke(); ctx.beginPath(); ctx.moveTo(32, 48); ctx.lineTo(64, 48); ctx.stroke(); } function drawCalendarIcon(ctx) { // Black background with rounded corners const radius = 16; ctx.fillStyle = '#000000'; ctx.beginPath(); ctx.moveTo(radius, 0); ctx.lineTo(96 - radius, 0); ctx.quadraticCurveTo(96, 0, 96, radius); ctx.lineTo(96, 96 - radius); ctx.quadraticCurveTo(96, 96, 96 - radius, 96); ctx.lineTo(radius, 96); ctx.quadraticCurveTo(0, 96, 0, 96 - radius); ctx.lineTo(0, radius); ctx.quadraticCurveTo(0, 0, radius, 0); ctx.closePath(); ctx.fill(); // Draw calendar ctx.strokeStyle = '#00D4FF'; ctx.lineWidth = 4; ctx.lineCap = 'round'; ctx.fillStyle = 'transparent'; // Calendar body ctx.strokeRect(20, 28, 56, 48); // Top hooks ctx.beginPath(); ctx.moveTo(32, 20); ctx.lineTo(32, 36); ctx.stroke(); ctx.beginPath(); ctx.moveTo(64, 20); ctx.lineTo(64, 36); ctx.stroke(); // Horizontal line ctx.beginPath(); ctx.moveTo(20, 44); ctx.lineTo(76, 44); ctx.stroke(); } // Create shortcut icons const addTaskCanvas = createCanvas(96, 96); drawAddTaskIcon(addTaskCanvas.getContext('2d')); fs.writeFileSync('add-task-96x96.png', addTaskCanvas.toBuffer('image/png')); console.log('Created: add-task-96x96.png'); const calendarCanvas = createCanvas(96, 96); drawCalendarIcon(calendarCanvas.getContext('2d')); fs.writeFileSync('calendar-96x96.png', calendarCanvas.toBuffer('image/png')); console.log('Created: calendar-96x96.png'); console.log('\nAll icons generated successfully!');