fix(js): remove test data

Cargo.lock

@@ -21,9 +21,9 @@ checksum = "d468802bab17cbc0cc575e9b053f41e72aa36bfa6b7f55e3529ffa43161b97fa"
 
 [[package]]
 name = "axum"
-version = "0.5.17"
+version = "0.6.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "acee9fd5073ab6b045a275b3e709c163dd36c90685219cb21804a147b58dba43"
+checksum = "744864363a200a5e724a7e61bc8c11b6628cf2e3ec519c8a1a48e609a8156b40"
 dependencies = [
  "async-trait",
  "axum-core",
@@ -39,8 +39,10 @@ dependencies = [
  "mime",
  "percent-encoding",
  "pin-project-lite",
+ "rustversion",
  "serde",
  "serde_json",
+ "serde_path_to_error",
  "serde_urlencoded",
  "sync_wrapper",
  "tokio",
@@ -52,9 +54,9 @@ dependencies = [
 
 [[package]]
 name = "axum-core"
-version = "0.2.9"
+version = "0.3.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "37e5939e02c56fecd5c017c37df4238c0a839fa76b7f97acdd7efb804fd181cc"
+checksum = "79b8558f5a0581152dc94dcd289132a1d377494bdeafcd41869b3258e3e2ad92"
 dependencies = [
  "async-trait",
  "bytes",
@@ -62,6 +64,7 @@ dependencies = [
  "http",
  "http-body",
  "mime",
+ "rustversion",
  "tower-layer",
  "tower-service",
 ]
@@ -233,16 +236,6 @@ version = "0.2.137"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "fc7fcc620a3bff7cdd7a365be3376c97191aeaccc2a603e600951e452615bf89"
 
-[[package]]
-name = "lock_api"
-version = "0.4.9"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "435011366fe56583b16cf956f9df0095b405b82d76425bc8981c0e22e60ec4df"
-dependencies = [
- "autocfg",
- "scopeguard",
-]
-
 [[package]]
 name = "log"
 version = "0.4.17"
@@ -263,9 +256,9 @@ dependencies = [
 
 [[package]]
 name = "matchit"
-version = "0.5.0"
+version = "0.6.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "73cbba799671b762df5a175adf59ce145165747bb891505c43d09aefbbf38beb"
+checksum = "3dfc802da7b1cf80aefffa0c7b2f77247c8b32206cc83c270b61264f5b360a80"
 
 [[package]]
 name = "memchr"
@@ -323,29 +316,6 @@ version = "0.1.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "b15813163c1d831bf4a13c3610c05c0d03b39feb07f7e09fa234dac9b15aaf39"
 
-[[package]]
-name = "parking_lot"
-version = "0.12.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3742b2c103b9f06bc9fff0a37ff4912935851bee6d36f3c02bcc755bcfec228f"
-dependencies = [
- "lock_api",
- "parking_lot_core",
-]
-
-[[package]]
-name = "parking_lot_core"
-version = "0.9.4"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "4dc9e0dc2adc1c69d09143aff38d3d30c5c3f0df0dad82e6d25547af174ebec0"
-dependencies = [
- "cfg-if",
- "libc",
- "redox_syscall",
- "smallvec",
- "windows-sys",
-]
-
 [[package]]
 name = "percent-encoding"
 version = "2.2.0"
@@ -438,15 +408,6 @@ dependencies = [
  "getrandom",
 ]
 
-[[package]]
-name = "redox_syscall"
-version = "0.2.16"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "fb5a58c1855b4b6819d59012155603f0b22ad30cad752600aadfcb695265519a"
-dependencies = [
- "bitflags",
-]
-
 [[package]]
 name = "regex"
 version = "1.7.0"
@@ -471,18 +432,18 @@ version = "0.6.28"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "456c603be3e8d448b072f410900c09faf164fbce2d480456f50eea6e25f9c848"
 
+[[package]]
+name = "rustversion"
+version = "1.0.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "97477e48b4cf8603ad5f7aaf897467cf42ab4218a38ef76fb14c2d6773a6d6a8"
+
 [[package]]
 name = "ryu"
 version = "1.0.11"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "4501abdff3ae82a1c1b477a17252eb69cee9e66eb915c1abaa4f44d873df9f09"
 
-[[package]]
-name = "scopeguard"
-version = "1.1.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d29ab0c6d3fc0ee92fe66e2d99f700eab17a8d57d1c1d3b748380fb20baa78cd"
-
 [[package]]
 name = "serde"
 version = "1.0.147"
@@ -514,6 +475,15 @@ dependencies = [
  "serde",
 ]
 
+[[package]]
+name = "serde_path_to_error"
+version = "0.1.8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "184c643044780f7ceb59104cef98a5a6f12cb2288a7bc701ab93a362b49fd47d"
+dependencies = [
+ "serde",
+]
+
 [[package]]
 name = "serde_urlencoded"
 version = "0.7.1"
@@ -547,15 +517,6 @@ dependencies = [
  "lazy_static",
 ]
 
-[[package]]
-name = "signal-hook-registry"
-version = "1.4.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e51e73328dc4ac0c7ccbda3a494dfa03df1de2f46018127f60c693f2648455b0"
-dependencies = [
- "libc",
-]
-
 [[package]]
 name = "smallvec"
 version = "1.10.0"
@@ -605,14 +566,10 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d76ce4a75fb488c605c54bf610f221cea8b0dafb53333c1a67e8ee199dcd2ae3"
 dependencies = [
  "autocfg",
- "bytes",
  "libc",
- "memchr",
  "mio",
  "num_cpus",
- "parking_lot",
  "pin-project-lite",
- "signal-hook-registry",
  "socket2",
  "tokio-macros",
  "winapi",

Cargo.toml

@@ -6,8 +6,8 @@ edition = "2021"
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [dependencies]
-axum = "0.5.17"
+axum = { version = "0.6.0", features = ["http1", "json", "tokio"] }
-tokio = { version = "1.0", features = ["full"] }
+tokio = { version = "1.0", features = ["macros", "rt-multi-thread"] }
 tracing-subscriber = { version = "0.3.16", features = ["env-filter"] }
 serde = { version = "1.0", features = ["derive"] }
 once_cell = "1.8.0"

index.html

@@ -1,37 +0,0 @@
-<!doctype html>
-
-<meta charset="utf-8">
-<meta http-equiv="x-ua-compatible" content="ie=edge">
-<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-
-<title>Secret Santa</title>
-
-<h1>Secret Santa</h1>
-
-<select id="person">
-    <option selected disabled>Who is drawing?</option>
-    <option value="Alice">Alice</option>
-    <option value="Bob">Bob</option>
-    <option value="Carol">Carol</option>
-    <option value="Dave">Dave</option>
-</select>
-
-<div id="result"></div>
-
-<script>
-    document.getElementById("person").addEventListener('change', event => {
-        const options = {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({ "person": event.target.value })
-        };
-
-        console.log(options);
-
-        fetch("/secret-santa-api/", options)
-            .then(response => response.text())
-            .then(text => {
-                document.getElementById("result").textContent = `Your draw: ${text}`;
-            });
-    });
-</script>

nginx.conf

@@ -4,10 +4,8 @@ server {
     #
     # server_name whatever.tld;
 
-    # index.html stored in /srv/http/whatever.tld/secret-santa/index.html
-    location /secret-santa { root /srv/http/whatever.tld; }
     # app running on localhost with the port hardcoded in main.rs
-    location /secret-santa-api/ { proxy_pass http://localhost:3067/secret-santa-api; }
+    location /secret-santa/ { proxy_pass http://localhost:3067/; }
 
     # SSL config...
 }

src/index.html

@@ -0,0 +1,734 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Secret Santa</title>
+    <!-- Christmas tree from https://codepen.io/lenasta92579651/pen/xxERxBx -->
+    <!-- CSS snowflakes from https://pajasevi.github.io/CSSnowflakes/ -->
+  </head>
+  <body>
+    <!-- Content -->
+    <h1>Secret Santa</h1>
+
+    <select id="person">
+      <option selected disabled>Who are you?</option>
+      __OPTIONS__
+    </select>
+
+    <h2 id="result"></h2>
+
+    <!-- Christmas tree -->
+    <div id="christmas-container">
+      <div class="christmas">
+        <div class="tree">
+          <div class="chain"></div>
+          <div class="chain2"></div>
+        </div>
+        <div class="lights">
+          <div class="light1"></div>
+          <div class="light2"></div>
+          <div class="light3"></div>
+          <div class="light4"></div>
+          <div class="light5"></div>
+          <div class="light6"></div>
+          <div class="light7"></div>
+          <div class="light8"></div>
+          <div class="light9"></div>
+          <div class="light10"></div>
+        </div>
+        <div class="balls">
+          <div class="ball1"></div>
+        </div>
+        <div class="star"></div>
+        <div class="gift"></div>
+        <div class="ribbon"></div>
+        <div class="gift2"></div>
+        <div class="ribbon2"></div>
+        <div class="gift3"></div>
+        <div class="ribbon3"></div>
+        <div class="shadow"></div>
+      </div>
+    </div>
+
+    <!-- Snowflakes -->
+    <div class="snowflakes" aria-hidden="true">
+      <div class="snowflake">❅</div>
+      <div class="snowflake">❆</div>
+      <div class="snowflake">❅</div>
+      <div class="snowflake">❆</div>
+      <div class="snowflake">❅</div>
+      <div class="snowflake">❆</div>
+      <div class="snowflake">❅</div>
+      <div class="snowflake">❆</div>
+      <div class="snowflake">❅</div>
+      <div class="snowflake">❆</div>
+      <div class="snowflake">❅</div>
+      <div class="snowflake">❆</div>
+    </div>
+
+    <script>
+      document.getElementById("person").addEventListener("change", (event) => {
+        const options = {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ person: event.target.value }),
+        };
+
+        console.log(options);
+
+        fetch("api", options)
+          .then((response) => response.text())
+          .then((text) => {
+            document.getElementById(
+              "result"
+            ).textContent = `Your draw: ${text}`;
+            document.getElementById("person").remove();
+          });
+      });
+    </script>
+  </body>
+  <style>
+    /** Page settings **/
+    body {
+      background-color: #3f69c7;
+      height: 100vh;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: center;
+      margin: 0;
+      padding: 0;
+      overflow: hidden;
+    }
+
+    h1 {
+      color: white;
+      font-family: Arial, Helvetica, sans-serif;
+      font-size: 5em;
+      text-align: center;
+      z-index: 10;
+    }
+
+    select {
+      z-index: 10;
+    }
+
+    h2 {
+      color: white;
+      font-family: Arial, Helvetica, sans-serif;
+      font-size: 3em;
+      text-align: center;
+      z-index: 10;
+      background: rgba(0, 0, 0, 0.5);
+    }
+
+    #christmas-container {
+      position: fixed;
+      right: 20%;
+      bottom: 30%;
+    }
+
+    /** Christmas tree **/
+    .christmas {
+      position: relative;
+    }
+
+    .tree {
+      position: relative;
+      background-color: #685044;
+      width: 30px;
+      height: 80px;
+      top: 100px;
+      transform-style: preserve-3d;
+    }
+
+    .tree:before {
+      content: "";
+      position: relative;
+      width: 0;
+      height: 0;
+      border-left: 90px solid transparent;
+      border-right: 90px solid transparent;
+      border-bottom: 270px solid #0e9594;
+      border-radius: 30px;
+      top: -250px;
+      left: -75px;
+    }
+
+    .chain {
+      width: 85px;
+      height: 85px;
+      border: solid 3px #333;
+      border-radius: 50%;
+      top: -185px;
+      left: -35px;
+      position: absolute;
+      transform: rotate3d(8, 0.1, -5, 75deg);
+      box-sizing: border-box;
+      backface-visibility: visible !important;
+      z-index: 5;
+    }
+
+    .chain2 {
+      width: 145px;
+      height: 135px;
+      border: solid 3px #333;
+      border-radius: 50%;
+      top: -115px;
+      left: -65px;
+      position: absolute;
+      transform: rotate3d(8, 0.1, -5, 75deg);
+      box-sizing: border-box;
+      backface-visibility: visible !important;
+      z-index: 5;
+    }
+
+    .shadow {
+      background-color: rgba(0, 0, 0, 0.07);
+      position: absolute;
+      width: 250px;
+      height: 30px;
+      border-radius: 50%;
+      top: 170px;
+      left: -115px;
+      z-index: -1;
+    }
+
+    .star {
+      margin: 50px 0;
+      position: absolute;
+      display: block;
+      width: 0px;
+      height: 0px;
+      border-right: 25px solid transparent;
+      border-bottom: 17.5px solid #f9dc5c;
+      border-left: 25px solid transparent;
+      transform: rotate(35deg);
+      top: -190px;
+      left: -9px;
+    }
+
+    .star:before {
+      border-bottom: 20px solid #f9dc5c;
+      border-left: 7.5px solid transparent;
+      border-right: 7.5px solid transparent;
+      position: absolute;
+      height: 0;
+      width: 0;
+      top: -12.5px;
+      left: -17.5px;
+      display: block;
+      content: "";
+      transform: rotate(-35deg);
+    }
+
+    .star:after {
+      position: absolute;
+      display: block;
+      top: 0.75px;
+      left: -26.25px;
+      width: 0px;
+      height: 0px;
+      border-right: 25px solid transparent;
+      border-bottom: 17.5px solid #f9dc5c;
+      border-left: 25px solid transparent;
+      transform: rotate(-70deg);
+      content: "";
+    }
+
+    .lights {
+      position: absolute;
+    }
+
+    .light1 {
+      position: absolute;
+      width: 15px;
+      height: 15px;
+      border-radius: 10px 150px 30px 150px;
+    }
+
+    .light1 {
+      background-color: #ff595e;
+      top: -100px;
+      left: -35px;
+      transform: rotate(40deg);
+      box-shadow: 1px 1px 15px #faf3dd;
+    }
+
+    .light2 {
+      position: absolute;
+      background-color: #ffca3a;
+      top: -95px;
+      left: -10px;
+      box-shadow: 1px 1px 15px #faf3dd;
+      width: 15px;
+      height: 15px;
+      border-radius: 10px 150px 30px 150px;
+      transform: rotate(40deg);
+    }
+
+    .light3 {
+      position: absolute;
+      background-color: #6a4c93;
+      top: -105px;
+      left: 15px;
+      box-shadow: 1px 1px 15px #faf3dd;
+      width: 15px;
+      height: 15px;
+      border-radius: 10px 150px 30px 150px;
+      transform: rotate(40deg);
+    }
+
+    .light4 {
+      position: absolute;
+      background-color: #1982c4;
+      top: -118px;
+      left: 35px;
+      box-shadow: 1px 1px 15px #faf3dd;
+      width: 15px;
+      height: 15px;
+      border-radius: 10px 150px 30px 150px;
+      transform: rotate(40deg);
+    }
+
+    .light5 {
+      position: absolute;
+      background-color: #1982c4;
+      top: 12px;
+      left: -55px;
+      box-shadow: 1px 1px 15px #faf3dd;
+      width: 15px;
+      height: 15px;
+      border-radius: 10px 150px 30px 150px;
+      transform: rotate(40deg);
+    }
+
+    .light6 {
+      position: absolute;
+      background-color: #8ac926;
+      top: 15px;
+      left: -25px;
+      box-shadow: 1px 1px 15px #faf3dd;
+      width: 15px;
+      height: 15px;
+      border-radius: 10px 150px 30px 150px;
+      transform: rotate(40deg);
+    }
+
+    .light7 {
+      position: absolute;
+      background-color: #ff595e;
+      top: 10px;
+      left: 2px;
+      box-shadow: 1px 1px 15px #faf3dd;
+      width: 15px;
+      height: 15px;
+      border-radius: 10px 150px 30px 150px;
+      transform: rotate(40deg);
+    }
+
+    .light8 {
+      position: absolute;
+      background-color: #ffca3a;
+      top: -2px;
+      left: 27px;
+      box-shadow: 1px 1px 15px #faf3dd;
+      width: 15px;
+      height: 15px;
+      border-radius: 10px 150px 30px 150px;
+      transform: rotate(40deg);
+    }
+
+    .light9 {
+      position: absolute;
+      background-color: #9e0059;
+      top: -17px;
+      left: 50px;
+      box-shadow: 1px 1px 15px #faf3dd;
+      width: 15px;
+      height: 15px;
+      border-radius: 10px 150px 30px 150px;
+      transform: rotate(40deg);
+    }
+
+    .light10 {
+      position: absolute;
+      background-color: #4361ee;
+      top: -40px;
+      left: 68px;
+      box-shadow: 1px 1px 15px #faf3dd;
+      width: 15px;
+      height: 15px;
+      border-radius: 10px 150px 30px 150px;
+      transform: rotate(40deg);
+    }
+
+    .gift {
+      position: absolute;
+      width: 60px;
+      height: 50px;
+      background-color: #ffc857;
+      top: 130px;
+      left: 30px;
+      box-shadow: inset -8px 0 0 rgba(0, 0, 0, 0.07);
+    }
+
+    .gift:before {
+      content: "";
+      position: absolute;
+      width: 70px;
+      height: 15px;
+      background-color: #ffc857;
+      left: -5px;
+      box-shadow: inset -8px -4px 0 rgba(0, 0, 0, 0.07);
+    }
+
+    .gift:after {
+      content: "";
+      background-color: #db3a34;
+      width: 10px;
+      height: 50px;
+      position: absolute;
+      left: 25px;
+    }
+
+    .ribbon {
+      position: absolute;
+      width: 20px;
+      height: 10px;
+      border: 3px solid #db3a34;
+      border-radius: 50%;
+      transform: skew(15deg, 15deg);
+      top: 116px;
+      left: 35px;
+    }
+
+    .ribbon:before {
+      content: "";
+      position: absolute;
+      width: 20px;
+      height: 10px;
+      border: 3px solid #db3a34;
+      border-radius: 50%;
+      transform: skew(-15deg, -20deg);
+      left: 22px;
+      top: -8px;
+    }
+
+    .gift2 {
+      position: absolute;
+      width: 50px;
+      height: 40px;
+      background-color: #08bdbd;
+      top: 140px;
+      left: -65px;
+      box-shadow: inset -8px 0 0 rgba(0, 0, 0, 0.07);
+    }
+
+    .gift2:before {
+      content: "";
+      position: absolute;
+      width: 60px;
+      height: 15px;
+      background-color: #08bdbd;
+      left: -5px;
+      box-shadow: inset -8px -4px 0 rgba(0, 0, 0, 0.07);
+    }
+
+    .gift2:after {
+      content: "";
+      background-color: #abff4f;
+      width: 10px;
+      height: 40px;
+      position: absolute;
+      left: 15px;
+    }
+
+    .gift3 {
+      position: absolute;
+      width: 40px;
+      height: 30px;
+      background-color: #7678ed;
+      top: 150px;
+      left: -85px;
+      box-shadow: inset -8px 0 0 rgba(0, 0, 0, 0.07);
+    }
+
+    .gift3:before {
+      content: "";
+      position: absolute;
+      width: 50px;
+      height: 10px;
+      background-color: #7678ed;
+      left: -5px;
+      box-shadow: inset -8px -4px 0 rgba(0, 0, 0, 0.07);
+    }
+
+    .gift3:after {
+      content: "";
+      background-color: #f7b801;
+      width: 7px;
+      height: 30px;
+      position: absolute;
+      left: 15px;
+    }
+
+    .ribbon2 {
+      position: absolute;
+      width: 15px;
+      height: 7px;
+      border: 3px solid #abff4f;
+      border-radius: 50%;
+      transform: skew(15deg, 15deg);
+      top: 129px;
+      left: -65px;
+    }
+
+    .ribbon2:before {
+      content: "";
+      position: absolute;
+      width: 15px;
+      height: 7px;
+      border: 3px solid #abff4f;
+      border-radius: 50%;
+      transform: skew(-15deg, -20deg);
+      left: 15px;
+      top: -8px;
+    }
+
+    .ribbon3 {
+      position: absolute;
+      width: 12px;
+      height: 5px;
+      border: 3px solid #f7b801;
+      border-radius: 50%;
+      transform: skew(15deg, 15deg);
+      top: 142px;
+      left: -85px;
+    }
+
+    .ribbon3:before {
+      content: "";
+      position: absolute;
+      width: 12px;
+      height: 5px;
+      border: 3px solid #f7b801;
+      border-radius: 50%;
+      transform: skew(-15deg, -20deg);
+      left: 15px;
+      top: -8px;
+    }
+
+    .balls {
+      position: absolute;
+      width: 20px;
+      height: 20px;
+      border-radius: 50%;
+      background-color: #db3a34;
+      top: 15px;
+      left: -15px;
+    }
+
+    .balls:before {
+      content: "";
+      position: absolute;
+      width: 20px;
+      height: 20px;
+      border-radius: 50%;
+      background-color: #ffc857;
+      top: 35px;
+      left: -15px;
+    }
+
+    .balls:after {
+      content: "";
+      position: absolute;
+      width: 20px;
+      height: 20px;
+      border-radius: 50%;
+      background-color: #f07167;
+      top: 20px;
+      left: 45px;
+    }
+
+    .ball1 {
+      position: absolute;
+      width: 20px;
+      height: 20px;
+      border-radius: 50%;
+      background-color: #fae588;
+      top: -90px;
+      left: 20px;
+    }
+
+    .ball1:before {
+      position: absolute;
+      width: 20px;
+      height: 20px;
+      border-radius: 50%;
+      background-color: #fae588;
+      content: "";
+      top: 170px;
+      left: 50px;
+    }
+
+    .light1,
+    .light2,
+    .light3,
+    .light4,
+    .light5,
+    .light6,
+    .light7,
+    .light8,
+    .light9,
+    .light10 {
+      -webkit-animation: flash 6s infinite;
+    }
+
+    @-webkit-keyframes flash {
+      20%,
+      24%,
+      55% {
+        box-shadow: none;
+      }
+      0%,
+      19%,
+      21%,
+      23%,
+      25%,
+      54%,
+      56%,
+      100% {
+        box-shadow: 0 0 5px #f5de93, 0 0 15px #f5de93, 0 0 20px #f5de93,
+          0 0 40px #f5de93, 0 0 60px #decea4, 0 0 10px #d6c0a5, 0 0 98px #ff0000;
+      }
+    }
+
+    /** Snowflakes */
+    .snowflake {
+      color: #fff;
+      font-size: 1em;
+      font-family: Arial, sans-serif;
+      text-shadow: 0 0 5px #000;
+    }
+
+    @-webkit-keyframes snowflakes-fall {
+      0% {
+        top: -10%;
+      }
+      100% {
+        top: 100%;
+      }
+    }
+    @-webkit-keyframes snowflakes-shake {
+      0%,
+      100% {
+        -webkit-transform: translateX(0);
+        transform: translateX(0);
+      }
+      50% {
+        -webkit-transform: translateX(80px);
+        transform: translateX(80px);
+      }
+    }
+    @keyframes snowflakes-fall {
+      0% {
+        top: -10%;
+      }
+      100% {
+        top: 100%;
+      }
+    }
+    @keyframes snowflakes-shake {
+      0%,
+      100% {
+        transform: translateX(0);
+      }
+      50% {
+        transform: translateX(80px);
+      }
+    }
+    .snowflake {
+      position: fixed;
+      top: -10%;
+      z-index: 9999;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+      cursor: default;
+      -webkit-animation-name: snowflakes-fall, snowflakes-shake;
+      -webkit-animation-duration: 10s, 3s;
+      -webkit-animation-timing-function: linear, ease-in-out;
+      -webkit-animation-iteration-count: infinite, infinite;
+      -webkit-animation-play-state: running, running;
+      animation-name: snowflakes-fall, snowflakes-shake;
+      animation-duration: 10s, 3s;
+      animation-timing-function: linear, ease-in-out;
+      animation-iteration-count: infinite, infinite;
+      animation-play-state: running, running;
+    }
+    .snowflake:nth-of-type(0) {
+      left: 1%;
+      -webkit-animation-delay: 0s, 0s;
+      animation-delay: 0s, 0s;
+    }
+    .snowflake:nth-of-type(1) {
+      left: 10%;
+      -webkit-animation-delay: 1s, 1s;
+      animation-delay: 1s, 1s;
+    }
+    .snowflake:nth-of-type(2) {
+      left: 20%;
+      -webkit-animation-delay: 6s, 0.5s;
+      animation-delay: 6s, 0.5s;
+    }
+    .snowflake:nth-of-type(3) {
+      left: 30%;
+      -webkit-animation-delay: 4s, 2s;
+      animation-delay: 4s, 2s;
+    }
+    .snowflake:nth-of-type(4) {
+      left: 40%;
+      -webkit-animation-delay: 2s, 2s;
+      animation-delay: 2s, 2s;
+    }
+    .snowflake:nth-of-type(5) {
+      left: 50%;
+      -webkit-animation-delay: 8s, 3s;
+      animation-delay: 8s, 3s;
+    }
+    .snowflake:nth-of-type(6) {
+      left: 60%;
+      -webkit-animation-delay: 6s, 2s;
+      animation-delay: 6s, 2s;
+    }
+    .snowflake:nth-of-type(7) {
+      left: 70%;
+      -webkit-animation-delay: 2.5s, 1s;
+      animation-delay: 2.5s, 1s;
+    }
+    .snowflake:nth-of-type(8) {
+      left: 80%;
+      -webkit-animation-delay: 1s, 0s;
+      animation-delay: 1s, 0s;
+    }
+    .snowflake:nth-of-type(9) {
+      left: 90%;
+      -webkit-animation-delay: 3s, 1.5s;
+      animation-delay: 3s, 1.5s;
+    }
+    .snowflake:nth-of-type(10) {
+      left: 25%;
+      -webkit-animation-delay: 2s, 0s;
+      animation-delay: 2s, 0s;
+    }
+    .snowflake:nth-of-type(11) {
+      left: 65%;
+      -webkit-animation-delay: 4s, 2.5s;
+      animation-delay: 4s, 2.5s;
+    }
+  </style>
+</html>

src/main.rs

@@ -1,4 +1,8 @@
-use axum::{routing::post, Json, Router};
+use axum::{
+    response::Html,
+    routing::{get, post},
+    Json, Router,
+};
 use once_cell::sync::Lazy;
 use rand::{thread_rng, Rng};
 use serde::Deserialize;
@@ -10,7 +14,9 @@ async fn main() {
     tracing_subscriber::fmt::init();
 
     // build our application with some routes
-    let app = Router::new().route("/secret-santa-api", post(input));
+    let app = Router::new()
+        .route("/", get(|| async { Html(INDEX_HTML.as_str()) }))
+        .route("/api", post(input));
 
     // run it with hyper
     let addr = SocketAddr::from(([127, 0, 0, 1], 3067));
@@ -20,6 +26,15 @@ async fn main() {
         .unwrap();
 }
 
+static INDEX_HTML: Lazy<String> = Lazy::new(|| {
+    let content = include_str!("index.html");
+    let options: String = everyone()
+        .into_iter()
+        .map(|person| format!(r#"<option value="{person}">{person}</option>"#))
+        .collect();
+    content.replace("__OPTIONS__", &options)
+});
+
 static STATE: Lazy<Mutex<State>> = Lazy::new(Mutex::default);
 
 struct State {