From 86a9f91b0e250f92fb574a1df7a22fc959abc187 Mon Sep 17 00:00:00 2001
From: Mark Joshwel <mark@joshwel.co>
Date: Thu, 13 Feb 2025 20:58:12 +0800
Subject: [PATCH] web: working auth, bare profile

---
 Web/public/404.html                      |   18 +-
 Web/public/auth-card.ref.html            |   61 -
 Web/public/auth-mail-page.ref.html       | 1519 -------------------
 Web/public/auth-page.ref.html            |  142 --
 Web/public/auth.html                     |   11 +-
 Web/public/index.html                    |    4 +-
 Web/public/js/ebcd-auth.js               |   84 +-
 Web/public/js/ebcd-common-franken-ui.js  |    4 +-
 Web/public/js/ebcd-profile.js            |   18 +
 Web/public/js/nayuki-qrcodegen-v1.8.0.js | 1701 ++++++++++++----------
 Web/public/profile.html                  |  149 ++
 11 files changed, 1125 insertions(+), 2586 deletions(-)
 delete mode 100644 Web/public/auth-card.ref.html
 delete mode 100644 Web/public/auth-mail-page.ref.html
 delete mode 100644 Web/public/auth-page.ref.html
 create mode 100644 Web/public/js/ebcd-profile.js
 create mode 100644 Web/public/profile.html
