{"id":3393,"date":"2025-08-19T01:40:18","date_gmt":"2025-08-19T01:40:18","guid":{"rendered":"https:\/\/staging.pai.uin-malang.ac.id\/?page_id=3393"},"modified":"2026-04-17T08:03:53","modified_gmt":"2026-04-17T08:03:53","slug":"hmps","status":"publish","type":"page","link":"https:\/\/pai.uin-malang.ac.id\/?page_id=3393","title":{"rendered":"HMPS"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"3393\" class=\"elementor elementor-3393\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-964ddd4 e-flex e-con-boxed e-con e-parent\" data-id=\"964ddd4\" 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-9dc0c65 elementor-align-left elementor-widget elementor-widget-button\" data-id=\"9dc0c65\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm elementor-animation-shrink\" href=\"https:\/\/pai.uin-malang.ac.id\/wp-content\/uploads\/2025\/08\/Pengurus-HMPS-PAI-2024.pdf\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Link Pengurus HMPS<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-501d3fd elementor-align-left elementor-widget elementor-widget-button\" data-id=\"501d3fd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm elementor-animation-shrink\" href=\"https:\/\/pai.uin-malang.ac.id\/wp-content\/uploads\/2025\/08\/Un.03.001.SB_.01HMPS-PAIXXVI.04.2024-SURAT-PERMOHONAN-PENGAJUAN-SK-2-1-2.pdf\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Link Permohonan - Pengajuan<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\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-192e8d9 e-flex e-con-boxed e-con e-parent\" data-id=\"192e8d9\" 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-e79771f elementor-widget elementor-widget-html\" data-id=\"e79771f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n.org-container{\ntext-align:center;\nfont-family:Arial;\n}\n\n.org-row{\nmargin:20px 0;\ndisplay:flex;\njustify-content:center;\ngap:20px;\nflex-wrap:wrap;\n}\n\n.org-row.center{\nflex-direction:column;\nalign-items:center;\nposition:relative;\n}\n\n.org-row.center::after{\ncontent:\"\";\nwidth:2px;\nheight:40px;\nbackground:#bbb;\nmargin:0 auto;\n}\n\n.org-row.two{\ngap:80px;\nposition:relative;\n}\n\n.org-row.two::before{\ncontent:\"\";\nposition:absolute;\ntop:-20px;\nwidth:50%;\nheight:2px;\nbackground:#bbb;\n}\n\n.org-row.two .org-box::before{\ncontent:\"\";\nposition:absolute;\ntop:-20px;\nleft:50%;\nwidth:2px;\nheight:20px;\nbackground:#bbb;\ntransform:translateX(-50%);\n}\n\n.org-box{\nbackground:#2d6fa3;\ncolor:white;\npadding:15px 40px;\nborder-radius:8px;\ncursor:pointer;\ntransition:0.3s;\nposition:relative;\n}\n\n.org-box:hover{\nbackground:#1f5a86;\ntransform:scale(1.05);\n}\n\n.org-box.small{\npadding:12px 20px;\nbackground:#eaeaea;\ncolor:#333;\n}\n\n.popup{\ndisplay:none;\nposition:fixed;\ntop:0;\nleft:0;\nwidth:100%;\nheight:100%;\nbackground:rgba(0,0,0,0.6);\njustify-content:center;\nalign-items:center;\nz-index:999;\n}\n\n.popup.show{\ndisplay:flex;\nanimation:fadeIn 0.4s ease;\n}\n\n.popup-content{\nbackground:white;\npadding:30px;\nborder-radius:10px;\ntext-align:center;\nmax-width:340px;\nwidth:90%;\nposition:relative;\nanimation:scaleUp 0.35s ease;\n}\n\n.close{\nposition:absolute;\ntop:10px;\nright:15px;\nfont-size:28px;\nfont-weight:bold;\ncursor:pointer;\ncolor:#333;\n}\n\n.close:hover{\ncolor:red;\n}\n\n.member-grid{\ndisplay:grid;\ngrid-template-columns:repeat(auto-fit,minmax(120px,1fr));\ngap:20px;\nmargin-top:20px;\n}\n\n.member-card{\ntext-align:center;\nanimation:fadeUp 0.5s ease;\n}\n\n.member-card img{\nwidth:100px;\nheight:100px;\nborder-radius:50%;\nobject-fit:cover;\nmargin-bottom:8px;\ntransition:0.3s;\n}\n\n.member-card img:hover{\ntransform:scale(1.1);\n}\n\n.member-card h4{\nfont-size:14px;\nmargin:0;\n}\n\n@keyframes fadeIn{\nfrom{opacity:0;}\nto{opacity:1;}\n}\n\n@keyframes scaleUp{\nfrom{\ntransform:scale(0.7);\nopacity:0;\n}\nto{\ntransform:scale(1);\nopacity:1;\n}\n}\n\n@keyframes fadeUp{\nfrom{\nopacity:0;\ntransform:translateY(20px);\n}\nto{\nopacity:1;\ntransform:translateY(0);\n}\n}\n\n.org-tree{\ntext-align:center;\nfont-family:Arial;\n}\n\n.level{\ndisplay:flex;\njustify-content:center;\nflex-wrap:wrap;\ngap:30px;\nmargin:20px 0;\n}\n\n.org-card{\nbackground:#ffffff;\nborder-radius:10px;\npadding:15px;\nwidth:160px;\nbox-shadow:0 4px 10px rgba(0,0,0,0.1);\ncursor:pointer;\ntransition:0.3s;\n}\n\n.org-card:hover{\ntransform:translateY(-5px);\nbox-shadow:0 6px 15px rgba(0,0,0,0.15);\n}\n\n.org-card img{\nwidth:70px;\nheight:70px;\nborder-radius:50%;\nobject-fit:cover;\nmargin-bottom:8px;\n}\n\n.org-card h3{\nmargin:5px 0;\nfont-size:16px;\n}\n\n.org-card p{\nmargin:0;\nfont-size:13px;\ncolor:#666;\n}\n\n.org-card.divisi{\nbackground:#fff;\ncolor:white;\nwidth:150px;\n}\n\n.org-card.divisi h4{\nmargin:0;\nfont-size:14px;\n}\n\n.connector{\nwidth:2px;\nheight:40px;\nbackground:#bbb;\nmargin:auto;\n}\n\n.level-3::before{\ncontent:\"\";\nposition:absolute;\nwidth:300px;\nheight:2px;\nbackground:#bbb;\nmargin-top:-20px;\nleft:50%;\ntransform:translateX(-50%);\n}\n\n\/* RESPONSIVE *\/\n\n@media(max-width:768px){\n\n.level{\ngap:15px;\n}\n\n.org-card{\nwidth:130px;\npadding:12px;\n}\n\n.org-card img{\nwidth:55px;\nheight:55px;\n}\n\n}\n<\/style>\n\n\n<div class=\"org-tree\">\n\n<div class=\"level level-1\">\n<div class=\"org-card\" onclick=\"showMember('ketua')\">\n<img src=:\/\/img.lightshot.app\/>\n<h3>Ketua<\/h3>\n<p>Dzia'ul Haq M Ali Zuhdy<\/p>\n<\/div>\n<\/div>\n\n<div class=\"connector\"><\/div>\n\n<div class=\"level level-2\">\n<div class=\"org-card\" onclick=\"showMember('wakil')\">\n<img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/80\">\n<h3>Wakil Ketua<\/h3>\n<p>Marsha Naurah<\/p>\n<\/div>\n<\/div>\n\n<div class=\"connector\"><\/div>\n\n<div class=\"level level-3\">\n\n<div class=\"org-card\" onclick=\"showMember('sekretaris')\">\n<img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/80\">\n<h3>Sekretaris<\/h3>\n<p>Septi<\/p>\n<\/div>\n\n<div class=\"org-card\" onclick=\"showMember('bendahara')\">\n<img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/80\">\n<h3>Bendahara<\/h3>\n<p>Vina<\/p>\n<\/div>\n\n<\/div>\n\n<div class=\"connector\"><\/div>\n\n<div class=\"level level-4\">\n\n<div class=\"org-card divisi\" onclick=\"showDivision('networking')\">\n<h4>Divisi Networking<\/h4>\n<\/div>\n\n<div class=\"org-card divisi\" onclick=\"showDivision('intelektual')\">\n<h4>Divisi Intelektual<\/h4>\n<\/div>\n\n<div class=\"org-card divisi\" onclick=\"showDivision('entrepreneur')\">\n<h4>Divisi Entrepreneur<\/h4>\n<\/div>\n\n<div class=\"org-card divisi\" onclick=\"showDivision('keagamaan')\">\n<h4>Divisi Keagamaan<\/h4>\n<\/div>\n\n<div class=\"org-card divisi\" onclick=\"showDivision('jurnalistik')\">\n<h4>Divisi Jurnalistik<\/h4>\n<\/div>\n\n<div class=\"org-card divisi\" onclick=\"showDivision('psdm')\">\n<h4>Divisi PSDM<\/h4>\n<\/div>\n\n<\/div>\n\n<\/div>\n<div id=\"member-popup\" class=\"popup\"> \n<div class=\"popup-content\"> \n<span class=\"close\" onclick=\"closePopup()\">\u00d7<\/span> \n<h2 id=\"division-title\"><\/h2> \n<div id=\"member-list\" class=\"member-grid\"><\/div> \n<\/div> \n\n<\/div> \n\n<script>\n\nconst members = {\n\nketua:{\ntitle:\"Ketua\",\nmembers:[\n{\nname:\"Dzia'ul Haq M Ali Zuhdy\",\nphoto:\"https:\/\/img.lightshot.app\"\n}\n]\n},\n\nwakil:{\ntitle:\"Wakil Ketua\",\nmembers:[\n{\nname:\"Rizki Maulana\",\nphoto:\"https:\/\/via.placeholder.com\/120\"\n}\n]\n},\n\nsekretaris:{\ntitle:\"Sekretaris\",\nmembers:[\n{\nname:\"Nabila Putri\",\nphoto:\"https:\/\/via.placeholder.com\/120\"\n}\n]\n},\n\nbendahara:{\ntitle:\"Bendahara\",\nmembers:[\n{\nname:\"Farhan Akbar\",\nphoto:\"https:\/\/via.placeholder.com\/120\"\n}\n]\n}\n\n}\n\n\nconst divisions = {\n\nnetworking:{\ntitle:\"Divisi Networking\",\nmembers:[\n\n{\nname:\"Ahmad Fauzi\",\nphoto:\"https:\/\/via.placeholder.com\/100\"\n},\n\n{\nname:\"Rina Putri\",\nphoto:\"https:\/\/via.placeholder.com\/100\"\n},\n\n{\nname:\"Dika Pratama\",\nphoto:\"https:\/\/via.placeholder.com\/100\"\n}\n\n]\n},\n\nintelektual:{\ntitle:\"Divisi Intelektual\",\nmembers:[\n\n{\nname:\"Nabila Rahma\",\nphoto:\"https:\/\/via.placeholder.com\/100\"\n},\n\n{\nname:\"Fajar Maulana\",\nphoto:\"https:\/\/via.placeholder.com\/100\"\n}\n\n]\n},\n\nentrepreneur:{\ntitle:\"Divisi Entrepreneur\",\nmembers:[\n\n{\nname:\"Rizky Akbar\",\nphoto:\"https:\/\/via.placeholder.com\/100\"\n},\n\n{\nname:\"Siti Aisyah\",\nphoto:\"https:\/\/via.placeholder.com\/100\"\n}\n\n]\n},\n\nkeagamaan:{\ntitle:\"Divisi Keagamaan\",\nmembers:[\n\n{\nname:\"Abdul Rahman\",\nphoto:\"https:\/\/via.placeholder.com\/100\"\n},\n\n{\nname:\"Siti Aminah\",\nphoto:\"https:\/\/via.placeholder.com\/100\"\n}\n\n]\n},\n\njurnalistik:{\ntitle:\"Divisi Jurnalistik\",\nmembers:[\n\n{\nname:\"Rafi Pratama\",\nphoto:\"https:\/\/via.placeholder.com\/100\"\n},\n\n{\nname:\"Nadia Putri\",\nphoto:\"https:\/\/via.placeholder.com\/100\"\n}\n\n]\n},\n\npsdm:{\ntitle:\"Divisi PSDM\",\nmembers:[\n\n{\nname:\"Fikri Maulana\",\nphoto:\"https:\/\/via.placeholder.com\/100\"\n},\n\n{\nname:\"Aulia Rahma\",\nphoto:\"https:\/\/via.placeholder.com\/100\"\n}\n\n]\n}\n\n}\n\n\n\nfunction renderMembers(data){\n\ndocument.getElementById(\"division-title\").innerText = data.title\n\nlet html=\"\"\n\ndata.members.forEach(member=>{\n\nhtml += `\n<div class=\"member-card\">\n<img decoding=\"async\" src=\"${member.photo}\">\n<h4>${member.name}<\/h4>\n<\/div>\n`\n\n})\n\ndocument.getElementById(\"member-list\").innerHTML = html\n\ndocument.getElementById(\"member-popup\").classList.add(\"show\")\n\n}\n\n\nfunction showMember(role){\n\nrenderMembers(members[role])\n\n}\n\n\nfunction showDivision(div){\n\nrenderMembers(divisions[div])\n\n}\n\n\nfunction closePopup(){\n\ndocument.getElementById(\"member-popup\").classList.remove(\"show\")\n\n}\n\n\ndocument.getElementById(\"member-popup\").addEventListener(\"click\",function(e){\n\nif(e.target.id===\"member-popup\"){\nclosePopup()\n}\n\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<div class=\"elementor-element elementor-element-69c7d99 e-flex e-con-boxed e-con e-parent\" data-id=\"69c7d99\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\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>Link Pengurus HMPS Link Permohonan &#8211; Pengajuan Ketua Dzia&#8217;ul Haq M Ali Zuhdy Wakil Ketua Marsha Naurah Sekretaris Septi Bendahara Vina Divisi Networking Divisi Intelektual Divisi Entrepreneur Divisi Keagamaan Divisi Jurnalistik Divisi PSDM \u00d7<\/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-3393","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/pai.uin-malang.ac.id\/index.php?rest_route=\/wp\/v2\/pages\/3393","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pai.uin-malang.ac.id\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pai.uin-malang.ac.id\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pai.uin-malang.ac.id\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pai.uin-malang.ac.id\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3393"}],"version-history":[{"count":82,"href":"https:\/\/pai.uin-malang.ac.id\/index.php?rest_route=\/wp\/v2\/pages\/3393\/revisions"}],"predecessor-version":[{"id":4585,"href":"https:\/\/pai.uin-malang.ac.id\/index.php?rest_route=\/wp\/v2\/pages\/3393\/revisions\/4585"}],"wp:attachment":[{"href":"https:\/\/pai.uin-malang.ac.id\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3393"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}