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