feat: Is It Glue?

src/lib/index.ts

@@ -1 +0,0 @@
-// place files you want to import through the `$lib` alias in this folder.

src/routes/+page.svelte

@@ -1,2 +1,137 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+<script lang="ts">
+  import { fade } from 'svelte/transition';
+
+  let hasImpact = false;
+  let hasAnswered = false;
+</script>
+
+<svelte:head>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet" />
+</svelte:head>
+
+<header>
+  <h1>Is It Glue?</h1>
+</header>
+
+<main>
+  {#if !hasAnswered}
+    <form transition:fade={{ delay: 0, duration: 300 }}>
+      <h1>Does this have impact?</h1>
+
+      <button
+        on:click={() => {
+          hasImpact = true;
+          hasAnswered = true;
+        }}>Yes</button
+      >
+
+      <button
+        on:click={() => {
+          hasImpact = false;
+          hasAnswered = true;
+        }}>No</button
+      >
+    </form>
+  {:else}
+    <div transition:fade={{ delay: 300, duration: 500 }} id="answer">
+      <h1>
+        {#if hasImpact}
+          It's not glue!
+        {:else}
+          I'm sorry. It's glue.
+        {/if}
+      </h1>
+    </div>
+  {/if}
+</main>
+
+<footer>
+  <a href="https://noidea.dog/glue" target="_blank">Wtf is glue?</a>
+</footer>
+
+<style>
+  :global(body) {
+    font-family: 'Roboto', sans-serif;
+    background-color: #27272a;
+  }
+
+  :global(body),
+  a,
+  button {
+    color: #f4f4f5;
+  }
+
+  header {
+    position: absolute;
+    left: 50%;
+    top: 1rem;
+    transform: translate(-50%, 0);
+  }
+
+  main {
+    height: 16rem;
+    width: 32rem;
+
+    padding: 4rem 8rem;
+
+    position: absolute;
+    left: 50%;
+    bottom: 50%;
+    transform: translate(-50%, 25%);
+
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+
+    justify-items: center;
+    align-items: center;
+
+    background-color: #18181b;
+    border-radius: 15px;
+  }
+
+  form {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 4em 4em;
+    gap: 1em;
+
+    grid-row: 1 / 1;
+    grid-column: 1 / 1;
+
+    & h1 {
+      grid-column: span 2;
+    }
+
+    & button {
+      grid-column: span 1;
+    }
+  }
+
+  div#answer {
+    grid-row: 1 / 1;
+    grid-column: 1 / 1;
+  }
+
+  button {
+    width: 100%;
+    padding: 1em;
+
+    background-color: #a16207;
+    border: none;
+    border-radius: 15px;
+
+    font-size: large;
+
+    cursor: pointer;
+  }
+
+  footer {
+    position: absolute;
+    left: 50%;
+    bottom: 1em;
+    transform: translate(-50%, 0);
+  }
+</style>