Spaces:
Running
Running
File size: 2,786 Bytes
9bea604 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
<!DOCTYPE html>
<html>
<head>
<title>Generate PWA Icons</title>
</head>
<body>
<canvas id="canvas192" width="192" height="192" style="border: 1px solid #000; margin: 10px;"></canvas>
<canvas id="canvas512" width="512" height="512" style="border: 1px solid #000; margin: 10px;"></canvas>
<script>
function drawIcon(canvas, size) {
const ctx = canvas.getContext('2d');
// Background
ctx.fillStyle = '#0d6efd';
ctx.fillRect(0, 0, size, size);
// Border radius effect (simplified)
ctx.globalCompositeOperation = 'destination-in';
ctx.beginPath();
ctx.roundRect(0, 0, size, size, size * 0.125);
ctx.fill();
ctx.globalCompositeOperation = 'source-over';
// Audio bars
ctx.fillStyle = 'white';
const barWidth = size * 0.06;
const spacing = size * 0.08;
const baseY = size * 0.35;
// Bar 1
const x1 = size * 0.25;
const h1 = size * 0.3;
ctx.fillRect(x1, baseY, barWidth, h1);
// Bar 2
const x2 = x1 + barWidth + spacing;
const h2 = size * 0.45;
ctx.fillRect(x2, baseY - size * 0.075, barWidth, h2);
// Bar 3
const x3 = x2 + barWidth + spacing;
const h3 = size * 0.38;
ctx.fillRect(x3, baseY - size * 0.04, barWidth, h3);
// Bar 4
const x4 = x3 + barWidth + spacing;
const h4 = size * 0.3;
ctx.fillRect(x4, baseY, barWidth, h4);
// Text
ctx.fillStyle = 'white';
ctx.font = `bold ${size * 0.08}px Arial`;
ctx.textAlign = 'center';
ctx.fillText('VELIN', size / 2, size * 0.85);
}
drawIcon(document.getElementById('canvas192'), 192);
drawIcon(document.getElementById('canvas512'), 512);
// Convert to downloads
setTimeout(() => {
const canvas192 = document.getElementById('canvas192');
const canvas512 = document.getElementById('canvas512');
const link192 = document.createElement('a');
link192.download = 'icon-192.png';
link192.href = canvas192.toDataURL();
link192.click();
setTimeout(() => {
const link512 = document.createElement('a');
link512.download = 'icon-512.png';
link512.href = canvas512.toDataURL();
link512.click();
}, 1000);
}, 1000);
</script>
</body>
</html>
|