@jjlmoya/utils-drones 1.2.0 → 1.3.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 (7) hide show
  1. package/package.json +5 -1
  2. package/src/tool/antenna-length-calculator/AntennaLengthCalculator.css +218 -232
  3. package/src/tool/antenna-length-calculator/component.astro +20 -20
  4. package/src/tool/drone-flight-time/FlightTimeCalculator.css +90 -83
  5. package/src/tool/gps-coordinates-converter/GpsCoordinatesConverter.css +253 -262
  6. package/src/tool/gps-coordinates-converter/component.astro +65 -65
  7. package/src/tool/gps-coordinates-converter/components/GpsMap.astro +1 -2
package/src/tool/gps-coordinates-converter/GpsCoordinatesConverter.css CHANGED
@@ -1,310 +1,301 @@
1
1
  .gps-converter-ui {
2
- width: 100%;
3
- max-width: 1100px;
4
- margin: 0 auto;
5
- }
6
-
7
- .tech-mega-card {
8
- background: rgba(255, 255, 255, 0.7);
9
- backdrop-filter: blur(20px);
10
- border: 1px solid rgba(255, 255, 255, 0.4);
11
- border-radius: 32px;
12
- box-shadow: 0 30px 60px rgba(0, 0, 0, 0.08);
13
- overflow: hidden;
14
- }
15
-
16
- :global(.dark) .tech-mega-card {
17
- background: rgba(15, 23, 42, 0.7);
18
- border-color: rgba(255, 255, 255, 0.05);
19
- }
20
-
21
- .card-grid {
22
- display: grid;
23
- grid-template-columns: 420px 1fr;
24
- }
25
-
26
- .config-sidebar {
27
- padding: 2rem;
28
- background: rgba(255, 255, 255, 0.3);
29
- display: flex;
30
- flex-direction: column;
31
- gap: 2rem;
32
- border-right: 1px solid rgba(0, 0, 0, 0.05);
33
- }
34
-
35
- :global(.dark) .config-sidebar {
36
- background: rgba(255, 255, 255, 0.02);
37
- border-right-color: rgba(255, 255, 255, 0.05);
38
- }
39
-
40
- .main-display {
41
- padding: 2rem;
42
- display: flex;
43
- flex-direction: column;
44
- gap: 2rem;
45
- }
46
-
47
- .tech-section {
48
- display: flex;
49
- flex-direction: column;
50
- gap: 1.5rem;
51
- }
52
-
53
- .section-title {
54
- font-size: 0.9rem;
55
- font-weight: 800;
56
- color: #1e293b;
57
- text-transform: uppercase;
58
- letter-spacing: 0.05em;
59
- margin: 0;
60
- }
61
-
62
- :global(.dark) .section-title {
63
- color: #f1f5f9;
64
- }
65
-
66
- .divider {
67
- height: 1px;
68
- width: 100%;
69
- background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.05), transparent);
70
- }
71
-
72
- :global(.dark) .divider {
73
- background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
74
- }
75
-
76
- .compact-inputs {
77
- display: grid;
78
- grid-template-columns: 1fr 1fr;
79
- gap: 1rem;
80
- }
81
-
82
- .input-block {
83
- display: flex;
84
- flex-direction: column;
85
- gap: 0.5rem;
86
- }
87
-
88
- .field-label {
89
- font-size: 0.75rem;
90
- font-weight: 700;
91
- color: #64748b;
92
- text-transform: uppercase;
93
- }
94
-
95
- .tech-input {
96
- width: 100%;
97
- padding: 0.75rem;
98
- background: white;
99
- border: 1px solid #e2e8f0;
100
- border-radius: 12px;
101
- font-weight: 600;
102
- color: #1e293b;
103
- }
104
-
105
- :global(.dark) .tech-input {
106
- background: #1e293b;
107
- border-color: #334155;
108
- color: #f1f5f9;
109
- }
110
-
111
- .mode-switch {
112
- display: flex;
113
- background: #f1f5f9;
114
- padding: 0.3rem;
115
- border-radius: 14px;
116
- }
117
-
118
- :global(.dark) .mode-switch {
119
- background: #1e293b;
120
- }
121
-
122
- .mode-btn {
123
- flex: 1;
124
- padding: 0.6rem;
125
- border-radius: 10px;
126
- border: none;
127
- background: transparent;
128
- font-size: 0.8rem;
129
- font-weight: 700;
130
- color: #64748b;
131
- cursor: pointer;
132
- transition: all 0.2s;
133
- }
134
-
135
- .mode-btn.active {
136
- background: white;
137
- color: #0ea5e9;
138
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
139
- }
140
-
141
- :global(.dark) .mode-btn.active {
142
- background: #334155;
143
- color: #38bdf8;
144
- }
2
+ --gps-accent: #0ea5e9;
3
+ --gps-accent-glow: rgba(14, 165, 233, 0.15);
4
+ --gps-bg: #fff;
5
+ --gps-bg-muted: #f5f5f5;
6
+ --gps-bg-surface: #eee;
7
+ --gps-bg-overlay: #f0f0f0;
8
+ --gps-text: #1a1a1a;
9
+ --gps-text-muted: #4a4a4a;
10
+ --gps-text-dim: #707070;
11
+ --gps-border: #d0d0d0;
12
+ --gps-border-light: #e8e8e8;
13
+ --gps-shadow: 0 30px 60px rgba(0, 0, 0, 0.08);
14
+ --gps-danger: #ef4444;
15
+ --gps-danger-bg: rgba(239, 68, 68, 0.1);
16
+
17
+ width: 100%;
18
+ max-width: 1100px;
19
+ margin: 0 auto;
20
+ }
21
+
22
+ [data-theme="dark"] .gps-converter-ui,
23
+ .theme-dark .gps-converter-ui {
24
+ --gps-bg: #1a1a1a;
25
+ --gps-bg-muted: #2d2d2d;
26
+ --gps-bg-surface: #3a3a3a;
27
+ --gps-bg-overlay: #292929;
28
+ --gps-text: #f5f5f5;
29
+ --gps-text-muted: #b0b0b0;
30
+ --gps-text-dim: #888;
31
+ --gps-border: #4a4a4a;
32
+ --gps-border-light: #525252;
33
+ --gps-shadow: 0 30px 60px rgba(0, 0, 0, 0.08);
34
+ }
35
+
36
+ .gps-converter-ui .tech-mega-card {
37
+ background: var(--gps-bg);
38
+ backdrop-filter: blur(20px);
39
+ border: 1px solid var(--gps-border);
40
+ border-radius: 32px;
41
+ box-shadow: var(--gps-shadow);
42
+ overflow: hidden;
43
+ }
44
+
45
+ .gps-converter-ui .card-grid {
46
+ display: grid;
47
+ grid-template-columns: 420px 1fr;
48
+ }
49
+
50
+ .gps-converter-ui .config-sidebar {
51
+ padding: 2rem;
52
+ background: var(--gps-bg-overlay);
53
+ display: flex;
54
+ flex-direction: column;
55
+ gap: 2rem;
56
+ border-right: 1px solid var(--gps-border-light);
57
+ }
58
+
59
+ [data-theme="dark"] .gps-converter-ui .config-sidebar,
60
+ .theme-dark .gps-converter-ui .config-sidebar {
61
+ background: var(--gps-bg-surface);
62
+ border-right-color: var(--gps-border-light);
63
+ }
64
+
65
+ .gps-converter-ui .main-display {
66
+ padding: 2rem;
67
+ display: flex;
68
+ flex-direction: column;
69
+ gap: 2rem;
70
+ background: var(--gps-bg);
71
+ }
72
+
73
+ .gps-converter-ui .tech-section {
74
+ display: flex;
75
+ flex-direction: column;
76
+ gap: 1.5rem;
77
+ }
78
+
79
+ .gps-converter-ui .section-title {
80
+ font-size: 0.9rem;
81
+ font-weight: 800;
82
+ color: var(--gps-text);
83
+ text-transform: uppercase;
84
+ letter-spacing: 0.05em;
85
+ margin: 0;
86
+ }
87
+
88
+ .gps-converter-ui .divider {
89
+ height: 1px;
90
+ width: 100%;
91
+ background: linear-gradient(90deg, transparent, var(--gps-border-light), transparent);
92
+ }
93
+
94
+ .gps-converter-ui .compact-inputs {
95
+ display: grid;
96
+ grid-template-columns: 1fr 1fr;
97
+ gap: 1rem;
98
+ }
99
+
100
+ .gps-converter-ui .input-block {
101
+ display: flex;
102
+ flex-direction: column;
103
+ gap: 0.5rem;
104
+ }
105
+
106
+ .gps-converter-ui .field-label {
107
+ font-size: 0.75rem;
108
+ font-weight: 700;
109
+ color: var(--gps-text-muted);
110
+ text-transform: uppercase;
111
+ }
145
112
 
