school: computational social something

src/routes/+layout.svelte

@@ -168,7 +168,7 @@
       </div>
     </header>
 
-    <div class="flex-1">
+    <div class="flex flex-col flex-1">
       <!-- Page content -->
       {@render children?.()}
     </div>

src/routes/school/+layout.svelte

@@ -5,4 +5,6 @@
 <div class="bg-base-300/50 text-center">
   ⚠️ Mobile support is not actively supported for school things ⚠️
 </div>
-<div class="">{@render children?.()}</div>
+<div class="flex flex-1">
+  {@render children?.()}
+</div>

src/routes/school/+page.svelte

@@ -1,4 +1,11 @@
 <script lang="ts">
 </script>
 
-<div>test</div>
+<div class="grid items-center justify-center w-full prose">
+  <div>
+    <div class="font-semibold">Click to redirect</div>
+    <ul class="underline">
+      <li><a href="/school/css">Computational Social Science</a></li>
+    </ul>
+  </div>
+</div>

src/routes/school/css/+page.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+  import DoubleRangeSlider from "@src/lib/components/DoubleRangeSlider.svelte";
+
+  class Range {
+    start: number = 0;
+    end: number = 1;
+  }
+
+  let leftRange: Range = new Range();
+  let rightRange: Range = new Range();
+
+  function round(num: number): number {
+    return Math.round(num * 10) / 10;
+  }
+
+  function isValidSelection() {
+    if (leftRange.start == leftRange.end) return false;
+    if (rightRange.start == rightRange.end) return false;
+    return true;
+  }
+</script>
+
+<div class="flex flex-col items-center justify-center w-full prose">
+  <div class="w-98">
+    <div class="flex w-full justify-between">
+      <div class="-ml-1.5">-1</div>
+      <div>0</div>
+      <div>1</div>
+    </div>
+    <div class="flex gap-8">
+      <DoubleRangeSlider
+        bind:start={leftRange.start}
+        bind:end={leftRange.end}
+      />
+      <DoubleRangeSlider
+        bind:start={rightRange.start}
+        bind:end={rightRange.end}
+      />
+    </div>
+    <div class="flex w-full justify-around">
+      <div>{round(leftRange.start)} - {round(leftRange.end)}</div>
+      <div>{round(rightRange.start)} - {round(rightRange.end)}</div>
+    </div>
+  </div>
+  <div class="w-full">
+    <img
+      src={"https://deprived.dev/assets/school/social-science/data/plots/sentiment_graph_-" +
+        round(1 - leftRange.end).toFixed(1) +
+        "_-" +
+        round(1 - leftRange.start).toFixed(1) +
+        "_" +
+        round(rightRange.start).toFixed(1) +
+        "_" +
+        round(rightRange.end).toFixed(1) +
+        ".jpg"}
+      alt=""
+    />
+  </div>
+</div>