{"id":590,"date":"2024-10-26T02:12:54","date_gmt":"2024-10-26T02:12:54","guid":{"rendered":"https:\/\/conectaia.online\/cosidosfinal\/?page_id=590"},"modified":"2024-10-29T16:22:01","modified_gmt":"2024-10-29T16:22:01","slug":"pre-orden","status":"publish","type":"page","link":"https:\/\/cuadernoscosidos.com\/en\/pre-orden\/","title":{"rendered":"Pre-Order"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"590\" class=\"elementor elementor-590\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d17e226 e-flex e-con-boxed e-con e-parent\" data-id=\"d17e226\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-af15c6e e-con-full e-flex e-con e-child\" data-id=\"af15c6e\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8591a9f elementor-widget elementor-widget-html\" data-id=\"8591a9f\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<div class=\"user-info\">\r\n    <h2>User Information<\/h2>\r\n    <div class=\"user-inputs\">\r\n        <!-- Primera fila: Nombre y Tel\u00e9fono en una l\u00ednea -->\r\n        <div class=\"input-row\">\r\n            <div class=\"input-group\">\r\n                <label for=\"user-name\">* Name:<\/label>\r\n                <input type=\"text\" id=\"user-name\" placeholder=\"Enter your name\" required>\r\n            <\/div>\r\n            <div class=\"input-group\">\r\n                <label for=\"user-phone\">Phone:<\/label>\r\n                <input type=\"text\" id=\"user-phone\" placeholder=\"Enter your phone number\" required>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Segunda fila: Correo y Escuela en una l\u00ednea -->\r\n        <div class=\"input-row\">\r\n            <div class=\"input-group\">\r\n                <label for=\"user-email\">* E-mail<\/label>\r\n                <input type=\"email\" id=\"user-email\" placeholder=\"Enter your e-mail\" required>\r\n            <\/div>\r\n            <div class=\"input-group\">\r\n                <label for=\"user-school\">* School:<\/label>\r\n                <input type=\"text\" id=\"user-school\" placeholder=\"Enter your school\" required>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n    <div class=\"container\">\r\n        <h1>Pre-Order<\/h1>\r\n\r\n        <div class=\"section\">\r\n            <h2>Color:<\/h2>\r\n            <div class=\"color-boxes\">\r\n                <div class=\"color-box rojo\" data-code=\"rj\"><\/div>\r\n                <div class=\"color-box amarillo\" data-code=\"am\"><\/div>\r\n                <div class=\"color-box verde\" data-code=\"ve\"><\/div>\r\n                <div class=\"color-box rosa\" data-code=\"ros\"><\/div>\r\n                <div class=\"color-box naranja\" data-code=\"na\"><\/div>\r\n                <div class=\"color-box azul\" data-code=\"az\"><\/div>\r\n                <div class=\"color-box blanco\" data-code=\"bl\"><\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n<div class=\"section\">\r\n    <h2>Notebook Type:<\/h2>\r\n    <div class=\"cuaderno-boxes\" style=\"display: flex; justify-content: space-between;\">\r\n        <div class=\"cuaderno-box\" data-code=\"cos\" style=\"width: 19%;\">Sew<\/div>\r\n        <div class=\"cuaderno-box\" data-code=\"airdo\" style=\"width: 19%;\">Wire o Coil<\/div>\r\n        <div class=\"cuaderno-box\" data-code=\"spi\" style=\"width: 19%;\">Spiral<\/div>\r\n        <div class=\"cuaderno-box\" data-code=\"gra\" style=\"width: 19%;\">Stich<\/div>\r\n        <div class=\"cuaderno-box\" data-code=\"eng\" style=\"width: 19%;\">Perfect Bind<\/div>\r\n    <\/div>\r\n<\/div>\r\n        \r\n        <div class=\"section\">\r\n            <h2>Size:<\/h2>\r\n            <div class=\"tama\u00f1o-boxes\">\r\n                <div class=\"tama\u00f1o-box\" data-code=\"ital\">Italian<\/div>\r\n                <div class=\"tama\u00f1o-box\" data-code=\"fra\">French<\/div>\r\n                <div class=\"tama\u00f1o-box\" data-code=\"coll\">College<\/div>\r\n                <div class=\"tama\u00f1o-box\" data-code=\"pro\">Profesional<\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Nueva secci\u00f3n: Hoja Interior -->\r\n        <div class=\"section\">\r\n            <h2>Interior Sheet:<\/h2>\r\n            <div class=\"hoja-interior-boxes\">\r\n                <div class=\"hoja-interior-box\" data-code=\"ray\">Line<\/div>\r\n                <div class=\"hoja-interior-box\" data-code=\"dra\">Double Line<\/div>\r\n                <div class=\"hoja-interior-box\" data-code=\"cua\">Grid<\/div>\r\n                <div class=\"hoja-interior-box\" data-code=\"pun\">Dots<\/div>\r\n                <div class=\"hoja-interior-box\" data-code=\"dib\">Drawing<\/div>\r\n                <div class=\"hoja-interior-box\" data-code=\"tar\">Home Works<\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"quantity-container\">\r\n            <div class=\"code-output\" id=\"color-code\"><\/div>\r\n            <div class=\"quantity-selector\">\r\n                <button class=\"decrement\">-<\/button>\r\n                <span class=\"quantity\">1<\/span>\r\n                <button class=\"increment\">+<\/button>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <button class=\"add-to-cart\">Add to Cart<\/button>\r\n    <\/div>\r\n    \r\n    \t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6bd8262 e-con-full e-flex e-con e-child\" data-id=\"6bd8262\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-11b3a7e elementor-widget elementor-widget-html\" data-id=\"11b3a7e\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!-- Contenedor del carrito -->\r\n<div class=\"cart-container\">\r\n    <h1>Cart<\/h1>\r\n    <table id=\"cart-items-table\">\r\n        <thead>\r\n            <tr>\r\n                <th>Description<\/th>\r\n                <th>Qty.<\/th>\r\n            <\/tr>\r\n        <\/thead>\r\n        <tbody id=\"cart-items\"><\/tbody> <!-- Aqu\u00ed se agregar\u00e1n las filas del carrito -->\r\n    <\/table>\r\n\r\n    <div id=\"cart-total\">\r\n        <p>Total Amount: <span id=\"total-quantity\">0<\/span><\/p>\r\n    <\/div>\r\n\r\n<!-- Bot\u00f3n para enviar la pre-orden -->\r\n<button id=\"send-pre-order\" class=\"whatsapp-button\">Send Pre-Order for Quotation<\/button>\r\n<\/div>\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6366735 e-flex e-con-boxed e-con e-parent\" data-id=\"6366735\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fd6cefd elementor-widget elementor-widget-html\" data-id=\"fd6cefd\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\r\n\r\n    <style>\r\n* {\r\n    margin: 0;\r\n    padding: 0;\r\n    box-sizing: border-box;\r\n}\r\n\r\na {\r\n    color: inherit; \/* Inherit color from parent element *\/\r\n    text-decoration: none; \/* Remove underline *\/\r\n}\r\n\r\na:hover, a:focus, a:active {\r\n    color: inherit; \/* Maintain color on hover, focus, and active states *\/\r\n    text-decoration: none; \/* Keep underline removed on all states *\/\r\n}\r\n\r\n\r\n.container {\r\n    width: 100%;\r\n    padding: 20px;\r\n    background-color: white;\r\n    border-radius: 10px;\r\n    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\r\n    text-align: center;\r\n}\r\n\r\n\/* Media Query para dispositivos m\u00f3viles *\/\r\n@media (max-width: 768px) { \r\n    .container {\r\n        width: 100%; \r\n            padding: 5px;\r\n\r\n    }\r\n}\r\n\r\nh1 {\r\n    margin-bottom: 20px;\r\n    font-size: 12px;\r\n    font-weight: bold; \r\n}\r\n\r\nh2 {\r\n    margin-bottom: 10px;\r\n    font-size: 12px;\r\n    text-align: left;\r\n    font-weight: bold; \r\n}\r\n\r\n\r\n.section {\r\n    margin-bottom: 20px;\r\n}\r\n\r\n.color-boxes, .cuaderno-boxes, .tama\u00f1o-boxes, .hoja-boxes {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    margin-bottom: 10px;\r\n}\r\n\r\n\r\n\r\n\/* Establecer el tama\u00f1o de fuente para todas las cajas en una sola l\u00ednea *\/\r\n.cuaderno-box, .cuaderno-box-2, .tama\u00f1o-box, .hoja-box, .hoja-interior-box, .hoja-interior-box[data-code=\"ray\"], \r\n.hoja-interior-box[data-code=\"dra\"], .hoja-interior-box[data-code=\"cua\"], \r\n.hoja-interior-box[data-code=\"pun\"], .hoja-interior-box[data-code=\"dib\"], \r\n.hoja-interior-box[data-code=\"tar\"], .hoja-interior-box[data-code=\"bla\"] {\r\n    font-size: 12px; \/* Cambia el tama\u00f1o de fuente seg\u00fan lo que necesites *\/\r\n}\r\n\r\n\r\n.color-box {\r\n    width: 12%;\r\n    height: 30px;\r\n    cursor: pointer;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    font-size: 24px;\r\n    font-weight: bold;\r\n    color: white;\r\n    border-radius: 5px;\r\n    position: relative;\r\n}\r\n\r\n.rojo { background-color: red; }\r\n.amarillo { background-color: yellow; color: black; }\r\n.verde { background-color: green; }\r\n.rosa { background-color: #ed0083; }\r\n.naranja { background-color: orange; }\r\n.azul { background-color: blue; }\r\n.blanco { background-color: white; color: black; border: 1px solid black; }\r\n\r\n\r\n.cuaderno-box, .tama\u00f1o-box, .hoja-box {\r\n    width: 24%;\r\n    height: 40px;\r\n    cursor: pointer;\r\n    background-color: #f0f0f0;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    border-radius: 5px;\r\n    border: 1px solid #ccc;\r\n    font-weight: bold;\r\n    color: #333;\r\n    position: relative;\r\n    transition: background-color 0.3s ease;\r\n    text-align: center;\r\n}\r\n\r\n.cuaderno-box-2 {\r\n    width: 32%;\r\n    height: 40px;\r\n    cursor: pointer;\r\n    background-color: #f0f0f0;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    border-radius: 5px;\r\n    border: 1px solid #ccc;\r\n    font-weight: bold;\r\n    color: #333;\r\n    position: relative;\r\n    transition: background-color 0.3s ease;\r\n    text-align: center;\r\n\r\n}\r\n\r\n.cuaderno-box.selected, .tama\u00f1o-box.selected, .hoja-box.selected {\r\n    background-color: #e0e0e0;\r\n    position: relative;\r\n}\r\n\r\n\/* Estilos de las cajas de las hojas interiores *\/\r\n.hoja-box.ray {\r\n    background-image: linear-gradient(transparent 6px, #333 6px);\r\n    background-size: 100% 12px;\r\n\r\n}\r\n\r\n.hoja-box.dra {\r\n    background-image: linear-gradient(transparent 4px, #333 4px, transparent 2px, #333 6px);\r\n    background-size: 100% 20px;\r\n        width: 8%;\r\n\r\n}\r\n\r\n.hoja-box.cua {\r\n    background-image: linear-gradient(#333 1px, transparent 1px), linear-gradient(90deg, #333 1px, transparent 1px);\r\n    background-size: 12px 12px;\r\n}\r\n\r\n.hoja-box.pun {\r\n    background-image: radial-gradient(#333 1px, transparent 1px);\r\n    background-size: 12px 12px;\r\n}\r\n\r\n.hoja-box.dib::before {\r\n    content: 'Dibujo';\r\n    font-size: 14px;\r\n    color: #333;\r\n}\r\n\r\n.hoja-box.tar::before {\r\n    content: 'Tarea';\r\n    font-size: 14px;\r\n    color: #333;\r\n}\r\n\r\n.code-output {\r\n    font-size: 18px;\r\n}\r\n\r\n\/* Estilos para Hoja Interior *\/\r\n.hoja-interior-boxes {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    margin-bottom: 10px;\r\n}\r\n\r\n.hoja-interior-box {\r\n    width: 16%;\r\n    height: 80px;\r\n    cursor: pointer;\r\n    background-color: #f0f0f0;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    border-radius: 5px;\r\n    border: 1px solid #ccc;\r\n    font-weight: bold;\r\n    color: #333;\r\n    text-align: center;\r\n    position: relative;\r\n    transition: background-color 0.3s ease;\r\n}\r\n\r\n.hoja-interior-box.selected {\r\n    background-color: #e0e0e0;\r\n}\r\n\r\n.cuaderno-box.selected::after, .tama\u00f1o-box.selected::after, .hoja-interior-box.selected::after, .color-box.selected::after {\r\n    content: 'X';\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n    transform: translate(-50%, -50%);\r\n    font-size: 24px;\r\n    font-weight: bold;\r\n    color: rgb(37, 37, 37); \/* Color de la 'X' cuando se selecciona *\/\r\n    pointer-events: none;\r\n}\r\n\r\n\/* Estilos de las hojas interiores basados en data-code *\/\r\n\r\n\/* Rayas *\/\r\n.hoja-interior-box[data-code=\"ray\"] {\r\n    background: \r\n        linear-gradient(#a5a4a4 2px, transparent 2px),  \/* Primera l\u00ednea *\/\r\n        linear-gradient(#a5a4a4 2px, transparent 2px),  \/* Segunda l\u00ednea *\/\r\n        linear-gradient(#a5a4a4 2px, transparent 2px),  \/* Tercera l\u00ednea *\/\r\n        linear-gradient(#a5a4a4 2px, transparent 2px),  \/* Cuarta l\u00ednea *\/\r\n        linear-gradient(#a5a4a4 2px, transparent 2px),  \/* Quinta l\u00ednea *\/\r\n        linear-gradient(#a5a4a4 2px, transparent 2px),  \/* Sexta l\u00ednea *\/\r\n        linear-gradient(#a5a4a4  2px, transparent 2px),  \/* Sexta l\u00ednea *\/\r\n        linear-gradient(#a5a4a4  2px, transparent 2px);  \/* Sexta l\u00ednea *\/\r\n\r\n    \r\n    background-size: 100% 12px; \/* Espacio para la altura de cada l\u00ednea *\/\r\n    background-position: \r\n        top 6px left,          \/* Primera l\u00ednea *\/\r\n        top 12px left,         \/* Segunda l\u00ednea *\/\r\n        top 18px left,         \/* Tercera l\u00ednea *\/\r\n        top 24px left,         \/* Cuarta l\u00ednea *\/\r\n        top 30px left,         \/* Quinta l\u00ednea *\/\r\n        top 36px left,         \/* Sexta l\u00ednea *\/\r\n        top 42px left,         \/* Sexta l\u00ednea *\/\r\n        top 48px left;         \/* Sexta l\u00ednea *\/\r\n\r\n        \r\n    background-repeat: no-repeat; \/* No repetir el fondo *\/\r\n    height: 50px; \/* Altura del cuadro *\/\r\n    border: 1px solid #ccc; \/* Borde opcional *\/\r\n}\r\n\/* Doble raya *\/\r\n.hoja-interior-box[data-code=\"dra\"] {\r\n    background: \r\n        linear-gradient(#a5a4a4 2px, transparent 2px),  \/* Primera l\u00ednea superior *\/\r\n        linear-gradient(#a5a4a4 2px, transparent 2px),  \/* Segunda l\u00ednea superior *\/\r\n        linear-gradient(#a5a4a4 2px, transparent 2px),  \/* Primera l\u00ednea central superior *\/\r\n        linear-gradient(#a5a4a4 2px, transparent 2px),  \/* Segunda l\u00ednea central superior *\/\r\n        linear-gradient(#a5a4a4 2px, transparent 2px),  \/* Primera l\u00ednea central inferior *\/\r\n        linear-gradient(#a5a4a4 2px, transparent 2px);  \/* Segunda l\u00ednea central inferior *\/\r\n\r\n        \r\n    background-size: 100% 10px; \/* Espacio para la altura de cada l\u00ednea *\/\r\n    background-position: \r\n        top 5px left,         \/* Primera l\u00ednea superior *\/\r\n        top 10px left,         \/* Segunda l\u00ednea superior *\/\r\n        top 20px left,         \/* Primera l\u00ednea central superior *\/\r\n        top 25px left,         \/* Segunda l\u00ednea central superior *\/\r\n        top 35px left,         \/* Primera l\u00ednea central inferior *\/\r\n        top 40px left;        \/* Segunda l\u00ednea central inferior *\/\r\n        \r\n    background-repeat: no-repeat; \/* No repetir el fondo *\/\r\n    height: 50px; \/* Altura del cuadro *\/\r\n    border: 1px solid #ccc; \/* Borde opcional *\/\r\n\r\n}\r\n\r\n\r\n\/* Cuadros *\/\r\n.hoja-interior-box[data-code=\"cua\"] {\r\n    background-image: linear-gradient(#a5a4a4 1px, transparent 1px), linear-gradient(90deg, #333 1px, transparent 1px);\r\n    background-size: 12px 12px;\r\n    height: 50px; \/* Altura del cuadro *\/\r\n\r\n}\r\n\r\n\/* Puntos *\/\r\n.hoja-interior-box[data-code=\"pun\"] {\r\n    background-image: radial-gradient(#a5a4a4 1px, transparent 1px);\r\n    background-size: 10px 10px;\r\n    height: 50px; \/* Altura del cuadro *\/\r\n\r\n}\r\n\r\n\/* Dibujo *\/\r\n.hoja-interior-box[data-code=\"dib\"] {\r\n    background-color: #fff;\r\n    color: #333;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    height: 50px; \/* Altura del cuadro *\/\r\n\r\n}\r\n.hoja-interior-box[data-code=\"dib\"]::before {\r\n    font-weight: bold;\r\n}\r\n\r\n\/* Tarea *\/\r\n.hoja-interior-box[data-code=\"tar\"] {\r\n    background-color: #fff;\r\n    color: #333;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    height: 50px; \/* Altura del cuadro *\/\r\n\r\n}\r\n.hoja-interior-box[data-code=\"tar\"]::before {\r\n    font-weight: bold;\r\n}\r\n\r\n\/* Blanco *\/\r\n.hoja-interior-box[data-code=\"bla\"] {\r\n    background-color: white;\r\n    color: #333;\r\n}\r\n\r\n\/* L\u00ednea de separaci\u00f3n *\/\r\n.separator {\r\n    border-top: 3px solid #ccc; \/* Color de la l\u00ednea *\/\r\n    margin: 20px 0; \/* Espaciado superior e inferior *\/\r\n    width: 100%;\r\n}\r\n\r\n.quantity-container {\r\n    display: flex; \/* Usar flexbox para organizar los elementos en l\u00ednea *\/\r\n    justify-content: space-between; \/* Espaciado entre los elementos *\/\r\n    align-items: center; \/* Alinear verticalmente al centro *\/\r\n    margin-top: 20px; \/* Espacio superior, ajusta seg\u00fan sea necesario *\/\r\n}\r\n\r\n.code-output {\r\n    flex: 1; \/* Permite que ocupe el espacio disponible *\/\r\n    text-align: left; \/* Alinear texto a la izquierda *\/\r\n}\r\n\r\n.quantity-selector {\r\n    display: flex; \/* Usar flexbox para organizar el bot\u00f3n y el n\u00famero *\/\r\n    align-items: center; \/* Alinear verticalmente al centro *\/\r\n}\r\n\r\n.quantity-selector button {\r\n    background-color: #7b5a3b; \/* Color de fondo para los botones *\/\r\n    color: white; \/* Color del texto en los botones *\/\r\n    border: none; \/* Sin borde *\/\r\n    padding: 10px 15px; \/* Espaciado interno *\/\r\n    font-size: 12px; \/* Tama\u00f1o de fuente *\/\r\n    cursor: pointer; \/* Cambia el cursor al pasar por encima *\/\r\n    border-radius: 5px; \/* Bordes redondeados *\/\r\n    margin: 0 5px; \/* Espaciado entre botones *\/\r\n}\r\n\r\n.quantity {\r\n    font-size: 12px; \/* Tama\u00f1o de fuente para el n\u00famero *\/\r\n    margin: 0 10px; \/* Espaciado entre el n\u00famero y los botones *\/\r\n}\r\n\r\n\r\n.add-to-cart {\r\n    background-color: #7b5a3b !important;\r\n    color: white !important;\r\n    border: none;\r\n    padding: 12px 20px;\r\n    font-size: 12px;\r\n    cursor: pointer;\r\n    border-radius: 5px;\r\n    margin-top: 20px;\r\n    transition: background-color 0.3s;\r\n}\r\n\r\n.add-to-cart:hover {\r\n    background-color: #7b5a3b !important; \r\n}\r\n\r\n.add-to-cart:active {\r\n    background-color: #7b5a3b !important; \r\n}\r\n\r\n\r\n.user-info {\r\n    margin-bottom: 20px;\r\n    padding: 15px;\r\n    background-color: #e8f5e9;\r\n    border-radius: 10px;\r\n    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\r\n    font-size: 12px;\r\n}\r\n\r\n.user-info h2 {\r\n    text-align: center;\r\n    font-size: 12px;\r\n}\r\n\r\n.user-inputs {\r\n    display: flex;\r\n    flex-direction: column;\r\n}\r\n\r\n.input-row {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    margin-bottom: 10px;\r\n}\r\n\r\n.input-group {\r\n    width: 48%; \/* Ajuste para que cada campo ocupe el 50% de la fila *\/\r\n}\r\n\r\n.input-group label {\r\n    display: block;\r\n    margin-bottom: 5px;\r\n    font-size: 12px;\r\n}\r\n\r\n.input-group input {\r\n    width: 100%;\r\n    padding: 8px;\r\n    border: 1px solid #ccc;\r\n    border-radius: 5px;\r\n    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);\r\n    font-size: 12px;\r\n}\r\n\r\n\r\n\r\n\r\n.whatsapp-button {\r\n    background-color: #7b5a3b !important; \r\n    color: white;\r\n    padding: 10px 20px;\r\n    border: none;\r\n    border-radius: 5px;\r\n    cursor: pointer;\r\n    font-size: 12px;\r\n    margin-top: 10px;\r\n    width: 100%;\r\n}\r\n\r\n.whatsapp-button:hover {\r\n    background-color: #7b5a3b !important; \r\n}\r\n\r\n.whatsapp-button:active {\r\n    background-color: #7b5a3b !important; \r\n}\r\n\r\n .cart-container {\r\n        width: 100%;\r\n        height: 100%;\r\n        padding: 20px;\r\n        background-color: #f8f8f8;\r\n        border-radius: 10px;\r\n        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\r\n        text-align: left;\r\n        font-size: 12px; \r\n    }\r\n    \r\n    .cart-container h1 {\r\n        text-align: center;\r\n        font-size: 12px; \/\r\n    }\r\n    \r\n    table {\r\n        width: 100%;\r\n        border-collapse: collapse;\r\n        margin: 20px 0;\r\n        max-height: 100px; \r\n        overflow-y: auto;  \r\n    }\r\n    \r\n    table, th, td {\r\n        border: 1px solid #ddd;\r\n        text-align: left;\r\n    }\r\n    \r\n    th, td {\r\n        padding: 8px;\r\n        font-size: 12px; \r\n    }\r\n    \r\n    #cart-total {\r\n        text-align: right;\r\n        bottom: 20px; \r\n        right: 20px; \r\n        background-color: #f8f8f8;\r\n        padding: 10px; \r\n        font-weight: bold; \r\n        font-size: 12px; \r\n    }\r\n    \r\n    <\/style>\r\n    \t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-48b03de e-flex e-con-boxed e-con e-parent\" data-id=\"48b03de\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fa1be43 elementor-widget elementor-widget-html\" data-id=\"fa1be43\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<script>\r\nconst colorBoxes = document.querySelectorAll('.color-box');\r\nconst cuadernoBoxes = document.querySelectorAll('.cuaderno-box');\r\nconst tama\u00f1oBoxes = document.querySelectorAll('.tama\u00f1o-box');\r\nconst hojaInteriorBoxes = document.querySelectorAll('.hoja-interior-box');\r\nconst colorCodeSpan = document.getElementById('color-code');\r\n\r\nlet selectedColorCode = '';\r\nlet selectedCuadernoCode = '';\r\nlet selectedTama\u00f1oCode = '';\r\nlet selectedHojaInteriorCode = '';\r\n\r\nfunction updateCode() {\r\n    const codes = [selectedColorCode, selectedCuadernoCode, selectedTama\u00f1oCode, selectedHojaInteriorCode]\r\n        .filter(code => code) \r\n        .join('-'); \r\n\r\n    colorCodeSpan.textContent = `${codes || '*****'}`; \r\n}\r\n\r\ncolorBoxes.forEach(box => {\r\n    box.addEventListener('click', function() {\r\n        removeConfirmationMessage() \r\n        colorBoxes.forEach(b => {\r\n            b.textContent = '';\r\n            b.classList.remove('selected');\r\n        });\r\n\r\n        this.textContent = 'X';\r\n        this.classList.add('selected');\r\n        selectedColorCode = this.getAttribute('data-code');\r\n        updateCode();\r\n    });\r\n});\r\n\r\ncuadernoBoxes.forEach(box => {\r\n    box.addEventListener('click', function() {\r\n                removeConfirmationMessage() \r\n        cuadernoBoxes.forEach(b => b.classList.remove('selected'));\r\n        this.classList.add('selected');\r\n        selectedCuadernoCode = this.getAttribute('data-code');\r\n        updateCode();\r\n    });\r\n});\r\n\r\ntama\u00f1oBoxes.forEach(box => {\r\n    box.addEventListener('click', function() {\r\n                removeConfirmationMessage() \r\n        tama\u00f1oBoxes.forEach(b => b.classList.remove('selected'));\r\n        this.classList.add('selected');\r\n        selectedTama\u00f1oCode = this.getAttribute('data-code');\r\n        updateCode();\r\n    });\r\n});\r\n\r\nhojaInteriorBoxes.forEach(box => {\r\n    box.addEventListener('click', function() {\r\n                removeConfirmationMessage() \r\n        hojaInteriorBoxes.forEach(b => b.classList.remove('selected'));\r\n        this.classList.add('selected');\r\n        selectedHojaInteriorCode = this.getAttribute('data-code');\r\n        updateCode();\r\n    });\r\n});\r\n\r\nconst decrementButtons = document.querySelectorAll('.decrement');\r\nconst incrementButtons = document.querySelectorAll('.increment');\r\nconst quantityDisplays = document.querySelectorAll('.quantity');\r\nconst colorCodeDisplay = document.getElementById('color-code');\r\nconst cartItemsContainer = document.getElementById('cart-items');\r\nconst totalQuantityDisplay = document.getElementById('total-quantity');\r\n\r\ndecrementButtons.forEach((button, index) => {\r\n    button.addEventListener('click', () => {\r\n        let quantity = parseInt(quantityDisplays[index].textContent);\r\n        if (quantity > 1) {\r\n            quantity--;\r\n            quantityDisplays[index].textContent = quantity;\r\n        }\r\n    });\r\n});\r\n\r\nincrementButtons.forEach((button, index) => {\r\n    button.addEventListener('click', () => {\r\n        let quantity = parseInt(quantityDisplays[index].textContent);\r\n        quantity++;\r\n        quantityDisplays[index].textContent = quantity;\r\n    });\r\n});\r\n\r\nlet totalQuantity = 0;\r\n\r\nconst addToCartButton = document.querySelector('.add-to-cart');\r\n\r\nfunction isValidEmail(email) {\r\n    const emailPattern = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/; \/\/ Expresi\u00f3n regular para validar el correo electr\u00f3nico\r\n    return emailPattern.test(email);\r\n}\r\n\r\naddToCartButton.addEventListener('click', () => {\r\n            removeConfirmationMessage() \r\n\r\n    const colorCode = colorCodeDisplay.textContent;\r\n    const selectedQuantityDisplay = document.querySelector('.quantity');\r\n    const quantity = parseInt(selectedQuantityDisplay.textContent);\r\n    \r\n    let isEnglishDomain = window.location.pathname.startsWith('\/cosidosfinal\/en');\r\n    let messages = {\r\n        name: isEnglishDomain ? 'Please enter your name.' : 'Por favor, ingresa tu nombre.',\r\n        phone: isEnglishDomain ? 'Please enter your phone number.' : 'Por favor, ingresa tu tel\u00e9fono.',\r\n        school: isEnglishDomain ? 'Please enter your school.' : 'Por favor, ingresa tu escuela.',\r\n        cuaderno: isEnglishDomain ? 'notebook.' : 'cuaderno.',\r\n        hojaInterior: isEnglishDomain ? 'interior sheet type.' : 'tipo de hoja interior.',\r\n        color: isEnglishDomain ? 'color.' : 'color.',\r\n        tama\u00f1o: isEnglishDomain ? 'size.' : 'un tama\u00f1o.',\r\n        confirmation: isEnglishDomain \r\n        ? 'Your quotation has been received. We will contact you soon.' \r\n        : 'Su cotizaci\u00f3n ha sido recibida. Nos pondremos en contacto con usted pronto.'\r\n};\r\n\r\n    const missingOptions = [];\r\n    if (!selectedColorCode) missingOptions.push(isEnglishDomain ? messages.color : messages.color);\r\n    if (!selectedCuadernoCode) missingOptions.push(isEnglishDomain ? messages.cuaderno : messages.cuaderno);\r\n    if (!selectedTama\u00f1oCode) missingOptions.push(isEnglishDomain ? messages.tama\u00f1o : messages.tama\u00f1o);\r\n    if (!selectedHojaInteriorCode) missingOptions.push(isEnglishDomain ? messages.hojaInterior : messages.hojaInterior);\r\n\r\n    const userName = document.getElementById('user-name').value.trim();\r\n    const userEmail = document.getElementById('user-email').value.trim();\r\n    const userSchool = document.getElementById('user-school').value.trim();\r\n\r\n    if (!userName) {\r\n        alert(messages.name);\r\n        return;\r\n    }\r\n    if (!userEmail) {\r\n        alert(isEnglishDomain ? 'Please enter your email.' : 'Por favor, ingresa tu correo.');\r\n        return;\r\n    }\r\n    if (!isValidEmail(userEmail)) {\r\n        alert(isEnglishDomain ? 'Please enter a valid email.' : 'Por favor, ingresa un correo v\u00e1lido.');\r\n        return;\r\n    }\r\n    if (!userSchool) {\r\n        alert(messages.school);\r\n        return;\r\n    }\r\n    if (missingOptions.length > 0) {\r\n        alert(`${isEnglishDomain ? 'Please select:' : 'Por favor, selecciona:'} ${missingOptions.join(', ')}`);\r\n        return;\r\n    }\r\n\r\n    if (colorCode && quantity > 0) {\r\n        const cartRow = document.createElement('tr');\r\n\r\n        const descriptionCell = document.createElement('td');\r\n        descriptionCell.textContent = colorCode;\r\n\r\n        const quantityCell = document.createElement('td');\r\n        quantityCell.textContent = quantity;\r\n\r\n        cartRow.appendChild(descriptionCell);\r\n        cartRow.appendChild(quantityCell);\r\n\r\n        cartItemsContainer.appendChild(cartRow);\r\n\r\n        totalQuantity += quantity;\r\n        totalQuantityDisplay.textContent = totalQuantity;\r\n\r\n        clearSelections();\r\n        colorCodeDisplay.textContent = '';\r\n        selectedQuantityDisplay.textContent = 1;\r\n    }\r\n});\r\n\r\nfunction clearSelections() {\r\n    colorBoxes.forEach(b => {\r\n        b.textContent = '';\r\n        b.classList.remove('selected');\r\n    });\r\n    selectedColorCode = '';\r\n\r\n    cuadernoBoxes.forEach(b => b.classList.remove('selected'));\r\n    selectedCuadernoCode = '';\r\n\r\n    tama\u00f1oBoxes.forEach(b => b.classList.remove('selected'));\r\n    selectedTama\u00f1oCode = '';\r\n\r\n    hojaInteriorBoxes.forEach(b => b.classList.remove('selected'));\r\n    selectedHojaInteriorCode = '';\r\n\r\n    updateCode();\r\n}\r\n\r\n\/\/ Funci\u00f3n para eliminar el mensaje de confirmaci\u00f3n si existe\r\nfunction removeConfirmationMessage() {\r\n    const existingMessage = document.getElementById('confirmationMessage');\r\n    if (existingMessage) {\r\n        existingMessage.remove(); \/\/ Eliminar el mensaje si existe\r\n    }\r\n}\r\n\r\ndocument.getElementById('send-pre-order').addEventListener('click', function() {\r\n                    removeConfirmationMessage() \r\n    const cartItems = document.querySelectorAll('#cart-items tr');\r\n    let orderMessage = 'Pre-orden de cotizaci\u00f3n:\\n';\r\n\r\n    const userName = document.getElementById('user-name').value.trim();\r\n    const userPhone = document.getElementById('user-phone').value.trim();\r\n    const userSchool = document.getElementById('user-school').value.trim();\r\n    const userEmail = document.getElementById('user-email').value.trim(); \r\n\r\n    if (cartItems.length === 0) {\r\n        alert('El carrito est\u00e1 vac\u00edo.');\r\n        return;\r\n    }\r\n\r\n    \/\/ Construcci\u00f3n del mensaje\r\n    orderMessage += `\\nDatos del Usuario:\\nNombre: ${userName}\\nTel\u00e9fono: ${userPhone}\\nCorreo: ${userEmail}\\nEscuela: ${userSchool}\\n`;\r\n    orderMessage += '--------------------------------------\\n';\r\n\r\n    cartItems.forEach((item, index) => {\r\n        const description = item.querySelector('td:nth-child(1)').textContent;\r\n        const quantity = item.querySelector('td:nth-child(2)').textContent;\r\n        orderMessage += `${index + 1}. ${description} - Cantidad: ${quantity}\\n`;\r\n    });\r\n\r\n    \/\/ Enviar los datos al servidor\r\n    fetch('https:\/\/cuadernoscosidos.com\/enviar.php', {\r\n        method: 'POST',\r\n        headers: {\r\n            'Content-Type': 'application\/x-www-form-urlencoded'\r\n        },\r\n        body: new URLSearchParams({\r\n            name: userName,\r\n            phone: userPhone,\r\n            email: userEmail,\r\n            school: userSchool,\r\n            message: orderMessage\r\n        })\r\n    })\r\n    .then(response => response.text())\r\n    .then(data => {\r\n        if (data === 'success') {\r\n            \r\n                let isEnglishDomain = window.location.pathname.startsWith('\/cosidosfinal\/en');\r\n    let messages = {\r\n        confirmation: isEnglishDomain \r\n        ? 'Your quotation has been received. We will contact you soon. Thank you' \r\n        : 'Su cotizaci\u00f3n ha sido recibida. Nos pondremos en contacto con usted pronto. Gracias. '\r\n};\r\n            \/\/ Mostrar mensaje de confirmaci\u00f3n\r\n            const confirmationMessage = document.createElement('p');\r\n                confirmationMessage.id = 'confirmationMessage'; \/\/ Asignar un ID\r\n            confirmationMessage.textContent = messages.confirmation; \r\n            confirmationMessage.style.color = 'green';\r\n           confirmationMessage.style.marginTop = '10px'; \r\n            confirmationMessage.style.fontSize = '12px';\r\n            confirmationMessage.style.fontWeight = 'bold'; \r\n            document.querySelector('.cart-container').appendChild(confirmationMessage);\r\n\r\n            \/\/ Limpiar el carrito despu\u00e9s de enviar el mensaje\r\n            cartItemsContainer.innerHTML = '';\r\n            totalQuantity = 0;\r\n            totalQuantityDisplay.textContent = totalQuantity;\r\n            clearSelections();\r\n        } else {\r\n            alert('Hubo un error al enviar los datos: ' + data);\r\n        }\r\n    })\r\n    .catch(error => {\r\n        alert('Hubo un problema con el env\u00edo: ' + error);\r\n    });\r\n});\r\n<\/script>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Informaci\u00f3n del Usuario * Nombre: Tel\u00e9fono: * Correo: * Escuela: Pre-Orden Color: Tipo de Cuaderno: Cosido Arillo Doble Spiral Grapa Englosado Tama\u00f1o: Italiano Franc\u00e9s College Profesional Hoja Interior: Rayas Doble Raya Cuadros Puntos Dibujo Tarea &#8211; 1 + Agregar al carrito Carrito Descripci\u00f3n Cant. Cantidad total: 0 Enviar pre-orden para cotizar<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-590","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/cuadernoscosidos.com\/en\/wp-json\/wp\/v2\/pages\/590","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cuadernoscosidos.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cuadernoscosidos.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cuadernoscosidos.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cuadernoscosidos.com\/en\/wp-json\/wp\/v2\/comments?post=590"}],"version-history":[{"count":313,"href":"https:\/\/cuadernoscosidos.com\/en\/wp-json\/wp\/v2\/pages\/590\/revisions"}],"predecessor-version":[{"id":1274,"href":"https:\/\/cuadernoscosidos.com\/en\/wp-json\/wp\/v2\/pages\/590\/revisions\/1274"}],"wp:attachment":[{"href":"https:\/\/cuadernoscosidos.com\/en\/wp-json\/wp\/v2\/media?parent=590"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}