pulp-image 0.1.4 → 0.1.6
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.
- package/README.md +0 -1
- package/package.json +2 -2
- package/ui/styles.css +55 -49
package/README.md
CHANGED
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
|
|
3
3
|
A powerful, safety-first CLI tool for processing images with resize, format conversion, and optimization.
|
|
4
4
|
|
|
5
|
-
|
|
6
5
|
|
|
7
6
|
|
|
8
7
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "pulp-image",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.6",
|
|
4
4
|
"description": "A CLI tool for processing images with resize, format conversion, and optimization",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "bin/pulp.js",
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
],
|
|
20
20
|
"author": "Rebellion Geeks",
|
|
21
21
|
"license": "MIT",
|
|
22
|
-
"homepage": "https://
|
|
22
|
+
"homepage": "https://pulp.run",
|
|
23
23
|
"repository": {
|
|
24
24
|
"type": "git",
|
|
25
25
|
"url": "git+https://github.com/rebelliongeeks/pulp-image.git"
|
package/ui/styles.css
CHANGED
|
@@ -1,32 +1,38 @@
|
|
|
1
1
|
/* Citrus/Clementine Pulp Inspired Design - Cute but Clean */
|
|
2
2
|
|
|
3
3
|
:root {
|
|
4
|
+
/* Citrus/Orange Theme - Matching Website Colors */
|
|
4
5
|
--orange-primary: #ff8c42;
|
|
5
6
|
--orange-light: #ffb366;
|
|
6
|
-
--orange-dark: #
|
|
7
|
-
--orange-
|
|
8
|
-
--orange-
|
|
7
|
+
--orange-dark: #d65a1a; /* Darkened for better contrast with white text */
|
|
8
|
+
--orange-deep: #b84a12; /* Even darker for buttons */
|
|
9
|
+
--orange-text: #c24e10; /* 4.5:1 contrast on white - WCAG AA compliant */
|
|
10
|
+
--orange-text-hover: #a33f0a; /* Darker for hover states */
|
|
11
|
+
--orange-bg: #fff8f0;
|
|
12
|
+
--orange-bg-light: #fffbf7;
|
|
9
13
|
--orange-accent: #ffa366;
|
|
10
14
|
|
|
11
15
|
--yellow-light: #ffe6cc;
|
|
12
16
|
--yellow-bg: #fff9f0;
|
|
13
17
|
|
|
14
|
-
|
|
15
|
-
--text-
|
|
16
|
-
--text-
|
|
18
|
+
/* Text Colors - WCAG AA compliant on light backgrounds */
|
|
19
|
+
--text-primary: #2d2722; /* 12.5:1 on white */
|
|
20
|
+
--text-secondary: #5a5048; /* 6.5:1 on white */
|
|
21
|
+
--text-muted: #6e635a; /* 5.0:1 on white */
|
|
17
22
|
|
|
18
|
-
--border-color: #
|
|
23
|
+
--border-color: #ffe4cc;
|
|
19
24
|
--border-radius: 8px;
|
|
20
25
|
--border-radius-lg: 12px;
|
|
21
26
|
|
|
22
|
-
--shadow-sm: 0 2px 4px rgba(
|
|
23
|
-
--shadow-md: 0 4px
|
|
24
|
-
--shadow-lg: 0 8px
|
|
27
|
+
--shadow-sm: 0 2px 4px rgba(45, 39, 34, 0.04);
|
|
28
|
+
--shadow-md: 0 4px 12px rgba(45, 39, 34, 0.08);
|
|
29
|
+
--shadow-lg: 0 8px 24px rgba(45, 39, 34, 0.12);
|
|
25
30
|
|
|
26
|
-
|
|
27
|
-
--
|
|
28
|
-
--
|
|
29
|
-
--
|
|
31
|
+
/* Semantic Colors - WCAG AA compliant on white backgrounds */
|
|
32
|
+
--success: #2e7d32; /* Darkened green - 5.6:1 contrast */
|
|
33
|
+
--warning: #e65100; /* Darkened orange - 4.6:1 contrast */
|
|
34
|
+
--danger: #c62828; /* Darkened red - 5.9:1 contrast */
|
|
35
|
+
--info: #1565c0; /* Darkened blue - 5.8:1 contrast */
|
|
30
36
|
}
|
|
31
37
|
|
|
32
38
|
* {
|
|
@@ -55,7 +61,7 @@ body {
|
|
|
55
61
|
|
|
56
62
|
/* Header */
|
|
57
63
|
.header {
|
|
58
|
-
background: linear-gradient(135deg,
|
|
64
|
+
background: linear-gradient(135deg, var(--orange-dark) 0%, var(--orange-deep) 100%);
|
|
59
65
|
color: white;
|
|
60
66
|
padding: 1.5rem 2rem;
|
|
61
67
|
text-align: center;
|
|
@@ -108,13 +114,13 @@ body {
|
|
|
108
114
|
|
|
109
115
|
.brand-subtitle .version {
|
|
110
116
|
font-size: 0.7rem;
|
|
111
|
-
|
|
112
|
-
font-weight: 400;
|
|
117
|
+
font-weight: 500;
|
|
113
118
|
font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
|
|
114
|
-
background: rgba(255, 255, 255, 0.
|
|
115
|
-
padding: 0.
|
|
116
|
-
border-radius:
|
|
119
|
+
background: rgba(255, 255, 255, 0.25);
|
|
120
|
+
padding: 0.2rem 0.5rem;
|
|
121
|
+
border-radius: 4px;
|
|
117
122
|
margin-left: 0.25rem;
|
|
123
|
+
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
118
124
|
}
|
|
119
125
|
|
|
120
126
|
/* Tabs */
|
|
@@ -139,12 +145,12 @@ body {
|
|
|
139
145
|
|
|
140
146
|
.tab-button:hover {
|
|
141
147
|
background: rgba(255, 140, 66, 0.1);
|
|
142
|
-
color: var(--orange-
|
|
148
|
+
color: var(--orange-text);
|
|
143
149
|
}
|
|
144
150
|
|
|
145
151
|
.tab-button.active {
|
|
146
|
-
color: var(--orange-
|
|
147
|
-
border-bottom-color: var(--orange-
|
|
152
|
+
color: var(--orange-text);
|
|
153
|
+
border-bottom-color: var(--orange-dark);
|
|
148
154
|
background: white;
|
|
149
155
|
}
|
|
150
156
|
|
|
@@ -218,7 +224,7 @@ body {
|
|
|
218
224
|
.folder-open-fallback-path {
|
|
219
225
|
font-size: 0.85rem;
|
|
220
226
|
font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
|
|
221
|
-
color: var(--orange-
|
|
227
|
+
color: var(--orange-text);
|
|
222
228
|
background: white;
|
|
223
229
|
padding: 0.5rem 0.75rem;
|
|
224
230
|
border-radius: 4px;
|
|
@@ -240,7 +246,7 @@ body {
|
|
|
240
246
|
|
|
241
247
|
.preview-text {
|
|
242
248
|
font-size: 0.85rem;
|
|
243
|
-
color: var(--orange-
|
|
249
|
+
color: var(--orange-text);
|
|
244
250
|
font-family: 'Courier New', monospace;
|
|
245
251
|
padding: 0.5rem;
|
|
246
252
|
background: var(--orange-bg);
|
|
@@ -249,7 +255,7 @@ body {
|
|
|
249
255
|
}
|
|
250
256
|
|
|
251
257
|
.value-display {
|
|
252
|
-
color: var(--orange-
|
|
258
|
+
color: var(--orange-text);
|
|
253
259
|
font-weight: 600;
|
|
254
260
|
margin-left: 0.5rem;
|
|
255
261
|
}
|
|
@@ -313,7 +319,7 @@ body {
|
|
|
313
319
|
|
|
314
320
|
.toggle-file-list-btn {
|
|
315
321
|
padding: 0.25rem 0.75rem;
|
|
316
|
-
background: var(--orange-
|
|
322
|
+
background: var(--orange-dark);
|
|
317
323
|
color: white;
|
|
318
324
|
border: none;
|
|
319
325
|
border-radius: 4px;
|
|
@@ -323,7 +329,7 @@ body {
|
|
|
323
329
|
}
|
|
324
330
|
|
|
325
331
|
.toggle-file-list-btn:hover {
|
|
326
|
-
background: var(--orange-
|
|
332
|
+
background: var(--orange-deep);
|
|
327
333
|
}
|
|
328
334
|
|
|
329
335
|
.toggle-file-list-btn-secondary {
|
|
@@ -403,12 +409,12 @@ body {
|
|
|
403
409
|
.advanced-options-summary {
|
|
404
410
|
cursor: pointer;
|
|
405
411
|
font-weight: 600;
|
|
406
|
-
color: var(--orange-
|
|
412
|
+
color: var(--orange-text);
|
|
407
413
|
user-select: none;
|
|
408
414
|
}
|
|
409
415
|
|
|
410
416
|
.advanced-options-summary:hover {
|
|
411
|
-
color: var(--orange-
|
|
417
|
+
color: var(--orange-text-hover);
|
|
412
418
|
}
|
|
413
419
|
|
|
414
420
|
.advanced-options-content {
|
|
@@ -462,14 +468,14 @@ body {
|
|
|
462
468
|
width: 20px;
|
|
463
469
|
height: 20px;
|
|
464
470
|
border-radius: 50%;
|
|
465
|
-
background: var(--orange-
|
|
471
|
+
background: var(--orange-dark);
|
|
466
472
|
cursor: pointer;
|
|
467
473
|
box-shadow: var(--shadow-sm);
|
|
468
474
|
transition: all 0.2s;
|
|
469
475
|
}
|
|
470
476
|
|
|
471
477
|
.slider-input::-webkit-slider-thumb:hover {
|
|
472
|
-
background: var(--orange-
|
|
478
|
+
background: var(--orange-deep);
|
|
473
479
|
transform: scale(1.1);
|
|
474
480
|
}
|
|
475
481
|
|
|
@@ -477,7 +483,7 @@ body {
|
|
|
477
483
|
width: 20px;
|
|
478
484
|
height: 20px;
|
|
479
485
|
border-radius: 50%;
|
|
480
|
-
background: var(--orange-
|
|
486
|
+
background: var(--orange-dark);
|
|
481
487
|
cursor: pointer;
|
|
482
488
|
border: none;
|
|
483
489
|
box-shadow: var(--shadow-sm);
|
|
@@ -523,7 +529,7 @@ body {
|
|
|
523
529
|
}
|
|
524
530
|
|
|
525
531
|
.toggle-input:checked + .toggle-slider {
|
|
526
|
-
background: var(--orange-
|
|
532
|
+
background: var(--orange-dark);
|
|
527
533
|
}
|
|
528
534
|
|
|
529
535
|
.toggle-input:checked + .toggle-slider::before {
|
|
@@ -576,7 +582,7 @@ body {
|
|
|
576
582
|
width: 18px;
|
|
577
583
|
height: 18px;
|
|
578
584
|
cursor: pointer;
|
|
579
|
-
accent-color: var(--orange-
|
|
585
|
+
accent-color: var(--orange-dark);
|
|
580
586
|
}
|
|
581
587
|
|
|
582
588
|
/* Color Picker */
|
|
@@ -625,13 +631,13 @@ body {
|
|
|
625
631
|
}
|
|
626
632
|
|
|
627
633
|
.button-primary {
|
|
628
|
-
background: var(--orange-
|
|
634
|
+
background: var(--orange-dark);
|
|
629
635
|
color: white;
|
|
630
636
|
flex: 1;
|
|
631
637
|
}
|
|
632
638
|
|
|
633
639
|
.button-primary:hover:not(:disabled) {
|
|
634
|
-
background: var(--orange-
|
|
640
|
+
background: var(--orange-deep);
|
|
635
641
|
box-shadow: var(--shadow-md);
|
|
636
642
|
transform: translateY(-1px);
|
|
637
643
|
}
|
|
@@ -643,8 +649,8 @@ body {
|
|
|
643
649
|
|
|
644
650
|
.button-secondary {
|
|
645
651
|
background: white;
|
|
646
|
-
color: var(--orange-
|
|
647
|
-
border: 2px solid var(--orange-
|
|
652
|
+
color: var(--orange-text);
|
|
653
|
+
border: 2px solid var(--orange-dark);
|
|
648
654
|
}
|
|
649
655
|
|
|
650
656
|
.button-secondary:hover:not(:disabled) {
|
|
@@ -664,7 +670,7 @@ body {
|
|
|
664
670
|
}
|
|
665
671
|
|
|
666
672
|
.results-title {
|
|
667
|
-
color: var(--orange-
|
|
673
|
+
color: var(--orange-text);
|
|
668
674
|
margin-bottom: 1.5rem;
|
|
669
675
|
}
|
|
670
676
|
|
|
@@ -673,7 +679,7 @@ body {
|
|
|
673
679
|
background: var(--orange-bg-light);
|
|
674
680
|
border-radius: var(--border-radius);
|
|
675
681
|
margin-bottom: 1rem;
|
|
676
|
-
border-left: 4px solid var(--orange-
|
|
682
|
+
border-left: 4px solid var(--orange-dark);
|
|
677
683
|
}
|
|
678
684
|
|
|
679
685
|
.result-item.success {
|
|
@@ -748,11 +754,11 @@ body {
|
|
|
748
754
|
padding: 1.5rem;
|
|
749
755
|
background: linear-gradient(135deg, var(--orange-bg) 0%, var(--yellow-light) 100%);
|
|
750
756
|
border-radius: var(--border-radius-lg);
|
|
751
|
-
border: 2px solid var(--orange-
|
|
757
|
+
border: 2px solid var(--orange-dark);
|
|
752
758
|
}
|
|
753
759
|
|
|
754
760
|
.result-summary-title {
|
|
755
|
-
color: var(--orange-
|
|
761
|
+
color: var(--orange-text);
|
|
756
762
|
margin-bottom: 1rem;
|
|
757
763
|
font-size: 1.25rem;
|
|
758
764
|
}
|
|
@@ -774,7 +780,7 @@ body {
|
|
|
774
780
|
.summary-stat-value {
|
|
775
781
|
font-size: 1.5rem;
|
|
776
782
|
font-weight: 700;
|
|
777
|
-
color: var(--orange-
|
|
783
|
+
color: var(--orange-text);
|
|
778
784
|
}
|
|
779
785
|
|
|
780
786
|
.summary-stat-label {
|
|
@@ -789,12 +795,12 @@ body {
|
|
|
789
795
|
}
|
|
790
796
|
|
|
791
797
|
.help-content h2 {
|
|
792
|
-
color: var(--orange-
|
|
798
|
+
color: var(--orange-text);
|
|
793
799
|
margin-bottom: 1rem;
|
|
794
800
|
}
|
|
795
801
|
|
|
796
802
|
.help-content h3 {
|
|
797
|
-
color: var(--orange-
|
|
803
|
+
color: var(--orange-text-hover);
|
|
798
804
|
margin-top: 2rem;
|
|
799
805
|
margin-bottom: 1rem;
|
|
800
806
|
}
|
|
@@ -824,7 +830,7 @@ body {
|
|
|
824
830
|
padding: 0.25rem 0.5rem;
|
|
825
831
|
border-radius: 4px;
|
|
826
832
|
font-family: 'Courier New', monospace;
|
|
827
|
-
color: var(--orange-
|
|
833
|
+
color: var(--orange-text);
|
|
828
834
|
}
|
|
829
835
|
|
|
830
836
|
.help-examples {
|
|
@@ -836,13 +842,13 @@ body {
|
|
|
836
842
|
padding: 1rem;
|
|
837
843
|
background: var(--orange-bg-light);
|
|
838
844
|
border-radius: var(--border-radius);
|
|
839
|
-
border-left: 4px solid var(--orange-
|
|
845
|
+
border-left: 4px solid var(--orange-dark);
|
|
840
846
|
}
|
|
841
847
|
|
|
842
848
|
.example-block code {
|
|
843
849
|
display: block;
|
|
844
850
|
font-family: 'Courier New', monospace;
|
|
845
|
-
color: var(--orange-
|
|
851
|
+
color: var(--orange-text);
|
|
846
852
|
font-weight: 600;
|
|
847
853
|
margin-bottom: 0.5rem;
|
|
848
854
|
}
|