Update script.js

script.js

@@ -6,7 +6,7 @@ function render() {
     app.innerHTML = '';
 
     const addButton = document.createElement('button');
-    addButton.className = 'add-button';
+    addButton.className = 'btn btn-success';
     addButton.textContent = '+ Añadir Mesa';
     addButton.onclick = () => {
         let mesaNumero = 1;
@@ -14,11 +14,11 @@ function render() {
         mesaInput.className = 'mesa-input';
         mesaInput.innerHTML = `
             <div class="mesa-controls">
-                <button id="decreaseMesa" class="control-button">-</button>
+                <button id="decreaseMesa" class="btn btn-outline-primary">-</button>
                 <span id="mesaNumero" class="mesa-number">${mesaNumero}</span>
-                <button id="increaseMesa" class="control-button">+</button>
+                <button id="increaseMesa" class="btn btn-outline-primary">+</button>
             </div>
-            <button id="confirmMesa" class="confirm-button">Confirmar</button>
+            <button id="confirmMesa" class="btn btn-primary">Confirmar</button>
         `;
         app.innerHTML = '';
         app.appendChild(mesaInput);
@@ -47,8 +47,10 @@ function render() {
         const mesaDiv = document.createElement('div');
         mesaDiv.className = 'mesa-card';
         mesaDiv.innerHTML = `
-            <div class="mesa-card-body">
-                <h5 class="mesa-title">Mesa ${mesa.numero}</h5>
+            <div class="card">
+                <div class="card-body">
+                    <h5 class="card-title">Mesa ${mesa.numero}</h5>
+                </div>
             </div>
         `;
         mesaDiv.style.cursor = 'pointer';
@@ -66,11 +68,11 @@ function gestionarMesa(index) {
 
     const titulo = document.createElement('h1');
     titulo.textContent = `Mesa ${mesa.numero}`;
-    titulo.className = 'mesa-heading';
+    titulo.className = 'text-center mb-4';
     app.appendChild(titulo);
 
     const pedidosContainer = document.createElement('div');
-    pedidosContainer.className = 'pedidos-container';
+    pedidosContainer.className = 'pedidos-container mb-4';
     pedidosContainer.innerHTML = mesa.pedidos.map(p => `${p.item} (${p.opcion || ''}) x${p.cantidad} - €${(p.precio * p.cantidad).toFixed(2)}`).join('<br>');
     app.appendChild(pedidosContainer);
 
@@ -86,7 +88,7 @@ function gestionarMesa(index) {
 
     categorias.forEach(categoria => {
         const button = document.createElement('button');
-        button.className = 'category-button';
+        button.className = 'btn btn-info btn-block';
         button.textContent = `+ ${categoria.nombre} (€${categoria.precio.toFixed(2)})`;
         button.onclick = () => {
             const opcionesContainer = document.createElement('div');
@@ -98,9 +100,9 @@ function gestionarMesa(index) {
                 opcionDiv.innerHTML = `
                     <span>${opcion}</span>
                     <div class="cantidad-controls" data-opcion="${opcion}" data-categoria="${categoria.nombre}" data-precio="${categoria.precio}">
-                        <button class="control-button decrease">-</button>
+                        <button class="btn btn-outline-secondary decrease">-</button>
                         <span class="cantidad">0</span>
-                        <button class="control-button increase">+</button>
+                        <button class="btn btn-outline-secondary increase">+</button>
                     </div>
                 `;
                 opcionesContainer.appendChild(opcionDiv);
@@ -125,7 +127,7 @@ function gestionarMesa(index) {
 
             const confirmarButton = document.createElement('button');
             confirmarButton.textContent = '✔ Confirmar';
-            confirmarButton.className = 'confirm-button';
+            confirmarButton.className = 'btn btn-warning btn-block';
             confirmarButton.onclick = () => {
                 const cantidadControls = document.querySelectorAll('.cantidad-controls');
                 cantidadControls.forEach(control => {
@@ -146,7 +148,7 @@ function gestionarMesa(index) {
 
             const volverButton = document.createElement('button');
             volverButton.textContent = '← Volver';
-            volverButton.className = 'back-button';
+            volverButton.className = 'btn btn-danger btn-block';
             volverButton.onclick = () => gestionarMesa(index);
             app.appendChild(volverButton);
         };
@@ -155,23 +157,19 @@ function gestionarMesa(index) {
 
     const atrasButton = document.createElement('button');
     atrasButton.textContent = '← Atrás';
-    atrasButton.className = 'back-button';
+    atrasButton.className = 'btn btn-outline-danger btn-block';
     atrasButton.onclick = () => render();
     app.appendChild(atrasButton);
 
     const finalizarButton = document.createElement('button');
     finalizarButton.textContent = 'Finalizar';
-    finalizarButton.className = 'finalize-button';
+    finalizarButton.className = 'btn btn-primary btn-block';
     finalizarButton.onclick = () => {
         const total = mesa.pedidos.reduce((sum, p) => sum + p.precio * p.cantidad, 0);
         if (total > 0) {
-            app.innerHTML = `
-                <h2>Total de la cuenta: €${total.toFixed(2)}</h2>
-                <button onclick="generarTicket(${index}, ${total})">Generar Ticket</button>
-            `;
+            generarTicket(index, total);
         } else {
-            alert("No hay productos añadidos a esta mesa.");
-            render();
+            alert("La mesa no tiene productos");
         }
     };
     app.appendChild(finalizarButton);
@@ -185,7 +183,11 @@ function generarTicket(index, total) {
         qrContent += `${pedido.item} (${pedido.opcion || ''}) x${pedido.cantidad} - €${(pedido.precio * pedido.cantidad).toFixed(2)}\n`;
     });
 
-    new QRCode(document.getElementById('qrcode'), {
+    const qrContainer = document.createElement('div');
+    qrContainer.className = 'text-center';
+    app.appendChild(qrContainer);
+    
+    new QRCode(qrContainer, {
         text: qrContent,
         width: 256,
         height: 256,
@@ -193,8 +195,15 @@ function generarTicket(index, total) {
         colorLight: "#ffffff",
         correctLevel: QRCode.CorrectLevel.H
     });
+
+    const volverButton = document.createElement('button');
+    volverButton.textContent = '← Volver';
+    volverButton.className = 'btn btn-outline-danger btn-block';
+    volverButton.onclick = () => render();
+    app.appendChild(volverButton);
 }
 
+// Inicializar la aplicación
 render();