@jjlmoya/utils-audiovisual 1.14.0 → 1.16.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 (44) hide show
  1. package/package.json +7 -4
  2. package/scripts/postinstall.mjs +27 -0
  3. package/src/entries.ts +32 -0
  4. package/src/tool/chromaticLens/chromatic-lens-color-palette-extraction-online.css +308 -0
  5. package/src/tool/chromaticLens/component.astro +0 -309
  6. package/src/tool/chromaticLens/entry.ts +39 -0
  7. package/src/tool/chromaticLens/index.ts +2 -41
  8. package/src/tool/collageMaker/component.astro +0 -387
  9. package/src/tool/collageMaker/entry.ts +48 -0
  10. package/src/tool/collageMaker/free-online-photo-collage-maker-professional-compositions.css +386 -0
  11. package/src/tool/collageMaker/index.ts +2 -50
  12. package/src/tool/exifCleaner/component.astro +0 -290
  13. package/src/tool/exifCleaner/entry.ts +53 -0
  14. package/src/tool/exifCleaner/exif-metadata-cleaner-remove-gps-photo-privacy.css +289 -0
  15. package/src/tool/exifCleaner/index.ts +2 -55
  16. package/src/tool/imageCompressor/component.astro +0 -498
  17. package/src/tool/imageCompressor/entry.ts +56 -0
  18. package/src/tool/imageCompressor/index.ts +2 -58
  19. package/src/tool/imageCompressor/online-image-compressor-reduce-file-size-no-quality-loss.css +496 -0
  20. package/src/tool/printQualityCalculator/component.astro +0 -485
  21. package/src/tool/printQualityCalculator/entry.ts +66 -0
  22. package/src/tool/printQualityCalculator/index.ts +2 -68
  23. package/src/tool/printQualityCalculator/print-quality-calculator-pixels-to-cm-dpi.css +483 -0
  24. package/src/tool/privacyBlur/component.astro +0 -334
  25. package/src/tool/privacyBlur/entry.ts +45 -0
  26. package/src/tool/privacyBlur/index.ts +2 -47
  27. package/src/tool/privacyBlur/online-privacy-editor-pixelate-blur-faces-photos.css +332 -0
  28. package/src/tool/subtitleSync/component.astro +0 -327
  29. package/src/tool/subtitleSync/entry.ts +45 -0
  30. package/src/tool/subtitleSync/index.ts +2 -47
  31. package/src/tool/subtitleSync/synchronize-srt-subtitles-online-adjust-timing-free.css +325 -0
  32. package/src/tool/timelapseCalculator/component.astro +0 -285
  33. package/src/tool/timelapseCalculator/entry.ts +48 -0
  34. package/src/tool/timelapseCalculator/index.ts +2 -50
  35. package/src/tool/timelapseCalculator/timelapse-hyperlapse-calculator-perfect-intervals.css +283 -0
  36. package/src/tool/tvDistance/component.astro +0 -437
  37. package/src/tool/tvDistance/entry.ts +45 -0
  38. package/src/tool/tvDistance/index.ts +2 -47
  39. package/src/tool/tvDistance/tv-viewing-distance-calculator-thx-4k-optimal-screen.css +435 -0
  40. package/src/tool/videoFrameExtractor/component.astro +0 -428
  41. package/src/tool/videoFrameExtractor/entry.ts +49 -0
  42. package/src/tool/videoFrameExtractor/index.ts +2 -51
  43. package/src/tool/videoFrameExtractor/online-video-frame-extractor-capture-hd-stills.css +426 -0
  44. package/src/tools.ts +1 -1
