Hugging Face's logo

Spaces:
MarkTheArtist
/
css-shadow-box-maker
Running

App Files Community
MarkTheArtist commited on
Commit
3adb326
·
verified ·
1 Parent(s): 31710f8

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +526 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Css Shadow Box Maker
3
- emoji: 🌍
4
- colorFrom: indigo
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: css-shadow-box-maker
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: gray
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,526 @@
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>CSS Box Shadow Generator</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
+ .color-picker {
11
+ -webkit-appearance: none;
12
+ -moz-appearance: none;
13
+ appearance: none;
14
+ width: 40px;
15
+ height: 40px;
16
+ background-color: transparent;
17
+ border: none;
18
+ cursor: pointer;
19
+ }
20
+ .color-picker::-webkit-color-swatch {
21
+ border-radius: 8px;
22
+ border: 2px solid #e5e7eb;
23
+ }
24
+ .color-picker::-moz-color-swatch {
25
+ border-radius: 8px;
26
+ border: 2px solid #e5e7eb;
27
+ }
28
+ .range-slider::-webkit-slider-thumb {
29
+ -webkit-appearance: none;
30
+ width: 18px;
31
+ height: 18px;
32
+ border-radius: 50%;
33
+ background: #3b82f6;
34
+ cursor: pointer;
35
+ }
36
+ .range-slider::-moz-range-thumb {
37
+ width: 18px;
38
+ height: 18px;
39
+ border-radius: 50%;
40
+ background: #3b82f6;
41
+ cursor: pointer;
42
+ }
43
+ #preview-box {
44
+ transition: box-shadow 0.2s ease;
45
+ }
46
+ #cssOutput {
47
+ font-family: 'Courier New', monospace;
48
+ }
49
+ .shadow-layer {
50
+ position: relative;
51
+ margin-bottom: 1rem;
52
+ }
53
+ .delete-layer {
54
+ position: absolute;
55
+ top: -8px;
56
+ right: -8px;
57
+ background: #ef4444;
58
+ color: white;
59
+ border-radius: 50%;
60
+ width: 24px;
61
+ height: 24px;
62
+ display: flex;
63
+ align-items: center;
64
+ justify-content: center;
65
+ cursor: pointer;
66
+ z-index: 10;
67
+ }
68
+ </style>
69
+ </head>
70
+ <body class="bg-gray-100 min-h-screen">
71
+ <div class="container mx-auto px-4 py-8">
72
+ <div class="text-center mb-8">
73
+ <h1 class="text-4xl font-bold text-gray-800 mb-2">CSS Box Shadow Generator</h1>
74
+ <p class="text-gray-600">Create beautiful shadows with this visual tool</p>
75
+ </div>
76
+
77
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
78
+ <!-- Controls Section -->
79
+ <div class="bg-white rounded-xl shadow-md p-6">
80
+ <div class="flex justify-between items-center mb-6">
81
+ <h2 class="text-2xl font-semibold text-gray-800">Shadow Controls</h2>
82
+ <button id="addLayerBtn" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg flex items-center">
83
+ <i class="fas fa-plus mr-2"></i> Add Layer
84
+ </button>
85
+ </div>
86
+
87
+ <div id="shadowLayers" class="mb-6">
88
+ <!-- Shadow layers will be added here -->
89
+ </div>
90
+
91
+ <div class="bg-gray-50 p-4 rounded-lg mb-6">
92
+ <div class="grid grid-cols-2 gap-4 mb-4">
93
+ <div>
94
+ <label class="block text-sm font-medium text-gray-700 mb-1">Horizontal Offset</label>
95
+ <input type="range" id="hOffset" min="-50" max="50" value="10" class="w-full range-slider">
96
+ <div class="flex justify-between text-xs text-gray-500">
97
+ <span>-50px</span>
98
+ <span id="hOffsetValue">10px</span>
99
+ <span>50px</span>
100
+ </div>
101
+ </div>
102
+ <div>
103
+ <label class="block text-sm font-medium text-gray-700 mb-1">Vertical Offset</label>
104
+ <input type="range" id="vOffset" min="-50" max="50" value="10" class="w-full range-slider">
105
+ <div class="flex justify-between text-xs text-gray-500">
106
+ <span>-50px</span>
107
+ <span id="vOffsetValue">10px</span>
108
+ <span>50px</span>
109
+ </div>
110
+ </div>
111
+ </div>
112
+
113
+ <div class="grid grid-cols-2 gap-4 mb-4">
114
+ <div>
115
+ <label class="block text-sm font-medium text-gray-700 mb-1">Blur Radius</label>
116
+ <input type="range" id="blur" min="0" max="100" value="15" class="w-full range-slider">
117
+ <div class="flex justify-between text-xs text-gray-500">
118
+ <span>0px</span>
119
+ <span id="blurValue">15px</span>
120
+ <span>100px</span>
121
+ </div>
122
+ </div>
123
+ <div>
124
+ <label class="block text-sm font-medium text-gray-700 mb-1">Spread</label>
125
+ <input type="range" id="spread" min="-50" max="50" value="0" class="w-full range-slider">
126
+ <div class="flex justify-between text-xs text-gray-500">
127
+ <span>-50px</span>
128
+ <span id="spreadValue">0px</span>
129
+ <span>50px</span>
130
+ </div>
131
+ </div>
132
+ </div>
133
+
134
+ <div class="grid grid-cols-2 gap-4">
135
+ <div>
136
+ <label class="block text-sm font-medium text-gray-700 mb-1">Color</label>
137
+ <div class="flex items-center">
138
+ <input type="color" id="shadowColor" value="#000000" class="color-picker mr-2">
139
+ <input type="text" id="shadowColorHex" value="#000000" class="border rounded px-2 py-1 w-24">
140
+ </div>
141
+ </div>
142
+ <div>
143
+ <label class="block text-sm font-medium text-gray-700 mb-1">Opacity</label>
144
+ <input type="range" id="opacity" min="0" max="100" value="75" class="w-full range-slider">
145
+ <div class="flex justify-between text-xs text-gray-500">
146
+ <span>0%</span>
147
+ <span id="opacityValue">75%</span>
148
+ <span>100%</span>
149
+ </div>
150
+ </div>
151
+ </div>
152
+
153
+ <div class="mt-4">
154
+ <label class="block text-sm font-medium text-gray-700 mb-1">Shadow Position</label>
155
+ <div class="flex space-x-2">
156
+ <button id="insetBtn" class="px-3 py-1 border rounded hover:bg-gray-100">Outset</button>
157
+ </div>
158
+ </div>
159
+ </div>
160
+
161
+ <div class="flex space-x-2">
162
+ <button id="copyBtn" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg flex-1 flex items-center justify-center">
163
+ <i class="fas fa-copy mr-2"></i> Copy CSS
164
+ </button>
165
+ <button id="resetBtn" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-lg flex-1 flex items-center justify-center">
166
+ <i class="fas fa-redo mr-2"></i> Reset
167
+ </button>
168
+ </div>
169
+ </div>
170
+
171
+ <!-- Preview and Output Section -->
172
+ <div class="space-y-6">
173
+ <div class="bg-white rounded-xl shadow-md p-6">
174
+ <h2 class="text-2xl font-semibold text-gray-800 mb-4">Preview</h2>
175
+ <div class="flex justify-center">
176
+ <div id="previewBox" class="w-48 h-48 bg-white rounded-lg border border-gray-200 flex items-center justify-center">
177
+ <p class="text-gray-500">Your shadow appears here</p>
178
+ </div>
179
+ </div>
180
+ </div>
181
+
182
+ <div class="bg-white rounded-xl shadow-md p-6">
183
+ <h2 class="text-2xl font-semibold text-gray-800 mb-4">CSS Output</h2>
184
+ <div class="bg-gray-800 text-gray-100 p-4 rounded-lg">
185
+ <code id="cssOutput" class="block whitespace-pre-wrap">box-shadow: 10px 10px 15px 0px rgba(0, 0, 0, 0.75);</code>
186
+ </div>
187
+ </div>
188
+
189
+ <div class="bg-white rounded-xl shadow-md p-6">
190
+ <h2 class="text-2xl font-semibold text-gray-800 mb-4">Presets</h2>
191
+ <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
192
+ <button class="preset-btn p-3 rounded border hover:bg-gray-50" data-preset="0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)">
193
+ <div class="w-full h-16 bg-white rounded shadow-sm"></div>
194
+ <p class="text-xs mt-1">Small</p>
195
+ </button>
196
+ <button class="preset-btn p-3 rounded border hover:bg-gray-50" data-preset="0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)">
197
+ <div class="w-full h-16 bg-white rounded shadow-md"></div>
198
+ <p class="text-xs mt-1">Medium</p>
199
+ </button>
200
+ <button class="preset-btn p-3 rounded border hover:bg-gray-50" data-preset="0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)">
201
+ <div class="w-full h-16 bg-white rounded shadow-lg"></div>
202
+ <p class="text-xs mt-1">Large</p>
203
+ </button>
204
+ <button class="preset-btn p-3 rounded border hover:bg-gray-50" data-preset="0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)">
205
+ <div class="w-full h-16 bg-white rounded shadow-xl"></div>
206
+ <p class="text-xs mt-1">XL</p>
207
+ </button>
208
+ <button class="preset-btn p-3 rounded border hover:bg-gray-50" data-preset="0 25px 50px -12px rgba(0, 0, 0, 0.25)">
209
+ <div class="w-full h-16 bg-white rounded shadow-2xl"></div>
210
+ <p class="text-xs mt-1">2XL</p>
211
+ </button>
212
+ <button class="preset-btn p-3 rounded border hover:bg-gray-50" data-preset="inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)">
213
+ <div class="w-full h-16 bg-white rounded shadow-inner"></div>
214
+ <p class="text-xs mt-1">Inset</p>
215
+ </button>
216
+ </div>
217
+ </div>
218
+ </div>
219
+ </div>
220
+ </div>
221
+
222
+ <script>
223
+ document.addEventListener('DOMContentLoaded', function() {
224
+ // DOM Elements
225
+ const hOffsetInput = document.getElementById('hOffset');
226
+ const vOffsetInput = document.getElementById('vOffset');
227
+ const blurInput = document.getElementById('blur');
228
+ const spreadInput = document.getElementById('spread');
229
+ const shadowColorInput = document.getElementById('shadowColor');
230
+ const shadowColorHex = document.getElementById('shadowColorHex');
231
+ const opacityInput = document.getElementById('opacity');
232
+ const insetBtn = document.getElementById('insetBtn');
233
+ const previewBox = document.getElementById('previewBox');
234
+ const cssOutput = document.getElementById('cssOutput');
235
+ const copyBtn = document.getElementById('copyBtn');
236
+ const resetBtn = document.getElementById('resetBtn');
237
+ const addLayerBtn = document.getElementById('addLayerBtn');
238
+ const shadowLayers = document.getElementById('shadowLayers');
239
+ const presetBtns = document.querySelectorAll('.preset-btn');
240
+
241
+ // Current shadow state
242
+ let currentLayerIndex = 0;
243
+ let shadowLayersData = [{
244
+ hOffset: 10,
245
+ vOffset: 10,
246
+ blur: 15,
247
+ spread: 0,
248
+ color: '#000000',
249
+ opacity: 75,
250
+ inset: false
251
+ }];
252
+
253
+ // Initialize
254
+ updatePreview();
255
+ createLayerElements();
256
+
257
+ // Event Listeners
258
+ hOffsetInput.addEventListener('input', updateShadow);
259
+ vOffsetInput.addEventListener('input', updateShadow);
260
+ blurInput.addEventListener('input', updateShadow);
261
+ spreadInput.addEventListener('input', updateShadow);
262
+ shadowColorInput.addEventListener('input', updateColor);
263
+ shadowColorHex.addEventListener('input', updateColor);
264
+ opacityInput.addEventListener('input', updateShadow);
265
+ insetBtn.addEventListener('click', toggleInset);
266
+ copyBtn.addEventListener('click', copyToClipboard);
267
+ resetBtn.addEventListener('click', resetShadow);
268
+ addLayerBtn.addEventListener('click', addLayer);
269
+
270
+ presetBtns.forEach(btn => {
271
+ btn.addEventListener('click', function() {
272
+ const preset = this.getAttribute('data-preset');
273
+ cssOutput.textContent = `box-shadow: ${preset};`;
274
+ previewBox.style.boxShadow = preset;
275
+
276
+ // Parse the preset into layers
277
+ const layers = preset.split(/(?<=\)),/).map(layer => {
278
+ layer = layer.trim();
279
+ const parts = layer.match(/(inset)?\s*(-?\d+)px\s*(-?\d+)px\s*(\d+)px\s*(-?\d+)px\s*(rgba?\([^)]+\))/);
280
+
281
+ if (!parts) return null;
282
+
283
+ const colorParts = parts[6].match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
284
+ const opacity = colorParts[4] ? Math.round(parseFloat(colorParts[4]) * 100) : 100;
285
+
286
+ return {
287
+ hOffset: parseInt(parts[2]),
288
+ vOffset: parseInt(parts[3]),
289
+ blur: parseInt(parts[4]),
290
+ spread: parseInt(parts[5]),
291
+ color: parts[6],
292
+ opacity: opacity,
293
+ inset: !!parts[1]
294
+ };
295
+ }).filter(layer => layer !== null);
296
+
297
+ shadowLayersData = layers.length ? layers : [{
298
+ hOffset: 10,
299
+ vOffset: 10,
300
+ blur: 15,
301
+ spread: 0,
302
+ color: '#000000',
303
+ opacity: 75,
304
+ inset: false
305
+ }];
306
+
307
+ createLayerElements();
308
+ updateControlsForLayer(0);
309
+ });
310
+ });
311
+
312
+ // Functions
313
+ function updateShadow() {
314
+ const currentLayer = shadowLayersData[currentLayerIndex];
315
+
316
+ currentLayer.hOffset = parseInt(hOffsetInput.value);
317
+ currentLayer.vOffset = parseInt(vOffsetInput.value);
318
+ currentLayer.blur = parseInt(blurInput.value);
319
+ currentLayer.spread = parseInt(spreadInput.value);
320
+ currentLayer.opacity = parseInt(opacityInput.value);
321
+
322
+ document.getElementById('hOffsetValue').textContent = `${currentLayer.hOffset}px`;
323
+ document.getElementById('vOffsetValue').textContent = `${currentLayer.vOffset}px`;
324
+ document.getElementById('blurValue').textContent = `${currentLayer.blur}px`;
325
+ document.getElementById('spreadValue').textContent = `${currentLayer.spread}px`;
326
+ document.getElementById('opacityValue').textContent = `${currentLayer.opacity}%`;
327
+
328
+ updatePreview();
329
+ }
330
+
331
+ function updateColor() {
332
+ const currentLayer = shadowLayersData[currentLayerIndex];
333
+
334
+ if (this === shadowColorInput) {
335
+ currentLayer.color = shadowColorInput.value;
336
+ shadowColorHex.value = shadowColorInput.value;
337
+ } else {
338
+ currentLayer.color = shadowColorHex.value;
339
+ shadowColorInput.value = shadowColorHex.value;
340
+ }
341
+
342
+ updatePreview();
343
+ }
344
+
345
+ function toggleInset() {
346
+ const currentLayer = shadowLayersData[currentLayerIndex];
347
+ currentLayer.inset = !currentLayer.inset;
348
+
349
+ if (currentLayer.inset) {
350
+ insetBtn.textContent = 'Inset';
351
+ insetBtn.classList.add('bg-blue-500', 'text-white');
352
+ insetBtn.classList.remove('border', 'hover:bg-gray-100');
353
+ } else {
354
+ insetBtn.textContent = 'Outset';
355
+ insetBtn.classList.remove('bg-blue-500', 'text-white');
356
+ insetBtn.classList.add('border', 'hover:bg-gray-100');
357
+ }
358
+
359
+ updatePreview();
360
+ }
361
+
362
+ function updatePreview() {
363
+ const shadowValue = shadowLayersData.map(layer => {
364
+ const rgbaColor = hexToRgba(layer.color, layer.opacity / 100);
365
+ const inset = layer.inset ? 'inset ' : '';
366
+ return `${inset}${layer.hOffset}px ${layer.vOffset}px ${layer.blur}px ${layer.spread}px ${rgbaColor}`;
367
+ }).join(', ');
368
+
369
+ previewBox.style.boxShadow = shadowValue;
370
+ cssOutput.textContent = `box-shadow: ${shadowValue};`;
371
+ }
372
+
373
+ function hexToRgba(hex, opacity) {
374
+ // Remove # if present
375
+ hex = hex.replace('#', '');
376
+
377
+ // Parse r, g, b values
378
+ let r, g, b;
379
+
380
+ if (hex.length === 3) {
381
+ r = parseInt(hex.substring(0, 1).repeat(2), 16);
382
+ g = parseInt(hex.substring(1, 2).repeat(2), 16);
383
+ b = parseInt(hex.substring(2, 3).repeat(2), 16);
384
+ } else if (hex.length === 6) {
385
+ r = parseInt(hex.substring(0, 2), 16);
386
+ g = parseInt(hex.substring(2, 4), 16);
387
+ b = parseInt(hex.substring(4, 6), 16);
388
+ } else {
389
+ // Default to black if invalid
390
+ return `rgba(0, 0, 0, ${opacity})`;
391
+ }
392
+
393
+ return `rgba(${r}, ${g}, ${b}, ${opacity})`;
394
+ }
395
+
396
+ function copyToClipboard() {
397
+ const text = cssOutput.textContent;
398
+ navigator.clipboard.writeText(text).then(() => {
399
+ const originalText = copyBtn.innerHTML;
400
+ copyBtn.innerHTML = '<i class="fas fa-check mr-2"></i> Copied!';
401
+ setTimeout(() => {
402
+ copyBtn.innerHTML = originalText;
403
+ }, 2000);
404
+ });
405
+ }
406
+
407
+ function resetShadow() {
408
+ shadowLayersData = [{
409
+ hOffset: 10,
410
+ vOffset: 10,
411
+ blur: 15,
412
+ spread: 0,
413
+ color: '#000000',
414
+ opacity: 75,
415
+ inset: false
416
+ }];
417
+
418
+ currentLayerIndex = 0;
419
+ createLayerElements();
420
+ updateControlsForLayer(0);
421
+ updatePreview();
422
+ }
423
+
424
+ function addLayer() {
425
+ const newLayer = {
426
+ hOffset: 5,
427
+ vOffset: 5,
428
+ blur: 10,
429
+ spread: 0,
430
+ color: '#000000',
431
+ opacity: 50,
432
+ inset: false
433
+ };
434
+
435
+ shadowLayersData.push(newLayer);
436
+ currentLayerIndex = shadowLayersData.length - 1;
437
+ createLayerElements();
438
+ updateControlsForLayer(currentLayerIndex);
439
+ updatePreview();
440
+ }
441
+
442
+ function createLayerElements() {
443
+ shadowLayers.innerHTML = '';
444
+
445
+ shadowLayersData.forEach((layer, index) => {
446
+ const layerElement = document.createElement('div');
447
+ layerElement.className = 'shadow-layer bg-gray-100 p-4 rounded-lg';
448
+
449
+ const rgbaColor = hexToRgba(layer.color, layer.opacity / 100);
450
+ const shadowValue = `${layer.inset ? 'inset ' : ''}${layer.hOffset}px ${layer.vOffset}px ${layer.blur}px ${layer.spread}px ${rgbaColor}`;
451
+
452
+ layerElement.innerHTML = `
453
+ <div class="flex items-center justify-between mb-2">
454
+ <h3 class="font-medium">Layer ${index + 1}</h3>
455
+ <div class="flex items-center">
456
+ <div class="w-4 h-4 rounded-full mr-2" style="background-color: ${layer.color}; opacity: ${layer.opacity/100}"></div>
457
+ <span class="text-xs">${shadowValue}</span>
458
+ </div>
459
+ </div>
460
+ <div class="h-4 rounded-full" style="box-shadow: ${shadowValue}; background-color: white;"></div>
461
+ ${index > 0 ? '<div class="delete-layer"><i class="fas fa-times text-xs"></i></div>' : ''}
462
+ `;
463
+
464
+ if (index > 0) {
465
+ layerElement.querySelector('.delete-layer').addEventListener('click', () => {
466
+ shadowLayersData.splice(index, 1);
467
+ currentLayerIndex = Math.min(currentLayerIndex, shadowLayersData.length - 1);
468
+ createLayerElements();
469
+ updateControlsForLayer(currentLayerIndex);
470
+ updatePreview();
471
+ });
472
+ }
473
+
474
+ layerElement.addEventListener('click', () => {
475
+ currentLayerIndex = index;
476
+ updateControlsForLayer(index);
477
+ });
478
+
479
+ if (index === currentLayerIndex) {
480
+ layerElement.classList.add('ring-2', 'ring-blue-500');
481
+ }
482
+
483
+ shadowLayers.appendChild(layerElement);
484
+ });
485
+ }
486
+
487
+ function updateControlsForLayer(index) {
488
+ const layer = shadowLayersData[index];
489
+
490
+ hOffsetInput.value = layer.hOffset;
491
+ vOffsetInput.value = layer.vOffset;
492
+ blurInput.value = layer.blur;
493
+ spreadInput.value = layer.spread;
494
+ shadowColorInput.value = layer.color;
495
+ shadowColorHex.value = layer.color;
496
+ opacityInput.value = layer.opacity;
497
+
498
+ document.getElementById('hOffsetValue').textContent = `${layer.hOffset}px`;
499
+ document.getElementById('vOffsetValue').textContent = `${layer.vOffset}px`;
500
+ document.getElementById('blurValue').textContent = `${layer.blur}px`;
501
+ document.getElementById('spreadValue').textContent = `${layer.spread}px`;
502
+ document.getElementById('opacityValue').textContent = `${layer.opacity}%`;
503
+
504
+ if (layer.inset) {
505
+ insetBtn.textContent = 'Inset';
506
+ insetBtn.classList.add('bg-blue-500', 'text-white');
507
+ insetBtn.classList.remove('border', 'hover:bg-gray-100');
508
+ } else {
509
+ insetBtn.textContent = 'Outset';
510
+ insetBtn.classList.remove('bg-blue-500', 'text-white');
511
+ insetBtn.classList.add('border', 'hover:bg-gray-100');
512
+ }
513
+
514
+ // Update active layer indicator
515
+ document.querySelectorAll('.shadow-layer').forEach((el, i) => {
516
+ if (i === index) {
517
+ el.classList.add('ring-2', 'ring-blue-500');
518
+ } else {
519
+ el.classList.remove('ring-2', 'ring-blue-500');
520
+ }
521
+ });
522
+ }
523
+ });
524
+ </script>
525
+ <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=MarkTheArtist/css-shadow-box-maker" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
526
+ </html>