From fb2e04f90ef589b1f089534953fc0480ba74cb2b Mon Sep 17 00:00:00 2001
From: William Brawner <me@wbrawner.com>
Date: Mon, 19 Jun 2023 10:15:44 -0600
Subject: [PATCH] WIP: Add static web frontend

---
 .../com/wbrawner/twigs/web/WebRoutes.kt       |  4 +-
 web/src/main/resources/web/img/logo-color.svg |  1 +
 web/src/main/resources/web/img/logo-white.svg | 68 +++++++++++++++
 web/src/main/resources/web/index.html         | 18 ++++
 web/src/main/resources/web/js/index.js        | 16 ++++
 web/src/main/resources/web/style.css          | 85 +++++++++++++++++++
 6 files changed, 190 insertions(+), 2 deletions(-)
 create mode 100644 web/src/main/resources/web/img/logo-color.svg
 create mode 100644 web/src/main/resources/web/img/logo-white.svg
 create mode 100644 web/src/main/resources/web/index.html
 create mode 100644 web/src/main/resources/web/js/index.js
 create mode 100644 web/src/main/resources/web/style.css

diff --git a/web/src/main/kotlin/com/wbrawner/twigs/web/WebRoutes.kt b/web/src/main/kotlin/com/wbrawner/twigs/web/WebRoutes.kt
index 63f4723..566d39a 100644
--- a/web/src/main/kotlin/com/wbrawner/twigs/web/WebRoutes.kt
+++ b/web/src/main/kotlin/com/wbrawner/twigs/web/WebRoutes.kt
@@ -9,12 +9,12 @@ import io.ktor.server.routing.*
 fun Application.webRoutes() {
     routing {
         static {
-            resources("twigs")
+            resources("web")
             default("index.html")
         }
         intercept(ApplicationCallPipeline.Setup) {
             if (!call.request.path().startsWith("/api") && !call.request.path().matches(Regex(".*\\.\\w+$"))) {
-                call.resolveResource("twigs/index.html")?.let {
+                call.resolveResource("web/index.html")?.let {
                     call.respond(it)
                     return@intercept finish()
                 }
diff --git a/web/src/main/resources/web/img/logo-color.svg b/web/src/main/resources/web/img/logo-color.svg
new file mode 100644
index 0000000..81119ac
--- /dev/null
+++ b/web/src/main/resources/web/img/logo-color.svg
@@ -0,0 +1 @@
+<svg height="1024" viewBox="0 0 270.93333 270.93334" width="1024" xmlns="http://www.w3.org/2000/svg"><g stroke-width=".586787" transform="matrix(1.3353892 0 0 1.3353892 -24.297326 -94.719682)"><path d="m74.206857 125.04091v11.17592 5.23648c0 17.67636 14.156819 32.18701 31.698213 32.76205v.02h5.58855 1.08205 1.47576v2.90108 10.82505 8.58703c0 7.40231 3.5483 14.37159 9.53353 18.7273 5.98522 4.35511 13.70792 5.5862 20.75111 3.30948l-3.43798-10.63435c-3.65216 1.18063-7.63409.54513-10.73703-1.71341-3.10351-2.25796-4.93251-5.85085-4.93251-9.68902v-8.58703h2.55428 4.5071 1.08145v-.0177c17.54199-.57505 31.69881-15.08569 31.69881-32.76148v-5.58855-10.82503h-5.58858-7.06137-1.08203-5.58798v.0177c-8.5307.27989-16.26044 3.85518-21.9511 9.48776-4.00892-13.08417-16.02397-22.74562-30.272914-23.21329v-.0177h-1.08143-4.50652-8.14286zm11.176529 11.17592h2.55488 4.50652c11.997434 0 21.603714 9.60688 21.603714 21.60431v5.23648h-1.47283-1.08205-4.50652c-11.997444 0-21.603714-9.60627-21.603714-21.60431zm61.448874 13.72613h4.50595 1.08203 1.47342v5.23705c0 11.99744-9.6063 21.60374-21.60373 21.60374h-4.5071-2.55428v-5.2365c0-11.99744 9.6057-21.60429 21.60371-21.60429z" fill="#1a1a1a"/><path d="m85.383386 136.21683v5.23648c0 11.99804 9.60627 21.60431 21.603714 21.60431h4.50652 1.08205 1.47283v-5.23648c0-11.99743-9.60628-21.60431-21.603714-21.60431h-4.50652z" fill="#bfff00"/></g></svg>
\ No newline at end of file
diff --git a/web/src/main/resources/web/img/logo-white.svg b/web/src/main/resources/web/img/logo-white.svg
new file mode 100644
index 0000000..7c78cd1
--- /dev/null
+++ b/web/src/main/resources/web/img/logo-white.svg
@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="1024"
+   height="1024"
+   viewBox="0 0 270.93333 270.93334"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.4 (unknown)"
+   sodipodi:docname="White.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.35"
+     inkscape:cx="463.34737"
+     inkscape:cy="466.36823"
+     inkscape:document-units="mm"
+     inkscape:current-layer="g831"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="1299"
+     inkscape:window-height="704"
+     inkscape:window-x="67"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-26.06665)">
+    <g
+       id="g831"
+       transform="matrix(1.3353892,0,0,1.3353892,-24.297326,-68.653032)"
+       style="fill:#1a1a1a">
+      <path
+         style="fill:#ffffff;stroke-width:2.9615941"
+         d="M 282.69922 273.10352 L 282.69922 329.50977 L 282.69922 355.93945 C 282.69922 445.15452 354.15167 518.39066 442.68555 521.29297 L 442.68555 521.39453 L 470.89062 521.39453 L 476.35352 521.39453 L 483.80078 521.39453 L 483.80078 536.03711 L 483.80078 590.67188 L 483.80078 634.01172 C 483.80078 671.37222 501.70967 706.54737 531.91797 728.53125 C 562.12621 750.5121 601.10438 756.7253 636.65234 745.23438 L 619.30078 691.5625 C 600.86782 697.52131 580.77035 694.31323 565.10938 682.91406 C 549.44552 671.51782 540.21289 653.3835 540.21289 634.01172 L 540.21289 590.67188 L 553.10547 590.67188 L 575.85352 590.67188 L 581.3125 590.67188 L 581.3125 590.58398 C 669.84938 587.68163 741.30078 514.44266 741.30078 425.23047 L 741.30078 397.02539 L 741.30078 342.38867 L 713.09375 342.38867 L 677.45312 342.38867 L 671.99219 342.38867 L 643.78906 342.38867 L 643.78906 342.47852 C 600.73342 343.89116 561.72156 361.93681 533 390.36523 C 512.76642 324.32759 452.12345 275.56547 380.20703 273.20508 L 380.20703 273.11523 L 374.75 273.11523 L 352.00391 273.11523 L 310.90625 273.11523 L 282.69922 273.10352 z M 649.25 398.78711 L 671.99219 398.78711 L 677.45312 398.78711 L 684.89062 398.78711 L 684.89062 425.21875 C 684.89062 485.77151 636.40623 534.25586 575.85352 534.25586 L 553.10547 534.25586 L 540.21289 534.25586 L 540.21289 507.82812 C 540.21289 447.27536 588.69436 398.78711 649.25 398.78711 z "
+         transform="matrix(0.198132,0,0,0.198132,18.19494,70.930394)"
+         id="path1339" />
+    </g>
+  </g>
+</svg>
diff --git a/web/src/main/resources/web/index.html b/web/src/main/resources/web/index.html
new file mode 100644
index 0000000..d3bd36c
--- /dev/null
+++ b/web/src/main/resources/web/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Twigs</title>
+    <link rel="stylesheet" href="style.css"/>
+</head>
+<body>
+<div id="app">
+    <div class="center">
+        <div class="logo"></div>
+        <noscript>
+            <p>JavaScript is required to use this app</p>
+        </noscript>
+    </div>
+</div>
+<script type="text/javascript" src="js/index.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/web/src/main/resources/web/js/index.js b/web/src/main/resources/web/js/index.js
new file mode 100644
index 0000000..05ec1b6
--- /dev/null
+++ b/web/src/main/resources/web/js/index.js
@@ -0,0 +1,16 @@
+window.onload = () => {
+    const container = document.getElementsByClassName('center')[0]
+    container.innerHTML += `
+    <div class="flex-full-width">
+        <button class="button-primary" onclick="login()">Login</button>
+        <button class="button-secondary" onclick="register()">Register</button>
+    </div>`
+}
+
+function login() {
+    console.log('show login form')
+}
+
+function register() {
+    console.log('show registration form')
+}
\ No newline at end of file
diff --git a/web/src/main/resources/web/style.css b/web/src/main/resources/web/style.css
new file mode 100644
index 0000000..4ed4b6c
--- /dev/null
+++ b/web/src/main/resources/web/style.css
@@ -0,0 +1,85 @@
+html, body {
+    margin: 0;
+    padding: 0;
+    font-family: "Segoe UI", "Product Sans", "Roboto", "San Francisco", sans-serif;
+}
+
+:root {
+    --color-accent: #004800;
+    --color-on-accent: #FFFFFF;
+    --color-on-background: #000000;
+    --logo: url("/img/logo-color.svg");
+    --background-color-primary: #ffffff;
+    --background-color-secondary: #bbbbbb;
+}
+
+@media all and (prefers-color-scheme: dark) {
+    :root {
+        --color-accent: #baff33;
+        --color-on-accent: #000000;
+        --color-on-background: #FFFFFF;
+        --logo: url("/img/logo-white.svg");
+        --background-color-primary: #000000;
+        --background-color-secondary: #333333;
+    }
+}
+
+body {
+    background-image: linear-gradient(var(--background-color-primary), var(--background-color-secondary));
+    height: 100vh;
+    width: 100vw;
+}
+
+#app {
+    height: 100%;
+    width: 100%;
+}
+
+button {
+    border: 1px solid var(--color-accent);
+    border-radius: 1rem;
+    cursor: pointer;
+    font-weight: bold;
+    padding: 1rem;
+}
+
+.flex-full-width {
+    display: flex;
+    flex-direction: row;
+}
+
+.button-primary {
+    background-color: var(--color-accent);
+    color: var(--color-on-accent);
+}
+
+.button-secondary {
+    background-color: var(--background-color-primary);
+    color: var(--color-accent);
+}
+
+.center {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    justify-content: center;
+    width: 100%;
+}
+
+.logo {
+    background-image: var(--logo);
+    background-size: contain;
+    height: 200px;
+    width: 200px;
+}
+
+@media all and (max-width: 400px) {
+    button {
+        width: 100%;
+    }
+
+    .flex-full-width {
+        flex-direction: column;
+    }
+}