Update placement

src/components/Ad.svelte

@@ -2,9 +2,10 @@
   export let type;
   export let variant;
   export let id;
+  export let style;
 
   let _class = '';
   export { _class as class };
 </script>
 
-<div class={_class} id="nn_{type === 'mobile' ? 'mobile_' : ''}{variant}{id}" />
+<div {style} class={_class} id="nn_{type === 'mobile' ? 'mobile_' : ''}{variant}{id}" />

src/components/Sidebar/Sidebar.svelte

@@ -11,11 +11,6 @@
   import SidebarMoreItem from './SidebarMoreItem.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;
@@ -34,17 +29,6 @@
   $: currentLocale = languages.find((e) => e.id === $locale.substring(0, 2)) || { id: 'en', label: 'English' };
   $: locales = languages.filter((e) => e.id !== currentLocale.id);
 
-  function openDonationModal() {
-    openModal(
-      DonateModal,
-      {},
-      {
-        closeButton: false,
-        styleWindow: { background: '#25294A', width: '500px' },
-      },
-    );
-  }
-
   function close() {
     showSidebar.set(false);
   }
@@ -159,10 +143,6 @@
         {/each}
       </div>
     </div>
-    <Button on:click={openDonationModal}>
-      <img class="inline w-8 h-8" src="/images/mora.png" alt="donate" />
-      {$t('sidebar.donate')}
-    </Button>
   </div>
 </div>
 

src/routes/_layout.svelte

@@ -32,7 +32,9 @@
     await checkLocalSave();
 
     page.subscribe(() => {
-      if (window.reloadAdSlots) window.reloadAdSlots();
+      try {
+        window.reloadAdSlots();
+      } catch (error) {}
     });
   });
 </script>
