Update script.js

script.js

@@ -1,12 +1,12 @@
 const app = document.getElementById('app');
 let mesas = [];
 
-// Función de renderizado principal
+// Generar UI
 function render() {
     app.innerHTML = '';
 
     const addButton = document.createElement('button');
-    addButton.className = 'btn btn-success';
+    addButton.className = 'btn btn-success btn-block';
     addButton.textContent = '+ Añadir Mesa';
     addButton.onclick = () => {
         let mesaNumero = 1;
@@ -14,9 +14,9 @@ function render() {
         mesaInput.className = 'mesa-input';
         mesaInput.innerHTML = `
             <div class="mesa-controls">
-                <button id="decreaseMesa" class="btn btn-outline-primary">-</button>
+                <button id="decreaseMesa" class="btn btn-outline-secondary">-</button>
                 <span id="mesaNumero" class="mesa-number">${mesaNumero}</span>
-                <button id="increaseMesa" class="btn btn-outline-primary">+</button>
+                <button id="increaseMesa" class="btn btn-outline-secondary">+</button>
             </div>
             <button id="confirmMesa" class="btn btn-primary">Confirmar</button>
         `;
@@ -47,10 +47,8 @@ function render() {
         const mesaDiv = document.createElement('div');
         mesaDiv.className = 'mesa-card';
         mesaDiv.innerHTML = `
-            <div class="card">
-                <div class="card-body">
-                    <h5 class="card-title">Mesa ${mesa.numero}</h5>
-                </div>
+            <div class="mesa-card-body">
+                <h5 class="mesa-title">Mesa ${mesa.numero}</h5>
             </div>
         `;
         mesaDiv.style.cursor = 'pointer';
@@ -61,18 +59,17 @@ function render() {
     app.appendChild(mesasContainer);
 }
 
-// Función para gestionar los pedidos de una mesa
 function gestionarMesa(index) {
     const mesa = mesas[index];
     app.innerHTML = '';
 
     const titulo = document.createElement('h1');
     titulo.textContent = `Mesa ${mesa.numero}`;
-    titulo.className = 'text-center mb-4';
+    titulo.className = 'mesa-heading';
     app.appendChild(titulo);
 
     const pedidosContainer = document.createElement('div');
-    pedidosContainer.className = 'pedidos-container mb-4';
+    pedidosContainer.className = 'pedidos-container';
     pedidosContainer.innerHTML = mesa.pedidos.map(p => `${p.item} (${p.opcion || ''}) x${p.cantidad} - €${(p.precio * p.cantidad).toFixed(2)}`).join('<br>');
     app.appendChild(pedidosContainer);
 
@@ -106,28 +103,11 @@ function gestionarMesa(index) {
                     </div>
                 `;
                 opcionesContainer.appendChild(opcionDiv);
-
-                const cantidadControl = opcionDiv.querySelector('.cantidad-controls');
-                const cantidadSpan = cantidadControl.querySelector('.cantidad');
-                
-                cantidadControl.querySelector('.increase').onclick = () => {
-                    let cantidad = parseInt(cantidadSpan.textContent, 10);
-                    cantidad++;
-                    cantidadSpan.textContent = cantidad;
-                };
-                
-                cantidadControl.querySelector('.decrease').onclick = () => {
-                    let cantidad = parseInt(cantidadSpan.textContent, 10);
-                    if (cantidad > 0) {
-                        cantidad--;
-                        cantidadSpan.textContent = cantidad;
-                    }
-                };
             });
 
             const confirmarButton = document.createElement('button');
             confirmarButton.textContent = '✔ Confirmar';
-            confirmarButton.className = 'btn btn-warning btn-block';
+            confirmarButton.className = 'btn btn-success btn-block';
             confirmarButton.onclick = () => {
                 const cantidadControls = document.querySelectorAll('.cantidad-controls');
                 cantidadControls.forEach(control => {
@@ -148,7 +128,7 @@ function gestionarMesa(index) {
 
             const volverButton = document.createElement('button');
             volverButton.textContent = '← Volver';
-            volverButton.className = 'btn btn-danger btn-block';
+            volverButton.className = 'btn btn-outline-danger btn-block';
             volverButton.onclick = () => gestionarMesa(index);
             app.appendChild(volverButton);
         };
@@ -157,7 +137,7 @@ function gestionarMesa(index) {
 
     const atrasButton = document.createElement('button');
     atrasButton.textContent = '← Atrás';
-    atrasButton.className = 'btn btn-outline-primary btn-block';
+    atrasButton.className = 'btn btn-outline-secondary btn-block';
     atrasButton.onclick = () => render();
     app.appendChild(atrasButton);
 
@@ -175,7 +155,7 @@ function gestionarMesa(index) {
     app.appendChild(finalizarButton);
 }
 
-// Generación del QR y ticket usando QRCode.js
+// Generación del QR usando la API externa
 function generarTicket(index, total) {
     const mesa = mesas[index];
     let qrContent = `Mesa ${mesa.numero}\n`;
@@ -193,15 +173,14 @@ function generarTicket(index, total) {
     qrContainer.className = 'text-center';
     app.appendChild(qrContainer);
 
-    // Generación del QR usando qrcode.js
-    new QRCode(qrContainer, {
-        text: qrContent,
-        width: 256,
-        height: 256,
-        colorDark: "#000000",
-        colorLight: "#ffffff",
-        correctLevel: QRCode.CorrectLevel.H
-    });
+    // Usar la API externa para generar el QR
+    const qrUrl = `https://api.qrserver.com/v1/create-qr-code/?data=${encodeURIComponent(qrContent)}&size=256x256`;
+
+    // Crear la imagen del QR
+    const qrImage = document.createElement('img');
+    qrImage.src = qrUrl;
+    qrImage.alt = 'QR Code';
+    qrContainer.appendChild(qrImage);
 
     // Volver a la vista anterior
     const volverButton = document.createElement('button');
@@ -210,8 +189,10 @@ function generarTicket(index, total) {
     volverButton.onclick = () => render();
     app.appendChild(volverButton);
 }
+
 // Inicializar la aplicación
 render();
 
 
 
+