@jjlmoya/utils-diy 1.9.0 → 1.11.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 (28) hide show
  1. package/package.json +5 -3
  2. package/scripts/postinstall.mjs +27 -0
  3. package/src/tool/balusterCalculator/baluster-calculator.css +320 -0
  4. package/src/tool/balusterCalculator/component.astro +0 -322
  5. package/src/tool/clayCalculator/clay-shrinkage-calculator.css +530 -0
  6. package/src/tool/clayCalculator/component.astro +0 -532
  7. package/src/tool/concreteCalculator/component.astro +0 -705
  8. package/src/tool/concreteCalculator/concrete-mortar-calculator.css +703 -0
  9. package/src/tool/cutOptimizer/component.astro +0 -477
  10. package/src/tool/cutOptimizer/cut-optimizer.css +475 -0
  11. package/src/tool/drillCalculator/component.astro +0 -815
  12. package/src/tool/drillCalculator/drill-rpm-calculator.css +813 -0
  13. package/src/tool/drillSharpener/component.astro +0 -393
  14. package/src/tool/drillSharpener/drill-sharpening-master.css +391 -0
  15. package/src/tool/epoxyCalculator/component.astro +0 -571
  16. package/src/tool/epoxyCalculator/epoxy-resin-calculator.css +569 -0
  17. package/src/tool/furnitureFit/component.astro +0 -345
  18. package/src/tool/furnitureFit/furniture-fit-calculator.css +343 -0
  19. package/src/tool/mortarCalculator/component.astro +0 -620
  20. package/src/tool/mortarCalculator/lime-mortar-calculator.css +618 -0
  21. package/src/tool/passepartoutCalculator/component.astro +0 -518
  22. package/src/tool/passepartoutCalculator/passepartout-calculator.css +516 -0
  23. package/src/tool/stairCalculator/component.astro +0 -480
  24. package/src/tool/stairCalculator/stair-calculator.css +478 -0
  25. package/src/tool/thermalExpansionCalculator/component.astro +0 -490
  26. package/src/tool/thermalExpansionCalculator/thermal-expansion-calculator.css +488 -0
  27. package/src/tool/voltageDropCalculator/component.astro +0 -729
  28. package/src/tool/voltageDropCalculator/voltage-drop-calculator.css +727 -0
