Add dino + fix ethan

.envrc

@@ -0,0 +1 @@
+use flake

.gitignore

@@ -9,3 +9,4 @@ node_modules
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 yarn-error.log
+/.direnv/

flake.lock

@@ -1,5 +1,23 @@
 {
   "nodes": {
+    "flake-utils": {
+      "inputs": {
+        "systems": "systems"
+      },
+      "locked": {
+        "lastModified": 1710146030,
+        "narHash": "sha256-SZ5L6eA7HJ/nmkzGG7/ISclqe6oZdOZTNoesiInkXPQ=",
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "rev": "b1d9ab70662946ef0850d488da1c9019f3a9752a",
+        "type": "github"
+      },
+      "original": {
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "type": "github"
+      }
+    },
     "nixpkgs": {
       "locked": {
         "lastModified": 1711163522,
@@ -18,8 +36,24 @@
     },
     "root": {
       "inputs": {
+        "flake-utils": "flake-utils",
         "nixpkgs": "nixpkgs"
       }
+    },
+    "systems": {
+      "locked": {
+        "lastModified": 1681028828,
+        "narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=",
+        "owner": "nix-systems",
+        "repo": "default",
+        "rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e",
+        "type": "github"
+      },
+      "original": {
+        "owner": "nix-systems",
+        "repo": "default",
+        "type": "github"
+      }
     }
   },
   "root": "root",

flake.nix

@@ -1,27 +1,22 @@
 {
-  description = "Cool people homepage";
+  description = "A very basic svelte flake";
 
   inputs = {
     nixpkgs.url = "github:nixos/nixpkgs?ref=nixos-unstable";
+    flake-utils.url = "github:numtide/flake-utils";
   };
 
-  outputs = { self, nixpkgs }: 
+  outputs = { self, nixpkgs, flake-utils }:
-  let
+    flake-utils.lib.eachDefaultSystem (system:
-    system = "aarch64-darwin";
+      let
-    pkgs = nixpkgs.legacyPackages.${system};
+        pkgs = nixpkgs.legacyPackages.${system};
-  in {
+      in {
-    devShells.${system}.default = 
+        devShell = pkgs.mkShell {
-      pkgs.mkShell {
+          buildInputs = with pkgs; [
-        buildInputs = with pkgs; [
+            yarn
-          yarn
+            nodePackages.svelte-language-server
-          nodePackages.svelte-language-server
+            vscode-langservers-extracted
-          nodePackages.typescript-language-server
+          ];
-          nodePackages.vscode-css-languageserver-bin
+        };
-          tree
+      });
-        ];
-        shellHook = ''
-          exec zsh
-        '';
-      };
-  };
 }

src/lib/elem/CountDownTimer.svelte

@@ -25,7 +25,7 @@
   }, 1);
 </script>
 
-<main>
+<div>
   <pre>{months} month{months == 1 ? "" : "s"} until {birthday}, {year}</pre>
   <pre>{weeks} week{weeks == 1 ? "" : "s"} until {birthday}, {year}</pre>
   <pre>{days} day{days == 1 ? "" : "s"} until {birthday}, {year}</pre>
@@ -35,10 +35,10 @@
   <pre>{milliseconds} millisecond{milliseconds == 1
       ? ""
       : "s"} until {birthday}, {year}</pre>
-</main>
+</div>
 
 <style>
-  main {
+  div {
     margin: 10px 0;
   }
 

src/routes/+page.svelte

@@ -6,7 +6,8 @@
     "liv",
     "nis",
     "gremlin",
-    "ethan"
+    "ethan",
+    "dino"
   ];
 </script>
 

src/routes/b/dino/+page.svelte

