Hugging Face's logo

Spaces:
Kingrane
/
wallpaper-lab-test
Running

App Files Community
Kingrane commited on
Commit
3be9dcc
·
verified ·
1 Parent(s): 591eaf6

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +953 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Wallpaper Lab Test
3
- emoji: 🦀
4
- colorFrom: yellow
5
  colorTo: yellow
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: wallpaper-lab-test
3
+ emoji: 🐳
4
+ colorFrom: pink
5
  colorTo: yellow
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,953 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </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>Wallpaper Lab - Create Unique Wallpapers</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, #667eea 0%, #764ba2 100%);
12
+ }
13
+ .editor-canvas {
14
+ background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.1' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
15
+ }
16
+ .element-draggable {
17
+ cursor: grab;
18
+ user-select: none;
19
+ }
20
+ .element-draggable:active {
21
+ cursor: grabbing;
22
+ }
23
+ .scrollbar-hide::-webkit-scrollbar {
24
+ display: none;
25
+ }
26
+ .scrollbar-hide {
27
+ -ms-overflow-style: none;
28
+ scrollbar-width: none;
29
+ }
30
+ .tooltip {
31
+ position: relative;
32
+ }
33
+ .tooltip-text {
34
+ visibility: hidden;
35
+ width: 120px;
36
+ background-color: #333;
37
+ color: #fff;
38
+ text-align: center;
39
+ border-radius: 6px;
40
+ padding: 5px;
41
+ position: absolute;
42
+ z-index: 1;
43
+ bottom: 125%;
44
+ left: 50%;
45
+ transform: translateX(-50%);
46
+ opacity: 0;
47
+ transition: opacity 0.3s;
48
+ }
49
+ .tooltip:hover .tooltip-text {
50
+ visibility: visible;
51
+ opacity: 1;
52
+ }
53
+ </style>
54
+ </head>
55
+ <body class="bg-gray-100 font-sans">
56
+ <!-- Header -->
57
+ <header class="gradient-bg text-white shadow-lg">
58
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
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">Wallpaper Lab</h1>
62
+ </div>
63
+ <nav class="hidden md:flex space-x-6">
64
+ <a href="#editor" class="hover:text-gray-200 transition">Editor</a>
65
+ <a href="#gallery" class="hover:text-gray-200 transition">Gallery</a>
66
+ <a href="#challenges" class="hover:text-gray-200 transition">Challenges</a>
67
+ <a href="#shop" class="hover:text-gray-200 transition">Shop</a>
68
+ </nav>
69
+ <div class="flex items-center space-x-4">
70
+ <button class="bg-white text-indigo-700 px-4 py-2 rounded-full font-medium hover:bg-gray-100 transition">
71
+ Sign In
72
+ </button>
73
+ <button class="md:hidden text-white">
74
+ <i class="fas fa-bars text-xl"></i>
75
+ </button>
76
+ </div>
77
+ </div>
78
+ </header>
79
+
80
+ <!-- Hero Section -->
81
+ <section class="gradient-bg text-white py-16">
82
+ <div class="container mx-auto px-4 text-center">
83
+ <h2 class="text-4xl md:text-5xl font-bold mb-6">Create Unique Wallpapers Without AI</h2>
84
+ <p class="text-xl mb-8 max-w-2xl mx-auto">Design custom wallpapers for any device using our visual editor with shapes, gradients, textures and effects.</p>
85
+ <div class="flex justify-center space-x-4">
86
+ <button id="start-editor-btn" class="bg-white text-indigo-700 px-6 py-3 rounded-full font-bold hover:bg-gray-100 transition">
87
+ Start Creating
88
+ </button>
89
+ <button class="border-2 border-white px-6 py-3 rounded-full font-bold hover:bg-white hover:text-indigo-700 transition">
90
+ Explore Gallery
91
+ </button>
92
+ </div>
93
+ </div>
94
+ </section>
95
+
96
+ <!-- Main Content -->
97
+ <main class="container mx-auto px-4 py-12">
98
+ <!-- Editor Section -->
99
+ <section id="editor" class="mb-20">
100
+ <div class="flex justify-between items-center mb-8">
101
+ <h2 class="text-3xl font-bold text-gray-800">Wallpaper Editor</h2>
102
+ <div class="flex space-x-3">
103
+ <button class="bg-gray-200 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-300 transition">
104
+ <i class="fas fa-save mr-2"></i>Save
105
+ </button>
106
+ <button id="export-btn" class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition">
107
+ <i class="fas fa-download mr-2"></i>Export
108
+ </button>
109
+ </div>
110
+ </div>
111
+
112
+ <div class="flex flex-col lg:flex-row gap-6">
113
+ <!-- Tools Panel -->
114
+ <div class="lg:w-1/4 bg-white rounded-xl shadow-md p-4 h-fit">
115
+ <div class="mb-6">
116
+ <h3 class="font-semibold text-lg mb-3">Device Format</h3>
117
+ <div class="grid grid-cols-3 gap-2">
118
+ <button class="format-btn active-format bg-indigo-100 text-indigo-700 p-2 rounded-lg" data-size="1080x1920">
119
+ <i class="fas fa-mobile-screen text-xl mb-1"></i>
120
+ <span class="text-xs">Phone</span>
121
+ </button>
122
+ <button class="format-btn bg-gray-100 p-2 rounded-lg" data-size="1920x1080">
123
+ <i class="fas fa-desktop text-xl mb-1"></i>
124
+ <span class="text-xs">Desktop</span>
125
+ </button>
126
+ <button class="format-btn bg-gray-100 p-2 rounded-lg" data-size="2048x2732">
127
+ <i class="fas fa-tablet-screen-button text-xl mb-1"></i>
128
+ <span class="text-xs">Tablet</span>
129
+ </button>
130
+ <button class="format-btn bg-gray-100 p-2 rounded-lg" data-size="368x448">
131
+ <i class="fas fa-clock text-xl mb-1"></i>
132
+ <span class="text-xs">Watch</span>
133
+ </button>
134
+ <button class="format-btn bg-gray-100 p-2 rounded-lg" data-size="custom">
135
+ <i class="fas fa-ruler-combined text-xl mb-1"></i>
136
+ <span class="text-xs">Custom</span>
137
+ </button>
138
+ </div>
139
+ </div>
140
+
141
+ <div class="mb-6">
142
+ <h3 class="font-semibold text-lg mb-3">Background</h3>
143
+ <div class="flex flex-wrap gap-2 mb-3">
144
+ <button class="bg-gradient-to-br from-blue-400 to-purple-500 w-8 h-8 rounded-full border-2 border-white shadow-sm"></button>
145
+ <button class="bg-gradient-to-br from-pink-500 to-orange-400 w-8 h-8 rounded-full border-2 border-white shadow-sm"></button>
146
+ <button class="bg-gradient-to-br from-green-400 to-blue-500 w-8 h-8 rounded-full border-2 border-white shadow-sm"></button>
147
+ <button class="bg-gradient-to-br from-purple-800 to-indigo-800 w-8 h-8 rounded-full border-2 border-white shadow-sm"></button>
148
+ <button class="bg-gradient-to-br from-yellow-400 to-red-500 w-8 h-8 rounded-full border-2 border-white shadow-sm"></button>
149
+ <button class="bg-gray-200 w-8 h-8 rounded-full border-2 border-white shadow-sm flex items-center justify-center">
150
+ <i class="fas fa-plus text-gray-500 text-xs"></i>
151
+ </button>
152
+ </div>
153
+ <div class="bg-gray-100 p-3 rounded-lg">
154
+ <div class="flex justify-between mb-2">
155
+ <span class="text-sm">Gradient Type</span>
156
+ <select class="text-sm bg-white rounded px-2 py-1">
157
+ <option>Linear</option>
158
+ <option>Radial</option>
159
+ <option>Conic</option>
160
+ </select>
161
+ </div>
162
+ <div class="flex justify-between mb-2">
163
+ <span class="text-sm">Angle</span>
164
+ <input type="range" min="0" max="360" value="135" class="w-24">
165
+ </div>
166
+ <div class="flex justify-between items-center">
167
+ <span class="text-sm">Solid Color</span>
168
+ <input type="color" value="#3b82f6" class="w-6 h-6">
169
+ </div>
170
+ </div>
171
+ </div>
172
+
173
+ <div class="mb-6">
174
+ <h3 class="font-semibold text-lg mb-3">Add Elements</h3>
175
+ <div class="grid grid-cols-3 gap-2">
176
+ <button class="element-btn bg-gray-100 p-3 rounded-lg hover:bg-gray-200 transition" data-type="shape">
177
+ <i class="fas fa-square text-xl mb-1"></i>
178
+ <span class="text-xs">Shape</span>
179
+ </button>
180
+ <button class="element-btn bg-gray-100 p-3 rounded-lg hover:bg-gray-200 transition" data-type="bubble">
181
+ <i class="fas fa-circle text-xl mb-1"></i>
182
+ <span class="text-xs">Bubble</span>
183
+ </button>
184
+ <button class="element-btn bg-gray-100 p-3 rounded-lg hover:bg-gray-200 transition" data-type="wave">
185
+ <i class="fas fa-wave-square text-xl mb-1"></i>
186
+ <span class="text-xs">Wave</span>
187
+ </button>
188
+ <button class="element-btn bg-gray-100 p-3 rounded-lg hover:bg-gray-200 transition" data-type="line">
189
+ <i class="fas fa-slash text-xl mb-1"></i>
190
+ <span class="text-xs">Line</span>
191
+ </button>
192
+ <button class="element-btn bg-gray-100 p-3 rounded-lg hover:bg-gray-200 transition" data-type="pattern">
193
+ <i class="fas fa-border-all text-xl mb-1"></i>
194
+ <span class="text-xs">Pattern</span>
195
+ </button>
196
+ <button class="element-btn bg-gray-100 p-3 rounded-lg hover:bg-gray-200 transition" data-type="3d">
197
+ <i class="fas fa-cube text-xl mb-1"></i>
198
+ <span class="text-xs">3D</span>
199
+ </button>
200
+ </div>
201
+ </div>
202
+
203
+ <div class="mb-6">
204
+ <h3 class="font-semibold text-lg mb-3">Textures & Effects</h3>
205
+ <div class="grid grid-cols-3 gap-2">
206
+ <button class="texture-btn bg-gray-100 p-3 rounded-lg hover:bg-gray-200 transition" data-type="noise">
207
+ <i class="fas fa-braille text-xl mb-1"></i>
208
+ <span class="text-xs">Noise</span>
209
+ </button>
210
+ <button class="texture-btn bg-gray-100 p-3 rounded-lg hover:bg-gray-200 transition" data-type="paper">
211
+ <i class="fas fa-scroll text-xl mb-1"></i>
212
+ <span class="text-xs">Paper</span>
213
+ </button>
214
+ <button class="texture-btn bg-gray-100 p-3 rounded-lg hover:bg-gray-200 transition" data-type="glass">
215
+ <i class="fas fa-wine-glass-empty text-xl mb-1"></i>
216
+ <span class="text-xs">Glass</span>
217
+ </button>
218
+ <button class="texture-btn bg-gray-100 p-3 rounded-lg hover:bg-gray-200 transition" data-type="blur">
219
+ <i class="fas fa-droplet text-xl mb-1"></i>
220
+ <span class="text-xs">Blur</span>
221
+ </button>
222
+ <button class="texture-btn bg-gray-100 p-3 rounded-lg hover:bg-gray-200 transition" data-type="vignette">
223
+ <i class="fas fa-circle-notch text-xl mb-1"></i>
224
+ <span class="text-xs">Vignette</span>
225
+ </button>
226
+ <button class="texture-btn bg-gray-100 p-3 rounded-lg hover:bg-gray-200 transition" data-type="glow">
227
+ <i class="fas fa-sun text-xl mb-1"></i>
228
+ <span class="text-xs">Glow</span>
229
+ </button>
230
+ </div>
231
+ </div>
232
+ </div>
233
+
234
+ <!-- Canvas Area -->
235
+ <div class="lg:w-2/4">
236
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
237
+ <div id="editor-canvas" class="editor-canvas relative mx-auto" style="width: 270px; height: 480px;">
238
+ <!-- Background -->
239
+ <div id="canvas-bg" class="absolute inset-0 bg-gradient-to-br from-blue-400 to-purple-500"></div>
240
+
241
+ <!-- Elements will be added here -->
242
+ <div id="element-1" class="element-draggable absolute w-32 h-32 rounded-full bg-pink-400 opacity-70 top-20 left-10 transform rotate-12"></div>
243
+ <div id="element-2" class="element-draggable absolute w-40 h-10 bg-white opacity-30 bottom-32 left-5 transform -rotate-6"></div>
244
+ <div id="element-3" class="element-draggable absolute w-16 h-16 rounded-full bg-yellow-300 opacity-50 top-32 right-8"></div>
245
+ </div>
246
+ </div>
247
+ </div>
248
+
249
+ <!-- Properties Panel -->
250
+ <div class="lg:w-1/4 bg-white rounded-xl shadow-md p-4 h-fit">
251
+ <h3 class="font-semibold text-lg mb-4">Element Properties</h3>
252
+
253
+ <div class="mb-4">
254
+ <label class="block text-sm text-gray-600 mb-1">Selected Element</label>
255
+ <div class="bg-gray-100 p-2 rounded-lg">
256
+ <span id="selected-element" class="text-sm">None</span>
257
+ </div>
258
+ </div>
259
+
260
+ <div class="mb-4">
261
+ <label class="block text-sm text-gray-600 mb-1">Position</label>
262
+ <div class="grid grid-cols-2 gap-2">
263
+ <div>
264
+ <span class="text-xs">X</span>
265
+ <input type="number" class="w-full p-1 border rounded text-sm" value="0">
266
+ </div>
267
+ <div>
268
+ <span class="text-xs">Y</span>
269
+ <input type="number" class="w-full p-1 border rounded text-sm" value="0">
270
+ </div>
271
+ </div>
272
+ </div>
273
+
274
+ <div class="mb-4">
275
+ <label class="block text-sm text-gray-600 mb-1">Size</label>
276
+ <div class="grid grid-cols-2 gap-2">
277
+ <div>
278
+ <span class="text-xs">Width</span>
279
+ <input type="number" class="w-full p-1 border rounded text-sm" value="100">
280
+ </div>
281
+ <div>
282
+ <span class="text-xs">Height</span>
283
+ <input type="number" class="w-full p-1 border rounded text-sm" value="100">
284
+ </div>
285
+ </div>
286
+ </div>
287
+
288
+ <div class="mb-4">
289
+ <label class="block text-sm text-gray-600 mb-1">Color</label>
290
+ <input type="color" value="#3b82f6" class="w-full h-8">
291
+ </div>
292
+
293
+ <div class="mb-4">
294
+ <label class="block text-sm text-gray-600 mb-1">Opacity</label>
295
+ <input type="range" min="0" max="100" value="100" class="w-full">
296
+ </div>
297
+
298
+ <div class="mb-4">
299
+ <label class="block text-sm text-gray-600 mb-1">Rotation</label>
300
+ <input type="range" min="0" max="360" value="0" class="w-full">
301
+ </div>
302
+
303
+ <div class="mb-4">
304
+ <label class="block text-sm text-gray-600 mb-1">Layer</label>
305
+ <div class="flex justify-between">
306
+ <button class="bg-gray-200 px-2 py-1 rounded text-sm">
307
+ <i class="fas fa-arrow-down"></i> Back
308
+ </button>
309
+ <button class="bg-gray-200 px-2 py-1 rounded text-sm">
310
+ <i class="fas fa-arrow-up"></i> Front
311
+ </button>
312
+ </div>
313
+ </div>
314
+
315
+ <button class="w-full bg-red-100 text-red-600 py-2 rounded-lg hover:bg-red-200 transition">
316
+ <i class="fas fa-trash mr-2"></i>Delete Element
317
+ </button>
318
+ </div>
319
+ </div>
320
+ </section>
321
+
322
+ <!-- Gallery Section -->
323
+ <section id="gallery" class="mb-20">
324
+ <div class="flex justify-between items-center mb-8">
325
+ <h2 class="text-3xl font-bold text-gray-800">Community Gallery</h2>
326
+ <button class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition">
327
+ <i class="fas fa-plus mr-2"></i>Upload Your Design
328
+ </button>
329
+ </div>
330
+
331
+ <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
332
+ <!-- Gallery Item 1 -->
333
+ <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
334
+ <div class="h-48 bg-gradient-to-br from-pink-500 to-orange-400 relative">
335
+ <div class="absolute inset-0 flex items-center justify-center">
336
+ <div class="w-24 h-24 rounded-full bg-white opacity-20"></div>
337
+ <div class="w-32 h-8 bg-white opacity-20 absolute bottom-10 left-8 transform -rotate-6"></div>
338
+ </div>
339
+ </div>
340
+ <div class="p-4">
341
+ <div class="flex justify-between items-start">
342
+ <h3 class="font-medium">Sunset Vibes</h3>
343
+ <div class="flex items-center text-yellow-400">
344
+ <i class="fas fa-star"></i>
345
+ <span class="text-gray-600 ml-1">4.8</span>
346
+ </div>
347
+ </div>
348
+ <p class="text-sm text-gray-500 mt-1">by @designer123</p>
349
+ <div class="flex justify-between items-center mt-3">
350
+ <button class="text-indigo-600 text-sm font-medium hover:text-indigo-800">
351
+ <i class="fas fa-heart mr-1"></i> 124
352
+ </button>
353
+ <button class="bg-indigo-100 text-indigo-700 text-sm px-3 py-1 rounded-full hover:bg-indigo-200">
354
+ Remix
355
+ </button>
356
+ </div>
357
+ </div>
358
+ </div>
359
+
360
+ <!-- Gallery Item 2 -->
361
+ <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
362
+ <div class="h-48 bg-gradient-to-br from-blue-500 to-teal-400 relative">
363
+ <div class="absolute inset-0 flex items-center justify-center">
364
+ <div class="w-16 h-16 rounded-full bg-white opacity-30 top-12 left-12 absolute"></div>
365
+ <div class="w-16 h-16 rounded-full bg-white opacity-30 bottom-12 right-12 absolute"></div>
366
+ <div class="w-8 h-8 rounded-full bg-white opacity-30 top-8 right-8 absolute"></div>
367
+ </div>
368
+ </div>
369
+ <div class="p-4">
370
+ <div class="flex justify-between items-start">
371
+ <h3 class="font-medium">Ocean Breeze</h3>
372
+ <div class="flex items-center text-yellow-400">
373
+ <i class="fas fa-star"></i>
374
+ <span class="text-gray-600 ml-1">4.5</span>
375
+ </div>
376
+ </div>
377
+ <p class="text-sm text-gray-500 mt-1">by @creative_mind</p>
378
+ <div class="flex justify-between items-center mt-3">
379
+ <button class="text-indigo-600 text-sm font-medium hover:text-indigo-800">
380
+ <i class="fas fa-heart mr-1"></i> 89
381
+ </button>
382
+ <button class="bg-indigo-100 text-indigo-700 text-sm px-3 py-1 rounded-full hover:bg-indigo-200">
383
+ Remix
384
+ </button>
385
+ </div>
386
+ </div>
387
+ </div>
388
+
389
+ <!-- Gallery Item 3 -->
390
+ <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
391
+ <div class="h-48 bg-gradient-to-br from-purple-800 to-indigo-800 relative">
392
+ <div class="absolute inset-0 flex items-center justify-center">
393
+ <div class="w-40 h-2 bg-white opacity-20 absolute top-20 left-10 transform rotate-45"></div>
394
+ <div class="w-40 h-2 bg-white opacity-20 absolute top-32 left-10 transform -rotate-45"></div>
395
+ <div class="w-40 h-2 bg-white opacity-20 absolute bottom-20 left-10 transform rotate-45"></div>
396
+ </div>
397
+ </div>
398
+ <div class="p-4">
399
+ <div class="flex justify-between items-start">
400
+ <h3 class="font-medium">Midnight Lines</h3>
401
+ <div class="flex items-center text-yellow-400">
402
+ <i class="fas fa-star"></i>
403
+ <span class="text-gray-600 ml-1">4.9</span>
404
+ </div>
405
+ </div>
406
+ <p class="text-sm text-gray-500 mt-1">by @abstract_art</p>
407
+ <div class="flex justify-between items-center mt-3">
408
+ <button class="text-indigo-600 text-sm font-medium hover:text-indigo-800">
409
+ <i class="fas fa-heart mr-1"></i> 156
410
+ </button>
411
+ <button class="bg-indigo-100 text-indigo-700 text-sm px-3 py-1 rounded-full hover:bg-indigo-200">
412
+ Remix
413
+ </button>
414
+ </div>
415
+ </div>
416
+ </div>
417
+
418
+ <!-- Gallery Item 4 -->
419
+ <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
420
+ <div class="h-48 bg-gradient-to-br from-green-400 to-blue-500 relative">
421
+ <div class="absolute inset-0 flex items-center justify-center">
422
+ <div class="w-24 h-24 rounded-lg bg-white opacity-20 transform rotate-12"></div>
423
+ <div class="w-16 h-16 rounded-lg bg-white opacity-30 transform -rotate-6 absolute bottom-8 right-8"></div>
424
+ </div>
425
+ </div>
426
+ <div class="p-4">
427
+ <div class="flex justify-between items-start">
428
+ <h3 class="font-medium">Fresh Mint</h3>
429
+ <div class="flex items-center text-yellow-400">
430
+ <i class="fas fa-star"></i>
431
+ <span class="text-gray-600 ml-1">4.7</span>
432
+ </div>
433
+ </div>
434
+ <p class="text-sm text-gray-500 mt-1">by @design_explorer</p>
435
+ <div class="flex justify-between items-center mt-3">
436
+ <button class="text-indigo-600 text-sm font-medium hover:text-indigo-800">
437
+ <i class="fas fa-heart mr-1"></i> 102
438
+ </button>
439
+ <button class="bg-indigo-100 text-indigo-700 text-sm px-3 py-1 rounded-full hover:bg-indigo-200">
440
+ Remix
441
+ </button>
442
+ </div>
443
+ </div>
444
+ </div>
445
+ </div>
446
+
447
+ <div class="text-center mt-8">
448
+ <button class="border-2 border-indigo-600 text-indigo-600 px-6 py-2 rounded-full font-medium hover:bg-indigo-50 transition">
449
+ Load More Designs
450
+ </button>
451
+ </div>
452
+ </section>
453
+
454
+ <!-- Challenges Section -->
455
+ <section id="challenges" class="mb-20">
456
+ <h2 class="text-3xl font-bold text-gray-800 mb-8">Weekly Challenges</h2>
457
+
458
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
459
+ <!-- Challenge 1 -->
460
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
461
+ <div class="h-48 bg-gradient-to-br from-yellow-400 to-red-500 relative">
462
+ <div class="absolute inset-0 flex items-center justify-center">
463
+ <div class="w-32 h-32 rounded-full bg-white opacity-20"></div>
464
+ <div class="w-40 h-8 bg-white opacity-20 absolute bottom-12 left-10 transform -rotate-6"></div>
465
+ </div>
466
+ <div class="absolute top-4 right-4 bg-white text-orange-500 px-3 py-1 rounded-full text-sm font-bold">
467
+ Active
468
+ </div>
469
+ </div>
470
+ <div class="p-6">
471
+ <h3 class="text-xl font-bold mb-2">Apple Style Wallpapers</h3>
472
+ <p class="text-gray-600 mb-4">Create clean, minimalist wallpapers inspired by Apple's design aesthetic. Focus on subtle gradients and simple shapes.</p>
473
+ <div class="flex justify-between items-center">
474
+ <div class="text-sm text-gray-500">
475
+ <i class="fas fa-users mr-1"></i> 342 participants
476
+ </div>
477
+ <button class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition">
478
+ Join Challenge
479
+ </button>
480
+ </div>
481
+ </div>
482
+ </div>
483
+
484
+ <!-- Challenge 2 -->
485
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
486
+ <div class="h-48 bg-gradient-to-br from-gray-800 to-gray-900 relative">
487
+ <div class="absolute inset-0 flex items-center justify-center">
488
+ <div class="w-40 h-2 bg-white opacity-20 absolute top-20 left-10 transform rotate-45"></div>
489
+ <div class="w-40 h-2 bg-white opacity-20 absolute top-32 left-10 transform -rotate-45"></div>
490
+ <div class="w-40 h-2 bg-white opacity-20 absolute bottom-20 left-10 transform rotate-45"></div>
491
+ </div>
492
+ <div class="absolute top-4 right-4 bg-white text-gray-800 px-3 py-1 rounded-full text-sm font-bold">
493
+ Starts Soon
494
+ </div>
495
+ </div>
496
+ <div class="p-6">
497
+ <h3 class="text-xl font-bold mb-2">Minimalism Week</h3>
498
+ <p class="text-gray-600 mb-4">Less is more! Create wallpapers with maximum 3 elements and 2 colors. The most elegant design wins.</p>
499
+ <div class="flex justify-between items-center">
500
+ <div class="text-sm text-gray-500">
501
+ <i class="fas fa-clock mr-1"></i> Starts in 2 days
502
+ </div>
503
+ <button class="bg-gray-200 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-300 transition">
504
+ Notify Me
505
+ </button>
506
+ </div>
507
+ </div>
508
+ </div>
509
+ </div>
510
+ </section>
511
+
512
+ <!-- Shop Section -->
513
+ <section id="shop" class="mb-20">
514
+ <h2 class="text-3xl font-bold text-gray-800 mb-8">Premium Elements</h2>
515
+
516
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
517
+ <!-- Product 1 -->
518
+ <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
519
+ <div class="h-48 bg-gradient-to-br from-purple-500 to-pink-500 relative">
520
+ <div class="absolute inset-0 flex items-center justify-center">
521
+ <div class="w-24 h-24 rounded-full bg-white opacity-20 transform rotate-45"></div>
522
+ <div class="w-16 h-16 rounded-full bg-white opacity-30 absolute bottom-8 right-8 transform -rotate-12"></div>
523
+ </div>
524
+ <div class="absolute top-4 right-4 bg-yellow-400 text-gray-900 px-2 py-1 rounded text-xs font-bold">
525
+ POPULAR
526
+ </div>
527
+ </div>
528
+ <div class="p-6">
529
+ <h3 class="text-xl font-bold mb-2">3D Shapes Pack</h3>
530
+ <p class="text-gray-600 mb-4">50 premium 3D elements including abstract forms, geometric shapes and modern designs.</p>
531
+ <div class="flex justify-between items-center">
532
+ <div class="text-lg font-bold text-indigo-600">
533
+ $9.99
534
+ </div>
535
+ <button class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition">
536
+ Add to Cart
537
+ </button>
538
+ </div>
539
+ </div>
540
+ </div>
541
+
542
+ <!-- Product 2 -->
543
+ <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
544
+ <div class="h-48 bg-gradient-to-br from-blue-400 to-teal-400 relative">
545
+ <div class="absolute inset-0 flex items-center justify-center">
546
+ <div class="w-32 h-2 bg-white opacity-20 absolute top-20 left-10 transform rotate-45"></div>
547
+ <div class="w-32 h-2 bg-white opacity-20 absolute top-32 left-10 transform -rotate-45"></div>
548
+ <div class="w-32 h-2 bg-white opacity-20 absolute bottom-20 left-10 transform rotate-45"></div>
549
+ </div>
550
+ </div>
551
+ <div class="p-6">
552
+ <h3 class="text-xl font-bold mb-2">Neon Gradients</h3>
553
+ <p class="text-gray-600 mb-4">30 vibrant neon gradient combinations perfect for modern, eye-catching wallpapers.</p>
554
+ <div class="flex justify-between items-center">
555
+ <div class="text-lg font-bold text-indigo-600">
556
+ $6.99
557
+ </div>
558
+ <button class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition">
559
+ Add to Cart
560
+ </button>
561
+ </div>
562
+ </div>
563
+ </div>
564
+
565
+ <!-- Product 3 -->
566
+ <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
567
+ <div class="h-48 bg-gradient-to-br from-green-500 to-yellow-300 relative">
568
+ <div class="absolute inset-0 flex items-center justify-center">
569
+ <div class="w-20 h-20 rounded-lg bg-white opacity-20 transform rotate-12"></div>
570
+ <div class="w-12 h-12 rounded-lg bg-white opacity-30 absolute bottom-8 right-8 transform -rotate-6"></div>
571
+ </div>
572
+ </div>
573
+ <div class="p-6">
574
+ <h3 class="text-xl font-bold mb-2">Textures Bundle</h3>
575
+ <p class="text-gray-600 mb-4">Premium textures including paper, glass, metal, liquid and noise effects for professional designs.</p>
576
+ <div class="flex justify-between items-center">
577
+ <div class="text-lg font-bold text-indigo-600">
578
+ $7.99
579
+ </div>
580
+ <button class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition">
581
+ Add to Cart
582
+ </button>
583
+ </div>
584
+ </div>
585
+ </div>
586
+ </div>
587
+ </section>
588
+
589
+ <!-- Features Section -->
590
+ <section class="mb-20">
591
+ <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">Why Choose Wallpaper Lab?</h2>
592
+
593
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
594
+ <!-- Feature 1 -->
595
+ <div class="bg-white p-6 rounded-xl shadow-md text-center">
596
+ <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4">
597
+ <i class="fas fa-sliders text-indigo-600 text-2xl"></i>
598
+ </div>
599
+ <h3 class="text-xl font-bold mb-2">Full Control</h3>
600
+ <p class="text-gray-600">Every element is customizable - position, size, color, opacity and more. No AI black box.</p>
601
+ </div>
602
+
603
+ <!-- Feature 2 -->
604
+ <div class="bg-white p-6 rounded-xl shadow-md text-center">
605
+ <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4">
606
+ <i class="fas fa-mobile-screen-button text-indigo-600 text-2xl"></i>
607
+ </div>
608
+ <h3 class="text-xl font-bold mb-2">Any Device</h3>
609
+ <p class="text-gray-600">Create wallpapers for phones, tablets, desktops and even smart watches.</p>
610
+ </div>
611
+
612
+ <!-- Feature 3 -->
613
+ <div class="bg-white p-6 rounded-xl shadow-md text-center">
614
+ <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4">
615
+ <i class="fas fa-users text-indigo-600 text-2xl"></i>
616
+ </div>
617
+ <h3 class="text-xl font-bold mb-2">Creative Community</h3>
618
+ <p class="text-gray-600">Get inspired by others, remix designs, and participate in weekly challenges.</p>
619
+ </div>
620
+ </div>
621
+ </section>
622
+ </main>
623
+
624
+ <!-- Footer -->
625
+ <footer class="bg-gray-900 text-white py-12">
626
+ <div class="container mx-auto px-4">
627
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
628
+ <div>
629
+ <h3 class="text-xl font-bold mb-4 flex items-center">
630
+ <i class="fas fa-palette mr-2"></i> Wallpaper Lab
631
+ </h3>
632
+ <p class="text-gray-400">Create unique wallpapers without AI. Design custom backgrounds for any device.</p>
633
+ </div>
634
+
635
+ <div>
636
+ <h4 class="font-bold mb-4">Explore</h4>
637
+ <ul class="space-y-2">
638
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Editor</a></li>
639
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Gallery</a></li>
640
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Challenges</a></li>
641
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Shop</a></li>
642
+ </ul>
643
+ </div>
644
+
645
+ <div>
646
+ <h4 class="font-bold mb-4">Resources</h4>
647
+ <ul class="space-y-2">
648
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Tutorials</a></li>
649
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
650
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Inspiration</a></li>
651
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Help Center</a></li>
652
+ </ul>
653
+ </div>
654
+
655
+ <div>
656
+ <h4 class="font-bold mb-4">Connect</h4>
657
+ <div class="flex space-x-4 mb-4">
658
+ <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-indigo-600 transition">
659
+ <i class="fab fa-twitter"></i>
660
+ </a>
661
+ <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-indigo-600 transition">
662
+ <i class="fab fa-instagram"></i>
663
+ </a>
664
+ <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-indigo-600 transition">
665
+ <i class="fab fa-discord"></i>
666
+ </a>
667
+ <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-indigo-600 transition">
668
+ <i class="fab fa-pinterest"></i>
669
+ </a>
670
+ </div>
671
+ <p class="text-gray-400">Subscribe to our newsletter</p>
672
+ <div class="flex mt-2">
673
+ <input type="email" placeholder="Your email" class="bg-gray-800 text-white px-3 py-2 rounded-l focus:outline-none w-full">
674
+ <button class="bg-indigo-600 px-4 py-2 rounded-r hover:bg-indigo-700 transition">
675
+ <i class="fas fa-paper-plane"></i>
676
+ </button>
677
+ </div>
678
+ </div>
679
+ </div>
680
+
681
+ <div class="border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
682
+ <p class="text-gray-400 mb-4 md:mb-0">© 2023 Wallpaper Lab. All rights reserved.</p>
683
+ <div class="flex space-x-6">
684
+ <a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a>
685
+ <a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a>
686
+ <a href="#" class="text-gray-400 hover:text-white transition">Cookies</a>
687
+ </div>
688
+ </div>
689
+ </div>
690
+ </footer>
691
+
692
+ <!-- Export Modal -->
693
+ <div id="export-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
694
+ <div class="bg-white rounded-xl p-6 w-full max-w-md">
695
+ <div class="flex justify-between items-center mb-4">
696
+ <h3 class="text-xl font-bold">Export Wallpaper</h3>
697
+ <button id="close-export-modal" class="text-gray-500 hover:text-gray-700">
698
+ <i class="fas fa-times"></i>
699
+ </button>
700
+ </div>
701
+
702
+ <div class="mb-6">
703
+ <label class="block text-sm font-medium mb-2">Format</label>
704
+ <div class="grid grid-cols-3 gap-2">
705
+ <button class="export-format-btn bg-indigo-100 text-indigo-700 py-2 rounded-lg">PNG</button>
706
+ <button class="export-format-btn bg-gray-100 text-gray-700 py-2 rounded-lg">JPG</button>
707
+ <button class="export-format-btn bg-gray-100 text-gray-700 py-2 rounded-lg">WebP</button>
708
+ </div>
709
+ </div>
710
+
711
+ <div class="mb-6">
712
+ <label class="block text-sm font-medium mb-2">Quality</label>
713
+ <input type="range" min="50" max="100" value="90" class="w-full">
714
+ <div class="flex justify-between text-xs text-gray-500 mt-1">
715
+ <span>Medium</span>
716
+ <span>High</span>
717
+ <span>Best</span>
718
+ </div>
719
+ </div>
720
+
721
+ <div class="mb-6">
722
+ <label class="block text-sm font-medium mb-2">Resolution</label>
723
+ <select class="w-full border rounded p-2">
724
+ <option>Original (1080x1920)</option>
725
+ <option>High (1440x2560)</option>
726
+ <option>Medium (720x1280)</option>
727
+ <option>Low (540x960)</option>
728
+ </select>
729
+ </div>
730
+
731
+ <div class="flex space-x-3">
732
+ <button class="flex-1 border-2 border-indigo-600 text-indigo-600 py-2 rounded-lg font-medium hover:bg-indigo-50 transition">
733
+ <i class="fas fa-share-alt mr-2"></i>Share
734
+ </button>
735
+ <button class="flex-1 bg-indigo-600 text-white py-2 rounded-lg font-medium hover:bg-indigo-700 transition">
736
+ <i class="fas fa-download mr-2"></i>Download
737
+ </button>
738
+ </div>
739
+ </div>
740
+ </div>
741
+
742
+ <script>
743
+ // Simple drag functionality for elements
744
+ document.querySelectorAll('.element-draggable').forEach(element => {
745
+ let isDragging = false;
746
+ let offsetX, offsetY;
747
+
748
+ element.addEventListener('mousedown', (e) => {
749
+ isDragging = true;
750
+ document.getElementById('selected-element').textContent = element.id;
751
+
752
+ // Calculate offset
753
+ const rect = element.getBoundingClientRect();
754
+ offsetX = e.clientX - rect.left;
755
+ offsetY = e.clientY - rect.top;
756
+
757
+ // Highlight selected element
758
+ document.querySelectorAll('.element-draggable').forEach(el => {
759
+ el.classList.remove('ring-2', 'ring-indigo-500');
760
+ });
761
+ element.classList.add('ring-2', 'ring-indigo-500');
762
+ });
763
+
764
+ document.addEventListener('mousemove', (e) => {
765
+ if (!isDragging) return;
766
+
767
+ const container = document.getElementById('editor-canvas');
768
+ const containerRect = container.getBoundingClientRect();
769
+
770
+ // Calculate new position
771
+ let newX = e.clientX - containerRect.left - offsetX;
772
+ let newY = e.clientY - containerRect.top - offsetY;
773
+
774
+ // Constrain to container
775
+ newX = Math.max(0, Math.min(newX, containerRect.width - element.offsetWidth));
776
+ newY = Math.max(0, Math.min(newY, containerRect.height - element.offsetHeight));
777
+
778
+ // Apply new position
779
+ element.style.left = `${newX}px`;
780
+ element.style.top = `${newY}px`;
781
+ });
782
+
783
+ document.addEventListener('mouseup', () => {
784
+ isDragging = false;
785
+ });
786
+ });
787
+
788
+ // Format buttons
789
+ document.querySelectorAll('.format-btn').forEach(btn => {
790
+ btn.addEventListener('click', () => {
791
+ document.querySelectorAll('.format-btn').forEach(b => {
792
+ b.classList.remove('active-format', 'bg-indigo-100', 'text-indigo-700');
793
+ b.classList.add('bg-gray-100');
794
+ });
795
+
796
+ btn.classList.add('active-format', 'bg-indigo-100', 'text-indigo-700');
797
+ btn.classList.remove('bg-gray-100');
798
+
799
+ const size = btn.dataset.size;
800
+ const canvas = document.getElementById('editor-canvas');
801
+
802
+ if (size === '1080x1920') {
803
+ canvas.style.width = '270px';
804
+ canvas.style.height = '480px';
805
+ } else if (size === '1920x1080') {
806
+ canvas.style.width = '480px';
807
+ canvas.style.height = '270px';
808
+ } else if (size === '2048x2732') {
809
+ canvas.style.width = '300px';
810
+ canvas.style.height = '400px';
811
+ } else if (size === '368x448') {
812
+ canvas.style.width = '184px';
813
+ canvas.style.height = '224px';
814
+ } else if (size === 'custom') {
815
+ const width = prompt('Enter custom width in pixels:', '1080');
816
+ const height = prompt('Enter custom height in pixels:', '1920');
817
+ if (width && height) {
818
+ canvas.style.width = `${Math.min(Number(width)/4, 500)}px`;
819
+ canvas.style.height = `${Math.min(Number(height)/4, 800)}px`;
820
+ }
821
+ }
822
+ });
823
+ });
824
+
825
+ // Element buttons
826
+ document.querySelectorAll('.element-btn').forEach(btn => {
827
+ btn.addEventListener('click', () => {
828
+ const type = btn.dataset.type;
829
+ const canvas = document.getElementById('editor-canvas');
830
+ const newElement = document.createElement('div');
831
+ const elementId = `element-${Date.now()}`;
832
+
833
+ newElement.id = elementId;
834
+ newElement.className = 'element-draggable absolute';
835
+
836
+ // Set different styles based on element type
837
+ switch(type) {
838
+ case 'shape':
839
+ newElement.className += ' w-24 h-24 bg-indigo-400 opacity-70 rounded-lg';
840
+ newElement.style.left = '50px';
841
+ newElement.style.top = '50px';
842
+ break;
843
+ case 'bubble':
844
+ newElement.className += ' w-20 h-20 bg-pink-400 opacity-60 rounded-full';
845
+ newElement.style.left = '30px';
846
+ newElement.style.top = '30px';
847
+ break;
848
+ case 'wave':
849
+ newElement.className += ' w-40 h-8 bg-blue-300 opacity-50';
850
+ newElement.style.left = '20px';
851
+ newElement.style.top = '100px';
852
+ newElement.style.borderRadius = '50%';
853
+ break;
854
+ case 'line':
855
+ newElement.className += ' w-32 h-1 bg-white opacity-70';
856
+ newElement.style.left = '40px';
857
+ newElement.style.top = '150px';
858
+ break;
859
+ case 'pattern':
860
+ newElement.className += ' w-32 h-32 bg-gray-200 opacity-30';
861
+ newElement.style.left = '80px';
862
+ newElement.style.top = '80px';
863
+ newElement.style.backgroundImage = 'url("data:image/svg+xml,%3Csvg width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%239C92AC\' fill-opacity=\'0.4\' fill-rule=\'evenodd\'%3E%3Ccircle cx=\'3\' cy=\'3\' r=\'3\'/%3E%3Ccircle cx=\'13\' cy=\'13\' r=\'3\'/%3E%3C/g%3E%3C/svg%3E")';
864
+ break;
865
+ case '3d':
866
+ newElement.className += ' w-24 h-24 bg-gradient-to-br from-purple-500 to-pink-500 opacity-80';
867
+ newElement.style.left = '60px';
868
+ newElement.style.top = '60px';
869
+ newElement.style.borderRadius = '10px';
870
+ newElement.style.boxShadow = '5px 5px 15px rgba(0,0,0,0.2)';
871
+ break;
872
+ }
873
+
874
+ canvas.appendChild(newElement);
875
+
876
+ // Add drag functionality to new element
877
+ let isDragging = false;
878
+ let offsetX, offsetY;
879
+
880
+ newElement.addEventListener('mousedown', (e) => {
881
+ isDragging = true;
882
+ document.getElementById('selected-element').textContent = elementId;
883
+
884
+ // Calculate offset
885
+ const rect = newElement.getBoundingClientRect();
886
+ offsetX = e.clientX - rect.left;
887
+ offsetY = e.clientY - rect.top;
888
+
889
+ // Highlight selected element
890
+ document.querySelectorAll('.element-draggable').forEach(el => {
891
+ el.classList.remove('ring-2', 'ring-indigo-500');
892
+ });
893
+ newElement.classList.add('ring-2', 'ring-indigo-500');
894
+ });
895
+
896
+ document.addEventListener('mousemove', (e) => {
897
+ if (!isDragging) return;
898
+
899
+ const container = document.getElementById('editor-canvas');
900
+ const containerRect = container.getBoundingClientRect();
901
+
902
+ // Calculate new position
903
+ let newX = e.clientX - containerRect.left - offsetX;
904
+ let newY = e.clientY - containerRect.top - offsetY;
905
+
906
+ // Constrain to container
907
+ newX = Math.max(0, Math.min(newX, containerRect.width - newElement.offsetWidth));
908
+ newY = Math.max(0, Math.min(newY, containerRect.height - newElement.offsetHeight));
909
+
910
+ // Apply new position
911
+ newElement.style.left = `${newX}px`;
912
+ newElement.style.top = `${newY}px`;
913
+ });
914
+
915
+ document.addEventListener('mouseup', () => {
916
+ isDragging = false;
917
+ });
918
+ });
919
+ });
920
+
921
+ // Export modal
922
+ const exportBtn = document.getElementById('export-btn');
923
+ const exportModal = document.getElementById('export-modal');
924
+ const closeExportModal = document.getElementById('close-export-modal');
925
+
926
+ exportBtn.addEventListener('click', () => {
927
+ exportModal.classList.remove('hidden');
928
+ });
929
+
930
+ closeExportModal.addEventListener('click', () => {
931
+ exportModal.classList.add('hidden');
932
+ });
933
+
934
+ // Export format buttons
935
+ document.querySelectorAll('.export-format-btn').forEach(btn => {
936
+ btn.addEventListener('click', () => {
937
+ document.querySelectorAll('.export-format-btn').forEach(b => {
938
+ b.classList.remove('bg-indigo-100', 'text-indigo-700');
939
+ b.classList.add('bg-gray-100', 'text-gray-700');
940
+ });
941
+
942
+ btn.classList.add('bg-indigo-100', 'text-indigo-700');
943
+ btn.classList.remove('bg-gray-100', 'text-gray-700');
944
+ });
945
+ });
946
+
947
+ // Scroll to editor when clicking start button
948
+ document.getElementById('start-editor-btn').addEventListener('click', () => {
949
+ document.getElementById('editor').scrollIntoView({ behavior: 'smooth' });
950
+ });
951
+ </script>
952
+ <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=Kingrane/wallpaper-lab-test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
953
+ </html>