Add donation

src/components/DonateModal.svelte

@@ -0,0 +1,45 @@
+<script>
+  import Button from './Button.svelte';
+</script>
+
+<div class="text-white ">
+  <h1 class="font-semibold">Thank you! Hope you find it useful.</h1>
+  <p class="mt-2">
+    I made this website for fun when I have some spare time. Obviously will add more feature and update the data every
+    update, because I like to explore the game and kind of min-maxing it.
+  </p>
+  <p class="mt-1">
+    If you want to donate, your donation will definitely help on improving the site and motivating me to add more stuff
+    to Paimon.moe! Thank you very much and have fun, hope you like it!
+  </p>
+  <p class="mt-1">
+    You can also contributing to the project on <a
+      target="__blank"
+      class="text-primary hover:underline"
+      href="https://github.com/MadeBaruna/paimon-moe"
+      alt="github">Github</a
+    >
+  </p>
+  <div class="flex flex-col md:flex-row mt-2">
+    <a class="flex-1 mb-1 md:mb-0 md:mr-1" href="https://ko-fi.com/baruna" target="__blank">
+      <Button className="w-full flex-1 flex flex-col items-center">
+        <div class="flex h-8 mb-1 items-center">
+          <img class="h-6 mr-1" src="/images/donation/ko-fi.png" alt="Ko-fi" />
+          <img class="h-6" src="/images/donation/paypal.png" alt="PayPal" />
+        </div>
+        <span class="font-semibold">Support me on Ko-fi</span>
+      </Button>
+    </a>
+    <a class="flex-1 md:ml-1" href="https://trakteer.id/baruna" target="__blank">
+      <Button className="w-full flex flex-col items-center">
+        <div class="flex mb-1 items-center">
+          <img class="h-8 mr-1" src="/images/donation/trakteer.png" alt="Trakteer" />
+          <img class="h-4 mr-1" src="/images/donation/gopay.png" alt="gopay" />
+          <img class="h-4 mr-1" src="/images/donation/ovo.png" alt="gopay" />
+          <img class="h-4" src="/images/donation/dana.png" alt="gopay" />
+        </div>
+        <span class="font-semibold">Support me on Trakteer</span>
+      </Button>
+    </a>
+  </div>
+</div>

src/components/Sidebar/Sidebar.svelte

@@ -1,5 +1,6 @@
 <script>
   import { fly } from 'svelte/transition';
+  import { getContext } from 'svelte';
   import { mdiCloseCircle } from '@mdi/js';
 
   import Icon from '../Icon.svelte';
@@ -8,15 +9,88 @@
   import SidebarItem from './SidebarItem.svelte';
 
   import { showSidebar } from '../../stores/sidebar';
+  import Button from '../Button.svelte';
+
+  import DonateModal from '../DonateModal.svelte';
+
+  const { open: openModal } = getContext('simple-modal');
 
   export let segment;
   export let mobile = false;
 
+  function openDonationModal() {
+    openModal(
+      DonateModal,
+      {},
+      {
+        closeButton: false,
+        styleWindow: { background: '#25294A', width: '500px' },
+      },
+    );
+  }
+
   function close() {
     showSidebar.set(false);
   }
 </script>
 
