129 lines
5.6 KiB
HTML
129 lines
5.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Mi Lista de la Compra</title>
|
|
<style>
|
|
body { font-family: sans-serif; max-width: 800px; margin: auto; padding: 1em; }
|
|
h1, h2 { color: #2c3e50; }
|
|
textarea { width: 100%; height: 150px; margin-top: 10px; }
|
|
input[type="text"], input[type="number"], input[type="file"] { width: 100%; padding: 5px; margin: 5px 0; }
|
|
button { padding: 10px; margin-top: 10px; cursor: pointer; }
|
|
ul { list-style: none; padding: 0; }
|
|
li { margin-bottom: 5px; }
|
|
.precio { color: #888; font-size: 0.9em; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Mi Lista de la Compra</h1>
|
|
|
|
<h2>Subir ticket PDF</h2>
|
|
<input type="file" id="ticketPDF" accept="application/pdf">
|
|
<button onclick="leerPDF()">Procesar ticket</button>
|
|
<pre id="pdfTexto" style="white-space: pre-wrap; background: #f4f4f4; padding: 10px; display:none;"></pre>
|
|
|
|
<h2>Productos frecuentes</h2>
|
|
<ul id="listaProductos">
|
|
<li><label><input type="checkbox" value="Leche semi 6x2"> Leche semi 6x2 <span class="precio">(1.76€/L)</span></label></li>
|
|
<li><label><input type="checkbox" value="Huevos camperos 12"> Huevos camperos 12 <span class="precio">(3.22€)</span></label></li>
|
|
<li><label><input type="checkbox" value="Yogur griego limón"> Yogur griego limón <span class="precio">(1.70€)</span></label></li>
|
|
<li><label><input type="checkbox" value="Plátano"> Plátano <span class="precio">(3.20€/kg)</span></label></li>
|
|
<li><label><input type="checkbox" value="Tomate receta artesana"> Tomate receta artesana <span class="precio">(2.10€)</span></label></li>
|
|
<li><label><input type="checkbox" value="Tortilla patata cebolla"> Tortilla patata cebolla <span class="precio">(2.60€)</span></label></li>
|
|
<li><label><input type="checkbox" value="Calabacín verde"> Calabacín verde <span class="precio">(1.30€/kg)</span></label></li>
|
|
</ul>
|
|
|
|
<h2>Añadir producto manualmente</h2>
|
|
<input type="text" id="nuevoProducto" placeholder="Nombre del producto">
|
|
<input type="number" id="precioProducto" placeholder="Precio (€)">
|
|
<button onclick="agregarProducto()">Añadir</button>
|
|
|
|
<h2>Lista generada</h2>
|
|
<textarea id="listaGenerada" readonly></textarea>
|
|
<button onclick="generarLista()">Generar Lista</button>
|
|
<button onclick="copiarLista()">Copiar al portapapeles</button>
|
|
|
|
<h2>Predicción de productos</h2>
|
|
<button onclick="predecirProductos()">Sugerir productos que podrías necesitar</button>
|
|
<ul id="predicciones"></ul>
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>
|
|
<script>
|
|
const historial = {
|
|
"Leche semi 6x2": ["2025-04-03", "2025-04-10", "2025-04-16"],
|
|
"Huevos camperos 12": ["2025-04-03", "2025-04-10"],
|
|
"Yogur griego limón": ["2025-04-03", "2025-04-10"],
|
|
"Plátano": ["2025-04-03", "2025-04-10", "2025-04-16"],
|
|
"Tomate receta artesana": ["2025-04-03", "2025-04-10", "2025-04-16"],
|
|
"Tortilla patata cebolla": ["2025-04-03", "2025-04-10", "2025-04-16"],
|
|
"Calabacín verde": ["2025-04-03", "2025-04-10", "2025-04-16"]
|
|
};
|
|
|
|
function agregarProducto() {
|
|
const nombre = document.getElementById('nuevoProducto').value.trim();
|
|
const precio = document.getElementById('precioProducto').value.trim();
|
|
if (!nombre) return;
|
|
const li = document.createElement('li');
|
|
li.innerHTML = `<label><input type="checkbox" value="${nombre}"> ${nombre} <span class="precio">(${precio ? precio + '€' : ''})</span></label>`;
|
|
document.getElementById('listaProductos').appendChild(li);
|
|
document.getElementById('nuevoProducto').value = '';
|
|
document.getElementById('precioProducto').value = '';
|
|
}
|
|
|
|
function generarLista() {
|
|
const checks = document.querySelectorAll('#listaProductos input[type="checkbox"]');
|
|
let seleccionados = [];
|
|
checks.forEach(chk => { if (chk.checked) seleccionados.push(chk.value); });
|
|
document.getElementById('listaGenerada').value = seleccionados.join('\n');
|
|
}
|
|
|
|
function copiarLista() {
|
|
const txt = document.getElementById('listaGenerada');
|
|
txt.select();
|
|
document.execCommand('copy');
|
|
alert('Lista copiada al portapapeles.');
|
|
}
|
|
|
|
function predecirProductos() {
|
|
const predicciones = document.getElementById('predicciones');
|
|
predicciones.innerHTML = '';
|
|
const hoy = new Date("2025-04-18");
|
|
Object.keys(historial).forEach(producto => {
|
|
const fechas = historial[producto].map(f => new Date(f));
|
|
fechas.sort((a, b) => b - a);
|
|
if (fechas.length >= 2) {
|
|
const ultima = fechas[0];
|
|
const anterior = fechas[1];
|
|
const diff = (ultima - anterior) / (1000 * 60 * 60 * 24);
|
|
const diasDesdeUltima = (hoy - ultima) / (1000 * 60 * 60 * 24);
|
|
if (diasDesdeUltima >= diff - 1) {
|
|
const li = document.createElement('li');
|
|
li.textContent = `Puede que necesites: ${producto}`;
|
|
predicciones.appendChild(li);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
async function leerPDF() {
|
|
const archivo = document.getElementById('ticketPDF').files[0];
|
|
if (!archivo) return;
|
|
|
|
const pdfData = await archivo.arrayBuffer();
|
|
const pdf = await pdfjsLib.getDocument({ data: pdfData }).promise;
|
|
let texto = '';
|
|
|
|
for (let i = 1; i <= pdf.numPages; i++) {
|
|
const page = await pdf.getPage(i);
|
|
const content = await page.getTextContent();
|
|
texto += content.items.map(item => item.str).join(' ') + '\n';
|
|
}
|
|
|
|
const salida = document.getElementById('pdfTexto');
|
|
salida.style.display = 'block';
|
|
salida.textContent = texto.trim();
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|