253 Zeilen
8.3 KiB
HTML
253 Zeilen
8.3 KiB
HTML
<!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> |