Sistem Nota Tukang Profesional<\/title>\n <style>\n body { font-family: 'Segoe UI', Arial, sans-serif; background-color: #f0f2f5; padding: 20px; }\n .container { max-width: 600px; background: white; padding: 30px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); margin: auto; }\n \n .header-nota { text-align: center; margin-bottom: 20px; display: none; } \/* Muncul saat hasil jadi *\/\n #preview-logo { max-width: 100px; margin-bottom: 10px; border-radius: 5px; }\n \n h2 { color: #1a73e8; text-align: center; border-bottom: 3px solid #1a73e8; padding-bottom: 10px; }\n label { display: block; margin-top: 15px; font-weight: bold; font-size: 14px; }\n input, select { width: 100%; padding: 12px; margin-top: 5px; border: 1px solid #ddd; border-radius: 6px; box-sizing: border-box; }\n \n .button-group { display: flex; gap: 10px; margin-top: 30px; }\n button { flex: 1; padding: 15px; border: none; border-radius: 6px; cursor: pointer; font-size: 16px; font-weight: bold; transition: 0.3s; }\n \n .btn-hitung { background-color: #1a73e8; color: white; }\n .btn-cetak { background-color: #34a853; color: white; }\n button:hover { opacity: 0.8; }\n \n #hasil-box { margin-top: 30px; padding: 20px; border: 2px dashed #1a73e8; border-radius: 8px; display: none; background: #fff; }\n .ttd-area { margin-top: 50px; display: flex; justify-content: space-between; display: none; }\n \n \/* Pengaturan Cetak *\/\n @media print {\n body { background: white; padding: 0; }\n .container { box-shadow: none; max-width: 100%; border: none; }\n .button-group, label, input, select, .input-logo { display: none; }\n .header-nota, #hasil-box, .ttd-area { display: block !important; }\n #hasil-box { border: 1px solid #eee; }\n }\n <\/style>\n<\/head>\n<body>\n\n<div class=\"container\">\n <div class=\"header-nota\" id=\"header-cetak\">\n <img decoding=\"async\" id=\"logo-tampil\" src=\"\" style=\"display:none;\">\n <h1 id=\"nama-bisnis-tampil\">JASA PERTUKANGAN<\/h1>\n <p>Estimasi Biaya Layanan Profesional<\/p>\n <\/div>\n\n <h2>INPUT DATA PROYEK<\/h2>\n \n <div class=\"input-logo\">\n <label>Upload Logo Bisnis (Opsional):<\/label>\n <input type=\"file\" id=\"input-logo\" accept=\"image\/*\" onchange=\"previewLogo(this)\">\n <\/div>\n\n <label>Nama Pelanggan:<\/label>\n <input type=\"text\" id=\"nama\" placeholder=\"Contoh: Bpk. Andi\">\n\n <label>Dimensi Area (Panjang x Lebar m):<\/label>\n <div style=\"display: flex; gap: 10px;\">\n <input type=\"number\" id=\"panjang\" placeholder=\"P\">\n <input type=\"number\" id=\"lebar\" placeholder=\"L\">\n <\/div>\n\n <label>Pilih Jenis Material:<\/label>\n <select id=\"material\">\n <optgroup label=\"Kayu\">\n <option value=\"600000\">Kayu Jati Perhutani (Rp 600.000\/m2)<\/option>\n <option value=\"300000\">Kayu Meranti (Rp 300.000\/m2)<\/option>\n <\/optgroup>\n <optgroup label=\"Lantai & Dinding\">\n <option value=\"200000\">Granit 60×60 (Rp 200.000\/m2)<\/option>\n <option value=\"120000\">Keramik Standar (Rp 120.000\/m2)<\/option>\n <option value=\"85000\">Cat Dinding Premium (Rp 85.000\/m2)<\/option>\n <\/optgroup>\n <\/select>\n\n <label>Biaya Jasa Tukang (Rp):<\/label>\n <input type=\"number\" id=\"jasa\" placeholder=\"Total upah tukang\">\n\n <div class=\"button-group\">\n <button class=\"btn-hitung\" onclick=\"hitungTotal()\">Proses Hasil<\/button>\n <button class=\"btn-cetak\" onclick=\"window.print()\">Cetak \/ Simpan PDF<\/button>\n <\/div>\n\n <div id=\"hasil-box\">\n <div id=\"isi-nota\"><\/div>\n \n <div class=\"ttd-area\" id=\"ttd\">\n <div style=\"text-align: center;\">\n Pelanggan,<br><br><br>(………………..)\n <\/div>\n <div style=\"text-align: center;\">\n Hormat Kami,<br><br><br>( Admin Jasa )\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<script>\n \/\/ Fungsi untuk menampilkan logo yang diupload\n function previewLogo(input) {\n if (input.files && input.files[0]) {\n var reader = new FileReader();\n reader.onload = function(e) {\n document.getElementById('logo-tampil').src = e.target.result;\n document.getElementById('logo-tampil').style.display = 'inline-block';\n document.getElementById('logo-tampil').style.maxWidth = '100px';\n }\n reader.readAsDataURL(input.files[0]);\n }\n }\n\n function hitungTotal() {\n const nama = document.getElementById('nama').value || \"................\";\n const p = parseFloat(document.getElementById('panjang').value) || 0;\n const l = parseFloat(document.getElementById('lebar').value) || 0;\n const hargaMat = parseFloat(document.getElementById('material').value);\n const teksMat = document.getElementById('material').options[document.getElementById('material').selectedIndex].text;\n const jasa = parseFloat(document.getElementById('jasa').value) || 0;\n\n const luas = p * l;\n const totalMaterial = luas * hargaMat;\n const totalAkhir = totalMaterial + jasa;\n\n document.getElementById('hasil-box').style.display = \"block\";\n document.getElementById('header-cetak').style.display = \"block\";\n document.getElementById('ttd').style.display = \"flex\";\n \n document.getElementById('isi-nota').innerHTML = `\n <table style=\"width:100%; border-collapse: collapse;\">\n <tr><td><strong>Pelanggan<\/strong><\/td><td>: ${nama}<\/td><\/tr>\n <tr><td><strong>Luas Proyek<\/strong><\/td><td>: ${luas} m\u00b2<\/td><\/tr>\n <tr><td><strong>Material<\/strong><\/td><td>: ${teksMat}<\/td><\/tr>\n <tr><td colspan=\"2\"><hr><\/td><\/tr>\n <tr><td>Subtotal Material<\/td><td>: Rp ${totalMaterial.toLocaleString('id-ID')}<\/td><\/tr>\n <tr><td>Biaya Jasa<\/td><td>: Rp ${jasa.toLocaleString('id-ID')}<\/td><\/tr>\n <tr><td style=\"font-size: 18px; color: #1a73e8;\"><strong>TOTAL AKHIR<\/strong><\/td>\n <td style=\"font-size: 18px; color: #1a73e8;\"><strong>: Rp ${totalAkhir.toLocaleString('id-ID')}<\/strong><\/td><\/tr>\n <\/table>\n `;\n }\n<\/script>\n\n<\/body>\n<\/html>\n\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sistem Nota Tukang Profesional JASA PERTUKANGAN Estimasi Biaya Layanan Profesional INPUT DATA PROYEK Upload Logo Bisnis (Opsional): Nama Pelanggan: Dimensi Area (Panjang x Lebar m): Pilih Jenis Material: Kayu Jati Perhutani (Rp 600.000\/m2)Kayu Meranti (Rp 300.000\/m2) Granit 60×60 (Rp 200.000\/m2)Keramik Standar (Rp 120.000\/m2)Cat Dinding Premium (Rp 85.000\/m2) Biaya Jasa Tukang (Rp): Proses Hasil Cetak \/ […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-661","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/jasarenovasipalu.my.id\/index.php?rest_route=\/wp\/v2\/pages\/661","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jasarenovasipalu.my.id\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jasarenovasipalu.my.id\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jasarenovasipalu.my.id\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jasarenovasipalu.my.id\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=661"}],"version-history":[{"count":2,"href":"https:\/\/jasarenovasipalu.my.id\/index.php?rest_route=\/wp\/v2\/pages\/661\/revisions"}],"predecessor-version":[{"id":664,"href":"https:\/\/jasarenovasipalu.my.id\/index.php?rest_route=\/wp\/v2\/pages\/661\/revisions\/664"}],"wp:attachment":[{"href":"https:\/\/jasarenovasipalu.my.id\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=661"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":661,"date":"2025-12-26T07:55:29","date_gmt":"2025-12-25T23:55:29","guid":{"rendered":"https:\/\/jasarenovasipalu.my.id\/?page_id=661"},"modified":"2025-12-26T07:56:02","modified_gmt":"2025-12-25T23:56:02","slug":"kalkulator-estimasi-biaya","status":"publish","type":"page","link":"https:\/\/jasarenovasipalu.my.id\/?page_id=661","title":{"rendered":"Kalkulator Estimasi biaya"},"content":{"rendered":"\n\n\n\n \n Sistem Nota Tukang Profesional<\/title>\n <style>\n body { font-family: 'Segoe UI', Arial, sans-serif; background-color: #f0f2f5; padding: 20px; }\n .container { max-width: 600px; background: white; padding: 30px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); margin: auto; }\n \n .header-nota { text-align: center; margin-bottom: 20px; display: none; } \/* Muncul saat hasil jadi *\/\n #preview-logo { max-width: 100px; margin-bottom: 10px; border-radius: 5px; }\n \n h2 { color: #1a73e8; text-align: center; border-bottom: 3px solid #1a73e8; padding-bottom: 10px; }\n label { display: block; margin-top: 15px; font-weight: bold; font-size: 14px; }\n input, select { width: 100%; padding: 12px; margin-top: 5px; border: 1px solid #ddd; border-radius: 6px; box-sizing: border-box; }\n \n .button-group { display: flex; gap: 10px; margin-top: 30px; }\n button { flex: 1; padding: 15px; border: none; border-radius: 6px; cursor: pointer; font-size: 16px; font-weight: bold; transition: 0.3s; }\n \n .btn-hitung { background-color: #1a73e8; color: white; }\n .btn-cetak { background-color: #34a853; color: white; }\n button:hover { opacity: 0.8; }\n \n #hasil-box { margin-top: 30px; padding: 20px; border: 2px dashed #1a73e8; border-radius: 8px; display: none; background: #fff; }\n .ttd-area { margin-top: 50px; display: flex; justify-content: space-between; display: none; }\n \n \/* Pengaturan Cetak *\/\n @media print {\n body { background: white; padding: 0; }\n .container { box-shadow: none; max-width: 100%; border: none; }\n .button-group, label, input, select, .input-logo { display: none; }\n .header-nota, #hasil-box, .ttd-area { display: block !important; }\n #hasil-box { border: 1px solid #eee; }\n }\n <\/style>\n<\/head>\n<body>\n\n<div class=\"container\">\n <div class=\"header-nota\" id=\"header-cetak\">\n <img decoding=\"async\" id=\"logo-tampil\" src=\"\" style=\"display:none;\">\n <h1 id=\"nama-bisnis-tampil\">JASA PERTUKANGAN<\/h1>\n <p>Estimasi Biaya Layanan Profesional<\/p>\n <\/div>\n\n <h2>INPUT DATA PROYEK<\/h2>\n \n <div class=\"input-logo\">\n <label>Upload Logo Bisnis (Opsional):<\/label>\n <input type=\"file\" id=\"input-logo\" accept=\"image\/*\" onchange=\"previewLogo(this)\">\n <\/div>\n\n <label>Nama Pelanggan:<\/label>\n <input type=\"text\" id=\"nama\" placeholder=\"Contoh: Bpk. Andi\">\n\n <label>Dimensi Area (Panjang x Lebar m):<\/label>\n <div style=\"display: flex; gap: 10px;\">\n <input type=\"number\" id=\"panjang\" placeholder=\"P\">\n <input type=\"number\" id=\"lebar\" placeholder=\"L\">\n <\/div>\n\n <label>Pilih Jenis Material:<\/label>\n <select id=\"material\">\n <optgroup label=\"Kayu\">\n <option value=\"600000\">Kayu Jati Perhutani (Rp 600.000\/m2)<\/option>\n <option value=\"300000\">Kayu Meranti (Rp 300.000\/m2)<\/option>\n <\/optgroup>\n <optgroup label=\"Lantai & Dinding\">\n <option value=\"200000\">Granit 60×60 (Rp 200.000\/m2)<\/option>\n <option value=\"120000\">Keramik Standar (Rp 120.000\/m2)<\/option>\n <option value=\"85000\">Cat Dinding Premium (Rp 85.000\/m2)<\/option>\n <\/optgroup>\n <\/select>\n\n <label>Biaya Jasa Tukang (Rp):<\/label>\n <input type=\"number\" id=\"jasa\" placeholder=\"Total upah tukang\">\n\n <div class=\"button-group\">\n <button class=\"btn-hitung\" onclick=\"hitungTotal()\">Proses Hasil<\/button>\n <button class=\"btn-cetak\" onclick=\"window.print()\">Cetak \/ Simpan PDF<\/button>\n <\/div>\n\n <div id=\"hasil-box\">\n <div id=\"isi-nota\"><\/div>\n \n <div class=\"ttd-area\" id=\"ttd\">\n <div style=\"text-align: center;\">\n Pelanggan,<br><br><br>(………………..)\n <\/div>\n <div style=\"text-align: center;\">\n Hormat Kami,<br><br><br>( Admin Jasa )\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<script>\n \/\/ Fungsi untuk menampilkan logo yang diupload\n function previewLogo(input) {\n if (input.files && input.files[0]) {\n var reader = new FileReader();\n reader.onload = function(e) {\n document.getElementById('logo-tampil').src = e.target.result;\n document.getElementById('logo-tampil').style.display = 'inline-block';\n document.getElementById('logo-tampil').style.maxWidth = '100px';\n }\n reader.readAsDataURL(input.files[0]);\n }\n }\n\n function hitungTotal() {\n const nama = document.getElementById('nama').value || \"................\";\n const p = parseFloat(document.getElementById('panjang').value) || 0;\n const l = parseFloat(document.getElementById('lebar').value) || 0;\n const hargaMat = parseFloat(document.getElementById('material').value);\n const teksMat = document.getElementById('material').options[document.getElementById('material').selectedIndex].text;\n const jasa = parseFloat(document.getElementById('jasa').value) || 0;\n\n const luas = p * l;\n const totalMaterial = luas * hargaMat;\n const totalAkhir = totalMaterial + jasa;\n\n document.getElementById('hasil-box').style.display = \"block\";\n document.getElementById('header-cetak').style.display = \"block\";\n document.getElementById('ttd').style.display = \"flex\";\n \n document.getElementById('isi-nota').innerHTML = `\n <table style=\"width:100%; border-collapse: collapse;\">\n <tr><td><strong>Pelanggan<\/strong><\/td><td>: ${nama}<\/td><\/tr>\n <tr><td><strong>Luas Proyek<\/strong><\/td><td>: ${luas} m\u00b2<\/td><\/tr>\n <tr><td><strong>Material<\/strong><\/td><td>: ${teksMat}<\/td><\/tr>\n <tr><td colspan=\"2\"><hr><\/td><\/tr>\n <tr><td>Subtotal Material<\/td><td>: Rp ${totalMaterial.toLocaleString('id-ID')}<\/td><\/tr>\n <tr><td>Biaya Jasa<\/td><td>: Rp ${jasa.toLocaleString('id-ID')}<\/td><\/tr>\n <tr><td style=\"font-size: 18px; color: #1a73e8;\"><strong>TOTAL AKHIR<\/strong><\/td>\n <td style=\"font-size: 18px; color: #1a73e8;\"><strong>: Rp ${totalAkhir.toLocaleString('id-ID')}<\/strong><\/td><\/tr>\n <\/table>\n `;\n }\n<\/script>\n\n<\/body>\n<\/html>\n\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sistem Nota Tukang Profesional JASA PERTUKANGAN Estimasi Biaya Layanan Profesional INPUT DATA PROYEK Upload Logo Bisnis (Opsional): Nama Pelanggan: Dimensi Area (Panjang x Lebar m): Pilih Jenis Material: Kayu Jati Perhutani (Rp 600.000\/m2)Kayu Meranti (Rp 300.000\/m2) Granit 60×60 (Rp 200.000\/m2)Keramik Standar (Rp 120.000\/m2)Cat Dinding Premium (Rp 85.000\/m2) Biaya Jasa Tukang (Rp): Proses Hasil Cetak \/ […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-661","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/jasarenovasipalu.my.id\/index.php?rest_route=\/wp\/v2\/pages\/661","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jasarenovasipalu.my.id\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jasarenovasipalu.my.id\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jasarenovasipalu.my.id\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jasarenovasipalu.my.id\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=661"}],"version-history":[{"count":2,"href":"https:\/\/jasarenovasipalu.my.id\/index.php?rest_route=\/wp\/v2\/pages\/661\/revisions"}],"predecessor-version":[{"id":664,"href":"https:\/\/jasarenovasipalu.my.id\/index.php?rest_route=\/wp\/v2\/pages\/661\/revisions\/664"}],"wp:attachment":[{"href":"https:\/\/jasarenovasipalu.my.id\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=661"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}