@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,478 @@
1
+ :root {
2
+ --sc-primary: #6366f1;
3
+ --sc-primary-dark: #4f46e5;
4
+ --sc-primary-light: #818cf8;
5
+ --sc-neutral: #1e293b;
6
+ --sc-neutral-light: #64748b;
7
+ --sc-border: #e2e8f0;
8
+ --sc-bg-light: #f8fafc;
9
+ --sc-bg-lighter: #f1f5f9;
10
+ --sc-bg: #fff;
11
+ }
12
+
13
+ :global(.theme-dark) {
14
+ --sc-primary: #818cf8;
15
+ --sc-primary-dark: #6366f1;
16
+ --sc-neutral: #f1f5f9;
17
+ --sc-neutral-light: #9ca3af;
18
+ --sc-border: rgba(255, 255, 255, 0.1);
19
+ --sc-bg-light: rgba(255, 255, 255, 0.04);
20
+ --sc-bg-lighter: rgba(255, 255, 255, 0.02);
21
+ --sc-bg: rgba(255, 255, 255, 0.01);
22
+ }
23
+
24
+ .sc-root {
25
+ width: 100%;
26
+ max-width: 1100px;
27
+ margin: 1.5rem auto;
28
+ padding: 0 1rem;
29
+ color: var(--sc-neutral);
30
+ }
31
+
32
+ .sc-card {
33
+ background: var(--sc-bg);
34
+ border-radius: 2rem;
35
+ overflow: hidden;
36
+ display: grid;
37
+ grid-template-columns: 350px 1fr;
38
+ box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
39
+ border: 1px solid var(--sc-border);
40
+ }
41
+
42
+ .sc-sidebar {
43
+ background: var(--sc-bg-light);
44
+ padding: 1.5rem;
45
+ border-right: 1px solid var(--sc-border);
46
+ display: flex;
47
+ flex-direction: column;
48
+ gap: 1rem;
49
+ }
50
+
51
+ .sc-section h3 {
52
+ font-size: 0.75rem;
53
+ text-transform: uppercase;
54
+ letter-spacing: 0.05em;
55
+ color: var(--sc-primary);
56
+ margin-bottom: 1rem;
57
+ font-weight: 800;
58
+ }
59
+
60
+ .sc-main {
61
+ padding: 1.5rem 2rem;
62
+ display: flex;
63
+ flex-direction: column;
64
+ gap: 1.5rem;
65
+ background: var(--sc-bg);
66
+ }
67
+
68
+ .sc-results-header {
69
+ display: grid;
70
+ grid-template-columns: repeat(4, 1fr);
71
+ gap: 1rem;
72
+ }
73
+
74
+ .sc-stat-box {
75
+ background: rgba(255, 255, 255, 0.5);
76
+ padding: 0.75rem 0.5rem;
77
+ border-radius: 1.25rem;
78
+ text-align: center;
79
+ border: 1px solid var(--sc-border);
80
+ }
81
+
82
+ :global(.theme-dark) .sc-stat-box {
83
+ background: rgba(255, 255, 255, 0.04);
84
+ }
85
+
86
+ .sc-stat-label {
87
+ display: block;
88
+ font-size: 0.6rem;
89
+ text-transform: uppercase;
90
+ color: var(--sc-neutral-light);
91
+ margin-bottom: 0.25rem;
92
+ font-weight: 700;
93
+ }
94
+
95
+ .sc-stat-value {
96
+ font-size: 1.5rem;
97
+ font-weight: 800;
98
+ color: var(--sc-neutral);
99
+ }
100
+
101
+ .sc-stat-unit {
102
+ font-size: 0.75rem;
103
+ color: var(--sc-neutral-light);
104
+ }
105
+
106
+ .sc-visualizer-container {
107
+ background: var(--sc-bg-lighter);
108
+ border-radius: 1.5rem;
109
+ padding: 1.5rem;
110
+ position: relative;
111
+ min-height: 300px;
112
+ display: flex;
113
+ align-items: center;
114
+ justify-content: center;
115
+ border: 1px solid var(--sc-border);
116
+ overflow: hidden;
117
+ }
118
+
119
+ #sc-stair-svg {
120
+ width: 100%;
121
+ height: 100%;
122
+ max-height: 400px;
123
+ color: var(--sc-neutral);
124
+ }
125
+
126
+ .sc-input-grid {
127
+ display: grid;
128
+ grid-template-columns: 1fr 1fr;
129
+ gap: 0.75rem;
130
+ }
131
+
132
+ .sc-input-group {
133
+ margin-bottom: 0.75rem;
134
+ }
135
+
136
+ .sc-input-group label {
137
+ display: block;
138
+ font-size: 0.8rem;
139
+ font-weight: 700;
140
+ color: var(--sc-neutral-light);
141
+ margin-bottom: 0.4rem;
142
+ }
143
+
144
+ .sc-stepper {
145
+ display: flex;
146
+ align-items: center;
147
+ background: rgba(255, 255, 255, 0.5);
148
+ border-radius: 1.25rem;
149
+ border: 2px solid var(--sc-border);
150
+ transition: all 0.2s ease;
151
+ padding: 3px;
152
+ gap: 2px;
153
+ width: 100%;
154
+ box-sizing: border-box;
155
+ }
156
+
157
+ :global(.theme-dark) .sc-stepper {
158
+ background: rgba(255, 255, 255, 0.04);
159
+ }
160
+
161
+ .sc-stepper:focus-within {
162
+ border-color: var(--sc-primary);
163
+ box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
164
+ }
165
+
166
+ .sc-step-btn {
167
+ width: 44px;
168
+ height: 44px;
169
+ display: flex;
170
+ align-items: center;
171
+ justify-content: center;
172
+ background: none;
173
+ border: none;
174
+ color: var(--sc-neutral-light);
175
+ font-size: 1.6rem;
176
+ font-weight: 800;
177
+ cursor: pointer;
178
+ border-radius: 0.85rem;
179
+ transition: all 0.2s ease;
180
+ flex-shrink: 0;
181
+ }
182
+
183
+ .sc-step-btn:hover {
184
+ background: var(--sc-bg-lighter);
185
+ color: var(--sc-primary);
186
+ }
187
+
188
+ .sc-stepper input {
189
+ flex: 1;
190
+ min-width: 0;
191
+ background: none;
192
+ border: none;
193
+ color: var(--sc-neutral);
194
+ text-align: center;
195
+ font-size: 1.1rem;
196
+ font-weight: 700;
197
+ height: 44px;
198
+ padding: 0;
199
+ appearance: textfield;
200
+ }
201
+
202
+ .sc-stepper input::-webkit-outer-spin-button,
203
+ .sc-stepper input::-webkit-inner-spin-button {
204
+ -webkit-appearance: none;
205
+ margin: 0;
206
+ }
207
+
208
+ .sc-select {
209
+ width: 100%;
210
+ padding: 0.8rem 2.8rem 0.8rem 1rem;
211
+ border-radius: 1rem;
212
+ border: 2px solid var(--sc-border);
213
+ background: rgba(255, 255, 255, 0.5);
214
+ font-weight: 600;
215
+ font-size: 0.95rem;
216
+ color: var(--sc-neutral);
217
+ outline: none;
218
+ transition: all 0.2s ease;
219
+ appearance: none;
220
+ -webkit-appearance: none;
221
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%236366f1' d='M7.41 8.58L12 13.17l4.59-4.59L18 10l-6 6l-6-6l1.41-1.42Z'/%3E%3C/svg%3E");
222
+ background-repeat: no-repeat;
223
+ background-position: right 1rem center;
224
+ cursor: pointer;
225
+ }
226
+
227
+ :global(.theme-dark) .sc-select {
228
+ background-color: #0f172a;
229
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23818cf8' d='M7.41 8.58L12 13.17l4.59-4.59L18 10l-6 6l-6-6l1.41-1.42Z'/%3E%3C/svg%3E");
230
+ }
231
+
232
+ .sc-select option {
233
+ background: white;
234
+ color: #1e293b;
235
+ }
236
+
237
+ :global(.theme-dark) .sc-select option {
238
+ background: #1e293b;
239
+ color: #f1f5f9;
240
+ }
241
+
242
+ .sc-optimize-btn {
243
+ width: 100%;
244
+ padding: 0.75rem;
245
+ background: var(--sc-primary-dark);
246
+ color: white;
247
+ border: none;
248
+ border-radius: 0.75rem;
249
+ font-weight: 700;
250
+ cursor: pointer;
251
+ margin-top: 0.5rem;
252
+ font-size: 0.85rem;
253
+ }
254
+
255
+ .sc-blondel-alert {
256
+ padding: 1rem;
257
+ border-radius: 1rem;
258
+ font-weight: 700;
259
+ display: flex;
260
+ flex-direction: column;
261
+ gap: 0.4rem;
262
+ margin-top: auto;
263
+ }
264
+
265
+ .sc-blondel-title {
266
+ font-size: 0.65rem;
267
+ text-transform: uppercase;
268
+ opacity: 0.8;
269
+ }
270
+
271
+ .sc-blondel-msg {
272
+ font-size: 0.85rem;
273
+ }
274
+
275
+ .sc-blondel-alert.success {
276
+ background: #dcfce7;
277
+ color: #166534;
278
+ border: 1px solid #bbf7d0;
279
+ }
280
+
281
+ .sc-blondel-alert.warning {
282
+ background: #fef9c3;
283
+ color: #854d0e;
284
+ border: 1px solid #fef08a;
285
+ }
286
+
287
+ .sc-blondel-alert.error {
288
+ background: #fee2e2;
289
+ color: #991b1b;
290
+ border: 1px solid #fecaca;
291
+ }
292
+
293
+ .sc-bottom-grid {
294
+ display: grid;
295
+ grid-template-columns: 1fr 300px;
296
+ gap: 1.25rem;
297
+ }
298
+
299
+ .sc-table-card {
300
+ background: rgba(255, 255, 255, 0.5);
301
+ border-radius: 1.25rem;
302
+ padding: 1.25rem;
303
+ border: 1px solid var(--sc-border);
304
+ }
305
+
306
+ :global(.theme-dark) .sc-table-card {
307
+ background: rgba(255, 255, 255, 0.03);
308
+ }
309
+
310
+ .sc-table-card h3 {
311
+ font-size: 0.8rem;
312
+ text-transform: uppercase;
313
+ color: var(--sc-neutral-light);
314
+ font-weight: 800;
315
+ margin-bottom: 0.75rem;
316
+ }
317
+
318
+ .sc-table-wrapper {
319
+ max-height: 220px;
320
+ overflow-y: auto;
321
+ }
322
+
323
+ :global(.sc-table-wrapper table) {
324
+ width: 100%;
325
+ }
326
+
327
+ :global(.sc-table-wrapper th) {
328
+ text-align: left;
329
+ font-size: 0.55rem;
330
+ text-transform: uppercase;
331
+ color: var(--sc-neutral-light);
332
+ padding: 0.4rem 0.2rem;
333
+ background: transparent;
334
+ }
335
+
336
+ :global(.sc-table-wrapper td) {
337
+ padding: 0.6rem 0.2rem;
338
+ border-bottom: 1px solid var(--sc-border);
339
+ font-size: 0.8rem;
340
+ color: var(--sc-neutral);
341
+ }
342
+
343
+ .sc-col-hl {
344
+ color: var(--sc-primary);
345
+ font-weight: 700;
346
+ }
347
+
348
+ .sc-materials-card {
349
+ background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(99, 102, 241, 0.05) 100%);
350
+ color: var(--sc-neutral);
351
+ border-radius: 1.25rem;
352
+ padding: 1.25rem;
353
+ display: flex;
354
+ flex-direction: column;
355
+ gap: 0.75rem;
356
+ border: 1px solid var(--sc-primary);
357
+ }
358
+
359
+ :global(.theme-dark) .sc-materials-card {
360
+ background: rgba(129, 140, 248, 0.08);
361
+ }
362
+
363
+ .sc-materials-card h3 {
364
+ font-size: 0.8rem;
365
+ text-transform: uppercase;
366
+ color: var(--sc-primary);
367
+ font-weight: 800;
368
+ margin-bottom: 0.5rem;
369
+ }
370
+
371
+ .sc-material-row {
372
+ display: flex;
373
+ justify-content: space-between;
374
+ align-items: baseline;
375
+ padding-bottom: 0.4rem;
376
+ border-bottom: 1px solid var(--sc-border);
377
+ }
378
+
379
+ .sc-material-row span {
380
+ font-size: 0.7rem;
381
+ color: var(--sc-neutral-light);
382
+ }
383
+
384
+ .sc-material-row strong {
385
+ font-size: 1.15rem;
386
+ color: var(--sc-primary);
387
+ }
388
+
389
+ .sc-actions-row {
390
+ display: grid;
391
+ grid-template-columns: 1fr 1fr;
392
+ gap: 0.5rem;
393
+ margin-top: auto;
394
+ }
395
+
396
+ .sc-action-btn {
397
+ padding: 0.75rem;
398
+ border-radius: 0.75rem;
399
+ font-weight: 800;
400
+ font-size: 0.8rem;
401
+ border: none;
402
+ cursor: pointer;
403
+ }
404
+
405
+ .sc-btn-primary {
406
+ background: var(--sc-primary-dark);
407
+ color: white;
408
+ }
409
+
410
+ .sc-btn-secondary {
411
+ background: rgba(255, 255, 255, 0.1);
412
+ color: white;
413
+ }
414
+
415
+ @media (max-width: 1000px) {
416
+ .sc-card {
417
+ grid-template-columns: 1fr;
418
+ border-radius: 1.5rem;
419
+ }
420
+
421
+ .sc-sidebar {
422
+ border-right: none;
423
+ border-bottom: 1px solid var(--sc-border);
424
+ padding: 1.25rem;
425
+ }
426
+
427
+ .sc-main {
428
+ padding: 1.25rem;
429
+ }
430
+ }
431
+
432
+ @media (max-width: 768px) {
433
+ .sc-root {
434
+ margin: 1rem auto;
435
+ padding: 0 0.75rem;
436
+ }
437
+
438
+ .sc-results-header {
439
+ grid-template-columns: repeat(2, 1fr);
440
+ gap: 0.5rem;
441
+ }
442
+
443
+ .sc-bottom-grid {
444
+ grid-template-columns: 1fr;
445
+ }
446
+
447
+ .sc-stat-value {
448
+ font-size: 1.25rem;
449
+ }
450
+
451
+ .sc-stat-box {
452
+ padding: 0.5rem;
453
+ }
454
+
455
+ .sc-visualizer-container {
456
+ min-height: 250px;
457
+ padding: 1rem;
458
+ }
459
+ }
460
+
461
+ @media (max-width: 480px) {
462
+ .sc-results-header {
463
+ gap: 0.4rem;
464
+ }
465
+
466
+ .sc-stat-box {
467
+ padding: 0.4rem;
468
+ border-radius: 1rem;
469
+ }
470
+
471
+ .sc-stat-value {
472
+ font-size: 1.1rem;
473
+ }
474
+
475
+ .sc-material-row strong {
476
+ font-size: 1rem;
477
+ }
478
+ }