tag:blogger.com,1999:blog-53410614530483438952026-04-18T18:17:03.384+08:00Layanlah!!! | Berita Terkini | Tips Berguna | MaklumatBlog Layanlah!!! memaparkan pelbagai maklumat seperti berita terkini, tips berguna, maklumat semasa, info semasa, trick, hint, nasihat, maklumat am dan sebagainyaMeAdminhttp://www.blogger.com/profile/06871300420300644055noreply@blogger.comBlogger3738125tag:blogger.com,1999:blog-5341061453048343895.post-80273350067051568212026-01-20T22:25:00.010+08:002026-01-20T23:18:38.401+08:00Duel Gergasi Nombor: Cara Mudah Membanding Nombor Hingga Juta (Game Interaktif)<title>Duel Gergasi Nombor: Game Banding Nombor Juta (Standard Malaysia)</title>
<meta name="description" content="Latihan membanding nombor interaktif menggunakan teknik Mulut Buaya. Lengkap dengan bimbingan nilai tempat dari Sa hingga Juta. Sesuai untuk murid Tahun 1-6.">
<div style="font-family: Arial, sans-serif; line-height: 1.7; color: #333; max-width: 850px; margin: 0 auto; padding: 20px;">
<h1 style="font-size: 28px; color: #a855f7; text-align: center; margin-bottom: 25px;">
Duel Gergasi Nombor: Cara Mudah Membanding Nilai Nombor
</h1>
<div style="margin: 20px 0; padding: 15px; border: 1px solid #f3e8ff; background: #faf5ff; border-radius: 15px; text-align: center;">
<p style="margin: 0 0 10px 0; font-size: 13px; font-weight: bold; color: #7e22ce;">Cari Buku Latihan Matematik & Bahan Bantu Mengajar?</p>
<a href="https://s.shopee.com.my/7VAAA6s3s3" target="_blank" style="color: #ee4d2d; text-decoration: none; font-weight: bold; padding: 8px 15px; border: 2px solid #ee4d2d; border-radius: 8px; display: inline-block;">Cek di Shopee »</a>
</div>
<div class="separator" style="clear: both; text-align: center; margin-bottom: 30px;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHpcLCyCBLr7NqIm67CngL_lAWK8WN6F3hX4cQxmJ_7TMPnY_kPCUnRE2HH2zQuw7x6hqgAFBMoI3pfG5D6bGs4pRV_2XzIx5hvB4ockedaoNQFcjot8zfm9DPcc2GfRdLLDoIFrBNpEyQ2SOFS9qGII2mdBmEYc02M5kngavFTyDQHgzoQXkWeNRxEwQ/s783/banding%20nombor.png">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHpcLCyCBLr7NqIm67CngL_lAWK8WN6F3hX4cQxmJ_7TMPnY_kPCUnRE2HH2zQuw7x6hqgAFBMoI3pfG5D6bGs4pRV_2XzIx5hvB4ockedaoNQFcjot8zfm9DPcc2GfRdLLDoIFrBNpEyQ2SOFS9qGII2mdBmEYc02M5kngavFTyDQHgzoQXkWeNRxEwQ/s783/banding%20nombor.png" style="width: 100%; max-width: 600px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.1);" alt="Duel Gergasi Nombor Banding Matematik"/>
</a>
</div>
<p>Adakah anak atau murid anda keliru menentukan nombor mana yang lebih besar? Di <strong>Layanlah.com</strong>, kami perkenalkan <strong>Duel Gergasi Nombor V3.1</strong>. Game ini melatih murid membandingkan bilangan digit dan nilai tempat secara sistematik menggunakan metafora 'Mulut Buaya'.</p>
<div id="duel-banding-v3" style="max-width: 800px; margin: 30px auto; background: #fdf4ff; border: 5px solid #a855f7; border-radius: 35px; overflow: hidden; box-shadow: 0 15px 0 #7e22ce;">
<div style="background: #a855f7; color: white; padding: 15px; text-align: center; display: flex; justify-content: space-between; align-items: center;">
<div style="text-align: left; padding-left: 10px;">
<h2 style="margin:0; font-size: 18px; color:white !important;">DUEL BANDING V3.1</h2>
<p id="p_display_name" style="margin:0; font-size: 11px; opacity: 0.9;">Edisi Bimbingan Nilai Tempat</p>
</div>
<div style="display: flex; align-items: center; gap: 10px;">
<button onclick="location.reload()" style="background: #ef4444; color: white; border: none; padding: 5px 10px; border-radius: 8px; font-size: 10px; cursor: pointer; font-weight: bold;">MENU</button>
<div style="background: #fbbf24; color: #92400e; padding: 5px 12px; border-radius: 12px; font-weight: bold; margin-right: 10px; font-size: 14px;">SKOR: <span id="d_score">0</span></div>
</div>
</div>
<div id="d_start_screen" style="padding: 30px; text-align: center; background: white;">
<h3 style="color: #0369a1;">Nama Kadet Matematik:</h3>
<input type="text" id="d_player_name" placeholder="Masukkan nama..." style="width: 70%; padding: 12px; border-radius: 12px; border: 3px solid #a855f7; margin-bottom: 20px; font-size: 16px; text-align: center;">
<br>
<button onclick="initDuel()" style="background: #a855f7; color: white; border: none; padding: 15px 40px; border-radius: 15px; font-size: 20px; font-weight: bold; cursor: pointer;">MULA MISI</button>
</div>
<div id="d_game_screen" style="display:none; padding: 20px;">
<div id="panel-kawalan" style="background: white; padding: 15px; border-radius: 20px; border: 2px solid #d8b4fe; text-align: center; margin-bottom: 15px;">
<label style="font-size: 11px; font-weight: bold; color: #64748b;">HAD MAKSIMUM:</label><br>
<select id="d_limit" onchange="clickCount=0;janaDuaNombor()" style="padding: 5px; border-radius: 8px; font-size: 12px; margin-bottom: 5px;">
<option value="10">Sa</option><option value="100">Puluh</option><option value="1000">Ratus</option><option value="10000">Ribu</option><option value="100000">P.Ribu</option><option value="1000000">R.Ribu</option><option value="10000000" selected>Juta</option>
</select><br>
<button onclick="janaDuaNombor()" style="background: #3b82f6; color: white; border: none; padding: 10px 25px; border-radius: 12px; font-weight: bold; cursor: pointer;">JANA NOMBOR RAWAK</button>
</div>
<div id="arena-banding" style="display:none; background: #fff; padding: 20px; border-radius: 25px; border: 3px dashed #a855f7; text-align: center;">
<p id="d_instr" style="font-size: 13px; color: #7e22ce; margin-bottom: 20px; font-weight: bold; background: #fdf4ff; padding: 10px; border-radius: 10px; min-height: 40px;"></p>
<div id="grid-container" style="display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 20px; overflow-x: auto; padding: 10px;">
<div id="row_a" style="display: flex; gap: 5px;"></div><div id="row_b" style="display: flex; gap: 5px;"></div>
</div>
<div style="margin: 20px 0; display: flex; justify-content: center; align-items: center; gap: 20px;">
<div style="font-size: 12px; color: #3b82f6; font-weight: bold;">NOMBOR A</div>
<div id="drop_simbol" style="width: 70px; height: 70px; border: 4px dashed #a855f7; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 35px; background: #faf5ff;">?</div>
<div style="font-size: 12px; color: #ef4444; font-weight: bold;">NOMBOR B</div>
</div>
<div id="d_choices" style="display: flex; justify-content: center; gap: 30px;">
<div style="text-align: center;"><div draggable="true" ondragstart="drag(event)" id="sym_gt" style="cursor:grab; background: #22c55e; color: white; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 12px; font-size: 30px; font-weight: bold; box-shadow: 0 4px 0 #15803d;">></div><div style="font-size: 10px; margin-top: 5px; color: #15803d; font-weight: bold;">lebih besar</div></div>
<div style="text-align: center;"><div draggable="true" ondragstart="drag(event)" id="sym_lt" style="cursor:grab; background: #eab308; color: white; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 12px; font-size: 30px; font-weight: bold; box-shadow: 0 4px 0 #a16207;"><</div><div style="font-size: 10px; margin-top: 5px; color: #a16207; font-weight: bold;">lebih kecil</div></div>
</div>
<div id="d_feedback" style="margin-top: 15px; min-height: 40px; font-weight: bold; font-size: 16px;"></div>
<button id="btn_next" onclick="janaDuaNombor()" style="display:none; margin-top: 10px; background: #a855f7; color: white; border: none; padding: 10px 25px; border-radius: 10px; cursor: pointer; font-weight: bold;">TERUSKAN</button>
</div>
</div>
</div>
<script>
let score = 0; let nA, nB; let clickCount = 0;
function initDuel() { player = document.getElementById('d_player_name').value || "Kadet"; document.getElementById('p_display_name').innerText = "Kadet: " + player; document.getElementById('d_start_screen').style.display = 'none'; document.getElementById('d_game_screen').style.display = 'block'; }
function janaDuaNombor() {
clickCount++; const limit = parseInt(document.getElementById('d_limit').value);
if (clickCount % 3 === 0) { nA = Math.floor(Math.random() * limit).toString(); nB = Math.floor(Math.random() * (limit / 10)).toString(); }
else if (clickCount % 2 === 0) { let pfx = Math.floor(Math.random() * 9) + 1; let sLen = limit.toString().length - 2; nA = pfx + Math.floor(Math.random() * Math.pow(10, sLen)).toString().padStart(sLen, '0'); nB = pfx + Math.floor(Math.random() * Math.pow(10, sLen)).toString().padStart(sLen, '0'); }
else { nA = Math.floor(Math.random() * limit).toString(); nB = Math.floor(Math.random() * limit).toString(); }
while(nA === nB) nB = Math.floor(Math.random() * limit).toString();
document.getElementById('arena-banding').style.display = 'block'; document.getElementById('d_feedback').innerText = ""; document.getElementById('btn_next').style.display = 'none'; document.getElementById('d_choices').style.display = 'flex'; document.getElementById('drop_simbol').innerText = "?"; document.getElementById('drop_simbol').style.background = "#faf5ff";
susunKotak(); mulaBimbingan();
}
function susunKotak() {
const rA = document.getElementById('row_a'); const rB = document.getElementById('row_b');
rA.innerHTML = '<div style="width:70px; font-size:9px; display:flex; align-items:center; color:#3b82f6; font-weight:bold;">A</div>';
rB.innerHTML = '<div style="width:70px; font-size:9px; display:flex; align-items:center; color:#ef4444; font-weight:bold;">B</div>';
const maxL = Math.max(nA.length, nB.length); const sA = nA.padStart(maxL, ' '); const sB = nB.padStart(maxL, ' ');
for(let i=0; i<maxL; i++) { rA.innerHTML += buatK(sA[i], i, 'a'); rB.innerHTML += buatK(sB[i], i, 'b'); }
}
function buatK(v, id, t) { let bg = v === ' ' ? 'transparent' : '#f8fafc'; let bd = v === ' ' ? 'none' : '2px solid #cbd5e1'; return '<div id="digit_'+t+'_'+id+'" style="width:35px; height:50px; background:'+bg+'; border:'+bd+'; display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:bold; border-radius:8px;">'+v+'</div>'; }
function mulaBimbingan() {
const ins = document.getElementById('d_instr');
if(nA.length !== nB.length) { ins.innerHTML = "Langkah 1: Bilangan digit tidak sama. Nombor " + (nA.length > nB.length ? "A" : "B") + " mempunyai lebih banyak digit."; highlightD(); }
else { ins.innerHTML = "Langkah 1: Bilangan digit sama. Mari banding dari nilai tempat terbesar (Kiri)."; scanB(); }
}
function highlightD() { const maxL = Math.max(nA.length, nB.length); for(let i=0; i<maxL; i++) { if(document.getElementById('digit_a_'+i).innerText !== ' ') document.getElementById('digit_a_'+i).style.background = "#e0f2fe"; if(document.getElementById('digit_b_'+i).innerText !== ' ') document.getElementById('digit_b_'+i).style.background = "#fee2e2"; } }
function scanB() { const maxL = Math.max(nA.length, nB.length); let f = false; for(let i=0; i<maxL; i++) { const dA = document.getElementById('digit_a_'+i); const dB = document.getElementById('digit_b_'+i); if(nA[i] !== nB[i] && !f) { dA.style.background = "#fef08a"; dB.style.background = "#fef08a"; dA.style.borderColor = "#ca8a04"; dB.style.borderColor = "#ca8a04"; f = true; } } }
function drag(ev) { ev.dataTransfer.setData("text", ev.target.innerText); }
const dropZ = document.getElementById('drop_simbol'); dropZ.ondragover = (e) => e.preventDefault();
dropZ.ondrop = (ev) => { ev.preventDefault(); const d = ev.dataTransfer.getData("text"); ev.target.innerText = d; checkJ(d); };
function checkJ(v) {
const bt = (parseInt(nA) > parseInt(nB)) ? ">" : "<"; const fb = document.getElementById('d_feedback');
if(v === bt) { score++; document.getElementById('d_score').innerText = score; fb.innerHTML = "<span style='color:green'>BETUL!</span>"; document.getElementById('btn_next').style.display = 'inline-block'; document.getElementById('d_choices').style.display = 'none'; document.getElementById('drop_simbol').style.background = "#dcfce7"; }
else { fb.innerHTML = "<span style='color:red'>SALAH! Perhatikan kotak kuning.</span>"; setTimeout(() => { document.getElementById('drop_simbol').innerText = "?"; }, 1000); }
}
</script>
<h3 style="color: #a855f7; margin-top: 40px;">Soalan Lazim (FAQ) Membanding Nombor</h3>
<div style="background: #fdf4ff; padding: 20px; border-radius: 15px;">
<p><strong>S: Kenapa sistem beri nombor dengan digit yang sama?</strong><br>
J: Ini untuk melatih murid membandingkan nilai tempat satu-persatu dari kiri ke kanan sehingga menemui perbezaan.</p>
<p><strong>S: Bolehkah apps ini digunakan untuk murid Tahun 1?</strong><br>
J: Ya, cikgu hanya perlu tukar had maksimum kepada 'Sa' atau 'Puluh' di bahagian pilihan tahap.</p>
</div>
<div style="margin: 30px 0; padding: 15px; border: 1px solid #d1d8e0; border-radius: 12px; text-align: center; background: #fff;">
<p style="margin: 0 0 10px 0; font-size: 13px; font-weight: bold; color: #7e22ce;">Ganjaran Motivasi: Sticker & Cop Ulasan Guru</p>
<a href="https://s.shopee.com.my/7VAAA6s3s3" target="_blank" style="color: #3498db; text-decoration: none; font-weight: bold;">Cek di Shopee »</a>
</div>
<p style="text-align: center; font-size: 11px; color: #999;">Layanlah.com - Sumber Bahan Bantu Mengajar Kreatif.</p>
</div>MeAdminhttp://www.blogger.com/profile/06871300420300644055noreply@blogger.com0tag:blogger.com,1999:blog-5341061453048343895.post-39140347404489785912026-01-20T13:12:00.011+08:002026-01-20T20:54:26.062+08:00Misi Penyelamatan Nombor: Cara Mudah Ajar Anak Bundar (Game Interaktif Matematik)<title>Misi Penyelamatan Nombor: Game Bundar Lengkap (Sa - Juta)</title>
<meta name="description" content="Latihan bundar interaktif 3 mod (Demo, Latihan, Cabaran). Nilai tempat lengkap dari Sa hingga Juta mengikut silibus Matematik KSSR.">
<div style="font-family: Arial, sans-serif; line-height: 1.7; color: #333; max-width: 850px; margin: 0 auto; padding: 20px;">
<h1 style="font-size: 28px; color: #0284c7; text-align: center; margin-bottom: 25px;">
Misi Penyelamatan Nombor: Mod Demo, Latihan & Cabaran (Hingga Juta)
</h1>
<div style="margin: 20px 0; padding: 15px; border: 1px solid #e5e7eb; background: #f0f9ff; border-radius: 15px; text-align: center;">
<p style="margin: 0 0 10px 0; font-size: 13px; font-weight: bold; color: #0284c7;">Cari Buku Latihan Matematik & Sticker Ganjaran Murah?</p>
<a href="https://s.shopee.com.my/7VAAA6s3s3" target="_blank" style="color: #ee4d2d; text-decoration: none; font-weight: bold; padding: 8px 15px; border: 2px solid #ee4d2d; border-radius: 8px; display: inline-block;">Cek di Shopee »</a>
</div>
<div class="separator" style="clear: both; text-align: center; margin-bottom: 30px;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6_tytVaBSdtVR33Qj2iVD9qDkMro5FlMtaYqQ5u-u51JqgVbsvJSAx3EKbZwfaAjOKs37bcOetxBIRRSNuGF4sze-TofgLElxvGkL6WJVGnczFGyzurjrq1QITqGJdp6r6g_GuqzKcEbPiZpBoY_YMFwqV72yJnskjheljg3Y4XOqqeRhBA1ERSRCo6Q/s791/bundar%20nombor.png">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6_tytVaBSdtVR33Qj2iVD9qDkMro5FlMtaYqQ5u-u51JqgVbsvJSAx3EKbZwfaAjOKs37bcOetxBIRRSNuGF4sze-TofgLElxvGkL6WJVGnczFGyzurjrq1QITqGJdp6r6g_GuqzKcEbPiZpBoY_YMFwqV72yJnskjheljg3Y4XOqqeRhBA1ERSRCo6Q/s791/bundar%20nombor.png" style="width: 100%; max-width: 600px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.1);" alt="Misi Penyelamatan Nombor"/>
</a>
</div>
<p>Kuasai tajuk <strong>Bundar Nombor</strong> dengan cara yang paling menyeronokkan! Alat interaktif ini menyediakan 3 mod pembelajaran: <strong>Mod Demo</strong> untuk memerhati, <strong>Mod Latihan</strong> untuk mencuba, dan <strong>Mod Cabaran</strong> untuk menguji kecekapan. Kini lengkap dari nilai tempat Sa sehingga Juta!</p>
<div id="mission-rescue-v3" style="max-width: 800px; margin: 30px auto; background: #f0f9ff; border: 5px solid #0284c7; border-radius: 35px; overflow: hidden; box-shadow: 0 15px 0 #075985;">
<div style="background: #0284c7; color: white; padding: 15px; text-align: center; display: flex; justify-content: space-between; align-items: center;">
<div style="text-align: left; padding-left: 10px;">
<h2 style="margin:0; font-size: 18px; color:white !important;">MISI BUNDAR V3.5</h2>
<p id="p_display_name" style="margin:0; font-size: 11px; opacity: 0.9;">Pilih mod permainan</p>
</div>
<div style="display: flex; align-items: center; gap: 10px;">
<button onclick="goHome()" style="background: #ef4444; color: white; border: none; padding: 5px 10px; border-radius: 8px; font-size: 10px; cursor: pointer; font-weight: bold;">MENU UTAMA</button>
<div style="background: #fbbf24; color: #92400e; padding: 5px 12px; border-radius: 12px; font-weight: bold; margin-right: 10px; font-size: 14px;">SKOR: <span id="m_score">0</span></div>
</div>
</div>
<div id="m_start_screen" style="padding: 30px; text-align: center; background: white;">
<h3 style="color: #0369a1;">Nama Kadet Matematik:</h3>
<input type="text" id="m_player_name" placeholder="Masukkan nama..." style="width: 70%; padding: 12px; border-radius: 12px; border: 3px solid #0284c7; margin-bottom: 20px; font-size: 16px; text-align: center;">
<div style="display: grid; gap: 10px; max-width: 320px; margin: 0 auto;">
<button onclick="initGame('demo')" style="background: #a855f7; color: white; border: none; padding: 12px; border-radius: 12px; font-weight: bold; cursor: pointer; box-shadow: 0 4px 0 #7e22ce;">1. MOD DEMO (AUTO)</button>
<button onclick="initGame('guide')" style="background: #3b82f6; color: white; border: none; padding: 12px; border-radius: 12px; font-weight: bold; cursor: pointer; box-shadow: 0 4px 0 #1d4ed8;">2. MOD LATIHAN (GERAK)</button>
<button onclick="initGame('test')" style="background: #22c55e; color: white; border: none; padding: 12px; border-radius: 12px; font-weight: bold; cursor: pointer; box-shadow: 0 4px 0 #15803d;">3. MOD CABARAN (TAIP)</button>
</div>
</div>
<div id="m_game_screen" style="display:none; padding: 20px;">
<div id="setup-panel" style="background: white; padding: 15px; border-radius: 20px; border: 2px solid #0ea5e9; text-align: center; margin-bottom: 15px;">
<div style="margin-bottom: 10px;"><label style="font-size: 11px; font-weight: bold; color: #64748b;">HAD MAKSIMUM:</label><br>
<select id="m_max_limit" onchange="generateRandomNum()" style="padding: 5px; border-radius: 8px; font-size: 12px;">
<option value="10">Sa (1-9)</option><option value="100">Puluh</option><option value="1000">Ratus</option><option value="10000">Ribu</option><option value="100000">P.Ribu</option><option value="1000000">R.Ribu</option><option value="10000000" selected>Juta</option>
</select></div>
<div style="margin: 10px 0;"><input type="number" id="m_input_num" style="font-size: 24px; width: 160px; text-align: center; border: 2px solid #0369a1; border-radius: 10px; padding: 5px;">
<button onclick="generateRandomNum()" style="padding: 10px; border-radius: 10px; cursor: pointer; background: #f8fafc; border: 1px solid #cbd5e1;">RAWAK</button></div>
<div id="target-btns" style="display: flex; justify-content: center; gap: 5px; flex-wrap: wrap;">
<button onclick="setupSimulation(1, 'SA')" class="btn-target">SA</button><button onclick="setupSimulation(10, 'PULUH')" class="btn-target">PULUH</button><button onclick="setupSimulation(100, 'RATUS')" class="btn-target">RATUS</button><button onclick="setupSimulation(1000, 'RIBU')" class="btn-target">RIBU</button><button onclick="setupSimulation(10000, 'P.RIBU')" class="btn-target">P.RIBU</button><button onclick="setupSimulation(100000, 'R.RIBU')" class="btn-target">R.RIBU</button><button onclick="setupSimulation(1000000, 'JUTA')" class="btn-target">JUTA</button>
</div>
</div>
<div id="m_sim_area" style="display:none; background: white; padding: 20px; border-radius: 25px; border: 3px dashed #0369a1; text-align: center;">
<div id="m_quest_text" style="font-size: 16px; color: #0369a1; margin-bottom: 10px; background: #e0f2fe; padding: 10px; border-radius: 10px; font-weight: bold;"></div>
<p id="m_instr" style="font-size: 13px; color: #64748b; margin-bottom: 10px;"></p>
<div id="m_digit_display" style="display: flex; justify-content: center; gap: 8px; font-size: 32px; margin: 30px 0; min-height: 100px; align-items: center; flex-wrap: wrap;"></div>
<div id="m_flashlight_zone"><div id="m_flashlight" draggable="true" style="width: 60px; height: 60px; background: #fde047; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; cursor: grab; border: 3px solid #ca8a04; box-shadow: 0 0 20px #facc15; font-weight:bold;">LAMPU</div></div>
<div id="m_answer_zone" style="display:none; margin: 20px 0;">
<div style="background: #fef9c3; padding: 10px; border-radius: 10px; font-size: 13px; color: #854d0e; border: 1px solid #facc15; margin-bottom: 15px;">TIPS: Jiran 0-4 (+0 Sasaran) | Jiran 5-9 (+1 Sasaran)</div>
<input type="number" id="m_user_ans" placeholder="Taip jawapan..." style="padding: 12px; width: 80%; border: 3px solid #22c55e; border-radius: 10px; font-size: 24px; text-align: center;">
<br><button onclick="checkUserAnswer()" style="margin-top:10px; background:#22c55e; color:white; border:none; padding:12px 25px; border-radius:12px; cursor:pointer; font-weight:bold;">SEMAK JAWAPAN</button>
</div>
<div id="m_hill_viz" style="display:none;">
<div style="height: 60px; border-bottom: 3px solid #0369a1; position: relative; overflow: hidden; background: #f8fafc;"><div id="m_car" style="position: absolute; bottom: 0; left: 0; transition: 1.5s; font-size: 15px; font-weight:bold; color:#0284c7;">KERETA</div></div>
<p id="m_final_msg" style="margin-top: 10px; font-size: 16px; font-weight: bold;"></p>
<button onclick="closeSim()" id="btn_next" style="display:none; background: #0369a1; color: white; border: none; padding: 10px 20px; border-radius: 10px; cursor: pointer; font-weight: bold;">SOALAN SETERUSNYA</button>
</div>
</div>
</div>
</div>
<style>.btn-target { background: #facc15; color: #854d0e; border: none; padding: 6px 10px; border-radius: 8px; font-size: 10px; font-weight: bold; cursor: pointer; box-shadow: 0 3px 0 #ca8a04; margin: 2px; } @keyframes bounce-up { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }</style>
<script>
let score = 0; let player = ""; let currentNum = ""; let targetPlace = 0; let gameMode = "";
function goHome() { if(confirm("Kembali ke menu utama?")) { location.reload(); } }
function initGame(mode) { gameMode = mode; player = document.getElementById('m_player_name').value || "Kadet"; document.getElementById('m_start_screen').style.display = 'none'; document.getElementById('m_game_screen').style.display = 'block'; document.getElementById('p_display_name').innerText = "Kadet: " + player + " [" + mode.toUpperCase() + "]"; generateRandomNum(); }
function generateRandomNum() { const limit = parseInt(document.getElementById('m_max_limit').value); const min = Math.max(1, limit / 10); document.getElementById('m_input_num').value = Math.floor(Math.random() * (limit - min)) + min; }
function setupSimulation(place, label) {
targetPlace = place; currentNum = document.getElementById('m_input_num').value;
const len = currentNum.length; let tIdx = -1;
if(place === 1) tIdx = len - 1; else tIdx = len - (Math.round(Math.log10(place)) + 1);
if(tIdx < 0) return alert("Nombor tidak cukup besar untuk nilai tempat ini!");
document.getElementById('m_sim_area').style.display = 'block'; document.getElementById('m_hill_viz').style.display = 'none';
document.getElementById('m_answer_zone').style.display = 'none'; document.getElementById('m_flashlight_zone').style.display = 'block';
document.getElementById('m_flashlight').style.transform = "none";
document.getElementById('m_quest_text').innerHTML = "Bundar " + parseInt(currentNum).toLocaleString() + " kepada " + label + " terdekat";
document.getElementById('m_instr').innerHTML = (gameMode === 'demo') ? "Memulakan Analisis..." : "Tarik Lampu ke Jiran Sebelah Kanan Sasaran";
renderDigits(tIdx); if(gameMode === 'demo') { runAutoDemo(tIdx); }
}
function renderDigits(tIdx) {
const display = document.getElementById('m_digit_display'); display.innerHTML = ''; const jIdx = tIdx + 1;
currentNum.split('').forEach((d, i) => {
const div = document.createElement('div'); div.innerText = d;
div.style = "padding: 10px 15px; border-radius: 12px; background: #f1f5f9; position: relative; min-width: 40px; text-align: center; transition: 0.5s;";
if(i === tIdx) { div.style.background = "#0284c7"; div.style.color = "white"; div.innerHTML += '<div style="font-size:8px; position:absolute; bottom:-16px; left:0; width:100%; color:#0284c7; font-weight:bold;">SASARAN</div>'; }
if(i === jIdx) { div.id = "m_jiran_box"; div.style.border = "3px dashed #ef4444"; div.ondragover = (e) => e.preventDefault(); div.ondrop = () => processLogic(parseInt(d), tIdx); }
display.appendChild(div);
});
if(jIdx >= currentNum.length && targetPlace === 1) { setTimeout(() => processLogic(0, tIdx), 1500); }
}
function runAutoDemo(tIdx) {
const light = document.getElementById('m_flashlight'); const jiran = document.getElementById('m_jiran_box'); if(!jiran) return;
const rJ = jiran.getBoundingClientRect(); const rL = light.getBoundingClientRect();
setTimeout(() => { light.style.transition = "1.5s ease-in-out"; light.style.transform = "translate(" + (rJ.left - rL.left) + "px, " + (rJ.top - rL.top - 20) + "px)"; setTimeout(() => processLogic(parseInt(currentNum[tIdx+1]), tIdx), 1700); }, 500);
}
function processLogic(jVal, tIdx) {
document.getElementById('m_flashlight_zone').style.display = 'none'; document.getElementById('m_hill_viz').style.display = 'block';
const display = document.getElementById('m_digit_display'); const sasaranEl = display.children[tIdx];
if(jVal >= 5) { document.getElementById('m_car').style.left = "80%"; document.getElementById('m_final_msg').innerHTML = "Jiran (" + jVal + ") Kaya! <br><span style='color:green'>Sasaran +1</span>"; sasaranEl.innerHTML += '<div style="position:absolute; top:-35px; left:0; width:100%; color:green; font-weight:bold; animation: bounce-up 0.5s infinite;">+1</div>'; }
else { document.getElementById('m_car').style.left = "0%"; document.getElementById('m_final_msg').innerHTML = "Jiran (" + jVal + ") Miskin. <br><span style='color:red'>Sasaran Kekal (+0)</span>"; sasaranEl.innerHTML += '<div style="position:absolute; top:-35px; left:0; width:100%; color:red; font-weight:bold;">+0</div>'; }
if(gameMode === 'test') { setTimeout(() => { document.getElementById('m_hill_viz').style.display = 'none'; document.getElementById('m_answer_zone').style.display = 'block'; }, 2000); } else { showFinalResult(tIdx); }
}
function showFinalResult(tIdx) {
const result = Math.round(parseInt(currentNum) / targetPlace) * targetPlace; const resStr = result.toString().padStart(currentNum.length, '0');
const display = document.getElementById('m_digit_display');
setTimeout(() => {
currentNum.split('').forEach((d, i) => {
if (i > tIdx) { display.children[i].innerText = "0"; display.children[i].style.opacity = "0.3"; display.children[i].style.background = "#cbd5e1"; }
else if (i === tIdx) { display.children[i].innerText = resStr[i]; display.children[i].style.background = "#fbbf24"; display.children[i].style.color = "#92400e"; display.children[i].style.transform = "scale(1.1)"; }
});
document.getElementById('m_final_msg').innerHTML += "<br><div style='font-size:25px; color:#0284c7;'>JAWAPAN: " + result.toLocaleString() + "</div>";
document.getElementById('btn_next').style.display = 'inline-block'; if(gameMode !== 'demo') { score++; document.getElementById('m_score').innerText = score; }
}, 1500);
}
function checkUserAnswer() {
const uAns = document.getElementById('m_user_ans').value; const cAns = Math.round(parseInt(currentNum) / targetPlace) * targetPlace;
if(parseInt(uAns) === cAns) { alert("Jawapan betul!"); score++; document.getElementById('m_score').innerText = score; closeSim(); }
else { alert("Cuba lagi!"); }
}
function closeSim() { document.getElementById('m_sim_area').style.display = 'none'; document.getElementById('m_user_ans').value = ""; generateRandomNum(); }
</script>
<h3 style="color: #0284c7; margin-top: 40px;">❓ Soalan Lazim (FAQ)</h3>
<div style="margin-bottom: 15px;"><strong>S: Apa kelebihan Mod Demo?</strong><br>J: Membantu murid melihat simulasi langkah-demi-langkah secara automatik untuk memahami konsep 'Jiran Kaya/Miskin'.</div>
<div style="margin-bottom: 15px;"><strong>S: Bolehkah apps ini digunakan untuk Tahun 6?</strong><br>J: Ya, pilih had maksimum 'Juta' untuk berlatih membundar nombor sehingga 7 digit.</div>
<div style="margin: 30px 0; padding: 15px; border: 1px solid #d1d8e0; border-radius: 12px; text-align: center; background: #fdfdfd;">
<p style="margin: 0 0 10px 0; font-size: 13px; font-weight: bold; color: #0284c7;">🎖️ Sticker Ganjaran & Hadiah Galakan Murid</p>
<a href="https://s.shopee.com.my/7VAAA6s3s3" target="_blank" style="color: #3498db; text-decoration: none; font-weight: bold;">Cek di Shopee »</a>
</div>
<p style="text-align: center; font-size: 11px; color: #999;">Layanlah.com - Sumber BBM Interaktif Guru Malaysia.</p>
</div>MeAdminhttp://www.blogger.com/profile/06871300420300644055noreply@blogger.com0tag:blogger.com,1999:blog-5341061453048343895.post-88729301702569509892026-01-20T11:16:00.006+08:002026-01-20T11:25:57.508+08:00Math-Geni: Game Nilai Tempat & Nilai Digit Matematik Sekolah Rendah<title>Math-Geni V3.2: Game Nilai Tempat & Digit (Visual Feedback)</title>
<div style="font-family: 'Segoe UI', sans-serif; line-height: 1.7; color: #333; max-width: 800px; margin: 0 auto; padding: 10px;">
<div class="separator" style="clear: both; text-align: center; margin-bottom: 25px;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-vrNx1z5318C5Z-B5j23DY5NkUJTk-1QeQEw1ZyzHbZjt9kRc3oQebRURtuZoN1Af4jffGw37DfaS7Qj3lU_3RI3d-tX6ylrIgbzrDyxNYAzw7qt3Mb8rmfJEF-TO8hflZJ7vHmBRPqyxUCvtSkmgIXurnrWvAVv6tPkVE2GgDvjW2AqmV7LgzS2zPOw/s782/nilai%20tempat%20nilai%20digit.png">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-vrNx1z5318C5Z-B5j23DY5NkUJTk-1QeQEw1ZyzHbZjt9kRc3oQebRURtuZoN1Af4jffGw37DfaS7Qj3lU_3RI3d-tX6ylrIgbzrDyxNYAzw7qt3Mb8rmfJEF-TO8hflZJ7vHmBRPqyxUCvtSkmgIXurnrWvAVv6tPkVE2GgDvjW2AqmV7LgzS2zPOw/s782/nilai%20tempat%20nilai%20digit.png" width="100%" style="border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.1);" alt="Math-Geni Nilai Tempat dan Nilai Digit"/>
</a>
</div>
<div style="margin: 20px 0; padding: 15px; border: 1px solid #ddd; background: #fffcf0; border-radius: 12px; text-align: center;">
<p style="margin: 0 0 10px 0; font-size: 13px; font-weight: bold;">📚 Perlukan Buku Latihan Matematik Tahun 1 - Tahun 6?</p>
<a href="https://s.shopee.com.my/7VAAA6s3s3" target="_blank" style="color: #ee4d2d; text-decoration: none; font-weight: bold;">Cek Katalog Shopee »</a>
</div>
<div id="math-geni-app" style="max-width: 100%; margin: 20px auto; border: 5px solid #2980b9; border-radius: 30px; overflow: hidden; box-shadow: 0 15px 0 #1a5276; background: white;">
<div style="background: #2980b9; color: white; padding: 20px; text-align: center;">
<h2 style="margin:0; color:white !important; font-family: 'Arial Black', sans-serif;">🧮 MATH-GENI V3.2</h2>
<p id="player-info" style="margin:5px 0 0 0; font-size: 14px; font-weight: bold;">Sedia untuk cabaran Juta?</p>
</div>
<div id="start-screen" style="padding: 40px; text-align: center;">
<input type="text" id="player-name" placeholder="Masukkan Nama Murid..." style="width: 85%; padding: 15px; border-radius: 15px; border: 2px solid #2980b9; margin-bottom: 20px; font-size: 16px; text-align: center;">
<br>
<label style="font-weight: bold; color: #1a5276; font-size: 13px;">PILIH TAHAP BELAJAR:</label><br>
<select id="level-select" style="width: 90%; padding: 12px; border-radius: 12px; margin: 10px 0; font-size: 14px; border: 2px solid #2980b9;">
<option value="100">Ratus (Tahun 1-2)</option>
<option value="1000">Ribu (Tahun 2-3)</option>
<option value="10000">Puluh Ribu (Tahun 3-4)</option>
<option value="100000">Ratus Ribu (Tahun 5)</option>
<option value="1000000">Juta (Tahun 6)</option>
</select>
<br><br>
<button onclick="startGame()" style="background: #27ae60; color: white; border: none; padding: 15px 40px; border-radius: 15px; font-size: 18px; font-weight: bold; cursor: pointer; box-shadow: 0 5px 0 #1e8449;">MULA BERMAIN! 🚀</button>
</div>
<div id="game-screen" style="display:none; padding: 20px;">
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 15px;">
<div style="background: #ebf5fb; padding: 10px; border-radius: 15px; text-align: center; border: 2px solid #2980b9;">
<div style="font-size: 9px; font-weight: bold; color:#2980b9;">SKOR NILAI TEMPAT</div>
<div id="score-tempat" style="font-size: 24px; font-weight:bold; color: #2980b9;">0</div>
</div>
<div style="background: #fef9e7; padding: 10px; border-radius: 15px; text-align: center; border: 2px solid #f1c40f;">
<div style="font-size: 9px; font-weight: bold; color:#b7950b;">SKOR NILAI DIGIT</div>
<div id="score-digit" style="font-size: 24px; font-weight:bold; color: #f1c40f;">0</div>
</div>
</div>
<div style="display: flex; gap: 5px; margin-bottom: 15px;">
<button onclick="switchTab('tempat')" id="t-btn" style="flex:1; padding:12px; border-radius:12px; border:none; background:#2980b9; color:white; cursor:pointer; font-weight:bold;">NILAI TEMPAT</button>
<button onclick="switchTab('digit')" id="d-btn" style="flex:1; padding:12px; border-radius:12px; border:none; background:#ccc; color:#333; cursor:pointer; font-weight:bold;">NILAI DIGIT</button>
</div>
<div id="play-area" style="background: #fff; padding: 20px; border-radius: 20px; text-align: center; border: 1px solid #eee;">
<h1 id="target-num" style="font-size: 38px; margin: 10px 0; color: #2c3e50; letter-spacing: 2px;">0</h1>
<div id="area-tempat">
<div id="pool" style="display: flex; justify-content: center; gap: 8px; margin-bottom: 15px; min-height: 45px; border: 2px dashed #ddd; padding: 10px; border-radius: 15px;"></div>
<div id="zones" style="display: flex; justify-content: center; gap: 5px; flex-wrap: wrap;"></div>
</div>
<div id="area-digit" style="display:none;">
<div id="inputs-digit" style="display: flex; flex-direction: column; gap: 8px; margin-top:15px;"></div>
</div>
<button onclick="checkAnswer()" style="width: 100%; background: #2980b9; color: white; border: none; padding: 15px; border-radius: 15px; font-weight: bold; margin-top: 20px; cursor: pointer; box-shadow: 0 4px 0 #1a5276;">SEMAK JAWAPAN ✔️</button>
<p id="msg" style="margin-top: 15px; font-weight: bold; font-size: 18px;"></p>
</div>
</div>
</div>
<script>
//<![CDATA[
let scoreT = 0; let scoreD = 0;
let mode = 'tempat'; let targetStr = "";
function startGame() {
const name = document.getElementById('player-name').value || "Murid";
document.getElementById('player-info').innerText = "Pemain: " + name;
document.getElementById('start-screen').style.display = 'none';
document.getElementById('game-screen').style.display = 'block';
newQ();
}
function switchTab(m) {
mode = m;
document.getElementById('t-btn').style.background = m === 'tempat' ? '#2980b9' : '#ccc';
document.getElementById('t-btn').style.color = m === 'tempat' ? 'white' : '#333';
document.getElementById('d-btn').style.background = m === 'digit' ? '#2980b9' : '#ccc';
document.getElementById('d-btn').style.color = m === 'digit' ? 'white' : '#333';
document.getElementById('area-tempat').style.display = m === 'tempat' ? 'block' : 'none';
document.getElementById('area-digit').style.display = m === 'digit' ? 'block' : 'none';
newQ();
}
function newQ() {
const max = parseInt(document.getElementById('level-select').value);
const n = Math.floor(Math.random() * (max - (max/10))) + (max/10);
targetStr = n.toString();
document.getElementById('target-num').innerText = n.toLocaleString();
document.getElementById('msg').innerText = "";
mode === 'tempat' ? setT() : setD();
}
function setT() {
const pool = document.getElementById('pool'); pool.innerHTML = '';
const zones = document.getElementById('zones'); zones.innerHTML = '';
const labels = ['SA', 'PULUH', 'RATUS', 'RIBU', 'P. RIBU', 'R. RIBU', 'JUTA'];
targetStr.split('').sort(() => Math.random() - 0.5).forEach(d => {
const item = document.createElement('div');
item.innerText = d; item.draggable = true;
item.className = "drag-item";
item.style = "width:35px; height:35px; background:#2980b9; color:white; border-radius:5px; display:flex; align-items:center; justify-content:center; cursor:move; font-weight:bold;";
item.ondragstart = (e) => e.dataTransfer.setData('text', d);
pool.appendChild(item);
});
for(let i = targetStr.length - 1; i >= 0; i--) {
const z = document.createElement('div');
z.className = "drop-zone-box";
z.style = "width:50px; height:75px; border:2px solid #2980b9; border-radius:8px; background:#f4faff; transition: 0.3s;";
z.innerHTML = `<div style="font-size:7px; font-weight:bold; padding:3px; color:#2980b9;">${labels[i]}</div><div class="drop-val" style="font-size:24px; font-weight:bold; color:#333;"></div>`;
z.ondragover = (e) => e.preventDefault();
z.ondrop = (e) => {
z.querySelector('.drop-val').innerText = e.dataTransfer.getData('text');
z.style.background = "#f4faff"; // reset color on drop
};
zones.appendChild(z);
}
}
function setD() {
const cont = document.getElementById('inputs-digit'); cont.innerHTML = '';
const rev = targetStr.split('').reverse();
rev.forEach((d, i) => {
const row = document.createElement('div');
row.style = "margin-bottom:8px;";
row.innerHTML = `<span style="font-size:12px;">Nilai digit <b>${d}</b>:</span> <input type="number" class="d-input" data-ans="${d * Math.pow(10, i)}" style="width:110px; padding:6px; border-radius:8px; border:1px solid #f1c40f; text-align:center; transition: 0.3s;">`;
cont.prepend(row);
});
}
function checkAnswer() {
let correct = true;
if(mode === 'tempat') {
const boxes = document.querySelectorAll('.drop-zone-box');
boxes.forEach((box, idx) => {
const val = box.querySelector('.drop-val').innerText;
if(val !== targetStr[idx]) {
correct = false;
box.style.background = "#fadbd8"; // Red background
box.style.borderColor = "#e74c3c";
} else {
box.style.background = "#d4efdf"; // Green background
box.style.borderColor = "#27ae60";
}
});
} else {
document.querySelectorAll('.d-input').forEach(input => {
if(parseInt(input.value) !== parseInt(input.getAttribute('data-ans'))) {
correct = false;
input.style.borderColor = "#e74c3c";
input.style.background = "#fadbd8";
} else {
input.style.borderColor = "#27ae60";
input.style.background = "#d4efdf";
}
});
}
if(correct) {
if(mode === 'tempat') { scoreT++; document.getElementById('score-tempat').innerText = scoreT; }
else { scoreD++; document.getElementById('score-digit').innerText = scoreD; }
document.getElementById('msg').innerHTML = "BETUL! 👍 +1 MATA";
document.getElementById('msg').style.color = "#27ae60";
setTimeout(newQ, 1200);
} else {
document.getElementById('msg').innerHTML = "ADA YANG SALAH! ❌ Perbaiki kotak merah.";
document.getElementById('msg').style.color = "#e74c3c";
}
}
//]]>
</script>
<div style="margin: 25px 0; padding: 15px; border: 1px solid #d1d8e0; border-radius: 12px; text-align: center;">
<p style="margin: 0 0 10px 0; font-size: 13px; font-weight: bold;">🎖️ Koleksi Gadjet Pembelajaran & Alat Tulis Murah</p>
<a href="https://s.shopee.com.my/7VAAA6s3s3" target="_blank" style="color: #3498db; text-decoration: none; font-weight: bold;">Lihat Katalog Shopee »</a>
</div>
</div>MeAdminhttp://www.blogger.com/profile/06871300420300644055noreply@blogger.com0tag:blogger.com,1999:blog-5341061453048343895.post-40666777170018517442026-01-19T23:36:00.005+08:002026-01-20T00:04:29.586+08:00Giant Poster Maker: Bina Poster Gergasi Guna Printer A4 (Percuma!)<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.min.js"></script>
<div style="color: #333333; font-family: sans-serif; line-height: 1.6; margin-bottom: 25px;">
<p>Urusan hiasan kelas dan persiapan majlis kini lebih mudah dengan <b>Giant Poster Maker Pro V2.1</b>. Tool ini membolehkan anda menjana poster gergasi daripada fail <b>PDF, JPG, atau PNG</b> dengan sistem <b>Smart-Fit</b> yang memastikan gambar tidak 'stretch' atau herot.</p>
</div>
<div style="background: rgb(249, 250, 251); border-radius: 12px; border: 1px solid rgb(229, 231, 235); margin: 20px 0px; padding: 15px; text-align: center;">
<p style="font-size: 13px; font-weight: bold; margin: 0px 0px 10px;">🛒 Stok Kertas Tebal (100gsm-160gsm) & Gam Stik Murah</p>
<a href="https://s.shopee.com.my/7VAAA6s3s3" style="color: #ee4d2d; font-weight: bold; text-decoration: none;" target="_blank">Lihat Katalog Shopee »</a>
</div>
<div class="separator" style="clear: both; margin-bottom: 30px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2_gBPoHltejcYvmnACmKEZN8z6WJ683_Ea_El3ylMAfnseKHXf4fOk3GNB3qhaRS5BVY7iGETznX_95HXyKQoGcoR6rcdIeHhy3kXpvemwfq8v7nvKfYQBKpa_JVhScHG3ryOo_9EEWKNCAr6b0tO4fR91Ybt5lYFfoeBvDFHa_HsSHQnTCxKUmj6zKY/s762/poster%20generator.png">
<img alt="Giant Poster Maker Pro V2.1" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2_gBPoHltejcYvmnACmKEZN8z6WJ683_Ea_El3ylMAfnseKHXf4fOk3GNB3qhaRS5BVY7iGETznX_95HXyKQoGcoR6rcdIeHhy3kXpvemwfq8v7nvKfYQBKpa_JVhScHG3ryOo_9EEWKNCAr6b0tO4fR91Ybt5lYFfoeBvDFHa_HsSHQnTCxKUmj6zKY/s762/poster%20generator.png" width="350" />
</a>
</div>
<div id="poster-maker-v2" style="background: rgb(255, 255, 255); border-radius: 25px; border: 2px solid rgb(39, 174, 96); box-shadow: rgba(0, 0, 0, 0.1) 0px 15px 45px; font-family: "Segoe UI", sans-serif; margin: 20px auto; max-width: 850px; overflow: hidden;">
<div style="background: rgb(39, 174, 96); color: white; padding: 25px; text-align: center;">
<h2 style="color: white; font-size: 22px; margin: 0px;">🖼️ GIANT POSTER MAKER PRO V2.1</h2>
<p style="font-size: 11px; margin: 5px 0px 0px; opacity: 0.9;">PDF Support | Smart-Fit Technology | Orientation Control</p>
</div>
<div style="padding: 25px;">
<div style="display: grid; gap: 20px; grid-template-columns: 1fr 1fr; margin-bottom: 20px;">
<div>
<label style="display: block; font-size: 12px; font-weight: bold; margin-bottom: 8px;">1. MUAT NAIK FAIL (PDF/JPG/PNG):</label>
<input accept="image/*,application/pdf" id="f_input" style="border-radius: 10px; border: 1px solid rgb(221, 221, 221); padding: 10px; width: 100%;" type="file" />
</div>
<div>
<label style="display: block; font-size: 12px; font-weight: bold; margin-bottom: 8px;">2. ORIENTASI KERTAS:</label>
<select id="f_orient" onchange="updatePreview()" style="border-radius: 10px; border: 1px solid rgb(204, 204, 204); padding: 10px; width: 100%;">
<option value="p">A4 Menegak (Portrait)</option>
<option value="l">A4 Melintang (Landscape)</option>
</select>
</div>
</div>
<div style="display: grid; gap: 20px; grid-template-columns: 1fr 1fr; margin-bottom: 20px;">
<div>
<label style="font-size: 12px; font-weight: bold;">LEBAR (Bilangan Kertas):</label>
<input id="f_cols" oninput="updatePreview()" style="border-radius: 8px; border: 1px solid rgb(204, 204, 204); padding: 10px; width: 100%;" type="number" value="3" />
</div>
<div>
<label style="font-size: 12px; font-weight: bold;">TINGGI (Bilangan Kertas):</label>
<input id="f_rows" oninput="updatePreview()" style="border-radius: 8px; border: 1px solid rgb(204, 204, 204); padding: 10px; width: 100%;" type="number" value="3" />
</div>
</div>
<div id="preview-container" style="background: rgb(240, 240, 240); border-radius: 15px; border: 2px dashed rgb(204, 204, 204); min-height: 200px; padding: 20px; position: relative; text-align: center;">
<p style="color: #666666; font-size: 10px; font-weight: bold; margin-bottom: 10px;">PREVIEW KEDUDUKAN GAMBAR PADA GRID:</p>
<div id="grid-visual" style="background: white; border: 1px solid rgb(51, 51, 51); box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 15px; display: inline-grid; position: relative;">
</div>
</div>
<button id="f_btn" onclick="processAndGenerate()" style="background: rgb(39, 174, 96); border-radius: 15px; border: medium; box-shadow: rgb(30, 132, 73) 0px 6px 0px; color: white; cursor: pointer; font-size: 18px; font-weight: bold; margin-top: 20px; padding: 18px; width: 100%;">📥 JANA POSTER (SMART FIT)</button>
<p id="f_loading" style="color: #27ae60; display: none; font-weight: bold; margin-top: 10px; text-align: center;">Memproses fail... Sila tunggu sebentar.</p>
</div>
</div>
<canvas id="f_canvas" style="display: none;"></canvas>
<script>
//<![CDATA[
let sourceImg = null;
document.getElementById('f_input').addEventListener('change', async function(e) {
const file = e.target.files[0];
if (!file) return;
if (file.type === "application/pdf") {
const fileReader = new FileReader();
fileReader.onload = async function() {
const typedarray = new Uint8Array(this.result);
const pdfjsLib = window['pdfjs-dist/build/pdf'];
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.worker.min.js';
const pdf = await pdfjsLib.getDocument(typedarray).promise;
const page = await pdf.getPage(1);
const viewport = page.getViewport({scale: 2});
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
canvas.height = viewport.height; canvas.width = viewport.width;
await page.render({canvasContext: context, viewport: viewport}).promise;
sourceImg = new Image(); sourceImg.src = canvas.toDataURL();
sourceImg.onload = updatePreview;
};
fileReader.readAsArrayBuffer(file);
} else {
sourceImg = new Image(); sourceImg.src = URL.createObjectURL(file);
sourceImg.onload = updatePreview;
}
});
function updatePreview() {
if (!sourceImg) return;
const cols = parseInt(document.getElementById('f_cols').value);
const rows = parseInt(document.getElementById('f_rows').value);
const orient = document.getElementById('f_orient').value;
const grid = document.getElementById('grid-visual');
const paperW = orient === 'p' ? 210 : 297; const paperH = orient === 'p' ? 297 : 210;
const cellSize = 40;
grid.style.gridTemplateColumns = `repeat(${cols}, ${cellSize}px)`;
grid.style.gridTemplateRows = `repeat(${rows}, ${cellSize * (paperH/paperW)}px)`;
grid.innerHTML = '';
for (let i = 0; i < cols * rows; i++) {
const cell = document.createElement('div');
cell.style.border = "1px solid #ddd"; grid.appendChild(cell);
}
const imgOverlay = document.createElement('img');
imgOverlay.src = sourceImg.src; imgOverlay.style.position = "absolute";
imgOverlay.style.top = "50%"; imgOverlay.style.left = "50%"; imgOverlay.style.transform = "translate(-50%, -50%)";
const containerRatio = (cols * paperW) / (rows * paperH);
const imgRatio = sourceImg.width / sourceImg.height;
if (imgRatio > containerRatio) { imgOverlay.style.width = "100%"; imgOverlay.style.height = "auto"; }
else { imgOverlay.style.height = "100%"; imgOverlay.style.width = "auto"; }
imgOverlay.style.opacity = "0.6"; grid.appendChild(imgOverlay);
}
async function processAndGenerate() {
if (!sourceImg) { alert("Sila muat naik fail!"); return; }
document.getElementById('f_btn').disabled = true;
document.getElementById('f_loading').style.display = 'block';
const { jsPDF } = window.jspdf;
const cols = parseInt(document.getElementById('f_cols').value);
const rows = parseInt(document.getElementById('f_rows').value);
const orient = document.getElementById('f_orient').value;
const pdf = new jsPDF(orient, 'mm', 'a4');
const paperW = orient === 'p' ? 210 : 297; const paperH = orient === 'p' ? 297 : 210;
const margin = 10;
const printableW = paperW - (margin * 2); const printableH = paperH - (margin * 2);
const totalGridW = cols * printableW; const totalGridH = rows * printableH;
const scale = Math.min(totalGridW / sourceImg.width, totalGridH / sourceImg.height);
const finalW = sourceImg.width * scale; const finalH = sourceImg.height * scale;
const offsetX = (totalGridW - finalW) / 2; const offsetY = (totalGridH - finalH) / 2;
const canvas = document.getElementById('f_canvas'); const ctx = canvas.getContext('2d');
// Page 1: Guide
pdf.setFontSize(14); pdf.text("PANDUAN PEMASANGAN POSTER", paperW/2, 20, {align:'center'});
pdf.addImage(sourceImg.src, 'JPEG', paperW*0.2, 30, paperW*0.6, (sourceImg.height/sourceImg.width)*(paperW*0.6));
for (let r = 0; r < rows; r++) {
for (let c = 0; c < cols; c++) {
pdf.addPage();
const sX = (c * printableW - offsetX) / scale; const sY = (r * printableH - offsetY) / scale;
const sW = printableW / scale; const sH = printableH / scale;
canvas.width = printableW * 4; canvas.height = printableH * 4;
ctx.fillStyle = "white"; ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(sourceImg, sX, sY, sW, sH, 0, 0, canvas.width, canvas.height);
pdf.addImage(canvas.toDataURL('image/jpeg', 0.8), 'JPEG', margin, margin, printableW, printableH);
// GLUE GUIDES
pdf.setDrawColor(180); pdf.setLineDashPattern([2, 2], 0);
if (c < cols - 1) {
pdf.line(paperW - margin, margin, paperW - margin, paperH - margin);
pdf.setFontSize(6); pdf.text("TAMPAL DI SINI", paperW - margin + 2, paperH/2, {angle: 90});
}
if (r < rows - 1) {
pdf.line(margin, paperH - margin, paperW - margin, paperH - margin);
pdf.setFontSize(6); pdf.text("TAMPAL DI SINI", paperW/2, paperH - margin + 4, {align:'center'});
}
pdf.setFontSize(8); pdf.setTextColor(150);
pdf.text(`B:${r+1} K:${c+1}`, paperW/2, paperH - 5, {align:'center'});
}
}
pdf.save("Giant_Poster_Layanlah_V2.pdf");
document.getElementById('f_btn').disabled = false;
document.getElementById('f_loading').style.display = 'none';
}
//]]>
</script>
<div style="background: #fdfdfd; border: 1px solid #e1e8ed; border-radius: 20px; padding: 25px; margin-top: 30px; box-shadow: 0 4px 15px rgba(0,0,0,0.05);">
<h3 style="color: #27ae60; border-bottom: 2px solid #27ae60; display: inline-block; padding-bottom: 5px; margin-bottom: 20px;">
<i class="fas fa-list-ol"></i> CARA PENGGUNAAN GIANT POSTER MAKER
</h3>
<div style="display: flex; flex-direction: column; gap: 15px;">
<div style="display: flex; align-items: flex-start; gap: 10px;">
<span style="background: #27ae60; color: white; border-radius: 50%; width: 25px; height: 25px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 12px; font-weight: bold;">1</span>
<p style="margin: 0; font-size: 14px;"><strong>Muat Naik Fail:</strong> Pilih gambar (JPG/PNG) atau fail PDF yang ingin dijadikan poster gergasi.</p>
</div>
<div style="display: flex; align-items: flex-start; gap: 10px;">
<span style="background: #27ae60; color: white; border-radius: 50%; width: 25px; height: 25px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 12px; font-weight: bold;">2</span>
<p style="margin: 0; font-size: 14px;"><strong>Pilih Orientasi:</strong> Pilih <b>Portrait</b> (A4 Menegak) atau <b>Landscape</b> (A4 Melintang).</p>
</div>
<div style="display: flex; align-items: flex-start; gap: 10px;">
<span style="background: #27ae60; color: white; border-radius: 50%; width: 25px; height: 25px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 12px; font-weight: bold;">3</span>
<p style="margin: 0; font-size: 14px;"><strong>Tentukan Saiz:</strong> Masukkan bilangan kepingan A4 (Lebar x Tinggi). Semak kedudukan gambar pada kotak <b>Preview</b>.</p>
</div>
<div style="display: flex; align-items: flex-start; gap: 10px;">
<span style="background: #27ae60; color: white; border-radius: 50%; width: 25px; height: 25px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 12px; font-weight: bold;">4</span>
<p style="margin: 0; font-size: 14px;"><strong>Jana PDF:</strong> Klik butang 'Jana Poster'. Anda akan dapat fail PDF mengandungi rujukan penuh & kepingan poster.</p>
</div>
</div>
<div style="background: #eef9f1; border-left: 5px solid #27ae60; padding: 15px; border-radius: 10px; margin-top: 25px;">
<h4 style="margin: 0 0 10px 0; color: #1e8449; font-size: 16px;"><i class="fas fa-lightbulb"></i> TIPS PRO LAYANLAH:</h4>
<ul style="margin: 0; padding-left: 20px; font-size: 13px; line-height: 1.6; color: #2c3e50;">
<li><strong>Ruang Gam:</strong> Gunting lebihan putih bertanda 'TAMPAL DI SINI' untuk cantuman yang kemas.</li>
<li><strong>Jenis Kertas:</strong> Gunakan kertas <b>120gsm - 160gsm</b> untuk poster yang lebih tegak dan tidak mudah koyak.</li>
<li><strong>Cantuman:</strong> Gunakan <i>Glue Stick</i> berkualiti supaya kertas tidak mengelembung (berkedut) akibat basah.</li>
<li><strong>Laminate:</strong> Digalakkan untuk laminate setiap kepingan sebelum disambung supaya poster nampak <i>Premium</i>.</li>
</ul>
</div>
</div>
<div style="border-radius: 12px; border: 1px solid rgb(209, 216, 224); margin: 25px 0px; padding: 15px; text-align: center;">
<p style="font-size: 13px; font-weight: bold; margin: 0px 0px 10px;">🎖️ Frame Poster & Aksesori Hiasan Kelas Murah</p>
<a href="https://s.shopee.com.my/7VAAA6s3s3" style="color: #3498db; font-weight: bold; text-decoration: none;" target="_blank">Cek Katalog Shopee »</a>
</div>
<div style="color: #999999; font-size: 11px; margin-top: 20px; text-align: center;">
Disclaimer: Sistem ini memproses fail secara 'local' di peranti anda. Layanlah tidak menyimpan sebarang fail yang dimuat naik. Kami adalah rakan affiliate Shopee.
</div>MeAdminhttp://www.blogger.com/profile/06871300420300644055noreply@blogger.com0tag:blogger.com,1999:blog-5341061453048343895.post-37324187561631665912026-01-19T23:02:00.007+08:002026-01-19T23:03:06.080+08:00Ultimate Puzzle Generator: Cara Mudah Buat Puzzle Sendiri Untuk Murid!<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<div style="font-family: 'Segoe UI', sans-serif; line-height: 1.7; color: #333; max-width: 800px; margin: 0 auto; padding: 20px;">
<h1 style="text-align: center; color: #2c3e50;">🧩 Ultimate Puzzle Generator: Bina BBM Puzzle Sendiri!</h1>
<div style="text-align: center; margin-bottom: 30px;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlJnTyFtUBfXZa8szz5Y8FapZ_4an3KozMphDwJ0Bm9Knc8sdyybv-x83NNvx9BdHcH7GfkUEhYfdL63mvgg1zD0c7FsrCRM6yn_wu4hbrU02KSEHhHtXym3WLTj4w6dCFvdvI6S7XcZ5r9bw-w_ejdz0teerbSEjmc85cIiZiWRSjeqXJCK2Js_YWRNw/s783/puzzle%20generator.png">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlJnTyFtUBfXZa8szz5Y8FapZ_4an3KozMphDwJ0Bm9Knc8sdyybv-x83NNvx9BdHcH7GfkUEhYfdL63mvgg1zD0c7FsrCRM6yn_wu4hbrU02KSEHhHtXym3WLTj4w6dCFvdvI6S7XcZ5r9bw-w_ejdz0teerbSEjmc85cIiZiWRSjeqXJCK2Js_YWRNw/s783/puzzle%20generator.png" style="width: 100%; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.1);" alt="Puzzle Generator Layanlah">
</a>
</div>
<p>Tukar mana-mana gambar menjadi aktiviti puzzle yang menyeronokkan untuk murid anda! Sesuai untuk set induksi, aktiviti kumpulan, atau bahan bantu mengajar (BBM) yang interaktif.</p>
<div id="puzzle-app" style="background: #ffffff; border: 2px solid #2c3e50; border-radius: 25px; overflow: hidden; box-shadow: 0 15px 45px rgba(0,0,0,0.1); margin: 30px 0;">
<div style="background: #2c3e50; color: white; padding: 20px; text-align: center;">
<h2 style="margin:0; color:white !important;">🎨 PUZZLE MAKER PRO</h2>
</div>
<div style="padding: 25px;">
<div style="margin-bottom: 20px;">
<label style="font-weight:bold; display:block; margin-bottom:10px;">1. MUAT NAIK GAMBAR (JPG/PNG):</label>
<input type="file" id="imageInput" accept="image/*" style="width:100%; padding:10px; border:1px solid #ddd; border-radius:10px;">
</div>
<div style="margin-bottom: 20px;">
<label style="font-weight:bold; display:block; margin-bottom:10px;">2. PILIH TAHAP KESUKARAN (GRID):</label>
<select id="gridSelect" style="width:100%; padding:12px; border-radius:10px; border:1px solid #ccc;">
<option value="2">MUDAH (2 x 2 = 4 Kepingan)</option>
<option value="3" selected>SEDERHANA (3 x 3 = 9 Kepingan)</option>
<option value="4">CABARAN (4 x 4 = 16 Kepingan)</option>
<option value="5">PAKAR (5 x 5 = 25 Kepingan)</option>
</select>
</div>
<div id="previewContainer" style="display:none; text-align:center; margin-bottom:20px; border: 1px dashed #ccc; padding: 10px; border-radius: 10px;">
<p style="font-size: 11px; font-weight: bold; color: #666;">PREVIEW GAMBAR:</p>
<img id="imgPreview" style="max-width: 100%; max-height: 200px; border-radius: 5px;">
</div>
<button onclick="generatePuzzlePDF()" id="btnGenerate" style="width:100%; background:#e67e22; color:white; border:none; padding:18px; border-radius:15px; font-weight:bold; font-size: 18px; cursor:pointer; box-shadow: 0 6px 0 #b35d10; transition: 0.2s;">📥 JANA PDF PUZZLE</button>
<p id="loadingText" style="display:none; text-align:center; color:#e67e22; font-weight:bold; margin-top:10px;">Sila tunggu, sistem sedang memproses gambar...</p>
</div>
</div>
<h3 style="color: #2c3e50;">Cara Guna:</h3>
<ol>
<li>Pilih gambar yang menarik (gambar tokoh, peta, atau objek).</li>
<li>Pilih bilangan grid. Lagi besar nombor, lagi banyak kepingan puzzle.</li>
<li>Klik butang Jana. Fail PDF akan mengandungi <b>Gambar Penuh</b> (sebagai rujukan) dan <b>Kepingan Puzzle</b> di mukasurat seterusnya.</li>
<li>Print dan gunting mengikut garisan grid yang disediakan.</li>
</ol>
</div>
<canvas id="workCanvas" style="display:none;"></canvas>
<script>
// PREVIEW IMAGE
document.getElementById('imageInput').onchange = function (evt) {
const [file] = evt.target.files;
if (file) {
document.getElementById('imgPreview').src = URL.createObjectURL(file);
document.getElementById('previewContainer').style.display = 'block';
}
}
async function generatePuzzlePDF() {
const { jsPDF } = window.jspdf;
const fileInput = document.getElementById('imageInput');
const gridSize = parseInt(document.getElementById('gridSelect').value);
if (fileInput.files.length === 0) {
alert("Sila muat naik gambar terlebih dahulu!");
return;
}
document.getElementById('btnGenerate').disabled = true;
document.getElementById('loadingText').style.display = 'block';
const file = fileInput.files[0];
const img = new Image();
img.src = URL.createObjectURL(file);
img.onload = function() {
const canvas = document.getElementById('workCanvas');
const ctx = canvas.getContext('2d');
const pdf = new jsPDF('p', 'mm', 'a4');
// 1. PAGE 1: GAMBAR RUJUKAN
pdf.setFont("helvetica", "bold");
pdf.text("RUJUKAN PUZZLE (GAMBAR ASAL)", 105, 20, {align: 'center'});
// Calculate aspect ratio to fit A4
let imgWidth = 170;
let imgHeight = (img.height / img.width) * imgWidth;
if (imgHeight > 220) {
imgHeight = 220;
imgWidth = (img.width / img.height) * imgHeight;
}
pdf.addImage(img, 'JPEG', (210-imgWidth)/2, 30, imgWidth, imgHeight);
pdf.rect((210-imgWidth)/2, 30, imgWidth, imgHeight);
// 2. PAGE 2: KEPINGAN PUZZLE
pdf.addPage();
pdf.text("KEPINGAN PUZZLE (SILA GUNTING)", 105, 20, {align: 'center'});
const pieceW = img.width / gridSize;
const pieceH = img.height / gridSize;
const pdfPieceW = imgWidth / gridSize;
const pdfPieceH = imgHeight / gridSize;
const startX = (210 - imgWidth) / 2;
const startY = 30;
canvas.width = pieceW;
canvas.height = pieceH;
for (let row = 0; row < gridSize; row++) {
for (let col = 0; col < gridSize; col++) {
// Clear and Draw slice
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, col * pieceW, row * pieceH, pieceW, pieceH, 0, 0, pieceW, pieceH);
// Get Base64 of the slice
const sliceData = canvas.toDataURL('image/jpeg', 0.8);
// Add to PDF
const xPos = startX + (col * pdfPieceW);
const yPos = startY + (row * pdfPieceH);
pdf.addImage(sliceData, 'JPEG', xPos, yPos, pdfPieceW, pdfPieceH);
pdf.setDrawColor(200); // Light gray line for cutting
pdf.rect(xPos, yPos, pdfPieceW, pdfPieceH);
}
}
pdf.save("Layanlah_Puzzle_Generator.pdf");
document.getElementById('btnGenerate').disabled = false;
document.getElementById('loadingText').style.display = 'none';
};
}
</script>
<div style="margin: 30px 0; padding: 15px; border: 1px solid #d1d8e0; border-radius: 12px; text-align: center;">
<p style="margin: 0 0 10px 0; font-size: 13px; font-weight: bold;">🛒 Cari Kertas Khas (Glossy) Untuk Print Puzzle?</p>
<a href="https://s.shopee.com.my/7VAAA6s3s3" target="_blank" style="color: #3498db; text-decoration: none; font-weight: bold;">Cek di Shopee »</a>
</div>MeAdminhttp://www.blogger.com/profile/06871300420300644055noreply@blogger.com0tag:blogger.com,1999:blog-5341061453048343895.post-19204381507787893292026-01-19T22:51:00.006+08:002026-01-19T22:55:33.972+08:00Minit Curai Digital (ISO PK 07/3): Jana Laporan Kursus Cepat & Rasmi<title>Minit Curai Digital (ISO PK 07/3): Jana Laporan Kursus Cepat & Rasmi</title>
<meta content="Jana Minit Curai Digital mengikut format ISO SPSK PK 07/3 dengan pantas dan mudah. Tool percuma ini membolehkan guru-guru hasilkan laporan kursus, mesyuarat atau bengkel secara online, siap untuk cetak atau hantar PDF." name="description"></meta>
<link href="https://www.layanlah.com/2024/07/minit-curai-digital-iso-pk073.html" rel="canonical"></link>
<div style="color: #333333; font-family: "Segoe UI", sans-serif; line-height: 1.7; margin: 0px auto; max-width: 800px; padding: 20px;">
<h1 style="color: #2c3e50; font-size: 28px; margin-bottom: 25px; text-align: center;">
📝 Minit Curai Digital (ISO PK 07/3): Jana Laporan Kursus Cepat & Rasmi
</h1>
<div class="separator" style="clear: both; margin-bottom: 30px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWxXiQjWujm2cvYVUEbWkQo-B08pPkNSlGJWwYsaO8JYksUaTemkoj_njmnzxlmyyJ7dnJBR1FpNF5yMJZZ3xG-GCFpAKhJoPKW8JsZVnsyy9uNHdp6B8HSyLN5wCkFQ6LhlYP1rejpBMU6H94n467M4KdtdlpzrsnKNSDAmHu3tdOG9tEgXtqbWxew8I/s775/minit%20curai.png" style="display: block; padding: 1em 0px; text-align: center;"></a><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWxXiQjWujm2cvYVUEbWkQo-B08pPkNSlGJWwYsaO8JYksUaTemkoj_njmnzxlmyyJ7dnJBR1FpNF5yMJZZ3xG-GCFpAKhJoPKW8JsZVnsyy9uNHdp6B8HSyLN5wCkFQ6LhlYP1rejpBMU6H94n467M4KdtdlpzrsnKNSDAmHu3tdOG9tEgXtqbWxew8I/s775/minit%20curai.png" style="display: block; padding: 1em 0px; text-align: center;"></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBgdAZkgohjXD_bJTvfyGbfIT6Aeho1G7EaV65hcGSL7h-f2fAwgOiVcew8HVMiiWFT2P2X89fqnW7MOnFlzu5VfWkRy6qFGB7aQbTAV3fbR0RyJa2NilVX6gGMrjWMvpsOC6cfvlR0Cek-G5PoHkg8k7Mlovmpy5Urf90Ebo3SZctakgeU9hyphenhyphensj-4Fkk/s775/minit%20curai.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Minit Curai Digital (ISO PK 07/3): Jana Laporan Kursus Cepat & Rasmi" border="0" data-original-height="457" data-original-width="775" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBgdAZkgohjXD_bJTvfyGbfIT6Aeho1G7EaV65hcGSL7h-f2fAwgOiVcew8HVMiiWFT2P2X89fqnW7MOnFlzu5VfWkRy6qFGB7aQbTAV3fbR0RyJa2NilVX6gGMrjWMvpsOC6cfvlR0Cek-G5PoHkg8k7Mlovmpy5Urf90Ebo3SZctakgeU9hyphenhyphensj-4Fkk/s16000/minit%20curai.png" /></a></div><br />
</div>
<p style="margin-bottom: 15px;">Salam perpaduan dan salam sejahtera buat semua guru-guru yang sentiasa komited berkhidmat! Setiap kali pulang dari kursus, bengkel, atau mesyuarat di luar, pastinya tugas menyediakan **Minit Curai** menanti. Dokumen rasmi ini penting untuk makluman Guru Besar/Pengetua dan rujukan fail sekolah.</p>
<p style="margin-bottom: 15px;">Kini, urusan ini menjadi lebih mudah dengan **Minit Curai Digital (Edisi ISO PK 07/3)** daripada Layanlah.com! Tool ini direka khas untuk menjana minit curai anda secara pantas, mudah, dan yang paling penting, mengikut format Sistem Pengurusan Kualiti (SPSK PK 07/3) yang digunakan di kebanyakan sekolah di Malaysia.</p>
<h2 style="color: #e67e22; font-size: 22px; margin-bottom: 15px; margin-top: 30px;">
✨ Kelebihan Minit Curai Digital Layanlah
</h2>
<ul style="list-style-type: disc; margin-bottom: 20px; margin-left: 20px;">
<li><b>Format Rasmi ISO PK 07/3:</b> Template yang dihasilkan adalah selaras dengan piawaian Sistem Pengurusan Kualiti Sekolah (SPSK).</li>
<li><b>Mudah Digunakan:</b> Hanya isi maklumat yang diperlukan dalam borang interaktif. Antara muka yang mesra pengguna, sesuai untuk kegunaan di komputer atau telefon pintar.</li>
<li><b>Penjanaan Pantas:</b> Taip maklumat sekali, klik butang, dan minit curai anda siap dalam format PDF yang kemas dan sedia untuk dicetak.</li>
<li><b>Auto-Nombor Isi Penting:</b> Sistem akan secara automatik menomborkan poin-poin penting yang anda masukkan, menjimatkan masa dan memastikan keseragaman.</li>
<li><b>Sedia untuk Cetak & Kongsi:</b> Fail PDF boleh terus dicetak atau dikongsi melalui emel/aplikasi mesej kepada pihak pengurusan sekolah.</li>
<li><b>Jimat Masa & Kertas:</b> Elakkan kesilapan format atau perlu menaip semula. Kurangkan penggunaan kertas dengan versi digital ini.</li>
</ul>
<p style="font-weight: bold; margin-bottom: 25px; text-align: center;">
Jangan buang masa lagi! Sediakan minit curai anda dengan pantas dan efisien sekarang!
</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<div id="minit-curai-app" style="background: rgb(255, 255, 255); border-radius: 20px; border: 2px solid rgb(44, 62, 80); box-shadow: rgba(0, 0, 0, 0.1) 0px 15px 40px; font-family: "Segoe UI", sans-serif; margin: 20px auto; max-width: 800px; overflow: hidden;">
<div style="background: rgb(44, 62, 80); color: white; padding: 25px; text-align: center;">
<h2 style="color: white; font-size: 22px; margin: 0px;">📝 MINIT CURAI DIGITAL (ISO PK 07/3)</h2>
<p style="font-size: 11px; margin: 5px 0px 0px; opacity: 0.8;">Pantas, Mudah & Mengikut Format Kualiti Sekolah</p>
</div>
<div style="background: rgb(253, 253, 253); padding: 25px;">
<div style="display: grid; gap: 15px; grid-template-columns: 1fr 1fr; margin-bottom: 20px;">
<div class="input-group">
<label style="color: #2c3e50; font-size: 11px; font-weight: bold;">NAMA SEKOLAH:</label>
<input id="m_school" placeholder="Cth: SMK Tampin" style="border-radius: 8px; border: 1px solid rgb(221, 221, 221); margin-top: 5px; padding: 10px; width: 100%;" type="text" />
</div>
<div class="input-group">
<label style="color: #2c3e50; font-size: 11px; font-weight: bold;">RUJUKAN FAIL (OPSYENAL):</label>
<input id="m_ref" placeholder="Cth: JPNNS.600-..." style="border-radius: 8px; border: 1px solid rgb(221, 221, 221); margin-top: 5px; padding: 10px; width: 100%;" type="text" />
</div>
</div>
<div style="margin-bottom: 15px;">
<label style="font-size: 11px; font-weight: bold;">TAJUK MESYUARAT / KURSUS:</label>
<input id="m_title" style="border-radius: 8px; border: 1px solid rgb(221, 221, 221); margin-top: 5px; padding: 12px; width: 100%;" type="text" />
</div>
<div style="display: grid; gap: 10px; grid-template-columns: 1fr 1fr 1fr; margin-bottom: 15px;">
<div>
<label style="font-size: 11px; font-weight: bold;">TARIKH:</label>
<input id="m_date" style="border-radius: 8px; border: 1px solid rgb(221, 221, 221); margin-top: 5px; padding: 10px; width: 100%;" type="date" />
</div>
<div>
<label style="font-size: 11px; font-weight: bold;">TEMPAT:</label>
<input id="m_venue" placeholder="Lokasi/Link" style="border-radius: 8px; border: 1px solid rgb(221, 221, 221); margin-top: 5px; padding: 10px; width: 100%;" type="text" />
</div>
<div>
<label style="font-size: 11px; font-weight: bold;">PENGERUSI:</label>
<input id="m_boss" style="border-radius: 8px; border: 1px solid rgb(221, 221, 221); margin-top: 5px; padding: 10px; width: 100%;" type="text" />
</div>
</div>
<hr style="border-color: rgb(238, 238, 238) currentcolor currentcolor; border-image: none; border-style: solid none none; border-top: 1px solid #eee; border-width: 1px 0px 0px; border: 0; margin: 20px 0px;" />
<div style="margin-bottom: 15px;">
<label style="font-size: 11px; font-weight: bold;">PERKARA / ISU PENTING (Satu perkara satu baris):</label>
<textarea id="m_issues" rows="5" style="border-radius: 8px; border: 1px solid rgb(221, 221, 221); margin-top: 5px; padding: 12px; width: 100%;"></textarea>
</div>
<div style="margin-bottom: 20px;">
<label style="font-size: 11px; font-weight: bold;">TINDAKAN SUSULAN:</label>
<textarea id="m_action" placeholder="Cth: Maklumkan kepada GPK Kurikulum, Jalankan LDP..." rows="3" style="border-radius: 8px; border: 1px solid rgb(221, 221, 221); margin-top: 5px; padding: 12px; width: 100%;"></textarea>
</div>
<div style="margin-bottom: 20px;">
<label style="font-size: 11px; font-weight: bold;">NAMA GURU PELAPOR:</label>
<input id="m_name" style="border-radius: 8px; border: 1px solid rgb(221, 221, 221); margin-top: 5px; padding: 10px; width: 100%;" type="text" />
</div>
<button onclick="generatePDF()" style="background: rgb(230, 126, 34); border-radius: 12px; border: medium; box-shadow: rgb(179, 93, 16) 0px 6px 0px; color: white; cursor: pointer; font-size: 16px; font-weight: bold; padding: 18px; width: 100%;">📥 JANA & DOWNLOAD PDF</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script>
function generatePDF() {
const { jsPDF } = window.jspdf;
let doc = new jsPDF('p', 'mm', 'a4');
const school = document.getElementById('m_school').value || "NAMA SEKOLAH";
const ref = document.getElementById('m_ref').value || "-";
const title = document.getElementById('m_title').value || "-";
const date = document.getElementById('m_date').value;
const venue = document.getElementById('m_venue').value || "-";
const boss = document.getElementById('m_boss').value || "-";
const issues = document.getElementById('m_issues').value.split('\n').filter(i => i.trim());
const action = document.getElementById('m_action').value;
const reporter = document.getElementById('m_name').value || "GURU PELAPOR";
// --- DESIGN PDF (SPSK PK 07/3) ---
doc.setFont("helvetica", "bold"); doc.setFontSize(12);
doc.text(school.toUpperCase(), 105, 15, { align: 'center' });
doc.setFontSize(10); doc.text("MINIT CURAI (PK 07/3)", 105, 21, { align: 'center' });
doc.setFont("helvetica", "normal"); doc.setFontSize(9);
doc.text(`Rujukan Fail: ${ref}`, 15, 30);
// Table Grid
doc.setLineWidth(0.3);
doc.rect(15, 35, 180, 25); // Header Box
doc.line(15, 47, 195, 47); // Horizontal divider
doc.setFont("helvetica", "bold");
doc.text("TAJUK:", 18, 40); doc.setFont("helvetica", "normal"); doc.text(title, 35, 40, {maxWidth: 155});
doc.setFont("helvetica", "bold");
doc.text("TARIKH:", 18, 52); doc.setFont("helvetica", "normal"); doc.text(date || "-", 35, 52);
doc.setFont("helvetica", "bold");
doc.text("TEMPAT:", 70, 52); doc.setFont("helvetica", "normal"); doc.text(venue, 88, 52);
doc.setFont("helvetica", "bold");
doc.text("PENGERUSI:", 135, 52); doc.setFont("helvetica", "normal"); doc.text(boss, 158, 52);
// Main Content Box
doc.rect(15, 60, 180, 120);
doc.setFont("helvetica", "bold"); doc.text("PERKARA / ISU PENTING:", 18, 67);
doc.setFont("helvetica", "normal");
let y = 75;
issues.forEach((issue, index) => {
let lines = doc.splitTextToSize(`${index + 1}. ${issue}`, 170);
doc.text(lines, 18, y);
y += (lines.length * 5);
});
// Action Box
doc.rect(15, 180, 180, 30);
doc.setFont("helvetica", "bold"); doc.text("TINDAKAN SUSULAN:", 18, 187);
doc.setFont("helvetica", "normal"); doc.text(action, 18, 194, {maxWidth: 170});
// Signature Area
doc.text("Disediakan oleh:", 15, 225);
doc.text("......................................................", 15, 240);
doc.text(`( ${reporter.toUpperCase()} )`, 15, 245);
doc.text("Ulasan Guru Besar / Pengetua:", 110, 225);
doc.text("......................................................", 110, 240);
doc.text("Tarikh:", 110, 250);
doc.save(`Minit_Curai_${reporter}.pdf`);
}
</script>
<h2 style="color: #e67e22; font-size: 22px; margin-bottom: 15px; margin-top: 40px;">
💡 Tips Menggunakan Minit Curai Digital
</h2>
<ul style="list-style-type: disc; margin-bottom: 20px; margin-left: 20px;">
<li><b>Isi Segera:</b> Sebaik sahaja selesai kursus, terus isikan maklumat semasa ingatan masih segar.</li>
<li><b>Fokus Isi Penting:</b> Minit curai tidak memerlukan semua perincian. Tumpukan pada isu utama dan tindakan yang perlu diambil.</li>
<li><b>Satu Poin Satu Baris:</b> Untuk memudahkan sistem auto-nombor, taip setiap isu penting dalam baris yang berasingan dalam kotak 'Perkara / Isu Penting'.</li>
<li><b>Semak Sebelum Hantar:</b> Pastikan semua maklumat betul sebelum menjana dan menghantar PDF.</li>
</ul>
<h2 style="color: #2c3e50; font-size: 22px; margin-bottom: 15px; margin-top: 40px;">
❓ Soalan Lazim (FAQ)
</h2>
<div style="margin-bottom: 10px;">
<b style="color: #e67e22;">S: Adakah tool ini mengikut format rasmi KPM?</b><br />
J: Ya, template PDF yang dihasilkan adalah berdasarkan format Sistem Pengurusan Kualiti Sekolah (SPSK PK 07/3) yang standard di kebanyakan JPN dan PPD.
</div>
<div style="margin-bottom: 10px;">
<b style="color: #e67e22;">S: Bolehkah saya guna di telefon bimbit?</b><br />
J: Tentu sekali! Tool ini direka responsif dan berfungsi dengan baik pada pelbagai saiz skrin termasuk telefon pintar dan tablet.
</div>
<div style="margin-bottom: 10px;">
<b style="color: #e67e22;">S: Perlukah saya install aplikasi lain?</b><br />
J: Tidak perlu. Tool ini berfungsi sepenuhnya di dalam pelayar web anda. Tiada pemasangan aplikasi tambahan diperlukan.
</div>
<p style="color: #2c3e50; font-size: 16px; font-weight: bold; margin-top: 30px; text-align: center;">
Urusan minit curai kini lebih mudah dan efisien! Selamat bertugas!
</p>
<div style="background: rgb(254, 254, 254); border-radius: 15px; border: 1px solid rgb(209, 216, 224); margin: 30px 0px; padding: 18px; text-align: center;">
<p style="color: #34495e; font-size: 14px; font-weight: bold; margin: 0px 0px 12px;">🛍️ Cari Gadjet Digital Terbaik untuk Pembelajaran?</p>
<a href="https://s.shopee.com.my/7VAAA6s3s3" style="background: rgb(236, 240, 241); border-radius: 8px; color: #3498db; display: inline-block; font-size: 15px; font-weight: bold; padding: 10px 20px; text-decoration: none; transition: background 0.3s;" target="_blank">
Cek Tawaran Istimewa di Shopee »
</a>
</div>
<div style="color: #999999; font-size: 11px; margin-top: 25px; text-align: center;">
Disclaimer: Tool ini adalah untuk membantu dalam penyediaan minit curai. Layanlah.com tidak bertanggungjawab atas sebarang isu berkaitan maklumat yang dimasukkan oleh pengguna. Kami adalah rakan affiliate Shopee.
</div>
</div>MeAdminhttp://www.blogger.com/profile/06871300420300644055noreply@blogger.com0tag:blogger.com,1999:blog-5341061453048343895.post-88331573771005157502026-01-19T22:25:00.005+08:002026-01-19T22:34:03.968+08:00Mega AI Prompt Generator: Bina Prompt Imej AI Profesional Cuma Taip & Pilih (Percuma!)<title>Mega AI Prompt Generator: Bina Prompt Imej AI Profesional (Percuma!)</title>
<meta name="description" content="Tool Mega AI Prompt Generator percuma untuk jana prompt imej premium Midjourney, Bing & Leonardo. Pilih gaya visual, lokasi & saiz dengan mudah.">
<div style="font-family: 'Segoe UI', sans-serif; line-height: 1.7; color: #333; max-width: 800px; margin: 0 auto; padding: 10px;">
<div style="text-align: center; margin-bottom: 25px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3bc9xS9eKKAHYTl8hs2diHmVBZ2iG2PtE6rgRkPzxIMpUc3cH2fq2WwxbCwrjHb5Dwul6Da6C_JujZZsoimc0BOeMqRiMygwclHPqQQbhon7dT67tStPgoP5YiwpeE5c7gYvqvQjK9wTkP4_IOW0m1-euGlZDquLG_8soP6afpPEMCIXkn-u3S_f0FOw/s1600/prompt%20generator.png" alt="Mega AI Prompt Generator" style="width: 100%; max-width: 766px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.1);">
</div>
<h1 style="font-size: 26px; color: #2c3e50; text-align: center; margin-bottom: 20px;">🚀 Mega AI Prompt Generator: Pro Imej Cuma Pilih & Klik!</h1>
<p>Penat mencuba pelbagai prompt tapi hasil AI tidak memuaskan? Gunakan <b>Mega AI Prompt Generator</b>. Kami telah menyuntik parameter teknikal 'High-End' ke dalam setiap pilihan untuk memastikan hasil imej anda bertaraf profesional!</p>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<div id="mega-prompt-tool" style="background: #ffffff; border: 2px solid #2c3e50; border-radius: 25px; overflow: hidden; box-shadow: 0 15px 45px rgba(0,0,0,0.1); margin: 30px 0;">
<div style="background: #2c3e50; color: white; padding: 20px; text-align: center;">
<h2 style="margin:0; color:white !important; font-size: 20px;">🏦 AI PROMPT ENGINE V2.0</h2>
</div>
<div style="padding: 25px;">
<div style="margin-bottom: 20px;">
<label style="font-weight:bold; font-size: 13px; color: #2c3e50;"><i class="fas fa-pencil-alt"></i> 1. APA SUBJEK UTAMA ANDA?</label>
<input type="text" id="subj" placeholder="Cth: Seorang guru wanita berbaju kurung..." style="width:100%; padding:12px; border:2px solid #eee; border-radius:10px; box-sizing:border-box; margin-top:5px;">
</div>
<label style="font-weight:bold; font-size: 13px; color: #2c3e50;"><i class="fas fa-palette"></i> 2. PILIH GAYA VISUAL (Pilih satu atau taip sendiri)</label>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin: 12px 0;">
<div onclick="selectTheme('Photorealistic, 8k, ultra-detailed, cinematic lighting', this)" class="t-card" style="border: 2px solid #eee; border-radius: 12px; cursor: pointer; text-align: center; padding: 8px; transition: 0.3s;">
<img src="https://images.unsplash.com/photo-1542831371-29b0f74f9713?w=150&h=100&fit=crop" style="width: 100%; border-radius: 8px;">
<div style="font-size: 10px; font-weight: bold; margin-top: 5px;">REALISTIC</div>
</div>
<div onclick="selectTheme('Disney Pixar 3D animation style, vibrant, expressive', this)" class="t-card" style="border: 2px solid #eee; border-radius: 12px; cursor: pointer; text-align: center; padding: 8px; transition: 0.3s;">
<img src="https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=150&h=100&fit=crop" style="width: 100%; border-radius: 8px;">
<div style="font-size: 10px; font-weight: bold; margin-top: 5px;">3D PIXAR</div>
</div>
<div onclick="selectTheme('Studio Ghibli hand-drawn anime style, lush scenery', this)" class="t-card" style="border: 2px solid #eee; border-radius: 12px; cursor: pointer; text-align: center; padding: 8px; transition: 0.3s;">
<img src="https://images.unsplash.com/photo-1541512416146-3cf58d6b27cc?w=150&h=100&fit=crop" style="width: 100%; border-radius: 8px;">
<div style="font-size: 10px; font-weight: bold; margin-top: 5px;">GHIBLI</div>
</div>
</div>
<input type="text" id="customStyle" placeholder="Atau taip gaya lain (Cth: Cyberpunk, Oil Painting...)" style="width:100%; padding:10px; border:1px solid #ddd; border-radius:10px; box-sizing:border-box; margin-bottom: 20px;">
<div style="margin-bottom: 20px;">
<label style="font-weight:bold; font-size: 13px; color: #2c3e50;"><i class="fas fa-map-marker-alt"></i> 3. DI MANA LOKASINYA? (Pilih atau taip sendiri)</label>
<select id="setting" style="width:100%; padding:10px; border-radius:10px; margin-top:5px; border:1px solid #ccc;">
<option value="in a modern bright classroom">Bilik Darjah Moden</option>
<option value="on a minimalist office desk">Meja Kerja Pejabat</option>
<option value="against a simple white background">Latar Belakang Putih</option>
<option value="in a beautiful enchanted forest">Hutan Magis</option>
</select>
<input type="text" id="customSetting" placeholder="Atau taip lokasi sendiri (Cth: Di bulan, Di tepi pantai...)" style="width:100%; padding:10px; border:1px solid #ddd; border-radius:10px; box-sizing:border-box; margin-top:8px;">
</div>
<div style="margin-bottom: 20px;">
<label style="font-weight:bold; font-size: 13px; color: #2c3e50;"><i class="fas fa-expand-arrows-alt"></i> 4. NISBAH GAMBAR (RATIO)</label>
<select id="ratio" style="width:100%; padding:10px; border-radius:10px; margin-top:5px; border:1px solid #ccc;">
<option value="--ar 16:9">Landscape (16:9)</option>
<option value="--ar 9:16">Portrait (9:16)</option>
<option value="--ar 1:1">Square (1:1)</option>
</select>
</div>
<button onclick="generateMegaPrompt()" style="width:100%; background:#e67e22; color:white; border:none; padding:18px; border-radius:15px; font-weight:bold; margin-top:10px; cursor:pointer; font-size: 16px; box-shadow: 0 5px 0 #b35d10;">✨ JANA PROMPT LENGKAP</button>
<div id="output-box" style="display:none; margin-top: 25px; padding: 20px; background: #f9f9f9; border: 2px dashed #e67e22; border-radius: 15px;">
<p style="font-size: 11px; font-weight: bold; color: #e67e22; margin-bottom: 8px;">SALIN PROMPT DI BAWAH:</p>
<div id="finalText" style="font-size: 14px; color: #333; margin-bottom: 15px; font-style: italic; line-height: 1.5;"></div>
<button onclick="copyPrompt()" style="background:#2c3e50; color:white; border:none; padding:10px 20px; border-radius:8px; cursor:pointer; font-weight: bold;"><i class="fas fa-copy"></i> Copy Prompt</button>
</div>
</div>
</div>
<script>
let selectedStyle = "";
function selectTheme(val, el) {
selectedStyle = val;
document.querySelectorAll('.t-card').forEach(c => c.style.borderColor = "#eee");
el.style.borderColor = "#e67e22";
}
function generateMegaPrompt() {
const subj = document.getElementById('subj').value || "subject";
const style = document.getElementById('customStyle').value || selectedStyle || "Photorealistic, 8k";
const loc = document.getElementById('customSetting').value || document.getElementById('setting').value;
const rat = document.getElementById('ratio').value;
// AUTOMATIC PRO QUALITY LOGIC
const result = `${style} of ${subj}, ${loc}, masterpiece, 8k, highly detailed, cinematic lighting, sharp focus, intricate details ${rat}`;
document.getElementById('finalText').innerText = result;
document.getElementById('output-box').style.display = 'block';
window.scrollTo({ top: document.getElementById('output-box').offsetTop, behavior: 'smooth' });
}
function copyPrompt() {
navigator.clipboard.writeText(document.getElementById('finalText').innerText);
alert("Prompt berjaya disalin! Jom tampal kat AI.");
}
</script>
<div style="margin: 30px 0; padding: 15px; border: 1px solid #d1d8e0; border-radius: 12px; text-align: center;">
<p style="margin: 0 0 10px 0; font-size: 13px; font-weight: bold;">🛍️ Dapatkan Gadjet Pejabat & Sekolah Murah</p>
<a href="https://s.shopee.com.my/7VAAA6s3s3" target="_blank" style="color: #3498db; text-decoration: none; font-weight: bold;">Lihat Katalog Shopee »</a>
</div>
<div style="margin-top: 20px; font-size: 11px; color: #999; text-align: center;">
Disclaimer: Tool ini hanya membantu membina prompt. Layanlah tidak bertanggungjawab atas hasil imej oleh pihak ketiga. Kami adalah rakan affiliate Shopee.
</div>
</div>MeAdminhttp://www.blogger.com/profile/06871300420300644055noreply@blogger.com0tag:blogger.com,1999:blog-5341061453048343895.post-47210365375748552762026-01-18T22:18:00.006+08:002026-01-18T22:53:52.261+08:00Generator Mock Cheque Sampul Surat : Jana Cek Replika & Auto-Ejaan Ringgit<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<div style="font-family: sans-serif; line-height: 1.6; color: #333; margin-bottom: 25px;">
<p>Urusan majlis penyampaian sumbangan kini lebih mudah dengan <strong>Generator Mock Cheque Smart Layanlah</strong>. Sistem ini direka untuk menjana cek replika secara profesional dengan fungsi <strong>Smart Auto-Fit</strong> yang menjimatkan kertas cetakan anda.</p>
</div>
<div style="margin: 20px 0; padding: 15px; border: 1px solid #e5e7eb; background: #f9fafb; border-radius: 12px; text-align: center; font-family: sans-serif;">
<p style="margin: 0 0 10px 0; font-size: 13px; font-weight: bold; color: #2d3436;">✉️ Stok Sampul Surat & Kertas Tebal (Glossy) Murah</p>
<a href="https://s.shopee.com.my/7VAAA6s3s3" target="_blank" style="color: #ee4d2d; text-decoration: none; font-size: 14px; font-weight: bold;">Lihat di Shopee »</a>
</div>
<div class="separator" style="clear: both; text-align: center; margin-bottom: 25px;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx71Tu0QWr11NnvjRPDRTVQYDePBGsIi1aVxzRl_3zahvXybHKbRR9-P3_wVuGif8Nuq0vu6GqL1gxwlO_x3Pt9cSUbHCenqbXfjxVqSHUbsWoG9I9SpbAvMPtD0godz5d4sdBGRPBMGQzbXam1qTh4Npi_30AXhyjg-TaYMiZadDC56Vn3XIFfn5S7FY/s761/CEK%20REPLIKA.png">
<img alt="Mock Cheque Generator Ultimate" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx71Tu0QWr11NnvjRPDRTVQYDePBGsIi1aVxzRl_3zahvXybHKbRR9-P3_wVuGif8Nuq0vu6GqL1gxwlO_x3Pt9cSUbHCenqbXfjxVqSHUbsWoG9I9SpbAvMPtD0godz5d4sdBGRPBMGQzbXam1qTh4Npi_30AXhyjg-TaYMiZadDC56Vn3XIFfn5S7FY/s320/CEK%20REPLIKA.png" width="350" />
</a>
</div>
<div id="cheque-smart-app" style="max-width: 850px; margin: 20px auto; border-radius: 25px; font-family: 'Segoe UI', sans-serif; background: #ffffff; box-shadow: 0 20px 50px rgba(0,0,0,0.1); border: 2px solid #2c3e50; overflow: hidden;">
<div style="background: #2c3e50; color: #ffffff; padding: 25px; text-align: center;">
<h2 style="margin: 0; font-size: 22px; color: #ffffff !important;">🏦 MOCK CHEQUE SMART GENERATOR</h2>
<p style="margin: 5px 0 0 0; font-size: 11px; opacity: 0.8;">Auto-Fit A4 | Auto-Ejaan | Live Preview</p>
</div>
<div style="display: flex; flex-wrap: wrap; padding: 25px; gap: 20px;">
<div style="flex: 1; min-width: 300px;">
<div style="margin-bottom: 12px;">
<label style="font-size: 11px; font-weight: bold;">PERKARA (TUJUAN):</label>
<input type="text" id="perkara" oninput="livePreview()" placeholder="Cth: HADIAH KECERIAAN" style="width:100%; padding:8px; border:1px solid #ccc; border-radius:6px;">
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px;">
<div>
<label style="font-size: 11px; font-weight: bold;">PENYUMBANG:</label>
<input type="text" id="sender" oninput="livePreview()" placeholder="PIBG SMK TAMPIN" style="width:100%; padding:8px; border:1px solid #ccc; border-radius:6px;">
</div>
<div>
<label style="font-size: 11px; font-weight: bold;">TARIKH:</label>
<input type="date" id="c_date" oninput="livePreview()" style="width:100%; padding:8px; border:1px solid #ccc; border-radius:6px;">
</div>
</div>
<div style="margin-bottom: 12px;">
<label style="font-size: 11px; font-weight: bold;">VIP & JAWATAN:</label>
<input type="text" id="vip_name" oninput="livePreview()" placeholder="Nama VIP" style="width:100%; padding:8px; border:1px solid #ccc; border-radius:6px; margin-bottom:5px;">
<input type="text" id="vip_title" oninput="livePreview()" placeholder="Jawatan VIP" style="width:100%; padding:8px; border:1px solid #ccc; border-radius:6px;">
</div>
<div style="margin-bottom: 12px;">
<label style="font-size: 11px; font-weight: bold;">NILAI (RM):</label>
<input type="number" id="amount" oninput="updateEjaan(); livePreview()" placeholder="150.00" style="width:100%; padding:8px; border:1px solid #ccc; border-radius:6px;">
<p id="ejaan_text" style="font-size: 10px; color: #e67e22; font-style: italic; margin-top:3px;">Sila masukkan nilai...</p>
</div>
<div style="margin-bottom: 12px;">
<label style="font-size: 11px; font-weight: bold;">SAIZ SAMPUL:</label>
<select id="env_size" onchange="toggleCustomSize(); livePreview()" style="width:100%; padding:8px; border:1px solid #ccc; border-radius:6px;">
<option value="dl">DL Standard (Muat 3 keping dlm A4)</option>
<option value="c5">C5 Half A4 (Muat 2 keping dlm A4)</option>
<option value="custom">KUSTOM (Saiz Sendiri)</option>
</select>
<div id="custom_inputs" style="display:none; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px;">
<input type="number" id="c_width" oninput="livePreview()" placeholder="Lebar(cm)" style="width:100%; padding:8px; border:1px solid #ccc; border-radius:6px;">
<input type="number" id="c_height" oninput="livePreview()" placeholder="Tinggi(cm)" style="width:100%; padding:8px; border:1px solid #ccc; border-radius:6px;">
</div>
</div>
<div style="margin-bottom: 12px;">
<label style="font-size: 11px; font-weight: bold;">PENERIMA (Pukal):</label>
<textarea id="receivers" rows="2" oninput="livePreview()" style="width:100%; padding:8px; border:1px solid #ccc; border-radius:6px;" placeholder="SITI BINTI ALI AHMAD BIN ABU"></textarea>
</div>
</div>
<div style="flex: 1.2; min-width: 320px; background: #fff; padding: 15px; border-radius: 15px; border: 1px dashed #2c3e50;">
<p style="font-size: 10px; font-weight: bold; text-align: center; color: #7f8c8d; margin-bottom:10px;">LIVE PREVIEW</p>
<div id="preview-box" style="width: 100%; aspect-ratio: 2.1/1; border: 2px solid #333; position: relative; padding: 12px; box-sizing: border-box; background: #fdfdfd; overflow: hidden;">
<div id="pre-perkara" style="position: absolute; left: 15px; top: 15px; width: 55%; font-size: 10px; font-weight: bold; text-align: left;">[PERKARA]</div>
<div style="position: absolute; top: 12px; right: 10px; display: flex; gap: 1px;">
<script>for(i=0;i<8;i++) document.write('<div style="width:9px; height:11px; border:1px solid #000; font-size:7px; text-align:center;">-</div>');</script>
</div>
<div style="margin-top: 35px; font-size: 10px;">PAY: <span id="pre-name" style="border-bottom: 1px solid #000; display: inline-block; width: 60%;">[PENERIMA]</span></div>
<div style="margin-top: 8px; font-size: 9px;">RINGGIT: <span id="pre-ejaan" style="font-style: italic; border-bottom: 1px solid #000; display: inline-block; width: 55%; font-size: 8px;">[EJAAN]</span></div>
<div style="position: absolute; right: 15px; top: 40px; border: 1px solid #000; padding: 4px; font-weight: bold; font-size: 11px;">RM <span id="pre-amount">0.00</span></div>
<div id="pre-sender" style="margin-top: 20px; font-size: 9px; font-weight: bold;">[PENYUMBANG]</div>
<div style="position: absolute; bottom: 35px; right: 15px; text-align: center; border-top: 1px solid #000; width: 120px;">
<div id="pre-vip-name" style="font-size: 8px; font-weight: bold; padding-top: 2px;">[VIP NAME]</div>
<div id="pre-vip-title" style="font-size: 7px;">[JAWATAN]</div>
</div>
</div>
<button onclick="generateCheques()" style="width: 100%; background: #2c3e50; color: white; border: none; padding: 18px; border-radius: 12px; font-weight: bold; cursor: pointer; font-size: 16px; margin-top: 20px;">📥 GENERATE & SMART AUTO-FIT</button>
</div>
</div>
</div>
<script>
//<![CDATA[
function toggleCustomSize() {
const isCustom = document.getElementById('env_size').value === 'custom';
document.getElementById('custom_inputs').style.display = isCustom ? 'grid' : 'none';
}
function updateEjaan() {
const amt = document.getElementById('amount').value;
document.getElementById('ejaan_text').innerText = (amt > 0 ? numberToMalayText(amt) + " Ringgit Sahaja" : "Sila masukkan nilai...");
}
function livePreview() {
document.getElementById('pre-perkara').innerText = document.getElementById('perkara').value || "[PERKARA]";
document.getElementById('pre-sender').innerText = "PENYUMBANG: " + (document.getElementById('sender').value || "[PENYUMBANG]");
document.getElementById('pre-name').innerText = document.getElementById('receivers').value.split('\n')[0] || "[PENERIMA]";
document.getElementById('pre-amount').innerText = document.getElementById('amount').value || "0.00";
document.getElementById('pre-ejaan').innerText = (document.getElementById('amount').value > 0 ? numberToMalayText(document.getElementById('amount').value) : "[EJAAN RINGGIT]");
document.getElementById('pre-vip-name').innerText = document.getElementById('vip_name').value || "[NAMA VIP]";
document.getElementById('pre-vip-title').innerText = document.getElementById('vip_title').value || "[JAWATAN]";
}
function numberToMalayText(n) {
if (!n) return "";
const units = ["", "Satu", "Dua", "Tiga", "Empat", "Lima", "Enam", "Tujuh", "Lapan", "Sembilan"];
const teens = ["Sepuluh", "Sebelas", "Dua Belas", "Tiga Belas", "Empat Belas", "Lima Belas", "Enam Belas", "Tujuh Belas", "Lapan Belas", "Sembilan Belas"];
const tens = ["", "", "Dua Puluh", "Tiga Puluh", "Empat Puluh", "Lima Puluh", "Enam Puluh", "Tujuh Puluh", "Lapan Puluh", "Sembilan Puluh"];
let num = parseInt(n);
function convert(n) {
let res = "";
if (n >= 1000) { res += convert(Math.floor(n / 1000)) + " Ribu "; n %= 1000; }
if (n >= 100) { if (Math.floor(n / 100) === 1) res += "Seratus "; else res += units[Math.floor(n / 100)] + " Ratus "; n %= 100; }
if (n >= 20) { res += tens[Math.floor(n / 10)] + " "; n %= 10; }
if (n >= 10) { res += teens[n - 10] + " "; n = 0; }
if (n > 0) res += units[n] + " ";
return res.trim();
}
return convert(num).replace("Satu Puluh", "Sepuluh").replace("Satu Ratus", "Seratus") || "Sifar";
}
async function generateCheques() {
const { jsPDF } = window.jspdf;
const names = document.getElementById('receivers').value.split('\n').filter(x => x.trim());
if(names.length === 0) { alert("Sila isi nama!"); return; }
const perkara = document.getElementById('perkara').value || "-";
const sender = document.getElementById('sender').value || "-";
const amount = document.getElementById('amount').value || "0.00";
const vName = document.getElementById('vip_name').value || "";
const vTitle = document.getElementById('vip_title').value || "";
const dateInput = document.getElementById('c_date').value;
// FIX DATE LOGIC - ADD LEADING ZEROS
let dateStr = "00000000";
if(dateInput) {
let d = new Date(dateInput);
let dd = String(d.getDate()).padStart(2, '0');
let mm = String(d.getMonth() + 1).padStart(2, '0');
let yyyy = d.getFullYear();
dateStr = dd + mm + yyyy;
}
const ejaan = numberToMalayText(amount) + " Ringgit Sahaja";
let w = 210, h = 95;
if(document.getElementById('env_size').value === 'c5') { w = 210; h = 140; }
else if(document.getElementById('env_size').value === 'custom') {
w = parseFloat(document.getElementById('c_width').value) * 10 || 210;
h = parseFloat(document.getElementById('c_height').value) * 10 || 95;
}
let pdf = new jsPDF('p', 'mm', 'a4');
let currentY = 10;
for (let i = 0; i < names.length; i++) {
if (currentY + h > 280) { pdf.addPage(); currentY = 10; }
const startX = (210 - w) / 2;
const startY = currentY;
pdf.setDrawColor(0); pdf.rect(startX, startY, w, h);
pdf.setFont("helvetica", "bold"); pdf.setFontSize(13);
pdf.text(perkara.toUpperCase(), startX + 5, startY + 12, { maxWidth: w - 60 });
let dX = startX + w - 48;
for(let j=0; j<8; j++){
pdf.rect(dX + (j*5), startY + 5, 4.5, 6.5);
pdf.setFontSize(9); pdf.text(dateStr[j] || "", dX + (j*5) + 1.2, startY + 10);
}
pdf.setFontSize(11); pdf.text("PAY:", startX + 10, startY + 35);
pdf.line(startX + 22, startY + 36, startX + w - 60, startY + 36);
pdf.text(names[i].toUpperCase(), startX + 24, startY + 34);
pdf.rect(startX + w - 50, startY + 28, 40, 10);
pdf.setFontSize(12); pdf.text("RM " + amount, startX + w - 47, startY + 35);
pdf.setFontSize(10); pdf.text("RINGGIT:", startX + 10, startY + 48);
pdf.setFont("helvetica", "italic"); pdf.setFontSize(9);
pdf.text(ejaan.toUpperCase(), startX + 30, startY + 47);
pdf.line(startX + 28, startY + 49, startX + w - 10, startY + 49);
pdf.setFont("helvetica", "bold"); pdf.setFontSize(10);
pdf.text("PENYUMBANG: " + sender.toUpperCase(), startX + 10, startY + h - 5);
let signX = startX + w - 85; let signY = startY + h - 20;
pdf.line(signX, signY, startX + w - 10, signY);
let vipFS = 10; pdf.setFontSize(vipFS);
while(pdf.getTextWidth(vName.toUpperCase()) > 70 && vipFS > 7) { vipFS -= 0.5; pdf.setFontSize(vipFS); }
pdf.text(vName.toUpperCase(), startX + w - 47.5, signY - 2, { align: 'center' });
let titleFS = 8; pdf.setFontSize(titleFS);
while(pdf.getTextWidth(vTitle.toUpperCase()) > 70 && titleFS > 6) { titleFS -= 0.5; pdf.setFontSize(titleFS); }
pdf.setFont("helvetica", "normal");
pdf.text(vTitle.toUpperCase(), startX + w - 47.5, signY + 5, { align: 'center' });
currentY += h + 5;
}
pdf.save("Mock_Cheque_SmartPrint.pdf");
}
//]]>
</script>
<div style="margin: 25px 0; padding: 15px; border: 1px solid #d1d8e0; border-radius: 12px; text-align: center; font-family: sans-serif;">
<p style="margin: 0 0 10px 0; font-size: 13px; font-weight: bold; color: #2d3436;">🎁 Set Hadiah & Trofi Majlis di Shopee</p>
<a href="https://s.shopee.com.my/7VAAA6s3s3" target="_blank" style="color: #3498db; text-decoration: none; font-size: 14px; font-weight: bold;">Cek Katalog Shopee »</a>
</div>
<div style="margin-top: 20px; font-size: 11px; color: #999; text-align: center; font-family: sans-serif;">
Disclaimer: Tool ini hanya untuk tujuan simbolik majlis sahaja. Layanlah tidak bertanggungjawab atas penyalahgunaan dokumen. Kami adalah rakan affiliate Shopee.
</div>MeAdminhttp://www.blogger.com/profile/06871300420300644055noreply@blogger.com0tag:blogger.com,1999:blog-5341061453048343895.post-44957916513872768022026-01-18T09:51:00.025+08:002026-01-18T21:52:44.430+08:00Koleksi Lengkap RPT 2026 Sekolah Rendah (KSSR Semakan) Semua Subjek<div style="color: #333333; font-family: sans-serif; line-height: 1.6; margin-bottom: 25px;">
<p>Dapatkan koleksi lengkap <b>97 Fail RPT 2026</b> bagi semua subjek sekolah rendah. Fail-fail ini disusun secara sistematik mengikut subjek dan tahun bagi memudahkan urusan para guru menyediakan Fail Rekod Mengajar.</p><p> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijYmhXcI6iorozasheuInK7Dn4l5yqNXbuBdemOoa1E0hsqO6bACF8Ldv9bj3rQ6_YQVhb1RdNTCjydTyvYvY-iC-W9bTnd4OoQ_k1DR4KCKNZ_Z5DZeHjntLb5tBcgs-g63C2aPCA-ilrFPGD3Qwe70xsizv1YcoaZz5D7EwfYMVh4C-bv6lCKdJD6jw/s777/cover%20rpt.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Koleksi Lengkap RPT 2026 Sekolah Rendah (KSSR Semakan) Semua Subjek" border="0" data-original-height="470" data-original-width="777" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijYmhXcI6iorozasheuInK7Dn4l5yqNXbuBdemOoa1E0hsqO6bACF8Ldv9bj3rQ6_YQVhb1RdNTCjydTyvYvY-iC-W9bTnd4OoQ_k1DR4KCKNZ_Z5DZeHjntLb5tBcgs-g63C2aPCA-ilrFPGD3Qwe70xsizv1YcoaZz5D7EwfYMVh4C-bv6lCKdJD6jw/s16000/cover%20rpt.png" /></a></p><p style="text-align: center;"><b style="background-color: #f4cccc;">SILA LAPORKAN DI DALAM KOMEN JIKA ADA PAUTAN YANG TIDAK BERFUNGSI</b><br /></p></div>
<div style="background: rgb(249, 250, 251); border-radius: 12px; border: 1px solid rgb(229, 231, 235); margin: 20px 0px; padding: 15px; text-align: center;">
<p style="font-size: 13px; font-weight: bold; margin: 0px 0px 10px;">📑 Keperluan Guru: Fail Rekod Mengajar & Divider Set</p>
<a href="https://s.shopee.com.my/7VAAA6s3s3" style="color: #ee4d2d; font-weight: bold; text-decoration: none;" target="_blank">Lihat Katalog Shopee »</a>
</div>
<div style="max-width: 100%; overflow-x: auto;">
<table style="border-collapse: collapse; font-family: sans-serif; font-size: 13px; width: 100%;">
<thead>
<tr style="background-color: #2c3e50; color: white;">
<th style="border: 1px solid rgb(221, 221, 221); padding: 12px; text-align: left;">Subjek & Tahun (RPT/SOW 2026)</th>
<th style="border: 1px solid rgb(221, 221, 221); padding: 12px; text-align: center;">Pautan Google Drive</th>
</tr>
</thead>
<tbody>
<tr style="background-color: #fce4ec;"><td colspan="2" style="font-weight: bold; padding: 10px;">BAHASA MELAYU</td></tr>
<tr><td>RPT BM Tahun 1</td><td style="text-align: center;"><a href="https://drive.google.com/file/d/1bQSnigEGk2n0x-OMocSRaxwJgPqWU5Tr/view?usp=drive_link" target="_blank">Muat Turun</a></td></tr>
<tr><td>RPT BM Tahun 2</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1bQSnigEGk2n0x-OMocSRaxwJgPqWU5Tr&usp=drive_copya2KxxDC9WpxB_GuzmJhghC&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>RPT BM Tahun 3</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1hvquvCmuCdmDvKoeaMTlZMD5KQhOHWoB&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>RPT BM Tahun 4</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1xYov-w3O4kcPXNK3DDqhflotblg42mBR&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>RPT BM Tahun 5</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1a1DWC2X-YglqJ1KsRRUe0I8SFW29AmVk&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>RPT BM Tahun 6</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1bcbLRmJlnTx4hfHbnyoucoHVyS3S-tS4&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr style="background-color: #e3f2fd;"><td colspan="2" style="font-weight: bold; padding: 10px;">SOW ENGLISH</td></tr>
<tr><td>SOW English Year 1</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1al5Ou9wrwaAwy_M81jucZybgqpEwecAQ&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>SOW English Year 2</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1r9oOJPtYK9fCaZogHt-CdlxEY-ILqcAU&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>SOW English Year 3</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1RnbV_RVdWFRO_2-tE1-34F4CrYp-5CQ5&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>SOW English Year 4</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1OW8iowJu_nHZfgrveLTj7KPSIKgBxw3l&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>SOW English Year 5</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1cY2J_3rtvpNaW92-6gvgmDnkTpJzFyei&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>SOW English Year 6</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1-WzzDeUJLhE4ybfzuFgeSLHcUkRzx6jm&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr style="background-color: #e8f5e9;"><td colspan="2" style="font-weight: bold; padding: 10px;">SCIENCE DLP</td></tr>
<tr><td>RPT Science DLP Tahun 1</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1yWsfU8BmNZbG_i1zBFwnyJc6xNpUNpMB&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>RPT Science DLP Tahun 2</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=13f4ktd5O8qK_sPo1_9OrToyFXQ31rJ8X&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>RPT Science DLP Tahun 3</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1ZcLYZDOEpzzZbmxD-Ih-teoNu9HemDOZ&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>RPT Science DLP Tahun 4</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1sh4G_oPRfdG22PSmeaOhANi-190kJbdr&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>RPT Science DLP Tahun 5</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1m6OW5K2ywzEny45PAQlXUCM7reSx9FxY&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>RPT Science DLP Tahun 6</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=13deEl2szRIjvOC6CKtVl9kv5GdCcAhSK&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr style="background-color: #fff3e0;"><td colspan="2" style="font-weight: bold; padding: 10px;">MATHEMATICS DLP</td></tr>
<tr><td>RPT Mathematics DLP Tahun 1</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=175P8SpWdWRjosrRXrhHZ-tnNISqjiPoY&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>RPT Mathematics DLP Tahun 2</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1BvkgPTKK_2P7xbDONHiv4opgGA7d_Wcf&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>RPT Mathematics DLP Tahun 3</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1IwkbRERJHnRlPxnE48dJc6jv6XA7j05L&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>RPT Mathematics DLP Tahun 4</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=18c_GnmhmswTQwybtK7uQ4oX4QOeiGxmx&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>RPT Mathematics DLP Tahun 5</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1vMFGKrhZ7x3Ct5YYt-bF4GLOstojrRWe&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>RPT Mathematics DLP Tahun 6</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1msYKimGV5zX68AEZn1RCx7sUPyc7bSE2&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr style="background-color: #efebe9;"><td colspan="2" style="font-weight: bold; padding: 10px;">REKABENTUK DAN TEKNOLOGI (RBT)</td></tr>
<tr><td>RPT RBT Tahun 4</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1VktL8kbfqc2iL_895b-cEZ4wyAWiAYmK&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>RPT RBT Tahun 5</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1vDzUXJgsBDbc1VSR423PSl7NdaBjUwVW&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>RPT RBT Tahun 6</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=18YFNElEXZbBcQPRhNdMzZGSFcTf_WA_n&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr style="background-color: #f1f8e9;"><td colspan="2" style="font-weight: bold; padding: 10px;">PENDIDIKAN ISLAM</td></tr>
<tr><td>RPT Pendidikan Islam Tahun 1</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1Su1Z5d9Hz2lJ4Cs4R13hnXVb-_KauQg4&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>RPT Pendidikan Islam Tahun 2</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=19K2V8fmZp8QEOgXihXteRRsK8djvgxjI&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>RPT Pendidikan Islam Tahun 3</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1Gx7E9C3M13VMGOlgRpHWU8sZOFeqFHjD&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>RPT Pendidikan Islam Tahun 4</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1gDM-ylKsBfEVNjy9e_mOwzxf4ddc9wLF&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>RPT Pendidikan Islam Tahun 5</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1ZGz9p-WtoDfSPeUauCjxkfm8Pv7OQIrw&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>RPT Pendidikan Islam Tahun 6</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1eyvOvr5CL5k9M4Y3UcJLTCt1ig_Nkxk3&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>RPT Pendidikan Islam Pra Sekolah</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1ZfzFTQr-rf3i1taJgYP8QzaNlWEGaZwM&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr style="background-color: #f3e5f5;"><td colspan="2" style="font-weight: bold; padding: 10px;">PENDIDIKAN MORAL</td></tr>
<tr><td>RPT Pendidikan Moral Tahun 1</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1SYeTyWHQGmz89rW5yrYRWto1UXDzesII&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>RPT Pendidikan Moral Tahun 2</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1Ik0IHrnv4BT09Em6mrKs7IQ0nrG3U3Kx&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>RPT Pendidikan Moral Tahun 3</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1QBYJpGCqXLxR9QYQB8pK1tt0BkuNlpKn&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>RPT Pendidikan Moral Tahun 4</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1RlRbVAG1Go04_XKWUTyE6eUasyVtV_4m&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>RPT Pendidikan Moral Tahun 5</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1OgC16U120P0vGv6rQjWoenf1gKZNukWH&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>RPT Pendidikan Moral Tahun 6</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1SgkkscKAe0HOuYR9FGPqjPrkS-p8H7wQ&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr style="background-color: #fffde7;"><td colspan="2" style="font-weight: bold; padding: 10px;">PENDIDIKAN KESIHATAN</td></tr>
<tr><td>RPT Pendidikan Kesihatan Tahun 1</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=161-na6OsvI4OiZXapTxHkmNaOXAPlpaO&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>RPT Pendidikan Kesihatan Tahun 2</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=17Dl2TCcBeb9aY-iuAiU6oUQ09egdfUtd&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>RPT Pendidikan Kesihatan Tahun 3</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1aHTLxY91YhNkvJz5v3p_wy5KqzW5m_F9&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>RPT Pendidikan Kesihatan Tahun 4</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=113jTQQSss7xPno6kFfpoH04f2TkUrbvQ&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>RPT Pendidikan Kesihatan Tahun 5</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=13klwfjWy882F8TFw_NlgqhMS_aFqAv8v&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>RPT Pendidikan Kesihatan Tahun 6</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1hIAUoyDdyCQ9gNN0zgcnGXVzQ4NIGyrC&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr style="background-color: #e0f2f1;"><td colspan="2" style="font-weight: bold; padding: 10px;">PENDIDIKAN JASMANI</td></tr>
<tr><td>RPT Pendidikan Jasmani Tahun 1</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1VLGF5pFq9Tq7TKXUQkK5_dip-XSVd-M9&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>RPT Pendidikan Jasmani Tahun 2</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1gqQ0dAnPKOoZAvRIcfBmBn_ilSfClRGw&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>RPT Pendidikan Jasmani Tahun 3</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1qpP2qMCALlaOp6aqmPkAnkJC-4tP0XuK&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>RPT Pendidikan Jasmani Tahun 4</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1h-lu6GqgVoM37eZT-gSu2RXZlqMuzFvc&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>RPT Pendidikan Jasmani Tahun 5</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=12ldk1ZpH52ScKk28Vsp8kvcrRF6esmBB&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>RPT Pendidikan Jasmani Tahun 6</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1AcuiW5q5Y4bM9cUbZylTlurFnC88_t5l&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr style="background-color: #fce4ec;"><td colspan="2" style="font-weight: bold; padding: 10px;">PENDIDIKAN SENI VISUAL (PSV)</td></tr>
<tr><td>RPT PSV Tahun 1</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1OSh6qAfHa2HgKcH73L1ec44eoldVRauh&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>RPT PSV Tahun 2</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1lJ-gYQBY77jKTJVG9K3FVPkkFXGsxfgr&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>RPT PSV Tahun 3</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1cTV8NWIjLAMN8jLxvRQ9P0AgbAgDkcHr&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>RPT PSV Tahun 4</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=17IDx3ZM30ix02Gf2gnJf7auIkepXamFk&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>RPT PSV Tahun 5</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1dcMJmUXT3lhzDrSEijuzUMDnKcu_CBmW&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>RPT PSV Tahun 6</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1oLidzH-WsozTBRIrlogtk1LbNVSa2Pz1&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr style="background-color: #fff9c4;"><td colspan="2" style="font-weight: bold; padding: 10px;">PENDIDIKAN MUZIK</td></tr>
<tr><td>RPT Pendidikan Muzik Tahun 1</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1boxIu_YVycW_4q_ViHR-SIooVJIWLyi5&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>RPT Pendidikan Muzik Tahun 2</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1uaAiIH-yypOZUHAewed2f5ipBGiPVODp&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>RPT Pendidikan Muzik Tahun 3</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1OmOZhZUsQo93TdvAKnwEQAXkC6W6-yBn&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>RPT Pendidikan Muzik Tahun 4</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=10uCkeIv65z_ys46YKE5QSq7qdb5bEpgd&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>RPT Pendidikan Muzik Tahun 5</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1wwPIanjcCEie2f9KINObeZ8tsY6sAT21&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>RPT Pendidikan Muzik Tahun 6</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1fo64dta_Btp0ZRNFkAVycKbG7OhjoxFV&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr style="background-color: #f1f8e9;"><td colspan="2" style="font-weight: bold; padding: 10px;">SEJARAH</td></tr>
<tr><td>RPT Sejarah Tahun 4</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1qEIibiMXu1CeTegUwE0UccwcPPJcVX94&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>RPT Sejarah Tahun 5</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=15dbSIczkDkENRtaj-OyX2CTMJ7-VE2Nn&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>RPT Sejarah Tahun 6</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1Fq2KTOFH3MmsnbYhPvQ19_iH9QVPi4pJ&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr style="background-color: #e8f5e9;"><td colspan="2" style="font-weight: bold; padding: 10px;">SAINS</td></tr>
<tr><td>RPT Sains Tahun 1</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1z5fO60jau7hEWiqEndAqqGPbaIT9LZtP&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>RPT Sains Tahun 2</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=15P0kaFGNbYeJmgyZ0lD8UyLThXkVQ4Qq&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>RPT Sains Tahun 3</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1sXq3rXO7LksKRdX5FxqZMj56Ey8C4-My&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>RPT Sains Tahun 4</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=10yzpN78x7t6FxBGrFfroSIg7kZhX70f_&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>RPT Sains Tahun 5</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1zA5US_WzFSSlnLtEHPR8Ne8XcFs-Tzbf&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>RPT Sains Tahun 6</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1aPswmjx4EfGEl2sUmHE9jz_VIiO2Bei6&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr style="background-color: #fff3e0;"><td colspan="2" style="font-weight: bold; padding: 10px;">MATEMATIK</td></tr>
<tr><td>RPT Matematik Tahun 1</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1LQFz8GcdDuBJ3QGfSLwlQMB2lhAYCikf&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>RPT Matematik Tahun 2</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1COsAUyu56hjfs141oLPO2RBCvvXs2KVb&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>RPT Matematik Tahun 3</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1TtEm99srzVuj4TBoT2g8d7yOsq3TQjlb&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>RPT Matematik Tahun 4</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1vXoHVf5Gwp_KE_ljuGRB4sx7e2VVOzkm&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>RPT Matematik Tahun 5</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=147F-M4ApXFnh81S0KD0R2d9baBQUQ4u-&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>RPT Matematik Tahun 6</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1hwnfOi1vcnGEz8p8BaG1MAxld_hsQ2_3&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr style="background-color: #e3f2fd;"><td colspan="2" style="font-weight: bold; padding: 10px;">ENGLISH</td></tr>
<tr><td>English Year 1</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1ZSrNFFtDS3_YtvSTFg9LIxB8uRdPUsfi&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>English Year 2</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1E4F0gGbRdRrtW6b-XP8vueN19wMi4h3e&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>English Year 3</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1OVjjvmG2ALiER-ZYDA6_OJ-qhgGOkCGF&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>English Year 4</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=12LgQZmM1XeS8e0QJc81bzIKE6SBS4jJ8&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>English Year 5</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1WSloKfpzM9V5dmaZAyAY6uttnL-sc_AU&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>English Year 6</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1gIC8sGr37mKcHfCmcJEsaMQ4czavWKKj&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr style="background-color: #fce4ec;"><td colspan="2" style="font-weight: bold; padding: 10px;">BAHASA MELAYU SJK</td></tr>
<tr><td>RPT BM SJK Tahun 1</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1jtxIhi2NtCNCRIip-cUDutt9fuujSwXz&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>RPT BM SJK Tahun 2</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1kYI9qs0K1BdvBtV94Izl1EW2fZ_kZxu9&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>RPT BM SJK Tahun 3</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1oq3yjnSQzN7F5BcJRtZkhgJQjNgGCY4D&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>RPT BM SJK Tahun 4</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1NzioscL8lw8xCmCa-n83ZV_nW6IxIqUq&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>RPT BM SJK Tahun 5</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1m0IfXovxvz80kZDqr13AWiMlLKcoqpUy&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
<tr><td>RPT BM SJK Tahun 6</td><td style="text-align: center;"><a href="https://drive.google.com/open?id=1UHdlc61DTp3B9be6lNDKb1L2UNkoMaSQ&usp=drive_copy" target="_blank">Muat Turun</a></td></tr>
</tbody>
</table>
</div>
<div style="border-radius: 12px; border: 1px solid rgb(209, 216, 224); margin: 25px 0px; padding: 15px; text-align: center;">
<p style="font-size: 13px; font-weight: bold; margin: 0px 0px 10px;">👗 Koleksi Baju Kurung & Batik Guru 2026</p>
<a href="https://s.shopee.com.my/7VAAA6s3s3" style="color: #3498db; font-weight: bold; text-decoration: none;" target="_blank">Cek Corak Terkini di Shopee »</a>
</div>
<div style="color: #999999; font-size: 11px; margin-top: 20px; text-align: center;">
Disclaimer: Layanlah tidak bertanggungjawab atas segala risiko muat turun. Pautan ini dikumpul untuk tujuan perkongsian ilmu.
</div>MeAdminhttp://www.blogger.com/profile/06871300420300644055noreply@blogger.com0tag:blogger.com,1999:blog-5341061453048343895.post-75242413585906589942026-01-17T00:28:00.009+08:002026-01-17T00:51:04.480+08:00Generator Sijil Penghargaan Percuma 2026: Buat & Download PDF<div style="font-family: sans-serif; line-height: 1.6; color: #333; margin-bottom: 25px;">
<p>Penghasilan sijil secara pukal kini lebih kemas dengan <strong>Generator Sijil Pro Layanlah</strong>. Versi terbaru ini telah dioptimumkan susun aturnya untuk format Portrait dan Landscape bagi memastikan kedudukan nama, tarikh, dan tandatangan tersusun dengan sempurna.</p>
</div>
<div style="margin: 20px 0; padding: 15px; border: 1px solid #e5e7eb; background: #f9fafb; border-radius: 12px; text-align: center; font-family: sans-serif;">
<p style="margin: 0 0 10px 0; font-size: 13px; font-weight: bold; color: #2d3436;">🖨️ Stok Sijil Habis? Beli Kertas Sijil Tebal & Frame Emas</p>
<a href="https://s.shopee.com.my/7VAAA6s3s3" target="_blank" style="color: #ee4d2d; text-decoration: none; font-size: 14px; font-weight: bold;">Lihat Keperluan Sijil di Shopee »</a>
</div>
<div class="separator" style="clear: both; text-align: center; margin-bottom: 25px;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNLcxJlnCGb5GHj2_SQrnnQF7mkL_gwoTYeUXLqxYUT3RfLAMXxOS2KYtqek7TbV2XJa-zTyGyDKYi4_eFHasWRXBGRqubzSI2VrxJCYQJ9jvulHVjOeuRGJ4IyxP1GvDiCvF_msg8Hxnj_YUcv39URDP0lneuDJrOwhHf7HDAFA3P8RCDEULM7eddWEE/s1100/1000001704.jpg">
<img alt="Sijil Generator Pro Layanlah dengan susunan kemas" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNLcxJlnCGb5GHj2_SQrnnQF7mkL_gwoTYeUXLqxYUT3RfLAMXxOS2KYtqek7TbV2XJa-zTyGyDKYi4_eFHasWRXBGRqubzSI2VrxJCYQJ9jvulHVjOeuRGJ4IyxP1GvDiCvF_msg8Hxnj_YUcv39URDP0lneuDJrOwhHf7HDAFA3P8RCDEULM7eddWEE/s320/1000001704.jpg" width="350" />
</a>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<div id="cert-ultimate-app" style="max-width: 600px; margin: 20px auto; border-radius: 20px; font-family: 'Segoe UI', sans-serif; background: #ffffff; box-shadow: 0 15px 40px rgba(0,0,0,0.1); border: 2px solid #2c3e50; overflow: hidden;">
<div style="background: #2c3e50; color: #ffffff; padding: 25px; text-align: center;">
<h2 style="margin: 0; font-size: 22px; color: #ffffff !important;">🎓 GENERATOR SIJIL PRO (BULK)</h2>
<p style="margin: 5px 0 0 0; font-size: 11px; opacity: 0.8;">Susunan Kemas | Auto-Scale Nama</p>
</div>
<div style="padding: 25px;">
<div style="margin-bottom: 15px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
<div onclick="setOrient('p')" id="btnP" style="padding:10px; border:2px solid #2c3e50; border-radius:8px; text-align:center; cursor:pointer; background:#2c3e50; color:white; font-size:12px; font-weight:bold;">Portrait</div>
<div onclick="setOrient('l')" id="btnL" style="padding:10px; border:2px solid #eee; border-radius:8px; text-align:center; cursor:pointer; font-size:12px; font-weight:bold;">Landscape</div>
</div>
<input type="hidden" id="orientation" value="p">
<div style="margin-bottom: 15px; border: 2px dashed #ddd; padding: 10px; border-radius: 10px; text-align: center;">
<label style="font-size: 11px; font-weight: bold; display: block; margin-bottom: 5px;">LOGO ORGANISASI:</label>
<input type="file" id="logoUpload" accept="image/*" style="font-size: 11px;">
</div>
<div style="margin-bottom: 15px;">
<label style="font-size: 12px; font-weight: bold;">JENIS SIJIL:</label>
<select id="certType" style="width:100%; padding:10px; border-radius:8px; border:1px solid #ddd;">
<option value="SIJIL PENGHARGAAN">Sijil Penghargaan</option>
<option value="SIJIL PENCAPAIAN">Sijil Pencapaian</option>
<option value="SIJIL PENYERTAAN">Sijil Penyertaan</option>
</select>
</div>
<div style="margin-bottom: 15px;">
<label style="font-size: 12px; font-weight: bold;">SENARAI NAMA (Satu baris satu nama):</label>
<textarea id="nameList" rows="4" style="width:100%; padding:10px; border-radius:8px; border:1px solid #ddd;" placeholder="NAMA PENERIMA..."></textarea>
</div>
<div style="margin-bottom: 15px;">
<label style="font-size: 12px; font-weight: bold;">TUJUAN & TEMPLATE AYAT:</label>
<select id="purposeTemplate" onchange="useTemplate()" style="width:100%; padding:10px; border-radius:8px; margin-bottom:5px; border:1px solid #ddd;">
<option value="">-- Pilih Template Ayat --</option>
<option value="Atas sumbangan dan khidmat bakti yang telah diberikan sepanjang program berlangsung.">Sumbangan Bakti</option>
<option value="Kerana telah menunjukkan prestasi yang cemerlang dan komitmen yang tinggi.">Prestasi Cemerlang</option>
<option value="Atas penyertaan aktif dalam menjayakan kejohanan dan aktiviti yang dijalankan.">Penyertaan Aktif</option>
</select>
<textarea id="tujuan" rows="2" style="width:100%; padding:10px; border:1px solid #ddd; border-radius:8px;" placeholder="Ayat penghargaan..."></textarea>
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px;">
<div><label style="font-size: 12px; font-weight: bold;">NAMA MAJLIS:</label><input type="text" id="acara" style="width:100%; padding:10px; border:1px solid #ddd; border-radius:8px;"></div>
<div><label style="font-size: 12px; font-weight: bold;">TARIKH:</label><input type="date" id="tarikh" style="width:100%; padding:10px; border:1px solid #ddd; border-radius:8px;"></div>
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 25px;">
<div><label style="font-size: 12px; font-weight: bold;">PENANDATANGAN:</label><input type="text" id="signBy" style="width:100%; padding:10px; border:1px solid #ddd; border-radius:8px;"></div>
<div>
<label style="font-size: 12px; font-weight: bold;">JAWATAN:</label>
<select id="jawatanSelect" onchange="setJawatan(this.value)" style="width:100%; padding:10px; border:1px solid #ddd; border-radius:8px;">
<option value="">-- Pilih --</option>
<option value="Guru Besar">Guru Besar</option>
<option value="Pengetua">Pengetua</option>
<option value="Pengerusi">Pengerusi</option>
<option value="Lain-lain">Taip Manual...</option>
</select>
<input type="text" id="jawatanManual" style="width:100%; padding:10px; border:1px solid #ddd; border-radius:8px; display:none; margin-top:5px;">
</div>
</div>
<button id="btnPDF" onclick="generateBulkCert()" style="width: 100%; background: #2c3e50; color: white; border: none; padding: 18px; border-radius: 12px; font-weight: bold; cursor: pointer;">📥 JANA & DOWNLOAD PDF PUKAL</button>
</div>
</div>
<div style="margin: 25px 0; padding: 15px; border: 1px solid #d1d8e0; background: #ffffff; border-radius: 12px; text-align: center; font-family: sans-serif;">
<p style="margin: 0 0 10px 0; font-size: 13px; font-weight: bold;">🏅 Frame Sijil Eksklusif & Kertas Sijil Gold Foil</p>
<a href="https://s.shopee.com.my/7VAAA6s3s3" target="_blank" style="color: #3498db; text-decoration: none; font-size: 14px; font-weight: bold;">Beli Keperluan Sijil di Shopee »</a>
</div>
<div style="padding: 20px; border: 2px dashed #2c3e50; border-radius: 10px; text-align: center; font-family: sans-serif; background: #fff;">
<p style="font-weight: bold;">Bantu Rakan Guru!</p>
<p style="font-size: 14px;">Kongsikan tool ini untuk memudahkan kerja rakan sekerja anda.</p>
</div>
<div style="margin-top: 20px; font-size: 11px; color: #999; text-align: center; font-family: sans-serif;">
Disclaimer: Layanlah tidak bertanggungjawab atas penyalahgunaan dokumen. Kami adalah rakan affiliate Shopee.
</div>
<script>
//<![CDATA[
function setOrient(o) {
document.getElementById('orientation').value = o;
document.getElementById('btnP').style.background = (o === 'p') ? '#2c3e50' : '#ffffff';
document.getElementById('btnP').style.color = (o === 'p') ? '#ffffff' : '#2c3e50';
document.getElementById('btnL').style.background = (o === 'l') ? '#2c3e50' : '#ffffff';
document.getElementById('btnL').style.color = (o === 'l') ? '#ffffff' : '#2c3e50';
document.getElementById('btnP').style.border = (o === 'p') ? '2px solid #2c3e50' : '2px solid #eee';
document.getElementById('btnL').style.border = (o === 'l') ? '2px solid #2c3e50' : '2px solid #eee';
}
function setJawatan(v) { document.getElementById('jawatanManual').style.display = (v === 'Lain-lain') ? 'block' : 'none'; }
function useTemplate() { document.getElementById('tujuan').value = document.getElementById('purposeTemplate').value; }
async function generateBulkCert() {
const btn = document.getElementById('btnPDF');
const names = document.getElementById('nameList').value.trim().split('\n').filter(n => n.trim() !== "");
if (names.length === 0) { alert("Sila isi nama!"); return; }
btn.innerText = "Sila Tunggu..."; btn.disabled = true;
const { jsPDF } = window.jspdf;
const orient = document.getElementById('orientation').value;
const doc = new jsPDF({ orientation: (orient === 'p' ? 'portrait' : 'landscape') });
const type = document.getElementById('certType').value;
const tujuan = document.getElementById('tujuan').value;
const majlis = document.getElementById('acara').value;
const rawDate = document.getElementById('tarikh').value;
const tarikhStr = rawDate ? new Date(rawDate).toLocaleDateString('ms-MY', { day:'numeric', month:'long', year:'numeric' }) : "";
const sign = document.getElementById('signBy').value;
const jawatan = document.getElementById('jawatanSelect').value === 'Lain-lain' ? document.getElementById('jawatanManual').value : document.getElementById('jawatanSelect').value;
const logoFile = document.getElementById('logoUpload').files[0];
let logoBase64 = null;
if (logoFile) {
logoBase64 = await new Promise(resolve => {
const reader = new FileReader();
reader.onload = e => resolve(e.target.result);
reader.readAsDataURL(logoFile);
});
}
const width = doc.internal.pageSize.getWidth();
const height = doc.internal.pageSize.getHeight();
const centerX = width / 2;
for (let i = 0; i < names.length; i++) {
if (i > 0) doc.addPage();
doc.setTextColor(0, 0, 0); doc.setDrawColor(44, 62, 80);
// Border
doc.setLineWidth(1.5); doc.rect(10, 10, width - 20, height - 20);
doc.setLineWidth(0.5); doc.rect(13, 13, width - 26, height - 26);
// Logo (Spacing adjusted)
if (logoBase64) doc.addImage(logoBase64, 'PNG', centerX - 15, 20, 30, 30);
// Judul (Y:65)
doc.setFont("times", "bold"); doc.setFontSize(35);
doc.text(type, centerX, 65, { align: "center" });
// "Dengan ini disahkan..." (Y:80)
doc.setFontSize(15); doc.setFont("times", "italic");
doc.text("Dengan ini disahkan bahawa", centerX, 80, { align: "center" });
// Nama (Y:100 + Auto Scale)
let fontSizeNama = 28;
doc.setFont("times", "bold"); doc.setFontSize(fontSizeNama);
let nameUpper = names[i].toUpperCase();
while (doc.getTextWidth(nameUpper) > (width - 60) && fontSizeNama > 10) {
fontSizeNama -= 1; doc.setFontSize(fontSizeNama);
}
doc.text(nameUpper, centerX, 100, { align: "center" });
// Tujuan (Y:115)
doc.setFontSize(14); doc.setFont("times", "normal");
let splitTujuan = doc.splitTextToSize(tujuan, width - 60);
doc.text(splitTujuan, centerX, 115, { align: "center" });
// Jarak Luas untuk Landscape di bawah
let bottomY = height - 55; // Garisan Tandatangan
// Majlis & Tarikh (Diletakkan tengah antara tujuan & sign)
doc.setFont("times", "bold"); doc.setFontSize(14);
doc.text(majlis, centerX, bottomY - 25, { align: "center" });
doc.setFontSize(12);
doc.text("Tarikh: " + tarikhStr, centerX, bottomY - 18, { align: "center" });
// Ruangan Sign (Bottom Spacing Optimized)
doc.setLineWidth(0.5);
doc.line(centerX - 45, bottomY, centerX + 45, bottomY);
doc.setFont("times", "bold"); doc.text(sign, centerX, bottomY + 8, { align: "center" });
doc.setFont("times", "normal"); doc.text(jawatan, centerX, bottomY + 14, { align: "center" });
}
doc.save(`Sijil_Pukal_Layanlah.pdf`);
btn.innerText = "📥 JANA & DOWNLOAD PDF PUKAL"; btn.disabled = false;
}
//]]>
</script>MeAdminhttp://www.blogger.com/profile/06871300420300644055noreply@blogger.com0tag:blogger.com,1999:blog-5341061453048343895.post-256851927809994342026-01-16T23:53:00.005+08:002026-01-17T00:17:19.701+08:00Kalkulator Duit Kutu 2026: Jana Jadual Giliran & Simpan PDF<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.25/jspdf.plugin.autotable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<div style="font-family: sans-serif; line-height: 1.6; color: #333; margin-bottom: 25px;">
<p>Adakah anda "Ibu Kutu" yang mencari cara adil untuk agihan giliran? <strong>Kalkulator Duit Kutu Pro</strong> kini hadir dengan fungsi **Agihan Rawak** dan penjanaan **PDF** yang sangat profesional.</p>
<p>Hanya masukkan senarai nama dan jumlah caruman, sistem akan mengira pecahan amaun bulanan secara automatik. Sesuai untuk pengurusan kewangan kumpulan yang lebih telus.</p>
</div>
<div style="margin: 20px 0; padding: 15px; border: 1px solid #e5e7eb; background: #f9fafb; border-radius: 12px; text-align: center; font-family: sans-serif;">
<p style="margin: 0 0 10px 0; font-size: 13px; font-weight: bold; color: #2d3436;">💰 Simpan Duit Lebih Teratur: Tabung Besi & Binder Budget Viral</p>
<a href="https://s.shopee.com.my/7VAAA6s3s3" target="_blank" style="color: #ee4d2d; text-decoration: none; font-size: 14px; font-weight: bold;">Cek Pilihan Tabung di Shopee »</a>
</div>
<div class="separator" style="clear: both; text-align: center; margin-bottom: 25px;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFNLKBzBeJTSQn9pUlAZFy_rL5-67G6glAXiPFAl2O50LkaUQmjibNwrYPBCzwpinWyoSV4JKCCBKGJwZ-Js4PC21nhdC14vZU1nxwab3PlUsN_fpUk8_Xq9k27h8Xw5_j5p8avD_DH3ki28LonZddvxHXLP6QaYZskYGIYgv7vF2oZkLX50grL23_seg/s1100/1000001702.jpg">
<img alt="Kalkulator Duit Kutu Pro dengan jadual nama ahli dan jumlah bulanan" border="0" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFNLKBzBeJTSQn9pUlAZFy_rL5-67G6glAXiPFAl2O50LkaUQmjibNwrYPBCzwpinWyoSV4JKCCBKGJwZ-Js4PC21nhdC14vZU1nxwab3PlUsN_fpUk8_Xq9k27h8Xw5_j5p8avD_DH3ki28LonZddvxHXLP6QaYZskYGIYgv7vF2oZkLX50grL23_seg/s320/1000001702.jpg" width="320" />
</a>
</div>
<div id="kutu-app-v4" style="max-width: 550px; margin: 20px auto; border-radius: 20px; font-family: 'Segoe UI', sans-serif; background: #ffffff; box-shadow: 0 15px 40px rgba(0,0,0,0.1); border: 2px solid #3498db; overflow: hidden;">
<div style="background: #3498db; color: #ffffff; padding: 25px; text-align: center;">
<h2 style="margin: 0; font-size: 20px; color: #ffffff !important;">💰 PENGURUS DUIT KUTU PRO</h2>
<p style="margin: 5px 0 0 0; font-size: 11px; opacity: 0.9;">Sistem Agihan & Simpan PDF</p>
</div>
<div style="padding: 25px;">
<div style="margin-bottom: 15px;">
<label style="font-size: 12px; font-weight: bold; color: #3498db;">NAMA KUMPULAN:</label>
<input type="text" id="kutuTitle" placeholder="Cth: Kutu Pejabat 2026" style="width:100%; padding:10px; border:2px solid #3498db; border-radius:8px; box-sizing:border-box;">
</div>
<div style="margin-bottom: 20px;">
<label style="font-size: 12px; font-weight: bold;">NAMA AHLI (Satu baris satu nama):</label>
<textarea id="memberList" rows="5" style="width:100%; padding:10px; border-radius:8px; border:1px solid #ddd; font-family:sans-serif;" placeholder="Nama Ahli 1 Nama Ahli 2..."></textarea>
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 20px;">
<div><label style="font-size: 12px; font-weight: bold;">RM Sebulan:</label><input type="number" id="kutuAmount" value="100" style="width:100%; padding:10px; border-radius:8px; border:1px solid #ddd;"></div>
<div><label style="font-size: 12px; font-weight: bold;">Tarikh Mula:</label><input type="date" id="startDate" style="width:100%; padding:10px; border-radius:8px; border:1px solid #ddd;"></div>
</div>
<div style="display: flex; gap: 10px; margin-bottom: 25px;">
<button onclick="prepKutu('manual')" style="flex:1; background: #f39c12; color: white; border: none; padding: 12px; border-radius: 8px; font-weight: bold; cursor: pointer;">MOD MANUAL</button>
<button onclick="prepKutu('rawak')" style="flex:1; background: #2ecc71; color: white; border: none; padding: 12px; border-radius: 8px; font-weight: bold; cursor: pointer;">MOD RAWAK</button>
</div>
<div id="resultArea" style="display:none; border-top: 2px dashed #eee; padding-top: 20px;">
<div style="background: #ebf5fb; padding: 15px; border-radius: 12px; text-align: center; margin-bottom: 20px;">
<div id="displayTitle" style="font-weight: bold; color: #3498db; margin-bottom: 5px;"></div>
<div style="font-size: 11px;">JUMLAH CARUMAN PENUH</div>
<div style="font-size: 28px; font-weight: 800; color: #2c3e50;">RM <span id="totalDisplay">0</span></div>
</div>
<table style="width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 20px;">
<thead style="background: #3498db; color: white;">
<tr><th style="padding: 10px; text-align: left;">Bulan</th><th style="padding: 10px; text-align: left;">Nama Ahli</th><th style="padding: 10px; text-align: right;">Dapat (RM)</th></tr>
</thead>
<tbody id="kutuTableBody"></tbody>
</table>
<button id="btnPDF" onclick="downloadKutuPDF()" style="width: 100%; background: #e74c3c; color: white; border: none; padding: 15px; border-radius: 12px; font-weight: bold; cursor: pointer;">📥 SIMPAN JADUAL (PDF)</button>
</div>
</div>
</div>
<div id="qrcode" style="display:none;"></div>
<script>
//<![CDATA[
let finalSchedule = [];
function prepKutu(mode) {
const title = document.getElementById('kutuTitle').value.trim() || "JADUAL DUIT KUTU";
const nameText = document.getElementById('memberList').value.trim();
const names = nameText.split('\n').filter(n => n.trim() !== "");
const amount = parseFloat(document.getElementById('kutuAmount').value);
const start = document.getElementById('startDate').value;
if (names.length < 2 || !amount || !start) { alert("Sila isi nama (min 2 orang), amaun & tarikh!"); return; }
const totalKutipan = amount * names.length;
document.getElementById('displayTitle').innerText = title.toUpperCase();
document.getElementById('totalDisplay').innerText = totalKutipan.toLocaleString();
const tableBody = document.getElementById('kutuTableBody');
tableBody.innerHTML = "";
finalSchedule = [];
let workingNames = [...names];
if (mode === 'rawak') workingNames.sort(() => Math.random() - 0.5);
let currentDate = new Date(start);
for (let i = 0; i < names.length; i++) {
let monthLabel = currentDate.toLocaleString('ms-MY', { month: 'long', year: 'numeric' });
let nameVal = (mode === 'rawak') ? workingNames[i] : "";
let rowHtml = `<tr><td style="padding:10px; border-bottom:1px solid #eee;">${monthLabel}</td><td style="padding:10px; border-bottom:1px solid #eee;">`;
if (mode === 'rawak') {
rowHtml += `<strong>${nameVal}</strong>`;
} else {
rowHtml += `<select onchange="updateManualName(${i}, this.value)" style="width:100%; padding:5px;">
<option value="">-- Pilih --</option>
${names.map(n => `<option value="${n}">${n}</option>`).join('')}
</select>`;
}
rowHtml += `</td><td style="padding:10px; border-bottom:1px solid #eee; text-align:right;">${totalKutipan.toLocaleString()}</td></tr>`;
tableBody.innerHTML += rowHtml;
finalSchedule.push({ month: monthLabel, name: nameVal, total: totalKutipan });
currentDate.setMonth(currentDate.getMonth() + 1);
}
document.getElementById('resultArea').style.display = "block";
}
function updateManualName(index, val) { finalSchedule[index].name = val; }
function downloadKutuPDF() {
const btn = document.getElementById('btnPDF');
btn.innerText = "Sila Tunggu...";
btn.disabled = true;
try {
const { jsPDF } = window.jspdf;
const doc = new jsPDF();
const title = document.getElementById('kutuTitle').value.trim() || "JADUAL DUIT KUTU";
const totalStr = document.getElementById('totalDisplay').innerText;
const currentUrl = window.location.href;
// Generate QR Code Offline
const qrContainer = document.getElementById("qrcode");
qrContainer.innerHTML = "";
new QRCode(qrContainer, { text: currentUrl, width: 100, height: 100 });
setTimeout(() => {
const qrCanvas = qrContainer.querySelector('canvas');
const qrImgData = qrCanvas.toDataURL("image/png");
doc.setFontSize(18); doc.setTextColor(52, 152, 219);
doc.text(title.toUpperCase(), 14, 20);
doc.setFontSize(10); doc.setTextColor(0, 0, 0);
doc.text("Rujukan: Layanlah | Jumlah Penuh: RM " + totalStr, 14, 28);
doc.autoTable({
startY: 35,
head: [['Bulan', 'Nama Penerima', 'Amaun Dapat (RM)']],
body: finalSchedule.map(s => [s.month, s.name || "Belum dipilih", "RM " + s.total.toLocaleString()]),
headStyles: { fillColor: [52, 152, 219] },
columnStyles: { 2: { halign: 'right' } }
});
const finalY = doc.lastAutoTable.finalY + 10;
doc.setFontSize(8); doc.setTextColor(150);
doc.text("Scan untuk guna kalkulator:", 155, finalY + 5);
doc.addImage(qrImgData, 'PNG', 165, finalY + 8, 25, 25);
doc.save(`${title.replace(/\s+/g, '_')}.pdf`);
btn.innerText = "📥 SIMPAN JADUAL (PDF)";
btn.disabled = false;
}, 500);
} catch (e) {
alert("Ralat PDF: Sila cuba lagi.");
btn.innerText = "📥 SIMPAN JADUAL (PDF)";
btn.disabled = false;
}
}
//]]>
</script>
<div style="margin: 25px 0; padding: 15px; border: 1px solid #d1d8e0; background: #ffffff; border-radius: 12px; text-align: center; font-family: sans-serif;">
<p style="margin: 0 0 10px 0; font-size: 13px; font-weight: bold;">📖 Planner & Buku Catatan Kewangan (Terlaris)</p>
<a href="https://s.shopee.com.my/7VAAA6s3s3" target="_blank" style="color: #3498db; text-decoration: none; font-size: 14px; font-weight: bold;">Beli Planner di Shopee »</a>
</div>
<div style="padding: 20px; border: 2px dashed #3498db; border-radius: 10px; text-align: center; font-family: sans-serif; background: #fff;">
<p style="font-weight: bold; color: #2980b9;">Bantu Ibu Kutu Lain!</p>
<p style="font-size: 14px;">Tinggalkan komen anda di bawah jika tool ini sangat memudahkan urusan group kutu anda!</p>
</div>MeAdminhttp://www.blogger.com/profile/06871300420300644055noreply@blogger.com0tag:blogger.com,1999:blog-5341061453048343895.post-28606839211517829782026-01-16T23:14:00.003+08:002026-01-16T23:24:49.583+08:00Kalkulator Upah Jahit 2026: Kira Anggaran & Sebut Harga (Boleh Edit)<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.25/jspdf.plugin.autotable.min.js"></script>
<div style="font-family: sans-serif; line-height: 1.6; color: #333; margin-bottom: 25px;">
<p>Adakah anda sedang mengira kos untuk tempahan baju raya atau majlis? <strong>Kalkulator Upah Jahit 2026</strong> ini menyediakan anggaran harga bagi pelbagai jenis pakaian termasuk Baju Kurung, Baju Melayu, Kebaya, dan Kurta.</p>
<p>Tukang jahit boleh mengubah harga dasar secara fleksibel, dan pelanggan boleh memuat turun sebut harga (quotation) dalam format PDF secara percuma.</p>
</div>
<div style="margin: 20px 0; padding: 15px; border: 1px solid #e5e7eb; background: #f9fafb; border-radius: 12px; text-align: center; font-family: sans-serif;">
<p style="margin: 0 0 10px 0; font-size: 13px; font-weight: bold; color: #2d3436;">🧵 Alatan Jahit Terlaris: Gunting Kain & Kapur Penanda</p>
<a href="https://s.shopee.com.my/7VAAA6s3s3" target="_blank" style="color: #ee4d2d; text-decoration: none; font-size: 14px; font-weight: bold;">Cek Promosi Shopee »</a>
</div>
<div class="separator" style="clear: both; text-align: center; margin-bottom: 25px;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh33lSlD_gfjgRSkgMLq5itlTRu5c7GsWna1OxRQRl9ys9V9lxxXBO2_pI2FzreTT8ee_ilClis16swvWgpE2evqpd4WiFhe6N4TzyPQT6BMoooS3ct73E9MAyONDRK28iH1bd99r1wO4girchXVvApB1p7hD2fL0EXIiyG8K1RF5G1d3rBw9UpcFzxE-w/s1100/1000001700.jpg">
<img alt="Kalkulator Upah Jahit Baju Melayu Kurung Kebaya 2026" border="0" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh33lSlD_gfjgRSkgMLq5itlTRu5c7GsWna1OxRQRl9ys9V9lxxXBO2_pI2FzreTT8ee_ilClis16swvWgpE2evqpd4WiFhe6N4TzyPQT6BMoooS3ct73E9MAyONDRK28iH1bd99r1wO4girchXVvApB1p7hD2fL0EXIiyG8K1RF5G1d3rBw9UpcFzxE-w/s320/1000001700.jpg" width="350" />
</a>
</div>
<div id="tailor-app-final" style="max-width: 550px; margin: 20px auto; border-radius: 20px; font-family: 'Segoe UI', sans-serif; background: #ffffff; box-shadow: 0 15px 40px rgba(0,0,0,0.2); border: 2px solid #2d3436; overflow: hidden;">
<div style="background: #2d3436; color: #ffffff; padding: 25px; text-align: center;">
<h2 style="margin: 0; font-size: 22px; color: #ffffff !important;">✂️ KALKULATOR UPAH JAHIT</h2>
<p style="margin: 5px 0 0 0; font-size: 11px; color: #bdc3c7;">Versi Lengkap: Kurung, Kebaya, B.Melayu, Kurta</p>
</div>
<div style="padding: 25px;">
<details style="margin-bottom: 25px; background: #fff9db; border: 2px solid #fab005; border-radius: 12px; padding: 12px;">
<summary style="font-size: 13px; font-weight: bold; cursor: pointer; color: #e67e22;">⚙️ TETAPAN HARGA DASAR (EDIT DI SINI)</summary>
<div style="padding-top: 15px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
<div style="font-size: 11px;">B.Kurung (RM)<input type="number" id="base_kurung" value="45" onchange="kiraUpah()" style="width:100%;"></div>
<div style="font-size: 11px;">B.Melayu (RM)<input type="number" id="base_melayu" value="65" onchange="kiraUpah()" style="width:100%;"></div>
<div style="font-size: 11px;">Kebaya (RM)<input type="number" id="base_kebaya" value="60" onchange="kiraUpah()" style="width:100%;"></div>
<div style="font-size: 11px;">Kurta (RM)<input type="number" id="base_kurta" value="40" onchange="kiraUpah()" style="width:100%;"></div>
</div>
</details>
<label style="display: block; font-weight: bold; margin-bottom: 8px;">Pilih Jenis Pakaian:</label>
<select id="bajuType" onchange="kiraUpah()" style="width: 100%; padding: 12px; border: 2px solid #dfe4ea; border-radius: 10px; margin-bottom: 20px;">
<option value="kurung">Baju Kurung (Biasa/Moden)</option>
<option value="melayu">Baju Melayu (Cekak Musang/Teluk Belanga)</option>
<option value="kebaya">Baju Kebaya / Keledek</option>
<option value="kurta">Baju Kurta / Kemeja Ringkas</option>
</select>
<label style="display: block; font-weight: bold; margin-bottom: 12px;">Pilihan Tambahan:</label>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 25px;">
<div onclick="toggleAddon('addLining')" id="card_addLining" style="padding: 12px; border: 2px solid #eee; border-radius: 12px; text-align: center; cursor: pointer;">
Lining (+RM15)<input type="checkbox" id="addLining" style="display:none;" onchange="kiraUpah()">
</div>
<div onclick="toggleAddon('addManik')" id="card_addManik" style="padding: 12px; border: 2px solid #eee; border-radius: 12px; text-align: center; cursor: pointer;">
Manik (+RM20)<input type="checkbox" id="addManik" style="display:none;" onchange="kiraUpah()">
</div>
<div onclick="toggleAddon('addLace')" id="card_addLace" style="padding: 12px; border: 2px solid #eee; border-radius: 12px; text-align: center; cursor: pointer;">
Lace (+RM25)<input type="checkbox" id="addLace" style="display:none;" onchange="kiraUpah()">
</div>
<div onclick="toggleAddon('addPesak')" id="card_addPesak" style="padding: 12px; border: 2px solid #eee; border-radius: 12px; text-align: center; cursor: pointer;">
Pesak/Saku (+RM5)<input type="checkbox" id="addPesak" style="display:none;" onchange="kiraUpah()">
</div>
</div>
<div style="background: #2d3436; color: white; padding: 25px; border-radius: 20px; text-align: center;">
<div style="font-size: 11px; text-transform: uppercase; opacity: 0.7;">Jumlah Anggaran Upah</div>
<div style="font-size: 40px; font-weight: 800; margin: 5px 0;">RM <span id="totalUpah">45</span></div>
<div id="breakdown" style="font-size: 11px; color: #bdc3c7;">Harga dasar sahaja</div>
</div>
<div style="display: flex; gap: 10px; margin-top: 20px;">
<button onclick="downloadTailorPDF()" style="flex: 2; background: #e74c3c; color: white; border: none; padding: 15px; border-radius: 12px; font-weight: bold; cursor: pointer;">📥 SIMPAN PDF</button>
<button onclick="resetTailor()" style="flex: 1; background: #f1f2f6; color: #7f8c8d; border: none; padding: 15px; border-radius: 12px; font-weight: bold; cursor: pointer;">RESET</button>
</div>
</div>
</div>
<div style="padding: 20px; border: 2px dashed #ccc; border-radius: 10px; text-align: center; font-family: sans-serif; margin-top: 30px;">
<p style="font-weight: bold;">Berapa upah jahit di kawasan anda?</p>
<p style="font-size: 14px;">Tuliskan jenis baju, harga upah, dan lokasi anda di komen bawah!</p>
</div>
<script>
//<![CDATA[
function toggleAddon(id) {
const cb = document.getElementById(id);
const card = document.getElementById('card_' + id);
cb.checked = !cb.checked; // Tukar status tick
// Tukar Warna Kad
if(cb.checked) {
card.style.background = "#2ecc71";
card.style.color = "white";
card.style.borderColor = "#27ae60";
} else {
card.style.background = "#ffffff";
card.style.color = "#333";
card.style.borderColor = "#eeeeee";
}
kiraUpah(); // Panggil fungsi kira
}
function kiraUpah() {
const b_kurung = parseFloat(document.getElementById('base_kurung').value) || 0;
const b_melayu = parseFloat(document.getElementById('base_melayu').value) || 0;
const b_kebaya = parseFloat(document.getElementById('base_kebaya').value) || 0;
const b_kurta = parseFloat(document.getElementById('base_kurta').value) || 0;
const type = document.getElementById('bajuType').value;
let total = 0;
let label = "";
if(type === 'kurung') { total = b_kurung; label = "Dasar B.Kurung RM"+b_kurung; }
else if(type === 'melayu') { total = b_melayu; label = "Dasar B.Melayu RM"+b_melayu; }
else if(type === 'kebaya') { total = b_kebaya; label = "Dasar Kebaya RM"+b_kebaya; }
else { total = b_kurta; label = "Dasar Kurta RM"+b_kurta; }
if(document.getElementById('addLining').checked) { total += 15; label += " + Lining RM15"; }
if(document.getElementById('addManik').checked) { total += 20; label += " + Manik RM20"; }
if(document.getElementById('addLace').checked) { total += 25; label += " + Lace RM25"; }
if(document.getElementById('addPesak').checked) { total += 5; label += " + Pesak RM5"; }
document.getElementById('totalUpah').innerText = total;
document.getElementById('breakdown').innerText = label;
}
function resetTailor() {
['addLining', 'addManik', 'addLace', 'addPesak'].forEach(id => {
const cb = document.getElementById(id);
cb.checked = false;
const card = document.getElementById('card_' + id);
card.style.background = "#ffffff";
card.style.color = "#333";
card.style.borderColor = "#eeeeee";
});
document.getElementById('bajuType').value = 'kurung';
kiraUpah();
}
function downloadTailorPDF() {
const { jsPDF } = window.jspdf;
const doc = new jsPDF();
const total = document.getElementById('totalUpah').innerText;
const breakdown = document.getElementById('breakdown').innerText;
const typeText = document.getElementById('bajuType').options[document.getElementById('bajuType').selectedIndex].text;
doc.setFontSize(18);
doc.text("ANGGARAN SEBUT HARGA JAHIT", 14, 20);
doc.setFontSize(10);
doc.text("Laman Rujukan: Layanlah", 14, 28);
doc.autoTable({
startY: 35,
head: [['Kategori', 'Butiran']],
body: [['Jenis Baju', typeText], ['Perincian Kos', breakdown], ['JUMLAH BESAR', 'RM ' + total]],
headStyles: { fillColor: [45, 52, 54] }
});
doc.save("SebutHarga_Jahit.pdf");
}
//]]>
</script>MeAdminhttp://www.blogger.com/profile/06871300420300644055noreply@blogger.com0tag:blogger.com,1999:blog-5341061453048343895.post-22681033257110598602026-01-16T22:44:00.005+08:002026-01-16T22:52:05.183+08:00Kalkulator Tempahan Baju: Kira Saiz Auto & Export PDF (Percuma)<div style="font-family: sans-serif; line-height: 1.6; color: #333; margin-bottom: 25px;">
<p>Adakah anda sedang menguruskan tempahan baju untuk pasukan atau kelas? <strong>Kalkulator Tempahan Baju</strong> ini membantu anda merekod pesanan dengan lebih sistematik tanpa perlu mengira manual.</p>
<p>Tool ini dilengkapi dengan fungsi <strong>Custom PDF Title</strong>, di mana anda boleh menamakan laporan anda sendiri sebelum dimuat turun. Sangat sesuai untuk kegunaan guru kelas dan urusetia organisasi.</p>
</div>
<div style="margin: 20px 0; padding: 15px; border: 1px solid #e5e7eb; background: #f9fafb; border-radius: 12px; text-align: center; font-family: sans-serif;">
<p style="margin: 0 0 10px 0; font-size: 13px; font-weight: bold; color: #2d3436;">👕 Rekomendasi: T-Shirt Microfiber Kualiti Tinggi (Sesuai Cetakan)</p>
<a href="https://s.shopee.com.my/7VAAA6s3s3" target="_blank" style="color: #ee4d2d; text-decoration: none; font-size: 14px; font-weight: bold;">Cek Harga Borong di Shopee »</a>
</div>
<div class="separator" style="clear: both; text-align: center; margin-bottom: 25px;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiczHnlqBtkrKGYLGt3SaDgX0oIVzGL-2VCpkHJyhsANhDztNe5QzYtpUIESbZnk7dbuG80LFoH7r5HycAQlAvThy79OJJEa0L617WYPEdslPEB_1GyBVFeZ2Yh8DzYCjCkSw4qctoac1VV_36mDmNbij50-Ws8I2amNoCttAixBWW1JAUh-XBNelsV3Fg/s1460/1000001698.jpg">
<img alt="Kalkulator Tempahan Baju dengan fungsi export PDF dan custom tajuk laporan" border="0" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiczHnlqBtkrKGYLGt3SaDgX0oIVzGL-2VCpkHJyhsANhDztNe5QzYtpUIESbZnk7dbuG80LFoH7r5HycAQlAvThy79OJJEa0L617WYPEdslPEB_1GyBVFeZ2Yh8DzYCjCkSw4qctoac1VV_36mDmNbij50-Ws8I2amNoCttAixBWW1JAUh-XBNelsV3Fg/s320/1000001698.jpg" title="Kalkulator Tempahan Baju Pro Layanlah" width="350" />
</a>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.25/jspdf.plugin.autotable.min.js"></script>
<div id="order-app-pro" style="max-width: 550px; margin: 20px auto; padding: 0; border-radius: 20px; font-family: 'Segoe UI', sans-serif; background: #ffffff; box-shadow: 0 15px 35px rgba(0,0,0,0.1); border: 2px solid #2ecc71; overflow: hidden;">
<div style="background: #2ecc71; color: white; padding: 20px; text-align: center;">
<h3 style="margin: 0; font-size: 20px;">👕 Tempahan Baju Pro</h3>
<p style="margin: 5px 0 0 0; font-size: 12px; opacity: 0.9;">Urus saiz & jana PDF dengan tajuk sendiri</p>
</div>
<div style="padding: 25px;">
<div style="margin-bottom: 20px;">
<label style="display: block; font-size: 12px; font-weight: bold; color: #27ae60; margin-bottom: 5px;">TAJUK LAPORAN (UNTUK PDF):</label>
<input type="text" id="pdfTitle" placeholder="Cth: Tempahan Baju Kelas 5A" style="width: 100%; padding: 12px; border: 2px solid #ecf0f1; border-radius: 10px; box-sizing: border-box; font-weight: bold; color: #2c3e50;">
</div>
<div style="display: flex; gap: 8px; margin-bottom: 10px;">
<input type="text" id="custName" placeholder="Nama Pemesan" style="flex: 2; padding: 12px; border: 2px solid #ecf0f1; border-radius: 10px;">
<select id="custSize" style="flex: 1; padding: 12px; border: 2px solid #ecf0f1; border-radius: 10px; background: white;">
<option value="XS">XS</option><option value="S">S</option><option value="M">M</option>
<option value="L">L</option><option value="XL">XL</option><option value="2XL">2XL</option>
<option value="3XL">3XL</option><option value="Lain-lain">Lain-lain</option>
</select>
</div>
<input type="text" id="customSizeInput" placeholder="Taip saiz..." style="width: 100%; padding: 12px; border: 2px solid #ecf0f1; border-radius: 10px; margin-bottom: 10px; display: none;">
<div style="display: flex; gap: 8px; margin-bottom: 25px;">
<button onclick="addOrder()" style="flex: 3; background: #2ecc71; color: white; border: none; padding: 15px; border-radius: 12px; font-weight: bold; cursor: pointer; box-shadow: 0 4px 0 #27ae60;">TAMBAH NAMA</button>
<button onclick="resetApp()" style="flex: 1; background: #95a5a6; color: white; border: none; padding: 15px; border-radius: 12px; font-weight: bold; cursor: pointer;">RESET</button>
</div>
<div style="max-height: 200px; overflow-y: auto; border: 1px solid #f1f1f1; border-radius: 10px; margin-bottom: 20px;">
<table style="width: 100%; border-collapse: collapse; font-size: 13px;">
<thead style="background: #f8f9fa; position: sticky; top: 0;">
<tr><th style="padding: 10px; border-bottom: 1px solid #ddd; text-align: left;">Nama</th><th style="padding: 10px; border-bottom: 1px solid #ddd;">Saiz</th><th style="padding: 10px; border-bottom: 1px solid #ddd;">Hapus</th></tr>
</thead>
<tbody id="orderBody"></tbody>
</table>
</div>
<div style="background: #f1f9f4; padding: 15px; border-radius: 12px; border: 1px solid #d4edda;">
<div id="summaryDisplay" style="font-size: 13px; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; color: #155724;"></div>
<div style="margin-top: 10px; font-weight: bold; border-top: 1px solid #c3e6cb; padding-top: 10px; text-align: right; color: #155724;">Total: <span id="grandTotal" style="font-size: 18px;">0</span> helai</div>
</div>
<button onclick="downloadPDF()" style="width: 100%; background: #e74c3c; color: white; border: none; padding: 18px; border-radius: 12px; font-weight: bold; cursor: pointer; margin-top: 20px; box-shadow: 0 4px 0 #c0392b;">📥 MUAT TURUN PDF</button>
</div>
</div>
<div style="margin: 25px 0; padding: 15px; border: 1px solid #d1d8e0; background: #ffffff; border-radius: 12px; text-align: center; font-family: sans-serif;">
<p style="margin: 0 0 10px 0; font-size: 13px; font-weight: bold; color: #2d3436;">🖊️ Alat Tulis Murah untuk Urusetia</p>
<a href="https://s.shopee.com.my/7VAAA6s3s3" target="_blank" style="color: #3498db; text-decoration: none; font-size: 14px; font-weight: bold;">Cek Clipboard & Pen di Shopee »</a>
</div>
<div style="padding: 20px; border: 2px dashed #2ecc71; border-radius: 10px; text-align: center; font-family: sans-serif; background: #fff; margin-bottom: 20px;">
<p style="font-weight: bold; color: #27ae60;">Tool ini membantu anda?</p>
<p style="font-size: 14px;">Jika anda suka tool ini, sila tinggalkan komen di bawah. Maklum balas anda membantu saya membina lebih banyak tools percuma!</p>
</div>
<div style="margin-top: 20px; font-size: 11px; color: #999; text-align: center; font-family: sans-serif;">
Disclaimer: Kami adalah rakan affiliate Shopee dan mungkin mendapat komisen kecil dari klik anda. Fail PDF diproses secara lokal dan privasi anda terjaga.
</div>
<script>
//<![CDATA[
let orders = [];
document.getElementById('custSize').addEventListener('change', function() {
document.getElementById('customSizeInput').style.display = (this.value === 'Lain-lain') ? 'block' : 'none';
});
function addOrder() {
const nameInput = document.getElementById('custName');
const name = nameInput.value.trim();
let size = document.getElementById('custSize').value;
if (size === 'Lain-lain') size = document.getElementById('customSizeInput').value.trim();
if (!name || !size) { alert("Sila masukkan nama dan saiz!"); return; }
orders.push({ name, size });
nameInput.value = "";
updateDisplay();
}
function resetApp() {
if(confirm("Padam semua data dalam senarai?")) {
orders = [];
updateDisplay();
}
}
function removeOrder(index) { orders.splice(index, 1); updateDisplay(); }
function updateDisplay() {
const body = document.getElementById('orderBody');
const summary = document.getElementById('summaryDisplay');
body.innerHTML = ""; summary.innerHTML = "";
let counts = {};
orders.forEach((o, i) => {
body.innerHTML += `<tr><td style="padding:10px; border-bottom:1px solid #eee;">${o.name}</td><td style="padding:10px; border-bottom:1px solid #eee; text-align:center;">${o.size}</td><td style="padding:10px; border-bottom:1px solid #eee; text-align:center;"><button onclick="removeOrder(${i})" style="border:none; background:none; cursor:pointer;">❌</button></td></tr>`;
counts[o.size] = (counts[o.size] || 0) + 1;
});
for (let s in counts) summary.innerHTML += `<div><strong>${s}:</strong> ${counts[s]} helai</div>`;
document.getElementById('grandTotal').innerText = orders.length;
}
async function downloadPDF() {
if (orders.length === 0) { alert("Senarai masih kosong!"); return; }
const customTitle = document.getElementById('pdfTitle').value.trim() || "Senarai Tempahan Baju";
const { jsPDF } = window.jspdf;
const doc = new jsPDF();
doc.setFontSize(18);
doc.text(customTitle, 14, 20);
doc.setFontSize(10);
doc.text(`Dijana melalui Layanlah pada: ${new Date().toLocaleDateString()}`, 14, 28);
let summaryData = [];
let counts = {};
orders.forEach(o => counts[o.size] = (counts[o.size] || 0) + 1);
for (let s in counts) summaryData.push([s, counts[s]]);
doc.autoTable({ startY: 35, head: [['Saiz', 'Jumlah']], body: summaryData, headStyles: {fillColor: [46, 204, 113]} });
doc.autoTable({ startY: doc.lastAutoTable.finalY + 10, head: [['Nama Pemesan', 'Saiz']], body: orders.map(o => [o.name, o.size]), headStyles: {fillColor: [52, 152, 219]} });
doc.save(`${customTitle.replace(/\s+/g, '_')}.pdf`);
}
//]]>
</script>MeAdminhttp://www.blogger.com/profile/06871300420300644055noreply@blogger.com0tag:blogger.com,1999:blog-5341061453048343895.post-21690849154274038912026-01-16T22:05:00.000+08:002026-01-16T22:05:04.880+08:00Random Name Picker Malaysia: Pilih Nama & Buang (Elimination Mode)<div style="font-family: sans-serif; line-height: 1.6; color: #333; margin-bottom: 25px;">
<p>Adakah anda mencari cara adil untuk membuat cabutan bertuah atau memanggil nama pelajar? <strong>Random Name Picker Malaysia</strong> ini direka dengan fungsi <em>Elimination Mode</em> yang unik.</p>
<p>Berbeza dengan pemilih rawak biasa, tool ini akan <strong>membuang nama yang terpilih</strong> secara automatik dari senarai. Ini memastikan setiap orang hanya mempunyai satu peluang untuk menang. Sangat sesuai untuk kegunaan guru, penganjur majlis, dan aktiviti kelas.</p>
</div>
<div style="margin: 20px 0; padding: 15px; border: 1px solid #ffdbd3; background: #fffcfb; border-radius: 10px; text-align: center; font-family: sans-serif;">
<p style="margin: 0 0 10px 0; font-size: 13px; font-weight: bold; color: #ee4d2d;">🔥 Baucar Shopee Eksklusif Hari Ini!</p>
<p style="font-size: 12px; margin-bottom: 12px;">Sebelum mulakan cabutan, pastikan anda tuntut baucar penghantaran percuma di sini:</p>
<a href="https://s.shopee.com.my/7VAAA6s3s3" target="_blank" style="background: #ee4d2d; color: #fff !important; padding: 10px 20px; border-radius: 5px; text-decoration: none; font-weight: bold; font-size: 14px; display: inline-block;">AMBIL BAUCAR SHOPEE</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js"></script>
<div id="elimination-app" style="max-width: 500px; margin: 30px auto; padding: 0; border: 2px solid #3498db; border-radius: 20px; font-family: 'Segoe UI', sans-serif; background: #ffffff; box-shadow: 0 15px 35px rgba(0,0,0,0.1); overflow: hidden;">
<div style="width: 100%; text-align: center; background: #f8f9fa;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTTNYoCMOC-CPBYOz5dLH8BCJXn-x2QMOIhHIGkJpVokokLkHGyT8fSWP8_y3zOPq9_fgU9AI4T68K1SvVqIYeu-Y3Ld63ZwXpOhHcXEBJkPZr2DnTlPy7S_UjIaEAQ2GKUSeVTK-olBnncptT8I1D5bXxAYpFRUQ5WN8s3foMs6lA2ro_Sb9ytAu8elY/s1100/1000001695.jpg" style="width: 100%; height: auto; display: block;" alt="Banner Layanlah" />
</div>
<div style="padding: 25px;">
<h2 style="text-align: center; color: #2c3e50; margin: 0 0 5px 0; font-size: 22px;">🎲 Elimination Picker</h2>
<p style="text-align: center; font-size: 12px; color: #95a5a6; margin-bottom: 25px;">Nama terpilih akan dibuang secara automatik</p>
<div style="margin-bottom: 20px;">
<label style="display: block; font-weight: bold; margin-bottom: 8px; color: #34495e;">Senarai Nama:</label>
<textarea id="namesInput" rows="6" style="width: 100%; padding: 12px; border-radius: 10px; border: 2px solid #ecf0f1; box-sizing: border-box; font-size: 14px; outline: none; transition: 0.3s;" placeholder="Masukkan nama, satu nama setiap baris..."></textarea>
</div>
<div style="display: flex; gap: 12px; margin-bottom: 25px;">
<button onclick="pickWinner()" id="btnPick" style="flex: 2; background: #3498db; color: white; border: none; padding: 15px; border-radius: 12px; font-weight: bold; cursor: pointer; font-size: 16px; box-shadow: 0 4px 0 #2980b9;">PILIH NAMA</button>
<button onclick="resetApp()" style="flex: 1; background: #95a5a6; color: white; border: none; padding: 15px; border-radius: 12px; font-weight: bold; cursor: pointer;">RESET</button>
</div>
<div id="resultBox" style="display: none; text-align: center; padding: 25px; background: #f1f9ff; border: 3px dashed #3498db; border-radius: 15px; margin-bottom: 20px; animation: bounceIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);">
<div style="font-size: 14px; color: #3498db; font-weight: bold; text-transform: uppercase;">Terpilih:</div>
<div id="winnerName" style="font-size: 32px; font-weight: 900; color: #2c3e50; margin: 15px 0;">-</div>
<div style="font-size: 11px; color: #e74c3c; font-weight: bold;">(Dibuang dari senarai)</div>
</div>
<div style="display: flex; justify-content: space-around; background: #f8f9fa; padding: 12px; border-radius: 12px; border: 1px solid #eee;">
<div style="text-align: center;"><div style="font-size: 10px; color: #7f8c8d;">BAKI</div><div id="countRemaining" style="font-weight: bold; color: #2c3e50;">0</div></div>
<div style="border-left: 1px solid #ddd;"></div>
<div style="text-align: center;"><div style="font-size: 10px; color: #7f8c8d;">KELUAR</div><div id="countPicked" style="font-weight: bold; color: #2c3e50;">0</div></div>
</div>
</div>
</div>
<hr style="border: 0; border-top: 1px dashed #ccc; margin: 40px 0;" />
<div style="background: #f9f9f9; padding: 20px; border-radius: 10px; font-family: sans-serif; margin-bottom: 30px;">
<h3 style="color: #2c3e50; margin-top: 0;">FAQ & Panduan</h3>
<p style="font-size: 14px;"><strong>Bagaimana cara menggunakan tool ini?</strong><br/>Masukkan senarai nama dalam kotak yang disediakan (satu nama satu baris). Klik butang 'PILIH NAMA'. Sistem akan memilih seorang pemenang dan membuang nama tersebut agar tidak terpilih lagi.</p>
<p style="font-size: 14px;"><strong>Adakah data saya disimpan?</strong><br/>Tidak. Tool ini berjalan sepenuhnya dalam pelayar anda. Tiada data nama yang dihantar ke pelayan kami.</p>
</div>
<div style="padding: 25px; border: 2px solid #ee4d2d; border-radius: 15px; text-align: center; background: #fff5f2; font-family: sans-serif; margin-bottom: 20px;">
<h4 style="color: #ee4d2d; margin-top: 0;">☕ Sokong Blog Layanlah!</h4>
<p style="font-size: 14px; line-height: 1.5;">Jika tool ini membantu urusan anda, sudi kiranya anda menyokong kami dengan klik butang di bawah sebelum membeli-belah di Shopee. Setiap klik anda sangat bermakna bagi kami!</p>
<a href="https://s.shopee.com.my/7VAAA6s3s3" target="_blank" style="background: #ee4d2d; color: white !important; padding: 12px 25px; border-radius: 50px; text-decoration: none; font-weight: bold; display: inline-block; margin: 10px 0; box-shadow: 0 4px 10px rgba(238,77,45,0.3);">BELANJA KOPI VIA SHOPEE</a>
<p style="font-size: 11px; color: #777; margin-top: 10px;">(Pautan Affiliate Shopee Malaysia)</p>
</div>
<div style="font-size: 11px; color: #aaa; text-align: center; font-style: italic; font-family: sans-serif;">
Disclaimer: Tool ini disediakan untuk tujuan hiburan dan pendidikan sahaja. Layanlah tidak bertanggungjawab atas sebarang keputusan rasmi yang dibuat menggunakan sistem ini.
</div>
<style>
@keyframes bounceIn { 0% { transform: scale(0); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
#btnPick:active { transform: translateY(3px); box-shadow: none; }
</style>
<script>
let remainingNames = [];
let pickedCount = 0;
function pickWinner() {
const input = document.getElementById('namesInput');
const winnerDisplay = document.getElementById('winnerName');
const resultBox = document.getElementById('resultBox');
const btnPick = document.getElementById('btnPick');
if (remainingNames.length === 0 && pickedCount === 0) {
remainingNames = input.value.split('\n').map(name => name.trim()).filter(name => name !== "");
}
if (remainingNames.length === 0) {
alert("Sila masukkan senarai nama!");
return;
}
btnPick.disabled = true;
winnerDisplay.innerText = "Berpusing...";
resultBox.style.display = "block";
setTimeout(() => {
const randomIndex = Math.floor(Math.random() * remainingNames.length);
const winner = remainingNames[randomIndex];
remainingNames.splice(randomIndex, 1);
pickedCount++;
winnerDisplay.innerText = winner;
document.getElementById('countRemaining').innerText = remainingNames.length;
document.getElementById('countPicked').innerText = pickedCount;
input.value = remainingNames.join('\n');
confetti({ particleCount: 150, spread: 70, origin: { y: 0.6 } });
btnPick.disabled = false;
if(remainingNames.length === 0) btnPick.innerText = "SENARAI TAMAT";
}, 700);
}
function resetApp() {
if(confirm("Reset semua?")) {
remainingNames = [];
pickedCount = 0;
document.getElementById('namesInput').value = "";
document.getElementById('resultBox').style.display = "none";
document.getElementById('countRemaining').innerText = "0";
document.getElementById('countPicked').innerText = "0";
document.getElementById('btnPick').disabled = false;
document.getElementById('btnPick').innerText = "PILIH NAMA";
}
}
</script>MeAdminhttp://www.blogger.com/profile/06871300420300644055noreply@blogger.com0tag:blogger.com,1999:blog-5341061453048343895.post-12042338054318869062026-01-16T00:16:00.018+08:002026-01-16T20:09:19.390+08:00Generator Agihan Kumpulan Murid Automatik (PAK-21) & Adil<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4WOwEzcHd9VdHc3oumpoB4S4Ol5yt1ms1UAZaN39p9cWskjCdr5vQGBijrdlvervWVA4d4s7a3CpCisScjDfekkWo3g3_pJbFqdxww9SdT2FkEhc9WT1Cc0o350LVpciGNuiY4x0UDWllpvWr074Yg0imow7GVk8K32ggHlWN6wZe8cBxMQ-PD78LMnE/s1100/1000001680.jpg">
<img alt="Generator Agihan Kumpulan Murid Hybrid" border="0" data-original-height="614" data-original-width="1100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4WOwEzcHd9VdHc3oumpoB4S4Ol5yt1ms1UAZaN39p9cWskjCdr5vQGBijrdlvervWVA4d4s7a3CpCisScjDfekkWo3g3_pJbFqdxww9SdT2FkEhc9WT1Cc0o350LVpciGNuiY4x0UDWllpvWr074Yg0imow7GVk8K32ggHlWN6wZe8cBxMQ-PD78LMnE/s640/1000001680.jpg" width="640" />
</a>
</div>
<br />
<h2>Edisi Pantas: Generator Kumpulan Murid Hybrid</h2>
<p>Kini lebih fleksibel! Anda boleh memilih untuk mengagihkan murid secara rawak sepenuhnya, atau mengasingkan jantina dengan <b>satu klik sahaja</b>. Tiada lagi leceh taip L/P atau tarik satu-persatu. Pilih cara yang paling pantas untuk anda.</p>
<hr />
<style>
.drag-container { display: flex; gap: 15px; flex-wrap: wrap; margin-top: 15px; }
.drop-zone { flex: 1; min-width: 200px; min-height: 120px; background: #fdfdfd; border: 2px dashed #bbb; border-radius: 12px; padding: 10px; }
.drop-zone h4 { text-align: center; margin: 0 0 10px 0; font-size: 13px; color: #555; }
.name-tag { background: #fff; color: #333; padding: 5px 10px; margin: 4px; border-radius: 6px; display: inline-flex; align-items: center; gap: 5px; cursor: move; font-size: 12px; border: 1px solid #ddd; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.btn-l { background: #2196f3; color: white; border: none; border-radius: 3px; cursor: pointer; padding: 2px 6px; font-size: 10px; }
.btn-p { background: #f06292; color: white; border: none; border-radius: 3px; cursor: pointer; padding: 2px 6px; font-size: 10px; }
.zone-males { border-color: #2196f3; background: #e3f2fd; }
.zone-females { border-color: #f06292; background: #fce4ec; }
.zone-pool { border-color: #757575; background: #ffffff; width: 100%; min-height: 80px; }
#displayNama { background: #fff; border: 2px solid #ff4757; height: 60px; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: bold; border-radius: 8px; margin-bottom: 10px; }
</style>
<div style="background: #ffffff; padding: 20px; border-radius: 15px; border: 2px solid #1a73e8; font-family: sans-serif; max-width: 750px; margin: 10px auto; box-shadow: 0 5px 15px rgba(0,0,0,0.05);">
<textarea id="rawNames" rows="4" style="width: 100%; border-radius: 8px; border: 1px solid #ccc; padding: 10px; box-sizing: border-box;" placeholder="1. Tampal senarai nama murid di sini..."></textarea>
<button onclick="generateHybridTags()" style="width: 100%; background: #34a853; color: white; padding: 12px; border: none; border-radius: 8px; margin-top: 10px; cursor: pointer; font-weight: bold;">TUKAR JADI KAD NAMA</button>
<div class="drag-container">
<div class="drop-zone zone-pool" id="pool" ondrop="drop(event)" ondragover="allowDrop(event)">
<h4>Senarai Nama (Klik L/P atau Drag)</h4>
<div id="namePool"></div>
</div>
<div class="drop-zone zone-males" id="maleZone" ondrop="drop(event)" ondragover="allowDrop(event)">
<h4>👦 Kotak Lelaki</h4>
</div>
<div class="drop-zone zone-females" id="femaleZone" ondrop="drop(event)" ondragover="allowDrop(event)">
<h4>👧 Kotak Perempuan</h4>
</div>
</div>
<div style="margin-top: 20px; text-align: center; border-top: 1px solid #eee; padding-top: 15px;">
<b>Bil. Kumpulan:</b>
<input type="number" id="numGroups" value="4" min="1" style="width: 45px; padding: 5px; margin: 0 10px;">
<button onclick="agihHybrid()" style="background: #1a73e8; color: white; padding: 10px 20px; border: none; border-radius: 8px; cursor: pointer; font-weight: bold;">JANA KUMPULAN</button>
</div>
<div id="resultOutput" style="margin-top: 20px;"></div>
<hr style="margin: 20px 0;" />
<div style="background: #fff5f5; padding: 15px; border-radius: 10px; border: 1px dashed #ff4757; text-align: center;">
<div id="displayNama">Sedia?</div>
<button onclick="pickRandom()" style="background: #ff4757; color: white; padding: 10px 20px; border: none; border-radius: 30px; cursor: pointer; font-weight: bold;">🎲 CABUT NAMA</button>
</div>
</div>
<script>
function allowDrop(ev) { ev.preventDefault(); }
function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); }
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
var target = ev.target;
while (target && !target.classList.contains('drop-zone')) { target = target.parentElement; }
if (target) target.appendChild(document.getElementById(data));
}
function generateHybridTags() {
let input = document.getElementById('rawNames').value.trim();
if (!input) return;
let names = input.split('\n').filter(n => n.trim() !== "");
let pool = document.getElementById('namePool');
pool.innerHTML = "";
names.forEach((name, i) => {
let id = 'tag-' + i;
let tag = document.createElement('div');
tag.className = 'name-tag';
tag.id = id;
tag.draggable = true;
tag.ondragstart = drag;
tag.innerHTML = `<span>${name.trim()}</span>
<button class="btn-l" onclick="moveTo('maleZone', '${id}')">L</button>
<button class="btn-p" onclick="moveTo('femaleZone', '${id}')">P</button>`;
pool.appendChild(tag);
});
}
function moveTo(zoneId, tagId) {
document.getElementById(zoneId).appendChild(document.getElementById(tagId));
}
function agihHybrid() {
let nGroups = parseInt(document.getElementById('numGroups').value);
let m = Array.from(document.getElementById('maleZone').getElementsByClassName('name-tag')).map(t => t.querySelector('span').innerText);
let f = Array.from(document.getElementById('femaleZone').getElementsByClassName('name-tag')).map(t => t.querySelector('span').innerText);
let p = Array.from(document.getElementById('pool').getElementsByClassName('name-tag')).map(t => t.querySelector('span').innerText);
let all = [...m.map(n=>n+" [L]"), ...f.map(n=>n+" [P]"), ...p];
if (all.length === 0) { alert("Sila masukkan nama!"); return; }
let grps = Array.from({ length: nGroups }, () => []);
let shuff = (a) => a.sort(() => Math.random() - 0.5);
// Agih m & f dulu untuk balance, kemudian p (neutral)
m = shuff(m); f = shuff(f); p = shuff(p);
let balanced = [];
let max = Math.max(m.length, f.length);
for(let i=0; i<max; i++){
if(m[i]) balanced.push(m[i]+" [L]");
if(f[i]) balanced.push(f[i]+" [P]");
}
let finalPool = [...balanced, ...p];
finalPool.forEach((n, i) => grps[i % nGroups].push(n));
let res = "<h4>Hasil Agihan:</h4>";
grps.forEach((g, i) => {
res += `<div style="border-left:5px solid #1a73e8; background:#f4f4f4; padding:10px; margin-bottom:8px; border-radius:4px;">
<strong>KUMPULAN ${i+1}</strong><ol style="margin:5px 0; padding-left:20px;">${g.map(n => `<li>${n}</li>`).join('')}</ol></div>`;
});
document.getElementById('resultOutput').innerHTML = res;
}
function pickRandom() {
let input = document.getElementById('rawNames').value.trim();
if (!input) return;
let names = input.split('\n').filter(n => n.trim() !== "");
let display = document.getElementById('displayNama');
let star = "\u2B50";
let count = 0;
let shuffle = setInterval(() => {
display.innerText = names[Math.floor(Math.random() * names.length)];
count++;
if (count > 15) {
clearInterval(shuffle);
display.innerText = star + " " + names[Math.floor(Math.random() * names.length)] + " " + star;
}
}, 80);
}
</script>
<hr />
<div style="background: #f9f9f9; padding: 15px; border-radius: 10px; margin: 20px 0; font-size: 13px;">
<h3>FAQ & Cara Guna</h3>
<p>1. <b>Klik L/P:</b> Tekan butang biru (L) atau pink (P) di sebelah nama untuk pengasingan pantas.</p>
<p>2. <b>Abaikan Jantina:</b> Jika tidak mahu mengikut jantina, biarkan nama di kotak pertama dan terus tekan butang Jana.</p>
</div>
<div style="border: 1px solid #ddd; padding: 15px; border-radius: 10px; display: flex; align-items: center; gap: 15px;">
<div style="font-size: 24px;">🏷️</div>
<div style="flex: 1;">
<b>Stiker Nama Murid (Waterproof & Custom)</b><br/>
<a href="https://s.shopee.com.my/7VAAA6s3s3" target="_blank" style="color:#1a73e8; font-weight:bold; font-size:12px;">TEBUS BAUCAR & CARI DI SHOPEE</a>
</div>
</div>
<p style="font-size: 11px; color: #999; margin-top: 15px;"><b>Disclaimer:</b> Tool percuma disediakan oleh Layanlah untuk memudahkan urusan guru 2026. \u2B50</p>MeAdminhttp://www.blogger.com/profile/06871300420300644055noreply@blogger.com0tag:blogger.com,1999:blog-5341061453048343895.post-21822852860858762552026-01-14T13:49:00.019+08:002026-01-15T23:07:22.335+08:00Kalkulator Kenaikan Pangkat SSPA (Time-Based) – Unjuran Gred & Pencen Sahih<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-wBC1Vr_zsFvQnlRs1L7e7K0SDsu-HNOZX_FH1Cg-kimQGZBIkneMOcACb6UoIkCQa54Hne9ilBnboTibfZY6etcJ_GKHg8ZyJiKWbUDROSEoZjhD9uitkmKsN_h4zhqfF8I1y9FjneYxDS-7HZYjn1Hc9EdHRYrcptSAeCmubVK-bGSwotaYWZK8msM/s1100/1000001661.jpg">
<img alt="Kalkulator SSPA JPA Sahih" border="0" width="100%" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-wBC1Vr_zsFvQnlRs1L7e7K0SDsu-HNOZX_FH1Cg-kimQGZBIkneMOcACb6UoIkCQa54Hne9ilBnboTibfZY6etcJ_GKHg8ZyJiKWbUDROSEoZjhD9uitkmKsN_h4zhqfF8I1y9FjneYxDS-7HZYjn1Hc9EdHRYrcptSAeCmubVK-bGSwotaYWZK8msM/s640/1000001661.jpg"/>
</a>
</div>
<div class="seo-intro" style="margin-top: 25px; line-height: 1.8; color: #333; font-family: 'Segoe UI', sans-serif;">
<h1 style="color: #1a73e8; font-size: 26px;">Kalkulator Unjuran Kerjaya SSPA Berdasarkan Pekeliling JPA</h1>
<p>Aplikasi ini dibina berpandukan <b>Pekeliling Perkhidmatan Bilangan 1 Tahun 2024 (SSPA)</b> bagi memberikan gambaran tepat mengenai kronologi kenaikan pangkat penjawat awam. Sistem ini membezakan formula <i>Time-Based</i> mengikut skim perkhidmatan untuk memastikan hasil simulasi adalah sahih.</p>
<p>Sama ada anda dalam skim Pendidikan dengan formula <b>8-8-6-3</b> atau skim P&P/PTD dengan formula <b>10-8-6-3</b>, kalkulator ini akan menjana unjuran gred anda sehingga umur persaraan wajib 60 tahun.</p>
</div>
<style>
:root { --p: #1a73e8; --s: #5f6368; --bg: #f8f9fa; --white: #ffffff; --red: #d93025; --green: #1e8e3e; --shopee: #ee4d2d; }
.app-box { max-width: 850px; margin: 20px auto; background: var(--white); border-radius: 12px; box-shadow: 0 4px 30px rgba(0,0,0,0.1); padding: 30px; border: 1px solid #ddd; font-family: 'Segoe UI', Arial, sans-serif; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.form-grp { display: flex; flex-direction: column; }
label { font-weight: bold; font-size: 13px; margin-bottom: 8px; color: var(--s); text-transform: uppercase; }
input, select { padding: 12px; border: 2px solid #eee; border-radius: 8px; font-size: 15px; outline: none; transition: 0.3s; }
input:focus, select:focus { border-color: var(--p); background: #fff; }
.btn-container { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 25px; }
.btn { padding: 16px; border: none; border-radius: 8px; font-weight: bold; cursor: pointer; font-size: 15px; transition: 0.3s; display: flex; align-items: center; justify-content: center; gap: 8px; }
.btn-calc { background: var(--p); color: white; grid-column: span 2; box-shadow: 0 4px 0 #1557b0; }
.btn-pdf { background: var(--green); color: white; }
.btn-reset { background: #f1f3f4; color: var(--red); border: 1px solid #ddd; }
.result-table { width: 100%; border-collapse: collapse; margin-top: 30px; display: none; }
.result-table th { background: var(--p); color: white; padding: 15px; text-align: left; }
.result-table td { padding: 15px; border-bottom: 1px solid #eee; font-size: 14px; }
.highlight-pencen { background: #fff3cd; font-weight: bold; border-left: 5px solid #fbbc04; }
/* Style Kotak Shopee */
.aff-wrapper { max-width: 850px; margin: 30px auto; display: flex; flex-direction: column; gap: 15px; }
.aff-box { background: #ffffff; border-radius: 12px; border: 2px solid var(--shopee); padding: 20px; display: flex; align-items: center; gap: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.aff-img { width: 100px; height: 100px; background: #fff5f2; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 45px; }
.aff-content { flex: 1; text-align: left; }
.aff-title { font-weight: bold; color: #333; margin-bottom: 5px; font-size: 17px; }
.aff-desc { font-size: 13.5px; color: #666; margin-bottom: 12px; line-height: 1.5; }
.btn-shopee { background: var(--shopee); color: white !important; text-decoration: none !important; padding: 10px 22px; border-radius: 6px; font-weight: bold; font-size: 14px; display: inline-block; transition: 0.3s; border-bottom: 3px solid rgba(0,0,0,0.1); }
.btn-shopee:hover { transform: translateY(-2px); filter: brightness(1.1); }
@media (max-width: 600px) { .form-grid, .btn-container { grid-template-columns: 1fr; } .btn-calc { grid-column: span 1; } .aff-box { flex-direction: column; text-align: center; } }
</style>
<div class="app-box">
<div class="form-grid">
<div class="form-grp">
<label>Tahun Mula Berkhidmat:</label>
<input type="number" id="start_year" placeholder="Cth: 2024">
</div>
<div class="form-grp">
<label>Umur Mula Berkhidmat:</label>
<input type="number" id="start_age" placeholder="Cth: 24">
</div>
<div class="form-grp">
<label>Umur Persaraan:</label>
<select id="pencen_age">
<option value="60" selected>60 Tahun</option>
<option value="58">58 Tahun</option>
<option value="56">56 Tahun</option>
</select>
</div>
<div class="form-grp">
<label>Pilih Skim & Gred SSPA:</label>
<select id="start_gred">
<optgroup label="SKIM PENDIDIKAN (DG) - Formula 8863">
<option value="DG9">DG9 (Lantikan Gred 41)</option>
<option value="DG10">DG10 (Gred 44)</option>
<option value="DG11">DG11 (Gred 48)</option>
<option value="DG12">DG12 (Gred 52/54)</option>
</optgroup>
<optgroup label="SKIM P&P / PTD / LAIN (G) - Formula 10-8-6">
<option value="PP9">Gred 9 (Lantikan Gred 41)</option>
<option value="PP10">Gred 10 (Gred 44)</option>
<option value="PP11">Gred 11 (Gred 48)</option>
<option value="PP12">Gred 12 (Gred 52/54)</option>
</optgroup>
<optgroup label="PELAKSANA (DIPLOMA/SPM) - Formula 13 Thn">
<option value="EX4">Gred 4 (Lantikan Gred 29)</option>
<option value="EX1">Gred 1 (Lantikan Gred 19)</option>
</optgroup>
</select>
</div>
</div>
<button class="btn btn-calc" onclick="kiraKerjaya()">🔍 JANA SIMULASI KERJAYA SSPA</button>
<table class="result-table" id="table-kerjaya">
<thead>
<tr>
<th>Tahun</th>
<th>Umur</th>
<th>Gred SSPA</th>
<th>Catatan</th>
</tr>
</thead>
<tbody id="tbody-kerjaya"></tbody>
</table>
<div class="btn-container" id="extra-btns" style="display: none;">
<button class="btn btn-pdf" onclick="downloadPDF()">📄 MUAT TURUN PDF</button>
<button class="btn btn-reset" onclick="resetApp()">🔄 RESET</button>
</div>
</div>
<style>
.aff-wrapper { max-width: 800px; margin: 30px auto; display: flex; flex-direction: column; gap: 15px; border-top: 2px dashed #eee; padding-top: 25px; font-family: 'Segoe UI', sans-serif; }
.aff-box { background: #ffffff; border-radius: 12px; border: 1px solid #ddd; padding: 18px; display: flex; align-items: center; gap: 18px; transition: 0.3s; }
.aff-box:hover { border-color: #1a73e8; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.aff-img { font-size: 32px; width: 65px; height: 65px; background: #e8f0fe; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid #d2e3fc; }
.aff-content { flex: 1; text-align: left; }
.aff-title { font-weight: bold; color: #333; font-size: 16px; margin-bottom: 4px; line-height: 1.3; }
.aff-hint { font-size: 11px; color: #888; display: block; margin-top: 6px; line-height: 1.5; font-style: italic; }
.btn-shopee-jujur {
background: #fff;
color: #1a73e8 !important;
text-decoration: none !important;
padding: 9px 18px;
border-radius: 6px;
font-weight: bold;
font-size: 13px;
display: inline-block;
margin-top: 10px;
border: 2px solid #1a73e8;
transition: 0.3s;
}
.btn-shopee-jujur:hover { background: #1a73e8; color: #fff !important; }
@media (max-width: 500px) { .aff-box { flex-direction: column; text-align: center; } .aff-content { text-align: center; } }
</style>
<div class="aff-wrapper">
<p style="font-size: 14px; font-weight: bold; color: #444; text-align: left; margin: 0 0 5px 0;">Persediaan Gred Baru SSPA:</p>
<div class="aff-box">
<div class="aff-img">💻</div>
<div class="aff-content">
<div class="aff-title">Gajet Produktiviti Pejabat (Laptop & Tablet)</div>
<a href="https://s.shopee.com.my/7VAAA6s3s3" target="_blank" class="btn-shopee-jujur">🔍 CEK HARGA & PROMOSI</a>
<span class="aff-hint">
<b>Nota:</b> Pautan ini akan membawa anda ke Shopee. Sila cari <b>"Laptop Kerja"</b> atau <b>"Tablet Huawei"</b> untuk membantu tugas harian anda di gred baru SSPA nanti.
</span>
</div>
</div>
<div class="aff-box">
<div class="aff-img">👔</div>
<div class="aff-content">
<div class="aff-title">Pakaian & Aksesori Penjawat Awam Profesional</div>
<a href="https://s.shopee.com.my/7VAAA6s3s3" target="_blank" class="btn-shopee-jujur">🔍 LIHAT PILIHAN VIRAL</a>
<span class="aff-hint">
<b>Nota:</b> Selepas mendarat di aplikasi Shopee, anda boleh terus cari <b>"Kemeja Kerja Lelaki"</b> atau <b>"Beg Kerja Wanita"</b> untuk tampil lebih yakin selepas naik pangkat.
</span>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.29/jspdf.plugin.autotable.min.js"></script>
<script>
let currentTimeline = [];
function kiraKerjaya() {
const sYear = parseInt(document.getElementById('start_year').value);
const sAge = parseInt(document.getElementById('start_age').value);
const pAge = parseInt(document.getElementById('pencen_age').value);
const gKey = document.getElementById('start_gred').value;
if (!sYear || !sAge) { alert("Sila isi maklumat Tahun dan Umur!"); return; }
let curY = sYear;
let curA = sAge;
currentTimeline = [];
let rules = [];
if (gKey.startsWith("DG")) {
const dgRules = {
"DG9": [{g:'DG9', t:0}, {g:'DG10', t:8}, {g:'DG11', t:8}, {g:'DG12(52)', t:6}, {g:'DG12(54)', t:3}],
"DG10": [{g:'DG10', t:0}, {g:'DG11', t:8}, {g:'DG12(52)', t:6}, {g:'DG12(54)', t:3}],
"DG11": [{g:'DG11', t:0}, {g:'DG12(52)', t:6}, {g:'DG12(54)', t:3}],
"DG12": [{g:'DG12', t:0}]
};
rules = dgRules[gKey];
}
else if (gKey.startsWith("PP")) {
const ppRules = {
"PP9": [{g:'G9', t:0}, {g:'G10', t:10}, {g:'G11', t:8}, {g:'G12(52)', t:6}, {g:'G12(54)', t:3}],
"PP10": [{g:'G10', t:0}, {g:'G11', t:8}, {g:'G12(52)', t:6}, {g:'G12(54)', t:3}],
"PP11": [{g:'G11', t:0}, {g:'G12(52)', t:6}, {g:'G12(54)', t:3}],
"PP12": [{g:'G12', t:0}]
};
rules = ppRules[gKey];
}
else {
const exRules = {
"EX4": [{g:'G4', t:0}, {g:'G5', t:13}, {g:'G6', t:13}],
"EX1": [{g:'G1', t:0}, {g:'G2', t:13}, {g:'G3', t:13}]
};
rules = exRules[gKey];
}
const tbody = document.getElementById('tbody-kerjaya');
tbody.innerHTML = '';
rules.forEach((r, i) => {
curY += r.t; curA += r.t;
if (curA <= pAge) {
currentTimeline.push({ y: curY, a: curA, g: r.g, n: i === 0 ? "Lantikan/Semasa" : "Time-Based" });
const tr = document.createElement('tr');
tr.innerHTML = `<td>${curY}</td><td>${curA} Tahun</td><td><b>${r.g}</b></td><td>${i === 0 ? "Mula" : "TBBK"}</td>`;
tbody.appendChild(tr);
}
});
const finalY = sYear + (pAge - sAge);
const trP = document.createElement('tr');
trP.className = 'highlight-pencen';
trP.innerHTML = `<td>${finalY}</td><td>${pAge} Tahun</td><td>-</td><td>PERSARAAN WAJIB</td>`;
tbody.appendChild(trP);
document.getElementById('table-kerjaya').style.display = 'table';
document.getElementById('extra-btns').style.display = 'grid';
}
function resetApp() {
document.getElementById('start_year').value = '';
document.getElementById('start_age').value = '';
document.getElementById('table-kerjaya').style.display = 'none';
document.getElementById('extra-btns').style.display = 'none';
window.scrollTo({top: 0, behavior: 'smooth'});
}
function downloadPDF() {
const { jsPDF } = window.jspdf;
const doc = new jsPDF();
doc.setFontSize(18); doc.setTextColor(26, 115, 232);
doc.text("SIMULASI KERJAYA SSPA (SAHIH)", 105, 20, {align:'center'});
const pRows = currentTimeline.map(i => [i.y, i.a + " Tahun", i.g, i.n]);
const pAge = document.getElementById('pencen_age').value;
const finalY = parseInt(document.getElementById('start_year').value) + (pAge - document.getElementById('start_age').value);
pRows.push([finalY, pAge + " Tahun", "-", "PENCEN"]);
doc.autoTable({ startY: 35, head: [['Tahun', 'Umur', 'Gred SSPA', 'Catatan']], body: pRows, theme: 'striped' });
doc.save("Simulasi_SSPA_CikguDigital.pdf");
}
</script>
<div style="font-size: 11px; color: #777; margin-top: 30px; border-left: 4px solid #ccc; padding-left: 10px; font-family: sans-serif;">
<b>Disclaimer:</b> Aplikasi ini adalah simulasi rujukan berdasarkan Pekeliling SSPA 1/2024. Tarikh kenaikan pangkat sebenar adalah tertakluk kepada kelulusan Lembaga Kenaikan Pangkat agensi masing-masing.
</div>
MeAdminhttp://www.blogger.com/profile/06871300420300644055noreply@blogger.com0tag:blogger.com,1999:blog-5341061453048343895.post-6251807656954629612026-01-14T13:34:00.006+08:002026-01-15T23:05:40.489+08:00Kalkulator Kira Duit Tunai (RM) Automatik – Laporan PDF Sahih & Lengkap<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRitvA3t3WFJ97Si-eeqgN05dBXMoJ3xz8vMoJ9sYpcJITp7Cx4WOkPjkj2ZJqm_ngUHyE5Fmbq4i6OTyD5003yyrenp1bmJqNnxWxLNcFZzp28k37gsVGorFwJf9gRW0HfWXWUU9j5Oqq-G3r-UeO_K66wT4KddcqR5mR9c61aDoxKLLKnnwC2PVR6sk/s1100/1000001657.jpg" style="margin-left: 1em; margin-right: 1em;">
<img alt="Kalkulator Kira Duit Tunai RM Digital Apps Cikgu Digital" border="0" data-original-height="614" data-original-width="1100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRitvA3t3WFJ97Si-eeqgN05dBXMoJ3xz8vMoJ9sYpcJITp7Cx4WOkPjkj2ZJqm_ngUHyE5Fmbq4i6OTyD5003yyrenp1bmJqNnxWxLNcFZzp28k37gsVGorFwJf9gRW0HfWXWUU9j5Oqq-G3r-UeO_K66wT4KddcqR5mR9c61aDoxKLLKnnwC2PVR6sk/s640/1000001657.jpg" width="100%" />
</a>
</div>
<div class="seo-intro" style="color: #333333; font-family: "Segoe UI", Tahoma, sans-serif; line-height: 1.8; margin-top: 25px;">
<h1 style="color: #1a73e8; font-size: 24px;">Kalkulator Kira Duit Tunai RM (Versi Digital)</h1>
<p>Adakah anda sering merasa leceh untuk mengira timbunan wang tunai selepas tamat waktu perniagaan? Masalah silap kira atau lupa jumlah siri not adalah perkara biasa yang dihadapi oleh peniaga dan pengurus kewangan. Dengan <b>Kalkulator Kira Duit Tunai (RM)</b> ini, urusan merekod wang masuk kini menjadi lebih mudah, pantas, dan 100% tepat.</p>
<p>Aplikasi ini direka khusus untuk membantu anda mengira wang kertas RM50, RM20, RM10, RM5, RM1 serta syiling 50 sen, 20 sen, 10 sen dan 5 sen secara serentak. Yang paling menarik, anda boleh menjana laporan rasmi dalam format PDF untuk dijadikan bukti simpanan rekod atau lampiran bank tanpa perlu menulis manual!</p>
</div>
<hr style="border-bottom: 0px; border-image: initial; border-left: 0px; border-right: 0px; border-top: 1px solid rgb(238, 238, 238); border: 0; margin: 30px 0px;" />
<style>
:root { --p: #1a73e8; --g: #28a745; --bg: #f8f9fa; --dark: #202124; --red: #d93025; }
.app-container { max-width: 700px; margin: 0 auto; background: #fff; border-radius: 12px; box-shadow: 0 4px 25px rgba(0,0,0,0.1); padding: 25px; border: 1px solid #dadce0; font-family: 'Segoe UI', Arial, sans-serif; }
.money-grid { display: grid; gap: 10px; }
.row-item { display: flex; align-items: center; background: var(--bg); padding: 12px 18px; border-radius: 8px; gap: 15px; border: 1px solid #eee; }
.row-item label { flex: 1; font-weight: bold; color: var(--dark); font-size: 16px; }
.row-item input { width: 90px; padding: 10px; border: 2px solid #ddd; border-radius: 6px; text-align: center; font-size: 18px; font-weight: bold; outline: none; transition: 0.3s; }
.row-item input:focus { border-color: var(--p); background: #fff; }
.row-item .sub-total { flex: 1; text-align: right; font-weight: bold; color: var(--p); font-size: 16px; }
.result-box { margin-top: 25px; padding: 25px; background: #e8f0fe; border-radius: 12px; text-align: center; border: 2px dashed var(--p); }
.result-box h3 { margin: 0; font-size: 14px; color: #5f6368; text-transform: uppercase; letter-spacing: 1px; }
.result-box .grand-total { font-size: 36px; font-weight: bold; color: var(--g); margin-top: 5px; }
.btn-grp { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.btn-main { padding: 15px; border: none; border-radius: 8px; font-weight: bold; font-size: 15px; cursor: pointer; transition: 0.3s; }
.btn-pdf { background: var(--p); color: white; }
.btn-pdf:hover { background: #1557b0; }
.btn-reset { background: #f1f3f4; color: var(--red); border: 1px solid #ddd; }
.btn-reset:hover { background: #fee8e7; }
@media (max-width: 480px) { .row-item { padding: 10px; gap: 5px; } .row-item label { font-size: 14px; } .btn-grp { grid-template-columns: 1fr; } }
</style>
<div class="app-container">
<div class="money-grid" id="money-fields">
</div>
<div class="result-box">
<h3>Jumlah Tunai Keseluruhan</h3>
<div class="grand-total" id="display-total">RM 0.00</div>
</div>
<div class="btn-grp">
<button class="btn-main btn-pdf" onclick="downloadPDF()">📥 MUAT TURUN PDF</button>
<button class="btn-main btn-reset" onclick="resetApp()">🔄 RESET KIRAAN</button>
</div>
</div>
<div id="app-is-here"></div>
<div class="faq-section" style="background: rgb(255, 255, 255); border-radius: 10px; border: 1px solid rgb(238, 238, 238); margin-top: 40px; padding: 20px;">
<h3 style="border-bottom: 2px solid rgb(241, 243, 244); color: #1a73e8; padding-bottom: 10px;">FAQ - Soalan Lazim</h3>
<div style="margin-top: 15px;">
<p><b>1. Adakah aplikasi ini sesuai untuk peniaga kecil?</b><br />Sangat sesuai! Ia direka ringkas untuk kegunaan harian peniaga pasar malam, kedai runcit, dan juga individu yang ingin menguruskan tabung peribadi.</p>
<p><b>2. Bagaimana cara menyimpan hasil kiraan?</b><br />Klik butang "MUAT TURUN PDF". Sistem akan menjana satu dokumen lengkap yang menyenaraikan kuantiti setiap not dan jumlah besar untuk rujukan masa depan.</p>
<p><b>3. Adakah perkhidmatan ini percuma selamanya?</b><br />Ya, kami di <b>Apps Cikgu Digital</b> komited menyediakan alat bantu digital secara percuma untuk memudahkan urusan rakyat Malaysia.</p>
</div>
</div>
<div class="cta-box" style="background: rgb(230, 244, 234); border-radius: 8px; border: 1px solid rgb(52, 168, 83); margin-top: 30px; padding: 20px; text-align: center;">
<h4 style="color: #1e8e3e; margin: 0px;">Ada Cadangan Penambahbaikan?</h4>
<p>Kami sentiasa mengemaskini aplikasi mengikut keperluan pengguna. Jika ada denominasi atau fungsi tambahan yang anda perlukan, sila <b>tinggalkan komen di bawah!</b></p>
</div>
<style>
.aff-wrapper { max-width: 700px; margin: 30px auto; display: flex; flex-direction: column; gap: 15px; }
.aff-box { background: #ffffff; border-radius: 12px; border: 2px solid #ee4d2d; padding: 20px; display: flex; align-items: center; gap: 20px; font-family: 'Segoe UI', sans-serif; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.aff-img { width: 80px; height: 80px; background: #fff5f2; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 35px; }
.aff-content { flex: 1; text-align: left; }
.aff-title { font-weight: bold; color: #333; margin-bottom: 5px; font-size: 16px; }
.aff-desc { font-size: 13px; color: #666; margin-bottom: 12px; line-height: 1.4; }
.btn-shopee { background: #ee4d2d; color: white !important; text-decoration: none !important; padding: 8px 18px; border-radius: 6px; font-weight: bold; font-size: 13px; display: inline-block; transition: 0.3s; border-bottom: 3px solid rgba(0,0,0,0.1); }
.btn-shopee:hover { background: #d73211; transform: translateY(-2px); }
@media (max-width: 500px) { .aff-box { flex-direction: column; text-align: center; } }
</style>
<style>
.aff-wrapper { max-width: 700px; margin: 30px auto; display: flex; flex-direction: column; gap: 15px; border-top: 2px dashed #eee; padding-top: 25px; }
.aff-box { background: #ffffff; border-radius: 12px; border: 1px solid #ddd; padding: 18px; display: flex; align-items: center; gap: 18px; font-family: 'Segoe UI', sans-serif; transition: 0.3s; }
.aff-box:hover { border-color: #1a73e8; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.aff-img { font-size: 32px; width: 65px; height: 65px; background: #e8f0fe; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid #d2e3fc; }
.aff-content { flex: 1; text-align: left; }
.aff-title { font-weight: bold; color: #333; font-size: 16px; margin-bottom: 4px; line-height: 1.3; }
.aff-hint { font-size: 11px; color: #888; display: block; margin-top: 6px; line-height: 1.5; font-style: italic; }
.btn-shopee-jujur {
background: #fff;
color: #1a73e8 !important;
text-decoration: none !important;
padding: 9px 18px;
border-radius: 6px;
font-weight: bold;
font-size: 13px;
display: inline-block;
margin-top: 10px;
border: 2px solid #1a73e8;
transition: 0.3s;
}
.btn-shopee-jujur:hover { background: #1a73e8; color: #fff !important; }
@media (max-width: 500px) { .aff-box { flex-direction: column; text-align: center; } .aff-content { text-align: center; } }
</style>
<div class="aff-wrapper">
<p style="font-size: 14px; font-weight: bold; color: #444; text-align: left; margin: 0 0 5px 0;">Keperluan Pengurusan Tunai:</p>
<div class="aff-box">
<div class="aff-img">🔐</div>
<div class="aff-content">
<div class="aff-title">Peti Simpanan Wang (Cash Box)</div>
<a href="https://s.shopee.com.my/7VAAA6s3s3" target="_blank" class="btn-shopee-jujur">🔍 CEK HARGA & PILIHAN</a>
<span class="aff-hint">
<b>Nota:</b> Pautan ini akan membawa anda ke aplikasi Shopee. Sila taip <b>"Portable Cash Box"</b> di kotak carian untuk membandingkan harga dan melihat rating kedai terbaik.
</span>
</div>
</div>
<div class="aff-box">
<div class="aff-img">🏧</div>
<div class="aff-content">
<div class="aff-title">Mesin Kira Wang & Pengesan Duit Palsu</div>
<a href="https://s.shopee.com.my/7VAAA6s3s3" target="_blank" class="btn-shopee-jujur">🔍 LIHAT MODEL VIRAL</a>
<span class="aff-hint">
<b>Nota:</b> Selepas mendarat di Shopee, anda boleh terus cari <b>"Money Counter Machine"</b> untuk memudahkan urusan pengiraan tunai harian anda secara automatik.
</span>
</div>
</div>
</div>
<div style="background: rgb(250, 250, 250); border-radius: 5px; color: #777777; font-size: 12px; line-height: 1.5; margin-top: 40px; padding: 15px;">
<b>Disclaimer:</b> Aplikasi Kalkulator Kira Duit Tunai RM ini adalah alat rujukan pantas berdasarkan input manual pengguna. Kami tidak menyimpan sebarang data anda. Sila pastikan semakan fizikal dilakukan sebelum deposit bank. Pihak kami tidak bertanggungjawab atas ralat input pengguna.
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.29/jspdf.plugin.autotable.min.js"></script>
<script>
const dataDuit = [
{ id: 'rm50', label: 'Not RM 50', val: 50 },
{ id: 'rm20', label: 'Not RM 20', val: 20 },
{ id: 'rm10', label: 'Not RM 10', val: 10 },
{ id: 'rm5', label: 'Not RM 5', val: 5 },
{ id: 'rm1', label: 'Not RM 1', val: 1 },
{ id: 's50', label: '50 Sen', val: 0.50 },
{ id: 's20', label: '20 Sen', val: 0.20 },
{ id: 's10', label: '10 Sen', val: 0.10 },
{ id: 's5', label: '5 Sen', val: 0.05 }
];
function initApp() {
const container = document.getElementById('money-fields');
container.innerHTML = '';
dataDuit.forEach(item => {
const div = document.createElement('div');
div.className = 'row-item';
div.innerHTML = `
<label>${item.label}</label>
<input type="number" id="input-${item.id}" min="0" placeholder="0" oninput="hitung()">
<div class="sub-total" id="sub-${item.id}">RM 0.00</div>
`;
container.appendChild(div);
});
}
function hitung() {
let grandTotal = 0;
dataDuit.forEach(item => {
const qty = parseFloat(document.getElementById(`input-${item.id}`).value) || 0;
const sub = qty * item.val;
document.getElementById(`sub-${item.id}`).innerText = `RM ${sub.toFixed(2)}`;
grandTotal += sub;
});
document.getElementById('display-total').innerText = `RM ${grandTotal.toFixed(2)}`;
}
function resetApp() {
if(confirm("Padam semua kiraan dan mula baru?")) {
initApp();
document.getElementById('display-total').innerText = `RM 0.00`;
}
}
async function downloadPDF() {
const { jsPDF } = window.jspdf;
const doc = new jsPDF();
const totalText = document.getElementById('display-total').innerText;
doc.setFontSize(20);
doc.setTextColor(26, 115, 232);
doc.text("LAPORAN KIRAAN TUNAI RM", 105, 20, {align: 'center'});
doc.setFontSize(10);
doc.setTextColor(100);
doc.text("Tarikh Janaan: " + new Date().toLocaleString('ms-MY'), 105, 28, {align: 'center'});
const rows = [];
dataDuit.forEach(item => {
const qty = document.getElementById(`input-${item.id}`).value || 0;
const sub = (qty * item.val).toFixed(2);
if(qty > 0) rows.push([item.label, qty, "RM " + sub]);
});
if(rows.length === 0) {
alert("Sila masukkan sekurang-kurangnya satu nilai!");
return;
}
doc.autoTable({
startY: 40,
head: [['Jenis Wang', 'Kuantiti', 'Jumlah (RM)']],
body: rows,
theme: 'striped',
headStyles: { fillColor: [26, 115, 232] },
styles: { fontSize: 11 }
});
doc.setFontSize(14);
doc.setTextColor(40, 167, 69);
doc.text("JUMLAH BESAR: " + totalText, 14, doc.lastAutoTable.finalY + 15);
doc.setFontSize(9);
doc.setTextColor(150);
doc.text("Dijana melalui Blog Layanlah!!! - Kalkulator Kira Duit Tunai RM", 105, 285, {align: 'center'});
doc.save("Laporan_Kiraan_Tunai_" + new Date().toISOString().split('T')[0] + ".pdf");
}
window.onload = initApp;
</script>
MeAdminhttp://www.blogger.com/profile/06871300420300644055noreply@blogger.com0tag:blogger.com,1999:blog-5341061453048343895.post-33770439509917923972026-01-10T01:10:00.021+08:002026-01-15T23:04:06.923+08:00Semak Gred Simpanan Mengikut Umur & Gaji (Financial Reality Check)<style>
/* FORCE HIGH CONTRAST - ANTI TENGGELAM */
:root {
--gold: #ffd700 !important;
--white: #ffffff !important;
--bg: #020617 !important;
--card: #1e293b !important;
}
body { background: var(--bg); font-family: 'Segoe UI', sans-serif; color: var(--white) !important; }
.app-card { max-width: 800px; margin: 20px auto; background: var(--card); border-radius: 20px; border: 1px solid #334155; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.8); }
.intro-box { padding: 25px; text-align: center; border-bottom: 1px solid #334155; }
.intro-box h1 { color: var(--gold) !important; font-size: 24px; margin: 0; text-transform: uppercase; }
.intro-box p { color: var(--white) !important; font-size: 14px; margin-top: 10px; }
.main-content { padding: 25px; }
.form-box { background: #000; padding: 25px; border-radius: 15px; border: 1px solid #334155; }
label { color: var(--gold) !important; font-weight: bold; display: block; margin-top: 15px; text-transform: uppercase; font-size: 11px; letter-spacing: 1px; }
/* INPUT & SELECT STYLING */
input, select {
width: 100%; padding: 14px; background: #1e293b !important;
color: #ffffff !important; border: 1px solid #475569;
border-radius: 10px; margin-top: 5px; box-sizing: border-box; font-size: 16px;
}
select { cursor: pointer; appearance: none; background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>'); background-repeat: no-repeat; background-position: right 10px center; }
.btn-audit { width: 100%; padding: 20px; background: linear-gradient(45deg, #b8860b, #ffd700); color: #000 !important; border: none; border-radius: 12px; font-weight: 800; font-size: 18px; cursor: pointer; margin-top: 30px; text-transform: uppercase; transition: 0.3s; }
.btn-audit:hover { transform: translateY(-2px); filter: brightness(1.2); }
/* RESULT AREA */
#resultArea { display: none; margin-top: 35px; border-top: 1px solid #334155; padding-top: 25px; }
.res-card { background: #000; padding: 30px; border-radius: 20px; border: 2px solid var(--gold); text-align: center; }
.res-label { color: var(--gold) !important; font-weight: bold; font-size: 14px; text-transform: uppercase; }
.res-val { color: #ffffff !important; font-size: clamp(30px, 10vw, 50px); font-weight: 900; margin: 15px 0; display: block; }
.status-tag { display: inline-block; padding: 10px 20px; border-radius: 50px; font-weight: bold; color: #ffffff !important; margin-bottom: 20px; text-transform: uppercase; font-size: 12px; }
.tag-red { background: #ef4444 !important; }
.tag-green { background: #22c55e !important; }
.advice-box { background: #1e293b; padding: 20px; border-radius: 15px; border: 1px solid #475569; text-align: left; margin-top: 15px; }
.advice-box p { color: #ffffff !important; font-size: 15px; line-height: 1.6; margin: 0; }
.advice-box b { color: var(--gold) !important; }
/* INFO SECTION - BRIGHT TEXT */
.info-section { margin-top: 40px; border-top: 1px solid #334155; padding-top: 20px; }
.info-section h3 { color: var(--gold) !important; font-size: 16px; margin-bottom: 15px; }
.faq-q { color: var(--white) !important; font-weight: bold; font-size: 14px; display: block; margin-top: 15px; }
.faq-a { color: #cbd5e1 !important; font-size: 13px; display: block; margin-top: 5px; }
.wa-btn { display: block; text-align: center; background: #22c55e; color: #ffffff !important; padding: 18px; border-radius: 50px; text-decoration: none; font-weight: bold; margin-top: 25px; }
.disclaimer { font-size: 11px; color: #ffffff !important; text-align: center; padding: 20px; border: 1px dashed var(--gold); margin: 25px 0; opacity: 0.8; }
</style>
<div class="app-card">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi033kQ-aJyjo8VhPmXHysqACDd_NjaoEm9aRj09_zB2LG3yAB9b_VU7HTyuGrl9j4nptdamIfWjshZJsnhiAevK1v_3GLnSM9j21U9krrJbKYorr1wETksM8P9WhyCoZ0_k09HGVXa4lLlnaOAgyd2rZi_Bt0efvVcrUzvQuBR59XdWyUwfFOuCKj69F4/s1232/1000001626.jpg" style="width:100%;">
<div class="intro-box">
<h1>Audit Simpanan Pakar V1.8</h1>
<p>Semak realiti simpanan anda berdasarkan 15% gaji kasar seumur hidup.</p>
</div>
<div class="main-content">
<div class="form-box">
<label>Umur Sekarang:</label>
<input type="number" id="age" placeholder="Cth: 46">
<label>Tahun Mula Bekerja:</label>
<select id="startYear">
<option value="">-- Pilih Tahun --</option>
</select>
<label>Gaji Kasar Mula Kerja (RM):</label>
<input type="number" id="startSalary" placeholder="Cth: 1800">
<label>Gaji Kasar Sekarang (RM):</label>
<input type="number" id="currentSalary" placeholder="Cth: 9000">
<label>Jumlah Simpanan Tunai Sekarang (RM):</label>
<input type="number" id="currentSavings" placeholder="Bank / ASB / Tabung Haji">
<button class="btn-audit" onclick="auditPakar()">Audit Simpanan Saya</button>
</div>
<div id="resultArea">
<div class="res-card">
<span class="res-label">Sasaran Simpanan (Audit 15%):</span>
<span class="res-val" id="resTarget">RM 0.00</span>
<div id="resStatus" class="status-tag">-</div>
<div class="advice-box"><p id="resAdvice"></p></div>
</div>
<a href="#" class="wa-btn" onclick="shareWA()">📢 SHARE KE WHATSAPP</a>
</div>
<div class="info-section">
<h3>Soalan Lazim & Sumber</h3>
<span class="faq-q">S: Kenapa kena guna Gaji Kasar (Gross)?</span>
<span class="faq-a">A: Kerana simpanan 15% dikira sebagai "Self-Tax" sebelum ditolak sebarang komitmen lain.</span>
<span class="faq-q">S: Kenapa sasaran RM nampak tinggi?</span>
<span class="faq-a">A: Ini termasuk andaian dividen 5% setahun. Duit yang disimpan dan dilabur (ASB/TH) berkembang jauh lebih laju.</span>
<p style="font-size: 12px; margin-top: 20px; color: #ffd700 !important;"><b>Sumber:</b> Financial Planning Standards Board (15% Rule) & CAGR Salary Analysis.</p>
</div>
<style>
.aff-wrapper { max-width: 700px; margin: 30px auto; display: flex; flex-direction: column; gap: 15px; }
.aff-box { background: #ffffff; border-radius: 12px; border: 2px solid #ee4d2d; padding: 20px; display: flex; align-items: center; gap: 20px; font-family: 'Segoe UI', sans-serif; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.aff-img { width: 80px; height: 80px; background: #fff5f2; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 35px; }
.aff-content { flex: 1; text-align: left; }
.aff-title { font-weight: bold; color: #333; margin-bottom: 5px; font-size: 16px; }
.aff-desc { font-size: 13px; color: #666; margin-bottom: 12px; line-height: 1.4; }
.btn-shopee { background: #ee4d2d; color: white !important; text-decoration: none !important; padding: 8px 18px; border-radius: 6px; font-weight: bold; font-size: 13px; display: inline-block; transition: 0.3s; border-bottom: 3px solid rgba(0,0,0,0.1); }
.btn-shopee:hover { background: #d73211; transform: translateY(-2px); }
@media (max-width: 500px) { .aff-box { flex-direction: column; text-align: center; } }
</style>
<style>
.aff-wrapper { max-width: 700px; margin: 30px auto; display: flex; flex-direction: column; gap: 15px; border-top: 2px dashed #eee; padding-top: 25px; }
.aff-box { background: #ffffff; border-radius: 12px; border: 1px solid #ddd; padding: 18px; display: flex; align-items: center; gap: 18px; font-family: 'Segoe UI', sans-serif; transition: 0.3s; }
.aff-box:hover { border-color: #1a73e8; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.aff-img { font-size: 32px; width: 65px; height: 65px; background: #e8f0fe; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid #d2e3fc; }
.aff-content { flex: 1; text-align: left; }
.aff-title { font-weight: bold; color: #333; font-size: 16px; margin-bottom: 4px; line-height: 1.3; }
.aff-hint { font-size: 11px; color: #888; display: block; margin-top: 6px; line-height: 1.5; font-style: italic; }
.btn-shopee-jujur {
background: #fff;
color: #1a73e8 !important;
text-decoration: none !important;
padding: 9px 18px;
border-radius: 6px;
font-weight: bold;
font-size: 13px;
display: inline-block;
margin-top: 10px;
border: 2px solid #1a73e8;
transition: 0.3s;
}
.btn-shopee-jujur:hover { background: #1a73e8; color: #fff !important; }
@media (max-width: 500px) { .aff-box { flex-direction: column; text-align: center; } .aff-content { text-align: center; } }
</style>
<div class="aff-wrapper">
<p style="font-size: 14px; font-weight: bold; color: #444; text-align: left; margin: 0 0 5px 0;">Keperluan Pengurusan Tunai:</p>
<div class="aff-box">
<div class="aff-img">🔐</div>
<div class="aff-content">
<div class="aff-title">Peti Simpanan Wang (Cash Box)</div>
<a href="https://s.shopee.com.my/7VAAA6s3s3" target="_blank" class="btn-shopee-jujur">🔍 CEK HARGA & PILIHAN</a>
<span class="aff-hint">
<b>Nota:</b> Pautan ini akan membawa anda ke Shopee untuk melihat pelbagai model peti wang. Sila taip <b>"Portable Cash Box"</b> untuk membandingkan harga dan rating kedai terbaik.
</span>
</div>
</div>
<div class="aff-box">
<div class="aff-img">🏧</div>
<div class="aff-content">
<div class="aff-title">Mesin Kira Wang & Pengesan Duit Palsu</div>
<a href="https://s.shopee.com.my/7VAAA6s3s3" target="_blank" class="btn-shopee-jujur">🔍 LIHAT MODEL VIRAL</a>
<span class="aff-hint">
<b>Nota:</b> Selepas mendarat di aplikasi Shopee, anda boleh terus cari <b>"Money Counter Machine"</b> untuk memudahkan urusan pengiraan tunai harian anda secara automatik.
</span>
</div>
</div>
</div>
<div class="disclaimer">
<b>PENAFIAN:</b> Aplikasi ini adalah simulasi rujukan sahaja. Keputusan adalah berdasarkan input anda dan tidak menjamin angka sebenar di masa depan. Sila rujuk pakar kewangan berlesen.
</div>
</div>
</div>
<script>
// Jana senarai tahun dari 1970 hingga 2026
const select = document.getElementById('startYear');
const currentYear = new Date().getFullYear();
for (let year = currentYear; year >= 1970; year--) {
const option = document.createElement('option');
option.value = year;
option.text = year;
select.appendChild(option);
}
function auditPakar() {
const age = parseInt(document.getElementById('age').value);
const startYear = parseInt(document.getElementById('startYear').value);
const startSalary = parseFloat(document.getElementById('startSalary').value);
const currentSalary = parseFloat(document.getElementById('currentSalary').value);
const currentSavings = parseFloat(document.getElementById('currentSavings').value) || 0;
if (!age || !startYear || !startSalary || !currentSalary) {
alert("Sila lengkapkan semua maklumat audit!");
return;
}
const yearsWorked = currentYear - startYear;
if(yearsWorked <= 0) { alert("Tahun mula kerja mestilah sebelum tahun semasa."); return; }
const cagr = Math.pow((currentSalary / startSalary), (1 / yearsWorked)) - 1;
let cumulative = 0;
let yearlySalary = startSalary;
for (let i = 0; i <= yearsWorked; i++) {
let annualGross = yearlySalary * 12;
let annualSavings = annualGross * 0.15;
cumulative = (cumulative + annualSavings) * 1.05;
yearlySalary = yearlySalary * (1 + cagr);
}
const target = Math.round(cumulative);
document.getElementById('resTarget').innerText = "RM " + target.toLocaleString();
const statusBox = document.getElementById('resStatus');
let advice = "";
if (currentSavings >= target) {
statusBox.innerText = "STATUS: CEMERLANG";
statusBox.className = "status-tag tag-green";
advice = `<b>Tahniah!</b> Simpanan anda melebihi sasaran 15% gaji seumur hidup. Anda mempunyai disiplin kewangan yang sangat tinggi!`;
} else {
statusBox.innerText = "STATUS: DI BAWAH TANDA ARAS";
statusBox.className = "status-tag tag-red";
advice = `Berdasarkan sejarah gaji anda, anda sepatutnya sudah mengumpul <b>RM ${target.toLocaleString()}</b>. Simpanan anda masih kurang <b>RM ${Math.round(target - currentSavings).toLocaleString()}</b> untuk capai tahap ideal.`;
}
document.getElementById('resAdvice').innerHTML = advice;
document.getElementById('resultArea').style.display = 'block';
document.getElementById('resultArea').scrollIntoView({ behavior: 'smooth' });
}
function shareWA() {
const t = document.getElementById('resTarget').innerText;
const txt = "Saya baru buat Audit Simpanan Pakar. Mengikut sejarah gaji saya, saya patut ada simpanan RM " + t + "! Korang berani audit poket tak? Kat sini: " + window.location.href;
window.open("https://wa.me/?text=" + encodeURIComponent(txt), "_blank");
}
</script>
MeAdminhttp://www.blogger.com/profile/06871300420300644055noreply@blogger.com0tag:blogger.com,1999:blog-5341061453048343895.post-71553519764835969772026-01-10T00:46:00.013+08:002026-01-15T23:08:44.092+08:00Kalkulator EDD Malaysia: Kira Tarikh Bersalin & Checklist Kehamilan<head>
<title>Kalkulator EDD & Checklist Kehamilan Online Malaysia</title>
<meta content="Kira tarikh jangkaan bersalin (EDD) anda dengan tepat. Dapatkan checklist kehamilan mingguan, panduan buka buku pink, dan jadual scan bayi secara percuma!" name="description"></meta>
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "WebApplication",
"name": "Kalkulator EDD & Checklist Ibu Bijak",
"description": "Alat digital untuk mengira tarikh bersalin (EDD) dan checklist mingguan kehamilan di Malaysia.",
"applicationCategory": "HealthApplication",
"operatingSystem": "All",
"offers": { "@type": "Offer", "price": "0", "priceCurrency": "MYR" }
}
</script>
</head>
<style>
:root { --pink: #ff8a80; --soft-pink: #fce4ec; --teal: #4db6ac; --text: #455a64; --white: #ffffff; }
body { background: #fdf2f2; font-family: 'Segoe UI', sans-serif; margin: 0; padding: 10px; color: var(--text); }
.app-card { max-width: 800px; margin: 20px auto; background: var(--white); border-radius: 20px; box-shadow: 0 15px 35px rgba(255,138,128,0.2); overflow: hidden; border: 1px solid #f8bbd0; }
.hero-box img { width: 100%; display: block; border-bottom: 5px solid var(--pink); }
.intro-seo { padding: 25px; background: var(--soft-pink); text-align: center; border-bottom: 1px solid #f8bbd0; }
.intro-seo h1 { color: #d81b60; margin: 0; font-size: 24px; font-weight: 800; }
.intro-seo p { font-size: 14px; margin-top: 10px; color: #880e4f; line-height: 1.6; }
.main-content { padding: 25px; }
.input-grp { background: #fff8f8; padding: 20px; border-radius: 15px; border: 1px solid #fce4ec; margin-bottom: 25px; }
label { display: block; font-weight: bold; color: #d81b60; font-size: 13px; margin-bottom: 10px; text-transform: uppercase; }
input[type="date"] { width: 100%; padding: 12px; border: 2px solid #f8bbd0; border-radius: 10px; font-size: 16px; margin-bottom: 20px; box-sizing: border-box; }
.btn-kira { width: 100%; padding: 18px; background: var(--pink); color: white; border: none; border-radius: 12px; font-weight: bold; font-size: 18px; cursor: pointer; box-shadow: 0 4px 0 #e57373; transition: 0.2s; }
.btn-kira:active { transform: translateY(3px); box-shadow: none; }
/* AREA KEPUTUSAN */
#resultArea { display: none; margin-top: 30px; }
.edd-banner { background: linear-gradient(135deg, #ff8a80 0%, #ff5252 100%); color: white; padding: 25px; border-radius: 15px; text-align: center; margin-bottom: 20px; }
.edd-date { font-size: 32px; font-weight: 900; margin: 10px 0; }
.progress-container { background: #eee; border-radius: 20px; height: 30px; margin: 20px 0; position: relative; overflow: hidden; border: 1px solid #ddd; }
.progress-bar { background: var(--teal); height: 100%; width: 0%; transition: 1s; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: bold; color: white; }
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 25px; }
.stat-box { background: #fff0f3; padding: 15px; border-radius: 12px; text-align: center; border: 1px solid #f8bbd0; }
.stat-val { display: block; font-size: 20px; font-weight: bold; color: #d81b60; }
.stat-label { font-size: 11px; text-transform: uppercase; color: #880e4f; }
.checklist-section { background: #f0f4f8; padding: 20px; border-radius: 15px; border-left: 6px solid var(--teal); text-align: left; }
.checklist-title { font-weight: bold; color: #264653; margin-bottom: 15px; display: flex; align-items: center; gap: 8px; }
.check-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid #d1d9e0; font-size: 14px; color: #334155; }
.check-bullet { color: var(--teal); font-weight: bold; }
/* DISCLAIMER & CTA */
.disclaimer { font-size: 11px; color: #7f8c8d; margin-top: 30px; padding: 15px; background: #f9f9f9; border-radius: 8px; text-align: justify; border: 1px solid #eee; }
.cta-comment { margin-top: 30px; padding: 20px; background: #fffde7; border-radius: 12px; border: 1px dashed #fbc02d; text-align: center; }
.cta-comment p { font-weight: bold; color: #f57f17; margin-bottom: 10px; }
.share-wa { display: block; text-align: center; margin-top: 25px; background: #25d366; color: white; padding: 18px; border-radius: 50px; text-decoration: none; font-weight: bold; box-shadow: 0 4px 15px rgba(37,211,102,0.3); }
@media (max-width: 480px) { .stats-grid { grid-template-columns: 1fr; } .edd-date { font-size: 26px; } }
</style>
<div class="app-card">
<div class="hero-box">
<img alt="Kalkulator EDD Tarikh Bersalin Apps Ibu Bijak" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8LD-RPIUCc1eXkzLGXQ2eFK26QvRkFo2crE5dae_9GxLRaoSnLLCw-JhKfpbcE9UBmWlolR_SXdCNNm8AXq0uTZ7ABSAcsQ1JxhQRTqmn2uiJznnJ0zFzPJyEbDzRhQv1tbePlc-EyFbuQuw90m_DXSd_KbC4nXNawkMQOazMhtDg82gt9oRbiSATm5I/s1100/1000001622.jpg" />
</div>
<div class="intro-seo">
<h1>Kalkulator EDD & Checklist Ibu Hamil</h1>
<p>Tahniah buat bakal ibu! Gunakan aplikasi ini untuk mengira <b>Tarikh Jangkaan Bersalin (EDD)</b> anda dengan tepat berdasarkan hari terakhir haid (LMP). Dapatkan panduan checklist pemeriksaan KK dan tips kehamilan mingguan secara automatik.</p>
</div>
<div class="main-content">
<div class="input-grp">
<label>Tarikh Hari Pertama Haid Terakhir (LMP):</label>
<input id="lmpDate" type="date" />
<button class="btn-kira" onclick="kiraEDD()">KIRA TARIKH BERSALIN SAYA</button>
</div>
<div id="resultArea">
<div class="edd-banner">
<div style="font-size: 14px; opacity: 0.9;">Jangkaan Tarikh Bersalin (EDD):</div>
<div class="edd-date" id="outEDD">-</div>
<div id="outTrimester" style="font-size: 15px; font-weight: bold; letter-spacing: 1px;">-</div>
</div>
<div class="stats-grid">
<div class="stat-box"><span class="stat-val" id="outWeeks">-</span><span class="stat-label">Usia Kandungan</span></div>
<div class="stat-box"><span class="stat-val" id="outDaysLeft">-</span><span class="stat-label">Baki Hari Lagi</span></div>
</div>
<label style="text-align: center;">Progres Kehamilan (Baby Loading):</label>
<div class="progress-container">
<div class="progress-bar" id="pgBar">0%</div>
</div>
<div class="checklist-section">
<div class="checklist-title">📍 Checklist & Temujanji Penting:</div>
<div id="checklistContent"></div>
</div>
<a class="share-wa" href="#" onclick="shareWA()">KONGSI KE WHATSAPP STATUS</a>
<div class="cta-comment">
<p>Ibu di Trimester berapa sekarang? 😍</p>
<small>Kongsikan pengalaman atau sebarang soalan di ruangan komen di bawah untuk kita saling membantu!</small>
</div>
<style>
.aff-wrapper { max-width: 700px; margin: 30px auto; display: flex; flex-direction: column; gap: 15px; }
.aff-box { background: #ffffff; border-radius: 12px; border: 2px solid #ee4d2d; padding: 20px; display: flex; align-items: center; gap: 20px; font-family: 'Segoe UI', sans-serif; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.aff-img { width: 80px; height: 80px; background: #fff5f2; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 35px; }
.aff-content { flex: 1; text-align: left; }
.aff-title { font-weight: bold; color: #333; margin-bottom: 5px; font-size: 16px; }
.aff-desc { font-size: 13px; color: #666; margin-bottom: 12px; line-height: 1.4; }
.btn-shopee { background: #ee4d2d; color: white !important; text-decoration: none !important; padding: 8px 18px; border-radius: 6px; font-weight: bold; font-size: 13px; display: inline-block; transition: 0.3s; border-bottom: 3px solid rgba(0,0,0,0.1); }
.btn-shopee:hover { background: #d73211; transform: translateY(-2px); }
@media (max-width: 500px) { .aff-box { flex-direction: column; text-align: center; } }
</style>
<style>
.aff-wrapper { max-width: 700px; margin: 30px auto; display: flex; flex-direction: column; gap: 15px; border-top: 2px dashed #eee; padding-top: 25px; }
.aff-box { background: #fff; border-radius: 12px; border: 1px solid #ddd; padding: 15px; display: flex; align-items: center; gap: 15px; font-family: 'Segoe UI', sans-serif; }
.aff-img { font-size: 30px; width: 60px; height: 60px; background: #fff5f2; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid #ffebee; }
.aff-content { flex: 1; text-align: left; }
.aff-title { font-weight: bold; color: #333; font-size: 15px; margin-bottom: 2px; }
.aff-hint { font-size: 10px; color: #999; display: block; margin-top: 4px; line-height: 1.2; }
.btn-shopee-jujur {
background: #fff;
color: #f06292 !important;
text-decoration: none !important;
padding: 8px 15px;
border-radius: 5px;
font-weight: bold;
font-size: 12px;
display: inline-block;
margin-top: 8px;
border: 1px solid #f06292;
transition: 0.3s;
}
.btn-shopee-jujur:hover { background: #f06292; color: #fff !important; }
@media (max-width: 500px) { .aff-box { flex-direction: column; text-align: center; } }
</style>
<style>
.aff-wrapper { max-width: 700px; margin: 30px auto; display: flex; flex-direction: column; gap: 15px; border-top: 2px dashed #eee; padding-top: 25px; }
.aff-box { background: #ffffff; border-radius: 12px; border: 1px solid #ddd; padding: 18px; display: flex; align-items: center; gap: 18px; font-family: 'Segoe UI', sans-serif; }
.aff-img { font-size: 32px; width: 65px; height: 65px; background: #fff5f2; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid #ffebee; }
.aff-content { flex: 1; text-align: left; }
.aff-title { font-weight: bold; color: #333; font-size: 16px; margin-bottom: 4px; line-height: 1.3; }
.aff-hint { font-size: 11px; color: #888; display: block; margin-top: 6px; line-height: 1.5; font-style: italic; }
.btn-shopee-jujur {
background: #fff;
color: #f06292 !important;
text-decoration: none !important;
padding: 9px 18px;
border-radius: 6px;
font-weight: bold;
font-size: 13px;
display: inline-block;
margin-top: 10px;
border: 2px solid #f06292;
transition: 0.3s;
}
.btn-shopee-jujur:hover { background: #f06292; color: #fff !important; }
@media (max-width: 500px) { .aff-box { flex-direction: column; text-align: center; } .aff-content { text-align: center; } }
</style>
<style>
.aff-wrapper { max-width: 700px; margin: 30px auto; display: flex; flex-direction: column; gap: 15px; border-top: 2px dashed #eee; padding-top: 25px; font-family: 'Segoe UI', sans-serif; }
.aff-box { background: #ffffff; border-radius: 12px; border: 1px solid #ddd; padding: 18px; display: flex; align-items: center; gap: 18px; transition: 0.3s; }
.aff-box:hover { border-color: #f06292; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.aff-img { font-size: 32px; width: 65px; height: 65px; background: #fff5f2; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid #ffebee; }
.aff-content { flex: 1; text-align: left; }
.aff-title { font-weight: bold; color: #333; font-size: 16px; margin-bottom: 4px; line-height: 1.3; }
.aff-hint { font-size: 11px; color: #888; display: block; margin-top: 6px; line-height: 1.5; font-style: italic; }
.btn-shopee-jujur {
background: #fff;
color: #f06292 !important;
text-decoration: none !important;
padding: 9px 18px;
border-radius: 6px;
font-weight: bold;
font-size: 13px;
display: inline-block;
margin-top: 10px;
border: 2px solid #f06292;
transition: 0.3s;
}
.btn-shopee-jujur:hover { background: #f06292; color: #fff !important; }
@media (max-width: 500px) { .aff-box { flex-direction: column; text-align: center; } .aff-content { text-align: center; } }
</style>
<div class="aff-wrapper">
<p style="font-size: 14px; font-weight: bold; color: #444; text-align: left; margin: 0 0 5px 0;">Persediaan Menyambut Cahaya Mata:</p>
<div class="aff-box">
<div class="aff-img">👶</div>
<div class="aff-content">
<div class="aff-title">Set Lengkap Pakaian Bayi (Newborn Essentials)</div>
<a href="https://s.shopee.com.my/7VAAA6s3s3" target="_blank" class="btn-shopee-jujur">🔍 TEBUS BAUCAR & CARI</a>
<span class="aff-hint">
<b>Nota:</b> Pautan ini akan membawa anda ke Shopee untuk menebus baucar harian. Sila cari <b>"Baju Bayi Newborn"</b> untuk melihat pelbagai koleksi menarik dan selesa.
</span>
</div>
</div>
<div class="aff-box">
<div class="aff-img">👜</div>
<div class="aff-content">
<div class="aff-title">Beg Hospital Ibu (Keperluan Bersalin)</div>
<a href="https://s.shopee.com.my/7VAAA6s3s3" target="_blank" class="btn-shopee-jujur">🔍 TEBUS BAUCAR & CARI</a>
<span class="aff-hint">
<b>Nota:</b> Selepas mendarat di aplikasi Shopee, anda boleh terus cari <b>"Maternity Hospital Bag"</b> untuk mencari beg yang luas dan memudahkan urusan anda di hospital nanti.
</span>
</div>
</div>
</div>
<div class="disclaimer">
<b>PENAFIAN (DISCLAIMER):</b> Aplikasi ini dibina untuk tujuan maklumat dan rujukan am sahaja. Pengiraan Tarikh Jangkaan Bersalin (EDD) adalah berdasarkan formula standard (Naegele's Rule) dan mungkin berbeza dengan tarikh sebenar bersalin. Maklumat dalam checklist bukan pengganti nasihat perubatan profesional, diagnosis, atau rawatan. Sentiasa dapatkan nasihat doktor atau pakar kesihatan anda untuk sebarang kemusykilan mengenai kehamilan anda.
</div>
</div>
</div>
</div>
<script>
function kiraEDD() {
const lmpInput = document.getElementById('lmpDate').value;
if (!lmpInput) return alert("Sila pilih tarikh haid terakhir!");
const lmp = new Date(lmpInput);
let edd = new Date(lmp);
edd.setDate(edd.getDate() + 280);
const options = { day: 'numeric', month: 'long', year: 'numeric' };
document.getElementById('outEDD').innerText = edd.toLocaleDateString('ms-MY', options);
const today = new Date();
const diffDays = Math.floor(Math.abs(today - lmp) / (1000 * 60 * 60 * 24));
const weeks = Math.floor(diffDays / 7);
const days = diffDays % 7;
const daysLeft = Math.ceil((edd - today) / (1000 * 60 * 60 * 24));
document.getElementById('outWeeks').innerText = weeks + " Minggu " + days + " Hari";
document.getElementById('outDaysLeft').innerText = daysLeft > 0 ? daysLeft : 0;
let progress = Math.min(Math.round((diffDays / 280) * 100), 100);
document.getElementById('pgBar').style.width = progress + '%';
document.getElementById('pgBar').innerText = progress + '%';
let tri = (weeks < 13) ? "Trimester 1 (Awal)" : (weeks < 27) ? "Trimester 2 (Pertengahan)" : "Trimester 3 (Akhir)";
document.getElementById('outTrimester').innerText = tri.toUpperCase();
janaChecklist(weeks);
document.getElementById('resultArea').style.display = 'block';
document.getElementById('resultArea').scrollIntoView({ behavior: 'smooth' });
}
function janaChecklist(w) {
let list = [];
if (w >= 0) list.push("Mula ambil Asid Folik setiap hari.", "Sahkan kehamilan dengan UPT atau Klinik.");
if (w >= 8 && w <= 12) list.push("Masa terbaik 'Buka Buku Pink' di KK/Klinik Swasta.", "Ujian darah & kencing pertama.");
if (w >= 18 && w <= 22) list.push("Masa untuk 'Detail Scan' (Cek organ baby & jantina).");
if (w >= 24 && w <= 28) list.push("Ujian MGTT (Minum air gula) untuk kencing manis.");
if (w >= 28) list.push("Mula pantau 'Kick Count' (Gerakan bayi 10 kali sehari).");
if (w >= 36) list.push("Check posisi kepala baby & sediakan beg hospital.");
let html = "";
list.forEach(item => { html += `<div class="check-item"><span class="check-bullet">♥</span> ${item}</div>`; });
document.getElementById('checklistContent').innerHTML = html;
}
function shareWA() {
const edd = document.getElementById('outEDD').innerText;
const minggu = document.getElementById('outWeeks').innerText;
const txt = "Saya dah kira tarikh bersalin (EDD). Jangkaan pada " + edd + ". Sekarang dah " + minggu + ". Jom ibu-ibu kira EDD & tengok checklist di sini: " + window.location.href;
window.open("https://wa.me/?text=" + encodeURIComponent(txt), "_blank");
}
</script>
MeAdminhttp://www.blogger.com/profile/06871300420300644055noreply@blogger.com0tag:blogger.com,1999:blog-5341061453048343895.post-6889479349958521612026-01-10T00:19:00.008+08:002026-01-15T23:10:22.575+08:00Kalkulator Countdown Pencen Online: Kira Baki Hari Merdeka Anda!<head>
<title>Kalkulator Countdown Pencen Online Malaysia | Kira Detik Merdeka</title>
<meta name="description" content="Semak tarikh persaraan dan baki hari pencen anda secara live. Kalkulator detik pencen paling tepat untuk penjawat awam dan swasta di Malaysia. Percuma & pantas!">
<meta name="keywords" content="kalkulator pencen online, kira tarikh bersara, countdown pencen cikgu, baki hari kerja, persaraan malaysia 2026">
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "WebApplication",
"name": "Kalkulator Countdown Pencen Malaysia",
"description": "Aplikasi web untuk mengira baki hari, bulan, dan tahun menuju tarikh persaraan secara real-time.",
"applicationCategory": "LifeStyleApplication",
"operatingSystem": "All",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "MYR"
}
}
</script>
<meta property="og:title" content="Kalkulator Countdown Pencen Online Malaysia" />
<meta property="og:description" content="Kira baki hari 'Merdeka' anda dari alam pekerjaan sekarang!" />
<meta property="og:image" content="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_a2x0br6V5jy5XtjG_dgUjCc9o7kocYCYOqs_LfPmRjoKWkPqcB1zM72h_qey-9GoM7LO_F2CBqh1m0P31iD6_U2sU2wxAMWSP48tEEpJcTbGqN2n45eYVsvV94sFQcCTXZbt8Am2iNiRLNBrqqOrHmZC5YObr_wD1zPrG97hcusQUPn5ziHMMHc8GoU/s1100/1000001620.jpg" />
</head>
<style>
:root { --p: #01579b; --s: #ffa000; --bg: #f0f4f8; --white: #ffffff; --shopee: #ee4d2d; }
.app-card { max-width: 800px; margin: 20px auto; background: var(--white); border-radius: 15px; box-shadow: 0 10px 40px rgba(0,0,0,0.15); overflow: hidden; border: 1px solid #ddd; font-family: 'Segoe UI', sans-serif; }
.hero-box { width: 100%; border-bottom: 5px solid var(--s); overflow: hidden; }
.hero-box img { width: 100%; display: block; height: auto; }
.intro-section { padding: 25px; background: #e1f5fe; text-align: center; border-bottom: 1px solid #b3e5fc; line-height: 1.6; }
.intro-section h1 { color: var(--p); margin: 0; font-size: 22px; font-weight: 800; }
.intro-section p { margin-top: 10px; font-size: 14px; color: #444; }
.main-content { padding: 25px; }
.input-grp { background: #f9f9f9; padding: 20px; border-radius: 12px; border: 1px solid #eee; margin-bottom: 25px; }
label { display: block; font-weight: bold; color: var(--p); font-size: 13px; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
input, select { width: 100%; padding: 12px; border: 2px solid #cfd8dc; border-radius: 8px; font-size: 16px; margin-bottom: 15px; box-sizing: border-box; }
.btn-kira { width: 100%; padding: 16px; background: var(--p); color: white; border: none; border-radius: 10px; font-weight: bold; font-size: 18px; cursor: pointer; box-shadow: 0 5px 0 #013b69; transition: 0.2s; }
.btn-kira:active { transform: translateY(3px); box-shadow: none; }
#resultArea { display: none; margin-top: 30px; border-radius: 15px; overflow: hidden; box-shadow: 0 15px 30px rgba(1,87,155,0.25); }
.res-header { background: var(--p); color: white; padding: 25px; text-align: center; }
.res-body { background: #0277bd; color: white; padding: 30px 20px; text-align: center; }
.res-date { font-size: 26px; font-weight: bold; color: var(--s); margin-top: 10px; }
.output-box { background: rgba(255,255,255,0.1); border-radius: 15px; padding: 30px 15px; margin-bottom: 25px; border: 1px solid rgba(255,255,255,0.2); }
.total-label { font-size: 11px; text-transform: uppercase; letter-spacing: 2px; display: block; opacity: 0.9; }
.total-days { font-size: 55px; font-weight: 900; line-height: 1; display: block; margin: 15px 0; color: #fff; text-shadow: 2px 2px 5px rgba(0,0,0,0.4); }
.timer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; }
.timer-box { background: rgba(0,0,0,0.25); padding: 12px 5px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.15); }
.timer-val { display: block; font-size: 22px; font-weight: bold; color: var(--s); }
.timer-label { font-size: 10px; text-transform: uppercase; opacity: 0.8; letter-spacing: 1px; }
.share-btn { display: inline-block; margin-top: 30px; background: #25d366; color: white; padding: 16px 35px; border-radius: 50px; text-decoration: none; font-weight: bold; box-shadow: 0 5px 15px rgba(37,211,102,0.4); }
/* SHOPEE AFFILIATE BOX */
.aff-wrapper { margin-top: 30px; display: flex; flex-direction: column; gap: 15px; }
.aff-box { background: #fff; border-radius: 12px; border: 2px solid var(--shopee); padding: 15px; display: flex; align-items: center; gap: 15px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.aff-img { font-size: 40px; width: 70px; height: 70px; background: #fff5f2; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.aff-content { flex: 1; text-align: left; }
.aff-title { font-weight: bold; color: #333; font-size: 15px; }
.btn-shopee { background: var(--shopee); color: white !important; text-decoration: none !important; padding: 8px 15px; border-radius: 5px; font-weight: bold; font-size: 12px; display: inline-block; margin-top: 8px; }
/* FAQ & DISCLAIMER */
.faq-sec { margin-top: 40px; border-top: 1px solid #ddd; padding-top: 20px; text-align: left; }
.faq-sec h3 { color: var(--p); font-size: 18px; }
.disclaimer { font-size: 11px; color: #777; margin-top: 30px; border-left: 3px solid #ccc; padding-left: 10px; line-height: 1.4; text-align: left; }
.cta-box { background: #fff3cd; padding: 15px; border-radius: 8px; margin-top: 25px; font-weight: bold; color: #856404; font-size: 14px; }
@media (max-width: 480px) {
.total-days { font-size: 45px; }
.timer-val { font-size: 18px; }
.aff-box { flex-direction: column; text-align: center; }
}
</style>
<div class="app-card">
<div class="hero-box">
<img alt="Kalkulator Countdown Pencen Online Apps Cikgu Digital" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_a2x0br6V5jy5XtjG_dgUjCc9o7kocYCYOqs_LfPmRjoKWkPqcB1zM72h_qey-9GoM7LO_F2CBqh1m0P31iD6_U2sU2wxAMWSP48tEEpJcTbGqN2n45eYVsvV94sFQcCTXZbt8Am2iNiRLNBrqqOrHmZC5YObr_wD1zPrG97hcusQUPn5ziHMMHc8GoU/s1100/1000001620.jpg" />
</div>
<div class="intro-section">
<h1>Kalkulator Countdown Pencen Online</h1>
<p>Semak baki masa anda menuju hari persaraan dengan tepat. Masukkan tarikh lahir dan lihat detik kebebasan anda bermula hari ini!</p>
</div>
<div class="main-content">
<div class="input-grp">
<label>Masukkan Tarikh Lahir:</label>
<input type="date" id="birthDate">
<label>Pilihan Umur Bersara:</label>
<select id="retireAge" onchange="toggleManual()">
<option value="60">60 Tahun (Standard Malaysia)</option>
<option value="58">58 Tahun</option>
<option value="56">56 Tahun</option>
<option value="55">55 Tahun</option>
<option value="manual">PILIH SENDIRI (MANUAL)</option>
</select>
<div id="manualInput" style="display:none;">
<label>Taip Umur Pilihan (Cth: 40):</label>
<input type="number" id="customAge" placeholder="Masukkan umur persaraan idaman">
</div>
<button class="btn-kira" onclick="mulaKira()">HITUNG DETIK MERDEKA SAYA</button>
</div>
<div id="resultArea">
<div class="res-header">
<span class="total-label">Tarikh Rasmi Persaraan Anda:</span>
<div id="displayDate" class="res-date">-</div>
</div>
<div class="res-body">
<div class="output-box">
<span class="total-label">Baki Masa Menuju Kebebasan:</span>
<span id="outDaysOnly" class="total-days">0</span>
<span class="total-label">HARI LAGI</span>
</div>
<div class="timer-grid">
<div class="timer-box"><span class="timer-val" id="outY">0</span><span class="timer-label">Tahun</span></div>
<div class="timer-box"><span class="timer-val" id="outM">0</span><span class="timer-label">Bulan</span></div>
<div class="timer-box"><span class="timer-val" id="outD">0</span><span class="timer-label">Hari</span></div>
<div class="timer-box"><span class="timer-val" id="outH">00</span><span class="timer-label">Jam</span></div>
<div class="timer-box"><span class="timer-val" id="outMin">00</span><span class="timer-label">Minit</span></div>
<div class="timer-box"><span class="timer-val" id="outS">00</span><span class="timer-label">Saat</span></div>
</div>
<a href="#" class="share-btn" onclick="shareWA()">KONGSI KE WHATSAPP STATUS</a>
</div>
</div>
<style>
.aff-wrapper { margin-top: 30px; display: flex; flex-direction: column; gap: 15px; }
.aff-box { background: #fff; border-radius: 12px; border: 1px dashed #ccc; padding: 15px; display: flex; align-items: center; gap: 15px; position: relative; }
.aff-img { font-size: 35px; width: 60px; height: 60px; background: #f9f9f9; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.aff-content { flex: 1; text-align: left; }
.aff-title { font-weight: bold; color: #333; font-size: 15px; margin-bottom: 2px; }
.aff-tag { font-size: 10px; color: #ee4d2d; font-weight: bold; text-transform: uppercase; border: 1px solid #ee4d2d; padding: 2px 5px; border-radius: 3px; display: inline-block; margin-bottom: 8px; }
.btn-shopee-jujur {
background: #f5f5f5;
color: #555 !important;
text-decoration: none !important;
padding: 10px 15px;
border-radius: 6px;
font-weight: bold;
font-size: 13px;
display: inline-block;
margin-top: 5px;
border: 1px solid #ddd;
transition: 0.3s;
}
.btn-shopee-jujur:hover {
background: #ee4d2d;
color: white !important;
border-color: #ee4d2d;
}
.shopee-hint { font-size: 11px; color: #999; margin-top: 5px; display: block; }
</style>
<style>
.aff-wrapper { max-width: 800px; margin: 30px auto; display: flex; flex-direction: column; gap: 15px; border-top: 2px dashed #eee; padding-top: 25px; font-family: 'Segoe UI', sans-serif; }
.aff-box { background: #ffffff; border-radius: 12px; border: 1px solid #ddd; padding: 18px; display: flex; align-items: center; gap: 18px; transition: 0.3s; }
.aff-box:hover { border-color: #2e7d32; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.aff-img { font-size: 32px; width: 65px; height: 65px; background: #e8f5e9; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid #c8e6c9; }
.aff-content { flex: 1; text-align: left; }
.aff-title { font-weight: bold; color: #333; font-size: 16px; margin-bottom: 4px; line-height: 1.3; }
.aff-hint { font-size: 11px; color: #888; display: block; margin-top: 6px; line-height: 1.5; font-style: italic; }
.btn-shopee-jujur {
background: #fff;
color: #2e7d32 !important;
text-decoration: none !important;
padding: 9px 18px;
border-radius: 6px;
font-weight: bold;
font-size: 13px;
display: inline-block;
margin-top: 10px;
border: 2px solid #2e7d32;
transition: 0.3s;
}
.btn-shopee-jujur:hover { background: #2e7d32; color: #fff !important; }
@media (max-width: 500px) { .aff-box { flex-direction: column; text-align: center; } .aff-content { text-align: center; } }
</style>
<div class="aff-wrapper">
<p style="font-size: 14px; font-weight: bold; color: #444; text-align: left; margin: 0 0 5px 0;">Persediaan Menikmati Masa Persaraan:</p>
<div class="aff-box">
<div class="aff-img">🌱</div>
<div class="aff-content">
<div class="aff-title">Set Berkebun Lengkap (Hobi Masa Lapang)</div>
<a href="https://s.shopee.com.my/7VAAA6s3s3" target="_blank" class="btn-shopee-jujur">🔍 TEBUS BAUCAR & CARI</a>
<span class="aff-hint">
<b>Nota:</b> Pautan ini akan membawa anda ke aplikasi Shopee. Sila cari <b>"Set Kebun Hidroponik"</b> atau <b>"Peralatan Berkebun"</b> untuk mengisi masa lapang dengan aktiviti bermanfaat selepas pencen nanti.
</span>
</div>
</div>
<div class="aff-box">
<div class="aff-img">💰</div>
<div class="aff-content">
<div class="aff-title">Buku Rujukan Pelaburan Emas & Kewangan</div>
<a href="https://s.shopee.com.my/7VAAA6s3s3" target="_blank" class="btn-shopee-jujur">🔍 TEBUS BAUCAR & CARI</a>
<span class="aff-hint">
<b>Nota:</b> Selepas mendarat di Shopee, anda boleh terus cari <b>"Buku Pelaburan Emas"</b> untuk mempelajari cara menguruskan wang gratuiti dan pencen anda dengan lebih bijak.
</span>
</div>
</div>
</div>
<div class="cta-box">
Ingin tahu berapa kenaikan gaji SSPA anda? <a href="https://layanlah.blogspot.com/2026/01/kalkulator-kenaikan-pangkat-sspa-rasmi.html" style="color: #01579b;">Klik sini untuk Kalkulator SSPA</a>
</div>
<div class="faq-sec">
<h3>FAQ - Soalan Lazim</h3>
<p><b>1. Adakah tarikh ini rasmi?</b><br>Kiraan ini berdasarkan hari lahir anda yang ke-60 (atau umur pilihan). Tarikh sebenar tertakluk kepada rekod HRMIS jabatan anda.</p>
<p><b>2. Bolehkah saya kira untuk pencen awal?</b><br>Ya, gunakan pilihan "Manual" dan masukkan umur persaraan pilihan anda.</p>
</div>
<div class="disclaimer">
<b>Disclaimer:</b> Kalkulator Countdown Pencen ini adalah alat bantuan simulasi sahaja. Pihak kami tidak bertanggungjawab atas ralat kiraan. Sila rujuk pekeliling JPA terkini untuk urusan persaraan rasmi.
</div>
</div>
</div>
<script>
let timer;
function toggleManual() { document.getElementById('manualInput').style.display = (document.getElementById('retireAge').value === 'manual') ? 'block' : 'none'; }
function mulaKira() {
const b = document.getElementById('birthDate').value;
if (!b) return alert("Sila masukkan tarikh lahir!");
let age = document.getElementById('retireAge').value;
if(age === 'manual') age = document.getElementById('customAge').value;
if(!age) return alert("Sila taip umur persaraan anda!");
const bDate = new Date(b);
const rDate = new Date(bDate);
rDate.setFullYear(bDate.getFullYear() + parseInt(age));
document.getElementById('displayDate').innerText = rDate.toLocaleDateString('ms-MY', {day:'numeric', month:'long', year:'numeric'});
document.getElementById('resultArea').style.display = 'block';
document.getElementById('resultArea').scrollIntoView({behavior:'smooth'});
if(timer) clearInterval(timer);
update(rDate);
timer = setInterval(() => update(rDate), 1000);
}
function update(target) {
const now = new Date();
const diff = target - now;
if (diff < 0) { document.querySelector('.res-body').innerHTML = "<h2>SELAMAT BERSARA!</h2>"; clearInterval(timer); return; }
document.getElementById('outDaysOnly').innerText = Math.floor(diff / (1000 * 60 * 60 * 24)).toLocaleString();
let y = target.getFullYear() - now.getFullYear();
let m = target.getMonth() - now.getMonth();
let d = target.getDate() - now.getDate();
if (d < 0) { m--; d += new Date(target.getFullYear(), target.getMonth(), 0).getDate(); }
if (m < 0) { y--; m += 12; }
document.getElementById('outY').innerText = y;
document.getElementById('outM').innerText = m;
document.getElementById('outD').innerText = d;
document.getElementById('outH').innerText = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)).toString().padStart(2, '0');
document.getElementById('outMin').innerText = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)).toString().padStart(2, '0');
document.getElementById('outS').innerText = Math.floor((diff % (1000 * 60)) / 1000).toString().padStart(2, '0');
}
function shareWA() {
const h = document.getElementById('outDaysOnly').innerText;
const t = document.getElementById('displayDate').innerText;
const txt = "Baki hari pencen saya tinggal " + h + " HARI lagi. Tarikh persaraan saya pada " + t + ". Tak sabar nak santai kat pantai! Jom kira detik pencen anda di sini: " + window.location.href;
window.open("https://wa.me/?text=" + encodeURIComponent(txt), "_blank");
}
</script>MeAdminhttp://www.blogger.com/profile/06871300420300644055noreply@blogger.com0tag:blogger.com,1999:blog-5341061453048343895.post-67643325365639946382026-01-09T23:44:00.008+08:002026-01-15T23:11:36.964+08:00Generator Slip Gaji Online Percuma (SOP Malaysia) | Siap PDF 1 Minit<head>
<title>Generator Slip Gaji Online Percuma (SOP Malaysia) | Siap PDF 1 Minit</title>
<meta name="description" content="Bina slip gaji pekerja profesional secara percuma. Pengiraan automatik KWSP (11%), PERKESO & EIS. Lengkap dengan fungsi potongan advance & OT. Muat turun PDF segera!">
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "WebApplication",
"name": "Generator Slip Gaji Online Malaysia",
"url": "https://bloganda.com",
"description": "Alat digital percuma untuk menjana slip gaji pekerja dengan pengiraan statutori automatik mengikut kadar Malaysia.",
"applicationCategory": "BusinessApplication",
"operatingSystem": "All",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "MYR"
}
}
</script>
</head>
<style>
:root { --p: #1b5e20; --s: #4a4a4a; --bg: #f5f5f5; --gold: #d4af37; --red: #c0392b; }
body { background: var(--bg); font-family: 'Segoe UI', sans-serif; margin: 0; color: #333; }
.app-card { max-width: 1000px; margin: 20px auto; background: white; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.2); overflow: hidden; border: 1px solid #ddd; }
/* SEO HERO IMAGE */
.hero-box { width: 100%; border-bottom: 5px solid var(--gold); overflow: hidden; }
.hero-box img { width: 100%; display: block; height: auto; }
.intro-seo { padding: 25px; background: #e8f5e9; border-bottom: 1px solid #c8e6c9; line-height: 1.6; }
.intro-seo h1 { color: var(--p); margin: 0 0 10px 0; font-size: 24px; text-align: center; }
.intro-seo p { margin: 0; font-size: 14px; color: #444; text-align: justify; }
.main-content { padding: 25px; }
.row { display: flex; flex-wrap: wrap; gap: 20px; }
.col { flex: 1; min-width: 310px; }
/* UI FORM */
.grp-box { background: #fff; border: 1px solid #eee; padding: 15px; border-radius: 8px; margin-bottom: 15px; border-left: 5px solid var(--p); }
.grp-title { font-weight: bold; color: var(--p); margin-bottom: 12px; font-size: 13px; text-transform: uppercase; border-bottom: 1px solid #eee; padding-bottom: 5px; }
label { display: block; font-weight: bold; font-size: 11px; color: #555; margin-bottom: 3px; }
input, select { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; font-size: 14px; box-sizing: border-box; margin-bottom: 8px; }
.caps { text-transform: uppercase; }
.dynamic-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: flex-start; }
.btn-del { background: var(--red); color: white; border: none; padding: 10px; border-radius: 5px; cursor: pointer; font-weight: bold; }
.btn-add { background: var(--p); color: white; border: none; padding: 10px; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: bold; width: 100%; margin-bottom: 15px; }
.result-box { background: #f9f9f9; padding: 20px; border-radius: 10px; border: 2px dashed var(--p); }
.res-row { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 5px; }
.res-total { border-top: 2px solid var(--p); padding-top: 10px; font-weight: bold; color: var(--p); font-size: 22px; }
.btn-pdf { width: 100%; padding: 18px; border: none; background: var(--red); color: white; font-weight: bold; border-radius: 10px; font-size: 18px; cursor: pointer; margin-top: 20px; box-shadow: 0 4px 0 #922b21; }
.btn-pdf:hover { background: #e74c3c; transform: translateY(-2px); }
.manual-name { background: #fffde7 !important; border: 1px solid #ffd600 !important; font-size: 12px !important; margin-top: 5px; }
.cta-wa { background: #25d366; color: white; text-align: center; padding: 12px; border-radius: 8px; text-decoration: none; display: block; margin-top: 15px; font-weight: bold; font-size: 14px; }
@media (max-width: 600px) { .row { flex-direction: column; } }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.29/jspdf.plugin.autotable.min.js"></script>
<div class="app-card">
<div class="hero-box">
<img alt="Generator Slip Gaji Digital Apps Cikgu Digital Malaysia" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfQHemPIwh97kQkEnWW86YepDq1lVTZltLpzTDlSRgg4VCQNK8MMgy4nz3Fw9wEu0YTdFahcSGkPctTDPoXzL8DqddiDD0_eJ6lv8GkScX0V26plZ_SfrJBpVZHpz2AR8heElyrRcDW53lgiEOTzQmj1GP9GeLo48wbp6mJXDhvVsWzlroeqWoYfWrv_0/s1100/1000001612.jpg" />
</div>
<div class="intro-seo">
<h1>Generator Slip Gaji Online Percuma</h1>
<p>Bina slip gaji profesional untuk pekerja syarikat anda dengan <b>Penyata Gaji Digital</b>. Sistem kami menyediakan pengiraan automatik untuk caruman KWSP, PERKESO, dan SIP (EIS) mengikut kadar semasa di Malaysia. Anda juga boleh menambah kategori pendapatan (OT/Elaun) dan potongan (Advance/Pinjaman) secara dinamik. Percuma dan siap dalam 1 minit!</p>
</div>
<div class="main-content">
<div class="row">
<div class="col">
<div class="grp-box">
<div class="grp-title">1. Butiran Majikan & Pekerja</div>
<label>NAMA SYARIKAT / MAJIKAN:</label>
<input type="text" id="m_sykt" class="caps" placeholder="Cth: RESTORAN MAJU JAYA">
<label>NAMA PENUH PEKERJA:</label>
<input type="text" id="p_nama" class="caps" placeholder="Cth: AHMAD BIN ALI">
<label>BULAN GAJI:</label>
<input type="month" id="g_bulan" onchange="kiraSemua()">
</div>
<div class="grp-box" style="border-left-color: var(--gold);">
<div class="grp-title">2. Pendapatan (Earnings)</div>
<label>GAJI POKOK (BASIC):</label>
<input type="number" id="v_basic" value="0.00" onclick="this.select()" oninput="kiraSemua()">
<div id="earnContainer"></div>
<button type="button" class="btn-add" onclick="tambahBaris('earnContainer', 'earn')">+ TAMBAH PENDAPATAN (OT/ELAUN)</button>
</div>
</div>
<div class="col">
<div class="grp-box" style="border-left-color: var(--red);">
<div class="grp-title">3. Potongan (Deductions)</div>
<div class="res-row"><span>KWSP (EPF) 11%:</span><span id="out_epf">RM 0.00</span></div>
<div class="res-row"><span>PERKESO (SOCSO):</span><span id="out_socso">RM 0.00</span></div>
<div class="res-row"><span>SIP (EIS):</span><span id="out_eis">RM 0.00</span></div>
<div id="deductContainer" style="margin-top:10px; border-top:1px solid #eee; padding-top:10px;"></div>
<button type="button" class="btn-add" style="background:var(--red)" onclick="tambahBaris('deductContainer', 'ded')">+ TAMBAH POTONGAN (ADVANCE/PINJAMAN)</button>
</div>
<div class="result-box">
<div class="res-row"><span>Gaji Kasar (Gross):</span><span id="out_gross">RM 0.00</span></div>
<div class="res-row"><span>Jumlah Potongan:</span><span id="out_deduct">RM 0.00</span></div>
<div class="res-row res-total">
<span>GAJI BERSIH:</span>
<span id="out_net">RM 0.00</span>
</div>
</div>
</div>
</div>
<button class="btn-pdf" onclick="janaPDF()">📥 MUAT TURUN PDF SLIP GAJI</button>
<a href="#" class="cta-wa" onclick="shareWA()">📢 KONGSI APPS INI DI WHATSAPP</a>
</div>
</div>
<style>
.aff-wrapper { max-width: 800px; margin: 30px auto; display: flex; flex-direction: column; gap: 15px; border-top: 2px dashed #eee; padding-top: 25px; font-family: 'Segoe UI', sans-serif; }
.aff-box { background: #ffffff; border-radius: 12px; border: 1px solid #ddd; padding: 18px; display: flex; align-items: center; gap: 18px; transition: 0.3s; }
.aff-box:hover { border-color: #1a73e8; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.aff-img { font-size: 32px; width: 65px; height: 65px; background: #e8f0fe; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid #d2e3fc; }
.aff-content { flex: 1; text-align: left; }
.aff-title { font-weight: bold; color: #333; font-size: 16px; margin-bottom: 4px; line-height: 1.3; }
.aff-hint { font-size: 11px; color: #888; display: block; margin-top: 6px; line-height: 1.5; font-style: italic; }
.btn-shopee-jujur {
background: #fff;
color: #1a73e8 !important;
text-decoration: none !important;
padding: 9px 18px;
border-radius: 6px;
font-weight: bold;
font-size: 13px;
display: inline-block;
margin-top: 10px;
border: 2px solid #1a73e8;
transition: 0.3s;
}
.btn-shopee-jujur:hover { background: #1a73e8; color: #fff !important; }
@media (max-width: 500px) { .aff-box { flex-direction: column; text-align: center; } .aff-content { text-align: center; } }
</style>
<div class="aff-wrapper">
<p style="font-size: 14px; font-weight: bold; color: #444; text-align: left; margin: 0 0 5px 0;">Keperluan Pengurusan Pejabat & Rekod:</p>
<div class="aff-box">
<div class="aff-img">🖨️</div>
<div class="aff-content">
<div class="aff-title">Pencetak (Printer) & Pengimbas Dokumen</div>
<a href="https://s.shopee.com.my/7VAAA6s3s3" target="_blank" class="btn-shopee-jujur">🔍 TEBUS BAUCAR & CARI</a>
<span class="aff-hint">
<b>Nota:</b> Pautan ini akan membawa anda ke Shopee untuk menebus baucar. Sila cari <b>"Wireless Printer"</b> untuk memudahkan urusan mencetak slip gaji dan dokumen pejabat anda.
</span>
</div>
</div>
<div class="aff-box">
<div class="aff-img">📁</div>
<div class="aff-content">
<div class="aff-title">Sistem Fail & Storan Dokumen Sistematik</div>
<a href="https://s.shopee.com.my/7VAAA6s3s3" target="_blank" class="btn-shopee-jujur">🔍 TEBUS BAUCAR & CARI</a>
<span class="aff-hint">
<b>Nota:</b> Selepas mendarat di aplikasi Shopee, anda boleh terus cari <b>"Document Organizer File"</b> bagi memastikan rekod gaji pekerja anda tersimpan dengan rapi dan selamat.
</span>
</div>
</div>
</div>
<script>
// Set Default Month
document.getElementById('g_bulan').value = new Date().toISOString().substring(0, 7);
// FUNGSI TAMBAH BARIS
function tambahBaris(containerId, jenis) {
const container = document.getElementById(containerId);
const row = document.createElement('div');
row.className = 'dynamic-row';
const opts = jenis === 'earn'
? ['OT (OVERTIME)', 'BONUS', 'KOMISYEN', 'ELAUN', 'LAIN-LAIN (MANUAL)']
: ['ADVANCE GAJI', 'CUTI TANPA GAJI', 'PINJAMAN', 'DENDA', 'ZAKAT', 'LAIN-LAIN (MANUAL)'];
let optionsHtml = '';
opts.forEach(opt => optionsHtml += `<option value="${opt}">${opt}</option>`);
row.innerHTML = `
<div style="flex:2">
<select class="row-type" onchange="tunjukManual(this); kiraSemua()">
${optionsHtml}
</select>
<input type="text" class="manual-name caps" placeholder="Taip kategori..." style="display:none">
</div>
<div style="flex:1">
<input type="number" class="row-val" value="0.00" onclick="this.select()" oninput="kiraSemua()">
</div>
<button class="btn-del" onclick="this.parentElement.remove(); kiraSemua()">X</button>
`;
container.appendChild(row);
kiraSemua();
}
function tunjukManual(sel) {
const input = sel.parentElement.querySelector('.manual-name');
input.style.display = (sel.value.includes('MANUAL')) ? 'block' : 'none';
}
function kiraSemua() {
const basic = parseFloat(document.getElementById('v_basic').value) || 0;
// Pengiraan Standard Malaysia
const epf = basic * 0.11;
const socso = basic > 0 ? Math.min(basic * 0.005, 19.75) : 0;
const eis = basic > 0 ? Math.min(basic * 0.002, 7.90) : 0;
let extraEarn = 0;
document.querySelectorAll('#earnContainer .dynamic-row').forEach(r => {
extraEarn += parseFloat(r.querySelector('.row-val').value) || 0;
});
let extraDed = 0;
document.querySelectorAll('#deductContainer .dynamic-row').forEach(r => {
extraDed += parseFloat(r.querySelector('.row-val').value) || 0;
});
const gross = basic + extraEarn;
const totalDed = epf + socso + eis + extraDed;
const net = gross - totalDed;
document.getElementById('out_epf').innerText = `RM ${epf.toFixed(2)}`;
document.getElementById('out_socso').innerText = `RM ${socso.toFixed(2)}`;
document.getElementById('out_eis').innerText = `RM ${eis.toFixed(2)}`;
document.getElementById('out_gross').innerText = `RM ${gross.toFixed(2)}`;
document.getElementById('out_deduct').innerText = `RM ${totalDed.toFixed(2)}`;
document.getElementById('out_net').innerText = `RM ${net.toFixed(2)}`;
}
function janaPDF() {
const { jsPDF } = window.jspdf;
const doc = new jsPDF();
const sykt = document.getElementById('m_sykt').value.toUpperCase() || "MAJIKAN MARHAEN";
const nama = document.getElementById('p_nama').value.toUpperCase() || "NAMA PEKERJA";
const bRaw = document.getElementById('g_bulan').value;
const dObj = new Date(bRaw);
const bStr = `${dObj.toLocaleString('default', { month: 'long' }).toUpperCase()} ${dObj.getFullYear()}`;
// Header PDF
doc.setFont("helvetica", "bold"); doc.setFontSize(18); doc.setTextColor(27, 94, 32);
doc.text("PENYATA GAJI PEKERJA", 105, 20, {align: "center"});
doc.setFontSize(10); doc.setTextColor(0);
doc.text(sykt, 105, 27, {align: "center"});
doc.line(20, 32, 190, 32);
doc.setFont("helvetica", "normal");
doc.text(`NAMA PEKERJA: ${nama}`, 20, 42);
doc.text(`BULAN: ${bStr}`, 190, 42, {align: "right"});
// Table Body Construction
const eData = [['GAJI POKOK (BASIC)', (parseFloat(document.getElementById('v_basic').value)||0).toFixed(2)]];
document.querySelectorAll('#earnContainer .dynamic-row').forEach(r => {
let L = r.querySelector('.row-type').value;
if(L.includes('MANUAL')) L = r.querySelector('.manual-name').value || "PENDAPATAN LAIN";
eData.push([L, (parseFloat(r.querySelector('.row-val').value)||0).toFixed(2)]);
});
const dData = [
['KWSP (11%)', (parseFloat(document.getElementById('out_epf').innerText.replace('RM ',''))).toFixed(2)],
['PERKESO (SOCSO)', (parseFloat(document.getElementById('out_socso').innerText.replace('RM ',''))).toFixed(2)],
['SIP (EIS)', (parseFloat(document.getElementById('out_eis').innerText.replace('RM ',''))).toFixed(2)]
];
document.querySelectorAll('#deductContainer .dynamic-row').forEach(r => {
let L = r.querySelector('.row-type').value;
if(L.includes('MANUAL')) L = r.querySelector('.manual-name').value || "POTONGAN LAIN";
dData.push([L, (parseFloat(r.querySelector('.row-val').value)||0).toFixed(2)]);
});
const tableBody = [];
const m = Math.max(eData.length, dData.length);
for(let i=0; i<m; i++) {
tableBody.push([
eData[i] ? eData[i][0] : '', eData[i] ? eData[i][1] : '',
dData[i] ? dData[i][0] : '', dData[i] ? dData[i][1] : ''
]);
}
doc.autoTable({
startY: 50,
head: [['PENDAPATAN', 'RM', 'POTONGAN', 'RM']],
body: tableBody,
theme: 'grid',
headStyles: {fillColor: [27, 94, 32]}
});
let y = doc.lastAutoTable.finalY + 10;
doc.setFont("helvetica", "bold"); doc.setFontSize(10);
doc.text(`GAJI KASAR: RM ${parseFloat(document.getElementById('out_gross').innerText.replace('RM ','')).toFixed(2)}`, 20, y);
doc.text(`TOTAL POTONGAN: RM ${parseFloat(document.getElementById('out_deduct').innerText.replace('RM ','')).toFixed(2)}`, 190, y, {align: "right"});
doc.setFillColor(232, 245, 233); doc.rect(20, y+5, 170, 12, 'F');
doc.setFontSize(14); doc.setTextColor(27, 94, 32);
doc.text(`GAJI BERSIH (NET PAY): ${document.getElementById('out_net').innerText}`, 105, y+13, {align: "center"});
doc.setTextColor(0); doc.setFontSize(9);
doc.text("Tandatangan Majikan,", 20, y+45);
doc.text("Tandatangan Pekerja,", 190, y+45, {align: "right"});
doc.text("_______________________", 20, y+65);
doc.text("_______________________", 190, y+65, {align: "right"});
doc.save(`SlipGaji_${nama.split(' ')[0]}_${bStr}.pdf`);
}
function shareWA() {
const txt = `Bina slip gaji profesional dengan pengiraan KWSP & SOCSO automatik dalam 1 minit. Memang memudahkan peniaga! 📝💵\n\nCuba sini: ${window.location.href}`;
window.open(`https://wa.me/?text=${encodeURIComponent(txt)}`, '_blank');
}
window.onload = kiraSemua;
</script>
MeAdminhttp://www.blogger.com/profile/06871300420300644055noreply@blogger.com0tag:blogger.com,1999:blog-5341061453048343895.post-82927945587668571492026-01-09T16:24:00.007+08:002026-01-15T23:12:59.049+08:00Generator Invois & Resit Online Percuma (Siap PDF 1 Minit)<head>
<title>Generator Invois & Resit Online Percuma | Bina PDF 1 Minit</title>
<meta name="description" content="Gunakan Generator Invois & Resit digital untuk bina invois profesional secara percuma. Sesuai untuk peniaga kecil, runner, dan freelancer. Pengiraan automatik & siap PDF!">
<meta name="keywords" content="generator invois online, buat resit rasmi percuma, invois digital pdf, apps peniaga kecil, invoice generator malaysia">
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "WebApplication",
"name": "Generator Invois & Resit Malaysia",
"description": "Alat digital percuma untuk menjana invois dan resit rasmi dalam format PDF secara automatik.",
"applicationCategory": "BusinessApplication",
"operatingSystem": "All",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "MYR"
}
}
</script>
</head>
<style>
:root { --p: #0056b3; --s: #6c757d; --bg: #f8f9fa; --g: #28a745; --red: #c0392b; }
body { background: var(--bg); font-family: 'Segoe UI', sans-serif; margin: 0; color: #333; }
.app-card { max-width: 1000px; margin: 20px auto; background: white; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.1); overflow: hidden; border: 1px solid #ddd; }
/* SEO IMAGE BOX */
.hero-box { width: 100%; border-bottom: 5px solid var(--p); overflow: hidden; }
.hero-box img { width: 100%; display: block; height: auto; }
.intro-seo { padding: 25px; background: #eef5ff; border-bottom: 1px solid #dce7f3; line-height: 1.6; }
.intro-seo h1 { color: var(--p); margin: 0 0 10px 0; font-size: 24px; }
.intro-seo p { margin: 0; font-size: 14px; color: #444; }
.main-content { padding: 25px; }
/* UI FORM */
.row { display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 15px; }
.col { flex: 1; min-width: 250px; }
.grp-box { background: #fff; border: 1px solid #eee; padding: 15px; border-radius: 8px; margin-bottom: 20px; border-left: 5px solid var(--p); }
label { display: block; font-weight: bold; font-size: 13px; margin-bottom: 5px; color: #555; }
input, select, textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; font-size: 14px; box-sizing: border-box; }
.caps { text-transform: uppercase; }
/* TABLE ITEM */
.item-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.item-table th { background: #f1f1f1; padding: 12px; text-align: left; font-size: 13px; border: 1px solid #ddd; color: var(--p); }
.item-table td { padding: 10px; border: 1px solid #ddd; }
.btn { padding: 12px 25px; border: none; border-radius: 8px; font-weight: bold; cursor: pointer; transition: 0.3s; font-size: 15px; text-align: center; display: inline-block; }
.btn-add { background: var(--p); color: white; margin-top: 10px; }
.btn-add:hover { background: #003d80; }
.btn-pdf { background: var(--red); color: white; width: 100%; font-size: 18px; margin-top: 25px; box-shadow: 0 5px 0 #922b21; }
.btn-pdf:hover { background: #e74c3c; transform: translateY(-2px); }
.btn-pdf:active { transform: translateY(3px); box-shadow: none; }
.btn-wa { background: #25d366; color: white; margin-top: 20px; width: 100%; text-decoration: none; display: block; box-sizing: border-box; }
/* SUMMARY AREA */
.summary-area { margin-left: auto; width: 320px; margin-top: 20px; background: #f9f9f9; padding: 20px; border-radius: 10px; border: 1px solid #eee; }
.total-row { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 15px; }
.grand-total { font-size: 20px; font-weight: bold; color: var(--p); border-top: 2px solid #ddd; padding-top: 12px; margin-top: 12px; }
@media (max-width: 600px) { .col { min-width: 100%; } .preview-side { display: none; } }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.29/jspdf.plugin.autotable.min.js"></script>
<div class="app-card">
<div class="hero-box">
<img alt="Generator Invois dan Resit Rasmi Digital Apps Cikgu Digital" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCitBmmbjaBfEsbRPi5dHU1aPNVJ0_VbRyyDii7pCJiXfP6mn4sK7tdY8BSSZ1zsmeAb8Upd-DcmV2bjJogCAw1neCp-vAG1gY6TvfmUC5kAN0eUvM2vAD311nBsOrEBKTIDn84rwcQ5FzJHAyifupVRVCg9Be2V7SU-nTfJbaCLfDTuex5VuEl8U5rnI/s1204/1000001553.jpg" />
</div>
<div class="intro-seo">
<h1>Generator Invois & Resit Online</h1>
<p>Tingkatkan profesionalisme perniagaan anda dengan <b>Invois & Resit Digital</b>. Masukkan butiran jualan, biarkan sistem mengira jumlah secara automatik, dan muat turun fail PDF profesional dalam sekelip mata. Percuma, mudah, dan mesra mudah alih!</p>
</div>
<div class="main-content">
<div class="row">
<div class="col">
<label>JENIS DOKUMEN:</label>
<select id="doc_type">
<option value="INVOIS">INVOIS (INVOICE)</option>
<option value="RESIT RASMI">RESIT RASMI (RECEIPT)</option>
</select>
</div>
<div class="col">
<label>NO. DOKUMEN:</label>
<input type="text" id="inv_no" class="caps" placeholder="Cth: INV-2026-001">
</div>
<div class="col">
<label>TARIKH:</label>
<input type="date" id="inv_date">
</div>
</div>
<div class="row">
<div class="col">
<div class="grp-box">
<label>DARIPADA (PENJUAL):</label>
<textarea id="from_info" class="caps" style="height:100px" placeholder="Nama Syarikat Anda Alamat Penuh No. Telefon / SSM"></textarea>
</div>
</div>
<div class="col">
<div class="grp-box">
<label>KEPADA (PEMBELI):</label>
<textarea id="to_info" class="caps" style="height:100px" placeholder="Nama Pelanggan Alamat Penuh"></textarea>
</div>
</div>
</div>
<div class="grp-box" style="border-left-color: var(--g);">
<label>SENARAI BARANGAN / SERVIS:</label>
<table class="item-table" id="itemTable">
<thead>
<tr>
<th width="50%">Deskripsi Item</th>
<th width="15%">Kuantiti</th>
<th width="15%">Harga Unit</th>
<th width="20%">Jumlah (RM)</th>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td><input type="text" class="item-desc caps" placeholder="Cth: Produk A"></td>
<td><input type="number" class="item-qty" value="1" oninput="calculate()"></td>
<td><input type="number" class="item-price" value="0.00" oninput="calculate()"></td>
<td><input type="text" class="item-total" value="0.00" readonly style="background:#f9f9f9; font-weight:bold;"></td>
</tr>
</tbody>
</table>
<button class="btn btn-add" onclick="addRow()">+ TAMBAH BARIS BARU</button>
</div>
<div class="row">
<div class="col">
<div class="grp-box">
<label>MAKLUMAT PEMBAYARAN:</label>
<textarea id="bank_info" class="caps" placeholder="Cth: MAYBANK 164212345678 (NAMA ANDA)"></textarea>
</div>
</div>
<div class="col">
<div class="summary-area">
<div class="total-row">
<span>Subtotal:</span>
<span id="subtotal">RM 0.00</span>
</div>
<div class="total-row">
<span>Cukai / Servis (%):</span>
<input type="number" id="tax_rate" value="0" style="width:70px; padding:5px" oninput="calculate()">
</div>
<div class="total-row grand-total">
<span>TOTAL:</span>
<span id="grand_total">RM 0.00</span>
</div>
</div>
</div>
</div>
<button class="btn btn-pdf" onclick="generatePDF()">📥 JANA PDF & MUAT TURUN</button>
<a id="wa_btn" href="#" class="btn btn-wa" onclick="shareWA()">📢 KONGSI APPS INI DI WHATSAPP</a>
</div>
</div>
<style>
.aff-wrapper { max-width: 800px; margin: 30px auto; display: flex; flex-direction: column; gap: 15px; border-top: 2px dashed #eee; padding-top: 25px; font-family: 'Segoe UI', sans-serif; }
.aff-box { background: #ffffff; border-radius: 12px; border: 1px solid #ddd; padding: 18px; display: flex; align-items: center; gap: 18px; transition: 0.3s; }
.aff-box:hover { border-color: #1a73e8; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.aff-img { font-size: 32px; width: 65px; height: 65px; background: #f1f8e9; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid #dcedc8; }
.aff-content { flex: 1; text-align: left; }
.aff-title { font-weight: bold; color: #333; font-size: 16px; margin-bottom: 4px; line-height: 1.3; }
.aff-hint { font-size: 11px; color: #888; display: block; margin-top: 6px; line-height: 1.5; font-style: italic; }
.btn-shopee-jujur {
background: #fff;
color: #1a73e8 !important;
text-decoration: none !important;
padding: 9px 18px;
border-radius: 6px;
font-weight: bold;
font-size: 13px;
display: inline-block;
margin-top: 10px;
border: 2px solid #1a73e8;
transition: 0.3s;
}
.btn-shopee-jujur:hover { background: #1a73e8; color: #fff !important; }
@media (max-width: 500px) { .aff-box { flex-direction: column; text-align: center; } .aff-content { text-align: center; } }
</style>
<div class="aff-wrapper">
<p style="font-size: 14px; font-weight: bold; color: #444; text-align: left; margin: 0 0 5px 0;">Keperluan Perniagaan & Pengurusan Resit:</p>
<div class="aff-box">
<div class="aff-img">✒️</div>
<div class="aff-content">
<div class="aff-title">Cop Syarikat Custom (Self-Inking Stamp)</div>
<a href="https://s.shopee.com.my/7VAAA6s3s3" target="_blank" class="btn-shopee-jujur">🔍 TEBUS BAUCAR & CARI</a>
<span class="aff-hint">
<b>Nota:</b> Pautan ini akan membawa anda ke Shopee untuk menebus baucar. Sila cari <b>"Custom Company Stamp"</b> untuk menempah cop rasmi syarikat bagi kegunaan invois dan resit anda.
</span>
</div>
</div>
<div class="aff-box">
<div class="aff-img">📄</div>
<div class="aff-content">
<div class="aff-title">Kertas Pencetak & Bekalan Alat Tulis Pejabat</div>
<a href="https://s.shopee.com.my/7VAAA6s3s3" target="_blank" class="btn-shopee-jujur">🔍 TEBUS BAUCAR & CARI</a>
<span class="aff-hint">
<b>Nota:</b> Selepas mendarat di aplikasi Shopee, anda boleh terus cari <b>"A4 Paper 80gsm"</b> atau <b>"Thermal Receipt Paper"</b> untuk stok cetakan invois perniagaan anda.
</span>
</div>
</div>
</div>
<script>
// Set default date
document.getElementById('inv_date').value = new Date().toISOString().split('T')[0];
function addRow() {
const tr = document.createElement('tr');
tr.innerHTML = `
<td><input type="text" class="item-desc caps"></td>
<td><input type="number" class="item-qty" value="1" oninput="calculate()"></td>
<td><input type="number" class="item-price" value="0.00" oninput="calculate()"></td>
<td><input type="text" class="item-total" value="0.00" readonly style="background:#f9f9f9; font-weight:bold;"></td>
<td style="border:none; background:none;"><button onclick="this.parentElement.parentElement.remove();calculate()" style="background:none;border:none;color:red;cursor:pointer;font-weight:bold;">X</button></td>
`;
document.getElementById('tbody').appendChild(tr);
}
function calculate() {
let sub = 0;
document.querySelectorAll('#tbody tr').forEach(row => {
const q = parseFloat(row.querySelector('.item-qty').value) || 0;
const p = parseFloat(row.querySelector('.item-price').value) || 0;
const t = q * p;
row.querySelector('.item-total').value = t.toFixed(2);
sub += t;
});
const tax = parseFloat(document.getElementById('tax_rate').value) || 0;
const total = sub + (sub * (tax / 100));
document.getElementById('subtotal').innerText = `RM ${sub.toFixed(2)}`;
document.getElementById('grand_total').innerText = `RM ${total.toFixed(2)}`;
}
function generatePDF() {
const { jsPDF } = window.jspdf;
const doc = new jsPDF();
const type = document.getElementById('doc_type').value;
const invNo = document.getElementById('inv_no').value || "B/N";
const date = document.getElementById('inv_date').value;
const from = document.getElementById('from_info').value.toUpperCase();
const to = document.getElementById('to_info').value.toUpperCase();
const bank = document.getElementById('bank_info').value.toUpperCase();
doc.setFont("helvetica", "bold");
doc.setFontSize(22); doc.setTextColor(0, 86, 179);
doc.text(type, 195, 25, {align: "right"});
doc.setFontSize(10); doc.setTextColor(100);
doc.text(`No: ${invNo}`, 195, 32, {align: "right"});
doc.text(`Tarikh: ${date}`, 195, 37, {align: "right"});
doc.setTextColor(0); doc.text("DARIPADA:", 20, 50);
doc.setFont("helvetica", "normal");
doc.text(doc.splitTextToSize(from, 80), 20, 56);
doc.setFont("helvetica", "bold"); doc.text("KEPADA:", 110, 50);
doc.setFont("helvetica", "normal");
doc.text(doc.splitTextToSize(to, 80), 110, 56);
const rows = [];
document.querySelectorAll('#tbody tr').forEach(tr => {
const d = tr.querySelector('.item-desc').value.toUpperCase();
const q = tr.querySelector('.item-qty').value;
const p = tr.querySelector('.item-price').value;
const t = tr.querySelector('.item-total').value;
if(d) rows.push([d, q, p, t]);
});
doc.autoTable({
startY: 85,
head: [['DESKRIPSI', 'QTY', 'HARGA (RM)', 'JUMLAH (RM)']],
body: rows,
theme: 'striped',
headStyles: { fillColor: [0, 86, 179] },
columnStyles: { 1: {halign: 'center'}, 2: {halign: 'right'}, 3: {halign: 'right'} }
});
let y = doc.lastAutoTable.finalY + 10;
doc.setFont("helvetica", "bold");
doc.text(`SUBTOTAL: ${document.getElementById('subtotal').innerText}`, 195, y, {align: "right"});
doc.setFontSize(14); doc.setTextColor(0, 86, 179);
doc.text(`TOTAL: ${document.getElementById('grand_total').innerText}`, 195, y + 8, {align: "right"});
if(bank) {
doc.setFontSize(10); doc.setTextColor(0); doc.text("NOTA PEMBAYARAN:", 20, y + 20);
doc.setFont("helvetica", "normal"); doc.text(bank, 20, y + 26);
}
doc.setFontSize(9); doc.setTextColor(150);
doc.text("Ini adalah dokumen jana-komputer. Terima kasih!", 105, 285, {align: "center"});
doc.save(`${type}_${invNo}.pdf`);
}
function shareWA() {
const txt = `Bina Invois & Resit profesional dalam 1 minit secara percuma guna apps ni. Memang mantap! 📝🔥\n\nCuba sini: ${window.location.href}`;
window.open(`https://wa.me/?text=${encodeURIComponent(txt)}`, '_blank');
}
</script>
MeAdminhttp://www.blogger.com/profile/06871300420300644055noreply@blogger.com0tag:blogger.com,1999:blog-5341061453048343895.post-27869568330319745972026-01-09T15:35:00.008+08:002026-01-15T23:13:53.674+08:00Generator Surat Rasmi Online (SOP Malaysia) - Siap 1 Minit<head>
<title>Generator Surat Rasmi Online | Bina Surat SOP Malaysia 1 Minit</title>
<meta name="description" content="Bina surat rasmi profesional secara percuma. Pilih template, isi butiran guna kalendar, dan muat turun PDF profesional dalam 1 minit. Ikut SOP Malaysia.">
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "WebApplication",
"name": "Generator Surat Rasmi Malaysia",
"description": "Alat digital untuk menjana surat rasmi profesional mengikut SOP Malaysia secara pantas.",
"applicationCategory": "BusinessApplication",
"offers": { "@type": "Offer", "price": "0", "priceCurrency": "MYR" }
}
</script>
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.29/jspdf.plugin.autotable.min.js"></script>
<style>
:root { --p: #1a5f7a; --g: #c9a227; --success: #27ae60; --bg: #f4f7f6; }
body { background: var(--bg); font-family: 'Segoe UI', sans-serif; margin: 0; padding: 0; color: #333; }
.app-card { max-width: 1000px; margin: 20px auto; background: white; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); overflow: hidden; border: 1px solid #ddd; }
.hero-img { width: 100%; display: block; border-bottom: 5px solid var(--g); }
.intro-seo { padding: 25px; background: #fff8e1; border-bottom: 1px solid #eee; line-height: 1.6; }
.intro-seo h2 { color: var(--p); margin-top: 0; font-size: 20px; }
.content { padding: 30px; display: flex; flex-wrap: wrap; gap: 30px; }
.form-side { flex: 1; min-width: 320px; }
.preview-side { flex: 1; min-width: 350px; background: #555; padding: 20px; border-radius: 8px; display: flex; justify-content: center; overflow: hidden; }
.grp-title { font-size: 16px; font-weight: bold; color: var(--p); border-bottom: 2px solid var(--g); margin: 20px 0 15px; padding-bottom: 5px; }
label { display: block; font-weight: 700; font-size: 12px; margin-bottom: 5px; color: #444; }
input, select, textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; font-size: 14px; margin-bottom: 10px; }
.caps { text-transform: uppercase; }
.a4-paper { background: white; width: 210mm; min-height: 297mm; padding: 20mm; box-sizing: border-box; font-family: "Arial", sans-serif; font-size: 11pt; line-height: 1.5; color: #000; box-shadow: 0 0 15px rgba(0,0,0,0.3); transform: scale(0.45); transform-origin: top center; height: 1100px; overflow: hidden; }
.btn { width: 100%; padding: 15px; border: none; border-radius: 8px; font-weight: bold; color: white; cursor: pointer; font-size: 16px; transition: 0.3s; }
.btn-pdf { background: #c0392b; box-shadow: 0 4px 0 #922b21; margin-top: 10px; }
.btn-wa { background: #25d366; margin-top: 15px; font-size: 14px; }
.info-box { background: #e3f2fd; border: 1px solid #2196f3; padding: 15px; border-radius: 8px; margin-bottom: 20px; font-size: 13px; }
@media(max-width: 800px) { .content { flex-direction: column; } .preview-side { display: none; } }
</style>
<div class="app-card">
<img class="hero-img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ_SWJwI2oNqWtWkU1EZAQj29yXVQtY43YpGijcr0VOKTS_1qB3ywrbkOq4DdR52AVTnxfIfLqhncnuPcj1ny2KpjeliyaObo_Vew7r3pF7XrN1jwt_JNl5K2HtsLAZzTV-mJL6OjeuRTQBS0GCXKuqtK1YEYHMF73FHflk5If7jH7_1Kz_sN-U45i7aU/s1540/1000001539.jpg" />
<div class="intro-seo">
<h2>Penjana Surat Rasmi SOP Malaysia</h2>
<p>Bina surat rasmi profesional dengan mudah. Pilih template, isi maklumat peribadi dan gunakan kalendar untuk tarikh surat. Jana fail PDF yang kemas dan mengikut piawaian surat rasmi Malaysia dalam satu minit!</p>
</div>
<div class="content">
<div class="form-side">
<div class="info-box">
<b>🌐 Pilih Jenis Surat:</b>
<select id="doc_type" onchange="switchTemplate()">
<option value="berhenti">Notis Peletakan Jawatan (Berhenti Kerja)</option>
<option value="izin">Izin Tidak Hadir Sekolah (Ibu Bapa)</option>
<option value="bank">Urusan Bank / Penukaran No. Telefon</option>
<option value="rayuan">Surat Rayuan Rasmi (Am)</option>
<option value="aduan">Surat Aduan Awam / Masalah</option>
<option value="kursus">Permohonan Menghadiri Kursus/Latihan</option>
<option value="matrik">Surat Pelepasan Kuliah (Matrikulasi/Universiti)</option>
</select>
</div>
<div class="grp-title">1. Butiran Pengirim</div>
<label>NAMA PENUH ANDA:</label>
<input type="text" id="nm_self" class="caps" oninput="sync()" placeholder="Cth: AHMAD BIN ABDULLAH">
<label>ALAMAT PENUH ANDA:</label>
<textarea id="addr_self" class="caps" oninput="sync()" placeholder="Alamat Baris 1 Alamat Baris 2"></textarea>
<div class="grp-title">2. Butiran Penerima</div>
<label>JAWATAN & ALAMAT PENERIMA:</label>
<textarea id="addr_recv" class="caps" oninput="sync()" placeholder="Pengurus / Pengetua Nama Organisasi / Sekolah Alamat Penuh"></textarea>
<div id="dynamic_fields"></div>
<div class="grp-title">3. Tarikh Surat</div>
<label>PILIH TARIKH SURAT:</label>
<input type="date" id="date_letter" oninput="sync()">
<button class="btn btn-pdf" onclick="generatePDF()">📥 MUAT TURUN SURAT (PDF)</button>
<button class="btn btn-wa" onclick="shareWA()">📢 Kongsi Apps di WhatsApp</button>
</div>
<div class="preview-side">
<div class="a4-paper" id="paper">
<div id="p_nm_self" style="font-weight:bold;">NAMA PENGIRIM</div>
<div id="p_addr_self" style="white-space: pre-wrap; width: 60%;">ALAMAT PENGIRIM</div>
<div style="border-bottom: 2px solid black; margin: 15px 0;"></div>
<div style="display: flex; justify-content: space-between;">
<div id="p_addr_recv" style="white-space: pre-wrap;">JAWATAN & ALAMAT PENERIMA</div>
<div id="p_date" style="font-weight: bold; align-self: flex-start;">TARIKH</div>
</div>
<p style="margin-top: 25px;">Tuan/Puan,</p>
<div id="p_title" style="font-weight:bold; text-decoration:underline; text-transform:uppercase; margin: 15px 0;">TAJUK SURAT</div>
<div id="p_body" style="text-align: justify; white-space: pre-wrap;">Isi kandungan...</div>
<div style="margin-top: 40px;">
Sekian, terima kasih.<br><br>
Yang benar,<br><br><br>
..........................................<br>
<strong>(<span id="p_kaki">NAMA ANDA</span>)</strong>
</div>
</div>
</div>
</div>
</div>
<style>
.aff-wrapper { max-width: 800px; margin: 30px auto; display: flex; flex-direction: column; gap: 15px; border-top: 2px dashed #eee; padding-top: 25px; font-family: 'Segoe UI', sans-serif; }
.aff-box { background: #ffffff; border-radius: 12px; border: 1px solid #ddd; padding: 18px; display: flex; align-items: center; gap: 18px; transition: 0.3s; }
.aff-box:hover { border-color: #1a73e8; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.aff-img { font-size: 32px; width: 65px; height: 65px; background: #fffde7; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid #fff9c4; }
.aff-content { flex: 1; text-align: left; }
.aff-title { font-weight: bold; color: #333; font-size: 16px; margin-bottom: 4px; line-height: 1.3; }
.aff-hint { font-size: 11px; color: #888; display: block; margin-top: 6px; line-height: 1.5; font-style: italic; }
.btn-shopee-jujur {
background: #fff;
color: #1a73e8 !important;
text-decoration: none !important;
padding: 9px 18px;
border-radius: 6px;
font-weight: bold;
font-size: 13px;
display: inline-block;
margin-top: 10px;
border: 2px solid #1a73e8;
transition: 0.3s;
}
.btn-shopee-jujur:hover { background: #1a73e8; color: #fff !important; }
@media (max-width: 500px) { .aff-box { flex-direction: column; text-align: center; } .aff-content { text-align: center; } }
</style>
<div class="aff-wrapper">
<p style="font-size: 14px; font-weight: bold; color: #444; text-align: left; margin: 0 0 5px 0;">Keperluan Urusan Rasmi & Dokumentasi:</p>
<div class="aff-box">
<div class="aff-img">✉️</div>
<div class="aff-content">
<div class="aff-title">Sampul Surat Rasmi (Putih & Coklat)</div>
<a href="https://s.shopee.com.my/7VAAA6s3s3" target="_blank" class="btn-shopee-jujur">🔍 TEBUS BAUCAR & CARI</a>
<span class="aff-hint">
<b>Nota:</b> Pautan ini akan membawa anda ke Shopee untuk menebus baucar. Sila cari <b>"White Envelope A4/A5"</b> untuk memudahkan urusan pengeposan surat rasmi anda.
</span>
</div>
</div>
<div class="aff-box">
<div class="aff-img">🖊️</div>
<div class="aff-content">
<div class="aff-title">Pen Dakwat Basah (Signature Pen) Berkualiti</div>
<a href="https://s.shopee.com.my/7VAAA6s3s3" target="_blank" class="btn-shopee-jujur">🔍 TEBUS BAUCAR & CARI</a>
<span class="aff-hint">
<b>Nota:</b> Selepas mendarat di aplikasi Shopee, anda boleh terus cari <b>"Pilot Ballliner"</b> atau <b>"Artline Pen"</b> untuk hasil tandatangan surat yang lebih kemas dan profesional.
</span>
</div>
</div>
</div>
<script>
const templates = {
berhenti: {
title: "NOTIS PELETAKAN JAWATAN SEBAGAI [JAWATAN]",
fields: [{ id: 'v_jaw', lbl: 'JAWATAN SEKARANG:' }, { id: 'v_sya', lbl: 'NAMA SYARIKAT:' }, { id: 'v_last', lbl: 'TARIKH TERAKHIR (KALENDAR):', type: 'date' }],
genBody: (d) => `Merujuk kepada perkara di atas, saya ${d.nm_self} ingin memaklumkan mengenai peletakan jawatan saya sebagai ${d.v_jaw} di ${d.v_sya} berkuatkuasa pada ${fmtDateLong(d.v_last)}.\n\nPeletakan jawatan ini dibuat atas sebab saya ingin mencari peluang kerjaya baru. Terima kasih atas segala bimbingan sepanjang tempoh perkhidmatan saya.\n\nKerjasama pihak tuan/puan amat saya hargai.`
},
izin: {
title: "PERMOHONAN TIDAK HADIR KE SEKOLAH",
fields: [{ id: 'v_anak', lbl: 'NAMA ANAK:' }, { id: 'v_kelas', lbl: 'KELAS:' }, { id: 'v_skip', lbl: 'TARIKH TIDAK HADIR (KALENDAR):', type: 'date' }, { id: 'v_seb', lbl: 'ALASAN:' }],
genBody: (d) => `Saya ibu/bapa kepada ${d.v_anak} (Kelas: ${d.v_kelas}) ingin memaklumkan bahawa anak saya tidak dapat hadir ke sekolah pada ${fmtDateLong(d.v_skip)}.\n\nKetidakhadiran ini adalah disebabkan oleh ${d.v_seb}. Pihak kami memohon maaf atas kesulitan ini.\n\nTerima kasih.`
},
bank: {
title: "PENGEMASKINIAN MAKLUMAT AKAUN BANK",
fields: [{ id: 'v_acc', lbl: 'NO AKAUN:' }, { id: 'v_phone', lbl: 'NO TELEFON BARU:' }],
genBody: (d) => `Saya ingin memohon pihak bank mengemas kini maklumat akaun bernombor ${d.v_acc}. Saya ingin menukar nombor telefon berdaftar kepada ${d.v_phone}.\n\nNombor lama saya tidak lagi aktif. Terima kasih.`
},
rayuan: {
title: "RAYUAN PERMOHONAN [RAYUAN]",
fields: [{ id: 'v_ray', lbl: 'PERKARA RAYUAN:' }, { id: 'v_als', lbl: 'ALASAN:' }],
genBody: (d) => `Saya ingin mengemukakan rayuan rasmi bagi permohonan saya yang ditolak berkaitan ${d.v_ray}.\n\nRayuan ini dibuat atas faktor ${d.v_als}. Saya harap pihak tuan/puan dapat mempertimbangkan semula.\n\nTerima kasih.`
},
aduan: {
title: "ADUAN MENGENAI [ADUAN]",
fields: [{ id: 'v_mas', lbl: 'ADUAN:' }, { id: 'v_lok', lbl: 'LOKASI:' }],
genBody: (d) => `Saya ingin membuat aduan mengenai masalah ${d.v_mas} yang berlaku di ${d.v_lok}.\n\nKeadaan ini mendatangkan kesulitan kepada warga penduduk. Mohon tindakan segera diambil.\n\nTerima kasih.`
},
kursus: {
title: "PERMOHONAN HADIR KURSUS [KURSUS]",
fields: [{ id: 'v_kur', lbl: 'NAMA KURSUS:' }, { id: 'v_d_kur', lbl: 'TARIKH KURSUS:', type: 'date' }],
genBody: (d) => `Saya ingin memohon hadir ke ${d.v_kur} pada ${fmtDateLong(d.v_d_kur)}.\n\nKursus ini penting untuk meningkatkan kemahiran tugas harian saya. Terima kasih.`
},
matrik: {
title: "PELEPASAN KULIAH / TUTORIAL",
fields: [{ id: 'v_mat', lbl: 'NO. MATRIK:' }, { id: 'v_kul', lbl: 'KOD KULIAH:' }, { id: 'v_d_skip', lbl: 'TARIKH PELEPASAN:', type: 'date' }],
genBody: (d) => `Saya ${d.nm_self} (No Matrik: ${d.v_mat}) ingin memohon pelepasan kuliah ${d.v_kul} pada ${fmtDateLong(d.v_d_skip)} atas urusan keluarga mendesak.\n\nTerima kasih.`
}
};
function fmtDateLong(val) {
if(!val) return "[TARIKH]";
const d = new Date(val);
const m = ["JANUARI","FEBRUARI","MAC","APRIL","MEI","JUN","JULAI","OGOS","SEPTEMBER","OKTOBER","NOVEMBER","DISEMBER"];
return `${d.getDate()} ${m[d.getMonth()]} ${d.getFullYear()}`;
}
function switchTemplate() {
const type = document.getElementById('doc_type').value;
const container = document.getElementById('dynamic_fields');
container.innerHTML = `<div class="grp-title">3. Butiran Khusus Surat</div>`;
templates[type].fields.forEach(f => {
const t = f.type || 'text';
container.innerHTML += `<label>${f.lbl}</label><input type="${t}" id="${f.id}" class="caps" oninput="sync()">`;
});
sync();
}
function sync() {
const type = document.getElementById('doc_type').value;
const nm = (document.getElementById('nm_self').value || "[NAMA ANDA]").toUpperCase();
const addrS = (document.getElementById('addr_self').value || "[ALAMAT ANDA]").toUpperCase();
const addrR = (document.getElementById('addr_recv').value || "[PENERIMA]").toUpperCase();
const dt = fmtDateLong(document.getElementById('date_letter').value);
let dynData = { nm_self: nm };
templates[type].fields.forEach(f => {
const val = document.getElementById(f.id)?.value || "";
dynData[f.id] = val.toUpperCase();
});
document.getElementById('p_nm_self').innerText = nm;
document.getElementById('p_addr_self').innerText = addrS;
document.getElementById('p_addr_recv').innerText = addrR;
document.getElementById('p_date').innerText = dt;
document.getElementById('p_kaki').innerText = nm;
let tRaw = templates[type].title;
let tFinal = tRaw.replace("[JAWATAN]", dynData.v_jaw || "").replace("[RAYUAN]", dynData.v_ray || "").replace("[ADUAN]", dynData.v_mas || "").replace("[KURSUS]", dynData.v_kur || "");
document.getElementById('p_title').innerText = tFinal;
document.getElementById('p_body').innerText = templates[type].genBody(dynData);
}
function generatePDF() {
const { jsPDF } = window.jspdf;
const doc = new jsPDF('p', 'mm', 'a4');
const nm = document.getElementById('p_nm_self').innerText;
const addrS = document.getElementById('p_addr_self').innerText;
const addrR = document.getElementById('p_addr_recv').innerText;
const dt = document.getElementById('p_date').innerText;
const tajuk = document.getElementById('p_title').innerText;
const body = document.getElementById('p_body').innerText;
doc.setFont("helvetica", "bold"); doc.setFontSize(10.5);
doc.text(nm, 20, 25);
doc.setFont("helvetica", "normal");
let sAddrS = doc.splitTextToSize(addrS, 95);
doc.text(sAddrS, 20, 31);
let y = 31 + (sAddrS.length * 5);
doc.setLineWidth(0.4); doc.line(20, y, 190, y);
y += 10;
doc.setFont("helvetica", "bold");
let sAddrR = doc.splitTextToSize(addrR, 95);
doc.text(sAddrR, 20, y);
doc.text(dt, 190, y, {align: "right"});
y += (sAddrR.length * 6) + 8;
doc.setFont("helvetica", "normal"); doc.text("Tuan/Puan,", 20, y);
y += 10;
doc.setFont("helvetica", "bold");
let sTajuk = doc.splitTextToSize(tajuk, 170); // FIXED MARGIN 170mm
doc.text(sTajuk, 20, y);
doc.line(20, y+1, 20 + doc.getTextWidth(sTajuk[0]), y+1);
y += (sTajuk.length * 6) + 8;
doc.setFont("helvetica", "normal");
let sBody = doc.splitTextToSize(body, 170); // FIXED MARGIN 170mm
doc.text(sBody, 20, y); // align: left (LEBIH SELAMAT)
y += (sBody.length * 6) + 15;
doc.text("Sekian, terima kasih.", 20, y);
y += 10;
doc.text("Yang benar,", 20, y);
y += 22;
doc.text("__________________________", 20, y);
y += 7;
doc.setFont("helvetica", "bold");
doc.text(`(${nm})`, 20, y);
doc.save(`Surat_${nm.split(' ')[0]}.pdf`);
}
function shareWA() {
const txt = `Bina pelbagai surat rasmi SOP Malaysia dalam 1 minit guna apps ni. Memang memudahkan! 📝🚀\n\nCuba sini: ${window.location.href}`;
window.open(`https://wa.me/?text=${encodeURIComponent(txt)}`, '_blank');
}
window.onload = () => {
const today = new Date().toISOString().split('T')[0];
document.getElementById('date_letter').value = today;
switchTemplate();
};
</script>
MeAdminhttp://www.blogger.com/profile/06871300420300644055noreply@blogger.com0tag:blogger.com,1999:blog-5341061453048343895.post-49760516758989088142026-01-09T14:55:00.002+08:002026-01-15T23:14:46.681+08:00Sistem Kehadiran QR Code Percuma (e-Daftar) | Jana QR & Laporan Excel<head>
<title>Sistem Kehadiran QR Code Percuma (e-Daftar) | Jana & Download Excel</title>
<meta name="description" content="Gunakan Sistem e-Daftar untuk jana QR Code kehadiran secara percuma. Pantau kehadiran live dan muat turun laporan format Excel serta-merta.">
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "SoftwareApplication",
"name": "e-Daftar Kehadiran Digital",
"operatingSystem": "Web, Android, iOS",
"applicationCategory": "Educational/Business Application",
"description": "Sistem jana QR Code untuk pendaftaran kehadiran dengan fungsi laporan Excel.",
"offers": { "@type": "Offer", "price": "0", "priceCurrency": "MYR" }
}
</script>
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
<script src="https://unpkg.com/html5-qrcode" type="text/javascript"></script>
<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-database.js"></script>
<style>
:root { --primary: #2c3e50; --gold: #d4af37; --green: #27ae60; --wa: #25d366; --email: #e74c3c; }
.event-app { font-family: 'Segoe UI', sans-serif; max-width: 600px; margin: 10px auto; background: #fff; border-radius: 12px; box-shadow: 0 4px 25px rgba(0,0,0,0.15); border: 1px solid #eee; overflow: hidden; }
/* HERO IMAGE STYLE */
.hero-container { width: 100%; overflow: hidden; line-height: 0; }
.hero-container img { width: 100%; height: auto; display: block; }
.app-header { background: var(--primary); color: white; padding: 20px; text-align: center; border-bottom: 5px solid var(--gold); }
.tabs { display: flex; background: #f4f4f4; border-bottom: 1px solid #ddd; }
.tab-btn { flex: 1; padding: 15px; border: none; background: none; font-weight: bold; cursor: pointer; color: #666; }
.tab-btn.active { background: #fff; color: var(--primary); border-top: 4px solid var(--primary); }
.box { padding: 25px; display: none; }
.box.active { display: block; }
.lbl { display: block; font-weight: bold; font-size: 13px; margin-bottom: 5px; color: #333; }
.inp { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 6px; margin-bottom: 15px; box-sizing: border-box; font-size: 14px; }
.btn { width: 100%; padding: 14px; border: none; border-radius: 8px; font-weight: bold; color: white; cursor: pointer; margin-bottom: 10px; font-size: 15px; }
#qr-image { width: 220px; height: 220px; margin: 15px auto; border: 2px solid #eee; padding: 8px; border-radius: 12px; display: block; background: white; }
.live-container { text-align: left; background: #fdfdfd; padding: 15px; border-radius: 10px; margin-top: 15px; border: 1px solid #eee; }
.att-item { padding: 8px; border-bottom: 1px dotted #ccc; font-size: 13px; display: flex; justify-content: space-between; }
</style>
<div class="event-app">
<div class="hero-container">
<img alt="Sistem Kehadiran QR Code e-Daftar Apps Cikgu Digital" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsHzcUlSdh20_TEfQIN-660sCGtkAXl2dyYndoTpkDn6TbwXdO8EJQgCMEkSa4BLc-__V82S1YGZqwABbAcIio-lb_ZAyu2h-wJwdNkENi8tcIce92u7tgL7aWfrl1Q9w07uUHbkd_OsyX4_c8TdWv6vJeuHDo9fiV5iCNPKhqsQ4DDuNiazTp3gL_MPs/s1540/1000001536.jpg"/>
</div>
<div class="app-header">
<h1 style="margin:0; font-size:22px;">Sistem e-Daftar Kehadiran</h1>
<p style="margin:5px 0 0 0; font-size:12px; opacity:0.9;">Jana QR Code & Laporan Excel Automatik</p>
</div>
<div class="tabs">
<button class="tab-btn active" id="btn-admin" onclick="goTab('admin')">ADMIN</button>
<button class="tab-btn" id="btn-user" onclick="goTab('user')">PESERTA</button>
</div>
<div id="view-admin" class="box active">
<div id="panel-setup">
<div id="recovery-msg" style="display:none; background:#fff3cd; padding:12px; border-radius:8px; margin-bottom:20px; font-size:13px; border: 1px solid #ffeeba; color:#856404;">
📢 Sesi aktif dikesan. <button onclick="restoreSess()" style="background:none; border:none; text-decoration:underline; font-weight:bold; cursor:pointer; color:#856404;">Klik untuk sambung.</button>
</div>
<label class="lbl">Emel Admin:</label>
<input type="email" id="admin_email" class="inp" placeholder="emel@anda.com">
<label class="lbl">Nama Program/Majlis:</label>
<input type="text" id="evt_name" class="inp">
<label class="lbl">Lokasi Program:</label>
<input type="text" id="evt_loc" class="inp">
<div style="display:flex; gap:10px;">
<div style="flex:1"><label class="lbl">Tarikh:</label><input type="date" id="evt_date" class="inp"></div>
<div style="flex:1"><label class="lbl">Masa:</label><input type="time" id="evt_time" class="inp"></div>
</div>
<label class="lbl">Catatan Tambahan:</label>
<input type="text" id="evt_note" class="inp">
<label class="lbl">URL Gambar Banner (Opsyenal):</label>
<input type="text" id="evt_img" class="inp">
<button class="btn" style="background:var(--primary);" onclick="janaQR()">⚡ JANA SISTEM SEKARANG</button>
</div>
<div id="panel-dash" style="display:none; text-align:center;">
<h2 id="d-title" style="margin:0; color:var(--primary);"></h2>
<img id="qr-image" src="" alt="QR Code Kehadiran">
<button class="btn" style="background:var(--email);" onclick="sendNotif('email')">📧 HANTAR REPORT KE EMEL</button>
<button class="btn" style="background:var(--wa);" onclick="sendNotif('wa')">📱 HANTAR KE WHATSAPP</button>
<div class="live-container">
<strong>Statistik Kehadiran: <span id="counter">0</span></strong>
<div id="live-list" style="max-height:150px; overflow-y:auto; background:white; border:1px solid #eee; margin-top:10px; border-radius:5px;"></div>
</div>
<button class="btn" style="background:var(--green); margin-top:15px;" onclick="downloadExcel()">📥 MUAT TURUN EXCEL</button>
<button class="btn" style="background:#bdc3c7; color:#333;" onclick="tamatSesi()">RESET SEMUA</button>
</div>
</div>
<div id="view-user" class="box">
<div id="scan-area"><div id="reader" style="width:100%; border-radius:10px;"></div></div>
<div id="form-area" style="display:none;">
<img id="display-cover" style="width:100%; height:150px; object-fit:cover; border-radius:10px; display:none; margin-bottom:15px; border: 1px solid #ddd;">
<h2 id="f-prog" style="margin:0; color:var(--primary);"></h2>
<div id="f-details" style="font-size:13px; color:#555; background:#f9f9f9; padding:12px; border-radius:8px; margin:15px 0; border-left:4px solid var(--green);"></div>
<p id="f-note" style="font-size:13px; color:var(--gold); font-weight:bold;"></p>
<label class="lbl">Nama Penuh:</label>
<input type="text" id="p_nama" class="inp" oninput="this.value=this.value.toUpperCase()">
<label class="lbl">No. Kad Pengenalan:</label>
<input type="number" id="p_ic" class="inp">
<input type="hidden" id="sess_id">
<button class="btn" style="background:var(--green);" onclick="hantarData()">SAHKAN KEHADIRAN</button>
</div>
<div id="success-area" style="display:none; text-align:center; padding:40px 20px;">
<h2 style="color:var(--green)">✅ Rekod Disimpan!</h2>
<button class="btn" style="background:var(--primary);" onclick="resetForm()">Daftar Peserta Lain</button>
</div>
</div>
</div>
<style>
.aff-wrapper { max-width: 800px; margin: 30px auto; display: flex; flex-direction: column; gap: 15px; border-top: 2px dashed #eee; padding-top: 25px; font-family: 'Segoe UI', sans-serif; }
.aff-box { background: #ffffff; border-radius: 12px; border: 1px solid #ddd; padding: 18px; display: flex; align-items: center; gap: 18px; transition: 0.3s; }
.aff-box:hover { border-color: #1a73e8; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.aff-img { font-size: 32px; width: 65px; height: 65px; background: #f3e5f5; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid #e1bee7; }
.aff-content { flex: 1; text-align: left; }
.aff-title { font-weight: bold; color: #333; font-size: 16px; margin-bottom: 4px; line-height: 1.3; }
.aff-hint { font-size: 11px; color: #888; display: block; margin-top: 6px; line-height: 1.5; font-style: italic; }
.btn-shopee-jujur {
background: #fff;
color: #1a73e8 !important;
text-decoration: none !important;
padding: 9px 18px;
border-radius: 6px;
font-weight: bold;
font-size: 13px;
display: inline-block;
margin-top: 10px;
border: 2px solid #1a73e8;
transition: 0.3s;
}
.btn-shopee-jujur:hover { background: #1a73e8; color: #fff !important; }
@media (max-width: 500px) { .aff-box { flex-direction: column; text-align: center; } .aff-content { text-align: center; } }
</style>
<div class="aff-wrapper">
<p style="font-size: 14px; font-weight: bold; color: #444; text-align: left; margin: 0 0 5px 0;">Keperluan Paparan & Imbasan QR Code:</p>
<div class="aff-box">
<div class="aff-img">🪧</div>
<div class="aff-content">
<div class="aff-title">QR Code Acrylic Stand (Paparan Kehadiran)</div>
<a href="https://s.shopee.com.my/7VAAA6s3s3" target="_blank" class="btn-shopee-jujur">🔍 TEBUS BAUCAR & CARI</a>
<span class="aff-hint">
<b>Nota:</b> Pautan ini akan membawa anda ke Shopee untuk menebus baucar. Sila cari <b>"Acrylic QR Stand"</b> untuk mempamerkan kod kehadiran anda dengan lebih kemas dan profesional di kaunter atau meja.
</span>
</div>
</div>
<div class="aff-box">
<div class="aff-img">📲</div>
<div class="aff-content">
<div class="aff-title">Pengimbas Kod (QR & Barcode Scanner)</div>
<a href="https://s.shopee.com.my/7VAAA6s3s3" target="_blank" class="btn-shopee-jujur">🔍 TEBUS BAUCAR & CARI</a>
<span class="aff-hint">
<b>Nota:</b> Selepas mendarat di aplikasi Shopee, anda boleh terus cari <b>"Handheld QR Scanner"</b> jika anda memerlukan peranti khas untuk mengimbas kod kehadiran dengan lebih pantas.
</span>
</div>
</div>
</div>
<script>
const fbConf = {
apiKey: "AIzaSyB52mMM8721lsrw3yeWgP9eIpNQjbx4gtk",
authDomain: "appscikgudigital.firebaseapp.com",
databaseURL: "https://appscikgudigital-default-rtdb.asia-southeast1.firebasedatabase.app",
projectId: "appscikgudigital"
};
if (!firebase.apps.length) firebase.initializeApp(fbConf);
const db = firebase.database();
let currentSess = ""; let records = []; let html5QrCode = null;
window.onload = () => {
if(localStorage.getItem('activeSess')) document.getElementById('recovery-msg').style.display = 'block';
cekURL();
};
function goTab(id) {
document.querySelectorAll('.box, .tab-btn').forEach(e => e.classList.remove('active'));
document.getElementById('view-'+id).classList.add('active');
document.getElementById('btn-'+id).classList.add('active');
if(id === 'user' && document.getElementById('form-area').style.display === 'none') startScan(); else stopScan();
}
function janaQR(existID = null) {
const data = {
admin: document.getElementById('admin_email').value,
name: document.getElementById('evt_name').value.toUpperCase(),
loc: document.getElementById('evt_loc').value.toUpperCase(),
date: document.getElementById('evt_date').value,
time: document.getElementById('evt_time').value,
note: document.getElementById('evt_note').value,
img: document.getElementById('evt_img').value
};
if(!data.name || !data.loc || !data.admin) return alert("Emel, Nama & Lokasi Wajib Diisi!");
currentSess = existID || "EVT_" + Date.now();
data.id = currentSess;
localStorage.setItem('activeSess', JSON.stringify(data));
db.ref('info/' + currentSess).set(data);
document.getElementById('panel-setup').style.display = 'none';
document.getElementById('panel-dash').style.display = 'block';
document.getElementById('d-title').innerText = data.name;
let url = window.location.href.split('?')[0] + "?sesi=" + currentSess;
document.getElementById('qr-image').src = "https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=" + encodeURIComponent(url);
records = [];
db.ref('events/' + currentSess).off();
db.ref('events/' + currentSess).on('child_added', snap => {
let r = snap.val(); records.push(r);
let div = document.createElement('div'); div.className = 'att-item';
div.innerHTML = `<span>${r.name}</span><small>${r.time}</small>`;
document.getElementById('live-list').prepend(div);
document.getElementById('counter').innerText = records.length;
});
}
function sendNotif(type) {
let s = JSON.parse(localStorage.getItem('activeSess'));
let url = window.location.href.split('?')[0] + "?sesi=" + currentSess;
let body = `BUTIRAN REKOD KEHADIRAN%0A%0AProgram: ${s.name}%0ALokasi: ${s.loc}%0ATarikh: ${s.date}%0AMasa: ${s.time}%0A%0APautan Dashboard: ${url}`;
if(type==='wa') window.open(`https://wa.me/?text=${body}`, '_blank');
else window.open(`mailto:${s.admin}?subject=Laporan Kehadiran&body=${body}`, '_blank');
}
function restoreSess() {
const s = JSON.parse(localStorage.getItem('activeSess'));
document.getElementById('admin_email').value = s.admin;
document.getElementById('evt_name').value = s.name;
document.getElementById('evt_loc').value = s.loc;
document.getElementById('evt_date').value = s.date;
document.getElementById('evt_time').value = s.time;
document.getElementById('evt_note').value = s.note;
document.getElementById('evt_img').value = s.img;
janaQR(s.id);
}
function cekURL() {
let sid = new URLSearchParams(window.location.search).get('sesi');
if(sid) {
goTab('user');
document.getElementById('scan-area').style.display = 'none';
document.getElementById('form-area').style.display = 'block';
document.getElementById('sess_id').value = sid;
db.ref('info/' + sid).once('value', s => {
let d = s.val();
if(d) {
document.getElementById('f-prog').innerText = d.name;
document.getElementById('f-details').innerHTML = `📍 ${d.loc}<br>📅 ${d.date || '-'} | 🕒 ${d.time || '-'}`;
document.getElementById('f-note').innerText = d.note ? "Nota: " + d.note : "";
if(d.img) { document.getElementById('display-cover').src = d.img; document.getElementById('display-cover').style.display='block'; }
}
});
}
}
function startScan() {
if(html5QrCode) return;
html5QrCode = new Html5Qrcode("reader");
html5QrCode.start({ facingMode: "environment" }, { fps: 10, qrbox: 250 }, txt => {
if(txt.includes("?sesi=")) window.location.href = txt;
}).catch(e => {});
}
function stopScan() { if(html5QrCode) { html5QrCode.stop().then(() => { html5QrCode=null; }); } }
function hantarData() {
let n = document.getElementById('p_nama').value;
let i = document.getElementById('p_ic').value;
if(!n || !i) return alert("Sila isi maklumat!");
let sid = document.getElementById('sess_id').value;
let now = new Date();
db.ref('events/' + sid).push({ name: n, ic: i, time: now.getHours()+":"+(now.getMinutes()<10?'0':'')+now.getMinutes(), date: now.toLocaleDateString() })
.then(() => { document.getElementById('form-area').style.display='none'; document.getElementById('success-area').style.display='block'; });
}
function resetForm() {
document.getElementById('p_nama').value=""; document.getElementById('p_ic').value="";
document.getElementById('success-area').style.display='none'; document.getElementById('form-area').style.display='block';
}
function tamatSesi() { if(confirm("Reset semua sesi?")) { localStorage.removeItem('activeSess'); location.reload(); } }
function downloadExcel() {
let d = [["BIL", "NAMA", "KP", "MASA", "TARIKH"]];
records.forEach((r, i) => d.push([i+1, r.name, "'" + r.ic, r.time, r.date]));
let ws = XLSX.utils.aoa_to_sheet(d);
let wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, "Kehadiran");
XLSX.writeFile(wb, `Kehadiran_${document.getElementById('d-title').innerText}.xlsx`);
}
</script>
MeAdminhttp://www.blogger.com/profile/06871300420300644055noreply@blogger.com0tag:blogger.com,1999:blog-5341061453048343895.post-41180463390924207762026-01-09T07:17:00.017+08:002026-01-15T23:16:06.464+08:00Generator Surat Perjanjian Sewa Rumah (Tenancy Agreement) Malaysia - Sah LHDN, PDF & Word <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.29/jspdf.plugin.autotable.min.js"></script>
<style>
/* --- UI CLEAN --- */
:root { --p: #2c3e50; --g: #d4af37; }
.app-v14 {
font-family: 'Segoe UI', sans-serif;
max-width: 900px; margin: 20px auto;
background: #fff; border-radius: 10px; border: 1px solid #ddd;
box-shadow: 0 5px 15px rgba(0,0,0,0.1); overflow: hidden;
}
.cover { width: 100%; border-bottom: 5px solid var(--g); }
.content { padding: 30px; }
.grp { color: var(--p); font-size: 18px; font-weight: bold; border-bottom: 1px solid #eee; margin: 20px 0 15px 0; }
.row { display: flex; gap: 15px; margin-bottom: 15px; }
.col { flex: 1; }
@media(max-width:600px){ .row{flex-direction:column;} }
label { display: block; font-weight: 700; font-size: 13px; margin-bottom: 5px; color: #444; }
input, select { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; }
.caps { text-transform: uppercase; }
/* BUTTONS */
.btn { width: 100%; padding: 14px; border: none; border-radius: 6px; font-weight: bold; color: white; cursor: pointer; margin-top: 20px; font-size: 16px; }
.btn-pdf { background: #c0392b; box-shadow: 0 4px 0 #922b21; }
.btn-pdf:active { transform: translateY(4px); box-shadow: none; }
.btn-rst { background: #7f8c8d; margin-top: 10px; }
/* BOX KENAIKAN SEWA (VISIBLE & HIGHLIGHTED) */
.rev-container {
background: #fdfdfd; border: 1px solid #e0e0e0; border-left: 4px solid var(--p);
padding: 15px; border-radius: 5px; margin-top: 15px;
}
.chk-label { display: flex; align-items: center; cursor: pointer; font-weight: bold; color: var(--p); margin-bottom: 10px; }
.chk-label input { width: auto; margin-right: 10px; transform: scale(1.2); }
</style>
<div class="app-v14">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif55UydyAharhqJyrihJaxgoP_bOIYKJjkMDHFNt2f8aoZR4QAZuLzcajuAfdLRxfxhnWPXUudMzj9Q2KUO0iqAK4lIQCB7QFW5qM5NiojK0f5iWr0qJS5q7-1ysYrJiiyIDREDq_AEnRSYhKCwNQa0TajWLl7fxScyKAEA_ukXWUe-6gr7jKzyCLcZVM/s1100/1000001510.jpg" class="cover">
<div class="content">
<div style="background:#e3f2fd; padding:10px; border-radius:5px; margin-bottom:20px; border:1px solid #2196f3;">
<label style="color:#0d47a1;">🌐 Bahasa Dokumen:</label>
<select id="lang" style="font-weight:bold; color:#0d47a1;">
<option value="BM">Bahasa Melayu</option>
<option value="EN">English</option>
</select>
</div>
<div class="grp">A. Pihak Terlibat</div>
<div class="row">
<div class="col"><label>Tarikh Perjanjian:</label><input type="date" id="d_sign"></div>
</div>
<div class="row">
<div class="col"><label>Nama Tuan Rumah:</label><input type="text" id="nm_own" class="caps" placeholder="HURUF BESAR"></div>
<div class="col"><label>No. KP Tuan Rumah:</label><input type="text" id="ic_own"></div>
</div>
<div class="row">
<div class="col"><label>Nama Penyewa:</label><input type="text" id="nm_ten" class="caps" placeholder="HURUF BESAR"></div>
<div class="col"><label>No. KP Penyewa:</label><input type="text" id="ic_ten"></div>
</div>
<div class="grp">B. Sewaan</div>
<div class="row">
<div class="col"><label>Alamat Rumah:</label><input type="text" id="addr" class="caps"></div>
</div>
<div class="row">
<div class="col"><label>Sewa (RM):</label><input type="number" id="rent"></div>
<div class="col">
<label>Tempoh:</label>
<div style="display:flex; gap:5px;">
<input type="number" id="dur_v" value="1" oninput="calc()">
<select id="dur_u" onchange="calc()"><option value="Tahun">Tahun/Years</option><option value="Bulan">Bulan/Months</option></select>
</div>
</div>
</div>
<div class="row">
<div class="col"><label>Mula:</label><input type="date" id="d_start" onchange="calc()"></div>
<div class="col"><label>Tamat:</label><input type="text" id="d_end" readonly style="background:#eee;"></div>
</div>
<div class="rev-container">
<label class="chk-label">
<input type="checkbox" id="chk_rev"> Aktifkan Kenaikan Sewa? (Isi nilai di bawah)
</label>
<div class="row">
<div class="col"><label>Semak Setiap:</label><select id="rev_y"><option value="1">1 Tahun</option><option value="2">2 Tahun</option></select></div>
<div class="col"><label>Jenis:</label><select id="rev_t"><option value="p">Peratus (%)</option><option value="v">Nilai (RM)</option></select></div>
</div>
<div class="row"><div class="col"><label>Nilai Kenaikan:</label><input type="number" id="rev_val" placeholder="Cth: 10 atau 100" oninput="autoTick()"></div></div>
</div>
<div class="grp">C. Deposit & Syarat</div>
<div class="row">
<div class="col"><label>Deposit Sekuriti (RM):</label><input type="number" id="dep_s"></div>
<div class="col"><label>Deposit Utiliti (RM):</label><input type="number" id="dep_u"></div>
</div>
<div class="row">
<div class="col"><label>Bank Tuan Rumah:</label><input type="text" id="bank_nm" class="caps"></div>
<div class="col"><label>No Akaun:</label><input type="text" id="bank_no"></div>
</div>
<div class="row">
<div class="col"><label>Notis Keluar:</label><select id="not_v"><option value="2">2 Bulan/Months</option><option value="1">1 Bulan/Month</option></select></div>
</div>
<button onclick="makePDF()" class="btn btn-pdf">📥 DOWNLOAD PDF</button>
<button onclick="location.reload()" class="btn btn-rst">Reset</button>
</div>
</div>
<style>
.aff-wrapper { max-width: 800px; margin: 30px auto; display: flex; flex-direction: column; gap: 15px; border-top: 2px dashed #eee; padding-top: 25px; font-family: 'Segoe UI', sans-serif; }
.aff-box { background: #ffffff; border-radius: 12px; border: 1px solid #ddd; padding: 18px; display: flex; align-items: center; gap: 18px; transition: 0.3s; }
.aff-box:hover { border-color: #1a73e8; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.aff-img { font-size: 32px; width: 65px; height: 65px; background: #fff8e1; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid #ffecb3; }
.aff-content { flex: 1; text-align: left; }
.aff-title { font-weight: bold; color: #333; font-size: 16px; margin-bottom: 4px; line-height: 1.3; }
.aff-hint { font-size: 11px; color: #888; display: block; margin-top: 6px; line-height: 1.5; font-style: italic; }
.btn-shopee-jujur {
background: #fff;
color: #1a73e8 !important;
text-decoration: none !important;
padding: 9px 18px;
border-radius: 6px;
font-weight: bold;
font-size: 13px;
display: inline-block;
margin-top: 10px;
border: 2px solid #1a73e8;
transition: 0.3s;
}
.btn-shopee-jujur:hover { background: #1a73e8; color: #fff !important; }
@media (max-width: 500px) { .aff-box { flex-direction: column; text-align: center; } .aff-content { text-align: center; } }
</style>
<div class="aff-wrapper">
<p style="font-size: 14px; font-weight: bold; color: #444; text-align: left; margin: 0 0 5px 0;">Keperluan Pengurusan Hartanah & Sewaan:</p>
<div class="aff-box">
<div class="aff-img">🔑</div>
<div class="aff-content">
<div class="aff-title">Kotak Simpanan Kunci (Key Lock Box) & Tag Kunci</div>
<a href="https://s.shopee.com.my/7VAAA6s3s3" target="_blank" class="btn-shopee-jujur">🔍 TEBUS BAUCAR & CARI</a>
<span class="aff-hint">
<b>Nota:</b> Pautan ini akan membawa anda ke Shopee untuk menebus baucar. Sila cari <b>"Security Key Lock Box"</b> atau <b>"Key Tag"</b> bagi memudahkan urusan penyerahan kunci kepada penyewa anda.
</span>
</div>
</div>
<div class="aff-box">
<div class="aff-img">📂</div>
<div class="aff-content">
<div class="aff-title">Fail Dokumen Perjanjian (Clear Holder File)</div>
<a href="https://s.shopee.com.my/7VAAA6s3s3" target="_blank" class="btn-shopee-jujur">🔍 TEBUS BAUCAR & CARI</a>
<span class="aff-hint">
<b>Nota:</b> Selepas mendarat di aplikasi Shopee, anda boleh terus cari <b>"A4 Clear Holder File"</b> untuk menyimpan salinan kontrak sewa rumah anda dengan lebih rapi dan selamat.
</span>
</div>
</div>
</div>
<script>
const DIC = {
BM: {
tt: "PERJANJIAN PENYEWAAN RUMAH", intro: "PERJANJIAN INI dibuat pada", betw: "ANTARA",
own: "TUAN RUMAH", ten: "PENYEWA", ic: "No. KP",
prem: "BAHAWASANYA Tuan Rumah bersetuju menyewakan premis di alamat:", agr: "ADALAH DIPERSETUJUI SEPERTI BERIKUT:",
h_item: "PERKARA", h_desc: "BUTIRAN",
dur: "TEMPOH SEWAAN", dur_txt: "selama", from: "bermula", to: "sehingga",
rent: "KADAR SEWA", rent_txt: "Sebulan adalah RM", pay: "Dibayar sebelum 7hb ke akaun",
dep: "DEPOSIT", dep_s: "1. Deposit Sekuriti", dep_sd: "(Jaminan kerosakan struktur)", dep_u: "2. Deposit Utiliti", dep_ud: "(Jaminan bil tertunggak)",
rev: "KENAIKAN SEWA", rev_txt: "Semakan setiap", rev_yr: "tahun. Kenaikan maksima",
not: "PENAMATAN", not_txt: "Notis bertulis selama", not_m: "bulan diperlukan untuk penamatan awal.",
rul_t: "TANGGUNGJAWAB PENYEWA", ruls: ["Membayar sewa & bil utiliti tepat pada masanya.","Menjaga kebersihan premis.","Tidak melakukan kerosakan struktur.","Tidak menyewakan semula (sublet).","Tidak melakukan kegiatan haram."],
sign_t: "PADA MENYAKSIKAN HAL DI ATAS, pihak-pihak menurunkan tandatangan:", s_own: "Tuan Rumah", s_ten: "Penyewa", s_wit: "Saksi"
},
EN: {
tt: "RESIDENTIAL TENANCY AGREEMENT", intro: "THIS AGREEMENT is made on", betw: "BETWEEN",
own: "THE LANDLORD", ten: "THE TENANT", ic: "ID / IC No",
prem: "WHEREAS the Landlord agrees to let the property at:", agr: "IT IS HEREBY AGREED AS FOLLOWS:",
h_item: "ITEM", h_desc: "DETAILS",
dur: "DURATION", dur_txt: "For a duration of", from: "commencing", to: "until",
rent: "MONTHLY RENT", rent_txt: "Monthly rental is RM", pay: "Payable by the 7th to account",
dep: "DEPOSITS", dep_s: "1. Security Deposit", dep_sd: "(For damages to structure)", dep_u: "2. Utility Deposit", dep_ud: "(For outstanding bills)",
rev: "RENT REVIEW", rev_txt: "Review every", rev_yr: "years. Max increase",
not: "TERMINATION", not_txt: "Written notice of", not_m: "months required for early termination.",
rul_t: "TENANT'S OBLIGATIONS", ruls: ["Pay rent & utilities on time.","Keep premise clean.","No structural damages.","No subletting.","No illegal activities."],
sign_t: "IN WITNESS WHEREOF, the parties have set their hands:", s_own: "Landlord", s_ten: "Tenant", s_wit: "Witness"
}
};
// LOGIC AUTO-TICK (NEW)
function autoTick() {
let val = document.getElementById('rev_val').value;
let chk = document.getElementById('chk_rev');
// Kalau ada nilai, tick. Kalau kosong, untick.
chk.checked = (val && val.length > 0);
}
function fmtDate(s, lang) {
if(!s) return "........................";
let d = new Date(s);
let mBM = ["JANUARI","FEBRUARI","MAC","APRIL","MEI","JUN","JULAI","OGOS","SEPTEMBER","OKTOBER","NOVEMBER","DISEMBER"];
let mEN = ["JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE","JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER"];
let m = (lang=='BM') ? mBM : mEN;
return `${d.getDate()} ${m[d.getMonth()]} ${d.getFullYear()}`;
}
function calc() {
let s = document.getElementById('d_start').value;
if(!s) { document.getElementById('d_end').value=""; return; }
let n = parseInt(document.getElementById('dur_v').value)||1;
let u = document.getElementById('dur_u').value;
let d = new Date(s);
if(u.includes('Tahun')) d.setFullYear(d.getFullYear()+n); else d.setMonth(d.getMonth()+n);
d.setDate(d.getDate()-1);
document.getElementById('d_end').value = `${d.getDate()}/${d.getMonth()+1}/${d.getFullYear()}`;
}
function makePDF() {
const { jsPDF } = window.jspdf;
const doc = new jsPDF();
let L = DIC[document.getElementById('lang').value];
let val = (id) => document.getElementById(id).value.toUpperCase();
let raw = (id) => document.getElementById(id).value;
let dateAgree = fmtDate(raw('d_sign'), document.getElementById('lang').value);
let nmOwn = val('nm_own') || "................";
let icOwn = val('ic_own') || "................";
let nmTen = val('nm_ten') || "................";
let icTen = val('ic_ten') || "................";
let addr = val('addr') || "................................................";
doc.setFont("times", "bold"); doc.setFontSize(16);
doc.text(L.tt, 105, 20, {align:"center"});
doc.setLineWidth(0.5); doc.line(14, 22, 196, 22);
doc.setFontSize(11); doc.setFont("times", "normal");
doc.text(`${L.intro} ${dateAgree} ${L.betw}:`, 14, 30);
doc.autoTable({
startY: 33,
body: [
[`${L.own}:`, nmOwn], [`${L.ic}:`, icOwn],
[{content: '&', colSpan: 2, styles: {halign: 'center', fontStyle:'bold'}}],
[`${L.ten}:`, nmTen], [`${L.ic}:`, icTen]
],
theme: 'plain',
styles: { font: "times", fontSize: 11, cellPadding: 1 },
columnStyles: { 0: {cellWidth: 40, fontStyle: 'bold'} }
});
let y = doc.lastAutoTable.finalY + 8;
doc.text(`${L.prem}`, 14, y);
doc.setFont("times", "bold"); doc.text(addr, 14, y+6);
y += 15;
doc.text(L.agr, 14, y);
let dEndVal = document.getElementById('d_end').value;
if(dEndVal) {
let parts = dEndVal.split('/');
let eD = new Date(`${parts[2]}-${parts[1]}-${parts[0]}`);
let mArr = (document.getElementById('lang').value=='BM') ? ["JANUARI","FEBRUARI","MAC","APRIL","MEI","JUN","JULAI","OGOS","SEPTEMBER","OKTOBER","NOVEMBER","DISEMBER"] : ["JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE","JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER"];
dEndVal = `${eD.getDate()} ${mArr[eD.getMonth()]} ${eD.getFullYear()}`;
} else { dEndVal = "................"; }
let durFull = `${L.dur_txt} ${raw('dur_v')} ${raw('dur_u')} ${L.from} ${fmtDate(raw('d_start'), document.getElementById('lang').value)} ${L.to} ${dEndVal}`;
let rentTxt = `${L.rent_txt} ${raw('rent')}.\n${L.pay} ${val('bank_nm')} (${val('bank_no')}).`;
let depTxt = `${L.dep_s}: RM ${raw('dep_s')}\n${L.dep_sd}\n\n${L.dep_u}: RM ${raw('dep_u')}\n${L.dep_ud}`;
let notTxt = `${L.not_txt} ${raw('not_v')} ${L.not_m}`;
let bodyData = [
[L.dur, durFull], [L.rent, rentTxt], [L.dep, depTxt], [L.not, notTxt]
];
// LOGIC CHECKBOX AKTIF JIKA DITANDA ATAU DIISI
if(document.getElementById('chk_rev').checked) {
let rT = document.getElementById('rev_t').value;
let rV = raw('rev_val');
let rDisp = (rT=='p') ? `${rV}%` : `RM ${rV}`;
let revFull = `${L.rev_txt} ${raw('rev_y')} ${L.rev_yr} ${rDisp}.`;
bodyData.splice(3, 0, [L.rev, revFull]);
}
doc.autoTable({
startY: y + 3,
head: [[L.h_item, L.h_desc]], body: bodyData,
theme: 'grid',
headStyles: { fillColor: [230,230,230], textColor: 0, lineColor: 0 },
styles: { font: "times", fontSize: 10, lineColor: 0, lineWidth: 0.1, cellPadding: 3 },
columnStyles: { 0: {cellWidth: 45, fontStyle: 'bold'} }
});
y = doc.lastAutoTable.finalY + 10;
if(y > 220) { doc.addPage(); y = 20; }
doc.setFont("times", "bold"); doc.text(L.rul_t + ":", 14, y);
y += 6;
doc.setFont("times", "normal");
L.ruls.forEach((r, i) => {
doc.text(`${i+1}. ${r}`, 14, y); y += 6;
});
y += 10;
// LOGIC SMART PAGE BREAK (TENDANG KE PAGE BARU JIKA RUANG < 100mm)
if (y > 190) {
doc.addPage();
y = 20;
}
doc.text(L.sign_t, 14, y);
y += 5;
doc.autoTable({
startY: y,
body: [
[`${L.s_own}:\n\n__________________\n${nmOwn}\n${icOwn}`, `${L.s_ten}:\n\n__________________\n${nmTen}\n${icTen}`],
['',''],
[`${L.s_wit}:\n\n__________________\n................................`, `${L.s_wit}:\n\n__________________\n................................`]
],
theme: 'plain',
styles: { font: "times", fontSize: 10, cellPadding: 2 },
columnStyles: { 0: {cellWidth: 85}, 1: {cellWidth: 85} }
});
doc.save(`Sewa_${nmTen}.pdf`);
}
</script>
MeAdminhttp://www.blogger.com/profile/06871300420300644055noreply@blogger.com0