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
198
frontend/assets/icons/create-icons.html
Normale Datei
198
frontend/assets/icons/create-icons.html
Normale Datei
@ -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>
|
||||
In neuem Issue referenzieren
Einen Benutzer sperren