diff --git a/Web/public/404.html b/Web/public/404.html
index 3a6307d..ed6bbee 100644
--- a/Web/public/404.html
+++ b/Web/public/404.html
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Document</title>
-</head>
-<body>
-  404
-</body>
-</html>
\ No newline at end of file
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    404
+  </body>
+</html>
diff --git a/Web/public/auth-card.ref.html b/Web/public/auth-card.ref.html
deleted file mode 100644
index db91e4e..0000000
--- a/Web/public/auth-card.ref.html
+++ /dev/null
@@ -1,61 +0,0 @@
-<div class="uk-card">
-  <div class="uk-card-header space-y-2">
-    <h3 class="uk-h3">Create an account</h3>
-    <p class="text-muted-foreground">
-      Enter your email below to create your account
-    </p>
-  </div>
-  <div class="uk-card-body space-y-4">
-    <div class="grid grid-cols-2 gap-6">
-      <button class="uk-btn uk-btn-default">
-        <svg viewBox="0 0 438.549 438.549" class="mr-2 h-4 w-4">
-          <path
-            fill="currentColor"
-            d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"
-          ></path>
-        </svg>
-        Github
-      </button>
-      <button class="uk-btn uk-btn-default">
-        <svg role="img" viewBox="0 0 24 24" class="mr-2 h-4 w-4">
-          <path
-            fill="currentColor"
-            d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"
-          ></path>
-        </svg>
-        Google
-      </button>
-    </div>
-    <div class="relative">
-      <div class="absolute inset-0 flex items-center">
-        <span class="w-full border-t border-border"></span>
-      </div>
-      <div class="relative flex justify-center text-xs uppercase">
-        <span class="bg-background px-2 text-muted-foreground"
-          >Or continue with</span
-        >
-      </div>
-    </div>
-    <div class="space-y-2">
-      <label class="uk-form-label" for="email">Email</label>
-      <input
-        class="uk-input"
-        id="email"
-        type="text"
-        placeholder="m@example.com"
-      />
-    </div>
-    <div class="space-y-2">
-      <label class="uk-form-label" for="password">Password</label>
-      <input
-        class="uk-input"
-        id="password"
-        type="password"
-        placeholder="Password"
-      />
-    </div>
-  </div>
-  <div class="uk-card-footer">
-    <button class="uk-btn uk-btn-primary w-full">Create account</button>
-  </div>
-</div>
diff --git a/Web/public/auth-mail-page.ref.html b/Web/public/auth-mail-page.ref.html
deleted file mode 100644
index 52d4f5d..0000000
--- a/Web/public/auth-mail-page.ref.html
+++ /dev/null
@@ -1,1519 +0,0 @@
-<body
-  class="bg-background font-geist-sans text-sm text-foreground"
-  data-sveltekit-preload-data="hover"
->
-  <div style="display: contents">
-    <!----><!----><!----><!---->
-    <div class="hidden divide-x divide-border xl:flex">
-      <div class="w-72">
-        <div
-          class="flex h-14 items-center justify-center border-b border-border px-4 py-2"
-        >
-          <div class="h-10 flex-1">
-            <uk-select
-              ><select hidden="">
-                <option data-icon="user" selected="">alicia@example.com</option>
-                <option data-icon="user">alicia@yahoo.com</option>
-                <option data-icon="user">alicia@cloud.com</option></select
-              ><!---->
-              <div class="uk-position-relative">
-                <button
-                  type="button"
-                  class="uk-input-fake w-full flex justify-between items-center"
-                  aria-haspopup="true"
-                >
-                  <!--?lit$383522438$-->alicia@example.com
-                  <!--?lit$383522438$-->
-                  <uk-icon class="" icon="chevrons-up-down"
-                    ><!----><svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="16"
-                      height="16"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      stroke-width="2"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      class=""
-                    >
-                      <path d="m7 15 5 5 5-5"></path>
-                      <path d="m7 9 5-5 5 5"></path></svg
-                  ></uk-icon>
-                </button>
-                <div
-                  class="uk-drop uk-dropdown w-full"
-                  uk-dropdown="mode: click"
-                >
-                  <!--?lit$383522438$-->
-                  <!--?lit$383522438$-->
-                  <ul
-                    tabindex="-1"
-                    class="uk-nav uk-dropdown-nav uk-overflow-auto uk-cs-options"
-                  >
-                    <!--?lit$383522438$--><!---->
-                    <!--?lit$383522438$-->
-                    <!--?lit$383522438$--><!---->
-                    <li class="uk-active">
-                      <a tabindex="-1" class="uk-drop-close">
-                        <div class="uk-cs-item-wrapper">
-                          <!--?lit$383522438$-->
-                          <uk-icon class="uk-cs-item-icon" icon="user"
-                            ><!----><svg
-                              xmlns="http://www.w3.org/2000/svg"
-                              width="16"
-                              height="16"
-                              viewBox="0 0 24 24"
-                              fill="none"
-                              stroke="currentColor"
-                              stroke-width="2"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              class=""
-                            >
-                              <path
-                                d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"
-                              ></path>
-                              <circle cx="12" cy="7" r="4"></circle></svg
-                          ></uk-icon>
-
-                          <!--?lit$383522438$--><span class="uk-cs-item-text"
-                            ><!--?lit$383522438$-->alicia@example.com</span
-                          >
-                        </div>
-                        <!--?lit$383522438$--><uk-icon
-                          class="uk-cs-check"
-                          icon="check"
-                          ><!----><svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            width="16"
-                            height="16"
-                            viewBox="0 0 24 24"
-                            fill="none"
-                            stroke="currentColor"
-                            stroke-width="2"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            class=""
-                          >
-                            <path d="M20 6 9 17l-5-5"></path></svg
-                        ></uk-icon>
-                      </a>
-                    </li>
-                    <!----><!---->
-                    <li class="">
-                      <a tabindex="-1" class="uk-drop-close">
-                        <div class="uk-cs-item-wrapper">
-                          <!--?lit$383522438$-->
-                          <uk-icon class="uk-cs-item-icon" icon="user"
-                            ><!----><svg
-                              xmlns="http://www.w3.org/2000/svg"
-                              width="16"
-                              height="16"
-                              viewBox="0 0 24 24"
-                              fill="none"
-                              stroke="currentColor"
-                              stroke-width="2"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              class=""
-                            >
-                              <path
-                                d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"
-                              ></path>
-                              <circle cx="12" cy="7" r="4"></circle></svg
-                          ></uk-icon>
-
-                          <!--?lit$383522438$--><span class="uk-cs-item-text"
-                            ><!--?lit$383522438$-->alicia@yahoo.com</span
-                          >
-                        </div>
-                        <!--?lit$383522438$-->
-                      </a>
-                    </li>
-                    <!----><!---->
-                    <li class="">
-                      <a tabindex="-1" class="uk-drop-close">
-                        <div class="uk-cs-item-wrapper">
-                          <!--?lit$383522438$-->
-                          <uk-icon class="uk-cs-item-icon" icon="user"
-                            ><!----><svg
-                              xmlns="http://www.w3.org/2000/svg"
-                              width="16"
-                              height="16"
-                              viewBox="0 0 24 24"
-                              fill="none"
-                              stroke="currentColor"
-                              stroke-width="2"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              class=""
-                            >
-                              <path
-                                d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"
-                              ></path>
-                              <circle cx="12" cy="7" r="4"></circle></svg
-                          ></uk-icon>
-
-                          <!--?lit$383522438$--><span class="uk-cs-item-text"
-                            ><!--?lit$383522438$-->alicia@cloud.com</span
-                          >
-                        </div>
-                        <!--?lit$383522438$-->
-                      </a>
-                    </li>
-                    <!---->
-                    <!---->
-                  </ul>
-                </div>
-                <!--?lit$383522438$-->
-              </div>
-            </uk-select>
-          </div>
-        </div>
-        <div class="p-1">
-          <ul class="uk-nav uk-nav-primary">
-            <li class="uk-active">
-              <a class="flex justify-between" href="#"
-                ><div class="flex flex-1 items-center gap-x-2">
-                  <span class="size-4"
-                    ><uk-icon
-                      ><!----><svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        width="16"
-                        height="16"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        class=""
-                      >
-                        <polyline
-                          points="22 12 16 12 14 15 10 15 8 12 2 12"
-                        ></polyline>
-                        <path
-                          d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"
-                        ></path></svg></uk-icon
-                  ></span>
-                  <span>Inbox</span>
-                </div>
-                <span>128</span
-                ><!----></a
-              >
-            </li>
-            <li>
-              <a class="flex justify-between" href="#"
-                ><div class="flex flex-1 items-center gap-x-2">
-                  <span class="size-4"
-                    ><uk-icon
-                      ><!----><svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        width="16"
-                        height="16"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        class=""
-                      >
-                        <path
-                          d="M16 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8Z"
-                        ></path>
-                        <path d="M15 3v4a2 2 0 0 0 2 2h4"></path></svg></uk-icon
-                  ></span>
-                  <span>Draft</span>
-                </div>
-                <span>9</span
-                ><!----></a
-              >
-            </li>
-            <li>
-              <a class="flex justify-between" href="#"
-                ><div class="flex flex-1 items-center gap-x-2">
-                  <span class="size-4"
-                    ><uk-icon
-                      ><!----><svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        width="16"
-                        height="16"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        class=""
-                      >
-                        <path d="m22 2-7 20-4-9-9-4Z"></path>
-                        <path d="M22 2 11 13"></path></svg></uk-icon
-                  ></span>
-                  <span>Sent</span>
-                </div>
-                <!----></a
-              >
-            </li>
-            <li>
-              <a class="flex justify-between" href="#"
-                ><div class="flex flex-1 items-center gap-x-2">
-                  <span class="size-4"
-                    ><uk-icon
-                      ><!----><svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        width="16"
-                        height="16"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        class=""
-                      >
-                        <rect width="20" height="5" x="2" y="3" rx="1"></rect>
-                        <path
-                          d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"
-                        ></path>
-                        <path d="m9.5 17 5-5"></path>
-                        <path d="m9.5 12 5 5"></path></svg></uk-icon
-                  ></span>
-                  <span>Junk</span>
-                </div>
-                <span>23</span
-                ><!----></a
-              >
-            </li>
-            <li>
-              <a class="flex justify-between" href="#"
-                ><div class="flex flex-1 items-center gap-x-2">
-                  <span class="size-4"
-                    ><uk-icon
-                      ><!----><svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        width="16"
-                        height="16"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        class=""
-                      >
-                        <path d="M3 6h18"></path>
-                        <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
-                        <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path>
-                        <line x1="10" x2="10" y1="11" y2="17"></line>
-                        <line
-                          x1="14"
-                          x2="14"
-                          y1="11"
-                          y2="17"
-                        ></line></svg></uk-icon
-                  ></span>
-                  <span>Trash</span>
-                </div>
-                <!----></a
-              >
-            </li>
-            <li>
-              <a class="flex justify-between" href="#"
-                ><div class="flex flex-1 items-center gap-x-2">
-                  <span class="size-4"
-                    ><uk-icon
-                      ><!----><svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        width="16"
-                        height="16"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        class=""
-                      >
-                        <rect width="20" height="5" x="2" y="3" rx="1"></rect>
-                        <path
-                          d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"
-                        ></path>
-                        <path d="M10 12h4"></path></svg></uk-icon
-                  ></span>
-                  <span>Archive</span>
-                </div>
-                <!----></a
-              >
-            </li>
-            <!---->
-            <li class="uk-nav-divider -mx-1"></li>
-            <li>
-              <a class="flex justify-between" href="#"
-                ><div class="flex flex-1 items-center gap-x-2">
-                  <span class="size-4"
-                    ><uk-icon
-                      ><!----><svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        width="16"
-                        height="16"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        class=""
-                      >
-                        <path d="M18 21a8 8 0 0 0-16 0"></path>
-                        <circle cx="10" cy="8" r="5"></circle>
-                        <path
-                          d="M22 20c0-3.37-2-6.5-4-8a5 5 0 0 0-.45-8.3"
-                        ></path></svg></uk-icon
-                  ></span>
-                  <span>Social</span>
-                </div>
-                <span>972</span
-                ><!----></a
-              >
-            </li>
-            <li>
-              <a class="flex justify-between" href="#"
-                ><div class="flex flex-1 items-center gap-x-2">
-                  <span class="size-4"
-                    ><uk-icon
-                      ><!----><svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        width="16"
-                        height="16"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        class=""
-                      >
-                        <path d="M12 16h.01"></path>
-                        <path d="M12 8v4"></path>
-                        <path
-                          d="M15.312 2a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586l-4.688-4.688A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2z"
-                        ></path></svg></uk-icon
-                  ></span>
-                  <span>Updates</span>
-                </div>
-                <span>342</span
-                ><!----></a
-              >
-            </li>
-            <li>
-              <a class="flex justify-between" href="#"
-                ><div class="flex flex-1 items-center gap-x-2">
-                  <span class="size-4"
-                    ><uk-icon
-                      ><!----><svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        width="16"
-                        height="16"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        class=""
-                      >
-                        <path
-                          d="M14 9a2 2 0 0 1-2 2H6l-4 4V4c0-1.1.9-2 2-2h8a2 2 0 0 1 2 2z"
-                        ></path>
-                        <path
-                          d="M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1"
-                        ></path></svg></uk-icon
-                  ></span>
-                  <span>Forums</span>
-                </div>
-                <span>128</span
-                ><!----></a
-              >
-            </li>
-            <li>
-              <a class="flex justify-between" href="#"
-                ><div class="flex flex-1 items-center gap-x-2">
-                  <span class="size-4"
-                    ><uk-icon
-                      ><!----><svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        width="16"
-                        height="16"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        class=""
-                      >
-                        <circle cx="8" cy="21" r="1"></circle>
-                        <circle cx="19" cy="21" r="1"></circle>
-                        <path
-                          d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12"
-                        ></path></svg></uk-icon
-                  ></span>
-                  <span>Shopping</span>
-                </div>
-                <span>8</span
-                ><!----></a
-              >
-            </li>
-            <li>
-              <a class="flex justify-between" href="#"
-                ><div class="flex flex-1 items-center gap-x-2">
-                  <span class="size-4"
-                    ><uk-icon
-                      ><!----><svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        width="16"
-                        height="16"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        class=""
-                      >
-                        <rect width="20" height="5" x="2" y="3" rx="1"></rect>
-                        <path
-                          d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"
-                        ></path>
-                        <path d="M10 12h4"></path></svg></uk-icon
-                  ></span>
-                  <span>Promotion</span>
-                </div>
-                <span>21</span
-                ><!----></a
-              >
-            </li>
-            <!---->
-          </ul>
-        </div>
-      </div>
-      <div class="grid flex-1 grid-cols-2 divide-x divide-border">
-        <div class="flex flex-col" data-uk-filter="target: .js-filter">
-          <div
-            class="flex h-14 flex-none items-center border-b border-border px-4 py-2"
-          >
-            <h1 class="text-xl font-bold">Inbox</h1>
-            <ul class="uk-tab-alt ml-auto max-w-40">
-              <li class="uk-active" data-uk-filter-control="">
-                <a href="#" role="button">All mail</a>
-              </li>
-              <li data-uk-filter-control="[data-status='unread']">
-                <a href="#" role="button">Unread</a>
-              </li>
-            </ul>
-          </div>
-          <div class="flex flex-1 flex-col">
-            <div class="p-4">
-              <div class="uk-inline w-full">
-                <span class="uk-form-icon text-muted-foreground"
-                  ><span class="size-4"
-                    ><uk-icon
-                      ><!----><svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        width="16"
-                        height="16"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        class=""
-                      >
-                        <circle cx="11" cy="11" r="8"></circle>
-                        <path d="m21 21-4.3-4.3"></path></svg></uk-icon></span
-                ></span>
-                <input class="uk-input" type="text" placeholder="Search" />
-              </div>
-            </div>
-            <div class="max-h-[600px] flex-1 overflow-y-auto">
-              <ul class="js-filter space-y-2 p-4 pt-0">
-                <li
-                  class="uk-rounded relative border border-border p-3 hover:bg-accent bg-muted"
-                  data-status="read"
-                >
-                  <div class="flex w-full flex-col gap-1">
-                    <div class="flex items-center">
-                      <div class="flex items-center gap-2">
-                        <div class="font-semibold">William Smith</div>
-                        <!---->
-                      </div>
-                      <div class="ml-auto text-xs text-foreground">
-                        a year ago
-                      </div>
-                    </div>
-                    <a class="text-xs font-medium" href="#"
-                      >Meeting Tomorrow <span class="absolute inset-0"></span
-                    ></a>
-                    <div class="line-clamp-2 text-xs text-muted-foreground">
-                      Hi, let's have a meeting tomorrow to discuss the project.
-                      I've been reviewing the project details and have some
-                      ideas I'd like to share. It's crucial that we align on our
-                      next steps to ensure the project's success. Please come
-                      prepared with any questions or insights you may have.
-                      Looking forward to our meeting! Best regards, William
-                    </div>
-                    <div class="flex items-center gap-2">
-                      <a href="#" class="uk-label relative z-10">meeting</a
-                      ><a
-                        href="#"
-                        class="uk-label relative z-10 uk-label-primary"
-                        >work</a
-                      ><a href="#" class="uk-label relative z-10">important</a>
-                    </div>
-                  </div>
-                </li>
-                <li
-                  class="uk-rounded relative border border-border p-3 hover:bg-accent"
-                  data-status="read"
-                >
-                  <div class="flex w-full flex-col gap-1">
-                    <div class="flex items-center">
-                      <div class="flex items-center gap-2">
-                        <div class="font-semibold">Alice Smith</div>
-                        <!---->
-                      </div>
-                      <div class="ml-auto text-xs text-foreground">
-                        a year ago
-                      </div>
-                    </div>
-                    <a class="text-xs font-medium" href="#"
-                      >Re: Project Update <span class="absolute inset-0"></span
-                    ></a>
-                    <div class="line-clamp-2 text-xs text-muted-foreground">
-                      Thank you for the project update. It looks great! I've
-                      gone through the report, and the progress is impressive.
-                      The team has done a fantastic job, and I appreciate the
-                      hard work everyone has put in. I have a few minor
-                      suggestions that I'll include in the attached document.
-                      Let's discuss these during our next meeting. Keep up the
-                      excellent work! Best regards, Alice
-                    </div>
-                    <div class="flex items-center gap-2">
-                      <a
-                        href="#"
-                        class="uk-label relative z-10 uk-label-primary"
-                        >work</a
-                      ><a href="#" class="uk-label relative z-10">important</a>
-                    </div>
-                  </div>
-                </li>
-                <li
-                  class="uk-rounded relative border border-border p-3 hover:bg-accent"
-                  data-status="read"
-                >
-                  <div class="flex w-full flex-col gap-1">
-                    <div class="flex items-center">
-                      <div class="flex items-center gap-2">
-                        <div class="font-semibold">Bob Johnson</div>
-                        <!---->
-                      </div>
-                      <div class="ml-auto text-xs text-foreground">
-                        2 years ago
-                      </div>
-                    </div>
-                    <a class="text-xs font-medium" href="#"
-                      >Weekend Plans <span class="absolute inset-0"></span
-                    ></a>
-                    <div class="line-clamp-2 text-xs text-muted-foreground">
-                      Any plans for the weekend? I was thinking of going hiking
-                      in the nearby mountains. It's been a while since we had
-                      some outdoor fun. If you're interested, let me know, and
-                      we can plan the details. It'll be a great way to unwind
-                      and enjoy nature. Looking forward to your response! Best,
-                      Bob
-                    </div>
-                    <div class="flex items-center gap-2">
-                      <a href="#" class="uk-label relative z-10">personal</a>
-                    </div>
-                  </div>
-                </li>
-                <li
-                  class="uk-rounded relative border border-border p-3 hover:bg-accent"
-                  data-status="unread"
-                >
-                  <div class="flex w-full flex-col gap-1">
-                    <div class="flex items-center">
-                      <div class="flex items-center gap-2">
-                        <div class="font-semibold">Emily Davis</div>
-                        <span
-                          class="flex h-2 w-2 rounded-full bg-blue-600"
-                        ></span
-                        ><!---->
-                      </div>
-                      <div class="ml-auto text-xs text-foreground">
-                        2 years ago
-                      </div>
-                    </div>
-                    <a class="text-xs font-medium" href="#"
-                      >Re: Question about Budget
-                      <span class="absolute inset-0"></span
-                    ></a>
-                    <div class="line-clamp-2 text-xs text-muted-foreground">
-                      I have a question about the budget for the upcoming
-                      project. It seems like there's a discrepancy in the
-                      allocation of resources. I've reviewed the budget report
-                      and identified a few areas where we might be able to
-                      optimize our spending without compromising the project's
-                      quality. I've attached a detailed analysis for your
-                      reference. Let's discuss this further in our next meeting.
-                      Thanks, Emily
-                    </div>
-                    <div class="flex items-center gap-2">
-                      <a
-                        href="#"
-                        class="uk-label relative z-10 uk-label-primary"
-                        >work</a
-                      ><a href="#" class="uk-label relative z-10">budget</a>
-                    </div>
-                  </div>
-                </li>
-                <li
-                  class="uk-rounded relative border border-border p-3 hover:bg-accent"
-                  data-status="unread"
-                >
-                  <div class="flex w-full flex-col gap-1">
-                    <div class="flex items-center">
-                      <div class="flex items-center gap-2">
-                        <div class="font-semibold">Michael Wilson</div>
-                        <span
-                          class="flex h-2 w-2 rounded-full bg-blue-600"
-                        ></span
-                        ><!---->
-                      </div>
-                      <div class="ml-auto text-xs text-foreground">
-                        2 years ago
-                      </div>
-                    </div>
-                    <a class="text-xs font-medium" href="#"
-                      >Important Announcement
-                      <span class="absolute inset-0"></span
-                    ></a>
-                    <div class="line-clamp-2 text-xs text-muted-foreground">
-                      I have an important announcement to make during our team
-                      meeting. It pertains to a strategic shift in our approach
-                      to the upcoming product launch. We've received valuable
-                      feedback from our beta testers, and I believe it's time to
-                      make some adjustments to better meet our customers' needs.
-                      This change is crucial to our success, and I look forward
-                      to discussing it with the team. Please be prepared to
-                      share your insights during the meeting. Regards, Michael
-                    </div>
-                    <div class="flex items-center gap-2">
-                      <a href="#" class="uk-label relative z-10">meeting</a
-                      ><a
-                        href="#"
-                        class="uk-label relative z-10 uk-label-primary"
-                        >work</a
-                      ><a href="#" class="uk-label relative z-10">important</a>
-                    </div>
-                  </div>
-                </li>
-                <li
-                  class="uk-rounded relative border border-border p-3 hover:bg-accent"
-                  data-status="read"
-                >
-                  <div class="flex w-full flex-col gap-1">
-                    <div class="flex items-center">
-                      <div class="flex items-center gap-2">
-                        <div class="font-semibold">Sarah Brown</div>
-                        <!---->
-                      </div>
-                      <div class="ml-auto text-xs text-foreground">
-                        2 years ago
-                      </div>
-                    </div>
-                    <a class="text-xs font-medium" href="#"
-                      >Re: Feedback on Proposal
-                      <span class="absolute inset-0"></span
-                    ></a>
-                    <div class="line-clamp-2 text-xs text-muted-foreground">
-                      Thank you for your feedback on the proposal. It looks
-                      great! I'm pleased to hear that you found it promising.
-                      The team worked diligently to address all the key points
-                      you raised, and I believe we now have a strong foundation
-                      for the project. I've attached the revised proposal for
-                      your review. Please let me know if you have any further
-                      comments or suggestions. Looking forward to your response.
-                      Best regards, Sarah
-                    </div>
-                    <div class="flex items-center gap-2">
-                      <a
-                        href="#"
-                        class="uk-label relative z-10 uk-label-primary"
-                        >work</a
-                      >
-                    </div>
-                  </div>
-                </li>
-                <li
-                  class="uk-rounded relative border border-border p-3 hover:bg-accent"
-                  data-status="unread"
-                >
-                  <div class="flex w-full flex-col gap-1">
-                    <div class="flex items-center">
-                      <div class="flex items-center gap-2">
-                        <div class="font-semibold">David Lee</div>
-                        <span
-                          class="flex h-2 w-2 rounded-full bg-blue-600"
-                        ></span
-                        ><!---->
-                      </div>
-                      <div class="ml-auto text-xs text-foreground">
-                        2 years ago
-                      </div>
-                    </div>
-                    <a class="text-xs font-medium" href="#"
-                      >New Project Idea <span class="absolute inset-0"></span
-                    ></a>
-                    <div class="line-clamp-2 text-xs text-muted-foreground">
-                      I have an exciting new project idea to discuss with you.
-                      It involves expanding our services to target a niche
-                      market that has shown considerable growth in recent
-                      months. I've prepared a detailed proposal outlining the
-                      potential benefits and the strategy for execution. This
-                      project has the potential to significantly impact our
-                      business positively. Let's set up a meeting to dive into
-                      the details and determine if it aligns with our current
-                      goals. Best regards, David
-                    </div>
-                    <div class="flex items-center gap-2">
-                      <a href="#" class="uk-label relative z-10">meeting</a
-                      ><a
-                        href="#"
-                        class="uk-label relative z-10 uk-label-primary"
-                        >work</a
-                      ><a href="#" class="uk-label relative z-10">important</a>
-                    </div>
-                  </div>
-                </li>
-                <li
-                  class="uk-rounded relative border border-border p-3 hover:bg-accent"
-                  data-status="read"
-                >
-                  <div class="flex w-full flex-col gap-1">
-                    <div class="flex items-center">
-                      <div class="flex items-center gap-2">
-                        <div class="font-semibold">Olivia Wilson</div>
-                        <!---->
-                      </div>
-                      <div class="ml-auto text-xs text-foreground">
-                        2 years ago
-                      </div>
-                    </div>
-                    <a class="text-xs font-medium" href="#"
-                      >Vacation Plans <span class="absolute inset-0"></span
-                    ></a>
-                    <div class="line-clamp-2 text-xs text-muted-foreground">
-                      Let's plan our vacation for next month. What do you think?
-                      I've been thinking of visiting a tropical paradise, and
-                      I've put together some destination options. I believe it's
-                      time for us to unwind and recharge. Please take a look at
-                      the options and let me know your preferences. We can start
-                      making arrangements to ensure a smooth and enjoyable trip.
-                      Excited to hear your thoughts! Olivia
-                    </div>
-                    <div class="flex items-center gap-2">
-                      <a href="#" class="uk-label relative z-10">personal</a>
-                    </div>
-                  </div>
-                </li>
-                <li
-                  class="uk-rounded relative border border-border p-3 hover:bg-accent"
-                  data-status="read"
-                >
-                  <div class="flex w-full flex-col gap-1">
-                    <div class="flex items-center">
-                      <div class="flex items-center gap-2">
-                        <div class="font-semibold">James Martin</div>
-                        <!---->
-                      </div>
-                      <div class="ml-auto text-xs text-foreground">
-                        2 years ago
-                      </div>
-                    </div>
-                    <a class="text-xs font-medium" href="#"
-                      >Re: Conference Registration
-                      <span class="absolute inset-0"></span
-                    ></a>
-                    <div class="line-clamp-2 text-xs text-muted-foreground">
-                      I've completed the registration for the conference next
-                      month. The event promises to be a great networking
-                      opportunity, and I'm looking forward to attending the
-                      various sessions and connecting with industry experts.
-                      I've also attached the conference schedule for your
-                      reference. If there are any specific topics or sessions
-                      you'd like me to explore, please let me know. It's an
-                      exciting event, and I'll make the most of it. Best
-                      regards, James
-                    </div>
-                    <div class="flex items-center gap-2">
-                      <a
-                        href="#"
-                        class="uk-label relative z-10 uk-label-primary"
-                        >work</a
-                      ><a href="#" class="uk-label relative z-10">conference</a>
-                    </div>
-                  </div>
-                </li>
-                <li
-                  class="uk-rounded relative border border-border p-3 hover:bg-accent"
-                  data-status="unread"
-                >
-                  <div class="flex w-full flex-col gap-1">
-                    <div class="flex items-center">
-                      <div class="flex items-center gap-2">
-                        <div class="font-semibold">Sophia White</div>
-                        <span
-                          class="flex h-2 w-2 rounded-full bg-blue-600"
-                        ></span
-                        ><!---->
-                      </div>
-                      <div class="ml-auto text-xs text-foreground">
-                        2 years ago
-                      </div>
-                    </div>
-                    <a class="text-xs font-medium" href="#"
-                      >Team Dinner <span class="absolute inset-0"></span
-                    ></a>
-                    <div class="line-clamp-2 text-xs text-muted-foreground">
-                      Let's have a team dinner next week to celebrate our
-                      success. We've achieved some significant milestones, and
-                      it's time to acknowledge our hard work and dedication.
-                      I've made reservations at a lovely restaurant, and I'm
-                      sure it'll be an enjoyable evening. Please confirm your
-                      availability and any dietary preferences. Looking forward
-                      to a fun and memorable dinner with the team! Best, Sophia
-                    </div>
-                    <div class="flex items-center gap-2">
-                      <a href="#" class="uk-label relative z-10">meeting</a
-                      ><a
-                        href="#"
-                        class="uk-label relative z-10 uk-label-primary"
-                        >work</a
-                      >
-                    </div>
-                  </div>
-                </li>
-                <li
-                  class="uk-rounded relative border border-border p-3 hover:bg-accent"
-                  data-status="unread"
-                >
-                  <div class="flex w-full flex-col gap-1">
-                    <div class="flex items-center">
-                      <div class="flex items-center gap-2">
-                        <div class="font-semibold">Daniel Johnson</div>
-                        <span
-                          class="flex h-2 w-2 rounded-full bg-blue-600"
-                        ></span
-                        ><!---->
-                      </div>
-                      <div class="ml-auto text-xs text-foreground">
-                        2 years ago
-                      </div>
-                    </div>
-                    <a class="text-xs font-medium" href="#"
-                      >Feedback Request <span class="absolute inset-0"></span
-                    ></a>
-                    <div class="line-clamp-2 text-xs text-muted-foreground">
-                      I'd like your feedback on the latest project deliverables.
-                      We've made significant progress, and I value your input to
-                      ensure we're on the right track. I've attached the
-                      deliverables for your review, and I'm particularly
-                      interested in any areas where you think we can further
-                      enhance the quality or efficiency. Your feedback is
-                      invaluable, and I appreciate your time and expertise.
-                      Let's work together to make this project a success.
-                      Regards, Daniel
-                    </div>
-                    <div class="flex items-center gap-2">
-                      <a
-                        href="#"
-                        class="uk-label relative z-10 uk-label-primary"
-                        >work</a
-                      >
-                    </div>
-                  </div>
-                </li>
-                <li
-                  class="uk-rounded relative border border-border p-3 hover:bg-accent"
-                  data-status="read"
-                >
-                  <div class="flex w-full flex-col gap-1">
-                    <div class="flex items-center">
-                      <div class="flex items-center gap-2">
-                        <div class="font-semibold">Ava Taylor</div>
-                        <!---->
-                      </div>
-                      <div class="ml-auto text-xs text-foreground">
-                        2 years ago
-                      </div>
-                    </div>
-                    <a class="text-xs font-medium" href="#"
-                      >Re: Meeting Agenda <span class="absolute inset-0"></span
-                    ></a>
-                    <div class="line-clamp-2 text-xs text-muted-foreground">
-                      Here's the agenda for our meeting next week. I've included
-                      all the topics we need to cover, as well as time
-                      allocations for each. If you have any additional items to
-                      discuss or any specific points to address, please let me
-                      know, and we can integrate them into the agenda. It's
-                      essential that our meeting is productive and addresses all
-                      relevant matters. Looking forward to our meeting! Ava
-                    </div>
-                    <div class="flex items-center gap-2">
-                      <a href="#" class="uk-label relative z-10">meeting</a
-                      ><a
-                        href="#"
-                        class="uk-label relative z-10 uk-label-primary"
-                        >work</a
-                      >
-                    </div>
-                  </div>
-                </li>
-                <li
-                  class="uk-rounded relative border border-border p-3 hover:bg-accent"
-                  data-status="unread"
-                >
-                  <div class="flex w-full flex-col gap-1">
-                    <div class="flex items-center">
-                      <div class="flex items-center gap-2">
-                        <div class="font-semibold">William Anderson</div>
-                        <span
-                          class="flex h-2 w-2 rounded-full bg-blue-600"
-                        ></span
-                        ><!---->
-                      </div>
-                      <div class="ml-auto text-xs text-foreground">
-                        2 years ago
-                      </div>
-                    </div>
-                    <a class="text-xs font-medium" href="#"
-                      >Product Launch Update
-                      <span class="absolute inset-0"></span
-                    ></a>
-                    <div class="line-clamp-2 text-xs text-muted-foreground">
-                      The product launch is on track. I'll provide an update
-                      during our call. We've made substantial progress in the
-                      development and marketing of our new product. I'm excited
-                      to share the latest updates with you during our upcoming
-                      call. It's crucial that we coordinate our efforts to
-                      ensure a successful launch. Please come prepared with any
-                      questions or insights you may have. Let's make this
-                      product launch a resounding success! Best regards, William
-                    </div>
-                    <div class="flex items-center gap-2">
-                      <a href="#" class="uk-label relative z-10">meeting</a
-                      ><a
-                        href="#"
-                        class="uk-label relative z-10 uk-label-primary"
-                        >work</a
-                      ><a href="#" class="uk-label relative z-10">important</a>
-                    </div>
-                  </div>
-                </li>
-                <li
-                  class="uk-rounded relative border border-border p-3 hover:bg-accent"
-                  data-status="read"
-                >
-                  <div class="flex w-full flex-col gap-1">
-                    <div class="flex items-center">
-                      <div class="flex items-center gap-2">
-                        <div class="font-semibold">Mia Harris</div>
-                        <!---->
-                      </div>
-                      <div class="ml-auto text-xs text-foreground">
-                        2 years ago
-                      </div>
-                    </div>
-                    <a class="text-xs font-medium" href="#"
-                      >Re: Travel Itinerary
-                      <span class="absolute inset-0"></span
-                    ></a>
-                    <div class="line-clamp-2 text-xs text-muted-foreground">
-                      I've received the travel itinerary. It looks great! Thank
-                      you for your prompt assistance in arranging the details.
-                      I've reviewed the schedule and the accommodations, and
-                      everything seems to be in order. I'm looking forward to
-                      the trip, and I'm confident it'll be a smooth and
-                      enjoyable experience. If there are any specific activities
-                      or attractions you recommend at our destination, please
-                      feel free to share your suggestions. Excited for the trip!
-                      Mia
-                    </div>
-                    <div class="flex items-center gap-2">
-                      <a href="#" class="uk-label relative z-10">personal</a
-                      ><a href="#" class="uk-label relative z-10">travel</a>
-                    </div>
-                  </div>
-                </li>
-                <li
-                  class="uk-rounded relative border border-border p-3 hover:bg-accent"
-                  data-status="unread"
-                >
-                  <div class="flex w-full flex-col gap-1">
-                    <div class="flex items-center">
-                      <div class="flex items-center gap-2">
-                        <div class="font-semibold">Ethan Clark</div>
-                        <span
-                          class="flex h-2 w-2 rounded-full bg-blue-600"
-                        ></span
-                        ><!---->
-                      </div>
-                      <div class="ml-auto text-xs text-foreground">
-                        2 years ago
-                      </div>
-                    </div>
-                    <a class="text-xs font-medium" href="#"
-                      >Team Building Event <span class="absolute inset-0"></span
-                    ></a>
-                    <div class="line-clamp-2 text-xs text-muted-foreground">
-                      Let's plan a team-building event for our department. Team
-                      cohesion and morale are vital to our success, and I
-                      believe a well-organized team-building event can be
-                      incredibly beneficial. I've done some research and have a
-                      few ideas for fun and engaging activities. Please let me
-                      know your thoughts and availability. We want this event to
-                      be both enjoyable and productive. Together, we'll
-                      strengthen our team and boost our performance. Regards,
-                      Ethan
-                    </div>
-                    <div class="flex items-center gap-2">
-                      <a href="#" class="uk-label relative z-10">meeting</a
-                      ><a
-                        href="#"
-                        class="uk-label relative z-10 uk-label-primary"
-                        >work</a
-                      >
-                    </div>
-                  </div>
-                </li>
-                <li
-                  class="uk-rounded relative border border-border p-3 hover:bg-accent"
-                  data-status="read"
-                >
-                  <div class="flex w-full flex-col gap-1">
-                    <div class="flex items-center">
-                      <div class="flex items-center gap-2">
-                        <div class="font-semibold">Chloe Hall</div>
-                        <!---->
-                      </div>
-                      <div class="ml-auto text-xs text-foreground">
-                        3 years ago
-                      </div>
-                    </div>
-                    <a class="text-xs font-medium" href="#"
-                      >Re: Budget Approval <span class="absolute inset-0"></span
-                    ></a>
-                    <div class="line-clamp-2 text-xs text-muted-foreground">
-                      The budget has been approved. We can proceed with the
-                      project. I'm delighted to inform you that our budget
-                      proposal has received the green light from the finance
-                      department. This is a significant milestone, and it means
-                      we can move forward with the project as planned. I've
-                      attached the finalized budget for your reference. Let's
-                      ensure that we stay on track and deliver the project on
-                      time and within budget. It's an exciting time for us!
-                      Chloe
-                    </div>
-                    <div class="flex items-center gap-2">
-                      <a
-                        href="#"
-                        class="uk-label relative z-10 uk-label-primary"
-                        >work</a
-                      ><a href="#" class="uk-label relative z-10">budget</a>
-                    </div>
-                  </div>
-                </li>
-                <li
-                  class="uk-rounded relative border border-border p-3 hover:bg-accent"
-                  data-status="unread"
-                >
-                  <div class="flex w-full flex-col gap-1">
-                    <div class="flex items-center">
-                      <div class="flex items-center gap-2">
-                        <div class="font-semibold">Samuel Turner</div>
-                        <span
-                          class="flex h-2 w-2 rounded-full bg-blue-600"
-                        ></span
-                        ><!---->
-                      </div>
-                      <div class="ml-auto text-xs text-foreground">
-                        3 years ago
-                      </div>
-                    </div>
-                    <a class="text-xs font-medium" href="#"
-                      >Weekend Hike <span class="absolute inset-0"></span
-                    ></a>
-                    <div class="line-clamp-2 text-xs text-muted-foreground">
-                      Who's up for a weekend hike in the mountains? I've been
-                      craving some outdoor adventure, and a hike in the
-                      mountains sounds like the perfect escape. If you're up for
-                      the challenge, we can explore some scenic trails and enjoy
-                      the beauty of nature. I've done some research and have a
-                      few routes in mind. Let me know if you're interested, and
-                      we can plan the details. It's sure to be a memorable
-                      experience! Samuel
-                    </div>
-                    <div class="flex items-center gap-2">
-                      <a href="#" class="uk-label relative z-10">personal</a>
-                    </div>
-                  </div>
-                </li>
-              </ul>
-            </div>
-          </div>
-        </div>
-        <div class="flex flex-col">
-          <div
-            class="flex h-14 flex-none items-center border-b border-border p-2"
-          >
-            <div class="flex w-full justify-between">
-              <div class="flex gap-x-2 divide-x divide-border">
-                <ul class="flex gap-x-1">
-                  <li>
-                    <a
-                      class="uk-btn uk-btn-ghost uk-btn-icon"
-                      href="#"
-                      data-uk-tooltip="Archive"
-                      aria-label="Archive"
-                      ><span class="size-4"
-                        ><uk-icon
-                          ><!----><svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            width="16"
-                            height="16"
-                            viewBox="0 0 24 24"
-                            fill="none"
-                            stroke="currentColor"
-                            stroke-width="2"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            class=""
-                          >
-                            <rect
-                              width="20"
-                              height="5"
-                              x="2"
-                              y="3"
-                              rx="1"
-                            ></rect>
-                            <path
-                              d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"
-                            ></path>
-                            <path d="M10 12h4"></path></svg></uk-icon></span
-                    ></a>
-                  </li>
-                  <li>
-                    <a
-                      class="uk-btn uk-btn-ghost uk-btn-icon"
-                      href="#"
-                      data-uk-tooltip="Move to junk"
-                      aria-label="Move to junk"
-                      ><span class="size-4"
-                        ><uk-icon
-                          ><!----><svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            width="16"
-                            height="16"
-                            viewBox="0 0 24 24"
-                            fill="none"
-                            stroke="currentColor"
-                            stroke-width="2"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            class=""
-                          >
-                            <rect
-                              width="20"
-                              height="5"
-                              x="2"
-                              y="3"
-                              rx="1"
-                            ></rect>
-                            <path
-                              d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"
-                            ></path>
-                            <path d="m9.5 17 5-5"></path>
-                            <path d="m9.5 12 5 5"></path></svg></uk-icon></span
-                    ></a>
-                  </li>
-                  <li>
-                    <a
-                      class="uk-btn uk-btn-ghost uk-btn-icon"
-                      href="#"
-                      data-uk-tooltip="Move to trash"
-                      aria-label="Move to trash"
-                      ><span class="size-4"
-                        ><uk-icon
-                          ><!----><svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            width="16"
-                            height="16"
-                            viewBox="0 0 24 24"
-                            fill="none"
-                            stroke="currentColor"
-                            stroke-width="2"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            class=""
-                          >
-                            <path d="M3 6h18"></path>
-                            <path
-                              d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"
-                            ></path>
-                            <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path>
-                            <line x1="10" x2="10" y1="11" y2="17"></line>
-                            <line
-                              x1="14"
-                              x2="14"
-                              y1="11"
-                              y2="17"
-                            ></line></svg></uk-icon></span
-                    ></a>
-                  </li>
-                </ul>
-                <ul class="flex gap-x-1 pl-2">
-                  <li>
-                    <a
-                      class="uk-btn uk-btn-ghost uk-btn-icon"
-                      href="#"
-                      data-uk-tooltip="Snooze"
-                      aria-label="Snooze"
-                      ><span class="size-4"
-                        ><uk-icon
-                          ><!----><svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            width="16"
-                            height="16"
-                            viewBox="0 0 24 24"
-                            fill="none"
-                            stroke="currentColor"
-                            stroke-width="2"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            class=""
-                          >
-                            <circle cx="12" cy="12" r="10"></circle>
-                            <polyline
-                              points="12 6 12 12 16 14"
-                            ></polyline></svg></uk-icon></span
-                    ></a>
-                  </li>
-                </ul>
-              </div>
-              <div class="flex gap-x-2 divide-x divide-border">
-                <ul class="flex gap-x-1">
-                  <li>
-                    <a
-                      class="uk-btn uk-btn-ghost uk-btn-icon"
-                      href="#"
-                      data-uk-tooltip="Reply"
-                      aria-label="Reply"
-                      ><span class="size-4"
-                        ><uk-icon
-                          ><!----><svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            width="16"
-                            height="16"
-                            viewBox="0 0 24 24"
-                            fill="none"
-                            stroke="currentColor"
-                            stroke-width="2"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            class=""
-                          >
-                            <polyline points="9 17 4 12 9 7"></polyline>
-                            <path
-                              d="M20 18v-2a4 4 0 0 0-4-4H4"
-                            ></path></svg></uk-icon></span
-                    ></a>
-                  </li>
-                  <li>
-                    <a
-                      class="uk-btn uk-btn-ghost uk-btn-icon"
-                      href="#"
-                      data-uk-tooltip="Reply all"
-                      aria-label="Reply all"
-                      ><span class="size-4"
-                        ><uk-icon
-                          ><!----><svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            width="16"
-                            height="16"
-                            viewBox="0 0 24 24"
-                            fill="none"
-                            stroke="currentColor"
-                            stroke-width="2"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            class=""
-                          >
-                            <polyline points="7 17 2 12 7 7"></polyline>
-                            <polyline points="12 17 7 12 12 7"></polyline>
-                            <path
-                              d="M22 18v-2a4 4 0 0 0-4-4H7"
-                            ></path></svg></uk-icon></span
-                    ></a>
-                  </li>
-                  <li>
-                    <a
-                      class="uk-btn uk-btn-ghost uk-btn-icon"
-                      href="#"
-                      data-uk-tooltip="Forward"
-                      aria-label="Forward"
-                      ><span class="size-4"
-                        ><uk-icon
-                          ><!----><svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            width="16"
-                            height="16"
-                            viewBox="0 0 24 24"
-                            fill="none"
-                            stroke="currentColor"
-                            stroke-width="2"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            class=""
-                          >
-                            <polyline points="15 17 20 12 15 7"></polyline>
-                            <path
-                              d="M4 18v-2a4 4 0 0 1 4-4h12"
-                            ></path></svg></uk-icon></span
-                    ></a>
-                  </li>
-                </ul>
-                <div class="uk-inline pl-2">
-                  <button
-                    class="uk-btn uk-btn-ghost uk-btn-icon"
-                    aria-label="Menu"
-                    aria-haspopup="true"
-                  >
-                    <span class="size-4"
-                      ><uk-icon
-                        ><!----><svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          width="16"
-                          height="16"
-                          viewBox="0 0 24 24"
-                          fill="none"
-                          stroke="currentColor"
-                          stroke-width="2"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          class=""
-                        >
-                          <circle cx="12" cy="12" r="1"></circle>
-                          <circle cx="12" cy="5" r="1"></circle>
-                          <circle cx="12" cy="19" r="1"></circle></svg></uk-icon
-                    ></span>
-                  </button>
-                  <div
-                    class="uk-drop uk-dropdown w-52"
-                    data-uk-dropdown="pos: bottom-right; mode: click"
-                  >
-                    <ul class="uk-dropdown-nav uk-nav">
-                      <li><a class="uk-drop-close">Mark as unread</a></li>
-                      <li><a class="uk-drop-close">Star thread</a></li>
-                      <li><a class="uk-drop-close">Add label</a></li>
-                      <li><a class="uk-drop-close">Mute thread</a></li>
-                    </ul>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="flex flex-1 flex-col" id="test">
-            <div class="flex-1">
-              <div class="flex items-start p-4">
-                <div class="flex items-start gap-4">
-                  <span
-                    class="flex h-10 w-10 items-center justify-center rounded-full bg-muted"
-                    >WS</span
-                  >
-                  <div class="grid gap-1">
-                    <div class="font-semibold">William Smith</div>
-                    <div class="line-clamp-1 text-xs">Meeting Tomorrow</div>
-                    <div class="line-clamp-1 text-xs">
-                      <span class="font-medium">Reply-To:</span>
-                      williamsmith@example.com
-                    </div>
-                  </div>
-                </div>
-                <div class="ml-auto text-xs text-muted-foreground">
-                  October 22, 23 at 09:00:00 AM
-                </div>
-              </div>
-              <div
-                class="flex-1 space-y-4 whitespace-pre-line border-t border-border p-4"
-              >
-                Hi, let's have a meeting tomorrow to discuss the project. I've
-                been reviewing the project details and have some ideas I'd like
-                to share. It's crucial that we align on our next steps to ensure
-                the project's success. Please come prepared with any questions
-                or insights you may have. Looking forward to our meeting! Best
-                regards, William
-              </div>
-            </div>
-            <div class="flex-none space-y-4 border-t border-border p-4">
-              <div>
-                <label for="message" class="sr-only">Message</label>
-                <textarea
-                  class="uk-textarea"
-                  id="message"
-                  placeholder="Reply William Smith"
-                ></textarea>
-              </div>
-              <div class="flex justify-between">
-                <label
-                  class="inline-flex items-center gap-x-2 text-xs"
-                  for="mute"
-                  ><input
-                    class="uk-toggle-switch uk-toggle-switch-primary"
-                    id="mute"
-                    type="checkbox"
-                  />
-                  Mute this thread</label
-                >
-                <button class="uk-btn uk-btn-primary">Send</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <!---->
-    <div
-      id="svelte-announcer"
-      aria-live="assertive"
-      aria-atomic="true"
-      style="
-        position: absolute;
-        left: 0;
-        top: 0;
-        clip: rect(0 0 0 0);
-        clip-path: inset(50%);
-        overflow: hidden;
-        white-space: nowrap;
-        width: 1px;
-        height: 1px;
-      "
-    >
-      <!---->
-    </div>
-    <!---->
-  </div>
-</body>
diff --git a/Web/public/auth-page.ref.html b/Web/public/auth-page.ref.html
deleted file mode 100644
index 9705333..0000000
--- a/Web/public/auth-page.ref.html
+++ /dev/null
@@ -1,142 +0,0 @@
-<body
-  class="bg-background font-geist-sans text-sm text-foreground"
-  data-sveltekit-preload-data="hover"
->
-  <div style="display: contents">
-    <!--[--><!--[--><!----><!---->
-    <div class="hidden h-screen grid-cols-2 xl:grid">
-      <div
-        class="col-span-1 hidden flex-col justify-between bg-zinc-900 p-8 text-white lg:flex"
-      >
-        <div class="flex items-center text-lg font-medium">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            class="mr-2 h-6 w-6"
-          >
-            <path
-              d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3"
-            ></path>
-          </svg>
-          Acme Inc
-        </div>
-        <blockquote class="space-y-2">
-          <p class="text-lg">
-            "This library has saved me countless hours of work and helped me
-            deliver stunning designs to my clients faster than ever before."
-          </p>
-          <footer class="text-sm">Sofia Davis</footer>
-        </blockquote>
-      </div>
-      <div class="col-span-2 flex flex-col p-8 lg:col-span-1">
-        <div class="flex flex-none justify-end">
-          <button class="uk-btn uk-btn-ghost">Login</button>
-        </div>
-        <div class="flex flex-1 items-center justify-center">
-          <div class="w-80 space-y-6">
-            <div class="flex flex-col space-y-2 text-center">
-              <h1 class="uk-h3">Create an account</h1>
-              <p class="text-sm text-muted-foreground">
-                Enter your email below to create your account
-              </p>
-            </div>
-            <div class="space-y-2">
-              <input
-                class="uk-input"
-                placeholder="name@example.com"
-                type="text"
-              />
-              <button class="uk-btn uk-btn-primary w-full">
-                <!--[!--><!--]-->
-                Sign in with Email
-              </button>
-            </div>
-            <div class="relative">
-              <div class="absolute inset-0 flex items-center">
-                <span class="w-full border-t border-border"></span>
-              </div>
-              <div class="relative flex justify-center text-xs uppercase">
-                <span class="bg-background px-2 text-muted-foreground"
-                  >Or continue with</span
-                >
-              </div>
-            </div>
-            <button class="uk-btn uk-btn-default w-full">
-              <svg viewBox="0 0 438.549 438.549" class="mr-2 h-4 w-4">
-                <path
-                  fill="currentColor"
-                  d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"
-                ></path>
-              </svg>
-              Github
-            </button>
-            <p class="px-8 text-center text-sm text-muted-foreground">
-              By clicking continue, you agree to our
-              <a
-                class="underline underline-offset-4 hover:text-primary"
-                href="#"
-                >Terms of Service</a
-              >
-              and
-              <a
-                class="underline underline-offset-4 hover:text-primary"
-                href="#"
-                >Privacy Policy</a
-              >.
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-    <!----><!----><!----><!--]-->
-    <!--[!-->
-    <div
-      id="svelte-announcer"
-      aria-live="assertive"
-      aria-atomic="true"
-      style="
-        position: absolute;
-        left: 0;
-        top: 0;
-        clip: rect(0 0 0 0);
-        clip-path: inset(50%);
-        overflow: hidden;
-        white-space: nowrap;
-        width: 1px;
-        height: 1px;
-      "
-    >
-      <!---->
-    </div>
-    <!--]--><!--]-->
-
-    <script>
-      {
-        __sveltekit_ceme51 = {
-          base: new URL("..", location).pathname.slice(0, -1),
-        };
-
-        const element = document.currentScript.parentElement;
-
-        const data = [null, null];
-
-        Promise.all([
-          import("../_app/immutable/entry/start.Vst7ySbz.js"),
-          import("../_app/immutable/entry/app.D3_5gIyu.js"),
-        ]).then(([kit, app]) => {
-          kit.start(app, element, {
-            node_ids: [0, 3],
-            data,
-            form: null,
-            error: null,
-          });
-        });
-      }
-    </script>
-  </div>
-</body>
diff --git a/Web/public/auth.html b/Web/public/auth.html
index 2417f9a..e53d650 100644
--- a/Web/public/auth.html
+++ b/Web/public/auth.html
@@ -110,10 +110,10 @@
         <div class="flex flex-col !space-y-2 text-center">
           <h1 class="uk-h3">Authenticate with Us</h1>
           <p class="text-sm text-muted-foreground">
