1+ const fs = require ( 'fs' ) ;
2+ const { createCanvas } = require ( 'canvas' ) ;
3+
4+ // Create apple-touch-icon.png (180x180)
5+ function createAppleTouchIcon ( ) {
6+ const canvas = createCanvas ( 180 , 180 ) ;
7+ const ctx = canvas . getContext ( '2d' ) ;
8+
9+ // Create gradient background
10+ const gradient = ctx . createLinearGradient ( 0 , 0 , 180 , 180 ) ;
11+ gradient . addColorStop ( 0 , '#2563eb' ) ;
12+ gradient . addColorStop ( 1 , '#1d4ed8' ) ;
13+
14+ // Draw rounded rectangle background
15+ ctx . fillStyle = gradient ;
16+ roundRect ( ctx , 0 , 0 , 180 , 180 , 28 ) ;
17+ ctx . fill ( ) ;
18+
19+ // Draw IP text
20+ ctx . fillStyle = '#ffffff' ;
21+ ctx . font = 'bold 60px Arial, sans-serif' ;
22+ ctx . textAlign = 'center' ;
23+ ctx . textBaseline = 'middle' ;
24+ ctx . fillText ( 'IP' , 90 , 90 ) ;
25+
26+ // Save the image
27+ const buffer = canvas . toBuffer ( 'image/png' ) ;
28+ fs . writeFileSync ( 'www/assets/images/apple-touch-icon.png' , buffer ) ;
29+ console . log ( 'Created apple-touch-icon.png' ) ;
30+ }
31+
32+ // Create android-chrome-192x192.png
33+ function createAndroidChrome192 ( ) {
34+ const canvas = createCanvas ( 192 , 192 ) ;
35+ const ctx = canvas . getContext ( '2d' ) ;
36+
37+ // Create gradient background
38+ const gradient = ctx . createLinearGradient ( 0 , 0 , 192 , 192 ) ;
39+ gradient . addColorStop ( 0 , '#2563eb' ) ;
40+ gradient . addColorStop ( 1 , '#1d4ed8' ) ;
41+
42+ // Draw rounded rectangle background
43+ ctx . fillStyle = gradient ;
44+ roundRect ( ctx , 0 , 0 , 192 , 192 , 30 ) ;
45+ ctx . fill ( ) ;
46+
47+ // Draw IP text
48+ ctx . fillStyle = '#ffffff' ;
49+ ctx . font = 'bold 64px Arial, sans-serif' ;
50+ ctx . textAlign = 'center' ;
51+ ctx . textBaseline = 'middle' ;
52+ ctx . fillText ( 'IP' , 96 , 96 ) ;
53+
54+ // Save the image
55+ const buffer = canvas . toBuffer ( 'image/png' ) ;
56+ fs . writeFileSync ( 'www/assets/images/android-chrome-192x192.png' , buffer ) ;
57+ console . log ( 'Created android-chrome-192x192.png' ) ;
58+ }
59+
60+ // Create android-chrome-512x512.png
61+ function createAndroidChrome512 ( ) {
62+ const canvas = createCanvas ( 512 , 512 ) ;
63+ const ctx = canvas . getContext ( '2d' ) ;
64+
65+ // Create gradient background
66+ const gradient = ctx . createLinearGradient ( 0 , 0 , 512 , 512 ) ;
67+ gradient . addColorStop ( 0 , '#2563eb' ) ;
68+ gradient . addColorStop ( 1 , '#1d4ed8' ) ;
69+
70+ // Draw rounded rectangle background
71+ ctx . fillStyle = gradient ;
72+ roundRect ( ctx , 0 , 0 , 512 , 512 , 80 ) ;
73+ ctx . fill ( ) ;
74+
75+ // Draw grid pattern
76+ ctx . fillStyle = 'rgba(255, 255, 255, 0.15)' ;
77+ for ( let x = 0 ; x < 4 ; x ++ ) {
78+ for ( let y = 0 ; y < 4 ; y ++ ) {
79+ roundRect ( ctx , 96 + x * 48 , 96 + y * 48 , 32 , 32 , 4 ) ;
80+ ctx . fill ( ) ;
81+ }
82+ }
83+
84+ // Draw lock body
85+ ctx . fillStyle = '#ffffff' ;
86+ roundRect ( ctx , 288 , 192 , 128 , 160 , 16 ) ;
87+ ctx . fill ( ) ;
88+
89+ // Draw lock shackle
90+ ctx . strokeStyle = '#ffffff' ;
91+ ctx . lineWidth = 24 ;
92+ ctx . lineCap = 'round' ;
93+ ctx . beginPath ( ) ;
94+ ctx . moveTo ( 320 , 192 ) ;
95+ ctx . lineTo ( 320 , 144 ) ;
96+ ctx . arc ( 352 , 144 , 32 , Math . PI , 0 , false ) ;
97+ ctx . lineTo ( 384 , 192 ) ;
98+ ctx . stroke ( ) ;
99+
100+ // Draw lock keyhole
101+ ctx . fillStyle = gradient ;
102+ roundRect ( ctx , 312 , 232 , 80 , 80 , 8 ) ;
103+ ctx . fill ( ) ;
104+
105+ // Draw IP text
106+ ctx . fillStyle = '#ffffff' ;
107+ ctx . font = 'bold 120px Arial, sans-serif' ;
108+ ctx . textAlign = 'left' ;
109+ ctx . textBaseline = 'alphabetic' ;
110+ ctx . fillText ( 'IP' , 112 , 352 ) ;
111+
112+ // Save the image
113+ const buffer = canvas . toBuffer ( 'image/png' ) ;
114+ fs . writeFileSync ( 'www/assets/images/android-chrome-512x512.png' , buffer ) ;
115+ console . log ( 'Created android-chrome-512x512.png' ) ;
116+ }
117+
118+ // Helper function to draw rounded rectangles
119+ function roundRect ( ctx , x , y , width , height , radius ) {
120+ if ( typeof radius === 'undefined' ) {
121+ radius = 5 ;
122+ }
123+ ctx . beginPath ( ) ;
124+ ctx . moveTo ( x + radius , y ) ;
125+ ctx . lineTo ( x + width - radius , y ) ;
126+ ctx . quadraticCurveTo ( x + width , y , x + width , y + radius ) ;
127+ ctx . lineTo ( x + width , y + height - radius ) ;
128+ ctx . quadraticCurveTo ( x + width , y + height , x + width - radius , y + height ) ;
129+ ctx . lineTo ( x + radius , y + height ) ;
130+ ctx . quadraticCurveTo ( x , y + height , x , y + height - radius ) ;
131+ ctx . lineTo ( x , y + radius ) ;
132+ ctx . quadraticCurveTo ( x , y , x + radius , y ) ;
133+ ctx . closePath ( ) ;
134+ }
135+
136+ // Generate all icons
137+ createAppleTouchIcon ( ) ;
138+ createAndroidChrome192 ( ) ;
139+ createAndroidChrome512 ( ) ;
140+
141+ console . log ( 'Favicon generation complete!' ) ;
0 commit comments