Hugging Face's logo

Spaces:
Areid987
/
deepsite
Running

App Files Community
Areid987 commited on
Commit
55a0c21
·
verified ·
1 Parent(s): 6e3c69b

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +544 -38
index.html CHANGED
@@ -1,41 +1,547 @@
1
  <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <title>My app</title>
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
- <meta charset="utf-8">
 
 
7
  <style>
8
- body {
9
- display: flex;
10
- justify-content: center;
11
- align-items: center;
12
- overflow: hidden;
13
- height: 100dvh;
14
- font-family: "Arial", sans-serif;
15
- text-align: center;
16
- }
17
- .arrow {
18
- position: absolute;
19
- bottom: 32px;
20
- left: 0px;
21
- width: 100px;
22
- transform: rotate(30deg);
23
- }
24
- h1 {
25
- font-size: 50px;
26
- }
27
- h1 span {
28
- color: #acacac;
29
- font-size: 32px;
30
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
31
  </style>
32
- </head>
33
- <body>
34
- <h1>
35
- <span>I'm ready to work,</span><br />
36
- Ask me anything.
37
- </h1>
38
- <img src="https://enzostvs-deepsite.hf.space/arrow.svg" class="arrow" />
39
- <script></script>
40
- <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Areid987/deepsite" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
41
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>SVG Icon Generator | Create Custom Brand Logos</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #6e8efb, #a777e3);
12
+ }
13
+ .icon-preview {
14
+ transition: all 0.3s ease;
15
+ }
16
+ .icon-preview:hover {
17
+ transform: scale(1.05);
18
+ box-shadow: 0 10px 25px rgba(0,0,0,0.1);
19
+ }
20
+ .tab-active {
21
+ border-bottom: 3px solid #6e8efb;
22
+ color: #6e8efb;
23
+ font-weight: 600;
24
+ }
25
+ .color-option {
26
+ width: 30px;
27
+ height: 30px;
28
+ border-radius: 50%;
29
+ cursor: pointer;
30
+ transition: transform 0.2s;
31
+ }
32
+ .color-option:hover {
33
+ transform: scale(1.1);
34
+ }
35
+ .color-option.selected {
36
+ transform: scale(1.1);
37
+ box-shadow: 0 0 0 2px white, 0 0 0 4px #6e8efb;
38
+ }
39
+ #previewCanvas {
40
+ border: 1px dashed #d1d5db;
41
+ border-radius: 8px;
42
+ }
43
+ .size-option {
44
+ transition: all 0.2s ease;
45
+ }
46
+ .size-option:hover {
47
+ background-color: #e0e7ff;
48
+ }
49
+ .size-option.selected {
50
+ background-color: #6366f1;
51
+ color: white;
52
+ }
53
  </style>
