@jjlmoya/utils-diy 1.9.0 → 1.10.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,569 @@
1
+ .ec-root {
2
+ width: 100%;
3
+ max-width: 72rem;
4
+ margin: 0 auto;
5
+ }
6
+
7
+ .ec-grid {
8
+ display: grid;
9
+ grid-template-columns: 1fr;
10
+ gap: 2rem;
11
+ }
12
+
13
+ @media (min-width: 1024px) {
14
+ .ec-grid {
15
+ grid-template-columns: 7fr 5fr;
16
+ }
17
+ }
18
+
19
+ .ec-panel-left {
20
+ background: rgba(255, 255, 255, 0.7);
21
+ backdrop-filter: blur(12px);
22
+ border: 1px solid rgba(255, 255, 255, 0.4);
23
+ border-radius: 1.5rem;
24
+ padding: 1.5rem;
25
+ box-shadow: 0 8px 32px rgba(120, 60, 0, 0.06);
26
+ display: flex;
27
+ flex-direction: column;
28
+ gap: 1.5rem;
29
+ }
30
+
31
+ .ec-tabs {
32
+ display: flex;
33
+ gap: 0.375rem;
34
+ background: rgba(241, 245, 249, 0.5);
35
+ padding: 0.375rem;
36
+ border-radius: 1rem;
37
+ }
38
+
39
+ .ec-tab-btn {
40
+ flex: 1;
41
+ padding: 0.625rem 1rem;
42
+ border-radius: 0.75rem;
43
+ border: none;
44
+ background: transparent;
45
+ cursor: pointer;
46
+ font-size: 0.875rem;
47
+ font-weight: 600;
48
+ color: #64748b;
49
+ display: flex;
50
+ align-items: center;
51
+ justify-content: center;
52
+ gap: 0.5rem;
53
+ transition: all 0.2s;
54
+ }
55
+
56
+ .ec-tab-btn[data-ec-active="true"] {
57
+ background: #1e293b;
58
+ color: #fff;
59
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
60
+ }
61
+
62
+ .ec-tab-icon {
63
+ font-size: 1.25rem;
64
+ }
65
+
66
+ .ec-inputs-grid {
67
+ display: grid;
68
+ grid-template-columns: 1fr 1fr;
69
+ gap: 1.5rem;
70
+ }
71
+
72
+ .ec-input-group {
73
+ display: flex;
74
+ flex-direction: column;
75
+ gap: 0.5rem;
76
+ }
77
+
78
+ .ec-label {
79
+ font-size: 0.7rem;
80
+ font-weight: 700;
81
+ text-transform: uppercase;
82
+ letter-spacing: 0.08em;
83
+ color: #94a3b8;
84
+ display: block;
85
+ }
86
+
87
+ .ec-input {
88
+ width: 100%;
89
+ background: #fff;
90
+ border: 1px solid #e2e8f0;
91
+ border-radius: 0.75rem;
92
+ padding: 0.75rem 1rem;
93
+ color: #334155;
94
+ font-size: 1rem;
95
+ outline: none;
96
+ transition: border-color 0.2s, box-shadow 0.2s;
97
+ box-sizing: border-box;
98
+ }
99
+
100
+ .ec-input:focus {
101
+ border-color: #fbbf24;
102
+ box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.15);
103
+ }
104
+
105
+ .ec-input-sm {
106
+ padding: 0.5rem 0.75rem;
107
+ font-size: 0.875rem;
108
+ }
109
+
110
+ .ec-hidden {
111
+ display: none;
112
+ }
113
+
114
+ .ec-divider {
115
+ height: 1px;
116
+ background: #f1f5f9;
117
+ }
118
+
119
+ .ec-ratio-section {
120
+ display: flex;
121
+ flex-direction: column;
122
+ gap: 0.75rem;
123
+ }
124
+
125
+ .ec-ratio-header {
126
+ display: flex;
127
+ justify-content: space-between;
128
+ align-items: center;
129
+ }
130
+
131
+ .ec-ratio-badge {
132
+ font-size: 0.75rem;
133
+ font-weight: 700;
134
+ color: #d97706;
135
+ background: #fef3c7;
136
+ padding: 0.2rem 0.6rem;
137
+ border-radius: 0.4rem;
138
+ }
139
+
140
+ .ec-slider-wrapper {
141
+ display: flex;
142
+ flex-direction: column;
143
+ gap: 0.5rem;
144
+ }
145
+
146
+ .ec-slider-wrapper.ec-disabled {
147
+ opacity: 0.4;
148
+ pointer-events: none;
149
+ }
150
+
151
+ .ec-slider {
152
+ width: 100%;
153
+ height: 8px;
154
+ background: #e2e8f0;
155
+ border-radius: 999px;
156
+ appearance: none;
157
+ cursor: pointer;
158
+ accent-color: #f59e0b;
159
+ outline: none;
160
+ }
161
+
162
+ .ec-slider::-webkit-slider-thumb {
163
+ appearance: none;
164
+ width: 18px;
165
+ height: 18px;
166
+ background: #f59e0b;
167
+ border-radius: 50%;
168
+ cursor: pointer;
169
+ border: 3px solid #fff;
170
+ box-shadow: 0 0 6px rgba(245, 158, 11, 0.4);
171
+ }
172
+
173
+ .ec-ratio-marks {
174
+ display: flex;
175
+ justify-content: space-between;
176
+ font-size: 0.625rem;
177
+ color: #94a3b8;
178
+ }
179
+
180
+ .ec-custom-check-row {
181
+ display: flex;
182
+ align-items: center;
183
+ gap: 0.5rem;
184
+ font-size: 0.875rem;
185
+ color: #475569;
186
+ cursor: pointer;
187
+ }
188
+
189
+ .ec-checkbox {
190
+ width: 16px;
191
+ height: 16px;
192
+ accent-color: #f59e0b;
193
+ cursor: pointer;
194
+ flex-shrink: 0;
195
+ }
196
+
197
+ .ec-custom-grid {
198
+ display: grid;
199
+ grid-template-columns: 1fr 1fr;
200
+ gap: 1rem;
201
+ }
202
+
203
+ .ec-waste-row {
204
+ display: flex;
205
+ align-items: center;
206
+ justify-content: space-between;
207
+ background: #f8fafc;
208
+ padding: 1rem;
209
+ border-radius: 0.75rem;
210
+ border: 1px solid #f1f5f9;
211
+ }
212
+
213
+ .ec-waste-info {
214
+ display: flex;
215
+ align-items: center;
216
+ gap: 0.75rem;
217
+ }
218
+
219
+ .ec-waste-icon {
220
+ padding: 0.5rem;
221
+ background: #fff;
222
+ border-radius: 0.5rem;
223
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
224
+ color: #f59e0b;
225
+ font-size: 1.25rem;
226
+ display: flex;
227
+ }
228
+
229
+ .ec-waste-title {
230
+ font-size: 0.875rem;
231
+ font-weight: 600;
232
+ color: #334155;
233
+ margin: 0;
234
+ }
235
+
236
+ .ec-waste-desc {
237
+ font-size: 0.75rem;
238
+ color: #94a3b8;
239
+ margin: 0;
240
+ }
241
+
242
+ .ec-toggle {
243
+ position: relative;
244
+ display: inline-flex;
245
+ align-items: center;
246
+ cursor: pointer;
247
+ flex-shrink: 0;
248
+ }
249
+
250
+ .ec-toggle-input {
251
+ position: absolute;
252
+ opacity: 0;
253
+ width: 0;
254
+ height: 0;
255
+ }
256
+
257
+ .ec-toggle-track {
258
+ width: 44px;
259
+ height: 24px;
260
+ background: #e2e8f0;
261
+ border-radius: 12px;
262
+ transition: background 0.2s;
263
+ position: relative;
264
+ }
265
+
266
+ .ec-toggle-track::after {
267
+ content: '';
268
+ position: absolute;
269
+ top: 2px;
270
+ left: 2px;
271
+ width: 20px;
272
+ height: 20px;
273
+ background: #fff;
274
+ border-radius: 50%;
275
+ transition: transform 0.2s;
276
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
277
+ }
278
+
279
+ .ec-toggle-input:checked ~ .ec-toggle-track {
280
+ background: #f59e0b;
281
+ }
282
+
283
+ .ec-toggle-input:checked ~ .ec-toggle-track::after {
284
+ transform: translateX(20px);
285
+ }
286
+
287
+ .ec-panel-right {
288
+ display: flex;
289
+ flex-direction: column;
290
+ gap: 1.5rem;
291
+ }
292
+
293
+ .ec-result-card {
294
+ background: linear-gradient(135deg, #f59e0b, #ea580c);
295
+ border-radius: 1.5rem;
296
+ padding: 0.25rem;
297
+ box-shadow: 0 12px 40px rgba(234, 88, 12, 0.25);
298
+ position: relative;
299
+ overflow: hidden;
300
+ color: #fff;
301
+ }
302
+
303
+ .ec-result-blob {
304
+ position: absolute;
305
+ top: 0;
306
+ right: 0;
307
+ width: 12rem;
308
+ height: 12rem;
309
+ background: rgba(255, 255, 255, 0.1);
310
+ border-radius: 50%;
311
+ filter: blur(40px);
312
+ transform: translate(30%, -30%);
313
+ pointer-events: none;
314
+ }
315
+
316
+ .ec-result-inner {
317
+ background: rgba(255, 255, 255, 0.1);
318
+ backdrop-filter: blur(4px);
319
+ border-radius: 1.25rem;
320
+ padding: 1.5rem;
321
+ display: flex;
322
+ flex-direction: column;
323
+ gap: 2rem;
324
+ position: relative;
325
+ z-index: 1;
326
+ }
327
+
328
+ .ec-result-label {
329
+ font-size: 0.75rem;
330
+ font-weight: 700;
331
+ text-transform: uppercase;
332
+ letter-spacing: 0.08em;
333
+ color: rgba(254, 243, 199, 0.9);
334
+ margin: 0 0 0.25rem;
335
+ }
336
+
337
+ .ec-result-total {
338
+ display: flex;
339
+ align-items: baseline;
340
+ gap: 0.5rem;
341
+ }
342
+
343
+ .ec-total-number {
344
+ font-size: 3rem;
345
+ font-weight: 700;
346
+ line-height: 1;
347
+ }
348
+
349
+ .ec-total-unit {
350
+ font-size: 1.25rem;
351
+ color: rgba(254, 243, 199, 0.8);
352
+ }
353
+
354
+ .ec-parts-grid {
355
+ display: grid;
356
+ grid-template-columns: 1fr 1fr;
357
+ gap: 1rem;
358
+ }
359
+
360
+ .ec-part-card {
361
+ border-radius: 0.75rem;
362
+ padding: 0.75rem;
363
+ backdrop-filter: blur(8px);
364
+ }
365
+
366
+ .ec-part-a {
367
+ background: rgba(0, 0, 0, 0.2);
368
+ }
369
+
370
+ .ec-part-b {
371
+ background: rgba(255, 255, 255, 0.2);
372
+ }
373
+
374
+ .ec-part-label {
375
+ font-size: 0.625rem;
376
+ font-weight: 700;
377
+ text-transform: uppercase;
378
+ letter-spacing: 0.06em;
379
+ color: rgba(254, 243, 199, 0.9);
380
+ margin: 0 0 0.25rem;
381
+ }
382
+
383
+ .ec-part-value {
384
+ font-size: 1.5rem;
385
+ font-weight: 700;
386
+ margin: 0;
387
+ }
388
+
389
+ .ec-viz-card {
390
+ background: #fff;
391
+ border-radius: 1.5rem;
392
+ padding: 1.5rem;
393
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
394
+ border: 1px solid #f1f5f9;
395
+ display: flex;
396
+ flex-direction: column;
397
+ align-items: center;
398
+ justify-content: center;
399
+ min-height: 280px;
400
+ position: relative;
401
+ overflow: hidden;
402
+ }
403
+
404
+ .ec-viz-label {
405
+ position: absolute;
406
+ top: 1.5rem;
407
+ left: 1.5rem;
408
+ font-size: 0.625rem;
409
+ font-weight: 700;
410
+ text-transform: uppercase;
411
+ letter-spacing: 0.1em;
412
+ color: #cbd5e1;
413
+ margin: 0;
414
+ }
415
+
416
+ .ec-visual-stage {
417
+ display: flex;
418
+ flex-direction: column;
419
+ align-items: center;
420
+ gap: 2.5rem;
421
+ perspective: 1000px;
422
+ }
423
+
424
+ .ec-visual-shape {
425
+ width: 8rem;
426
+ height: 8rem;
427
+ border: 4px solid rgba(30, 41, 59, 0.15);
428
+ background: #f8fafc;
429
+ overflow: hidden;
430
+ position: relative;
431
+ transition: all 0.5s ease;
432
+ }
433
+
434
+ .ec-shape-rect {
435
+ border-radius: 4px;
436
+ height: 5rem;
437
+ transform: rotateX(10deg) rotateY(10deg);
438
+ box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.08);
439
+ }
440
+
441
+ .ec-shape-cylinder {
442
+ border-radius: 4px 4px 20px 20px;
443
+ width: 6rem;
444
+ transform: rotateX(5deg);
445
+ }
446
+
447
+ .ec-shape-sphere {
448
+ border-radius: 50%;
449
+ transform: scale(1.1);
450
+ box-shadow: inset -10px -10px 40px rgba(0, 0, 0, 0.08);
451
+ }
452
+
453
+ .ec-liquid-fill {
454
+ position: absolute;
455
+ bottom: 0;
456
+ left: 0;
457
+ width: 100%;
458
+ height: 0;
459
+ background: rgba(251, 191, 36, 0.8);
460
+ transition: height 0.7s ease-in-out;
461
+ box-shadow: 0 0 20px rgba(251, 191, 36, 0.4);
462
+ }
463
+
464
+ .ec-liquid-shimmer {
465
+ position: absolute;
466
+ top: 0;
467
+ left: 0;
468
+ width: 100%;
469
+ height: 8px;
470
+ background: rgba(255, 255, 255, 0.3);
471
+ animation: ec-pulse 2s ease-in-out infinite;
472
+ }
473
+
474
+ .ec-bubble {
475
+ position: absolute;
476
+ background: rgba(255, 255, 255, 0.4);
477
+ border-radius: 50%;
478
+ }
479
+
480
+ .ec-bubble-1 {
481
+ bottom: 8px;
482
+ left: 8px;
483
+ width: 8px;
484
+ height: 8px;
485
+ animation: ec-bounce 1s ease-in-out infinite;
486
+ }
487
+
488
+ .ec-bubble-2 {
489
+ bottom: 20px;
490
+ right: 16px;
491
+ width: 4px;
492
+ height: 4px;
493
+ animation: ec-pulse 1.5s ease-in-out infinite;
494
+ }
495
+
496
+ .ec-shape-label {
497
+ font-size: 0.75rem;
498
+ color: #94a3b8;
499
+ text-align: center;
500
+ }
501
+
502
+ @keyframes ec-pulse {
503
+ 0%, 100% { opacity: 1; }
504
+ 50% { opacity: 0.4; }
505
+ }
506
+
507
+ @keyframes ec-bounce {
508
+ 0%, 100% { transform: translateY(0); }
509
+ 50% { transform: translateY(-4px); }
510
+ }
511
+
512
+ :global(.theme-dark) .ec-panel-left {
513
+ background: rgba(15, 23, 42, 0.8);
514
+ border-color: rgba(51, 65, 85, 0.6);
515
+ }
516
+
517
+ :global(.theme-dark) .ec-tabs {
518
+ background: rgba(30, 41, 59, 0.6);
519
+ }
520
+
521
+ :global(.theme-dark) .ec-tab-btn {
522
+ color: #94a3b8;
523
+ }
524
+
525
+ :global(.theme-dark) .ec-tab-btn[data-ec-active="true"] {
526
+ background: #f59e0b;
527
+ color: #0f172a;
528
+ }
529
+
530
+ :global(.theme-dark) .ec-input {
531
+ background: #1e293b;
532
+ border-color: #334155;
533
+ color: #e2e8f0;
534
+ }
535
+
536
+ :global(.theme-dark) .ec-input:focus {
537
+ border-color: #f59e0b;
538
+ }
539
+
540
+ :global(.theme-dark) .ec-slider {
541
+ background: #334155;
542
+ }
543
+
544
+ :global(.theme-dark) .ec-custom-check-row {
545
+ color: #94a3b8;
546
+ }
547
+
548
+ :global(.theme-dark) .ec-waste-row {
549
+ background: rgba(30, 41, 59, 0.6);
550
+ border-color: rgba(51, 65, 85, 0.4);
551
+ }
552
+
553
+ :global(.theme-dark) .ec-waste-icon {
554
+ background: #1e293b;
555
+ }
556
+
557
+ :global(.theme-dark) .ec-waste-title {
558
+ color: #e2e8f0;
559
+ }
560
+
561
+ :global(.theme-dark) .ec-viz-card {
562
+ background: #1e293b;
563
+ border-color: #334155;
564
+ }
565
+
566
+ :global(.theme-dark) .ec-visual-shape {
567
+ background: #0f172a;
568
+ border-color: rgba(148, 163, 184, 0.15);
569
+ }