dismiss & use svelte in client

src/client/App.svelte

@@ -0,0 +1,85 @@
+<script>
+  import { blocked } from './blocked'
+  import { init } from './reporter'
+  import { buttons, dismiss } from './dismiss'
+
+  init()
+</script>
+
+<div class="wrapper" class:hidden={!$blocked}>
+  <div>
+    <h1>Overtime</h1>
+    <div>You have no time left on this website.</div>
+    <hr />
+    <div class="dismiss">
+      <div>
+        <i> dismiss for... </i>
+      </div>
+      <div class="links">
+        {#each buttons as button}
+          <!-- svelte-ignore a11y-missing-attribute -->
+          <a on:click={() => dismiss(button.duration)}>{button.label}</a>
+        {/each}
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  .wrapper {
+    position: fixed;
+    color: #111;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: #fefefe;
+    z-index: 999999999;
+    font-size: 1rem;
+    padding: 1rem;
+    user-select: none;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
+      'Helvetica Neue', sans-serif;
+  }
+
+  .wrapper.hidden {
+    display: none;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .wrapper {
+      background-color: #111;
+      color: #eee;
+    }
+  }
+
+  .wrapper > div {
+    margin: 3rem auto;
+    max-width: 25rem;
+  }
+
+  .wrapper h1 {
+    margin-bottom: 2rem;
+  }
+
+  .dismiss {
+    display: flex;
+    flex-direction: row;
+  }
+
+  .dismiss .links {
+    margin-left: 1rem;
+    margin-top: -0.1rem;
+  }
+
+  .dismiss .links a {
+    display: block;
+    cursor: pointer;
+    padding: 0.1em;
+    transition: all 100ms ease-in-out;
+  }
+
+  .dismiss .links a:hover {
+    transform: translateX(-0.5em);
+  }
+</style>