187 Zeilen
6.3 KiB
HTML
187 Zeilen
6.3 KiB
HTML
<!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> |