{"id":249,"date":"2026-03-29T12:26:53","date_gmt":"2026-03-29T12:26:53","guid":{"rendered":"https:\/\/www.sosaweb.es\/?page_id=249"},"modified":"2026-03-29T12:48:48","modified_gmt":"2026-03-29T12:48:48","slug":"portada-domingo","status":"publish","type":"page","link":"https:\/\/www.sosaweb.es\/index.php\/portada-domingo\/","title":{"rendered":"Portada Domingo"},"content":{"rendered":"\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/jsbarcode@3.11.0\/dist\/JsBarcode.all.min.js\"><\/script>\n\n<style>\n  \/* --- ESTILOS DEL PANEL (Solo se ve en la web) --- *\/\n  #panel-control-textil {\n    background: #f8f9fa;\n    padding: 25px;\n    border-radius: 12px;\n    margin-bottom: 30px;\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n    border: 1px solid #ddd;\n    max-width: 900px;\n    margin-left: auto;\n    margin-right: auto;\n  }\n  .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }\n  .form-group label { display: block; font-weight: bold; margin-bottom: 5px; font-size: 13px; color: #333; }\n  .form-group input, .form-group textarea {\n    width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 6px; box-sizing: border-box; font-size: 14px;\n  }\n  .btn-imprimir {\n    margin-top: 20px; width: 100%; padding: 18px; background: #0073aa; color: white;\n    border: none; border-radius: 6px; font-size: 18px; font-weight: bold; cursor: pointer; transition: 0.3s;\n  }\n  .btn-imprimir:hover { background: #005177; }\n\n  \/* --- VISTA PREVIA (Lo que ves en pantalla debajo del bot\u00f3n) --- *\/\n  #preview-container {\n    display: flex;\n    justify-content: center;\n    background: #eee;\n    padding: 40px 0;\n  }\n  \n  \/* Estilos de la car\u00e1tula (compartidos) *\/\n  .a4-page {\n    width: 210mm;\n    height: 297mm;\n    background: white;\n    padding: 20mm;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    font-family: 'Georgia', serif;\n    color: #333;\n    box-shadow: 0 0 15px rgba(0,0,0,0.2);\n  }\n\n  .logo-box { height: 80px; text-align: center; margin-bottom: 25px; display: flex; justify-content: center; align-items: center; }\n  .logo-box img { max-height: 100%; max-width: 80%; object-fit: contain; }\n  \n  .foto-box { width: 100%; height: 380px; margin-bottom: 25px; overflow: hidden; background: #f9f9f9; }\n  .foto-box img { width: 100%; height: 100%; object-fit: cover; display: block; }\n\n  .info-bar {\n    display: flex; justify-content: space-between; align-items: center;\n    border-top: 2px solid #333; border-bottom: 2px solid #333;\n    padding: 12px 0; margin-bottom: 30px; text-transform: uppercase; font-family: Arial, sans-serif; font-weight: bold; font-size: 16px;\n  }\n\n  .text-content p { line-height: 1.6; text-align: justify; font-size: 14.5px; margin-bottom: 15px; }\n\n  .footer-care {\n    font-family: Arial, sans-serif; font-size: 12px; line-height: 1.5; white-space: pre-line;\n    margin-top: auto; padding-top: 15px; border-top: 1px dashed #ccc;\n  }\n\n  .barcode-box { text-align: right; margin-top: 20px; }\n\n  \/* Ocultar la plantilla original de la vista de impresi\u00f3n del navegador *\/\n  @media print {\n    body * { visibility: hidden; }\n    #print-iframe { visibility: visible; }\n  }\n<\/style>\n\n<div id=\"panel-control-textil\">\n  <h3>Configuraci\u00f3n de Etiqueta<\/h3>\n  <div class=\"form-grid\">\n    <div class=\"form-group\"><label>Logo (Imagen):<\/label><input type=\"file\" id=\"in-logo\" accept=\"image\/*\"><\/div>\n    <div class=\"form-group\"><label>Foto Producto:<\/label><input type=\"file\" id=\"in-foto\" accept=\"image\/*\"><\/div>\n    <div class=\"form-group\"><label>Hilos:<\/label><input type=\"text\" id=\"in-hilos\" value=\"600 HILOS\"><\/div>\n    <div class=\"form-group\"><label>Producto:<\/label><input type=\"text\" id=\"in-nombre\" value=\"Funda edred\u00f3n\"><\/div>\n    <div class=\"form-group\"><label>Medida:<\/label><input type=\"text\" id=\"in-medida\" value=\"260 x 240 cm\"><\/div>\n    <div class=\"form-group\"><label>Cod. Barras:<\/label><input type=\"text\" id=\"in-codigo\" value=\"9780201379785\"><\/div>\n    <div class=\"form-group\"><label>N\u00famero de Copias:<\/label><input type=\"number\" id=\"in-copias\" value=\"1\" min=\"1\"><\/div>\n  <\/div>\n\n  <div class=\"form-group\" style=\"margin-top:15px;\">\n    <label>Texto Descriptivo (Calidad y Origen):<\/label>\n    <textarea id=\"in-texto1\" rows=\"6\">Este tejido de algod\u00f3n egipcio confeccionado con fibra seleccionada mediante el peinado de las mejores fibras, las m\u00e1s finas y las m\u00e1s largas, que permiten ser hiladas para conseguir un tejido suave, con un brillo natural del propio algod\u00f3n, muy fuerte y duradero.\n\nAlgod\u00f3n egipcio proviene de la especie Gossypium Barbadense. Esta es la misma planta de la que se origina el algod\u00f3n Pima. Sin embargo, el clima de Egipto produce fibras m\u00e1s largas que cualquier otro algod\u00f3n.<\/textarea>\n  <\/div>\n\n  <div class=\"form-group\">\n    <label>Instrucciones de Lavado:<\/label>\n    <textarea id=\"in-cuidados\" rows=\"5\">Lavadora hasta 60\u00b0C (programas cortos)\nNo usar lej\u00eda\nRetirar de la secadora al terminar\nLavar separado de poli\u00e9ster \/ Lavar antes de usar<\/textarea>\n  <\/div>\n\n  <button class=\"btn-imprimir\" onclick=\"imprimirConIframe()\">GENERAR E IMPRIMIR A4 LIMPIO<\/button>\n<\/div>\n\n<div id=\"preview-container\">\n  <div class=\"a4-page\" id=\"master-template\">\n    <div class=\"logo-box\" id=\"out-logo-box\"><span style=\"color:#ccc\">Logo Empresa<\/span><\/div>\n    <div class=\"foto-box\"><img decoding=\"async\" id=\"out-foto\" src=\"https:\/\/images.unsplash.com\/photo-1522771739844-6a9f6d5f14af?w=1000\"><\/div>\n    <div class=\"info-bar\">\n      <span id=\"out-hilos\">600 HILOS<\/span>\n      <span id=\"out-nombre\">Funda edred\u00f3n<\/span>\n      <span id=\"out-medida\">260 x 240 cm<\/span>\n    <\/div>\n    <div class=\"text-content\">\n      <p id=\"out-texto1\" style=\"white-space: pre-line;\">Este tejido de algod\u00f3n egipcio confeccionado con fibra seleccionada mediante el peinado de las mejores fibras&#8230;<\/p>\n    <\/div>\n    <div class=\"footer-care\" id=\"out-cuidados\">Cargando cuidados&#8230;<\/div>\n    <div class=\"barcode-box\"><svg id=\"barcode-master\"><\/svg><\/div>\n  <\/div>\n<\/div>\n\n<script>\n  \/\/ Sincronizaci\u00f3n en tiempo real\n  const fields = ['hilos', 'nombre', 'medida', 'texto1', 'cuidados'];\n  fields.forEach(f => {\n    document.getElementById('in-'+f).addEventListener('input', e => {\n      document.getElementById('out-'+f).innerText = e.target.value;\n    });\n  });\n\n  \/\/ Im\u00e1genes\n  document.getElementById('in-logo').addEventListener('change', function(e) {\n    const r = new FileReader();\n    r.onload = ev => { document.getElementById('out-logo-box').innerHTML = `<img decoding=\"async\" src=\"${ev.target.result}\">`; };\n    if(e.target.files[0]) r.readAsDataURL(e.target.files[0]);\n  });\n  document.getElementById('in-foto').addEventListener('change', function(e) {\n    const r = new FileReader();\n    r.onload = ev => { document.getElementById('out-foto').src = ev.target.result; };\n    if(e.target.files[0]) r.readAsDataURL(e.target.files[0]);\n  });\n\n  function drawBarcode(id, val) {\n    try { JsBarcode(id, val, { format: \"CODE128\", width: 2, height: 50, displayValue: true }); } catch(e){}\n  }\n\n  function imprimirConIframe() {\n    const qty = parseInt(document.getElementById('in-copias').value) || 1;\n    const bValue = document.getElementById('in-codigo').value;\n    const content = document.getElementById('master-template').innerHTML;\n    \n    \/\/ Crear un iframe oculto para la impresi\u00f3n limpia\n    let iframe = document.getElementById('print-iframe');\n    if (!iframe) {\n      iframe = document.createElement('iframe');\n      iframe.id = 'print-iframe';\n      iframe.style.position = 'absolute';\n      iframe.style.top = '-9999px';\n      document.body.appendChild(iframe);\n    }\n\n    const doc = iframe.contentWindow.document;\n    doc.open();\n    doc.write(`\n      <html>\n        <head>\n          <style>\n            @page { size: A4; margin: 0; }\n            body { margin: 0; padding: 0; background: white; }\n            .a4-page { \n              width: 210mm; height: 296mm; padding: 20mm; box-sizing: border-box;\n              display: flex; flex-direction: column; font-family: 'Georgia', serif;\n              page-break-after: always; position: relative;\n            }\n            .logo-box { height: 80px; text-align: center; margin-bottom: 25px; display: flex; justify-content: center; align-items: center; }\n            .logo-box img { max-height: 100%; max-width: 80%; object-fit: contain; }\n            .foto-box { width: 100%; height: 380px; margin-bottom: 25px; }\n            .foto-box img { width: 100%; height: 100%; object-fit: cover; }\n            .info-bar { display: flex; justify-content: space-between; border-top: 2px solid #333; border-bottom: 2px solid #333; padding: 12px 0; margin-bottom: 30px; font-family: Arial; font-weight: bold; text-transform: uppercase; }\n            .text-content p { line-height: 1.6; text-align: justify; font-size: 14.5px; }\n            .footer-care { font-family: Arial; font-size: 12px; white-space: pre-line; margin-top: auto; padding-top: 15px; border-top: 1px dashed #ccc; }\n            .barcode-box { text-align: right; margin-top: 20px; }\n          <\/style>\n        <\/head>\n        <body>\n          <div id=\"pages-container\"><\/div>\n          <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/jsbarcode@3.11.0\/dist\/JsBarcode.all.min.js\"><\\\/script>\n        <\/body>\n      <\/html>\n    `);\n    doc.close();\n\n    const container = doc.getElementById('pages-container');\n    for (let i = 0; i < qty; i++) {\n      const p = doc.createElement('div');\n      p.className = 'a4-page';\n      p.innerHTML = content;\n      container.appendChild(p);\n      \n      \/\/ El SVG del c\u00f3digo de barras necesita un ID \u00fanico en cada p\u00e1gina para JsBarcode\n      const svg = p.querySelector('svg');\n      svg.id = 'bc-' + i;\n      iframe.contentWindow.JsBarcode('#' + svg.id, bValue, { format: \"CODE128\", width: 2, height: 50, displayValue: true });\n    }\n\n    \/\/ Lanzar impresi\u00f3n desde el iframe\n    setTimeout(() => {\n      iframe.contentWindow.focus();\n      iframe.contentWindow.print();\n    }, 500);\n  }\n\n  window.onload = () => {\n    document.getElementById('out-cuidados').innerText = document.getElementById('in-cuidados').value;\n    drawBarcode(\"#barcode-master\", \"9780201379785\");\n  };\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Configuraci\u00f3n de Etiqueta Logo (Imagen): Foto Producto: Hilos: Producto: Medida: Cod. Barras: N\u00famero de Copias: Texto Descriptivo (Calidad y Origen): Este tejido de algod\u00f3n egipcio confeccionado con fibra seleccionada mediante el peinado de las mejores fibras, las m\u00e1s finas y las m\u00e1s largas, que permiten ser hiladas para conseguir un tejido suave, con un brillo [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-249","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.sosaweb.es\/index.php\/wp-json\/wp\/v2\/pages\/249","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.sosaweb.es\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.sosaweb.es\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.sosaweb.es\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sosaweb.es\/index.php\/wp-json\/wp\/v2\/comments?post=249"}],"version-history":[{"count":6,"href":"https:\/\/www.sosaweb.es\/index.php\/wp-json\/wp\/v2\/pages\/249\/revisions"}],"predecessor-version":[{"id":255,"href":"https:\/\/www.sosaweb.es\/index.php\/wp-json\/wp\/v2\/pages\/249\/revisions\/255"}],"wp:attachment":[{"href":"https:\/\/www.sosaweb.es\/index.php\/wp-json\/wp\/v2\/media?parent=249"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}