Hugging Face's logo

Spaces:
shukdevdatta123
/
DhakaMetroFare-v2.0
Running

App Files Community
shukdevdatta123 commited on
Commit
4ece169
·
verified ·
1 Parent(s): b589a1e

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +20 -14
app.py CHANGED
@@ -19,9 +19,7 @@ else:
19
  st.sidebar.title("Instructions")
20
  st.sidebar.write("""
21
  **Welcome to the Dhaka Metro Rail Fare Checker! 🚇**
22
-
23
  *How to use:*
24
-
25
  1. **Select your Location station**:
26
  - Choose the station you are currently at from the **"Select your Location"** dropdown menu.
27
 
@@ -35,22 +33,15 @@ else:
35
 
36
  4. **Clear Destinations**:
37
  - If you want to reset your selection of destinations, simply click the **"Clear All Destinations"** button to start fresh.
38
-
39
  ---
40
-
41
  **Interactive Map**:
42
-
43
  The interactive map of Dhaka Metro stations below allows you to visualize routes between your selected origin and destination(s). Use the map to explore stations, animate routes, and check locations on the map.
44
-
45
  **Interactive Features**:
46
-
47
  - **Source & Destination Dropdown**: Select your source and destination from the dropdown menus on the map.
48
  - **Animate Route**: Click the **"Animate Route"** button to visually track the route between the selected source and destination stations.
49
  - **Animate All Locations**: Click the **"Animate All Locations"** button to animate all stations and get a dynamic overview of the network.
50
  - **Stop Animation**: If you want to stop the animation at any time, press the **"Stop Animation"** button.
51
-
52
  Enjoy your journey on the Dhaka Metro! 🚉
53
-
54
 
55
  If you encounter any issues or need assistance, feel free to [Contact Support on WhatsApp](https://wa.me/+8801719296601).
56
  """)
@@ -151,6 +142,23 @@ If you encounter any issues or need assistance, feel free to [Contact Support on
151
  gap: 10px;
152
  background-color: #f0f0f0;
153
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
154
  </style>
155
  </head>
156
  <body>
@@ -161,12 +169,11 @@ If you encounter any issues or need assistance, feel free to [Contact Support on
161
  <select id="destination">
162
  <option value="">Select Destination</option>
163
  </select>
164
- <button onclick="startRouteAnimation()">Animate Route</button>
165
- <button onclick="animateAllLocations()">Animate All Locations</button>
166
- <button onclick="stopAnimation()">Stop Animation</button>
167
  </div>
168
  <div id="map"></div>
169
-
170
  <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
171
  <script>
172
  const coordinates = {
@@ -284,4 +291,3 @@ If you encounter any issues or need assistance, feel free to [Contact Support on
284
  </html>
285
  """
286
  components.html(map_html, height=600)
287
-
 
19
  st.sidebar.title("Instructions")
20
  st.sidebar.write("""
21
  **Welcome to the Dhaka Metro Rail Fare Checker! 🚇**
 
22
  *How to use:*
 
23
  1. **Select your Location station**:
24
  - Choose the station you are currently at from the **"Select your Location"** dropdown menu.
25
 
 
33
 
34
  4. **Clear Destinations**:
35
  - If you want to reset your selection of destinations, simply click the **"Clear All Destinations"** button to start fresh.
 
36
  ---
 
37
  **Interactive Map**:
 
38
  The interactive map of Dhaka Metro stations below allows you to visualize routes between your selected origin and destination(s). Use the map to explore stations, animate routes, and check locations on the map.
 
39
  **Interactive Features**:
 
40
  - **Source & Destination Dropdown**: Select your source and destination from the dropdown menus on the map.
41
  - **Animate Route**: Click the **"Animate Route"** button to visually track the route between the selected source and destination stations.
42
  - **Animate All Locations**: Click the **"Animate All Locations"** button to animate all stations and get a dynamic overview of the network.
43
  - **Stop Animation**: If you want to stop the animation at any time, press the **"Stop Animation"** button.
 
44
  Enjoy your journey on the Dhaka Metro! 🚉
 
45
 
46
  If you encounter any issues or need assistance, feel free to [Contact Support on WhatsApp](https://wa.me/+8801719296601).
47
  """)
 
142
  gap: 10px;
143
  background-color: #f0f0f0;
144
  }
145
+ #controls button {
146
+ border: none;
147
+ font-size: 16px;
148
+ padding: 10px 20px;
149
+ border-radius: 5px;
150
+ cursor: pointer;
151
+ font-weight: bold;
152
+ }
153
+ #animateRoute {
154
+ background-color: #FFEB3B; /* Light Yellow */
155
+ }
156
+ #animateAllLocations {
157
+ background-color: #81D4FA; /* Light Blue */
158
+ }
159
+ #stopAnimation {
160
+ background-color: #FFCC80; /* Light Orange */
161
+ }
162
  </style>
163
  </head>
164
  <body>
 
169
  <select id="destination">
170
  <option value="">Select Destination</option>
171
  </select>
172
+ <button id="animateRoute" onclick="startRouteAnimation()">Animate Route</button>
173
+ <button id="animateAllLocations" onclick="animateAllLocations()">Animate All Locations</button>
174
+ <button id="stopAnimation" onclick="stopAnimation()">Stop Animation</button>
175
  </div>
176
  <div id="map"></div>
 
177
  <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
178
  <script>
179
  const coordinates = {
 
291
  </html>
292
  """
293
  components.html(map_html, height=600)