{"id":733,"date":"2025-07-06T15:37:48","date_gmt":"2025-07-06T15:37:48","guid":{"rendered":"https:\/\/abatablaster.xyz\/?page_id=733"},"modified":"2025-10-07T02:26:05","modified_gmt":"2025-10-07T02:26:05","slug":"warmup-pairing","status":"publish","type":"page","link":"https:\/\/abatablaster.xyz\/index.php\/warmup-pairing\/","title":{"rendered":"Warmup-Pairing"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"ms\">\n\n<head>\n    <meta charset=\"UTF-8\">\n    <title>Warmup Pairing \u2013 AbataBlaster<\/title>\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    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/sweetalert2@11\"><\/script>\n    <script src=\"https:\/\/abatablaster.xyz\/js\/shared-status.js\"><\/script>\n\n    <style>\n        body {\n            font-family: 'Segoe UI', Arial, sans-serif;\n            background: #f2faf6;\n            color: #1a4321;\n            padding: 18px;\n        }\n\n        .card {\n            background: #fff;\n            padding: 18px 16px;\n            border-radius: 16px;\n            margin-bottom: 22px;\n            box-shadow: 0 3px 10px rgba(54, 196, 124, 0.07), 0 1.5px 5px rgba(0, 0, 0, 0.05);\n            border-left: 7px solid #36c47c;\n        }\n\n        h3 {\n            color: #1a7f4a;\n            font-weight: 600;\n            margin-top: 0;\n            margin-bottom: 12px;\n        }\n\n        label {\n            font-size: 15px;\n            color: #185734;\n            margin-bottom: 4px;\n            display: block;\n        }\n\n        .btn {\n            background: #36c47c;\n            color: #fff;\n            padding: 8px 16px;\n            border: none;\n            border-radius: 7px;\n            cursor: pointer;\n            font-size: 15px;\n            font-weight: 500;\n            margin: 4px 4px 0 0;\n            transition: background 0.15s;\n            min-width: 110px;\n        }\n\n        .btn:disabled {\n            opacity: 0.7;\n            background: #a5d6a7;\n            cursor: not-allowed;\n        }\n\n        .btn:hover,\n        .btn:focus {\n            background: #1a7f4a;\n        }\n\n        #stopBtn {\n            background: #d32f2f;\n        }\n\n        #stopBtn:hover {\n            background: #b71c1c;\n        }\n\n        .progress-log {\n            font-size: 14px;\n            background: #f7fcfa;\n            border: 1px solid #b3dbc5;\n            border-radius: 9px;\n            margin-top: 10px;\n            padding: 12px 18px;\n            max-height: 300px;\n            overflow-y: auto;\n        }\n    <\/style>\n<\/head>\n\n<body>\n    <!-- NEW: container responsif -->\n    <div class=\"container\">\n        <div style=\"text-align: center; margin-bottom: 30px;\">\n            <img decoding=\"async\" style=\"max-width: 180px; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.2);\"\n                src=\"https:\/\/abatablaster.xyz\/wp-content\/uploads\/2025\/05\/photo_2024-05-16_15-47-59.jpg\"\n                alt=\"Abata Blaster Logo\" \/>\n        <\/div>\n\n        <div id=\"statusHeader\" style=\"display: none;\">\n            <div id=\"topUserStatus\"\n                style=\"background: #f1f8e9; border: 1px solid #c5e1a5; padding: 15px; border-radius: 10px; margin-bottom: 30px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 30px; font-size: 14px;\">\n                <div>\n                    <div>\ud83d\udce7 <strong>Email:<\/strong> <span id=\"userEmail\">\u2013<\/span><\/div>\n                    <div>\ud83d\udcbc <strong>Pakej:<\/strong> <span id=\"infoPakej\">\u2013<\/span><\/div>\n                    <div>\ud83d\udce4 <strong>Mesej Baki:<\/strong> <span id=\"infoMesej\">\u2013<\/span> (<span id=\"infoHari\">\u2013<\/span>\n                        hari)\n                    <\/div>\n                    <div>\ud83d\udcf1 <strong>WhatsApp Aktif:<\/strong> <span id=\"infoNombor\">\u2013<\/span><\/div>\n                <\/div>\n                <div style=\"margin-left: auto; align-self: center; text-align: right;\">\n                    <a href=\"https:\/\/abatablaster.xyz\/index.php\/telegram-alert\/\"\n                        style=\"display:block; margin-bottom: 8px; color: #1565c0; font-weight: bold;\">\n                        \ud83d\udd14 Sambungkan Telegram\n                    <\/a>\n                    <button onclick=\"logout()\"\n                        style=\"background: #d32f2f; color: white; padding: 6px 15px; border-radius: 6px; border: none;\">\ud83d\udeaa\n                        Log\n                        Keluar<\/button>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- \u26a0\ufe0f AMARAN LANGGANAN TAMAT -->\n        <div id=\"amaranLangganan\"\n            style=\"display: none; background: #ffebee; border: 1px solid #f44336; color: #b71c1c; padding: 12px; border-radius: 10px; margin-bottom: 20px; font-weight: bold; text-align: center; animation: blink 1s step-end infinite;\">\n            \u26a0\ufe0f Langganan anda telah tamat atau mesej telah habis. Sila upgrade untuk terus gunakan sistem ini.\n        <\/div>\n\n        <style>\n            @keyframes blink {\n                50% {\n                    opacity: 0;\n                }\n            }\n\n            #numberListTable {\n                border-collapse: separate;\n                border-spacing: 0 1px;\n            }\n\n            #numberListTable th,\n            #numberListTable td {\n                border: none;\n                background: #fff;\n            }\n\n            #numberListTable tr {\n                border-radius: 7px;\n            }\n\n            #numberListTableBody tr:hover {\n                background: #e7ffe7;\n                transition: 0.2s;\n            }\n\n            \/* ====== THEME TOKENS (hijau) ====== *\/\n            :root {\n                --g-50: #f2faf6;\n                --g-100: #e9f7f0;\n                --g-200: #cfeadf;\n                --g-300: #b8e0c7;\n                --g-400: #7cd6a2;\n                --g-500: #36c47c;\n                --g-600: #1a7f4a;\n                --g-700: #185734;\n                --g-900: #0e3720;\n            }\n\n            \/* Container responsif: guna 92vw sampai 1180px, center *\/\n            .container {\n                max-width: clamp(320px, 92vw, 1180px);\n                margin: 0 auto;\n            }\n\n            \/* Kad selari tema hijau *\/\n            .card {\n                background: #fff;\n                border-left: 7px solid var(--g-500);\n                border-radius: 16px;\n                box-shadow: 0 6px 18px rgba(54, 196, 124, .08), 0 2px 6px rgba(0, 0, 0, .05);\n            }\n\n            \/* Tajuk kad *\/\n            .card h3 {\n                color: var(--g-600);\n                margin: 0 0 12px 0;\n                font-weight: 700;\n            }\n\n            \/* Butang hijau *\/\n            .btn {\n                background: var(--g-500);\n                border-radius: 10px;\n            }\n\n            .btn:hover,\n            .btn:focus {\n                background: var(--g-600);\n            }\n\n            \/* Input gaya hijau *\/\n            input[type=\"number\"],\n            input[type=\"text\"],\n            input[type=\"search\"] {\n                border: 1px solid var(--g-300);\n                border-radius: 10px;\n                padding: 8px 10px;\n                background: #fff;\n                outline: none;\n                box-shadow: 0 1px 0 rgba(0, 0, 0, .02) inset;\n            }\n\n            input[type=\"number\"]:focus {\n                border-color: var(--g-500);\n                box-shadow: 0 0 0 3px rgba(54, 196, 124, .15);\n            }\n\n            \/* Nota info *\/\n            .note {\n                font-size: 12px;\n                color: #1976d2;\n                margin-top: 10px;\n            }\n\n            \/* ====== TIMER GRID ====== *\/\n            .timer-grid {\n                display: grid;\n                grid-template-columns: 1.2fr 1fr .5fr 1fr;\n                \/* label | min | max-label | max *\/\n                gap: 12px 14px;\n                align-items: center;\n            }\n\n            .timer-label {\n                font-size: 13px;\n                color: var(--g-700);\n            }\n\n            .timer-max {\n                text-align: right;\n                font-size: 13px;\n                color: var(--g-700);\n            }\n\n            \/* ====== RESPONSIVE ====== *\/\n            @media (max-width: 900px) {\n                .timer-grid {\n                    grid-template-columns: 1fr 1fr;\n                    \/* label + min | max-label + max *\/\n                }\n\n                .timer-label {\n                    grid-column: 1 \/ 3;\n                }\n\n                .timer-max {\n                    text-align: left;\n                }\n            }\n\n            @media (max-width: 600px) {\n                .btn {\n                    width: 100%;\n                }\n            }\n        <\/style>\n\n        <div id=\"numberList\" style=\"margin-top:8px;\">\n            <table id=\"numberListTable\"\n                style=\"width:100%;background:#f7fcfa;border-radius:12px;box-shadow:0 1px 5px #eee;\">\n                <thead style=\"background:#f5faee;\">\n                    <tr>\n                        <th style=\"padding:6px 0;text-align:center;font-weight:600;color:#185734;font-size:15px;\">Pilih\n                        <\/th>\n                        <th style=\"padding:6px 0;text-align:center;font-weight:600;color:#185734;font-size:15px;\">Nombor\n                        <\/th>\n                        <th style=\"padding:6px 0;text-align:center;font-weight:600;color:#185734;font-size:15px;\">Label\n                        <\/th>\n                        <th style=\"padding:6px 0;text-align:center;font-weight:600;color:#185734;font-size:15px;\">Status\n                        <\/th>\n                    <\/tr>\n                <\/thead>\n                <tbody id=\"numberListTableBody\"><\/tbody>\n            <\/table>\n        <\/div>\n\n        <div class=\"card\" id=\"groupCard\">\n            <h3>Pilih Group WhatsApp (optional, untuk group warmup)<\/h3>\n            <button id=\"extractGroupsBtn\" class=\"btn\" type=\"button\">Extract Group<\/button>\n            <div id=\"groupList\" style=\"margin-top: 10px;\"><\/div>\n            <div style=\"font-size:13px;color:#b48200;margin-top:7px;\">\n                Pilih satu group &#8216;common&#8217; yang SEMUA nombor ini sudah join (WAJIB untuk group warmup).\n                <br>Jika tiada group dipilih, group warmup akan SKIP.\n            <\/div>\n        <\/div>\n\n        <div style=\"font-size:12px;color:#b48200;margin-top:7px;\">\n            Group warmup sangat disyorkan untuk nombor baru.<br>\n            Pilih group &#8216;common&#8217; (WAJIB semua nombor join group sama).<br>\n            Jika tiada group dipilih, proses group warmup akan SKIP.\n        <\/div>\n\n        <div class=\"card\">\n            <h3>Tetapan Pairing Cycle<\/h3>\n\n            <!-- Toggle guna custom timer -->\n            <label style=\"display:flex;align-items:center;gap:8px;margin:8px 0 12px 0;font-size:14px;\">\n                <input id=\"useCustomTimer\" type=\"checkbox\" \/>\n                Guna tetapan custom (optional). Jika tidak ditanda, sistem guna default selamat.\n            <\/label>\n\n            <!-- Panel Timer -->\n            <div id=\"timerForm\" style=\"display:none;\">\n                <div class=\"timer-grid\" style=\"margin-top:6px;\">\n                    <!-- 1: Durasi Pairing -->\n                    <div class=\"timer-label\">Durasi Pairing (min)<\/div>\n                    <div><input id=\"pairMin\" type=\"number\" min=\"0\" value=\"60\"><\/div>\n                    <div class=\"timer-max\">max<\/div>\n                    <div><input id=\"pairMax\" type=\"number\" min=\"0\" value=\"120\"><\/div>\n\n                    <!-- 2: Rehat Selepas Pairing -->\n                    <div class=\"timer-label\">Rehat Selepas Pairing (min)<\/div>\n                    <div><input id=\"restAfterPairMin\" type=\"number\" min=\"0\" value=\"30\"><\/div>\n                    <div class=\"timer-max\">max<\/div>\n                    <div><input id=\"restAfterPairMax\" type=\"number\" min=\"0\" value=\"60\"><\/div>\n\n                    <!-- 3: Durasi Group Warmup -->\n                    <div class=\"timer-label\">Durasi Group Warmup (min)<\/div>\n                    <div><input id=\"groupMin\" type=\"number\" min=\"0\" value=\"60\"><\/div>\n                    <div class=\"timer-max\">max<\/div>\n                    <div><input id=\"groupMax\" type=\"number\" min=\"0\" value=\"120\"><\/div>\n\n                    <!-- 4: Rehat Selepas Group\/Cycle -->\n                    <div class=\"timer-label\">Rehat Selepas Group\/Cycle (min)<\/div>\n                    <div><input id=\"restAfterGroupMin\" type=\"number\" min=\"0\" value=\"60\"><\/div>\n                    <div class=\"timer-max\">max<\/div>\n                    <div><input id=\"restAfterGroupMax\" type=\"number\" min=\"0\" value=\"120\"><\/div>\n\n                    <!-- 5: Sela Pairing -->\n                    <div class=\"timer-label\">Sela Mesej Pairing (saat)<\/div>\n                    <div><input id=\"delayPairMsgMin\" type=\"number\" min=\"0\" value=\"15\"><\/div>\n                    <div class=\"timer-max\">max<\/div>\n                    <div><input id=\"delayPairMsgMax\" type=\"number\" min=\"0\" value=\"60\"><\/div>\n\n                    <!-- 6: Sela Group -->\n                    <div class=\"timer-label\">Sela Mesej Group (saat)<\/div>\n                    <div><input id=\"delayGroupMsgMin\" type=\"number\" min=\"0\" value=\"15\"><\/div>\n                    <div class=\"timer-max\">max<\/div>\n                    <div><input id=\"delayGroupMsgMax\" type=\"number\" min=\"0\" value=\"60\"><\/div>\n                <\/div>\n\n                <div class=\"note\">\n                    *Jika tidak ditanda, sistem guna default selamat. Anda boleh ubah bila-bila masa sebelum tekan\n                    \u201cMula\u201d.\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"card\">\n            <button id=\"startPairingBtn\" class=\"btn\">\ud83d\udea6 Mula\/Resume Pairing<\/button>\n            <button id=\"pausePairingBtn\" class=\"btn\" style=\"background:#ff9800;\">Pause<\/button>\n            <button id=\"stopPairingBtn\" class=\"btn\" style=\"background:#d32f2f;\">Stop<\/button>\n        <\/div>\n\n        <div class=\"card\">\n            <h3>Status Pairing &#038; Progress<\/h3>\n            <div><b>Status:<\/b> <span id=\"statusNow\" style=\"color:#2e7d32;\">&#8211;<\/span><\/div>\n            <div id=\"pairingCycleInfo\" style=\"margin-bottom:8px;font-size:15px;color:#1976d2;\">\n                <b>Cycle:<\/b> <span id=\"currentCycle\">\u2013<\/span> \/ <span id=\"totalCycle\">\u2013<\/span>\n                &nbsp;|&nbsp;\n                <b>Pair dalam cycle:<\/b> <span id=\"pairInCycle\">\u2013<\/span>\n            <\/div>\n            <div id=\"progressPairingLog\" class=\"progress-log\"><\/div>\n            <div style=\"margin-top:8px;font-size:14px;color:#1976d2\">\n                <b>Semua pairing selesai?<\/b>\n                <span id=\"unlockSmartWarmup\" style=\"font-weight:bold;color:#1a7f4a;\">&#8211;<\/span>\n            <\/div>\n        <\/div>\n\n        <script src=\"\/js\/warmup-pairing.js\"><\/script>\n    <\/div> <!-- \/container -->\n<\/body>\n\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Warmup Pairing \u2013 AbataBlaster \ud83d\udce7 Email: \u2013 \ud83d\udcbc Pakej: \u2013 \ud83d\udce4 Mesej Baki: \u2013 (\u2013 hari) \ud83d\udcf1 WhatsApp Aktif: \u2013 \ud83d\udd14 Sambungkan Telegram \ud83d\udeaa Log Keluar \u26a0\ufe0f Langganan anda telah tamat atau mesej telah habis. Sila upgrade untuk terus gunakan sistem ini. Pilih Nombor Label Status Pilih Group WhatsApp (optional, untuk group warmup) Extract Group [&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-733","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/abatablaster.xyz\/index.php\/wp-json\/wp\/v2\/pages\/733","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=733"}],"version-history":[{"count":16,"href":"https:\/\/abatablaster.xyz\/index.php\/wp-json\/wp\/v2\/pages\/733\/revisions"}],"predecessor-version":[{"id":1104,"href":"https:\/\/abatablaster.xyz\/index.php\/wp-json\/wp\/v2\/pages\/733\/revisions\/1104"}],"wp:attachment":[{"href":"https:\/\/abatablaster.xyz\/index.php\/wp-json\/wp\/v2\/media?parent=733"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}