edit this code to display the timeline and station with green colour from departure to destination, default colours station before departure and station after destination
<!DOCTYPE html>
<html lang=“en”>

<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Bus Schedule and Timeline</title>
<link rel=“stylesheet” href=“https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css”>
<style>
body {
font-family: ‘Roboto’, sans-serif;
}

.station {
position: relative;
margin: 10px 0px;
display: flex;
flex-direction: row;
align-items: center;
}

.timeline {
content: “”;
position: absolute;
top: 50%;
bottom: -60%;
/* Adjust this value as needed */
border-left: 4px solid #4c51bf;
z-index: 1;
}

.station:last-child .timeline {
border-left: none;
}

.hoi {
content: “”;
position: relative;
width: 16px;
height: 16px;
left: 2px;
background-color: #fff;
border: 4px solid #4c51bf;
border-radius: 50%;
transform: translateX(-50%);
z-index: 2;
}

.time-wrapper {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
z-index: 3;
width: 20px;
}

.station-time {
padding: 5px 10px;
background-color: #4c51bf;
color: #fff;
border-radius: 12px;
white-space: nowrap;
z-index: 3;
margin-right: 20px;
}

.station-name {
flex-grow: 1;
margin-left: 20px;
margin-right: 20px;
z-index: 3;
}

.header-row {
display: flex;
justify-content: space-between;
padding: 10px;
font-weight: bold;
}
</style>
</head>

<body>
<div class=“container mx-auto px-4”>
<h1 class=“text-3xl font-bold text-center my-4”>Bus Schedule</h1>
<div class=“grid grid-cols-2 gap-4”>
<div class=“bg-gray-100 p-4 rounded-md”>
<label for=“departure” class=“block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300”>Departure</label>
<input type=“text” id=“departure” class=“bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white” placeholder=“Enter departure”>
</div>
<div class=“bg-gray-100 p-4 rounded-md”>
<label for=“destination” class=“block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300”>Destination</label>
<input type=“text” id=“destination” class=“bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white” placeholder=“Enter destination”>
</div>
<div class=“bg-gray-100 p-4 rounded-md”>
<label for=“time” class=“block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300”>Time</label>
<input type=“time” id=“time” class=“bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white”>
</div>
<div class=“bg-gray-100 p-4 rounded-md”>
<button type=“submit” onclick=“submitForm()” class=“bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg”>Submit</button>
</div>
</div>
</div>

<div class=“bg-gray-100 font-roboto”>
<div class=“max-w-xl mx-auto py-12 px-4 sm:px-6 lg:px-2”>
<div class=“mt-8” id=“scheduleContainer”>
<!-- Schedule will be dynamically populated here -->
</div>
</div>
</div>

<script>
async function submitForm() {
const departure = document.getElementById(‘departure’).value;
const destination = document.getElementById(‘destination’).value;
// const time = document.getElementById(‘time’).value;
const time = ‘12:24’

// Make API request
const apiUrl = https://busapi.amithv.xyz/api/v1/schedules?departure=${encodeURIComponent(departure)}&destination=${encodeURIComponent(destination)}&time=${encodeURIComponent(time)};

try {
const response = await fetch(apiUrl);
const scheduleData = await response.json();

// Process the schedule data and update the scheduleContainer
updateSchedule(scheduleData);
} catch (error) {
console.error(‘Error fetching data:’, error);
}
}

function updateSchedule(scheduleData) {
const scheduleContainer = document.getElementById(‘scheduleContainer’);
scheduleContainer.innerHTML = ‘’; // Clear previous schedule

scheduleData.forEach((trip, index, array) => {
let vehicleDiv = document.createElement(‘div’);
vehicleDiv.textContent = Vehicle Number: ${trip.vehicle_number}, Trip: ${trip.trip};
scheduleContainer.appendChild(vehicleDiv);

trip.stations.forEach((station, stationIndex) => {
let stationDiv = document.createElement(‘div’);
stationDiv.classList.add(‘station’);

let arrivalTimeDiv = document.createElement(‘div’);
arrivalTimeDiv.classList.add(‘station-time’);
arrivalTimeDiv.textContent = station.arrivalTime;
stationDiv.appendChild(arrivalTimeDiv);

// Create time-wrapper and its children elements: hoi and timeline
let timeWrapperDiv = document.createElement(‘div’);
timeWrapperDiv.classList.add(‘time-wrapper’);

let hoiDiv = document.createElement(‘div’);
hoiDiv.classList.add(‘hoi’);
timeWrapperDiv.appendChild(hoiDiv);

// Only add a timeline if it is not the last station of the current trip
if (stationIndex !== trip.stations.length - 1) {
let timelineDiv = document.createElement(‘div’);
timelineDiv.classList.add(‘timeline’);
timeWrapperDiv.appendChild(timelineDiv);
}

stationDiv.appendChild(timeWrapperDiv);

let stationNameDiv = document.createElement(‘div’);
stationNameDiv.classList.add(‘station-name’);
stationNameDiv.textContent = station.station;
stationDiv.appendChild(stationNameDiv);

let departureTimeDiv = document.createElement(‘div’);
departureTimeDiv.classList.add(‘station-time’);
departureTimeDiv.textContent = station.departureTime;
stationDiv.appendChild(departureTimeDiv);

scheduleContainer.appendChild(stationDiv);
});
});
}
</script>
</body>

</html>