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>
|
||||||
@@ -0,0 +1,109 @@
|
|||||||
|
<?php
|
||||||
|
if (session_status() === PHP_SESSION_NONE) {
|
||||||
|
session_start();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Forzamos que si hay cualquier mínimo detalle, lo podamos ver
|
||||||
|
error_reporting(E_ALL);
|
||||||
|
ini_set('display_errors', 1);
|
||||||
|
|
||||||
|
header('Content-Type: application/json; charset=utf-8');
|
||||||
|
|
||||||
|
// Incluimos tu conexión centralizada a la base de datos
|
||||||
|
require_once 'db.php';
|
||||||
|
|
||||||
|
$respuesta = "";
|
||||||
|
$accion = "ninguna";
|
||||||
|
|
||||||
|
if (isset($_POST['mensaje'])) {
|
||||||
|
$mensaje_usuario = trim($_POST['mensaje']);
|
||||||
|
$mensaje_usuario = mb_strtolower($mensaje_usuario, 'UTF-8');
|
||||||
|
|
||||||
|
$query = "SELECT respuesta, keywords FROM bot_preguntas";
|
||||||
|
$result = $conexion->query($query);
|
||||||
|
|
||||||
|
$encontrado = false;
|
||||||
|
|
||||||
|
if ($result && $result->num_rows > 0) {
|
||||||
|
while ($row = $result->fetch_assoc()) {
|
||||||
|
$keywords = explode(',', $row['keywords']);
|
||||||
|
|
||||||
|
foreach ($keywords as $keyword) {
|
||||||
|
$keyword_limpia = trim(mb_strtolower($keyword, 'UTF-8'));
|
||||||
|
|
||||||
|
if (!empty($keyword_limpia) && strpos($mensaje_usuario, $keyword_limpia) !== false) {
|
||||||
|
$respuesta = $row['respuesta'];
|
||||||
|
$encontrado = true;
|
||||||
|
|
||||||
|
if (in_array($keyword_limpia, ['ubicacion', 'ubicación', 'direccion', 'dirección', 'donde', 'dónde'])) {
|
||||||
|
$accion = "abrir_mapa";
|
||||||
|
} elseif (in_array($keyword_limpia, ['horario', 'horarios'])) {
|
||||||
|
$accion = "abrir_horarios";
|
||||||
|
} elseif (in_array($keyword_limpia, ['novedad', 'novedades'])) {
|
||||||
|
$accion = "abrir_novedades";
|
||||||
|
} elseif (in_array($keyword_limpia, ['telefono', 'teléfono', 'llamar', 'numero', 'número'])) {
|
||||||
|
$accion = "mostrar_telefonos";
|
||||||
|
} elseif ($keyword_limpia === 'contacto') {
|
||||||
|
$accion = "mostrar_contacto";
|
||||||
|
} elseif (in_array($keyword_limpia, ['redes', 'instagram'])) {
|
||||||
|
$accion = "mostrar_redes";
|
||||||
|
} elseif (in_array($keyword_limpia, ['pago', 'pagos', 'transferencia', 'efectivo'])) {
|
||||||
|
$accion = "mostrar_pagos";
|
||||||
|
} elseif (in_array($keyword_limpia, ['promo', 'promos', 'promocion', 'promoción', 'promociones', 'oferta', 'ofertas', 'menu', 'menú'])) {
|
||||||
|
// ▼ Promos: consulta dinámica a la BD (últimas 24hs)
|
||||||
|
$accion = "ninguna";
|
||||||
|
$res_promos = $conexion->query(
|
||||||
|
"SELECT mensaje FROM promociones
|
||||||
|
WHERE fecha_publicacion >= NOW() - INTERVAL 24 HOUR
|
||||||
|
ORDER BY fecha_publicacion DESC
|
||||||
|
LIMIT 5"
|
||||||
|
);
|
||||||
|
if ($res_promos && $res_promos->num_rows > 0) {
|
||||||
|
$lista = [];
|
||||||
|
while ($p = $res_promos->fetch_assoc()) {
|
||||||
|
$lista[] = "• " . $p['mensaje'];
|
||||||
|
}
|
||||||
|
$respuesta = "📢 <b>¡Promociones vigentes!</b><br>" . implode("<br>", $lista);
|
||||||
|
} else {
|
||||||
|
$respuesta = "Por el momento no hay promociones activas. ¡Volvé a consultar más tarde! 😊";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
break 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2. Si no se encontró coincidencia, armamos la respuesta dinámica desde la BD
|
||||||
|
if (!$encontrado) {
|
||||||
|
// Texto base limpio directamente definido sin necesidad de consultar otra tabla
|
||||||
|
$texto_base = "No entendí tu consulta. Podés preguntarme sobre:";
|
||||||
|
|
||||||
|
// ▼ CONSULTA DINÁMICA: Traemos todas las categorías cargadas que no estén vacías
|
||||||
|
$res_cats = $conexion->query("SELECT DISTINCT categoria FROM bot_preguntas WHERE categoria IS NOT NULL AND categoria != '' ORDER BY categoria ASC");
|
||||||
|
|
||||||
|
if ($res_cats && $res_cats->num_rows > 0) {
|
||||||
|
$cats_lista = [];
|
||||||
|
while ($c = $res_cats->fetch_assoc()) {
|
||||||
|
// Las agregamos formateadas limpiamente con un puntito estético
|
||||||
|
$cats_lista[] = "• " . htmlspecialchars($c['categoria']);
|
||||||
|
}
|
||||||
|
// Unimos todo el array con saltos de línea <br>
|
||||||
|
$respuesta = $texto_base . "<br>" . implode("<br>", $cats_lista);
|
||||||
|
} else {
|
||||||
|
// Fallback secundario estático por si la tabla llegara a estar completamente vacía
|
||||||
|
$respuesta = $texto_base . "<br>• promo<br>• horarios<br>• nosotros<br>• ubicación";
|
||||||
|
}
|
||||||
|
|
||||||
|
$accion = "forzar_cierre";
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
$respuesta = "Error: No se recibió ninguna consulta.";
|
||||||
|
}
|
||||||
|
|
||||||
|
// Devolvemos el JSON estructurado
|
||||||
|
echo json_encode([
|
||||||
|
'respuesta' => $respuesta,
|
||||||
|
'accion' => $accion
|
||||||
|
]);
|
||||||
Reference in New Issue
Block a user