smart-dash/create-icons.html at main · sudha09-git/smart-dash · GitHub

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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html>
<head>
    <title>Create Chrome Extension Icons</title>
    <style>
        body { font-family: Arial; padding: 20px; }
        .container { max-width: 600px; margin: 0 auto; }
        .preview { display: flex; gap: 20px; margin: 20px 0; }
        canvas { border: 1px solid #ccc; }
        button { background: #667eea; color: white; border: none;
                 padding: 10px 20px; border-radius: 5px; cursor: pointer;
                 margin: 10px 5px; }
        button:hover { background: #5a67d8; }
    </style>
</head>
<body>
    <div class="container">
        <h1>Create Chrome Extension Icons</h1>

        <div class="preview">
            <div>
                <h3>128x128</h3>
                <canvas id="icon128" width="128" height="128"></canvas>
            </div>
            <div>
                <h3>48x48</h3>
                <canvas id="icon48" width="48" height="48"></canvas>
            </div>
            <div>
                <h3>16x16</h3>
                <canvas id="icon16" width="16" height="16"></canvas>
            </div>
        </div>

        <div>
            <button onclick="createAllIcons()">Create All Icons</button>
            <button onclick="downloadSingle(128)">Download 128px</button>
            <button onclick="downloadSingle(48)">Download 48px</button>
            <button onclick="downloadSingle(16)">Download 16px</button>
        </div>

        <p style="color: green; margin-top: 20px;" id="message"></p>
    </div>

    <script>
        // Draw icons on all canvases
        function drawIcon(size, canvasId) {
            const canvas = document.getElementById(canvasId);
            const ctx = canvas.getContext('2d');

            // Clear canvas
            ctx.clearRect(0, 0, size, size);

            // Draw background
            ctx.fillStyle = '#667eea';
            ctx.fillRect(0, 0, size, size);

            // Draw "SD" text
            ctx.fillStyle = 'white';
            ctx.font = `bold ${size * 0.4}px Arial`;
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillText('SD', size/2, size/2);
        }

        // Initialize all canvases
        drawIcon(128, 'icon128');
        drawIcon(48, 'icon48');
        drawIcon(16, 'icon16');

        // Download single icon
        function downloadSingle(size) {
            const canvas = document.getElementById(`icon${size}`);
            const link = document.createElement('a');
            link.download = `icon${size}.png`;
            link.href = canvas.toDataURL('image/png');
            link.click();
            document.getElementById('message').textContent = `Downloaded icon${size}.png`;
        }

        // Download all icons
        function createAllIcons() {
            // Create icons folder in memory
            const sizes = [16, 48, 128];
            let downloaded = 0;

            sizes.forEach(size => {
                setTimeout(() => {
                    downloadSingle(size);
                    downloaded++;

                    if (downloaded === sizes.length) {
                        document.getElementById('message').textContent =
                            'All icons downloaded! Save them in /icons folder.';
                    }
                }, downloaded * 500);
            });
        }
    </script>
</body>
</html>