Diese Seite generiert die Icons im Browser. Klicke auf jeden Link, um die Icons herunterzuladen.
+ + + + + + + + \ No newline at end of file diff --git a/frontend/assets/icons/favicon-16x16.png b/frontend/assets/icons/favicon-16x16.png new file mode 100644 index 0000000..b833c62 Binary files /dev/null and b/frontend/assets/icons/favicon-16x16.png differ diff --git a/frontend/assets/icons/favicon-32x32.png b/frontend/assets/icons/favicon-32x32.png new file mode 100644 index 0000000..b833c62 Binary files /dev/null and b/frontend/assets/icons/favicon-32x32.png differ diff --git a/frontend/assets/icons/generate-icons.js b/frontend/assets/icons/generate-icons.js new file mode 100644 index 0000000..3299bf3 --- /dev/null +++ b/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!'); \ No newline at end of file diff --git a/frontend/assets/icons/generate-icons.py b/frontend/assets/icons/generate-icons.py new file mode 100644 index 0000000..509b3ef --- /dev/null +++ b/frontend/assets/icons/generate-icons.py @@ -0,0 +1,57 @@ +#!/usr/bin/env python3 +""" +Generiert PWA Icons in verschiedenen Größen aus SVG +Benötigt: pip install cairosvg pillow +""" + +import os +from PIL import Image +import io +import cairosvg + +# Icon-Größen für PWA +sizes = [48, 72, 96, 128, 144, 152, 192, 384, 512] + +# SVG-Datei einlesen +svg_path = 'task.svg' +with open(svg_path, 'r') as f: + svg_data = f.read() + +# Icons generieren +for size in sizes: + # SVG zu PNG konvertieren + png_data = cairosvg.svg2png( + bytestring=svg_data.encode('utf-8'), + output_width=size, + output_height=size + ) + + # PNG speichern + img = Image.open(io.BytesIO(png_data)) + img.save(f'icon-{size}x{size}.png', 'PNG') + print(f'Erstellt: icon-{size}x{size}.png') + +# Zusätzliche Icons für Shortcuts +shortcuts = [ + ('add-task', ''''''), + ('calendar', '''''') +] + +for name, svg in shortcuts: + png_data = cairosvg.svg2png( + bytestring=svg.encode('utf-8'), + output_width=96, + output_height=96 + ) + img = Image.open(io.BytesIO(png_data)) + img.save(f'{name}-96x96.png', 'PNG') + print(f'Erstellt: {name}-96x96.png') + +print('\nAlle Icons wurden erfolgreich generiert!') \ No newline at end of file diff --git a/frontend/assets/icons/icon-128x128.png b/frontend/assets/icons/icon-128x128.png new file mode 100644 index 0000000..7a46729 Binary files /dev/null and b/frontend/assets/icons/icon-128x128.png differ diff --git a/frontend/assets/icons/icon-144x144.png b/frontend/assets/icons/icon-144x144.png new file mode 100644 index 0000000..7a46729 Binary files /dev/null and b/frontend/assets/icons/icon-144x144.png differ diff --git a/frontend/assets/icons/icon-152x152.png b/frontend/assets/icons/icon-152x152.png new file mode 100644 index 0000000..b840f0d Binary files /dev/null and b/frontend/assets/icons/icon-152x152.png differ diff --git a/frontend/assets/icons/icon-192x192.png b/frontend/assets/icons/icon-192x192.png new file mode 100644 index 0000000..b840f0d Binary files /dev/null and b/frontend/assets/icons/icon-192x192.png differ diff --git a/frontend/assets/icons/icon-384x384.png b/frontend/assets/icons/icon-384x384.png new file mode 100644 index 0000000..9eb738a Binary files /dev/null and b/frontend/assets/icons/icon-384x384.png differ diff --git a/frontend/assets/icons/icon-48x48.png b/frontend/assets/icons/icon-48x48.png new file mode 100644 index 0000000..b833c62 Binary files /dev/null and b/frontend/assets/icons/icon-48x48.png differ diff --git a/frontend/assets/icons/icon-512x512.png b/frontend/assets/icons/icon-512x512.png new file mode 100644 index 0000000..9eb738a Binary files /dev/null and b/frontend/assets/icons/icon-512x512.png differ diff --git a/frontend/assets/icons/icon-72x72.png b/frontend/assets/icons/icon-72x72.png new file mode 100644 index 0000000..b04aa6c Binary files /dev/null and b/frontend/assets/icons/icon-72x72.png differ diff --git a/frontend/assets/icons/icon-96x96.png b/frontend/assets/icons/icon-96x96.png new file mode 100644 index 0000000..a04d8e5 Binary files /dev/null and b/frontend/assets/icons/icon-96x96.png differ diff --git a/frontend/assets/icons/icon-base64.txt b/frontend/assets/icons/icon-base64.txt new file mode 100644 index 0000000..834e95f --- /dev/null +++ b/frontend/assets/icons/icon-base64.txt @@ -0,0 +1,21 @@ +# TaskMate Icon als Base64 PNG + +Für die Icon-Generierung können Sie einen Online-Service nutzen: + +1. Öffnen Sie https://cloudconvert.com/svg-to-png oder einen ähnlichen Konverter +2. Laden Sie die task.svg Datei hoch +3. Erstellen Sie PNGs in folgenden Größen: 48, 72, 96, 128, 144, 152, 192, 384, 512 + +Oder nutzen Sie diesen Befehl mit ImageMagick (falls installiert): +```bash +for size in 48 72 96 128 144 152 192 384 512; do + convert -background transparent -resize ${size}x${size} task.svg icon-${size}x${size}.png +done +``` + +Alternativ mit rsvg-convert: +```bash +for size in 48 72 96 128 144 152 192 384 512; do + rsvg-convert -w $size -h $size task.svg -o icon-${size}x${size}.png +done +``` \ No newline at end of file diff --git a/frontend/assets/icons/icon-generator-simple.html b/frontend/assets/icons/icon-generator-simple.html new file mode 100644 index 0000000..70bdf08 --- /dev/null +++ b/frontend/assets/icons/icon-generator-simple.html @@ -0,0 +1,187 @@ + + + +Dieser Generator erstellt alle benötigten Icons automatisch.
+ + + +Klicken Sie auf die Links, um die Icons herunterzuladen:
+ + + +Tippe auf und wähle "Zum Home-Bildschirm"
+ +