YOUR TAXI MADEIRA APP

body{font-family:Arial,sans-serif;margin:0;padding:0;background:#f0f2f5;}
.container{max-width:420px;margin:20px auto;background:#fff;padding:20px;border-radius:20px;box-shadow:0 6px 15px rgba(0,0,0,0.2);}
input,select,button{width:100%;padding:14px;margin:6px 0;border-radius:12px;border:1px solid #ccc;font-size:16px;}
button{background:#FF5A5F;color:#fff;font-weight:bold;cursor:pointer;transition:0.3s;display:flex;justify-content:center;align-items:center;}
button:hover{background:#e04850;}
#callTaxiButton{background:#FF0000;font-size:18px;padding:16px;}
#map{height:220px;width:100%;border-radius:15px;margin-bottom:10px;}
#whatsappButton{position:fixed;bottom:20px;right:20px;width:60px;height:60px;background:#25D366;color:#fff;border-radius:50%;display:flex;justify-content:center;align-items:center;font-size:28px;cursor:pointer;box-shadow:0 6px 12px rgba(0,0,0,0.3);animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.15);}}
#confirmation{margin-top:12px;color:green;font-weight:bold;text-align:center;font-size:16px;}
#history{max-height:140px;overflow-y:auto;margin-top:10px;font-size:14px;}
@media (max-width:480px){
.container{padding:15px;}
button{font-size:16px;padding:14px;}
}

let map,directionsService,directionsRenderer;
let originMarker,destinationMarker,carMarker,routeCoords=[],currentStep=0;
let rideHistory=[],fareValue=0;

const drivers=[
{name:”Paulo Oliveira”,phone:”351914212772″,location:{lat:32.65,lng:-16.9}},
{name:”Carlos Oliveira”,phone:”351919059636″,location:{lat:32.65,lng:-16.9}},
{name:”Susana Oliveira”,phone:”351919078655″,location:{lat:32.65,lng:-16.9}}
];

function initMap(){
map=new google.maps.Map(document.getElementById(“map”),{zoom:13,center:{lat:32.7500,lng:-16.9500}});
directionsService=new google.maps.DirectionsService();
directionsRenderer=new google.maps.DirectionsRenderer({map,polylineOptions:{strokeColor:’#FF5A5F’,strokeWeight:6}});
new google.maps.places.Autocomplete(document.getElementById(‘origin’)).addListener(‘place_changed’,calculateRoute);
new google.maps.places.Autocomplete(document.getElementById(‘destination’)).addListener(‘place_changed’,calculateRoute);
document.getElementById(‘rideType’).addEventListener(‘change’,calculateFare);
document.getElementById(‘passengers’).addEventListener(‘change’,calculateFare);
}

function createMarker(position,color){
return new google.maps.Marker({position,map,icon:{path:google.maps.SymbolPath.CIRCLE,scale:12,fillColor:color,fillOpacity:1,strokeWeight:2,strokeColor:’white’}});
}

function calculateRoute(){
const origin=document.getElementById(‘origin’).value;
const destination=document.getElementById(‘destination’).value;
if(!origin||!destination) return;
directionsService.route({origin,destination,travelMode:google.maps.TravelMode.DRIVING},
(response,status)=>{if(status===’OK’){
directionsRenderer.setDirections(response);
routeCoords=response.routes[0].overview_path;
const start=response.routes[0].legs[0].start_location;
const end=response.routes[0].legs.slice(-1)[0].end_location;
if(!originMarker) originMarker=createMarker(start,’#FF5A5F’); else originMarker.setPosition(start);
if(!destinationMarker) destinationMarker=createMarker(end,’#FF4500′); else destinationMarker.setPosition(end);
calculateFare(); animateCar();}});
}

function calculateFare(){
let fare=15;
const type=document.getElementById(‘rideType’).value;
const passengers=parseInt(document.getElementById(‘passengers’).value)||1;
if(type===’XL’) fare*=1.2;
if(type===’Child’) fare*=1.1;
if(passengers>4) fare*=1.2;
fareValue = fare;
document.getElementById(‘fare’).textContent=’€’+fare.toFixed(2);
return fare;
}

function getClosestDriver(lat,lng){
let minDist=Infinity,closest=null;
drivers.forEach(d=>{
const dist=Math.hypot(d.location.lat-lat,d.location.lng-lng);
if(dist{
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(position=>{
const lat=position.coords.latitude;
const lng=position.coords.longitude;
const driver=getClosestDriver(lat,lng);
const mapsLink=`https://www.google.com/maps/search/?api=1&query=${lat},${lng}`;
const msg=`🚖 Preciso de um táxi agora! Minha localização: ${mapsLink}`;
const waLink=`https://wa.me/${driver.phone}?text=${encodeURIComponent(msg)}`;
window.open(waLink,’_blank’);
document.getElementById(‘confirmation’).textContent=`✅ Táxi mais próximo: ${driver.name} foi notificado no WhatsApp.`;
document.getElementById(‘sound’).play();
},()=>{alert(‘Não foi possível obter sua localização.’);});
}else{alert(‘Geolocalização não suportada no seu navegador.’);}
});

window.onload=initMap;