|
|
<!DOCTYPE html> |
|
|
<html lang="es"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Peri贸dicos en Tr谩fico | Conexi贸n Vendedor-Conductor</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Roboto:wght@300;400;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Roboto', sans-serif; |
|
|
background-color: #f8f8f8; |
|
|
} |
|
|
|
|
|
.title-font { |
|
|
font-family: 'Playfair Display', serif; |
|
|
} |
|
|
|
|
|
.newspaper-texture { |
|
|
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDAiIGhlaWdodD0iNjAwIj48ZmlsdGVyIGlkPSJwYXBlciIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSI+PGZlVHVyYnVsZW5jZSB0eXBlPSJmcmFjdGFsTm9pc2UiIGJhc2VGcmVxdWVuY3k9IjAuMDEiIG51bU9jdGF2ZXM9IjUiIHN0aXRjaFRpbGVzPSJzdGl0Y2giLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWx0ZXI9InVybCgjcGFwZXIpIiBvcGFjaXR5PSIwLjAzIi8+PC9zdmc+'); |
|
|
} |
|
|
|
|
|
.road-lines { |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.road-lines::after { |
|
|
content: ""; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
height: 100%; |
|
|
background: repeating-linear-gradient( |
|
|
to bottom, |
|
|
transparent, |
|
|
transparent 20px, |
|
|
#f97316 20px, |
|
|
#f97316 22px |
|
|
); |
|
|
opacity: 0.2; |
|
|
pointer-events: none; |
|
|
} |
|
|
|
|
|
.map-container { |
|
|
height: 400px; |
|
|
border-radius: 0.5rem; |
|
|
overflow: hidden; |
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); |
|
|
} |
|
|
|
|
|
.newspaper-icon { |
|
|
transform: rotate(-5deg); |
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); |
|
|
} |
|
|
|
|
|
.traffic-light { |
|
|
width: 30px; |
|
|
height: 60px; |
|
|
background-color: #333; |
|
|
border-radius: 5px; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.traffic-light::after { |
|
|
content: ""; |
|
|
position: absolute; |
|
|
width: 10px; |
|
|
height: 10px; |
|
|
border-radius: 50%; |
|
|
background-color: #ef4444; |
|
|
top: 10px; |
|
|
left: 10px; |
|
|
box-shadow: 0 0 10px #ef4444; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50"> |
|
|
|
|
|
<header class="bg-white shadow-sm"> |
|
|
<div class="container mx-auto px-4 py-4 flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<div class="bg-orange-600 text-white p-2 rounded-full"> |
|
|
<i class="fas fa-newspaper"></i> |
|
|
</div> |
|
|
<h1 class="title-font text-xl font-bold text-orange-800">Peri贸dicos en Tr谩fico</h1> |
|
|
</div> |
|
|
<div class="hidden md:flex space-x-6"> |
|
|
<a href="#como-funciona" class="text-orange-700 hover:text-orange-900">C贸mo funciona</a> |
|
|
<a href="#mapa" class="text-orange-700 hover:text-orange-900">Mapa en vivo</a> |
|
|
<a href="#contacto" class="text-orange-700 hover:text-orange-900">Contacto</a> |
|
|
</div> |
|
|
<button class="md:hidden text-orange-700"> |
|
|
<i class="fas fa-bars text-2xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section class="relative road-lines bg-gradient-to-r from-orange-50 to-amber-50 overflow-hidden"> |
|
|
<div class="newspaper-texture absolute inset-0"></div> |
|
|
<div class="container mx-auto px-4 py-16 md:py-24 relative z-10"> |
|
|
<div class="flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-10 md:mb-0"> |
|
|
<h2 class="title-font text-4xl md:text-5xl font-bold text-orange-900 mb-6">Conectando vendedores y conductores en el tr谩fico</h2> |
|
|
<p class="text-lg text-gray-700 mb-8">Escanea el c贸digo QR para que el vendedor de peri贸dicos pueda ubicarte y acercarse a ofrecerte el peri贸dico del d铆a.</p> |
|
|
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> |
|
|
<button class="bg-orange-600 hover:bg-orange-700 text-white font-bold py-3 px-6 rounded-lg shadow-md transition duration-300 flex items-center justify-center"> |
|
|
<i class="fas fa-map-marker-alt mr-2"></i> Activar mi ubicaci贸n |
|
|
</button> |
|
|
<button class="border-2 border-orange-600 text-orange-600 hover:bg-orange-50 font-bold py-3 px-6 rounded-lg transition duration-300 flex items-center justify-center"> |
|
|
<i class="fas fa-info-circle mr-2"></i> C贸mo funciona |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 flex justify-center"> |
|
|
<div class="relative"> |
|
|
<div class="bg-white p-6 rounded-lg shadow-xl newspaper-icon"> |
|
|
<div class="text-center mb-4"> |
|
|
<h3 class="title-font text-xl font-bold text-orange-800">Peri贸dico del d铆a</h3> |
|
|
<p class="text-gray-600">Escanea este c贸digo</p> |
|
|
</div> |
|
|
<div class="bg-white p-4 rounded border border-gray-200 flex justify-center"> |
|
|
<div class="w-48 h-48 bg-gray-200 flex items-center justify-center text-gray-500"> |
|
|
<a href="https://ibb.co/yzYmDsd"><img src="https://i.ibb.co/yzYmDsd/qrchimp-X1024.png" alt="qrchimp-X1024" border="0"></a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4 text-center text-sm text-gray-600"> |
|
|
<p>El vendedor ver谩 tu ubicaci贸n en tiempo real</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="absolute -bottom-6 -right-6"> |
|
|
<div class="traffic-light"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="como-funciona" class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="title-font text-3xl md:text-4xl font-bold text-orange-900 mb-4">C贸mo funciona nuestro servicio</h2> |
|
|
<div class="w-24 h-1 bg-orange-600 mx-auto"></div> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-3 gap-10"> |
|
|
<div class="text-center px-6"> |
|
|
<div class="bg-orange-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4"> |
|
|
<i class="fas fa-qrcode text-orange-600 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="title-font text-xl font-bold text-orange-800 mb-3">1. Escanea el c贸digo QR</h3> |
|
|
<p class="text-gray-600">El vendedor ambulante te mostrar谩 un c贸digo QR 煤nico que debes escanear con tu tel茅fono.</p> |
|
|
</div> |
|
|
|
|
|
<div class="text-center px-6"> |
|
|
<div class="bg-orange-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4"> |
|
|
<i class="fas fa-map-marked-alt text-orange-600 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="title-font text-xl font-bold text-orange-800 mb-3">2. Comparte tu ubicaci贸n</h3> |
|
|
<p class="text-gray-600">Permite que el navegador acceda a tu GPS para mostrar tu posici贸n exacta en el mapa del vendedor.</p> |
|
|
</div> |
|
|
|
|
|
<div class="text-center px-6"> |
|
|
<div class="bg-orange-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4"> |
|
|
<i class="fas fa-newspaper text-orange-600 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="title-font text-xl font-bold text-orange-800 mb-3">3. Recibe tu peri贸dico</h3> |
|
|
<p class="text-gray-600">El vendedor se acercar谩 a tu ubicaci贸n en el tr谩fico para entregarte el peri贸dico que deseas.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="mapa" class="py-16 bg-gray-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="title-font text-3xl md:text-4xl font-bold text-orange-900 mb-4">Mapa en vivo</h2> |
|
|
<p class="text-gray-600 max-w-2xl mx-auto">Tu ubicaci贸n aparecer谩 aqu铆 en tiempo real para que el vendedor pueda encontrarte f谩cilmente en el tr谩fico.</p> |
|
|
</div> |
|
|
|
|
|
<div class="map-container bg-gray-200 relative"> |
|
|
<div class="absolute inset-0 flex items-center justify-center"> |
|
|
<div class="text-center p-6 bg-white bg-opacity-90 rounded-lg shadow-lg max-w-md mx-4"> |
|
|
<i class="fas fa-map-marked-alt text-orange-600 text-4xl mb-4"></i> |
|
|
<h3 class="title-font text-xl font-bold text-orange-800 mb-2">Mapa en tiempo real</h3> |
|
|
<p class="text-gray-600 mb-4">Al escanear el c贸digo QR y permitir el acceso a tu ubicaci贸n, aparecer谩s en este mapa.</p> |
|
|
<button class="bg-orange-600 hover:bg-orange-700 text-white font-bold py-2 px-6 rounded-lg shadow-md transition duration-300"> |
|
|
Permitir acceso a ubicaci贸n |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<section class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="title-font text-3xl md:text-4xl font-bold text-orange-900 mb-4">Preguntas frecuentes</h2> |
|
|
<div class="w-24 h-1 bg-orange-600 mx-auto"></div> |
|
|
</div> |
|
|
|
|
|
<div class="max-w-3xl mx-auto"> |
|
|
<div class="mb-6"> |
|
|
<h3 class="title-font text-xl font-bold text-orange-800 mb-2 flex items-center"> |
|
|
<i class="fas fa-question-circle text-orange-600 mr-3"></i> 驴Necesito instalar una aplicaci贸n? |
|
|
</h3> |
|
|
<p class="text-gray-600 pl-10">No, nuestro servicio funciona directamente en tu navegador web. Solo necesitas escanear el c贸digo QR con la c谩mara de tu tel茅fono.</p> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<h3 class="title-font text-xl font-bold text-orange-800 mb-2 flex items-center"> |
|
|
<i class="fas fa-battery-three-quarters text-orange-600 mr-3"></i> 驴Consume mucha bater铆a? |
|
|
</h3> |
|
|
<p class="text-gray-600 pl-10">El consumo de bater铆a es m铆nimo, similar a usar Google Maps para navegaci贸n. Recomendamos tener suficiente carga si planeas usar el servicio por mucho tiempo.</p> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<h3 class="title-font text-xl font-bold text-orange-800 mb-2 flex items-center"> |
|
|
<i class="fas fa-lock text-orange-600 mr-3"></i> 驴C贸mo protegen mi privacidad? |
|
|
</h3> |
|
|
<p class="text-gray-600 pl-10">Tu ubicaci贸n solo es visible para el vendedor con quien interact煤as y solo mientras tengas la p谩gina abierta. No almacenamos ni compartimos tus datos de ubicaci贸n.</p> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<h3 class="title-font text-xl font-bold text-orange-800 mb-2 flex items-center"> |
|
|
<i class="fas fa-money-bill-wave text-orange-600 mr-3"></i> 驴Hay alg煤n costo por usar el servicio? |
|
|
</h3> |
|
|
<p class="text-gray-600 pl-10">No, el servicio es completamente gratuito para los conductores. Solo pagas por el peri贸dico que compres al vendedor.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="contacto" class="py-16 bg-orange-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="title-font text-3xl md:text-4xl font-bold text-orange-900 mb-4">Contacta al vendedor</h2> |
|
|
<p class="text-gray-700 max-w-2xl mx-auto">Env铆a un mensaje directo al vendedor de peri贸dicos para coordinar tu compra.</p> |
|
|
</div> |
|
|
|
|
|
<div class="max-w-2xl mx-auto bg-white rounded-lg shadow-md overflow-hidden"> |
|
|
<div class="md:flex"> |
|
|
<div class="md:w-1/2 bg-orange-600 text-white p-8 flex flex-col justify-center"> |
|
|
<h3 class="title-font text-xl font-bold mb-4">Informaci贸n de contacto</h3> |
|
|
<div class="mb-6"> |
|
|
<div class="flex items-center mb-3"> |
|
|
<i class="fas fa-user mr-3"></i> |
|
|
<p>Vendedor de Peri贸dicos</p> |
|
|
</div> |
|
|
<div class="flex items-center mb-3"> |
|
|
<i class="fas fa-map-marker-alt mr-3"></i> |
|
|
<p>Zona de tr谩fico ma帽anero, Gral. Escobedo</p> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-clock mr-3"></i> |
|
|
<p>Lunes a Viernes: 6:00 AM - 10:00 AM</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="bg-white text-orange-600 w-10 h-10 rounded-full flex items-center justify-center hover:bg-orange-100 transition"> |
|
|
<i class="fab fa-whatsapp"></i> |
|
|
</a> |
|
|
<a href="#" class="bg-white text-orange-600 w-10 h-10 rounded-full flex items-center justify-center hover:bg-orange-100 transition"> |
|
|
<i class="fas fa-phone-alt"></i> |
|
|
</a> |
|
|
<a href="#" class="bg-white text-orange-600 w-10 h-10 rounded-full flex items-center justify-center hover:bg-orange-100 transition"> |
|
|
<i class="fas fa-envelope"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 p-8"> |
|
|
<form> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 text-sm font-bold mb-2" for="name">Nombre</label> |
|
|
<input class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-orange-600" id="name" type="text" placeholder="Tu nombre"> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 text-sm font-bold mb-2" for="phone">Tel茅fono</label> |
|
|
<input class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-orange-600" id="phone" type="tel" placeholder="N煤mero de contacto"> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 text-sm font-bold mb-2" for="message">Mensaje</label> |
|
|
<textarea class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-orange-600" id="message" rows="3" placeholder="驴Qu茅 peri贸dico necesitas?"></textarea> |
|
|
</div> |
|
|
<button class="w-full bg-orange-600 hover:bg-orange-700 text-white font-bold py-2 px-4 rounded-md transition duration-300" type="button"> |
|
|
Enviar mensaje |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-orange-900 text-orange-100 py-8"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="mb-6 md:mb-0 flex items-center"> |
|
|
<div class="bg-white text-orange-600 p-2 rounded-full mr-3"> |
|
|
<i class="fas fa-newspaper"></i> |
|
|
</div> |
|
|
<h2 class="title-font text-xl font-bold">Peri贸dicos en Tr谩fico</h2> |
|
|
</div> |
|
|
<div class="flex space-x-6 mb-6 md:mb-0"> |
|
|
<a href="#" class="hover:text-white transition"> |
|
|
<i class="fab fa-facebook-f"></i> |
|
|
</a> |
|
|
<a href="#" class="hover:text-white transition"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</a> |
|
|
<a href="#" class="hover:text-white transition"> |
|
|
<i class="fab fa-instagram"></i> |
|
|
</a> |
|
|
</div> |
|
|
<div class="text-sm"> |
|
|
<p>© 2025 Peri贸dicos en Tr谩fico. Todos los derechos reservados.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<div class="fixed bottom-6 right-6"> |
|
|
<button class="bg-orange-600 hover:bg-orange-700 text-white w-14 h-14 rounded-full shadow-lg flex items-center justify-center transition transform hover:scale-110"> |
|
|
<i class="fas fa-qrcode text-2xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.querySelectorAll('[onclick*="ubicacion"], [onclick*="Ubicacion"]').forEach(button => { |
|
|
button.addEventListener('click', function() { |
|
|
if (navigator.geolocation) { |
|
|
navigator.geolocation.getCurrentPosition( |
|
|
function(position) { |
|
|
alert('Ubicaci贸n compartida correctamente. El vendedor podr谩 ver tu posici贸n en el mapa.'); |
|
|
|
|
|
}, |
|
|
function(error) { |
|
|
alert('Para usar este servicio, necesitas permitir el acceso a tu ubicaci贸n. Por favor actualiza los permisos.'); |
|
|
} |
|
|
); |
|
|
} else { |
|
|
alert('Tu navegador no soporta geolocalizaci贸n. Actualiza a una versi贸n m谩s reciente.'); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelector('form button').addEventListener('click', function() { |
|
|
const name = document.getElementById('name').value; |
|
|
if (name) { |
|
|
alert(`Gracias ${name}, tu mensaje ha sido enviado al vendedor. Te contactar谩 pronto.`); |
|
|
document.querySelector('form').reset(); |
|
|
} else { |
|
|
alert('Por favor ingresa tu nombre para enviar el mensaje.'); |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 馃К <a href="https://enzostvs-deepsite.hf.space?remix=hry3094/papire" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
