128 lines
4.4 KiB
Svelte
128 lines
4.4 KiB
Svelte
<script lang="ts">
|
|
import { closedPWA } from "$lib/store";
|
|
|
|
function setClosedPWA() {
|
|
const now = new Date();
|
|
|
|
const expirationDate = new Date(now.getTime() + 30 * 24 * 60 * 60 * 1000); // 30 days in milliseconds
|
|
localStorage.setItem(
|
|
"closePWA",
|
|
JSON.stringify({ value: true, expires: expirationDate }),
|
|
);
|
|
|
|
$closedPWA = true;
|
|
}
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<meta
|
|
name="viewport"
|
|
content="width=device-width, initial-scale=1.0, maximum-scale=1.0"
|
|
/>
|
|
</svelte:head>
|
|
|
|
<div
|
|
class="mb-5 mt-5 relative isolate sm:rounded text-center flex sm:hidden justify-center items-center gap-x-6 overflow-hidden bg-[#FFC233] px-6 py-3.5 sm:py-2.5 sm:px-3.5 sm:before:flex-1"
|
|
>
|
|
<div
|
|
class="absolute left-[max(-7rem,calc(50%-52rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl"
|
|
aria-hidden="true"
|
|
>
|
|
<div
|
|
class="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-[#ff80b5] to-[#9089fc] opacity-30"
|
|
style="clip-path: polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)"
|
|
></div>
|
|
</div>
|
|
<div
|
|
class="absolute left-[max(45rem,calc(50%+8rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl"
|
|
aria-hidden="true"
|
|
>
|
|
<div
|
|
class="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-[#ff80b5] to-[#9089fc] opacity-30"
|
|
style="clip-path: polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)"
|
|
></div>
|
|
</div>
|
|
<div
|
|
class="w-full flex flex-row justify-between items-center gap-x-4 gap-y-2"
|
|
>
|
|
<p class="text-lg text-black font-semibold text-start">
|
|
Get the app for a better experience.
|
|
</p>
|
|
|
|
<div class="flex flex-row items-center">
|
|
<label
|
|
for="installModal"
|
|
class="flex-none rounded-full px-5 py-1 text-lg font-semibold text-black shadow-sm bg-[#fff] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900"
|
|
>
|
|
Install
|
|
</label>
|
|
<label
|
|
on:click={setClosedPWA}
|
|
class="inline-block cursor-pointer text-[1.3rem]"
|
|
>
|
|
<svg
|
|
class="ml-2 w-8 h-8"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
><path
|
|
fill="black"
|
|
d="m6.4 18.308l-.708-.708l5.6-5.6l-5.6-5.6l.708-.708l5.6 5.6l5.6-5.6l.708.708l-5.6 5.6l5.6 5.6l-.708.708l-5.6-5.6z"
|
|
/></svg
|
|
>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!--Start Create Watchlist Modal-->
|
|
<input type="checkbox" id="installModal" class="modal-toggle" />
|
|
|
|
<dialog id="installModal" class="modal overflow-hidden p-3 sm:p-0">
|
|
<label for="installModal" class="cursor-pointer modal-backdrop"></label>
|
|
|
|
<div class="modal-box rounded w-full bg-primary border border-gray-600">
|
|
<div class="flex flex-row items-center pt-5">
|
|
<h4 class="text-white text-2xl font-bold text-center m-auto">
|
|
Steps to install
|
|
</h4>
|
|
<label
|
|
for="installModal"
|
|
class="inline-block cursor-pointer absolute right-3 top-3 text-[1.3rem] sm:text-[1.8rem] text-white"
|
|
>
|
|
<svg
|
|
class="w-6 h-6 sm:w-8 sm:h-8"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
><path
|
|
fill="white"
|
|
d="m6.4 18.308l-.708-.708l5.6-5.6l-5.6-5.6l.708-.708l5.6 5.6l5.6-5.6l.708.708l-5.6 5.6l5.6 5.6l-.708.708l-5.6-5.6z"
|
|
/></svg
|
|
>
|
|
</label>
|
|
</div>
|
|
|
|
<div
|
|
class="text-white flex flex-col justify-center items-center text-xl h-full"
|
|
>
|
|
<ul class="list-decimal list-inside text-left mt-5">
|
|
<li class="mb-2">Tap on the Safari share button.</li>
|
|
<li class="mb-2">Tap on "Add to Home Screen."</li>
|
|
<li class="mb-4">Tap on "Add."</li>
|
|
|
|
<p class="text-lg mb-4">
|
|
Note that web apps on iOS can only be installed using Safari.
|
|
</p>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="border-t border-gray-600 mt-2">
|
|
<label
|
|
for="installModal"
|
|
class="mt-4 font-semibold text-white text-xl m-auto flex justify-center"
|
|
>
|
|
Close
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</dialog>
|