Add initial browser UI app

2 files changed, 130 insertions, 0 deletions

diff --git a/browser/static/InclusiveSans-Regular.ttf b/browser/static/InclusiveSans-Regular.ttf
new file mode 100644
index 0000000..3a30e79
--- /dev/null
+++ b/browser/static/InclusiveSans-Regular.ttf
diff --git a/browser/static/styles.css b/browser/static/styles.css
new file mode 100644
index 0000000..73379e7
--- /dev/null
+++ b/browser/static/styles.css
@@ -0,0 +1,130 @@
+:root {
+    --blue: rgb(30, 99, 248);
+    --red: #d42f2f;
+    --yellow: #ff9800;
+    --black: rgb(0, 0, 0);
+    --white: rgb(255, 255, 255);
+    --gray: #666;
+    --light-gray-1: #f2f2f2;
+    --light-gray-2: #f8f6ff;
+    --gold-trans: #ffcd0455;
+
+    --font-family: "Inclusive Sans", sans-serif;
+}
+
+@font-face {
+    font-family: "Inclusive Sans";
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(/static/InclusiveSans-Regular.ttf) format("woff2");
+}
+
+html {
+    font-family: var(--font-family) !important;
+    font-size: 16px;
+}
+
+body {
+    padding: 10px;
+    margin: 0 auto;
+    line-height: 24px;
+}
+
+main {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-between;
+    align-items: flex-start;
+}
+
+a,
+.contrast {
+    color: var(--blue);
+}
+
+h1 {
+    margin-bottom: 40px;
+}
+
+h1 a {
+    color: var(--black);
+    text-decoration: none;
+}
+
+h1:hover a {
+    border-bottom: 2px dotted var(--blue);
+    text-decoration: none;
+}
+
+textarea,
+input {
+    font-family: var(--font-family);
+    font-size: 16px;
+}
+
+button,
+input[type="submit"] {
+    cursor: pointer;
+    font-size: 16px;
+    border-radius: 4px;
+    text-shadow: none;
+    box-shadow: none;
+    padding: 5px 8px;
+    border: 0;
+    background-color: var(--blue);
+    color: var(--white);
+
+    margin-top: 20px;
+}
+
+button.red,
+input[type="submit"].red {
+    background-color: var(--red);
+}
+
+button.blue,
+input[type="submit"].blue {
+    background-color: var(--blue);
+}
+
+button.yellow,
+input[type="submit"].yellow {
+    background-color: var(--yellow);
+}
+
+input[type="text"],
+input[type*="date"] {
+    font-size: 16px;
+    color: var(--black);
+}
+
+input[type="text"]:disabled,
+input[type*="date"]:disabled {
+    color: var(--gray);
+}
+
+main > aside {
+    width: 250px;
+}
+
+main > .results {
+    flex: 1;
+    overflow-y: scroll;
+    max-height: 100%;
+}
+
+table {
+    width: 100%;
+}
+
+th,
+td {
+    min-width: 100px;
+    text-align: left;
+    padding: 7px 5px;
+}
+
+tr:nth-of-type(odd) td {
+    background-color: var(--light-gray-2);
+}