`public/icons/icon-converter.html`

115 lines
<!DOCTYPE html>
<html>
<head>
    <title>Icon Converter</title>
    <style>
        body { font-family: Arial; padding: 20px; }
        canvas { border: 1px solid #ccc; margin: 10px; }
        .icon-group { margin-bottom: 20px; }
    </style>
</head>
<body>
    <h1>PWA Icon Converter</h1>
    <p>Right-click each canvas and "Save image as..." to create PNG icons.</p>

    <div id="icons"></div>

    <script>
        const sizes = [72,96,128,144,152,192,384,512];
        const iconsContainer = document.getElementById('icons');

        sizes.forEach(size => {
            const div = document.createElement('div');
            div.className = 'icon-group';

            const title = document.createElement('h3');
            title.textContent = `icon-${size}x${size}.png`;
            div.appendChild(title);

            const canvas = document.createElement('canvas');
            canvas.width = size;
            canvas.height = size;
            div.appendChild(canvas);

            const ctx = canvas.getContext('2d');

            // Background
            ctx.fillStyle = '#0C1E3C';
            ctx.fillRect(0, 0, size, size);

            // Scale factor
            const scale = size / 512;

            ctx.translate(size / 2, size / 2);
            ctx.scale(scale, scale);

            // Outer circle
            ctx.strokeStyle = '#C41E3A';
            ctx.lineWidth = 24;
            ctx.beginPath();
            ctx.arc(0, 0, 180, 0, Math.PI * 2);
            ctx.stroke();

            // Inner circle
            ctx.lineWidth = 16;
            ctx.beginPath();
            ctx.arc(0, 0, 120, 0, Math.PI * 2);
            ctx.stroke();

            // Bottom gap
            ctx.fillStyle = '#0C1E3C';
            ctx.fillRect(-20, 140, 40, 80);

            // Bottom extensions
            ctx.fillStyle = '#C41E3A';
            ctx.beginPath();
            ctx.roundRect(-140, 180, 100, 24, 12);
            ctx.fill();
            ctx.beginPath();
            ctx.roundRect(40, 180, 100, 24, 12);
            ctx.fill();

            // Watch hands
            ctx.strokeStyle = '#fff';
            ctx.lineWidth = 12;
            ctx.lineCap = 'round';
            ctx.beginPath();
            ctx.moveTo(0, 0);
            ctx.lineTo(0, -80);
            ctx.stroke();

            ctx.lineWidth = 10;
            ctx.beginPath();
            ctx.moveTo(0, 0);
            ctx.lineTo(60, 40);
            ctx.stroke();

            // Center dot
            ctx.fillStyle = '#C41E3A';
            ctx.beginPath();
            ctx.arc(0, 0, 16, 0, Math.PI * 2);
            ctx.fill();

            ctx.fillStyle = '#fff';
            ctx.beginPath();
            ctx.arc(0, 0, 8, 0, Math.PI * 2);
            ctx.fill();

            // Reset transform for text
            ctx.setTransform(1, 0, 0, 1, 0, 0);

            // Text (for larger icons)
            if (size >= 192) {
                ctx.fillStyle = '#C41E3A';
                ctx.font = `bold ${48 * scale}px Arial`;
                ctx.textAlign = 'center';
                ctx.fillText('OMEGA', size / 2, size - 42 * scale);
            }

            iconsContainer.appendChild(div);
        });
    </script>
</body>
</html>