←

Input Progress QE Utilitas

ED REG Sumbagut

Cari (Nama LOP atau ID Digasss)

Progress Keseluruhan 0%

Progress Aktual per Item

Memuat item...

Catatan & Evidence

Catatan Progress Hari Ini

Foto Evidence

Ambil Foto Upload dari Galeri

Hapus foto

Ganti pekerjaan lain

--green:#22c55e; --orange:#f59e0b; --red:#ef4444; --shadow:0 4px 18px rgba(0,0,0,.35); } *{box-sizing:border-box;} body{ margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; background:var(--bg); color:var(--text); padding-bottom:28px; } header{ background:var(--bg2); padding:16px; position:sticky; top:0; z-index:10; border-bottom:1px solid var(--card-border); display:flex; align-items:center; gap:12px; } .back-btn{ width:34px; height:34px; border-radius:9px; background:var(--card); border:1px solid var(--card-border); color:var(--accent2); display:flex; align-items:center; justify-content:center; font-size:16px; text-decoration:none; flex-shrink:0; } header h1{margin:0; font-size:17px; font-weight:700;} header p{margin:3px 0 0; font-size:12px; color:var(--sub);} .section{padding:14px;} .card{ background:var(--card); border-radius:14px; padding:15px; border:1px solid var(--card-border); margin-bottom:12px; box-shadow:var(--shadow); } label{display:block; font-size:11px; font-weight:700; color:var(--accent2); margin-bottom:6px; text-transform:uppercase; letter-spacing:.4px;} input[type=text], input[type=number], textarea{ width:100%; padding:12px; border:1px solid var(--card-border); border-radius:10px; font-size:14px; background:var(--bg2); color:var(--text); font-family:inherit; } input[type=text]:focus, input[type=number]:focus, textarea:focus{ outline:none; border-color:var(--accent); } textarea{resize:vertical; min-height:70px;} ::placeholder{color:#5b6478;} .result-item{ padding:11px 12px; border-radius:10px; cursor:pointer; font-size:14px; margin-top:6px; background:var(--bg2); border:1px solid var(--card-border); } .result-item .loc{font-size:11px; color:var(--sub); margin-top:3px;} .result-item:active{border-color:var(--accent);} .selected-card{display:none;} .selected-card.show{display:block;} .selected-card .lop{font-weight:700; font-size:15px; margin-bottom:2px;} .selected-card .loc{font-size:12px; color:var(--sub); margin-bottom:14px;} .duration-badge{ display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:600; color:var(--orange); background:rgba(245,158,11,.12); border:1px solid rgba(245,158,11,.3); border-radius:999px; padding:6px 12px; margin-bottom:14px; } .duration-badge b{font-weight:800;} .duration-sub{font-size:11px; font-weight:500; color:var(--sub);} .overall-progress{margin-bottom:4px;} .overall-progress .row{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px;} .overall-progress .pct{font-size:20px; font-weight:800; color:var(--accent2);} .overall-progress .label{font-size:11px; color:var(--sub); text-transform:uppercase; letter-spacing:.4px;} .bar-track{width:100%; height:8px; border-radius:99px; background:var(--bg2); overflow:hidden; border:1px solid var(--card-border);} .bar-fill{height:100%; border-radius:99px; background:linear-gradient(90deg, var(--accent) 0%, var(--accent2) 100%); transition:width .25s ease;} .field{margin-bottom:14px;} .section-title{font-size:11px; font-weight:700; color:var(--accent2); text-transform:uppercase; letter-spacing:.4px; margin:16px 0 8px;} .item-card{ background:var(--bg2); border:1px solid var(--card-border); border-radius:12px; padding:11px 12px; margin-bottom:8px; } .item-top{display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:10px;} .item-name{font-size:13px; font-weight:600; flex:1;} .item-pct{font-size:12px; font-weight:700; color:var(--accent2); white-space:nowrap;} .item-mid{display:grid; grid-template-columns:1fr 1fr; gap:10px;} .item-col .col-label{ font-size:10px; font-weight:700; color:var(--sub); text-transform:uppercase; letter-spacing:.4px; margin-bottom:5px; text-align:center; } .item-mid input[type=number]{width:100%; text-align:center; padding:9px 8px;} .plan-value{ width:100%; text-align:center; padding:9px 8px; border-radius:10px; background:var(--card); border:1px solid var(--card-border); font-size:14px; font-weight:700; } .item-bar{margin-top:10px;} .empty-items{font-size:13px; color:var(--sub); padding:8px 0;} .evidence-preview{ width:100%; max-height:220px; object-fit:cover; border-radius:10px; margin-top:8px; display:none; border:1px solid var(--card-border); } .evidence-buttons{display:flex; gap:8px;} .evidence-buttons label{ flex:1; text-align:center; padding:12px; border:1.5px dashed var(--accent); border-radius:10px; background:var(--accent-soft); color:var(--accent2); font-size:13px; font-weight:700; cursor:pointer; margin-bottom:0; text-transform:none; } .evidence-buttons input[type=file]{display:none;} .evidence-clear{ text-align:center; font-size:12px; color:var(--red); margin-top:6px; cursor:pointer; display:none; } button.submit{ width:100%; padding:14px; border:none; border-radius:12px; background:linear-gradient(135deg, var(--accent) 0%, #274fc9 100%); color:#fff; font-size:15px; font-weight:700; cursor:pointer; margin-top:6px; box-shadow:0 4px 14px rgba(59,110,246,.35); } button.submit:disabled{opacity:.5; box-shadow:none;} .change-link{ text-align:center; font-size:13px; color:var(--accent2); margin-top:10px; cursor:pointer; font-weight:600; } .toast{ position:fixed; left:16px; right:16px; bottom:16px; padding:12px 14px; border-radius:10px; font-size:14px; text-align:center; color:#fff; display:none; z-index:50; box-shadow:var(--shadow); } .toast.success{background:var(--green);} .toast.error{background:var(--red);} .empty{font-size:13px; color:var(--sub); padding:10px;}

←