ikan Uploader :
Directory : /var/www/new-ppid-app/partials/
Upload File : |
| Current File : /var/www/new-ppid-app/partials/floating-widget.php |
<?php
/**
* Partial: widget mengambang (melekat) di sudut kanan-bawah setiap halaman publik.
* Tombol utama "Ajukan Permohonan" selalu tampil; tombol kecil membuka aksi tambahan
* (Lacak Permohonan & Kotak Saran).
*/
?>
<div id="floatWidget" class="fixed bottom-5 right-4 sm:right-5 z-40 flex flex-col items-end gap-3 print:hidden">
<!-- Aksi tambahan (tersembunyi sampai tombol + ditekan) -->
<div id="floatExtras" class="flex flex-col items-end gap-2 opacity-0 translate-y-3 pointer-events-none transition-all duration-200">
<button type="button" id="surveyTrigger" class="flex items-center gap-2 bg-white shadow-lg border border-slate-100 text-slate-700 hover:text-mateng-gold px-4 py-2.5 rounded-full text-sm font-semibold transition-colors">
<i class="fas fa-star text-mateng-gold"></i> <?= e(t('Survei Kepuasan')) ?>
</button>
<a href="<?= e(url('cek-status.php')) ?>" class="flex items-center gap-2 bg-white shadow-lg border border-slate-100 text-slate-700 hover:text-mateng-blue px-4 py-2.5 rounded-full text-sm font-semibold transition-colors">
<i class="fas fa-magnifying-glass text-mateng-blue"></i> <?= e(t('Lacak Permohonan')) ?>
</a>
<a href="<?= e(url('saran.php')) ?>" class="flex items-center gap-2 bg-white shadow-lg border border-slate-100 text-slate-700 hover:text-mateng-gold px-4 py-2.5 rounded-full text-sm font-semibold transition-colors">
<i class="fas fa-comment-dots text-mateng-gold"></i> <?= e(t('Kotak Saran')) ?>
</a>
<a href="<?= e(url('faq.php')) ?>" class="flex items-center gap-2 bg-white shadow-lg border border-slate-100 text-slate-700 hover:text-mateng-green px-4 py-2.5 rounded-full text-sm font-semibold transition-colors">
<i class="fas fa-circle-question text-mateng-green"></i> FAQ
</a>
</div>
<!-- Baris utama -->
<div class="flex items-center gap-2">
<a href="<?= e(url('permohonan.php')) ?>" class="bg-mateng-green hover:bg-green-700 text-white pl-5 pr-5 py-3.5 rounded-full shadow-xl font-bold flex items-center gap-2 transition-all hover:shadow-2xl">
<i class="fas fa-paper-plane"></i>
<span class="whitespace-nowrap"><?= e(t('Ajukan Permohonan')) ?></span>
</a>
<button id="floatToggle" type="button" aria-label="<?= e(t('Aksi lainnya')) ?>" aria-expanded="false"
class="w-12 h-12 rounded-full bg-slate-900 hover:bg-slate-800 text-white shadow-xl flex items-center justify-center shrink-0 transition-colors">
<i id="floatToggleIcon" class="fas fa-plus transition-transform duration-200"></i>
</button>
</div>
</div>
<script>
(function () {
var btn = document.getElementById('floatToggle');
var icon = document.getElementById('floatToggleIcon');
var extras = document.getElementById('floatExtras');
if (!btn || !extras) return;
var open = false;
btn.addEventListener('click', function () {
open = !open;
btn.setAttribute('aria-expanded', open ? 'true' : 'false');
if (open) {
extras.classList.remove('opacity-0', 'translate-y-3', 'pointer-events-none');
icon.classList.add('rotate-45');
} else {
extras.classList.add('opacity-0', 'translate-y-3', 'pointer-events-none');
icon.classList.remove('rotate-45');
}
});
})();
</script>
Kontol Shell Bypass