@jjlmoya/utils-developer 1.12.0 → 1.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (50) hide show
  1. package/package.json +5 -3
  2. package/scripts/postinstall.mjs +27 -0
  3. package/src/tool/aspectRatio/aspect-ratio-calculator.css +276 -0
  4. package/src/tool/aspectRatio/component.astro +0 -278
  5. package/src/tool/calculadoraTiempoDatos/component.astro +0 -524
  6. package/src/tool/calculadoraTiempoDatos/data-time-calculator-web-speed-impact.css +522 -0
  7. package/src/tool/colorConverter/color-converter-rgb-hex-hsl.css +262 -0
  8. package/src/tool/colorConverter/component.astro +0 -264
  9. package/src/tool/conversorExcelCsvHtml/component.astro +0 -360
  10. package/src/tool/conversorExcelCsvHtml/excel-csv-html-table-converter.css +358 -0
  11. package/src/tool/cronGenerator/component.astro +0 -317
  12. package/src/tool/cronGenerator/cron.css +315 -0
  13. package/src/tool/cssSpecificityCalculator/component.astro +0 -205
  14. package/src/tool/cssSpecificityCalculator/css-specificity-calculator.css +203 -0
  15. package/src/tool/cssToInlineConverter/component.astro +0 -150
  16. package/src/tool/cssToInlineConverter/css-to-inline-converter.css +148 -0
  17. package/src/tool/duplicateCssRemover/component.astro +0 -197
  18. package/src/tool/duplicateCssRemover/duplicate-css-remover.css +195 -0
  19. package/src/tool/generadorSecurityTxt/component.astro +0 -231
  20. package/src/tool/generadorSecurityTxt/security-txt-generator-rfc-9116.css +229 -0
  21. package/src/tool/hashGenerator/component.astro +0 -229
  22. package/src/tool/hashGenerator/hash-generator.css +227 -0
  23. package/src/tool/inspectorCertificadosSsl/component.astro +0 -261
  24. package/src/tool/inspectorCertificadosSsl/ssl-tls-certificate-inspector.css +259 -0
  25. package/src/tool/jsonFormatter/component.astro +0 -346
  26. package/src/tool/jsonFormatter/json-formatter.css +344 -0
  27. package/src/tool/keycode/component.astro +0 -298
  28. package/src/tool/keycode/keycode.css +296 -0
  29. package/src/tool/llmCostCalculator/component.astro +0 -253
  30. package/src/tool/llmCostCalculator/llm-cost-calculator.css +251 -0
  31. package/src/tool/mobileMockupGenerator/component.astro +0 -906
  32. package/src/tool/mobileMockupGenerator/mobile-mockup-generator.css +904 -0
  33. package/src/tool/musicalTypography/component.astro +0 -291
  34. package/src/tool/musicalTypography/musical-typography.css +289 -0
  35. package/src/tool/placeholderGenerator/component.astro +0 -255
  36. package/src/tool/placeholderGenerator/placeholder-image-generator.css +253 -0
  37. package/src/tool/promptLibrary/component.astro +0 -689
  38. package/src/tool/promptLibrary/prompt-library.css +687 -0
  39. package/src/tool/readabilityCalculator/component.astro +0 -322
  40. package/src/tool/readabilityCalculator/visual-readability-calculator-wcag-apca.css +320 -0
  41. package/src/tool/svgSanitizer/component.astro +0 -289
  42. package/src/tool/svgSanitizer/svg-sanitizer.css +287 -0
  43. package/src/tool/svgToCss/component.astro +0 -196
  44. package/src/tool/svgToCss/svg-to-css-converter.css +194 -0
  45. package/src/tool/urlCleaner/component.astro +0 -282
  46. package/src/tool/urlCleaner/url-tracking-cleaner.css +280 -0
  47. package/src/tool/urlEncoderDecoder/component.astro +0 -168
  48. package/src/tool/urlEncoderDecoder/url-encoder-decoder.css +166 -0
  49. package/src/tool/utmGenerator/component.astro +0 -156
  50. package/src/tool/utmGenerator/utm-generator.css +154 -0
