TaskMate/frontend/assets/icons/generate-icons.js

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!');