-            Log in with a magic link. No account yet? We'll make one!
+            Log in with a social sign on. No account yet? It'll make one!
           </p>
         </div>
-        <div class="!space-y-2">
+        <!-- <div class="!space-y-2">
           <input id="auth-field-email" class="uk-input" placeholder="name@example.com" type="text" />
           <a
             id="auth-button-magic"
@@ -133,8 +133,11 @@
               >Or continue with</span
             >
           </div>
-        </div>
-        <button id="auth-button-sso-google" class="uk-btn uk-btn-default w-full">
+        </div> -->
+        <button
+          id="auth-button-sso-google"
+          class="uk-btn uk-btn-primary w-full"
+        >
           <svg role="img" viewBox="0 0 24 24" class="mr-2 h-4 w-4">
             <path
               fill="currentColor"
diff --git a/Web/public/index.html b/Web/public/index.html
index 9354189..53db055 100644
--- a/Web/public/index.html
+++ b/Web/public/index.html
@@ -31,8 +31,8 @@
     <!-- ui stuff -->
     <!-- temporary ui bundling fix (https://github.com/oven-sh/bun/issues/17243) -->
     <link
-    rel="stylesheet"
-    href="https://unpkg.com/franken-ui@2.0.0-internal.42/dist/css/core.min.css"
+      rel="stylesheet"
+      href="https://unpkg.com/franken-ui@2.0.0-internal.42/dist/css/core.min.css"
     />
     <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
     <script type="module" src="/js/ebcd-common-franken-ui.js"></script>
diff --git a/Web/public/js/ebcd-auth.js b/Web/public/js/ebcd-auth.js
index 7feefb1..7a869c8 100644
--- a/Web/public/js/ebcd-auth.js
+++ b/Web/public/js/ebcd-auth.js
@@ -33,53 +33,53 @@ const actionCodeSettings = {
 // h2..... id="auth-modal-result-header"
 // p...... id="auth-modal-result-body"
 
-// handle magic link auth
-const buttonSendLink = document.getElementById("auth-button-magic");
-buttonSendLink.addEventListener("click", async (event) => {
-  console.log("ebcd-auth: clicked magic");
+// // handle magic link auth
+// const buttonSendLink = document.getElementById("auth-button-magic");
+// buttonSendLink.addEventListener("click", async (event) => {
+//   console.log("ebcd-auth: clicked magic");
 
-  const modalResultHeader = document.getElementById("auth-modal-result-header");
-  const modalResultBody = document.getElementById("auth-modal-result-body");
-  const fieldEmail = document.getElementById("auth-field-email");
-  // try get email from fieldEmail.value
-  const email = fieldEmail ? fieldEmail.value.trim() : null;
+//   const modalResultHeader = document.getElementById("auth-modal-result-header");
+//   const modalResultBody = document.getElementById("auth-modal-result-body");
+//   const fieldEmail = document.getElementById("auth-field-email");
+//   // try get email from fieldEmail.value
+//   const email = fieldEmail ? fieldEmail.value.trim() : null;
 
-  // if email is blank
-  if (!email) {
-    modalResultHeader.innerText = "Error!";
-    modalResultBody.innerText = "Please enter an email address.";
-    return;
-  }
+//   // if email is blank
+//   if (!email) {
+//     modalResultHeader.innerText = "Error!";
+//     modalResultBody.innerText = "Please enter an email address.";
+//     return;
+//   }
 
-  // if email is not valid
-  if (!email.includes("@")) {
-    modalResultHeader.innerText = "Error!";
-    modalResultBody.innerText = "Please enter a valid email address.";
-    return;
-  }
+//   // if email is not valid
+//   if (!email.includes("@")) {
+//     modalResultHeader.innerText = "Error!";
+//     modalResultBody.innerText = "Please enter a valid email address.";
+//     return;
+//   }
 
-  console.log("ebcd-auth/auth-button-magic: sent!");
-  authWithMagicLink(auth, email, actionCodeSettings)
-    .then(() => {
-      console.log("ebcd-auth/auth-button-magic: success!");
-      // The link was successfully sent. Inform the user.
-      modalResultHeader.innerText = "You've Got Mail!";
-      modalResultBody.innerText = `We've sent you an email to ${email} with a magical link to authenticate with us. If you're a new user, you'll make an account. If you're an existing user, you'll be logged in. Check your inbox!`;
+//   console.log("ebcd-auth/auth-button-magic: sent!");
+//   authWithMagicLink(auth, email, actionCodeSettings)
+//     .then(() => {
+//       console.log("ebcd-auth/auth-button-magic: success!");
+//       // The link was successfully sent. Inform the user.
+//       modalResultHeader.innerText = "You've Got Mail!";
+//       modalResultBody.innerText = `We've sent you an email to ${email} with a magical link to authenticate with us. If you're a new user, you'll make an account. If you're an existing user, you'll be logged in. Check your inbox!`;
 
-      // Save the email locally so you don't need to ask the user for it again
-      // if they open the link on the same device.
-      window.localStorage.setItem("emailForSignIn", email);
-    })
-    .catch((error) => {
-      console.log(
-        "ebcd-auth/auth-button-magic: error...",
-        error.code,
-        error.message
-      );
-      modalResultHeader.innerText = "Error!";
-      modalResultBody.innerHTML = `We've encountered an error. Tell the booth runner about this!<br>${error.message}`;
-    });
-});
+//       // Save the email locally so you don't need to ask the user for it again
+//       // if they open the link on the same device.
+//       window.localStorage.setItem("emailForSignIn", email);
+//     })
+//     .catch((error) => {
+//       console.log(
+//         "ebcd-auth/auth-button-magic: error...",
+//         error.code,
+//         error.message
+//       );
+//       modalResultHeader.innerText = "Error!";
+//       modalResultBody.innerHTML = `We've encountered an error. Tell the booth runner about this!<br>${error.message}`;
+//     });
+// });
 
 // handle sso auth
 // <button id="button-sso-google">
diff --git a/Web/public/js/ebcd-common-franken-ui.js b/Web/public/js/ebcd-common-franken-ui.js
index d44efd7..544532f 100644
--- a/Web/public/js/ebcd-common-franken-ui.js
+++ b/Web/public/js/ebcd-common-franken-ui.js
@@ -3,9 +3,7 @@ import "https://unpkg.com/franken-ui@2.0.0-internal.42/dist/js/icon.iife.js";
 
 const htmlElement = document.documentElement;
 
-const __FRANKEN__ = JSON.parse(
-  localStorage.getItem("__FRANKEN__") || "{}"
-);
+const __FRANKEN__ = JSON.parse(localStorage.getItem("__FRANKEN__") || "{}");
 
 if (
   __FRANKEN__.mode === "dark" ||
diff --git a/Web/public/js/ebcd-profile.js b/Web/public/js/ebcd-profile.js
new file mode 100644
index 0000000..d1c946f
--- /dev/null
+++ b/Web/public/js/ebcd-profile.js
@@ -0,0 +1,18 @@
+import { auth } from "./ebcd-common-firebase.js";
+
+console.log("ebcd-profile loaded <3");
+
+// check url params
+const urlParams = new URLSearchParams(window.location.search);
+
+// if logOut=true, sign out
+if (urlParams.get("logOut") === "true") {
+  auth
+    .signOut()
+    .then(() => {
+      window.location = "/";
+    })
+    .catch((error) => {
+      console.error("ebcd-profile: error signing out", error);
+    });
+}
diff --git a/Web/public/js/nayuki-qrcodegen-v1.8.0.js b/Web/public/js/nayuki-qrcodegen-v1.8.0.js
index 51f485b..bc052d2 100644
--- a/Web/public/js/nayuki-qrcodegen-v1.8.0.js
+++ b/Web/public/js/nayuki-qrcodegen-v1.8.0.js
@@ -23,815 +23,908 @@
 "use strict";
 export var qrcodegen;
 (function (qrcodegen) {
-    /*---- QR Code symbol class ----*/
+  /*---- QR Code symbol class ----*/
+  /*
+   * A QR Code symbol, which is a type of two-dimension barcode.
+   * Invented by Denso Wave and described in the ISO/IEC 18004 standard.
+   * Instances of this class represent an immutable square grid of dark and light cells.
+   * The class provides static factory functions to create a QR Code from text or binary data.
+   * The class covers the QR Code Model 2 specification, supporting all versions (sizes)
+   * from 1 to 40, all 4 error correction levels, and 4 character encoding modes.
+   *
+   * Ways to create a QR Code object:
+   * - High level: Take the payload data and call QrCode.encodeText() or QrCode.encodeBinary().
+   * - Mid level: Custom-make the list of segments and call QrCode.encodeSegments().
+   * - Low level: Custom-make the array of data codeword bytes (including
+   *   segment headers and final padding, excluding error correction codewords),
+   *   supply the appropriate version number, and call the QrCode() constructor.
+   * (Note that all ways require supplying the desired error correction level.)
+   */
+  class QrCode {
+    /*-- Constructor (low level) and fields --*/
+    // Creates a new QR Code with the given version number,
+    // error correction level, data codeword bytes, and mask number.
+    // This is a low-level API that most users should not use directly.
+    // A mid-level API is the encodeSegments() function.
+    constructor(
+      // The version number of this QR Code, which is between 1 and 40 (inclusive).
+      // This determines the size of this barcode.
+      version,
+      // The error correction level used in this QR Code.
+      errorCorrectionLevel,
+      dataCodewords,
+      msk
+    ) {
+      this.version = version;
+      this.errorCorrectionLevel = errorCorrectionLevel;
+      // The modules of this QR Code (false = light, true = dark).
+      // Immutable after constructor finishes. Accessed through getModule().
+      this.modules = [];
+      // Indicates function modules that are not subjected to masking. Discarded when constructor finishes.
+      this.isFunction = [];
+      // Check scalar arguments
+      if (version < QrCode.MIN_VERSION || version > QrCode.MAX_VERSION)
+        throw new RangeError("Version value out of range");
+      if (msk < -1 || msk > 7) throw new RangeError("Mask value out of range");
+      this.size = version * 4 + 17;
+      // Initialize both grids to be size*size arrays of Boolean false
+      let row = [];
+      for (let i = 0; i < this.size; i++) row.push(false);
+      for (let i = 0; i < this.size; i++) {
+        this.modules.push(row.slice()); // Initially all light
+        this.isFunction.push(row.slice());
+      }
+      // Compute ECC, draw modules
+      this.drawFunctionPatterns();
+      const allCodewords = this.addEccAndInterleave(dataCodewords);
+      this.drawCodewords(allCodewords);
+      // Do masking
+      if (msk == -1) {
+        // Automatically choose best mask
+        let minPenalty = 1000000000;
+        for (let i = 0; i < 8; i++) {
+          this.applyMask(i);
+          this.drawFormatBits(i);
+          const penalty = this.getPenaltyScore();
+          if (penalty < minPenalty) {
+            msk = i;
+            minPenalty = penalty;
+          }
+          this.applyMask(i); // Undoes the mask due to XOR
+        }
+      }
+      assert(0 <= msk && msk <= 7);
+      this.mask = msk;
+      this.applyMask(msk); // Apply the final choice of mask
+      this.drawFormatBits(msk); // Overwrite old format bits
+      this.isFunction = [];
+    }
+    /*-- Static factory functions (high level) --*/
+    // Returns a QR Code representing the given Unicode text string at the given error correction level.
+    // As a conservative upper bound, this function is guaranteed to succeed for strings that have 738 or fewer
+    // Unicode code points (not UTF-16 code units) if the low error correction level is used. The smallest possible
+    // QR Code version is automatically chosen for the output. The ECC level of the result may be higher than the
+    // ecl argument if it can be done without increasing the version.
+    static encodeText(text, ecl) {
+      const segs = qrcodegen.QrSegment.makeSegments(text);
+      return QrCode.encodeSegments(segs, ecl);
+    }
+    // Returns a QR Code representing the given binary data at the given error correction level.
+    // This function always encodes using the binary segment mode, not any text mode. The maximum number of
+    // bytes allowed is 2953. The smallest possible QR Code version is automatically chosen for the output.
+    // The ECC level of the result may be higher than the ecl argument if it can be done without increasing the version.
+    static encodeBinary(data, ecl) {
+      const seg = qrcodegen.QrSegment.makeBytes(data);
+      return QrCode.encodeSegments([seg], ecl);
+    }
+    /*-- Static factory functions (mid level) --*/
+    // Returns a QR Code representing the given segments with the given encoding parameters.
+    // The smallest possible QR Code version within the given range is automatically
+    // chosen for the output. Iff boostEcl is true, then the ECC level of the result
+    // may be higher than the ecl argument if it can be done without increasing the
+    // version. The mask number is either between 0 to 7 (inclusive) to force that
+    // mask, or -1 to automatically choose an appropriate mask (which may be slow).
+    // This function allows the user to create a custom sequence of segments that switches
+    // between modes (such as alphanumeric and byte) to encode text in less space.
+    // This is a mid-level API; the high-level API is encodeText() and encodeBinary().
+    static encodeSegments(
+      segs,
+      ecl,
+      minVersion = 1,
+      maxVersion = 40,
+      mask = -1,
+      boostEcl = true
+    ) {
+      if (
+        !(
+          QrCode.MIN_VERSION <= minVersion &&
+          minVersion <= maxVersion &&
+          maxVersion <= QrCode.MAX_VERSION
+        ) ||
+        mask < -1 ||
+        mask > 7
+      )
+        throw new RangeError("Invalid value");
+      // Find the minimal version number to use
+      let version;
+      let dataUsedBits;
+      for (version = minVersion; ; version++) {
+        const dataCapacityBits = QrCode.getNumDataCodewords(version, ecl) * 8; // Number of data bits available
+        const usedBits = QrSegment.getTotalBits(segs, version);
+        if (usedBits <= dataCapacityBits) {
+          dataUsedBits = usedBits;
+          break; // This version number is found to be suitable
+        }
+        if (version >= maxVersion)
+          // All versions in the range could not fit the given data
+          throw new RangeError("Data too long");
+      }
+      // Increase the error correction level while the data still fits in the current version number
+      for (const newEcl of [
+        QrCode.Ecc.MEDIUM,
+        QrCode.Ecc.QUARTILE,
+        QrCode.Ecc.HIGH,
+      ]) {
+        // From low to high
+        if (
+          boostEcl &&
+          dataUsedBits <= QrCode.getNumDataCodewords(version, newEcl) * 8
+        )
+          ecl = newEcl;
+      }
+      // Concatenate all segments to create the data bit string
+      let bb = [];
+      for (const seg of segs) {
+        appendBits(seg.mode.modeBits, 4, bb);
+        appendBits(seg.numChars, seg.mode.numCharCountBits(version), bb);
+        for (const b of seg.getData()) bb.push(b);
+      }
+      assert(bb.length == dataUsedBits);
+      // Add terminator and pad up to a byte if applicable
+      const dataCapacityBits = QrCode.getNumDataCodewords(version, ecl) * 8;
+      assert(bb.length <= dataCapacityBits);
+      appendBits(0, Math.min(4, dataCapacityBits - bb.length), bb);
+      appendBits(0, (8 - (bb.length % 8)) % 8, bb);
+      assert(bb.length % 8 == 0);
+      // Pad with alternating bytes until data capacity is reached
+      for (
+        let padByte = 0xec;
+        bb.length < dataCapacityBits;
+        padByte ^= 0xec ^ 0x11
+      )
+        appendBits(padByte, 8, bb);
+      // Pack bits into bytes in big endian
+      let dataCodewords = [];
+      while (dataCodewords.length * 8 < bb.length) dataCodewords.push(0);
+      bb.forEach((b, i) => (dataCodewords[i >>> 3] |= b << (7 - (i & 7))));
+      // Create the QR Code object
+      return new QrCode(version, ecl, dataCodewords, mask);
+    }
+    /*-- Accessor methods --*/
+    // Returns the color of the module (pixel) at the given coordinates, which is false
+    // for light or true for dark. The top left corner has the coordinates (x=0, y=0).
+    // If the given coordinates are out of bounds, then false (light) is returned.
+    getModule(x, y) {
+      return (
+        0 <= x && x < this.size && 0 <= y && y < this.size && this.modules[y][x]
+      );
+    }
+    /*-- Private helper methods for constructor: Drawing function modules --*/
+    // Reads this object's version field, and draws and marks all function modules.
+    drawFunctionPatterns() {
+      // Draw horizontal and vertical timing patterns
+      for (let i = 0; i < this.size; i++) {
+        this.setFunctionModule(6, i, i % 2 == 0);
+        this.setFunctionModule(i, 6, i % 2 == 0);
+      }
+      // Draw 3 finder patterns (all corners except bottom right; overwrites some timing modules)
+      this.drawFinderPattern(3, 3);
+      this.drawFinderPattern(this.size - 4, 3);
+      this.drawFinderPattern(3, this.size - 4);
+      // Draw numerous alignment patterns
+      const alignPatPos = this.getAlignmentPatternPositions();
+      const numAlign = alignPatPos.length;
+      for (let i = 0; i < numAlign; i++) {
+        for (let j = 0; j < numAlign; j++) {
+          // Don't draw on the three finder corners
+          if (
+            !(
+              (i == 0 && j == 0) ||
+              (i == 0 && j == numAlign - 1) ||
+              (i == numAlign - 1 && j == 0)
+            )
+          )
+            this.drawAlignmentPattern(alignPatPos[i], alignPatPos[j]);
+        }
+      }
+      // Draw configuration data
+      this.drawFormatBits(0); // Dummy mask value; overwritten later in the constructor
+      this.drawVersion();
+    }
+    // Draws two copies of the format bits (with its own error correction code)
+    // based on the given mask and this object's error correction level field.
+    drawFormatBits(mask) {
+      // Calculate error correction code and pack bits
+      const data = (this.errorCorrectionLevel.formatBits << 3) | mask; // errCorrLvl is uint2, mask is uint3
+      let rem = data;
+      for (let i = 0; i < 10; i++) rem = (rem << 1) ^ ((rem >>> 9) * 0x537);
+      const bits = ((data << 10) | rem) ^ 0x5412; // uint15
+      assert(bits >>> 15 == 0);
+      // Draw first copy
+      for (let i = 0; i <= 5; i++)
+        this.setFunctionModule(8, i, getBit(bits, i));
+      this.setFunctionModule(8, 7, getBit(bits, 6));
+      this.setFunctionModule(8, 8, getBit(bits, 7));
+      this.setFunctionModule(7, 8, getBit(bits, 8));
+      for (let i = 9; i < 15; i++)
+        this.setFunctionModule(14 - i, 8, getBit(bits, i));
+      // Draw second copy
+      for (let i = 0; i < 8; i++)
+        this.setFunctionModule(this.size - 1 - i, 8, getBit(bits, i));
+      for (let i = 8; i < 15; i++)
+        this.setFunctionModule(8, this.size - 15 + i, getBit(bits, i));
+      this.setFunctionModule(8, this.size - 8, true); // Always dark
+    }
+    // Draws two copies of the version bits (with its own error correction code),
+    // based on this object's version field, iff 7 <= version <= 40.
+    drawVersion() {
+      if (this.version < 7) return;
+      // Calculate error correction code and pack bits
+      let rem = this.version; // version is uint6, in the range [7, 40]
+      for (let i = 0; i < 12; i++) rem = (rem << 1) ^ ((rem >>> 11) * 0x1f25);
+      const bits = (this.version << 12) | rem; // uint18
+      assert(bits >>> 18 == 0);
+      // Draw two copies
+      for (let i = 0; i < 18; i++) {
+        const color = getBit(bits, i);
+        const a = this.size - 11 + (i % 3);
+        const b = Math.floor(i / 3);
+        this.setFunctionModule(a, b, color);
+        this.setFunctionModule(b, a, color);
+      }
+    }
+    // Draws a 9*9 finder pattern including the border separator,
+    // with the center module at (x, y). Modules can be out of bounds.
+    drawFinderPattern(x, y) {
+      for (let dy = -4; dy <= 4; dy++) {
+        for (let dx = -4; dx <= 4; dx++) {
+          const dist = Math.max(Math.abs(dx), Math.abs(dy)); // Chebyshev/infinity norm
+          const xx = x + dx;
+          const yy = y + dy;
+          if (0 <= xx && xx < this.size && 0 <= yy && yy < this.size)
+            this.setFunctionModule(xx, yy, dist != 2 && dist != 4);
+        }
+      }
+    }
+    // Draws a 5*5 alignment pattern, with the center module
+    // at (x, y). All modules must be in bounds.
+    drawAlignmentPattern(x, y) {
+      for (let dy = -2; dy <= 2; dy++) {
+        for (let dx = -2; dx <= 2; dx++)
+          this.setFunctionModule(
+            x + dx,
+            y + dy,
+            Math.max(Math.abs(dx), Math.abs(dy)) != 1
+          );
+      }
+    }
+    // Sets the color of a module and marks it as a function module.
+    // Only used by the constructor. Coordinates must be in bounds.
+    setFunctionModule(x, y, isDark) {
+      this.modules[y][x] = isDark;
+      this.isFunction[y][x] = true;
+    }
+    /*-- Private helper methods for constructor: Codewords and masking --*/
+    // Returns a new byte string representing the given data with the appropriate error correction
+    // codewords appended to it, based on this object's version and error correction level.
+    addEccAndInterleave(data) {
+      const ver = this.version;
+      const ecl = this.errorCorrectionLevel;
+      if (data.length != QrCode.getNumDataCodewords(ver, ecl))
+        throw new RangeError("Invalid argument");
+      // Calculate parameter numbers
+      const numBlocks = QrCode.NUM_ERROR_CORRECTION_BLOCKS[ecl.ordinal][ver];
+      const blockEccLen = QrCode.ECC_CODEWORDS_PER_BLOCK[ecl.ordinal][ver];
+      const rawCodewords = Math.floor(QrCode.getNumRawDataModules(ver) / 8);
+      const numShortBlocks = numBlocks - (rawCodewords % numBlocks);
+      const shortBlockLen = Math.floor(rawCodewords / numBlocks);
+      // Split data into blocks and append ECC to each block
+      let blocks = [];
+      const rsDiv = QrCode.reedSolomonComputeDivisor(blockEccLen);
+      for (let i = 0, k = 0; i < numBlocks; i++) {
+        let dat = data.slice(
+          k,
+          k + shortBlockLen - blockEccLen + (i < numShortBlocks ? 0 : 1)
+        );
+        k += dat.length;
+        const ecc = QrCode.reedSolomonComputeRemainder(dat, rsDiv);
+        if (i < numShortBlocks) dat.push(0);
+        blocks.push(dat.concat(ecc));
+      }
+      // Interleave (not concatenate) the bytes from every block into a single sequence
+      let result = [];
+      for (let i = 0; i < blocks[0].length; i++) {
+        blocks.forEach((block, j) => {
+          // Skip the padding byte in short blocks
+          if (i != shortBlockLen - blockEccLen || j >= numShortBlocks)
+            result.push(block[i]);
+        });
+      }
+      assert(result.length == rawCodewords);
+      return result;
+    }
+    // Draws the given sequence of 8-bit codewords (data and error correction) onto the entire
+    // data area of this QR Code. Function modules need to be marked off before this is called.
+    drawCodewords(data) {
+      if (
+        data.length != Math.floor(QrCode.getNumRawDataModules(this.version) / 8)
+      )
+        throw new RangeError("Invalid argument");
+      let i = 0; // Bit index into the data
+      // Do the funny zigzag scan
+      for (let right = this.size - 1; right >= 1; right -= 2) {
+        // Index of right column in each column pair
+        if (right == 6) right = 5;
+        for (let vert = 0; vert < this.size; vert++) {
+          // Vertical counter
+          for (let j = 0; j < 2; j++) {
+            const x = right - j; // Actual x coordinate
+            const upward = ((right + 1) & 2) == 0;
+            const y = upward ? this.size - 1 - vert : vert; // Actual y coordinate
+            if (!this.isFunction[y][x] && i < data.length * 8) {
+              this.modules[y][x] = getBit(data[i >>> 3], 7 - (i & 7));
+              i++;
+            }
+            // If this QR Code has any remainder bits (0 to 7), they were assigned as
+            // 0/false/light by the constructor and are left unchanged by this method
+          }
+        }
+      }
+      assert(i == data.length * 8);
+    }
+    // XORs the codeword modules in this QR Code with the given mask pattern.
+    // The function modules must be marked and the codeword bits must be drawn
+    // before masking. Due to the arithmetic of XOR, calling applyMask() with
+    // the same mask value a second time will undo the mask. A final well-formed
+    // QR Code needs exactly one (not zero, two, etc.) mask applied.
+    applyMask(mask) {
+      if (mask < 0 || mask > 7) throw new RangeError("Mask value out of range");
+      for (let y = 0; y < this.size; y++) {
+        for (let x = 0; x < this.size; x++) {
+          let invert;
+          switch (mask) {
+            case 0:
+              invert = (x + y) % 2 == 0;
+              break;
+            case 1:
+              invert = y % 2 == 0;
+              break;
+            case 2:
+              invert = x % 3 == 0;
+              break;
+            case 3:
+              invert = (x + y) % 3 == 0;
+              break;
+            case 4:
+              invert = (Math.floor(x / 3) + Math.floor(y / 2)) % 2 == 0;
+              break;
+            case 5:
+              invert = ((x * y) % 2) + ((x * y) % 3) == 0;
+              break;
+            case 6:
+              invert = (((x * y) % 2) + ((x * y) % 3)) % 2 == 0;
+              break;
+            case 7:
+              invert = (((x + y) % 2) + ((x * y) % 3)) % 2 == 0;
+              break;
+            default:
+              throw new Error("Unreachable");
+          }
+          if (!this.isFunction[y][x] && invert)
+            this.modules[y][x] = !this.modules[y][x];
+        }
+      }
+    }
+    // Calculates and returns the penalty score based on state of this QR Code's current modules.
+    // This is used by the automatic mask choice algorithm to find the mask pattern that yields the lowest score.
+    getPenaltyScore() {
+      let result = 0;
+      // Adjacent modules in row having same color, and finder-like patterns
+      for (let y = 0; y < this.size; y++) {
+        let runColor = false;
+        let runX = 0;
+        let runHistory = [0, 0, 0, 0, 0, 0, 0];
+        for (let x = 0; x < this.size; x++) {
+          if (this.modules[y][x] == runColor) {
+            runX++;
+            if (runX == 5) result += QrCode.PENALTY_N1;
+            else if (runX > 5) result++;
+          } else {
+            this.finderPenaltyAddHistory(runX, runHistory);
+            if (!runColor)
+              result +=
+                this.finderPenaltyCountPatterns(runHistory) * QrCode.PENALTY_N3;
+            runColor = this.modules[y][x];
+            runX = 1;
+          }
+        }
+        result +=
+          this.finderPenaltyTerminateAndCount(runColor, runX, runHistory) *
+          QrCode.PENALTY_N3;
+      }
+      // Adjacent modules in column having same color, and finder-like patterns
+      for (let x = 0; x < this.size; x++) {
+        let runColor = false;
+        let runY = 0;
+        let runHistory = [0, 0, 0, 0, 0, 0, 0];
+        for (let y = 0; y < this.size; y++) {
+          if (this.modules[y][x] == runColor) {
+            runY++;
+            if (runY == 5) result += QrCode.PENALTY_N1;
+            else if (runY > 5) result++;
+          } else {
+            this.finderPenaltyAddHistory(runY, runHistory);
+            if (!runColor)
+              result +=
+                this.finderPenaltyCountPatterns(runHistory) * QrCode.PENALTY_N3;
+            runColor = this.modules[y][x];
+            runY = 1;
+          }
+        }
+        result +=
+          this.finderPenaltyTerminateAndCount(runColor, runY, runHistory) *
+          QrCode.PENALTY_N3;
+      }
+      // 2*2 blocks of modules having same color
+      for (let y = 0; y < this.size - 1; y++) {
+        for (let x = 0; x < this.size - 1; x++) {
+          const color = this.modules[y][x];
+          if (
+            color == this.modules[y][x + 1] &&
+            color == this.modules[y + 1][x] &&
+            color == this.modules[y + 1][x + 1]
+          )
+            result += QrCode.PENALTY_N2;
+        }
+      }
+      // Balance of dark and light modules
+      let dark = 0;
+      for (const row of this.modules)
+        dark = row.reduce((sum, color) => sum + (color ? 1 : 0), dark);
+      const total = this.size * this.size; // Note that size is odd, so dark/total != 1/2
+      // Compute the smallest integer k >= 0 such that (45-5k)% <= dark/total <= (55+5k)%
+      const k = Math.ceil(Math.abs(dark * 20 - total * 10) / total) - 1;
+      assert(0 <= k && k <= 9);
+      result += k * QrCode.PENALTY_N4;
+      assert(0 <= result && result <= 2568888); // Non-tight upper bound based on default values of PENALTY_N1, ..., N4
+      return result;
+    }
+    /*-- Private helper functions --*/
+    // Returns an ascending list of positions of alignment patterns for this version number.
+    // Each position is in the range [0,177), and are used on both the x and y axes.
+    // This could be implemented as lookup table of 40 variable-length lists of integers.
+    getAlignmentPatternPositions() {
+      if (this.version == 1) return [];
+      else {
+        const numAlign = Math.floor(this.version / 7) + 2;
+        const step =
+          this.version == 32
+            ? 26
+            : Math.ceil((this.version * 4 + 4) / (numAlign * 2 - 2)) * 2;
+        let result = [6];
+        for (let pos = this.size - 7; result.length < numAlign; pos -= step)
+          result.splice(1, 0, pos);
+        return result;
+      }
+    }
+    // Returns the number of data bits that can be stored in a QR Code of the given version number, after
+    // all function modules are excluded. This includes remainder bits, so it might not be a multiple of 8.
+    // The result is in the range [208, 29648]. This could be implemented as a 40-entry lookup table.
+    static getNumRawDataModules(ver) {
+      if (ver < QrCode.MIN_VERSION || ver > QrCode.MAX_VERSION)
+        throw new RangeError("Version number out of range");
+      let result = (16 * ver + 128) * ver + 64;
+      if (ver >= 2) {
+        const numAlign = Math.floor(ver / 7) + 2;
+        result -= (25 * numAlign - 10) * numAlign - 55;
+        if (ver >= 7) result -= 36;
+      }
+      assert(208 <= result && result <= 29648);
+      return result;
+    }
+    // Returns the number of 8-bit data (i.e. not error correction) codewords contained in any
+    // QR Code of the given version number and error correction level, with remainder bits discarded.
+    // This stateless pure function could be implemented as a (40*4)-cell lookup table.
+    static getNumDataCodewords(ver, ecl) {
+      return (
+        Math.floor(QrCode.getNumRawDataModules(ver) / 8) -
+        QrCode.ECC_CODEWORDS_PER_BLOCK[ecl.ordinal][ver] *
+          QrCode.NUM_ERROR_CORRECTION_BLOCKS[ecl.ordinal][ver]
+      );
+    }
+    // Returns a Reed-Solomon ECC generator polynomial for the given degree. This could be
+    // implemented as a lookup table over all possible parameter values, instead of as an algorithm.
+    static reedSolomonComputeDivisor(degree) {
+      if (degree < 1 || degree > 255)
+        throw new RangeError("Degree out of range");
+      // Polynomial coefficients are stored from highest to lowest power, excluding the leading term which is always 1.
+      // For example the polynomial x^3 + 255x^2 + 8x + 93 is stored as the uint8 array [255, 8, 93].
+      let result = [];
+      for (let i = 0; i < degree - 1; i++) result.push(0);
+      result.push(1); // Start off with the monomial x^0
+      // Compute the product polynomial (x - r^0) * (x - r^1) * (x - r^2) * ... * (x - r^{degree-1}),
+      // and drop the highest monomial term which is always 1x^degree.
+      // Note that r = 0x02, which is a generator element of this field GF(2^8/0x11D).
+      let root = 1;
+      for (let i = 0; i < degree; i++) {
+        // Multiply the current product by (x - r^i)
+        for (let j = 0; j < result.length; j++) {
+          result[j] = QrCode.reedSolomonMultiply(result[j], root);
+          if (j + 1 < result.length) result[j] ^= result[j + 1];
+        }
+        root = QrCode.reedSolomonMultiply(root, 0x02);
+      }
+      return result;
+    }
+    // Returns the Reed-Solomon error correction codeword for the given data and divisor polynomials.
+    static reedSolomonComputeRemainder(data, divisor) {
+      let result = divisor.map((_) => 0);
+      for (const b of data) {
+        // Polynomial division
+        const factor = b ^ result.shift();
+        result.push(0);
+        divisor.forEach(
+          (coef, i) => (result[i] ^= QrCode.reedSolomonMultiply(coef, factor))
+        );
+      }
+      return result;
+    }
+    // Returns the product of the two given field elements modulo GF(2^8/0x11D). The arguments and result
+    // are unsigned 8-bit integers. This could be implemented as a lookup table of 256*256 entries of uint8.
+    static reedSolomonMultiply(x, y) {
+      if (x >>> 8 != 0 || y >>> 8 != 0)
+        throw new RangeError("Byte out of range");
+      // Russian peasant multiplication
+      let z = 0;
+      for (let i = 7; i >= 0; i--) {
+        z = (z << 1) ^ ((z >>> 7) * 0x11d);
+        z ^= ((y >>> i) & 1) * x;
+      }
+      assert(z >>> 8 == 0);
+      return z;
+    }
+    // Can only be called immediately after a light run is added, and
+    // returns either 0, 1, or 2. A helper function for getPenaltyScore().
+    finderPenaltyCountPatterns(runHistory) {
+      const n = runHistory[1];
+      assert(n <= this.size * 3);
+      const core =
+        n > 0 &&
+        runHistory[2] == n &&
+        runHistory[3] == n * 3 &&
+        runHistory[4] == n &&
+        runHistory[5] == n;
+      return (
+        (core && runHistory[0] >= n * 4 && runHistory[6] >= n ? 1 : 0) +
+        (core && runHistory[6] >= n * 4 && runHistory[0] >= n ? 1 : 0)
+      );
+    }
+    // Must be called at the end of a line (row or column) of modules. A helper function for getPenaltyScore().
+    finderPenaltyTerminateAndCount(
+      currentRunColor,
+      currentRunLength,
+      runHistory
+    ) {
+      if (currentRunColor) {
+        // Terminate dark run
+        this.finderPenaltyAddHistory(currentRunLength, runHistory);
+        currentRunLength = 0;
+      }
+      currentRunLength += this.size; // Add light border to final run
+      this.finderPenaltyAddHistory(currentRunLength, runHistory);
+      return this.finderPenaltyCountPatterns(runHistory);
+    }
+    // Pushes the given value to the front and drops the last value. A helper function for getPenaltyScore().
+    finderPenaltyAddHistory(currentRunLength, runHistory) {
+      if (runHistory[0] == 0) currentRunLength += this.size; // Add light border to initial run
+      runHistory.pop();
+      runHistory.unshift(currentRunLength);
+    }
+  }
+  /*-- Constants and tables --*/
+  // The minimum version number supported in the QR Code Model 2 standard.
+  QrCode.MIN_VERSION = 1;
+  // The maximum version number supported in the QR Code Model 2 standard.
+  QrCode.MAX_VERSION = 40;
+  // For use in getPenaltyScore(), when evaluating which mask is best.
+  QrCode.PENALTY_N1 = 3;
+  QrCode.PENALTY_N2 = 3;
+  QrCode.PENALTY_N3 = 40;
+  QrCode.PENALTY_N4 = 10;
+  QrCode.ECC_CODEWORDS_PER_BLOCK = [
+    // Version: (note that index 0 is for padding, and is set to an illegal value)
+    //0,  1,  2,  3,  4,  5,  6,  7,  8,  9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40    Error correction level
+    [
+      -1, 7, 10, 15, 20, 26, 18, 20, 24, 30, 18, 20, 24, 26, 30, 22, 24, 28, 30,
+      28, 28, 28, 28, 30, 30, 26, 28, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30,
+      30, 30, 30, 30,
+    ],
+    [
+      -1, 10, 16, 26, 18, 24, 16, 18, 22, 22, 26, 30, 22, 22, 24, 24, 28, 28,
+      26, 26, 26, 26, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28,
+      28, 28, 28, 28, 28,
+    ],
+    [
+      -1, 13, 22, 18, 26, 18, 24, 18, 22, 20, 24, 28, 26, 24, 20, 30, 24, 28,
+      28, 26, 30, 28, 30, 30, 30, 30, 28, 30, 30, 30, 30, 30, 30, 30, 30, 30,
+      30, 30, 30, 30, 30,
+    ],
+    [
+      -1, 17, 28, 22, 16, 22, 28, 26, 26, 24, 28, 24, 28, 22, 24, 24, 30, 28,
+      28, 26, 28, 30, 24, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30,
+      30, 30, 30, 30, 30,
+    ], // High
+  ];
+  QrCode.NUM_ERROR_CORRECTION_BLOCKS = [
+    // Version: (note that index 0 is for padding, and is set to an illegal value)
+    //0, 1, 2, 3, 4, 5, 6, 7, 8, 9,10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40    Error correction level
+    [
+      -1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 4, 4, 4, 4, 4, 6, 6, 6, 6, 7, 8, 8, 9, 9,
+      10, 12, 12, 12, 13, 14, 15, 16, 17, 18, 19, 19, 20, 21, 22, 24, 25,
+    ],
+    [
+      -1, 1, 1, 1, 2, 2, 4, 4, 4, 5, 5, 5, 8, 9, 9, 10, 10, 11, 13, 14, 16, 17,
+      17, 18, 20, 21, 23, 25, 26, 28, 29, 31, 33, 35, 37, 38, 40, 43, 45, 47,
+      49,
+    ],
+    [
+      -1, 1, 1, 2, 2, 4, 4, 6, 6, 8, 8, 8, 10, 12, 16, 12, 17, 16, 18, 21, 20,
+      23, 23, 25, 27, 29, 34, 34, 35, 38, 40, 43, 45, 48, 51, 53, 56, 59, 62,
+      65, 68,
+    ],
+    [
+      -1, 1, 1, 2, 4, 4, 4, 5, 6, 8, 8, 11, 11, 16, 16, 18, 16, 19, 21, 25, 25,
+      25, 34, 30, 32, 35, 37, 40, 42, 45, 48, 51, 54, 57, 60, 63, 66, 70, 74,
+      77, 81,
+    ], // High
+  ];
+  qrcodegen.QrCode = QrCode;
+  // Appends the given number of low-order bits of the given value
+  // to the given buffer. Requires 0 <= len <= 31 and 0 <= val < 2^len.
+  function appendBits(val, len, bb) {
+    if (len < 0 || len > 31 || val >>> len != 0)
+      throw new RangeError("Value out of range");
+    for (
+      let i = len - 1;
+      i >= 0;
+      i-- // Append bit by bit
+    )
+      bb.push((val >>> i) & 1);
+  }
+  // Returns true iff the i'th bit of x is set to 1.
+  function getBit(x, i) {
+    return ((x >>> i) & 1) != 0;
+  }
+  // Throws an exception if the given condition is false.
+  function assert(cond) {
+    if (!cond) throw new Error("Assertion error");
+  }
+  /*---- Data segment class ----*/
+  /*
+   * A segment of character/binary/control data in a QR Code symbol.
+   * Instances of this class are immutable.
+   * The mid-level way to create a segment is to take the payload data
+   * and call a static factory function such as QrSegment.makeNumeric().
+   * The low-level way to create a segment is to custom-make the bit buffer
+   * and call the QrSegment() constructor with appropriate values.
+   * This segment class imposes no length restrictions, but QR Codes have restrictions.
+   * Even in the most favorable conditions, a QR Code can only hold 7089 characters of data.
+   * Any segment longer than this is meaningless for the purpose of generating QR Codes.
+   */
+  class QrSegment {
+    /*-- Constructor (low level) and fields --*/
+    // Creates a new QR Code segment with the given attributes and data.
+    // The character count (numChars) must agree with the mode and the bit buffer length,
+    // but the constraint isn't checked. The given bit buffer is cloned and stored.
+    constructor(
+      // The mode indicator of this segment.
+      mode,
+      // The length of this segment's unencoded data. Measured in characters for
+      // numeric/alphanumeric/kanji mode, bytes for byte mode, and 0 for ECI mode.
+      // Always zero or positive. Not the same as the data's bit length.
+      numChars,
+      // The data bits of this segment. Accessed through getData().
+      bitData
+    ) {
+      this.mode = mode;
+      this.numChars = numChars;
+      this.bitData = bitData;
+      if (numChars < 0) throw new RangeError("Invalid argument");
+      this.bitData = bitData.slice(); // Make defensive copy
+    }
+    /*-- Static factory functions (mid level) --*/
+    // Returns a segment representing the given binary data encoded in
+    // byte mode. All input byte arrays are acceptable. Any text string
+    // can be converted to UTF-8 bytes and encoded as a byte mode segment.
+    static makeBytes(data) {
+      let bb = [];
+      for (const b of data) appendBits(b, 8, bb);
+      return new QrSegment(QrSegment.Mode.BYTE, data.length, bb);
+    }
+    // Returns a segment representing the given string of decimal digits encoded in numeric mode.
+    static makeNumeric(digits) {
+      if (!QrSegment.isNumeric(digits))
+        throw new RangeError("String contains non-numeric characters");
+      let bb = [];
+      for (let i = 0; i < digits.length; ) {
+        // Consume up to 3 digits per iteration
+        const n = Math.min(digits.length - i, 3);
+        appendBits(parseInt(digits.substr(i, n), 10), n * 3 + 1, bb);
+        i += n;
+      }
+      return new QrSegment(QrSegment.Mode.NUMERIC, digits.length, bb);
+    }
+    // Returns a segment representing the given text string encoded in alphanumeric mode.
+    // The characters allowed are: 0 to 9, A to Z (uppercase only), space,
+    // dollar, percent, asterisk, plus, hyphen, period, slash, colon.
+    static makeAlphanumeric(text) {
+      if (!QrSegment.isAlphanumeric(text))
+        throw new RangeError(
+          "String contains unencodable characters in alphanumeric mode"
+        );
+      let bb = [];
+      let i;
+      for (i = 0; i + 2 <= text.length; i += 2) {
+        // Process groups of 2
+        let temp = QrSegment.ALPHANUMERIC_CHARSET.indexOf(text.charAt(i)) * 45;
+        temp += QrSegment.ALPHANUMERIC_CHARSET.indexOf(text.charAt(i + 1));
+        appendBits(temp, 11, bb);
+      }
+      if (i < text.length)
+        // 1 character remaining
+        appendBits(
+          QrSegment.ALPHANUMERIC_CHARSET.indexOf(text.charAt(i)),
+          6,
+          bb
+        );
+      return new QrSegment(QrSegment.Mode.ALPHANUMERIC, text.length, bb);
+    }
+    // Returns a new mutable list of zero or more segments to represent the given Unicode text string.
+    // The result may use various segment modes and switch modes to optimize the length of the bit stream.
+    static makeSegments(text) {
+      // Select the most efficient segment encoding automatically
+      if (text == "") return [];
+      else if (QrSegment.isNumeric(text)) return [QrSegment.makeNumeric(text)];
+      else if (QrSegment.isAlphanumeric(text))
+        return [QrSegment.makeAlphanumeric(text)];
+      else return [QrSegment.makeBytes(QrSegment.toUtf8ByteArray(text))];
+    }
+    // Returns a segment representing an Extended Channel Interpretation
+    // (ECI) designator with the given assignment value.
+    static makeEci(assignVal) {
+      let bb = [];
+      if (assignVal < 0)
+        throw new RangeError("ECI assignment value out of range");
+      else if (assignVal < 1 << 7) appendBits(assignVal, 8, bb);
+      else if (assignVal < 1 << 14) {
+        appendBits(0b10, 2, bb);
+        appendBits(assignVal, 14, bb);
+      } else if (assignVal < 1000000) {
+        appendBits(0b110, 3, bb);
+        appendBits(assignVal, 21, bb);
+      } else throw new RangeError("ECI assignment value out of range");
+      return new QrSegment(QrSegment.Mode.ECI, 0, bb);
+    }
+    // Tests whether the given string can be encoded as a segment in numeric mode.
+    // A string is encodable iff each character is in the range 0 to 9.
+    static isNumeric(text) {
+      return QrSegment.NUMERIC_REGEX.test(text);
+    }
+    // Tests whether the given string can be encoded as a segment in alphanumeric mode.
+    // A string is encodable iff each character is in the following set: 0 to 9, A to Z
+    // (uppercase only), space, dollar, percent, asterisk, plus, hyphen, period, slash, colon.
+    static isAlphanumeric(text) {
+      return QrSegment.ALPHANUMERIC_REGEX.test(text);
+    }
+    /*-- Methods --*/
+    // Returns a new copy of the data bits of this segment.
+    getData() {
+      return this.bitData.slice(); // Make defensive copy
+    }
+    // (Package-private) Calculates and returns the number of bits needed to encode the given segments at
+    // the given version. The result is infinity if a segment has too many characters to fit its length field.
+    static getTotalBits(segs, version) {
+      let result = 0;
+      for (const seg of segs) {
+        const ccbits = seg.mode.numCharCountBits(version);
+        if (seg.numChars >= 1 << ccbits) return Infinity; // The segment's length doesn't fit the field's bit width
+        result += 4 + ccbits + seg.bitData.length;
+      }
+      return result;
+    }
+    // Returns a new array of bytes representing the given string encoded in UTF-8.
+    static toUtf8ByteArray(str) {
+      str = encodeURI(str);
+      let result = [];
+      for (let i = 0; i < str.length; i++) {
+        if (str.charAt(i) != "%") result.push(str.charCodeAt(i));
+        else {
+          result.push(parseInt(str.substr(i + 1, 2), 16));
+          i += 2;
+        }
+      }
+      return result;
+    }
+  }
+  /*-- Constants --*/
+  // Describes precisely all strings that are encodable in numeric mode.
+  QrSegment.NUMERIC_REGEX = /^[0-9]*$/;
+  // Describes precisely all strings that are encodable in alphanumeric mode.
+  QrSegment.ALPHANUMERIC_REGEX = /^[A-Z0-9 $%*+.\/:-]*$/;
+  // The set of all legal characters in alphanumeric mode,
+  // where each character value maps to the index in the string.
+  QrSegment.ALPHANUMERIC_CHARSET =
+    "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ $%*+-./:";
+  qrcodegen.QrSegment = QrSegment;
+})(qrcodegen || (qrcodegen = {}));
+/*---- Public helper enumeration ----*/
+(function (qrcodegen) {
+  var QrCode;
+  (function (QrCode) {
     /*
-     * A QR Code symbol, which is a type of two-dimension barcode.
-     * Invented by Denso Wave and described in the ISO/IEC 18004 standard.
-     * Instances of this class represent an immutable square grid of dark and light cells.
-     * The class provides static factory functions to create a QR Code from text or binary data.
-     * The class covers the QR Code Model 2 specification, supporting all versions (sizes)
-     * from 1 to 40, all 4 error correction levels, and 4 character encoding modes.
-     *
-     * Ways to create a QR Code object:
-     * - High level: Take the payload data and call QrCode.encodeText() or QrCode.encodeBinary().
-     * - Mid level: Custom-make the list of segments and call QrCode.encodeSegments().
-     * - Low level: Custom-make the array of data codeword bytes (including
-     *   segment headers and final padding, excluding error correction codewords),
-     *   supply the appropriate version number, and call the QrCode() constructor.
-     * (Note that all ways require supplying the desired error correction level.)
+     * The error correction level in a QR Code symbol. Immutable.
      */
-    class QrCode {
-        /*-- Constructor (low level) and fields --*/
-        // Creates a new QR Code with the given version number,
-        // error correction level, data codeword bytes, and mask number.
-        // This is a low-level API that most users should not use directly.
-        // A mid-level API is the encodeSegments() function.
-        constructor(
-        // The version number of this QR Code, which is between 1 and 40 (inclusive).
-        // This determines the size of this barcode.
-        version, 
-        // The error correction level used in this QR Code.
-        errorCorrectionLevel, dataCodewords, msk) {
-            this.version = version;
-            this.errorCorrectionLevel = errorCorrectionLevel;
-            // The modules of this QR Code (false = light, true = dark).
-            // Immutable after constructor finishes. Accessed through getModule().
-            this.modules = [];
-            // Indicates function modules that are not subjected to masking. Discarded when constructor finishes.
-            this.isFunction = [];
-            // Check scalar arguments
-            if (version < QrCode.MIN_VERSION || version > QrCode.MAX_VERSION)
-                throw new RangeError("Version value out of range");
-            if (msk < -1 || msk > 7)
-                throw new RangeError("Mask value out of range");
-            this.size = version * 4 + 17;
-            // Initialize both grids to be size*size arrays of Boolean false
-            let row = [];
-            for (let i = 0; i < this.size; i++)
-                row.push(false);
-            for (let i = 0; i < this.size; i++) {
-                this.modules.push(row.slice()); // Initially all light
-                this.isFunction.push(row.slice());
-            }
-            // Compute ECC, draw modules
-            this.drawFunctionPatterns();
-            const allCodewords = this.addEccAndInterleave(dataCodewords);
-            this.drawCodewords(allCodewords);
-            // Do masking
-            if (msk == -1) { // Automatically choose best mask
-                let minPenalty = 1000000000;
-                for (let i = 0; i < 8; i++) {
-                    this.applyMask(i);
-                    this.drawFormatBits(i);
-                    const penalty = this.getPenaltyScore();
-                    if (penalty < minPenalty) {
-                        msk = i;
-                        minPenalty = penalty;
-                    }
-                    this.applyMask(i); // Undoes the mask due to XOR
-                }
-            }
-            assert(0 <= msk && msk <= 7);
-            this.mask = msk;
-            this.applyMask(msk); // Apply the final choice of mask
-            this.drawFormatBits(msk); // Overwrite old format bits
-            this.isFunction = [];
-        }
-        /*-- Static factory functions (high level) --*/
-        // Returns a QR Code representing the given Unicode text string at the given error correction level.
-        // As a conservative upper bound, this function is guaranteed to succeed for strings that have 738 or fewer
-        // Unicode code points (not UTF-16 code units) if the low error correction level is used. The smallest possible
-        // QR Code version is automatically chosen for the output. The ECC level of the result may be higher than the
-        // ecl argument if it can be done without increasing the version.
-        static encodeText(text, ecl) {
-            const segs = qrcodegen.QrSegment.makeSegments(text);
-            return QrCode.encodeSegments(segs, ecl);
-        }
-        // Returns a QR Code representing the given binary data at the given error correction level.
-        // This function always encodes using the binary segment mode, not any text mode. The maximum number of
-        // bytes allowed is 2953. The smallest possible QR Code version is automatically chosen for the output.
-        // The ECC level of the result may be higher than the ecl argument if it can be done without increasing the version.
-        static encodeBinary(data, ecl) {
-            const seg = qrcodegen.QrSegment.makeBytes(data);
-            return QrCode.encodeSegments([seg], ecl);
-        }
-        /*-- Static factory functions (mid level) --*/
-        // Returns a QR Code representing the given segments with the given encoding parameters.
-        // The smallest possible QR Code version within the given range is automatically
-        // chosen for the output. Iff boostEcl is true, then the ECC level of the result
-        // may be higher than the ecl argument if it can be done without increasing the
-        // version. The mask number is either between 0 to 7 (inclusive) to force that
-        // mask, or -1 to automatically choose an appropriate mask (which may be slow).
-        // This function allows the user to create a custom sequence of segments that switches
-        // between modes (such as alphanumeric and byte) to encode text in less space.
-        // This is a mid-level API; the high-level API is encodeText() and encodeBinary().
-        static encodeSegments(segs, ecl, minVersion = 1, maxVersion = 40, mask = -1, boostEcl = true) {
-            if (!(QrCode.MIN_VERSION <= minVersion && minVersion <= maxVersion && maxVersion <= QrCode.MAX_VERSION)
-                || mask < -1 || mask > 7)
-                throw new RangeError("Invalid value");
-            // Find the minimal version number to use
-            let version;
-            let dataUsedBits;
-            for (version = minVersion;; version++) {
-                const dataCapacityBits = QrCode.getNumDataCodewords(version, ecl) * 8; // Number of data bits available
-                const usedBits = QrSegment.getTotalBits(segs, version);
-                if (usedBits <= dataCapacityBits) {
-                    dataUsedBits = usedBits;
-                    break; // This version number is found to be suitable
-                }
-                if (version >= maxVersion) // All versions in the range could not fit the given data
-                    throw new RangeError("Data too long");
-            }
-            // Increase the error correction level while the data still fits in the current version number
-            for (const newEcl of [QrCode.Ecc.MEDIUM, QrCode.Ecc.QUARTILE, QrCode.Ecc.HIGH]) { // From low to high
-                if (boostEcl && dataUsedBits <= QrCode.getNumDataCodewords(version, newEcl) * 8)
-                    ecl = newEcl;
-            }
-            // Concatenate all segments to create the data bit string
-            let bb = [];
-            for (const seg of segs) {
-                appendBits(seg.mode.modeBits, 4, bb);
-                appendBits(seg.numChars, seg.mode.numCharCountBits(version), bb);
-                for (const b of seg.getData())
-                    bb.push(b);
-            }
-            assert(bb.length == dataUsedBits);
-            // Add terminator and pad up to a byte if applicable
-            const dataCapacityBits = QrCode.getNumDataCodewords(version, ecl) * 8;
-            assert(bb.length <= dataCapacityBits);
-            appendBits(0, Math.min(4, dataCapacityBits - bb.length), bb);
-            appendBits(0, (8 - bb.length % 8) % 8, bb);
-            assert(bb.length % 8 == 0);
-            // Pad with alternating bytes until data capacity is reached
-            for (let padByte = 0xEC; bb.length < dataCapacityBits; padByte ^= 0xEC ^ 0x11)
-                appendBits(padByte, 8, bb);
-            // Pack bits into bytes in big endian
-            let dataCodewords = [];
-            while (dataCodewords.length * 8 < bb.length)
-                dataCodewords.push(0);
-            bb.forEach((b, i) => dataCodewords[i >>> 3] |= b << (7 - (i & 7)));
-            // Create the QR Code object
-            return new QrCode(version, ecl, dataCodewords, mask);
-        }
-        /*-- Accessor methods --*/
-        // Returns the color of the module (pixel) at the given coordinates, which is false
-        // for light or true for dark. The top left corner has the coordinates (x=0, y=0).
-        // If the given coordinates are out of bounds, then false (light) is returned.
-        getModule(x, y) {
-            return 0 <= x && x < this.size && 0 <= y && y < this.size && this.modules[y][x];
-        }
-        /*-- Private helper methods for constructor: Drawing function modules --*/
-        // Reads this object's version field, and draws and marks all function modules.
-        drawFunctionPatterns() {
-            // Draw horizontal and vertical timing patterns
-            for (let i = 0; i < this.size; i++) {
-                this.setFunctionModule(6, i, i % 2 == 0);
-                this.setFunctionModule(i, 6, i % 2 == 0);
-            }
-            // Draw 3 finder patterns (all corners except bottom right; overwrites some timing modules)
-            this.drawFinderPattern(3, 3);
-            this.drawFinderPattern(this.size - 4, 3);
-            this.drawFinderPattern(3, this.size - 4);
-            // Draw numerous alignment patterns
-            const alignPatPos = this.getAlignmentPatternPositions();
-            const numAlign = alignPatPos.length;
-            for (let i = 0; i < numAlign; i++) {
-                for (let j = 0; j < numAlign; j++) {
-                    // Don't draw on the three finder corners
-                    if (!(i == 0 && j == 0 || i == 0 && j == numAlign - 1 || i == numAlign - 1 && j == 0))
-                        this.drawAlignmentPattern(alignPatPos[i], alignPatPos[j]);
-                }
-            }
-            // Draw configuration data
-            this.drawFormatBits(0); // Dummy mask value; overwritten later in the constructor
-            this.drawVersion();
-        }
-        // Draws two copies of the format bits (with its own error correction code)
-        // based on the given mask and this object's error correction level field.
-        drawFormatBits(mask) {
-            // Calculate error correction code and pack bits
-            const data = this.errorCorrectionLevel.formatBits << 3 | mask; // errCorrLvl is uint2, mask is uint3
-            let rem = data;
-            for (let i = 0; i < 10; i++)
-                rem = (rem << 1) ^ ((rem >>> 9) * 0x537);
-            const bits = (data << 10 | rem) ^ 0x5412; // uint15
-            assert(bits >>> 15 == 0);
-            // Draw first copy
-            for (let i = 0; i <= 5; i++)
-                this.setFunctionModule(8, i, getBit(bits, i));
-            this.setFunctionModule(8, 7, getBit(bits, 6));
-            this.setFunctionModule(8, 8, getBit(bits, 7));
-            this.setFunctionModule(7, 8, getBit(bits, 8));
-            for (let i = 9; i < 15; i++)
-                this.setFunctionModule(14 - i, 8, getBit(bits, i));
-            // Draw second copy
-            for (let i = 0; i < 8; i++)
-                this.setFunctionModule(this.size - 1 - i, 8, getBit(bits, i));
-            for (let i = 8; i < 15; i++)
-                this.setFunctionModule(8, this.size - 15 + i, getBit(bits, i));
-            this.setFunctionModule(8, this.size - 8, true); // Always dark
-        }
-        // Draws two copies of the version bits (with its own error correction code),
-        // based on this object's version field, iff 7 <= version <= 40.
-        drawVersion() {
-            if (this.version < 7)
-                return;
-            // Calculate error correction code and pack bits
-            let rem = this.version; // version is uint6, in the range [7, 40]
-            for (let i = 0; i < 12; i++)
-                rem = (rem << 1) ^ ((rem >>> 11) * 0x1F25);
-            const bits = this.version << 12 | rem; // uint18
-            assert(bits >>> 18 == 0);
-            // Draw two copies
-            for (let i = 0; i < 18; i++) {
-                const color = getBit(bits, i);
-                const a = this.size - 11 + i % 3;
-                const b = Math.floor(i / 3);
-                this.setFunctionModule(a, b, color);
-                this.setFunctionModule(b, a, color);
-            }
-        }
-        // Draws a 9*9 finder pattern including the border separator,
-        // with the center module at (x, y). Modules can be out of bounds.
-        drawFinderPattern(x, y) {
-            for (let dy = -4; dy <= 4; dy++) {
-                for (let dx = -4; dx <= 4; dx++) {
-                    const dist = Math.max(Math.abs(dx), Math.abs(dy)); // Chebyshev/infinity norm
-                    const xx = x + dx;
-                    const yy = y + dy;
-                    if (0 <= xx && xx < this.size && 0 <= yy && yy < this.size)
-                        this.setFunctionModule(xx, yy, dist != 2 && dist != 4);
-                }
-            }
-        }
-        // Draws a 5*5 alignment pattern, with the center module
-        // at (x, y). All modules must be in bounds.
-        drawAlignmentPattern(x, y) {
-            for (let dy = -2; dy <= 2; dy++) {
-                for (let dx = -2; dx <= 2; dx++)
-                    this.setFunctionModule(x + dx, y + dy, Math.max(Math.abs(dx), Math.abs(dy)) != 1);
-            }
-        }
-        // Sets the color of a module and marks it as a function module.
-        // Only used by the constructor. Coordinates must be in bounds.
-        setFunctionModule(x, y, isDark) {
-            this.modules[y][x] = isDark;
-            this.isFunction[y][x] = true;
-        }
-        /*-- Private helper methods for constructor: Codewords and masking --*/
-        // Returns a new byte string representing the given data with the appropriate error correction
-        // codewords appended to it, based on this object's version and error correction level.
-        addEccAndInterleave(data) {
-            const ver = this.version;
-            const ecl = this.errorCorrectionLevel;
-            if (data.length != QrCode.getNumDataCodewords(ver, ecl))
-                throw new RangeError("Invalid argument");
-            // Calculate parameter numbers
-            const numBlocks = QrCode.NUM_ERROR_CORRECTION_BLOCKS[ecl.ordinal][ver];
-            const blockEccLen = QrCode.ECC_CODEWORDS_PER_BLOCK[ecl.ordinal][ver];
-            const rawCodewords = Math.floor(QrCode.getNumRawDataModules(ver) / 8);
-            const numShortBlocks = numBlocks - rawCodewords % numBlocks;
-            const shortBlockLen = Math.floor(rawCodewords / numBlocks);
-            // Split data into blocks and append ECC to each block
-            let blocks = [];
-            const rsDiv = QrCode.reedSolomonComputeDivisor(blockEccLen);
-            for (let i = 0, k = 0; i < numBlocks; i++) {
-                let dat = data.slice(k, k + shortBlockLen - blockEccLen + (i < numShortBlocks ? 0 : 1));
-                k += dat.length;
-                const ecc = QrCode.reedSolomonComputeRemainder(dat, rsDiv);
-                if (i < numShortBlocks)
-                    dat.push(0);
-                blocks.push(dat.concat(ecc));
-            }
-            // Interleave (not concatenate) the bytes from every block into a single sequence
-            let result = [];
-            for (let i = 0; i < blocks[0].length; i++) {
-                blocks.forEach((block, j) => {
-                    // Skip the padding byte in short blocks
-                    if (i != shortBlockLen - blockEccLen || j >= numShortBlocks)
-                        result.push(block[i]);
-                });
-            }
-            assert(result.length == rawCodewords);
-            return result;
-        }
-        // Draws the given sequence of 8-bit codewords (data and error correction) onto the entire
-        // data area of this QR Code. Function modules need to be marked off before this is called.
-        drawCodewords(data) {
-            if (data.length != Math.floor(QrCode.getNumRawDataModules(this.version) / 8))
-                throw new RangeError("Invalid argument");
-            let i = 0; // Bit index into the data
-            // Do the funny zigzag scan
-            for (let right = this.size - 1; right >= 1; right -= 2) { // Index of right column in each column pair
-                if (right == 6)
-                    right = 5;
-                for (let vert = 0; vert < this.size; vert++) { // Vertical counter
-                    for (let j = 0; j < 2; j++) {
-                        const x = right - j; // Actual x coordinate
-                        const upward = ((right + 1) & 2) == 0;
-                        const y = upward ? this.size - 1 - vert : vert; // Actual y coordinate
-                        if (!this.isFunction[y][x] && i < data.length * 8) {
-                            this.modules[y][x] = getBit(data[i >>> 3], 7 - (i & 7));
-                            i++;
-                        }
-                        // If this QR Code has any remainder bits (0 to 7), they were assigned as
-                        // 0/false/light by the constructor and are left unchanged by this method
-                    }
-                }
-            }
-            assert(i == data.length * 8);
-        }
-        // XORs the codeword modules in this QR Code with the given mask pattern.
-        // The function modules must be marked and the codeword bits must be drawn
-        // before masking. Due to the arithmetic of XOR, calling applyMask() with
-        // the same mask value a second time will undo the mask. A final well-formed
-        // QR Code needs exactly one (not zero, two, etc.) mask applied.
-        applyMask(mask) {
-            if (mask < 0 || mask > 7)
-                throw new RangeError("Mask value out of range");
-            for (let y = 0; y < this.size; y++) {
-                for (let x = 0; x < this.size; x++) {
-                    let invert;
-                    switch (mask) {
-                        case 0:
-                            invert = (x + y) % 2 == 0;
-                            break;
-                        case 1:
-                            invert = y % 2 == 0;
-                            break;
-                        case 2:
-                            invert = x % 3 == 0;
-                            break;
-                        case 3:
-                            invert = (x + y) % 3 == 0;
-                            break;
-                        case 4:
-                            invert = (Math.floor(x / 3) + Math.floor(y / 2)) % 2 == 0;
-                            break;
-                        case 5:
-                            invert = x * y % 2 + x * y % 3 == 0;
-                            break;
-                        case 6:
-                            invert = (x * y % 2 + x * y % 3) % 2 == 0;
-                            break;
-                        case 7:
-                            invert = ((x + y) % 2 + x * y % 3) % 2 == 0;
-                            break;
-                        default: throw new Error("Unreachable");
-                    }
-                    if (!this.isFunction[y][x] && invert)
-                        this.modules[y][x] = !this.modules[y][x];
-                }
-            }
-        }
-        // Calculates and returns the penalty score based on state of this QR Code's current modules.
-        // This is used by the automatic mask choice algorithm to find the mask pattern that yields the lowest score.
-        getPenaltyScore() {
-            let result = 0;
-            // Adjacent modules in row having same color, and finder-like patterns
-            for (let y = 0; y < this.size; y++) {
-                let runColor = false;
-                let runX = 0;
-                let runHistory = [0, 0, 0, 0, 0, 0, 0];
-                for (let x = 0; x < this.size; x++) {
-                    if (this.modules[y][x] == runColor) {
-                        runX++;
-                        if (runX == 5)
-                            result += QrCode.PENALTY_N1;
-                        else if (runX > 5)
-                            result++;
-                    }
-                    else {
-                        this.finderPenaltyAddHistory(runX, runHistory);
-                        if (!runColor)
-                            result += this.finderPenaltyCountPatterns(runHistory) * QrCode.PENALTY_N3;
-                        runColor = this.modules[y][x];
-                        runX = 1;
-                    }
-                }
-                result += this.finderPenaltyTerminateAndCount(runColor, runX, runHistory) * QrCode.PENALTY_N3;
-            }
-            // Adjacent modules in column having same color, and finder-like patterns
-            for (let x = 0; x < this.size; x++) {
-                let runColor = false;
-                let runY = 0;
-                let runHistory = [0, 0, 0, 0, 0, 0, 0];
-                for (let y = 0; y < this.size; y++) {
-                    if (this.modules[y][x] == runColor) {
-                        runY++;
-                        if (runY == 5)
-                            result += QrCode.PENALTY_N1;
-                        else if (runY > 5)
-                            result++;
-                    }
-                    else {
-                        this.finderPenaltyAddHistory(runY, runHistory);
-                        if (!runColor)
-                            result += this.finderPenaltyCountPatterns(runHistory) * QrCode.PENALTY_N3;
-                        runColor = this.modules[y][x];
-                        runY = 1;
-                    }
-                }
-                result += this.finderPenaltyTerminateAndCount(runColor, runY, runHistory) * QrCode.PENALTY_N3;
-            }
-            // 2*2 blocks of modules having same color
-            for (let y = 0; y < this.size - 1; y++) {
-                for (let x = 0; x < this.size - 1; x++) {
-                    const color = this.modules[y][x];
-                    if (color == this.modules[y][x + 1] &&
-                        color == this.modules[y + 1][x] &&
-                        color == this.modules[y + 1][x + 1])
-                        result += QrCode.PENALTY_N2;
-                }
-            }
-            // Balance of dark and light modules
-            let dark = 0;
-            for (const row of this.modules)
-                dark = row.reduce((sum, color) => sum + (color ? 1 : 0), dark);
-            const total = this.size * this.size; // Note that size is odd, so dark/total != 1/2
-            // Compute the smallest integer k >= 0 such that (45-5k)% <= dark/total <= (55+5k)%
-            const k = Math.ceil(Math.abs(dark * 20 - total * 10) / total) - 1;
-            assert(0 <= k && k <= 9);
-            result += k * QrCode.PENALTY_N4;
-            assert(0 <= result && result <= 2568888); // Non-tight upper bound based on default values of PENALTY_N1, ..., N4
-            return result;
-        }
-        /*-- Private helper functions --*/
-        // Returns an ascending list of positions of alignment patterns for this version number.
-        // Each position is in the range [0,177), and are used on both the x and y axes.
-        // This could be implemented as lookup table of 40 variable-length lists of integers.
-        getAlignmentPatternPositions() {
-            if (this.version == 1)
-                return [];
-            else {
-                const numAlign = Math.floor(this.version / 7) + 2;
-                const step = (this.version == 32) ? 26 :
-                    Math.ceil((this.version * 4 + 4) / (numAlign * 2 - 2)) * 2;
-                let result = [6];
-                for (let pos = this.size - 7; result.length < numAlign; pos -= step)
-                    result.splice(1, 0, pos);
-                return result;
-            }
-        }
-        // Returns the number of data bits that can be stored in a QR Code of the given version number, after
-        // all function modules are excluded. This includes remainder bits, so it might not be a multiple of 8.
-        // The result is in the range [208, 29648]. This could be implemented as a 40-entry lookup table.
-        static getNumRawDataModules(ver) {
-            if (ver < QrCode.MIN_VERSION || ver > QrCode.MAX_VERSION)
-                throw new RangeError("Version number out of range");
-            let result = (16 * ver + 128) * ver + 64;
-            if (ver >= 2) {
-                const numAlign = Math.floor(ver / 7) + 2;
-                result -= (25 * numAlign - 10) * numAlign - 55;
-                if (ver >= 7)
-                    result -= 36;
-            }
-            assert(208 <= result && result <= 29648);
-            return result;
-        }
-        // Returns the number of 8-bit data (i.e. not error correction) codewords contained in any
-        // QR Code of the given version number and error correction level, with remainder bits discarded.
-        // This stateless pure function could be implemented as a (40*4)-cell lookup table.
-        static getNumDataCodewords(ver, ecl) {
-            return Math.floor(QrCode.getNumRawDataModules(ver) / 8) -
-                QrCode.ECC_CODEWORDS_PER_BLOCK[ecl.ordinal][ver] *
-                    QrCode.NUM_ERROR_CORRECTION_BLOCKS[ecl.ordinal][ver];
-        }
-        // Returns a Reed-Solomon ECC generator polynomial for the given degree. This could be
-        // implemented as a lookup table over all possible parameter values, instead of as an algorithm.
-        static reedSolomonComputeDivisor(degree) {
-            if (degree < 1 || degree > 255)
-                throw new RangeError("Degree out of range");
-            // Polynomial coefficients are stored from highest to lowest power, excluding the leading term which is always 1.
-            // For example the polynomial x^3 + 255x^2 + 8x + 93 is stored as the uint8 array [255, 8, 93].
-            let result = [];
-            for (let i = 0; i < degree - 1; i++)
-                result.push(0);
-            result.push(1); // Start off with the monomial x^0
-            // Compute the product polynomial (x - r^0) * (x - r^1) * (x - r^2) * ... * (x - r^{degree-1}),
-            // and drop the highest monomial term which is always 1x^degree.
-            // Note that r = 0x02, which is a generator element of this field GF(2^8/0x11D).
-            let root = 1;
-            for (let i = 0; i < degree; i++) {
-                // Multiply the current product by (x - r^i)
-                for (let j = 0; j < result.length; j++) {
-                    result[j] = QrCode.reedSolomonMultiply(result[j], root);
-                    if (j + 1 < result.length)
-                        result[j] ^= result[j + 1];
-                }
-                root = QrCode.reedSolomonMultiply(root, 0x02);
-            }
-            return result;
-        }
-        // Returns the Reed-Solomon error correction codeword for the given data and divisor polynomials.
-        static reedSolomonComputeRemainder(data, divisor) {
-            let result = divisor.map(_ => 0);
-            for (const b of data) { // Polynomial division
-                const factor = b ^ result.shift();
-                result.push(0);
-                divisor.forEach((coef, i) => result[i] ^= QrCode.reedSolomonMultiply(coef, factor));
-            }
-            return result;
-        }
-        // Returns the product of the two given field elements modulo GF(2^8/0x11D). The arguments and result
-        // are unsigned 8-bit integers. This could be implemented as a lookup table of 256*256 entries of uint8.
-        static reedSolomonMultiply(x, y) {
-            if (x >>> 8 != 0 || y >>> 8 != 0)
-                throw new RangeError("Byte out of range");
-            // Russian peasant multiplication
-            let z = 0;
-            for (let i = 7; i >= 0; i--) {
-                z = (z << 1) ^ ((z >>> 7) * 0x11D);
-                z ^= ((y >>> i) & 1) * x;
-            }
-            assert(z >>> 8 == 0);
-            return z;
-        }
-        // Can only be called immediately after a light run is added, and
-        // returns either 0, 1, or 2. A helper function for getPenaltyScore().
-        finderPenaltyCountPatterns(runHistory) {
-            const n = runHistory[1];
-            assert(n <= this.size * 3);
-            const core = n > 0 && runHistory[2] == n && runHistory[3] == n * 3 && runHistory[4] == n && runHistory[5] == n;
-            return (core && runHistory[0] >= n * 4 && runHistory[6] >= n ? 1 : 0)
-                + (core && runHistory[6] >= n * 4 && runHistory[0] >= n ? 1 : 0);
-        }
-        // Must be called at the end of a line (row or column) of modules. A helper function for getPenaltyScore().
-        finderPenaltyTerminateAndCount(currentRunColor, currentRunLength, runHistory) {
-            if (currentRunColor) { // Terminate dark run
-                this.finderPenaltyAddHistory(currentRunLength, runHistory);
-                currentRunLength = 0;
-            }
-            currentRunLength += this.size; // Add light border to final run
-            this.finderPenaltyAddHistory(currentRunLength, runHistory);
-            return this.finderPenaltyCountPatterns(runHistory);
-        }
-        // Pushes the given value to the front and drops the last value. A helper function for getPenaltyScore().
-        finderPenaltyAddHistory(currentRunLength, runHistory) {
-            if (runHistory[0] == 0)
-                currentRunLength += this.size; // Add light border to initial run
-            runHistory.pop();
-            runHistory.unshift(currentRunLength);
-        }
-    }
-    /*-- Constants and tables --*/
-    // The minimum version number supported in the QR Code Model 2 standard.
-    QrCode.MIN_VERSION = 1;
-    // The maximum version number supported in the QR Code Model 2 standard.
-    QrCode.MAX_VERSION = 40;
-    // For use in getPenaltyScore(), when evaluating which mask is best.
-    QrCode.PENALTY_N1 = 3;
-    QrCode.PENALTY_N2 = 3;
-    QrCode.PENALTY_N3 = 40;
-    QrCode.PENALTY_N4 = 10;
-    QrCode.ECC_CODEWORDS_PER_BLOCK = [
-        // Version: (note that index 0 is for padding, and is set to an illegal value)
-        //0,  1,  2,  3,  4,  5,  6,  7,  8,  9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40    Error correction level
-        [-1, 7, 10, 15, 20, 26, 18, 20, 24, 30, 18, 20, 24, 26, 30, 22, 24, 28, 30, 28, 28, 28, 28, 30, 30, 26, 28, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30],
-        [-1, 10, 16, 26, 18, 24, 16, 18, 22, 22, 26, 30, 22, 22, 24, 24, 28, 28, 26, 26, 26, 26, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28],
-        [-1, 13, 22, 18, 26, 18, 24, 18, 22, 20, 24, 28, 26, 24, 20, 30, 24, 28, 28, 26, 30, 28, 30, 30, 30, 30, 28, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30],
-        [-1, 17, 28, 22, 16, 22, 28, 26, 26, 24, 28, 24, 28, 22, 24, 24, 30, 28, 28, 26, 28, 30, 24, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30], // High
-    ];
-    QrCode.NUM_ERROR_CORRECTION_BLOCKS = [
-        // Version: (note that index 0 is for padding, and is set to an illegal value)
-        //0, 1, 2, 3, 4, 5, 6, 7, 8, 9,10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40    Error correction level
-        [-1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 4, 4, 4, 4, 4, 6, 6, 6, 6, 7, 8, 8, 9, 9, 10, 12, 12, 12, 13, 14, 15, 16, 17, 18, 19, 19, 20, 21, 22, 24, 25],
-        [-1, 1, 1, 1, 2, 2, 4, 4, 4, 5, 5, 5, 8, 9, 9, 10, 10, 11, 13, 14, 16, 17, 17, 18, 20, 21, 23, 25, 26, 28, 29, 31, 33, 35, 37, 38, 40, 43, 45, 47, 49],
-        [-1, 1, 1, 2, 2, 4, 4, 6, 6, 8, 8, 8, 10, 12, 16, 12, 17, 16, 18, 21, 20, 23, 23, 25, 27, 29, 34, 34, 35, 38, 40, 43, 45, 48, 51, 53, 56, 59, 62, 65, 68],
-        [-1, 1, 1, 2, 4, 4, 4, 5, 6, 8, 8, 11, 11, 16, 16, 18, 16, 19, 21, 25, 25, 25, 34, 30, 32, 35, 37, 40, 42, 45, 48, 51, 54, 57, 60, 63, 66, 70, 74, 77, 81], // High
-    ];
-    qrcodegen.QrCode = QrCode;
-    // Appends the given number of low-order bits of the given value
-    // to the given buffer. Requires 0 <= len <= 31 and 0 <= val < 2^len.
-    function appendBits(val, len, bb) {
-        if (len < 0 || len > 31 || val >>> len != 0)
-            throw new RangeError("Value out of range");
-        for (let i = len - 1; i >= 0; i--) // Append bit by bit
-            bb.push((val >>> i) & 1);
-    }
-    // Returns true iff the i'th bit of x is set to 1.
-    function getBit(x, i) {
-        return ((x >>> i) & 1) != 0;
-    }
-    // Throws an exception if the given condition is false.
-    function assert(cond) {
-        if (!cond)
-            throw new Error("Assertion error");
-    }
-    /*---- Data segment class ----*/
-    /*
-     * A segment of character/binary/control data in a QR Code symbol.
-     * Instances of this class are immutable.
-     * The mid-level way to create a segment is to take the payload data
-     * and call a static factory function such as QrSegment.makeNumeric().
-     * The low-level way to create a segment is to custom-make the bit buffer
-     * and call the QrSegment() constructor with appropriate values.
-     * This segment class imposes no length restrictions, but QR Codes have restrictions.
-     * Even in the most favorable conditions, a QR Code can only hold 7089 characters of data.
-     * Any segment longer than this is meaningless for the purpose of generating QR Codes.
-     */
-    class QrSegment {
-        /*-- Constructor (low level) and fields --*/
-        // Creates a new QR Code segment with the given attributes and data.
-        // The character count (numChars) must agree with the mode and the bit buffer length,
-        // but the constraint isn't checked. The given bit buffer is cloned and stored.
-        constructor(
-        // The mode indicator of this segment.
-        mode, 
-        // The length of this segment's unencoded data. Measured in characters for
-        // numeric/alphanumeric/kanji mode, bytes for byte mode, and 0 for ECI mode.
-        // Always zero or positive. Not the same as the data's bit length.
-        numChars, 
-        // The data bits of this segment. Accessed through getData().
-        bitData) {
-            this.mode = mode;
-            this.numChars = numChars;
-            this.bitData = bitData;
-            if (numChars < 0)
-                throw new RangeError("Invalid argument");
-            this.bitData = bitData.slice(); // Make defensive copy
-        }
-        /*-- Static factory functions (mid level) --*/
-        // Returns a segment representing the given binary data encoded in
-        // byte mode. All input byte arrays are acceptable. Any text string
-        // can be converted to UTF-8 bytes and encoded as a byte mode segment.
-        static makeBytes(data) {
-            let bb = [];
-            for (const b of data)
-                appendBits(b, 8, bb);
-            return new QrSegment(QrSegment.Mode.BYTE, data.length, bb);
-        }
-        // Returns a segment representing the given string of decimal digits encoded in numeric mode.
-        static makeNumeric(digits) {
-            if (!QrSegment.isNumeric(digits))
-                throw new RangeError("String contains non-numeric characters");
-            let bb = [];
-            for (let i = 0; i < digits.length;) { // Consume up to 3 digits per iteration
-                const n = Math.min(digits.length - i, 3);
-                appendBits(parseInt(digits.substr(i, n), 10), n * 3 + 1, bb);
-                i += n;
-            }
-            return new QrSegment(QrSegment.Mode.NUMERIC, digits.length, bb);
-        }
-        // Returns a segment representing the given text string encoded in alphanumeric mode.
-        // The characters allowed are: 0 to 9, A to Z (uppercase only), space,
-        // dollar, percent, asterisk, plus, hyphen, period, slash, colon.
-        static makeAlphanumeric(text) {
-            if (!QrSegment.isAlphanumeric(text))
-                throw new RangeError("String contains unencodable characters in alphanumeric mode");
-            let bb = [];
-            let i;
-            for (i = 0; i + 2 <= text.length; i += 2) { // Process groups of 2
-                let temp = QrSegment.ALPHANUMERIC_CHARSET.indexOf(text.charAt(i)) * 45;
-                temp += QrSegment.ALPHANUMERIC_CHARSET.indexOf(text.charAt(i + 1));
-                appendBits(temp, 11, bb);
-            }
-            if (i < text.length) // 1 character remaining
-                appendBits(QrSegment.ALPHANUMERIC_CHARSET.indexOf(text.charAt(i)), 6, bb);
-            return new QrSegment(QrSegment.Mode.ALPHANUMERIC, text.length, bb);
-        }
-        // Returns a new mutable list of zero or more segments to represent the given Unicode text string.
-        // The result may use various segment modes and switch modes to optimize the length of the bit stream.
-        static makeSegments(text) {
-            // Select the most efficient segment encoding automatically
-            if (text == "")
-                return [];
-            else if (QrSegment.isNumeric(text))
-                return [QrSegment.makeNumeric(text)];
-            else if (QrSegment.isAlphanumeric(text))
-                return [QrSegment.makeAlphanumeric(text)];
-            else
-                return [QrSegment.makeBytes(QrSegment.toUtf8ByteArray(text))];
-        }
-        // Returns a segment representing an Extended Channel Interpretation
-        // (ECI) designator with the given assignment value.
-        static makeEci(assignVal) {
-            let bb = [];
-            if (assignVal < 0)
-                throw new RangeError("ECI assignment value out of range");
-            else if (assignVal < (1 << 7))
-                appendBits(assignVal, 8, bb);
-            else if (assignVal < (1 << 14)) {
-                appendBits(0b10, 2, bb);
-                appendBits(assignVal, 14, bb);
-            }
-            else if (assignVal < 1000000) {
-                appendBits(0b110, 3, bb);
-                appendBits(assignVal, 21, bb);
-            }
-            else
-                throw new RangeError("ECI assignment value out of range");
-            return new QrSegment(QrSegment.Mode.ECI, 0, bb);
-        }
-        // Tests whether the given string can be encoded as a segment in numeric mode.
-        // A string is encodable iff each character is in the range 0 to 9.
-        static isNumeric(text) {
-            return QrSegment.NUMERIC_REGEX.test(text);
-        }
-        // Tests whether the given string can be encoded as a segment in alphanumeric mode.
-        // A string is encodable iff each character is in the following set: 0 to 9, A to Z
-        // (uppercase only), space, dollar, percent, asterisk, plus, hyphen, period, slash, colon.
-        static isAlphanumeric(text) {
-            return QrSegment.ALPHANUMERIC_REGEX.test(text);
-        }
-        /*-- Methods --*/
-        // Returns a new copy of the data bits of this segment.
-        getData() {
-            return this.bitData.slice(); // Make defensive copy
-        }
-        // (Package-private) Calculates and returns the number of bits needed to encode the given segments at
-        // the given version. The result is infinity if a segment has too many characters to fit its length field.
-        static getTotalBits(segs, version) {
-            let result = 0;
-            for (const seg of segs) {
-                const ccbits = seg.mode.numCharCountBits(version);
-                if (seg.numChars >= (1 << ccbits))
-                    return Infinity; // The segment's length doesn't fit the field's bit width
-                result += 4 + ccbits + seg.bitData.length;
-            }
-            return result;
-        }
-        // Returns a new array of bytes representing the given string encoded in UTF-8.
-        static toUtf8ByteArray(str) {
-            str = encodeURI(str);
-            let result = [];
-            for (let i = 0; i < str.length; i++) {
-                if (str.charAt(i) != "%")
-                    result.push(str.charCodeAt(i));
-                else {
-                    result.push(parseInt(str.substr(i + 1, 2), 16));
-                    i += 2;
-                }
-            }
-            return result;
-        }
+    class Ecc {
+      /*-- Constructor and fields --*/
+      constructor(
+        // In the range 0 to 3 (unsigned 2-bit integer).
+        ordinal,
+        // (Package-private) In the range 0 to 3 (unsigned 2-bit integer).
+        formatBits
+      ) {
+        this.ordinal = ordinal;
+        this.formatBits = formatBits;
+      }
     }
     /*-- Constants --*/
-    // Describes precisely all strings that are encodable in numeric mode.
-    QrSegment.NUMERIC_REGEX = /^[0-9]*$/;
-    // Describes precisely all strings that are encodable in alphanumeric mode.
-    QrSegment.ALPHANUMERIC_REGEX = /^[A-Z0-9 $%*+.\/:-]*$/;
-    // The set of all legal characters in alphanumeric mode,
-    // where each character value maps to the index in the string.
-    QrSegment.ALPHANUMERIC_CHARSET = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ $%*+-./:";
-    qrcodegen.QrSegment = QrSegment;
+    Ecc.LOW = new Ecc(0, 1); // The QR Code can tolerate about  7% erroneous codewords
+    Ecc.MEDIUM = new Ecc(1, 0); // The QR Code can tolerate about 15% erroneous codewords
+    Ecc.QUARTILE = new Ecc(2, 3); // The QR Code can tolerate about 25% erroneous codewords
+    Ecc.HIGH = new Ecc(3, 2); // The QR Code can tolerate about 30% erroneous codewords
+    QrCode.Ecc = Ecc;
+  })((QrCode = qrcodegen.QrCode || (qrcodegen.QrCode = {})));
 })(qrcodegen || (qrcodegen = {}));
 /*---- Public helper enumeration ----*/
 (function (qrcodegen) {
-    var QrCode;
-    (function (QrCode) {
-        /*
-         * The error correction level in a QR Code symbol. Immutable.
-         */
-        class Ecc {
-            /*-- Constructor and fields --*/
-            constructor(
-            // In the range 0 to 3 (unsigned 2-bit integer).
-            ordinal, 
-            // (Package-private) In the range 0 to 3 (unsigned 2-bit integer).
-            formatBits) {
-                this.ordinal = ordinal;
-                this.formatBits = formatBits;
-            }
-        }
-        /*-- Constants --*/
-        Ecc.LOW = new Ecc(0, 1); // The QR Code can tolerate about  7% erroneous codewords
-        Ecc.MEDIUM = new Ecc(1, 0); // The QR Code can tolerate about 15% erroneous codewords
-        Ecc.QUARTILE = new Ecc(2, 3); // The QR Code can tolerate about 25% erroneous codewords
-        Ecc.HIGH = new Ecc(3, 2); // The QR Code can tolerate about 30% erroneous codewords
-        QrCode.Ecc = Ecc;
-    })(QrCode = qrcodegen.QrCode || (qrcodegen.QrCode = {}));
-})(qrcodegen || (qrcodegen = {}));
-/*---- Public helper enumeration ----*/
-(function (qrcodegen) {
-    var QrSegment;
-    (function (QrSegment) {
-        /*
-         * Describes how a segment's data bits are interpreted. Immutable.
-         */
-        class Mode {
-            /*-- Constructor and fields --*/
-            constructor(
-            // The mode indicator bits, which is a uint4 value (range 0 to 15).
-            modeBits, 
-            // Number of character count bits for three different version ranges.
-            numBitsCharCount) {
-                this.modeBits = modeBits;
-                this.numBitsCharCount = numBitsCharCount;
-            }
-            /*-- Method --*/
-            // (Package-private) Returns the bit width of the character count field for a segment in
-            // this mode in a QR Code at the given version number. The result is in the range [0, 16].
-            numCharCountBits(ver) {
-                return this.numBitsCharCount[Math.floor((ver + 7) / 17)];
-            }
-        }
-        /*-- Constants --*/
-        Mode.NUMERIC = new Mode(0x1, [10, 12, 14]);
-        Mode.ALPHANUMERIC = new Mode(0x2, [9, 11, 13]);
-        Mode.BYTE = new Mode(0x4, [8, 16, 16]);
-        Mode.KANJI = new Mode(0x8, [8, 10, 12]);
-        Mode.ECI = new Mode(0x7, [0, 0, 0]);
-        QrSegment.Mode = Mode;
-    })(QrSegment = qrcodegen.QrSegment || (qrcodegen.QrSegment = {}));
+  var QrSegment;
+  (function (QrSegment) {
+    /*
+     * Describes how a segment's data bits are interpreted. Immutable.
+     */
+    class Mode {
+      /*-- Constructor and fields --*/
+      constructor(
+        // The mode indicator bits, which is a uint4 value (range 0 to 15).
+        modeBits,
+        // Number of character count bits for three different version ranges.
+        numBitsCharCount
+      ) {
+        this.modeBits = modeBits;
+        this.numBitsCharCount = numBitsCharCount;
+      }
+      /*-- Method --*/
+      // (Package-private) Returns the bit width of the character count field for a segment in
+      // this mode in a QR Code at the given version number. The result is in the range [0, 16].
+      numCharCountBits(ver) {
+        return this.numBitsCharCount[Math.floor((ver + 7) / 17)];
+      }
+    }
+    /*-- Constants --*/
+    Mode.NUMERIC = new Mode(0x1, [10, 12, 14]);
+    Mode.ALPHANUMERIC = new Mode(0x2, [9, 11, 13]);
+    Mode.BYTE = new Mode(0x4, [8, 16, 16]);
+    Mode.KANJI = new Mode(0x8, [8, 10, 12]);
+    Mode.ECI = new Mode(0x7, [0, 0, 0]);
+    QrSegment.Mode = Mode;
+  })((QrSegment = qrcodegen.QrSegment || (qrcodegen.QrSegment = {})));
 })(qrcodegen || (qrcodegen = {}));
diff --git a/Web/public/profile.html b/Web/public/profile.html
new file mode 100644
index 0000000..6588910
--- /dev/null
+++ b/Web/public/profile.html
@@ -0,0 +1,149 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Echoes Behind Closed Doors</title>
+
+    <!-- favicons -->
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="/png/apple-touch-icon.png"
+    />
+    <link rel="icon" type="image/x-icon" href="/ico/favicon.ico" />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="/png/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="/png/favicon-16x16.png"
+    />
+    <link rel="manifest" href="/site.webmanifest" />
+
+    <!-- TODO: social share -->
+
+    <!-- ui stuff -->
+    <!-- temporary ui bundling fix (https://github.com/oven-sh/bun/issues/17243) -->
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/franken-ui@2.0.0-internal.42/dist/css/core.min.css"
+    />
+    <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
+    <script type="module" src="/js/ebcd-common-franken-ui.js"></script>
+    <script type="module" src="/js/ebcd-common-navbar.js"></script>
+    <script type="module" src="/js/ebcd-profile.js"></script>
+    <style>
+      /* latin-ext */
+      @font-face {
+        font-family: "Geist";
+        font-style: normal;
+        font-weight: 100 900;
+        font-display: swap;
+        src: url(https://fonts.gstatic.com/s/geist/v1/gyByhwUxId8gMEwSGFWNPoTcZY7pVQ.woff2)
+          format("woff2");
+        unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
+          U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
+          U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+          U+A720-A7FF;
+      }
+      /* latin */
+      @font-face {
+        font-family: "Geist";
+        font-style: normal;
+        font-weight: 100 900;
+        font-display: swap;
+        src: url(https://fonts.gstatic.com/s/geist/v1/gyByhwUxId8gMEwcGFWNPoTcZY4.woff2)
+          format("woff2");
+        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
+          U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
+          U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+      }
+      /* latin-ext */
+      @font-face {
+        font-family: "Geist Mono";
+        font-style: normal;
+        font-weight: 100 900;
+        font-display: swap;
+        src: url(https://fonts.gstatic.com/s/geistmono/v1/or3nQ6H-1_WfwkMZI_qYFrkdmhHijks9bNn0.woff2)
+          format("woff2");
+        unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
+          U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
+          U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+          U+A720-A7FF;
+      }
+      /* latin */
+      @font-face {
+        font-family: "Geist Mono";
+        font-style: normal;
+        font-weight: 100 900;
+        font-display: swap;
+        src: url(https://fonts.gstatic.com/s/geistmono/v1/or3nQ6H-1_WfwkMZI_qYFrcdmhHijks9bA.woff2)
+          format("woff2");
+        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
+          U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
+          U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+      }
+      @theme {
+        --font-sans: "Geist", sans-serif;
+        --font-mono: "'Geist Mono'", monospace;
+      }
+      :root {
+        font-family: Geist, sans-serif;
+        font-feature-settings: "liga" 1, "calt" 1; /* fix for Chrome */
+      }
+      @media (max-width: 768px) {
+        .uk-subnav > * > :first-child {
+          padding-left: 0.5rem !important;
+          padding-right: 0.5rem !important;
+        }
+      }
+    </style>
+  </head>
+  <body class="bg-background text-foreground">
+    <header
+      class="uk-position-top !uk-position-z-index p-4 flex justify-between !bg-[hsl(var(--muted))]/75 !backdrop-blur-md text-muted-foreground"
+      data-uk-sticky="position:top"
+    >
+      <div class="flex flex-row gap-2">
+        <img src="/png/logo-icon.png" alt="wirm logo" class="!h-[2.5rem]" />
+        <img
+          src="/png/logo-wordmark-blue.png"
+          alt="wirm wordmark"
+          class="!h-[2.5rem]"
+        />
+      </div>
+
+      <nav class="flex">
+        <ul class="uk-subnav uk-subnav-primary">
+          <li class="uk-active"><a href="/">About</a></li>
+          <li>
+            <a href>
+              <span class="mr-2">Account</span>
+              <uk-icon icon="chevron-down"></uk-icon>
+            </a>
+            <div data-uk-dropdown="mode: click">
+              <ul class="uk-dropdown-nav uk-nav">
+                <li id="nav-auth-logIn">
+                  <a href="/auth.html">Authenticate</a>
+                </li>
+                <li id="nav-auth-profile">
+                  <a href="/profile.html">Profile</a>
+                </li>
+                <li id="nav-auth-logOut">
+                  <a href="/profile.html?logOut=true">Log Out</a>
+                </li>
+              </ul>
+            </div>
+          </li>
+          <li><a href="/booth.html">Manage Booth</a></li>
+        </ul>
+      </nav>
+    </header>
+  </body>
+</html>
