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
253
frontend/assets/icons/icon-generator.html
Normale Datei
253
frontend/assets/icons/icon-generator.html
Normale Datei
@ -0,0 +1,253 @@
|
||||
<!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>
|
||||
In neuem Issue referenzieren
Einen Benutzer sperren