{"id":21,"date":"2025-09-01T01:39:51","date_gmt":"2025-09-01T01:39:51","guid":{"rendered":"https:\/\/nusantarahijau.or.id\/?page_id=21"},"modified":"2025-09-04T04:49:27","modified_gmt":"2025-09-04T04:49:27","slug":"get-involved","status":"publish","type":"page","link":"https:\/\/nusantarahijau.or.id\/?page_id=21","title":{"rendered":"Get involved"},"content":{"rendered":"\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>Donasi<\/summary>\n<style>\n  .donation-card {\n    max-width: 320px;\n    margin: 20px auto;\n    padding: 20px;\n    border: 1px solid #e5e7eb;\n    border-radius: 16px;\n    background: #fff;\n    box-shadow: 0 4px 12px rgba(0,0,0,.05);\n    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\n    text-align: center;\n  }\n\n  .donation-field {\n    margin-bottom: 14px;\n    text-align: left;\n  }\n\n  .donation-label {\n    display: block;\n    margin-bottom: 6px;\n    font-weight: 600;\n  }\n\n  .field-wrap {\n    width: 90%;\n    margin: 0 auto;\n  }\n\n  .donation-input,\n  .donation-textarea {\n    width: 100%;\n    display: block;\n    padding: 10px 12px;\n    border: 1px solid #d1d5db;\n    border-radius: 10px;\n    font-size: .95rem;\n    outline: none;\n    box-sizing: border-box;\n  }\n\n  .donation-input:focus,\n  .donation-textarea:focus {\n    border-color: #2563eb;\n    box-shadow: 0 0 0 3px rgba(37,99,235,.15);\n  }\n\n  .rp-wrap {\n    position: relative;\n  }\n\n  .rp-wrap .rp-prefix {\n    position: absolute;\n    left: 12px;\n    top: 50%;\n    transform: translateY(-50%);\n    color: #6b7280;\n    pointer-events: none;\n  }\n\n  .rp-wrap .donation-input {\n    padding-left: 42px; \/* ruang untuk Rp *\/\n  }\n\n  \/* Tombol disamakan dengan volunteer\/adopt form *\/\n  .donation-submit {\n    width: 90%;\n    margin: 10px auto 0;\n    display: block;\n    padding: 12px;\n    border: none;\n    border-radius: 8px;\n    background: #16a34a;\n    color: #fff;\n    font-size: 15px;\n    font-weight: 600;\n    cursor: pointer;\n    transition: background 0.3s ease;\n  }\n\n  .donation-submit:hover {\n    background: #15803d;\n  }\n\n  .donation-success {\n    margin-top: 12px;\n    padding: 10px;\n    border-radius: 10px;\n    background: #ecfdf5;\n    border: 1px solid #bbf7d0;\n    color: #065f46;\n    font-size: 0.9rem;\n    display: none;\n    text-align: center;\n  }\n<\/style>\n\n\n<form id=\"donationForm\" class=\"donation-card\">\n  <h2>Donasi<\/h2>\n\n  <!-- Nama Lengkap -->\n  <div class=\"donation-field\">\n    <label class=\"donation-label\">Nama Lengkap<\/label>\n    <div class=\"field-wrap\">\n      <input type=\"text\" class=\"donation-input\" name=\"nama\" placeholder=\"Nama lengkap\" required>\n    <\/div>\n  <\/div>\n\n  <!-- Jumlah Donasi -->\n  <div class=\"donation-field\">\n    <label class=\"donation-label\">Jumlah Donasi<\/label>\n    <div class=\"field-wrap rp-wrap\">\n      <span class=\"rp-prefix\">Rp<\/span>\n      <input type=\"number\" class=\"donation-input\" name=\"jumlah\" placeholder=\"100000\" min=\"10000\" step=\"1000\" required>\n    <\/div>\n  <\/div>\n\n  <!-- Pesan -->\n  <div class=\"donation-field\">\n    <label class=\"donation-label\">Pesan<\/label>\n    <div class=\"field-wrap\">\n      <textarea class=\"donation-textarea\" name=\"pesan\" rows=\"3\" placeholder=\"Tulis pesan\"><\/textarea>\n    <\/div>\n  <\/div>\n\n  <!-- Tombol -->\n  <button type=\"submit\" class=\"donation-submit\">Kirim Donasi<\/button>\n\n  <!-- Notifikasi -->\n  <div id=\"donationSuccess\" class=\"donation-success\">\n    Terima kasih! Donasi kamu sudah tercatat.\n  <\/div>\n<\/form>\n\n<script>\n  const form = document.getElementById('donationForm');\n  const successBox = document.getElementById('donationSuccess');\n\n  form.addEventListener('submit', function (e) {\n    e.preventDefault(); \/\/ cegah reload halaman\n\n    \/\/ tampilkan pesan sukses\n    successBox.style.display = 'block';\n\n    \/\/ reset form\n    form.reset();\n\n    \/\/ sembunyikan pesan sukses setelah 3 detik (opsional)\n    setTimeout(() => {\n      successBox.style.display = 'none';\n    }, 3000);\n  });\n<\/script>\n\n<\/details>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>Adopsi Pohon<\/summary>\n<style>\n  .adopt-form {\n    max-width: 360px;\n    margin: 20px auto;\n    padding: 20px;\n    border: 1px solid #e5e7eb;\n    border-radius: 16px;\n    background: #fff;\n    box-shadow: 0 4px 12px rgba(0,0,0,.05);\n    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\n  }\n  .adopt-form h2 {\n    font-size: 20px;\n    margin-bottom: 15px;\n    text-align: center;\n    color: #065f46;\n  }\n  .adopt-form label {\n    display: block;\n    margin-bottom: 6px;\n    font-weight: 500;\n    color: #374151;\n  }\n  .adopt-form select,\n  .adopt-form input {\n    width: 100%;\n    padding: 10px;\n    margin-bottom: 14px;\n    border: 1px solid #d1d5db;\n    border-radius: 8px;\n    font-size: 14px;\n  }\n  .price-box {\n    padding: 12px;\n    margin: 10px 0;\n    background: #f0fdf4;\n    border: 1px solid #bbf7d0;\n    border-radius: 8px;\n    font-weight: bold;\n    text-align: center;\n    color: #065f46;\n    display: none;\n  }\n  .benefit-box {\n    margin-top: 6px;\n    font-size: 14px;\n    color: #374151;\n    text-align: center;\n    display: none;\n  }\n  \/* Tombol disamakan dengan volunteer-form *\/\n  .adopt-form button {\n    width: 100%;\n    background: #16a34a; \/* Hijau *\/\n    color: #fff;\n    border: none;\n    padding: 12px;\n    border-radius: 8px;\n    font-size: 15px;\n    font-weight: 600;\n    cursor: pointer;\n    transition: background 0.3s ease;\n  }\n  .adopt-form button:hover {\n    background: #15803d; \/* Hijau lebih gelap *\/\n  }\n<\/style>\n\n\n<div class=\"adopt-form\">\n  <h2>Adopsi Pohon<\/h2>\n  <form onsubmit=\"handleSubmit(event)\">\n    <label for=\"tree\">Pilih Jenis<\/label>\n    <select id=\"tree\" name=\"tree\" onchange=\"updatePrice()\" required>\n      <option value=\"\">&#8212; Pilih &#8212;<\/option>\n      <option value=\"pohon\">Pohon<\/option>\n      <option value=\"mangrove\">Mangrove<\/option>\n    <\/select>\n\n    <label for=\"quantity\">Jumlah Bibit<\/label>\n    <input type=\"number\" id=\"quantity\" name=\"quantity\" min=\"1\" value=\"1\" onchange=\"updatePrice()\" required>\n\n    <div id=\"priceBox\" class=\"price-box\"><\/div>\n    <div id=\"benefitBox\" class=\"benefit-box\"><\/div>\n\n    <button type=\"submit\">Adopsi Sekarang<\/button>\n  <\/form>\n<\/div>\n\n<script>\n  function updatePrice() {\n    const tree = document.getElementById(\"tree\").value;\n    const quantity = parseInt(document.getElementById(\"quantity\").value) || 0;\n    const priceBox = document.getElementById(\"priceBox\");\n    const benefitBox = document.getElementById(\"benefitBox\");\n\n    let unitPrice = 0;\n    let benefitText = \"\";\n\n    if (tree === \"pohon\") {\n      unitPrice = 100000;\n      benefitText = \"\u2705 Dapat Sertifikat & Laporan Pertumbuhan\";\n    } else if (tree === \"mangrove\") {\n      unitPrice = 150000;\n      benefitText = \"\ud83d\udccd Tracking Lokasi via GPS\";\n    }\n\n    if (unitPrice > 0 && quantity > 0) {\n      const total = unitPrice * quantity;\n      priceBox.innerText = \"Total: Rp \" + total.toLocaleString(\"id-ID\");\n      priceBox.style.display = \"block\";\n\n      benefitBox.innerText = benefitText;\n      benefitBox.style.display = \"block\";\n    } else {\n      priceBox.style.display = \"none\";\n      benefitBox.style.display = \"none\";\n    }\n  }\n\n  function handleSubmit(event) {\n    event.preventDefault(); \/\/ cegah reload halaman\n\n    \/\/ reset form\n    document.getElementById(\"tree\").value = \"\";\n    document.getElementById(\"quantity\").value = 1;\n    document.getElementById(\"priceBox\").style.display = \"none\";\n    document.getElementById(\"benefitBox\").style.display = \"none\";\n  }\n<\/script>\n\n<\/details>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>Menjadi Relawan<\/summary>\n<style>\n  .volunteer-form {\n    max-width: 360px;\n    margin: 20px auto;\n    padding: 20px;\n    border: 1px solid #e5e7eb;\n    border-radius: 16px;\n    background: #fff;\n    box-shadow: 0 4px 12px rgba(0,0,0,.05);\n    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\n  }\n  .volunteer-form h2 {\n    text-align: center;\n    margin-bottom: 15px;\n    font-size: 20px;\n    color: #111827;\n  }\n  .volunteer-form label {\n    display: block;\n    margin-bottom: 6px;\n    font-weight: 600;\n    font-size: 14px;\n    color: #374151;\n  }\n  .volunteer-form input {\n    width: 100%;\n    padding: 10px;\n    margin-bottom: 15px;\n    border: 1px solid #d1d5db;\n    border-radius: 8px;\n    font-size: 14px;\n  }\n  .volunteer-form button {\n    width: 100%;\n    background: #16a34a; \/* Hijau *\/\n    color: #fff;\n    border: none;\n    padding: 12px;\n    border-radius: 8px;\n    font-size: 15px;\n    font-weight: 600;\n    cursor: pointer;\n    transition: background 0.3s ease;\n  }\n  .volunteer-form button:hover {\n    background: #15803d; \/* Hijau lebih gelap *\/\n  }\n<\/style>\n\n<div class=\"volunteer-form\">\n  <h2>Bergabung Sebagai Relawan<\/h2>\n  <form id=\"relawanForm\" action=\"#\" method=\"post\">\n    <label for=\"name\">Nama Lengkap<\/label>\n    <input type=\"text\" id=\"name\" name=\"name\" placeholder=\"Masukkan nama lengkap\" required>\n\n    <label for=\"email\">Email<\/label>\n    <input type=\"email\" id=\"email\" name=\"email\" placeholder=\"Masukkan email\" required>\n\n    <label for=\"phone\">Nomor Telepon<\/label>\n    <input type=\"tel\" id=\"phone\" name=\"phone\" placeholder=\"08xxxxxxxxxx\" required>\n\n    <button type=\"submit\">Bergabung<\/button>\n  <\/form>\n<\/div>\n\n<script>\n  document.getElementById(\"relawanForm\").addEventListener(\"submit\", function(e) {\n    e.preventDefault(); \/\/ cegah reload halaman\n    this.reset(); \/\/ reset form\n  });\n<\/script>\n\n<\/details>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>Kemitraan perusahaan<\/summary>\n<!doctype html>\n<html lang=\"id\">\n<head>\n  <meta charset=\"utf-8\" \/>\n  <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\" \/>\n  <title>Formulir Kemitraan<\/title>\n<style>\n  body {\n    font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;\n    line-height: 1.5;\n    margin: 0;\n    padding: 20px;\n    background: #f7fafc;\n  }\n  .card {\n    background: #fff;\n    border-radius: 12px;\n    padding: 20px;\n    max-width: 480px;\n    margin: auto;\n    box-shadow: 0 6px 20px rgba(15,23,42,0.06);\n  }\n  form {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n  }\n  label {\n    font-size: 13px;\n    color: #6b7280;\n  }\n  input[type=text],\n  input[type=email],\n  textarea {\n    width: 100%;\n    padding: 10px;\n    border: 1px solid #e6e7ea;\n    border-radius: 10px;\n    font-size: 14px;\n  }\n  textarea {\n    min-height: 110px;\n    resize: vertical;\n  }\n\n  \/* Tombol diseragamkan *\/\n  .submit {\n    background: #16a34a;\n    color: #fff;\n    padding: 12px;\n    border: none;\n    border-radius: 8px;\n    font-size: 15px;\n    font-weight: 600;\n    cursor: pointer;\n    transition: background 0.3s ease;\n  }\n  .submit:hover {\n    background: #15803d;\n  }\n  .submit:active {\n    transform: translateY(1px);\n  }\n\n  .muted-small {\n    font-size: 13px;\n    color: #6b7280;\n  }\n<\/style>\n\n<\/head>\n<body>\n  <form class=\"card\" aria-labelledby=\"form-heading\" onsubmit=\"submitForm(event)\">\n    <h2 id=\"form-heading\">Formulir Kemitraan<\/h2>\n\n    <label for=\"company\">Nama Perusahaan<\/label>\n    <input id=\"company\" name=\"company\" type=\"text\" placeholder=\"Contoh: PT. Contoh Bersama\" required \/>\n\n    <label for=\"email\">Email<\/label>\n    <input id=\"email\" name=\"email\" type=\"email\" placeholder=\"nama@domain.com\" required \/>\n\n    <label for=\"message\">Pesan \/ Rencana Kerja Singkat<\/label>\n    <textarea id=\"message\" name=\"message\" placeholder=\"Jelaskan tujuan kolaborasi...\"><\/textarea>\n\n    <button type=\"submit\" class=\"submit\">Kirim Permintaan<\/button>\n  <\/form>\n\n  <script>\n    function submitForm(e){\n      e.preventDefault();\n      const form = e.target;\n      const data = new FormData(form);\n      if(!data.get('company') || !data.get('email')){\n        alert('Mohon lengkapi field yang diperlukan.');\n        return;\n      }\n      form.reset(); \/\/ reset otomatis\n    }\n  <\/script>\n<\/body>\n<\/html>\n\n<\/details>\n<\/div>\n<\/div>\n\n\n\n<script>\n  document.querySelectorAll(\"details\").forEach((el) => {\n    el.addEventListener(\"toggle\", function () {\n      if (this.open) {\n        document.querySelectorAll(\"details\").forEach((other) => {\n          if (other !== this) {\n            other.removeAttribute(\"open\");\n          }\n        });\n      }\n    });\n  });\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-21","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nusantarahijau.or.id\/index.php?rest_route=\/wp\/v2\/pages\/21","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nusantarahijau.or.id\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nusantarahijau.or.id\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nusantarahijau.or.id\/index.php?rest_route=\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/nusantarahijau.or.id\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=21"}],"version-history":[{"count":15,"href":"https:\/\/nusantarahijau.or.id\/index.php?rest_route=\/wp\/v2\/pages\/21\/revisions"}],"predecessor-version":[{"id":363,"href":"https:\/\/nusantarahijau.or.id\/index.php?rest_route=\/wp\/v2\/pages\/21\/revisions\/363"}],"wp:attachment":[{"href":"https:\/\/nusantarahijau.or.id\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=21"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}