package/src/tool/placeholderGenerator/component.astro CHANGED
@@ -117,261 +117,6 @@ const t = (ui ?? {}) as PlaceholderGeneratorUI;
117
117
  </div>
118
118
  </section>
119
119
 
120
- <style>
121
- .pg-root {
122
- --pg-primary: #eab308;
123
- --pg-primary-dark: #ca8a04;
124
- --pg-card-bg: #fff;
125
- --pg-bg: #f8fafc;
126
- --pg-text: #1e293b;
127
- --pg-text-muted: #64748b;
128
- --pg-border: #e2e8f0;
129
- --pg-input-bg: #f1f5f9;
130
- --pg-input-text: #1e293b;
131
- --pg-btn-bg: #111827;
132
- --pg-btn-hover: #000;
133
-
134
- max-width: 1100px;
135
- margin: 2rem auto;
136
- color: var(--pg-text);
137
- }
138
-
139
- :global(.theme-dark) .pg-root {
140
- --pg-card-bg: #1e293b;
141
- --pg-bg: #0f172a;
142
- --pg-text: #f1f5f9;
143
- --pg-text-muted: #94a3b8;
144
- --pg-border: #334155;
145
- --pg-input-bg: #0f172a;
146
- --pg-input-text: #e2e8f0;
147
- --pg-btn-bg: #f1f5f9;
148
- --pg-btn-hover: #fff;
149
- }
150
-
151
- .pg-card {
152
- background: var(--pg-card-bg);
153
- border: 1px solid var(--pg-border);
154
- border-radius: 1.25rem;
155
- box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
156
- overflow: hidden;
157
- }
158
-
159
- .pg-body {
160
- display: grid;
161
- grid-template-columns: 300px 1fr;
162
- min-height: 560px;
163
- }
164
-
165
- @media (max-width: 860px) {
166
- .pg-body {
167
- grid-template-columns: 1fr;
168
- }
169
-
170
- .pg-controls {
171
- border-right: none;
172
- border-bottom: 1px solid var(--pg-border);
173
- }
174
- }
175
-
176
- .pg-controls {
177
- border-right: 1px solid var(--pg-border);
178
- padding: 1.25rem;
179
- display: flex;
180
- flex-direction: column;
181
- gap: 1rem;
182
- overflow-y: auto;
183
- background: var(--pg-bg);
184
- }
185
-
186
- .pg-control-group {
187
- display: flex;
188
- flex-direction: column;
189
- gap: 0.375rem;
190
- }
191
-
192
- .pg-label {
193
- font-size: 0.8rem;
194
- font-weight: 600;
195
- color: var(--pg-text-muted);
196
- text-transform: uppercase;
197
- letter-spacing: 0.05em;
198
- }
199
-
200
- .pg-input,
201
- .pg-select {
202
- width: 100%;
203
- padding: 0.6rem 0.875rem;
204
- border-radius: 0.625rem;
205
- border: 1px solid var(--pg-border);
206
- background: var(--pg-card-bg);
207
- font-size: 0.875rem;
208
- color: var(--pg-input-text);
209
- outline: none;
210
- transition: border-color 0.2s;
211
- }
212
-
213
- .pg-input:focus,
214
- .pg-select:focus {
215
- border-color: var(--pg-primary);
216
- box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.15);
217
- }
218
-
219
- .pg-dims-group,
220
- .pg-colors-group,
221
- .pg-typo-group {
222
- display: grid;
223
- grid-template-columns: 1fr 1fr;
224
- gap: 0.75rem;
225
- }
226
-
227
- .pg-presets-row {
228
- display: flex;
229
- flex-wrap: wrap;
230
- gap: 0.375rem;
231
- }
232
-
233
- .pg-preset-pill {
234
- background: var(--pg-input-bg);
235
- border: 1px solid var(--pg-border);
236
- color: var(--pg-text-muted);
237
- padding: 0.3rem 0.6rem;
238
- border-radius: 50px;
239
- font-size: 0.75rem;
240
- font-weight: 600;
241
- cursor: pointer;
242
- transition: all 0.2s;
243
- }
244
-
245
- .pg-preset-pill:hover,
246
- :global(.pg-preset-pill.active) {
247
- background: var(--pg-primary);
248
- border-color: var(--pg-primary-dark);
249
- color: #fff;
250
- }
251
-
252
- .pg-radio-pill {
253
- position: relative;
254
- cursor: pointer;
255
- }
256
-
257
- .pg-radio-pill input {
258
- position: absolute;
259
- opacity: 0;
260
- width: 0;
261
- height: 0;
262
- }
263
-
264
- .pg-radio-pill span {
265
- display: inline-block;
266
- background: var(--pg-input-bg);
267
- border: 1px solid var(--pg-border);
268
- color: var(--pg-text-muted);
269
- padding: 0.3rem 0.6rem;
270
- border-radius: 50px;
271
- font-size: 0.75rem;
272
- font-weight: 600;
273
- transition: all 0.2s;
274
- }
275
-
276
- .pg-radio-pill input:checked + span {
277
- background: var(--pg-primary);
278
- border-color: var(--pg-primary-dark);
279
- color: #fff;
280
- }
281
-
282
- .pg-color-wrapper {
283
- display: flex;
284
- align-items: center;
285
- border: 1px solid var(--pg-border);
286
- border-radius: 0.625rem;
287
- overflow: hidden;
288
- background: var(--pg-card-bg);
289
- }
290
-
291
- .pg-color-wrapper input[type="color"] {
292
- -webkit-appearance: none;
293
- appearance: none;
294
- border: none;
295
- width: 38px;
296
- height: 38px;
297
- padding: 0;
298
- margin: 0;
299
- cursor: pointer;
300
- background: transparent;
301
- flex-shrink: 0;
302
- }
303
-
304
- .pg-color-wrapper input[type="color"]::-webkit-color-swatch-wrapper {
305
- padding: 0;
306
- }
307
-
308
- .pg-color-wrapper input[type="color"]::-webkit-color-swatch {
309
- border: none;
310
- border-right: 1px solid var(--pg-border);
311
- }
312
-
313
- .pg-color-text {
314
- border: none;
315
- padding: 0.5rem 0.625rem;
316
- text-transform: uppercase;
317
- font-weight: 600;
318
- font-size: 0.8rem;
319
- color: var(--pg-input-text);
320
- background: transparent;
321
- flex: 1;
322
- outline: none;
323
- width: 0;
324
- }
325
-
326
- .pg-download-btn {
327
- background: var(--pg-btn-bg);
328
- color: var(--pg-card-bg);
329
- padding: 0.75rem 1.25rem;
330
- border-radius: 0.75rem;
331
- border: none;
332
- font-size: 0.9rem;
333
- font-weight: 700;
334
- cursor: pointer;
335
- display: flex;
336
- align-items: center;
337
- justify-content: center;
338
- gap: 0.5rem;
339
- transition:
340
- background 0.2s,
341
- transform 0.1s;
342
- margin-top: 0.25rem;
343
- }
344
-
345
- .pg-download-btn:hover {
346
- background: var(--pg-btn-hover);
347
- }
348
-
349
- .pg-download-btn:active {
350
- transform: scale(0.98);
351
- }
352
-
353
- .pg-preview {
354
- display: flex;
355
- align-items: center;
356
- justify-content: center;
357
- padding: 2rem;
358
- background: var(--pg-bg);
359
- background-image: radial-gradient(var(--pg-border) 1px, transparent 1px);
360
- background-size: 24px 24px;
361
- }
362
-
363
- #p-image-preview {
364
- max-width: 100%;
365
- height: auto;
366
- object-fit: contain;
367
- box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
368
- border-radius: 8px;
369
- }
370
-
371
- canvas {
372
- display: none;
373
- }
374
- </style>
375
120
 
