<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Checklist Komitmen Bisnis Hijau</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');
:root {
--green-dark: #1a3d2b;
--green-mid: #2d6a4f;
--green-light: #b7e4c7;
--green-pale: #d8f3dc;
--green-faint: #f0faf2;
--amber: #e76f00;
--amber-light: #fff3e0;
--blue-slate: #1b4965;
--blue-light: #e0f0fa;
--gray-row: #f6faf7;
--text-main: #1a2e1f;
--text-sub: #4a6155;
--border: #c5e0cb;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: 'Plus Jakarta Sans', sans-serif;
background: #eef4ef;
color: var(--text-main);
min-height: 100vh;
padding: 24px 16px 48px;
}
.wrapper {
max-width: 820px;
margin: 0 auto;
}
/* ── HEADER ── */
.header {
background: var(--green-dark);
border-radius: 12px 12px 0 0;
padding: 28px 32px 22px;
color: #fff;
}
.header-eyebrow {
font-size: 11px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--green-light);
margin-bottom: 6px;
}
.header h1 {
font-size: 22px;
font-weight: 700;
line-height: 1.3;
}
.header p {
font-size: 13px;
color: #b7d8c2;
margin-top: 8px;
line-height: 1.6;
}
/* ── IDENTITY BLOCK ── */
.identity {
background: #fff;
border: 1px solid var(--border);
border-top: none;
padding: 20px 32px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 24px;
}
.identity-field label {
display: block;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--text-sub);
margin-bottom: 4px;
}
.identity-field input {
width: 100%;
border: none;
border-bottom: 1.5px solid var(--border);
padding: 5px 0;
font-family: inherit;
font-size: 14px;
color: var(--text-main);
background: transparent;
outline: none;
transition: border-color .2s;
}
.identity-field input:focus { border-color: var(--green-mid); }
@media (max-width: 520px) { .identity { grid-template-columns: 1fr; padding: 16px 20px; } }
/* ── LEGEND ── */
.legend {
background: var(--green-faint);
border: 1px solid var(--border);
border-top: none;
padding: 12px 32px;
display: flex;
gap: 20px;
flex-wrap: wrap;
align-items: center;
}
.legend-title {
font-size: 11px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--text-sub);
margin-right: 4px;
}
.badge {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 12px;
font-weight: 600;
padding: 3px 10px;
border-radius: 20px;
cursor: default;
}
.badge-done { background: #d0f0d8; color: #1a5c30; border: 1px solid #7ec995; }
.badge-plan { background: var(--blue-light); color: var(--blue-slate); border: 1px solid #90c4e0; }
.badge-defer { background: var(--amber-light); color: #7a3d00; border: 1px solid #f0b06a; }
/* ── TABLE ── */
.table-wrap {
background: #fff;
border: 1px solid var(--border);
border-top: none;
}
.section-header {
background: var(--green-mid);
color: #fff;
padding: 8px 32px;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
}
.item-row {
display: grid;
grid-template-columns: 1fr auto;
align-items: start;
gap: 12px;
padding: 14px 32px;
border-bottom: 1px solid #e8f2eb;
transition: background .15s;
}
.item-row:last-child { border-bottom: none; }
.item-row:nth-child(even) { background: var(--gray-row); }
.item-row:hover { background: var(--green-faint); }
.item-label {
font-size: 14px;
color: var(--text-main);
line-height: 1.5;
padding-top: 2px;
}
.item-label .dim { font-size: 12px; color: var(--text-sub); display: block; margin-top: 2px; }
.status-group {
display: flex;
gap: 6px;
flex-shrink: 0;
flex-wrap: wrap;
justify-content: flex-end;
}
.status-btn {
appearance: none;
border: 1.5px solid transparent;
border-radius: 20px;
padding: 4px 12px;
font-family: inherit;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all .18s;
white-space: nowrap;
}
.status-btn.done-opt { border-color: #7ec995; color: #1a5c30; background: #fff; }
.status-btn.plan-opt { border-color: #90c4e0; color: var(--blue-slate); background: #fff; }
.status-btn.defer-opt { border-color: #f0b06a; color: #7a3d00; background: #fff; }
.status-btn.done-opt.active { background: #d0f0d8; border-color: #3a9c62; }
.status-btn.plan-opt.active { background: var(--blue-light); border-color: #4a9ec7; }
.status-btn.defer-opt.active { background: var(--amber-light); border-color: #e07a20; }
.status-btn:hover:not(.active) { opacity: .75; }
/* ── DEFER NOTE ── */
.defer-note-wrap {
display: none;
padding: 0 32px 12px;
background: var(--amber-light);
border-bottom: 1px solid #f0d5ab;
}
.defer-note-wrap.visible { display: block; }
.defer-note-wrap label {
display: block;
font-size: 11px;
font-weight: 700;
color: #7a3d00;
text-transform: uppercase;
letter-spacing: .8px;
margin-bottom: 4px;
}
.defer-note-wrap textarea {
width: 100%;
resize: vertical;
border: 1px solid #f0b06a;
border-radius: 6px;
padding: 7px 10px;
font-family: inherit;
font-size: 13px;
color: var(--text-main);
min-height: 56px;
outline: none;
background: #fff;
}
.defer-note-wrap textarea:focus { border-color: var(--amber); }
/* ── PLAN DATE ── */
.plan-date-wrap {
display: none;
padding: 0 32px 12px;
background: var(--blue-light);
border-bottom: 1px solid #b0d8ef;
}
.plan-date-wrap.visible { display: block; }
.plan-date-wrap label {
display: block;
font-size: 11px;
font-weight: 700;
color: var(--blue-slate);
text-transform: uppercase;
letter-spacing: .8px;
margin-bottom: 4px;
}
.plan-date-wrap input[type="month"] {
border: 1px solid #90c4e0;
border-radius: 6px;
padding: 5px 10px;
font-family: inherit;
font-size: 13px;
color: var(--text-main);
outline: none;
background: #fff;
}
.plan-date-wrap input:focus { border-color: var(--blue-slate); }
/* ── SUMMARY BAR ── */
.summary {
background: var(--green-dark);
color: #fff;
padding: 16px 32px;
display: flex;
gap: 24px;
flex-wrap: wrap;
align-items: center;
border-radius: 0 0 0 0;
}
.summary-title {
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--green-light);
margin-right: 8px;
}
.summary-stat {
display: flex;
align-items: center;
gap: 6px;
font-size: 14px;
font-weight: 600;
}
.dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.dot-done { background: #6ecf8a; }
.dot-plan { background: #7ec8e8; }
.dot-defer { background: #f5a840; }
/* ── NOTES + SIGNATURE ── */
.notes-section {
background: #fff;
border: 1px solid var(--border);
border-top: none;
padding: 20px 32px;
}
.notes-section h3 {
font-size: 13px;
font-weight: 700;
color: var(--green-dark);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 10px;
}
.notes-section textarea {
width: 100%;
min-height: 72px;
border: 1px solid var(--border);
border-radius: 6px;
padding: 10px;
font-family: inherit;
font-size: 13px;
resize: vertical;
outline: none;
}
.notes-section textarea:focus { border-color: var(--green-mid); }
.sig-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-top: 16px;
}
.sig-field label {
display: block;
font-size: 11px;
font-weight: 700;
color: var(--text-sub);
text-transform: uppercase;
letter-spacing: .8px;
margin-bottom: 4px;
}
.sig-field input {
width: 100%;
border: none;
border-bottom: 1.5px solid var(--border);
padding: 5px 0;
font-family: inherit;
font-size: 14px;
background: transparent;
outline: none;
}
.sig-field input:focus { border-color: var(--green-mid); }
@media (max-width: 520px) { .sig-row { grid-template-columns: 1fr; } }
/* ── ACTION BUTTONS ── */
.actions {
background: var(--green-faint);
border: 1px solid var(--border);
border-top: none;
border-radius: 0 0 12px 12px;
padding: 16px 32px;
display: flex;
gap: 12px;
justify-content: flex-end;
flex-wrap: wrap;
}
.btn {
border: none;
border-radius: 8px;
padding: 10px 22px;
font-family: inherit;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: opacity .2s;
letter-spacing: .3px;
}
.btn:hover { opacity: .85; }
.btn-reset { background: #fff; color: var(--text-sub); border: 1.5px solid var(--border); }
.btn-print { background: var(--green-mid); color: #fff; }
.btn-export { background: var(--green-dark); color: #fff; }
@media print {
body { background: #fff; padding: 0; }
.actions, .btn { display: none !important; }
.wrapper { max-width: 100%; }
.status-btn { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.header, .section-header, .summary { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}
@media (max-width: 600px) {
.item-row { grid-template-columns: 1fr; gap: 8px; }
.status-group { justify-content: flex-start; }
.header, .identity, .legend, .notes-section, .actions,
.section-header, .defer-note-wrap, .plan-date-wrap { padding-left: 16px; padding-right: 16px; }
.item-row { padding-left: 16px; padding-right: 16px; }
.summary { padding: 14px 16px; gap: 12px; }
}
</style>
</head>
<body>
<div class="wrapper">
<!-- HEADER -->
<div class="header">
<div class="header-eyebrow">GIZ IKI-JET · Training 2.3 · Samarinda</div>
<h1>Checklist Komitmen & Action Plan<br>Transisi Bisnis Hijau UMKM</h1>
<p>Tandai status pelaksanaan setiap aktivitas menuju bisnis hijau. Formulir ini menjadi dasar komitmen peserta dan bahan monitoring pendampingan.</p>
</div>
<!-- IDENTITY -->
<div class="identity">
<div class="identity-field">
<label>Nama Pemilik / Pengelola</label>
<input type="text" placeholder="Tulis nama lengkap">
</div>
<div class="identity-field">
<label>Nama Usaha</label>
<input type="text" placeholder="Nama UMKM / usaha">
</div>
<div class="identity-field">
<label>Jenis Usaha / Sektor</label>
<input type="text" placeholder="Contoh: pengolahan maggot, kuliner, fashion">
</div>
<div class="identity-field">
<label>Tanggal Pengisian</label>
<input type="date">
</div>
</div>
<!-- LEGEND -->
<div class="legend">
<span class="legend-title">Keterangan:</span>
<span class="badge badge-done">✓ Sudah Dijalankan</span>
<span class="badge badge-plan">→ Akan Dijalankan</span>
<span class="badge badge-defer">⏸ Ditunda</span>
</div>
<!-- TABLE -->
<div class="table-wrap" id="checklistTable">
<!-- INPUT -->
<div class="section-header">INPUT — Bahan Baku & Pemasok</div>
<div class="item-row" data-id="1">
<div class="item-label">
Seleksi pemasok lokal bersertifikat
<span class="dim">Audit rantai pasok bahan baku; prioritas pemasok lokal yang terverifikasi</span>
</div>
<div class="status-group">
<button class="status-btn done-opt" onclick="setStatus(this,'done')">✓ Sudah</button>
<button class="status-btn plan-opt" onclick="setStatus(this,'plan')">→ Akan</button>
<button class="status-btn defer-opt" onclick="setStatus(this,'defer')">⏸ Tunda</button>
</div>
</div>
<div class="plan-date-wrap" id="plan-1"><label>Target bulan mulai:</label><input type="month"></div>
<div class="defer-note-wrap" id="defer-1"><label>Alasan penundaan:</label><textarea placeholder="Tuliskan pertimbangan / kendala..."></textarea></div>
<div class="item-row" data-id="2">
<div class="item-label">
Substitusi bahan kimia berbahaya
<span class="dim">Ganti dengan alternatif organik atau bahan daur ulang</span>
</div>
<div class="status-group">
<button class="status-btn done-opt" onclick="setStatus(this,'done')">✓ Sudah</button>
<button class="status-btn plan-opt" onclick="setStatus(this,'plan')">→ Akan</button>
<button class="status-btn defer-opt" onclick="setStatus(this,'defer')">⏸ Tunda</button>
</div>
</div>
<div class="plan-date-wrap" id="plan-2"><label>Target bulan mulai:</label><input type="month"></div>
<div class="defer-note-wrap" id="defer-2"><label>Alasan penundaan:</label><textarea placeholder="Tuliskan pertimbangan / kendala..."></textarea></div>
<div class="item-row" data-id="3">
<div class="item-label">
Penggunaan bahan baku terbarukan
<span class="dim">Pencatatan jejak karbon pemasok; preferensi bahan baku rendah emisi</span>
</div>
<div class="status-group">
<button class="status-btn done-opt" onclick="setStatus(this,'done')">✓ Sudah</button>
<button class="status-btn plan-opt" onclick="setStatus(this,'plan')">→ Akan</button>
<button class="status-btn defer-opt" onclick="setStatus(this,'defer')">⏸ Tunda</button>
</div>
</div>
<div class="plan-date-wrap" id="plan-3"><label>Target bulan mulai:</label><input type="month"></div>
<div class="defer-note-wrap" id="defer-3"><label>Alasan penundaan:</label><textarea placeholder="Tuliskan pertimbangan / kendala..."></textarea></div>
<!-- PROSES PRODUKSI -->
<div class="section-header">PROSES PRODUKSI — Efisiensi & Limbah</div>
<div class="item-row" data-id="4">
<div class="item-label">
Instalasi sistem daur ulang air
<span class="dim">Pengolahan limbah cair dan limbah padat sesuai standar lingkungan</span>
</div>
<div class="status-group">
<button class="status-btn done-opt" onclick="setStatus(this,'done')">✓ Sudah</button>
<button class="status-btn plan-opt" onclick="setStatus(this,'plan')">→ Akan</button>
<button class="status-btn defer-opt" onclick="setStatus(this,'defer')">⏸ Tunda</button>
</div>
</div>
<div class="plan-date-wrap" id="plan-4"><label>Target bulan mulai:</label><input type="month"></div>
<div class="defer-note-wrap" id="defer-4"><label>Alasan penundaan:</label><textarea placeholder="Tuliskan pertimbangan / kendala..."></textarea></div>
<div class="item-row" data-id="5">
<div class="item-label">
Adopsi mesin hemat energi
<span class="dim">Penerapan prinsip zero waste to landfill; pemilahan dan pemanfaatan sisa produksi</span>
</div>
<div class="status-group">
<button class="status-btn done-opt" onclick="setStatus(this,'done')">✓ Sudah</button>
<button class="status-btn plan-opt" onclick="setStatus(this,'plan')">→ Akan</button>
<button class="status-btn defer-opt" onclick="setStatus(this,'defer')">⏸ Tunda</button>
</div>
</div>
<div class="plan-date-wrap" id="plan-5"><label>Target bulan mulai:</label><input type="month"></div>
<div class="defer-note-wrap" id="defer-5"><label>Alasan penundaan:</label><textarea placeholder="Tuliskan pertimbangan / kendala..."></textarea></div>
<!-- KEMASAN -->
<div class="section-header">KEMASAN — Produk & Pengemasan</div>
<div class="item-row" data-id="6">
<div class="item-label">
Desain kemasan minimalis biodegradable
<span class="dim">Eliminasi plastik sekali pakai; transisi ke kemasan ramah lingkungan</span>
</div>
<div class="status-group">
<button class="status-btn done-opt" onclick="setStatus(this,'done')">✓ Sudah</button>
<button class="status-btn plan-opt" onclick="setStatus(this,'plan')">→ Akan</button>
<button class="status-btn defer-opt" onclick="setStatus(this,'defer')">⏸ Tunda</button>
</div>
</div>
<div class="plan-date-wrap" id="plan-6"><label>Target bulan mulai:</label><input type="month"></div>
<div class="defer-note-wrap" id="defer-6"><label>Alasan penundaan:</label><textarea placeholder="Tuliskan pertimbangan / kendala..."></textarea></div>
<!-- ENERGI -->
<div class="section-header">ENERGI — Sumber & Konsumsi</div>
<div class="item-row" data-id="7">
<div class="item-label">
Pemasangan panel surya / biogas
<span class="dim">Transisi ke sumber energi terbarukan; audit konsumsi listrik berkala</span>
</div>
<div class="status-group">
<button class="status-btn done-opt" onclick="setStatus(this,'done')">✓ Sudah</button>
<button class="status-btn plan-opt" onclick="setStatus(this,'plan')">→ Akan</button>
<button class="status-btn defer-opt" onclick="setStatus(this,'defer')">⏸ Tunda</button>
</div>
</div>
<div class="plan-date-wrap" id="plan-7"><label>Target bulan mulai:</label><input type="month"></div>
<div class="defer-note-wrap" id="defer-7"><label>Alasan penundaan:</label><textarea placeholder="Tuliskan pertimbangan / kendala..."></textarea></div>
<div class="item-row" data-id="8">
<div class="item-label">
Audit & optimalisasi konsumsi listrik
<span class="dim">Identifikasi titik boros energi; langkah penghematan terukur</span>
</div>
<div class="status-group">
<button class="status-btn done-opt" onclick="setStatus(this,'done')">✓ Sudah</button>
<button class="status-btn plan-opt" onclick="setStatus(this,'plan')">→ Akan</button>
<button class="status-btn defer-opt" onclick="setStatus(this,'defer')">⏸ Tunda</button>
</div>
</div>
<div class="plan-date-wrap" id="plan-8"><label>Target bulan mulai:</label><input type="month"></div>
<div class="defer-note-wrap" id="defer-8"><label>Alasan penundaan:</label><textarea placeholder="Tuliskan pertimbangan / kendala..."></textarea></div>
<!-- TRANSPORTASI -->
<div class="section-header">TRANSPORTASI — Distribusi & Logistik</div>
<div class="item-row" data-id="9">
<div class="item-label">
Konsolidasi pengiriman
<span class="dim">Menggabungkan rute/jadwal pengiriman untuk efisiensi bahan bakar dan emisi</span>
</div>
<div class="status-group">
<button class="status-btn done-opt" onclick="setStatus(this,'done')">✓ Sudah</button>
<button class="status-btn plan-opt" onclick="setStatus(this,'plan')">→ Akan</button>
<button class="status-btn defer-opt" onclick="setStatus(this,'defer')">⏸ Tunda</button>
</div>
</div>
<div class="plan-date-wrap" id="plan-9"><label>Target bulan mulai:</label><input type="month"></div>
<div class="defer-note-wrap" id="defer-9"><label>Alasan penundaan:</label><textarea placeholder="Tuliskan pertimbangan / kendala..."></textarea></div>
<div class="item-row" data-id="10">
<div class="item-label">
Transisi ke kendaraan listrik / gas
<span class="dim">Rencana pergantian armada operasional ke kendaraan rendah emisi</span>
</div>
<div class="status-group">
<button class="status-btn done-opt" onclick="setStatus(this,'done')">✓ Sudah</button>
<button class="status-btn plan-opt" onclick="setStatus(this,'plan')">→ Akan</button>
<button class="status-btn defer-opt" onclick="setStatus(this,'defer')">⏸ Tunda</button>
</div>
</div>
<div class="plan-date-wrap" id="plan-10"><label>Target bulan mulai:</label><input type="month"></div>
<div class="defer-note-wrap" id="defer-10"><label>Alasan penundaan:</label><textarea placeholder="Tuliskan pertimbangan / kendala..."></textarea></div>
<!-- PEMASARAN -->
<div class="section-header">PEMASARAN — Branding & Pasar Hijau</div>
<div class="item-row" data-id="11">
<div class="item-label">
Sertifikasi eco-label
<span class="dim">Kampanye edukasi konsumen tentang nilai hijau produk</span>
</div>
<div class="status-group">
<button class="status-btn done-opt" onclick="setStatus(this,'done')">✓ Sudah</button>
<button class="status-btn plan-opt" onclick="setStatus(this,'plan')">→ Akan</button>
<button class="status-btn defer-opt" onclick="setStatus(this,'defer')">⏸ Tunda</button>
</div>
</div>
<div class="plan-date-wrap" id="plan-11"><label>Target bulan mulai:</label><input type="month"></div>
<div class="defer-note-wrap" id="defer-11"><label>Alasan penundaan:</label><textarea placeholder="Tuliskan pertimbangan / kendala..."></textarea></div>
<div class="item-row" data-id="12">
<div class="item-label">
Pemasaran digital hijau
<span class="dim">Kolaborasi dengan komunitas peduli lingkungan; narasi dampak sosial-ekologis</span>
</div>
<div class="status-group">
<button class="status-btn done-opt" onclick="setStatus(this,'done')">✓ Sudah</button>
<button class="status-btn plan-opt" onclick="setStatus(this,'plan')">→ Akan</button>
<button class="status-btn defer-opt" onclick="setStatus(this,'defer')">⏸ Tunda</button>
</div>
</div>
<div class="plan-date-wrap" id="plan-12"><label>Target bulan mulai:</label><input type="month"></div>
<div class="defer-note-wrap" id="defer-12"><label>Alasan penundaan:</label><textarea placeholder="Tuliskan pertimbangan / kendala..."></textarea></div>
<!-- PRODUK -->
<div class="section-header">PRODUK — Kualitas & Sertifikasi Hijau</div>
<div class="item-row" data-id="13">
<div class="item-label">
Sertifikasi halal-hijau & izin edar produk
<span class="dim">Mengurus sertifikasi halal, PIRT, atau izin edar yang menyertakan klaim ramah lingkungan</span>
</div>
<div class="status-group">
<button class="status-btn done-opt" onclick="setStatus(this,'done')">✓ Sudah</button>
<button class="status-btn plan-opt" onclick="setStatus(this,'plan')">→ Akan</button>
<button class="status-btn defer-opt" onclick="setStatus(this,'defer')">⏸ Tunda</button>
</div>
</div>
<div class="plan-date-wrap" id="plan-13"><label>Target bulan mulai:</label><input type="month"></div>
<div class="defer-note-wrap" id="defer-13"><label>Alasan penundaan:</label><textarea placeholder="Tuliskan pertimbangan / kendala..."></textarea></div>
<div class="item-row" data-id="14">
<div class="item-label">
Uji kualitas & keamanan produk secara berkala
<span class="dim">Pengujian kandungan, shelf-life, dan standar keamanan produk; dokumentasi hasil uji</span>
</div>
<div class="status-group">
<button class="status-btn done-opt" onclick="setStatus(this,'done')">✓ Sudah</button>
<button class="status-btn plan-opt" onclick="setStatus(this,'plan')">→ Akan</button>
<button class="status-btn defer-opt" onclick="setStatus(this,'defer')">⏸ Tunda</button>
</div>
</div>
<div class="plan-date-wrap" id="plan-14"><label>Target bulan mulai:</label><input type="month"></div>
<div class="defer-note-wrap" id="defer-14"><label>Alasan penundaan:</label><textarea placeholder="Tuliskan pertimbangan / kendala..."></textarea></div>
<!-- KEUANGAN HIJAU -->
<div class="section-header">KEUANGAN — Pembiayaan & Pencatatan Hijau</div>
<div class="item-row" data-id="15">
<div class="item-label">
Mengakses pembiayaan hijau / KUR hijau
<span class="dim">Menjajaki KUR berbasis proyek hijau, dana CSR, atau hibah program lingkungan dari lembaga keuangan</span>
</div>
<div class="status-group">
<button class="status-btn done-opt" onclick="setStatus(this,'done')">✓ Sudah</button>
<button class="status-btn plan-opt" onclick="setStatus(this,'plan')">→ Akan</button>
<button class="status-btn defer-opt" onclick="setStatus(this,'defer')">⏸ Tunda</button>
</div>
</div>
<div class="plan-date-wrap" id="plan-15"><label>Target bulan mulai:</label><input type="month"></div>
<div class="defer-note-wrap" id="defer-15"><label>Alasan penundaan:</label><textarea placeholder="Tuliskan pertimbangan / kendala..."></textarea></div>
<div class="item-row" data-id="16">
<div class="item-label">
Pencatatan biaya & manfaat lingkungan (green cost accounting)
<span class="dim">Mencatat biaya pengelolaan limbah, penghematan energi, dan manfaat ekonomi dari praktik hijau dalam pembukuan</span>
</div>
<div class="status-group">
<button class="status-btn done-opt" onclick="setStatus(this,'done')">✓ Sudah</button>
<button class="status-btn plan-opt" onclick="setStatus(this,'plan')">→ Akan</button>
<button class="status-btn defer-opt" onclick="setStatus(this,'defer')">⏸ Tunda</button>
</div>
</div>
<div class="plan-date-wrap" id="plan-16"><label>Target bulan mulai:</label><input type="month"></div>
<div class="defer-note-wrap" id="defer-16"><label>Alasan penundaan:</label><textarea placeholder="Tuliskan pertimbangan / kendala..."></textarea></div>
<!-- DAMPAK -->
<div class="section-header">DAMPAK — Pengukuran & Pelaporan</div>
<div class="item-row" data-id="17">
<div class="item-label">
Pengukuran dampak sosial-lingkungan secara sederhana
<span class="dim">Menggunakan tool sederhana (SROI dasar, kartu skor dampak) untuk membuktikan manfaat nyata ke komunitas dan lingkungan</span>
</div>
<div class="status-group">
<button class="status-btn done-opt" onclick="setStatus(this,'done')">✓ Sudah</button>
<button class="status-btn plan-opt" onclick="setStatus(this,'plan')">→ Akan</button>
<button class="status-btn defer-opt" onclick="setStatus(this,'defer')">⏸ Tunda</button>
</div>
</div>
<div class="plan-date-wrap" id="plan-17"><label>Target bulan mulai:</label><input type="month"></div>
<div class="defer-note-wrap" id="defer-17"><label>Alasan penundaan:</label><textarea placeholder="Tuliskan pertimbangan / kendala..."></textarea></div>
<div class="item-row" data-id="18">
<div class="item-label">
Pelaporan dampak lingkungan ke komunitas / mitra
<span class="dim">Menyusun laporan dampak singkat (1–2 halaman) yang dikomunikasikan ke pelanggan, komunitas lokal, atau mitra pembeli</span>
</div>
<div class="status-group">
<button class="status-btn done-opt" onclick="setStatus(this,'done')">✓ Sudah</button>
<button class="status-btn plan-opt" onclick="setStatus(this,'plan')">→ Akan</button>
<button class="status-btn defer-opt" onclick="setStatus(this,'defer')">⏸ Tunda</button>
</div>
</div>
<div class="plan-date-wrap" id="plan-18"><label>Target bulan mulai:</label><input type="month"></div>
<div class="defer-note-wrap" id="defer-18"><label>Alasan penundaan:</label><textarea placeholder="Tuliskan pertimbangan / kendala..."></textarea></div>
<!-- TATA KELOLA -->
<div class="section-header">TATA KELOLA — SDM & SOP Hijau</div>
<div class="item-row" data-id="19">
<div class="item-label">
Penyusunan SOP operasional berbasis prinsip hijau
<span class="dim">Mendokumentasikan prosedur kerja yang mengintegrasikan efisiensi energi, pengelolaan limbah, dan keselamatan kerja</span>
</div>
<div class="status-group">
<button class="status-btn done-opt" onclick="setStatus(this,'done')">✓ Sudah</button>
<button class="status-btn plan-opt" onclick="setStatus(this,'plan')">→ Akan</button>
<button class="status-btn defer-opt" onclick="setStatus(this,'defer')">⏸ Tunda</button>
</div>
</div>
<div class="plan-date-wrap" id="plan-19"><label>Target bulan mulai:</label><input type="month"></div>
<div class="defer-note-wrap" id="defer-19"><label>Alasan penundaan:</label><textarea placeholder="Tuliskan pertimbangan / kendala..."></textarea></div>
<div class="item-row" data-id="20">
<div class="item-label">
Pelatihan SDM internal tentang praktik bisnis hijau
<span class="dim">Memberikan orientasi dan pelatihan rutin kepada karyawan / anggota keluarga tentang nilai dan praktik operasional hijau</span>
</div>
<div class="status-group">
<button class="status-btn done-opt" onclick="setStatus(this,'done')">✓ Sudah</button>
<button class="status-btn plan-opt" onclick="setStatus(this,'plan')">→ Akan</button>
<button class="status-btn defer-opt" onclick="setStatus(this,'defer')">⏸ Tunda</button>
</div>
</div>
<div class="plan-date-wrap" id="plan-20"><label>Target bulan mulai:</label><input type="month"></div>
<div class="defer-note-wrap" id="defer-20"><label>Alasan penundaan:</label><textarea placeholder="Tuliskan pertimbangan / kendala..."></textarea></div>
</div><!-- /table-wrap -->
<!-- SUMMARY BAR -->
<div class="summary" id="summaryBar">
<span class="summary-title">Ringkasan:</span>
<span class="summary-stat"><span class="dot dot-done"></span> <span id="cnt-done">0</span> Sudah dijalankan</span>
<span class="summary-stat"><span class="dot dot-plan"></span> <span id="cnt-plan">0</span> Akan dijalankan</span>
<span class="summary-stat"><span class="dot dot-defer"></span> <span id="cnt-defer">0</span> Ditunda</span>
<span class="summary-stat" style="color:#a8d5b5; margin-left:auto; font-weight:400; font-size:12px;" id="cnt-blank"></span>
</div>
<!-- NOTES & SIGNATURE -->
<div class="notes-section">
<h3>Catatan Tambahan & Komitmen Peserta</h3>
<textarea placeholder="Tuliskan catatan, hambatan utama, kebutuhan pendampingan, atau komitmen spesifik yang ingin disampaikan..."></textarea>
<div class="sig-row">
<div class="sig-field">
<label>Nama & Tanda Tangan Peserta</label>
<input type="text" placeholder="">
</div>
<div class="sig-field">
<label>Nama & Tanda Tangan Fasilitator</label>
<input type="text" placeholder="">
</div>
</div>
</div>
<!-- SUBMIT SECTION -->
<div class="submit-section" id="submitSection">
<div class="submit-inner">
<div class="submit-info">
<span class="submit-icon">📤</span>
<div>
<div class="submit-title">Kirim ke Fasilitator</div>
<div class="submit-desc">Data akan tersimpan otomatis ke Google Sheets yang dipantau fasilitator GIZ IKI-JET</div>
</div>
</div>
<div class="submit-warning" id="submitWarning" style="display:none">
⚠️ <span id="submitWarningText"></span>
</div>
</div>
</div>
<!-- ACTIONS -->
<div class="actions">
<button class="btn btn-reset" onclick="resetAll()">Reset Form</button>
<button class="btn btn-print" onclick="window.print()">🖨 Cetak / PDF</button>
<button class="btn btn-submit" id="btnSubmit" onclick="submitForm()">✈ Kirim ke Fasilitator</button>
</div>
<!-- SUCCESS OVERLAY -->
<div class="overlay" id="overlay" style="display:none">
<div class="overlay-box">
<div class="overlay-icon">✅</div>
<h2>Data Berhasil Dikirim!</h2>
<p id="overlayName"></p>
<p class="overlay-sub">Fasilitator sudah menerima checklist Anda. Simpan salinan dengan tombol di bawah.</p>
<div class="overlay-actions">
<button class="btn btn-print" onclick="window.print(); closeOverlay()">🖨 Cetak Salinan</button>
<button class="btn btn-reset" onclick="closeOverlay()">Tutup</button>
</div>
</div>
</div>
</div><!-- /wrapper -->
<style>
/* ── SUBMIT SECTION ── */
.submit-section {
background: #fff;
border: 1px solid var(--border);
border-top: none;
padding: 16px 32px;
}
.submit-inner { display: flex; flex-direction: column; gap: 10px; }
.submit-info { display: flex; align-items: flex-start; gap: 12px; }
.submit-icon { font-size: 22px; flex-shrink: 0; margin-top: 2px; }
.submit-title { font-size: 14px; font-weight: 700; color: var(--green-dark); }
.submit-desc { font-size: 12px; color: var(--text-sub); margin-top: 2px; line-height: 1.5; }
.submit-warning {
background: #fff8e1; border: 1px solid #ffe082; border-radius: 6px;
padding: 8px 12px; font-size: 12px; color: #7a5000; line-height: 1.5;
}
.btn-submit {
background: var(--green-mid); color: #fff;
font-size: 14px; padding: 11px 28px;
}
.btn-submit:disabled {
background: #aaa; cursor: not-allowed; opacity: 1;
}
/* ── SCRIPT PLACEHOLDER NOTICE ── */
.script-config {
background: #fffde7; border: 2px dashed #f9a825;
border-radius: 8px; padding: 14px 18px; margin: 0 32px 0;
font-size: 12px; color: #5d4037; line-height: 1.7;
}
.script-config strong { color: #e65100; }
/* ── OVERLAY ── */
.overlay {
position: fixed; inset: 0; background: rgba(0,0,0,.55);
display: flex; align-items: center; justify-content: center; z-index: 999;
}
.overlay-box {
background: #fff; border-radius: 16px; padding: 36px 40px;
max-width: 420px; width: 90%; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.overlay-icon { font-size: 48px; margin-bottom: 12px; }
.overlay-box h2 { font-size: 20px; color: var(--green-dark); margin-bottom: 8px; }
.overlay-box p { font-size: 14px; color: var(--text-sub); margin-bottom: 6px; }
.overlay-sub { font-size: 13px !important; }
.overlay-actions { display: flex; gap: 10px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }
@media (max-width: 600px) {
.submit-section { padding: 14px 16px; }
.overlay-box { padding: 28px 20px; }
}
@media print {
.submit-section, .overlay { display: none !important; }
}
</style>
<script>
// ─────────────────────────────────────────────
// ⚙️ KONFIGURASI — ISI SETELAH SETUP APPS SCRIPT
// ─────────────────────────────────────────────
const APPS_SCRIPT_URL = 'GANTI_DENGAN_URL_APPS_SCRIPT_ANDA';
// Contoh: 'https://script.google.com/macros/s/AKfy.../exec'
// ─────────────────────────────────────────────
const TOTAL = 20;
const labels = {
1: 'Seleksi pemasok lokal bersertifikat',
2: 'Substitusi bahan kimia berbahaya',
3: 'Penggunaan bahan baku terbarukan',
4: 'Instalasi sistem daur ulang air',
5: 'Adopsi mesin hemat energi',
6: 'Desain kemasan minimalis biodegradable',
7: 'Pemasangan panel surya / biogas',
8: 'Audit & optimalisasi konsumsi listrik',
9: 'Konsolidasi pengiriman',
10: 'Transisi ke kendaraan listrik / gas',
11: 'Sertifikasi eco-label',
12: 'Pemasaran digital hijau',
13: 'Sertifikasi halal-hijau & izin edar produk',
14: 'Uji kualitas & keamanan produk secara berkala',
15: 'Mengakses pembiayaan hijau / KUR hijau',
16: 'Pencatatan biaya & manfaat lingkungan (green cost accounting)',
17: 'Pengukuran dampak sosial-lingkungan secara sederhana',
18: 'Pelaporan dampak lingkungan ke komunitas / mitra',
19: 'Penyusunan SOP operasional berbasis prinsip hijau',
20: 'Pelatihan SDM internal tentang praktik bisnis hijau'
};
function setStatus(btn, type) {
const row = btn.closest('.item-row');
const id = row.dataset.id;
const wasActive = btn.classList.contains('active');
row.querySelectorAll('.status-btn').forEach(b => b.classList.remove('active'));
const deferWrap = document.getElementById('defer-' + id);
const planWrap = document.getElementById('plan-' + id);
if (!wasActive) {
btn.classList.add('active');
deferWrap.classList.toggle('visible', type === 'defer');
planWrap.classList.toggle('visible', type === 'plan');
} else {
deferWrap.classList.remove('visible');
planWrap.classList.remove('visible');
}
updateSummary();
}
function updateSummary() {
let done = 0, plan = 0, defer = 0;
for (let i = 1; i <= TOTAL; i++) {
const row = document.querySelector(`[data-id="${i}"]`);
if (!row) continue;
if (row.querySelector('.done-opt.active')) done++;
else if (row.querySelector('.plan-opt.active')) plan++;
else if (row.querySelector('.defer-opt.active')) defer++;
}
document.getElementById('cnt-done').textContent = done;
document.getElementById('cnt-plan').textContent = plan;
document.getElementById('cnt-defer').textContent = defer;
const blank = TOTAL - done - plan - defer;
document.getElementById('cnt-blank').textContent =
blank > 0 ? `${blank} belum diisi` : '✓ Semua item telah diisi';
}
function collectData() {
const nama = document.querySelectorAll('.identity-field input')[0].value.trim();
const usaha = document.querySelectorAll('.identity-field input')[1].value.trim();
const sektor = document.querySelectorAll('.identity-field input')[2].value.trim();
const tanggal = document.querySelectorAll('.identity-field input')[3].value;
const catatan = document.querySelector('.notes-section textarea').value.trim();
const items = [];
for (let i = 1; i <= TOTAL; i++) {
const row = document.querySelector(`[data-id="${i}"]`);
let status = 'belum_diisi', note = '', targetBulan = '';
if (row.querySelector('.done-opt.active')) status = 'sudah';
else if (row.querySelector('.plan-opt.active')) {
status = 'akan';
const el = document.querySelector(`#plan-${i} input`);
if (el) targetBulan = el.value;
}
else if (row.querySelector('.defer-opt.active')) {
status = 'tunda';
const el = document.querySelector(`#defer-${i} textarea`);
if (el) note = el.value.trim();
}
items.push({ id: i, label: labels[i], status, targetBulan, note });
}
return { nama, usaha, sektor, tanggal, catatan, items, timestamp: new Date().toISOString() };
}
function validateForm(data) {
const missing = [];
if (!data.nama) missing.push('Nama pemilik');
if (!data.usaha) missing.push('Nama usaha');
if (!data.tanggal) missing.push('Tanggal pengisian');
const belum = data.items.filter(i => i.status === 'belum_diisi').length;
if (belum > 0) missing.push(`${belum} aktivitas belum dipilih statusnya`);
return missing;
}
async function submitForm() {
const data = collectData();
const errors = validateForm(data);
const warningEl = document.getElementById('submitWarning');
const warningText = document.getElementById('submitWarningText');
if (errors.length > 0) {
warningText.textContent = 'Lengkapi dulu: ' + errors.join(' · ');
warningEl.style.display = 'block';
warningEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
return;
}
warningEl.style.display = 'none';
if (APPS_SCRIPT_URL === 'GANTI_DENGAN_URL_APPS_SCRIPT_ANDA') {
alert('⚙️ URL Apps Script belum diisi.\n\nBuka file HTML ini, cari baris:\nconst APPS_SCRIPT_URL = \'https://docs.google.com/spreadsheets/d/1TItCuSEe9Yz61sie4tfMS_tSsMT0IWnrcDjsUlrEiz4/edit?usp=drivesdk...\'\ndan ganti dengan URL deployment Anda.');
return;
}
const btn = document.getElementById('btnSubmit');
btn.disabled = true;
btn.textContent = '⏳ Mengirim...';
try {
const resp = await fetch(APPS_SCRIPT_URL, {
method: 'POST',
mode: 'no-cors',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data)
});
// no-cors = opaque response, assume success if no network error
document.getElementById('overlayName').textContent =
`${data.nama} — ${data.usaha}`;
document.getElementById('overlay').style.display = 'flex';
btn.textContent = '✅ Terkirim';
} catch (err) {
btn.disabled = false;
btn.textContent = '✈ Kirim ke Fasilitator';
warningText.textContent = 'Gagal mengirim. Periksa koneksi internet lalu coba lagi.';
warningEl.style.display = 'block';
}
}
function closeOverlay() {
document.getElementById('overlay').style.display = 'none';
}
function resetAll() {
if (!confirm('Reset semua pilihan dan catatan?')) return;
document.querySelectorAll('.status-btn').forEach(b => b.classList.remove('active'));
document.querySelectorAll('.defer-note-wrap, .plan-date-wrap').forEach(w => w.classList.remove('visible'));
document.querySelectorAll('textarea, input[type="text"], input[type="date"], input[type="month"]').forEach(el => el.value = '');
const btn = document.getElementById('btnSubmit');
btn.disabled = false; btn.textContent = '✈ Kirim ke Fasilitator';
document.getElementById('submitWarning').style.display = 'none';
updateSummary();
}
updateSummary();
</script>
</body>
</html>
