ikan Uploader :
Directory : /var/www/new-ppid-app/partials/
Upload File : |
| Current File : /var/www/new-ppid-app/partials/survey-widget.php |
<div id="surveyModal" class="fixed inset-0 z-[60] hidden items-center justify-center p-4 print:hidden" role="dialog" aria-modal="true" aria-labelledby="surveyTitle">
<div id="surveyBackdrop" class="absolute inset-0 bg-slate-900/60 backdrop-blur-sm"></div>
<div class="relative bg-white w-full max-w-lg rounded-2xl shadow-2xl max-h-[92vh] overflow-y-auto">
<button id="surveyClose" type="button" aria-label="Tutup" class="absolute top-3 right-3 w-9 h-9 rounded-full bg-slate-100 hover:bg-slate-200 text-slate-500 flex items-center justify-center transition-colors z-10">
<i class="fas fa-xmark"></i>
</button>
<!-- Tampilan FORM -->
<div id="surveyFormView" class="p-6 sm:p-8">
<div class="text-center mb-5">
<div class="w-14 h-14 mx-auto mb-3 rounded-2xl bg-gradient-to-br from-mateng-green to-mateng-blue text-white flex items-center justify-center text-2xl shadow-lg">
<i class="fas fa-star"></i>
</div>
<h2 id="surveyTitle" class="text-xl font-bold text-slate-900">Survei Kepuasan Pengunjung</h2>
<p class="text-sm text-slate-500 mt-1">Bantu kami meningkatkan layanan portal PPID. Isian Anda sangat berarti.</p>
</div>
<div id="surveyErrorBox" class="hidden bg-red-50 border border-red-200 text-red-700 rounded-xl p-3 mb-4 text-sm"></div>
<form id="surveyForm" class="space-y-4" novalidate>
<?= csrf_field() ?>
<!-- Honeypot anti-bot (disembunyikan; harus tetap kosong) -->
<div class="hidden" aria-hidden="true">
<label>Website<input type="text" name="website" tabindex="-1" autocomplete="off"></label>
</div>
<!-- Rating bintang -->
<div class="text-center bg-slate-50 border border-slate-100 rounded-xl py-4">
<label class="block text-sm font-medium text-slate-700 mb-2">Seberapa puas Anda mengunjungi situs ini? <span class="text-red-500">*</span></label>
<div id="surveyStars" class="inline-flex items-center gap-2 text-3xl text-slate-300" role="radiogroup" aria-label="Rating bintang">
<?php for ($i = 1; $i <= 5; $i++): ?>
<button type="button" data-val="<?= $i ?>" class="survey-star transition-transform hover:scale-110 focus:outline-none" aria-label="<?= $i ?> bintang"><i class="fas fa-star"></i></button>
<?php endfor; ?>
</div>
<input type="hidden" name="rating" id="surveyRating" value="">
<p id="surveyRatingLabel" class="text-xs text-slate-500 mt-1 h-4"></p>
<p class="survey-fielderr text-xs text-red-600 mt-1 hidden" data-err="rating"></p>
</div>
<div>
<label class="block text-sm font-medium text-slate-700 mb-1.5">Nama Lengkap <span class="text-red-500">*</span></label>
<input type="text" name="nama" maxlength="100" class="w-full rounded-lg border border-slate-300 px-4 py-2.5 outline-none focus:border-mateng-green focus:ring-4 focus:ring-green-100">
<p class="survey-fielderr text-xs text-red-600 mt-1 hidden" data-err="nama"></p>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<label class="block text-sm font-medium text-slate-700 mb-1.5">Usia <span class="text-red-500">*</span></label>
<input type="number" name="usia" min="1" max="120" inputmode="numeric" class="w-full rounded-lg border border-slate-300 px-4 py-2.5 outline-none focus:border-mateng-green focus:ring-4 focus:ring-green-100" placeholder="mis. 30">
<p class="survey-fielderr text-xs text-red-600 mt-1 hidden" data-err="usia"></p>
</div>
<div>
<label class="block text-sm font-medium text-slate-700 mb-1.5">Jenis Kelamin <span class="text-red-500">*</span></label>
<div class="grid grid-cols-2 gap-2">
<label class="survey-pill cursor-pointer text-center text-sm rounded-lg border border-slate-300 px-2 py-2.5 hover:border-mateng-green transition-colors">
<input type="radio" name="gender" value="Laki-laki" class="sr-only"> Laki-laki
</label>
<label class="survey-pill cursor-pointer text-center text-sm rounded-lg border border-slate-300 px-2 py-2.5 hover:border-mateng-green transition-colors">
<input type="radio" name="gender" value="Perempuan" class="sr-only"> Perempuan
</label>
</div>
<p class="survey-fielderr text-xs text-red-600 mt-1 hidden" data-err="gender"></p>
</div>
</div>
<div>
<label class="block text-sm font-medium text-slate-700 mb-1.5">Kategori Pengunjung <span class="text-red-500">*</span></label>
<div class="grid grid-cols-2 gap-2">
<label class="survey-pill cursor-pointer text-center text-sm rounded-lg border border-slate-300 px-2 py-2.5 hover:border-mateng-green transition-colors">
<input type="radio" name="kategori_pengunjung" value="Umum" class="sr-only"> Umum
</label>
<label class="survey-pill cursor-pointer text-center text-sm rounded-lg border border-slate-300 px-2 py-2.5 hover:border-mateng-green transition-colors">
<input type="radio" name="kategori_pengunjung" value="Kelompok Rentan" class="sr-only"> Kelompok Rentan
</label>
</div>
<p class="survey-fielderr text-xs text-red-600 mt-1 hidden" data-err="kategori_pengunjung"></p>
<!-- Muncul hanya bila memilih "Kelompok Rentan" -->
<div id="surveyRentanWrap" class="hidden mt-3">
<label class="block text-sm font-medium text-slate-700 mb-1.5">Jenis Kelompok Rentan <span class="text-red-500">*</span></label>
<select name="kelompok_rentan" class="w-full rounded-lg border border-slate-300 px-4 py-2.5 outline-none focus:border-mateng-green focus:ring-4 focus:ring-green-100 bg-white">
<option value="">— Pilih —</option>
<option value="Penyandang Disabilitas">Penyandang Disabilitas</option>
<option value="Orang Lanjut Usia">Orang Lanjut Usia</option>
<option value="Wanita Hamil">Wanita Hamil</option>
<option value="Anak-Anak">Anak-Anak</option>
<option value="Korban Bencana Alam dan Bencana Sosial">Korban Bencana Alam dan Bencana Sosial</option>
</select>
<p class="text-[11px] text-slate-400 mt-1">Pasal 4 PermenPANRB 11/2024</p>
<p class="survey-fielderr text-xs text-red-600 mt-1 hidden" data-err="kelompok_rentan"></p>
</div>
</div>
<div>
<label class="block text-sm font-medium text-slate-700 mb-1.5">No. WhatsApp <span class="text-slate-400 font-normal">(opsional)</span></label>
<input type="tel" name="no_wa" maxlength="20" class="w-full rounded-lg border border-slate-300 px-4 py-2.5 outline-none focus:border-mateng-green focus:ring-4 focus:ring-green-100" placeholder="08xxxxxxxxxx">
<p class="survey-fielderr text-xs text-red-600 mt-1 hidden" data-err="no_wa"></p>
</div>
<div>
<label class="block text-sm font-medium text-slate-700 mb-1.5">Alamat <span class="text-red-500">*</span></label>
<textarea name="alamat" rows="2" maxlength="255" class="w-full rounded-lg border border-slate-300 px-4 py-2.5 outline-none focus:border-mateng-green focus:ring-4 focus:ring-green-100" placeholder="Kecamatan / Desa, Kabupaten"></textarea>
<p class="survey-fielderr text-xs text-red-600 mt-1 hidden" data-err="alamat"></p>
</div>
<div>
<label class="block text-sm font-medium text-slate-700 mb-1.5">Testimoni / Kesan & Pesan <span class="text-red-500">*</span></label>
<textarea name="testimoni" rows="3" maxlength="2000" class="w-full rounded-lg border border-slate-300 px-4 py-2.5 outline-none focus:border-mateng-green focus:ring-4 focus:ring-green-100" placeholder="Tuliskan pengalaman Anda mengunjungi situs PPID ini..."></textarea>
<p class="survey-fielderr text-xs text-red-600 mt-1 hidden" data-err="testimoni"></p>
</div>
<button type="submit" id="surveySubmit" class="w-full bg-mateng-green hover:bg-green-700 text-white font-bold px-6 py-3.5 rounded-xl transition-colors flex items-center justify-center gap-2 disabled:opacity-60">
<i class="fas fa-paper-plane"></i> <span>Kirim Survei</span>
</button>
<p class="text-[11px] text-slate-400 text-center">Data digunakan hanya untuk evaluasi layanan.</p>
</form>
</div>
<!-- Tampilan TERIMA KASIH -->
<div id="surveyDoneView" class="hidden p-8 text-center">
<div class="w-16 h-16 mx-auto mb-4 rounded-full bg-mateng-green text-white flex items-center justify-center text-3xl shadow-lg">
<i class="fas fa-circle-check"></i>
</div>
<h2 class="text-2xl font-bold text-slate-900 mb-1">Terima Kasih!</h2>
<p id="surveyDoneMsg" class="text-slate-500 mb-6">Survei kepuasan Anda telah kami terima.</p>
<button type="button" id="surveyDoneClose" class="bg-mateng-green hover:bg-green-700 text-white px-6 py-2.5 rounded-lg font-semibold transition-colors">Tutup</button>
</div>
</div>
</div>
<script>
(function () {
var modal = document.getElementById('surveyModal');
if (!modal) return;
var KEY_DONE = 'ppid_survey_done';
var KEY_NEXT = 'ppid_survey_next'; // localStorage: timestamp kapan pop-up dijadwalkan muncul lagi
// ⏱️ ATUR WAKTU POP-UP OTOMATIS (dalam MENIT) — ubah dua angka di bawah:
var AUTO_MINUTES = 1; // tampil PERTAMA kali setelah sekian menit mengunjungi situs
var REOPEN_MINUTES = 1; // setelah DITUTUP tanpa mengisi, tampil LAGI setelah sekian menit
var DELAY_MS = AUTO_MINUTES * 60 * 1000;
var REOPEN_MS = REOPEN_MINUTES * 60 * 1000;
var AUTO_GRACE = 1500; // jeda kecil bila waktunya sudah lewat
// Mode uji: buka "?survey=1" pada URL untuk memunculkan modal seketika.
var force = false;
try { force = new URLSearchParams(location.search).get('survey') === '1'; } catch (e) {}
var trigger = document.getElementById('surveyTrigger');
var form = document.getElementById('surveyForm');
var formView = document.getElementById('surveyFormView');
var doneView = document.getElementById('surveyDoneView');
var errorBox = document.getElementById('surveyErrorBox');
var submitBtn = document.getElementById('surveySubmit');
function ls(get, key, val) {
try { return get ? localStorage.getItem(key) : localStorage.setItem(key, val); } catch (e) { return null; }
}
function isDone() { return ls(true, KEY_DONE) === '1'; }
// Jadwal tampil berikutnya (timestamp). Awal = kunjungan pertama + AUTO_MINUTES.
function getNext() {
var n = parseInt(ls(true, KEY_NEXT), 10);
if (!n || isNaN(n)) { n = Date.now() + DELAY_MS; ls(false, KEY_NEXT, String(n)); }
return n;
}
function setNext(ms) { ls(false, KEY_NEXT, String(Date.now() + ms)); }
var autoTimer = null;
function scheduleAuto() {
if (isDone()) return;
if (autoTimer) clearTimeout(autoTimer);
var remain = getNext() - Date.now();
autoTimer = setTimeout(function () {
if (isDone() || modal.classList.contains('flex')) return;
setNext(REOPEN_MS); // geser jadwal berikutnya, lalu buka
openModal();
}, remain <= 0 ? AUTO_GRACE : remain);
}
function hideTrigger() { if (trigger) { trigger.style.display = 'none'; } }
function openModal() {
modal.classList.remove('hidden');
modal.classList.add('flex');
document.body.style.overflow = 'hidden';
}
function closeModal() {
modal.classList.add('hidden');
modal.classList.remove('flex');
document.body.style.overflow = '';
}
// Tutup tanpa mengisi → jadwalkan muncul lagi setelah REOPEN_MINUTES.
function dismiss() { closeModal(); setNext(REOPEN_MS); scheduleAuto(); }
// Jika sudah pernah isi: sembunyikan tombol. (Mode uji ?survey=1 tetap boleh buka.)
if (isDone()) { hideTrigger(); if (!force) return; }
// Tombol buka (manual) — abaikan snooze.
if (trigger) trigger.addEventListener('click', function (e) { e.preventDefault(); openModal(); });
document.getElementById('surveyClose').addEventListener('click', dismiss);
document.getElementById('surveyBackdrop').addEventListener('click', dismiss);
document.getElementById('surveyDoneClose').addEventListener('click', closeModal);
document.addEventListener('keydown', function (e) { if (e.key === 'Escape' && modal.classList.contains('flex')) dismiss(); });
// ── Pasang jadwal auto-muncul (pertama kali & berulang setelah ditutup) ──
scheduleAuto();
// ── Rating bintang ──
(function stars() {
var picker = document.getElementById('surveyStars');
var input = document.getElementById('surveyRating');
var label = document.getElementById('surveyRatingLabel');
var names = ['', 'Sangat Buruk', 'Buruk', 'Cukup', 'Baik', 'Sangat Baik'];
var btns = Array.prototype.slice.call(picker.querySelectorAll('.survey-star'));
function paint(v) {
btns.forEach(function (s, i) {
s.classList.toggle('text-mateng-gold', (i + 1) <= v);
s.classList.toggle('text-slate-300', (i + 1) > v);
});
label.textContent = names[v] || '';
}
btns.forEach(function (s) {
var v = parseInt(s.getAttribute('data-val'), 10);
s.addEventListener('click', function () { input.value = v; paint(v); });
s.addEventListener('mouseenter', function () { paint(v); });
});
picker.addEventListener('mouseleave', function () { paint(parseInt(input.value, 10) || 0); });
})();
// ── Radio pill (Jenis Kelamin & Kategori Pengunjung): sorot pilihan
// + tampilkan field Kelompok Rentan hanya bila kategori = "Kelompok Rentan" ──
(function pills() {
var labels = Array.prototype.slice.call(document.querySelectorAll('.survey-pill'));
var rentanWrap = document.getElementById('surveyRentanWrap');
var rentanSel = rentanWrap ? rentanWrap.querySelector('select') : null;
labels.forEach(function (lab) {
var radio = lab.querySelector('input');
radio.addEventListener('change', function () {
labels.forEach(function (l) {
if (l.querySelector('input').name === radio.name) {
l.classList.remove('border-mateng-green', 'bg-green-50', 'text-mateng-green', 'font-semibold');
}
});
if (radio.checked) lab.classList.add('border-mateng-green', 'bg-green-50', 'text-mateng-green', 'font-semibold');
if (radio.name === 'kategori_pengunjung' && rentanWrap) {
if (radio.value === 'Kelompok Rentan') {
rentanWrap.classList.remove('hidden');
} else {
rentanWrap.classList.add('hidden');
if (rentanSel) rentanSel.value = '';
}
}
});
});
})();
// ── Kirim (AJAX) ──
function clearErrors() {
errorBox.classList.add('hidden');
errorBox.textContent = '';
Array.prototype.forEach.call(document.querySelectorAll('.survey-fielderr'), function (p) {
p.classList.add('hidden'); p.textContent = '';
});
}
function showFieldErrors(errs) {
var first = null;
Object.keys(errs).forEach(function (k) {
var p = document.querySelector('.survey-fielderr[data-err="' + k + '"]');
if (p) { p.textContent = errs[k]; p.classList.remove('hidden'); if (!first) first = p; }
});
if (first) first.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
function showBoxError(msg) { errorBox.textContent = msg; errorBox.classList.remove('hidden'); }
function reenable() { submitBtn.disabled = false; submitBtn.querySelector('span').textContent = 'Kirim Survei'; }
form.addEventListener('submit', function (e) {
e.preventDefault();
clearErrors();
submitBtn.disabled = true;
submitBtn.querySelector('span').textContent = 'Mengirim...';
fetch('<?= e(url('survey.php')) ?>', { method: 'POST', body: new FormData(form), headers: { 'X-Requested-With': 'fetch' } })
.then(function (r) { return r.json().then(function (j) { return { status: r.status, body: j }; }); })
.then(function (res) {
var b = res.body || {};
if (b.ok) {
ls(false, KEY_DONE, '1');
hideTrigger();
formView.classList.add('hidden');
if (b.message) document.getElementById('surveyDoneMsg').textContent = b.message;
doneView.classList.remove('hidden');
} else if (b.errors) {
showFieldErrors(b.errors);
reenable();
} else {
showBoxError(b.message || 'Gagal mengirim. Silakan coba lagi.');
reenable();
}
})
.catch(function () {
showBoxError('Gagal terhubung ke server. Periksa koneksi lalu coba lagi.');
reenable();
});
});
// Mode uji ?survey=1 — langsung buka modal (tanpa menunggu 3 menit).
if (force) openModal();
})();
</script>
Kontol Shell Bypass