Created
April 15, 2026 09:32
-
-
Save aashutoshrathi/a7a4ee217b65b4c4c494876f85f6b075 to your computer and use it in GitHub Desktop.
NBH to Pune
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Nimbahera to Pune | Trip Tracker</title> | |
| <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" /> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <style> | |
| #map { height: 400px; border-radius: 12px; } | |
| .timeline-dot { width: 12px; height: 12px; background: #3b82f6; border-radius: 50%; position: absolute; left: -6px; top: 8px; } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 text-gray-900 font-sans"> | |
| <div class="max-w-4xl mx-auto p-4 lg:p-8"> | |
| <header class="mb-6"> | |
| <h1 class="text-3xl font-bold text-blue-800">Nimbahera to Pune Trip</h1> | |
| <p class="text-gray-500">Target Arrival: 24th April, 05:30 PM</p> | |
| </header> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <div class="lg:col-span-1 bg-white p-6 rounded-xl shadow-sm border border-gray-100 h-fit"> | |
| <h2 class="font-semibold text-lg mb-4 border-bottom pb-2">Itinerary</h2> | |
| <div class="relative border-l-2 border-blue-100 ml-2 space-y-8 pb-4" id="timeline"> | |
| </div> | |
| </div> | |
| <div class="lg:col-span-2"> | |
| <div id="map" class="shadow-md"></div> | |
| <div class="mt-4 p-4 bg-blue-50 rounded-lg border border-blue-100 text-sm"> | |
| <strong>Ideal Stats:</strong> | |
| Avg Speed: 60 km/h | Total Distance: ~930 km | Total Time: 20 hrs | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script> | |
| <script> | |
| // --- EDITABLE DATA AREA --- | |
| const tripData = [ | |
| { name: "Nimbahera", coords: [24.62, 74.69], time: "09:30 PM", date: "23 Apr", activity: "Departure" }, | |
| { name: "Indore", coords: [22.72, 75.86], time: "02:30 AM", date: "24 Apr", activity: "Rest Break" }, | |
| { name: "Sendhwa Border", coords: [21.68, 75.09], time: "05:30 AM", date: "24 Apr", activity: "Breakfast Stop" }, | |
| { name: "Malegaon", coords: [20.55, 74.53], time: "09:30 AM", date: "24 Apr", activity: "Quick Stretch" }, | |
| { name: "Nashik", coords: [20.00, 73.79], time: "12:00 PM", date: "24 Apr", activity: "Lunch Break" }, | |
| { name: "Pune (Bhavan)", coords: [18.5144, 73.8587], time: "05:30 PM", date: "24 Apr", activity: "Arrival" } | |
| ]; | |
| // Initialize Map | |
| const map = L.map('map').setView([21.5, 74.5], 6); | |
| L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map); | |
| const timelineContainer = document.getElementById('timeline'); | |
| const latlngs = []; | |
| tripData.forEach((stop, index) => { | |
| // Add Markers | |
| L.marker(stop.coords).addTo(map) | |
| .bindPopup(`<b>${stop.name}</b><br>${stop.time}<br>${stop.activity}`); | |
| latlngs.push(stop.coords); | |
| // Add Timeline Items | |
| const item = document.createElement('div'); | |
| item.className = "relative pl-6"; | |
| item.innerHTML = ` | |
| <div class="timeline-dot"></div> | |
| <div class="text-xs text-blue-600 font-bold">${stop.time}</div> | |
| <div class="font-bold text-gray-800">${stop.name}</div> | |
| <div class="text-xs text-gray-500 italic">${stop.activity}</div> | |
| `; | |
| timelineContainer.appendChild(item); | |
| }); | |
| // Draw Route Line | |
| L.polyline(latlngs, {color: '#3b82f6', weight: 4, opacity: 0.6}).addTo(map); | |
| map.fitBounds(L.polyline(latlngs).getBounds(), {padding: [30, 30]}); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment