Spaces:

shukdevdatta123
/

DhakaMetroWeb

Running

File size: 17,344 Bytes

824f8af
8c77b27

<script type="text/javascript">
        var gk_isXlsx = false;
        var gk_xlsxFileLookup = {};
        var gk_fileData = {};
        function filledCell(cell) {
          return cell !== '' && cell != null;
        }
        function loadFileData(filename) {
        if (gk_isXlsx && gk_xlsxFileLookup[filename]) {
            try {
                var workbook = XLSX.read(gk_fileData[filename], { type: 'base64' });
                var firstSheetName = workbook.SheetNames[0];
                var worksheet = workbook.Sheets[firstSheetName];

                // Convert sheet to JSON to filter blank rows
                var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, blankrows: false, defval: '' });
                // Filter out blank rows (rows where all cells are empty, null, or undefined)
                var filteredData = jsonData.filter(row => row.some(filledCell));

                // Heuristic to find the header row by ignoring rows with fewer filled cells than the next row
                var headerRowIndex = filteredData.findIndex((row, index) =>
                  row.filter(filledCell).length >= filteredData[index + 1]?.filter(filledCell).length
                );
                // Fallback
                if (headerRowIndex === -1 || headerRowIndex > 25) {
                  headerRowIndex = 0;
                }

                // Convert filtered JSON back to CSV
                var csv = XLSX.utils.aoa_to_sheet(filteredData.slice(headerRowIndex)); // Create a new sheet from filtered array of arrays
                csv = XLSX.utils.sheet_to_csv(csv, { header: 1 });
                return csv;
            } catch (e) {
                console.error(e);
                return "";
            }
        }
        return gk_fileData[filename] || "";
        }
        </script><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dhaka Metro Rail Fare Checker</title>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Roboto', sans-serif;
            background-color: #f4f4f4;
            color: #333;
            overflow-x: hidden;
        }

        header {
            background: linear-gradient(135deg, #003366, #005588);
            color: white;
            padding: 2rem;
            text-align: center;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            animation: slideInDown 1s ease-out;
        }

        header h1 {
            font-size: 2.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        aside#sidebar {
            position: fixed;
            top: 0;
            left: 0;
            width: 280px;
            height: 100%;
            background: #D8C4B6;
            padding: 20px;
            overflow-y: auto;
            box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
            transform: translateX(-100%);
            animation: slideInLeft 0.8s ease-out forwards;
        }

        aside h2 {
            color: #003366;
            margin-bottom: 15px;
        }

        aside p {
            font-size: 0.95rem;
            line-height: 1.6;
        }

        aside a {
            color: #009688;
            text-decoration: none;
        }

        main {
            margin-left: 300px;
            padding: 30px;
            animation: fadeIn 1s ease-in;
        }

        #fare-checker, #map-section {
            background: white;
            padding: 25px;
            border-radius: 12px;
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
            margin-bottom: 30px;
            transition: transform 0.3s ease;
        }

        #fare-checker:hover, #map-section:hover {
            transform: translateY(-5px);
        }

        h2 {
            color: #003366;
            margin-bottom: 20px;
        }

        label {
            font-weight: bold;
            margin-bottom: 10px;
            display: block;
        }

        select {
            width: 100%;
            padding: 12px;
            margin-bottom: 20px;
            border: 2px solid #009688;
            border-radius: 6px;
            font-size: 1rem;
            transition: border-color 0.3s ease;
        }

        select:focus {
            border-color: #e91e63;
            outline: none;
        }

        #destination-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-bottom: 20px;
        }

        #destination-buttons button {
            background: #009688;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 25px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        #destination-buttons button:hover {
            background: #00796b;
            transform: scale(1.05);
        }

        #destination-buttons button.selected {
            background: #e91e63;
            transform: scale(1.05);
        }

        #clear-destinations {
            background: #e91e63;
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 25px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        #clear-destinations:hover {
            background: #c2185b;
            transform: scale(1.05);
        }

        #fare-display .fare-item {
            background: #f0f8ff;
            padding: 15px;
            margin-bottom: 15px;
            border-radius: 8px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
            animation: fadeInUp 0.5s ease-out;
        }

        #map {
            height: 500px;
            border-radius: 8px;
            margin-top: 20px;
        }

        #map-controls {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 15px;
            flex-wrap: wrap;
        }

        #map-controls button {
            background: #003366;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 25px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        #map-controls button:hover {
            background: #005588;
            transform: scale(1.05);
        }

        @keyframes slideInDown {
            from { transform: translateY(-100%); }
            to { transform: translateY(0); }
        }

        @keyframes slideInLeft {
            from { transform: translateX(-100%); }
            to { transform: translateX(0); }
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @media (max-width: 768px) {
            aside#sidebar {
                position: relative;
                width: 100%;
                height: auto;
                transform: none;
                animation: none;
            }

            main {
                margin-left: 0;
                padding: 15px;
            }

            #map {
                height: 300px;
            }

            header h1 {
                font-size: 1.8rem;
            }
        }
    </style>
