<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Registro Diario</title>
<meta name="theme-color" content="#000000">
<style>
html, body { margin: 0; background: #000 !important; color: #fff; font-family: "Segoe UI", sans-serif; }
h1 { text-align: center; color: #00f5ff; margin-top: 20px; }
form { display: flex; flex-direction: column; gap: 10px; max-width: 360px; margin: auto; padding: 10px; }
input, button { padding: 12px; border: none; border-radius: 8px; font-size: 1rem; }
input { background: #111; color: #fff; }
button { background: #00f5ff; color: #000; font-weight: bold; }
.total { text-align: center; font-size: 1.5rem; margin: 20px; color: #00f5ff; }
.registro { background: #111; padding: 12px; margin: 8px auto; max-width: 360px; border-radius: 10px; display: flex; justify-content: space-between; align-items: center; }
.registro button { background: #ff3b30; color: white; padding: 5px 10px; font-size: 0.8rem; border-radius: 6px; }
</style>
</head>
<body>
<h1>Registro Diario</h1>
<form id="form">
<input type="date" id="fecha" required />
<input type="number" id="cantidad" placeholder="Cantidad" required />
<input type="number" id="precio" placeholder="Precio" step="0.01" required />
<button type="submit">Agregar</button>
</form>
<div class="total">Total: $<span id="total">0.00</span></div>
<div id="lista"></div>
<script>
const form = document.getElementById('form');
const lista = document.getElementById('lista');
const totalSpan = document.getElementById('total');
let registros = [];
function actualizar() {
lista.innerHTML = '';
let total = 0;
registros.forEach((r, i) => {
const sub = r.cantidad * r.precio;
total += sub;
const div = document.createElement('div');
div.className = 'registro';
div.innerHTML = `
<div>
<strong>${r.fecha}</strong><br/>
${r.cantidad} x $${r.precio} = <strong>$${sub.toFixed(2)}</strong>
</div>
<button onclick="registros.splice(${i},1); actualizar()">❌</button>`;
lista.appendChild(div);
});
totalSpan.textContent = total.toFixed(2);
}
form.addEventListener('submit', (e) => {
e.preventDefault();
const fecha = document.getElementById('fecha').value;
const cantidad = parseFloat(document.getElementById('cantidad').value);
const precio = parseFloat(document.getElementById('precio').value);
registros.push({ fecha, cantidad, precio });
actualizar();
form.reset();
});
document.getElementById('fecha').valueAsDate = new Date();
</script>
</body>
</html>