package/src/tool/imageCompressor/online-image-compressor-reduce-file-size-no-quality-loss.css ADDED
@@ -0,0 +1,496 @@
1
+ :global(.ic-dashboard) {
2
+ max-width: 900px;
3
+ margin: 0 auto;
4
+ display: flex;
5
+ flex-direction: column;
6
+ gap: 1rem;
7
+
8
+ --ic-bg: #fff;
9
+ --ic-bg-muted: #f8fafc;
10
+ --ic-border: #e2e8f0;
11
+ --ic-text: #111827;
12
+ --ic-text-muted: #6b7280;
13
+ --ic-accent: #10b981;
14
+ --ic-accent-dark: #059669;
15
+ --ic-accent-light: #f0fdf4;
16
+ --ic-success: #10b981;
17
+ --ic-error: #ef4444;
18
+ --ic-error-dark: #dc2626;
19
+ --ic-warning: #f59e0b;
20
+ --ic-shadow: rgba(0, 0, 0, 0.03);
21
+ }
22
+
23
+ :global(.theme-dark .ic-dashboard) {
24
+ --ic-bg: #0f172a;
25
+ --ic-bg-muted: #1e293b;
26
+ --ic-border: #334155;
27
+ --ic-text: #f1f5f9;
28
+ --ic-text-muted: #cbd5e1;
29
+ --ic-accent: #10b981;
30
+ --ic-accent-dark: #059669;
31
+ --ic-accent-light: rgba(16, 185, 129, 0.1);
32
+ --ic-shadow: rgba(0, 0, 0, 0.4);
33
+ }
34
+
35
+ :global(.ic-global-settings) {
36
+ display: flex;
37
+ justify-content: flex-end;
38
+ gap: 1.5rem;
39
+ background: rgba(255, 255, 255, 0.5);
40
+ backdrop-filter: blur(8px);
41
+ padding: 0.75rem 1.5rem;
42
+ border-radius: 0.75rem;
43
+ border: 1px solid rgba(255, 255, 255, 0.35);
44
+ color: #374151;
45
+ flex-wrap: wrap;
46
+ }
47
+
48
+ :global(.theme-dark .ic-global-settings) {
49
+ background: rgba(30, 41, 59, 0.6);
50
+ border-color: rgba(71, 85, 105, 0.5);
51
+ color: var(--ic-text-muted);
52
+ }
53
+
54
+ :global(.ic-toggle-group) {
55
+ display: flex;
56
+ align-items: center;
57
+ gap: 0.5rem;
58
+ }
59
+
60
+ :global(.ic-webp-switch) {
61
+ position: relative;
62
+ display: inline-block;
63
+ width: 44px;
64
+ height: 24px;
65
+ }
66
+
67
+ :global(.ic-webp-switch input) {
68
+ opacity: 0;
69
+ width: 0;
70
+ height: 0;
71
+ }
72
+
73
+ :global(.ic-webp-slider) {
74
+ position: absolute;
75
+ cursor: pointer;
76
+ inset: 0;
77
+ background: var(--ic-border);
78
+ border-radius: 24px;
79
+ transition: 0.3s;
80
+ }
81
+
82
+ :global(.ic-webp-slider::before) {
83
+ content: '';
84
+ position: absolute;
85
+ width: 18px;
86
+ height: 18px;
87
+ left: 3px;
88
+ bottom: 3px;
89
+ background: var(--ic-bg);
90
+ border-radius: 50%;
91
+ transition: 0.3s;
92
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
93
+ }
94
+
95
+ :global(.ic-webp-switch input:checked + .ic-webp-slider) {
96
+ background: var(--ic-accent);
97
+ }
98
+
99
+ :global(.ic-webp-switch input:checked + .ic-webp-slider::before) {
100
+ transform: translateX(20px);
101
+ }
102
+
103
+ :global(.ic-toggle-label) {
104
+ font-size: 0.9rem;
105
+ font-weight: 600;
106
+ }
107
+
108
+ :global(.ic-settings-group) {
109
+ display: flex;
110
+ align-items: center;
111
+ gap: 0.75rem;
112
+ font-size: 0.9rem;
113
+ font-weight: 600;
114
+ }
115
+
116
+ :global(.ic-mini-slider) {
117
+ width: 100px;
118
+ accent-color: var(--ic-accent);
119
+ }
120
+
121
+ :global(.ic-drop-zone) {
122
+ position: relative;
123
+ background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.45) 100%);
124
+ border: 3px dashed var(--ic-accent);
125
+ border-radius: 1.5rem;
126
+ padding: 4rem 2rem;
127
+ text-align: center;
128
+ cursor: pointer;
129
+ transition: all 0.3s ease;
130
+ backdrop-filter: blur(12px);
131
+ box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
132
+ }
133
+
134
+ :global(.theme-dark .ic-drop-zone) {
135
+ background: linear-gradient(180deg, rgba(30, 41, 59, 0.85) 0%, rgba(15, 23, 42, 0.6) 100%);
136
+ }
137
+
138
+ :global(.ic-drop-zone.ic-dragover),
139
+ :global(.ic-drop-zone:hover) {
140
+ transform: scale(1.01);
141
+ border-color: var(--ic-accent-dark);
142
+ background: linear-gradient(180deg, var(--ic-accent-light) 0%, rgba(255, 255, 255, 0.6) 100%);
143
+ }
144
+
145
+ :global(.theme-dark .ic-drop-zone.ic-dragover),
146
+ :global(.theme-dark .ic-drop-zone:hover) {
147
+ background: linear-gradient(180deg, rgba(6, 78, 59, 0.4) 0%, rgba(15, 23, 42, 0.6) 100%);
148
+ }
149
+
150
+ :global(.ic-file-label) {
151
+ display: flex;
152
+ flex-direction: column;
153
+ align-items: center;
154
+ gap: 0.5rem;
155
+ cursor: pointer;
156
+ pointer-events: none;
157
+ }
158
+
159
+ :global(.ic-upload-icon) {
160
+ color: var(--ic-accent);
161
+ margin-bottom: 0.5rem;
162
+ }
163
+
164
+ :global(.ic-upload-text) {
165
+ font-size: 1.5rem;
166
+ font-weight: 700;
167
+ color: var(--ic-text);
168
+ }
169
+
170
+ :global(.ic-upload-subtext) {
171
+ color: var(--ic-text-muted);
172
+ font-size: 1rem;
173
+ margin-bottom: 1rem;
174
+ }
175
+
176
+ :global(.ic-upload-btn) {
177
+ background: var(--ic-text);
178
+ color: var(--ic-bg);
179
+ padding: 0.75rem 2rem;
180
+ border-radius: 9999px;
181
+ font-weight: 600;
182
+ font-size: 0.95rem;
183
+ pointer-events: auto;
184
+ transition: background 0.2s;
185
+ }
186
+
187
+ :global(.ic-upload-btn:hover) {
188
+ background: var(--ic-text-muted);
189
+ }
190
+
191
+ :global(.ic-drop-zone input[type="file"]) {
192
+ position: absolute;
193
+ inset: 0;
194
+ width: 100%;
195
+ height: 100%;
196
+ opacity: 0;
197
+ cursor: pointer;
198
+ }
199
+
200
+ :global(.ic-file-list-container) {
201
+ margin-top: 1.5rem;
202
+ }
203
+
204
+ :global(.ic-list-header) {
205
+ display: flex;
206
+ justify-content: space-between;
207
+ align-items: center;
208
+ margin-bottom: 1rem;
209
+ padding: 0 0.5rem;
210
+ }
211
+
212
+ :global(.ic-list-header h3) {
213
+ font-size: 1.25rem;
214
+ font-weight: 700;
215
+ color: var(--ic-text);
216
+ margin: 0;
217
+ }
218
+
219
+ :global(.ic-total-savings) {
220
+ font-weight: 700;
221
+ font-size: 1rem;
222
+ }
223
+
224
+ :global(.ic-file-list) {
225
+ list-style: none;
226
+ padding: 1rem;
227
+ margin: 0;
228
+ display: flex;
229
+ flex-direction: column;
230
+ gap: 0.75rem;
231
+ background: var(--ic-bg-muted);
232
+ border-radius: 1rem;
233
+ border: 1px solid var(--ic-border);
234
+ }
235
+
236
+ :global(.ic-file-item) {
237
+ background: var(--ic-bg);
238
+ border-radius: 0.75rem;
239
+ padding: 0.75rem 1.25rem;
240
+ display: grid;
241
+ grid-template-columns: 2fr 2.5rem 2fr;
242
+ align-items: center;
243
+ gap: 1rem;
244
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
245
+ transition: box-shadow 0.2s;
246
+ }
247
+
248
+ :global(.ic-file-item:hover) {
249
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
250
+ }
251
+
252
+ :global(.ic-preview-col) {
253
+ display: flex;
254
+ align-items: center;
255
+ gap: 1rem;
256
+ overflow: hidden;
257
+ }
258
+
259
+ :global(.ic-preview-wrapper) {
260
+ width: 48px;
261
+ height: 48px;
262
+ border-radius: 0.5rem;
263
+ overflow: hidden;
264
+ background: var(--ic-bg-muted);
265
+ flex-shrink: 0;
266
+ }
267
+
268
+ :global(.ic-preview-img) {
269
+ width: 100%;
270
+ height: 100%;
271
+ object-fit: cover;
272
+ }
273
+
274
+ :global(.ic-file-info) {
275
+ display: flex;
276
+ flex-direction: column;
277
+ overflow: hidden;
278
+ }
279
+
280
+ :global(.ic-filename) {
281
+ font-weight: 600;
282
+ color: var(--ic-text);
283
+ white-space: nowrap;
284
+ overflow: hidden;
285
+ text-overflow: ellipsis;
286
+ font-size: 0.9rem;
287
+ }
288
+
289
+ :global(.ic-orig-size) {
290
+ color: var(--ic-text-muted);
291
+ font-size: 0.8rem;
292
+ }
293
+
294
+ :global(.ic-arrow-col) {
295
+ display: flex;
296
+ justify-content: center;
297
+ }
298
+
299
+ :global(.ic-arrow-circle) {
300
+ background: var(--ic-accent-light);
301
+ color: var(--ic-accent);
302
+ width: 36px;
303
+ height: 36px;
304
+ border-radius: 50%;
305
+ display: flex;
306
+ align-items: center;
307
+ justify-content: center;
308
+ flex-shrink: 0;
309
+ }
310
+
311
+ :global(.ic-result-col) {
312
+ display: flex;
313
+ align-items: center;
314
+ justify-content: flex-end;
315
+ gap: 1.25rem;
316
+ }
317
+
318
+ :global(.ic-savings-pill) {
319
+ display: flex;
320
+ flex-direction: column;
321
+ align-items: center;
322
+ }
323
+
324
+ :global(.ic-new-size) {
325
+ font-weight: 700;
326
+ color: var(--ic-text);
327
+ font-size: 0.95rem;
328
+ }
329
+
330
+ :global(.ic-savings-pct) {
331
+ color: var(--ic-accent);
332
+ font-weight: 800;
333
+ font-size: 0.85rem;
334
+ }
335
+
336
+ :global(.ic-savings-pill-negative .ic-savings-pct) {
337
+ color: var(--ic-error);
338
+ }
339
+
340
+ :global(.ic-item-actions) {
341
+ display: flex;
342
+ gap: 0.4rem;
343
+ }
344
+
345
+ :global(.ic-icon-btn) {
346
+ background: var(--ic-bg-muted);
347
+ border: none;
348
+ color: var(--ic-text-muted);
349
+ width: 36px;
350
+ height: 36px;
351
+ border-radius: 0.5rem;
352
+ display: flex;
353
+ align-items: center;
354
+ justify-content: center;
355
+ cursor: pointer;
356
+ transition: background 0.2s, color 0.2s;
357
+ text-decoration: none;
358
+ flex-shrink: 0;
359
+ }
360
+
361
+ :global(.ic-icon-btn:hover) {
362
+ background: var(--ic-border);
363
+ color: var(--ic-text);
364
+ }
365
+
366
+ :global(.ic-download-btn) {
367
+ background: var(--ic-accent);
368
+ color: var(--ic-bg);
369
+ }
370
+
371
+ :global(.ic-download-btn:hover) {
372
+ background: var(--ic-accent-dark);
373
+ color: var(--ic-bg);
374
+ }
375
+
376
+ :global(.ic-inline-editor) {
377
+ grid-column: 1 / -1;
378
+ background: var(--ic-bg-muted);
379
+ border-radius: 0.75rem;
380
+ padding: 1rem 1.25rem;
381
+ margin-top: 0.25rem;
382
+ display: flex;
383
+ justify-content: space-between;
384
+ align-items: center;
385
+ gap: 1rem;
386
+ border: 1px solid var(--ic-border);
387
+ animation: ic-slide-down 0.2s ease-out;
388
+ }
389
+
390
+ @keyframes ic-slide-down {
391
+ from {
392
+ opacity: 0;
393
+ transform: translateY(-4px);
394
+ }
395
+ to {
396
+ opacity: 1;
397
+ transform: translateY(0);
398
+ }
399
+ }
400
+
401
+ :global(.ic-editor-controls) {
402
+ display: flex;
403
+ gap: 1.5rem;
404
+ flex-wrap: wrap;
405
+ }
406
+
407
+ :global(.ic-editor-group) {
408
+ display: flex;
409
+ flex-direction: column;
410
+ gap: 0.25rem;
411
+ font-size: 0.85rem;
412
+ font-weight: 600;
413
+ color: var(--ic-text-muted);
414
+ }
415
+
416
+ :global(.ic-editor-group input[type="range"]) {
417
+ accent-color: var(--ic-accent);
418
+ }
419
+
420
+ :global(.ic-editor-group input[type="number"]) {
421
+ padding: 0.25rem 0.5rem;
422
+ border: 1px solid var(--ic-border);
423
+ border-radius: 0.375rem;
424
+ font-size: 0.85rem;
425
+ background: var(--ic-bg);
426
+ color: var(--ic-text);
427
+ }
428
+
429
+ :global(.ic-editor-close) {
430
+ background: var(--ic-border);
431
+ border: none;
432
+ padding: 0.4rem 0.875rem;
433
+ border-radius: 0.375rem;
434
+ font-weight: 600;
435
+ font-size: 0.85rem;
436
+ cursor: pointer;
437
+ transition: background 0.2s;
438
+ color: var(--ic-text-muted);
439
+ white-space: nowrap;
440
+ }
441
+
442
+ :global(.ic-editor-close:hover) {
443
+ background: var(--ic-border);
444
+ }
445
+
446
+ :global(.ic-global-actions) {
447
+ margin-top: 1.5rem;
448
+ display: flex;
449
+ justify-content: center;
450
+ }
451
+
452
+ :global(.ic-primary-btn) {
453
+ background: var(--ic-text);
454
+ color: var(--ic-bg);
455
+ border: none;
456
+ padding: 1rem 3rem;
457
+ border-radius: 9999px;
458
+ font-weight: 700;
459
+ font-size: 1.1rem;
460
+ cursor: pointer;
461
+ transition: background 0.2s, transform 0.1s;
462
+ }
463
+
464
+ :global(.ic-primary-btn:hover) {
465
+ background: var(--ic-text-muted);
466
+ }
467
+
468
+ :global(.ic-primary-btn:active) {
469
+ transform: scale(0.98);
470
+ }
471
+
472
+ @media (max-width: 600px) {
473
+ .ic-file-item {
474
+ grid-template-columns: 1fr;
475
+ justify-items: center;
476
+ text-align: center;
477
+ }
478
+
479
+ .ic-preview-col {
480
+ flex-direction: column;
481
+ }
482
+
483
+ .ic-arrow-col {
484
+ transform: rotate(90deg);
485
+ }
486
+
487
+ .ic-result-col {
488
+ width: 100%;
489
+ justify-content: space-around;
490
+ }
491
+
492
+ .ic-global-settings {
493
+ flex-direction: column;
494
+ align-items: flex-start;
495
+ }
496
+ }