</head>
<body>
    <header>
        <h1>Dhaka Metro Rail Fare Checker 🚇</h1>
    </header>
    <aside id="sidebar">
        <h2>Instructions</h2>
        <p>
            <strong>Welcome to the Dhaka Metro Rail Fare Checker! 🚇</strong><br>
            <em>How to use:</em><br>
            1. <strong>Select your Location station</strong>: Choose your starting station from the "Select your Location" dropdown.<br>
            2. <strong>Select your destination(s)</strong>: Click the buttons for your desired destinations. Select multiple for different routes!<br>
            3. <strong>Fare Calculation</strong>: See fares below for your selected routes.<br>
            4. <strong>Clear Destinations</strong>: Hit "Clear All Destinations" to reset.<br>
            <hr>
            <strong>Interactive Map</strong>: Visualize routes and animate stations below.<br>
            - <strong>Dropdowns</strong>: Pick source and destination.<br>
            - <strong>Animate Route</strong>: Watch your route come to life.<br>
            - <strong>Animate All</strong>: See all stations animated.<br>
            - <strong>Stop</strong>: Pause animations anytime.<br>
            Enjoy your journey! 🚉<br>
            Need help? <a href="https://wa.me/+8801719296601">Contact Support</a>.
        </p>
    </aside>
    <main>
        <section id="fare-checker">
            <h2>Check Your Fare</h2>
            <label for="origin">Select your Location:</label>
            <select id="origin">
                <option value="">Select Journey from</option>
            </select>
            <div id="destination-buttons"></div>
            <button id="clear-destinations">Clear All Destinations</button>
            <div id="fare-display"></div>
        </section>
        <section id="map-section">
            <h2>Interactive Map</h2>
            <div id="map"></div>
            <div id="map-controls">
                <select id="map-source">
                    <option value="">Select Source</option>
                </select>
                <select id="map-destination">
                    <option value="">Select Destination</option>
                </select>
                <button onclick="startRouteAnimation()">Animate Route</button>
                <button onclick="animateAllLocations()">Animate All Locations</button>
                <button onclick="stopAnimation()">Stop Animation</button>
            </div>
        </section>
    </main>
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
    <script src="data.js"></script>
    <script>
        // Populate origin dropdown
        const originSelect = document.getElementById('origin');
        const origins = [...new Set(fareData.map(item => item.Origin))];
        origins.forEach(origin => {
            const option = document.createElement('option');
            option.value = option.textContent = origin;
            originSelect.appendChild(option);
        });

        // Handle origin selection
        let selectedDestinations = [];
        originSelect.addEventListener('change', () => {
            const origin = originSelect.value;
            const destButtons = document.getElementById('destination-buttons');
            destButtons.innerHTML = '';
            selectedDestinations = [];
            document.getElementById('fare-display').innerHTML = '';
            if (origin) {
                const destinations = fareData.filter(item => item.Origin === origin).map(item => item.Destination);
                destinations.forEach(dest => {
                    const btn = document.createElement('button');
                    btn.textContent = `Select ${dest}`;
                    btn.dataset.dest = dest;
                    btn.addEventListener('click', () => {
                        btn.classList.toggle('selected');
                        if (btn.classList.contains('selected')) {
                            selectedDestinations.push(dest);
                        } else {
                            selectedDestinations = selectedDestinations.filter(d => d !== dest);
                        }
                        updateFareDisplay(origin);
                    });
                    destButtons.appendChild(btn);
                });
            }
        });

        // Update fare display
        function updateFareDisplay(origin) {
            const fareDisplay = document.getElementById('fare-display');
            fareDisplay.innerHTML = '';
            if (origin && selectedDestinations.length) {
                selectedDestinations.forEach(dest => {
                    const fare = fareData.find(item => item.Origin === origin && item.Destination === dest);
                    if (fare) {
                        const div = document.createElement('div');
                        div.className = 'fare-item';
                        div.innerHTML = `
                            <h4>🚇 <strong>${origin}</strong> to <strong>${dest}</strong> Fare</h4>
                            <p>💵 Fare: <strong>${fare['Fare (৳)']}৳</strong></p>
                            <p>✨ Enjoy your journey!</p>
                        `;
                        fareDisplay.appendChild(div);
                    }
                });
            }
        }

        // Clear destinations
        document.getElementById('clear-destinations').addEventListener('click', () => {
            document.querySelectorAll('#destination-buttons button.selected').forEach(btn => {
                btn.classList.remove('selected');
            });
            selectedDestinations = [];
            updateFareDisplay(originSelect.value);
        });

        // Map setup
        const coordinates = {
            "Uttara North": [23.869066, 90.367445],
            "Uttara Center": [23.860118, 90.365106],
            "Uttara South": [23.845934, 90.363175],
            "Pallabi": [23.82619516961383, 90.36481554252525],
            "Mirpur 11": [23.819438208310213, 90.36528532902963],
            "Mirpur 10": [23.808582994847285, 90.36821595330717],
            "Kazipara": [23.800017952100532, 90.37178261495391],
            "Shewrapara": [23.79070140857881, 90.37564622631841],
            "Agargaon": [23.778385546736345, 90.3800557456356],
            "Bijoy Sarani": [23.766638127271825, 90.38307537134754],
            "Farmgate": [23.75923604938459, 90.38694218434738],
            "Kawran Bazar": [23.751392319539104, 90.39275707447003],
            "Shahbagh": [23.740324209546923, 90.39600784811131],
            "Dhaka University": [23.732091083122114, 90.39659408796354],
            "Bangladesh Secretariat": [23.73004754106779, 90.40764881366906],
            "Motijheel": [23.72816566933198, 90.41923497972823],
            "Kamalapur": [23.732367758919807, 90.42547378971085]
        };

        const map = L.map('map').setView([23.8103, 90.4125], 12);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: '© OpenStreetMap contributors'
        }).addTo(map);

        const markers = {};
        for (const [name, coord] of Object.entries(coordinates)) {
            markers[name] = L.marker(coord).addTo(map).bindPopup(`<b>${name}</b>`);
        }

        const mapSource = document.getElementById('map-source');
        const mapDest = document.getElementById('map-destination');
        Object.keys(coordinates).forEach(loc => {
            const opt = document.createElement('option');
            opt.value = opt.textContent = loc;
            mapSource.appendChild(opt.cloneNode(true));
            mapDest.appendChild(opt);
        });

        let currentIndex = 0;
        const markerArray = Object.values(markers);
        let animationTimeout;

        function getIntermediateNodes(source, dest) {
            const locations = Object.keys(coordinates);
            const sIdx = locations.indexOf(source);
            const dIdx = locations.indexOf(dest);
            return sIdx < dIdx ? locations.slice(sIdx, dIdx + 1) : locations.slice(dIdx, sIdx + 1).reverse();
        }

        function startRouteAnimation() {
            const source = mapSource.value;
            const dest = mapDest.value;
            if (!source || !dest) return alert('Select source and destination.');
            const route = getIntermediateNodes(source, dest);
            let idx = 0;
            function animate() {
                if (idx >= route.length) return;
                const marker = markers[route[idx]];
                map.flyTo(marker.getLatLng(), 14, { duration: 2 });
                marker.openPopup();
                idx++;
                animationTimeout = setTimeout(animate, 3000);
            }
            animate();
        }

        function animateAllLocations() {
            if (currentIndex > 0) markerArray[currentIndex - 1].closePopup();
            if (currentIndex < markerArray.length) {
                const marker = markerArray[currentIndex];
                map.flyTo(marker.getLatLng(), 14, { duration: 2 });
                marker.openPopup();
                currentIndex++;
                animationTimeout = setTimeout(animateAllLocations, 3000);
            } else {
                currentIndex = 0;
            }
        }

        function stopAnimation() {
            clearTimeout(animationTimeout);
            currentIndex = 0;
            markerArray.forEach(m => m.closePopup());
            map.setView([23.8103, 90.4125], 12);
            mapSource.value = mapDest.value = '';
        }
    </script>
</body>
</html>