@jjlmoya/utils-nautical 1.4.0 → 1.6.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 (13) hide show
  1. package/package.json +2 -2
  2. package/src/tool/endurance/component.astro +340 -1
  3. package/src/tool/nauticalConverter/component.astro +208 -1
  4. package/src/tool/sailArea/component.astro +354 -1
  5. package/src/tool/speedConverter/component.astro +242 -1
  6. package/src/tool/tideCalculator/component.astro +313 -1
  7. package/src/tool/underKeel/component.astro +321 -1
  8. package/src/tool/endurance/style.css +0 -337
  9. package/src/tool/nauticalConverter/style.css +0 -205
  10. package/src/tool/sailArea/style.css +0 -351
  11. package/src/tool/speedConverter/style.css +0 -239
  12. package/src/tool/tideCalculator/style.css +0 -310
  13. package/src/tool/underKeel/style.css +0 -318
package/src/tool/endurance/style.css DELETED
@@ -1,337 +0,0 @@
1
- .endurance-calculator {
2
- --n-bg: #fff;
3
- --n-bg-muted: #f1f5f9;
4
- --n-text: #0f172a;
5
- --n-text-muted: #475569;
6
- --n-text-dim: #64748b;
7
- --n-border: #e2e8f0;
8
- --n-shadow: rgba(0, 0, 0, 0.05);
9
- --n-primary: #3b82f6;
10
- --n-primary-on: #fff;
11
- --n-accent: #6366f1;
12
- --n-cyan: #0891b2;
13
- --n-success: #10b981;
14
- --n-warning: #f59e0b;
15
- --n-error: #f43f5e;
16
- --ec-hero-bg: #0f172a;
17
- --ec-hero-label: #22d3ee;
18
-
19
- max-width: 1000px;
20
- margin: 0 auto;
21
- }
22
-
23
- .theme-dark .endurance-calculator {
24
- --n-bg: #0f172a;
25
- --n-bg-muted: #1e293b;
26
- --n-text: #f8fafc;
27
- --n-text-muted: #94a3b8;
28
- --n-text-dim: #64748b;
29
- --n-border: #334155;
30
- --n-shadow: rgba(0, 0, 0, 0.3);
31
- --n-primary: #60a5fa;
32
- --n-primary-on: #fff;
33
- --n-accent: #818cf8;
34
- --n-cyan: #22d3ee;
35
- --n-success: #34d399;
36
- --n-warning: #fbbf24;
37
- --n-error: #fb7185;
38
- --ec-hero-bg: #020617;
39
- --ec-hero-label: #22d3ee;
40
- }
41
-
42
- .ec-main-container {
43
- background: var(--n-bg);
44
- border: 1px solid var(--n-border);
45
- border-radius: 1.5rem;
46
- display: grid;
47
- grid-template-columns: 360px 1fr;
48
- overflow: hidden;
49
- box-shadow: 0 20px 40px var(--n-shadow);
50
- }
51
-
52
- .ec-sidebar-inputs {
53
- padding: 1.5rem;
54
- border-right: 1px solid var(--n-border);
55
- background: var(--n-bg-muted);
56
- display: flex;
57
- flex-direction: column;
58
- gap: 1.2rem;
59
- }
60
-
61
- .ec-compact-group {
62
- display: flex;
63
- flex-direction: column;
64
- gap: 0.4rem;
65
- }
66
-
67
- .ec-compact-group label {
68
- font-size: 0.7rem;
69
- font-weight: 800;
70
- text-transform: uppercase;
71
- color: var(--n-text-muted);
72
- letter-spacing: 0.06em;
73
- }
74
-
75
- .ec-dual-row {
76
- display: grid;
77
- grid-template-columns: 1fr 1fr;
78
- gap: 0.5rem;
79
- }
80
-
81
- .ec-sub-label {
82
- font-size: 0.65rem;
83
- color: var(--n-text-muted);
84
- font-weight: 700;
85
- margin-bottom: 0.2rem;
86
- display: block;
87
- }
88
-
89
- .ec-field-wrapper {
90
- position: relative;
91
- display: flex;
92
- align-items: center;
93
- }
94
-
95
- .ec-field-icon {
96
- position: absolute;
97
- left: 8px;
98
- font-size: 0.9rem;
99
- color: var(--n-text-muted);
100
- pointer-events: none;
101
- }
102
-
103
- .ec-compact-input,
104
- .ec-compact-select {
105
- width: 100%;
106
- background: var(--n-bg);
107
- border: 1px solid var(--n-border);
108
- border-radius: 0.5rem;
109
- padding: 0.6rem 2.4rem 0.6rem 2.2rem;
110
- font-size: 0.95rem;
111
- font-weight: 700;
112
- color: var(--n-text);
113
- outline: none;
114
- transition: border-color 0.2s;
115
- }
116
-
117
- .ec-compact-input:focus,
118
- .ec-compact-select:focus {
119
- border-color: var(--n-primary);
120
- }
121
-
122
- .ec-compact-select {
123
- padding-right: 0.6rem;
124
- cursor: pointer;
125
- }
126
-
127
- .ec-unit-tag {
128
- position: absolute;
129
- right: 8px;
130
- font-size: 0.65rem;
131
- font-weight: 800;
132
- color: var(--n-text-muted);
133
- pointer-events: none;
134
- }
135
-
136
- .ec-dashboard-panel {
137
- padding: 2rem;
138
- display: flex;
139
- flex-direction: column;
140
- gap: 2rem;
141
- }
142
-
143
- .ec-hero-display {
144
- background: var(--ec-hero-bg);
145
- border-radius: 1rem;
146
- padding: 2rem;
147
- color: var(--n-primary-on);
148
- display: flex;
149
- flex-direction: column;
150
- gap: 1.5rem;
151
- }
152
-
153
- .ec-hero-top {
154
- display: flex;
155
- justify-content: space-between;
156
- align-items: flex-start;
157
- }
158
-
159
- .ec-display-title {
160
- font-size: 0.65rem;
161
- font-weight: 900;
162
- text-transform: uppercase;
163
- color: var(--ec-hero-label);
164
- letter-spacing: 0.1em;
165
- }
166
-
167
- .ec-main-value-row {
168
- display: flex;
169
- align-items: baseline;
170
- gap: 0.5rem;
171
- }
172
-
173
- .ec-main-value {
174
- font-size: 5rem;
175
- font-weight: 900;
176
- color: var(--n-primary-on);
177
- line-height: 1;
178
- }
179
-
180
- .ec-main-unit {
181
- font-size: 1.2rem;
182
- font-weight: 700;
183
- opacity: 0.4;
184
- color: var(--n-primary-on);
185
- }
186
-
187
- .ec-fuel-badge {
188
- font-size: 0.85rem;
189
- font-weight: 900;
190
- color: var(--ec-hero-label);
191
- letter-spacing: 0.05em;
192
- }
193
-
194
- .ec-progress-track {
195
- height: 10px;
196
- background: rgba(255, 255, 255, 0.1);
197
- border-radius: 5px;
198
- position: relative;
199
- overflow: hidden;
200
- }
201
-
202
- .ec-progress-fill {
203
- height: 100%;
204
- background: linear-gradient(90deg, var(--n-error) 0%, var(--n-cyan) 100%);
205
- width: 0%;
206
- transition: width 0.8s ease-out;
207
- }
208
-
209
- .ec-marker {
210
- position: absolute;
211
- top: 0;
212
- bottom: 0;
213
- width: 2px;
214
- background: var(--n-primary-on);
215
- z-index: 2;
216
- }
217
-
218
- .ec-stats-grid {
219
- display: grid;
220
- grid-template-columns: repeat(2, 1fr);
221
- gap: 1rem;
222
- }
223
-
224
- .ec-stat-card {
225
- background: var(--n-bg-muted);
226
- border: 1px solid var(--n-border);
227
- border-radius: 0.75rem;
228
- padding: 1rem;
229
- display: flex;
230
- flex-direction: column;
231
- gap: 0.2rem;
232
- }
233
-
234
- .ec-stat-label {
235
- font-size: 0.6rem;
236
- font-weight: 800;
237
- text-transform: uppercase;
238
- color: var(--n-text-muted);
239
- letter-spacing: 0.06em;
240
- }
241
-
242
- .ec-stat-value {
243
- font-size: 1.4rem;
244
- font-weight: 900;
245
- color: var(--n-text);
246
- }
247
-
248
- .ec-stat-value.danger {
249
- color: var(--n-error);
250
- }
251
-
252
- .ec-stat-card.hidden {
253
- display: none;
254
- }
255
-
256
- .ec-inverter-card {
257
- padding: 1.5rem;
258
- background: var(--n-bg-muted);
259
- border: 1px dashed var(--n-border);
260
- border-radius: 1rem;
261
- display: flex;
262
- flex-direction: column;
263
- gap: 1rem;
264
- }
265
-
266
- .ec-inverter-header {
267
- font-size: 0.75rem;
268
- font-weight: 900;
269
- text-transform: uppercase;
270
- color: var(--n-cyan);
271
- letter-spacing: 0.06em;
272
- }
273
-
274
- .ec-inverter-row {
275
- display: grid;
276
- grid-template-columns: 1fr 1fr;
277
- gap: 1.5rem;
278
- align-items: center;
279
- }
280
-
281
- .ec-inverter-label {
282
- font-size: 0.65rem;
283
- font-weight: 800;
284
- text-transform: uppercase;
285
- color: var(--n-text-muted);
286
- margin-bottom: 0.3rem;
287
- }
288
-
289
- .ec-inverter-value {
290
- font-size: 2rem;
291
- font-weight: 900;
292
- color: var(--n-cyan);
293
- }
294
-
295
- .ec-inverter-unit {
296
- font-size: 0.85rem;
297
- color: var(--n-text-muted);
298
- font-weight: 700;
299
- }
300
-
301
- .ec-warning-bar {
302
- background: color-mix(in srgb, var(--n-error), transparent 90%);
303
- padding: 0.8rem 1.2rem;
304
- border-radius: 0.5rem;
305
- display: flex;
306
- align-items: center;
307
- gap: 0.6rem;
308
- font-size: 0.75rem;
309
- font-weight: 600;
310
- color: var(--n-error);
311
- }
312
-
313
- .ec-warning-icon {
314
- font-size: 1rem;
315
- flex-shrink: 0;
316
- }
317
-
318
- @media (max-width: 800px) {
319
- .ec-main-container {
320
- grid-template-columns: 1fr;
321
- }
322
-
323
- .ec-sidebar-inputs {
324
- border-right: none;
325
- border-bottom: 1px solid var(--n-border);
326
- }
327
- }
328
-
329
- @media (max-width: 480px) {
330
- .ec-main-value {
331
- font-size: 2.8rem;
332
- }
333
-
334
- .ec-stats-grid {
335
- grid-template-columns: 1fr;
336
- }
337
- }
package/src/tool/nauticalConverter/style.css DELETED
@@ -1,205 +0,0 @@
1
- .nautical-converter {
2
- --n-bg: #fff;
3
- --n-bg-muted: #f1f5f9;
4
- --n-text: #0f172a;
5
- --n-text-muted: #475569;
6
- --n-text-dim: #64748b;
7
- --n-border: #e2e8f0;
8
- --n-shadow: rgba(0, 0, 0, 0.05);
9
- --n-primary: #3b82f6;
10
- --n-primary-on: #fff;
11
- --n-accent: #6366f1;
12
- --n-cyan: #0891b2;
13
- --n-success: #10b981;
14
- --n-warning: #f59e0b;
15
- --n-error: #f43f5e;
16
-
17
- display: flex;
18
- flex-direction: column;
19
- gap: 1.5rem;
20
- max-width: 900px;
21
- margin: 0 auto;
22
- }
23
-
24
- .theme-dark .nautical-converter {
25
- --n-bg: #0f172a;
26
- --n-bg-muted: #1e293b;
27
- --n-text: #f8fafc;
28
- --n-text-muted: #94a3b8;
29
- --n-text-dim: #64748b;
30
- --n-border: #334155;
31
- --n-shadow: rgba(0, 0, 0, 0.3);
32
- --n-primary: #60a5fa;
33
- --n-primary-on: #fff;
34
- --n-accent: #818cf8;
35
- --n-cyan: #22d3ee;
36
- --n-success: #34d399;
37
- --n-warning: #fbbf24;
38
- --n-error: #fb7185;
39
- }
40
-
41
- .nc-category-tabs {
42
- display: flex;
43
- gap: 0.5rem;
44
- flex-wrap: wrap;
45
- background: var(--n-bg);
46
- border: 1px solid var(--n-border);
47
- border-radius: 1rem;
48
- padding: 0.5rem;
49
- }
50
-
51
- .nc-tab-btn {
52
- flex: 1;
53
- min-width: 120px;
54
- padding: 0.7rem 1.2rem;
55
- border: none;
56
- border-radius: 0.7rem;
57
- background: transparent;
58
- color: var(--n-text-muted);
59
- font-size: 0.9rem;
60
- font-weight: 600;
61
- cursor: pointer;
62
- transition: background 0.2s, color 0.2s;
63
- }
64
-
65
- .nc-tab-btn:hover {
66
- background: var(--n-bg-muted);
67
- color: var(--n-text);
68
- }
69
-
70
- .nc-tab-btn.active {
71
- background: var(--n-primary);
72
- color: var(--n-primary-on);
73
- }
74
-
75
- .nc-tab-panel {
76
- display: none;
77
- }
78
-
79
- .nc-tab-panel.active {
80
- display: block;
81
- }
82
-
83
- .nc-converter-card {
84
- background: var(--n-bg);
85
- border: 1px solid var(--n-border);
86
- border-radius: 1.5rem;
87
- padding: 2rem;
88
- box-shadow: 0 8px 24px var(--n-shadow);
89
- }
90
-
91
- .nc-input-grid {
92
- display: grid;
93
- grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
94
- gap: 1.2rem;
95
- }
96
-
97
- .nc-input-group {
98
- display: flex;
99
- flex-direction: column;
100
- gap: 0.4rem;
101
- }
102
-
103
- .nc-input-group label {
104
- font-size: 0.8rem;
105
- font-weight: 700;
106
- color: var(--n-text-muted);
107
- text-transform: uppercase;
108
- letter-spacing: 0.05em;
109
- }
110
-
111
- .nc-input-wrapper {
112
- position: relative;
113
- display: flex;
114
- align-items: center;
115
- }
116
-
117
- .nc-elegant-input {
118
- width: 100%;
119
- background: var(--n-bg);
120
- color: var(--n-text);
121
- border: 2px solid var(--n-border);
122
- border-radius: 0.8rem;
123
- padding: 0.75rem 2.8rem 0.75rem 1rem;
124
- font-size: 1rem;
125
- outline: none;
126
- transition: border-color 0.2s;
127
- }
128
-
129
- .nc-elegant-input:focus {
130
- border-color: var(--n-cyan);
131
- }
132
-
133
- .nc-copy-btn {
134
- position: absolute;
135
- right: 0.5rem;
136
- background: none;
137
- border: none;
138
- cursor: pointer;
139
- color: var(--n-cyan);
140
- padding: 0.2rem;
141
- display: flex;
142
- align-items: center;
143
- opacity: 0.5;
144
- transition: opacity 0.2s;
145
- }
146
-
147
- .nc-copy-btn:hover {
148
- opacity: 1;
149
- }
150
-
151
- .nc-beaufort-card {
152
- margin-top: 1.5rem;
153
- background: var(--n-bg);
154
- border: 1px solid var(--n-border);
155
- border-radius: 1rem;
156
- padding: 1.2rem 1.5rem;
157
- display: none;
158
- align-items: center;
159
- gap: 1.2rem;
160
- }
161
-
162
- .nc-beaufort-card.visible {
163
- display: flex;
164
- }
165
-
166
- .nc-beaufort-badge {
167
- display: flex;
168
- align-items: center;
169
- justify-content: center;
170
- width: 56px;
171
- height: 56px;
172
- border-radius: 50%;
173
- font-size: 1.6rem;
174
- font-weight: 900;
175
- color: var(--n-primary-on);
176
- flex-shrink: 0;
177
- }
178
-
179
- .nc-beaufort-info {
180
- display: flex;
181
- flex-direction: column;
182
- gap: 0.2rem;
183
- }
184
-
185
- .nc-beaufort-name {
186
- font-size: 1.1rem;
187
- font-weight: 700;
188
- color: var(--n-text);
189
- }
190
-
191
- .nc-beaufort-sea {
192
- font-size: 0.9rem;
193
- color: var(--n-text-muted);
194
- }
195
-
196
- @media (max-width: 600px) {
197
- .nc-input-grid {
198
- grid-template-columns: 1fr 1fr;
199
- }
200
-
201
- .nc-tab-btn {
202
- font-size: 0.8rem;
203
- padding: 0.6rem 0.8rem;
204
- }
205
- }