44 lines
3.8 KiB
Plaintext
44 lines
3.8 KiB
Plaintext
<div id="pwaInstallPrompt" class="fixed inset-x-4 bottom-28 z-120 hidden">
|
||
<div class="mx-auto w-full max-w-xs rounded-[28px] bg-upst-light px-4 py-4 text-gray-500 shadow-2xl ring-1 ring-black/5">
|
||
<div class="flex items-start gap-3">
|
||
<div class="flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl bg-upst text-xl font-black text-white">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-tablet-smartphone-icon lucide-tablet-smartphone"><rect width="10" height="14" x="3" y="8" rx="2"/><path d="M5 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2h-2.4"/><path d="M8 18h.01"/></svg>
|
||
</div>
|
||
<div class="min-w-0 flex-1">
|
||
<p class="text-[10px] font-black uppercase tracking-[0.22em] text-gray-400">Install App</p>
|
||
<h3 class="mt-1 text-sm font-black tracking-tight">Pasang eSPJ di perangkat</h3>
|
||
<p id="pwaInstallDescription" class="mt-1 text-[11px] leading-relaxed text-gray-500/80">Akses lebih cepat langsung dari home screen tanpa buka browser dulu.</p>
|
||
</div>
|
||
<button id="pwaInstallDismiss" type="button" class="flex h-9 w-9 items-center justify-center rounded-xl bg-white/10 text-lg font-bold text-gray-500/80 transition active:scale-90">×</button>
|
||
</div>
|
||
|
||
<div class="mt-4 flex gap-2">
|
||
<button id="pwaInstallButton" type="button" class="flex-1 rounded-2xl bg-upst text-white px-4 py-3 text-xs font-black uppercase tracking-wide text-upst shadow-sm transition active:scale-95">
|
||
Install Sekarang
|
||
</button>
|
||
<button id="pwaInstallHelpButton" type="button" class="rounded-2xl border border-gray-200 bg-gray-100 px-4 py-3 text-xs font-black uppercase tracking-wide text-gray-500 transition active:scale-95">
|
||
Bantuan
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="pwaInstallHelpModal" class="fixed inset-0 z-130 hidden items-end justify-center bg-slate-950/60 p-4 backdrop-blur-sm sm:items-center">
|
||
<div class="w-full max-w-sm rounded-4xl bg-white p-6 shadow-2xl">
|
||
<p class="text-[10px] font-black uppercase tracking-[0.24em] text-upst">Cara Install</p>
|
||
<h3 class="mt-2 text-lg font-black tracking-tight text-slate-900">Pasang eSPJ ke home screen</h3>
|
||
<p id="pwaInstallHelpText" class="mt-3 text-sm leading-relaxed text-slate-600">Gunakan menu browser lalu pilih install aplikasi.</p>
|
||
|
||
<div id="pwaInstallHelpSteps" class="mt-5 grid gap-2 rounded-2xl bg-slate-50 p-4 text-xs leading-relaxed text-slate-600">
|
||
<p>Chrome / Edge: buka menu browser lalu pilih <span class="font-bold text-slate-800">Install app</span> atau <span class="font-bold text-slate-800">Add to Home screen</span>.</p>
|
||
<p>Firefox Android: buka menu browser lalu pilih <span class="font-bold text-slate-800">Install</span> atau <span class="font-bold text-slate-800">Add to Home screen</span> jika tersedia.</p>
|
||
<p>iPhone / iPad: tekan <span class="font-bold text-slate-800">Share</span> lalu pilih <span class="font-bold text-slate-800">Add to Home Screen</span>.</p>
|
||
<p>Firefox desktop: browser ini belum mendukung install PWA berbasis manifest dari web.</p>
|
||
</div>
|
||
|
||
<div class="mt-6 flex gap-2">
|
||
<button id="pwaInstallHelpClose" type="button" class="flex-1 rounded-2xl bg-slate-100 px-4 py-3 text-xs font-black uppercase tracking-wide text-slate-700 transition active:scale-95">Tutup</button>
|
||
<button id="pwaInstallHelpPrimary" type="button" class="flex-1 rounded-2xl bg-upst px-4 py-3 text-xs font-black uppercase tracking-wide text-gray-500 shadow-sm transition active:scale-95">Install</button>
|
||
</div>
|
||
</div>
|
||
</div> |