@@ -0,0 +1,530 @@
1
+ .cc-root {
2
+ width: 100%;
3
+ max-width: 64rem;
4
+ margin: 0 auto;
5
+ background: linear-gradient(135deg, #fffbeb, #fff7ed);
6
+ border-radius: 1.5rem;
7
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
8
+ overflow: hidden;
9
+ border: 1px solid #fde68a;
10
+ }
11
+
12
+ .cc-grid {
13
+ display: grid;
14
+ grid-template-columns: 1fr;
15
+ }
16
+
17
+ @media (min-width: 1024px) {
18
+ .cc-grid {
19
+ grid-template-columns: 1fr 1fr;
20
+ }
21
+ }
22
+
23
+ .cc-panel-left {
24
+ padding: 2rem;
25
+ display: flex;
26
+ flex-direction: column;
27
+ gap: 2rem;
28
+ }
29
+
30
+ @media (min-width: 768px) {
31
+ .cc-panel-left {
32
+ padding: 3rem;
33
+ }
34
+ }
35
+
36
+ .cc-controls {
37
+ display: flex;
38
+ flex-direction: column;
39
+ gap: 1.5rem;
40
+ }
41
+
42
+ .cc-field {
43
+ display: flex;
44
+ flex-direction: column;
45
+ gap: 0.75rem;
46
+ }
47
+
48
+ .cc-label {
49
+ font-size: 0.75rem;
50
+ font-weight: 700;
51
+ text-transform: uppercase;
52
+ letter-spacing: 0.08em;
53
+ color: #92400e;
54
+ }
55
+
56
+ .cc-input {
57
+ width: 100%;
58
+ background: #fff;
59
+ border: 2px solid #fcd34d;
60
+ border-radius: 0.75rem;
61
+ padding: 0.75rem 1rem;
62
+ font-size: 1.5rem;
63
+ font-weight: 700;
64
+ color: #1e293b;
65
+ outline: none;
66
+ transition: border-color 0.2s, box-shadow 0.2s;
67
+ box-sizing: border-box;
68
+ }
69
+
70
+ .cc-input:focus {
71
+ border-color: #f59e0b;
72
+ box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
73
+ }
74
+
75
+ .cc-slider-row {
76
+ display: flex;
77
+ align-items: center;
78
+ gap: 1rem;
79
+ }
80
+
81
+ .cc-slider {
82
+ flex: 1;
83
+ height: 0.75rem;
84
+ background: #fde68a;
85
+ border-radius: 999px;
86
+ appearance: none;
87
+ cursor: pointer;
88
+ accent-color: #d97706;
89
+ outline: none;
90
+ }
91
+
92
+ .cc-slider::-webkit-slider-thumb {
93
+ appearance: none;
94
+ width: 20px;
95
+ height: 20px;
96
+ background: #d97706;
97
+ border-radius: 50%;
98
+ cursor: pointer;
99
+ border: 3px solid #fff;
100
+ box-shadow: 0 0 8px rgba(217, 119, 6, 0.4);
101
+ }
102
+
103
+ .cc-slider-val {
104
+ font-size: 1.875rem;
105
+ font-weight: 900;
106
+ color: #b45309;
107
+ width: 5rem;
108
+ text-align: right;
109
+ flex-shrink: 0;
110
+ }
111
+
112
+ .cc-slider-labels {
113
+ display: flex;
114
+ justify-content: space-between;
115
+ font-size: 0.7rem;
116
+ color: #d97706;
117
+ }
118
+
119
+ .cc-presets {
120
+ display: grid;
121
+ grid-template-columns: 1fr 1fr;
122
+ gap: 0.75rem;
123
+ padding-top: 0.5rem;
124
+ }
125
+
126
+ .cc-preset {
127
+ padding: 0.5rem 1rem;
128
+ border-radius: 0.5rem;
129
+ border: 2px solid;
130
+ font-weight: 700;
131
+ font-size: 0.875rem;
132
+ cursor: pointer;
133
+ transition: background 0.15s;
134
+ }
135
+
136
+ .cc-preset-terracota {
137
+ background: #ffedd5;
138
+ border-color: #fdba74;
139
+ color: #9a3412;
140
+ }
141
+
142
+ .cc-preset-terracota:hover {
143
+ background: #fed7aa;
144
+ }
145
+
146
+ .cc-preset-gres {
147
+ background: #fef3c7;
148
+ border-color: #fcd34d;
149
+ color: #92400e;
150
+ }
151
+
152
+ .cc-preset-gres:hover {
153
+ background: #fde68a;
154
+ }
155
+
156
+ .cc-preset-porcelana {
157
+ grid-column: span 2;
158
+ background: #fee2e2;
159
+ border-color: #fca5a5;
160
+ color: #991b1b;
161
+ }
162
+
163
+ .cc-preset-porcelana:hover {
164
+ background: #fecaca;
165
+ }
166
+
167
+ .cc-result-box {
168
+ background: #fff;
169
+ border-radius: 1rem;
170
+ padding: 1.5rem;
171
+ border: 2px solid #fcd34d;
172
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
173
+ }
174
+
175
+ .cc-result-title {
176
+ font-size: 0.7rem;
177
+ font-weight: 700;
178
+ text-transform: uppercase;
179
+ letter-spacing: 0.08em;
180
+ color: #92400e;
181
+ margin: 0 0 1rem;
182
+ }
183
+
184
+ .cc-result-rows {
185
+ display: flex;
186
+ flex-direction: column;
187
+ gap: 0.75rem;
188
+ }
189
+
190
+ .cc-result-row {
191
+ display: flex;
192
+ justify-content: space-between;
193
+ align-items: baseline;
194
+ }
195
+
196
+ .cc-result-label {
197
+ color: #64748b;
198
+ font-size: 0.9rem;
199
+ }
200
+
201
+ .cc-result-value {
202
+ font-weight: 900;
203
+ }
204
+
205
+ .cc-value-final {
206
+ font-size: 1.875rem;
207
+ color: #059669;
208
+ }
209
+
210
+ .cc-value-loss {
211
+ font-size: 1.125rem;
212
+ color: #dc2626;
213
+ }
214
+
215
+ .cc-tip {
216
+ background: #fef3c7;
217
+ border-radius: 0.75rem;
218
+ padding: 1rem;
219
+ border: 1px solid #fde68a;
220
+ display: flex;
221
+ align-items: flex-start;
222
+ gap: 0.5rem;
223
+ font-size: 0.75rem;
224
+ color: #92400e;
225
+ line-height: 1.5;
226
+ }
227
+
228
+ .cc-tip-icon {
229
+ flex-shrink: 0;
230
+ margin-top: 1px;
231
+ }
232
+
233
+ .cc-panel-right {
234
+ background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
235
+ padding: 2rem;
236
+ display: flex;
237
+ align-items: center;
238
+ justify-content: center;
239
+ position: relative;
240
+ overflow: hidden;
241
+ min-height: 400px;
242
+ }
243
+
244
+ @media (min-width: 768px) {
245
+ .cc-panel-right {
246
+ padding: 3rem;
247
+ }
248
+ }
249
+
250
+ .cc-blob {
251
+ position: absolute;
252
+ border-radius: 50%;
253
+ filter: blur(60px);
254
+ opacity: 0.12;
255
+ pointer-events: none;
256
+ }
257
+
258
+ .cc-blob-top {
259
+ top: 2.5rem;
260
+ left: 2.5rem;
261
+ width: 8rem;
262
+ height: 8rem;
263
+ background: #f59e0b;
264
+ }
265
+
266
+ .cc-blob-bottom {
267
+ bottom: 2.5rem;
268
+ right: 2.5rem;
269
+ width: 10rem;
270
+ height: 10rem;
271
+ background: #f97316;
272
+ }
273
+
274
+ .cc-viz-wrapper {
275
+ position: relative;
276
+ z-index: 1;
277
+ width: 100%;
278
+ max-width: 24rem;
279
+ }
280
+
281
+ .cc-viz-aspect {
282
+ aspect-ratio: 1 / 1;
283
+ position: relative;
284
+ display: flex;
285
+ align-items: center;
286
+ justify-content: center;
287
+ }
288
+
289
+ .cc-circle-initial {
290
+ position: absolute;
291
+ border-radius: 50%;
292
+ border: 4px dashed #fbbf24;
293
+ background: rgba(253, 230, 138, 0.2);
294
+ transition: width 0.7s ease, height 0.7s ease;
295
+ display: flex;
296
+ align-items: center;
297
+ justify-content: center;
298
+ width: 100%;
299
+ height: 100%;
300
+ }
301
+
302
+ .cc-badge-initial {
303
+ position: absolute;
304
+ top: -2rem;
305
+ left: 50%;
306
+ transform: translateX(-50%);
307
+ background: #d97706;
308
+ color: #fff;
309
+ padding: 0.25rem 0.75rem;
310
+ border-radius: 999px;
311
+ font-size: 0.75rem;
312
+ font-weight: 700;
313
+ white-space: nowrap;
314
+ }
315
+
316
+ .cc-circle-final {
317
+ position: absolute;
318
+ border-radius: 50%;
319
+ border: 4px solid #059669;
320
+ background: rgba(16, 185, 129, 0.3);
321
+ transition: width 0.7s ease, height 0.7s ease;
322
+ display: flex;
323
+ align-items: center;
324
+ justify-content: center;
325
+ box-shadow: 0 10px 40px rgba(5, 150, 105, 0.3);
326
+ width: 88%;
327
+ height: 88%;
328
+ }
329
+
330
+ .cc-circle-inner {
331
+ text-align: center;
332
+ }
333
+
334
+ .cc-viz-number {
335
+ font-size: 3rem;
336
+ font-weight: 900;
337
+ color: #065f46;
338
+ line-height: 1;
339
+ margin-bottom: 0.25rem;
340
+ }
341
+
342
+ .cc-viz-unit {
343
+ font-size: 0.875rem;
344
+ font-weight: 700;
345
+ color: #047857;
346
+ }
347
+
348
+ .cc-badge-loss {
349
+ position: absolute;
350
+ bottom: -3rem;
351
+ left: 50%;
352
+ transform: translateX(-50%);
353
+ background: #dc2626;
354
+ color: #fff;
355
+ padding: 0.5rem 1rem;
356
+ border-radius: 999px;
357
+ font-size: 0.875rem;
358
+ font-weight: 700;
359
+ box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
360
+ white-space: nowrap;
361
+ }
362
+
363
+ .cc-areas {
364
+ margin-top: 4.5rem;
365
+ display: grid;
366
+ grid-template-columns: 1fr 1fr;
367
+ gap: 1rem;
368
+ text-align: center;
369
+ }
370
+
371
+ .cc-area-item {
372
+ background: rgba(255, 255, 255, 0.6);
373
+ border-radius: 0.75rem;
374
+ padding: 0.75rem;
375
+ backdrop-filter: blur(4px);
376
+ }
377
+
378
+ .cc-area-label {
379
+ font-size: 0.7rem;
380
+ color: #475569;
381
+ margin-bottom: 0.25rem;
382
+ }
383
+
384
+ .cc-area-value {
385
+ font-size: 1rem;
386
+ font-weight: 700;
387
+ }
388
+
389
+ .cc-area-initial {
390
+ color: #b45309;
391
+ }
392
+
393
+ .cc-area-final {
394
+ color: #047857;
395
+ }
396
+
397
+ .theme-dark .cc-root {
398
+ background: linear-gradient(135deg, #0f172a, #1e293b);
399
+ border-color: #334155;
400
+ }
401
+
402
+ .theme-dark .cc-label {
403
+ color: #fbbf24;
404
+ }
405
+
406
+ .theme-dark .cc-input {
407
+ background: #1e293b;
408
+ border-color: #b45309;
409
+ color: #f8fafc;
410
+ }
411
+
412
+ .theme-dark .cc-input:focus {
413
+ border-color: #f59e0b;
414
+ box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
415
+ }
416
+
417
+ .theme-dark .cc-slider {
418
+ background: rgba(180, 83, 9, 0.3);
419
+ }
420
+
421
+ .theme-dark .cc-slider-val {
422
+ color: #fbbf24;
423
+ }
424
+
425
+ .theme-dark .cc-slider-labels {
426
+ color: #d97706;
427
+ }
428
+
429
+ .theme-dark .cc-preset-terracota {
430
+ background: rgba(249, 115, 22, 0.15);
431
+ border-color: #c2410c;
432
+ color: #fb923c;
433
+ }
434
+
435
+ .theme-dark .cc-preset-terracota:hover {
436
+ background: rgba(249, 115, 22, 0.25);
437
+ }
438
+
439
+ .theme-dark .cc-preset-gres {
440
+ background: rgba(245, 158, 11, 0.15);
441
+ border-color: #b45309;
442
+ color: #fbbf24;
443
+ }
444
+
445
+ .theme-dark .cc-preset-gres:hover {
446
+ background: rgba(245, 158, 11, 0.25);
447
+ }
448
+
449
+ .theme-dark .cc-preset-porcelana {
450
+ background: rgba(220, 38, 38, 0.15);
451
+ border-color: #991b1b;
452
+ color: #f87171;
453
+ }
454
+
455
+ .theme-dark .cc-preset-porcelana:hover {
456
+ background: rgba(220, 38, 38, 0.25);
457
+ }
458
+
459
+ .theme-dark .cc-result-box {
460
+ background: #1e293b;
461
+ border-color: #b45309;
462
+ }
463
+
464
+ .theme-dark .cc-result-title {
465
+ color: #fbbf24;
466
+ }
467
+
468
+ .theme-dark .cc-result-label {
469
+ color: #94a3b8;
470
+ }
471
+
472
+ .theme-dark .cc-value-final {
473
+ color: #34d399;
474
+ }
475
+
476
+ .theme-dark .cc-value-loss {
477
+ color: #f87171;
478
+ }
479
+
480
+ .theme-dark .cc-tip {
481
+ background: rgba(180, 83, 9, 0.15);
482
+ border-color: rgba(180, 83, 9, 0.4);
483
+ color: #fbbf24;
484
+ }
485
+
486
+ .theme-dark .cc-panel-right {
487
+ background: linear-gradient(135deg, #1e293b, #0f172a);
488
+ }
489
+
490
+ .theme-dark .cc-circle-initial {
491
+ border-color: #b45309;
492
+ background: rgba(180, 83, 9, 0.1);
493
+ }
494
+
495
+ .theme-dark .cc-badge-initial {
496
+ background: #d97706;
497
+ }
498
+
499
+ .theme-dark .cc-circle-final {
500
+ border-color: #10b981;
501
+ background: rgba(16, 185, 129, 0.2);
502
+ }
503
+
504
+ .theme-dark .cc-viz-number {
505
+ color: #6ee7b7;
506
+ }
507
+
508
+ .theme-dark .cc-viz-unit {
509
+ color: #34d399;
510
+ }
511
+
512
+ .theme-dark .cc-badge-loss {
513
+ background: #ef4444;
514
+ }
515
+
516
+ .theme-dark .cc-area-item {
517
+ background: rgba(30, 41, 59, 0.6);
518
+ }
519
+
520
+ .theme-dark .cc-area-label {
521
+ color: #94a3b8;
522
+ }
523
+
524
+ .theme-dark .cc-area-initial {
525
+ color: #fbbf24;
526
+ }
527
+
528
+ .theme-dark .cc-area-final {
529
+ color: #34d399;
530
+ }