{"id":960,"date":"2025-10-03T21:14:41","date_gmt":"2025-10-03T13:14:41","guid":{"rendered":"https:\/\/staging-afyhaniff.mueble-playground.cc\/?page_id=960"},"modified":"2025-12-06T19:18:50","modified_gmt":"2025-12-06T11:18:50","slug":"certificate-and-award-page","status":"publish","type":"page","link":"https:\/\/staging-afyhaniff.mueble-playground.cc\/ms\/certificate-and-award-page\/","title":{"rendered":"Certificate and Award Page"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"960\" class=\"elementor elementor-960\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c2c6cdf e-flex e-con-boxed e-con e-parent\" data-id=\"c2c6cdf\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-9a2aeb7 e-con-full e-flex e-con e-child\" data-id=\"9a2aeb7\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ad2dec2 elementor-widget elementor-widget-html\" data-id=\"ad2dec2\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"dynamic-buttons\" style=\"display: flex; justify-content: center; gap: 20px; margin-bottom: 20px;\">\r\n\r\n    <!-- Halal Certificate (1 page) -->\r\n    <button \r\n        data-pdf=\"\/wp-content\/uploads\/2025\/10\/2025-SIJIL-HALAL-3.pdf\"\r\n        data-images='[\"\/wp-content\/uploads\/2025\/12\/2025-SIJIL-HALAL-3_page-0001.jpg\"]'\r\n        class=\"button-custom active-btn\">\r\n        Sijil Halal\r\n    <\/button>\r\n\r\n    <!-- Made in Malaysia Certificate (6 pages) -->\r\n    <button \r\n        data-pdf=\"\/wp-content\/uploads\/2025\/10\/SIJIL-PENGIKTIRAFAN-LOGO-BUATAN-MALAYSIA-2025.pdf\"\r\n        data-images='[            \"\/wp-content\/uploads\/2025\/12\/SIJIL-PENGIKTIRAFAN-LOGO-BUATAN-MALAYSIA-2025_page-0001.jpg\",            \"\/wp-content\/uploads\/2025\/12\/SIJIL-PENGIKTIRAFAN-LOGO-BUATAN-MALAYSIA-2025_page-0002.jpg\",            \"\/wp-content\/uploads\/2025\/12\/SIJIL-PENGIKTIRAFAN-LOGO-BUATAN-MALAYSIA-2025_page-0003.jpg\",            \"\/wp-content\/uploads\/2025\/12\/SIJIL-PENGIKTIRAFAN-LOGO-BUATAN-MALAYSIA-2025_page-0004.jpg\",            \"\/wp-content\/uploads\/2025\/12\/SIJIL-PENGIKTIRAFAN-LOGO-BUATAN-MALAYSIA-2025_page-0005.jpg\",            \"\/wp-content\/uploads\/2025\/12\/SIJIL-PENGIKTIRAFAN-LOGO-BUATAN-MALAYSIA-2025_page-0006.jpg\"        ]'\r\n        class=\"button-custom\">\r\n        Sijil Dibuat Di Malaysia\r\n    <\/button>\r\n\r\n<\/div>\r\n\r\n<div class=\"image-box\">\r\n\r\n<div class=\"dynamic-image-box\" style=\"text-align: center;\">\r\n    <!-- Preview Image -->\r\n    <img decoding=\"async\" id=\"certificate-preview\" class=\"certificate-preview-img\" src=\"\" alt=\"Certificate Preview\">\r\n\r\n    <!-- Download Button -->\r\n    <a id=\"download-link\" href=\"\" download class=\"download-button\">Muat Turun Sijil (PDF)<\/a>\r\n<\/div>\r\n\r\n<\/div>\r\n<!-- Modal Viewer -->\r\n<div id=\"image-modal\" class=\"modal\">\r\n    <span class=\"modal-close\">x<\/span>\r\n    <img class=\"modal-content\" id=\"modal-img\">\r\n    <div class=\"modal-nav\">\r\n        <span class=\"modal-prev\">&#10094;<\/span>\r\n        <span class=\"modal-next\">&#10095;<\/span>\r\n    <\/div>\r\n<\/div>\r\n<style>\r\n\/* Buttons *\/\r\n.button-custom {\r\n    padding: 15px 140px;\r\n    color: white;\r\n    cursor: pointer;\r\n    background-color: transparent;\r\n    border: 1px solid rgba(255,255,255,0.3);\r\n}\r\n.button-custom:hover,\r\n.button-custom:focus { background-color: transparent !important; }\r\n.active-btn { background-color: rgba(255,255,255,0.2); }\r\n\r\n\/* Preview image *\/\r\n\r\n.image-box{\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n}\r\n.certificate-preview-img {\r\n    max-width: 190px; \/* reduced from 380px to 190px (50%) *\/\r\n    border-radius: 12px;\r\n    margin-bottom: 20px;\r\n    cursor: pointer;\r\n    transition: 0.2s ease;\r\n}\r\n.certificate-preview-img:hover { transform: scale(1.02); }\r\n\r\n.dynamic-image-box{\r\n    width: 50%;\r\n    justify-content: center;\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n}\r\n\/* Download button *\/\r\n.download-button {\r\n    display: inline-block;\r\n    padding: 12px 25px;\r\n    margin: 25px auto;\r\n    background-color: #28a745;\r\n    color: white;\r\n    border-radius: 5px;\r\n    font-weight: bold;\r\n    text-decoration: none;\r\n    transition: 0.3s;\r\n}\r\n.download-button:hover { background-color: #1e7e34; }\r\n\r\n\/* Modal styles *\/\r\n.modal {\r\n    display: none; \r\n    position: fixed;\r\n    z-index: 9999;\r\n    padding-top: 60px;\r\n    left: 0; top: 0;\r\n    width: 100%; height: 100%;\r\n    overflow: auto;\r\n    background-color: rgba(0,0,0,0.9);\r\n}\r\n.modal-content {\r\n    margin: auto;\r\n    display: block;\r\n    max-width: 90%;\r\n    max-height: 80%;\r\n    border-radius: 8px;\r\n}\r\n.modal-close {\r\n    position: absolute;\r\n    top: 20px;\r\n    right: 35px;\r\n    color: white;\r\n    font-size: 40px;\r\n    font-weight: bold;\r\n    cursor: pointer;\r\n}\r\n.modal-nav span {\r\n    position: absolute;\r\n    top: 50%;\r\n    color: white;\r\n    font-size: 50px;\r\n    cursor: pointer;\r\n    user-select: none;\r\n    padding: 10px;\r\n    margin-top: -25px;\r\n    font-weight: bold;\r\n    transition: 0.3s;\r\n}\r\n.modal-prev { left: 10px; }\r\n.modal-next { right: 10px; }\r\n.modal-nav span:hover { color: #bbb; }\r\n\r\n\/* Mobile *\/\r\n@media only screen and (max-width:600px){\r\n    .dynamic-buttons { flex-direction: column; }\r\n    .button-custom { padding: 50px 10px; }\r\n    .modal-content { max-width: 95%; max-height: 70%; }\r\n}\r\n\r\n<\/style>\r\n<script>\r\njQuery(document).ready(function($) {\r\n    const $buttons = $('.button-custom');\r\n    const $preview = $('#certificate-preview');\r\n    const $download = $('#download-link');\r\n\r\n    let currentImages = [];\r\n    let currentIndex = 0;\r\n\r\n    const $modal = $('#image-modal');\r\n    const $modalImg = $('#modal-img');\r\n\r\n    \/\/ Open modal\r\n    function openModal(index) {\r\n        currentIndex = index;\r\n        $modalImg.attr('src', currentImages[currentIndex]);\r\n        $modal.show();\r\n    }\r\n\r\n    \/\/ Close modal\r\n    $('.modal-close').on('click', () => $modal.hide());\r\n    $modal.on('click', function(e){\r\n        if(e.target === this) $modal.hide();\r\n    });\r\n\r\n    \/\/ Next \/ Prev\r\n    $('.modal-next').on('click', function(e){\r\n        e.stopPropagation();\r\n        currentIndex = (currentIndex + 1) % currentImages.length;\r\n        $modalImg.attr('src', currentImages[currentIndex]);\r\n    });\r\n    $('.modal-prev').on('click', function(e){\r\n        e.stopPropagation();\r\n        currentIndex = (currentIndex - 1 + currentImages.length) % currentImages.length;\r\n        $modalImg.attr('src', currentImages[currentIndex]);\r\n    });\r\n\r\n    \/\/ Switch certificate\r\n    function switchCertificate(btn) {\r\n        const images = JSON.parse(btn.getAttribute('data-images'));\r\n        const pdf = btn.getAttribute('data-pdf');\r\n\r\n        currentImages = images;\r\n        currentIndex = 0;\r\n\r\n        \/\/ Update preview\r\n        $preview.attr('src', currentImages[0]);\r\n        \/\/ Update download link\r\n        $download.attr('href', pdf);\r\n\r\n        \/\/ Active button highlight\r\n        $buttons.removeClass('active-btn');\r\n        $(btn).addClass('active-btn');\r\n    }\r\n\r\n    \/\/ Button click\r\n    $buttons.on('click', function(){\r\n        switchCertificate(this);\r\n    });\r\n\r\n    \/\/ Preview click \u2192 open modal\r\n    $preview.on('click', function(){\r\n        if(currentImages.length) openModal(currentIndex);\r\n    });\r\n\r\n    \/\/ Initial load\r\n    const $initialBtn = $('.button-custom.active-btn');\r\n    if($initialBtn.length) switchCertificate($initialBtn[0]);\r\n});\r\n<\/script>\r\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\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Halal Certificate Made in Malaysia Certificate Download Certificate (PDF) &times; &#10094; &#10095;<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-960","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/staging-afyhaniff.mueble-playground.cc\/ms\/wp-json\/wp\/v2\/pages\/960","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/staging-afyhaniff.mueble-playground.cc\/ms\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/staging-afyhaniff.mueble-playground.cc\/ms\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/staging-afyhaniff.mueble-playground.cc\/ms\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/staging-afyhaniff.mueble-playground.cc\/ms\/wp-json\/wp\/v2\/comments?post=960"}],"version-history":[{"count":94,"href":"https:\/\/staging-afyhaniff.mueble-playground.cc\/ms\/wp-json\/wp\/v2\/pages\/960\/revisions"}],"predecessor-version":[{"id":2604,"href":"https:\/\/staging-afyhaniff.mueble-playground.cc\/ms\/wp-json\/wp\/v2\/pages\/960\/revisions\/2604"}],"wp:attachment":[{"href":"https:\/\/staging-afyhaniff.mueble-playground.cc\/ms\/wp-json\/wp\/v2\/media?parent=960"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}