{"id":703,"date":"2026-10-27T07:18:02","date_gmt":"2026-10-27T07:18:02","guid":{"rendered":"https:\/\/sallanmetals.com\/?page_id=703"},"modified":"2026-10-30T08:22:02","modified_gmt":"2026-10-30T08:22:02","slug":"brochure","status":"publish","type":"page","link":"https:\/\/sallanmetals.com\/ar\/brochure\/","title":{"rendered":"\u0643\u062a\u064a\u0628"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"703\" class=\"elementor elementor-703\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1dc3f45 e-con e-atomic-element e-flexbox-base e-default-div e-1dc3f45-a32a186 \" data-id=\"1dc3f45\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"1dc3f45\">\n    \t\t<div class=\"elementor-element elementor-element-9978799 elementor-widget__width-initial elementor-widget elementor-widget-html\" data-id=\"9978799\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\r\n<div id=\"sallan-brochure\" class=\"sallan-brochure\">\r\n  <style>\r\n    #sallan-brochure {\r\n      --navy: #193965;\r\n      --blue: #2196C8;\r\n      --gold: #FFC947;\r\n      font-family: Poppins, Arial, sans-serif;\r\n      color: var(--navy);\r\n      width: 100%;\r\n      margin: 0 auto;\r\n      padding: 24px 16px 35px;\r\n      box-sizing: border-box;\r\n      background: #f5f7fa;\r\n      border-radius: 12px;\r\n    }\r\n\r\n    #sallan-brochure * { box-sizing: border-box; }\r\n\r\n    #sallan-brochure .sb-heading {\r\n      text-align: center;\r\n      margin: 0 auto 24px;\r\n    }\r\n\r\n    #sallan-brochure .sb-heading h1 {\r\n      color: var(--navy);\r\n      font-size: clamp(25px, 3vw, 40px);\r\n      line-height: 1.2;\r\n      font-weight: 700;\r\n      margin: 0 0 12px;\r\n    }\r\n\r\n    #sallan-brochure .sb-heading p {\r\n      color: #586578;\r\n      font-size: 16px;\r\n      line-height: 1.6;\r\n      margin: 0 auto 20px;\r\n    }\r\n\r\n    #sallan-brochure .sb-open {\r\n      display: inline-flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      gap: 10px;\r\n      background: var(--navy);\r\n      color: #fff;\r\n      border: 0;\r\n      border-bottom: 3px solid var(--gold);\r\n      border-radius: 7px;\r\n      padding: 14px 24px;\r\n      text-decoration: none;\r\n      font-size: 15px;\r\n      font-weight: 600;\r\n      transition: background .2s ease;\r\n    }\r\n\r\n    #sallan-brochure .sb-open:hover {\r\n      background: var(--blue);\r\n      color: #fff;\r\n    }\r\n\r\n    #sallan-brochure .sb-viewer {\r\n      display: grid;\r\n      grid-template-columns: 48px minmax(0, 1fr) 48px;\r\n      gap: 12px;\r\n      align-items: center;\r\n      max-width: 1250px;\r\n      margin: 0 auto;\r\n    }\r\n\r\n    #sallan-brochure .sb-arrow {\r\n      width: 46px;\r\n      height: 46px;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      border: 1px solid #e2e7ed;\r\n      border-radius: 50%;\r\n      background: #fff;\r\n      color: var(--navy);\r\n      font-size: 28px;\r\n      cursor: pointer;\r\n      box-shadow: 0 4px 14px #19396512;\r\n      transition: all .2s ease;\r\n    }\r\n\r\n    #sallan-brochure .sb-arrow:hover:not(:disabled) {\r\n      color: #fff;\r\n      background: var(--blue);\r\n    }\r\n\r\n    #sallan-brochure .sb-arrow:disabled {\r\n      opacity: .35;\r\n      cursor: not-allowed;\r\n    }\r\n\r\n    #sallan-brochure .sb-book {\r\n      min-width: 0;\r\n      position: relative;\r\n      background: #e9edf2;\r\n      border-radius: 5px;\r\n      overflow: hidden;\r\n      box-shadow: 0 12px 32px #17283d20;\r\n    }\r\n\r\n    #sallan-brochure .sb-pages {\r\n      display: grid;\r\n      grid-template-columns: repeat(2, minmax(0, 1fr));\r\n      gap: 0;\r\n      align-items: start;\r\n      min-height: 300px;\r\n    }\r\n\r\n    #sallan-brochure .sb-page {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      min-width: 0;\r\n      background: #fff;\r\n      aspect-ratio: 1 \/ 1.414;\r\n      overflow: hidden;\r\n      position: relative;\r\n    }\r\n\r\n    #sallan-brochure .sb-page + .sb-page {\r\n      border-left: 1px solid #d5dbe3;\r\n    }\r\n\r\n    #sallan-brochure .sb-page canvas {\r\n      display: block;\r\n      width: 100%;\r\n      height: auto;\r\n      max-width: 100%;\r\n    }\r\n\r\n    #sallan-brochure .sb-page.sb-empty {\r\n      background: #f0f3f7;\r\n    }\r\n\r\n    #sallan-brochure .sb-page.sb-empty:after {\r\n      content: \"SALLAN METALS\";\r\n      color: #19396530;\r\n      font-size: 14px;\r\n      font-weight: 700;\r\n      letter-spacing: 2px;\r\n    }\r\n\r\n    #sallan-brochure .sb-status {\r\n      text-align: center;\r\n      font-size: 13px;\r\n      color: #657187;\r\n      min-height: 20px;\r\n      margin: 12px 0 0;\r\n    }\r\n\r\n    #sallan-brochure .sb-controls {\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      flex-wrap: wrap;\r\n      gap: 12px;\r\n      margin: 18px 0;\r\n    }\r\n\r\n    #sallan-brochure .sb-control {\r\n      background: #fff;\r\n      border: 1px solid #dce3ec;\r\n      color: var(--navy);\r\n      border-radius: 6px;\r\n      min-height: 40px;\r\n      padding: 8px 14px;\r\n      font: inherit;\r\n      font-size: 13px;\r\n      cursor: pointer;\r\n    }\r\n\r\n    #sallan-brochure .sb-control:hover:not(:disabled) {\r\n      border-color: var(--blue);\r\n    }\r\n\r\n    #sallan-brochure .sb-control:disabled {\r\n      opacity: .4;\r\n      cursor: not-allowed;\r\n    }\r\n\r\n    #sallan-brochure .sb-counter {\r\n      min-width: 86px;\r\n      text-align: center;\r\n      padding: 9px 15px;\r\n      border-radius: 30px;\r\n      background: #fff;\r\n      color: var(--navy);\r\n      border: 1px solid #e2e7ed;\r\n      font-size: 14px;\r\n      font-weight: 600;\r\n    }\r\n\r\n    #sallan-brochure .sb-thumbs-wrap {\r\n      max-width: 1100px;\r\n      margin: 0 auto;\r\n      position: relative;\r\n    }\r\n\r\n    #sallan-brochure .sb-thumbs {\r\n      display: flex;\r\n      align-items: flex-start;\r\n      gap: 12px;\r\n      overflow-x: auto;\r\n      padding: 10px 4px 15px;\r\n      scroll-behavior: smooth;\r\n      scrollbar-width: thin;\r\n    }\r\n\r\n    #sallan-brochure .sb-thumb {\r\n      flex: 0 0 88px;\r\n      border: 2px solid transparent;\r\n      padding: 3px;\r\n      background: #fff;\r\n      border-radius: 5px;\r\n      cursor: pointer;\r\n      box-shadow: 0 2px 8px #19396512;\r\n    }\r\n\r\n    #sallan-brochure .sb-thumb.active {\r\n      border-color: var(--blue);\r\n      box-shadow: 0 0 0 2px #2196c830;\r\n    }\r\n\r\n    #sallan-brochure .sb-thumb canvas {\r\n      width: 100%;\r\n      height: auto;\r\n      display: block;\r\n      background: #fff;\r\n    }\r\n\r\n    #sallan-brochure .sb-thumb-number {\r\n      display: block;\r\n      color: #56667a;\r\n      font-size: 11px;\r\n      padding-top: 5px;\r\n      text-align: center;\r\n    }\r\n\r\n    #sallan-brochure .sb-error {\r\n      max-width: 720px;\r\n      margin: 20px auto;\r\n      background: #fff;\r\n      border: 1px solid #e6c8c8;\r\n      border-radius: 8px;\r\n      padding: 20px;\r\n      color: #713b3b;\r\n      text-align: center;\r\n      line-height: 1.6;\r\n    }\r\n\r\n    #sallan-brochure .sb-error a {\r\n      color: var(--navy);\r\n      font-weight: 600;\r\n    }\r\n\r\n    #sallan-brochure .sb-loading {\r\n      text-align: center;\r\n      padding: 55px 15px;\r\n      color: #5a6b80;\r\n      font-size: 14px;\r\n    }\r\n\r\n    @media (max-width: 650px) {\r\n      #sallan-brochure { padding: 22px 8px; }\r\n      #sallan-brochure .sb-heading p { font-size: 14px; }\r\n      #sallan-brochure .sb-viewer {\r\n        grid-template-columns: 32px minmax(0, 1fr) 32px;\r\n        gap: 5px;\r\n      }\r\n      #sallan-brochure .sb-arrow {\r\n        width: 32px;\r\n        height: 38px;\r\n        border-radius: 7px;\r\n        font-size: 23px;\r\n      }\r\n      #sallan-brochure .sb-pages { grid-template-columns: minmax(0, 1fr); }\r\n      #sallan-brochure .sb-page + .sb-page { display: none; }\r\n      #sallan-brochure .sb-page { aspect-ratio: 1 \/ 1.414; }\r\n      #sallan-brochure .sb-thumb { flex-basis: 67px; }\r\n      #sallan-brochure .sb-controls { gap: 7px; }\r\n      #sallan-brochure .sb-control { padding: 8px 10px; }\r\n      #sallan-brochure .sb-counter { min-width: 72px; padding: 9px; }\r\n    }\r\n  <\/style>\r\n\r\n  <div class=\"sb-heading\">\r\n    <h1>Sallan Metals Company Brochure<\/h1>\r\n    <p>Explore our road safety products and guardrail solutions.<\/p>\r\n    <a class=\"sb-open\"\r\n       href=\"https:\/\/sallanmetals.com\/wp-content\/uploads\/2026\/10\/Sallan-Metals-brochure.pdf\"\r\n       target=\"_blank\" rel=\"noopener noreferrer\">\r\n      <span aria-hidden=\"true\">\u2197<\/span>\r\n      View\/Download\r\n    <\/a>\r\n  <\/div>\r\n\r\n  <div class=\"sb-viewer\">\r\n    <button type=\"button\" class=\"sb-arrow sb-prev\" aria-label=\"Previous page\">\u2039<\/button>\r\n\r\n    <div class=\"sb-book\">\r\n      <div class=\"sb-pages\">\r\n        <div class=\"sb-page sb-left\"><div class=\"sb-loading\">Loading brochure\u2026<\/div><\/div>\r\n        <div class=\"sb-page sb-right\"><div class=\"sb-loading\">Preparing preview\u2026<\/div><\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <button type=\"button\" class=\"sb-arrow sb-next\" aria-label=\"Next page\">\u203a<\/button>\r\n  <\/div>\r\n\r\n  <div class=\"sb-status\" aria-live=\"polite\">Preparing brochure preview\u2026<\/div>\r\n\r\n  <div class=\"sb-controls\">\r\n   \r\n    <button type=\"button\" class=\"sb-control sb-prev-bottom\">\u2190 Previous<\/button>\r\n   \r\n    <button type=\"button\" class=\"sb-control sb-next-bottom\">Next \u2192<\/button>\r\n\r\n  <\/div>\r\n\r\n  <div class=\"sb-thumbs-wrap\">\r\n    <div class=\"sb-thumbs\" aria-label=\"Brochure page thumbnails\"><\/div>\r\n  <\/div>\r\n\r\n  <div class=\"sb-error\" hidden><\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function () {\r\n  const root = document.getElementById('sallan-brochure');\r\n  if (!root || root.dataset.initialized === 'yes') return;\r\n  root.dataset.initialized = 'yes';\r\n\r\n  const PDF_URL =\r\n    'https:\/\/sallanmetals.com\/wp-content\/uploads\/2026\/10\/Sallan-Metals-brochure.pdf';\r\n\r\n  const left = root.querySelector('.sb-left');\r\n  const right = root.querySelector('.sb-right');\r\n  const thumbs = root.querySelector('.sb-thumbs');\r\n  const counter = root.querySelector('.sb-counter');\r\n  const status = root.querySelector('.sb-status');\r\n  const errorBox = root.querySelector('.sb-error');\r\n\r\n  const prevButtons = [\r\n    root.querySelector('.sb-prev'),\r\n    root.querySelector('.sb-prev-bottom')\r\n  ];\r\n  const nextButtons = [\r\n    root.querySelector('.sb-next'),\r\n    root.querySelector('.sb-next-bottom')\r\n  ];\r\n\r\n  let pdf = null;\r\n  let currentPage = 1;\r\n  let rendering = false;\r\n  let queuedPage = null;\r\n  let mobile = window.matchMedia('(max-width: 650px)');\r\n  const thumbCanvases = new Map();\r\n\r\n  function showError(message) {\r\n    errorBox.hidden = false;\r\n    errorBox.innerHTML =\r\n      '<strong>Preview could not be loaded.<\/strong><br>' +\r\n      message + '<br><br><a href=\"' + PDF_URL +\r\n      '\" target=\"_blank\" rel=\"noopener noreferrer\">Open the original PDF<\/a>';\r\n    status.textContent = 'Preview unavailable.';\r\n    left.innerHTML = '<div class=\"sb-loading\">Preview unavailable<\/div>';\r\n    right.innerHTML = '<div class=\"sb-loading\">Use the PDF link above<\/div>';\r\n  }\r\n\r\n  function updateControls() {\r\n    const total = pdf ? pdf.numPages : 12;\r\n    counter.textContent = currentPage + ' \/ ' + total;\r\n    prevButtons.forEach(b => b.disabled = currentPage <= 1);\r\n    nextButtons.forEach(b => b.disabled = currentPage >= total);\r\n    root.querySelector('.sb-first').disabled = currentPage <= 1;\r\n    root.querySelector('.sb-last').disabled = currentPage >= total;\r\n\r\n    root.querySelectorAll('.sb-thumb').forEach(btn => {\r\n      btn.classList.toggle('active', Number(btn.dataset.page) === currentPage);\r\n      if (Number(btn.dataset.page) === currentPage) {\r\n        btn.setAttribute('aria-current', 'page');\r\n      } else {\r\n        btn.removeAttribute('aria-current');\r\n      }\r\n    });\r\n  }\r\n\r\n  function renderInto(pageNumber, container, maxWidth) {\r\n    return pdf.getPage(pageNumber).then(page => {\r\n      const base = page.getViewport({ scale: 1 });\r\n      const scale = Math.min(maxWidth \/ base.width, 2);\r\n      const viewport = page.getViewport({ scale: scale });\r\n      const canvas = document.createElement('canvas');\r\n      const context = canvas.getContext('2d', { alpha: false });\r\n\r\n      canvas.width = Math.floor(viewport.width);\r\n      canvas.height = Math.floor(viewport.height);\r\n      canvas.style.width = '100%';\r\n      canvas.style.height = 'auto';\r\n\r\n      container.replaceChildren(canvas);\r\n\r\n      return page.render({\r\n        canvasContext: context,\r\n        viewport: viewport\r\n      }).promise;\r\n    });\r\n  }\r\n\r\n  function makeThumb(pageNumber) {\r\n    const button = document.createElement('button');\r\n    button.type = 'button';\r\n    button.className = 'sb-thumb';\r\n    button.dataset.page = pageNumber;\r\n    button.setAttribute('aria-label', 'Go to page ' + pageNumber);\r\n\r\n    const canvas = document.createElement('canvas');\r\n    canvas.width = 90;\r\n    canvas.height = 127;\r\n\r\n    const number = document.createElement('span');\r\n    number.className = 'sb-thumb-number';\r\n    number.textContent = String(pageNumber).padStart(2, '0');\r\n\r\n    button.append(canvas, number);\r\n    thumbs.appendChild(button);\r\n    thumbCanvases.set(pageNumber, canvas);\r\n\r\n    button.addEventListener('click', function () {\r\n      goTo(pageNumber);\r\n    });\r\n\r\n    \/\/ Render thumbnails at low resolution, one at a time.\r\n    return pdf.getPage(pageNumber).then(page => {\r\n      const base = page.getViewport({ scale: 1 });\r\n      const scale = 100 \/ base.width;\r\n      const viewport = page.getViewport({ scale });\r\n      canvas.width = Math.ceil(viewport.width);\r\n      canvas.height = Math.ceil(viewport.height);\r\n      return page.render({\r\n        canvasContext: canvas.getContext('2d', { alpha: false }),\r\n        viewport\r\n      }).promise;\r\n    }).catch(() => {});\r\n  }\r\n\r\n  function renderCurrent() {\r\n    if (rendering) {\r\n      queuedPage = currentPage;\r\n      return;\r\n    }\r\n\r\n    rendering = true;\r\n    errorBox.hidden = true;\r\n    status.textContent = 'Loading page ' + currentPage + '\u2026';\r\n    updateControls();\r\n\r\n    const showTwo = !mobile.matches;\r\n    const secondPage = currentPage + 1;\r\n    const width = Math.max(250, root.querySelector('.sb-book').clientWidth \/\r\n      (showTwo ? 2 : 1));\r\n\r\n    const jobs = [renderInto(currentPage, left, width)];\r\n\r\n    if (showTwo && secondPage <= pdf.numPages) {\r\n      right.style.display = '';\r\n      jobs.push(renderInto(secondPage, right, width));\r\n    } else {\r\n      right.innerHTML = '';\r\n      right.style.display = showTwo ? '' : 'none';\r\n      if (showTwo) right.classList.add('sb-empty');\r\n    }\r\n\r\n    Promise.all(jobs).then(() => {\r\n      right.classList.remove('sb-empty');\r\n      status.textContent = 'Page ' + currentPage +\r\n        (showTwo && secondPage <= pdf.numPages\r\n          ? '\u2013' + secondPage\r\n          : '') + ' of ' + pdf.numPages;\r\n      updateControls();\r\n\r\n      const active = root.querySelector('.sb-thumb.active');\r\n      if (active) {\r\n        active.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });\r\n      }\r\n    }).catch(() => {\r\n      status.textContent = 'Could not render this page.';\r\n    }).finally(() => {\r\n      rendering = false;\r\n      if (queuedPage !== null) {\r\n        const next = queuedPage;\r\n        queuedPage = null;\r\n        if (next !== currentPage) currentPage = next;\r\n        renderCurrent();\r\n      }\r\n    });\r\n  }\r\n\r\n  function goTo(pageNumber) {\r\n    if (!pdf) return;\r\n    currentPage = Math.max(1, Math.min(pdf.numPages, pageNumber));\r\n    renderCurrent();\r\n  }\r\n\r\n  prevButtons.forEach(b => b.addEventListener('click', () => goTo(currentPage - (mobile.matches ? 1 : 2))));\r\n  nextButtons.forEach(b => b.addEventListener('click', () => goTo(currentPage + (mobile.matches ? 1 : 2))));\r\n  root.querySelector('.sb-first').addEventListener('click', () => goTo(1));\r\n  root.querySelector('.sb-last').addEventListener('click', () => goTo(pdf ? pdf.numPages : 12));\r\n  root.querySelector('.sb-prev-bottom').addEventListener('click', () => goTo(currentPage - 1));\r\n  root.querySelector('.sb-next-bottom').addEventListener('click', () => goTo(currentPage + 1));\r\n\r\n  mobile.addEventListener('change', () => {\r\n    if (pdf) renderCurrent();\r\n  });\r\n\r\n  function loadPdfJs() {\r\n    if (window.pdfjsLib) return Promise.resolve(window.pdfjsLib);\r\n\r\n    return new Promise((resolve, reject) => {\r\n      const script = document.createElement('script');\r\n      script.src = 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/pdf.js\/3.11.174\/pdf.min.js';\r\n      script.onload = () => {\r\n        if (window.pdfjsLib) resolve(window.pdfjsLib);\r\n        else reject(new Error('PDF.js did not initialise.'));\r\n      };\r\n      script.onerror = () => reject(new Error('PDF viewer library failed to load.'));\r\n      document.head.appendChild(script);\r\n    });\r\n  }\r\n\r\n  loadPdfJs().then(lib => {\r\n    lib.GlobalWorkerOptions.workerSrc =\r\n      'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/pdf.js\/3.11.174\/pdf.worker.min.js';\r\n\r\n    return lib.getDocument({\r\n      url: PDF_URL,\r\n      withCredentials: false\r\n    }).promise;\r\n  }).then(documentPdf => {\r\n    pdf = documentPdf;\r\n    currentPage = 1;\r\n    thumbs.innerHTML = '';\r\n\r\n    \/\/ Build all thumbnail buttons immediately; render them progressively.\r\n    const thumbnailJobs = [];\r\n    for (let i = 1; i <= pdf.numPages; i++) {\r\n      thumbnailJobs.push(makeThumb(i));\r\n    }\r\n\r\n    renderCurrent();\r\n    Promise.all(thumbnailJobs).catch(() => {});\r\n  }).catch(err => {\r\n    console.error('Sallan brochure preview:', err);\r\n    showError('The PDF preview could not connect to the document. Check that the PDF URL is public and the server permits cross-origin requests.');\r\n  });\r\n})();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Sallan Metals Company Brochure Explore our road safety products and guardrail solutions. \u2197 View\/Download \u2039 Loading brochure\u2026 Preparing preview\u2026 \u203a Preparing brochure preview\u2026 \u2190 Previous Next \u2192<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"postBodyCss":"","postBodyMargin":[],"postBodyPadding":[],"postBodyBackground":{"backgroundType":"classic","gradient":""},"footnotes":""},"class_list":["post-703","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/sallanmetals.com\/ar\/wp-json\/wp\/v2\/pages\/703","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sallanmetals.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sallanmetals.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sallanmetals.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sallanmetals.com\/ar\/wp-json\/wp\/v2\/comments?post=703"}],"version-history":[{"count":71,"href":"https:\/\/sallanmetals.com\/ar\/wp-json\/wp\/v2\/pages\/703\/revisions"}],"predecessor-version":[{"id":928,"href":"https:\/\/sallanmetals.com\/ar\/wp-json\/wp\/v2\/pages\/703\/revisions\/928"}],"wp:attachment":[{"href":"https:\/\/sallanmetals.com\/ar\/wp-json\/wp\/v2\/media?parent=703"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}