AegisSight/TaskMate
3
0
Fork 0
Code Issues Pull-Requests Actions Pakete Projekte Releases Wiki Aktivität

Logo für Webseiten-Tab implementiert

Quellcode durchsuchen
Dieser Commit ist enthalten in:
hendrik_gebhardt@gmx.de
2026-01-10 16:47:02 +00:00
committet von Server Deploy
Ursprung ef153789cc
Commit 5b1f8b1cfe
53 geänderte Dateien mit 2377 neuen und 46 gelöschten Zeilen
Patch-Datei herunterladen Vergleichs-Datei herunterladen Alle Dateien ausklappen Alle Dateien einklappen

BIN
frontend/assets/icons/add-task-96x96.png Normale Datei
Datei anzeigen

Binäre Datei nicht angezeigt.
Nebeneinander

Nachher

Breite:  |  Höhe:  |  Größe: 3.9 KiB

BIN
frontend/assets/icons/android-launchericon-144-144.png Normale Datei
Datei anzeigen

Binäre Datei nicht angezeigt.
Nebeneinander

Nachher

Breite:  |  Höhe:  |  Größe: 5.7 KiB

BIN
frontend/assets/icons/android-launchericon-192-192.png Normale Datei
Datei anzeigen

Binäre Datei nicht angezeigt.
Nebeneinander

Nachher

Breite:  |  Höhe:  |  Größe: 9.0 KiB

BIN
frontend/assets/icons/android-launchericon-48-48.png Normale Datei
Datei anzeigen

Binäre Datei nicht angezeigt.
Nebeneinander

Nachher

Breite:  |  Höhe:  |  Größe: 1.7 KiB

BIN
frontend/assets/icons/android-launchericon-512-512.png Normale Datei
Datei anzeigen

Binäre Datei nicht angezeigt.
Nebeneinander

Nachher

Breite:  |  Höhe:  |  Größe: 31 KiB

BIN
frontend/assets/icons/android-launchericon-72-72.png Normale Datei
Datei anzeigen

Binäre Datei nicht angezeigt.
Nebeneinander

Nachher

Breite:  |  Höhe:  |  Größe: 2.7 KiB

BIN
frontend/assets/icons/android-launchericon-96-96.png Normale Datei
Datei anzeigen

Binäre Datei nicht angezeigt.
Nebeneinander

Nachher

Breite:  |  Höhe:  |  Größe: 3.9 KiB

BIN
frontend/assets/icons/calendar-96x96.png Normale Datei
Datei anzeigen

Binäre Datei nicht angezeigt.
Nebeneinander

Nachher

Breite:  |  Höhe:  |  Größe: 3.9 KiB

198
frontend/assets/icons/create-icons.html Normale Datei
Datei anzeigen

@ -0,0 +1,198 @@
<!DOCTYPE html>
<html>
<head>
<title>Icon Generator</title>
</head>
<body>
<h1>TaskMate Icon Generator</h1>
<p>Diese Seite generiert die Icons im Browser. Klicke auf jeden Link, um die Icons herunterzuladen.</p>
<canvas id="canvas" style="border: 1px solid #ccc; display: none;"></canvas>
<div id="links"></div>
<script>
const sizes = [48, 72, 96, 128, 144, 152, 192, 384, 512];
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const linksDiv = document.getElementById('links');
function drawIcon(size) {
canvas.width = size;
canvas.height = 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 => {
drawIcon(size);
canvas.toBlob(blob => {
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = `icon-${size}x${size}.png`;
link.textContent = `icon-${size}x${size}.png`;
link.style.display = 'block';
link.style.marginBottom = '10px';
linksDiv.appendChild(link);
}, 'image/png');
});
// Shortcut icons
function drawAddTaskIcon() {
canvas.width = 96;
canvas.height = 96;
// 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() {
canvas.width = 96;
canvas.height = 96;
// 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();
}
setTimeout(() => {
drawAddTaskIcon();
canvas.toBlob(blob => {
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'add-task-96x96.png';
link.textContent = 'add-task-96x96.png';
link.style.display = 'block';
link.style.marginBottom = '10px';
linksDiv.appendChild(link);
}, 'image/png');
setTimeout(() => {
drawCalendarIcon();
canvas.toBlob(blob => {
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'calendar-96x96.png';
link.textContent = 'calendar-96x96.png';
link.style.display = 'block';
link.style.marginBottom = '10px';
linksDiv.appendChild(link);
}, 'image/png');
}, 100);
}, 100 * sizes.length);
</script>
</body>
</html>

BIN
frontend/assets/icons/favicon-16x16.png Normale Datei
Datei anzeigen

Binäre Datei nicht angezeigt.
Nebeneinander

Nachher