146
- .map-container {
147
- width: 100%;
148
- height: 350px;
149
- border-radius: 20px;
150
- overflow: hidden;
151
- background: #f1f5f9;
152
- border: 1px solid rgba(0, 0, 0, 0.05);
113
+ .gps-converter-ui .tech-input {
114
+ width: 100%;
115
+ padding: 0.75rem;
116
+ background: var(--gps-bg-surface);
117
+ border: 1px solid var(--gps-border);
118
+ border-radius: 12px;
119
+ font-weight: 600;
120
+ color: var(--gps-text);
153
121
  }
154
122
 
155
- .results-area {
156
- display: grid;
157
- grid-template-columns: 1fr 1fr;
158
- gap: 1.5rem;
123
+ .gps-converter-ui .mode-switch {
124
+ display: flex;
125
+ background: var(--gps-bg-surface);
126
+ padding: 0.3rem;
127
+ border-radius: 14px;
159
128
  }
160
129
 
161
- .result-box {
162
- background: rgba(255, 255, 255, 0.5);
163
- border: 1px solid rgba(0, 0, 0, 0.03);
164
- border-radius: 20px;
165
- padding: 1.5rem;
166
- display: flex;
167
- flex-direction: column;
168
- gap: 0.75rem;
130
+ .gps-converter-ui .mode-btn {
131
+ flex: 1;
132
+ padding: 0.6rem;
133
+ border-radius: 10px;
134
+ border: none;
135
+ background: transparent;
136
+ font-size: 0.8rem;
137
+ font-weight: 700;
138
+ color: var(--gps-text-muted);
139
+ cursor: pointer;
140
+ transition: all 0.2s;
169
141
  }
170
142
 
171
- :global(.dark) .result-box {
172
- background: rgba(255, 255, 255, 0.03);
173
- border-color: rgba(255, 255, 255, 0.05);
143
+ .gps-converter-ui .mode-btn.active {
144
+ background: var(--gps-bg);
145
+ color: var(--gps-accent);
146
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
174
147
  }
175
148
 
176
- .res-header {
177
- display: flex;
178
- justify-content: space-between;
179
- align-items: center;
149
+ .gps-converter-ui .map-container {
150
+ width: 100%;
151
+ height: 350px;
152
+ border-radius: 20px;
153
+ overflow: hidden;
154
+ background: var(--gps-bg-surface);
155
+ border: 1px solid var(--gps-border-light);
180
156
  }
181
157
 
182
- .res-label {
183
- font-size: 0.7rem;
184
- font-weight: 700;
185
- color: #94a3b8;
186
- text-transform: uppercase;
158
+ .gps-converter-ui .results-area {
159
+ display: grid;
160
+ grid-template-columns: 1fr 1fr;
161
+ gap: 1.5rem;
187
162
  }
188
163
 
189
- .copy-btn {
190
- background: transparent;
191
- border: 1px solid rgba(0, 0, 0, 0.1);
192
- color: #64748b;
193
- padding: 0.3rem 0.6rem;
194
- border-radius: 8px;
195
- font-size: 0.7rem;
196
- font-weight: 700;
197
- cursor: pointer;
198
- display: flex;
199
- align-items: center;
200
- gap: 0.4rem;
201
- transition: all 0.2s;
164
+ .gps-converter-ui .result-box {
165
+ background: var(--gps-bg-overlay);
166
+ border: 1px solid var(--gps-border-light);
167
+ border-radius: 20px;
168
+ padding: 1.5rem;
169
+ display: flex;
170
+ flex-direction: column;
171
+ gap: 0.75rem;
202
172
  }
203
173
 
204
- .copy-btn:hover {
205
- background: #0ea5e9;
206
- color: white;
207
- border-color: #0ea5e9;
174
+ .gps-converter-ui .res-header {
175
+ display: flex;
176
+ justify-content: space-between;
177
+ align-items: center;
208
178
  }
209
179
 
210
- .val-display {
211
- font-size: 1.35rem;
212
- font-weight: 800;
213
- color: #1e293b;
180
+ .gps-converter-ui .res-label {
181
+ font-size: 0.7rem;
182
+ font-weight: 700;
183
+ color: var(--gps-text-dim);
184
+ text-transform: uppercase;
214
185
  }
215
186
 
216
- :global(.dark) .val-display {
217
- color: #f8fafc;
187
+ .gps-converter-ui .copy-btn {
188
+ background: transparent;
189
+ border: 1px solid var(--gps-border);
190
+ color: var(--gps-text-muted);
191
+ padding: 0.3rem 0.6rem;
192
+ border-radius: 8px;
193
+ font-size: 0.7rem;
194
+ font-weight: 700;
195
+ cursor: pointer;
196
+ display: flex;
197
+ align-items: center;
198
+ gap: 0.4rem;
199
+ transition: all 0.2s;
218
200
  }
219
201
 
220
- .history-list {
221
- display: flex;
222
- flex-direction: column;
223
- gap: 0.5rem;
202
+ .gps-converter-ui .copy-btn:hover {
203
+ background: var(--gps-accent);
204
+ color: white;
205
+ border-color: var(--gps-accent);
224
206
  }
225
207
 
226
- .history-item {
227
- padding: 0.75rem 1rem;
228
- background: rgba(255, 255, 255, 0.4);
229
- border-radius: 12px;
230
- display: flex;
231
- justify-content: space-between;
232
- align-items: center;
233
- transition: all 0.2s;
208
+ .gps-converter-ui .val-display {
209
+ font-size: 1.35rem;
210
+ font-weight: 800;
211
+ color: var(--gps-text);
234
212
  }
235
213
 
236
- :global(.dark) .history-item {
237
- background: rgba(255, 255, 255, 0.02);
214
+ .gps-converter-ui .history-list {
215
+ display: flex;
216
+ flex-direction: column;
217
+ gap: 0.5rem;
238
218
  }
239
219
 
240
- .history-item:hover {
241
- background: rgba(0, 0, 0, 0.03);
220
+ .gps-converter-ui .history-item {
221
+ padding: 0.75rem 1rem;
222
+ background: var(--gps-bg-surface);
223
+ border-radius: 12px;
224
+ display: flex;
225
+ justify-content: space-between;
226
+ align-items: center;
227
+ transition: all 0.2s;
242
228
  }
243
229
 
244
- .hist-info {
245
- display: flex;
246
- flex-direction: column;
247
- gap: 0.1rem;
248
- cursor: pointer;
249
- flex: 1;
230
+ .gps-converter-ui .history-item:hover {
231
+ background: var(--gps-border);
250
232
  }
251
233
 
252
- .hist-coords {
253
- font-size: 0.85rem;
254
- font-weight: 700;
255
- color: #1e293b;
234
+ .gps-converter-ui .hist-info {
235
+ display: flex;
236
+ flex-direction: column;
237
+ gap: 0.1rem;
238
+ cursor: pointer;
239
+ flex: 1;
256
240
  }
257
241
 
258
- :global(.dark) .hist-coords {
259
- color: #f1f5f9;
242
+ .gps-converter-ui .hist-coords {
243
+ font-size: 0.85rem;
244
+ font-weight: 700;
245
+ color: var(--gps-text);
260
246
  }
261
247
 
262
- .hist-time {
263
- font-size: 0.65rem;
264
- color: #94a3b8;
265
- text-transform: uppercase;
266
- font-weight: 600;
248
+ .gps-converter-ui .hist-time {
249
+ font-size: 0.65rem;
250
+ color: var(--gps-text-dim);
251
+ text-transform: uppercase;
252
+ font-weight: 600;
267
253
  }
268
254
 
269
- .hist-actions {
270
- display: flex;
271
- gap: 0.5rem;
255
+ .gps-converter-ui .hist-actions {
256
+ display: flex;
257
+ gap: 0.5rem;
272
258
  }
273
259
 
274
- .action-btn {
275
- background: transparent;
276
- border: none;
277
- padding: 0.4rem;
278
- border-radius: 8px;
279
- color: #94a3b8;
280
- cursor: pointer;
281
- display: flex;
282
- align-items: center;
283
- justify-content: center;
284
- transition: all 0.2s;
260
+ .gps-converter-ui .action-btn {
261
+ background: transparent;
262
+ border: none;
263
+ padding: 0.4rem;
264
+ border-radius: 8px;
265
+ color: var(--gps-text-dim);
266
+ cursor: pointer;
267
+ display: flex;
268
+ align-items: center;
269
+ justify-content: center;
270
+ transition: all 0.2s;
285
271
  }
286
272
 
287
- .load-btn:hover {
288
- color: #0ea5e9;
289
- background: #0ea5e910;
273
+ .gps-converter-ui .load-btn:hover {
274
+ color: var(--gps-accent);
275
+ background: var(--gps-accent-glow);
290
276
  }
291
277
 
292
- .delete-btn:hover {
293
- color: #ef4444;
294
- background: #ef444410;
278
+ .gps-converter-ui .delete-btn:hover {
279
+ color: var(--gps-danger);
280
+ background: var(--gps-danger-bg);
295
281
  }
296
282
 
297
283
  @media (max-width: 992px) {
298
- .card-grid {
299
- grid-template-columns: 1fr;
300
- }
301
-
302
- .config-sidebar {
303
- border-right: none;
304
- border-bottom: 1px solid rgba(0, 0, 0, 0.05);
305
- }
306
-
307
- .results-area {
308
- grid-template-columns: 1fr;
309
- }
284
+ .gps-converter-ui .card-grid {
285
+ grid-template-columns: 1fr;
286
+ }
287
+
288
+ .gps-converter-ui .config-sidebar {
289
+ border-right: none;
290
+ border-bottom: 1px solid var(--gps-border-light);
291
+ }
292
+
293
+ [data-theme="dark"] .gps-converter-ui .config-sidebar,
294
+ .theme-dark .gps-converter-ui .config-sidebar {
295
+ border-bottom-color: var(--gps-border-light);
296
+ }
297
+
298
+ .gps-converter-ui .results-area {
299
+ grid-template-columns: 1fr;
300
+ }
310
301
  }