tips

.vscode/settings.json

@@ -16,8 +16,11 @@
     "lucide",
     "nocheck",
     "pino",
+    "pngs",
     "rawcwe",
     "smartimation",
+    "splide",
+    "splidejs",
     "tailwindcss",
     "Typecheck",
     "UNSUB",

package.json

@@ -13,6 +13,7 @@
   },
   "devDependencies": {
     "@crxjs/vite-plugin": "2.0.0-beta.23",
+    "@splidejs/svelte-splide": "^0.2.9",
     "@sveltejs/vite-plugin-svelte": "^3.1.0",
     "@total-typescript/ts-reset": "^0.5.1",
     "@tsconfig/svelte": "5.0.4",
@@ -35,6 +36,7 @@
     "qs": "^6.12.1",
     "svelte": "^4.2.15",
     "svelte-check": "3.6.9",
+    "svelte-confetti": "^1.4.0",
     "svelte-french-toast": "^1.2.0",
     "svelte-preprocess": "5.1.4",
     "tailwind-modern-scroll": "^0.0.7",

src/components/Done.svelte

@@ -0,0 +1,49 @@
+<script>
+  import { blur } from "svelte/transition";
+  import Confetti from "svelte-confetti";
+  import SliderTips from "./tips/Slider_Tips.svelte";
+  import { XIcon } from "lucide-svelte";
+
+  let open = true;
+</script>
+
+{#if open}
+  <div
+    style="
+position: fixed;
+top: -50px;
+left: 0;
+height: 100vh;
+width: 100vw;
+display: flex;
+justify-content: center;
+overflow: hidden;
+pointer-events: none;
+z-index: 1000;
+"
+  >
+    <Confetti
+      x={[-5, 5]}
+      y={[0, 0.1]}
+      delay={[0, 1000]}
+      duration={3000}
+      amount={1000}
+      fallDistance="100vh"
+    />
+  </div>
+  <div
+    transition:blur
+    class="backdrop-blur-[2px] absolute w-full h-full z-10 rounded-md"
+  >
+    <div
+      class="flex justify-center items-center h-full w-full flex-col gap-1 -mt-4"
+    >
+      <div class="flex justify-end w-full">
+        <button on:click={() => (open = false)} class="btn btn-sm btn-circle"
+          ><XIcon class="w-4 h-4" /></button
+        >
+      </div>
+      <SliderTips />
+    </div>
+  </div>
+{/if}

src/components/Footer.svelte

@@ -5,6 +5,7 @@
   import GithubMarkWhite from "src/assets/icons/github-mark-white.png";
   import { docs } from "src/utils/docs";
   import ExternalLink from "./External_Link.svelte";
+    import { BMC_LINK } from "src/utils/constants";
 </script>
 
 <div class="my-2 gap-2 flex justify-center items-center mb-3">
@@ -28,7 +29,7 @@
       class="btn btn-xs normal-case"
       target="_blank"
       rel="noreferrer"
-      href="https://www.buymeacoffee.com/biplobsd"
+      href={BMC_LINK}
     >
       <CoffeeIcon />
       Buy me a coffee</a

src/components/Main.svelte

@@ -29,7 +29,7 @@
       >About
     </button>
   </div>
-  <div class="my-2 w-full">
+  <div class="my-2 w-full relative">
     {#if tabName === "Home"}
       <div in:blur out:slide>
         {#if $workingModeWritable === "xpath"}

src/components/icons/Coffee_Icon.svelte

@@ -1,6 +1,11 @@
+<script lang="ts">
+  export let width: string = "15px";
+  export let height: string = "15px";
+</script>
+
 <svg
-  width="15px"
-  height="15px"
+  {width}
+  {height}
   viewBox="0 0 884 1279"
   fill="none"
   xmlns="http://www.w3.org/2000/svg"

src/components/pages/Home.svelte

@@ -18,6 +18,7 @@
   import { docs } from "src/utils/docs";
   import { ExternalLinkIcon, CopyIcon } from "lucide-svelte";
   import { channelIDsSchema } from "src/utils/schema";
+  import Done from "../Done.svelte";
 
   let lastStatusData: RuntimeMessage | undefined = undefined;
   let isRunning = true;
@@ -413,8 +414,12 @@
   });
 </script>
 
+{#if status.msg === "Done"}
+  <Done />
+{/if}
+
 {#if isRightSiteNow}
-  <div class="space-y-2">
+  <div class="space-y-2 relative">
     <div class="font-bold flex gap-1 items-center">
       Data <DocsLink href={docs.dataSection} />
     </div>

src/components/tips/Item.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  export let text: string;
+  export let href: string;
+</script>
+
+<a
+target="_blank"
+rel="noreferrer"
+{href}
+  class="mx-1 flex justify-center flex-row h-32 w-[16.3rem] btn gap-3 p-3 btn-info"
+>
+  <slot />
+  <div class="text-center space-y-2">
+    <p>
+      {text}
+    </p>
+  </div>
+</a>

src/components/tips/Slider_Tips.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import "@splidejs/svelte-splide/css";
+  import { Splide, SplideSlide } from "@splidejs/svelte-splide";
+  import Item from "./Item.svelte";
+  import CoffeeIcon from "src/components/icons/Coffee_Icon.svelte";
+    import { StarIcon } from "lucide-svelte";
+    import { BMC_LINK, STORE_LINK } from "src/utils/constants";
+
+</script>
+
+<Splide
+  class="h-40 w-[18.3rem] px-2"
+  options={{
+    type: "loop",
+    autoplay: true,
+    arrows: false,
+  }}
+  aria-label="Tips"
+>
+<SplideSlide>
+  <Item href={BMC_LINK} text={"If you enjoy this extension, consider buying me a coffee."}>
+    <div class="animate-bounce">
+    <CoffeeIcon width="40px" height="40px" />
+    </div>
+    </Item>
+</SplideSlide>
+<SplideSlide>
+  <Item href={STORE_LINK} text={"Give 5 star review if you like this extension."} >
+    <div class="flex gap-2">
+      <StarIcon class="h-5 w-5 animate-[bounce_1s_ease-in-out_infinite]" />
+      <StarIcon class="h-5 w-5 animate-[bounce_0.8s_ease-in-out_infinite]" />
+      <StarIcon class="h-5 w-5 animate-[bounce_0.6s_ease-in-out_infinite]" />
+      <StarIcon class="h-5 w-5 animate-[bounce_0.4s_ease-in-out_infinite]" />
+      <StarIcon class="h-5 w-5 animate-[bounce_0.6s_ease-in-out_infinite]" />
+    </div>
+    </Item>
+</SplideSlide>
+</Splide>

src/content/client.ts

@@ -271,7 +271,7 @@ export async function readySignalSend() {
   await runtime.send({
     to: "option",
     status: {
-      msg: "Ready for accept request?",
+      msg: "Ready for accept request...",
       code: "ready",
     },
   });
@@ -281,7 +281,7 @@ async function acceptSignalSend() {
   await runtime.send({
     to: "option",
     status: {
-      msg: "Accepting request...",
+      msg: "Ready for accept request...",
       code: "accept",
     },
   });

src/utils/constants.ts

@@ -24,3 +24,5 @@ export const API_KEY = import.meta.env.VITE_API_KEY;
 export const USERINFO_API_URL = "https://www.googleapis.com/oauth2/v3/userinfo";
 export const PRIMARY_CHANNEL = "primaryChannelKey";
 export const API_REQ_DELAY = "apiReqDelay";
+export const BMC_LINK = "https://www.buymeacoffee.com/biplobsd";
+export const STORE_LINK = "https://chrome.google.com/webstore/detail/fanknehiohibiphenfaigbmefncbheaa";

src/utils/interface.ts

@@ -0,0 +1,5 @@
+export interface TooltipItem {
+  text: string;
+  img: string;
+  imgAlt: string;
+}