@jjlmoya/utils-drones 1.3.0 → 1.5.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.
@@ -3,7 +3,6 @@ import GpsInputs from "./components/GpsInputs.astro";
3
3
  import GpsResults from "./components/GpsResults.astro";
4
4
  import GpsMap from "./components/GpsMap.astro";
5
5
  import GpsHistory from "./components/GpsHistory.astro";
6
- import "./GpsCoordinatesConverter.css";
7
6
 
8
7
  const { ui } = Astro.props;
9
8
  ---
@@ -31,7 +30,7 @@ const { ui } = Astro.props;
31
30
  </div>
32
31
  </div>
33
32
 
34
- <script>
33
+ <script is:inline>
35
34
  let mode = 'DD';
36
35
  let mapInstance = null;
37
36
  let L = null;
@@ -353,3 +352,307 @@ const { ui } = Astro.props;
353
352
 
354
353
  init();
355
354
  </script>
355
+
356
+ <style>
357
+ .gps-converter-ui {
358
+ --gps-accent: #0ea5e9;
359
+ --gps-accent-glow: rgba(14, 165, 233, 0.15);
360
+ --gps-bg: #fff;
361
+ --gps-bg-muted: #f5f5f5;
362
+ --gps-bg-surface: #eee;
363
+ --gps-bg-overlay: #f0f0f0;
364
+ --gps-text: #1a1a1a;
365
+ --gps-text-muted: #4a4a4a;
366
+ --gps-text-dim: #707070;
367
+ --gps-border: #d0d0d0;
368
+ --gps-border-light: #e8e8e8;
369
+ --gps-shadow: 0 30px 60px rgba(0, 0, 0, 0.08);
370
+ --gps-danger: #ef4444;
371
+ --gps-danger-bg: rgba(239, 68, 68, 0.1);
372
+
373
+ width: 100%;
374
+ max-width: 1100px;
375
+ margin: 0 auto;
376
+ }
377
+
378
+ :global([data-theme="dark"]) .gps-converter-ui,
379
+ :global(.theme-dark) .gps-converter-ui {
380
+ --gps-bg: #1a1a1a;
381
+ --gps-bg-muted: #2d2d2d;
382
+ --gps-bg-surface: #3a3a3a;
383
+ --gps-bg-overlay: #292929;
384
+ --gps-text: #f5f5f5;
385
+ --gps-text-muted: #b0b0b0;
386
+ --gps-text-dim: #888;
387
+ --gps-border: #4a4a4a;
388
+ --gps-border-light: #525252;
389
+ --gps-shadow: 0 30px 60px rgba(0, 0, 0, 0.08);
390
+ }
391
+
392
+ .gps-converter-ui .tech-mega-card {
393
+ background: var(--gps-bg);
394
+ backdrop-filter: blur(20px);
395
+ border: 1px solid var(--gps-border);
396
+ border-radius: 32px;
397
+ box-shadow: var(--gps-shadow);
398
+ overflow: hidden;
399
+ }
400
+
401
+ .gps-converter-ui .card-grid {
402
+ display: grid;
403
+ grid-template-columns: 420px 1fr;
404
+ }
405
+
406
+ .gps-converter-ui .config-sidebar {
407
+ padding: 2rem;
408
+ background: var(--gps-bg-overlay);
409
+ display: flex;
410
+ flex-direction: column;
411
+ gap: 2rem;
412
+ border-right: 1px solid var(--gps-border-light);
413
+ }
414
+
415
+ :global([data-theme="dark"]) .gps-converter-ui .config-sidebar,
416
+ :global(.theme-dark) .gps-converter-ui .config-sidebar {
417
+ background: var(--gps-bg-surface);
418
+ border-right-color: var(--gps-border-light);
419
+ }
420
+
421
+ .gps-converter-ui .main-display {
422
+ padding: 2rem;
423
+ display: flex;
424
+ flex-direction: column;
425
+ gap: 2rem;
426
+ background: var(--gps-bg);
427
+ }
428
+
429
+ .gps-converter-ui .tech-section {
430
+ display: flex;
431
+ flex-direction: column;
432
+ gap: 1.5rem;
433
+ }
434
+
435
+ .gps-converter-ui .section-title {
436
+ font-size: 0.9rem;
437
+ font-weight: 800;
438
+ color: var(--gps-text);
439
+ text-transform: uppercase;
440
+ letter-spacing: 0.05em;
441
+ margin: 0;
442
+ }
443
+
444
+ .gps-converter-ui .divider {
445
+ height: 1px;
446
+ width: 100%;
447
+ background: linear-gradient(90deg, transparent, var(--gps-border-light), transparent);
448
+ }
449
+
450
+ .gps-converter-ui .compact-inputs {
451
+ display: grid;
452
+ grid-template-columns: 1fr 1fr;
453
+ gap: 1rem;
454
+ }
455
+
456
+ .gps-converter-ui .input-block {
457
+ display: flex;
458
+ flex-direction: column;
459
+ gap: 0.5rem;
460
+ }
461
+
462
+ .gps-converter-ui .field-label {
463
+ font-size: 0.75rem;
464
+ font-weight: 700;
465
+ color: var(--gps-text-muted);
466
+ text-transform: uppercase;
467
+ }
468
+
469
+ .gps-converter-ui .tech-input {
470
+ width: 100%;
471
+ padding: 0.75rem;
472
+ background: var(--gps-bg-surface);
473
+ border: 1px solid var(--gps-border);
474
+ border-radius: 12px;
475
+ font-weight: 600;
476
+ color: var(--gps-text);
477
+ }
478
+
479
+ .gps-converter-ui .mode-switch {
480
+ display: flex;
481
+ background: var(--gps-bg-surface);
482
+ padding: 0.3rem;
483
+ border-radius: 14px;
484
+ }
485
+
486
+ .gps-converter-ui .mode-btn {
487
+ flex: 1;
488
+ padding: 0.6rem;
489
+ border-radius: 10px;
490
+ border: none;
491
+ background: transparent;
492
+ font-size: 0.8rem;
493
+ font-weight: 700;
494
+ color: var(--gps-text-muted);
495
+ cursor: pointer;
496
+ transition: all 0.2s;
497
+ }
498
+
499
+ .gps-converter-ui .mode-btn.active {
500
+ background: var(--gps-bg);
501
+ color: var(--gps-accent);
502
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
503
+ }
504
+
505
+ .gps-converter-ui .map-container {
506
+ width: 100%;
507
+ height: 350px;
508
+ border-radius: 20px;
509
+ overflow: hidden;
510
+ background: var(--gps-bg-surface);
511
+ border: 1px solid var(--gps-border-light);
512
+ }
513
+
514
+ .gps-converter-ui .results-area {
515
+ display: grid;
516
+ grid-template-columns: 1fr 1fr;
517
+ gap: 1.5rem;
518
+ }
519
+
520
+ .gps-converter-ui .result-box {
521
+ background: var(--gps-bg-overlay);
522
+ border: 1px solid var(--gps-border-light);
523
+ border-radius: 20px;
524
+ padding: 1.5rem;
525
+ display: flex;
526
+ flex-direction: column;
527
+ gap: 0.75rem;
528
+ }
529
+
530
+ .gps-converter-ui .res-header {
531
+ display: flex;
532
+ justify-content: space-between;
533
+ align-items: center;
534
+ }
535
+
536
+ .gps-converter-ui .res-label {
537
+ font-size: 0.7rem;
538
+ font-weight: 700;
539
+ color: var(--gps-text-dim);
540
+ text-transform: uppercase;
541
+ }
542
+
543
+ .gps-converter-ui .copy-btn {
544
+ background: transparent;
545
+ border: 1px solid var(--gps-border);
546
+ color: var(--gps-text-muted);
547
+ padding: 0.3rem 0.6rem;
548
+ border-radius: 8px;
549
+ font-size: 0.7rem;
550
+ font-weight: 700;
551
+ cursor: pointer;
552
+ display: flex;
553
+ align-items: center;
554
+ gap: 0.4rem;
555
+ transition: all 0.2s;
556
+ }
557
+
558
+ .gps-converter-ui .copy-btn:hover {
559
+ background: var(--gps-accent);
560
+ color: white;
561
+ border-color: var(--gps-accent);
562
+ }
563
+
564
+ .gps-converter-ui .val-display {
565
+ font-size: 1.35rem;
566
+ font-weight: 800;
567
+ color: var(--gps-text);
568
+ }
569
+
570
+ .gps-converter-ui .history-list {
571
+ display: flex;
572
+ flex-direction: column;
573
+ gap: 0.5rem;
574
+ }
575
+
576
+ .gps-converter-ui .history-item {
577
+ padding: 0.75rem 1rem;
578
+ background: var(--gps-bg-surface);
579
+ border-radius: 12px;
580
+ display: flex;
581
+ justify-content: space-between;
582
+ align-items: center;
583
+ transition: all 0.2s;
584
+ }
585
+
586
+ .gps-converter-ui .history-item:hover {
587
+ background: var(--gps-border);
588
+ }
589
+
590
+ .gps-converter-ui .hist-info {
591
+ display: flex;
592
+ flex-direction: column;
593
+ gap: 0.1rem;
594
+ cursor: pointer;
595
+ flex: 1;
596
+ }
597
+
598
+ .gps-converter-ui .hist-coords {
599
+ font-size: 0.85rem;
600
+ font-weight: 700;
601
+ color: var(--gps-text);
602
+ }
603
+
604
+ .gps-converter-ui .hist-time {
605
+ font-size: 0.65rem;
606
+ color: var(--gps-text-dim);
607
+ text-transform: uppercase;
608
+ font-weight: 600;
609
+ }
610
+
611
+ .gps-converter-ui .hist-actions {
612
+ display: flex;
613
+ gap: 0.5rem;
614
+ }
615
+
616
+ .gps-converter-ui .action-btn {
617
+ background: transparent;
618
+ border: none;
619
+ padding: 0.4rem;
620
+ border-radius: 8px;
621
+ color: var(--gps-text-dim);
622
+ cursor: pointer;
623
+ display: flex;
624
+ align-items: center;
625
+ justify-content: center;
626
+ transition: all 0.2s;
627
+ }
628
+
629
+ .gps-converter-ui .load-btn:hover {
630
+ color: var(--gps-accent);
631
+ background: var(--gps-accent-glow);
632
+ }
633
+
634
+ .gps-converter-ui .delete-btn:hover {
635
+ color: var(--gps-danger);
636
+ background: var(--gps-danger-bg);
637
+ }
638
+
639
+ @media (max-width: 992px) {
640
+ .gps-converter-ui .card-grid {
641
+ grid-template-columns: 1fr;
642
+ }
643
+
644
+ .gps-converter-ui .config-sidebar {
645
+ border-right: none;
646
+ border-bottom: 1px solid var(--gps-border-light);
647
+ }
648
+
649
+ :global([data-theme="dark"]) .gps-converter-ui .config-sidebar,
650
+ :global(.theme-dark) .gps-converter-ui .config-sidebar {
651
+ border-bottom-color: var(--gps-border-light);
652
+ }
653
+
654
+ .gps-converter-ui .results-area {
655
+ grid-template-columns: 1fr;
656
+ }
657
+ }
658
+ </style>