Logo für Webseiten-Tab implementiert

frontend/assets/icons/generate-icons.js

@@ -0,0 +1,154 @@
+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!');