{"id":127,"date":"2026-02-27T16:35:37","date_gmt":"2026-02-27T16:35:37","guid":{"rendered":"https:\/\/new.sharifpetro.com\/?page_id=127"},"modified":"2026-02-27T17:12:51","modified_gmt":"2026-02-27T17:12:51","slug":"catalog","status":"publish","type":"page","link":"https:\/\/new.sharifpetro.com\/index.php\/catalog\/","title":{"rendered":"Catalog"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"127\" class=\"elementor elementor-127\">\n\t\t\t\t<div class=\"elementor-element elementor-element-eb7e2d0 e-flex e-con-boxed e-con e-parent\" data-id=\"eb7e2d0\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-aa6e193 elementor-widget elementor-widget-html\" data-id=\"aa6e193\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- \u0641\u0642\u0637 \u0627\u06cc\u0646 \u06a9\u062f \u0631\u0648 \u062f\u0627\u062e\u0644 \u0648\u06cc\u062c\u062a HTML \u0627\u0644\u0645\u0646\u062a\u0648\u0631 \u0628\u0630\u0627\u0631 -->\n\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;500;600;700&display=swap');\n\n.cat-wrap * { box-sizing: border-box; margin: 0; padding: 0; }\n\n.cat-wrap {\n  font-family: 'Montserrat', sans-serif;\n  background: #f0f4f8;\n  border-radius: 16px;\n  padding: 40px 36px 44px;\n}\n\n\/* Header *\/\n.cat-header {\n  text-align: center;\n  margin-bottom: 36px;\n}\n\n.cat-header h2 {\n  font-size: 1.9rem;\n  font-weight: 700;\n  color: #1a2a3a;\n  letter-spacing: -0.5px;\n  margin-bottom: 8px;\n}\n\n.cat-header p {\n  font-size: 0.9rem;\n  color: #7a8a9a;\n  font-weight: 500;\n}\n\n\/* Main viewer *\/\n.cat-viewer {\n  display: flex;\n  gap: 28px;\n  align-items: flex-start;\n}\n\n\/* Big preview \u2014 fixed size, no jumping *\/\n.cat-main-preview {\n  flex: 1;\n  position: relative;\n  border-radius: 10px;\n  overflow: hidden;\n  box-shadow: 0 8px 40px rgba(0,0,0,0.18);\n  background: #fff;\n  height: 620px;        \/* \u0627\u0631\u062a\u0641\u0627\u0639 \u062b\u0627\u0628\u062a \u2014 \u0627\u06cc\u0646\u062c\u0627 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646 *\/\n  min-height: 620px;\n  max-height: 620px;\n}\n\n.cat-main-preview img {\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n  object-position: center center;\n  display: block;\n  background: #fff;\n  transition: filter 0.3s, transform 0.3s;\n}\n\n\/* Page number badge *\/\n.cat-page-badge {\n  position: absolute;\n  bottom: 14px;\n  left: 50%;\n  transform: translateX(-50%);\n  background: rgba(0,0,0,0.55);\n  color: #fff;\n  font-size: 0.75rem;\n  font-weight: 600;\n  padding: 5px 14px;\n  border-radius: 20px;\n  backdrop-filter: blur(4px);\n  letter-spacing: 0.5px;\n  white-space: nowrap;\n}\n\n\/* Thumbnails column *\/\n.cat-thumbs {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  width: 120px;\n  flex-shrink: 0;\n}\n\n.cat-thumb {\n  position: relative;\n  border-radius: 8px;\n  overflow: visible;\n  cursor: pointer;\n  border: 2.5px solid transparent;\n  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;\n  background: #fff;\n  width: 120px;\n  box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n}\n\n.cat-thumb img {\n  width: 100%;\n  height: auto;\n  display: block;\n  background: #fff;\n  border-radius: 6px;\n}\n\n.cat-thumb:hover {\n  transform: translateX(-3px);\n  box-shadow: 0 4px 16px rgba(33,150,243,0.2);\n}\n\n.cat-thumb.cat-active {\n  border-color: #2196F3;\n  box-shadow: 0 4px 16px rgba(33,150,243,0.35);\n}\n\n\/* Lock overlay for locked thumbs *\/\n.cat-thumb-lock {\n  position: absolute;\n  inset: 0;\n  background: rgba(26,42,58,0.6);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  backdrop-filter: blur(2px);\n}\n\n.cat-lock-icon {\n  font-size: 1.3rem;\n  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));\n}\n\n.cat-lock-txt {\n  color: rgba(255,255,255,0.85);\n  font-size: 0.6rem;\n  font-weight: 600;\n  letter-spacing: 0.5px;\n}\n\n\/* Blurred preview overlay on main *\/\n.cat-locked-overlay {\n  display: none;\n  position: absolute;\n  inset: 0;\n  background: rgba(26,42,58,0.55);\n  backdrop-filter: blur(8px);\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 16px;\n  text-align: center;\n  padding: 24px;\n}\n\n.cat-locked-overlay.show { display: flex; }\n\n.cat-locked-overlay .lock-big { font-size: 3rem; }\n\n.cat-locked-overlay h3 {\n  color: #fff;\n  font-size: 1.1rem;\n  font-weight: 700;\n  line-height: 1.4;\n}\n\n.cat-locked-overlay p {\n  color: rgba(255,255,255,0.75);\n  font-size: 0.82rem;\n  line-height: 1.6;\n}\n\n\/* Download button *\/\n.cat-dl-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 9px;\n  background: linear-gradient(135deg, #1565C0, #2196F3);\n  color: #fff;\n  font-family: 'Montserrat', sans-serif;\n  font-size: 0.9rem;\n  font-weight: 700;\n  padding: 13px 28px;\n  border-radius: 8px;\n  text-decoration: none;\n  letter-spacing: 0.3px;\n  box-shadow: 0 4px 16px rgba(33,150,243,0.4);\n  transition: transform 0.2s, box-shadow 0.2s;\n  border: none;\n  cursor: pointer;\n}\n\n.cat-dl-btn:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 8px 24px rgba(33,150,243,0.5);\n  color: #fff;\n  text-decoration: none;\n}\n\n.cat-dl-btn svg { flex-shrink: 0; }\n\n\/* Bottom info bar *\/\n.cat-info-bar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-top: 28px;\n  padding: 18px 24px;\n  background: #fff;\n  border-radius: 10px;\n  box-shadow: 0 2px 12px rgba(0,0,0,0.06);\n  flex-wrap: wrap;\n  gap: 14px;\n}\n\n.cat-info-stats {\n  display: flex;\n  gap: 28px;\n}\n\n.cat-stat {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.cat-stat-val {\n  font-size: 1.1rem;\n  font-weight: 700;\n  color: #1a2a3a;\n}\n\n.cat-stat-lbl {\n  font-size: 0.72rem;\n  color: #9aa8b8;\n  font-weight: 500;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n\/* Arrows *\/\n.cat-arrows {\n  display: flex;\n  gap: 8px;\n}\n\n.cat-arr {\n  width: 38px;\n  height: 38px;\n  border-radius: 50%;\n  border: 2px solid #dde4ec;\n  background: #fff;\n  cursor: pointer;\n  font-size: 1rem;\n  color: #1a2a3a;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.2s;\n}\n\n.cat-arr:hover {\n  border-color: #2196F3;\n  color: #2196F3;\n  background: #e3f2fd;\n}\n\n\/* Responsive *\/\n@media (max-width: 650px) {\n  .cat-wrap { padding: 24px 16px 28px; }\n  .cat-viewer { flex-direction: column-reverse; gap: 16px; }\n  .cat-thumbs { flex-direction: row; width: 100%; overflow-x: auto; padding-bottom: 4px; }\n  .cat-thumb { width: 65px; flex-shrink: 0; }\n  .cat-main-preview { max-height: 500px; }\n  .cat-info-bar { flex-direction: column; align-items: flex-start; }\n}\n<\/style>\n\n<div class=\"cat-wrap\" id=\"catWrap\">\n\n  <!-- Header -->\n  <div class=\"cat-header\">\n    <h2>\ud83d\udcc4 Sharif Petro Energy \u2014 Catalog<\/h2>\n    <p>Preview 5 pages \u00b7 Download the full catalog for free<\/p>\n  <\/div>\n\n  <div class=\"cat-viewer\">\n\n    <!-- Main preview -->\n    <div class=\"cat-main-preview\" id=\"catMainPreview\">\n      <img decoding=\"async\" id=\"catMainImg\" src=\"\" alt=\"Catalog Page\" style=\"transition:filter 0.3s,transform 0.3s;width:100%;height:100%;object-fit:cover;display:block;\">\n      <div class=\"cat-page-badge\" id=\"catPageBadge\">Page 1 of 5<\/div>\n      <!-- Locked overlay -->\n      <div class=\"cat-locked-overlay\" id=\"catLockedOverlay\">\n        <div class=\"lock-big\">\ud83d\udd12<\/div>\n        <h3>This page is locked<\/h3>\n        <p>Download the full catalog to access all pages<\/p>\n        <a href=\"YOUR_CATALOG_PDF_LINK.pdf\" download class=\"cat-dl-btn\">\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\/><polyline points=\"7 10 12 15 17 10\"\/><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"\/><\/svg>\n          Download Full Catalog\n        <\/a>\n      <\/div>\n    <\/div>\n\n    <!-- Thumbnails -->\n    <div class=\"cat-thumbs\" id=\"catThumbs\">\n\n     <!-- \u0635\u0641\u062d\u0647 \u06f1 \u2014 \u0622\u0632\u0627\u062f -->\n      <div class=\"cat-thumb cat-active\" data-index=\"0\" data-locked=\"false\">\n        <img decoding=\"async\" src=\"https:\/\/new.sharifpetro.com\/wp-content\/uploads\/2026\/02\/photo_2_2026-02-27_20-26-08.webp\" alt=\"Page 1\"\n          onerror=\"this.parentElement.style.background='#e3f2fd'\">\n      <\/div>\n\n      <!-- \u0635\u0641\u062d\u0647 \u06f2 \u2014 \u0622\u0632\u0627\u062f -->\n      <div class=\"cat-thumb\" data-index=\"1\" data-locked=\"false\">\n        <img decoding=\"async\" src=\"https:\/\/new.sharifpetro.com\/wp-content\/uploads\/2026\/02\/photo_1_2026-02-27_20-26-08.webp\" alt=\"Page 2\"\n          onerror=\"this.parentElement.style.background='#e8f5e9'\">\n      <\/div>\n\n      <!-- \u0635\u0641\u062d\u0647 \u06f3 \u2014 \u0622\u0632\u0627\u062f -->\n      <div class=\"cat-thumb\" data-index=\"2\" data-locked=\"false\">\n        <img decoding=\"async\" src=\"https:\/\/new.sharifpetro.com\/wp-content\/uploads\/2026\/02\/photo_4_2026-02-27_20-26-08.webp\" alt=\"Page 3\"\n          onerror=\"this.parentElement.style.background='#fff3e0'\">\n      <\/div>\n\n      <!-- \u0635\u0641\u062d\u0647 \u06f4 \u2014 \u0622\u0632\u0627\u062f -->\n      <div class=\"cat-thumb\" data-index=\"3\" data-locked=\"false\">\n        <img decoding=\"async\" src=\"https:\/\/new.sharifpetro.com\/wp-content\/uploads\/2026\/02\/photo_3_2026-02-27_20-26-08.webp\" alt=\"Page 4\"\n          onerror=\"this.parentElement.style.background='#fce4ec'\">\n      <\/div>\n\n    <\/div>\n  <\/div>\n\n  <!-- Info bar -->\n  <div class=\"cat-info-bar\">\n    <div class=\"cat-info-stats\">\n      <div class=\"cat-stat\">\n        <span class=\"cat-stat-val\">22<\/span>\n        <span class=\"cat-stat-lbl\">Total Pages<\/span>\n      <\/div>\n      <div class=\"cat-stat\">\n        <span class=\"cat-stat-val\">7.7 MB<\/span>\n        <span class=\"cat-stat-lbl\">File Size<\/span>\n      <\/div>\n      <div class=\"cat-stat\">\n        <span class=\"cat-stat-val\">PDF<\/span>\n        <span class=\"cat-stat-lbl\">Format<\/span>\n      <\/div>\n    <\/div>\n\n    <div style=\"display:flex;align-items:center;gap:16px;flex-wrap:wrap;\">\n      <div class=\"cat-arrows\">\n        <button class=\"cat-arr\" id=\"catArrPrev\">&#8249;<\/button>\n        <button class=\"cat-arr\" id=\"catArrNext\">&#8250;<\/button>\n      <\/div>\n      <a href=\"YOUR_CATALOG_PDF_LINK.pdf\" download class=\"cat-dl-btn\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\/><polyline points=\"7 10 12 15 17 10\"\/><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"\/><\/svg>\n        Download Full Catalog\n      <\/a>\n    <\/div>\n  <\/div>\n\n<\/div>\n\n<script>\n(function tryInit() {\n  var wrap = document.getElementById('catWrap');\n  if (!wrap) { setTimeout(tryInit, 100); return; }\n\n  var thumbs  = wrap.querySelectorAll('.cat-thumb');\n  var mainImg = document.getElementById('catMainImg');\n  var badge   = document.getElementById('catPageBadge');\n  var overlay = document.getElementById('catLockedOverlay');\n  var btnPrev = document.getElementById('catArrPrev');\n  var btnNext = document.getElementById('catArrNext');\n  var total   = thumbs.length;\n  var current = 0;\n\n  function goTo(n) {\n    current = (n + total) % total;\n    var thumb   = thumbs[current];\n    var thumbImg = thumb.querySelector('img');\n    var isLocked = thumb.getAttribute('data-locked') === 'true';\n\n    \/\/ \u0645\u0633\u062a\u0642\u06cc\u0645 src \u0631\u0648 \u0627\u0632 thumbnail \u0645\u06cc\u200c\u062e\u0648\u0646\u0647 \u2014 \u0646\u06cc\u0627\u0632\u06cc \u0628\u0647 \u0622\u0631\u0627\u06cc\u0647 \u062c\u062f\u0627 \u0646\u06cc\u0633\u062a\n    mainImg.src = thumbImg.src;\n    mainImg.style.filter = isLocked ? 'blur(12px)' : 'none';\n    mainImg.style.transform = isLocked ? 'scale(1.08)' : 'scale(1)';\n\n    overlay.classList.toggle('show', isLocked);\n    badge.textContent = 'Page ' + (current + 1) + ' of ' + total;\n\n    thumbs.forEach(function(t, i) {\n      t.classList.toggle('cat-active', i === current);\n    });\n  }\n\n  thumbs.forEach(function(t, i) {\n    t.addEventListener('click', function() { goTo(i); });\n  });\n\n  btnPrev.addEventListener('click', function() { goTo(current - 1); });\n  btnNext.addEventListener('click', function() { goTo(current + 1); });\n\n  goTo(0);\n})();\n<\/script>\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>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\ud83d\udcc4 Sharif Petro Energy \u2014 Catalog Preview 5 pages \u00b7 Download the full catalog for free Page 1 of 5 \ud83d\udd12 This page is locked Download<span class=\"excerpt-hellip\"> [\u2026]<\/span><\/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-127","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/new.sharifpetro.com\/index.php\/wp-json\/wp\/v2\/pages\/127","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/new.sharifpetro.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/new.sharifpetro.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/new.sharifpetro.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/new.sharifpetro.com\/index.php\/wp-json\/wp\/v2\/comments?post=127"}],"version-history":[{"count":13,"href":"https:\/\/new.sharifpetro.com\/index.php\/wp-json\/wp\/v2\/pages\/127\/revisions"}],"predecessor-version":[{"id":148,"href":"https:\/\/new.sharifpetro.com\/index.php\/wp-json\/wp\/v2\/pages\/127\/revisions\/148"}],"wp:attachment":[{"href":"https:\/\/new.sharifpetro.com\/index.php\/wp-json\/wp\/v2\/media?parent=127"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}