fix wordings and styling

bastipnt · Dec 13, 2024 · 1464631 · 1464631
1 parent 6153798
commit 1464631
Show file tree

Hide file tree

Showing 8 changed files with 189 additions and 152 deletions.
diff --git a/packages/backend/src/index.ts b/packages/backend/src/index.ts
@@ -9,6 +9,11 @@ import { userRoutes } from "./user";
 const isProd = process.env.NODE_ENV === "production";
 const client = edgedb.createClient();
 
+const sharedRoutes = new Elysia()
+  .use(userRoutes(client))
+  .use(surveyRoutes(client))
+  .use(fingerprintRoutes(client));
+
 let app;
 
 if (isProd) {
@@ -20,9 +25,7 @@ if (isProd) {
       }),
     )
     .get("/", () => Bun.file("dist/index.html"))
-    .use(userRoutes(client))
-    .use(surveyRoutes(client))
-    .use(fingerprintRoutes(client))
+    .use(sharedRoutes)
     .listen(3000);
 } else {
   app = new Elysia()
@@ -34,9 +37,7 @@ if (isProd) {
       }),
     )
     .get("/", () => "hello")
-    .use(userRoutes(client))
-    .use(surveyRoutes(client))
-    .use(fingerprintRoutes(client))
+    .use(sharedRoutes)
     .listen(3000);
 }
 

diff --git a/packages/frontend/src/App.svelte b/packages/frontend/src/App.svelte
@@ -2,7 +2,6 @@
   import { onMount } from "svelte";
   import Client, { type FingerprintParams } from "./Client";
   import FingerprintPage from "./Pages/Fingerprint.svelte";
-  import FingerprintPage2 from "./Pages/Fingerprint2.svelte";
   import Questions from "./Pages/Questions.svelte";
   import Questions2 from "./Pages/Questions2.svelte";
   import Thanks from "./Pages/Thanks.svelte";
@@ -40,7 +39,8 @@
     if (page === 0) {
       fingerprinter.createFingerprint();
     }
-    if (page >= 5) return (page = 5);
+    if (page >= 4) return (page = 4);
+    window.scrollTo(0, 0);
     transitioning = page;
     page++;
   };
@@ -74,15 +74,13 @@
       submitSurvey={client.submitPart2}
     />
   {:else if page === 3 && transitioning !== 2}
-    <FingerprintPage {handleNext} {handleTransitionFinished} />
-  {:else if page === 4 && transitioning !== 3}
-    <FingerprintPage2
+    <FingerprintPage
       {handleNext}
       {handleTransitionFinished}
       {fingerprintArr}
       {submitFP}
     />
-  {:else if page === 5 && transitioning !== 4}
+  {:else if page === 4 && transitioning !== 3}
     <Thanks />
   {/if}
 </main>
diff --git a/packages/frontend/src/Pages/Fingerprint.svelte b/packages/frontend/src/Pages/Fingerprint.svelte
@@ -5,32 +5,101 @@
   type Props = {
     handleNext: () => void;
     handleTransitionFinished: () => void;
+    fingerprintArr?: FingerprintArr;
+    submitFP: () => Promise<void>;
   };
 
-  let { handleNext, handleTransitionFinished }: Props = $props();
+  let {
+    handleNext,
+    handleTransitionFinished,
+    fingerprintArr,
+    submitFP,
+  }: Props = $props();
+
+  const handleNextAndSubmitFP = async () => {
+    await submitFP();
+    handleNext();
+  };
 </script>
 
 <section
-  class="space-y-8 pb-8"
+  class="my-8 space-y-8"
   in:fly={{ x: 200, duration: 500, delay: 0.001 }}
   out:fly={{ x: -200, duration: 100 }}
   onoutroend={handleTransitionFinished}
 >
-  <div class="card">
-    <header class="card-header p-4">
-      <h2 class="text-2xl">Nice, you made it this far!</h2>
-    </header>
+  <div
+    class="sm: flex flex-wrap justify-center gap-4 p-4 text-center text-4xl sm:justify-start sm:text-left"
+  >
+    <span>💻</span>
+    <h1>Device Fingerprint</h1>
+  </div>
 
+  <div class="card">
     <section class="space-y-4 p-4">
       <p>
-        On the next page you will see an example of a tracking method called <i
-          class="text-teal-400">Browser Fingerprint</i
+        What you can see here is your personal <i class="text-teal-400"
+          >Device Fingerprint</i
+        >.
+        <span class="text-surface-400">(also called Browser Fingerprint)</span>
+      </p>
+      <p>
+        It consists of values from your device/browser that can be read out by
+        websites via <i class="text-teal-400">JavaScript</i>.
+      </p>
+      <p>
+        Because <i class="text-teal-400">device/broswer combinations</i> are often
+        unique, these values can be used to track you!
+      </p>
+      <p>
+        This is used by a lot of websites to understand your <i
+          class="text-teal-400">online behaviour</i
         >.
       </p>
+      <p>✨✨✨</p>
+      <p>
+        In my master thesis I want to learn about <i class="text-teal-400"
+          >how websites track you</i
+        >
+        and how to <i class="text-teal-400">prevent</i> them from doing it.
+      </p>
+      <p>
+        For this you can help me by sending me your <i class="text-teal-400"
+          >Device Fingerprint</i
+        >.
+      </p>
+      <p>Thank you!!! 💜</p>
     </section>
   </div>
 
