Logo für Webseiten-Tab implementiert
Dieser Commit ist enthalten in:
hendrik_gebhardt@gmx.de
committet von
Server Deploy
Server Deploy
Ursprung
ef153789cc
Commit
5b1f8b1cfe
187
frontend/assets/icons/icon-generator-simple.html
Normale Datei
187
frontend/assets/icons/icon-generator-simple.html
Normale Datei
@ -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>
|
||||
In neuem Issue referenzieren
Einen Benutzer sperren