she-ve-seen-it/icon-preview.html at main · BasicHtmlCoder/she-ve-seen-it · 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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Icon Preview - She ve Seen It</title>
	<style>
		body {
			font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			min-height: 100vh;
			background: #f5f5f5;
			margin: 0;
			padding: 20px;
		}
		.container {
			background: white;
			padding: 3rem;
			border-radius: 16px;
			box-shadow: 0 4px 20px rgba(0,0,0,0.1);
			text-align: center;
		}
		h1 {
			color: #333;
			margin-bottom: 2rem;
		}
		.icon-display {
			display: flex;
			gap: 2rem;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
			margin-bottom: 2rem;
		}
		.icon-size {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 0.5rem;
		}
		.icon-size img {
			border-radius: 12px;
			box-shadow: 0 2px 10px rgba(0,0,0,0.1);
		}
		.size-label {
			font-size: 0.875rem;
			color: #666;
			font-weight: 500;
		}
		.instructions {
			background: #f9f9f9;
			padding: 1.5rem;
			border-radius: 8px;
			text-align: left;
			max-width: 600px;
			margin: 2rem auto;
		}
		.instructions h2 {
			margin-top: 0;
			color: #667eea;
		}
		.instructions ol {
			margin: 1rem 0;
			padding-left: 1.5rem;
		}
		.instructions li {
			margin: 0.5rem 0;
			line-height: 1.6;
		}
		.instructions code {
			background: #e0e0e0;
			padding: 2px 6px;
			border-radius: 3px;
			font-family: 'Courier New', monospace;
		}
	</style>
</head>
<body>
	<div class="container">
		<h1>She ve Seen It - Icon Preview</h1>

		<div class="icon-display">
			<div class="icon-size">
				<img src="source/icon.svg" width="128" height="128" alt="Icon 128x128">
				<span class="size-label">128x128</span>
			</div>
			<div class="icon-size">
				<img src="source/icon.svg" width="64" height="64" alt="Icon 64x64">
				<span class="size-label">64x64</span>
			</div>
			<div class="icon-size">
				<img src="source/icon.svg" width="32" height="32" alt="Icon 32x32">
				<span class="size-label">32x32</span>
			</div>
			<div class="icon-size">
				<img src="source/icon.svg" width="16" height="16" alt="Icon 16x16">
				<span class="size-label">16x16</span>
			</div>
		</div>

		<div class="instructions">
			<h2>How to Convert SVG to PNG</h2>
			<ol>
				<li>Open the <code>source/icon.svg</code> file in your browser</li>
				<li>Use one of these methods to convert to PNG:
					<ul>
						<li><strong>Online:</strong> Visit <a href="https://cloudconvert.com/svg-to-png" target="_blank">cloudconvert.com/svg-to-png</a> and upload the SVG</li>
						<li><strong>Command line:</strong> Install ImageMagick and run:<br><code>convert -background none -size 128x128 source/icon.svg source/icon.png</code></li>
						<li><strong>Inkscape:</strong> Open the SVG and export as PNG at 128x128px</li>
					</ul>
				</li>
				<li>Save the PNG file as <code>source/icon.png</code> (replacing the existing one)</li>
				<li>Rebuild your extension with <code>npm run build</code></li>
			</ol>
			<p><strong>Note:</strong> The extension can work with the SVG file, but PNG is recommended for better browser compatibility.</p>
		</div>
	</div>
</body>
</html>