Breite:  |  Höhe:  |  Größe: 1.7 KiB

BIN
frontend/assets/icons/favicon-32x32.png Normale Datei
Datei anzeigen

Binäre Datei nicht angezeigt.
Nebeneinander

Nachher

Breite:  |  Höhe:  |  Größe: 1.7 KiB

154
frontend/assets/icons/generate-icons.js Normale Datei
Datei anzeigen

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

57
frontend/assets/icons/generate-icons.py Normale Datei
Datei anzeigen

@ -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', '''<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96" fill="none">
<rect width="96" height="96" rx="16" fill="#000000"/>
<path d="M48 32v32M32 48h32" stroke="#00D4FF" stroke-width="6" stroke-linecap="round"/>
</svg>'''),
('calendar', '''<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96" fill="none">
<rect width="96" height="96" rx="16" fill="#000000"/>
<rect x="20" y="28" width="56" height="48" rx="4" stroke="#00D4FF" stroke-width="4" fill="none"/>
<path d="M32 20v16M64 20v16M20 44h56" stroke="#00D4FF" stroke-width="4" stroke-linecap="round"/>
</svg>''')
]
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!')

BIN
frontend/assets/icons/icon-128x128.png Normale Datei
Datei anzeigen

Binäre Datei nicht angezeigt.
Nebeneinander

Nachher

Breite:  |  Höhe:  |  Größe: 5.7 KiB

BIN
frontend/assets/icons/icon-144x144.png Normale Datei
Datei anzeigen

Binäre Datei nicht angezeigt.
Nebeneinander

Nachher

Breite:  |  Höhe:  |  Größe: 5.7 KiB

BIN
frontend/assets/icons/icon-152x152.png Normale Datei
Datei anzeigen

Binäre Datei nicht angezeigt.
Nebeneinander

Nachher

Breite:  |  Höhe:  |  Größe: 9.0 KiB

BIN
frontend/assets/icons/icon-192x192.png Normale Datei
Datei anzeigen

Binäre Datei nicht angezeigt.
Nebeneinander

Nachher

Breite:  |  Höhe:  |  Größe: 9.0 KiB

BIN
frontend/assets/icons/icon-384x384.png Normale Datei
Datei anzeigen

Binäre Datei nicht angezeigt.
Nebeneinander

Nachher

Breite:  |  Höhe:  |  Größe: 31 KiB

BIN
frontend/assets/icons/icon-48x48.png Normale Datei
Datei anzeigen

Binäre Datei nicht angezeigt.
Nebeneinander

Nachher

Breite:  |  Höhe:  |  Größe: 1.7 KiB

BIN
frontend/assets/icons/icon-512x512.png Normale Datei
Datei anzeigen

Binäre Datei nicht angezeigt.
Nebeneinander

Nachher

Breite:  |  Höhe:  |  Größe: 31 KiB

BIN
frontend/assets/icons/icon-72x72.png Normale Datei
Datei anzeigen

Binäre Datei nicht angezeigt.
Nebeneinander

Nachher

Breite:  |  Höhe:  |  Größe: 2.7 KiB

BIN
frontend/assets/icons/icon-96x96.png Normale Datei
Datei anzeigen

Binäre Datei nicht angezeigt.
Nebeneinander

Nachher

Breite:  |  Höhe:  |  Größe: 3.9 KiB

21
frontend/assets/icons/icon-base64.txt Normale Datei
Datei anzeigen

@ -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
```

187
frontend/assets/icons/icon-generator-simple.html Normale Datei
Datei anzeigen

@ -0,0 +1,187 @@
<!DOCTYPE html>
<html>
<head>
<title>TaskMate Icon Generator - Einfach</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.status { margin: 20px 0; padding: 10px; background: #e8f4f8; }
button { padding: 10px 20px; font-size: 16px; cursor: pointer; }
</style>
</head>
<body>
<h1>TaskMate Icon Generator</h1>
<p>Dieser Generator erstellt alle benötigten Icons automatisch.</p>
<button onclick="generateAllIcons()">Alle Icons generieren und herunterladen</button>
<div class="status" id="status">Bereit zum Generieren...</div>
<canvas id="canvas" style="display: none;"></canvas>
<script>
const sizes = [48, 72, 96, 128, 144, 152, 192, 384, 512];
function downloadCanvas(canvas, filename) {
canvas.toBlob(function(blob) {
const link = document.createElement('a');
link.download = filename;
link.href = URL.createObjectURL(blob);
link.click();
URL.revokeObjectURL(link.href);
}, 'image/png');
}
function drawLogo(ctx, size) {
// Hintergrund
ctx.fillStyle = '#0A1832';
ctx.fillRect(0, 0, size, size);
// Einfaches Shield/Logo Design
const scale = size / 100;
ctx.save();
ctx.scale(scale, scale);
ctx.translate(50, 50);
// Linke Seite (Blau)
ctx.fillStyle = '#00D4FF';
ctx.beginPath();
ctx.moveTo(-30, -35);
ctx.lineTo(0, -35);
ctx.lineTo(0, 30);
ctx.quadraticCurveTo(-15, 40, -30, 30);
ctx.closePath();
ctx.fill();
// Rechte Seite (Gold)
ctx.fillStyle = '#C8A851';
ctx.beginPath();
ctx.moveTo(0, -35);
ctx.lineTo(30, -35);
ctx.lineTo(30, 30);
ctx.quadraticCurveTo(15, 40, 0, 30);
ctx.closePath();
ctx.fill();
ctx.restore();
}
function drawMaskableLogo(ctx, size) {
// Hintergrund (mit extra Padding für Maskable)
ctx.fillStyle = '#0A1832';
ctx.fillRect(0, 0, size, size);
// Logo kleiner für Safe Area
const scale = size / 140; // Extra Padding
ctx.save();
ctx.scale(scale, scale);
ctx.translate(70, 70);
// Linke Seite (Blau)
ctx.fillStyle = '#00D4FF';
ctx.beginPath();
ctx.moveTo(-30, -35);
ctx.lineTo(0, -35);
ctx.lineTo(0, 30);
ctx.quadraticCurveTo(-15, 40, -30, 30);
ctx.closePath();
ctx.fill();
// Rechte Seite (Gold)
ctx.fillStyle = '#C8A851';
ctx.beginPath();
ctx.moveTo(0, -35);
ctx.lineTo(30, -35);
ctx.lineTo(30, 30);
ctx.quadraticCurveTo(15, 40, 0, 30);
ctx.closePath();
ctx.fill();
ctx.restore();
}
async function generateAllIcons() {
const status = document.getElementById('status');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
status.textContent = 'Generiere Icons...';
// Generiere normale Icons
for (let i = 0; i < sizes.length; i++) {
const size = sizes[i];
canvas.width = size;
canvas.height = size;
drawLogo(ctx, size);
// Download mit Verzögerung
await new Promise(resolve => {
setTimeout(() => {
downloadCanvas(canvas, `icon-${size}x${size}.png`);
status.textContent = `Normal Icon ${size}x${size} generiert...`;
resolve();
}, 500 * i);
});
}
// Generiere Maskable Icons
for (let i = 0; i < sizes.length; i++) {
const size = sizes[i];
canvas.width = size;
canvas.height = size;
drawMaskableLogo(ctx, size);
// Download mit Verzögerung
await new Promise(resolve => {
setTimeout(() => {
downloadCanvas(canvas, `icon-maskable-${size}x${size}.png`);
status.textContent = `Maskable Icon ${size}x${size} generiert...`;
resolve();
}, 500 * (i + sizes.length));
});
}
// Zusätzliche Icons
// Add Task
canvas.width = 96;
canvas.height = 96;
ctx.fillStyle = '#0A1832';
ctx.fillRect(0, 0, 96, 96);
ctx.strokeStyle = '#00D4FF';
ctx.lineWidth = 6;
ctx.lineCap = 'round';
ctx.beginPath();
ctx.moveTo(48, 24);
ctx.lineTo(48, 72);
ctx.moveTo(24, 48);
ctx.lineTo(72, 48);
ctx.stroke();
setTimeout(() => {
downloadCanvas(canvas, 'add-task-96x96.png');
}, 500 * sizes.length * 2);
// Calendar
setTimeout(() => {
ctx.fillStyle = '#0A1832';
ctx.fillRect(0, 0, 96, 96);
ctx.strokeStyle = '#C8A851';
ctx.lineWidth = 4;
ctx.strokeRect(20, 28, 56, 48);
ctx.beginPath();
ctx.moveTo(32, 20);
ctx.lineTo(32, 36);
ctx.moveTo(64, 20);
ctx.lineTo(64, 36);
ctx.moveTo(20, 44);
ctx.lineTo(76, 44);
ctx.stroke();
downloadCanvas(canvas, 'calendar-96x96.png');
status.textContent = '✅ Alle Icons wurden generiert! Bitte alle Downloads speichern.';
}, 500 * sizes.length * 2 + 500);
}
</script>
</body>
</html>

253
frontend/assets/icons/icon-generator.html Normale Datei
Datei anzeigen

@ -0,0 +1,253 @@
<!DOCTYPE html>
<html>
<head>
<title>TaskMate Icon Generator</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background: #f5f5f5;
}
#canvas {
border: 1px solid #ddd;
background: white;
margin: 10px 0;
}
.icon-link {
display: inline-block;
margin: 5px;
padding: 8px 16px;
background: #0A1832;
color: white;
text-decoration: none;
border-radius: 4px;
}
.icon-link:hover {
background: #00D4FF;
}
h2 {
color: #0A1832;
margin-top: 30px;
}
</style>
</head>
<body>
<h1>TaskMate Icon Generator</h1>
<p>Klicken Sie auf die Links, um die Icons herunterzuladen:</p>
<canvas id="canvas" width="512" height="512"></canvas>
<h2>Haupt-Icons:</h2>
<div id="main-icons"></div>
<h2>Zusätzliche Icons:</h2>
<div id="extra-icons"></div>
<script>
const sizes = [48, 72, 96, 128, 144, 152, 192, 384, 512];
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const mainIconsDiv = document.getElementById('main-icons');
const extraIconsDiv = document.getElementById('extra-icons');
// Funktion zum Zeichnen des TaskMate Logos
function drawTaskMateLogo(ctx, size) {
// Skala berechnen
const scale = size / 512;
// Canvas-Größe setzen
canvas.width = size;
canvas.height = size;
// Skalierung anwenden
ctx.scale(scale, scale);
// Hintergrund (Navy-Blau mit abgerundeten Ecken)
const radius = 96;
ctx.fillStyle = '#0A1832';
ctx.beginPath();
ctx.moveTo(radius, 0);
ctx.lineTo(512 - radius, 0);
ctx.quadraticCurveTo(512, 0, 512, radius);
ctx.lineTo(512, 512 - radius);
ctx.quadraticCurveTo(512, 512, 512 - radius, 512);
ctx.lineTo(radius, 512);
ctx.quadraticCurveTo(0, 512, 0, 512 - radius);
ctx.lineTo(0, radius);
ctx.quadraticCurveTo(0, 0, radius, 0);
ctx.closePath();
ctx.fill();
// Logo zentrieren und zeichnen
ctx.save();
ctx.translate(56, 56);
ctx.scale(1, 0.804);
// Rechte Seite (Gold) - vereinfachte Version
ctx.fillStyle = '#C8A851';
ctx.beginPath();
ctx.moveTo(212, 240);
ctx.lineTo(270, 240);
ctx.quadraticCurveTo(346, 240, 346, 244);
ctx.lineTo(339, 272);
ctx.quadraticCurveTo(304, 327, 257, 380);
ctx.lineTo(257, 270);
ctx.lineTo(212, 271);
ctx.lineTo(212, 469);
ctx.quadraticCurveTo(275, 422, 340, 347);
ctx.quadraticCurveTo(373, 267, 377, 253);
ctx.lineTo(386, 202);
ctx.quadraticCurveTo(386, 197, 383, 198);
ctx.lineTo(256, 197);
ctx.lineTo(255, 90);
ctx.quadraticCurveTo(255, 74, 259, 74);
ctx.lineTo(345, 109);
ctx.lineTo(346, 164);
ctx.lineTo(387, 165);
ctx.lineTo(389, 137);
ctx.quadraticCurveTo(389, 81, 381, 77);
ctx.lineTo(212, 12);
ctx.closePath();
ctx.fill();
// Linke Seite (Hellblau) - vereinfachte Version
ctx.fillStyle = '#00D4FF';
ctx.beginPath();
ctx.moveTo(32, 73);
ctx.quadraticCurveTo(16, 77, 16, 86);
ctx.lineTo(13, 193);
ctx.quadraticCurveTo(22, 247, 39, 302);
ctx.quadraticCurveTo(55, 335, 76, 368);
ctx.quadraticCurveTo(86, 379, 93, 385);
ctx.lineTo(94, 383);
ctx.lineTo(94, 309);
ctx.quadraticCurveTo(88, 300, 62, 248);
ctx.lineTo(144, 241);
ctx.lineTo(146, 440);
ctx.quadraticCurveTo(177, 464, 188, 468);
ctx.lineTo(188, 12);
ctx.closePath();
ctx.fill();
// Innerer Teil
ctx.beginPath();
ctx.moveTo(146, 134);
ctx.lineTo(146, 192);
ctx.lineTo(58, 197);
ctx.lineTo(56, 126);
ctx.lineTo(136, 79);
ctx.lineTo(146, 77);
ctx.closePath();
ctx.fill();
ctx.restore();
// Skalierung zurücksetzen
ctx.setTransform(1, 0, 0, 1, 0, 0);
}
// Haupt-Icons generieren
sizes.forEach(size => {
setTimeout(() => {
drawTaskMateLogo(ctx, size);
canvas.toBlob(blob => {
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = `icon-${size}x${size}.png`;
link.textContent = `${size}x${size}`;
link.className = 'icon-link';
mainIconsDiv.appendChild(link);
}, 'image/png');
}, 100);
});
// Zusätzliche Icons
setTimeout(() => {
// Add Task Icon
canvas.width = 96;
canvas.height = 96;
ctx.fillStyle = '#0A1832';
ctx.fillRect(0, 0, 96, 96);
ctx.strokeStyle = '#00D4FF';
ctx.lineWidth = 6;
ctx.lineCap = 'round';
ctx.beginPath();
ctx.moveTo(48, 24);
ctx.lineTo(48, 72);
ctx.moveTo(24, 48);
ctx.lineTo(72, 48);
ctx.stroke();
canvas.toBlob(blob => {
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'add-task-96x96.png';
link.textContent = 'Add Task';
link.className = 'icon-link';
extraIconsDiv.appendChild(link);
}, 'image/png');
}, 1000);
setTimeout(() => {
// Calendar Icon
canvas.width = 96;
canvas.height = 96;
ctx.fillStyle = '#0A1832';
ctx.fillRect(0, 0, 96, 96);
ctx.strokeStyle = '#C8A851';
ctx.lineWidth = 4;
ctx.lineCap = 'round';
ctx.strokeRect(20, 28, 56, 48);
ctx.beginPath();
ctx.moveTo(32, 20);
ctx.lineTo(32, 36);
ctx.moveTo(64, 20);
ctx.lineTo(64, 36);
ctx.moveTo(20, 44);
ctx.lineTo(76, 44);
ctx.stroke();
canvas.toBlob(blob => {
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'calendar-96x96.png';
link.textContent = 'Calendar';
link.className = 'icon-link';
extraIconsDiv.appendChild(link);
}, 'image/png');
}, 1100);
// Favicon
setTimeout(() => {
drawTaskMateLogo(ctx, 32);
canvas.toBlob(blob => {
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'favicon-32x32.png';
link.textContent = 'Favicon 32';
link.className = 'icon-link';
extraIconsDiv.appendChild(link);
}, 'image/png');
}, 1200);
// Apple Touch Icon
setTimeout(() => {
drawTaskMateLogo(ctx, 180);
canvas.toBlob(blob => {
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'apple-touch-icon.png';
link.textContent = 'Apple Touch';
link.className = 'icon-link';
extraIconsDiv.appendChild(link);
}, 'image/png');
}, 1300);
</script>
</body>
</html>

BIN
frontend/assets/icons/icon-maskable-128x128.png Normale Datei
Datei anzeigen

Binäre Datei nicht angezeigt.
Nebeneinander

Nachher

Breite:  |  Höhe:  |  Größe: 5.7 KiB

BIN
frontend/assets/icons/icon-maskable-144x144.png Normale Datei
Datei anzeigen

Binäre Datei nicht angezeigt.
Nebeneinander

Nachher

Breite:  |  Höhe:  |  Größe: 5.7 KiB

BIN
frontend/assets/icons/icon-maskable-152x152.png Normale Datei
Datei anzeigen

Binäre Datei nicht angezeigt.
Nebeneinander

Nachher

Breite:  |  Höhe:  |  Größe: 9.0 KiB

BIN
frontend/assets/icons/icon-maskable-192x192.png Normale Datei
Datei anzeigen

Binäre Datei nicht angezeigt.
Nebeneinander

Nachher

Breite:  |  Höhe:  |  Größe: 9.0 KiB

BIN
frontend/assets/icons/icon-maskable-384x384.png Normale Datei
Datei anzeigen

Binäre Datei nicht angezeigt.
Nebeneinander

Nachher

Breite:  |  Höhe:  |  Größe: 31 KiB

BIN
frontend/assets/icons/icon-maskable-48x48.png Normale Datei
Datei anzeigen

Binäre Datei nicht angezeigt.
Nebeneinander

Nachher

Breite:  |  Höhe:  |  Größe: 1.7 KiB

BIN
frontend/assets/icons/icon-maskable-512x512.png Normale Datei
Datei anzeigen

Binäre Datei nicht angezeigt.
Nebeneinander

Nachher

Breite:  |  Höhe:  |  Größe: 31 KiB

BIN
frontend/assets/icons/icon-maskable-72x72.png Normale Datei
Datei anzeigen

Binäre Datei nicht angezeigt.
Nebeneinander

Nachher

Breite:  |  Höhe:  |  Größe: 2.7 KiB

BIN
frontend/assets/icons/icon-maskable-96x96.png Normale Datei
Datei anzeigen

Binäre Datei nicht angezeigt.
Nebeneinander

Nachher

Breite:  |  Höhe:  |  Größe: 3.9 KiB

14
frontend/assets/icons/task.svg Normale Datei
Datei anzeigen

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="512" height="512" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg">
<!-- Hintergrund mit abgerundeten Ecken -->
<rect width="512" height="512" rx="96" fill="#0A1832"/>
<!-- Zentriertes und skaliertes AegisSight Logo -->
<g transform="translate(56, 56) scale(1, 0.804)">
<!-- Rechte Seite (Gold) -->
<path d="M212.575,238.576C212.984,240.67 223.048,241.002 270.154,240.533C349.694,239.739 344.481,239.31 346.236,243.942C347.823,248.13 347.264,250.927 338.778,272.292C333.041,286.737 321.692,301.671 304.569,327.057C262.704,389.124 258.243,380.556 257.465,379.844C256.548,379.007 256.695,378.153 256.7,377.409C256.827,359.293 254.573,273.452 254.549,270.937C254.525,268.422 254.116,268.891 229.156,268.982C211.282,269.047 211.756,268.669 211.925,271.847C211.971,272.701 212.094,316.69 212.2,369.6C212.306,422.51 212.487,468.568 212.604,469.063C213.014,470.81 224.336,462 224.6,462C224.864,462 237.107,453.265 241.4,450.384C242.5,449.646 244.343,448.313 245.496,447.421C246.648,446.53 248.865,444.9 250.421,443.8C251.978,442.7 255.169,440.115 257.513,438.055C259.857,435.996 262.771,433.605 263.988,432.743C267.489,430.261 269.974,428.216 270.637,427.269C270.973,426.789 271.767,426.127 272.4,425.8C273.034,425.472 273.862,424.68 274.24,424.04C274.618,423.399 275.574,422.512 276.364,422.067C277.741,421.292 287.002,412.973 290.077,409.749C290.89,408.897 293.68,406.009 296.277,403.331C303.179,396.216 308.766,389.886 310.684,387.009C311.611,385.619 312.782,384.149 313.286,383.741C313.791,383.334 314.523,382.55 314.913,382C315.304,381.45 316.113,380.353 316.711,379.562C317.31,378.771 318.552,377.132 319.471,375.919C320.389,374.706 321.709,373.103 322.403,372.357C324.097,370.534 325.597,368.32 327.217,365.252C327.957,363.85 329.057,362.338 329.66,361.892C330.264,361.446 331.622,359.655 332.679,357.912C333.735,356.168 335.453,353.696 336.496,352.417C337.539,351.139 338.935,348.947 339.599,347.546C341.424,343.695 344.598,338.004 345.689,336.626C347.172,334.754 348.692,331.944 348.986,330.528C349.132,329.828 349.51,329.041 349.826,328.779C350.142,328.517 350.4,328.069 350.4,327.784C350.4,327.499 351.048,326.045 351.84,324.552C352.632,323.059 353.784,320.479 354.401,318.819C355.017,317.159 356.416,314.072 357.509,311.96C358.602,309.848 359.894,306.968 360.38,305.56C360.866,304.152 361.593,302.46 361.995,301.8C362.398,301.14 362.941,299.795 363.203,298.812C363.464,297.828 363.931,296.663 364.239,296.223C364.548,295.782 364.8,295.078 364.8,294.658C364.8,293.56 367.089,287.051 368.23,284.904C368.764,283.901 369.201,282.793 369.202,282.44C369.204,282.088 369.46,281.312 369.771,280.715C370.082,280.118 370.552,278.588 370.814,277.315C371.076,276.042 371.715,273.867 372.234,272.482C372.753,271.097 373.442,268.667 373.765,267.082C374.657,262.705 375.074,261.226 376.185,258.503C376.746,257.13 377.395,254.61 377.628,252.903C377.861,251.196 386.4,207.294 386.4,202.415C386.4,200.114 384.943,198.138 382.973,197.769C382.197,197.623 390.698,196.027 262.4,197.136L256.297,196.493C254.923,195.188 254.409,193.392 254.634,190.691C255.021,186.052 255.075,102.153 254.699,90.2C254.256,76.132 254.359,75.232 256.566,73.785C257.5,73.174 257.724,73.166 258.9,73.706C259.615,74.035 343.437,105.997 345.2,108.641L346.2,110.142L346.246,163.984L347.17,164.968L348.095,165.953L367.317,165.835L386.539,165.718L387.711,164.406L388.883,163.095L388.646,155.847C388.515,151.861 388.304,143.29 388.176,136.8C387.97,126.347 389.116,102.223 388.883,92.984C388.587,81.212 385.041,79.623 381.162,77.313C378.036,75.451 212.403,10.83 212.49,12.505" style="fill:#C8A851"/>
<!-- Linke Seite (Navy) -->
<path d="M31.8,72.797C19.193,77.854 16.869,77.149 16.354,86.093C16.177,89.171 13.694,109.47 13.373,112C11.292,128.389 11.075,175.356 12.999,192.8C13.326,195.77 15.755,217.626 17.524,225.4C17.975,227.38 21.242,245.556 21.798,247.6C23.196,252.741 27.444,269.357 28.368,273C29.454,277.277 33.845,288.636 34.632,290.326C35.42,292.017 39.017,301.259 39.364,301.931C39.973,303.107 41.279,306.405 42.799,310.6C43.879,313.58 46.904,319.091 47.546,320.62C48.78,323.561 51.339,328.992 51.965,330C52.17,330.33 53.466,332.67 54.845,335.2C56.223,337.73 65.855,353.259 67.765,356.052C72.504,362.981 75.544,366.754 76.46,368.119C78.119,370.593 79.488,372.185 85.821,379C87.66,380.98 89.758,383.356 90.483,384.279C92.003,386.218 92.035,386.23 93.151,385.3C94.267,384.37 94.041,384.013 94.036,382.593C94.015,376.905 94.025,351.182 94.025,351.182C94.062,315.081 94.745,313.16 93.752,308.626C92.302,301.997 88.001,300.043 80.439,284.793C71.474,266.714 65.169,255.803 62.016,248.485C61.011,246.153 59.289,240.91 61.521,240.882C65.215,240.836 143.575,240.107 144.382,240.673C145.808,241.671 146.494,243.516 146.346,245.959C146.058,250.736 146.217,438.282 146.511,439.663C146.825,441.137 153.946,447.096 162.193,452.924C177.223,463.547 187.111,469.578 187.956,468.458C189.091,466.954 188.058,10.288 188.006,12.482M146.001,134.292C145.999,164.821 146.043,190.718 146.099,191.84C146.336,196.617 147.019,196.45 127.622,196.354C106.312,196.249 58.054,196.89 58.054,196.89L57.06,195.896C55.315,194.152 55.678,132.49 55.766,126C56.004,108.467 56.656,110.707 66.745,106.586C70.345,105.116 134.261,79.128 135.708,78.566C146.998,74.183 145.972,74.295 146.055,76.768" style="fill:#00D4FF"/>
</g>
</svg>
Nebeneinander

Nachher

Breite:  |  Höhe:  |  Größe: 5.3 KiB

14
frontend/assets/icons/taskmate-logo.svg Normale Datei
Datei anzeigen

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="512" height="512" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg">
<!-- Hintergrund mit abgerundeten Ecken -->
<rect width="512" height="512" rx="96" fill="#0A1832"/>
<!-- Zentriertes und skaliertes AegisSight Logo -->
<g transform="translate(56, 56) scale(1, 0.804)">
<!-- Rechte Seite (Gold) -->
<path d="M212.575,238.576C212.984,240.67 223.048,241.002 270.154,240.533C349.694,239.739 344.481,239.31 346.236,243.942C347.823,248.13 347.264,250.927 338.778,272.292C333.041,286.737 321.692,301.671 304.569,327.057C262.704,389.124 258.243,380.556 257.465,379.844C256.548,379.007 256.695,378.153 256.7,377.409C256.827,359.293 254.573,273.452 254.549,270.937C254.525,268.422 254.116,268.891 229.156,268.982C211.282,269.047 211.756,268.669 211.925,271.847C211.971,272.701 212.094,316.69 212.2,369.6C212.306,422.51 212.487,468.568 212.604,469.063C213.014,470.81 224.336,462 224.6,462C224.864,462 237.107,453.265 241.4,450.384C242.5,449.646 244.343,448.313 245.496,447.421C246.648,446.53 248.865,444.9 250.421,443.8C251.978,442.7 255.169,440.115 257.513,438.055C259.857,435.996 262.771,433.605 263.988,432.743C267.489,430.261 269.974,428.216 270.637,427.269C270.973,426.789 271.767,426.127 272.4,425.8C273.034,425.472 273.862,424.68 274.24,424.04C274.618,423.399 275.574,422.512 276.364,422.067C277.741,421.292 287.002,412.973 290.077,409.749C290.89,408.897 293.68,406.009 296.277,403.331C303.179,396.216 308.766,389.886 310.684,387.009C311.611,385.619 312.782,384.149 313.286,383.741C313.791,383.334 314.523,382.55 314.913,382C315.304,381.45 316.113,380.353 316.711,379.562C317.31,378.771 318.552,377.132 319.471,375.919C320.389,374.706 321.709,373.103 322.403,372.357C324.097,370.534 325.597,368.32 327.217,365.252C327.957,363.85 329.057,362.338 329.66,361.892C330.264,361.446 331.622,359.655 332.679,357.912C333.735,356.168 335.453,353.696 336.496,352.417C337.539,351.139 338.935,348.947 339.599,347.546C341.424,343.695 344.598,338.004 345.689,336.626C347.172,334.754 348.692,331.944 348.986,330.528C349.132,329.828 349.51,329.041 349.826,328.779C350.142,328.517 350.4,328.069 350.4,327.784C350.4,327.499 351.048,326.045 351.84,324.552C352.632,323.059 353.784,320.479 354.401,318.819C355.017,317.159 356.416,314.072 357.509,311.96C358.602,309.848 359.894,306.968 360.38,305.56C360.866,304.152 361.593,302.46 361.995,301.8C362.398,301.14 362.941,299.795 363.203,298.812C363.464,297.828 363.931,296.663 364.239,296.223C364.548,295.782 364.8,295.078 364.8,294.658C364.8,293.56 367.089,287.051 368.23,284.904C368.764,283.901 369.201,282.793 369.202,282.44C369.204,282.088 369.46,281.312 369.771,280.715C370.082,280.118 370.552,278.588 370.814,277.315C371.076,276.042 371.715,273.867 372.234,272.482C372.753,271.097 373.442,268.667 373.765,267.082C374.657,262.705 375.074,261.226 376.185,258.503C376.746,257.13 377.395,254.61 377.628,252.903C377.861,251.196 386.4,207.294 386.4,202.415C386.4,200.114 384.943,198.138 382.973,197.769C382.197,197.623 390.698,196.027 262.4,197.136L256.297,196.493C254.923,195.188 254.409,193.392 254.634,190.691C255.021,186.052 255.075,102.153 254.699,90.2C254.256,76.132 254.359,75.232 256.566,73.785C257.5,73.174 257.724,73.166 258.9,73.706C259.615,74.035 343.437,105.997 345.2,108.641L346.2,110.142L346.246,163.984L347.17,164.968L348.095,165.953L367.317,165.835L386.539,165.718L387.711,164.406L388.883,163.095L388.646,155.847C388.515,151.861 388.304,143.29 388.176,136.8C387.97,126.347 389.116,102.223 388.883,92.984C388.587,81.212 385.041,79.623 381.162,77.313C378.036,75.451 212.403,10.83 212.49,12.505" style="fill:#C8A851"/>
<!-- Linke Seite (Navy) -->
<path d="M31.8,72.797C19.193,77.854 16.869,77.149 16.354,86.093C16.177,89.171 13.694,109.47 13.373,112C11.292,128.389 11.075,175.356 12.999,192.8C13.326,195.77 15.755,217.626 17.524,225.4C17.975,227.38 21.242,245.556 21.798,247.6C23.196,252.741 27.444,269.357 28.368,273C29.454,277.277 33.845,288.636 34.632,290.326C35.42,292.017 39.017,301.259 39.364,301.931C39.973,303.107 41.279,306.405 42.799,310.6C43.879,313.58 46.904,319.091 47.546,320.62C48.78,323.561 51.339,328.992 51.965,330C52.17,330.33 53.466,332.67 54.845,335.2C56.223,337.73 65.855,353.259 67.765,356.052C72.504,362.981 75.544,366.754 76.46,368.119C78.119,370.593 79.488,372.185 85.821,379C87.66,380.98 89.758,383.356 90.483,384.279C92.003,386.218 92.035,386.23 93.151,385.3C94.267,384.37 94.041,384.013 94.036,382.593C94.015,376.905 94.025,351.182 94.025,351.182C94.062,315.081 94.745,313.16 93.752,308.626C92.302,301.997 88.001,300.043 80.439,284.793C71.474,266.714 65.169,255.803 62.016,248.485C61.011,246.153 59.289,240.91 61.521,240.882C65.215,240.836 143.575,240.107 144.382,240.673C145.808,241.671 146.494,243.516 146.346,245.959C146.058,250.736 146.217,438.282 146.511,439.663C146.825,441.137 153.946,447.096 162.193,452.924C177.223,463.547 187.111,469.578 187.956,468.458C189.091,466.954 188.058,10.288 188.006,12.482M146.001,134.292C145.999,164.821 146.043,190.718 146.099,191.84C146.336,196.617 147.019,196.45 127.622,196.354C106.312,196.249 58.054,196.89 58.054,196.89L57.06,195.896C55.315,194.152 55.678,132.49 55.766,126C56.004,108.467 56.656,110.707 66.745,106.586C70.345,105.116 134.261,79.128 135.708,78.566C146.998,74.183 145.972,74.295 146.055,76.768" style="fill:#00D4FF"/>
</g>
</svg>
Nebeneinander

Nachher

Breite:  |  Höhe:  |  Größe: 5.3 KiB