376
121
  <script>
377
122
  const widthInput = document.getElementById('p-width') as HTMLInputElement;
package/src/tool/placeholderGenerator/placeholder-image-generator.css ADDED
@@ -0,0 +1,253 @@
1
+ .pg-root {
2
+ --pg-primary: #eab308;
3
+ --pg-primary-dark: #ca8a04;
4
+ --pg-card-bg: #fff;
5
+ --pg-bg: #f8fafc;
6
+ --pg-text: #1e293b;
7
+ --pg-text-muted: #64748b;
8
+ --pg-border: #e2e8f0;
9
+ --pg-input-bg: #f1f5f9;
10
+ --pg-input-text: #1e293b;
11
+ --pg-btn-bg: #111827;
12
+ --pg-btn-hover: #000;
13
+
14
+ max-width: 1100px;
15
+ margin: 2rem auto;
16
+ color: var(--pg-text);
17
+ }
18
+
19
+ :global(.theme-dark) .pg-root {
20
+ --pg-card-bg: #1e293b;
21
+ --pg-bg: #0f172a;
22
+ --pg-text: #f1f5f9;
23
+ --pg-text-muted: #94a3b8;
24
+ --pg-border: #334155;
25
+ --pg-input-bg: #0f172a;
26
+ --pg-input-text: #e2e8f0;
27
+ --pg-btn-bg: #f1f5f9;
28
+ --pg-btn-hover: #fff;
29
+ }
30
+
31
+ .pg-card {
32
+ background: var(--pg-card-bg);
33
+ border: 1px solid var(--pg-border);
34
+ border-radius: 1.25rem;
35
+ box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
36
+ overflow: hidden;
37
+ }
38
+
39
+ .pg-body {
40
+ display: grid;
41
+ grid-template-columns: 300px 1fr;
42
+ min-height: 560px;
43
+ }
44
+
45
+ @media (max-width: 860px) {
46
+ .pg-body {
47
+ grid-template-columns: 1fr;
48
+ }
49
+
50
+ .pg-controls {
51
+ border-right: none;
52
+ border-bottom: 1px solid var(--pg-border);
53
+ }
54
+ }
55
+
56
+ .pg-controls {
57
+ border-right: 1px solid var(--pg-border);
58
+ padding: 1.25rem;
59
+ display: flex;
60
+ flex-direction: column;
61
+ gap: 1rem;
62
+ overflow-y: auto;
63
+ background: var(--pg-bg);
64
+ }
65
+
66
+ .pg-control-group {
67
+ display: flex;
68
+ flex-direction: column;
69
+ gap: 0.375rem;
70
+ }
71
+
72
+ .pg-label {
73
+ font-size: 0.8rem;
74
+ font-weight: 600;
75
+ color: var(--pg-text-muted);
76
+ text-transform: uppercase;
77
+ letter-spacing: 0.05em;
78
+ }
79
+
80
+ .pg-input,
81
+ .pg-select {
82
+ width: 100%;
83
+ padding: 0.6rem 0.875rem;
84
+ border-radius: 0.625rem;
85
+ border: 1px solid var(--pg-border);
86
+ background: var(--pg-card-bg);
87
+ font-size: 0.875rem;
88
+ color: var(--pg-input-text);
89
+ outline: none;
90
+ transition: border-color 0.2s;
91
+ }
92
+
93
+ .pg-input:focus,
94
+ .pg-select:focus {
95
+ border-color: var(--pg-primary);
96
+ box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.15);
97
+ }
98
+
99
+ .pg-dims-group,
100
+ .pg-colors-group,
101
+ .pg-typo-group {
102
+ display: grid;
103
+ grid-template-columns: 1fr 1fr;
104
+ gap: 0.75rem;
105
+ }
106
+
107
+ .pg-presets-row {
108
+ display: flex;
109
+ flex-wrap: wrap;
110
+ gap: 0.375rem;
111
+ }
112
+
113
+ .pg-preset-pill {
114
+ background: var(--pg-input-bg);
115
+ border: 1px solid var(--pg-border);
116
+ color: var(--pg-text-muted);
117
+ padding: 0.3rem 0.6rem;
118
+ border-radius: 50px;
119
+ font-size: 0.75rem;
120
+ font-weight: 600;
121
+ cursor: pointer;
122
+ transition: all 0.2s;
123
+ }
124
+
125
+ .pg-preset-pill:hover,
126
+ :global(.pg-preset-pill.active) {
127
+ background: var(--pg-primary);
128
+ border-color: var(--pg-primary-dark);
129
+ color: #fff;
130
+ }
131
+
132
+ .pg-radio-pill {
133
+ position: relative;
134
+ cursor: pointer;
135
+ }
136
+
137
+ .pg-radio-pill input {
138
+ position: absolute;
139
+ opacity: 0;
140
+ width: 0;
141
+ height: 0;
142
+ }
143
+
144
+ .pg-radio-pill span {
145
+ display: inline-block;
146
+ background: var(--pg-input-bg);
147
+ border: 1px solid var(--pg-border);
148
+ color: var(--pg-text-muted);
149
+ padding: 0.3rem 0.6rem;
150
+ border-radius: 50px;
151
+ font-size: 0.75rem;
152
+ font-weight: 600;
153
+ transition: all 0.2s;
154
+ }
155
+
156
+ .pg-radio-pill input:checked + span {
157
+ background: var(--pg-primary);
158
+ border-color: var(--pg-primary-dark);
159
+ color: #fff;
160
+ }
161
+
162
+ .pg-color-wrapper {
163
+ display: flex;
164
+ align-items: center;
165
+ border: 1px solid var(--pg-border);
166
+ border-radius: 0.625rem;
167
+ overflow: hidden;
168
+ background: var(--pg-card-bg);
169
+ }
170
+
171
+ .pg-color-wrapper input[type="color"] {
172
+ -webkit-appearance: none;
173
+ appearance: none;
174
+ border: none;
175
+ width: 38px;
176
+ height: 38px;
177
+ padding: 0;
178
+ margin: 0;
179
+ cursor: pointer;
180
+ background: transparent;
181
+ flex-shrink: 0;
182
+ }
183
+
184
+ .pg-color-wrapper input[type="color"]::-webkit-color-swatch-wrapper {
185
+ padding: 0;
186
+ }
187
+
188
+ .pg-color-wrapper input[type="color"]::-webkit-color-swatch {
189
+ border: none;
190
+ border-right: 1px solid var(--pg-border);
191
+ }
192
+
193
+ .pg-color-text {
194
+ border: none;
195
+ padding: 0.5rem 0.625rem;
196
+ text-transform: uppercase;
197
+ font-weight: 600;
198
+ font-size: 0.8rem;
199
+ color: var(--pg-input-text);
200
+ background: transparent;
201
+ flex: 1;
202
+ outline: none;
203
+ width: 0;
204
+ }
205
+
206
+ .pg-download-btn {
207
+ background: var(--pg-btn-bg);
208
+ color: var(--pg-card-bg);
209
+ padding: 0.75rem 1.25rem;
210
+ border-radius: 0.75rem;
211
+ border: none;
212
+ font-size: 0.9rem;
213
+ font-weight: 700;
214
+ cursor: pointer;
215
+ display: flex;
216
+ align-items: center;
217
+ justify-content: center;
218
+ gap: 0.5rem;
219
+ transition:
220
+ background 0.2s,
221
+ transform 0.1s;
222
+ margin-top: 0.25rem;
223
+ }
224
+
225
+ .pg-download-btn:hover {
226
+ background: var(--pg-btn-hover);
227
+ }
228
+
229
+ .pg-download-btn:active {
230
+ transform: scale(0.98);
231
+ }
232
+
233
+ .pg-preview {
234
+ display: flex;
235
+ align-items: center;
236
+ justify-content: center;
237
+ padding: 2rem;
238
+ background: var(--pg-bg);
239
+ background-image: radial-gradient(var(--pg-border) 1px, transparent 1px);
240
+ background-size: 24px 24px;
241
+ }
242
+
243
+ #p-image-preview {
244
+ max-width: 100%;
245
+ height: auto;
246
+ object-fit: contain;
247
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
248
+ border-radius: 8px;
249
+ }
250
+
251
+ canvas {
252
+ display: none;
253
+ }