198 Zeilen
6.6 KiB
HTML
198 Zeilen
6.6 KiB
HTML
<!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> |