|
@ -1,6 +1,7 @@ |
|
|
<template> |
|
|
<template> |
|
|
<router-view /> |
|
|
<router-view /> |
|
|
|
|
|
|
|
|
|
|
|
<!-- https://github.com/emmanuelsw/notiwind --> |
|
|
<NotificationGroup group="alert"> |
|
|
<NotificationGroup group="alert"> |
|
|
<div |
|
|
<div |
|
|
class="fixed top-4 right-4 w-full max-w-sm flex flex-col items-start justify-end" |
|
|
class="fixed top-4 right-4 w-full max-w-sm flex flex-col items-start justify-end" |
|
@ -127,6 +128,63 @@ |
|
|
</Notification> |
|
|
</Notification> |
|
|
</div> |
|
|
</div> |
|
|
</NotificationGroup> |
|
|
</NotificationGroup> |
|
|
|
|
|
|
|
|
|
|
|
<NotificationGroup group="modal"> |
|
|
|
|
|
<div class="fixed z-[100] top-0 inset-x-0 w-full"> |
|
|
|
|
|
<Notification |
|
|
|
|
|
v-slot="{ notifications, close }" |
|
|
|
|
|
enter="transform ease-out duration-300 transition" |
|
|
|
|
|
enter-from="translate-y-2 opacity-0 sm:translate-y-4" |
|
|
|
|
|
enter-to="translate-y-0 opacity-100 sm:translate-y-0" |
|
|
|
|
|
leave="transition ease-in duration-500" |
|
|
|
|
|
leave-from="opacity-100" |
|
|
|
|
|
leave-to="opacity-0" |
|
|
|
|
|
move="transition duration-500" |
|
|
|
|
|
move-delay="delay-300" |
|
|
|
|
|
> |
|
|
|
|
|
<div |
|
|
|
|
|
v-for="notification in notifications" |
|
|
|
|
|
:key="notification.id" |
|
|
|
|
|
class="w-full" |
|
|
|
|
|
role="alert" |
|
|
|
|
|
> |
|
|
|
|
|
<div |
|
|
|
|
|
v-if="notification.type === 'notification-permission'" |
|
|
|
|
|
class="absolute inset-0 h-screen flex flex-col items-center justify-center bg-slate-900/50" |
|
|
|
|
|
> |
|
|
|
|
|
<div |
|
|
|
|
|
class="flex w-11/12 max-w-sm mx-auto mb-3 overflow-hidden bg-white rounded-lg shadow-lg" |
|
|
|
|
|
> |
|
|
|
|
|
<div class="w-full px-6 py-6 text-slate-900 text-center"> |
|
|
|
|
|
<p class="text-lg mb-4"> |
|
|
|
|
|
Would you like to turn on notifications for this app? |
|
|
|
|
|
</p> |
|
|
|
|
|
|
|
|
|
|
|
<button |
|
|
|
|
|
class="block w-full text-center text-md font-bold uppercase bg-blue-600 text-white px-2 py-2 rounded-md mb-2" |
|
|
|
|
|
> |
|
|
|
|
|
Turn on Notifications |
|
|
|
|
|
</button> |
|
|
|
|
|
<div class="grid grid-cols-2 gap-2"> |
|
|
|
|
|
<button |
|
|
|
|
|
@click="close(notification.id)" |
|
|
|
|
|
class="block w-full text-center text-md font-bold uppercase bg-slate-600 text-white px-2 py-2 rounded-md" |
|
|
|
|
|
> |
|
|
|
|
|
Maybe Later |
|
|
|
|
|
</button> |
|
|
|
|
|
<button |
|
|
|
|
|
class="block w-full text-center text-md font-bold uppercase bg-rose-600 text-white px-2 py-2 rounded-md" |
|
|
|
|
|
> |
|
|
|
|
|
Never |
|
|
|
|
|
</button> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</Notification> |
|
|
|
|
|
</div> |
|
|
|
|
|
</NotificationGroup> |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<style></style> |
|
|
<style></style> |
|
|