{"id":918,"date":"2025-08-08T05:42:40","date_gmt":"2025-08-08T05:42:40","guid":{"rendered":"https:\/\/abatablaster.xyz\/?page_id=918"},"modified":"2025-08-19T01:54:51","modified_gmt":"2025-08-19T01:54:51","slug":"group-blaster","status":"publish","type":"page","link":"https:\/\/abatablaster.xyz\/index.php\/group-blaster\/","title":{"rendered":"Group Blaster"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"ms\">\n\n<head>\n    <meta charset=\"UTF-8\">\n    <title>Blast Group WhatsApp \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    <style>\n        :root {\n            --brand-600: #2e7d32;\n            \/* hijau logo *\/\n            --brand-700: #185734;\n            --brand-50: #f4faf7;\n            --accent-600: #1565c0;\n            \/* biru button Extract *\/\n            --bg: #eef9f0;\n            --ink: #1b6532;\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        }\n\n        \/* elak overflow + kira padding dalam lebar elemen *\/\n        *,\n        *::before,\n        *::after {\n            box-sizing: border-box;\n        }\n\n        \/* responsif betul: penuh ruang di mobile, cap 1200px di desktop *\/\n        \/* pastikan kiraan width termasuk padding *\/\n        *,\n        *::before,\n        *::after {\n            box-sizing: border-box;\n        }\n\n        \/* FULL-BLEED (break-out drpd column WP) *\/\n        #blastGroupSection {\n            \/* desktop \/ tablet: kekalkan break-out *\/\n            width: clamp(320px, 96vw, 1200px);\n            max-width: 1200px;\n            margin-left: max(0px, calc(50% - 48vw));\n            margin-right: max(0px, calc(50% - 48vw));\n            position: static;\n\n            margin-top: 26px;\n            margin-bottom: 26px;\n            padding: 28px clamp(12px, 2vw, 24px) 34px;\n            background: #fff;\n            border-radius: 16px;\n            box-shadow: 0 4px 26px rgba(54, 196, 124, .07), 0 2px 10px rgba(0, 0, 0, .05);\n        }\n\n        \/* tipografi & warna *\/\n        .form-label {\n            font-weight: 700;\n            margin-top: 18px;\n            display: block;\n            color: var(--brand-600)\n        }\n\n        .form-input,\n        select {\n            width: 100%;\n            padding: 11px 14px;\n            margin: 6px 0 8px;\n            border: 1.2px solid #cbe8d6;\n            border-radius: 10px;\n            background: #f9fff5;\n            font-size: 16px;\n            font-family: inherit;\n        }\n\n        .btn {\n            background: var(--brand-600);\n            color: #fff;\n            padding: 11px 18px;\n            border: none;\n            border-radius: 10px;\n            cursor: pointer;\n            font-size: 16px;\n            font-weight: 600;\n            margin: 10px 12px 0 0;\n            transition: .15s;\n            box-shadow: 0 1.5px 4px rgba(54, 196, 124, .11);\n        }\n\n        .btn:hover,\n        .btn:focus {\n            background: var(--brand-700)\n        }\n\n        \/* baris select + butang extract jadi inline di desktop *\/\n        \/* toolbar = dropdown nombor + butang Extract *\/\n        .row-toolbar {\n            display: grid;\n            grid-template-columns: 1fr max-content;\n            gap: 12px;\n            align-items: center;\n        }\n\n        \/* dua input sama lebar (delay min & max) *\/\n        .row-2col {\n            display: grid;\n            grid-template-columns: repeat(2, minmax(0, 1fr));\n            gap: 12px;\n        }\n\n        @media (max-width:700px) {\n\n            .row-toolbar,\n            .row-2col {\n                grid-template-columns: 1fr;\n            }\n        }\n\n        \/* table wrapper \u2013 sticky header + scroll *\/\n        .table-wrap {\n            border: 1px solid #e0e0e0;\n            border-radius: 12px;\n            background: #fff;\n        }\n\n        .table-scroll {\n            overflow: auto;\n            max-height: 56vh;\n        }\n\n        \/* jika parent tema ada padding tepi besar, benarkan scroll mendatar kecil je *\/\n        .table-wrap {\n            overflow-x: auto;\n        }\n\n        \/* tinggi selesa, auto scroll *\/\n        table {\n            width: 100%;\n            border-collapse: collapse;\n            font-size: 15px;\n        }\n\n        th,\n        td {\n            padding: 10px 12px;\n            border-bottom: 1px solid #ececec;\n            text-align: left\n        }\n\n        thead th {\n            position: sticky;\n            top: 0;\n            background: var(--brand-50);\n            z-index: 1\n        }\n\n        tbody tr:nth-child(even) {\n            background: #fbfffb\n        }\n\n        \/* kecilkan checkbox & kolum sempit *\/\n        th:first-child,\n        td:first-child {\n            width: 42px;\n            text-align: center\n        }\n\n        \/* textarea auto responsif *\/\n        textarea.form-input {\n            min-height: clamp(140px, 26vh, 340px);\n            resize: vertical;\n            \/* boleh tarik tinggi ikut keperluan *\/\n            line-height: 1.5;\n        }\n\n        \/* media preview *\/\n        .media-preview img,\n        .media-preview video {\n            max-width: 220px;\n            max-height: 140px;\n            margin-top: 8px;\n            border-radius: 10px;\n            box-shadow: 0 2px 9px rgba(54, 196, 124, .09)\n        }\n\n        \/* butang biru khusus Extract *\/\n        #extractGroupBtn {\n            background: var(--accent-600)\n        }\n\n        #extractGroupBtn:hover {\n            background: #0f4ea0\n        }\n\n        \/* mobile tweaks *\/\n        @media (max-width:600px) {\n            #blastGroupSection {\n                padding: 16px 10px 22px\n            }\n\n            .btn {\n                font-size: 14px;\n                padding: 9px 12px\n            }\n\n            table,\n            th,\n            td {\n                font-size: 13px\n            }\n        }\n\n        \/* === HOTFIX: Paksa center di skrin kecil === *\/\n        @media (max-width: 768px) {\n\n            html,\n            body {\n                overflow-x: hidden;\n            }\n\n            \/* elak skrol sisi *\/\n\n            #blastGroupSection {\n                position: relative !important;\n                left: 50% !important;\n                transform: translateX(-50%) !important;\n                \/* center ikut viewport *\/\n                width: calc(100vw - 24px) !important;\n                \/* 12px gutter kiri\/kanan *\/\n                max-width: none !important;\n\n                \/* margin aut o tak perlu bila guna left\/translate *\/\n                margin: 16px 0 !important;\n                margin-left: 0 !important;\n                margin-right: 0 !important;\n\n                \/* lindungi notch\/iOS *\/\n                padding-left: max(12px, env(safe-area-inset-left)) !important;\n                padding-right: max(12px, env(safe-area-inset-right)) !important;\n            }\n        }\n    <\/style>\n\n    <!-- Firebase SDK (WAJIB letak dahulu sebelum logic JS) -->\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    <script src=\"https:\/\/www.gstatic.com\/firebasejs\/9.22.2\/firebase-storage-compat.js\"><\/script>\n\n<\/head>\n\n<body>\n    <div id=\"blastGroupSection\">\n        <div style=\"text-align:center;margin-bottom:15px;\">\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:90px;border-radius:15px;\">\n        <\/div>\n        <h3 style=\"color:#2e7d32;text-align:center;margin-bottom:13px;\">\ud83d\udd0a Blast Group WhatsApp<\/h3>\n        <div id=\"statusBlast\" style=\"margin-bottom:13px;font-weight:600;color:#1b6532;text-align:center;\"><\/div>\n        <form id=\"formBlastGroup\" autocomplete=\"off\">\n            <!-- 1. Pilih nombor WhatsApp -->\n            <label class=\"form-label\">\ud83d\udcf1 Pilih Nombor WhatsApp:<\/label>\n            <div class=\"row-toolbar\">\n                <select id=\"nomborPengirim\" class=\"form-input\" required>\u2026<\/select>\n                <button type=\"button\" id=\"extractGroupBtn\" class=\"btn\" disabled>\ud83d\udd0e Extract Group<\/button>\n            <\/div>\n            <div id=\"extractGroupStatus\" style=\"color:#1b5e20;font-size:14px;margin-top:6px;\"><\/div>\n\n            <!-- 3. Table group -->\n            <div id=\"groupListSection\" style=\"display:none;margin-bottom:18px;\">\n                <label class=\"form-label\" style=\"margin-top:8px;\">\ud83d\udcc2 Pilih Group Untuk Blast:<\/label>\n                <div class=\"table-wrap\">\n                    <div class=\"table-scroll\">\n                        <table id=\"groupTable\">\n                            <thead>\n                                <tr>\n                                    <th><input type=\"checkbox\" id=\"selectAllGroups\"><\/th>\n                                    <th>Nama Group<\/th>\n                                    <th>Ahli<\/th>\n                                    <th>Group ID<\/th>\n                                <\/tr>\n                            <\/thead>\n                            <tbody><!-- diisi JS --><\/tbody>\n                        <\/table>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- 4. Caption\/message -->\n            <label class=\"form-label\">\ud83d\udcac Tulis Mesej\/Caption:<\/label>\n            <textarea id=\"groupBlastCaption\" class=\"form-input\" required\n                placeholder=\"Contoh: Hi! Ini info baru untuk ahli group...\"><\/textarea>\n\n            <!-- 5. Upload Media -->\n            <label class=\"form-label\">\ud83d\uddbc\ufe0f Upload Media (gambar\/video\/pdf):<\/label>\n            <input type=\"file\" id=\"groupMediaUpload\" accept=\"image\/*,video\/*,application\/pdf\" class=\"form-input\" \/>\n            <div class=\"media-preview\" id=\"groupMediaPreview\"><\/div>\n            <div id=\"uploadStatus\" style=\"color:#1565c0;font-weight:600;margin-top:6px;\"><\/div>\n            <small style=\"color:#8d8d8d;\">*Upload 1 file setiap blast (gambar\/video\/pdf, max 20MB).<\/small>\n\n            <!-- 6. Delay Setting -->\n            <label class=\"form-label\">\u23f1\ufe0f Delay antara setiap blast group (saat):<\/label>\n            <div class=\"row-2col\">\n                <input type=\"number\" id=\"delayMin\" class=\"form-input\" placeholder=\"Min (cth 3)\" min=\"1\" value=\"5\"\n                    required>\n                <input type=\"number\" id=\"delayMax\" class=\"form-input\" placeholder=\"Max (cth 10)\" min=\"1\" value=\"10\"\n                    required>\n            <\/div>\n\n            <!-- 7. Schedule Option -->\n            <label class=\"form-label\" style=\"margin-top:25px;\">\ud83d\udcc5 Pilihan Blast:<\/label>\n            <div style=\"margin-bottom:12px;\">\n                <label><input type=\"radio\" name=\"scheduleType\" value=\"now\" checked> Blast Sekarang<\/label>\n                <label style=\"margin-left:18px;\"><input type=\"radio\" name=\"scheduleType\" value=\"recurring\"> Blast\n                    Recurring (berulang)<\/label>\n                <label style=\"margin-left:18px;\"><input type=\"radio\" name=\"scheduleType\" value=\"manual\"> Blast Tarikh &#038;\n                    Masa Pilihan<\/label>\n            <\/div>\n\n            <!-- RECURRING -->\n            <div id=\"scheduleRecurringBlock\"\n                style=\"display:none; background:#f4faf7;padding:14px 12px 7px 12px;border-radius:8px;\">\n                <label class=\"form-label\">Mula pada:<\/label>\n                <input type=\"datetime-local\" id=\"recurringStart\" class=\"form-input\" \/>\n                <label class=\"form-label\">Berapa Kali? (cth 5):<\/label>\n                <input type=\"number\" id=\"recurringCount\" min=\"2\" max=\"30\" class=\"form-input\" style=\"max-width:80px;\"\n                    value=\"5\" \/>\n                <label class=\"form-label\">Jarak antara setiap blast:<\/label>\n                <select id=\"recurringInterval\" class=\"form-input\" style=\"max-width:200px;\">\n                    <option value=\"daily\">Setiap Hari<\/option>\n                    <option value=\"weekly\">Setiap Minggu<\/option>\n                    <option value=\"custom\">Custom (Isikan minit di bawah)<\/option>\n                <\/select>\n                <input type=\"number\" id=\"customRecurringMinutes\" class=\"form-input\"\n                    placeholder=\"Jarak custom (dalam minit, contoh: 120)\" style=\"max-width:200px;display:none;\">\n            <\/div>\n\n            <!-- MANUAL MULTI DATE -->\n            <div id=\"scheduleManualBlock\"\n                style=\"display:none; background:#f4faf7;padding:14px 12px 7px 12px;border-radius:8px;\">\n                <label class=\"form-label\">Pilih Tarikh &#038; Masa (max 10):<\/label>\n                <div id=\"manualDates\"><\/div>\n                <small id=\"manualDatesCount\" style=\"color:#166326;margin-left:5px;\"><\/small><br>\n                <button type=\"button\" id=\"addManualDateBtn\" class=\"btn\" style=\"background:#1565c0;\">+ Tambah\n                    Tarikh\/Masa<\/button>\n            <\/div>\n\n            <div style=\"margin-top:18px;text-align:center;\">\n                <button type=\"submit\" id=\"submitBlastBtn\" class=\"btn\" disabled>\ud83d\ude80 Mula Blast Group<\/button>\n                <button type=\"button\" id=\"resetFormBtn\" class=\"btn\"\n                    style=\"background:#bdbdbd;color:#333;\">Reset<\/button>\n            <\/div>\n            <!-- Kawalan Task -->\n            <div id=\"taskControls\" style=\"display:none;margin-top:10px;text-align:center;\">\n                <div id=\"taskStatusLine\" style=\"margin-bottom:8px;color:#1b6532;font-weight:600;\"><\/div>\n                <button type=\"button\" id=\"btnPause\" class=\"btn\" style=\"background:#f9a825;\">\u23f8\ufe0f Pause<\/button>\n                <button type=\"button\" id=\"btnResume\" class=\"btn\" style=\"background:#2e7d32;\">\u25b6\ufe0f Resume<\/button>\n                <button type=\"button\" id=\"btnStop\" class=\"btn\" style=\"background:#c62828;\">\ud83d\uded1 Stop<\/button>\n            <\/div>\n\n        <\/form>\n\n        <!-- Status blast -->\n        <div id=\"groupBlastStatusSection\" style=\"display:none;margin-top:30px;\">\n            <h4 style=\"color:#33691e;\">Status Blast Group (Live):<\/h4>\n            <div class=\"table-wrap\">\n                <div class=\"table-scroll\">\n                    <table id=\"groupBlastStatusTable\">\n                        <thead>\n                            <tr>\n                                <th>Nama Group<\/th>\n                                <th>Status<\/th>\n                                <th>Masa<\/th>\n                            <\/tr>\n                        <\/thead>\n                        <tbody><!-- diisi JS --><\/tbody>\n                    <\/table>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Sejarah blast -->\n        <div id=\"historySection\" style=\"display:none;margin-top:30px;\">\n            <h4 style=\"color:#33691e;\">Sejarah Blast Group (Terbaru \u2192 Lama):<\/h4>\n            <div class=\"table-wrap\">\n                <div class=\"table-scroll\">\n                    <table id=\"historyTable\">\n                        <thead>\n                            <tr>\n                                <th>Masa Cipta<\/th>\n                                <th>Pengirim<\/th>\n                                <th>Group<\/th>\n                                <th>Status<\/th>\n                                <th>Jenis Jadual<\/th>\n                                <th>Terakhir Jalan<\/th>\n                                <th>Next Run<\/th> <!-- \u2b05\ufe0f TAMBAH INI -->\n                                <th>Task ID<\/th>\n                            <\/tr>\n                        <\/thead>\n                        <tbody><!-- diisi JS --><\/tbody>\n                    <\/table>\n                <\/div>\n            <\/div>\n        <\/div>\n\n    <\/div>\n\n    <script type=\"module\" src=\"\/js\/group-blast.js\"><\/script>\n\n<\/body>\n\n<\/html>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Blast Group WhatsApp \u2013 AbataBlaster \ud83d\udd0a Blast Group WhatsApp \ud83d\udcf1 Pilih Nombor WhatsApp: \u2026 \ud83d\udd0e Extract Group \ud83d\udcc2 Pilih Group Untuk Blast: Nama Group Ahli Group ID \ud83d\udcac Tulis Mesej\/Caption: \ud83d\uddbc\ufe0f Upload Media (gambar\/video\/pdf): *Upload 1 file setiap blast (gambar\/video\/pdf, max 20MB). \u23f1\ufe0f Delay antara setiap blast group (saat): \ud83d\udcc5 Pilihan Blast: Blast Sekarang Blast [&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-918","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/abatablaster.xyz\/index.php\/wp-json\/wp\/v2\/pages\/918","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=918"}],"version-history":[{"count":43,"href":"https:\/\/abatablaster.xyz\/index.php\/wp-json\/wp\/v2\/pages\/918\/revisions"}],"predecessor-version":[{"id":1013,"href":"https:\/\/abatablaster.xyz\/index.php\/wp-json\/wp\/v2\/pages\/918\/revisions\/1013"}],"wp:attachment":[{"href":"https:\/\/abatablaster.xyz\/index.php\/wp-json\/wp\/v2\/media?parent=918"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}