Add dino + fix ethan
This commit is contained in:
parent
a818e3d932
commit
0f4dcf53df
1
.gitignore
vendored
1
.gitignore
vendored
@ -9,3 +9,4 @@ node_modules
|
||||
vite.config.js.timestamp-*
|
||||
vite.config.ts.timestamp-*
|
||||
yarn-error.log
|
||||
/.direnv/
|
||||
|
||||
34
flake.lock
34
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",
|
||||
|
||||
19
flake.nix
19
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 }:
|
||||
flake-utils.lib.eachDefaultSystem (system:
|
||||
let
|
||||
system = "aarch64-darwin";
|
||||
pkgs = nixpkgs.legacyPackages.${system};
|
||||
in {
|
||||
devShells.${system}.default =
|
||||
pkgs.mkShell {
|
||||
devShell = pkgs.mkShell {
|
||||
buildInputs = with pkgs; [
|
||||
yarn
|
||||
nodePackages.svelte-language-server
|
||||
nodePackages.typescript-language-server
|
||||
nodePackages.vscode-css-languageserver-bin
|
||||
tree
|
||||
vscode-langservers-extracted
|
||||
];
|
||||
shellHook = ''
|
||||
exec zsh
|
||||
'';
|
||||
};
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -6,7 +6,8 @@
|
||||
"liv",
|
||||
"nis",
|
||||
"gremlin",
|
||||
"ethan"
|
||||
"ethan",
|
||||
"dino"
|
||||
];
|
||||
</script>
|
||||
|
||||
|
||||
132
src/routes/b/dino/+page.svelte
Normal file
132
src/routes/b/dino/+page.svelte
Normal file
@ -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>
|
||||
@ -133,7 +133,7 @@
|
||||
{/each}
|
||||
</p>
|
||||
</div>
|
||||
<CountDownTimer birthday={"Mar 25"} />
|
||||
<CountDownTimer birthday={"Mar 30"} />
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user