asistente virtual
This commit is contained in:
Brisa
@@ -0,0 +1,792 @@
|
||||
<?php
|
||||
include("db.php");
|
||||
|
||||
// 1. OBTENER LOS DATOS DINÁMICOS DE CONFIGURACIÓN DEL BOT
|
||||
$config = [
|
||||
'telefono' => '0343 423-1400', // Valores por defecto por las dudas
|
||||
'pago' => 'efectivo y transferencia bancaria'
|
||||
];
|
||||
|
||||
// 2. OBTENER LAS PREGUNTAS CLAVE PARA LOS BOTONES DE LA VISTA PREVIA
|
||||
$preguntas_bot = [];
|
||||
$res_preguntas = $conexion->query("SELECT pregunta, keywords FROM bot_preguntas ORDER BY id ASC LIMIT 4");
|
||||
if ($res_preguntas) {
|
||||
while($row = $res_preguntas->fetch_assoc()) {
|
||||
$preguntas_bot[] = $row;
|
||||
}
|
||||
}
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Ayuda - La Pecosa</title>
|
||||
<link rel="stylesheet" href="css/all.min.css">
|
||||
<link rel="stylesheet" href="../diseño.css">
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Roboto, sans-serif;
|
||||
background: #fffef8;
|
||||
color: #1a1a1a;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* ── HERO ── */
|
||||
.help-hero {
|
||||
background: #e02828;
|
||||
color: white;
|
||||
padding: 48px 40px 40px;
|
||||
text-align: center;
|
||||
}
|
||||
.help-hero h1 {
|
||||
font-size: 2rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.5px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.help-hero p {
|
||||
font-size: 1rem;
|
||||
opacity: 0.88;
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* ── TABS ── */
|
||||
.tabs-wrapper {
|
||||
background: white;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
|
||||
}
|
||||
.tabs-menu {
|
||||
display: flex;
|
||||
max-width: 860px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
gap: 4px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.tab-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 16px 20px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
color: #888;
|
||||
cursor: pointer;
|
||||
border-bottom: 3px solid transparent;
|
||||
white-space: nowrap;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
}
|
||||
.tab-btn:hover { color: #e02828; }
|
||||
.tab-btn.active {
|
||||
color: #e02828;
|
||||
border-bottom-color: #e02828;
|
||||
}
|
||||
|
||||
/* ── CONTENIDO ── */
|
||||
.help-body {
|
||||
max-width: 860px;
|
||||
margin: 0 auto;
|
||||
padding: 40px 20px 80px;
|
||||
}
|
||||
.tab-content { display: none; }
|
||||
.tab-content.active {
|
||||
display: block;
|
||||
animation: fadeUp 0.3s ease;
|
||||
}
|
||||
@keyframes fadeUp {
|
||||
from { opacity: 0; transform: translateY(8px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
/* ── SECCIÓN INTRO ── */
|
||||
.section-intro {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.section-intro h2 {
|
||||
font-size: 1.4rem;
|
||||
font-weight: 800;
|
||||
color: #111;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.section-intro p {
|
||||
color: #666;
|
||||
font-size: 0.92rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* ── PASOS ── */
|
||||
.steps-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
.step-card {
|
||||
background: white;
|
||||
border: 1px solid #efefef;
|
||||
border-radius: 12px;
|
||||
padding: 20px 22px;
|
||||
display: flex;
|
||||
gap: 18px;
|
||||
align-items: flex-start;
|
||||
transition: box-shadow 0.2s;
|
||||
}
|
||||
.step-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
|
||||
.step-num {
|
||||
background: #e02828;
|
||||
color: white;
|
||||
font-weight: 800;
|
||||
font-size: 0.85rem;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.step-body h3 {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
color: #111;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.step-body p {
|
||||
font-size: 0.88rem;
|
||||
color: #555;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
/* ── SIMULACIÓN ── */
|
||||
.sim-box {
|
||||
background: #fff8f8;
|
||||
border: 1px dashed #f5c0c0;
|
||||
border-radius: 10px;
|
||||
padding: 20px 22px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.sim-box .sim-title {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
color: #e02828;
|
||||
margin-bottom: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.sim-box ol {
|
||||
padding-left: 18px;
|
||||
font-size: 0.875rem;
|
||||
color: #444;
|
||||
line-height: 1.8;
|
||||
}
|
||||
.sim-box ul {
|
||||
padding-left: 18px;
|
||||
font-size: 0.875rem;
|
||||
color: #444;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
/* ── BADGE ── */
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
border-radius: 5px;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.badge-pendiente { background: #fef3c7; color: #856404; }
|
||||
.badge-retirar { background: #d1fae5; color: #0c5460; }
|
||||
.badge-cancelado { background: #fee2e2; color: #721c24; }
|
||||
.badge-preparacion { background: #f1f5f9; color: #475569; }
|
||||
|
||||
/* ── FAQ ── */
|
||||
.faq-list { display: flex; flex-direction: column; gap: 10px; }
|
||||
.faq-item {
|
||||
background: white;
|
||||
border: 1px solid #efefef;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.faq-question {
|
||||
width: 100%;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 16px 20px;
|
||||
text-align: left;
|
||||
font-size: 0.92rem;
|
||||
font-weight: 600;
|
||||
color: #111;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.faq-question:hover { background: #fafafa; }
|
||||
.faq-question .faq-icon {
|
||||
color: #e02828;
|
||||
font-size: 0.8rem;
|
||||
flex-shrink: 0;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
.faq-question.open .faq-icon { transform: rotate(180deg); }
|
||||
.faq-answer {
|
||||
display: none;
|
||||
padding: 0 20px 16px;
|
||||
font-size: 0.875rem;
|
||||
color: #555;
|
||||
line-height: 1.6;
|
||||
border-top: 1px solid #f5f5f5;
|
||||
padding-top: 14px;
|
||||
}
|
||||
.faq-answer.open { display: block; }
|
||||
|
||||
/* ── CHATBOT DEMO (Fiel a la realidad) ── */
|
||||
.chat-demo {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,0.08);
|
||||
border: 1px solid #eaeaea;
|
||||
overflow: hidden;
|
||||
max-width: 400px; /* Lo ajustamos para que tenga forma de widget vertical */
|
||||
margin: 0 auto;
|
||||
}
|
||||
.chat-demo-header {
|
||||
background: #e02828;
|
||||
color: white;
|
||||
padding: 16px 20px;
|
||||
font-weight: 700;
|
||||
font-size: 1.05rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.chat-demo-header .header-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.chat-demo-header .close-bot {
|
||||
font-size: 1.2rem;
|
||||
opacity: 0.8;
|
||||
cursor: pointer;
|
||||
}
|
||||
.chat-demo-body {
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
background: #fff;
|
||||
min-height: 250px;
|
||||
}
|
||||
|
||||
/* Burbujas reales */
|
||||
.chat-bubble {
|
||||
max-width: 85%;
|
||||
padding: 12px 16px;
|
||||
border-radius: 14px;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.4;
|
||||
position: relative;
|
||||
}
|
||||
.bubble-bot {
|
||||
background: #fff;
|
||||
color: #1a1a1a;
|
||||
align-self: flex-start;
|
||||
border-top-left-radius: 4px;
|
||||
border: 1px solid #eaeaea;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.02);
|
||||
}
|
||||
/* Línea roja decorativa al costado de la burbuja del bot */
|
||||
.bubble-bot::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
top: 12px;
|
||||
bottom: 12px;
|
||||
width: 3px;
|
||||
background: #e02828;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.bubble-bot-text {
|
||||
padding-left: 8px;
|
||||
}
|
||||
.bubble-user {
|
||||
background: #f1f5f9;
|
||||
color: #334155;
|
||||
align-self: flex-end;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
/* Footer del chat: Input y sugerencias */
|
||||
.chat-demo-footer {
|
||||
padding: 15px 20px;
|
||||
background: #fff;
|
||||
border-top: 1px solid #f3f3f3;
|
||||
}
|
||||
.chat-input-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.fake-input {
|
||||
flex: 1;
|
||||
border: 1.5px solid #e02828;
|
||||
border-radius: 25px;
|
||||
padding: 10px 18px;
|
||||
font-size: 0.9rem;
|
||||
color: #777;
|
||||
background: #fff;
|
||||
}
|
||||
.fake-send-btn {
|
||||
background: #e02828;
|
||||
color: white;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.9rem;
|
||||
box-shadow: 0 2px 8px rgba(224, 40, 40, 0.3);
|
||||
}
|
||||
|
||||
/* Sugerencias en minúscula */
|
||||
.chat-keywords-row {
|
||||
font-size: 0.8rem;
|
||||
color: #a0a0a0;
|
||||
text-align: center;
|
||||
word-spacing: 2px;
|
||||
padding-top: 2px;
|
||||
}
|
||||
.chat-keywords-row span {
|
||||
color: #a0a0a0;
|
||||
}
|
||||
|
||||
/* ── BOTONES OPCIONES CHATBOT ── */
|
||||
.chat-options-demo {
|
||||
padding: 14px 20px;
|
||||
background: #fafafa;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
.opt-demo {
|
||||
background: white;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 20px;
|
||||
padding: 6px 14px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
/* ── ALERTA INFO ── */
|
||||
.info-banner {
|
||||
background: #fffbeb;
|
||||
border: 1px solid #fde68a;
|
||||
border-radius: 10px;
|
||||
padding: 14px 18px;
|
||||
font-size: 0.875rem;
|
||||
color: #78350f;
|
||||
margin-bottom: 24px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.info-banner i { margin-top: 2px; flex-shrink: 0; }
|
||||
|
||||
/* ── VOLVER ── */
|
||||
.back-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
color: #e02828;
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 28px;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
.back-link:hover { opacity: 0.75; }
|
||||
|
||||
/* ── RESPONSIVE ── */
|
||||
@media (max-width: 600px) {
|
||||
.help-hero { padding: 36px 20px 30px; }
|
||||
.help-hero h1 { font-size: 1.5rem; }
|
||||
.tabs-menu { gap: 0; }
|
||||
.tab-btn { padding: 14px 14px; font-size: 0.82rem; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="help-hero">
|
||||
<h1><i class="fa-solid fa-circle-question"></i> Centro de Ayuda</h1>
|
||||
<p>Todo lo que necesitás saber para hacer tu pedido en La Pecosa.</p>
|
||||
</div>
|
||||
|
||||
<div class="tabs-wrapper">
|
||||
<div class="tabs-menu">
|
||||
<button class="tab-btn active" onclick="switchTab(event, 'tab-pedido')">
|
||||
<i class="fa-solid fa-bag-shopping"></i> Hacer un pedido
|
||||
</button>
|
||||
<button class="tab-btn" onclick="switchTab(event, 'tab-cuenta')">
|
||||
<i class="fa-solid fa-user"></i> Mi cuenta
|
||||
</button>
|
||||
<button class="tab-btn" onclick="switchTab(event, 'tab-chatbot')">
|
||||
<i class="fa-solid fa-comments"></i> Asistente virtual
|
||||
</button>
|
||||
<button class="tab-btn" onclick="switchTab(event, 'tab-faq')">
|
||||
<i class="fa-solid fa-circle-info"></i> Preguntas frecuentes
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="help-body">
|
||||
|
||||
<a href="index.php" class="back-link">
|
||||
<i class="fa-solid fa-arrow-left"></i> Volver al inicio
|
||||
</a>
|
||||
|
||||
<!-- ══ PESTAÑA 1: HACER UN PEDIDO ══ -->
|
||||
<div id="tab-pedido" class="tab-content active">
|
||||
|
||||
<div class="section-intro">
|
||||
<h2>¿Cómo hacer un pedido?</h2>
|
||||
<p>Seguí estos pasos para completar tu compra sin inconvenientes.</p>
|
||||
</div>
|
||||
|
||||
<div class="steps-list">
|
||||
|
||||
<div class="step-card">
|
||||
<div class="step-num">1</div>
|
||||
<div class="step-body">
|
||||
<h3>Iniciá sesión</h3>
|
||||
<p>Para poder realizar un pedido necesitás tener una cuenta. Si todavía no te registraste, hacé clic en <strong>Login</strong> en el menú superior y completá tus datos.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step-card">
|
||||
<div class="step-num">2</div>
|
||||
<div class="step-body">
|
||||
<h3>Explorá el catálogo</h3>
|
||||
<p>Usá el menú <strong>Categorías</strong> para filtrar por tipo de producto: Rotisería, Carnes, Bebidas, Almacén y más. Los productos sin stock aparecen deshabilitados automáticamente.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step-card">
|
||||
<div class="step-num">3</div>
|
||||
<div class="step-body">
|
||||
<h3>Agregá productos al carrito</h3>
|
||||
<p>Hacé clic en <strong>"Agregar"</strong> en cada producto que quieras. El contador de pedido en la barra inferior se actualiza en tiempo real con la cantidad y el total acumulado.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step-card">
|
||||
<div class="step-num">4</div>
|
||||
<div class="step-body">
|
||||
<h3>Revisá tu carrito y confirmá</h3>
|
||||
<p>Ingresá a tu carrito haciendo clic en <strong>PEDIDO</strong> (barra roja inferior). Desde ahí podés modificar cantidades, eliminar productos y confirmar la compra.</p>
|
||||
|
||||
<div class="sim-box" style="margin-top: 14px;">
|
||||
<div class="sim-title"><i class="fa-solid fa-list-check"></i> Ejemplo de pedido</div>
|
||||
<ol>
|
||||
<li>Seleccionás <strong>1x Milanesa napolitana</strong> y <strong>2x Empanadas de carne</strong>.</li>
|
||||
<li>El total se calcula automáticamente en el carrito.</li>
|
||||
<li>Presionás <strong>"Confirmar pedido"</strong>.</li>
|
||||
<li>El sistema verifica que el local esté en horario de atención y que haya stock disponible.</li>
|
||||
<li>Tu pedido queda registrado con estado <span class="badge badge-yellow">Pendiente</span> y recibís una confirmación por mensaje vía Whatsapp.</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step-card">
|
||||
<div class="step-num">5</div>
|
||||
<div class="step-body">
|
||||
<h3>Seguí el estado de tu pedido</h3>
|
||||
<p>Una vez confirmado, el local procesa tu pedido. Los estados posibles son:</p>
|
||||
<div style="margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px;">
|
||||
<span class="badge badge-pendiente">Pendiente</span>
|
||||
<span class="badge badge-preparacion">En preparación</span>
|
||||
<span class="badge badge-retirar">Listo para retirar</span>
|
||||
<span class="badge badge-cancelado">Cancelado</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="info-banner">
|
||||
<i class="fa-solid fa-clock"></i>
|
||||
<div>
|
||||
<strong>Horarios de atención:</strong> Lunes a Sábado de 08:30 a 13:30 y de 17:30 a 21:00 · Domingos de 09:00 a 13:00. Los pedidos solo se pueden realizar dentro de este horario.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ══ PESTAÑA 2: MI CUENTA ══ -->
|
||||
<div id="tab-cuenta" class="tab-content">
|
||||
|
||||
<div class="section-intro">
|
||||
<h2>Gestión de tu cuenta</h2>
|
||||
<p>Todo lo que podés hacer desde tu perfil de usuario.</p>
|
||||
</div>
|
||||
|
||||
<div class="steps-list">
|
||||
|
||||
<div class="step-card">
|
||||
<div class="step-num"><i class="fa-solid fa-user-plus" style="font-size:0.75rem;"></i></div>
|
||||
<div class="step-body">
|
||||
<h3>Crear una cuenta</h3>
|
||||
<p>Hacé clic en <strong>Login</strong> en el menú superior y luego en <strong>"Registrate gratis"</strong>. Completá tu nombre, email y contraseña. Una vez registrado, podés empezar a pedir de inmediato.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step-card">
|
||||
<div class="step-num"><i class="fa-solid fa-right-to-bracket" style="font-size:0.75rem;"></i></div>
|
||||
<div class="step-body">
|
||||
<h3>Iniciar sesión</h3>
|
||||
<p>Ingresá tu email y contraseña en la pantalla de login. Si no la recordás, usá la opción <strong>"¿Olvidaste tu contraseña?"</strong> para recibir un código de verificación en tu correo.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step-card">
|
||||
<div class="step-num"><i class="fa-solid fa-key" style="font-size:0.75rem;"></i></div>
|
||||
<div class="step-body">
|
||||
<h3>Recuperar contraseña</h3>
|
||||
<p>Si olvidaste tu clave, el sistema te envía un código de 6 dígitos a tu email. Tenés <strong>15 minutos</strong> para ingresarlo antes de que expire. Seguí los 3 pasos que aparecen en pantalla.</p>
|
||||
|
||||
<div class="sim-box" style="margin-top: 14px;">
|
||||
<div class="sim-title"><i class="fa-solid fa-rotate-right"></i> Pasos para recuperar tu contraseña</div>
|
||||
<ol>
|
||||
<li>Ingresás tu email registrado y presionás <strong>"Enviar código"</strong>.</li>
|
||||
<li>Revisás tu casilla y escribís el código de 6 dígitos recibido.</li>
|
||||
<li>Escribís tu nueva contraseña dos veces y confirmás el cambio.</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step-card">
|
||||
<div class="step-num"><i class="fa-solid fa-right-from-bracket" style="font-size:0.75rem;"></i></div>
|
||||
<div class="step-body">
|
||||
<h3>Cerrar sesión</h3>
|
||||
<p>Hacé clic en <strong>SALIR</strong> en el menú superior. Tu carrito se vaciará al cerrar la sesión, así que asegurate de confirmar tu pedido antes.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ══ PESTAÑA 3: CHATBOT DINÁMICO ══ -->
|
||||
<div id="tab-chatbot" class="tab-content">
|
||||
|
||||
<div class="section-intro">
|
||||
<h2>Asistente virtual de La Pecosa</h2>
|
||||
<p>El asistente virtual está disponible en la esquina inferior derecha de la página principal. Te responde al instante las consultas más comunes.</p>
|
||||
</div>
|
||||
|
||||
<div class="steps-list" style="margin-bottom: 28px;">
|
||||
<div class="step-card">
|
||||
<div class="step-num"><i class="fa-solid fa-comment-dots" style="font-size:0.75rem;"></i></div>
|
||||
<div class="step-body">
|
||||
<h3>¿Para qué sirve?</h3>
|
||||
<p>El bot responde preguntas frecuentes sobre horarios, métodos de pago, novedades, promociones y ubicación sin que necesites esperar atención del local. Para pedidos o consultas específicas, pedí el número y vas a poder llamar al local. En caso de consultas fuera de lugar, se permiten hasta tres intentos y luego se restringe por 10 minutos el chat.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step-card">
|
||||
<div class="step-num"><i class="fa-solid fa-hand-pointer" style="font-size:0.75rem;"></i></div>
|
||||
<div class="step-body">
|
||||
<h3>¿Cómo se usa?</h3>
|
||||
<p>Hacé clic en el botón rojo <i class="fa-solid fa-comments" style="color:#e02828;"></i> que aparece en la esquina inferior derecha. Luego escribí tu consulta o seleccioná una de las palabras clave para obtener una respuesta inmediata.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p style="font-size: 0.85rem; font-weight: 700; color: #888; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 14px;">Vista previa del asistente virtual</p>
|
||||
|
||||
<div class="chat-demo">
|
||||
<!-- Cabecera con la X de cierre -->
|
||||
<div class="chat-demo-header">
|
||||
<span class="header-title">🍎 La Pecosa Asistente Virtual</span>
|
||||
<span class="close-bot"><i class="fa-solid fa-xmark"></i></span>
|
||||
</div>
|
||||
|
||||
<!-- Cuerpo de la conversación -->
|
||||
<div class="chat-demo-body">
|
||||
<div class="chat-bubble bubble-bot">
|
||||
<div class="bubble-bot-text">¡Hola! Soy el asistente de La Pecosa 🍎 ¿En qué puedo ayudarte?</div>
|
||||
</div>
|
||||
|
||||
<div class="chat-bubble bubble-user">
|
||||
¿Aceptan tarjeta?
|
||||
</div>
|
||||
|
||||
<div class="chat-bubble bubble-bot">
|
||||
<div class="bubble-bot-text">Aceptamos <strong><?php echo htmlspecialchars($config['pago']); ?></strong>. Al retirar tu pedido podés coordinar el método de pago con el local.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer con Input y palabras clave en línea -->
|
||||
<div class="chat-demo-footer">
|
||||
<div class="chat-input-row">
|
||||
<div class="fake-input">Escribí tu consulta...</div>
|
||||
<div class="fake-send-btn"><i class="fa-solid fa-paper-plane"></i></div>
|
||||
</div>
|
||||
|
||||
<div class="chat-keywords-row">
|
||||
<?php
|
||||
if(!empty($preguntas_bot)) {
|
||||
$listado_keys = [];
|
||||
foreach($preguntas_bot as $pb) {
|
||||
// Extraemos las keywords cargadas por el admin
|
||||
$keys_array = explode(',', $pb['keywords']);
|
||||
if(!empty($keys_array[0])) {
|
||||
$listado_keys[] = strtolower(trim($keys_array[0]));
|
||||
}
|
||||
}
|
||||
// Las unimos con el puntito separador tal como se ve en la app real
|
||||
echo implode(' · ', array_unique($listado_keys));
|
||||
} else {
|
||||
// Fallback por si la base de datos está vacía
|
||||
echo "horarios · ubicación · pagos · teléfono · novedades · redes";
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ══ PESTAÑA 4: FAQ ══ -->
|
||||
<div id="tab-faq" class="tab-content">
|
||||
|
||||
<div class="section-intro">
|
||||
<h2>Preguntas frecuentes</h2>
|
||||
<p>Las dudas más comunes de nuestros clientes, respondidas.</p>
|
||||
</div>
|
||||
|
||||
<div class="faq-list">
|
||||
|
||||
<div class="faq-item">
|
||||
<button class="faq-question" onclick="toggleFaq(this)">
|
||||
¿Necesito una cuenta para ver los productos?
|
||||
<i class="fa-solid fa-chevron-down faq-icon"></i>
|
||||
</button>
|
||||
<div class="faq-answer">
|
||||
No, podés explorar el catálogo sin iniciar sesión. Sin embargo, para agregar productos al carrito y confirmar un pedido sí necesitás estar registrado y haber iniciado sesión.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item">
|
||||
<button class="faq-question" onclick="toggleFaq(this)">
|
||||
¿Puedo hacer un pedido fuera del horario de atención?
|
||||
<i class="fa-solid fa-chevron-down faq-icon"></i>
|
||||
</button>
|
||||
<div class="faq-answer">
|
||||
No. El sistema valida automáticamente que el local esté abierto al momento de confirmar. Si intentás pedir fuera del horario, vas a ver un aviso indicando que el local está cerrado.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item">
|
||||
<button class="faq-question" onclick="toggleFaq(this)">
|
||||
¿Hacen envíos a domicilio?
|
||||
<i class="fa-solid fa-chevron-down faq-icon"></i>
|
||||
</button>
|
||||
<div class="faq-answer">
|
||||
¡Sí, hacemos envíos a domicilio! Al momento de finalizar tu compra en el carrito, vas a poder seleccionar la opción de entrega a domicilio para recibir tu pedido directamente en tu casa. También mantenemos la opción tradicional de retirar en el local si lo preferís.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item">
|
||||
<button class="faq-question" onclick="toggleFaq(this)">
|
||||
¿Cómo sé cuándo está listo mi pedido?
|
||||
<i class="fa-solid fa-chevron-down faq-icon"></i>
|
||||
</button>
|
||||
<div class="faq-answer">
|
||||
El estado de tu pedido se actualiza desde el local. Podés consultarlo en tus mensajes de Whatsapp o llamar directamente al local para confirmar.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item">
|
||||
<button class="faq-question" onclick="toggleFaq(this)">
|
||||
Un producto no tiene botón para agregar, ¿qué significa?
|
||||
<i class="fa-solid fa-chevron-down faq-icon"></i>
|
||||
</button>
|
||||
<div class="faq-answer">
|
||||
Significa que ese producto está sin stock en este momento. El botón se reactiva automáticamente cuando el local actualiza el inventario. Podés llamar para consultar disponibilidad.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item">
|
||||
<button class="faq-question" onclick="toggleFaq(this)">
|
||||
¿Qué hago si no me llegó el código para recuperar mi contraseña?
|
||||
<i class="fa-solid fa-chevron-down faq-icon"></i>
|
||||
</button>
|
||||
<div class="faq-answer">
|
||||
Revisá tu carpeta de <strong>spam o correo no deseado</strong>. Si tampoco está ahí, esperá unos minutos y volvé a solicitarlo. El código tiene una validez de 15 minutos.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item">
|
||||
<button class="faq-question" onclick="toggleFaq(this)">
|
||||
¿Cómo puedo cancelar un pedido?
|
||||
<i class="fa-solid fa-chevron-down faq-icon"></i>
|
||||
</button>
|
||||
<div class="faq-answer">
|
||||
Para cancelar un pedido ya confirmado, comunicate directamente con el local al <strong><?php echo htmlspecialchars($config['telefono']); ?></strong> lo antes posible.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function switchTab(evt, tabId) {
|
||||
document.querySelectorAll('.tab-content').forEach(t => t.classList.remove('active'));
|
||||
document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
|
||||
document.getElementById(tabId).classList.add('active');
|
||||
evt.currentTarget.classList.add('active');
|
||||
}
|
||||
|
||||
function toggleFaq(btn) {
|
||||
const answer = btn.nextElementSibling;
|
||||
const isOpen = answer.classList.contains('open');
|
||||
// Cerrar todos
|
||||
document.querySelectorAll('.faq-answer').forEach(a => a.classList.remove('open'));
|
||||
document.querySelectorAll('.faq-question').forEach(b => b.classList.remove('open'));
|
||||
// Abrir el clickeado si estaba cerrado
|
||||
if (!isOpen) {
|
||||
answer.classList.add('open');
|
||||
btn.classList.add('open');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user