<
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mateovski Express - Moto Envíos</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 600px;
margin: 0 auto;
background: white;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
overflow: hidden;
}
.header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 30px;
text-align: center;
}
.header h1 { font-size: 2em; margin-bottom: 10px; }
.motorcycle-icon { font-size: 3em; margin-bottom: 10px; }
.content { padding: 30px; }
.welcome-message {
background: #f8f9fa;
border-left: 4px solid #667eea;
padding: 20px;
margin-bottom: 30px;
border-radius: 8px;
}
.form-group { margin-bottom: 20px; }
label { display: block; margin-bottom: 8px; color: #333; font-weight: 600; }
input, textarea {
width: 100%; padding: 12px; border: 2px solid #e0e0e0;
border-radius: 8px; font-size: 16px;
}
.location-btn {
width: 100%; padding: 15px; background: #667eea; color: white;
border: none; border-radius: 8px; cursor: pointer; font-weight: 600;
transition: 0.3s;
}
.location-btn:hover { background: #764ba2; }
.location-info {
background: #e8f4f8; padding: 15px; border-radius: 8px;
margin-top: 10px; display: none;
}
.location-info.active { display: block; }
.price-section {
background: #fff3cd; border-left: 4px solid #ffc107;
padding: 20px; margin: 20px 0; border-radius: 8px; display: none;
}
.price-section.active { display: block; }
.total-price { font-size: 1.5em; font-weight: bold; color: #667eea; }
.submit-btn {
width: 100%; padding: 18px;
background: linear-gradient(135deg, #28a745 0%, #218838 100%);
color: white; border: none; border-radius: 8px; font-size: 18px;
font-weight: 600; cursor: pointer;
}
.submit-btn:disabled { background: #ccc; cursor: not-allowed; }
.success-message {
background: #d4edda; border-left: 4px solid #28a745;
padding: 20px; margin-top: 20px; border-radius: 8px; display: none;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<div class="motorcycle-icon">🏍️</div>
<h1>Mateovski Express</h1>
<p>Servicio de Moto Envíos Rápidos</p>
</div>
<div class="content">
<div class="welcome-message">
<h2>¡Hola! 👋</h2>
<p>Calcula el costo de tu envío ingresando los datos y las coordenadas de Google Maps.</p>
</div>
<form id="orderForm">
<div class="form-group">
<label for="customerName">📝 Tu nombre completo:</label>
<input type="text" id="customerName" required placeholder="Ej: Juan Pérez">
</div>
<div class="form-group">
<label for="phoneNumber">📱 Número de teléfono:</label>
<input type="tel" id="phoneNumber" required placeholder="Ej: 5512345678">
</div>
<div class="form-group">
<label for="orderDescription">📦 ¿Qué enviamos?:</label>
<textarea id="orderDescription" rows="2" required placeholder="Descripción del paquete"></textarea>
</div>
<div class="form-group">
<label>📍 Punto de Recogida:</label>
<button type="button" class="location-btn" onclick="getLocation('pickup')">Obtener Coordenadas</button>
<div id="pickupInfo" class="location-info">
<p id="pickupCoords">Coordenadas: -</p>
</div>
</div>
<div class="form-group">
<label>🎯 Punto de Entrega:</label>
<button type="button" class="location-btn" onclick="getLocation('delivery')">Obtener Coordenadas</button>
<div id="deliveryInfo" class="location-info">
<p id="deliveryCoords">Coordenadas: -</p>
</div>
</div>
<div id="priceSection" class="price-section">
<h3>💰 Resumen del Envío</h3>
<p>Distancia: <span id="distanceText">-</span></p>
<p class="total-price">TOTAL: $<span id="totalPrice">0</span></p>
</div>
<button type="submit" class="submit-btn" id="submitBtn" disabled>Confirmar Pedido</button>
</form>
<div id="successMessage" class="success-message">
<h3>✅ ¡Pedido Recibido!</h3>
<p>Nos comunicaremos contigo a la brevedad.</p>
</div>
</div>
</div>
<script>
let locations = { pickup: null, delivery: null };
function getLocation(type) {
alert("Abre Google Maps, mantén presionado el punto exacto y copia las coordenadas (ej: 19.4326, -99.1332)");
setTimeout(() => {
const input = prompt("Pega aquí las coordenadas:");
if (input) {
const parts = input.split(',');
const lat = parseFloat(parts[0]);
const lng = parseFloat(parts[1]);
if (!isNaN(lat) && !isNaN(lng)) {
locations[type] = { lat, lng };
document.getElementById(type + 'Info').classList.add('active');
document.getElementById(type + 'Coords').textContent = `Ubicación lista: ${lat}, ${lng}`;
calculateFinalDistance();
} else {
alert("Formato de coordenadas inválido.");
}
}
}, 1000);
}
function calculateFinalDistance() {
if (!locations.pickup || !locations.delivery) return;
const R = 6371;
const dLat = (locations.delivery.lat - locations.pickup.lat) * Math.PI / 180;
const dLng = (locations.delivery.lng - locations.pickup.lng) * Math.PI / 180;
const a = Math.sin(dLat/2) * Math.sin(dLat/2) +
Math.cos(locations.pickup.lat * Math.PI / 180) * Math.cos(locations.delivery.lat * Math.PI / 180) * Math.sin(dLng/2) * Math.sin(dLng/2);
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
const distance = Math.ceil(R * c);
let total = 45; // Base
if (distance > 2) {
total += (distance - 2) * 10;
}
document.getElementById('distanceText').textContent = distance + " km";
document.getElementById('totalPrice').textContent = total;
document.getElementById('priceSection').classList.add('active');
document.getElementById('submitBtn').disabled = false;
}
document.getElementById('orderForm').addEventListener('submit', function(e) {
e.preventDefault();
document.getElementById('successMessage').style.display = 'block';
this.reset();
document.getElementById('submitBtn').disabled = true;
});
</script>
</body>
</html>