2025-08-18 20:00:58 +02:00
|
|
|
<!doctype html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8" />
|
|
|
|
|
<title>Generate PWA Icons</title>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2025-08-18 20:03:51 +02:00
|
|
|
<h1>Icon Generator for GlitchCraft</h1>
|
2025-08-18 20:00:58 +02:00
|
|
|
<p>Right-click each canvas and save as PNG to the icons folder</p>
|
|
|
|
|
|
|
|
|
|
<div id="canvases"></div>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
// Icon sizes needed for PWA
|
|
|
|
|
const sizes = [72, 96, 128, 144, 152, 192, 384, 512];
|
|
|
|
|
|
|
|
|
|
function createIcon(size) {
|
|
|
|
|
const canvas = document.createElement('canvas');
|
|
|
|
|
canvas.width = size;
|
|
|
|
|
canvas.height = size;
|
|
|
|
|
|
|
|
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
|
|
|
|
|
|
// Background gradient
|
|
|
|
|
const gradient = ctx.createLinearGradient(0, 0, size, size);
|
|
|
|
|
gradient.addColorStop(0, '#1a1a2e');
|
|
|
|
|
gradient.addColorStop(1, '#0f0f14');
|
|
|
|
|
ctx.fillStyle = gradient;
|
|
|
|
|
ctx.fillRect(0, 0, size, size);
|
|
|
|
|
|
|
|
|
|
// Add glitch lines effect
|
|
|
|
|
ctx.strokeStyle = 'rgba(0, 255, 136, 0.1)';
|
|
|
|
|
ctx.lineWidth = 1;
|
|
|
|
|
for (let i = 0; i < size; i += 4) {
|
|
|
|
|
ctx.beginPath();
|
|
|
|
|
ctx.moveTo(0, i);
|
|
|
|
|
ctx.lineTo(size, i);
|
|
|
|
|
ctx.stroke();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Center circle background
|
|
|
|
|
const centerX = size / 2;
|
|
|
|
|
const centerY = size / 2;
|
|
|
|
|
const radius = size * 0.35;
|
|
|
|
|
|
|
|
|
|
ctx.beginPath();
|
|
|
|
|
ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
|
|
|
|
|
const circleGradient = ctx.createRadialGradient(
|
|
|
|
|
centerX,
|
|
|
|
|
centerY,
|
|
|
|
|
0,
|
|
|
|
|
centerX,
|
|
|
|
|
centerY,
|
|
|
|
|
radius
|
|
|
|
|
);
|
|
|
|
|
circleGradient.addColorStop(0, '#00ff88');
|
|
|
|
|
circleGradient.addColorStop(1, '#00cc6a');
|
|
|
|
|
ctx.fillStyle = circleGradient;
|
|
|
|
|
ctx.fill();
|
|
|
|
|
|
|
|
|
|
// Add corrupted "T" letter with zalgo effect simulation
|
|
|
|
|
ctx.font = `bold ${size * 0.4}px Arial`;
|
|
|
|
|
ctx.fillStyle = '#0f0f14';
|
|
|
|
|
ctx.textAlign = 'center';
|
|
|
|
|
ctx.textBaseline = 'middle';
|
|
|
|
|
|
|
|
|
|
// Main letter
|
|
|
|
|
ctx.fillText('T', centerX, centerY);
|
|
|
|
|
|
|
|
|
|
// Simulated zalgo corruption marks
|
|
|
|
|
ctx.fillStyle = 'rgba(15, 15, 20, 0.5)';
|
|
|
|
|
const corruption = ['̴', '̸', '̶', '̷', '̵'];
|
|
|
|
|
const offsetX = size * 0.02;
|
|
|
|
|
const offsetY = size * 0.02;
|
|
|
|
|
|
|
|
|
|
// Add small corruption marks around the letter
|
|
|
|
|
for (let i = 0; i < 3; i++) {
|
|
|
|
|
const x = centerX + (Math.random() - 0.5) * offsetX * 2;
|
|
|
|
|
const y = centerY + (Math.random() - 0.5) * offsetY * 2;
|
|
|
|
|
ctx.font = `${size * 0.1}px Arial`;
|
|
|
|
|
ctx.fillText('░', x, y - size * 0.15);
|
|
|
|
|
ctx.fillText('▒', x + offsetX, y + size * 0.15);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Add glitch effect
|
|
|
|
|
ctx.strokeStyle = '#ff3366';
|
|
|
|
|
ctx.lineWidth = 1;
|
|
|
|
|
ctx.globalAlpha = 0.3;
|
|
|
|
|
ctx.strokeText('T', centerX - 2, centerY);
|
|
|
|
|
ctx.strokeStyle = '#00ffff';
|
|
|
|
|
ctx.strokeText('T', centerX + 2, centerY);
|
|
|
|
|
ctx.globalAlpha = 1;
|
|
|
|
|
|
|
|
|
|
// Add label
|
|
|
|
|
const label = document.createElement('div');
|
|
|
|
|
label.textContent = `icon-${size}.png`;
|
|
|
|
|
label.style.marginTop = '10px';
|
|
|
|
|
label.style.marginBottom = '20px';
|
|
|
|
|
|
|
|
|
|
const container = document.createElement('div');
|
|
|
|
|
container.appendChild(canvas);
|
|
|
|
|
container.appendChild(label);
|
|
|
|
|
|
|
|
|
|
return container;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Generate all icons
|
|
|
|
|
const container = document.getElementById('canvases');
|
|
|
|
|
sizes.forEach(size => {
|
|
|
|
|
container.appendChild(createIcon(size));
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Auto-download function (optional - uncomment to use)
|
|
|
|
|
/*
|
|
|
|
|
function downloadCanvas(canvas, filename) {
|
|
|
|
|
canvas.toBlob(blob => {
|
|
|
|
|
const url = URL.createObjectURL(blob);
|
|
|
|
|
const a = document.createElement('a');
|
|
|
|
|
a.href = url;
|
|
|
|
|
a.download = filename;
|
|
|
|
|
a.click();
|
|
|
|
|
URL.revokeObjectURL(url);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Auto-download all icons
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
const canvases = document.querySelectorAll('canvas');
|
|
|
|
|
canvases.forEach((canvas, index) => {
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
downloadCanvas(canvas, `icon-${sizes[index]}.png`);
|
|
|
|
|
}, index * 500);
|
|
|
|
|
});
|
|
|
|
|
}, 1000);
|
|
|
|
|
*/
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
body {
|
|
|
|
|
font-family: Arial, sans-serif;
|
|
|
|
|
padding: 20px;
|
|
|
|
|
background: #f0f0f0;
|
|
|
|
|
}
|
|
|
|
|
canvas {
|
|
|
|
|
border: 1px solid #ccc;
|
|
|
|
|
display: block;
|
|
|
|
|
background: white;
|
|
|
|
|
}
|
|
|
|
|
#canvases > div {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
margin: 10px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