@@ -57,7 +59,7 @@
 {#if $preloading && $delayedPreloading}
   <div transition:fade class="loading-bar" />
 {/if}
-<div class="lg:ml-64 px-4 md:px-8 py-8 flex flex-col md:pb-32">
+<div class="lg:ml-64 px-4 md:px-8 py-8 flex flex-col md:pb-24">
   <p class="text-gray-400">
     {$t('footer.affliate')}<br />
     {$t('footer.copyright')}

src/routes/achievement/index.svelte

@@ -19,6 +19,7 @@
   import Icon from '../../components/Icon.svelte';
   import Select from '../../components/Select.svelte';
   import { pushToast } from '../../stores/toast';
+  import Ad from '../../components/Ad.svelte';
 
   export let data;
 
@@ -297,6 +298,7 @@
   <meta property="og:description" content="Track your Genshin Impact achievement easily" />
 </svelte:head>
 
+<div class="flex">
   <div class="lg:ml-64 pt-20 px-4 lg:px-8 lg:pt-8 max-w-screen-xl">
     <div class="flex flex-col md:flex-row items-center space-y-2 md:space-y-0 md:space-x-2 mb-2 md:mb-0">
       <h1 class="font-display font-black text-3xl md:text-4xl text-white">{$t('achievement.title')}</h1>
@@ -437,7 +439,11 @@
                 <img src="/images/primogem.png" class="w-8 h-8" alt="primogem" />
               </div>
               <div>
-              <Check checked={list[index].checked} on:change={() => toggle({ index, primogem: el.reward })} inverted />
+                <Check
+                  checked={list[index].checked}
+                  on:change={() => toggle({ index, primogem: el.reward })}
+                  inverted
+                />
               </div>
             </div>
           {/if}
@@ -445,6 +451,12 @@
       </div>
     </div>
   </div>
+  <div class="hidden xl:block">
+    <Ad class="ml-4 mt-8" type="desktop" variant="mpu" id="1" />
+  </div>
+</div>
+<Ad type="desktop" variant="lb" id="2" />
+<Ad type="mobile" variant="lb" id="1" />
 
 <style>
   .category {

src/routes/calculator/index.svelte

@@ -14,6 +14,7 @@
   import Button from '../../components/Button.svelte';
   import Icon from '../../components/Icon.svelte';
   import HowToModal from '../../components/CalculatorHowToModal.svelte';
+  import Ad from '../../components/Ad.svelte';
 
   const { open: openModal } = getContext('simple-modal');
 
@@ -81,6 +82,8 @@
     </h1>
   </div>
   <WeaponCalculator />
+  <Ad class="flex justify-center mt-8 mb-2" type="desktop" variant="lb" id="1" />
+  <Ad class="flex justify-center my-4" type="mobile" variant="mpu" id="2" />
   <div
     id="character"
     class="flex flex-col items-center md:flex-row-reverse md:justify-end md:items-start lg:items-center mt-8 mb-2"
@@ -100,6 +103,8 @@
     </h1>
   </div>
   <CharacterCalculator />
+  <Ad class="flex justify-center mt-8 mb-2" type="desktop" variant="lb" id="3" />
+  <Ad class="flex justify-center my-4" type="mobile" variant="mpu" id="1" />
   <div
     id="resin"
     class="flex flex-col items-center md:flex-row-reverse md:justify-end md:items-start lg:items-center mt-8 mb-2"

src/routes/characters/[id].svelte

@@ -30,6 +30,7 @@
   import { weaponList } from '../../data/weaponList';
   import artifacts from '../../data/artifacts/en.json';
   import weapons from '../../data/weapons/en.json';
+  import Ad from '../../components/Ad.svelte';
 
   const rarityColor = {
     1: 'text-white',
@@ -183,8 +184,9 @@
     content="Genshin Impact {character.name} build guide, constellation, and skill information"
   />
 </svelte:head>
-<div class="lg:ml-64 pt-20 lg:pt-8 max-w-screen-xl">
-  <div class="flex flex-col xl:flex-row items-start">
+<div class="lg:ml-64 pt-20 lg:pt-8">
+  <div class="flex">
+    <div class="flex flex-col xl:flex-row items-start max-w-screen-xl">
       <img
         class="character-image object-cover md:pl-8 self-center xl:self-auto"
         src="/images/characters/full/{id}.png"
@@ -358,7 +360,10 @@
         </div>
       </div>
     </div>
-  <div class="flex flex-col mt-4 text-white px-4 md:px-8">
+    <Ad class="ml-4" type="desktop" variant="mpu" id="1" />
+  </div>
+  <Ad class="flex justify-center my-4" type="mobile" variant="mpu" id="2" />
+  <div class="flex flex-col mt-4 text-white px-4 md:px-8 max-w-screen-xl">
     {#if builds.length > 1}
       <div class="flex mt-4 items-center">
         {#each builds as item, i}
@@ -547,7 +552,8 @@
   >
     {$t('characters.source')}
   </a>
-  <div class="flex flex-col mt-4 text-white px-4 md:px-8" bind:this={talentDiv}>
+  <Ad class="ml-8 mt-4 mb-2" type="desktop" variant="lb" id="1" />
+  <div class="flex flex-col mt-4 text-white px-4 md:px-8 max-w-screen-xl" bind:this={talentDiv}>
     <a href="/characters/{id}/#talents" class="font-black font-display text-2xl mt-4">
       {$t('characters.talents')}
     </a>
@@ -555,13 +561,15 @@
     <SkillCard {id} image="talent_2" data={data.elementalSkill} withQuote={true} />
     <SkillCard {id} image="talent_3" data={data.burst} withQuote={true} />
   </div>
-  <div class="flex flex-col text-white px-4 md:px-8">
+  <div class="flex flex-col text-white px-4 md:px-8 max-w-screen-xl">
     <p class="font-black font-display text-2xl mt-4">{$t('characters.passiveTalents')}</p>
     {#each data.passives as passive, i}
       <PassiveSkillCard {id} image="talent_{i + 4}" data={passive} />
     {/each}
   </div>
-  <div class="flex flex-col text-white px-4 md:px-8" id="constellations" bind:this={constellationDiv}>
+  <Ad class="ml-8 mt-4 mb-2" type="desktop" variant="lb" id="3" />
+  <Ad class="flex justify-center mt-4 mb-2" type="mobile" variant="mpu" id="1" />
+  <div class="flex flex-col text-white px-4 md:px-8 max-w-screen-xl" id="constellations" bind:this={constellationDiv}>
     <a href="/characters/{id}/#constellations" class="font-black font-display text-2xl mt-4">
       {$t('characters.constellations')}
     </a>

src/routes/characters/index.svelte

@@ -11,6 +11,7 @@
   import { readSave, updateSave } from '../../stores/saveManager';
   import Select from '../../components/Select.svelte';
   import Button from '../../components/Button.svelte';
+  import Ad from '../../components/Ad.svelte';
 
   const sortOptions = [
     { label: $t('characters.name'), value: 'name' },
@@ -207,6 +208,13 @@
     }
   }
 
+  function changeViewType(val) {
+    type = val;
+    try {
+      window.reloadAdSlots();
+    } catch (error) {}
+  }
+
   onMount(async () => {
     await getConstellation();
   });
@@ -229,9 +237,7 @@
     <div class="flex text-white" style="height: fit-content;">
       <button
         class="{type === 'grid' ? 'bg-background' : 'bg-item'} p-2 rounded-l-xl cursor-pointer hover:bg-opacity-75"
-        on:click={() => {
-          type = 'grid';
-        }}
+        on:click={() => changeViewType('grid')}
       >
         <Icon path={mdiViewGrid} />
       </button>
@@ -239,9 +245,7 @@
         class="{type === 'table'
           ? 'bg-background'
           : 'bg-item'} bg-background p-2 rounded-r-xl cursor-pointer hover:bg-opacity-75"
-        on:click={() => {
-          type = 'table';
-        }}
+        on:click={() => changeViewType('table')}
       >
         <Icon path={mdiViewList} />
       </button>
@@ -249,6 +253,8 @@
   </div>
 
   {#if type === 'grid'}
+    <div class="flex">
+      <div>
         <div class="flex flex-col lg:flex-row flex-wrap px-4 md:pl-8 md:pr-4 mb-4">
           <div class="flex mr-2 mb-2 lg:mb-0">
             <Select
@@ -395,11 +401,18 @@
           {/each}
         </div>
         {#if showConstellation}
-      <div class="mt-12 mb-4 mx-4 md:mx-8 max-w-screen-xl md:flex items-center bg-background rounded-xl p-4">
+          <div
+            class="mt-12 mb-4 ml-4 mr-4 md:ml-8 md:mr-0 max-w-screen-xl md:flex items-center bg-background rounded-xl p-4"
+          >
             <img class="h-16 float-left md:float-none mr-2 md:mr-0" src="/images/paimon_faq.png" alt="Paimon" />
             <p class="md:ml-4 text-gray-200 ">{$t('characters.faq')}</p>
           </div>
         {/if}
+      </div>
+      <div class="hidden xl:block">
+        <Ad class="ml-4" type="desktop" variant="mpu" id="1" />
+      </div>
+    </div>
   {:else}
     <p class="text-gray-400 px-4 md:px-8 font-medium pb-2 mt-4">
       ※ {$t('characters.subtitle')}

src/routes/index.svelte

@@ -17,14 +17,20 @@
   import Achievement from './_index/achievement.svelte';
   import Furnishing from './_index/furnishing.svelte';
   import Build from './_index/build.svelte';
+  import Ad from '../components/Ad.svelte';
 
   let refreshLayout;
+  let isMobile = false;
 
   const onDone = debounce(() => {
     refreshLayout();
   }, 100);
 
   onMount(() => {
+    if (window.innerWidth < 500) {
+      isMobile = true;
+    }
+
     setTimeout(() => {
       refreshLayout();
     }, 1000);
@@ -53,16 +59,27 @@
     <Welcome on:done={onDone} />
     <Wish on:done={onDone} />
     <Banner on:done={onDone} />
+    {#if isMobile}
+      <div class="flex justify-center">
+        <Ad type="mobile" variant="mpu" id="1" />
+      </div>
+    {/if}
     <Build on:done={onDone} />
     <Event on:done={onDone} />
     <Item on:done={onDone} />
     <Discord on:done={onDone} />
     <Calculator on:done={onDone} />
     <Reminder on:done={onDone} />
+    {#if isMobile}
+      <div class="flex justify-center">
+        <Ad type="mobile" variant="mpu" id="2" />
+      </div>
+    {/if}
     <Achievement on:done={onDone} />
     <Furnishing on:done={onDone} />
     <Twitter on:done={onDone} />
     <!-- <div class="flex flex-col space-y-4">
     </div> -->
   </Masonry>
+  <Ad class="ml-4 mt-2" type="desktop" variant="lb" id="1" />
 </div>

src/routes/settings/index.svelte

@@ -12,6 +12,7 @@
   import Input from '../../components/Input.svelte';
   import DeleteAccountModal from './_deleteAccount.svelte';
   import ResetAccountModal from './_resetAccount.svelte';
+  import DonateModal from '../../components/DonateModal.svelte';
 
   import { driveSignedIn, driveError, driveLoading, synced, localModified, lastSyncTime } from '../../stores/dataSync';
   import { server, ar, wl } from '../../stores/server';
@@ -234,6 +235,17 @@
     );
   }
 
+  function openDonationModal() {
+    openModal(
+      DonateModal,
+      {},
+      {
+        closeButton: false,
+        styleWindow: { background: '#25294A', width: '500px' },
+      },
+    );
+  }
+
   onMount(() => {
     mounted = true;
   });
@@ -250,7 +262,7 @@
   <title>Settings - Paimon.moe</title>
 </svelte:head>
 
-<div class="lg:ml-64 pt-20 px-4 md:px-8 lg:pt-8">
+<div class="lg:ml-64 pt-20 px-4 md:px-8 lg:pt-8 max-w-screen-xl">
   <div class="bg-item rounded-xl mb-4 p-4">
     <p class="text-white">{$t('settings.version')} <b>2.1</b></p>
   </div>
@@ -344,6 +356,11 @@
       ><Icon path={mdiGithub} /> Github Issues</a
     >
     {$t('settings.thanks')}
+    <br />
+    <Button on:click={openDonationModal}>
+      <img class="inline w-8 h-8" src="/images/mora.png" alt="donate" />
+      {$t('sidebar.donate')}
+    </Button>
   </div>
   <div class="bg-item rounded-xl mb-4 p-4 text-white">
     <p class="font-semibold">Credits</p>

src/routes/timeline/index.svelte

@@ -16,6 +16,7 @@
   import DetailModal from './_detail.svelte';
   import { getAccountPrefix } from '../../stores/account';
   import { readSave } from '../../stores/saveManager';
+  import Ad from '../../components/Ad.svelte';
 
   const { open: openModal } = getContext('simple-modal');
 
@@ -223,7 +224,6 @@
 
   $: todayOffset = Math.abs(firstDay.diff(today, 'day', true));
   $: showAsLocalTime, onCheckLocalTime();
-
 </script>
 
 <svelte:head>
@@ -239,13 +239,19 @@
 </svelte:head>
 
 <div class="lg:ml-64 pt-20 lg:pt-8">
+  <div class="flex">
+    <div>
       <h1 class="font-display px-4 md:px-8 font-black text-5xl text-white">{$t('timeline.title')}</h1>
-  {#if !loading}
       <div class="px-4 md:px-8 text-white select-none">
         <Checkbox bind:checked={showAsLocalTime}>
           {$t('timeline.localTime')} ({browserTimeZone} - {$server} Server)
         </Checkbox>
       </div>
+    </div>
+    <Ad class="flex flex-1 justify-center" type="desktop" variant="lb" id="1" />
+  </div>
+  <Ad type="mobile" variant="lb" id="1" />
+  {#if !loading}
     <div class="w-full overflow-x-auto px-4 md:px-8" bind:this={timelineContainer} on:wheel={transformScroll}>
       <div
         style={`padding-top: 50px; width: min-content; padding-right: ${2 * padding * dayWidth}px; height: ${
@@ -337,5 +343,4 @@
     background: rgba(0, 0, 0, 0.35);
     @apply rounded-xl;
   }
-
 </style>

src/routes/wish/tally/index.svelte

@@ -1,5 +1,6 @@
 <script>
   import { t } from 'svelte-i18n';
+  import Ad from '../../../components/Ad.svelte';
   import Button from '../../../components/Button.svelte';
   import { banners } from '../../../data/banners';
   import Item from './_item.svelte';
@@ -23,15 +24,18 @@
     <p class="text-gray-400 px-4 md:px-8 font-medium pb-4" style="margin-top: -1rem;">
       ※ {$t('wish.tally.subtitle')}
     </p>
-
     <div class="px-4 md:px-8">
+      <Ad class="my-4" type="desktop" variant="lb" id="1" />
       <ItemNew
         type="character"
         banner={banners.characters[18]}
         id={300019}
         featured={banners.characters[18].featured}
       />
+      <Ad class="my-4 flex justify-center" type="mobile" variant="mpu" id="2" />
+      <Ad type="mobile" variant="lb" id="1" />
       <ItemNew type="weapon" banner={banners.weapons[17]} id={400018} featured={banners.weapons[17].featured} />
+      <Ad class="my-4" type="desktop" variant="lb" id="3" />
       <ItemNew
         type="character"
         banner={banners.characters[17]}