Hugging Face's logo

Spaces:
shukdevdatta123
/
DhakaMetroWeb
Running

App Files Community
shukdevdatta123 commited on
Commit
99840f0
·
verified ·
1 Parent(s): feed0f9

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +1116 -1
index.html CHANGED
@@ -1,4 +1,4 @@
1
- <script type="text/javascript">
2
  var gk_isXlsx = false;
3
  var gk_xlsxFileLookup = {};
4
  var gk_fileData = {};
@@ -486,4 +486,1119 @@
486
  }
487
  </script>
488
  </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
489
  </html>
 
1
+ <!-- <script type="text/javascript">
2
  var gk_isXlsx = false;
3
  var gk_xlsxFileLookup = {};
4
  var gk_fileData = {};
 
486
  }
487
  </script>
488
  </body>
489
+ </html> -->
490
+
491
+ <!DOCTYPE html>
492
+ <html lang="en">
493
+ <head>
494
+ <meta charset="UTF-8">
495
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
496
+ <title>Dhaka Metro Rail Fare Checker</title>
497
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
498
+ <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
499
+ <style>
500
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
501
+
502
+ :root {
503
+ --primary: #3498db;
504
+ --primary-dark: #2980b9;
505
+ --secondary: #e74c3c;
506
+ --accent: #f39c12;
507
+ --dark: #2c3e50;
508
+ --light: #ecf0f1;
509
+ --success: #2ecc71;
510
+ --gray-light: #f8f9fa;
511
+ --shadow: 0 10px 30px rgba(0,0,0,0.1);
512
+ --shadow-sm: 0 5px 15px rgba(0,0,0,0.05);
513
+ --transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
514
+ }
515
+
516
+ * {
517
+ margin: 0;
518
+ padding: 0;
519
+ box-sizing: border-box;
520
+ }
521
+
522
+ body {
523
+ font-family: 'Poppins', sans-serif;
524
+ background-color: var(--light);
525
+ color: var(--dark);
526
+ overflow-x: hidden;
527
+ position: relative;
528
+ }
529
+
530
+ /* Preloader */
531
+ .preloader {
532
+ position: fixed;
533
+ top: 0;
534
+ left: 0;
535
+ width: 100%;
536
+ height: 100%;
537
+ background: var(--primary);
538
+ z-index: 9999;
539
+ display: flex;
540
+ justify-content: center;
541
+ align-items: center;
542
+ animation: fadeOut 1.5s ease-in-out forwards;
543
+ animation-delay: 2s;
544
+ }
545
+
546
+ .preloader__train {
547
+ width: 100px;
548
+ height: 40px;
549
+ background: white;
550
+ border-radius: 10px;
551
+ position: relative;
552
+ animation: trainMove 2s infinite;
553
+ }
554
+
555
+ .preloader__train:before {
556
+ content: "🚇";
557
+ position: absolute;
558
+ font-size: 24px;
559
+ top: 5px;
560
+ left: 10px;
561
+ }
562
+
563
+ .preloader__track {
564
+ width: 200px;
565
+ height: 10px;
566
+ background: rgba(255,255,255,0.3);
567
+ border-radius: 5px;
568
+ margin-top: 20px;
569
+ position: relative;
570
+ overflow: hidden;
571
+ }
572
+
573
+ .preloader__track:before {
574
+ content: "";
575
+ position: absolute;
576
+ width: 30%;
577
+ height: 100%;
578
+ background: white;
579
+ animation: trackMove 1s infinite linear;
580
+ }
581
+
582
+ header {
583
+ background: linear-gradient(135deg, var(--primary), var(--primary-dark));
584
+ color: white;
585
+ padding: 2rem;
586
+ text-align: center;
587
+ box-shadow: var(--shadow);
588
+ position: relative;
589
+ overflow: hidden;
590
+ }
591
+
592
+ header:before {
593
+ content: "";
594
+ position: absolute;
595
+ top: -50%;
596
+ left: -50%;
597
+ width: 200%;
598
+ height: 200%;
599
+ background: radial-gradient(circle, rgba(255,255,255,0.1) 10%, transparent 70%);
600
+ animation: headerPulse 15s infinite linear;
601
+ }
602
+
603
+ header h1 {
604
+ font-size: 2.5rem;
605
+ font-weight: 700;
606
+ display: flex;
607
+ align-items: center;
608
+ justify-content: center;
609
+ gap: 15px;
610
+ position: relative;
611
+ z-index: 2;
612
+ }
613
+
614
+ header h1:after {
615
+ content: "Premium";
616
+ position: absolute;
617
+ top: -10px;
618
+ right: -20px;
619
+ background: var(--accent);
620
+ color: white;
621
+ font-size: 0.8rem;
622
+ padding: 3px 10px;
623
+ border-radius: 15px;
624
+ transform: rotate(15deg);
625
+ animation: badgePulse 2s infinite;
626
+ }
627
+
628
+ .metro-icon {
629
+ font-size: 2.5rem;
630
+ animation: trainIcon 4s infinite;
631
+ }
632
+
633
+ .page-wrapper {
634
+ display: flex;
635
+ position: relative;
636
+ min-height: calc(100vh - 97px); /* keep or adjust */
637
+ }
638
+
639
+ .page-wrapper main {
640
+ flex: 1 1 0%;
641
+ transition: margin 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), width 0.4s;
642
+ }
643
+
644
+ .page-wrapper .sidebar-toggle {
645
+ position: absolute;
646
+ top: 40px;
647
+ left: 320px;
648
+ transition: left 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
649
+ z-index: 200;
650
+ }
651
+
652
+ .page-wrapper .sidebar-toggle.sidebar-at-edge {
653
+ left: 0;
654
+ }
655
+
656
+
657
+
658
+ aside#sidebar {
659
+ width: 320px;
660
+ min-width: 320px;
661
+ max-width: 320px;
662
+ transition: width 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.4s;
663
+ height: auto;
664
+ padding: 30px 25px;
665
+ overflow-y: auto;
666
+ background: white;
667
+ box-shadow: var(--shadow);
668
+ z-index: 100;
669
+ position: relative;
670
+ }
671
+
672
+ aside#sidebar.collapsed {
673
+ width: 0 !important;
674
+ min-width: 0 !important;
675
+ max-width: 0 !important;
676
+ padding: 0 !important;
677
+ overflow: hidden;
678
+ }
679
+
680
+ .sidebar-toggle {
681
+ position: absolute;
682
+ top: 40px;
683
+ left: 320px; /* default: aligns with sidebar edge */
684
+ transition: left 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
685
+ z-index: 200;
686
+ }
687
+
688
+ #sidebar.collapsed ~ .sidebar-toggle {
689
+ left: 0; /* when sidebar is hidden, move chevron to edge */
690
+ }
691
+
692
+ .sidebar-toggle:hover {
693
+ transform: scale(1.1);
694
+ }
695
+
696
+ .sidebar-header {
697
+ display: flex;
698
+ align-items: center;
699
+ gap: 10px;
700
+ margin-bottom: 20px;
701
+ padding-bottom: 15px;
702
+ border-bottom: 2px dashed rgba(0,0,0,0.1);
703
+ }
704
+
705
+ .sidebar-icon {
706
+ width: 40px;
707
+ height: 40px;
708
+ background: var(--primary);
709
+ border-radius: 12px;
710
+ display: flex;
711
+ justify-content: center;
712
+ align-items: center;
713
+ color: white;
714
+ }
715
+
716
+ aside h2 {
717
+ color: var(--dark);
718
+ font-weight: 600;
719
+ font-size: 1.5rem;
720
+ margin-bottom: 15px;
721
+ position: relative;
722
+ }
723
+
724
+ .instruction-step {
725
+ background: var(--gray-light);
726
+ padding: 15px;
727
+ border-radius: 12px;
728
+ margin-bottom: 15px;
729
+ position: relative;
730
+ transition: var(--transition);
731
+ box-shadow: var(--shadow-sm);
732
+ }
733
+
734
+ .instruction-step:hover {
735
+ transform: translateY(-5px);
736
+ box-shadow: var(--shadow);
737
+ }
738
+
739
+ .step-number {
740
+ position: absolute;
741
+ top: -10px;
742
+ left: -10px;
743
+ width: 30px;
744
+ height: 30px;
745
+ background: var(--primary);
746
+ color: white;
747
+ border-radius: 50%;
748
+ display: flex;
749
+ justify-content: center;
750
+ align-items: center;
751
+ font-weight: 600;
752
+ }
753
+
754
+ .instruction-step h3 {
755
+ margin-bottom: 10px;
756
+ padding-left: 20px;
757
+ color: var(--primary-dark);
758
+ }
759
+
760
+ .instruction-step p {
761
+ line-height: 1.6;
762
+ font-size: 0.95rem;
763
+ }
764
+
765
+ .support-link {
766
+ display: flex;
767
+ align-items: center;
768
+ gap: 10px;
769
+ background: var(--primary);
770
+ color: white;
771
+ padding: 12px 15px;
772
+ border-radius: 12px;
773
+ text-decoration: none;
774
+ margin-top: 25px;
775
+ transition: var(--transition);
776
+ }
777
+
778
+ .support-link:hover {
779
+ background: var(--primary-dark);
780
+ transform: translateY(-3px);
781
+ }
782
+
783
+ main {
784
+ flex: 1;
785
+ padding: 30px;
786
+ transition: var(--transition);
787
+ }
788
+
789
+ section {
790
+ background: white;
791
+ padding: 30px;
792
+ border-radius: 20px;
793
+ box-shadow: var(--shadow);
794
+ margin-bottom: 40px;
795
+ position: relative;
796
+ overflow: hidden;
797
+ transition: var(--transition);
798
+ }
799
+
800
+ section:hover {
801
+ transform: translateY(-5px);
802
+ }
803
+
804
+ section:before {
805
+ content: "";
806
+ position: absolute;
807
+ top: 0;
808
+ left: 0;
809
+ width: 100%;
810
+ height: 5px;
811
+ background: linear-gradient(90deg, var(--primary), var(--accent));
812
+ }
813
+
814
+ .section-icon {
815
+ position: absolute;
816
+ top: 20px;
817
+ right: 20px;
818
+ font-size: 1.5rem;
819
+ color: var(--primary);
820
+ opacity: 0.2;
821
+ }
822
+
823
+ h2 {
824
+ color: var(--dark);
825
+ margin-bottom: 30px;
826
+ font-weight: 600;
827
+ display: flex;
828
+ align-items: center;
829
+ gap: 10px;
830
+ }
831
+
832
+ h2 i {
833
+ color: var(--primary);
834
+ }
835
+
836
+ .form-group {
837
+ margin-bottom: 25px;
838
+ }
839
+
840
+ label {
841
+ font-weight: 500;
842
+ margin-bottom: 12px;
843
+ display: block;
844
+ color: var(--dark);
845
+ }
846
+
847
+ select {
848
+ width: 100%;
849
+ padding: 15px;
850
+ border: 2px solid rgba(0,0,0,0.1);
851
+ border-radius: 12px;
852
+ font-size: 1rem;
853
+ font-family: 'Poppins', sans-serif;
854
+ transition: var(--transition);
855
+ background: white;
856
+ appearance: none;
857
+ background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c3e50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
858
+ background-position: right 15px center;
859
+ background-repeat: no-repeat;
860
+ background-size: 15px;
861
+ }
862
+
863
+ select:focus {
864
+ border-color: var(--primary);
865
+ outline: none;
866
+ box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.2);
867
+ }
868
+
869
+ #destination-buttons {
870
+ display: flex;
871
+ flex-wrap: wrap;
872
+ gap: 12px;
873
+ margin-bottom: 30px;
874
+ }
875
+
876
+ #destination-buttons button {
877
+ background: white;
878
+ color: var(--dark);
879
+ border: 2px solid var(--primary);
880
+ padding: 12px 20px;
881
+ border-radius: 12px;
882
+ cursor: pointer;
883
+ transition: var(--transition);
884
+ font-family: 'Poppins', sans-serif;
885
+ font-weight: 500;
886
+ display: flex;
887
+ align-items: center;
888
+ gap: 8px;
889
+ }
890
+
891
+ #destination-buttons button:hover {
892
+ transform: translateY(-3px);
893
+ box-shadow: var(--shadow-sm);
894
+ }
895
+
896
+ #destination-buttons button.selected {
897
+ background: var(--primary);
898
+ color: white;
899
+ border-color: var(--primary);
900
+ }
901
+
902
+ #clear-destinations {
903
+ background: var(--secondary);
904
+ color: white;
905
+ border: none;
906
+ padding: 15px 25px;
907
+ border-radius: 12px;
908
+ cursor: pointer;
909
+ transition: var(--transition);
910
+ font-family: 'Poppins', sans-serif;
911
+ font-weight: 500;
912
+ display: flex;
913
+ align-items: center;
914
+ gap: 10px;
915
+ margin-bottom: 30px;
916
+ }
917
+
918
+ #clear-destinations:hover {
919
+ background: #c0392b;
920
+ transform: translateY(-3px);
921
+ box-shadow: var(--shadow-sm);
922
+ }
923
+
924
+ #fare-display {
925
+ display: grid;
926
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
927
+ gap: 20px;
928
+ }
929
+
930
+ .fare-item {
931
+ background: var(--gray-light);
932
+ padding: 20px;
933
+ border-radius: 15px;
934
+ box-shadow: var(--shadow-sm);
935
+ transition: var(--transition);
936
+ border-left: 5px solid var(--primary);
937
+ }
938
+
939
+ .fare-item:hover {
940
+ transform: translateY(-5px);
941
+ box-shadow: var(--shadow);
942
+ }
943
+
944
+ .fare-item h4 {
945
+ color: var(--dark);
946
+ font-size: 1.1rem;
947
+ margin-bottom: 15px;
948
+ display: flex;
949
+ align-items: center;
950
+ gap: 10px;
951
+ }
952
+
953
+ .fare-item p {
954
+ margin-bottom: 10px;
955
+ display: flex;
956
+ align-items: center;
957
+ gap: 10px;
958
+ }
959
+
960
+ .fare-amount {
961
+ font-size: 1.8rem;
962
+ color: var(--primary);
963
+ font-weight: 600;
964
+ display: block;
965
+ margin: 15px 0;
966
+ text-align: center;
967
+ }
968
+
969
+ .journey-detail {
970
+ display: flex;
971
+ align-items: center;
972
+ gap: 15px;
973
+ margin-bottom: 15px;
974
+ }
975
+
976
+ .station {
977
+ padding: 8px 15px;
978
+ background: white;
979
+ border-radius: 20px;
980
+ font-weight: 500;
981
+ box-shadow: var(--shadow-sm);
982
+ }
983
+
984
+ .journey-arrow {
985
+ color: var(--primary);
986
+ font-size: 1.2rem;
987
+ }
988
+
989
+ #map {
990
+ height: 500px;
991
+ border-radius: 15px;
992
+ margin-top: 20px;
993
+ box-shadow: var(--shadow-sm);
994
+ z-index: 1;
995
+ }
996
+
997
+ #map-controls {
998
+ display: grid;
999
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
1000
+ gap: 15px;
1001
+ margin-top: 25px;
1002
+ }
1003
+
1004
+ #map-controls select {
1005
+ margin-bottom: 0;
1006
+ }
1007
+
1008
+ .map-control-button {
1009
+ background: var(--primary);
1010
+ color: white;
1011
+ border: none;
1012
+ padding: 15px;
1013
+ border-radius: 12px;
1014
+ cursor: pointer;
1015
+ transition: var(--transition);
1016
+ font-family: 'Poppins', sans-serif;
1017
+ font-weight: 500;
1018
+ display: flex;
1019
+ align-items: center;
1020
+ justify-content: center;
1021
+ gap: 10px;
1022
+ }
1023
+
1024
+ .map-control-button:hover {
1025
+ transform: translateY(-3px);
1026
+ box-shadow: var(--shadow-sm);
1027
+ }
1028
+
1029
+ .map-control-button.animate-all {
1030
+ background: var(--success);
1031
+ }
1032
+
1033
+ .map-control-button.stop {
1034
+ background: var(--secondary);
1035
+ }
1036
+
1037
+ .notification {
1038
+ position: fixed;
1039
+ top: 30px;
1040
+ right: 30px;
1041
+ padding: 15px 25px;
1042
+ background: white;
1043
+ border-radius: 12px;
1044
+ box-shadow: var(--shadow);
1045
+ display: flex;
1046
+ align-items: center;
1047
+ gap: 15px;
1048
+ transform: translateX(calc(100% + 50px));
1049
+ transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
1050
+ z-index: 1000;
1051
+ }
1052
+
1053
+ .notification.show {
1054
+ transform: translateX(0);
1055
+ }
1056
+
1057
+ .notification-icon {
1058
+ width: 40px;
1059
+ height: 40px;
1060
+ border-radius: 50%;
1061
+ background: var(--primary);
1062
+ color: white;
1063
+ display: flex;
1064
+ justify-content: center;
1065
+ align-items: center;
1066
+ font-size: 1.2rem;
1067
+ }
1068
+
1069
+ .notification-content h3 {
1070
+ color: var(--dark);
1071
+ margin-bottom: 5px;
1072
+ }
1073
+
1074
+ .notification-content p {
1075
+ color: #666;
1076
+ font-size: 0.9rem;
1077
+ }
1078
+
1079
+ .train-route {
1080
+ position: relative;
1081
+ height: 5px;
1082
+ background: #eee;
1083
+ border-radius: 5px;
1084
+ margin: 30px 0;
1085
+ overflow: visible;
1086
+ }
1087
+
1088
+ .train-position {
1089
+ position: absolute;
1090
+ top: -12px;
1091
+ left: 0;
1092
+ font-size: 1.5rem;
1093
+ transition: left 1s linear;
1094
+ }
1095
+
1096
+ .route-stations {
1097
+ display: flex;
1098
+ justify-content: space-between;
1099
+ margin-top: 15px;
1100
+ }
1101
+
1102
+ .route-station {
1103
+ display: flex;
1104
+ flex-direction: column;
1105
+ align-items: center;
1106
+ position: relative;
1107
+ }
1108
+
1109
+ .station-dot {
1110
+ width: 12px;
1111
+ height: 12px;
1112
+ background: var(--primary);
1113
+ border-radius: 50%;
1114
+ margin-bottom: 10px;
1115
+ }
1116
+
1117
+ .station-name {
1118
+ font-size: 0.8rem;
1119
+ text-align: center;
1120
+ max-width: 80px;
1121
+ }
1122
+
1123
+ /* Animations */
1124
+ @keyframes fadeOut {
1125
+ 0% { opacity: 1; visibility: visible; }
1126
+ 100% { opacity: 0; visibility: hidden; }
1127
+ }
1128
+
1129
+ @keyframes trainMove {
1130
+ 0% { transform: translateX(-50px); }
1131
+ 50% { transform: translateX(50px); }
1132
+ 100% { transform: translateX(-50px); }
1133
+ }
1134
+
1135
+ @keyframes trackMove {
1136
+ 0% { transform: translateX(-100%); }
1137
+ 100% { transform: translateX(300%); }
1138
+ }
1139
+
1140
+ @keyframes headerPulse {
1141
+ 0% { transform: rotate(0deg); }
1142
+ 100% { transform: rotate(360deg); }
1143
+ }
1144
+
1145
+ @keyframes badgePulse {
1146
+ 0% { transform: rotate(15deg) scale(1); }
1147
+ 50% { transform: rotate(15deg) scale(1.1); }
1148
+ 100% { transform: rotate(15deg) scale(1); }
1149
+ }
1150
+
1151
+ @keyframes trainIcon {
1152
+ 0% { transform: translateX(0); }
1153
+ 20% { transform: translateX(5px); }
1154
+ 40% { transform: translateX(0); }
1155
+ 60% { transform: translateX(-5px); }
1156
+ 80% { transform: translateX(0); }
1157
+ 100% { transform: translateX(0); }
1158
+ }
1159
+
1160
+ @keyframes slideUp {
1161
+ 0% { opacity: 0; transform: translateY(30px); }
1162
+ 100% { opacity: 1; transform: translateY(0); }
1163
+ }
1164
+
1165
+ /* Responsive styles */
1166
+ @media (max-width: 1024px) {
1167
+ .page-wrapper {
1168
+ flex-direction: column;
1169
+ }
1170
+
1171
+ aside#sidebar {
1172
+ position: relative;
1173
+ width: 100%;
1174
+ min-width: 100%;
1175
+ max-width: 100%;
1176
+ max-height: 0;
1177
+ padding: 0;
1178
+ overflow: hidden;
1179
+ transition: max-height 0.4s, padding 0.4s;
1180
+ }
1181
+
1182
+ aside#sidebar.open {
1183
+ max-height: 1000px;
1184
+ padding: 30px 25px;
1185
+ }
1186
+
1187
+ .page-wrapper .sidebar-toggle {
1188
+ position: absolute;
1189
+ top: 25px;
1190
+ left: 20px;
1191
+ /* tweak as needed for mobile */
1192
+ }
1193
+
1194
+ .sidebar-toggle {
1195
+ top: 25px;
1196
+ right: 30px;
1197
+ background: var(--dark);
1198
+ }
1199
+
1200
+ main {
1201
+ margin-left: 0;
1202
+ }
1203
+
1204
+ #fare-display {
1205
+ grid-template-columns: 1fr;
1206
+ }
1207
+ }
1208
+
1209
+ @media (max-width: 768px) {
1210
+ header h1 {
1211
+ font-size: 1.8rem;
1212
+ }
1213
+
1214
+ main {
1215
+ padding: 20px;
1216
+ }
1217
+
1218
+ section {
1219
+ padding: 20px;
1220
+ margin-bottom: 30px;
1221
+ }
1222
+
1223
+ #map {
1224
+ height: 350px;
1225
+ }
1226
+
1227
+ #map-controls {
1228
+ grid-template-columns: 1fr;
1229
+ }
1230
+ }
1231
+
1232
+ @media (max-width: 480px) {
1233
+ header {
1234
+ padding: 1.5rem;
1235
+ }
1236
+
1237
+ header h1 {
1238
+ font-size: 1.5rem;
1239
+ }
1240
+
1241
+ .page-wrapper {
1242
+ min-height: calc(100vh - 81px);
1243
+ }
1244
+
1245
+ section:before {
1246
+ height: 3px;
1247
+ }
1248
+
1249
+ #destination-buttons button {
1250
+ width: 100%;
1251
+ justify-content: center;
1252
+ }
1253
+
1254
+ #fare-display .fare-item {
1255
+ padding: 15px;
1256
+ }
1257
+ }
1258
+ </style>
1259
+ </head>
1260
+ <body>
1261
+ <!-- Preloader -->
1262
+ <div class="preloader">
1263
+ <div class="preloader__container">
1264
+ <div class="preloader__train"></div>
1265
+ <div class="preloader__track"></div>
1266
+ </div>
1267
+ </div>
1268
+
1269
+ <!-- Notification -->
1270
+ <div class="notification" id="notification">
1271
+ <div class="notification-icon">
1272
+ <i class="fas fa-bell"></i>
1273
+ </div>
1274
+ <div class="notification-content">
1275
+ <h3>Welcome!</h3>
1276
+ <p>Explore the premium Dhaka Metro experience</p>
1277
+ </div>
1278
+ </div>
1279
+
1280
+ <header>
1281
+ <h1><i class="fas fa-train metro-icon"></i> Dhaka Metro Rail Fare Checker</h1>
1282
+ </header>
1283
+
1284
+ <div class="page-wrapper">
1285
+ <div class="sidebar-toggle" id="sidebar-toggle" style="margin-left: 2px; border: 2px solid rgb(255, 0, 0);border-radius: 50%;width: 25px;height: 25px;display: flex;align-items: center;justify-content: center;">
1286
+ <i class="fas fa-chevron-left"></i>
1287
+ </div>
1288
+ <aside id="sidebar">
1289
+ <div class="sidebar-header">
1290
+ <div class="sidebar-icon">
1291
+ <i class="fas fa-info"></i>
1292
+ </div>
1293
+ <h2>How to Use</h2>
1294
+ </div>
1295
+
1296
+ <div class="instruction-step">
1297
+ <div class="step-number">1</div>
1298
+ <h3>Select Your Location</h3>
1299
+ <p>Choose your starting station from the dropdown menu. This will be your journey's point of origin.</p>
1300
+ </div>
1301
+
1302
+ <div class="instruction-step">
1303
+ <div class="step-number">2</div>
1304
+ <h3>Choose Destinations</h3>
1305
+ <p>Click on destination buttons to select where you want to go. You can select multiple destinations to compare fares.</p>
1306
+ </div>
1307
+
1308
+ <div class="instruction-step">
1309
+ <div class="step-number">3</div>
1310
+ <h3>View Fares</h3>
1311
+ <p>See your calculated fares displayed below. Each fare card shows the cost for that specific journey.</p>
1312
+ </div>
1313
+
1314
+ <div class="instruction-step">
1315
+ <div class="step-number">4</div>
1316
+ <h3>Explore the Map</h3>
1317
+ <p>Use the interactive map to visualize routes. You can animate specific journeys or see all stations.</p>
1318
+ </div>
1319
+
1320
+ <a href="https://wa.me/+8801719296601" class="support-link">
1321
+ <i class="fab fa-whatsapp"></i>
1322
+ <span>Contact Support</span>
1323
+ </a>
1324
+ </aside>
1325
+
1326
+ <main>
1327
+ <section id="fare-checker">
1328
+ <div class="section-icon">
1329
+ <i class="fas fa-ticket-alt"></i>
1330
+ </div>
1331
+
1332
+ <h2><i class="fas fa-calculator"></i> Check Your Fare</h2>
1333
+
1334
+ <div class="form-group">
1335
+ <label for="origin">Select your starting station:</label>
1336
+ <select id="origin">
1337
+ <option value="">Select Journey from</option>
1338
+ </select>
1339
+ </div>
1340
+
1341
+ <div id="destination-buttons"></div>
1342
+
1343
+ <button id="clear-destinations">
1344
+ <i class="fas fa-times-circle"></i>
1345
+ Clear All Destinations
1346
+ </button>
1347
+
1348
+ <div id="fare-display"></div>
1349
+ </section>
1350
+
1351
+ <section id="map-section">
1352
+ <div class="section-icon">
1353
+ <i class="fas fa-map-marked-alt"></i>
1354
+ </div>
1355
+
1356
+ <h2><i class="fas fa-map"></i> Interactive Metro Map</h2>
1357
+
1358
+ <div id="map"></div>
1359
+
1360
+ <div id="map-controls">
1361
+ <select id="map-source">
1362
+ <option value="">Select Source Station</option>
1363
+ </select>
1364
+
1365
+ <select id="map-destination">
1366
+ <option value="">Select Destination Station</option>
1367
+ </select>
1368
+
1369
+ <button class="map-control-button" onclick="startRouteAnimation()">
1370
+ <i class="fas fa-play"></i> Animate Route
1371
+ </button>
1372
+
1373
+ <button class="map-control-button animate-all" onclick="animateAllLocations()">
1374
+ <i class="fas fa-route"></i> Animate All Stations
1375
+ </button>
1376
+
1377
+ <button class="map-control-button stop" onclick="stopAnimation()">
1378
+ <i class="fas fa-stop"></i> Stop Animation
1379
+ </button>
1380
+ </div>
1381
+ </section>
1382
+ </main>
1383
+ </div>
1384
+
1385
+ <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
1386
+ <script>
1387
+ // Sample fare data (would normally be loaded from data.js)
1388
+ const fareData = [{"Origin":"Uttara North","Destination":"Uttara North","Fare (\u09f3)":0},{"Origin":"Uttara North","Destination":"Uttara Center","Fare (\u09f3)":20},{"Origin":"Uttara North","Destination":"Uttara South","Fare (\u09f3)":20},{"Origin":"Uttara North","Destination":"Pallabi","Fare (\u09f3)":30},{"Origin":"Uttara North","Destination":"Mirpur 11","Fare (\u09f3)":30},{"Origin":"Uttara North","Destination":"Mirpur 10","Fare (\u09f3)":40},{"Origin":"Uttara North","Destination":"Kazipara","Fare (\u09f3)":40},{"Origin":"Uttara North","Destination":"Shewrapara","Fare (\u09f3)":50},{"Origin":"Uttara North","Destination":"Agargaon","Fare (\u09f3)":60},{"Origin":"Uttara North","Destination":"Bijoy Sarani","Fare (\u09f3)":60},{"Origin":"Uttara North","Destination":"Farmgate","Fare (\u09f3)":70},{"Origin":"Uttara North","Destination":"Kawran Bazar","Fare (\u09f3)":80},{"Origin":"Uttara North","Destination":"Shahbagh","Fare (\u09f3)":80},{"Origin":"Uttara North","Destination":"Dhaka University","Fare (\u09f3)":90},{"Origin":"Uttara North","Destination":"Bangladesh Secretariat","Fare (\u09f3)":90},{"Origin":"Uttara North","Destination":"Motijheel","Fare (\u09f3)":100},{"Origin":"Uttara North","Destination":"Kamalapur","Fare (\u09f3)":100},{"Origin":"Uttara Center","Destination":"Uttara North","Fare (\u09f3)":20},{"Origin":"Uttara Center","Destination":"Uttara Center","Fare (\u09f3)":0},{"Origin":"Uttara Center","Destination":"Uttara South","Fare (\u09f3)":20},{"Origin":"Uttara Center","Destination":"Pallabi","Fare (\u09f3)":20},{"Origin":"Uttara Center","Destination":"Mirpur 11","Fare (\u09f3)":30},{"Origin":"Uttara Center","Destination":"Mirpur 10","Fare (\u09f3)":30},{"Origin":"Uttara Center","Destination":"Kazipara","Fare (\u09f3)":40},{"Origin":"Uttara Center","Destination":"Shewrapara","Fare (\u09f3)":40},{"Origin":"Uttara Center","Destination":"Agargaon","Fare (\u09f3)":50},{"Origin":"Uttara Center","Destination":"Bijoy Sarani","Fare (\u09f3)":60},{"Origin":"Uttara Center","Destination":"Farmgate","Fare (\u09f3)":60},{"Origin":"Uttara Center","Destination":"Kawran Bazar","Fare (\u09f3)":70},{"Origin":"Uttara Center","Destination":"Shahbagh","Fare (\u09f3)":80},{"Origin":"Uttara Center","Destination":"Dhaka University","Fare (\u09f3)":80},{"Origin":"Uttara Center","Destination":"Bangladesh Secretariat","Fare (\u09f3)":90},{"Origin":"Uttara Center","Destination":"Motijheel","Fare (\u09f3)":90},{"Origin":"Uttara Center","Destination":"Kamalapur","Fare (\u09f3)":100},{"Origin":"Uttara South","Destination":"Uttara North","Fare (\u09f3)":20},{"Origin":"Uttara South","Destination":"Uttara Center","Fare (\u09f3)":20},{"Origin":"Uttara South","Destination":"Uttara South","Fare (\u09f3)":0},{"Origin":"Uttara South","Destination":"Pallabi","Fare (\u09f3)":20},{"Origin":"Uttara South","Destination":"Mirpur 11","Fare (\u09f3)":20},{"Origin":"Uttara South","Destination":"Mirpur 10","Fare (\u09f3)":30},{"Origin":"Uttara South","Destination":"Kazipara","Fare (\u09f3)":30},{"Origin":"Uttara South","Destination":"Shewrapara","Fare (\u09f3)":40},{"Origin":"Uttara South","Destination":"Agargaon","Fare (\u09f3)":40},{"Origin":"Uttara South","Destination":"Bijoy Sarani","Fare (\u09f3)":50},{"Origin":"Uttara South","Destination":"Farmgate","Fare (\u09f3)":60},{"Origin":"Uttara South","Destination":"Kawran Bazar","Fare (\u09f3)":60},{"Origin":"Uttara South","Destination":"Shahbagh","Fare (\u09f3)":70},{"Origin":"Uttara South","Destination":"Dhaka University","Fare (\u09f3)":70},{"Origin":"Uttara South","Destination":"Bangladesh Secretariat","Fare (\u09f3)":80},{"Origin":"Uttara South","Destination":"Motijheel","Fare (\u09f3)":90},{"Origin":"Uttara South","Destination":"Kamalapur","Fare (\u09f3)":90},{"Origin":"Pallabi","Destination":"Uttara North","Fare (\u09f3)":30},{"Origin":"Pallabi","Destination":"Uttara Center","Fare (\u09f3)":20},{"Origin":"Pallabi","Destination":"Uttara South","Fare (\u09f3)":20},{"Origin":"Pallabi","Destination":"Pallabi","Fare (\u09f3)":0},{"Origin":"Pallabi","Destination":"Mirpur 11","Fare (\u09f3)":20},{"Origin":"Pallabi","Destination":"Mirpur 10","Fare (\u09f3)":20},{"Origin":"Pallabi","Destination":"Kazipara","Fare (\u09f3)":20},{"Origin":"Pallabi","Destination":"Shewrapara","Fare (\u09f3)":30},{"Origin":"Pallabi","Destination":"Agargaon","Fare (\u09f3)":30},{"Origin":"Pallabi","Destination":"Bijoy Sarani","Fare (\u09f3)":40},{"Origin":"Pallabi","Destination":"Farmgate","Fare (\u09f3)":50},{"Origin":"Pallabi","Destination":"Kawran Bazar","Fare (\u09f3)":50},{"Origin":"Pallabi","Destination":"Shahbagh","Fare (\u09f3)":60},{"Origin":"Pallabi","Destination":"Dhaka University","Fare (\u09f3)":60},{"Origin":"Pallabi","Destination":"Bangladesh Secretariat","Fare (\u09f3)":70},{"Origin":"Pallabi","Destination":"Motijheel","Fare (\u09f3)":80},{"Origin":"Pallabi","Destination":"Kamalapur","Fare (\u09f3)":80},{"Origin":"Mirpur 11","Destination":"Uttara North","Fare (\u09f3)":30},{"Origin":"Mirpur 11","Destination":"Uttara Center","Fare (\u09f3)":30},{"Origin":"Mirpur 11","Destination":"Uttara South","Fare (\u09f3)":20},{"Origin":"Mirpur 11","Destination":"Pallabi","Fare (\u09f3)":20},{"Origin":"Mirpur 11","Destination":"Mirpur 11","Fare (\u09f3)":0},{"Origin":"Mirpur 11","Destination":"Mirpur 10","Fare (\u09f3)":20},{"Origin":"Mirpur 11","Destination":"Kazipara","Fare (\u09f3)":20},{"Origin":"Mirpur 11","Destination":"Shewrapara","Fare (\u09f3)":20},{"Origin":"Mirpur 11","Destination":"Agargaon","Fare (\u09f3)":30},{"Origin":"Mirpur 11","Destination":"Bijoy Sarani","Fare (\u09f3)":40},{"Origin":"Mirpur 11","Destination":"Farmgate","Fare (\u09f3)":40},{"Origin":"Mirpur 11","Destination":"Kawran Bazar","Fare (\u09f3)":50},{"Origin":"Mirpur 11","Destination":"Shahbagh","Fare (\u09f3)":50},{"Origin":"Mirpur 11","Destination":"Dhaka University","Fare (\u09f3)":60},{"Origin":"Mirpur 11","Destination":"Bangladesh Secretariat","Fare (\u09f3)":70},{"Origin":"Mirpur 11","Destination":"Motijheel","Fare (\u09f3)":70},{"Origin":"Mirpur 11","Destination":"Kamalapur","Fare (\u09f3)":80},{"Origin":"Mirpur 10","Destination":"Uttara North","Fare (\u09f3)":40},{"Origin":"Mirpur 10","Destination":"Uttara Center","Fare (\u09f3)":30},{"Origin":"Mirpur 10","Destination":"Uttara South","Fare (\u09f3)":30},{"Origin":"Mirpur 10","Destination":"Pallabi","Fare (\u09f3)":20},{"Origin":"Mirpur 10","Destination":"Mirpur 11","Fare (\u09f3)":20},{"Origin":"Mirpur 10","Destination":"Mirpur 10","Fare (\u09f3)":0},{"Origin":"Mirpur 10","Destination":"Kazipara","Fare (\u09f3)":20},{"Origin":"Mirpur 10","Destination":"Shewrapara","Fare (\u09f3)":20},{"Origin":"Mirpur 10","Destination":"Agargaon","Fare (\u09f3)":20},{"Origin":"Mirpur 10","Destination":"Bijoy Sarani","Fare (\u09f3)":30},{"Origin":"Mirpur 10","Destination":"Farmgate","Fare (\u09f3)":30},{"Origin":"Mirpur 10","Destination":"Kawran Bazar","Fare (\u09f3)":40},{"Origin":"Mirpur 10","Destination":"Shahbagh","Fare (\u09f3)":50},{"Origin":"Mirpur 10","Destination":"Dhaka University","Fare (\u09f3)":50},{"Origin":"Mirpur 10","Destination":"Bangladesh Secretariat","Fare (\u09f3)":60},{"Origin":"Mirpur 10","Destination":"Motijheel","Fare (\u09f3)":60},{"Origin":"Mirpur 10","Destination":"Kamalapur","Fare (\u09f3)":70},{"Origin":"Kazipara","Destination":"Uttara North","Fare (\u09f3)":40},{"Origin":"Kazipara","Destination":"Uttara Center","Fare (\u09f3)":40},{"Origin":"Kazipara","Destination":"Uttara South","Fare (\u09f3)":30},{"Origin":"Kazipara","Destination":"Pallabi","Fare (\u09f3)":20},{"Origin":"Kazipara","Destination":"Mirpur 11","Fare (\u09f3)":20},{"Origin":"Kazipara","Destination":"Mirpur 10","Fare (\u09f3)":20},{"Origin":"Kazipara","Destination":"Kazipara","Fare (\u09f3)":0},{"Origin":"Kazipara","Destination":"Shewrapara","Fare (\u09f3)":20},{"Origin":"Kazipara","Destination":"Agargaon","Fare (\u09f3)":20},{"Origin":"Kazipara","Destination":"Bijoy Sarani","Fare (\u09f3)":20},{"Origin":"Kazipara","Destination":"Farmgate","Fare (\u09f3)":30},{"Origin":"Kazipara","Destination":"Kawran Bazar","Fare (\u09f3)":40},{"Origin":"Kazipara","Destination":"Shahbagh","Fare (\u09f3)":40},{"Origin":"Kazipara","Destination":"Dhaka University","Fare (\u09f3)":50},{"Origin":"Kazipara","Destination":"Bangladesh Secretariat","Fare (\u09f3)":50},{"Origin":"Kazipara","Destination":"Motijheel","Fare (\u09f3)":60},{"Origin":"Kazipara","Destination":"Kamalapur","Fare (\u09f3)":70},{"Origin":"Shewrapara","Destination":"Uttara North","Fare (\u09f3)":50},{"Origin":"Shewrapara","Destination":"Uttara Center","Fare (\u09f3)":40},{"Origin":"Shewrapara","Destination":"Uttara South","Fare (\u09f3)":40},{"Origin":"Shewrapara","Destination":"Pallabi","Fare (\u09f3)":30},{"Origin":"Shewrapara","Destination":"Mirpur 11","Fare (\u09f3)":20},{"Origin":"Shewrapara","Destination":"Mirpur 10","Fare (\u09f3)":20},{"Origin":"Shewrapara","Destination":"Kazipara","Fare (\u09f3)":20},{"Origin":"Shewrapara","Destination":"Shewrapara","Fare (\u09f3)":0},{"Origin":"Shewrapara","Destination":"Agargaon","Fare (\u09f3)":20},{"Origin":"Shewrapara","Destination":"Bijoy Sarani","Fare (\u09f3)":20},{"Origin":"Shewrapara","Destination":"Farmgate","Fare (\u09f3)":20},{"Origin":"Shewrapara","Destination":"Kawran Bazar","Fare (\u09f3)":30},{"Origin":"Shewrapara","Destination":"Shahbagh","Fare (\u09f3)":40},{"Origin":"Shewrapara","Destination":"Dhaka University","Fare (\u09f3)":40},{"Origin":"Shewrapara","Destination":"Bangladesh Secretariat","Fare (\u09f3)":50},{"Origin":"Shewrapara","Destination":"Motijheel","Fare (\u09f3)":50},{"Origin":"Shewrapara","Destination":"Kamalapur","Fare (\u09f3)":60},{"Origin":"Agargaon","Destination":"Uttara North","Fare (\u09f3)":60},{"Origin":"Agargaon","Destination":"Uttara Center","Fare (\u09f3)":50},{"Origin":"Agargaon","Destination":"Uttara South","Fare (\u09f3)":40},{"Origin":"Agargaon","Destination":"Pallabi","Fare (\u09f3)":30},{"Origin":"Agargaon","Destination":"Mirpur 11","Fare (\u09f3)":30},{"Origin":"Agargaon","Destination":"Mirpur 10","Fare (\u09f3)":20},{"Origin":"Agargaon","Destination":"Kazipara","Fare (\u09f3)":20},{"Origin":"Agargaon","Destination":"Shewrapara","Fare (\u09f3)":20},{"Origin":"Agargaon","Destination":"Agargaon","Fare (\u09f3)":0},{"Origin":"Agargaon","Destination":"Bijoy Sarani","Fare (\u09f3)":20},{"Origin":"Agargaon","Destination":"Farmgate","Fare (\u09f3)":20},{"Origin":"Agargaon","Destination":"Kawran Bazar","Fare (\u09f3)":20},{"Origin":"Agargaon","Destination":"Shahbagh","Fare (\u09f3)":30},{"Origin":"Agargaon","Destination":"Dhaka University","Fare (\u09f3)":30},{"Origin":"Agargaon","Destination":"Bangladesh Secretariat","Fare (\u09f3)":40},{"Origin":"Agargaon","Destination":"Motijheel","Fare (\u09f3)":50},{"Origin":"Agargaon","Destination":"Kamalapur","Fare (\u09f3)":50},{"Origin":"Bijoy Sarani","Destination":"Uttara North","Fare (\u09f3)":60},{"Origin":"Bijoy Sarani","Destination":"Uttara Center","Fare (\u09f3)":60},{"Origin":"Bijoy Sarani","Destination":"Uttara South","Fare (\u09f3)":50},{"Origin":"Bijoy Sarani","Destination":"Pallabi","Fare (\u09f3)":40},{"Origin":"Bijoy Sarani","Destination":"Mirpur 11","Fare (\u09f3)":40},{"Origin":"Bijoy Sarani","Destination":"Mirpur 10","Fare (\u09f3)":30},{"Origin":"Bijoy Sarani","Destination":"Kazipara","Fare (\u09f3)":20},{"Origin":"Bijoy Sarani","Destination":"Shewrapara","Fare (\u09f3)":20},{"Origin":"Bijoy Sarani","Destination":"Agargaon","Fare (\u09f3)":20},{"Origin":"Bijoy Sarani","Destination":"Bijoy Sarani","Fare (\u09f3)":0},{"Origin":"Bijoy Sarani","Destination":"Farmgate","Fare (\u09f3)":20},{"Origin":"Bijoy Sarani","Destination":"Kawran Bazar","Fare (\u09f3)":20},{"Origin":"Bijoy Sarani","Destination":"Shahbagh","Fare (\u09f3)":20},{"Origin":"Bijoy Sarani","Destination":"Dhaka University","Fare (\u09f3)":30},{"Origin":"Bijoy Sarani","Destination":"Bangladesh Secretariat","Fare (\u09f3)":40},{"Origin":"Bijoy Sarani","Destination":"Motijheel","Fare (\u09f3)":40},{"Origin":"Bijoy Sarani","Destination":"Kamalapur","Fare (\u09f3)":50},{"Origin":"Farmgate","Destination":"Uttara North","Fare (\u09f3)":70},{"Origin":"Farmgate","Destination":"Uttara Center","Fare (\u09f3)":60},{"Origin":"Farmgate","Destination":"Uttara South","Fare (\u09f3)":60},{"Origin":"Farmgate","Destination":"Pallabi","Fare (\u09f3)":50},{"Origin":"Farmgate","Destination":"Mirpur 11","Fare (\u09f3)":40},{"Origin":"Farmgate","Destination":"Mirpur 10","Fare (\u09f3)":30},{"Origin":"Farmgate","Destination":"Kazipara","Fare (\u09f3)":30},{"Origin":"Farmgate","Destination":"Shewrapara","Fare (\u09f3)":20},{"Origin":"Farmgate","Destination":"Agargaon","Fare (\u09f3)":20},{"Origin":"Farmgate","Destination":"Bijoy Sarani","Fare (\u09f3)":20},{"Origin":"Farmgate","Destination":"Farmgate","Fare (\u09f3)":0},{"Origin":"Farmgate","Destination":"Kawran Bazar","Fare (\u09f3)":20},{"Origin":"Farmgate","Destination":"Shahbagh","Fare (\u09f3)":20},{"Origin":"Farmgate","Destination":"Dhaka University","Fare (\u09f3)":20},{"Origin":"Farmgate","Destination":"Bangladesh Secretariat","Fare (\u09f3)":30},{"Origin":"Farmgate","Destination":"Motijheel","Fare (\u09f3)":30},{"Origin":"Farmgate","Destination":"Kamalapur","Fare (\u09f3)":40},{"Origin":"Kawran Bazar","Destination":"Uttara North","Fare (\u09f3)":80},{"Origin":"Kawran Bazar","Destination":"Uttara Center","Fare (\u09f3)":70},{"Origin":"Kawran Bazar","Destination":"Uttara South","Fare (\u09f3)":60},{"Origin":"Kawran Bazar","Destination":"Pallabi","Fare (\u09f3)":50},{"Origin":"Kawran Bazar","Destination":"Mirpur 11","Fare (\u09f3)":50},{"Origin":"Kawran Bazar","Destination":"Mirpur 10","Fare (\u09f3)":40},{"Origin":"Kawran Bazar","Destination":"Kazipara","Fare (\u09f3)":40},{"Origin":"Kawran Bazar","Destination":"Shewrapara","Fare (\u09f3)":30},{"Origin":"Kawran Bazar","Destination":"Agargaon","Fare (\u09f3)":20},{"Origin":"Kawran Bazar","Destination":"Bijoy Sarani","Fare (\u09f3)":20},{"Origin":"Kawran Bazar","Destination":"Farmgate","Fare (\u09f3)":20},{"Origin":"Kawran Bazar","Destination":"Kawran Bazar","Fare (\u09f3)":0},{"Origin":"Kawran Bazar","Destination":"Shahbagh","Fare (\u09f3)":20},{"Origin":"Kawran Bazar","Destination":"Dhaka University","Fare (\u09f3)":20},{"Origin":"Kawran Bazar","Destination":"Bangladesh Secretariat","Fare (\u09f3)":20},{"Origin":"Kawran Bazar","Destination":"Motijheel","Fare (\u09f3)":30},{"Origin":"Kawran Bazar","Destination":"Kamalapur","Fare (\u09f3)":30},{"Origin":"Shahbagh","Destination":"Uttara North","Fare (\u09f3)":80},{"Origin":"Shahbagh","Destination":"Uttara Center","Fare (\u09f3)":80},{"Origin":"Shahbagh","Destination":"Uttara South","Fare (\u09f3)":70},{"Origin":"Shahbagh","Destination":"Pallabi","Fare (\u09f3)":60},{"Origin":"Shahbagh","Destination":"Mirpur 11","Fare (\u09f3)":50},{"Origin":"Shahbagh","Destination":"Mirpur 10","Fare (\u09f3)":50},{"Origin":"Shahbagh","Destination":"Kazipara","Fare (\u09f3)":40},{"Origin":"Shahbagh","Destination":"Shewrapara","Fare (\u09f3)":40},{"Origin":"Shahbagh","Destination":"Agargaon","Fare (\u09f3)":30},{"Origin":"Shahbagh","Destination":"Bijoy Sarani","Fare (\u09f3)":20},{"Origin":"Shahbagh","Destination":"Farmgate","Fare (\u09f3)":20},{"Origin":"Shahbagh","Destination":"Kawran Bazar","Fare (\u09f3)":20},{"Origin":"Shahbagh","Destination":"Shahbagh","Fare (\u09f3)":0},{"Origin":"Shahbagh","Destination":"Dhaka University","Fare (\u09f3)":20},{"Origin":"Shahbagh","Destination":"Bangladesh Secretariat","Fare (\u09f3)":20},{"Origin":"Shahbagh","Destination":"Motijheel","Fare (\u09f3)":20},{"Origin":"Shahbagh","Destination":"Kamalapur","Fare (\u09f3)":30},{"Origin":"Dhaka University","Destination":"Uttara North","Fare (\u09f3)":90},{"Origin":"Dhaka University","Destination":"Uttara Center","Fare (\u09f3)":80},{"Origin":"Dhaka University","Destination":"Uttara South","Fare (\u09f3)":70},{"Origin":"Dhaka University","Destination":"Pallabi","Fare (\u09f3)":60},{"Origin":"Dhaka University","Destination":"Mirpur 11","Fare (\u09f3)":60},{"Origin":"Dhaka University","Destination":"Mirpur 10","Fare (\u09f3)":50},{"Origin":"Dhaka University","Destination":"Kazipara","Fare (\u09f3)":50},{"Origin":"Dhaka University","Destination":"Shewrapara","Fare (\u09f3)":40},{"Origin":"Dhaka University","Destination":"Agargaon","Fare (\u09f3)":30},{"Origin":"Dhaka University","Destination":"Bijoy Sarani","Fare (\u09f3)":30},{"Origin":"Dhaka University","Destination":"Farmgate","Fare (\u09f3)":20},{"Origin":"Dhaka University","Destination":"Kawran Bazar","Fare (\u09f3)":20},{"Origin":"Dhaka University","Destination":"Shahbagh","Fare (\u09f3)":20},{"Origin":"Dhaka University","Destination":"Dhaka University","Fare (\u09f3)":0},{"Origin":"Dhaka University","Destination":"Bangladesh Secretariat","Fare (\u09f3)":20},{"Origin":"Dhaka University","Destination":"Motijheel","Fare (\u09f3)":20},{"Origin":"Dhaka University","Destination":"Kamalapur","Fare (\u09f3)":20},{"Origin":"Bangladesh Secretariat","Destination":"Uttara North","Fare (\u09f3)":90},{"Origin":"Bangladesh Secretariat","Destination":"Uttara Center","Fare (\u09f3)":90},{"Origin":"Bangladesh Secretariat","Destination":"Uttara South","Fare (\u09f3)":80},{"Origin":"Bangladesh Secretariat","Destination":"Pallabi","Fare (\u09f3)":70},{"Origin":"Bangladesh Secretariat","Destination":"Mirpur 11","Fare (\u09f3)":70},{"Origin":"Bangladesh Secretariat","Destination":"Mirpur 10","Fare (\u09f3)":60},{"Origin":"Bangladesh Secretariat","Destination":"Kazipara","Fare (\u09f3)":50},{"Origin":"Bangladesh Secretariat","Destination":"Shewrapara","Fare (\u09f3)":50},{"Origin":"Bangladesh Secretariat","Destination":"Agargaon","Fare (\u09f3)":40},{"Origin":"Bangladesh Secretariat","Destination":"Bijoy Sarani","Fare (\u09f3)":40},{"Origin":"Bangladesh Secretariat","Destination":"Farmgate","Fare (\u09f3)":30},{"Origin":"Bangladesh Secretariat","Destination":"Kawran Bazar","Fare (\u09f3)":20},{"Origin":"Bangladesh Secretariat","Destination":"Shahbagh","Fare (\u09f3)":20},{"Origin":"Bangladesh Secretariat","Destination":"Dhaka University","Fare (\u09f3)":20},{"Origin":"Bangladesh Secretariat","Destination":"Bangladesh Secretariat","Fare (\u09f3)":0},{"Origin":"Bangladesh Secretariat","Destination":"Motijheel","Fare (\u09f3)":20},{"Origin":"Bangladesh Secretariat","Destination":"Kamalapur","Fare (\u09f3)":20},{"Origin":"Motijheel","Destination":"Uttara North","Fare (\u09f3)":100},{"Origin":"Motijheel","Destination":"Uttara Center","Fare (\u09f3)":90},{"Origin":"Motijheel","Destination":"Uttara South","Fare (\u09f3)":90},{"Origin":"Motijheel","Destination":"Pallabi","Fare (\u09f3)":80},{"Origin":"Motijheel","Destination":"Mirpur 11","Fare (\u09f3)":70},{"Origin":"Motijheel","Destination":"Mirpur 10","Fare (\u09f3)":60},{"Origin":"Motijheel","Destination":"Kazipara","Fare (\u09f3)":60},{"Origin":"Motijheel","Destination":"Shewrapara","Fare (\u09f3)":50},{"Origin":"Motijheel","Destination":"Agargaon","Fare (\u09f3)":50},{"Origin":"Motijheel","Destination":"Bijoy Sarani","Fare (\u09f3)":40},{"Origin":"Motijheel","Destination":"Farmgate","Fare (\u09f3)":30},{"Origin":"Motijheel","Destination":"Kawran Bazar","Fare (\u09f3)":30},{"Origin":"Motijheel","Destination":"Shahbagh","Fare (\u09f3)":20},{"Origin":"Motijheel","Destination":"Dhaka University","Fare (\u09f3)":20},{"Origin":"Motijheel","Destination":"Bangladesh Secretariat","Fare (\u09f3)":20},{"Origin":"Motijheel","Destination":"Motijheel","Fare (\u09f3)":0},{"Origin":"Motijheel","Destination":"Kamalapur","Fare (\u09f3)":20},{"Origin":"Kamalapur","Destination":"Uttara North","Fare (\u09f3)":100},{"Origin":"Kamalapur","Destination":"Uttara Center","Fare (\u09f3)":100},{"Origin":"Kamalapur","Destination":"Uttara South","Fare (\u09f3)":90},{"Origin":"Kamalapur","Destination":"Pallabi","Fare (\u09f3)":80},{"Origin":"Kamalapur","Destination":"Mirpur 11","Fare (\u09f3)":80},{"Origin":"Kamalapur","Destination":"Mirpur 10","Fare (\u09f3)":70},{"Origin":"Kamalapur","Destination":"Kazipara","Fare (\u09f3)":70},{"Origin":"Kamalapur","Destination":"Shewrapara","Fare (\u09f3)":60},{"Origin":"Kamalapur","Destination":"Agargaon","Fare (\u09f3)":50},{"Origin":"Kamalapur","Destination":"Bijoy Sarani","Fare (\u09f3)":50},{"Origin":"Kamalapur","Destination":"Farmgate","Fare (\u09f3)":40},{"Origin":"Kamalapur","Destination":"Kawran Bazar","Fare (\u09f3)":30},{"Origin":"Kamalapur","Destination":"Shahbagh","Fare (\u09f3)":30},{"Origin":"Kamalapur","Destination":"Dhaka University","Fare (\u09f3)":20},{"Origin":"Kamalapur","Destination":"Bangladesh Secretariat","Fare (\u09f3)":20},{"Origin":"Kamalapur","Destination":"Motijheel","Fare (\u09f3)":20},{"Origin":"Kamalapur","Destination":"Kamalapur","Fare (\u09f3)":0}];
1389
+
1390
+ // Station coordinates
1391
+ const coordinates = {
1392
+ "Uttara North": [23.869066, 90.367445],
1393
+ "Uttara Center": [23.860118, 90.365106],
1394
+ "Uttara South": [23.845934, 90.363175],
1395
+ "Pallabi": [23.82619516961383, 90.36481554252525],
1396
+ "Mirpur 11": [23.819438208310213, 90.36528532902963],
1397
+ "Mirpur 10": [23.808582994847285, 90.36821595330717],
1398
+ "Kazipara": [23.800017952100532, 90.37178261495391],
1399
+ "Shewrapara": [23.79070140857881, 90.37564622631841],
1400
+ "Agargaon": [23.778385546736345, 90.3800557456356],
1401
+ "Bijoy Sarani": [23.766638127271825, 90.38307537134754],
1402
+ "Farmgate": [23.75923604938459, 90.38694218434738],
1403
+ "Kawran Bazar": [23.751392319539104, 90.39275707447003],
1404
+ "Shahbagh": [23.740324209546923, 90.39600784811131],
1405
+ "Dhaka University": [23.732091083122114, 90.39659408796354],
1406
+ "Bangladesh Secretariat": [23.73004754106779, 90.40764881366906],
1407
+ "Motijheel": [23.72816566933198, 90.41923497972823],
1408
+ "Kamalapur": [23.732367758919807, 90.42547378971085]
1409
+ };
1410
+
1411
+ const originSelect = document.getElementById('origin');
1412
+ const destinationButtons = document.getElementById('destination-buttons');
1413
+ const fareDisplay = document.getElementById('fare-display');
1414
+
1415
+ const allStations = [...new Set(fareData.map(f => f.Origin))];
1416
+
1417
+ allStations.forEach(station => {
1418
+ const option = document.createElement('option');
1419
+ option.value = station;
1420
+ option.textContent = station;
1421
+ originSelect.appendChild(option);
1422
+ });
1423
+
1424
+ originSelect.addEventListener('change', () => {
1425
+ destinationButtons.innerHTML = '';
1426
+ fareDisplay.innerHTML = '';
1427
+ const selectedOrigin = originSelect.value;
1428
+
1429
+ if (!selectedOrigin) return;
1430
+
1431
+ const destinations = fareData
1432
+ .filter(f => f.Origin === selectedOrigin)
1433
+ .map(f => f.Destination);
1434
+
1435
+ destinations.forEach(destination => {
1436
+ const btn = document.createElement('button');
1437
+ btn.textContent = destination;
1438
+ btn.addEventListener('click', () => {
1439
+ btn.classList.toggle('selected');
1440
+ updateFares(selectedOrigin);
1441
+ });
1442
+ destinationButtons.appendChild(btn);
1443
+ });
1444
+ });
1445
+
1446
+ document.getElementById('clear-destinations').addEventListener('click', () => {
1447
+ document.querySelectorAll('#destination-buttons button').forEach(btn => btn.classList.remove('selected'));
1448
+ fareDisplay.innerHTML = '';
1449
+ });
1450
+
1451
+ function updateFares(origin) {
1452
+ fareDisplay.innerHTML = '';
1453
+ const selectedDestinations = Array.from(document.querySelectorAll('#destination-buttons button.selected'))
1454
+ .map(btn => btn.textContent);
1455
+
1456
+ selectedDestinations.forEach(destination => {
1457
+ const fareInfo = fareData.find(f => f.Origin === origin && f.Destination === destination);
1458
+ if (fareInfo) {
1459
+ const card = document.createElement('div');
1460
+ card.className = 'fare-item';
1461
+ card.innerHTML = `
1462
+ <div class="journey-detail">
1463
+ <div class="station">${origin}</div>
1464
+ <div class="journey-arrow"><i class="fas fa-arrow-right"></i></div>
1465
+ <div class="station">${destination}</div>
1466
+ </div>
1467
+ <div class="fare-amount">৳${fareInfo["Fare (৳)"]}</div>
1468
+ `;
1469
+ fareDisplay.appendChild(card);
1470
+ }
1471
+ });
1472
+ }
1473
+
1474
+ // Map rendering
1475
+ const map = L.map('map').setView([23.8103, 90.4125], 12);
1476
+
1477
+ L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
1478
+ attribution: '&copy; OpenStreetMap contributors'
1479
+ }).addTo(map);
1480
+
1481
+ Object.entries(coordinates).forEach(([name, coord]) => {
1482
+ L.marker(coord).addTo(map).bindPopup(`<strong>${name}</strong>`);
1483
+ });
1484
+
1485
+ const sourceSelect = document.getElementById('map-source');
1486
+ const destSelect = document.getElementById('map-destination');
1487
+
1488
+ allStations.forEach(station => {
1489
+ const srcOption = document.createElement('option');
1490
+ srcOption.value = station;
1491
+ srcOption.textContent = station;
1492
+ sourceSelect.appendChild(srcOption);
1493
+
1494
+ const dstOption = document.createElement('option');
1495
+ dstOption.value = station;
1496
+ dstOption.textContent = station;
1497
+ destSelect.appendChild(dstOption);
1498
+ });
1499
+
1500
+ let routeLine;
1501
+
1502
+ function startRouteAnimation() {
1503
+ if (routeLine) map.removeLayer(routeLine);
1504
+
1505
+ const source = sourceSelect.value;
1506
+ const destination = destSelect.value;
1507
+
1508
+ if (!source || !destination || !coordinates[source] || !coordinates[destination]) return;
1509
+
1510
+ routeLine = L.polyline([coordinates[source], coordinates[destination]], {
1511
+ color: 'blue',
1512
+ weight: 5,
1513
+ dashArray: '10, 10'
1514
+ }).addTo(map);
1515
+
1516
+ map.fitBounds(routeLine.getBounds());
1517
+ }
1518
+
1519
+ function animateAllLocations() {
1520
+ if (routeLine) map.removeLayer(routeLine);
1521
+
1522
+ const allCoords = Object.values(coordinates);
1523
+ routeLine = L.polyline(allCoords, {
1524
+ color: 'green',
1525
+ weight: 4,
1526
+ dashArray: '5, 5'
1527
+ }).addTo(map);
1528
+
1529
+ map.fitBounds(routeLine.getBounds());
1530
+ }
1531
+
1532
+ function stopAnimation() {
1533
+ if (routeLine) {
1534
+ map.removeLayer(routeLine);
1535
+ routeLine = null;
1536
+ }
1537
+ }
1538
+
1539
+ const sidebar = document.getElementById('sidebar');
1540
+ const sidebarToggle = document.getElementById('sidebar-toggle');
1541
+ const icon = sidebarToggle.querySelector('i');
1542
+
1543
+ function updateChevron() {
1544
+ if (window.innerWidth > 1024) {
1545
+ if (sidebar.classList.contains('collapsed')) {
1546
+ icon.classList.remove('fa-chevron-left');
1547
+ icon.classList.add('fa-chevron-right');
1548
+ } else {
1549
+ icon.classList.add('fa-chevron-left');
1550
+ icon.classList.remove('fa-chevron-right');
1551
+ }
1552
+ } else {
1553
+ if (sidebar.classList.contains('open')) {
1554
+ icon.classList.add('fa-chevron-left');
1555
+ icon.classList.remove('fa-chevron-right');
1556
+ } else {
1557
+ icon.classList.remove('fa-chevron-left');
1558
+ icon.classList.add('fa-chevron-right');
1559
+ }
1560
+ }
1561
+ }
1562
+
1563
+ function handleSidebarToggle() {
1564
+ if (window.innerWidth > 1024) {
1565
+ sidebar.classList.toggle('collapsed');
1566
+ sidebarToggle.classList.toggle('sidebar-at-edge', sidebar.classList.contains('collapsed'));
1567
+ } else {
1568
+ sidebar.classList.toggle('open');
1569
+ }
1570
+ updateChevron();
1571
+ }
1572
+
1573
+ sidebarToggle.addEventListener('click', handleSidebarToggle);
1574
+
1575
+ // Keep everything normal on resize
1576
+ window.addEventListener('resize', function() {
1577
+ if (window.innerWidth > 1024) {
1578
+ sidebar.classList.remove('open');
1579
+ sidebar.classList.remove('collapsed');
1580
+ sidebarToggle.classList.remove('sidebar-at-edge');
1581
+ icon.classList.remove('fa-chevron-right');
1582
+ icon.classList.add('fa-chevron-left');
1583
+ } else {
1584
+ sidebar.classList.remove('collapsed');
1585
+ sidebarToggle.classList.remove('sidebar-at-edge');
1586
+ icon.classList.remove('fa-chevron-left');
1587
+ icon.classList.add('fa-chevron-right');
1588
+ }
1589
+ updateChevron();
1590
+ });
1591
+
1592
+ // Call once on load
1593
+ updateChevron();
1594
+
1595
+ // Show notification on load
1596
+ window.addEventListener('load', () => {
1597
+ document.querySelector('.notification').classList.add('show');
1598
+ setTimeout(() => {
1599
+ document.querySelector('.notification').classList.remove('show');
1600
+ }, 5000);
1601
+ });
1602
+ </script>
1603
+ </body>
1604
  </html>