{"id":325,"date":"2019-10-26T07:26:17","date_gmt":"2019-10-26T07:26:17","guid":{"rendered":"http:\/\/masaa.org.my\/v1\/?page_id=325"},"modified":"2025-07-02T15:42:28","modified_gmt":"2025-07-02T07:42:28","slug":"membership","status":"publish","type":"page","link":"http:\/\/masaa.org.my\/v1\/membership\/","title":{"rendered":"MEMBERSHIP"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\tFacebook-f<\/span>\n\t\t\t\t\t\t<\/i>\t\t\t\t\t<\/a>\n\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\tTwitter<\/span>\n\t\t\t\t\t\t<\/i>\t\t\t\t\t<\/a>\n\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\tGoogle-plus-g<\/span>\n\t\t\t\t\t\t<\/i>\t\t\t\t\t<\/a>\n\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\tEnvelope<\/span>\n\t\t\t\t\t\t<\/i>\t\t\t\t\t<\/a>\n\t\t\t\t<\/span>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n \n \n Sertai MASAA - Keahlian & Sukarelawan<\/title>\n <!-- Tailwind CSS CDN -->\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <!-- Google Fonts: Inter & Lora -->\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;600;700;800&family=Lora:wght@400;700&display=swap\" rel=\"stylesheet\">\n <!-- Font Awesome for icons -->\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\">\n <style>\n \/* Define MASAA Brand Colors (Muted Pastels with Purple Accents) *\/\n :root {\n --masa-purple-50: #f3e8ff; \/* Very light purple *\/\n --masa-purple-100: #e9d5ff;\n --masa-purple-200: #d8b4fe;\n --masa-purple-500: #8b5cf6; \/* Main accent purple *\/\n --masa-purple-700: #6d28d9;\n\n --masa-blue-50: #e0f2fe; \/* Light blue pastel *\/\n --masa-blue-100: #bfdbfe;\n --masa-blue-500: #3b82f6; \/* Main blue *\/\n --masa-blue-700: #2563eb; \/* Darker blue for text *\/\n\n --masa-green-50: #dcfce7; \/* Light green pastel *\/\n --masa-green-100: #bbf7d0;\n --masa-green-500: #22c55e; \/* Main green *\/\n --masa-green-700: #16a34a; \/* Darker green for text *\/\n\n --masa-pink-50: #fef2f2; \/* Light pink pastel *\/\n --masa-pink-100: #fee2e2;\n --masa-pink-500: #ef4444; \/* Main pink *\/\n\n --masa-gray-900: #1a202c; \/* Dark text *\/\n --masa-gray-700: #4a5568; \/* Body text *\/\n --masa-gray-400: #a0a7b5; \/* Lighter text\/borders *\/\n }\n\n body {\n font-family: 'Inter', sans-serif;\n background-color: #f0f2f5; \/* Light gray background, less stark *\/\n color: var(--masa-gray-700);\n }\n .container-custom {\n max-width: 960px; \/* Custom container width *\/\n }\n .section-title {\n color: var(--masa-gray-900); \/* Dark text for titles *\/\n border-bottom: 2px solid var(--masa-purple-500); \/* Purple accent border *\/\n padding-bottom: 0.75rem; \/* Increased padding *\/\n margin-bottom: 2.5rem; \/* Increased margin for better spacing *\/\n font-weight: 700; \/* Lora font weight *\/\n font-family: 'Lora', serif; \/* Changed to Lora font *\/\n font-size: 3.75rem; \/* Approximately 60px for larger screens *\/\n line-height: 1.2;\n text-align: center; \/* Centered the section title *\/\n }\n\n \/* Card styles for content sections *\/\n .card-custom {\n background-color: #ffffff;\n border-radius: 1rem; \/* More rounded corners *\/\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08); \/* Softer, wider shadow *\/\n padding: 3rem; \/* Increased padding for more breathing room *\/\n margin-bottom: 2.5rem; \/* Consistent margin *\/\n }\n @media (max-width: 768px) {\n .card-custom {\n padding: 1.5rem; \/* Adjust padding for smaller screens *\/\n }\n .section-title {\n font-size: 2.25rem; \/* Adjust title size for smaller screens (approx 36px) *\/\n }\n }\n\n .list-item-custom {\n display: flex;\n align-items: flex-start;\n margin-bottom: 1rem; \/* Increased margin *\/\n }\n .list-icon {\n color: var(--masa-purple-500); \/* Use accent purple for icons *\/\n margin-right: 1rem; \/* Increased margin *\/\n font-size: 1.5rem; \/* Larger icon *\/\n flex-shrink: 0; \/* Prevent icon from shrinking *\/\n }\n .button-primary {\n background-color: var(--masa-purple-500); \/* Accent purple button *\/\n color: #ffffff;\n padding: 1.25rem 3rem; \/* Larger padding for a more prominent button *\/\n border-radius: 0.75rem; \/* More rounded button *\/\n font-weight: 700; \/* Bolder text *\/\n transition: background-color 0.3s ease, transform 0.2s ease; \/* Added transform transition *\/\n display: inline-block; \/* Ensure padding works *\/\n text-align: center;\n letter-spacing: 0.05em; \/* Slightly spaced letters *\/\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n }\n .button-primary:hover {\n background-color: var(--masa-purple-700); \/* Darker purple on hover *\/\n transform: translateY(-3px); \/* More pronounced lift effect *\/\n box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);\n }\n .link-style {\n color: var(--masa-purple-500);\n text-decoration: underline;\n transition: color 0.3s ease;\n }\n .link-style:hover {\n color: var(--masa-purple-700);\n }\n\n \/* Membership Card Specific Styles & Hover *\/\n .membership-card {\n background-color: #ffffff;\n padding: 2.5rem;\n border-radius: 1rem;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n display: flex;\n flex-direction: column;\n justify-content: space-between; \/* Ensures content pushes to top\/bottom *\/\n }\n .membership-card:hover {\n transform: translateY(-8px); \/* More significant lift effect on hover *\/\n box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12); \/* Stronger shadow on hover *\/\n }\n \/* Custom pastel backgrounds for membership cards *\/\n .membership-card.type-biasa {\n background-color: var(--masa-blue-50);\n border: 1px solid var(--masa-blue-100);\n }\n .membership-card.type-remaja {\n background-color: var(--masa-green-50);\n border: 1px solid var(--masa-green-100);\n }\n .membership-card.type-bersekutu {\n background-color: var(--masa-purple-50); \/* Using purple for bersekutu *\/\n border: 1px solid var(--masa-purple-100);\n }\n .membership-card h3 {\n font-size: 1.75rem; \/* Larger heading for card titles *\/\n font-weight: 700;\n margin-bottom: 1rem;\n }\n .membership-card.type-biasa h3 { color: var(--masa-blue-700); }\n .membership-card.type-remaja h3 { color: var(--masa-green-700); }\n .membership-card.type-bersekutu h3 { color: var(--masa-purple-700); }\n\n \/* Styles for account info block *\/\n .account-info-block {\n background-color: var(--masa-purple-50); \/* Use a soft purple *\/\n border: 1px solid var(--masa-purple-200);\n padding: 1.5rem;\n border-radius: 0.75rem;\n margin-top: 1rem;\n font-weight: 600;\n color: var(--masa-gray-900);\n }\n .account-info-block p {\n margin-bottom: 0.5rem;\n }\n .account-info-block strong {\n color: var(--masa-purple-700);\n }\n\n \/* Header with background image and overlay *\/\n .header-with-bg {\n \/* Updated background image URL *\/\n background-image: url('http:\/\/masaa.org.my\/v1\/wp-content\/uploads\/2025\/07\/Header-Laman-AHli-MASAA.jpg');\n background-size: cover;\n background-position: center;\n background-repeat: no-repeat;\n min-height: 400px; \/* Minimum height for the header *\/\n position: relative; \/* Needed for overlay positioning *\/\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n text-align: center;\n color: white; \/* Ensure text is white for contrast *\/\n padding: 2rem; \/* Add padding to ensure content isn't flush with edges *\/\n }\n\n .header-with-bg::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.5); \/* Semi-transparent black overlay *\/\n border-radius: 1rem; \/* Match header border-radius *\/\n z-index: 1; \/* Place overlay above background image *\/\n }\n\n .header-with-bg > * {\n position: relative;\n z-index: 2; \/* Place content above overlay *\/\n }\n\n .header-with-bg h1,\n .header-with-bg p {\n color: white; \/* Ensure text remains white *\/\n }\n\n \/* Carousel specific styles *\/\n .carousel-slide {\n opacity: 0;\n transition: opacity 0.7s ease-in-out;\n }\n .carousel-slide.active {\n opacity: 1;\n z-index: 5; \/* Ensure active slide is on top *\/\n }\n .carousel-dots .dot.active {\n background-color: var(--masa-purple-500); \/* Active dot color *\/\n transform: scale(1.2);\n }\n\n \/* LLM Feature Specific Styles *\/\n .llm-feature-container {\n background-color: var(--masa-pink-50); \/* Light pink background *\/\n border: 1px solid var(--masa-pink-100);\n padding: 2.5rem;\n border-radius: 1rem;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);\n margin-bottom: 2.5rem;\n text-align: center;\n }\n .llm-feature-container textarea {\n width: 100%;\n min-height: 100px;\n padding: 1rem;\n border-radius: 0.5rem;\n border: 1px solid var(--masa-gray-400);\n margin-top: 1.5rem;\n margin-bottom: 1.5rem;\n font-family: 'Inter', sans-serif;\n font-size: 1rem;\n resize: vertical; \/* Allow vertical resizing *\/\n }\n .llm-feature-container .llm-output {\n margin-top: 2rem;\n padding: 1.5rem;\n background-color: #ffffff;\n border-radius: 0.75rem;\n border: 1px solid var(--masa-purple-100);\n text-align: left;\n min-height: 50px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--masa-gray-700);\n font-style: italic;\n }\n .llm-feature-container .llm-output.has-content {\n font-style: normal;\n justify-content: flex-start;\n }\n <\/style>\n<\/head>\n<body class=\"antialiased\">\n <div class=\"min-h-screen flex flex-col items-center py-10 px-4 sm:px-6 lg:px-8\">\n <header class=\"w-full shadow-lg rounded-xl mb-10 container-custom header-with-bg\">\n <!-- MASAA Logo -->\n <img decoding=\"async\" src=\"https:\/\/masaa.org.my\/v1\/wp-content\/uploads\/2019\/11\/Logo-MASAA-768x768.png\" alt=\"[Logo MASAA]\" class=\"h-24 w-24 sm:h-32 sm:w-32 object-contain mb-4\">\n\n <h1 class=\"text-3xl sm:text-4xl lg:text-5xl font-extrabold mb-3 leading-tight\">Sertai Kami sebagai Ahli dan<br>Sukarelawan MASAA<\/h1>\n <p class=\"text-lg sm:text-xl mb-8\">Perkasakan individu SCI di Malaysia ke arah masyarakat inklusif.<\/p>\n <!-- Moved \"Daftar Sekarang!\" button here as the first CTA -->\n <a href=\"https:\/\/forms.gle\/WV2PXC6oPsmwr48VA\" target=\"_blank\" class=\"button-primary text-xl\">Daftar Sekarang!<\/a>\n <\/header>\n\n <main class=\"w-full container-custom\">\n <!-- Section: Carousel Imej -->\n <section class=\"card-custom !py-0 !px-0 overflow-hidden relative mb-10\">\n <div id=\"image-carousel\" class=\"relative w-full h-[400px] md:h-[500px] overflow-hidden rounded-xl\">\n <!-- Carousel Slides -->\n <div class=\"carousel-slide absolute inset-0\">\n <img decoding=\"async\" src=\"http:\/\/masaa.org.my\/v1\/wp-content\/uploads\/2025\/05\/Majlis-Hari-Raya-MASAA-2025.jpg\" alt=\"[Gambar Majlis Hari Raya MASAA 2025]\" class=\"w-full h-full object-cover\">\n <\/div>\n <div class=\"carousel-slide absolute inset-0\">\n <img decoding=\"async\" src=\"http:\/\/masaa.org.my\/v1\/wp-content\/uploads\/2025\/05\/Program-Stakeholder-MASAA-PPUM.jpg\" alt=\"[Gambar Program Stakeholder MASAA PPUM]\" class=\"w-full h-full object-cover\">\n <\/div>\n <div class=\"carousel-slide absolute inset-0\">\n <img decoding=\"async\" src=\"http:\/\/masaa.org.my\/v1\/wp-content\/uploads\/2025\/06\/MASAA-SCI-Camping-2024-7.jpg\" alt=\"[Gambar MASAA SCI Camping 2024]\" class=\"w-full h-full object-cover\">\n <\/div>\n\n <!-- Navigation Buttons -->\n <button class=\"carousel-btn prev-btn absolute top-1\/2 left-4 -translate-y-1\/2 bg-black bg-opacity-50 text-white p-3 rounded-full hover:bg-opacity-75 transition-colors duration-300 focus:outline-none z-10\">\n <i class=\"fas fa-chevron-left\"><\/i>\n <\/button>\n <button class=\"carousel-btn next-btn absolute top-1\/2 right-4 -translate-y-1\/2 bg-black bg-opacity-50 text-white p-3 rounded-full hover:bg-opacity-75 transition-colors duration-300 focus:outline-none z-10\">\n <i class=\"fas fa-chevron-right\"><\/i>\n <\/button>\n\n <!-- Dots Indicator -->\n <div class=\"carousel-dots absolute bottom-4 left-1\/2 -translate-x-1\/2 flex space-x-2 z-10\">\n <!-- Dots will be generated by JavaScript -->\n <\/div>\n <\/div>\n <\/section>\n\n <!-- Section: Peluang Sertai Kami -->\n <section class=\"card-custom bg-masa-purple-50\"> <!-- Added bg-masa-50 class -->\n <h2 class=\"section-title\">Peluang Apabila Menyertai MASAA<\/h2>\n <ul class=\"space-y-4 text-gray-700 text-lg\">\n <li class=\"list-item-custom\">\n <i class=\"fas fa-check-circle list-icon\"><\/i>\n <span>Peluang melebarkan jaringan SCI di Malaysia dan Antarabangsa.<\/span>\n <\/li>\n <li class=\"list-item-custom\">\n <i class=\"fas fa-check-circle list-icon\"><\/i>\n <span>Peluang untuk menambah ilmu SCI melalui program yang dianjurkan.<\/span>\n <\/li>\n <li class=\"list-item-custom\">\n <i class=\"fas fa-check-circle list-icon\"><\/i>\n <span>Peluang untuk mendapat bimbingan Kumpulan Rakan Sokongan (Support group) melalui mentor terpilih.<\/span>\n <\/li>\n <li class=\"list-item-custom\">\n <i class=\"fas fa-check-circle list-icon\"><\/i>\n <span>Mengadvokasi dan memperjuangkan hak-hak SCI di pelbagai peringkat.<\/span>\n <\/li>\n <li class=\"list-item-custom\">\n <i class=\"fas fa-check-circle list-icon\"><\/i>\n <span>Mendapat maklumat terkini yang berkaitan Aktiviti Kehidupan Harian (ADL) SCI.<\/span>\n <\/li>\n <li class=\"list-item-custom\">\n <i class=\"fas fa-check-circle list-icon\"><\/i>\n <span>Medium perantara dan sumber rujukan isu-isu kesihatan SCI.<\/span>\n <\/li>\n <\/ul>\n <\/section>\n\n <!-- Section: Gemini LLM Feature - Activity Suggestions -->\n <section class=\"llm-feature-container\">\n <h2 class=\"section-title !mb-6\">Dapatkan Cadangan Aktiviti \u2728<\/h2>\n <p class=\"text-gray-700 mb-4\">Beritahu kami minat anda atau jenis kecederaan saraf tunjang (SCI) yang anda alami, dan kami akan mencadangkan aktiviti MASAA yang mungkin sesuai untuk anda!<\/p>\n <textarea id=\"activityInput\" placeholder=\"Contoh: Saya minat sukan, Saya baru SCI, Saya ingin belajar kemahiran baru...\" class=\"w-full\"><\/textarea>\n <button id=\"generateActivityBtn\" class=\"button-primary\">Jana Cadangan<\/button>\n <div id=\"activityOutput\" class=\"llm-output\">Cadangan aktiviti akan muncul di sini.<\/div>\n <\/section>\n\n <!-- Section: Jenis-Jenis Keahlian -->\n <section class=\"card-custom\">\n <h2 class=\"section-title\">Jenis-Jenis Keahlian<\/h2>\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\n <!-- Ahli Biasa -->\n <div class=\"membership-card type-biasa\">\n <div class=\"text-center\">\n <h3>a) Ahli Biasa<\/h3>\n <p class=\"text-gray-700\">Individu SCI berumur <span class=\"font-bold text-masa-blue-700\">18 tahun ke atas<\/span>.<\/p>\n <\/div>\n <\/div>\n <!-- Ahli Remaja -->\n <div class=\"membership-card type-remaja\">\n <div class=\"text-center\">\n <h3>b) Ahli Remaja<\/h3>\n <p class=\"text-gray-700\">SCI <span class=\"font-bold text-masa-green-700\">bawah 18 tahun<\/span> \u2013 dengan kebenaran ibu bapa\/penjaga sah.<\/p>\n <\/div>\n <\/div>\n <!-- Ahli Bersekutu -->\n <div class=\"membership-card type-bersekutu\">\n <div class=\"text-center\">\n <h3>c) Ahli Bersekutu<\/h3>\n <p class=\"text-gray-700\">Terbuka kepada <span class=\"font-bold text-masa-purple-700\">sukarelawan, keluarga SCI, OKU lain, pengamal perubatan<\/span> dan individu yang berminat tentang SCI.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- Section: Poster Promosi Keahlian -->\n <section class=\"card-custom text-center !p-6\">\n <h2 class=\"section-title !mb-6\">Sertai Komuniti MASAA Hari Ini!<\/h2>\n <img decoding=\"async\" src=\"http:\/\/masaa.org.my\/v1\/wp-content\/uploads\/2025\/07\/Poster-Promosi-Keahlian-MASAA-Kemas-Kini-2025.jpg\" \n alt=\"[Poster Promosi Keahlian MASAA 2025]\" \n class=\"w-full h-auto rounded-lg shadow-md mx-auto max-w-2xl\">\n <div class=\"mt-8\">\n <a href=\"https:\/\/forms.gle\/WV2PXC6oPsmwr48VA\" target=\"_blank\" class=\"button-primary text-xl\">Daftar Sekarang!<\/a>\n <\/div>\n <\/section>\n\n\n <!-- Section: Bagaimana Ingin Mendaftar -->\n <section class=\"card-custom\">\n <h2 class=\"section-title\">Bagaimana Ingin Mendaftar Untuk Menjadi Ahli MASAA?<\/h2>\n <ol class=\"list-decimal list-inside text-gray-700 space-y-6 text-lg\">\n <li class=\"font-semibold mb-2 text-left\">\n Pemohon perlu mengisi Borang Pendaftaran melalui pautan di bawah:\n <!-- Button to open Google Form in a new tab -->\n <div class=\"mt-4 text-center\">\n <a href=\"https:\/\/forms.gle\/WV2PXC6oPsmwr48VA\" target=\"_blank\" class=\"button-primary text-base px-6 py-3\">Isi Borang Pendaftaran<\/a>\n <\/div>\n <\/li>\n <li class=\"font-semibold mb-2\">\n Pemohon perlu membuat bayaran yuran seumur hidup sebanyak <span class=\"font-bold text-masa-purple-700\">RM30.00<\/span> melalui online banking atau ATM\/CDM.\n <div class=\"account-info-block\">\n <p><strong>No Akaun Persatuan:<\/strong> <span class=\"font-bold\">564258589294<\/span><\/p>\n <p><strong>Nama Bank:<\/strong> Maybank<\/p>\n <p><strong>Nama Persatuan:<\/strong> MASAA<\/p>\n <\/div>\n <\/li>\n <li class=\"font-semibold mb-2\">\n Sila kemukakan slip\/bukti bayaran kepada Bendahari melalui WhatsApp atau e-mel.\n <p><a href=\"https:\/\/wa.me\/60193729325\" target=\"_blank\" class=\"link-style flex items-center\"><i class=\"fab fa-whatsapp mr-2 text-green-500 text-xl\"><\/i>019-3729325 (En. Azhari Ibrahim)<\/a><\/p>\n <p class=\"mt-2\"><a href=\"mailto:info@masaa.org.my\" class=\"link-style flex items-center\"><i class=\"fas fa-envelope mr-2 text-red-500 text-xl\"><\/i>info@masaa.org.my<\/a><\/p>\n <\/li>\n <li class=\"font-semibold mb-2 text-left\">\n Sebarang pertanyaan lanjut, boleh hubungi individu berikut:\n <div class=\"mt-4 space-y-4\">\n <!-- Contact Person 1: Mohd Rizat Mat Noor (Pengerusi) -->\n <div class=\"flex items-center p-3 rounded-lg bg-masa-green-50 border border-masa-green-100 shadow-sm\">\n <i class=\"fas fa-user-circle text-masa-green-700 text-2xl mr-4 flex-shrink-0\"><\/i>\n <div>\n <p class=\"font-bold text-masa-green-700\">Mohd Rizat Mat Noor (Pengerusi)<\/p>\n <div class=\"flex items-center space-x-3 mt-1 text-sm\">\n <a href=\"https:\/\/wa.me\/60136329836\" target=\"_blank\" class=\"link-style flex items-center text-green-600 hover:text-green-800\">\n <i class=\"fab fa-whatsapp text-xl mr-1\"><\/i> WhatsApp\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Contact Person 2: Dr Basri Husin (Setiausaha) -->\n <div class=\"flex items-center p-3 rounded-lg bg-masa-blue-50 border border-masa-blue-100 shadow-sm\">\n <i class=\"fas fa-user-circle text-masa-blue-700 text-2xl mr-4 flex-shrink-0\"><\/i>\n <div>\n <p class=\"font-bold text-masa-blue-700\">Dr Basri Husin (Setiausaha)<\/p>\n <div class=\"flex items-center space-x-3 mt-1 text-sm\">\n <a href=\"https:\/\/wa.me\/60123920974\" target=\"_blank\" class=\"link-style flex items-center text-green-600 hover:text-green-800\">\n <i class=\"fab fa-whatsapp text-xl mr-1\"><\/i> WhatsApp\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Contact Person 3: En. Azhari Ibrahim (Bendahari) -->\n <div class=\"flex items-center p-3 rounded-lg bg-masa-purple-50 border border-masa-purple-100 shadow-sm\">\n <i class=\"fas fa-user-circle text-masa-purple-700 text-2xl mr-4 flex-shrink-0\"><\/i>\n <div>\n <p class=\"font-bold text-masa-purple-700\">En. Azhari Ibrahim (Bendahari)<\/p>\n <div class=\"flex items-center space-x-3 mt-1 text-sm\">\n <a href=\"https:\/\/wa.me\/60193729325\" target=\"_blank\" class=\"link-style flex items-center text-green-600 hover:text-green-800\">\n <i class=\"fab fa-whatsapp text-xl mr-1\"><\/i> WhatsApp\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/li>\n <\/ol>\n <div class=\"mt-10 text-center\">\n <!-- This button is now redundant as it's moved to the header -->\n <\/div>\n <\/section>\n <\/main>\n\n <footer class=\"w-full bg-white shadow-lg rounded-xl p-6 mt-10 text-center text-gray-600 container-custom text-md\">\n <p>© 2025 MASAA. Hak Cipta Terpelihara.<\/p>\n <p class=\"mt-1\">E-mel: <a href=\"mailto:info@masaa.org.my\" class=\"link-style\">info@masaa.org.my<\/a><\/p>\n <p class=\"mt-1\">Alamat: DLR 01-01, PPAM DALUR, Presint 18, Putrajaya.<\/p>\n <\/footer>\n <\/div>\n\n <script>\n document.addEventListener('DOMContentLoaded', function() {\n const slides = document.querySelectorAll('.carousel-slide');\n const dotsContainer = document.querySelector('.carousel-dots');\n const dots = [];\n let currentSlide = 0;\n let slideInterval; \/\/ Variable to hold the interval for auto-play\n\n \/\/ Create dots dynamically\n slides.forEach((_, index) => {\n const dot = document.createElement('span');\n dot.classList.add('dot', 'w-3', 'h-3', 'bg-white', 'bg-opacity-50', 'rounded-full', 'cursor-pointer', 'hover:bg-opacity-75', 'transition-colors', 'duration-300');\n dot.addEventListener('click', () => {\n showSlide(index);\n resetAutoPlay();\n });\n dotsContainer.appendChild(dot);\n dots.push(dot);\n });\n\n \/\/ Function to show a specific slide\n function showSlide(index) {\n \/\/ Hide all slides and deactivate all dots\n slides.forEach(slide => slide.classList.remove('active', 'opacity-1'));\n dots.forEach(dot => dot.classList.remove('active', 'bg-masa-purple-500'));\n\n \/\/ Show the current slide and activate its dot\n slides[index].classList.add('active', 'opacity-1');\n dots[index].classList.add('active', 'bg-masa-purple-500');\n currentSlide = index;\n }\n\n \/\/ Function to go to the next slide\n function nextSlide() {\n currentSlide = (currentSlide + 1) % slides.length;\n showSlide(currentSlide);\n }\n\n \/\/ Function to go to the previous slide\n function prevSlide() {\n currentSlide = (currentSlide - 1 + slides.length) % slides.length;\n showSlide(currentSlide);\n }\n\n \/\/ Auto-play functionality\n function startAutoPlay() {\n slideInterval = setInterval(nextSlide, 5000); \/\/ Change slide every 5 seconds\n }\n\n function stopAutoPlay() {\n clearInterval(slideInterval);\n }\n\n function resetAutoPlay() {\n stopAutoPlay();\n startAutoPlay();\n }\n\n \/\/ Event listeners for navigation buttons\n document.querySelector('.next-btn').addEventListener('click', () => {\n nextSlide();\n resetAutoPlay();\n });\n document.querySelector('.prev-btn').addEventListener('click', () => {\n prevSlide();\n resetAutoPlay();\n });\n\n \/\/ Initial display\n showSlide(0);\n startAutoPlay(); \/\/ Start auto-play when the page loads\n\n \/\/ LLM Feature Logic\n const activityInput = document.getElementById('activityInput');\n const generateActivityBtn = document.getElementById('generateActivityBtn');\n const activityOutput = document.getElementById('activityOutput');\n\n generateActivityBtn.addEventListener('click', async () => {\n const userInterest = activityInput.value.trim();\n if (!userInterest) {\n activityOutput.textContent = \"Sila masukkan minat anda atau jenis SCI untuk mendapatkan cadangan.\";\n activityOutput.classList.remove('has-content');\n return;\n }\n\n activityOutput.textContent = \"Sedang menjana cadangan aktiviti... Sila tunggu.\";\n activityOutput.classList.remove('has-content'); \/\/ Remove previous content class\n activityOutput.style.fontStyle = 'italic'; \/\/ Set italic during loading\n\n try {\n let chatHistory = [];\n \/\/ Provide context about MASAA and its activities to the LLM\n const context = `Anda adalah pembantu untuk Persatuan Kecederaan Saraf Tunjang Malaysia (MASAA). Berdasarkan maklumat berikut tentang peluang dan jenis keahlian, cadangkan aktiviti yang relevan untuk pengguna.\n Peluang:\n - Melebarkan jaringan SCI di Malaysia dan Antarabangsa.\n - Menambah ilmu SCI melalui program yang dianjurkan.\n - Mendapat bimbingan Kumpulan Rakan Sokongan (Support group) melalui mentor terpilih.\n - Mengadvokasi dan memperjuangkan hak-hak SCI di pelbagai peringkat.\n - Mendapat maklumat terkini berkaitan Aktiviti Kehidupan Harian (ADL) SCI.\n - Medium perantara dan sumber rujukan isu-isu kesihatan SCI.\n\n Jenis Keahlian:\n - Ahli Biasa: Individu SCI 18 tahun ke atas.\n - Ahli Remaja: SCI bawah 18 tahun \u2013 dengan kebenaran ibu bapa.\n - Ahli Bersekutu: Sukarelawan, keluarga SCI, OKU lain, pengamal perubatan dan individu yang berminat tentang SCI.\n\n Berdasarkan minat pengguna: \"${userInterest}\", cadangkan 3-5 aktiviti atau manfaat khusus MASAA yang relevan. Berikan jawapan dalam Bahasa Melayu yang mesra dan membantu.`;\n\n chatHistory.push({ role: \"user\", parts: [{ text: context }] });\n\n const payload = { contents: chatHistory };\n const apiKey = \"\"; \/\/ Canvas will automatically provide the API key at runtime.\n const apiUrl = `https:\/\/generativelanguage.googleapis.com\/v1beta\/models\/gemini-2.0-flash:generateContent?key=${apiKey}`;\n\n const response = await fetch(apiUrl, {\n method: 'POST',\n headers: { 'Content-Type': 'application\/json' },\n body: JSON.stringify(payload)\n });\n\n const result = await response.json();\n\n if (result.candidates && result.candidates.length > 0 &&\n result.candidates[0].content && result.candidates[0].content.parts &&\n result.candidates[0].content.parts.length > 0) {\n const text = result.candidates[0].content.parts[0].text;\n activityOutput.textContent = text;\n activityOutput.classList.add('has-content'); \/\/ Add class when content is available\n activityOutput.style.fontStyle = 'normal'; \/\/ Reset font style\n } else {\n activityOutput.textContent = \"Maaf, tidak dapat menjana cadangan. Sila cuba lagi.\";\n activityOutput.classList.remove('has-content');\n activityOutput.style.fontStyle = 'italic';\n }\n } catch (error) {\n console.error(\"Error calling Gemini API:\", error);\n activityOutput.textContent = \"Ralat berlaku semasa menjana cadangan. Sila cuba lagi nanti.\";\n activityOutput.classList.remove('has-content');\n activityOutput.style.fontStyle = 'italic';\n }\n });\n });\n <\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Facebook-f Twitter Google-plus-g Envelope Sertai MASAA – Keahlian & Sukarelawan Sertai Kami sebagai Ahli danSukarelawan MASAA Perkasakan individu SCI di Malaysia ke arah masyarakat inklusif. Daftar Sekarang! Peluang Apabila Menyertai MASAA Peluang melebarkan jaringan SCI di Malaysia dan Antarabangsa. Peluang untuk menambah ilmu SCI melalui program yang dianjurkan. Peluang untuk mendapat bimbingan Kumpulan Rakan Sokongan […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-325","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/masaa.org.my\/v1\/wp-json\/wp\/v2\/pages\/325","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/masaa.org.my\/v1\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/masaa.org.my\/v1\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/masaa.org.my\/v1\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/masaa.org.my\/v1\/wp-json\/wp\/v2\/comments?post=325"}],"version-history":[{"count":20,"href":"http:\/\/masaa.org.my\/v1\/wp-json\/wp\/v2\/pages\/325\/revisions"}],"predecessor-version":[{"id":1396,"href":"http:\/\/masaa.org.my\/v1\/wp-json\/wp\/v2\/pages\/325\/revisions\/1396"}],"wp:attachment":[{"href":"http:\/\/masaa.org.my\/v1\/wp-json\/wp\/v2\/media?parent=325"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}