54
+ </head>
55
+ <body class="bg-gray-50 min-h-screen">
56
+ <div class="gradient-bg text-white py-6 shadow-lg">
57
+ <div class="container mx-auto px-4">
58
+ <div class="flex items-center justify-between">
59
+ <div class="flex items-center space-x-2">
60
+ <i class="fas fa-palette text-2xl"></i>
61
+ <h1 class="text-2xl font-bold">SVG Icon Generator</h1>
62
+ </div>
63
+ <button class="bg-white text-indigo-600 px-4 py-2 rounded-lg font-medium hover:bg-indigo-50 transition">
64
+ <i class="fas fa-user mr-2"></i>Sign In
65
+ </button>
66
+ </div>
67
+ <p class="mt-2 opacity-90">Create beautiful, unique SVG icons for your brand in seconds</p>
68
+ </div>
69
+ </div>
70
+
71
+ <div class="container mx-auto px-4 py-8">
72
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden">
73
+ <div class="md:flex">
74
+ <!-- Left Panel - Input -->
75
+ <div class="md:w-1/2 p-6 border-r border-gray-100">
76
+ <div class="flex border-b border-gray-200">
77
+ <button id="descriptionTab" class="tab-active px-4 py-2 text-sm font-medium">Description</button>
78
+ <button id="imageTab" class="px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700">Upload Image</button>
79
+ </div>
80
+
81
+ <div id="descriptionSection" class="mt-4">
82
+ <label class="block text-sm font-medium text-gray-700 mb-1">Describe your ideal icon</label>
83
+ <textarea id="iconDescription" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500" rows="4" placeholder="e.g. A minimalist cat icon with geometric shapes, suitable for a pet app"></textarea>
84
+
85
+ <div class="mt-4">
86
+ <label class="block text-sm font-medium text-gray-700 mb-2">Icon Style</label>
87
+ <div class="grid grid-cols-3 gap-2">
88
+ <button class="style-option border rounded-lg py-2 px-3 text-sm hover:bg-gray-50" data-style="minimalist">
89
+ <i class="fas fa-square-full mr-1"></i> Minimalist
90
+ </button>
91
+ <button class="style-option border rounded-lg py-2 px-3 text-sm hover:bg-gray-50" data-style="line">
92
+ <i class="fas fa-pen-nib mr-1"></i> Line Art
93
+ </button>
94
+ <button class="style-option border rounded-lg py-2 px-3 text-sm hover:bg-gray-50" data-style="flat">
95
+ <i class="fas fa-layer-group mr-1"></i> Flat
96
+ </button>
97
+ <button class="style-option border rounded-lg py-2 px-3 text-sm hover:bg-gray-50" data-style="gradient">
98
+ <i class="fas fa-fill-drip mr-1"></i> Gradient
99
+ </button>
100
+ <button class="style-option border rounded-lg py-2 px-3 text-sm hover:bg-gray-50" data-style="handdrawn">
101
+ <i class="fas fa-pencil-alt mr-1"></i> Hand Drawn
102
+ </button>
103
+ <button class="style-option border rounded-lg py-2 px-3 text-sm hover:bg-gray-50" data-style="isometric">
104
+ <i class="fas fa-cube mr-1"></i> Isometric
105
+ </button>
106
+ </div>
107
+ </div>
108
+ </div>
109
+
110
+ <div id="imageSection" class="mt-4 hidden">
111
+ <label class="block text-sm font-medium text-gray-700 mb-1">Upload reference image</label>
112
+ <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-lg">
113
+ <div class="space-y-1 text-center">
114
+ <div class="flex text-sm text-gray-600 justify-center">
115
+ <label class="relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none">
116
+ <span>Upload a file</span>
117
+ <input id="imageUpload" type="file" class="sr-only" accept="image/*">
118
+ </label>
119
+ <p class="pl-1">or drag and drop</p>
120
+ </div>
121
+ <p class="text-xs text-gray-500">PNG, JPG up to 2MB</p>
122
+ </div>
123
+ </div>
124
+ <canvas id="previewCanvas" class="mt-4 w-full" height="200"></canvas>
125
+ </div>
126
+
127
+ <div class="mt-6">
128
+ <label class="block text-sm font-medium text-gray-700 mb-2">Color Palette</label>
129
+ <div class="flex flex-wrap gap-3">
130
+ <div class="color-option selected" style="background-color: #6366f1;" data-color="#6366f1"></div>
131
+ <div class="color-option" style="background-color: #ef4444;" data-color="#ef4444"></div>
132
+ <div class="color-option" style="background-color: #10b981;" data-color="#10b981"></div>
133
+ <div class="color-option" style="background-color: #f59e0b;" data-color="#f59e0b"></div>
134
+ <div class="color-option" style="background-color: #8b5cf6;" data-color="#8b5cf6"></div>
135
+ <div class="color-option" style="background-color: #ec4899;" data-color="#ec4899"></div>
136
+ <div class="color-option" style="background-color: #000000;" data-color="#000000"></div>
137
+ <div class="color-option relative overflow-hidden" title="Custom color">
138
+ <input type="color" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" id="customColor">
139
+ <div class="w-full h-full flex items-center justify-center">
140
+ <i class="fas fa-palette text-gray-600"></i>
141
+ </div>
142
+ </div>
143
+ </div>
144
+ </div>
145
+
146
+ <div class="mt-6">
147
+ <label class="block text-sm font-medium text-gray-700 mb-2">Icon Size</label>
148
+ <div class="grid grid-cols-5 gap-2">
149
+ <button class="size-option selected py-2 rounded-lg text-sm" data-size="16">16px</button>
150
+ <button class="size-option py-2 rounded-lg text-sm" data-size="32">32px</button>
151
+ <button class="size-option py-2 rounded-lg text-sm" data-size="48">48px</button>
152
+ <button class="size-option py-2 rounded-lg text-sm" data-size="64">64px</button>
153
+ <div class="relative">
154
+ <input type="number" id="customSize" placeholder="Custom" class="w-full h-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500" min="10" max="512">
155
+ <span class="absolute right-2 top-2 text-xs text-gray-400">px</span>
156
+ </div>
157
+ </div>
158
+ </div>
159
+
160
+ <button id="generateBtn" class="mt-8 w-full bg-indigo-600 text-white py-3 px-4 rounded-lg font-medium hover:bg-indigo-700 transition flex items-center justify-center">
161
+ <i class="fas fa-magic mr-2"></i> Generate Icon
162
+ </button>
163
+ </div>
164
+
165
+ <!-- Right Panel - Output -->
166
+ <div class="md:w-1/2 p-6 bg-gray-50">
167
+ <h2 class="text-lg font-medium text-gray-900 mb-4">Your Icon Preview</h2>
168
+
169
+ <div id="loading" class="hidden flex flex-col items-center justify-center py-12">
170
+ <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-indigo-500 mb-4"></div>
171
+ <p class="text-gray-600">Generating your unique icon...</p>
172
+ </div>
173
+
174
+ <div id="resultContainer" class="hidden">
175
+ <div class="flex justify-center mb-6">
176
+ <div class="icon-preview bg-white p-8 rounded-xl shadow-md">
177
+ <svg id="generatedIcon" width="128" height="128" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"></svg>
178
+ </div>
179
+ </div>
180
+
181
+ <div class="grid grid-cols-2 gap-4 mb-6">
182
+ <div class="bg-white p-4 rounded-lg shadow-sm">
183
+ <div class="flex items-center justify-center h-16 mb-2">
184
+ <svg id="size16Preview" width="16" height="16" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"></svg>
185
+ </div>
186
+ <p class="text-center text-xs text-gray-600">16px</p>
187
+ </div>
188
+ <div class="bg-white p-4 rounded-lg shadow-sm">
189
+ <div class="flex items-center justify-center h-16 mb-2">
190
+ <svg id="size32Preview" width="32" height="32" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"></svg>
191
+ </div>
192
+ <p class="text-center text-xs text-gray-600">32px</p>
193
+ </div>
194
+ <div class="bg-white p-4 rounded-lg shadow-sm">
195
+ <div class="flex items-center justify-center h-16 mb-2">
196
+ <svg id="size48Preview" width="48" height="48" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"></svg>
197
+ </div>
198
+ <p class="text-center text-xs text-gray-600">48px</p>
199
+ </div>
200
+ <div class="bg-white p-4 rounded-lg shadow-sm">
201
+ <div class="flex items-center justify-center h-16 mb-2">
202
+ <svg id="size64Preview" width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"></svg>
203
+ </div>
204
+ <p class="text-center text-xs text-gray-600">64px</p>
205
+ </div>
206
+ </div>
207
+
208
+ <div class="mb-4">
209
+ <label class="block text-sm font-medium text-gray-700 mb-1">SVG Code</label>
210
+ <div class="relative">
211
+ <pre id="svgCode" class="bg-gray-800 text-gray-100 p-3 rounded-lg text-xs overflow-x-auto max-h-40"></pre>
212
+ <button id="copyCode" class="absolute top-2 right-2 bg-gray-700 text-white p-1 rounded text-xs hover:bg-gray-600">
213
+ <i class="fas fa-copy mr-1"></i>Copy
214
+ </button>
215
+ </div>
216
+ </div>
217
+
218
+ <div class="flex space-x-3">
219
+ <button id="downloadSvg" class="flex-1 bg-indigo-600 text-white py-2 px-4 rounded-lg text-sm font-medium hover:bg-indigo-700 transition">
220
+ <i class="fas fa-download mr-2"></i>Download SVG
221
+ </button>
222
+ <button id="downloadPng" class="flex-1 bg-white border border-gray-300 text-gray-700 py-2 px-4 rounded-lg text-sm font-medium hover:bg-gray-50 transition">
223
+ <i class="fas fa-image mr-2"></i>Download PNG
224
+ </button>
225
+ <button id="regenerateBtn" class="flex-1 bg-white border border-gray-300 text-gray-700 py-2 px-4 rounded-lg text-sm font-medium hover:bg-gray-50 transition">
226
+ <i class="fas fa-redo mr-2"></i>Regenerate
227
+ </button>
228
+ </div>
229
+ </div>
230
+
231
+ <div id="emptyState" class="flex flex-col items-center justify-center py-12">
232
+ <div class="bg-indigo-100 p-4 rounded-full mb-4">
233
+ <i class="fas fa-palette text-indigo-600 text-3xl"></i>
234
+ </div>
235
+ <h3 class="text-lg font-medium text-gray-900 mb-2">No icon generated yet</h3>
236
+ <p class="text-gray-600 text-center max-w-md">Describe your ideal icon or upload an image, then click "Generate Icon" to create your custom SVG.</p>
237
+ </div>
238
+ </div>
239
+ </div>
240
+ </div>
241
+
242
+ <div class="mt-8 bg-white rounded-xl shadow-lg overflow-hidden">
243
+ <div class="p-6">
244
+ <h2 class="text-lg font-medium text-gray-900 mb-4">Recent Creations</h2>
245
+ <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
246
+ <div class="bg-gray-100 p-4 rounded-lg flex items-center justify-center">
247
+ <svg width="48" height="48" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
248
+ <circle cx="32" cy="32" r="24" fill="#6366f1"/>
249
+ <path d="M32 20L38 32L32 44L26 32L32 20Z" fill="white"/>
250
+ </svg>
251
+ </div>
252
+ <div class="bg-gray-100 p-4 rounded-lg flex items-center justify-center">
253
+ <svg width="48" height="48" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
254
+ <rect x="16" y="16" width="32" height="32" rx="8" fill="#10b981"/>
255
+ <circle cx="32" cy="32" r="12" fill="white"/>
256
+ </svg>
257
+ </div>
258
+ <div class="bg-gray-100 p-4 rounded-lg flex items-center justify-center">
259
+ <svg width="48" height="48" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
260
+ <path d="M32 16L44 32L32 48L20 32L32 16Z" fill="#ec4899"/>
261
+ <circle cx="32" cy="32" r="8" fill="white"/>
262
+ </svg>
263
+ </div>
264
+ <div class="bg-gray-100 p-4 rounded-lg flex items-center justify-center">
265
+ <svg width="48" height="48" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
266
+ <circle cx="32" cy="24" r="8" fill="#f59e0b"/>
267
+ <circle cx="20" cy="40" r="8" fill="#f59e0b"/>
268
+ <circle cx="44" cy="40" r="8" fill="#f59e0b"/>
269
+ </svg>
270
+ </div>
271
+ <div class="bg-gray-100 p-4 rounded-lg flex items-center justify-center">
272
+ <svg width="48" height="48" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
273
+ <path d="M16 16L48 16L48 48L16 48Z" fill="#8b5cf6" stroke="white" stroke-width="4"/>
274
+ </svg>
275
+ </div>
276
+ <div class="bg-gray-100 p-4 rounded-lg flex items-center justify-center">
277
+ <svg width="48" height="48" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
278
+ <path d="M32 16L48 48L16 48Z" fill="#ef4444"/>
279
+ </svg>
280
+ </div>
281
+ </div>
282
+ </div>
283
+ </div>
284
+ </div>
285
+
286
+ <footer class="bg-gray-100 border-t border-gray-200 py-6 mt-12">
287
+ <div class="container mx-auto px-4">
288
+ <div class="flex flex-col md:flex-row justify-between items-center">
289
+ <div class="flex items-center space-x-2 mb-4 md:mb-0">
290
+ <i class="fas fa-palette text-indigo-600"></i>
291
+ <span class="font-medium">SVG Icon Generator</span>
292
+ </div>
293
+ <div class="flex space-x-6">
294
+ <a href="#" class="text-gray-600 hover:text-gray-900">About</a>
295
+ <a href="#" class="text-gray-600 hover:text-gray-900">Features</a>
296
+ <a href="#" class="text-gray-600 hover:text-gray-900">Pricing</a>
297
+ <a href="#" class="text-gray-600 hover:text-gray-900">Contact</a>
298
+ </div>
299
+ </div>
300
+ <div class="mt-4 text-center md:text-left text-sm text-gray-500">
301
+ &copy; 2023 SVG Icon Generator. All rights reserved.
302
+ </div>
303
+ </div>
304
+ </footer>
305
+
306
+ <script>
307
+ document.addEventListener('DOMContentLoaded', function() {
308
+ // Tab switching
309
+ const descriptionTab = document.getElementById('descriptionTab');
310
+ const imageTab = document.getElementById('imageTab');
311
+ const descriptionSection = document.getElementById('descriptionSection');
312
+ const imageSection = document.getElementById('imageSection');
313
+
314
+ descriptionTab.addEventListener('click', () => {
315
+ descriptionTab.classList.add('tab-active');
316
+ imageTab.classList.remove('tab-active');
317
+ descriptionSection.classList.remove('hidden');
318
+ imageSection.classList.add('hidden');
319
+ });
320
+
321
+ imageTab.addEventListener('click', () => {
322
+ imageTab.classList.add('tab-active');
323
+ descriptionTab.classList.remove('tab-active');
324
+ imageSection.classList.remove('hidden');
325
+ descriptionSection.classList.add('hidden');
326
+ });
327
+
328
+ // Color selection
329
+ const colorOptions = document.querySelectorAll('.color-option:not(#customColor)');
330
+ colorOptions.forEach(option => {
331
+ option.addEventListener('click', () => {
332
+ document.querySelector('.color-option.selected').classList.remove('selected');
333
+ option.classList.add('selected');
334
+ });
335
+ });
336
+
337
+ // Custom color picker
338
+ const customColor = document.getElementById('customColor');
339
+ customColor.addEventListener('input', (e) => {
340
+ const customOption = customColor.parentElement;
341
+ customOption.style.backgroundColor = e.target.value;
342
+ customOption.setAttribute('data-color', e.target.value);
343
+
344
+ // Select the custom color
345
+ document.querySelector('.color-option.selected').classList.remove('selected');
346
+ customOption.classList.add('selected');
347
+ });
348
+
349
+ // Size selection
350
+ const sizeOptions = document.querySelectorAll('.size-option:not(#customSize)');
351
+ sizeOptions.forEach(option => {
352
+ option.addEventListener('click', () => {
353
+ document.querySelector('.size-option.selected').classList.remove('selected');
354
+ option.classList.add('selected');
355
+ });
356
+ });
357
+
358
+ // Custom size input
359
+ const customSize = document.getElementById('customSize');
360
+ customSize.addEventListener('input', () => {
361
+ if (customSize.value) {
362
+ document.querySelector('.size-option.selected').classList.remove('selected');
363
+ }
364
+ });
365
+
366
+ // Style selection
367
+ const styleOptions = document.querySelectorAll('.style-option');
368
+ styleOptions.forEach(option => {
369
+ option.addEventListener('click', () => {
370
+ styleOptions.forEach(opt => opt.classList.remove('bg-indigo-50', 'border-indigo-300', 'text-indigo-700'));
371
+ option.classList.add('bg-indigo-50', 'border-indigo-300', 'text-indigo-700');
372
+ });
373
+ });
374
+
375
+ // Image upload preview
376
+ const imageUpload = document.getElementById('imageUpload');
377
+ const previewCanvas = document.getElementById('previewCanvas');
378
+ const ctx = previewCanvas.getContext('2d');
379
+
380
+ imageUpload.addEventListener('change', (e) => {
381
+ const file = e.target.files[0];
382
+ if (file) {
383
+ const reader = new FileReader();
384
+ reader.onload = (event) => {
385
+ const img = new Image();
386
+ img.onload = () => {
387
+ // Calculate dimensions to fit canvas while maintaining aspect ratio
388
+ const canvasWidth = previewCanvas.width;
389
+ const canvasHeight = previewCanvas.height;
390
+ let width = img.width;
391
+ let height = img.height;
392
+
393
+ if (width > canvasWidth) {
394
+ const ratio = canvasWidth / width;
395
+ width = canvasWidth;
396
+ height = height * ratio;
397
+ }
398
+
399
+ if (height > canvasHeight) {
400
+ const ratio = canvasHeight / height;
401
+ height = canvasHeight;
402
+ width = width * ratio;
403
+ }
404
+
405
+ // Center the image
406
+ const x = (canvasWidth - width) / 2;
407
+ const y = (canvasHeight - height) / 2;
408
+
409
+ ctx.clearRect(0, 0, canvasWidth, canvasHeight);
410
+ ctx.drawImage(img, x, y, width, height);
411
+ };
412
+ img.src = event.target.result;
413
+ };
414
+ reader.readAsDataURL(file);
415
+ }
416
+ });
417
+
418
+ // Generate icon
419
+ const generateBtn = document.getElementById('generateBtn');
420
+ const loading = document.getElementById('loading');
421
+ const resultContainer = document.getElementById('resultContainer');
422
+ const emptyState = document.getElementById('emptyState');
423
+ const generatedIcon = document.getElementById('generatedIcon');
424
+ const size16Preview = document.getElementById('size16Preview');
425
+ const size32Preview = document.getElementById('size32Preview');
426
+ const size48Preview = document.getElementById('size48Preview');
427
+ const size64Preview = document.getElementById('size64Preview');
428
+ const svgCode = document.getElementById('svgCode');
429
+
430
+ generateBtn.addEventListener('click', () => {
431
+ // Show loading state
432
+ loading.classList.remove('hidden');
433
+ resultContainer.classList.add('hidden');
434
+ emptyState.classList.add('hidden');
435
+
436
+ // Simulate generation (in a real app, this would call an API)
437
+ setTimeout(() => {
438
+ loading.classList.add('hidden');
439
+ resultContainer.classList.remove('hidden');
440
+
441
+ // Get selected options
442
+ const selectedColor = document.querySelector('.color-option.selected').getAttribute('data-color');
443
+ let selectedSize = document.querySelector('.size-option.selected')?.getAttribute('data-size') || customSize.value || '64';
444
+
445
+ // Generate a simple SVG icon based on options
446
+ const iconMarkup = generateIcon(selectedColor);
447
+
448
+ // Update all previews
449
+ generatedIcon.innerHTML = iconMarkup;
450
+ size16Preview.innerHTML = iconMarkup;
451
+ size32Preview.innerHTML = iconMarkup;
452
+ size48Preview.innerHTML = iconMarkup;
453
+ size64Preview.innerHTML = iconMarkup;
454
+
455
+ // Update SVG code display
456
+ svgCode.textContent = `<svg width="${selectedSize}" height="${selectedSize}" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">\n${iconMarkup}\n</svg>`;
457
+ }, 1500);
458
+ });
459
+
460
+ // Helper function to generate different icon types
461
+ function generateIcon(color) {
462
+ const iconTypes = [
463
+ // Geometric shapes
464
+ () => `<circle cx="32" cy="32" r="24" fill="${color}"/>`,
465
+ () => `<rect x="16" y="16" width="32" height="32" rx="8" fill="${color}"/>`,
466
+ () => `<path d="M32 16L48 48L16 48Z" fill="${color}"/>`,
467
+ () => `<path d="M32 16L48 32L32 48L16 32Z" fill="${color}"/>`,
468
+ // Abstract shapes
469
+ () => `<circle cx="32" cy="24" r="8" fill="${color}"/>
470
+ <circle cx="20" cy="40" r="8" fill="${color}"/>
471
+ <circle cx="44" cy="40" r="8" fill="${color}"/>`,
472
+ () => `<path d="M16 16L48 16L48 48L16 48Z" fill="${color}" stroke="white" stroke-width="4"/>`,
473
+ // Letter-based
474
+ () => `<path d="M20 20V44H28V32H36V44H44V20H36V28H28V20H20Z" fill="${color}"/>`,
475
+ // Combined shapes
476
+ () => `<circle cx="32" cy="32" r="24" fill="${color}"/>
477
+ <path d="M32 20L38 32L32 44L26 32L32 20Z" fill="white"/>`
478
+ ];
479
+
480
+ // Randomly select an icon type
481
+ const randomIndex = Math.floor(Math.random() * iconTypes.length);
482
+ return iconTypes[randomIndex]();
483
+ }
484
+
485
+ // Copy SVG code
486
+ const copyCode = document.getElementById('copyCode');
487
+ copyCode.addEventListener('click', () => {
488
+ const code = svgCode.textContent;
489
+ navigator.clipboard.writeText(code).then(() => {
490
+ const originalText = copyCode.innerHTML;
491
+ copyCode.innerHTML = '<i class="fas fa-check mr-1"></i>Copied!';
492
+ setTimeout(() => {
493
+ copyCode.innerHTML = originalText;
494
+ }, 2000);
495
+ });
496
+ });
497
+
498
+ // Download SVG
499
+ const downloadSvg = document.getElementById('downloadSvg');
500
+ downloadSvg.addEventListener('click', () => {
501
+ const svg = generatedIcon.outerHTML;
502
+ const blob = new Blob([svg], {type: 'image/svg+xml'});
503
+ const url = URL.createObjectURL(blob);
504
+
505
+ const a = document.createElement('a');
506
+ a.href = url;
507
+ a.download = 'icon.svg';
508
+ document.body.appendChild(a);
509
+ a.click();
510
+ document.body.removeChild(a);
511
+ URL.revokeObjectURL(url);
512
+ });
513
+
514
+ // Download PNG
515
+ const downloadPng = document.getElementById('downloadPng');
516
+ downloadPng.addEventListener('click', () => {
517
+ const svg = generatedIcon.outerHTML;
518
+ const canvas = document.createElement('canvas');
519
+ canvas.width = 512;
520
+ canvas.height = 512;
521
+ const ctx = canvas.getContext('2d');
522
+
523
+ const img = new Image();
524
+ img.onload = () => {
525
+ ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
526
+ const png = canvas.toDataURL('image/png');
527
+
528
+ const a = document.createElement('a');
529
+ a.href = png;
530
+ a.download = 'icon.png';
531
+ document.body.appendChild(a);
532
+ a.click();
533
+ document.body.removeChild(a);
534
+ };
535
+
536
+ img.src = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svg)));
537
+ });
538
+
539
+ // Regenerate button
540
+ const regenerateBtn = document.getElementById('regenerateBtn');
541
+ regenerateBtn.addEventListener('click', () => {
542
+ generateBtn.click();
543
+ });
544
+ });
545
+ </script>
546
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Areid987/deepsite" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
547
+ </html>