<html><head><base href="https://example.com/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admovi - Pedidos</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5;
color: #333;
}
header {
background-color: #4CAF50;
color: white;
padding: 20px;
text-align: center;
font-size: 24px;
font-weight: bold;
}
.container {
max-width: 800px;
margin: 30px auto;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}
input, textarea, button {
width: 100%;
padding: 10px;
font-size: 16px;
border: 1px solid #ddd;
border-radius: 5px;
outline: none;
}
textarea {
resize: none;
height: 80px;
}
button {
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #45a049;
}
.orders-section {
margin-top: 30px;
display: none; /* Hidden by default for non-admin users */
}
.order-card {
border: 1px solid #ddd;
border-radius: 5px;
padding: 15px;
margin-bottom: 15px;
background-color: #fcfcfc;
}
.order-card p {
margin: 5px 0;
}
input[type="password"], input[type="text"] {
margin-bottom: 15px;
}
.admin-login {
background-color: #fff;
padding: 20px;
border-radius: 5px;
max-width: 500px;
margin: 30px auto;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<header>Admovi - Pedidos de Envío</header>
<div class="container">
<h2>Realiza tu pedido:</h2>
<form id="orderForm">
<div class="form-group">
<label for="name">Nombre:</label>
<input type="text" id="name" placeholder="Tu nombre" required>
</div>
<div class="form-group">
<label for="pickupInstitution">Institución (Retiro):</label>
<input type="text" id="pickupInstitution" placeholder="Institución donde se retira el paquete" required>
</div>
<div class="form-group">
<label for="pickupSection">Sección (Retiro):</label>
<input type="text" id="pickupSection" placeholder="Sección donde se retira el paquete" required>
</div>
<div class="form-group">
<label for="deliveryInstitution">Institución (Entrega):</label>
<input type="text" id="deliveryInstitution" placeholder="Institución donde se entrega el paquete" required>
</div>
<div class="form-group">
<label for="deliverySection">Sección (Entrega):</label>
<input type="text" id="deliverySection" placeholder="Sección donde se entrega el paquete" required>
</div>
<div class="form-group">
<label for="observations">Observaciones (Opcional):</label>
<textarea id="observations" placeholder="Aclaraciones como horarios y cantidad de bultos..."></textarea>
</div>
<button type="button" onclick="addOrder()">Solicitar Envío</button>
</form>
</div>
<div class="container admin-login">
<h2>Acceso Administradores</h2>
<form id="adminLoginForm">
<div class="form-group">
<label for="adminUsername">Usuario:</label>
<input type="text" id="adminUsername" placeholder="Usuario" required>
</div>
<div class="form-group">
<label for="adminPassword">Contraseña:</label>
<input type="password" id="adminPassword" placeholder="Contraseña" required>
</div>
<button type="button" onclick="adminLogin()">Acceder</button>
</form>
</div>
<div class="container orders-section" id="ordersSection">
<h2>Pedidos Realizados</h2>
<div id="ordersList">
<!-- Orders will be displayed here -->
</div>
</div>
<script>
// Admin credentials
const ADMIN_ID = "Admovi2024";
const ADMIN_PASSWORD = "Admovi223344";
function addOrder() {
const name = document.getElementById('name').value.trim();
const pickupInstitution = document.getElementById('pickupInstitution').value.trim();
const pickupSection = document.getElementById('pickupSection').value.trim();
const deliveryInstitution = document.getElementById('deliveryInstitution').value.trim();
const deliverySection = document.getElementById('deliverySection').value.trim();
const observations = document.getElementById('observations').value.trim();
if (name && pickupInstitution && pickupSection && deliveryInstitution && deliverySection) {
const order = {
id: Date.now(),
name,
pickupInstitution,
pickupSection,
deliveryInstitution,
deliverySection,
observations,
status: "Pendiente"
};
const orders = JSON.parse(localStorage.getItem('admoviOrders') || '[]');
orders.push(order);
localStorage.setItem('admoviOrders', JSON.stringify(orders));
alert('¡Pedido realizado con éxito!');
document.getElementById('orderForm').reset();
renderOrders();
} else {
alert('Por favor, completa todos los campos obligatorios');
}
}
function renderOrders() {
const ordersList = document.getElementById('ordersList');
const orders = JSON.parse(localStorage.getItem('admoviOrders') || '[]');
ordersList.innerHTML = '';
orders.forEach(order => {
const orderCard = document.createElement('div');
orderCard.className = 'order-card';
orderCard.innerHTML = `
<p><strong>Nombre:</strong> ${order.name}</p>
<p><strong>Institución (Retiro):</strong> ${order.pickupInstitution}</p>
<p><strong>Sección (Retiro):</strong> ${order.pickupSection}</p>
<p><strong>Institución (Entrega):</strong> ${order.deliveryInstitution}</p>
<p><strong>Sección (Entrega):</strong> ${order.deliverySection}</p>
<p><strong>Observaciones:</strong> ${order.observations || "Ninguna"}</p>
<p><strong>Estatus:</strong> ${order.status}</p>
<button onclick="confirmOrder(${order.id})">Confirmar</button>
`;
ordersList.appendChild(orderCard);
});
}
function confirmOrder(orderId) {
const orders = JSON.parse(localStorage.getItem('admoviOrders') || '[]');
const orderIndex = orders.findIndex(order => order.id === orderId);
if (orderIndex !== -1) {
orders[orderIndex].status = "Procesando";
localStorage.setItem('admoviOrders', JSON.stringify(orders));
const order = orders[orderIndex];
const message = `
📦 Actualización Pedido 📦
*Nombre:* ${order.name}
*Tu pedido ahora está en estatus:* Procesando
*Institución (Entrega):* ${order.deliveryInstitution}
`;
const encodedMessage = encodeURIComponent(message);
const whatsappURL = `https://wa.me/?text=${encodedMessage}`;
window.open(whatsappURL, "_blank");
alert('Pedido confirmado y notificado al cliente.');
renderOrders();
}
}
function adminLogin() {
const username = document.getElementById('adminUsername').value.trim();
const password = document.getElementById('adminPassword').value.trim();
if (username === ADMIN_ID && password === ADMIN_PASSWORD) {
alert('Acceso concedido');
document.querySelector('.admin-login').style.display = 'none';
document.getElementById('ordersSection').style.display = 'block';
renderOrders();
} else {
alert('Usuario o contraseña incorrectos. Inténtalo de nuevo');
}
}
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('ordersSection').style.display = 'none';
});
</script>
</body>
</html>