{"id":393,"date":"2026-08-10T15:53:10","date_gmt":"2026-08-10T07:53:10","guid":{"rendered":"https:\/\/www.ukm.my\/upsoku\/?page_id=393"},"modified":"2026-08-18T13:17:47","modified_gmt":"2026-08-18T05:17:47","slug":"warga-ups-oku-ukm","status":"publish","type":"page","link":"https:\/\/www.ukm.my\/upsoku\/warga-ups-oku-ukm\/","title":{"rendered":"Warga UPS-OKU UKM"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"393\" class=\"elementor elementor-393\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8233a81 e-grid e-con-boxed e-con e-parent\" data-id=\"8233a81\" 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-9183787 elementor-widget elementor-widget-image\" data-id=\"9183787\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/www.ukm.my\/upsoku\/wp-content\/uploads\/2026\/08\/Gambar-Team-OKU.jpg\" class=\"attachment-full size-full wp-image-427\" alt=\"\" srcset=\"https:\/\/www.ukm.my\/upsoku\/wp-content\/uploads\/2026\/08\/Gambar-Team-OKU.jpg 1920w, https:\/\/www.ukm.my\/upsoku\/wp-content\/uploads\/2026\/08\/Gambar-Team-OKU-300x169.jpg 300w, https:\/\/www.ukm.my\/upsoku\/wp-content\/uploads\/2026\/08\/Gambar-Team-OKU-1024x576.jpg 1024w, https:\/\/www.ukm.my\/upsoku\/wp-content\/uploads\/2026\/08\/Gambar-Team-OKU-768x432.jpg 768w, https:\/\/www.ukm.my\/upsoku\/wp-content\/uploads\/2026\/08\/Gambar-Team-OKU-1536x864.jpg 1536w, https:\/\/www.ukm.my\/upsoku\/wp-content\/uploads\/2026\/08\/Gambar-Team-OKU-800x450.jpg 800w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/>\t\t\t\t\t\t\t\t\t\t\t\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-ca46356 e-flex e-con-boxed e-con e-parent\" data-id=\"ca46356\" 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-ee02904 elementor-widget elementor-widget-html\" data-id=\"ee02904\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Barlow:wght@400;500;600;700&display=swap');\n\n    .directory-wrapper {\n        --text-color: #4E4E4E;\n        --primary-color: #86193f;\n        --button-hover: #62122e;\n        --bg-color: #f9f9f9;\n        --card-bg: #ffffff;\n        --border-color: #eeeeee;\n        font-family: 'Barlow', sans-serif;\n        color: var(--text-color);\n        margin: 0 !important;\n        padding: 10px !important;\n        width: 100% !important;\n        display: block !important;\n        position: relative !important;\n        box-sizing: border-box;\n    }\n    .directory-wrapper * { box-sizing: border-box; }\n\n    .staff-grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n        gap: 30px;\n        margin-top: 0 !important;\n        padding-top: 0 !important;\n    }\n\n    .staff-card { \n        background: var(--card-bg); \n        border: 1px solid var(--border-color); \n        border-radius: 8px; \n        overflow: hidden; \n        display: flex; \n        flex-direction: column; \n        height: 100%; \n        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04); \n        transition: transform 0.2s ease; \n    }\n\n    .staff-image { width: 100%; aspect-ratio: 4 \/ 3; object-fit: cover; object-position: center top; display: block; border-bottom: 1px solid #f0f0f0; background-color: #f0f0f0; }\n    .staff-info { padding: 20px 20px 25px 20px; flex-grow: 1; display: flex; flex-direction: column; text-align: left; }\n    .staff-name { color: var(--text-color); font-size: 14px; font-weight: 600; margin-bottom: 4px; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 0; font-family: 'Barlow', sans-serif; }\n    .staff-position { color: #888; font-size: 11px; font-weight: 500; margin-bottom: 20px; line-height: 1.4; letter-spacing: 0.5px; text-transform: capitalize; font-family: 'Barlow', sans-serif; }\n\n    .contact-info { margin-bottom: 20px; flex-grow: 1; display: flex; flex-direction: column; align-items: flex-start; }\n    .contact-item { display: flex; align-items: flex-start; margin-bottom: 8px; color: var(--text-color); font-size: 11px; width: 100%; font-family: 'Barlow', sans-serif; }\n    .contact-item svg { width: 14px; height: 14px; margin-right: 10px; fill: var(--primary-color); flex-shrink: 0; opacity: 1; margin-top: 2px; }\n    .contact-item a { color: var(--text-color); text-decoration: none; transition: color 0.2s ease; word-break: break-all; }\n    .contact-item a:hover { color: var(--primary-color); text-decoration: underline; }\n\n    .job-desc-btn { width: 100%; padding: 12px; background: var(--primary-color); color: white; border: none; border-radius: 4px; font-family: 'Barlow', sans-serif; font-size: 12px; font-weight: 500; cursor: pointer; transition: background-color 0.3s ease; margin-top: auto; text-transform: capitalize; letter-spacing: 0.5px; }\n    .job-desc-btn:hover { background: var(--button-hover); }\n\n    \/* ANIMATED MODAL *\/\n    .staff-modal { \n        display: none; \n        position: fixed; \n        z-index: 99999; \n        left: 0; top: 0; \n        width: 100%; height: 100%; \n        background: rgba(255, 255, 255, 0.9); \n        backdrop-filter: blur(2px); \n        animation: fadeIn 0.2s ease; \n        font-family: 'Barlow', sans-serif;\n    }\n    .staff-modal.active { display: flex; align-items: center; justify-content: center; }\n    .staff-modal-content { \n        background: white; \n        padding: 40px; \n        border-radius: 8px; \n        border: 1px solid var(--border-color); \n        box-shadow: 0 10px 40px rgba(0,0,0,0.08); \n        max-width: 600px; width: 90%; \n        max-height: 85vh; \n        overflow-y: auto; \n        position: relative; \n        animation: slideUp 0.3s ease; \n    }\n    .staff-close-btn { \n        position: absolute; top: 20px; right: 20px; \n        width: 32px; height: 32px; \n        background: transparent; border: none; \n        cursor: pointer; display: flex; align-items: center; justify-content: center; \n        border-radius: 50%; transition: background-color 0.2s ease; padding: 0; \n    }\n    .staff-close-btn svg { width: 24px; height: 24px; fill: #999; }\n    .staff-close-btn:hover { background-color: rgba(0,0,0,0.05); }\n    .staff-close-btn:hover svg { fill: var(--primary-color); }\n\n    .modal-header { color: var(--primary-color); font-size: 1.2rem; font-weight: 600; margin-bottom: 5px; margin-top: 0; font-family: 'Barlow', sans-serif; }\n    .modal-position { color: #888; font-size: 1.0rem; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid var(--border-color); margin-top: 0; font-family: 'Barlow', sans-serif; }\n    \n    \/* JOB DESCRIPTION FONT SIZE SET TO 14PX *\/\n    .modal-body { color: var(--text-color); line-height: 1.8; font-size: 14px; font-family: 'Barlow', sans-serif; }\n    .modal-body h3 { color: var(--primary-color); margin-top: 25px; margin-bottom: 15px; font-size: 1.0rem; font-weight: 600; font-family: 'Barlow', sans-serif; }\n    .modal-body ul { margin-left: 20px; color: #666; font-size: 14px; }\n    .modal-body li { margin-bottom: 8px; font-size: 14px; }\n\n    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }\n    @keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }\n<\/style>\n\n<div class=\"directory-wrapper\">\n    <div class=\"staff-grid dynamic-staff-grid\"><\/div>\n<\/div>\n\n<script>\n(function() {\n    const uniqueTabId = 'web_upsoku'; \n\n    const staffData = [\n      {\n        \"Name\": \"Puan Farhanah Md Isa\",\n        \"Position\": \"Penolong Pendaftar Kanan N10 (FX)\",\n        \"Email\": \"farhanamdisa@ukm.edu.my\",\n        \"Phone\": \"03-8921 4693\",\n        \"Image\": \"https:\/\/www.ukm.my\/upsoku\/wp-content\/uploads\/2026\/08\/Puan-Farhana.png\",\n        \"JobScope\": \"Hal-Ehwal Pentadbiran UPS-OKU | Pengurusan Kewangan UPS-OKU | Pengurusan Staf OKU | Pengurusan Pelajar OKU | Laporan Bulanan UPS-OKU | Kualiti Pengurusan Sumber Manusia UPS-OKU | Perkhidmatan Jurubahasa Isyarat | Pengurusan pelaksanaan selenggara dan naik taraf kemudahan OKU | Memantau penyelarasan Pegawai Perhubungan OKU (PP-OKU) | Pengurusan dan Pemantauan Bantuan Kewangan OKU (BKOKU) | Setiausaha Mesyuarat Jawatankuasa Pelaksanaan Polisi Inklusif OKU | Pegawai Khas kepada Pengerusi Lembaga Pengarah Universiti\"\n      },\n      {\n        \"Name\": \"CIK AZNURUL AISHAH AZHADI\",\n        \"Position\": \"Pegawai Tadbir (MyStep)\",\n        \"Email\": \"aznurulaishah@ukm.edu.my\",\n        \"Phone\": \"03-8921 4694\",\n        \"Image\": \"https:\/\/www.ukm.my\/upsoku\/wp-content\/uploads\/2026\/08\/Aisyah.png\",\n        \"JobScope\": \"Memantau penyelarasan Pegawai Perhubungan OKU (PP-OKU) | Pengurusan dan Pemantauan Bantuan Kewangan OKU (BKOKU) | Pemantauan Pelan Strategik Polisi Inklusif OKU UKM | Penyediaan data warga OKU UKM | Sekretariat Mesyuarat Jawatankuasa Pelaksanaan Polisi Inklusif OKU | Urusetia Kualiti Pengurusan Sumber Manusia\"\n      },     \n      {\n        \"Name\": \"Cik Syamimi Yusuf\",\n        \"Position\": \"Pembantu Tadbir (P\/O) N1\",\n        \"Email\": \"syamimiyusuf@ukm.edu.my\",\n        \"Phone\": \"03-8921 4694\",\n        \"Image\": \"https:\/\/www.ukm.my\/upsoku\/wp-content\/uploads\/2026\/08\/Syamimi.png\",\n        \"JobScope\": \"Pentadbiran dan Kewangan Unit | Pengurusan Staf OKU | Data dan Laporan Staf dan Unit\"\n      },\n      {\n        \"Name\": \"Encik Raja Noor Azim Raja Noor Affandi\",\n        \"Position\": \"Pembantu Tadbir (P\/O) N1\",\n        \"Email\": \"rnazim@ukm.edu.my\",\n        \"Phone\": \"03-8921 4919\",\n        \"Image\": \"https:\/\/www.ukm.my\/upsoku\/wp-content\/uploads\/2026\/08\/Azim.png\",\n        \"JobScope\": \"Pengurusan Pelajar OKU | Penyelaras Bantuan Kewangan OKU (BKOKU) | Data dan Laporan Pelajar OKU | Penyelaras Aduan Pelajar OKU\"\n      },\n      {\n        \"Name\": \"ENCIK IRWAN SAHMIN\",\n        \"Position\": \"Pembantu Khidmat Am H1\",\n        \"Email\": \"irwan86@ukm.edu.my\",\n        \"Phone\": \"03-8921 4920\",\n        \"Image\": \"https:\/\/www.ukm.my\/upsoku\/wp-content\/uploads\/2026\/08\/Irwan.png\",\n        \"JobScope\": \"Penyelaras Kenderaan OKU Universiti | Penyelaras Peralatan OKU | Pengurusan Rekod Unit\"\n      },\n    ];\n\n    const currentScript = document.currentScript;\n    const wrapper = currentScript.previousElementSibling; \n    const gridContainer = wrapper.querySelector('.dynamic-staff-grid');\n    gridContainer.id = `grid-${uniqueTabId}`;\n\n    let modalContainer = document.getElementById(`modals-${uniqueTabId}`);\n    if (!modalContainer) {\n        modalContainer = document.createElement('div');\n        modalContainer.id = `modals-${uniqueTabId}`;\n        document.body.appendChild(modalContainer);\n    }\n\n    staffData.forEach((staff, index) => {\n        const uniqueModalId = `modal-${uniqueTabId}-${index}`;\n        let taskList = staff.JobScope ? staff.JobScope.split('|').map(item => item.trim()) : [];\n        let emailHtml = staff.Email ? staff.Email.split('|').map(e => `<a href=\"mailto:${e.trim()}\" style=\"display:block; margin-bottom:2px;\">${e.trim()}<\/a>`).join('') : '';\n        const phoneLink = staff.Phone ? staff.Phone.replace(\/\\s\/g, '') : '';\n\n        const cardHTML = `\n            <div class=\"staff-card\">\n                <img decoding=\"async\" src=\"${staff.Image}\" alt=\"${staff.Name}\" class=\"staff-image\" onerror=\"this.src='https:\/\/placehold.co\/400x300\/eee\/999?text=No+Image'\">\n                <div class=\"staff-info\">\n                    <h2 class=\"staff-name\">${staff.Name}<\/h2>\n                    <p class=\"staff-position\">${staff.Position || ''}<\/p>\n                    <div class=\"contact-info\">\n                        <div class=\"contact-item\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\"><path d=\"M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z\"\/><\/svg>\n                            <div style=\"flex-grow: 1; min-width: 0;\">${emailHtml}<\/div>\n                        <\/div>\n                        ${staff.Phone ? `\n                        <div class=\"contact-item\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\"><path d=\"M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z\"\/><\/svg>\n                            <a href=\"tel:${phoneLink}\">${staff.Phone}<\/a>\n                        <\/div>` : ''}\n                    <\/div>\n                    <button class=\"job-desc-btn\" onclick=\"document.getElementById('${uniqueModalId}').classList.add('active'); document.body.style.overflow='hidden';\">Skop Tugas<\/button>\n                <\/div>\n            <\/div>`;\n        gridContainer.insertAdjacentHTML('beforeend', cardHTML);\n\n        const tasksHTML = taskList.map(task => `<li>${task}<\/li>`).join('');\n        const modalHTML = `\n            <div id=\"${uniqueModalId}\" class=\"staff-modal\" onclick=\"if(event.target === this){this.classList.remove('active'); document.body.style.overflow='auto';}\">\n                <div class=\"staff-modal-content\">\n                    <button class=\"staff-close-btn\" onclick=\"document.getElementById('${uniqueModalId}').classList.remove('active'); document.body.style.overflow='auto';\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\"><path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"\/><\/svg>\n                    <\/button>\n                    <h2 class=\"modal-header\">${staff.Name}<\/h2>\n                    <p class=\"modal-position\">${staff.Position || ''}<\/p>\n                    <div class=\"modal-body\">\n                        <h3>Skop Tugas:<\/h3>\n                        <ul>${tasksHTML || '<li>Maklumat sedang dikemaskini<\/li>'}<\/ul>\n                    <\/div>\n                <\/div>\n            <\/div>`;\n        modalContainer.insertAdjacentHTML('beforeend', modalHTML);\n    });\n})();\n<\/script>\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":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-393","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.ukm.my\/upsoku\/wp-json\/wp\/v2\/pages\/393","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ukm.my\/upsoku\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.ukm.my\/upsoku\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.ukm.my\/upsoku\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ukm.my\/upsoku\/wp-json\/wp\/v2\/comments?post=393"}],"version-history":[{"count":33,"href":"https:\/\/www.ukm.my\/upsoku\/wp-json\/wp\/v2\/pages\/393\/revisions"}],"predecessor-version":[{"id":773,"href":"https:\/\/www.ukm.my\/upsoku\/wp-json\/wp\/v2\/pages\/393\/revisions\/773"}],"wp:attachment":[{"href":"https:\/\/www.ukm.my\/upsoku\/wp-json\/wp\/v2\/media?parent=393"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}