feat: add disclaimer

src/popup/Disclaimer.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import type { Language } from '../types'
+  import DisclaimerEn from './Disclaimer/DisclaimerEN.svelte'
+  import DisclaimerKO from './Disclaimer/DisclaimerKO.svelte'
+
+  let lang: Language = 'en'
+  const setLang = (l: Language): void => {
+    lang = l
+  }
+</script>
+
+<div class="wrapper">
+  <div>
+    <button on:click={() => { setLang('en') }}>English</button>
+    <button on:click={() => { setLang('ko') }}>한국어</button>
+  </div>
+  <div>
+    {#if lang === 'en'}
+      <DisclaimerEn on:agree/>
+    {/if}
+    {#if lang === 'ko'}
+      <DisclaimerKO on:agree/>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .wrapper {
+    background-color: #000a;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    font-size: 24px;
+    z-index: 10;
+    color: white;
+  }
+
+  a {
+    color: #2d8fff;
+    text-decoration: underline;
+  }
+</style>

src/popup/Disclaimer/DisclaimerEN.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte'
+  const dispatchEvent = createEventDispatcher()
+  const agree = (): void => {
+    dispatchEvent('agree')
+  }
+</script>
+
+<p>
+  This is unofficial chrome extension for
+  <a href="https://donderhiroba.jp">donderhiroba.jp</a>.
+</p>
+<p>
+  This extension might violate the <a href="https://donderhiroba.jp/other_agreement.php">terms of service</a> of donderhiroba.jp.
+</p>
+<p>
+  Use this extension at your own risk.
+  The developer of this extension is not responsible for any problems caused by using this extension.
+</p>
+<p>
+  By clicking the button below, you agree to the above.
+</p>
+<button on:click={agree}>I agree</button>

src/popup/Disclaimer/DisclaimerKO.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte'
+  const dispatchEvent = createEventDispatcher()
+  const agree = (): void => {
+    dispatchEvent('agree')
+  }
+</script>
+
+<p>
+  이 확장 확장 프로그램은 비공식 크롬 확장 프로그램입니다
+</p>
+<p>
+  이 확장 프로그램은 donderhiroba.jp의 <a href="https://donderhiroba.jp/other_agreement.php">서비스 약관</a>을 위반할 수 있습니다.
+</p>
+<p>
+  이 확장 프로그램을 사용함에 있어 발생하는 모든 문제에 대해 개발자는 책임을 지지 않습니다.
+</p>
+<p>
+  아래 버튼을 클릭하면 위의 내용에 동의하는 것으로 간주됩니다.
+</p>
+<button on:click={agree}>동의합니다</button>

src/popup/Main.svelte

@@ -13,6 +13,7 @@
   import { SongDB } from '../lib/songDB'
   import { onMount } from 'svelte'
   import I18N from '../lib/i18n'
+  import Disclaimer from './Disclaimer.svelte';
 
   interface Tab {
     name: string
@@ -56,9 +57,19 @@
     settingsStorage.lastTabIndex = idx
     await settingsStorage.save()
   }
+
+  let showDisclaimer = true
+  const onAgree = (): void => {
+    console.log('agree') 
+    showDisclaimer = false
+  }
 </script>
 
 <main style={`width: ${WIDTH}px; height: ${HEIGHT}px`}>
+  {#if showDisclaimer}
+    <Disclaimer on:agree={onAgree}/>
+  {/if}
+
   <div class="tab-list" style={`height: ${TAB_HEIGHT}px`}>
     {#each tabs as tab, i}
       <button class="tab-item" class:active={currentTabIdx === i} on:click={async () => { await onClickTab(i) }} style={`height: ${TAB_HEIGHT}px`}>