@@ -0,0 +1,132 @@
+<script>
+  import CountDownTimer from "$lib/elem/CountDownTimer.svelte";
+
+  const valueMap = {
+    32: ["Woah, my water is frozen.", "[ded]"],
+    40: ["Alright, I should get another sweater.", "[teeth chattering]"],
+    50: ["Ok, this is kinda chilly.", "Can I get frostbite from this?"],
+    60: ["I don't mind this at all.", "I think I need to get some more layers."],
+    70: ["This is pretty nice!", "Eh, could be warmer."],
+    80: ["I do not like this.", "Finally, some summer warmth."],
+    90: ["My face is MELTING OFF!", "I guess I should turn the fan on now."],
+    100: ["[dead]", "Wow, it's kinda hot."],
+    110: ["[literally ashes]", "Wow I actually sweated a bit."],
+    120: ["[..dead..]", "Now *this* is hot!"],
+    212: ["WHY MY WATER HAS BUBBLES?!", "It's boiling."]
+  }
+
+  let value = 70;
+  let closest = 70;
+
+  $: {
+    closest = Object.keys(valueMap).reduce((prev, curr) => {
+      return (Math.abs(Number(curr) - Number(value)) < Math.abs(Number(prev) - Number(value)) ? Number(curr) : Number(prev))
+   });
+  }
+</script>
+
+<main>
+  <div id="main">
+    <div id="message">
+      <h1>Hey</h1>
+      <p>So I was thinking about what the best way to design this page would be, and honestly it wasn't very difficult. <b>Hopefully you like it.</b></p>
+
+      <h2>I present to you..<h2>
+
+    </div>
+    <div id="game">
+      <h1 class="title">The Temperature Slider - {value}°F</h1>
+      <div class="slider-container">
+        <input bind:value={value} type="range" min="32" max="212" class="slider" id="range">
+      </div>
+      <div id="columns-wrap">
+        <div id="columns">
+          <div id="col-1">
+            <h3>I would say..</h3>
+            <p class="dialogue">{valueMap[closest][0]}</p>
+          </div>
+          <div id="col-2">
+            <h3>You would say..</h3>
+            <p class="dialogue">{valueMap[closest][1]}</p>
+          </div>
+        </div>
+      </div>
+
+    </div>
+    <p><b>Well, that's kinda fun.<b>
+          <br>
+          I hope you like it, but mostly I hope you have a great birthday. We only get them once a year, so here's my contribution towards making this the best one yet.
+          <br>
+          I hope it helps.
+    </p>
+    <CountDownTimer birthday={"Jul 17"} />
+  </div>
+</main>
+
+<style>
+  @import url('https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');
+  main {
+    font-family: "PT Serif", serif;
+    padding: 10px;
+    display: flex;
+    justify-content:  center;
+    background: lavender;
+    color: black;
+  }
+  #main {
+    max-width: 80ch;
+  }
+  
+  h1 {
+    margin-bottom: 0;
+    padding-bottom: 1em;
+  }
+
+  #game {
+    border-radius: 2em;
+    box-shadow: 5px 5px 50px #0000000f;
+    padding: 1em;
+  }
+
+  .title {
+    text-align:  center;
+  }
+  
+  .slider-container {
+    width: 100%;
+  }
+
+  .slider {
+    -webkit-appearance: none;  
+    width: 100%;
+    height: 1em;
+    border-radius: 999px;
+
+    background: linear-gradient(90deg, #0000ff, #ff0000);
+  }
+
+  #columns-wrap {
+    display: flex;
+    justify-content: center;
+  }
+
+  #columns {
+    display: grid;
+    grid-template-columns: auto auto;
+  }
+
+  #col-1, #col-2 {
+    margin: 1em;
+    max-width: 12em;
+  }
+
+  .dialogue {
+    font-style:  italic;
+  }
+  .dialogue::before {
+    content: '"';
+  }
+  .dialogue::after {
+    content: '"';
+  }
+</style>

src/routes/b/ethan/+page.svelte

@@ -133,7 +133,7 @@
         {/each}
       </p>
     </div>
-    <CountDownTimer birthday={"Mar 25"} />
+    <CountDownTimer birthday={"Mar 30"} />
   </div>
 </main>