+  {#if fingerprintArr !== undefined}
+    <div class="card overflow-hidden">
+      <header class="card-header p-4">
+        <h2 class="text-2xl">Your Device Fingerprint</h2>
+      </header>
+      <section class="pt-4">
+        <ul
+          class="fingerprint-list flex flex-col overflow-hidden sm:grid sm:grid-cols-2"
+        >
+          {#each fingerprintArr as component, i}
+            <li
+              class={`flex-cols flex flex-wrap justify-between gap-2 px-4 py-2 sm:col-span-2 sm:grid sm:grid-cols-subgrid ${(i + 1) % 2 && "bg-surface-700"}`}
+            >
+              <p>{component.name}:</p>
+              <p>{component.value}</p>
+            </li>
+          {/each}
+        </ul>
+      </section>
+    </div>
+  {/if}
+
   <div class="flex flex-col flex-wrap justify-end gap-4 md:flex-row">
-    <button class="variant-filled btn" onclick={handleNext}>Next</button>
+    <button class="variant-outline btn" onclick={handleNext}
+      >No, I don't like to share this data</button
+    >
+    <button class="variant-filled btn" onclick={handleNextAndSubmitFP}
+      >Ok, you can use my device fingerprint</button
+    >
   </div>
 </section>
diff --git a/packages/frontend/src/Pages/Fingerprint2.svelte b/packages/frontend/src/Pages/Fingerprint2.svelte
diff --git a/packages/frontend/src/Pages/Questions.svelte b/packages/frontend/src/Pages/Questions.svelte
@@ -95,8 +95,16 @@
   in:fly={{ x: 200, duration: 500, delay: 0.001 }}
   out:fly={{ x: -200, duration: 100 }}
   onoutroend={handleTransitionFinished}
+  class="my-8"
 >
   <form class="flex flex-col gap-8" onsubmit={handleSubmit}>
+    <div
+      class="sm: flex flex-wrap justify-center gap-4 p-4 text-center text-4xl sm:justify-start sm:text-left"
+    >
+      <span>🕵️‍♀️</span>
+      <h1>Advertisement and tracking</h1>
+    </div>
+
     <div class="card p-4">
       <label class="label space-y-4" for="numLastWeeksAds1">
         <span>
@@ -400,7 +408,7 @@
       </label>
     </div>
 
-    <div class="flex flex-col flex-wrap justify-end gap-4 pt-8 md:flex-row">
+    <div class="flex flex-col flex-wrap justify-end gap-4 md:flex-row">
       <button class="variant-filled btn" type="submit" name="submit"
         >Next</button
       >

diff --git a/packages/frontend/src/Pages/Questions2.svelte b/packages/frontend/src/Pages/Questions2.svelte
@@ -92,8 +92,16 @@
   in:fly={{ x: 200, duration: 500, delay: 0.001 }}
   out:fly={{ x: -200, duration: 100 }}
   onoutroend={handleTransitionFinished}
+  class="my-8"
 >
   <form class="flex flex-col gap-8" onsubmit={handleSubmit}>
+    <div
+      class="sm: flex flex-wrap justify-center gap-4 p-4 text-center text-4xl sm:justify-start sm:text-left"
+    >
+      <span>✨</span>
+      <h1>About you</h1>
+    </div>
+
     <div class="card p-4">
       <label class="label space-y-4" for="interestInLearning8">
         <span>
@@ -260,7 +268,7 @@
           </label>
           <label class="flex items-center space-x-2">
             <input class="radio" type="radio" name="work11" value="other" />
-            <p>Other</p>
+            <p>Something else ...</p>
           </label>
         </div>
       </label>
@@ -319,7 +327,7 @@
       </label>
     </div>
 
-    <div class="flex flex-col flex-wrap justify-end gap-4 pt-8 md:flex-row">
+    <div class="flex flex-col flex-wrap justify-end gap-4 md:flex-row">
       <button class="variant-filled btn" type="submit" name="submit"
         >Next</button
       >

diff --git a/packages/frontend/src/Pages/Thanks.svelte b/packages/frontend/src/Pages/Thanks.svelte
@@ -2,25 +2,31 @@
   import { fly } from "svelte/transition";
 </script>
 
-<div
-  class="card space-y-4 px-4 py-16"
+<section
+  class="my-8 flex flex-col gap-8"
   in:fly={{ x: 200, duration: 500, delay: 0.001 }}
 >
-  <h1 class="mb-16 text-center text-4xl text-teal-400">
-    Thanks for taking part in this survey! 💜✨
-  </h1>
-  <p>
-    If you are interested in reading more about <i class="text-teal-400"
-      >browser fingerprints</i
-    > and tracking here are yome links for you:
-  </p>
-  <ul class="ml-4 list-disc underline">
-    <li>
-      <a href="https://en.wikipedia.org/wiki/Device_fingerprint"
-        >https://en.wikipedia.org/wiki/Device_fingerprint</a
-      >
-    </li>
-    <li><a href="https://amiunique.org/">https://amiunique.org/</a></li>
-    <li><a href="https://browserleaks.com/">https://browserleaks.com/</a></li>
-  </ul>
-</div>
+  <div
+    class="sm: flex flex-wrap justify-center gap-4 p-4 text-center text-4xl sm:justify-start sm:text-left"
+  >
+    <span>💜✨</span>
+    <h1>Thanks for taking part in this survey!</h1>
+  </div>
+
+  <div class="card space-y-4 p-4">
+    <p>
+      If you are interested in reading more about <i class="text-teal-400"
+        >browser fingerprints</i
+      > and tracking here are yome links for you:
+    </p>
+    <ul class="ml-4 list-disc underline">
+      <li>
+        <a href="https://en.wikipedia.org/wiki/Device_fingerprint"
+          >https://en.wikipedia.org/wiki/Device_fingerprint</a
+        >
+      </li>
+      <li><a href="https://amiunique.org/">https://amiunique.org/</a></li>
+      <li><a href="https://browserleaks.com/">https://browserleaks.com/</a></li>
+    </ul>
+  </div>
+</section>