Image

Embed


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Distance and Cost Calculator</title>
    <style>
        body {
            margin: 0;
            padding: 20px;
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            color: #000; /* Black text */
        }

        .container {
            background-color: #A5FF70; /* Green Lemon */
            border: 2px solid #000; /* Black border */
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
            max-width: 800px;
            margin: 40px auto; /* Espacio de 40px desde el banner superior */
        }

        h2 {
            text-align: center;
            margin-top: 0;
        }

        .form-group {
            margin-bottom: 20px;
        }

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

        input[type="text"] {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }

        .form-actions {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
        }

        input[type="submit"],
        button {
            background-color: #000; /* Black background */
            color: #A5FF70; /* Green Lemon text */
            border: none;
            padding: 10px;
            cursor: pointer;
            border-radius: 4px;
            font-size: 16px;
        }

        input[type="submit"]:hover,
        button:hover {
            background-color: #333; /* Darker black on hover */
        }

        .result {
            margin-top: 20px;
            padding: 10px;
            background-color: #e0e0e0;
            border-radius: 4px;
            font-size: 18px;
        }

        .disclaimer {
            margin-top: 20px;
            font-size: 14px;
            color: #333;
        }
    </style>
    <script>
        function autocomplete(input) {
            let currentFocus;

            input.addEventListener('input', function() {
                let list, item, value = this.value;

                closeAllLists();
                if (!value) return;

                currentFocus = -1;
                list = document.createElement('DIV');
                list.setAttribute('id', this.id + '-autocomplete-list');
                list.setAttribute('class', 'autocomplete-items');
                this.parentNode.appendChild(list);

                fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${value}`)
                    .then(response => response.json())
                    .then(data => {
                        data.forEach((item) => {
                            item = item.display_name;
                            item = item.replace(/</g, "&lt;").replace(/>/g, "&gt;");
                            item = `<div>${item}</div>`;
                            list.innerHTML += item;
                        });

                        list.querySelectorAll('div').forEach((div) => {
                            div.addEventListener('click', function() {
                                input.value = this.textContent;
                                closeAllLists();
                            });
                        });
                    });
            });

            function closeAllLists(elmnt) {
                let items = document.querySelectorAll('.autocomplete-items');
                items.forEach((item) => {
                    if (elmnt !== item && elmnt !== input) {
                        item.parentNode.removeChild(item);
                    }
                });
            }

            document.addEventListener('click', function(e) {
                closeAllLists(e.target);
            });
        }

        async function calculateDistanceAndCost() {
            var origin = document.getElementById('origin').value;
            var destination = document.getElementById('destination').value;

            // Convert addresses to coordinates
            const geocodeUrl = (address) => `https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(address)}`;
            const geocode = async (address) => {
                const response = await fetch(geocodeUrl(address));
                const data = await response.json();
                return data[0] ? { lat: data[0].lat, lon: data[0].lon } : null;
            };

            const originCoords = await geocode(origin);
            const destinationCoords = await geocode(destination);

            if (!originCoords || !destinationCoords) {
                alert('Error: Could not geocode one or both addresses.');
                return;
            }

            const distanceUrl = `https://router.project-osrm.org/route/v1/driving/${originCoords.lon},${originCoords.lat};${destinationCoords.lon},${destinationCoords.lat}?overview=false`;
            const distanceResponse = await fetch(distanceUrl);
            const distanceData = await distanceResponse.json();
            const distanceMeters = distanceData.routes[0].distance; // distance in meters
            const distanceMiles = distanceMeters / 1609.34; // convert meters to miles
            const costPerMile = 1.69;
            const totalCost = distanceMiles * costPerMile;

            document.getElementById('result').innerHTML =
                `Distance: ${distanceMiles.toFixed(2)} miles <br> Total Cost: $${totalCost.toFixed(2)}`;
        }

        function resetCalculator() {
            document.getElementById('origin').value = '';
            document.getElementById('destination').value = '';
            document.getElementById('result').innerHTML = '';
        }

        document.addEventListener('DOMContentLoaded', function() {
            autocomplete(document.getElementById('origin'));
            autocomplete(document.getElementById('destination'));
        });
    </script>
</head>
<body>
    <div class="container">
        <h2>Calculate Trip Cost</h2>
        <form onsubmit="event.preventDefault(); calculateDistanceAndCost();">
            <div class="form-group">
                <label for="origin">Pickup Address:</label>
                <input type="text" id="origin" name="origin" required>
            </div>
            <div class="form-group">
                <label for="destination">Dropoff Address:</label>
                <input type="text" id="destination" name="destination" required>
            </div>
            <div class="form-actions">
                <input type="submit" value="Calculate Cost">
                <button id="ok-button" onclick="resetCalculator();">OK</button>
                <button onclick="window.location.href='https://miateleport.com/reserva';">Book Ride</button>
            </div>
        </form>
        <div id="result" class="result"></div>
        <div class="disclaimer">
            Disclaimer: This estimated cost is based solely on the information entered by the customer and may be subject to changes, duration times, and other variables such as traffic, weather events, and other unforeseen situations during the trip.
        </div>
    </div>
</body>
</html>