Spaces:
Running
Running
| <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> | |