1 files changed, 781 insertions, 0 deletions

diff --git a/src/web/style.css b/src/web/style.css
new file mode 100644
index 0000000..3631750
--- /dev/null
+++ b/src/web/style.css
@@ -0,0 +1,781 @@
+:root {
+    --text: #333;
+    --table-border: rgba(16, 24, 40, .1);
+
+    --dark: brightness(.90);
+
+    --bg-blue: rgb(0, 74, 157);
+    --bg-blue-op: rgba(0, 74, 157, .35);
+
+    --bg-green: rgb(0, 128, 0);
+    --bg-green-op: rgba(0, 128, 0, .35);
+
+
+    --bg-yellow: rgb(255, 140, 0);
+    --bg-yellow-op: rgba(255, 140, 0, .35);
+
+
+    --bg-red: rgb(255, 0, 0);
+    --bg-red-op: rgba(255, 0, 0, .35);
+
+    --bg-gray: rgb(112, 128, 144);
+    --bg-gray-op: rgba(112, 128, 144, .35);
+}
+
+* {
+    font-family: sans-serif;
+    box-sizing: border-box;
+}
+
+html {
+    background:
+            linear-gradient(transparent 30rem, white 50rem),
+            linear-gradient(-135deg, transparent 20vw, #004d6e10 25vw, transparent 30vw),
+            linear-gradient(-135deg, transparent 30vw, #706f6f10 35vw, transparent 40vw),
+            linear-gradient(-135deg, transparent 40vw, #f59e0010 45vw, transparent 50vw);
+    overflow-y: scroll;
+}
+
+body {
+    margin: 0;
+    font-size: .8rem;
+    color: var(--text);
+    background-size: contain;
+}
+
+div.headline {
+    position: fixed;
+    display: block;
+    top: 0;
+    z-index: 1000;
+    width: 100%;
+    height: 5rem;
+    align-content: center;
+    background: white;
+    border-bottom: 1px solid var(--table-border);
+}
+
+nav {
+    display: flex;
+    margin: 0 auto;
+    line-height: 1.5rem;
+    max-width: 1140px;
+}
+
+nav a.nav-home {
+    margin: auto 0;
+
+    color: var(--text);
+    line-height: 1.5rem;
+    text-decoration: none;
+
+    font-size: 2rem;
+    font-weight: bold;
+}
+
+nav a.nav-home > img {
+    width: 1.5rem;
+    vertical-align: middle;
+}
+
+nav > ul {
+    display: block;
+    margin: 0 0 0 auto;
+    padding: 0;
+    width: max-content;
+}
+
+nav > ul > li {
+    display: inline-block;
+    padding: 0 1rem;
+}
+
+nav > ul > li.login {
+    margin: 0 0 0 1rem;
+    padding: 0 0 0 2rem;
+    border-left: 1px solid var(--table-border);
+    line-height: 3.5rem;
+}
+
+nav > ul > li.login a {
+    text-decoration: none;
+    text-transform: none;
+    padding: 1rem;
+}
+
+nav .login .user-name {
+    font-weight: bold;
+}
+
+nav > ul > li.login > span {
+    display: inline-block;
+    margin: 0 .5rem;
+}
+
+nav > ul > li.login .user-icon {
+    flex-direction: column;
+    display: inline flex;
+    vertical-align: middle;
+    inline-size: 4rem;
+}
+
+nav > ul > li.login .user-icon img {
+    margin: 0 0 -1em 0;
+    width: 80%;
+    align-self: center;
+}
+
+nav > ul > li.login .user-icon span {
+    padding: 0 .6em;
+    color: white;
+    font-size: .8rem;
+    font-weight: bold;
+    border-radius: 4px;
+    line-height: normal;
+    text-align: center;
+}
+
+nav > ul > li.login .user-icon span.guest {
+    background: darkslategray;
+}
+
+nav > ul > li.login .user-icon span.user {
+    background: darkgreen;
+}
+
+nav > ul > li.login .user-icon span.admin {
+    background: darkred;
+}
+
+nav li a {
+    color: var(--bg-blue);
+    text-transform: uppercase;
+    text-decoration: none;
+    font-weight: 700;
+}
+
+nav li a:hover {
+    text-decoration: underline;
+}
+
+a {
+    color: var(--bg-blue);
+}
+
+.breadcrumps {
+    margin: 0 auto;
+    max-width: 1140px;
+}
+
+.breadcrumps ul {
+    margin: 2px 0;
+    padding: .4rem 1rem;
+    list-style: none;
+    background: #eee;
+}
+
+.breadcrumps ul li {
+    display: inline;
+}
+
+.breadcrumps ul li + li:before {
+    padding: .4rem;
+    color: gray;
+    content: "/\00a0";
+}
+
+.breadcrumps ul li a {
+    color: var(--text);
+    text-decoration: none;
+}
+
+.centered {
+    text-align: center;
+}
+
+.container {
+    margin: auto;
+}
+
+main {
+    margin: 6rem auto 0;
+    min-height: calc(100dvh - 10rem);
+}
+
+main, .container {
+    max-width: 1140px;
+}
+
+footer {
+    width: 100%;
+    height: 4rem;
+    position: relative;
+    align-content: center;
+    display: flex;
+    bottom: 0;
+    padding: 1rem 0;
+    border-top: 1px solid var(--table-border);
+    background: var(--bg-blue);
+    color: white;
+}
+
+footer > .container > div {
+    margin: 0 auto;
+    max-width: 1140px;
+    display: inline-block;
+}
+
+footer > .container > div,
+footer > .container > div:after {
+    content: "-";
+    padding-left: 1rem;
+}
+
+footer > .container > div:last-child,
+footer > .container > div:last-child:after {
+    content: "";
+}
+
+footer svg {
+    height: 1.4rem;
+    color: white;
+    vertical-align: text-bottom;
+}
+
+section {
+    margin: 3rem 0;
+}
+
+form {
+    margin: 1rem 0;
+    padding: 1rem;
+
+    border: 1px solid lightgray;
+    border-radius: 3px;
+    background: #eee;
+
+    text-align: center;
+}
+
+form > h2 {
+    margin: 0;
+}
+
+form.samplecode-input > div {
+    padding: 0.6rem;
+    display: inline-block;
+
+    border: 1px solid lightgray;
+    border-radius: 3px;
+
+    background: white;
+}
+
+form.samplecode-input input {
+    padding: 0;
+
+    border: none;
+    outline: none;
+
+    text-align: left;
+    appearance: textfield;
+    font-size: 1.2rem;
+    font-weight: bold;
+}
+
+form.samplecode-input input:focus-visible {
+    background: lightgreen;
+}
+
+.login-form {
+    width: fit-content;
+    margin: 3rem auto;
+    padding: 2em 5rem;
+
+    border: 1px solid var(--table-border);
+    border-radius: .5rem;
+    background: white;
+}
+
+.login-form form {
+    width: 20rem;
+    margin: 0 auto;
+    display: grid;
+    grid-gap: .5rem;
+
+    border: none;
+    background: none;
+}
+
+.login-form img {
+    margin: 0 auto;
+    width: 4rem;
+    display: block;
+}
+
+.userrole-form {
+    display: inline-block;
+}
+
+.userrole-form form {
+    margin: 0;
+    padding: 0;
+
+    border: none;
+    border-radius: 0;
+    background: none;
+
+    text-align: inherit;
+}
+
+.login-form form *,
+.token-form form * {
+    padding: 0.5rem;
+    border: 1px solid var(--table-border);
+    border-radius: 3px;
+}
+
+.login-form form hr,
+.token-form form hr,
+.userrole-form form hr {
+    padding: 0;
+    width: 100%;
+}
+
+.login-form button,
+.login-form a.btn,
+.token-form button {
+    margin: 1rem 0;
+    background: var(--bg-blue);
+    color: white;
+    border: none;
+}
+
+.userrole-form form select {
+    padding: 0.5rem;
+    border: none;
+    border-radius: 3px;
+    line-height: 1.2rem;
+    font-size: 0.8rem;
+}
+
+.border {
+    padding: 1rem;
+    border: 1px solid var(--table-border);
+    border-radius: .5rem;
+    background: white;
+}
+
+table, .chart {
+    border: 1px solid var(--table-border);
+    padding: 1.5rem;
+
+    border-spacing: 0;
+    border-radius: .5rem;
+
+    background: white;
+}
+
+table {
+    min-width: 100%;
+    font-family: sans-serif;
+}
+
+table.config-table td:first-child {
+    width: 26rem;
+    min-width: fit-content;
+}
+
+table.config-table td > button:last-of-type {
+    float: right;
+}
+
+.border > table {
+    padding: 0;
+    border: none;
+    background: transparent;
+}
+
+.page-control {
+    border-radius: .5rem;
+    padding: 1rem 2rem;
+    text-align: center;
+
+    line-height: 1.75em;
+}
+
+.page-control a {
+    padding: 0 .25rem;
+    font-size: 1.75rem;
+    color: var(--bg-gray);
+    text-decoration: none;
+}
+
+.page-control a[href] {
+    color: var(--bg-blue);
+}
+
+.page-control span {
+    padding: 0 .5rem;
+    vertical-align: text-bottom;
+}
+
+#samples-table.max {
+    width: 100vw;
+    position: fixed;
+    padding: 1rem;
+    top: 0;
+    left: 0;
+    background: white;
+    min-height: 100vh;
+}
+
+table.samples {
+    max-width: 100%;
+    overflow-x: scroll;
+    display: block;
+}
+
+th, td {
+    padding: 0.4rem .2rem;
+
+    line-height: 2rem;
+
+    text-align: left;
+    white-space: nowrap;
+    vertical-align: top;
+}
+
+th {
+    border-bottom: 1px solid var(--bg-gray);
+}
+
+td {
+    border-bottom: 1px solid var(--bg-gray-op);
+}
+
+td, td > a {
+    font-family: monospace;
+}
+
+tr:last-of-type > td {
+    border-bottom: none;
+}
+
+td > small {
+    display: block;
+    text-align: center;
+}
+
+td.patient-id {
+    min-width: 20rem;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+td.bg-blue, th.bg-blue,
+td.bg-green, th.bg-green,
+td.bg-yellow, th.bg-yellow,
+td.bg-red, th.bg-red,
+td.bg-gray, th.bg-gray
+{
+    width: 8rem;
+}
+
+td.bg-blue > small, th.bg-blue > small {
+    background: var(--bg-blue);
+    color: white;
+    border-radius: 0.4rem;
+}
+
+td.bg-green > small, th.bg-green > small {
+    background: var(--bg-green);
+    color: white;
+    border-radius: 0.4rem;
+}
+
+td.bg-yellow > small, th.bg-yellow > small {
+    background: var(--bg-yellow);
+    color: white;
+    border-radius: 0.4rem;
+}
+
+td.bg-red > small, th.bg-red > small {
+    background: var(--bg-red);
+    color: white;
+    border-radius: 0.4rem;
+}
+
+td.bg-gray > small, th.bg-gray > small {
+    background: var(--bg-gray);
+    color: white;
+    border-radius: 0.4rem;
+}
+
+.bg-path {
+    background: var(--bg-gray-op);
+}
+
+.bg-from {
+    background: var(--bg-red-op);
+}
+
+.bg-to {
+    background: var(--bg-green-op);
+}
+
+.bg-path, .bg-from, .bg-to {
+    padding: 0.25rem 0.5rem;
+    border-radius: 3px;
+
+    font-family: monospace;
+}
+
+td.bg-shaded, th.bg-shaded {
+    background: repeating-linear-gradient(140deg, white, #e5e5f5 4px, white 8px);
+}
+
+td.clipboard {
+    cursor: copy;
+}
+
+td.clipboard.clipped {
+    box-shadow: 0 0 1rem lightgreen inset;
+}
+
+.btn {
+    margin: 4px;
+    padding: 4px 8px;
+
+    line-height: 1.2rem;
+
+    border: 0 solid transparent;
+    border-radius: 3px;
+
+    text-decoration: none;
+    font-size: 0.8rem;
+    font-weight: normal;
+
+    cursor: pointer;
+}
+
+.btn:active,
+.btn:hover {
+    filter: drop-shadow(0px 1px 1px var(--bg-gray)) var(--dark);
+}
+
+.btn:active {
+    translate: 0 1px;
+}
+
+.btn.btn-red {
+    background: var(--bg-red);
+    color: white;
+}
+
+.btn.btn-yellow {
+    background: var(--bg-yellow);
+    color: white;
+}
+
+.btn.btn-green {
+    background: var(--bg-green);
+    color: white;
+}
+
+.btn.btn-blue {
+    background: var(--bg-blue);
+    color: white;
+}
+
+.btn.btn-delete:before {
+    content: '\1F5D1';
+    padding: .2rem;
+}
+
+button:disabled,
+.btn:disabled {
+    background: slategray !important;
+    color: lightgray;
+    filter: none;
+    cursor: default;
+}
+
+input.inline {
+    border: none;
+    font-size: 1.1rem;
+    outline: none;
+}
+
+input.inline:focus-visible {
+    background: lightgreen;
+}
+
+.monospace {
+    font-family: monospace;
+    color: #333333;
+    border-bottom: 1px dotted gray !important;
+}
+
+.help {
+    padding: 1rem;
+
+    border: 1px solid darkslategray;
+    border-radius: 3px;
+    background: slategray;
+    color: white;
+}
+
+.help.error {
+    border: 3px dashed red;
+    background: darkorange;
+}
+
+.help .help-header {
+    font-size: 1.2rem;
+    font-weight: bold;
+}
+
+.charts {
+    display: grid;
+    grid-gap: 1em;
+    grid-template:
+            "a b" 28rem
+            "c c" 28rem / 1fr 1fr;
+}
+
+.charts > .grid-left {
+    grid-area: a;
+}
+
+.charts > .grid-right {
+    grid-area: b;
+}
+
+.charts > .grid-full {
+    grid-area: c;
+}
+
+.connection-display {
+    display: grid;
+    grid-template-columns: 10rem 16rem 10rem;
+    place-items: center;
+    width: fit-content;
+    margin: 1em auto;
+}
+
+.connection-display > * {
+    text-align: center;
+    margin: auto 0;
+}
+
+.connection-display .connection {
+    display: block;
+    width: 100%;
+    height: 4px;
+    background: repeating-linear-gradient(to left, white, white 2px, transparent 2px, transparent 8px, white 8px) var(--bg-red);
+}
+
+.connection-display .connection.available {
+    background: var(--bg-green);
+}
+
+.notification {
+    margin: 1rem;
+    padding: .5rem;
+    border-radius: 3px;
+    text-align: center;
+}
+
+.notification.info {
+    color: var(--bg-blue);
+}
+
+.notification.success {
+    color: var(--bg-green);
+}
+
+.notification.notice {
+    color: var(--bg-yellow);
+}
+
+.notification.error {
+    color: var(--bg-red);
+}
+
+.tab {
+    padding: 1rem;
+    border: none;
+    border-radius: 3px 3px 0 0;
+    cursor: pointer;
+    transition: all 0.2s;
+
+    font-weight: bold;
+}
+
+.tab:hover,
+.tab.active {
+    background: var(--bg-gray);
+    color: white;
+}
+
+.tabcontent {
+    border: 2px solid var(--bg-gray);
+    border-radius: 0 .5rem .5rem .5rem;
+    display: none;
+    padding: 1rem;
+    background: white;
+}
+
+.tabcontent.active {
+    display: block;
+}
+
+a.reload {
+    display: none;
+    margin: 0;
+    vertical-align: top;
+    border-radius: 1.4rem;
+}
+
+a.reload::before {
+    content: "⟳";
+    font-size: 1.2rem;
+    vertical-align: top;
+}
+
+a.reload span {
+    display: none;
+}
+
+a.reload:hover span {
+    display: inline;
+}
+
+.new-token {
+    padding: 1rem;
+    background: var(--bg-green-op);
+}
+
+.new-token > pre {
+    margin: 0;
+    border: 1px solid var(--bg-green);
+    padding: .5rem;
+    width: max-content;
+    display: inline-block;
+}
+
+.no-token {
+    padding: 1rem;
+    background: var(--bg-red-op);
+}
+
+.issue-message {
+    font-family: monospace;
+    font-weight: bolder;
+}
+
+.issue-path {
+    font-family: monospace;
+    line-height: 1rem;
+}