Constant INDEX_HTML
Source pub(crate) const INDEX_HTML: &str = "<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <link rel=\"icon\" href=\"/favicon.ico\" type=\"image/x-icon\">\r\n <title>CommandViewer</title>\r\n <style>\r\n @font-face {\r\n font-family: \'BebasNeue\';\r\n src: url(\'/fonts/BebasNeue-Regular.ttf\') format(\'truetype\');\r\n font-weight: normal;\r\n font-style: normal;\r\n }\r\n\r\n body {\r\n font-family: \'BebasNeue\', sans-serif;\r\n margin: 0;\r\n padding: 0;\r\n background: white;\r\n color: black;\r\n transition: background 0.3s, color 0.3s;\r\n }\r\n .dark-mode {\r\n background-color: #111;\r\n color: white;\r\n }\r\n\r\n .header {\r\n text-align: center;\r\n padding: 20px 0;\r\n background: rgba(255,255,255,0.95);\r\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\r\n position: relative;\r\n z-index: 500;\r\n }\r\n\r\n .dark-mode .header {\r\n background: rgba(17,17,17,0.95);\r\n box-shadow: 0 2px 10px rgba(255,255,255,0.1);\r\n }\r\n\r\n .logo {\r\n max-width: 300px;\r\n height: auto;\r\n margin-bottom: 10px;\r\n filter: none;\r\n transition: filter 0.3s;\r\n }\r\n\r\n h1 {\r\n text-align: center;\r\n margin: 10px 0 0 0;\r\n font-size: 1.8em;\r\n color: #333;\r\n }\r\n\r\n .container {\r\n padding: 20px;\r\n }\r\n .comandas-grid-doble {\r\n display: flex;\r\n justify-content: space-around;\r\n align-items: flex-start;\r\n gap: 30px;\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n }\r\n\r\n .comandas-grid-doble > div {\r\n flex: 1;\r\n min-height: 200px;\r\n }\r\n\r\n .comandas-grid-doble h2 {\r\n color: white;\r\n text-align: center;\r\n padding: 15px;\r\n margin: 0;\r\n border-radius: 15px 15px 0 0;\r\n font-size: 1.4em;\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n }\r\n\r\n .preparacion-header {\r\n background: linear-gradient(135deg, #ff8c00, #ffa500);\r\n }\r\n\r\n .listo-header {\r\n background: linear-gradient(135deg, #28a745, #20c997);\r\n }\r\n\r\n .comandas-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, 115px);\r\n gap: 30px;\r\n justify-content: center;\r\n padding: 15px;\r\n background: rgba(255,255,255,0.05);\r\n border-radius: 0 0 15px 15px;\r\n min-height: 160px;\r\n overflow-y: auto;\r\n max-height: 400px;\r\n }\r\n .card {\r\n border-radius: 10px;\r\n padding: 12px 8px;\r\n text-align: center;\r\n box-shadow: 0 2px 8px rgba(0,0,0,0.12);\r\n transition: transform 0.2s, box-shadow 0.2s;\r\n height: 70px;\r\n width: 115px;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n\r\n .card:hover {\r\n transform: translateY(-3px);\r\n box-shadow: 0 5px 15px rgba(0,0,0,0.25);\r\n }\r\n\r\n .card.preparacion {\r\n background: linear-gradient(145deg, #fff8e1, #ffecb3);\r\n border: 2px solid #ffa726;\r\n color: #e65100;\r\n }\r\n\r\n .card.listo {\r\n background: linear-gradient(145deg, #e8f5e8, #c8e6c9);\r\n border: 2px solid #66bb6a;\r\n color: #2e7d32;\r\n }\r\n .card:hover {\r\n transform: scale(1.05);\r\n }\r\n .card .estado {\r\n font-weight: bold;\r\n font-size: 0.8em;\r\n margin-bottom: 3px;\r\n text-transform: uppercase;\r\n }\r\n\r\n .card .comanda {\r\n font-size: 1.3em;\r\n font-weight: bold;\r\n margin: 0;\r\n }\r\n .dark-mode h1 {\r\n color: #e0e0e0;\r\n }\r\n\r\n .dark-mode .card.preparacion {\r\n background: linear-gradient(145deg, #4a3800, #6b5300);\r\n border-color: #ff8f00;\r\n color: #ffcc02;\r\n }\r\n\r\n .dark-mode .card.listo {\r\n background: linear-gradient(145deg, #1b4332, #2d5a3d);\r\n border-color: #4caf50;\r\n color: #81c784;\r\n }\r\n\r\n .dark-mode .card .comanda {\r\n color: inherit;\r\n }\r\n #fullscreen-toggle,\r\n #theme-toggle {\r\n background: transparent;\r\n border: none;\r\n font-size: 22px;\r\n cursor: pointer;\r\n width: 36px;\r\n height: 36px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 0;\r\n }\r\n .dark-mode #fullscreen-toggle {\r\n background-color: #444;\r\n color: white;\r\n border-radius: 5px;\r\n }\r\n\r\n #top-buttons {\r\n position: fixed;\r\n top: 10px;\r\n right: 10px;\r\n display: flex;\r\n gap: 30px;\r\n z-index: 1000;\r\n }\r\n\r\n .no-comandas {\r\n text-align: center;\r\n font-size: 1.5em;\r\n color: #666;\r\n margin-top: 50px;\r\n }\r\n\r\n .dark-mode .no-comandas {\r\n color: #ccc;\r\n }\r\n .titulo-estado {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 20px;\r\n font-size: 1.8em;\r\n color: #333;\r\n margin: 10px 0 0 0;\r\n }\r\n\r\n .logo-mini {\r\n height: 100px;\r\n width: auto;\r\n filter: none;\r\n }\r\n </style>\r\n</head>\r\n<body>\r\n<div id=\"top-buttons\">\r\n <button id=\"fullscreen-toggle\" onclick=\"toggleFullscreen()\">\u{26f6}</button>\r\n <button id=\"theme-toggle\" onclick=\"toggleDarkMode()\">\u{1f317}</button>\r\n</div>\r\n\r\n<div class=\"header\">\r\n <h1 class=\"titulo-estado\">\r\n <img id=\"logo-izquierda\" src=\"/LOGO_DARK.png\" alt=\"Logo izquierda\" class=\"logo-mini\">\r\n <span>\u{1f37d}\u{fe0f} ESTADO DE TU PEDIDO \u{1f37d}\u{fe0f}</span>\r\n <img id=\"logo-derecha\" src=\"/LOGO_DARK.png\" alt=\"Logo derecha\" class=\"logo-mini\">\r\n </h1>\r\n</div>\r\n\r\n<div class=\"container\">\r\n <div class=\"comandas-grid-doble\">\r\n <div>\r\n <h2 class=\"preparacion-header\">En Preparaci\u{f3}n</h2>\r\n <div class=\"comandas-grid\" id=\"preparacion\"></div>\r\n </div>\r\n <div>\r\n <h2 class=\"listo-header\">Recoge tu Pedido</h2>\r\n <div class=\"comandas-grid\" id=\"listos\"></div>\r\n </div>\r\n </div>\r\n <div id=\"no-comandas\" class=\"no-comandas\" style=\"display: none;\">\r\n No hay comandas en este momento\r\n </div>\r\n</div>\r\n\r\n<script>\r\n async function cargar() {\r\n try {\r\n // Verificar si debe activar fullscreen al cargar\r\n const activarFullscreen = localStorage.getItem(\'activar_fullscreen\');\r\n if (activarFullscreen === \'true\' && !document.fullscreenElement) {\r\n document.documentElement.requestFullscreen().catch(err => {\r\n console.error(`Error al entrar en pantalla completa: ${err.message}`);\r\n });\r\n // Limpiar el flag despu\u{e9}s de activar\r\n localStorage.removeItem(\'activar_fullscreen\');\r\n }\r\n\r\n const res = await fetch(\'/api/pedidos\');\r\n const lista = await res.json();\r\n const contPreparacion = document.getElementById(\'preparacion\');\r\n const contListos = document.getElementById(\'listos\');\r\n const noComandas = document.getElementById(\'no-comandas\');\r\n\r\n contPreparacion.innerHTML = \'\';\r\n contListos.innerHTML = \'\';\r\n\r\n // Separar comandas por estado\r\n const comandasPreparacion = lista.filter(p => p.estado === \'en_preparacion\');\r\n const comandasListas = lista.filter(p => p.estado === \'listo\');\r\n\r\n if (comandasPreparacion.length === 0 && comandasListas.length === 0) {\r\n noComandas.style.display = \'block\';\r\n } else {\r\n noComandas.style.display = \'none\';\r\n\r\n // Mostrar comandas en preparaci\u{f3}n\r\n comandasPreparacion.forEach(p => {\r\n const div = document.createElement(\'div\');\r\n div.className = \'card preparacion\';\r\n div.innerHTML = `\r\n <div class=\"comanda\">${p.canal}-${p.numero}</div>\r\n `;\r\n contPreparacion.appendChild(div);\r\n });\r\n\r\n // Mostrar comandas listas\r\n comandasListas.forEach(p => {\r\n const div = document.createElement(\'div\');\r\n div.className = \'card listo\';\r\n div.innerHTML = `\r\n <div class=\"estado\">\u{a1}Listo!</div>\r\n <div class=\"comanda\">${p.canal}-${p.numero}</div>\r\n `;\r\n contListos.appendChild(div);\r\n });\r\n }\r\n } catch (e) {\r\n console.error(\'Error al cargar pedidos:\', e);\r\n }\r\n }\r\n\r\n function toggleFullscreen() {\r\n if (!document.fullscreenElement) {\r\n document.documentElement.requestFullscreen().catch(err => {\r\n console.error(`Error al entrar en pantalla completa: ${err.message}`);\r\n });\r\n } else {\r\n document.exitFullscreen().catch(err => {\r\n console.error(`Error al salir de pantalla completa: ${err.message}`);\r\n });\r\n }\r\n }\r\n function actualizarLogos() {\r\n const esDark = document.body.classList.contains(\'dark-mode\');\r\n const logoSrc = esDark ? \'/LOGO_WHITE.png\' : \'/LOGO_DARK.png\';\r\n document.getElementById(\'logo-izquierda\').src = logoSrc;\r\n document.getElementById(\'logo-derecha\').src = logoSrc;\r\n }\r\n function toggleDarkMode() {\r\n const modo = document.body.classList.toggle(\'dark-mode\') ? \'dark\' : \'light\';\r\n localStorage.setItem(\'modo_index\', modo);\r\n fetch(\'/api/modo\', {\r\n method: \'POST\',\r\n headers: { \'Content-Type\': \'application/json\' },\r\n body: JSON.stringify({ modo })\r\n });\r\n actualizarLogos();\r\n }\r\n\r\n\r\n function aplicarModo() {\r\n const modoGuardado = localStorage.getItem(\'modo_index\');\r\n if (modoGuardado === \'dark\') {\r\n document.body.classList.add(\'dark-mode\');\r\n } else {\r\n document.body.classList.remove(\'dark-mode\');\r\n }\r\n actualizarLogos();\r\n }\r\n\r\n aplicarModo();\r\n setInterval(cargar, 3000);\r\n cargar();\r\n</script>\r\n</body>\r\n</html>";