<!
DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Balones Express</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
header {
background-color: #2c3e50;
color: white;
padding: 1rem;
display: flex;
align-items: center;
gap: 1rem;
}
.logo {
width: 50px;
height: 50px;
background-color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
nav {
background-color: #34495e;
padding: 1rem;
}
nav a {
color: white;
text-decoration: none;
padding: 0.5rem 1rem;
margin-right: 1rem;
}
nav a:hover {
background-color: #2c3e50;
border-radius: 4px;
}
.container {
padding: 2rem;
max-width: 1200px;
margin: 0 auto;
}
.section {
display: none;
}
.section.active {
display: block;
}
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 1rem;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
button {
background-color: #3498db;
color: white;
border: none;
padding: 0.5rem 1rem;
border-radius: 4px;
cursor: pointer;
margin-bottom: 1rem;
}
button:hover {
background-color: #2980b9;
}
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
}
.modal-content {
background-color: white;
padding: 2rem;
width: 90%;
max-width: 500px;
margin: 2rem auto;
border-radius: 8px;
}
.form-group {
margin-bottom: 1rem;
}
label {
display: block;
margin-bottom: 0.5rem;
}
input, select {
width: 100%;
padding: 0.5rem;
border: 1px solid #ddd;
border-radius: 4px;
}
.message {
padding: 1rem;
margin: 1rem 0;
border-radius: 4px;
}
.success {
background-color: #2ecc71;
color: white;
}
.error {
background-color: #e74c3c;
color: white;
}
.stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin-bottom: 1rem;
}
.stat-card {
background-color: #f8f9fa;
padding: 1rem;
border-radius: 8px;
text-align: center;
}
.stat-card h3 {
color: #2c3e50;
margin-bottom: 0.5rem;
}
</style>
</head>
<body>
<header>
<div class="logo">⚽</div>
<h1>Balones Express</h1>
</header>
<nav>
<a href="#" onclick="showSection('inventario')">Inventario</a>
<a href="#" onclick="showSection('ventas')">Ventas</a>
<a href="#" onclick="showSection('historial') ">Historial de Ventas</a>
</nav>
<div class="container">
<!-- Sección de Inventario -->
<div id="inventario" class="section active">
<h2>Inventario</h2>
<button onclick="showModal('agregarBalon')">Agregar Balón</button>
<table id="inventarioTable">
<thead>
<tr>
<th>Tipo de Balón</th>
<th>Cantidad en Stock</th>
<th>Precio por Unidad</th>
</tr>
</thead>
<tbody>
<tr>
<td>Fútbol Profesional</td>
<td>20</td>
<td>$50.00</td>
</tr>
<tr>
<td>Basketball NBA</td>
<td>15</td>
<td>$45.00</td>
</tr>
<tr>
<td>Volleyball Mikasa</td>
<td>12</td>
<td>$40.00</td>
</tr>
<tr>
<td>Golf Titleist Pro V1</td>
<td>50</td>
<td>$15.00</td>
</tr>
<tr>
<td>Tennis Wilson US Open</td>
<td>30</td>
<td>$8.00</td>
</tr>
</tbody>
</table>
</div>
<!-- Sección de Ventas -->
<div id="ventas" class="section">
<h2>Registro de Ventas</h2>
<div class="form-group">
<label>Seleccionar Balón:</label>
<select id="balonSelect" class="form-control" onchange="actualizarPrecioUnitario()">
<option value="">Seleccione un balón</option>
<option value="Fútbol Profesional" data-precio="50.00">Fútbol
Profesional</option>
<option value="Basketball NBA" data-precio="45.00">Basketball NBA</option>
<option value="Volleyball Mikasa" data-precio="40.00">Volleyball Mikasa</option>
<option value="Golf Titleist Pro V1" data-precio="15.00">Golf Titleist Pro
V1</option>
<option value="Tennis Wilson US Open" data-precio="8.00">Tennis Wilson US
Open</option>
</select>
</div>
<div class="form-group">
<label>Cantidad:</label>
<input type="number" id="cantidad" min="1">
</div>
<div class="form-group">
<label>Precio Unitario:</label>
<input type="number" id="precioUnitario" step="0.01" readonly>
</div>
<button onclick="calcularTotal()">Calcular Total</button>
<div id="totalVenta"></div>
<button onclick="guardarVenta()">Guardar Venta</button>
</div>
<!-- Nueva Sección de Historial de Ventas -->
<div id="historial" class="section">
<h2>Historial de Ventas</h2>
<div class="stats">
<div class="stat-card">
<h3>Total Ventas</h3>
<p id="totalVentas">0</p>
</div>
<div class="stat-card">
<h3>Venta Más Alta</h3>
<p id="ventaAlta">$0.00</p>
</div>
<div class="stat-card">
<h3>Promedio de Venta</h3>
<p id="promedioVenta">$0.00</p>
</div>
</div>
<table id="historialTable">
<thead>
<tr>
<th>Fecha</th>
<th>Tipo de Balón</th>
<th>Cantidad</th>
<th>Precio Unitario</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<!-- Las ventas se agregarán dinámicamente -->
</tbody>
</table>
</div>
</div>
<!-- Modal Agregar Balón -->
<div id="agregarBalon" class="modal">
<div class="modal-content">
<h3>Agregar Nuevo Balón</h3>
<div class="form-group">
<label>Tipo de Balón:</label>
<input type="text" id ="tipoBalon">
</div>
<div class="form-group">
<label>Cantidad:</label>
<input type="number" id="cantidadBalon" min="1">
</div>
<div class="form-group">
<label>Precio:</label>
<input type="number" id="precioBalon" step="0.01">
</div>
<button onclick="guardarBalon()">Guardar</button>
<button onclick="closeModal('agregarBalon')">Cancelar</button>
</div>
</div>
<script>
let ventas = [];
let totalVentasCount = 0;
let ventaMasAlta = 0;
// Función para mostrar secciones
function showSection(sectionId) {
document.querySelectorAll('.section').forEach(section => {
section.classList.remove('active');
});
document.getElementById(sectionId).classList.add('active');
}
// Funciones para el modal
function showModal(modalId) {
document.getElementById(modalId).style.display = 'block';
}
function closeModal(modalId) {
document.getElementById(modalId).style.display = 'none';
}
// Función para actualizar el precio unitario al seleccionar un balón
function actualizarPrecioUnitario() {
const select = document.getElementById('balonSelect');
const precioUnitario = select.options[select.selectedIndex].getAttribute('data-precio');
document.getElementById('precioUnitario').value = precioUnitario;
}
// Función para guardar nuevo balón
function guardarBalon() {
const tipo = document.getElementById('tipoBalon').value;
const cantidad = document.getElementById('cantidadBalon').value;
const precio = document.getElementById('precioBalon').value;
if (!tipo || !cantidad || !precio) {
mostrarMensaje('error', 'Campos obligatorios incompletos');
return;
}
// Agregar a la tabla de inventario
const table =
document.getElementById('inventarioTable').getElementsByTagName('tbody')[0];
const newRow = table.insertRow();
newRow.innerHTML = `
<td>${tipo}</td>
<td>${cantidad}</td>
<td>$${parseFloat(precio).toFixed(2)}</td>
`;
// Actualizar select de ventas
const select = document.getElementById('balonSelect');
const option = document.createElement('option');
option.value = tipo;
option.setAttribute('data-precio', precio);
option.text = tipo;
select.add(option);
mostrarMensaje('success', 'Balón agregado al inventario');
closeModal('agregarBalon');
limpiarFormularioBalon();
}
// Función para calcular total de venta
function calcularTotal() {
const cantidad = document.getElementById('cantidad').value;
const precioUnitario = document.getElementById('precioUnitario').value;
if (!cantidad || !precioUnitario) {
mostrarMensaje('error', 'Ingrese cantidad y precio unitario');
return;
}
const total = cantidad * precioUnitario;
document.getElementById('totalVenta').innerHTML = `Total a pagar: $$
{total.toFixed(2)}`;
}
// Función para guardar venta
function guardarVenta() {
const balon = document.getElementById('balonSelect').value;
const cantidad = parseInt(document.getElementById('cantidad').value);
const precioUnitario = parseFloat(document.getElementById('precioUnitario').value);
if (!balon || !cantidad || !precioUnitario) {
mostrarMensaje('error', 'Campos obligatorios incompletos');
return;
}
const total = cantidad * precioUnitario;
const fecha = new Date().toLocaleDateString();
// Agregar venta al historial
const historialTable =
document.getElementById('historialTable').getElementsByTagName('tbody')[0];
const newRow = historialTable.insertRow(0);
newRow.innerHTML = `
<td>${fecha}</td>
<td>${balon}</td>
<td>${cantidad}</td>
<td>$${precioUnitario.toFixed(2)}</td>
<td>$${total.toFixed(2)}</td>
`;
// Actualizar estadísticas
totalVentasCount++;
ventaMasAlta = Math.max(ventaMasAlta, total);
const promedioVenta = ventas.reduce ((acc, curr) => acc + curr, total) / (ventas.length +
1);
ventas.push(total);
// Actualizar cards de estadísticas
document.getElementById('totalVentas').textContent = totalVentasCount;
document.getElementById('ventaAlta').textContent = `$${ventaMasAlta.toFixed(2)}`;
document.getElementById('promedioVenta').textContent = `$$
{promedioVenta.toFixed(2)}`;
mostrarMensaje('success', 'Venta registrada correctamente');
limpiarFormularioVenta();
}
// Funciones auxiliares
function mostrarMensaje(tipo, mensaje) {
const div = document.createElement('div');
div.className = `message ${tipo}`;
div.textContent = mensaje;
document.querySelector('.container').insertBefore(div,
document.querySelector('.section.active'));
setTimeout(() => div.remove(), 3000);
}
function limpiarFormularioBalon() {
document.getElementById('tipoBalon').value = '';
document.getElementById('cantidadBalon').value = '';
document.getElementById('precioBalon').value = '';
}
function limpiarFormularioVenta() {
document.getElementById('balonSelect').value = '';
document.getElementById('cantidad').value = '';
document.getElementById('precioUnitario').value = '';
document.getElementById('totalVenta').innerHTML = '';
}
</script>
</body>
</html>
https://jsfiddle.net/
LECTOR DE HTML
