Broadcast AI (Gaya Broadcast Biasa)<\/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 \/* ====== Gaya asas ikut Broadcast Biasa ====== *\/\n .spinner-border {\n display: inline-block;\n width: 1rem;\n height: 1rem;\n border: .15em solid #a7e6c1;\n border-right-color: transparent;\n border-radius: 50%;\n animation: spin .75s linear infinite;\n vertical-align: middle\n }\n\n @keyframes spin {\n to {\n transform: rotate(360deg)\n }\n }\n\n .blinker {\n animation: blink 1s steps(2, start) infinite\n }\n\n @keyframes blink {\n to {\n visibility: hidden\n }\n }\n\n body {\n font-family: system-ui, Arial, \"Segoe UI Emoji\", \"Noto Color Emoji\", sans-serif;\n background: #f5fbf7;\n margin: 0;\n padding: 20px\n }\n\n .shell {\n max-width: 1100px;\n margin: 0 auto\n }\n\n .card {\n background: #fff;\n border: 1px solid #d9f1e1;\n border-radius: 12px;\n padding: 20px;\n margin-bottom: 20px;\n box-shadow: 0 1px 3px rgba(0, 0, 0, .04)\n }\n\n .input {\n width: 100%;\n padding: 10px;\n border: 1px solid #ccc;\n border-radius: 8px\n }\n\n .btn {\n display: inline-flex;\n align-items: center;\n gap: .5rem;\n padding: 10px 16px;\n border-radius: 8px;\n border: 0;\n font-weight: 600;\n cursor: pointer;\n box-shadow: 0 1px 0 rgba(0, 0, 0, .06)\n }\n\n .btn+.btn {\n margin-left: 10px\n }\n\n .btn--green {\n background: #30a46c;\n color: #fff\n }\n\n .btn--red {\n background: #e53935;\n color: #fff\n }\n\n .btn--deepred {\n background: #b71c1c;\n color: #fff\n }\n\n .btn--purple {\n background: #673ab7;\n color: #fff\n }\n\n .btn--gray {\n background: #e0e0e0;\n color: #333\n }\n\n .field-row {\n display: flex;\n flex-wrap: wrap;\n gap: 12px;\n align-items: center\n }\n\n .field-row .input {\n flex: 1 1 180px;\n min-width: 160px\n }\n\n .field-row .sep {\n flex: 0 0 auto;\n opacity: .8\n }\n\n .progress-shell {\n height: 14px;\n background: #e0f7eb;\n border-radius: 999px;\n overflow: hidden\n }\n\n .progress-fill {\n height: 100%;\n width: 0%;\n background: #30a46c;\n transition: width .5s ease\n }\n\n table {\n width: 100%;\n border-collapse: collapse\n }\n\n th,\n td {\n padding: 6px 8px;\n border: 1px solid #c0e8db\n }\n\n thead tr {\n background: #e0f7eb\n }\n\n @media (max-width:720px) {\n body {\n padding: 12px\n }\n\n .shell {\n max-width: 100%\n }\n }\n\n .muted {\n color: #5f6b6b\n }\n\n \/* ===== Status table \u2014 sama seperti broadcast-biasa ===== *\/\n #campaignStatusTable {\n font-size: 14px;\n }\n\n #campaignStatusTable td,\n #campaignStatusTable th {\n padding: 6px 8px !important;\n }\n\n \/* Header melekat di atas ketika scroll *\/\n #campaignStatusTable thead th {\n position: sticky;\n top: 0;\n background: #e0f7eb;\n z-index: 1;\n }\n\n \/* Lajur indeks (#) *\/\n \/* Lajur indeks (#) \u2014 target lajur pertama terus, tak perlu class di JS *\/\n #campaignStatusTable th:first-child,\n #campaignStatusTable td:first-child {\n text-align: center;\n width: 64px;\n color: #5f6b6b;\n }\n\n \/* Kotak scroll *\/\n #statusScrollBox {\n max-height: 420px;\n overflow: auto;\n border: 1px solid #d6ece5;\n border-radius: 8px;\n }\n <\/style>\n<\/head>\n\n<body>\n <div class=\"shell\">\n\n \n <div id=\"broadcastSection\" class=\"card\">\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:100px;border-radius:16px;\">\n <\/div>\n\n <h3 style=\"color:#2e7d32;text-align:center;\">\ud83e\udd16 AI Broadcast Generator<\/h3>\n <div id=\"statusBroadcast\" class=\"muted\" style=\"margin-bottom:10px;\"><\/div>\n\n <form id=\"borangBroadcast\">\n\n \n <label><strong>\ud83d\udcdb Nama Kempen:<\/strong><\/label><br>\n <input id=\"namaKempen\" class=\"input\" placeholder=\"Contoh: Promosi Selepas Raya\" required\n style=\"margin:5px 0;\"><br>\n\n \n <div style=\"margin-top:12px;\">\n <strong>\ud83d\udd20 Pilih Mode Penjanaan AI:<\/strong><br>\n <label><input type=\"radio\" name=\"aiMode\" value=\"fully\" checked> \ud83d\udd2e Fully AI \u2013 AI hasilkan keseluruhan\n mesej<\/label><br>\n <label><input type=\"radio\" name=\"aiMode\" value=\"semi\"> \u270f\ufe0f Separa AI \u2013 Anda tulis & AI lengkapkan ayat dalam\n {…}<\/label>\n <small id=\"tipsSeparaAI\" class=\"muted\" style=\"display:none;display:block;margin-top:6px;\">\n \ud83d\udca1 Tips Separa AI: Letakkan <code>{...}<\/code> pada bahagian yang anda mahu AI sambung ayat.\n <\/small>\n <\/div>\n\n \n <label style=\"margin-top:14px;\"><strong>\ud83c\udfa8 Pilih Gaya Bahasa AI:<\/strong><\/label><br>\n <select id=\"gayaBahasa\" class=\"input\" style=\"margin:5px 0;\">\n <option value=\"friendly\" selected>\ud83d\ude0a Friendly \u2013 Santai & Mesra<\/option>\n <option value=\"formal\">\ud83d\udcda Formal \u2013 Profesional & Sopan<\/option>\n <option value=\"aggressive\">\ud83d\udd25 Aggressive \u2013 Push Sales<\/option>\n <option value=\"softsell\">\ud83c\udf38 Soft Sell \u2013 Pujukan Halus<\/option>\n <\/select>\n\n \n <label style=\"margin-top:14px;\"><strong>\ud83d\udcac Berapa Banyak Variasi AI Nak Dihasilkan?<\/strong><\/label><br>\n <select id=\"jumlahVariasi\" class=\"input\" style=\"margin:5px 0 10px;\">\n <option value=\"1\">1 Variasi<\/option>\n <option value=\"3\">3 Variasi<\/option>\n <option value=\"5\" selected>5 Variasi<\/option>\n <option value=\"7\">7 Variasi<\/option>\n <option value=\"10\">10 Variasi<\/option>\n <\/select>\n\n \n <label><strong>\u2709\ufe0f Berapa Mesej Anda Ingin Hantar?<\/strong><\/label><br>\n <select id=\"jumlahMesej\" class=\"input\" style=\"margin-bottom:10px;\">\n <option value=\"1\" selected>1 Mesej<\/option>\n <option value=\"2\">2 Mesej<\/option>\n <option value=\"3\">3 Mesej<\/option>\n <\/select>\n\n \n <div id=\"blockMesej1\">\n <h4 style=\"margin-top:14px;color:#2e7d32;\">\ud83d\udcdd Mesej 1<\/h4>\n\n <label><strong>\ud83d\udcc2 Jenis Mesej 1:<\/strong><\/label><br>\n <select id=\"jenisMesej1\" class=\"input\" style=\"margin:5px 0;\">\n <option value=\"text\">Teks Sahaja<\/option>\n <option value=\"image\">Gambar + Caption<\/option>\n <option value=\"video\">Video + Caption<\/option>\n <option value=\"document\">Dokumen + Caption<\/option>\n <option value=\"audio\">Audio Sahaja<\/option>\n <option value=\"sticker\">Sticker<\/option>\n <\/select>\n\n <label id=\"labelMesej1\"><strong>\ud83d\udcdd Prompt \/ Ayat:<\/strong><\/label><br>\n <textarea id=\"mesej1\" rows=\"3\" class=\"input\"\n placeholder=\"Contoh: Produk: abatablaster.xyz | Deskripsi: Sistem AI WhatsApp | CTA: Lawat www.abatablaster.xyz\"\n style=\"margin-bottom:6px;\"><\/textarea>\n <div id=\"butangContoh1\" style=\"margin-bottom:8px;\"><\/div>\n\n <div id=\"mediaSection1\" style=\"display:none;\">\n <label id=\"labelUploadMedia1\"><strong>\ud83d\udce4 Upload Media 1:<\/strong><\/label><br>\n <input type=\"file\" id=\"mediaFile1\" accept=\"image\/*,video\/*,audio\/*,.pdf,.doc,.docx,.xlsx,.zip,.txt,.webp\"\n style=\"margin:6px 0 10px;\"><br>\n <div id=\"mediaPreview1\" style=\"max-width:200px;\"><\/div>\n <label><strong>\ud83d\udcdd Caption 1:<\/strong><\/label><br>\n <textarea id=\"caption1\" rows=\"2\" class=\"input\" placeholder=\"Caption media 1\"><\/textarea>\n <\/div>\n <\/div>\n\n \n <div id=\"blockMesej2\" style=\"display:none;\">\n <h4 style=\"margin-top:18px;color:#2e7d32;\">\ud83d\udcdd Mesej 2<\/h4>\n\n <label><strong>\ud83d\udcc2 Jenis Mesej 2:<\/strong><\/label><br>\n <select id=\"jenisMesej2\" class=\"input\" style=\"margin:5px 0;\">\n <option value=\"text\">Teks Sahaja<\/option>\n <option value=\"image\">Gambar + Caption<\/option>\n <option value=\"video\">Video + Caption<\/option>\n <option value=\"document\">Dokumen + Caption<\/option>\n <option value=\"audio\">Audio Sahaja<\/option>\n <option value=\"sticker\">Sticker<\/option>\n <\/select>\n\n <label id=\"labelMesej2\"><strong>\ud83d\udcdd Ayat:<\/strong><\/label><br>\n <textarea id=\"mesej2\" rows=\"3\" class=\"input\" placeholder=\"Contoh: teks mesej ke-2\"\n style=\"margin-bottom:6px;\"><\/textarea>\n <div id=\"butangContoh2\" style=\"margin-bottom:8px;\"><\/div>\n\n <div id=\"mediaSection2\" style=\"display:none;\">\n <label id=\"labelUploadMedia2\"><strong>\ud83d\udce4 Upload Media 2:<\/strong><\/label><br>\n <input type=\"file\" id=\"mediaFile2\" accept=\"image\/*,video\/*,audio\/*,.pdf,.doc,.docx,.xlsx,.zip,.txt,.webp\"\n style=\"margin:6px 0 10px;\"><br>\n <div id=\"mediaPreview2\" style=\"max-width:200px;\"><\/div>\n <label><strong>\ud83d\udcdd Caption 2:<\/strong><\/label><br>\n <textarea id=\"caption2\" rows=\"2\" class=\"input\" placeholder=\"Caption media 2\"><\/textarea>\n <\/div>\n <\/div>\n\n \n <div id=\"blockMesej3\" style=\"display:none;\">\n <h4 style=\"margin-top:18px;color:#2e7d32;\">\ud83d\udcdd Mesej 3<\/h4>\n\n <label><strong>\ud83d\udcc2 Jenis Mesej 3:<\/strong><\/label><br>\n <select id=\"jenisMesej3\" class=\"input\" style=\"margin:5px 0;\">\n <option value=\"text\">Teks Sahaja<\/option>\n <option value=\"image\">Gambar + Caption<\/option>\n <option value=\"video\">Video + Caption<\/option>\n <option value=\"document\">Dokumen + Caption<\/option>\n <option value=\"audio\">Audio Sahaja<\/option>\n <option value=\"sticker\">Sticker<\/option>\n <\/select>\n\n <label id=\"labelMesej3\"><strong>\ud83d\udcdd Ayat:<\/strong><\/label><br>\n <textarea id=\"mesej3\" rows=\"3\" class=\"input\" placeholder=\"Contoh: teks mesej ke-3\"\n style=\"margin-bottom:6px;\"><\/textarea>\n <div id=\"butangContoh3\" style=\"margin-bottom:8px;\"><\/div>\n\n <div id=\"mediaSection3\" style=\"display:none;\">\n <label id=\"labelUploadMedia3\"><strong>\ud83d\udce4 Upload Media 3:<\/strong><\/label><br>\n <input type=\"file\" id=\"mediaFile3\" accept=\"image\/*,video\/*,audio\/*,.pdf,.doc,.docx,.xlsx,.zip,.txt,.webp\"\n style=\"margin:6px 0 10px;\"><br>\n <div id=\"mediaPreview3\" style=\"max-width:200px;\"><\/div>\n <label><strong>\ud83d\udcdd Caption 3:<\/strong><\/label><br>\n <textarea id=\"caption3\" rows=\"2\" class=\"input\" placeholder=\"Caption media 3\"><\/textarea>\n <\/div>\n <\/div>\n\n \n <label style=\"margin-top:16px;\"><strong>\ud83d\udcf1 Pilih Nombor WhatsApp:<\/strong><\/label><br>\n <select id=\"nomborPengirim\" required class=\"input\" style=\"margin:5px 0;\">\n <option value=\"\">— Sila Pilih —<\/option>\n <\/select><br>\n\n \n <label><strong>\ud83d\udcc7 Senarai Nombor Penerima (asingkan dengan koma):<\/strong><\/label><br>\n <textarea id=\"senaraiNombor\" rows=\"3\" class=\"input\" placeholder=\"Contoh: 60123456789,60119876543\"\n style=\"margin:5px 0;\"><\/textarea>\n <small id=\"jumlahNombor\" class=\"muted\" style=\"display:block;margin-bottom:10px;\">0 nombor dipilih.<\/small>\n\n <label for=\"uploadExcel\" style=\"margin-top:10px;display:block;\">\ud83d\udce5 Atau muat naik fail Excel\/CSV:<\/label>\n <input type=\"file\" id=\"uploadExcel\" accept=\".xlsx,.csv\" style=\"margin-bottom:10px;\" \/>\n <button type=\"button\" id=\"padamSemua\" class=\"btn btn--red\" style=\"margin-bottom:10px;\">\ud83e\uddf9 Padam Semua\n Nombor<\/button>\n\n \n <label><strong>\u23f1 Delay setiap mesej:<\/strong><\/label>\n <div class=\"field-row\" style=\"margin-top:6px;\">\n <input type=\"number\" id=\"delayMin\" class=\"input\" placeholder=\"Min (saat)\">\n <span class=\"sep\">hingga<\/span>\n <input type=\"number\" id=\"delayMax\" class=\"input\" placeholder=\"Max (saat)\">\n <\/div>\n\n <label style=\"margin-top:10px;\"><strong>\ud83d\ude34 Rehat selepas beberapa mesej:<\/strong><\/label>\n <div class=\"field-row\" style=\"margin-top:6px;\">\n <input type=\"number\" id=\"rehatMin\" class=\"input\" placeholder=\"Min (saat)\">\n <span class=\"sep\">hingga<\/span>\n <input type=\"number\" id=\"rehatMax\" class=\"input\" placeholder=\"Max (saat)\">\n <span class=\"sep\">saat setiap<\/span>\n <input type=\"number\" id=\"setiapX\" class=\"input\" placeholder=\"Contoh: 30\">\n <\/div>\n\n \n <div style=\"margin-top:14px;\">\n <button type=\"button\" id=\"janaAI\" class=\"btn btn--purple\">\ud83e\udde0 Jana Mesej AI<\/button>\n <button type=\"submit\" class=\"btn btn--green\">\ud83d\ude80 Hantar Broadcast<\/button>\n <button type=\"button\" id=\"resetForm\" class=\"btn btn--red\">\ud83d\udd04 Reset Semua<\/button>\n <button type=\"button\" id=\"resetCampaignBtn\" class=\"btn btn--deepred\">\u274c Reset Semua Kempen Tertangguh<\/button>\n <\/div>\n <\/form>\n\n \n <div id=\"previewMesej\" class=\"card\" style=\"display:none;background:#f9fff5;border-color:#c5e1a5;margin-top:18px;\">\n <h4 style=\"color:#33691e;margin-top:0;\">\ud83d\udd0d Preview Mesej<\/h4>\n <div id=\"previewList\" style=\"font-size:14px;line-height:1.6;\"><\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"campaignStatusSection\" class=\"card\" style=\"border-color:#30a46c;background:#f6fef9;\">\n <h3 style=\"color:#30a46c;\">\n \ud83d\udcca Status Kempen:\n <span id=\"campaignStatus\" style=\"font-weight:bold;\">\n <span class=\"spinner-border text-success\" role=\"status\"><\/span> Memuatkan…\n <\/span>\n <\/h3>\n <p style=\"font-size:16px;\">\ud83d\ude80 Progress: <span id=\"campaignProgress\">0\/0<\/span> (<span\n id=\"campaignPercent\">0%<\/span>)<\/p>\n <div class=\"progress-shell\">\n <div id=\"campaignProgressBar\" class=\"progress-fill\"><\/div>\n <\/div>\n\n <div id=\"campaignControls\" class=\"field-row\" style=\"margin-top:16px;\">\n <button id=\"btnStopCampaign\" class=\"btn btn--red\">\ud83d\udeab Hentikan Kempen<\/button>\n <button id=\"btnPauseCampaign\" class=\"btn btn--gray\">\u23f8 Pause<\/button>\n <button id=\"btnResumeCampaign\" class=\"btn btn--green\" style=\"display:none;\">\u25b6\ufe0f Sambung<\/button>\n <button id=\"btnDownloadReport\" class=\"btn btn--green\">\ud83d\udcc4 Muat Turun Report<\/button>\n <button id=\"btnRetryFailed\" class=\"btn btn--purple\" style=\"display:none;\">\ud83d\udd01 Blast Semula (GAGAL)<\/button>\n <button id=\"btnResetStatus\" class=\"btn btn--gray\" style=\"display:none;\">\ud83d\udd04 Reset Paparan<\/button>\n <\/div>\n\n <div style=\"margin-top:20px\">\n <h4 style=\"color:#30a46c;\">\ud83d\udccb Status Setiap Nombor<\/h4>\n <div id=\"statusScrollBox\">\n <table id=\"campaignStatusTable\" style=\"margin-top:0;\">\n <thead>\n <tr>\n <th>#<\/th>\n <th>No. Telefon<\/th>\n <th>Status<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"campaignStatusTableBody\">\n <tr id=\"tableLoadingRow\">\n <td colspan=\"3\" style=\"text-align:center;padding:18px;\">\n <span class=\"spinner-border text-success\"><\/span> Memuatkan status…\n <\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n <\/div>\n <\/div>\n\n <p id=\"campaignCompleteNote\" style=\"margin-top:10px;font-size:14px;color:#333;\"><\/p>\n <div id=\"campaignRunningNotice\" style=\"display:none;margin-top:15px;text-align:center;\">\n <span class=\"blinker\" style=\"font-size:16px;font-weight:bold;color:#d35400;\">\u26a1 Kempen sedang berjalan…<\/span>\n <\/div>\n <\/div>\n\n <\/div>\n\n <script type=\"module\" src=\"\/js\/broadcast-ai.js\"><\/script>\n\n<\/body>\n\n<\/html>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Broadcast AI (Gaya Broadcast Biasa) \ud83e\udd16 AI Broadcast Generator \ud83d\udcdb Nama Kempen: \ud83d\udd20 Pilih Mode Penjanaan AI: \ud83d\udd2e Fully AI \u2013 AI hasilkan keseluruhan mesej \u270f\ufe0f Separa AI \u2013 Anda tulis & AI lengkapkan ayat dalam {…} \ud83d\udca1 Tips Separa AI: Letakkan {…} pada bahagian yang anda mahu AI sambung ayat. \ud83c\udfa8 Pilih Gaya Bahasa […]<\/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-145","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/abatablaster.xyz\/index.php\/wp-json\/wp\/v2\/pages\/145","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=145"}],"version-history":[{"count":17,"href":"https:\/\/abatablaster.xyz\/index.php\/wp-json\/wp\/v2\/pages\/145\/revisions"}],"predecessor-version":[{"id":985,"href":"https:\/\/abatablaster.xyz\/index.php\/wp-json\/wp\/v2\/pages\/145\/revisions\/985"}],"wp:attachment":[{"href":"https:\/\/abatablaster.xyz\/index.php\/wp-json\/wp\/v2\/media?parent=145"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":145,"date":"2025-04-25T07:34:41","date_gmt":"2025-04-25T07:34:41","guid":{"rendered":"https:\/\/abatablaster.xyz\/?page_id=145"},"modified":"2025-08-16T06:51:13","modified_gmt":"2025-08-16T06:51:13","slug":"ai-broadcast-generator","status":"publish","type":"page","link":"https:\/\/abatablaster.xyz\/index.php\/ai-broadcast-generator\/","title":{"rendered":"AI Broadcast Generator"},"content":{"rendered":"\n\n\n\n\n \n Broadcast AI (Gaya Broadcast Biasa)<\/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 \/* ====== Gaya asas ikut Broadcast Biasa ====== *\/\n .spinner-border {\n display: inline-block;\n width: 1rem;\n height: 1rem;\n border: .15em solid #a7e6c1;\n border-right-color: transparent;\n border-radius: 50%;\n animation: spin .75s linear infinite;\n vertical-align: middle\n }\n\n @keyframes spin {\n to {\n transform: rotate(360deg)\n }\n }\n\n .blinker {\n animation: blink 1s steps(2, start) infinite\n }\n\n @keyframes blink {\n to {\n visibility: hidden\n }\n }\n\n body {\n font-family: system-ui, Arial, \"Segoe UI Emoji\", \"Noto Color Emoji\", sans-serif;\n background: #f5fbf7;\n margin: 0;\n padding: 20px\n }\n\n .shell {\n max-width: 1100px;\n margin: 0 auto\n }\n\n .card {\n background: #fff;\n border: 1px solid #d9f1e1;\n border-radius: 12px;\n padding: 20px;\n margin-bottom: 20px;\n box-shadow: 0 1px 3px rgba(0, 0, 0, .04)\n }\n\n .input {\n width: 100%;\n padding: 10px;\n border: 1px solid #ccc;\n border-radius: 8px\n }\n\n .btn {\n display: inline-flex;\n align-items: center;\n gap: .5rem;\n padding: 10px 16px;\n border-radius: 8px;\n border: 0;\n font-weight: 600;\n cursor: pointer;\n box-shadow: 0 1px 0 rgba(0, 0, 0, .06)\n }\n\n .btn+.btn {\n margin-left: 10px\n }\n\n .btn--green {\n background: #30a46c;\n color: #fff\n }\n\n .btn--red {\n background: #e53935;\n color: #fff\n }\n\n .btn--deepred {\n background: #b71c1c;\n color: #fff\n }\n\n .btn--purple {\n background: #673ab7;\n color: #fff\n }\n\n .btn--gray {\n background: #e0e0e0;\n color: #333\n }\n\n .field-row {\n display: flex;\n flex-wrap: wrap;\n gap: 12px;\n align-items: center\n }\n\n .field-row .input {\n flex: 1 1 180px;\n min-width: 160px\n }\n\n .field-row .sep {\n flex: 0 0 auto;\n opacity: .8\n }\n\n .progress-shell {\n height: 14px;\n background: #e0f7eb;\n border-radius: 999px;\n overflow: hidden\n }\n\n .progress-fill {\n height: 100%;\n width: 0%;\n background: #30a46c;\n transition: width .5s ease\n }\n\n table {\n width: 100%;\n border-collapse: collapse\n }\n\n th,\n td {\n padding: 6px 8px;\n border: 1px solid #c0e8db\n }\n\n thead tr {\n background: #e0f7eb\n }\n\n @media (max-width:720px) {\n body {\n padding: 12px\n }\n\n .shell {\n max-width: 100%\n }\n }\n\n .muted {\n color: #5f6b6b\n }\n\n \/* ===== Status table \u2014 sama seperti broadcast-biasa ===== *\/\n #campaignStatusTable {\n font-size: 14px;\n }\n\n #campaignStatusTable td,\n #campaignStatusTable th {\n padding: 6px 8px !important;\n }\n\n \/* Header melekat di atas ketika scroll *\/\n #campaignStatusTable thead th {\n position: sticky;\n top: 0;\n background: #e0f7eb;\n z-index: 1;\n }\n\n \/* Lajur indeks (#) *\/\n \/* Lajur indeks (#) \u2014 target lajur pertama terus, tak perlu class di JS *\/\n #campaignStatusTable th:first-child,\n #campaignStatusTable td:first-child {\n text-align: center;\n width: 64px;\n color: #5f6b6b;\n }\n\n \/* Kotak scroll *\/\n #statusScrollBox {\n max-height: 420px;\n overflow: auto;\n border: 1px solid #d6ece5;\n border-radius: 8px;\n }\n <\/style>\n<\/head>\n\n<body>\n <div class=\"shell\">\n\n \n <div id=\"broadcastSection\" class=\"card\">\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:100px;border-radius:16px;\">\n <\/div>\n\n <h3 style=\"color:#2e7d32;text-align:center;\">\ud83e\udd16 AI Broadcast Generator<\/h3>\n <div id=\"statusBroadcast\" class=\"muted\" style=\"margin-bottom:10px;\"><\/div>\n\n <form id=\"borangBroadcast\">\n\n \n <label><strong>\ud83d\udcdb Nama Kempen:<\/strong><\/label><br>\n <input id=\"namaKempen\" class=\"input\" placeholder=\"Contoh: Promosi Selepas Raya\" required\n style=\"margin:5px 0;\"><br>\n\n \n <div style=\"margin-top:12px;\">\n <strong>\ud83d\udd20 Pilih Mode Penjanaan AI:<\/strong><br>\n <label><input type=\"radio\" name=\"aiMode\" value=\"fully\" checked> \ud83d\udd2e Fully AI \u2013 AI hasilkan keseluruhan\n mesej<\/label><br>\n <label><input type=\"radio\" name=\"aiMode\" value=\"semi\"> \u270f\ufe0f Separa AI \u2013 Anda tulis & AI lengkapkan ayat dalam\n {…}<\/label>\n <small id=\"tipsSeparaAI\" class=\"muted\" style=\"display:none;display:block;margin-top:6px;\">\n \ud83d\udca1 Tips Separa AI: Letakkan <code>{...}<\/code> pada bahagian yang anda mahu AI sambung ayat.\n <\/small>\n <\/div>\n\n \n <label style=\"margin-top:14px;\"><strong>\ud83c\udfa8 Pilih Gaya Bahasa AI:<\/strong><\/label><br>\n <select id=\"gayaBahasa\" class=\"input\" style=\"margin:5px 0;\">\n <option value=\"friendly\" selected>\ud83d\ude0a Friendly \u2013 Santai & Mesra<\/option>\n <option value=\"formal\">\ud83d\udcda Formal \u2013 Profesional & Sopan<\/option>\n <option value=\"aggressive\">\ud83d\udd25 Aggressive \u2013 Push Sales<\/option>\n <option value=\"softsell\">\ud83c\udf38 Soft Sell \u2013 Pujukan Halus<\/option>\n <\/select>\n\n \n <label style=\"margin-top:14px;\"><strong>\ud83d\udcac Berapa Banyak Variasi AI Nak Dihasilkan?<\/strong><\/label><br>\n <select id=\"jumlahVariasi\" class=\"input\" style=\"margin:5px 0 10px;\">\n <option value=\"1\">1 Variasi<\/option>\n <option value=\"3\">3 Variasi<\/option>\n <option value=\"5\" selected>5 Variasi<\/option>\n <option value=\"7\">7 Variasi<\/option>\n <option value=\"10\">10 Variasi<\/option>\n <\/select>\n\n \n <label><strong>\u2709\ufe0f Berapa Mesej Anda Ingin Hantar?<\/strong><\/label><br>\n <select id=\"jumlahMesej\" class=\"input\" style=\"margin-bottom:10px;\">\n <option value=\"1\" selected>1 Mesej<\/option>\n <option value=\"2\">2 Mesej<\/option>\n <option value=\"3\">3 Mesej<\/option>\n <\/select>\n\n \n <div id=\"blockMesej1\">\n <h4 style=\"margin-top:14px;color:#2e7d32;\">\ud83d\udcdd Mesej 1<\/h4>\n\n <label><strong>\ud83d\udcc2 Jenis Mesej 1:<\/strong><\/label><br>\n <select id=\"jenisMesej1\" class=\"input\" style=\"margin:5px 0;\">\n <option value=\"text\">Teks Sahaja<\/option>\n <option value=\"image\">Gambar + Caption<\/option>\n <option value=\"video\">Video + Caption<\/option>\n <option value=\"document\">Dokumen + Caption<\/option>\n <option value=\"audio\">Audio Sahaja<\/option>\n <option value=\"sticker\">Sticker<\/option>\n <\/select>\n\n <label id=\"labelMesej1\"><strong>\ud83d\udcdd Prompt \/ Ayat:<\/strong><\/label><br>\n <textarea id=\"mesej1\" rows=\"3\" class=\"input\"\n placeholder=\"Contoh: Produk: abatablaster.xyz | Deskripsi: Sistem AI WhatsApp | CTA: Lawat www.abatablaster.xyz\"\n style=\"margin-bottom:6px;\"><\/textarea>\n <div id=\"butangContoh1\" style=\"margin-bottom:8px;\"><\/div>\n\n <div id=\"mediaSection1\" style=\"display:none;\">\n <label id=\"labelUploadMedia1\"><strong>\ud83d\udce4 Upload Media 1:<\/strong><\/label><br>\n <input type=\"file\" id=\"mediaFile1\" accept=\"image\/*,video\/*,audio\/*,.pdf,.doc,.docx,.xlsx,.zip,.txt,.webp\"\n style=\"margin:6px 0 10px;\"><br>\n <div id=\"mediaPreview1\" style=\"max-width:200px;\"><\/div>\n <label><strong>\ud83d\udcdd Caption 1:<\/strong><\/label><br>\n <textarea id=\"caption1\" rows=\"2\" class=\"input\" placeholder=\"Caption media 1\"><\/textarea>\n <\/div>\n <\/div>\n\n \n <div id=\"blockMesej2\" style=\"display:none;\">\n <h4 style=\"margin-top:18px;color:#2e7d32;\">\ud83d\udcdd Mesej 2<\/h4>\n\n <label><strong>\ud83d\udcc2 Jenis Mesej 2:<\/strong><\/label><br>\n <select id=\"jenisMesej2\" class=\"input\" style=\"margin:5px 0;\">\n <option value=\"text\">Teks Sahaja<\/option>\n <option value=\"image\">Gambar + Caption<\/option>\n <option value=\"video\">Video + Caption<\/option>\n <option value=\"document\">Dokumen + Caption<\/option>\n <option value=\"audio\">Audio Sahaja<\/option>\n <option value=\"sticker\">Sticker<\/option>\n <\/select>\n\n <label id=\"labelMesej2\"><strong>\ud83d\udcdd Ayat:<\/strong><\/label><br>\n <textarea id=\"mesej2\" rows=\"3\" class=\"input\" placeholder=\"Contoh: teks mesej ke-2\"\n style=\"margin-bottom:6px;\"><\/textarea>\n <div id=\"butangContoh2\" style=\"margin-bottom:8px;\"><\/div>\n\n <div id=\"mediaSection2\" style=\"display:none;\">\n <label id=\"labelUploadMedia2\"><strong>\ud83d\udce4 Upload Media 2:<\/strong><\/label><br>\n <input type=\"file\" id=\"mediaFile2\" accept=\"image\/*,video\/*,audio\/*,.pdf,.doc,.docx,.xlsx,.zip,.txt,.webp\"\n style=\"margin:6px 0 10px;\"><br>\n <div id=\"mediaPreview2\" style=\"max-width:200px;\"><\/div>\n <label><strong>\ud83d\udcdd Caption 2:<\/strong><\/label><br>\n <textarea id=\"caption2\" rows=\"2\" class=\"input\" placeholder=\"Caption media 2\"><\/textarea>\n <\/div>\n <\/div>\n\n \n <div id=\"blockMesej3\" style=\"display:none;\">\n <h4 style=\"margin-top:18px;color:#2e7d32;\">\ud83d\udcdd Mesej 3<\/h4>\n\n <label><strong>\ud83d\udcc2 Jenis Mesej 3:<\/strong><\/label><br>\n <select id=\"jenisMesej3\" class=\"input\" style=\"margin:5px 0;\">\n <option value=\"text\">Teks Sahaja<\/option>\n <option value=\"image\">Gambar + Caption<\/option>\n <option value=\"video\">Video + Caption<\/option>\n <option value=\"document\">Dokumen + Caption<\/option>\n <option value=\"audio\">Audio Sahaja<\/option>\n <option value=\"sticker\">Sticker<\/option>\n <\/select>\n\n <label id=\"labelMesej3\"><strong>\ud83d\udcdd Ayat:<\/strong><\/label><br>\n <textarea id=\"mesej3\" rows=\"3\" class=\"input\" placeholder=\"Contoh: teks mesej ke-3\"\n style=\"margin-bottom:6px;\"><\/textarea>\n <div id=\"butangContoh3\" style=\"margin-bottom:8px;\"><\/div>\n\n <div id=\"mediaSection3\" style=\"display:none;\">\n <label id=\"labelUploadMedia3\"><strong>\ud83d\udce4 Upload Media 3:<\/strong><\/label><br>\n <input type=\"file\" id=\"mediaFile3\" accept=\"image\/*,video\/*,audio\/*,.pdf,.doc,.docx,.xlsx,.zip,.txt,.webp\"\n style=\"margin:6px 0 10px;\"><br>\n <div id=\"mediaPreview3\" style=\"max-width:200px;\"><\/div>\n <label><strong>\ud83d\udcdd Caption 3:<\/strong><\/label><br>\n <textarea id=\"caption3\" rows=\"2\" class=\"input\" placeholder=\"Caption media 3\"><\/textarea>\n <\/div>\n <\/div>\n\n \n <label style=\"margin-top:16px;\"><strong>\ud83d\udcf1 Pilih Nombor WhatsApp:<\/strong><\/label><br>\n <select id=\"nomborPengirim\" required class=\"input\" style=\"margin:5px 0;\">\n <option value=\"\">— Sila Pilih —<\/option>\n <\/select><br>\n\n \n <label><strong>\ud83d\udcc7 Senarai Nombor Penerima (asingkan dengan koma):<\/strong><\/label><br>\n <textarea id=\"senaraiNombor\" rows=\"3\" class=\"input\" placeholder=\"Contoh: 60123456789,60119876543\"\n style=\"margin:5px 0;\"><\/textarea>\n <small id=\"jumlahNombor\" class=\"muted\" style=\"display:block;margin-bottom:10px;\">0 nombor dipilih.<\/small>\n\n <label for=\"uploadExcel\" style=\"margin-top:10px;display:block;\">\ud83d\udce5 Atau muat naik fail Excel\/CSV:<\/label>\n <input type=\"file\" id=\"uploadExcel\" accept=\".xlsx,.csv\" style=\"margin-bottom:10px;\" \/>\n <button type=\"button\" id=\"padamSemua\" class=\"btn btn--red\" style=\"margin-bottom:10px;\">\ud83e\uddf9 Padam Semua\n Nombor<\/button>\n\n \n <label><strong>\u23f1 Delay setiap mesej:<\/strong><\/label>\n <div class=\"field-row\" style=\"margin-top:6px;\">\n <input type=\"number\" id=\"delayMin\" class=\"input\" placeholder=\"Min (saat)\">\n <span class=\"sep\">hingga<\/span>\n <input type=\"number\" id=\"delayMax\" class=\"input\" placeholder=\"Max (saat)\">\n <\/div>\n\n <label style=\"margin-top:10px;\"><strong>\ud83d\ude34 Rehat selepas beberapa mesej:<\/strong><\/label>\n <div class=\"field-row\" style=\"margin-top:6px;\">\n <input type=\"number\" id=\"rehatMin\" class=\"input\" placeholder=\"Min (saat)\">\n <span class=\"sep\">hingga<\/span>\n <input type=\"number\" id=\"rehatMax\" class=\"input\" placeholder=\"Max (saat)\">\n <span class=\"sep\">saat setiap<\/span>\n <input type=\"number\" id=\"setiapX\" class=\"input\" placeholder=\"Contoh: 30\">\n <\/div>\n\n \n <div style=\"margin-top:14px;\">\n <button type=\"button\" id=\"janaAI\" class=\"btn btn--purple\">\ud83e\udde0 Jana Mesej AI<\/button>\n <button type=\"submit\" class=\"btn btn--green\">\ud83d\ude80 Hantar Broadcast<\/button>\n <button type=\"button\" id=\"resetForm\" class=\"btn btn--red\">\ud83d\udd04 Reset Semua<\/button>\n <button type=\"button\" id=\"resetCampaignBtn\" class=\"btn btn--deepred\">\u274c Reset Semua Kempen Tertangguh<\/button>\n <\/div>\n <\/form>\n\n \n <div id=\"previewMesej\" class=\"card\" style=\"display:none;background:#f9fff5;border-color:#c5e1a5;margin-top:18px;\">\n <h4 style=\"color:#33691e;margin-top:0;\">\ud83d\udd0d Preview Mesej<\/h4>\n <div id=\"previewList\" style=\"font-size:14px;line-height:1.6;\"><\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"campaignStatusSection\" class=\"card\" style=\"border-color:#30a46c;background:#f6fef9;\">\n <h3 style=\"color:#30a46c;\">\n \ud83d\udcca Status Kempen:\n <span id=\"campaignStatus\" style=\"font-weight:bold;\">\n <span class=\"spinner-border text-success\" role=\"status\"><\/span> Memuatkan…\n <\/span>\n <\/h3>\n <p style=\"font-size:16px;\">\ud83d\ude80 Progress: <span id=\"campaignProgress\">0\/0<\/span> (<span\n id=\"campaignPercent\">0%<\/span>)<\/p>\n <div class=\"progress-shell\">\n <div id=\"campaignProgressBar\" class=\"progress-fill\"><\/div>\n <\/div>\n\n <div id=\"campaignControls\" class=\"field-row\" style=\"margin-top:16px;\">\n <button id=\"btnStopCampaign\" class=\"btn btn--red\">\ud83d\udeab Hentikan Kempen<\/button>\n <button id=\"btnPauseCampaign\" class=\"btn btn--gray\">\u23f8 Pause<\/button>\n <button id=\"btnResumeCampaign\" class=\"btn btn--green\" style=\"display:none;\">\u25b6\ufe0f Sambung<\/button>\n <button id=\"btnDownloadReport\" class=\"btn btn--green\">\ud83d\udcc4 Muat Turun Report<\/button>\n <button id=\"btnRetryFailed\" class=\"btn btn--purple\" style=\"display:none;\">\ud83d\udd01 Blast Semula (GAGAL)<\/button>\n <button id=\"btnResetStatus\" class=\"btn btn--gray\" style=\"display:none;\">\ud83d\udd04 Reset Paparan<\/button>\n <\/div>\n\n <div style=\"margin-top:20px\">\n <h4 style=\"color:#30a46c;\">\ud83d\udccb Status Setiap Nombor<\/h4>\n <div id=\"statusScrollBox\">\n <table id=\"campaignStatusTable\" style=\"margin-top:0;\">\n <thead>\n <tr>\n <th>#<\/th>\n <th>No. Telefon<\/th>\n <th>Status<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"campaignStatusTableBody\">\n <tr id=\"tableLoadingRow\">\n <td colspan=\"3\" style=\"text-align:center;padding:18px;\">\n <span class=\"spinner-border text-success\"><\/span> Memuatkan status…\n <\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n <\/div>\n <\/div>\n\n <p id=\"campaignCompleteNote\" style=\"margin-top:10px;font-size:14px;color:#333;\"><\/p>\n <div id=\"campaignRunningNotice\" style=\"display:none;margin-top:15px;text-align:center;\">\n <span class=\"blinker\" style=\"font-size:16px;font-weight:bold;color:#d35400;\">\u26a1 Kempen sedang berjalan…<\/span>\n <\/div>\n <\/div>\n\n <\/div>\n\n <script type=\"module\" src=\"\/js\/broadcast-ai.js\"><\/script>\n\n<\/body>\n\n<\/html>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Broadcast AI (Gaya Broadcast Biasa) \ud83e\udd16 AI Broadcast Generator \ud83d\udcdb Nama Kempen: \ud83d\udd20 Pilih Mode Penjanaan AI: \ud83d\udd2e Fully AI \u2013 AI hasilkan keseluruhan mesej \u270f\ufe0f Separa AI \u2013 Anda tulis & AI lengkapkan ayat dalam {…} \ud83d\udca1 Tips Separa AI: Letakkan {…} pada bahagian yang anda mahu AI sambung ayat. \ud83c\udfa8 Pilih Gaya Bahasa […]<\/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-145","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/abatablaster.xyz\/index.php\/wp-json\/wp\/v2\/pages\/145","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=145"}],"version-history":[{"count":17,"href":"https:\/\/abatablaster.xyz\/index.php\/wp-json\/wp\/v2\/pages\/145\/revisions"}],"predecessor-version":[{"id":985,"href":"https:\/\/abatablaster.xyz\/index.php\/wp-json\/wp\/v2\/pages\/145\/revisions\/985"}],"wp:attachment":[{"href":"https:\/\/abatablaster.xyz\/index.php\/wp-json\/wp\/v2\/media?parent=145"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}