{"id":1144,"date":"2025-11-05T03:28:01","date_gmt":"2025-11-05T03:28:01","guid":{"rendered":"https:\/\/abatablaster.xyz\/?page_id=1144"},"modified":"2025-11-07T22:46:46","modified_gmt":"2025-11-07T22:46:46","slug":"auto-add-member","status":"publish","type":"page","link":"https:\/\/abatablaster.xyz\/index.php\/auto-add-member\/","title":{"rendered":"Auto Add Member"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"ms\">\n\n<head>\n    <meta charset=\"UTF-8\" \/>\n    <title>Auto Add Member \u2013 AbataBlaster<\/title>\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\" \/>\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/sweetalert2@11\"><\/script>\n\n    <style>\n        \/* ============ Base \/ Tema sama dengan Auto Join ============ *\/\n        :root {\n            --green: #2e7d32;\n            --green-2: #226624;\n            --green-3: #215e2e;\n            --bg: #eef9f0;\n            --muted: #668d6b;\n            --card: #fcfffb;\n            --border: #cbe8d6;\n            --border-2: #e0e0e0;\n            --shadow: 0 4px 24px rgba(54, 196, 124, .07), 0 2px 10px rgba(0, 0, 0, .05);\n        }\n\n        * {\n            box-sizing: border-box\n        }\n\n        body {\n            background: var(--bg);\n            font-family: system-ui, 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;\n            margin: 0;\n            padding: 0;\n        }\n\n        h3 {\n            color: var(--green);\n            text-align: center;\n            margin: 8px 0 14px;\n        }\n\n        .form-label {\n            font-weight: 600;\n            margin-top: 14px;\n            display: block;\n            color: var(--green-2);\n        }\n\n        .form-input,\n        select,\n        textarea {\n            width: 100%;\n            padding: 9px 12px;\n            margin: 6px 0 8px 0;\n            border: 1.2px solid var(--border);\n            border-radius: 7px;\n            background: #f9fff5;\n            font-size: 16px;\n            font-family: inherit;\n        }\n\n        textarea {\n            min-height: 120px;\n            resize: both;\n            overflow: auto;\n            max-width: 100%;\n        }\n\n        .row {\n            display: flex;\n            gap: 10px;\n            flex-wrap: wrap;\n            align-items: center;\n        }\n\n        .row>* {\n            flex: 1 1 220px;\n        }\n\n        .muted {\n            color: var(--muted);\n            font-size: 13px;\n        }\n\n        .card {\n            border: 1px solid var(--border-2);\n            border-radius: 10px;\n            padding: 12px;\n            background: var(--card);\n        }\n\n        .stack>* {\n            margin-top: 10px;\n        }\n\n        .btn {\n            background: var(--green);\n            color: #fff;\n            padding: 10px 16px;\n            border: none;\n            border-radius: 7px;\n            cursor: pointer;\n            font-size: 15px;\n            font-weight: 600;\n            margin-top: 6px;\n            transition: .15s;\n            box-shadow: 0 1.5px 4px rgba(54, 196, 124, .11);\n            display: inline-block;\n        }\n\n        .btn:hover,\n        .btn:focus {\n            background: #185734;\n        }\n\n        .btn.blue {\n            background: #1565c0;\n        }\n\n        .btn.gray {\n            background: #bdbdbd;\n            color: #333;\n        }\n\n        .btn.red {\n            background: #e53935;\n        }\n\n        pre.log {\n            background: #0d232c;\n            color: #d7ffe5;\n            border-radius: 8px;\n            padding: 12px;\n            overflow: auto;\n            max-height: 360px;\n            font-size: 13px;\n            line-height: 1.45;\n        }\n\n        code.badge {\n            background: #e8f5e9;\n            color: var(--green-2);\n            border: 1px solid var(--border);\n            border-radius: 999px;\n            padding: 2px 7px;\n            font-size: 12px;\n        }\n\n        .gridNumbers {\n            display: grid;\n            gap: 12px;\n            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n        }\n\n        .numCard {\n            border: 1.5px dashed #cfe9da;\n            background: #f6fff8;\n            border-radius: 12px;\n            padding: 10px 12px;\n            display: flex;\n            align-items: center;\n            gap: 10px;\n            cursor: pointer;\n            transition: box-shadow .15s, background .15s, border-color .15s;\n            font-size: 14px;\n            line-height: 1.25;\n        }\n\n        .numCard:hover {\n            box-shadow: 0 2px 8px rgba(0, 0, 0, .06);\n            background: #f3fff7;\n        }\n\n        .numCard input[type=\"checkbox\"] {\n            transform: scale(1.05);\n        }\n\n        .numTitle {\n            display: flex;\n            flex-direction: column;\n        }\n\n        .numName {\n            font-weight: 600;\n            color: var(--green-3);\n        }\n\n        .numMeta {\n            color: #5b8a66;\n            font-size: 12px;\n        }\n\n        .dot {\n            width: 9px;\n            height: 9px;\n            border-radius: 50%;\n            display: inline-block;\n            margin-right: 6px;\n        }\n\n        .dot.green {\n            background: #15b34a;\n            box-shadow: 0 0 0 2px #e7f7ee inset;\n        }\n\n        .dot.red {\n            background: #e53935;\n            box-shadow: 0 0 0 2px #fde9e8 inset;\n        }\n\n        @media (max-width:480px) {\n            .row>* {\n                flex-basis: 100%;\n            }\n        }\n\n        @media (max-width:600px) {\n            #wrap {\n                padding: 10px 8px 18px;\n            }\n\n            h3 {\n                font-size: 18px;\n            }\n\n            .form-input,\n            select,\n            textarea {\n                font-size: 15px;\n            }\n\n            .btn {\n                width: 100%;\n            }\n\n            pre.log {\n                max-height: 46vh;\n            }\n\n            .numCard {\n                padding: 8px 10px;\n                font-size: 13px;\n            }\n\n            .numMeta {\n                font-size: 11px;\n            }\n        }\n\n        @media (min-width:640px) {\n            .gridNumbers {\n                grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));\n            }\n        }\n\n        @media (min-width:1024px) {\n            .gridNumbers {\n                grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n            }\n        }\n\n        @media (min-width:1200px) {\n            pre.log {\n                max-height: 520px;\n            }\n        }\n\n        html {\n            scrollbar-gutter: stable;\n        }\n\n        html,\n        body {\n            overflow-x: hidden;\n        }\n\n        #wrap {\n            max-width: 1100px;\n            width: 100%;\n            margin: clamp(12px, 4vw, 32px) auto;\n            padding: clamp(14px, 2.5vw, 28px) clamp(16px, 3vw, 28px);\n            background: #fff;\n            border-radius: 14px;\n            box-shadow: var(--shadow);\n        }\n\n        .actions-center {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            gap: 10px;\n            flex-wrap: wrap;\n        }\n\n        .actions-center .muted {\n            width: 100%;\n            text-align: center;\n        }\n\n        \/* Susun \"Senarai Target\" ke bawah bila skrin kecil *\/\n        @media (max-width: 700px) {\n            .targetsRow {\n                flex-direction: column;\n            }\n\n            .targetsRow>div {\n                flex: 1 1 100%;\n                min-width: 0;\n                \/* elak himpit *\/\n            }\n\n            .targetsRow>div+div {\n                margin-top: 10px;\n                \/* ruang antara textarea & panel upload *\/\n            }\n        }\n    <\/style>\n\n    <!-- Firebase SDK (Compat) -->\n    <script src=\"https:\/\/www.gstatic.com\/firebasejs\/9.22.2\/firebase-app-compat.js\"><\/script>\n    <script src=\"https:\/\/www.gstatic.com\/firebasejs\/9.22.2\/firebase-auth-compat.js\"><\/script>\n    <script src=\"https:\/\/www.gstatic.com\/firebasejs\/9.22.2\/firebase-firestore-compat.js\"><\/script>\n\n    <!-- SheetJS untuk baca .xlsx -->\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/xlsx\/dist\/xlsx.full.min.js\"><\/script>\n<\/head>\n\n<body>\n    <div id=\"wrap\" class=\"stack\">\n        <div style=\"text-align:center;margin-bottom:10px;\">\n            <img decoding=\"async\" src=\"https:\/\/abatablaster.xyz\/wp-content\/uploads\/2025\/05\/photo_2024-05-16_15-47-59.jpg\" alt=\"Logo\"\n                style=\"max-height:86px;border-radius:14px;\">\n        <\/div>\n        <h3>\ud83d\udc65 Auto Add Member (WhatsApp)<\/h3>\n\n        <!-- PILIH NOMBOR -->\n        <label class=\"form-label\">\ud83d\udcf1 Pilih Nombor WhatsApp:<\/label>\n\n        <!-- SOLO -->\n        <div id=\"wrapSolo\">\n            <select id=\"numberSolo\" class=\"form-input\">\n                <option value=\"\">(memuatkan\u2026)<\/option>\n            <\/select>\n            <div class=\"muted\">Mode <code class=\"badge\">solo<\/code> menggunakan satu nombor sahaja.<\/div>\n        <\/div>\n\n        <!-- MULTI -->\n        <div id=\"wrapMulti\" style=\"display:none\">\n            <div id=\"numbersChecklist\" class=\"gridNumbers\"><\/div>\n            <div class=\"muted\">Mode <code class=\"badge\">gilir \/ parallel<\/code> membenarkan pilih banyak nombor.<\/div>\n        <\/div>\n\n        <!-- MODE + DELAY -->\n        <div class=\"row\">\n            <div style=\"flex:1;min-width:180px\">\n                <label class=\"form-label\">\u2699\ufe0f Mode<\/label>\n                <select id=\"mode\" class=\"form-input\">\n                    <option value=\"gilir\" selected>gilir \u2014 bot bergilir ikut target<\/option>\n                    <option value=\"solo\">solo \u2014 1 bot proses semua target<\/option>\n                    <option value=\"parallel\">parallel \u2014 agih target ikut nombor<\/option>\n                <\/select>\n            <\/div>\n\n            <div style=\"flex:1;min-width:140px\">\n                <label class=\"form-label\">\u23f1\ufe0f Delay Min (saat)<\/label>\n                <input id=\"delayMin\" class=\"form-input\" type=\"number\" min=\"1\" value=\"20\" \/>\n            <\/div>\n            <div style=\"flex:1;min-width:140px\">\n                <label class=\"form-label\">\u23f1\ufe0f Delay Max (saat)<\/label>\n                <input id=\"delayMax\" class=\"form-input\" type=\"number\" min=\"1\" value=\"40\" \/>\n            <\/div>\n            <div style=\"flex:1;min-width:160px\">\n                <label class=\"form-label\">\u2709\ufe0f DM Fallback<\/label>\n                <select id=\"dmFallback\" class=\"form-input\">\n                    <option value=\"true\" selected>Aktif (disaran)<\/option>\n                    <option value=\"false\">Matikan<\/option>\n                <\/select>\n            <\/div>\n\n            <div style=\"flex:1;min-width:220px\">\n                <label class=\"form-label\">\ud83e\udd16 DM dihantar oleh<\/label>\n                <select id=\"dmSender\" class=\"form-input\">\n                    <option value=\"\">Auto (ikut penambah \/ rules)<\/option>\n                    <!-- akan diisi dinamik dengan senarai nombor user -->\n                <\/select>\n                <div class=\"muted\">Jika pilih nombor, hanya nombor itu greet\/DM untuk group ini.<\/div>\n            <\/div>\n\n            <!-- GREET BEHAVIOUR (DINAMIK) -->\n            <div style=\"flex:1;min-width:220px\">\n                <label class=\"form-label\">\ud83c\udf9a\ufe0f Tetapan Greet (selepas ahli masuk)<\/label>\n                <label style=\"display:flex;gap:8px;align-items:center;margin:6px 0;\">\n                    <input id=\"sendFollowupDM\" type=\"checkbox\" checked>\n                    <span>Hantar DM greet (disaran)<\/span>\n                <\/label>\n                <label style=\"display:flex;gap:8px;align-items:center;margin:6px 0;\">\n                    <input id=\"sendGroupGreeting\" type=\"checkbox\">\n                    <span>Hantar greeting dalam group<\/span>\n                <\/label>\n                <div class=\"muted\">Anda boleh pilih salah satu, kedua-dua, atau matikan kedua-duanya.<\/div>\n            <\/div>\n        <\/div>\n\n        <!-- GROUP INPUT -->\n        <div class=\"row\">\n            <div>\n                <label class=\"form-label\">\ud83d\udd17 Group Invite Link (pilih salah satu)<\/label>\n                <input id=\"groupInviteLink\" class=\"form-input\" placeholder=\"https:\/\/chat.whatsapp.com\/XXXX...\" \/>\n                <div class=\"muted\">Jika isi link ini, <code>groupId<\/code> tidak perlu.<\/div>\n            <\/div>\n            <div>\n                <label class=\"form-label\">#\ufe0f\u20e3 Group ID (opsyen)<\/label>\n                <input id=\"groupId\" class=\"form-input\" placeholder=\"1203630xxxxxxxx@g.us\" \/>\n                <div class=\"muted\">Jika tahu <code>groupId<\/code>, boleh isi terus di sini.<\/div>\n            <\/div>\n        <\/div>\n\n        <!-- TARGETS -->\n        <label class=\"form-label\">\ud83c\udfaf Senarai Target (1 nombor setiap baris)<\/label>\n        <div class=\"row targetsRow\" style=\"align-items:flex-start\">\n            <div style=\"flex:2\">\n                <textarea id=\"targets\" class=\"form-input\" placeholder=\"cth:\n                60123456789\n                60198765432\n                62812xxxxxxx\"><\/textarea>\n                <div class=\"muted\">Format: tanpa \u201c+\u201d, hanya digit.<\/div>\n                <div class=\"muted\">Jumlah: <b id=\"targetsCount\">0<\/b> nombor.<\/div> <!-- \u2795 baru -->\n            <\/div>\n            <div style=\"flex:1;min-width:220px\">\n                <label class=\"form-label\">\ud83d\udce4 Muat naik fail nombor<\/label>\n                <input id=\"fileUploadTargets\" class=\"form-input\" type=\"file\" accept=\".txt,.csv,.xlsx\" \/>\n                <div class=\"muted\">Sokong: <code>.txt<\/code>, <code>.csv<\/code>, <code>.xlsx<\/code>. Kami akan kesan\n                    nombor automatik &#038; isi ke senarai.<\/div>\n                <button id=\"btnClearTargets\" class=\"btn gray\" style=\"width:100%;margin-top:8px;\">Kosongkan\n                    Senarai<\/button>\n            <\/div>\n        <\/div>\n\n        <!-- TEMPLATE DM & GREET (OPSYENAL) -->\n        <div class=\"row\">\n            <div>\n                <label class=\"form-label\">\u2709\ufe0f Template DM Ajak Join (fallback)<\/label>\n                <textarea id=\"tplDmInvite\" class=\"form-input\"\n                    placeholder=\"cth: Hai! Sila sertai {group} melalui pautan ini: {link}\"><\/textarea>\n                <div class=\"muted\">Placeholder disokong: <code>{link}<\/code>, <code>{group}<\/code>, <code>{name}<\/code>,\n                    <code>{greeter}<\/code>\n                <\/div>\n            <\/div>\n            <div>\n                <label class=\"form-label\">\ud83e\udd1d Template DM Greet (selepas join)<\/label>\n                <textarea id=\"tplDmFollow\" class=\"form-input\"\n                    placeholder=\"cth: Hi {name}! Terima kasih join {group}. Jika perlukan bantuan, reply mesej ini. \ud83d\ude42\"><\/textarea>\n                <div class=\"muted\">Placeholder disokong: <code>{name}<\/code>, <code>{group}<\/code><\/div>\n            <\/div>\n        <\/div>\n        <div>\n            <label class=\"form-label\">\ud83d\udc4b Template Greeting Dalam Group<\/label>\n            <textarea id=\"tplGreetGroup\" class=\"form-input\"\n                placeholder=\"cth: Selamat datang @&#123;name&#125;! Sila rujuk pinned.\"><\/textarea>\n            <div class=\"muted\">Untuk auto-mention ahli baharu, gunakan <code>@&#123;name&#125;<\/code> (akan ditukar jadi\n                @6012&#8230;)<\/div>\n        <\/div>\n\n        <!-- ACTIONS -->\n        <div class=\"actions-center\">\n            <button id=\"btnStart\" class=\"btn blue\">\ud83d\ude80 Mula Auto-Add<\/button>\n            <button id=\"btnStop\" class=\"btn red\" disabled>\u23f9\ufe0f Stop Job<\/button>\n            <span id=\"hint\" class=\"muted\"><\/span>\n            <code id=\"statusPill\" class=\"badge\">IDLE<\/code>\n        <\/div>\n\n        <!-- LOG -->\n        <div class=\"card\">\n            <div class=\"row\" style=\"justify-content:space-between;align-items:center\">\n                <strong>Hasil &#038; Log<\/strong>\n                <div>\n                    <button id=\"btnClearLog\" class=\"btn gray\">Clear Log<\/button>\n                <\/div>\n            <\/div>\n            <pre id=\"log\" class=\"log\">\u2014 tiada log lagi \u2014<\/pre>\n        <\/div>\n    <\/div>\n\n    <script src=\"\/js\/auto-add-member.js\"><\/script>\n<\/body>\n\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Auto Add Member \u2013 AbataBlaster \ud83d\udc65 Auto Add Member (WhatsApp) \ud83d\udcf1 Pilih Nombor WhatsApp: (memuatkan\u2026) Mode solo menggunakan satu nombor sahaja. Mode gilir \/ parallel membenarkan pilih banyak nombor. \u2699\ufe0f Mode gilir \u2014 bot bergilir ikut targetsolo \u2014 1 bot proses semua targetparallel \u2014 agih target ikut nombor \u23f1\ufe0f Delay Min (saat) \u23f1\ufe0f Delay Max [&hellip;]<\/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-1144","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/abatablaster.xyz\/index.php\/wp-json\/wp\/v2\/pages\/1144","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/abatablaster.xyz\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/abatablaster.xyz\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/abatablaster.xyz\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/abatablaster.xyz\/index.php\/wp-json\/wp\/v2\/comments?post=1144"}],"version-history":[{"count":12,"href":"https:\/\/abatablaster.xyz\/index.php\/wp-json\/wp\/v2\/pages\/1144\/revisions"}],"predecessor-version":[{"id":1156,"href":"https:\/\/abatablaster.xyz\/index.php\/wp-json\/wp\/v2\/pages\/1144\/revisions\/1156"}],"wp:attachment":[{"href":"https:\/\/abatablaster.xyz\/index.php\/wp-json\/wp\/v2\/media?parent=1144"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}