+<div
+  in:fly={{ x: 100, duration: 100 }}
+  out:fly={{ x: 100, duration: 100 }}
+  class={`sidebar overflow-x-hidden fixed w-full lg:w-64 h-full flex-col p-5 bg-background items-center z-50 
+    ${mobile ? 'flex' : 'hidden lg:flex'}`}
+>
+  {#if !mobile}
+    <SidebarTitle />
+  {/if}
+  {#if mobile}
+    <div class="cursor-pointer" on:click={close}>
+      <Icon path={mdiCloseCircle} size={2} color="white" className="mb-8 mt-4 opacity-75" />
+    </div>
+  {/if}
+  <SidebarItem
+    on:clicked={close}
+    active={segment === 'characters'}
+    image="/images/characters.png"
+    label="Character"
+    href="/characters"
+  />
+  <SidebarItem
+    on:clicked={close}
+    active={segment === 'wish'}
+    image="/images/wish.png"
+    label="Wish Counter"
+    href="/wish"
+  />
+  <SidebarItem
+    on:clicked={close}
+    active={segment === 'calculator'}
+    image="/images/calculator.png"
+    label="Calculator"
+    href="/calculator"
+  />
+  <SidebarItem on:clicked={close} active={segment === 'items'} image="/images/items.png" label="Items" href="/items" />
+  <SidebarItem
+    on:clicked={close}
+    active={segment === 'todo'}
+    image="/images/todos.png"
+    label="Todo List"
+    href="/todo"
+  />
+  <SidebarItem
+    on:clicked={close}
+    active={segment === 'settings'}
+    image="/images/settings.png"
+    label="Settings"
+    href="/settings"
+  />
+  <div class="mt-8 md:mt-0 md:flex-1" />
+  <Button on:click={openDonationModal}>
+    <img class="inline w-8 h-8" src="/images/mora.png" alt="donate" />
+    Donate
+  </Button>
+</div>
+
 <style>
   .sidebar::after {
     content: '';
@@ -30,54 +104,3 @@
     background-size: contain;
   }
 </style>
-
-<div
-  in:fly={{ x: 100, duration: 100 }}
-  out:fly={{ x: 100, duration: 100 }}
-  class={`sidebar overflow-x-hidden fixed w-full lg:w-64 h-full flex-col p-5 bg-background items-center z-50 
-    ${mobile ? 'flex' : 'hidden lg:flex'}`}>
-  {#if !mobile}
-    <SidebarTitle />
-  {/if}
-  {#if mobile}
-    <div class="cursor-pointer" on:click={close}>
-      <Icon path={mdiCloseCircle} size={2} color="white" className="mb-8 mt-4 opacity-75" />
-    </div>
-  {/if}
-  <SidebarItem
-    on:clicked={close}
-    active={segment === 'characters'}
-    image="/images/characters.png"
-    label="Character"
-    href="/characters" />
-  <SidebarItem
-    on:clicked={close}
-    active={segment === 'wish'}
-    image="/images/wish.png"
-    label="Wish Counter"
-    href="/wish" />
-  <SidebarItem
-    on:clicked={close}
-    active={segment === 'calculator'}
-    image="/images/calculator.png"
-    label="Calculator"
-    href="/calculator" />
-  <SidebarItem
-    on:clicked={close}
-    active={segment === 'items'}
-    image="/images/items.png"
-    label="Items"
-    href="/items" />
-  <SidebarItem
-    on:clicked={close}
-    active={segment === 'todo'}
-    image="/images/todos.png"
-    label="Todo List"
-    href="/todo" />
-  <SidebarItem
-    on:clicked={close}
-    active={segment === 'settings'}
-    image="/images/settings.png"
-    label="Settings"
-    href="/settings" />
-</div>

src/routes/_layout.svelte

@@ -30,6 +30,35 @@
   });
 </script>
 
+<svelte:head>
+  <title>Paimon.moe</title>
+</svelte:head>
+
+<Tailwind />
+
+<Header />
+<Modal>
+  <Sidebar {segment} />
+  {#if $showSidebar}
+    <Sidebar {segment} mobile />
+  {/if}
+  <DataSync>
+    <TodoData />
+    <SettingData />
+    <Toast />
+    <main style="flex: 1 0 auto;">
+      <slot />
+    </main>
+  </DataSync>
+</Modal>
+{#if $preloading && $delayedPreloading}
+  <div transition:fade class="loading-bar" />
+{/if}
+<p class="lg:ml-64 px-4 md:px-8 py-4 text-gray-600">
+  Paimon.moe is not affiliated with miHoYo.<br />
+  Genshin Impact, game content and materials are trademarks and copyrights of miHoYo.
+</p>
+
 <style>
   .loading-bar {
     position: fixed;
@@ -63,32 +92,3 @@
     }
   }
 </style>
-
-<svelte:head>
-  <title>Paimon.moe</title>
-</svelte:head>
-
-<Tailwind />
-
-<Header />
-<Sidebar {segment} />
-{#if $showSidebar}
-  <Sidebar {segment} mobile />
-{/if}
-<Modal>
-  <DataSync>
-    <TodoData />
-    <SettingData />
-    <Toast />
-    <main style="flex: 1 0 auto;">
-      <slot />
-    </main>
-  </DataSync>
-</Modal>
-{#if $preloading && $delayedPreloading}
-  <div transition:fade class="loading-bar" />
-{/if}
-<p class="lg:ml-64 px-4 md:px-8 py-4 text-gray-600">
-  Paimon.moe is not affiliated with miHoYo.<br />
-  Genshin Impact, game content and materials are trademarks and copyrights of miHoYo.
-</p>

src/routes/wish/index.svelte

@@ -111,11 +111,11 @@
   <title>Wish Counter - Paimon.moe</title>
   <meta
     name="description"
-    content="Genshin Impact Wish Counter to track your pity counter and track when you get the character or weapon. You can also auto import the logs from your PC."
+    content="Genshin Impact Wish Counter to track your pity counter and track when you get the character or weapon. You can also auto import the logs from your PC or Android."
   />
   <meta
     property="og:description"
-    content="Genshin Impact Wish Counter to track your pity counter and track when you get the character or weapon. You can also auto import the logs from your PC."
+    content="Genshin Impact Wish Counter to track your pity counter and track when you get the character or weapon. You can also auto import the logs from your PC or Android."
   />
 </svelte:head>
 <div class="pt-20 lg:ml-64 lg:pt-8 px-4 md:px-8">