@jjlmoya/utils-babies 1.4.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.
@@ -1,5 +1,4 @@
1
1
  ---
2
- import './style.css';
3
2
  import { Icon } from 'astro-icon/components';
4
3
  import type { FertileDaysEstimatorUI } from './index';
5
4
  interface Props { ui: FertileDaysEstimatorUI; }
@@ -265,3 +264,550 @@ const { ui } = Astro.props;
265
264
 
266
265
  renderCalendars();
267
266
  </script>
267
+
268
+ <style>
269
+ .fde-container {
270
+ width: 100%;
271
+ max-width: 1000px;
272
+ margin: 0 auto;
273
+ background: #fff;
274
+ border-radius: 32px;
275
+ box-shadow: 0 25px 70px rgba(0, 0, 0, 0.08);
276
+ display: flex;
277
+ flex-direction: column;
278
+ overflow: hidden;
279
+ color: #111827;
280
+ border: 1px solid #e5e7eb;
281
+ min-height: 600px;
282
+ transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
283
+ }
284
+
285
+ .fde-step-indicator {
286
+ padding: 1.5rem 2.5rem;
287
+ background: #fdf2f8;
288
+ border-bottom: 1px solid #fbcfe8;
289
+ display: flex;
290
+ justify-content: center;
291
+ gap: 3rem;
292
+ }
293
+
294
+ .fde-step-item {
295
+ display: flex;
296
+ align-items: center;
297
+ gap: 0.75rem;
298
+ font-size: 0.9rem;
299
+ font-weight: 700;
300
+ color: #9d174d;
301
+ opacity: 0.4;
302
+ transition: opacity 0.3s ease;
303
+ }
304
+
305
+ .fde-step-item.fde-step-active {
306
+ opacity: 1;
307
+ }
308
+
309
+ .fde-step-number {
310
+ width: 28px;
311
+ height: 28px;
312
+ background: #db2777;
313
+ color: white;
314
+ border-radius: 50%;
315
+ display: flex;
316
+ align-items: center;
317
+ justify-content: center;
318
+ font-size: 0.75rem;
319
+ }
320
+
321
+ .fde-step-first {
322
+ flex: 1;
323
+ display: flex;
324
+ flex-direction: column;
325
+ align-items: center;
326
+ justify-content: center;
327
+ padding: 4rem 2rem;
328
+ text-align: center;
329
+ gap: 3rem;
330
+ background: radial-gradient(circle at top right, #fff1f2, transparent),
331
+ radial-gradient(circle at bottom left, #fdf2f8, transparent);
332
+ transition: opacity 0.4s ease, transform 0.4s ease;
333
+ }
334
+
335
+ .fde-step-first.fde-hidden {
336
+ display: none;
337
+ }
338
+
339
+ .fde-step-header h2 {
340
+ font-size: 2.5rem;
341
+ font-weight: 950;
342
+ letter-spacing: -0.04em;
343
+ color: #9d174d;
344
+ margin-bottom: 0.75rem;
345
+ line-height: 1;
346
+ }
347
+
348
+ .fde-step-header p {
349
+ font-size: 1.15rem;
350
+ color: #64748b;
351
+ max-width: 400px;
352
+ margin: 0 auto;
353
+ }
354
+
355
+ .fde-calendar-card {
356
+ max-width: 500px;
357
+ width: 100%;
358
+ background: #fff;
359
+ padding: 2.5rem;
360
+ border-radius: 32px;
361
+ border: 1px solid rgba(251, 207, 232, 0.5);
362
+ box-shadow: 0 30px 60px -12px rgba(219, 39, 119, 0.15),
363
+ 0 18px 36px -18px rgba(0, 0, 0, 0.1);
364
+ transform: translateY(0);
365
+ transition: transform 0.3s ease;
366
+ }
367
+
368
+ .fde-calendar-card:hover {
369
+ transform: translateY(-5px);
370
+ }
371
+
372
+ .fde-pulse-hint {
373
+ font-size: 0.95rem;
374
+ font-weight: 800;
375
+ color: #db2777;
376
+ background: #fdf2f8;
377
+ padding: 0.75rem 1.5rem;
378
+ border-radius: 100px;
379
+ border: 1px solid #fbcfe8;
380
+ animation: fde-pulse 2s infinite;
381
+ }
382
+
383
+ @keyframes fde-pulse {
384
+ 0% { opacity: 0.4; }
385
+ 50% { opacity: 1; }
386
+ 100% { opacity: 0.4; }
387
+ }
388
+
389
+ .fde-layout {
390
+ display: none;
391
+ grid-template-columns: 350px 1fr;
392
+ flex: 1;
393
+ opacity: 0;
394
+ transition: opacity 0.5s ease;
395
+ }
396
+
397
+ .fde-layout.fde-active {
398
+ display: grid;
399
+ opacity: 1;
400
+ }
401
+
402
+ .fde-sidebar {
403
+ background: #fdf2f8;
404
+ padding: 2.5rem;
405
+ display: flex;
406
+ flex-direction: column;
407
+ gap: 2.5rem;
408
+ border-right: 1px solid #fbcfe8;
409
+ }
410
+
411
+ .fde-sidebar-header h2 {
412
+ font-size: 1.5rem;
413
+ font-weight: 800;
414
+ color: #9d174d;
415
+ margin: 0 0 0.5rem;
416
+ }
417
+
418
+ .fde-sidebar-header p {
419
+ font-size: 0.85rem;
420
+ color: #be123c;
421
+ opacity: 0.8;
422
+ margin: 0;
423
+ }
424
+
425
+ .fde-input-card {
426
+ background: #fff;
427
+ padding: 1.5rem;
428
+ border-radius: 20px;
429
+ border: 1px solid #fbcfe8;
430
+ box-shadow: 0 4px 15px rgba(219, 39, 119, 0.05);
431
+ }
432
+
433
+ .fde-input-card label {
434
+ display: flex;
435
+ align-items: center;
436
+ gap: 0.75rem;
437
+ font-size: 0.9rem;
438
+ font-weight: 700;
439
+ color: #9d174d;
440
+ margin-bottom: 1rem;
441
+ }
442
+
443
+ .fde-input-card label svg,
444
+ .fde-input-card label [data-icon] {
445
+ width: 1.25rem;
446
+ height: 1.25rem;
447
+ }
448
+
449
+ .fde-range-control {
450
+ display: flex;
451
+ flex-direction: column;
452
+ gap: 1rem;
453
+ }
454
+
455
+ .fde-range-control input[type='range'] {
456
+ width: 100%;
457
+ accent-color: #db2777;
458
+ cursor: pointer;
459
+ }
460
+
461
+ .fde-range-value {
462
+ text-align: center;
463
+ font-size: 2rem;
464
+ font-weight: 800;
465
+ color: #db2777;
466
+ }
467
+
468
+ .fde-range-value span {
469
+ font-size: 0.9rem;
470
+ font-weight: 600;
471
+ color: #be123c;
472
+ }
473
+
474
+ .fde-results {
475
+ display: flex;
476
+ flex-direction: column;
477
+ gap: 1rem;
478
+ }
479
+
480
+ .fde-stat {
481
+ display: flex;
482
+ align-items: center;
483
+ gap: 1rem;
484
+ padding: 1.25rem;
485
+ background: #fff;
486
+ border-radius: 16px;
487
+ border: 1px solid #fce7f3;
488
+ }
489
+
490
+ .fde-stat svg,
491
+ .fde-stat [data-icon] {
492
+ width: 2rem;
493
+ height: 2rem;
494
+ border-radius: 10px;
495
+ padding: 0.4rem;
496
+ flex-shrink: 0;
497
+ }
498
+
499
+ .fde-stat-ovulation svg,
500
+ .fde-stat-ovulation [data-icon] {
501
+ background: #db2777;
502
+ color: #fff;
503
+ }
504
+
505
+ .fde-stat-fertile svg,
506
+ .fde-stat-fertile [data-icon] {
507
+ background: #fdf2f8;
508
+ color: #db2777;
509
+ border: 1px solid #f9a8d4;
510
+ }
511
+
512
+ .fde-stat-period svg,
513
+ .fde-stat-period [data-icon] {
514
+ background: #ffe4e6;
515
+ color: #be123c;
516
+ border: 1px solid #fca5a5;
517
+ }
518
+
519
+ .fde-stat-info {
520
+ display: flex;
521
+ flex-direction: column;
522
+ }
523
+
524
+ .fde-stat-label {
525
+ font-size: 0.75rem;
526
+ font-weight: 700;
527
+ text-transform: uppercase;
528
+ color: #64748b;
529
+ }
530
+
531
+ .fde-stat-value {
532
+ font-size: 1.1rem;
533
+ font-weight: 900;
534
+ color: #1e293b;
535
+ }
536
+
537
+ .fde-main {
538
+ background: #fff;
539
+ padding: 2.5rem;
540
+ display: flex;
541
+ flex-direction: column;
542
+ gap: 2rem;
543
+ }
544
+
545
+ .fde-calendar-wrapper {
546
+ background: #fff;
547
+ }
548
+
549
+ .fde-cal-nav {
550
+ display: flex;
551
+ justify-content: space-between;
552
+ align-items: center;
553
+ margin-bottom: 2rem;
554
+ }
555
+
556
+ .fde-cal-nav h3 {
557
+ font-size: 1.5rem;
558
+ font-weight: 900;
559
+ color: #111827;
560
+ margin: 0;
561
+ text-transform: capitalize;
562
+ }
563
+
564
+ .fde-nav-buttons {
565
+ display: flex;
566
+ gap: 0.5rem;
567
+ }
568
+
569
+ .fde-nav-btn {
570
+ width: 40px;
571
+ height: 40px;
572
+ border-radius: 10px;
573
+ border: 1px solid #e5e7eb;
574
+ background: #fff;
575
+ display: flex;
576
+ align-items: center;
577
+ justify-content: center;
578
+ cursor: pointer;
579
+ transition: 0.2s all ease;
580
+ color: #374151;
581
+ }
582
+
583
+ .fde-nav-btn:hover {
584
+ background: #f3f4f6;
585
+ border-color: #d1d5db;
586
+ }
587
+
588
+ .fde-grid {
589
+ display: grid;
590
+ grid-template-columns: repeat(7, 1fr);
591
+ gap: 8px;
592
+ }
593
+
594
+ .fde-day-header {
595
+ text-align: center;
596
+ font-size: 0.8rem;
597
+ font-weight: 800;
598
+ color: #9ca3af;
599
+ text-transform: uppercase;
600
+ padding-bottom: 1rem;
601
+ }
602
+
603
+ .fde-day {
604
+ aspect-ratio: 1;
605
+ display: flex;
606
+ align-items: center;
607
+ justify-content: center;
608
+ font-size: 1rem;
609
+ font-weight: 700;
610
+ border-radius: 14px;
611
+ background: #fff;
612
+ color: #374151;
613
+ cursor: pointer;
614
+ transition: 0.2s all ease;
615
+ border: 1px solid #f3f4f6;
616
+ }
617
+
618
+ .fde-day:hover:not(.fde-day-empty) {
619
+ border-color: #db2777;
620
+ background: #fdf2f8;
621
+ }
622
+
623
+ .fde-day-empty {
624
+ background: transparent;
625
+ border: none;
626
+ cursor: default;
627
+ }
628
+
629
+ .fde-day-selected {
630
+ background: #be123c;
631
+ color: #fff;
632
+ border: none;
633
+ box-shadow: 0 8px 20px rgba(190, 18, 60, 0.3);
634
+ }
635
+
636
+ .fde-day-period {
637
+ background: #ffe4e6;
638
+ color: #be123c;
639
+ border: none;
640
+ }
641
+
642
+ .fde-day-fertile {
643
+ background: #fdf2f8;
644
+ color: #db2777;
645
+ border: none;
646
+ }
647
+
648
+ .fde-day-ovulation {
649
+ background: #db2777;
650
+ color: #fff;
651
+ box-shadow: 0 8px 20px rgba(219, 39, 119, 0.3);
652
+ border: none;
653
+ }
654
+
655
+ .fde-day-today {
656
+ border: 2px solid #111827;
657
+ }
658
+
659
+ .fde-legend {
660
+ display: flex;
661
+ justify-content: center;
662
+ gap: 2rem;
663
+ margin-top: 2rem;
664
+ padding: 1.25rem;
665
+ background: #f9fafb;
666
+ border-radius: 20px;
667
+ }
668
+
669
+ .fde-legend-item {
670
+ display: flex;
671
+ align-items: center;
672
+ gap: 0.5rem;
673
+ font-size: 0.85rem;
674
+ font-weight: 700;
675
+ color: #4b5563;
676
+ }
677
+
678
+ .fde-legend-dot {
679
+ width: 12px;
680
+ height: 12px;
681
+ border-radius: 4px;
682
+ }
683
+
684
+ .fde-dot-period { background: #ffe4e6; }
685
+ .fde-dot-fertile { background: #fdf2f8; }
686
+ .fde-dot-ovulation { background: #db2777; }
687
+ .fde-dot-selected { background: #be123c; }
688
+
689
+ :global(.theme-dark) .fde-container {
690
+ background: #18181b;
691
+ border-color: #27272a;
692
+ box-shadow: 0 25px 70px rgba(0, 0, 0, 0.5);
693
+ color: #fff;
694
+ }
695
+
696
+ :global(.theme-dark) .fde-sidebar {
697
+ background: #111113;
698
+ border-right-color: #27272a;
699
+ }
700
+
701
+ :global(.theme-dark) .fde-main { background: #18181b; }
702
+
703
+ :global(.theme-dark) .fde-sidebar-header h2 { color: #f472b6; }
704
+ :global(.theme-dark) .fde-sidebar-header p { color: #f9a8d4; }
705
+
706
+ :global(.theme-dark) .fde-input-card {
707
+ background: #1e1e21;
708
+ border-color: #27272a;
709
+ }
710
+
711
+ :global(.theme-dark) .fde-stat {
712
+ background: #1e1e21;
713
+ border-color: #27272a;
714
+ }
715
+
716
+ :global(.theme-dark) .fde-stat-value { color: #fff; }
717
+ :global(.theme-dark) .fde-cal-nav h3 { color: #fff; }
718
+
719
+ :global(.theme-dark) .fde-day {
720
+ background: #1e1e21;
721
+ border-color: #27272a;
722
+ color: #e5e7eb;
723
+ }
724
+
725
+ :global(.theme-dark) .fde-day:hover:not(.fde-day-empty) { background: #27272a; }
726
+ :global(.theme-dark) .fde-legend { background: #111113; }
727
+ :global(.theme-dark) .fde-legend-item { color: #9ca3af; }
728
+
729
+ @media (max-width: 900px) {
730
+ .fde-layout { grid-template-columns: 1fr; }
731
+ .fde-sidebar {
732
+ border-right: none;
733
+ border-bottom: 1px solid #fbcfe8;
734
+ }
735
+ }
736
+
737
+ @media (max-width: 768px) {
738
+ .fde-container { border-radius: 1.5rem; }
739
+
740
+ .fde-step-indicator {
741
+ padding: 1rem;
742
+ gap: 1rem;
743
+ flex-wrap: wrap;
744
+ }
745
+
746
+ .fde-step-first {
747
+ padding: 2rem 1rem;
748
+ gap: 1.5rem;
749
+ }
750
+
751
+ .fde-calendar-card {
752
+ padding: 1rem;
753
+ border-radius: 1.5rem;
754
+ }
755
+
756
+ .fde-step-header h2 { font-size: 1.75rem; }
757
+ .fde-step-header p { font-size: 0.95rem; }
758
+
759
+ .fde-sidebar {
760
+ padding: 1.25rem;
761
+ gap: 1.5rem;
762
+ }
763
+
764
+ .fde-sidebar-header h2 { font-size: 1.25rem; }
765
+
766
+ .fde-main {
767
+ padding: 1.25rem;
768
+ gap: 1.25rem;
769
+ }
770
+
771
+ .fde-input-card {
772
+ padding: 1rem;
773
+ border-radius: 1rem;
774
+ }
775
+
776
+ .fde-cal-nav { margin-bottom: 1rem; }
777
+ .fde-cal-nav h3 { font-size: 1.2rem; }
778
+ .fde-nav-btn {
779
+ width: 32px;
780
+ height: 32px;
781
+ }
782
+
783
+ .fde-grid { gap: 4px; }
784
+
785
+ .fde-day-header {
786
+ padding-bottom: 0.5rem;
787
+ font-size: 0.7rem;
788
+ }
789
+
790
+ .fde-day {
791
+ font-size: 0.85rem;
792
+ border-radius: 8px;
793
+ }
794
+
795
+ .fde-legend {
796
+ flex-direction: column;
797
+ gap: 0.75rem;
798
+ padding: 1rem;
799
+ align-items: flex-start;
800
+ border-radius: 1rem;
801
+ }
802
+
803
+ .fde-stat {
804
+ padding: 1rem;
805
+ gap: 0.75rem;
806
+ flex-direction: column;
807
+ text-align: center;
808
+ align-items: center;
809
+ }
810
+
811
+ .fde-stat-info { align-items: center; }
812
+ }
813
+ </style>